/* Daisee Work — the member portal.
 *
 * Layout follows a dashboard reference Billy chose (2026-08-21): dark rail on
 * the left, work in the middle, a glance column on the right, stat tiles
 * across the top. What was NOT copied: the decoration. No donut chart of four
 * numbers, no stock avatars, and the reference's gold gives way to Daisee's
 * own cream — a note that is coral on the phone is coral here, and the page
 * it sits on is the same paper.
 *
 * Design rules, because they are decisions rather than taste:
 *
 * - Type starts at 18px and never drops below 16. This is a low-vision
 *   product; "small print" has no place in it.
 * - Focus rings are LOUD and never removed. Most of the people paying for
 *   this navigate by keyboard, and a focus ring is their cursor.
 * - Nothing is conveyed by colour alone.
 * - Hit targets are 44px minimum, the same floor the apps use.
 * - Three columns collapse to one under 1100px, sidebar first. A dashboard
 *   that only works at desk width is a dashboard half the users can't reach.
 */

:root {
  --paper: #eeece0;
  --card: #ffffff;
  --ink: #141414;
  --ink-muted: #5a5a5a;
  --line: rgba(0, 0, 0, 0.12);
  --dark: #16181c;            /* the sidebar; same family as the app's bar */
  --dark-ink: #f2f0e8;
  --accent: #0b5fa5;          /* 7.0:1 on paper — links and primary buttons */
  --accent-ink: #ffffff;
  --warm: #c79a52;            /* the welcome band, from the reference */
  --warm-ink: #1c1408;        /* 7.1:1 on --warm; white would be 2.6:1 */
  --focus: #b8121b;           /* deliberately not the accent: a focus ring
                                 that matches the button it is on is invisible */
  --danger: #a4161a;
  --radius: 16px;
  --measure: 68ch;            /* long lines are hard to track back from */
}

* { box-sizing: border-box; }

/* `hidden` must actually hide.
 *
 * The attribute works by setting `display: none` in the BROWSER's stylesheet,
 * which any explicit `display` in this file outranks — so `.centre-page`
 * (grid), `.layout` (grid) and `.btn` (inline-flex) all ignored it, and the
 * sign-in card sat on top of the dashboard pushing it down the page
 * (Billy, 2026-08-22). This is the one rule that has to win. */
[hidden] { display: none !important; }

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif;
  line-height: 1.6;
}

/* ---- Focus: the single most important rule in this file ---------------- */

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
  z-index: 20;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---- Typography -------------------------------------------------------- */

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 0 0 18px; }
h2 { font-size: 1.3rem; margin: 30px 0 12px; }
h2.flush { margin-top: 0; }
h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 10px;
}

p { max-width: var(--measure); }
.lede { font-size: 1.1rem; }
.muted { color: var(--ink-muted); }

.plain-list { padding-left: 1.2em; }
.plain-list li { margin-bottom: 10px; }

/* ---- Signed-out / loading --------------------------------------------- */

.centre-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.signin-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px;
  max-width: 620px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.signin-mark { height: 78px; width: auto; display: block; margin: 0 auto 18px; }
.signin-card h1 { text-align: center; }
.spinner-text { font-size: 1.05rem; color: var(--ink-muted); }

/* ---- The three columns ------------------------------------------------- */

.layout {
  display: grid;
  /* Two columns (Billy, 2026-08-22). The rail duplicated what was already on
     the page — the plan sits on the Membership panel and in a tile, and
     "latest meetings" repeated the list directly below it. Two columns of
     real content beat three where one is an echo. */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  align-items: start;
  min-height: 100vh;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- Sidebar ----------------------------------------------------------- */

.sidebar {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: 22px;
  padding: 24px 16px;
  position: sticky;
  top: 20px;
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

/* The drawn wordmark rather than type (2026-08-22). It is white-on-dark by
   design, which is exactly what the rail is; `width`/`height` are on the tag
   so the sidebar doesn't jump while it loads. */
.wordmark { margin: 4px 8px 26px; }

.wordmark img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}

.nav-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-list li { margin-bottom: 6px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--dark-ink);
  font: inherit;
  font-size: 1.02rem;
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.09); }
.nav-item.is-current {
  background: var(--warm);
  color: var(--warm-ink);
  font-weight: 700;
}
.nav-glyph { font-size: 1.1rem; width: 1.4em; text-align: center; }

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 14px;
  margin-top: 14px;
}
.who-name {
  margin: 0 8px 4px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.btn-link.on-dark { color: #9ec9f0; }

/* ---- Main -------------------------------------------------------------- */

.main {
  background: var(--card);
  border-radius: 22px;
  padding: 30px;
  min-height: calc(100vh - 40px);
}

/* ---- The welcome band -------------------------------------------------- */

.welcome {
  background: var(--warm);
  color: var(--warm-ink);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.welcome-line {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  max-width: none;
}
.welcome-sub { margin: 4px 0 0; max-width: none; }

.btn-onwarm { background: #fff; color: var(--ink); }
.btn-onwarm:hover { background: #f1ece2; }

/* ---- Stat tiles -------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 30px;
}
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.tile dt {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.tile dd {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ---- Cards ------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 18px;
  max-width: var(--measure);
}
.plan-line { white-space: pre-line; margin: 0 0 4px; }

/* ---- Buttons ----------------------------------------------------------- */

button { font: inherit; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #094c84; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.55);
}
.btn-secondary:hover { background: rgba(0, 0, 0, 0.05); }
.btn-dark { background: #141414; color: #fff; }
.btn-dark:hover { background: #2b2b2b; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

/* Said, not shown. Used on links that leave the page: a sighted reader has
 * the whole card as context, a screen-reader user arriving on the button
 * alone does not, and a tab opening unannounced loses their place. Clipped
 * rather than `display: none`, which would take it out of the accessibility
 * tree along with everything else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  font-size: 0.98rem;
  padding: 12px 4px;
  min-height: 44px;
}

/* ---- Notes list -------------------------------------------------------- */

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.note-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.note-card button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px;
  color: inherit;
}
.note-card .title { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.note-card .preview {
  margin: 0 0 12px;
  max-width: none;
  /* Three lines of the meeting itself: six notes called "Weekly catch-up"
     are six identical cards without it. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-card .meta { font-size: 0.9rem; margin: 0; opacity: 0.75; }

/* ---- Scanned history --------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.filter-chip {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  background: none;
  color: var(--ink);
  font-size: 0.95rem;
}
.filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}

.scan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.scan-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--warm);   /* the feature's colour, as a spine */
  border-radius: 14px;
  padding: 18px 20px;
}
.scan-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 8px;
}
.scan-feature { font-weight: 700; }
.scan-when { color: var(--ink-muted); font-size: 0.9rem; }
/* Text and photo side by side, text first — and `wrap`, NOT `wrap-reverse`.
   The reverse flips the cross axis, so `flex-start` aligned the text to the
   BOTTOM of a tall photo and left a hole under the title (Billy, 2026-08-22).
   Plain wrap also stacks text above photo on a narrow screen, which is the
   order the DOM already says it should be. */
.scan-body {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}
.scan-text {
  margin: 0;
  flex: 1 1 22rem;
  max-width: var(--measure);
  white-space: pre-wrap;   /* a read keeps its paragraphs */
}
/* The thumbnail is a real button, so it is reachable by keyboard and
   announced as something you can press. */
.scan-shot {
  flex: 0 0 auto;
  width: 180px;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: none;
  line-height: 0;      /* kills the inline-image descender gap */
}
.scan-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.scan-shot:hover { border-color: rgba(0, 0, 0, 0.4); }

/* ---- Enlarged photo ---------------------------------------------------- *
 * A native <dialog>, not a div: it comes with a focus trap, Escape to close
 * and inertness for the rest of the page — all the things a hand-rolled
 * lightbox gets wrong for keyboard and screen-reader users.
 */

.lightbox {
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.72); }

.lightbox img {
  display: block;
  max-width: 92vw;
  max-height: calc(92vh - 84px);   /* room for the bar below */
  width: auto;
  height: auto;
  margin: 0 auto;
}
.lightbox-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.lightbox-caption { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

/* ---- One walk ---------------------------------------------------------- */

.walkbox { width: min(92vw, 760px); }
.walkbox-body { padding: 22px 24px 6px; }
.walkbox-body h2 { margin: 0 0 4px; }
.mapbox-map {
  width: 100%;
  height: min(54vh, 440px);
  margin: 14px 0 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.card-holder {
  display: flex;
  justify-content: center;
  min-height: 40vh;
  margin: 4px 0 10px;
}
.card-preview {
  /* The canvas is 1080px wide; this is what scales it to fit the dialog. */
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.small { font-size: 0.85rem; }

/* The walk row is a button now — it opens the map. */
.walk-item:hover { background: #fffdf8; }
.cap-note {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 22px;
}

/* ---- Walks -------------------------------------------------------------- */

.walk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

/* Two targets in one row: the thumbnail opens the map, the rest opens the
   cards. They are separate buttons rather than one — a button inside a button
   is invalid, and a screen-reader user gets two clearly named choices instead
   of one ambiguous one. */
.walk-item {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
}
.walk-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  border-radius: 12px;
  line-height: 0;
}
.walk-open {
  flex: 1 1 18rem;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 0;
  color: inherit;
  font: inherit;
  border-radius: 10px;
}
.walk-thumb:hover .walk-route { border-color: rgba(0, 0, 0, 0.4); }
.walk-open:hover .walk-when { text-decoration: underline; }
.walk-route {
  flex: 0 0 auto;
  width: 150px;
  height: 110px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* The canvas backing store is 2x this, so it stays crisp on a retina
     screen; these two lines are what scale it back down. */
  display: block;
}
.walk-facts { flex: 1 1 auto; }
.walk-when { font-weight: 700; margin: 0 0 6px; }
.walk-numbers { margin: 0; color: var(--ink-muted); }
.walk-numbers strong { color: var(--ink); font-weight: 700; }

/* ---- A single note ----------------------------------------------------- */

.note-page { max-width: var(--measure); }

/* The print button had only its own top margin, so it sat almost against the
   first section card. 18px matches the gap BETWEEN the cards, which is the
   rhythm the rest of the page is already keeping. It costs the PDF nothing:
   the row is `no-print`, so it and its margin both vanish. */
.note-page .btn-row { margin-bottom: 18px; }


.section-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.section-card ul { margin: 0; padding-left: 1.3em; }
.section-card li { margin-bottom: 12px; }

.turn { margin-bottom: 18px; }
.turn .speaker { font-weight: 700; margin: 0 0 2px; }
.turn .said { margin: 0; }

/* ---- Renaming speakers ------------------------------------------------- */

.speaker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.speaker-row label { min-width: 9.5em; font-weight: 600; }
.speaker-row input {
  font: inherit;
  padding: 12px 14px;
  min-height: 48px;
  min-width: 14em;
  flex: 1;
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

/* ---- Status line ------------------------------------------------------- */

.status {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 15;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  max-width: 34rem;
}
.status:empty { display: none; }
.status[data-tone="error"] {
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}

/* ---- Narrow screens ---------------------------------------------------- */

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
  .sidebar, .main {
    position: static;
    min-height: 0;
  }
  .sidebar { padding: 18px 14px; }
  .nav-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .nav-list li { margin: 0; }
  .main { padding: 22px 18px; }
  .status { left: 12px; right: 12px; max-width: none; }
}

/* Phones: one item per line.
 *
 * The wrap above is right on a tablet, where five items make a tidy row. On a
 * phone it breaks into twos, which reads as three uneven rows of unrelated
 * pairs rather than a list. Stacking costs vertical space — five rows before
 * the content instead of three — so the rows also lose a little height here.
 * 48px is still above the 44px floor. */
@media (max-width: 760px) {
  .nav-list { display: block; }
  .nav-list li { margin: 0 0 4px; }
  .nav-item { min-height: 48px; padding: 8px 14px; }
}

/* ---- The letterhead --------------------------------------------------- *
 * Screen-hidden, print-only. It exists so the PDF that comes out of the
 * portal is the SAME DOCUMENT the phone produces — same mark, same line of
 * provenance, same rule, same paper tint. Someone who has had notes from
 * Daisee before should not be able to tell which device made this one.
 * Kept in step with `NotesPDF.swift` / `NotesPdf.kt` by hand.
 */

.letterhead,
.letterhead-foot { display: none; }

/* ---- Print: this IS the PDF ------------------------------------------- *
 * No library, no download the browser has to hand to a screen reader —
 * the platform's own "Save as PDF" produces a tagged, selectable document,
 * and the user keeps control of paper size and margins.
 *
 * The paper tint is deliberate and must survive: browsers strip backgrounds
 * from printed pages unless the user ticks "background graphics", so the
 * colour is asked for with `print-color-adjust: exact`. If a printer drops
 * it anyway the page is still black on white, which is a fine fallback.
 */

@page {
  size: A4;
  margin: 18mm 16mm 20mm;
}

@media print {
  body {
    background: var(--paper);
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The whole dashboard falls away; only the document prints. */
  .no-print,
  .sidebar,
  .skip-link,
  .lightbox,
  .status { display: none !important; }
  .layout { display: block; padding: 0; max-width: none; }
  .main { padding: 0; border-radius: 0; background: none; min-height: 0; }

  .letterhead {
    display: block;
    text-align: center;
    margin: 0 0 22pt;
  }
  .letterhead img { height: 62pt; width: auto; }
  .letterhead p {
    /* Georgia, as in the app: the one serif on the page, and the reason the
       provenance line reads as a letterhead rather than a caption. */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    margin: 12pt 0 0;
    max-width: none;
  }
  .letterhead hr {
    border: none;
    border-top: 0.5pt solid rgba(0, 0, 0, 0.25);
    margin: 12pt 0 0;
  }
  .letterhead-foot {
    display: block;
    font-size: 8pt;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 18pt;
    padding-top: 8pt;
    border-top: 0.5pt solid rgba(0, 0, 0, 0.15);
  }

  #note-title { font-size: 17pt; margin-bottom: 4pt; }
  #note-meta { font-size: 9pt; margin: 0 0 16pt; }

  .section-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 14pt;
    break-inside: avoid;
  }
  .section-card h3 { font-size: 11pt; color: #141414; margin-bottom: 4pt; }
  .section-card li { margin-bottom: 4pt; }

  .turn { break-inside: avoid; margin-bottom: 10pt; }
  h1, h2, h3 { break-after: avoid; }
  .note-page { max-width: none; }
  a[href]::after { content: ""; }   /* no URL soup in the printed page */
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Windows High Contrast / forced colours: let the OS win. */
@media (forced-colors: active) {
  .btn, .note-card, .card, .tile, .sidebar {
    border: 1px solid CanvasText;
  }
  .nav-item.is-current { border: 2px solid CanvasText; }
}

/* --- The free allowance dial ---------------------------------------------
 *
 * A ring, a number, and the same number in a sentence beside it. The ring is
 * `aria-hidden`: it repeats what the sentence says, and a screen reader
 * announcing "circle, 60 percent" adds nothing but noise.
 *
 * Colour is not doing the work either. The ring shows the proportion used;
 * the sentence says how many are left. Under forced colours the two rings
 * would collapse to one system colour, so the used arc keeps a thicker
 * stroke to stay distinguishable.
 */
.allowance {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.dial {
  width: 140px;
  height: 140px;
  flex: none;
}

.dial-track,
.dial-used {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.dial-track { stroke: rgba(0, 0, 0, 0.10); }

.dial-used {
  stroke: var(--accent);
  /* 2π × 52. Set by script as `dasharray: used gap`. */
  stroke-dasharray: 0 327;
  transition: stroke-dasharray 600ms ease-out;
}

/* All of it spent. Not alarm-red — nothing has broken, and the meter isn't
   even enforced yet; this is the colour of "worth knowing". */
.dial-used.dial-spent { stroke: var(--danger); }

.dial-number {
  font-size: 34px;
  font-weight: 800;
  fill: var(--ink);
}

.allowance-words { min-width: 16ch; flex: 1 1 22ch; }

.allowance-line {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.allowance-words p + p { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .dial-used { transition: none; }
}

@media (forced-colors: active) {
  .dial-track { stroke: GrayText; }
  .dial-used { stroke: Highlight; stroke-width: 16; }
  .dial-number { fill: CanvasText; }
}

/* --- Setting up the computer extension -----------------------------------
 *
 * Numbered steps, and each one's video folded away until asked for. Three
 * autoloading players would make "two minutes" a lie before the reader had
 * done anything, so the iframes carry `data-src` and are only pointed at
 * Vimeo the first time their step is opened.
 */
.setup-steps {
  counter-reset: setup-step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.setup-steps > li {
  counter-increment: setup-step;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.setup-steps > li:first-child { border-top: 0; padding-top: 6px; }

.setup-steps > li::before {
  content: counter(setup-step);
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
}

.setup-steps > li > p { margin: 8px 0 0; }

.step-video { margin-top: 10px; }

/* The disclosure is a real control, so it gets a real target and a real
   focus ring — `summary` defaults to neither. */
.step-video > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.step-video > summary:hover { text-decoration: underline; }

.step-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: #000;
}

kbd {
  font: inherit;
  font-weight: 700;
  font-size: 0.95em;
  background: var(--card);
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 8px;
  padding: 1px 9px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .setup-steps > li { grid-template-columns: 44px 1fr; gap: 8px 14px; }
  .setup-steps > li::before { width: 44px; height: 44px; font-size: 1.15rem; }
}

/* A screenshot with its caption. Bordered because the picture is itself a
 * browser window — without an edge it reads as part of this page rather than
 * a picture of another one. */
.shot { margin: 20px 0 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.shot figcaption {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 1rem;
}

/* One offer, two audiences. `pointer: coarse` is the primary input being a
 * finger — a touchscreen laptop still reports `fine` because it has a mouse,
 * so a machine that CAN install an extension keeps the install button. The
 * touch version still links to the store underneath, so nothing is ever
 * locked away by a wrong guess. */
.on-touch { display: none; }
@media (pointer: coarse) {
  .on-desktop { display: none; }
  .on-touch { display: block; }
}

/* A statement, not a warning: nothing has gone wrong, this simply happens
 * elsewhere. Hence the paper tint and a plain left rule rather than a colour
 * that says "error". */
.notice {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}