/* ══════════════════════════════════════════════════════════════
   Bench15 version one — screen styles.

   The SCREEN INTERIOR block is copied verbatim from prototype/app.css so the
   running site and the design record cannot drift apart. Left behind: PAGE
   CHROME, BOARD AND FRAME, .boardNote and FLOW, which are the prototype's own
   furniture (annotation layers, phone frames, a tap-through rig) and have
   nothing to do with the product.

   Two things are new at the bottom: the public page shell, which the prototype
   did not need because it drew screens inside frames, and the admin, which the
   prototype does not contain at all.

   ── Fonts ──────────────────────────────────────────────────────
   NOT copied from prototype/fonts.css. Its 210KB of base64 exists solely
   because file:// applies CORS to a woff2 sitting in the same directory. Over
   HTTP that constraint does not exist, so these are ordinary font files.

   Two files, four rules: Lora's 400 and 600 weights ship as byte-identical
   files in the source repo (verified by md5), so 600 is synthetic bold — which
   is exactly what the prototype renders too.
   ══════════════════════════════════════════════════════════════ */

@import 'tokens.css';

@font-face {
  font-family: Lora; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/lora-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: Lora; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/lora-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: Lora; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/lora-400-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: Lora; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/lora-400-italic-latin.woff2') format('woff2');
}

/* ── Reset — prototype/app.css, itself from ../introwalkspersonal ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100dvh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ══ SCREEN INTERIOR ══════════════════════════════════════════════ */
.pad { --inset: 1.25rem; padding: 1.1rem var(--inset) 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.pad > * { min-width: 0; }

/* Uppercase micro-label — the SPA's most recognisable idiom. */
.lbl {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.sect { display: flex; flex-direction: column; gap: 0.45rem; }

/* A full-bleed tinted band, for splitting a screen into what it says and what
   it offers. The cards are white, so on white they had almost nothing to sit
   against; on --bg-base they separate and the page reads as two parts.

   --inset lets it break out of .pad's horizontal padding without knowing what
   that padding is, which differs between the prototype frame and the site. */
.band {
  background: var(--bg-base);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  margin-inline: calc(-1 * var(--inset));
  padding: 1.1rem var(--inset) 1.3rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}

.sect > .lbl { border-bottom: 1px solid var(--stone); padding-bottom: 0.3rem; }

.brand {
  font-family: 'Lora', Georgia, serif; font-weight: 600;
  font-size: 1.35rem; color: var(--brand-dark); letter-spacing: -0.01em;
}
.lede {
  font-family: 'Lora', Georgia, serif; font-size: 1.05rem; line-height: 1.5;
  color: var(--ink);
}
.h2s { font-size: 1.05rem; font-weight: 700; color: var(--brand-dark); line-height: 1.3; }
.big { font-size: 1.25rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -0.01em; }
.p { font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.muted { font-size: 0.85rem; line-height: 1.5; color: var(--ink-muted); }
.tiny { font-size: 0.75rem; line-height: 1.45; color: var(--ink-muted); }
.hr { height: 1px; background: var(--stone); }
.serif { font-family: 'Lora', Georgia, serif; }

/* Buttons — components/HomeHero.module.css (.btnPrimary/.btnSecondary),
   pages/AuthForm.module.css (.btn), pages/TopicSayHelloPage.module.css
   (.submitBtn). ────────────────────────────────────────────────── */
.btnPrimary, .btnSecondary {
  display: inline-block; padding: 0.65rem 1.3rem; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btnPrimary { background: var(--brand); color: var(--white); border: 1.5px solid var(--brand); }
.btnPrimary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btnSecondary { border: 1.5px solid var(--brand); color: var(--brand-dark); background: transparent; }
.btnSecondary:hover { background: var(--brand); color: var(--white); }
.submitBtn {
  width: 100%; padding: 0.85rem 1.5rem;
  background: var(--brand-dark); color: var(--white);
  font-size: 0.98rem; font-weight: 800;
  border: none; border-radius: var(--radius); cursor: pointer;
}
.submitBtn:hover { background: color-mix(in srgb, var(--brand-dark) 85%, black); }
.btnRow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btnCentre { display: flex; justify-content: center; }

/* Cards — pages/SettingsPage.module.css (.section) and the accent-stripe
   field from pages/TopicSayHelloPage.module.css. ────────────────── */
.card {
  background: var(--white); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.stripe {
  background: var(--white);
  border: 1.5px solid var(--stone); border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.flat {
  background: var(--bg-base); border: 1.5px solid var(--stone);
  border-radius: var(--radius); padding: 0.85rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}

/* A posted slot. The hook is the unit of choice, so it leads on type weight. */
.slotTop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.slotTime { font-size: 1rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -0.01em; }
.slotWx { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; }
.slotWho { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.slotName { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dist {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 999px; padding: 0.16rem 0.6rem;
}
.hook {
  font-family: 'Lora', Georgia, serif; font-size: 0.95rem; line-height: 1.45;
  color: var(--ink);
}
.hookBig { font-family: 'Lora', Georgia, serif; font-size: 1.15rem; line-height: 1.5; color: var(--ink); }
.topicLine { font-size: 0.78rem; color: var(--ink-muted); }
.slotFoot { display: flex; justify-content: flex-end; }

/* Weather strip. Honest, and it decides when you would post. */
.wx { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.9rem; }
.wx div { font-size: 0.78rem; color: var(--ink-muted); }
.wx b { color: var(--ink); font-weight: 700; }

/* Spoken-for times: no names, nothing dimmed. */
.times { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; padding: 0.35rem 0; }
.times span { font-size: 1.1rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -0.01em; }

/* Fields — pages/AuthForm.module.css. ──────────────────────────── */
.form { display: flex; flex-direction: column; gap: 0.85rem; }
.fieldGroup { display: flex; flex-direction: column; gap: 0.3rem; }
.label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.labelCaps {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink);
}
.input, .textarea {
  width: 100%; padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--stone); border-radius: calc(var(--radius) / 2);
  font-family: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s;
}
.textarea {
  background: var(--bg-base); border-radius: var(--radius);
  line-height: 1.7; resize: vertical; min-height: 4.5rem; font-size: 0.93rem;
}
.input:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.12);
}
.stem {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.stem .stemText {
  font-family: 'Lora', Georgia, serif; font-size: 0.95rem; color: var(--ink-muted);
  white-space: nowrap;
}
.note { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.5; }
.warn {
  font-size: 0.85rem; line-height: 1.5;
  color: #8a4b00; background: #fdf3e4;
  border-left: 3px solid var(--accent-warm);
  border-radius: calc(var(--radius) / 2); padding: 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}

/* Checkbox rows and topic chips — pages/TopicSayHelloPage.module.css. ── */
.checkList { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border: 1.5px solid var(--stone); border-radius: var(--radius);
  background: var(--bg-base);
  cursor: pointer; font-size: 0.85rem; color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.check:hover { border-color: var(--brand); }
.checkOn { border-color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 14%, var(--white)); }

/* Radio rows, as plain and unstyled as the design implies. */
.opts { display: flex; flex-direction: column; gap: 0.4rem; }
.opt {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; color: var(--ink); cursor: pointer;
}
.opt input { width: 1rem; height: 1rem; accent-color: var(--brand-dark); cursor: pointer; }

/* Segmented pill — pages/TopicMemberRoomPage.module.css (.visOpts/.visOpt). */
.visOpts { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.visOpt {
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--stone));
  border-radius: 999px; background: transparent;
  font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.visOpt:hover { border-color: var(--brand); }
.visOptOn, .visOptOn:hover { border-color: var(--brand); background: var(--brand); color: var(--white); }

/* Selectable tile — pages/TopicConnectPage.module.css (.angleTile). */
.tileGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tile {
  text-align: left; padding: 0.6rem 0.7rem;
  border: 2px solid var(--stone); border-radius: 12px; background: var(--white);
  cursor: pointer; font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.tileOn { border-color: var(--brand-dark); background: var(--brand-dark); }
.tileName { font-size: 0.85rem; font-weight: 800; color: var(--brand-dark); }
.tileOn .tileName { color: var(--white); }

/* Timetable of quarter-hours, for the posting step. */
.qh { display: flex; flex-direction: column; gap: 0.2rem; }
.qhRow {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0.55rem; border-radius: 6px;
  font-size: 0.85rem; cursor: pointer; border: 1.5px solid transparent;
}
.qhRow:hover { background: var(--white); }
.qhRow b { font-weight: 700; color: var(--ink); min-width: 3.2rem; }
.qhRow span { color: var(--ink-muted); font-size: 0.8rem; }
.qhOn { border-color: var(--brand); background: var(--white); }
.qhTaken { color: var(--ink-muted); cursor: default; }
.qhTaken:hover { background: transparent; }
.qhTaken em {
  font-style: normal; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-warm);
}

/* Step numbering inside the two §6 lanes. */
.stepNo {
  font-family: Menlo, Consolas, monospace; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-warm);
}

/* The evening prompt: one affordance, no decline button. */
.centreBlock { display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; text-align: left; }
.expiry { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }

/* Notification strings, shown as strings. */
.strings { display: flex; flex-direction: column; gap: 0.5rem; }
.strings div { display: flex; flex-direction: column; gap: 0.1rem; }
.strings code {
  font-family: Menlo, Consolas, monospace; font-size: 0.8rem;
  background: var(--white); border: 1px solid var(--stone);
  border-radius: 4px; padding: 0.3rem 0.5rem; color: var(--ink);
}

/* Section footer note on a board. */

.shot {
  border: 1.5px dashed var(--stone); border-radius: var(--radius);
  background: var(--bg-base); min-height: 6.5rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
}
.shot span {
  font-family: Menlo, Consolas, monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}

/* Topic tiles carry a hint as well as a name. The hint shows the *range* of a
   subject rather than one example, so a tile cannot be mistaken for somebody's
   actual offer — which is the distinction the two lists on the homepage rest on. */
.tileName { display: block; }
.tileHint {
  display: block; margin-top: 0.3rem;
  font-size: 0.72rem; line-height: 1.4; color: var(--ink-muted);
}
.tileOn .tileHint { color: var(--stone); }

/* What kind of fifteen minutes this is. Distinct from .dist, which is network
   distance — this one is the shape of the exchange, not who the person is.
   Amber rather than green so the two pills are never read as the same axis. */
.mode {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-warm);
  background: color-mix(in srgb, var(--accent-warm) 12%, transparent);
  border-radius: 999px; padding: 0.16rem 0.6rem; white-space: nowrap;
}

/* The location picker. Uses .input so the selects sit with the other fields
   exactly; appearance:none is needed or the platform chrome ignores the radius,
   and the caret is drawn as a background so there is no icon file to load. */
select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2352606e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
  background-size: 0.6rem;
}
.selectRow { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.selectRow select.input { flex: 1 1 10rem; width: auto; }

/* Homepage offer cards: category and time first, then the talk's own title,
   then one line. The scan order is subject → claim, so a reader skimming
   five cards never has to read a paragraph to find out what one is about. */
.cardHead { display: flex; flex-direction: column; gap: 0.2rem; }
/* The title is what the eye should land on. It used to be .h2s at 1.05rem,
   0.15rem above the paragraph under it, which is not a hierarchy — it is two
   things the same size. */
.cardTitle {
  font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  color: var(--brand-dark); letter-spacing: -0.01em;
}
/* Where and when: decision-time facts, so they sit at the foot rather than in
   the header. Location is per-card because one day there will be more than one
   bench, and then it varies per offer. */
.cardFoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem 0.9rem; flex-wrap: wrap;
}
/* When the two do not fit on one line — which at 390px they do not — the button
   drops below and keeps the right edge, rather than sitting under the text.
   Matched on the class, not the element: the prototype uses a <button>, and the
   site uses a <span> because the whole card is already an <a>. */
.cardFoot > .btnPrimary { margin-left: auto; }

/* "Draws on" — where a talk comes from, as three or four names on one line.
   Quieter than the blurb because it is a pointer rather than a claim: a reader
   who knows the names learns a great deal from it, and one who does not loses
   nothing, because the blurb has already said what the talk is about. */
.draws { font-size: 0.8rem; line-height: 1.5; color: var(--ink-muted); }
.draws b { color: var(--ink); font-weight: 600; }
.draws i { font-style: italic; }

/* Where a bench name is resolvable without leaving the page. Collapsed where
   you scan, open where you read: a <summary> on the list, a plain section on
   the talk page. Native <details> — no JavaScript, and it opens on tap, which
   a hover tooltip never would. */
/* A blue, because green reads as brand rather than as "tap this". Not the
   #007bff you used on the How it works link — that is 4.0:1 on white, under
   the 4.5:1 needed for text this size. This is 5.8:1 and the same hue. */
:root { --link: #0b5ed7; --link-hover: #08409a; }
.link, .where > summary { color: var(--link); text-decoration: underline; cursor: pointer; }
.link:hover, .where > summary:hover { color: var(--link-hover); }

.where { font-size: 0.8rem; }
.where > summary {
  list-style: none; display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.where > summary::-webkit-details-marker { display: none; }
.where > summary::after { content: '\25be'; font-size: 0.7em; }
.where[open] > summary::after { content: '\25b4'; }
.whereBody { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0 0.2rem; }
.topicLine b { color: var(--ink); font-weight: 700; }

/* ══ PAGE SHELL (new — the prototype drew screens inside phone frames) ══
   One column, phone measure, centred. The screens were designed at 390px and
   are not stretched here: a fifteen-minute booking is a phone errand. */
.publicBody { background: var(--bg-base); }
.screen {
  max-width: 30rem; margin: 0 auto; min-height: 100dvh;
  background: var(--white); box-shadow: 0 0 24px rgba(0,0,0,0.05);
}
.screen .pad { --inset: 1.35rem; padding: 1.6rem var(--inset) 3rem; gap: 1rem; }
@media (max-width: 30rem) { .screen { box-shadow: none; } }

/* Cards are links here, not divs with a click handler. */
a.stripe { color: inherit; }
a.stripe:hover { border-left-color: var(--brand-dark); }
.backLink { font-size: 0.8rem; color: var(--ink-muted); }
.backLink:hover { color: var(--brand); }

/* 9.4's chips are radio inputs wearing .check, so the page needs no JavaScript
   at all — which is also why the selected one cannot be lost on a failed POST. */
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check:has(input:checked) {
  border-color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand) 14%, var(--white));
}
.check:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ══ ADMIN (new — nothing in the prototype corresponds) ═══════════════
   Allowed to look like a tool. It is one person's back office, it prints
   counts and names, and none of the product's rules about what a reader may
   see apply to the person doing the offering. */
.adminBody { background: var(--bg-base); }
.adminWrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem 4rem; }
.adminHead {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--stone); margin-bottom: 1.5rem;
}
.adminHead nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.adminHead nav a { font-size: 0.9rem; color: var(--ink-muted); }
.adminHead nav a:hover { color: var(--brand); }
.adminHead nav a[aria-current] { color: var(--brand-dark); font-weight: 700; }
.adminHead nav a.quiet { margin-left: auto; font-style: italic; }
.adminMain { display: flex; flex-direction: column; gap: 2rem; }

.panel {
  background: var(--white); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.panel h2 { font-size: 1.05rem; color: var(--brand-dark); }
.panel h3 { font-size: 0.92rem; color: var(--brand-dark); }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.grid th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--stone); padding: 0.4rem 0.6rem 0.4rem 0;
}
table.grid td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--bg-base); vertical-align: top; }
table.grid tr.gone td { color: var(--ink-muted); text-decoration: line-through; }
table.grid td.right, table.grid th.right { text-align: right; padding-right: 0; }
code.code { font-family: Menlo, Consolas, monospace; font-size: 0.9rem; color: var(--brand-dark); }

.rowForm { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.rowForm .fieldGroup { flex: 1 1 8rem; }
.rowForm .input, .rowForm select { padding: 0.5rem 0.6rem; }
select.input { background: var(--white); }
.mini {
  padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600;
  border: 1.5px solid var(--stone); border-radius: var(--radius);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.mini:hover { border-color: var(--brand); color: var(--brand-dark); }
.mini.danger:hover { border-color: var(--danger); color: var(--danger); }
.flash {
  font-size: 0.88rem; padding: 0.6rem 0.8rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--action) 12%, var(--white));
  border-left: 3px solid var(--action); color: var(--ink);
}
.taken { font-size: 0.78rem; color: var(--ink-muted); }
.clash { font-size: 0.78rem; color: #8a4b00; }