/* ParkSyde Employment Pathways — shared styling for the workbook and the
   facilitator console. System fonts only: nothing is fetched, so the pages
   work offline and make no third-party request.

   The accessibility switches are attributes on <html>, set from the guest's
   own preferences: data-size (s|m|l|xl), data-spacing, data-contrast,
   data-calm. They change tokens, not layouts, so every screen honours them
   without each one having to remember to. */
:root {
  --ground: #f5f7f4; --panel: #ffffff; --panel2: #eef2ec; --sunk: #e4e9e2;
  --line: #cfd8cc; --ink: #14201a; --ink2: #3b4a41; --ink3: #56665c;
  --accent: #2c7a4f; --accent-ink: #ffffff; --accent-wash: #e1f0e6;
  --good: #24704a; --good-wash: #e2f2e8;
  --warn: #8a5a00; --warn-wash: #fbf0d9;
  --bad: #a3341b; --bad-wash: #fbe6df;
  --info: #2b5c8a; --info-wash: #e3edf7;
  --focus: #1b5fd1;
  --base: 18px; --lh: 1.6; --ls: 0; --ws: 0;
  --radius: 14px;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1512; --panel: #17201b; --panel2: #1d2822; --sunk: #121a16;
    --line: #2c3a32; --ink: #e9f1ec; --ink2: #b0c0b6; --ink3: #84958b;
    --accent: #5cc98c; --accent-ink: #08130d; --accent-wash: #173323;
    --good: #6fd49b; --good-wash: #153122; --warn: #e8b85a; --warn-wash: #33270f;
    --bad: #ff9a80; --bad-wash: #3a1b12; --info: #8fbcef; --info-wash: #162636;
    --focus: #8ab4ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0f1512; --panel: #17201b; --panel2: #1d2822; --sunk: #121a16;
  --line: #2c3a32; --ink: #e9f1ec; --ink2: #b0c0b6; --ink3: #84958b;
  --accent: #5cc98c; --accent-ink: #08130d; --accent-wash: #173323;
  --good: #6fd49b; --good-wash: #153122; --warn: #e8b85a; --warn-wash: #33270f;
  --bad: #ff9a80; --bad-wash: #3a1b12; --info: #8fbcef; --info-wash: #162636;
  --focus: #8ab4ff; color-scheme: dark;
}
:root[data-size="s"]  { --base: 16px; }
:root[data-size="l"]  { --base: 21px; }
:root[data-size="xl"] { --base: 25px; }
:root[data-spacing="on"] { --lh: 1.9; --ls: 0.04em; --ws: 0.12em; }
:root[data-contrast="on"] {
  --ground: #ffffff; --panel: #ffffff; --panel2: #ffffff; --sunk: #f2f2f2;
  --line: #000000; --ink: #000000; --ink2: #000000; --ink3: #1a1a1a;
  --accent: #003d1f; --accent-ink: #ffffff; --accent-wash: #ffffff;
  --good: #003d1f; --good-wash: #ffffff; --warn: #4d3200; --warn-wash: #ffffff;
  --bad: #6b0f00; --bad-wash: #ffffff; --info: #002a57; --info-wash: #ffffff;
  --focus: #0000ee; color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --calm: 1; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--ink);
  font: 400 var(--base)/var(--lh) var(--ui);
  letter-spacing: var(--ls); word-spacing: var(--ws);
  -webkit-text-size-adjust: 100%;
}
:root[data-calm="on"] *, :root[data-calm="on"] *::before, :root[data-calm="on"] *::after {
  animation: none !important; transition: none !important;
}
a { color: var(--info); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* #main takes focus after each route so a screen reader starts at the new
   page; it is not a control, so it gets no ring (one printed round the
   certificate). */
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.6em; } h2 { font-size: 1.3em; } h3 { font-size: 1.08em; }
p { margin: 0 0 .8em; }
.muted { color: var(--ink3); }
.small { font-size: .85em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }

.print-head { display: none; }

/* Layout */
.wrap { max-width: 860px; margin: 0 auto; padding: 16px; }
.wide { max-width: 1200px; }
.bar {
  position: sticky; top: 0; z-index: 5; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* The ParkSyde seal. One file, parksyde-seal-256.png, a 256px copy of the
   seal ParkSyde Learning serves, local so nothing is fetched from another
   site. It sits on its own white disc so it reads on any theme, and it is
   never recoloured: it is the organisation's mark. */
.brand-seal { width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; flex: none; display: block; }

/* The watermark: the seal, faint, in the corner of the lesson card and the
   job pack. Decoration only — an ::after with no text, so a screen reader
   never meets it — and kept under the content (isolation) so it can never
   sit over a word or a control. It is faint on purpose (UDL 7.3, minimise
   distractions): a guest reading at extra-large text should not have to
   read around it. High contrast and forced colours remove it, because
   "black on white" means exactly that. */
.wm { position: relative; isolation: isolate; overflow: hidden; }
.wm::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -48px; bottom: -48px; width: 240px; height: 240px; border-radius: 50%;
  background: url(parksyde-seal-256.png) center / contain no-repeat;
  opacity: .07;
}
:root[data-theme="dark"] .wm::after { opacity: .10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm::after { opacity: .10; } }
/* Watermarks drawn from ParkSyde's own pictures (learning/wm/, 3 Oct 2026).
   Each is a crop of a picture ParkSyde supplied, with every word taken out,
   because a word behind a lesson is a word a guest has to read around, and
   a button in a picture looks like one they should press:
   - wm-stage: one figure from the "walk beside you" artwork per pathway
     stage — the seedling (Movement), the person freeing a bird (Identity),
     the umbrella over the child (Capability), the ladder to the sun
     (Routine), the open door (Independence). The beige wall was keyed out,
     so only the figure is drawn, in the corner of every lesson step.
   - wm-sunset: the sunset over the water, as a soft band across the top of
     the guest's home card, with nothing written over it.
   - wm-park: Wren over the ridgeline, from the park render, behind the job
     pack and the digital key card.
   All of them are the same kind of thing as the seal above: decoration on
   an ::after or ::before, under the content, gone in high contrast and
   forced colours. */
.wm-stage::after {
  border-radius: 0; right: 10px; bottom: 6px; width: 150px; height: 190px;
  background: center bottom / contain no-repeat; opacity: .11;
}
.wm-stage[data-stage="1"]::after { background-image: url(wm/stage-1-movement.png); }
.wm-stage[data-stage="2"]::after { background-image: url(wm/stage-2-identity.png); }
.wm-stage[data-stage="3"]::after { background-image: url(wm/stage-3-capability.png); }
.wm-stage[data-stage="4"]::after { background-image: url(wm/stage-4-routine.png); }
.wm-stage[data-stage="5"]::after { background-image: url(wm/stage-5-independence.png); }
/* The figures are black ink; on a dark page they turn to light ink, and the
   red stays red (invert, then turn the hue back round). */
:root[data-theme="dark"] .wm-stage::after { filter: invert(1) hue-rotate(180deg); opacity: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-stage::after { filter: invert(1) hue-rotate(180deg); opacity: .16; } }

.wm-park::after {
  border-radius: 0; inset: 0; width: auto; height: auto;
  background: url(wm/park-wren.jpg) center top / cover no-repeat; opacity: .10;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}

/* .card.wm-sunset, not .wm-sunset: .card sets padding later in this file and
   would put the greeting on the photo. Nothing is ever written over it. */
.card.wm-sunset { position: relative; isolation: isolate; overflow: hidden; padding-top: 112px; }
.wm-sunset::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: 0; height: 108px;
  background: url(wm/sunset.jpg) center 40% / cover no-repeat; opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

:root[data-contrast="on"] .wm::after,
:root[data-contrast="on"] .wm-sunset::before { display: none; }
:root[data-contrast="on"] .card.wm-sunset { padding-top: 18px; }
@media (forced-colors: active) { .wm-sunset::before { display: none; } .card.wm-sunset { padding-top: 18px; } }
@media (forced-colors: active) { .wm::after { display: none; } }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Surfaces */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px;
}
.card.sunk { background: var(--panel2); }
.note { border-left: 5px solid var(--info); background: var(--info-wash); padding: 12px 14px; border-radius: 10px; }
.note.good { border-color: var(--good); background: var(--good-wash); }
.note.warn { border-color: var(--warn); background: var(--warn-wash); }
.note.bad  { border-color: var(--bad);  background: var(--bad-wash); }

/* Controls — every target at least 44px, for hands that shake and for
   phones held on a lap. */
button, .btn {
  font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover { background: var(--panel2); }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; }
button.sm { min-height: 36px; padding: 4px 10px; font-size: .9em; }
button[disabled] { opacity: .5; cursor: not-allowed; }
button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); }
input[type=text], input[type=password], input:not([type]), textarea, select {
  font: inherit; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  letter-spacing: var(--ls); word-spacing: var(--ws);
}
textarea { min-height: 120px; resize: vertical; }
label { font-weight: 600; display: block; margin: 0 0 4px; }
/* A tick box or radio button with its words beside it, not above them —
   the plain label rule above stacks them, which on a phone put each box on
   a line of its own, apart from what it means. */
label.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
label.choice input { margin-top: .3em; flex: none; width: 1.15em; height: 1.15em; }
fieldset.field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0; }
fieldset.field legend { font-weight: 600; padding: 0 4px; }
.field + .field { margin-top: 14px; }
.hint { color: var(--ink3); font-size: .88em; margin: 2px 0 6px; }

/* Chips and progress */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: .82em; font-weight: 600; }
.chip.good { background: var(--good-wash); color: var(--good); border-color: transparent; }
.chip.warn { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.chip.bad  { background: var(--bad-wash);  color: var(--bad);  border-color: transparent; }
.chip.info { background: var(--info-wash); color: var(--info); border-color: transparent; }
.meter { height: 10px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.lvl-confident { background: var(--good-wash); color: var(--good); }
.lvl-capable { background: var(--info-wash); color: var(--info); }
.lvl-developing { background: var(--warn-wash); color: var(--warn); }
.lvl-not-observed { background: var(--sunk); color: var(--ink3); }

/* The runner */
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.step-icon { font-size: 1.8em; line-height: 1; }
.stepdots { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; }
.stepdots i { width: 12px; height: 12px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); }
.stepdots i.done { background: var(--accent); border-color: var(--accent); }
.stepdots i.here { outline: 3px solid var(--focus); outline-offset: 1px; }
.option {
  display: block; width: 100%; text-align: left; justify-content: flex-start;
  margin: 8px 0; font-weight: 500;
}
.option.right { border-color: var(--good); background: var(--good-wash); }
.option.wrong { border-color: var(--bad); background: var(--bad-wash); }
.feedback { margin-top: 10px; }
.ex { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--panel2); }
.ex.good { border-color: var(--good); background: var(--good-wash); }
.ex.bad { border-color: var(--bad); background: var(--bad-wash); }
.ex .lbl { font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.ex .txt { white-space: pre-wrap; margin: 4px 0; }
.ing { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.ing span { padding: 4px 10px; border-radius: 999px; font-size: .85em; font-weight: 600; background: var(--sunk); color: var(--ink3); }
.ing span.on { background: var(--good-wash); color: var(--good); }
.ing span.need { outline: 2px dashed var(--warn); }
.spot-part { display: inline; padding: 2px 3px; border-radius: 6px; cursor: pointer; border-bottom: 2px dotted var(--ink3); line-height: 1.9; }
.spot-part[aria-pressed="true"] { background: var(--warn-wash); }
.spot-part.flaw-found { background: var(--good-wash); }
.spot-part.flaw-missed { background: var(--bad-wash); }
.spot-part.false-alarm { text-decoration: line-through; }
.timer { font-size: 3em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.breathe { width: 140px; height: 140px; margin: 10px auto; border-radius: 50%; background: var(--accent-wash); border: 3px solid var(--accent); animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1); } }
.nav { display: flex; gap: 10px; margin-top: 18px; }
.nav .spacer { flex: 1; }
.handover { border: 3px solid var(--accent); }
.levels { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.levels button { flex-direction: column; align-items: flex-start; text-align: left; min-height: 72px; }
.levels button small { font-weight: 400; color: var(--ink2); }
.help-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.say { font-size: .9em; }
.selfrate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* Dialogs */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; z-index: 20; }
.modal { background: var(--panel); color: var(--ink); border-radius: var(--radius); max-width: 640px; width: 100%; padding: 20px; border: 1px solid var(--line); }
.toast { pointer-events: none; position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 12px; z-index: 30; max-width: 90vw; }

/* Tables (console) */
table { width: 100%; border-collapse: collapse; font-size: .92em; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink3); font-weight: 600; }
.table-scroll { overflow-x: auto; }

@media (max-width: 560px) {
  /* Keep the header to one row on a phone where it fits (it still wraps at
     extra-large text rather than scroll sideways): the brand shrinks to its icon,
     so the lesson gets the screen rather than the toolbar. */
  .bar .wrap { gap: 6px; }
  .bar .brand > span { display: none; }
  .bar button.sm { padding: 4px 8px; white-space: nowrap; }
  .wrap { padding: 12px 16px; }
  .card { padding: 14px; }
  /* Back and Read-to-me share the first row; Next takes a full row of its
     own. Four flex items in one row (the spacer was one) squeezed "Come back
     to this later →" into a five-line column 60px wide. */
  .nav { flex-wrap: wrap; }
  .nav .spacer { display: none; }
  .nav button { flex: 1 1 40%; white-space: nowrap; }
  .nav #next { flex-basis: 100%; white-space: normal; }
}

/* Print — the job pack and the report are printed (or saved as PDF), so
   they get a clean page: no bars, no buttons, black on white. */
@media print {
  :root { --ground: #fff; --panel: #fff; --ink: #000; --ink2: #222; --ink3: #444; --line: #bbb; --base: 11pt; }
  body { background: #fff; }
  .bar, .noprint, button, .nav, .help-strip, .toast { display: none !important; }
  /* A printed page has no header bar, so the seal moves onto the page
     itself (.print-seal), and the watermark is drawn as a real image:
     browsers drop background images when printing unless asked. */
  .wm::after { display: none; }
  .print-head { display: flex !important; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; }
  .print-head img { width: 14mm; height: 14mm; border-radius: 50%; }
  main:focus, [tabindex="-1"]:focus { outline: none !important; }
  .card { border: none; padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .page-break { break-before: page; }
  a { color: #000; text-decoration: none; }
}

/* The lesson's introduction video, in the panel before each lesson (portrait, captions burned in). */
.lesson-video { display: block; width: 100%; max-width: 300px; max-height: 46vh; margin: 6px auto; border-radius: 12px; background: #000; }

/* ------------------------------------------------------------------ */
/* Title pages: the workbook's and the facilitator guide's opening     */
/* screens. A title (what this is, who it is for), the five-stage path, */
/* then "Where to next?" as a few big doors, the likeliest one first.  */
/* Asked for on 14 October 2026: "a title page and clear options at    */
/* the start on where to navigate next".                               */
/* ------------------------------------------------------------------ */
.cover { position: relative; isolation: isolate; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 184px 20px 18px; }
.cover::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 170px;
  background: url(wm/sunset.jpg) center 40% / cover no-repeat; opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.cover .seal { position: absolute; top: 96px; left: 18px; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--panel); background: var(--panel); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.cover .kicker { font-size: .78em; letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); font-weight: 700; margin: 0; }
.cover h1 { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 2.05em; line-height: 1.08; margin: 4px 0 6px; letter-spacing: -.01em; }
.cover .sub { font-size: 1.08em; color: var(--ink2); margin: 0; }
:root[data-contrast="on"] .cover::before { display: none; }
:root[data-contrast="on"] .cover { padding-top: 104px; }
:root[data-contrast="on"] .cover .seal { top: 16px; }
@media (forced-colors: active) { .cover::before { display: none; } .cover { padding-top: 104px; } .cover .seal { top: 16px; } }

/* The five stages of the course, as a path. */
.stagestrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: stage; }
.stagestrip li { text-align: center; font-size: clamp(9px, 2.4vw, 12.5px); letter-spacing: -.02em; font-weight: 700; color: var(--ink3); position: relative; white-space: nowrap; line-height: 1.2; }
.stagestrip li img { display: block; width: 40px; height: 40px; object-fit: contain; margin: 0 auto 2px; }
.stagestrip li + li::before { content: "›"; position: absolute; left: -6px; top: 12px; color: var(--ink3); font-size: 1.3em; }
.stagestrip li.here { color: var(--accent); }
:root[data-theme="dark"] .stagestrip img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stagestrip img { filter: invert(1) hue-rotate(180deg); } }

/* "Where to next?" — big, plain doors. */
.doors-h { font-family: 'Bitter', Georgia, serif; font-size: 1.3em; margin: 18px 0 8px; }
.doors { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.door { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; min-height: 76px; padding: 14px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font: inherit; cursor: pointer; }
.door:hover, .door:focus-visible { border-color: var(--accent); }
.door .ic { font-size: 1.7em; line-height: 1; flex: none; width: 1.4em; text-align: center; }
.door .tx { flex: 1; min-width: 0; }
.door b { display: block; font-size: 1.08em; line-height: 1.25; }
.door small { display: block; color: var(--ink2); font-size: .9em; margin-top: 2px; line-height: 1.35; }
.door .go { flex: none; font-size: 1.3em; color: var(--ink3); }
.door.main { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.door.main small, .door.main .go { color: var(--accent-ink); opacity: .9; }
.door.wide { grid-column: 1 / -1; }
.sechead { display: flex; align-items: center; gap: 10px; }
.sechead img { width: 36px; height: 36px; object-fit: contain; }
:root[data-theme="dark"] .sechead img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sechead img { filter: invert(1) hue-rotate(180deg); } }

/* The staff gate (staff-gate.js): while it is shut, only it shows. */
body.gated > *:not(#staffGate) { display: none !important; }
.gatebox { max-width: 520px; margin: 12vh auto 0; padding: 24px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.gatebox img { width: 72px; height: 72px; border-radius: 50%; }
.gatebox h1 { font-family: 'Bitter', Georgia, serif; font-size: 1.6em; margin: 10px 0 8px; }
.gatebox .gateacts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Tap-to-choose answers under a job pack field (choices.js). 44px targets,
   wrapping, no hover-only behaviour: the handoff's mobile rules. */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; align-items: center; }
.picks > .small { flex-basis: 100%; }
.pick { min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel2); color: inherit; font: inherit; font-size: .95em; text-align: left; line-height: 1.3; cursor: pointer; max-width: 100%; }
.pick:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }