/* PageFriction design system: the pieces every dashboard screen shares. Values come from tokens.css.
   Parts 1 to 7 are the rules of brand/kit/kit.css, copied as they are; what only the kit's own page
   uses stays behind, and so does what no screen uses yet (state chips, the stacked card, the yellow
   "Do this first" card). Part 8 adjusts three rules for the dashboard and waits for the owner before
   going back into the kit. Part 9 is new. */

/* ── 1. Fonts and base (kit) ── */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 5; padding: 10px 14px; border-radius: var(--r-m);
  background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--yellow); }

.fine { font-size: 14px; line-height: 1.45; color: var(--ink-500); }
.ico { flex: none; }

/* ── 2. Sidebar (kit) ── */
/* One sidebar, two states. Open: paper, with names. Minimized: a narrow rail of icons in the yellow
   wash. A checkbox inside the sidebar holds the state, so it works without JavaScript. */
.pf-side { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 10px; background: var(--paper); transition: background-color 0.25s ease; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 8px; padding: 0 2px 0 6px; }
.pf-brand img { max-width: none; }
.pf-toggle { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--ink-700); cursor: pointer; transition: background-color 0.12s ease; }
.pf-toggle:hover { background: var(--yellow-wash); color: var(--ink); }
.pf-toggle:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.when-min { display: none; }

/* A section of the sidebar opens with its icon and a larger title. White space separates the
   sections: there are no divider lines. */
.pf-sec { display: grid; gap: 2px; margin-top: 20px; }
.pf-sec:first-child { margin-top: 12px; }
.pf-sec:last-of-type { margin-bottom: 20px; }
.sec-head {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px 5px 5px;
  border-radius: var(--r-m); color: var(--ink); font: 700 17px/1.2 var(--font-display); letter-spacing: -0.012em; text-decoration: none; transition: background-color 0.12s ease;
}
.sec-head:hover { background: var(--yellow-wash); }
.sec-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--canvas); transition: background-color 0.12s ease; }
.sec-head.is-current .sec-ico { background: var(--yellow); }
.sec-count, .count {
  flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--gray-wash); color: var(--ink); font-weight: 700; font-size: 12.5px; line-height: 1; font-variant-numeric: tabular-nums;
}

.switch-row, .pf-acct {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 7px 8px 7px 7px;
  border-radius: var(--r-m); color: var(--ink); text-decoration: none; transition: background-color 0.12s ease;
}
.switch-row { margin-bottom: 8px; background: var(--canvas); }
.switch-row:hover, .pf-acct:hover { background: var(--yellow-wash); }
.switch-row > .ico, .pf-acct > .ico { width: 16px; height: 16px; color: var(--ink-500); }
.pf-acct { margin-top: auto; }

.client-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--paper); box-shadow: var(--shadow-1); }
.client-tile .ico { color: var(--ink); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); font: 700 15px/1 var(--font-display); }
.who { display: grid; min-width: 0; line-height: 1.3; }
.who strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.who span { overflow: hidden; font-size: 12.5px; font-weight: 500; color: var(--ink-500); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.wait-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 6px 10px; margin: 2px 0 4px; padding: 6px 8px 8px 13px; color: var(--ink); text-decoration: none; border-radius: var(--r-m); }
.wait-row:hover { background: var(--yellow-wash); }
.wait-row > .ico, .wait-row > .mark { width: 16px; height: 16px; margin-top: 1px; }
.wait-row .who strong { font-size: 13px; font-weight: 600; white-space: normal; }
.wait-row .who span { white-space: normal; }

/* Inside Pages: the pages of the site, and under the open one its sections on a line. */
.tree { display: grid; gap: 4px; padding: 4px 0 6px; }
.page-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px 6px 13px;
  border-radius: var(--r-m); color: var(--ink); text-decoration: none; transition: background-color 0.12s ease;
}
.page-row:hover { background: var(--yellow-wash); }
.page-row > .ico { width: 16px; height: 16px; color: var(--ink-500); }
.page-row .who strong { font-size: 14.5px; font-weight: 600; }
.page-row.is-open .who strong { font-weight: 700; }
.page-row.is-open > .ico { color: var(--ink); }

/* The page map. Rows share one height, so a single yellow frame can travel between them. The rule
   that moves the frame to each row is generated from the page's own sections (see rows.css). */
.map { min-width: 0; margin: 0 0 10px 12px; padding: 0; border: 0; }
.map-rows { position: relative; --row: 54px; }
/* The line the sections sit on. */
.map-rows::before { content: ''; position: absolute; left: 17px; top: calc(var(--row) / 2); bottom: calc(var(--row) / 2); width: 2px; border-radius: 1px; background: var(--line); }
.map-frame { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--row); border-radius: var(--r-m); background: var(--yellow); transition: transform 0.3s cubic-bezier(0.3, 1.25, 0.6, 1); }
.map-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 16px 52px minmax(0, 1fr); align-items: center; gap: 12px;
  height: var(--row); padding: 0 10px 0 10px; border-radius: var(--r-m); cursor: pointer;
  font-weight: 500; font-size: 13px; line-height: 1.25; transition: background-color 0.12s ease;
}
.map-row:not(:has(:checked)):hover { background: var(--yellow-wash); }
.map-row:has(:checked) { font-weight: 700; }
.map-row:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Each mark stands on the line, with a little paper around it so the line stops at the mark. */
.map-mark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.map-row:not(:has(:checked)):hover .map-mark { background: var(--yellow-wash); box-shadow: 0 0 0 3px var(--yellow-wash); }
.map-row:has(:checked) .map-mark { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow); }
.map-thumb { height: 40px; overflow: hidden; border-radius: 7px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.map-row:has(:checked) .map-thumb { box-shadow: 0 0 0 2px var(--ink); }
.map-name { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.map-name small { font-size: 12px; font-weight: 500; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.map-row:has(:checked) .map-name small { color: var(--ink); }

/* ── 3. Sidebar, minimized (kit). Only where the sidebar is a column: on a narrow screen it is a
   menu, and a menu is always open. ── */
@media (min-width: 1180px) {
  .pf-side:is(.is-min, :has(.side-toggle:checked)) { align-items: center; padding: 12px 6px; background: var(--yellow-wash); }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .when-open { display: none; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .when-min { display: block; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-head { flex-direction: column; gap: 6px; margin-bottom: 6px; padding: 0; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-toggle:hover, .pf-side:is(.is-min, :has(.side-toggle:checked)) .sec-head:hover, .pf-side:is(.is-min, :has(.side-toggle:checked)) .switch-row:hover, .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-acct:hover, .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-row:not(:has(:checked)):hover { background: color-mix(in srgb, var(--yellow-soft) 60%, var(--yellow-wash)); }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .switch-row, .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-acct { grid-template-columns: 36px; padding: 4px; background: none; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .who, .pf-side:is(.is-min, :has(.side-toggle:checked)) .switch-row > .ico, .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-acct > .ico, .pf-side:is(.is-min, :has(.side-toggle:checked)) .wait-row, .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-thumb, .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-name { display: none; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-sec { justify-items: center; width: 100%; margin-top: 12px; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .sec-head { grid-template-columns: auto; justify-items: center; gap: 3px; width: 58px; padding: 6px 0 5px; font: 600 11px/1.1 var(--font-text); letter-spacing: 0; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .sec-ico { width: 24px; height: 22px; background: none; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .sec-head.is-current { background: var(--yellow); font-weight: 700; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .sec-count { position: absolute; top: 1px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--ink); color: var(--paper); font-size: 10.5px; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .page-row { display: none; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .tree { padding: 0; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map { margin: 2px 0 4px; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-rows { --row: 26px; width: 30px; margin: 0 auto; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-rows::before { left: 14px; background: color-mix(in srgb, var(--yellow) 45%, var(--yellow-wash)); }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-mark, .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-row:not(:has(:checked)):hover .map-mark { background: var(--yellow-wash); box-shadow: 0 0 0 3px var(--yellow-wash); }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-row:has(:checked) .map-mark { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow); }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-row { grid-template-columns: auto; justify-content: center; padding: 0; border-radius: 8px; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .map-frame { border-radius: 8px; }
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-acct { margin-bottom: 2px; }
}

/* ── 4. Buttons (kit) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-m);
  border: 1px solid var(--yellow-edge); background: var(--yellow); color: var(--ink);
  font: 700 15px/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.btn:hover { background: var(--yellow-hover); }
.btn:active { transform: translateY(1px); }
.btn-line { border-color: var(--edge); background: var(--paper); }
.btn-line:hover { background: var(--canvas); }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn .ico { width: 18px; height: 18px; }
.is-off { color: var(--ink-500); border-color: var(--line); background: none; pointer-events: none; }

/* ── 5. Cards and state marks (kit) ── */
.card { padding: 18px; border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow-1), 0 0 0 1px rgba(58, 44, 0, 0.04); }
.mark { flex: none; }
.mark-red .fill { fill: var(--red); }
.mark-red .cut { stroke: var(--paper); }
.mark-green .line { stroke: var(--green); }
.mark-gray .line { stroke: var(--gray); }
.mark-none .fill { fill: var(--ink-500); }

/* ── 6. The frame of a real crop (kit). Its fade is set by the screen that shows it, because a
   frame that scrolls fades the frame and one that does not fades the picture. ── */
.crop { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── 7. Numbers in a column (kit) ── */
.nums { width: 100%; border-collapse: collapse; font-size: 15px; }
.nums th { padding: 8px 0; text-align: left; font-weight: 500; border-bottom: 1px solid var(--line); }
.nums td { padding: 8px 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }

/* ── 8. Adjustments for the dashboard (2026-11-10, waiting for the owner) ──
   The budget of a screen: yellow marks the logo, the one place you are and the one button to press.
   Red marks a section where more people leave, once in the sidebar and once in the open step. */
/* The open row is said by the frame and the weight. Its thumbnail keeps the quiet line. */
.map-row:has(:checked) .map-thumb { box-shadow: 0 0 0 1px var(--line); }
/* The account is not where you are. */
.avatar { background: var(--gray-wash); }
/* A count says how many there are of a thing you cannot see. With the pages listed right under
   Pages it says nothing new, so it shows only when the sidebar is minimized and the list is away. */
.pf-sec:has(.tree) .sec-count { display: none; }
@media (min-width: 1180px) {
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .pf-sec:has(.tree) .sec-count { display: inline-grid; }
}
/* The page row can be the place you are (the whole page). Then it carries the yellow and the line
   of sections shows none. */
label.page-row { cursor: pointer; }
.shell:has(.at-page:checked) .page-row.is-open { background: var(--yellow); }
.shell:has(.at-page:checked) .map-frame { opacity: 0; }
.shell:has(.at-page:checked) .page-row.is-open .who span { color: var(--ink); }
.map-frame { transition: transform 0.3s cubic-bezier(0.3, 1.25, 0.6, 1), opacity 0.15s ease; }

/* ── 9. New for the dashboard ── */
/* App shell: the sidebar as a column, the screen beside it. --strip is the height of anything that
   sits above the app, such as the strip of a prototype. */
:root { --strip: 0px; }
.shell { display: grid; grid-template-columns: 284px minmax(0, 1fr); min-height: calc(100vh - var(--strip)); transition: grid-template-columns 0.32s cubic-bezier(0.3, 1.1, 0.6, 1); }
.shell:has(> .side .side-toggle:checked) { grid-template-columns: 82px minmax(0, 1fr); }
.side-in { position: sticky; top: 12px; height: calc(100vh - 24px - var(--strip)); margin: 12px 0 12px 12px; border-radius: 24px; box-shadow: var(--shadow-1); overflow: hidden; }
.main { min-width: 0; max-width: 1240px; padding: 20px 32px 32px 28px; }

/* The middle of the sidebar scrolls when the page is long (up to 40 sections). The brand and the
   client stay at the top, the account at the bottom, and the list fades where it goes on. The fade
   says there is more; a scrollbar would take width from the names (Firefox and Chrome on Windows
   both give it room), so there is none. Wheel, touch and the keyboard still scroll it. */
.side-scroll {
  flex: 1; min-height: 0; margin: 0 -10px; padding: 0 10px 30px; overflow: hidden auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.side-scroll::-webkit-scrollbar { display: none; }
.pf-acct { margin-top: 4px; }

/* On a narrow screen the sidebar is a menu under a top bar. */
.topbar { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--shadow-1); font-weight: 700; font-size: 14px; cursor: pointer; }
.menu-btn:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-btn .ico { width: 18px; height: 18px; }
@media (min-width: 1180px) {
  .pf-side:is(.is-min, :has(.side-toggle:checked)) .side-scroll { align-self: stretch; margin: 0 -6px; padding: 0 6px 24px; }
}
@media (max-width: 1179px) {
  .shell, .shell:has(> .side .side-toggle:checked) { display: block; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; }
  .topbar-id { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; font-size: 15px; }
  .topbar-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side { display: none; }
  .shell:has(.menu-toggle:checked) .side { display: block; }
  .side-in { position: static; height: auto; margin: 8px 12px 4px; border-radius: 20px; }
  .side-scroll { overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .pf-head { display: none; }
  .main { max-width: none; padding: 12px 16px 28px; }
}

/* A closed row: one click away, never open by itself. No divider line; the rows are told apart by
   their own height. */
.row > summary {
  display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 38px; margin-left: -8px; padding: 6px 12px 6px 8px;
  border-radius: var(--r-m); color: var(--ink-700); font-weight: 600; font-size: 14.5px; line-height: 1.25; cursor: pointer; list-style: none; transition: background-color 0.12s ease;
}
.row > summary::-webkit-details-marker { display: none; }
.row > summary > span { text-wrap: balance; }
.row > summary:hover { background: var(--yellow-wash); color: var(--ink); }
.row > summary .ico { width: 16px; height: 16px; color: var(--ink-500); transition: transform 0.15s ease; }
.row[open] > summary { color: var(--ink); }
.row[open] > summary .ico { transform: rotate(90deg); }
.row-body { padding: 6px 0 16px 24px; }

/* Details that come in when asked, in place. A line button with a checkbox inside holds the state;
   the panel grows from nothing and the chevron turns. Closed, what is inside is not there for the
   keyboard or a screen reader either. .more is the block the button belongs to. */
.more-btn { gap: 6px; }
.more-btn:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.more-btn .ico { width: 16px; height: 16px; transition: transform 0.2s ease; }
.more:has(.more-toggle:checked) .more-btn { background: var(--canvas); }
.more:has(.more-toggle:checked) .more-btn .ico { transform: rotate(180deg); }
.more-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.more-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.28s; }
.more:has(.more-toggle:checked) .more-panel { grid-template-rows: 1fr; }
.more:has(.more-toggle:checked) .more-in { visibility: visible; transition-delay: 0s; }

/* Tabs: two or three views of the same thing. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  color: var(--ink-700); font-weight: 600; font-size: 14.5px; line-height: 1; cursor: pointer; transition: background-color 0.12s ease;
}
.tab:hover { background: var(--yellow-wash); color: var(--ink); }
.tab:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tab:has(:checked) { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-1); cursor: default; }

/* A quiet menu: the filters of a screen behind one control. */
.menu { position: relative; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 14px; border-radius: var(--r-pill);
  color: var(--ink-700); font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; list-style: none; white-space: nowrap; transition: background-color 0.12s ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.menu > summary .ico { width: 16px; height: 16px; color: var(--ink-500); }
.menu-panel { position: absolute; z-index: 6; right: 0; top: calc(100% + 8px); display: grid; gap: 12px; width: 264px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-2); }

/* Fields inside a row or a menu. */
.field { display: grid; gap: 5px; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--ink-700); }
.field input, .field select {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--edge); border-radius: var(--r-m);
  background: var(--paper); color: var(--ink); font: 500 15px/1 var(--font-text);
}

/* A table of a few rows, with column heads. */
.nums thead th { padding-top: 0; font: 700 12px/1.2 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.nums .num { text-align: right; }
.nums td { padding-left: 16px; }
.nums td:first-child { padding-left: 0; text-align: left; font-weight: 500; }

/* How far along something is. Gray, never yellow. */
.meter { display: block; width: 100%; height: 5px; border: 0; border-radius: var(--r-pill); background: var(--line); overflow: hidden; -webkit-appearance: none; appearance: none; }
.meter::-webkit-progress-bar { border-radius: var(--r-pill); background: var(--line); }
.meter::-webkit-progress-value { border-radius: var(--r-pill); background: var(--gray); }
.meter::-moz-progress-bar { border-radius: var(--r-pill); background: var(--gray); }
.wait-row .meter { grid-column: 2; }

/* A yes that is recorded in place. .ok is the block the yes belongs to, and .ok-btn is its button:
   a checkbox inside a label, so it works from the keyboard and without JavaScript. Before the yes
   the block shows what it asks (.if-todo); after it, what was recorded (.if-done), and the button
   steps back so that the next thing to press can lead. The two take turns inside a .swap: both are
   laid out in the same place and one is hidden, so the place keeps the size of the larger and
   nothing moves under the pointer when the yes is given. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; min-width: 0; }
.ok:not(:has(.ok-toggle:checked)) .if-done, .ok:has(.ok-toggle:checked) .if-todo { visibility: hidden; }
.ok-btn:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ok-btn .swap > * { justify-self: center; }
/* The check is the shape of the yes: it shows with the word, once the yes is given. */
.ok-done { display: flex; align-items: center; gap: 8px; }
.ok-btn:has(:checked), .ok-btn:has(:checked):hover { border-color: var(--line); background: none; color: var(--ink-700); }

/* A list of things of one kind, each a row that leads somewhere: what it is, what it waits for and
   how far along it is. No divider lines; the rows are told apart by their own height. */
.list { display: grid; gap: 2px; }
.list-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 132px 16px; align-items: center; gap: 14px; min-height: 58px; padding: 8px 12px;
  border-radius: var(--r-m); color: var(--ink); text-decoration: none; transition: background-color 0.12s ease;
}
.list-row:hover { background: var(--yellow-wash); }
.list-row > .ico { width: 16px; height: 16px; color: var(--ink-500); }
.list-row .who strong { font-size: 15.5px; }
.list-row .who span { font-size: 13px; }
.list-count { font-size: 14px; font-weight: 500; color: var(--ink-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .list-row { grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 4px 12px; padding: 10px 8px; }
  .list-count { grid-column: 2; grid-row: 2; }
  .list-row .meter { grid-column: 2; grid-row: 3; margin: 4px 0 2px; }
  .list-row > .ico { grid-column: 3; grid-row: 1; }
}

/* A note that opens over the screen and closes with Esc or a click outside. */
.pop { width: min(400px, calc(100vw - 32px)); padding: 22px 24px 20px; border: 0; border-radius: var(--r-l); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); }
.pop::backdrop { background: rgba(29, 26, 20, 0.28); }

/* ── 10. From the Page screen (2026-11-11) ──
   Brought in from the version without the guides when the hybrid Page screen was approved. Markup in
   src/parts.mjs: deviceFrame, testTrack, deviceSwitch, bigFigures. No outer margins: the screen places them. */
/* A client's page inside the device it is read on, the title inside the bezel. The crop is at real
   height and scrolls with the screen, never inside a box of its own. */
.device { --bezel: var(--ink); --bw: 10px; --br: 36px; position: relative; width: 100%; min-width: 0; margin: 0; }
.device-body { padding: var(--bw); border-radius: var(--br); background: var(--bezel); }
.device-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 10px 14px; border-radius: calc(var(--br) - var(--bw)) calc(var(--br) - var(--bw)) 0 0; background: var(--gray-wash); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.3; }
.device-bar span:last-child { color: var(--ink-700); font-weight: 500; }
.device-shot { overflow: clip; border-radius: 0 0 calc(var(--br) - var(--bw)) calc(var(--br) - var(--bw)); }
.device-shot img { display: block; width: 100%; height: auto; }
.device-computer { --br: 14px; padding-bottom: 40px; }
.device-computer::before, .device-computer::after { content: ''; position: absolute; left: 50%; translate: -50% 0; background: var(--bezel); }
.device-computer::before { bottom: 8px; width: clamp(56px, 11%, 132px); height: 32px; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.device-computer::after { bottom: 0; width: clamp(112px, 24%, 300px); height: 8px; border-radius: 6px 6px 2px 2px; }
/* Phone | Computer: which device the numbers and the crop come from. The numbers on screen are always
   the chosen device's. */
.switch { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--gray-wash); }
.switch a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--r-pill); color: var(--ink-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.switch a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch .ico { width: 16px; height: 16px; }
.switch .is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
/* The two numbers of a finding, large and in ink, never red. Only a finding gets them, so it stays
   the peak of the screen; a section in line says its numbers in a sentence. */
.figures { display: flex; gap: 32px; }
.figures p { display: grid; align-content: start; }
.figures strong { color: var(--ink); font: 700 58px/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.figures span { margin-top: 4px; font-size: 14px; font-weight: 600; }
/* A short run of steps: the four of a test, the five of the onboarding. Done is a black check, the step you are on is yellow, the rest are empty. */
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.track li { position: relative; display: grid; align-content: start; gap: 6px; padding-right: 4px; }
.track li:not(:last-child)::after { content: ''; position: absolute; left: 23px; right: 3px; top: 9px; height: 1px; background: var(--edge); }
.track-dot { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); }
.track-dot .ico { width: 14px; height: 14px; }
.track .is-done, .track .is-now { color: var(--ink); }
.track .is-done .track-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.track .is-now .track-dot { background: var(--yellow); border-color: var(--ink); }
@media (max-width: 640px) {
  .device { --bw: 8px; }
  .device-phone { --br: 30px; }
  .device-bar { padding: 10px; font-size: 10px; }
  .switch a { padding: 0 8px; font-size: 13px; }
  .switch .ico { width: 14px; height: 14px; }
  .figures { gap: 28px; }
  .figures strong { font-size: 48px; }
  .figures span { font-size: 12px; }
}

/* ── 11. From Tests (2026-11-11) ── */
/* One share read twice, to scale on one baseline. The lead row is ink and large, the other gray. */
.pair { max-width: 540px; }
.pair-head { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.pair-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 10px 14px; margin-top: 12px; }
.pair-row { display: contents; }
.pair-name { color: var(--ink-700); font-size: 14px; font-weight: 600; }
.pair-fill { display: block; width: 100%; height: 10px; border: 0; border-radius: var(--r-pill); background: transparent; overflow: hidden; -webkit-appearance: none; appearance: none; }
.pair-fill::-webkit-progress-bar { background: transparent; }
.pair-fill::-webkit-progress-value { border-radius: var(--r-pill); background: color-mix(in srgb, var(--edge) 45%, var(--paper)); }
.pair-fill::-moz-progress-bar { border-radius: var(--r-pill); background: color-mix(in srgb, var(--edge) 45%, var(--paper)); }
.pair-row.is-lead .pair-fill { height: 16px; }
.pair-row.is-lead .pair-fill::-webkit-progress-value { background: var(--ink); }
.pair-row.is-lead .pair-fill::-moz-progress-bar { background: var(--ink); }
.pair-value { min-width: 4.2ch; color: var(--ink-500); font: 600 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pair-row.is-lead .pair-value { color: var(--ink); font: 700 40px/1 var(--font-display); letter-spacing: -0.03em; }
.pair-unit { margin-top: 8px; }
@media (max-width: 640px) { .pair-row.is-lead .pair-value { font-size: 34px; } .pair-value { font-size: 19px; } }

/* ── 12. From Settings (data) ── */
/* A warning that is not about a section: ink, an icon and words, never red. */
.notice { display: flex; align-items: flex-start; gap: 10px; max-width: 40em; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.notice .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }

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