/* One stylesheet for every page. Laptop first; an iPad and a phone work.
   The look borrows Tremor's and shadcn/ui's (15 Oct): a neutral grey page so the paintings' own colours read
   true, white cards with a hairline edge and a soft shadow, one calm lake blue for what to press next, and
   status colours that always mean the same thing (green done, amber waiting, red stuck or Fix, blue
   information). Primitives name a value and are never used in a rule; the role tokens below them are. */
@font-face {
  font-family: "Inter"; src: url("/static/fonts/Inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  /* primitives: neutral greys, lake blue, emerald, red, amber */
  --gray-0: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-150: #eceef1;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-450: #878d98;
  --gray-600: #5d6472;
  --gray-700: #374151;
  --gray-900: #111827;
  --gray-950: #0b0d12;
  --lake-50: #f0f5fe;
  --lake-100: #dfe9fc;
  --lake-200: #c3d5f8;
  --lake-600: #2f63cf;
  --lake-700: #264fa8;
  --lake-800: #213f82;
  --green-50: #ecfdf5;
  --green-700: #047857;
  --green-800: #065f46;
  --red-50: #fef2f2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-800: #92400e;

  /* roles: the only names a rule uses */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-sunk: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-press: var(--gray-200);
  --ink: var(--gray-900);
  --ink-soft: var(--gray-700);
  --muted: var(--gray-600);           /* 5.4:1 or better on every surface here, the grey stage included */
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --field-line: var(--gray-450);      /* the edge of a box to type in: 3:1 or better on the card and the page */
  --accent: var(--lake-600);          /* white on it 5.5:1 */
  --accent-hover: var(--lake-700);
  --accent-soft: var(--lake-50);
  --accent-soft-hover: var(--lake-100);
  --accent-ring: rgb(47 99 207 / 0.28);
  --accent-text: var(--lake-700);
  --accent-edge: var(--lake-200);
  --ok: var(--green-700);
  --ok-soft: var(--green-50);
  --ok-text: var(--green-800);
  --ok-edge: rgb(4 120 87 / 0.25);
  --fault: var(--red-600);
  --fault-hover: var(--red-700);
  --fault-soft: var(--red-50);
  --fault-text: var(--red-800);
  --fault-edge: rgb(220 38 38 / 0.22);
  --warn-soft: var(--amber-50);
  --warn-text: var(--amber-800);
  --warn-edge: rgb(180 83 9 / 0.25);
  --highlight: var(--amber-200);
  --neutral-soft: var(--gray-100);
  --neutral-edge: rgb(17 24 39 / 0.1);
  --stage: var(--gray-100);
  --stage-dark: var(--gray-950);
  --bar-dark: #16181d;
  --on-dark: var(--gray-100);
  --on-dark-muted: #a3a9b4;
  --on-dark-line: rgb(255 255 255 / 0.2);
  --circle: #ff5a1f;

  /* spacing, type, shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --t-xs: 0.875rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.625rem; --t-3xl: 1.75rem;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --radius: var(--r-md);
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow: 0 1px 3px rgb(16 24 40 / 0.06), 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-pop: 0 16px 40px -8px rgb(16 24 40 / 0.22), 0 4px 10px -4px rgb(16 24 40 / 0.08);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --header: 60px;
  --pagebar: 56px;
  --bar-h: var(--pagebar);            /* the book's bar as measured (book.js); 56 px until it is */
  --tools-h: 56px;                    /* the picture's toolbar as measured (book.js): one row or two */
  --gutter: 24px;
  --card-pad: var(--s5);
  font-size: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--t-md)/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0 0 var(--s2); font-weight: 600; overflow-wrap: break-word; letter-spacing: -0.011em; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }
p { margin: 0 0 var(--s3); text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1; }

/* ---- the one header (common.js mountHeader) ---- */
.top {
  position: sticky; top: 0; z-index: 20; min-height: var(--header);
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.top .brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: var(--s5);
  font-weight: 650; white-space: nowrap; color: var(--ink); text-decoration: none; font-size: var(--t-md); letter-spacing: -0.01em;
}
/* a small mark beside the place's name: a picture in a frame, the app's own (never the company's) */
.top .brand::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.steps { display: flex; gap: var(--s1); align-items: center; min-width: 0; flex-wrap: wrap; }
.steps a, .top-link {
  white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 0.9375rem; font-weight: 500;
  padding: var(--s2) var(--s3); border-radius: var(--r-md); font-variant-numeric: tabular-nums; min-height: 36px;
  display: inline-flex; align-items: center; gap: 6px;
}
.steps a:hover, .top-link:hover { color: var(--ink); background: var(--surface-hover); }
.steps a[aria-current="page"], .top-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
/* each place has its icon before its name; on a phone the names alone, so one row still fits at 390 px */
.steps a svg.icon, .top-link svg.icon, .top button.message-btn svg.icon { width: 17px; height: 17px; flex: none; }
@media (max-width: 560px) { .top svg.icon { display: none; } }
.steps a.done::after { content: "\2713"; color: var(--ok); font-weight: 700; }
/* a laptop or an iPad: the places read as tabs, the one you are in underlined in the accent along the
   header's lower edge, so where you are is clear from across the room */
@media (min-width: 721px) {
  .top { padding-top: 0; padding-bottom: 0; align-items: stretch; }
  .top > * { align-self: center; }
  .top > .steps { align-self: stretch; align-items: stretch; gap: var(--s1); }
  .top > .steps a, .top > a.top-link { align-self: stretch; border-radius: 0; padding: 0 var(--s3); min-height: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
  .top > .steps a:hover, .top > a.top-link:hover { background: transparent; border-bottom-color: var(--line-strong); }
  .top > .steps a[aria-current="page"], .top > a.top-link[aria-current="page"] { background: transparent; border-bottom-color: var(--accent); }
  .top > .steps a:focus-visible, .top > a.top-link:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
}
.top .who { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.steps .narrow-only { display: none; }
.account { position: relative; }
.account > button {
  min-height: 36px; padding: 3px var(--s3) 3px 3px; border-radius: 999px; gap: var(--s2);
  font-size: 0.9375rem; font-weight: 500; border-color: var(--line); box-shadow: none;
}
.account > button:hover { background: var(--surface-hover); border-color: var(--line); }
.account .initial {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: var(--t-xs);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.account .menu {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30; min-width: 232px; max-width: calc(100vw - 2 * var(--s4));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: var(--s1); display: grid; gap: 2px;
  transition: opacity 140ms var(--ease-out);
  @starting-style { opacity: 0; }
}
.account .menu p { margin: 0; padding: var(--s2) var(--s3); font-size: var(--t-sm); color: var(--muted); overflow-wrap: break-word; border-bottom: 1px solid var(--line); margin-bottom: var(--s1); }
.account .menu p b { display: block; color: var(--ink); font-weight: 600; }
.account .menu button { justify-content: flex-start; border-color: transparent; min-height: 40px; box-shadow: none; border-radius: var(--r-md); }
.account .menu button:hover { background: var(--surface-hover); border-color: transparent; }

/* ---- the book's own bar under the header: its name, where you are, and its actions ---- */
.pagebar {
  position: sticky; top: var(--header); z-index: 15; min-height: var(--pagebar);
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: var(--surface); border-bottom: 1px solid var(--line);   /* solid: nothing shows through it (F10) */
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}
.pagebar .title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.pagebar .title a, .pagebar .title b { font-weight: 600; font-size: var(--t-lg); color: var(--ink); text-decoration: none; overflow-wrap: break-word; letter-spacing: -0.01em; }
.pagebar .title a:hover { text-decoration: underline; }
/* the way back to the list, before the book's name */
.pagebar .title a.crumb { font-weight: 500; font-size: 0.9375rem; color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.pagebar .title a.crumb:hover { color: var(--accent); }
.pagebar .title .crumb-sep { color: var(--line-strong); font-weight: 600; }
/* where you are in the book, as a quiet tag after its name */
.pagebar .title .where-now {
  color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; background: var(--neutral-soft);
  box-shadow: inset 0 0 0 1px var(--neutral-edge); border-radius: var(--r-sm); padding: 1px var(--s2);
}
.pagebar .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.pagebar .btn, .pagebar button { white-space: nowrap; }

/* phone and big text: the header is one row that scrolls away; the book's bar stays */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .top { position: static; gap: var(--s1); }
  .top .brand { margin-right: var(--s1); font-size: var(--t-md); }
  .top .brand .long, .top.hide-narrow .brand { display: none; }
  .top .who, .steps .wide-only { display: none; }
  .steps a, .top-link { padding: var(--s2) 9px; font-size: var(--t-sm); }
  .top button.message-btn { padding: 6px 10px; }
  :root { --card-pad: 20px; }
  .answer { padding: var(--s4); }
  .steps .narrow-only { display: inline; }
  .account > button { padding: var(--s1); }
  .account .name { display: none; }
  .pagebar { top: 0; }
  /* one row while the name has room; with large text the actions drop under the name rather than squeeze it
     to a letter a line (S6) */
  .pagebar .title { flex: 1 1 6rem; }
  .pagebar .title a, .pagebar .title b { font-size: var(--t-md); }
  .pagebar .title .crumb, .pagebar .title .crumb-sep { display: none; }   /* Books is in the header just above */
  .pagebar .title .where-now { display: none; }
  .pagebar .actions { flex: 0 1 auto; justify-content: flex-end; }
}
/* a finger, not a pointer: 44 px to tap on a phone held either way and on a tablet (F3); the layout above
   stays on the width */
@media (max-width: 720px), (pointer: coarse) {
  .top .brand, .steps a, .top-link { min-height: 44px; }
  .account > button { min-height: 44px; min-width: 44px; }
  .pagebar .title a { display: inline-block; padding: 12px 0; }
  .comment .who a, .person-note a, a.all-people { display: inline-block; padding: 12px 0; }   /* F12 */
  #fitBtn { min-width: 44px; }
  .toggle { min-height: 44px; }
}
@media (max-width: 480px) { .top .brand { display: none; } }
@media (max-width: 380px) {
  .top { padding-left: max(var(--s3), env(safe-area-inset-left)); padding-right: max(var(--s3), env(safe-area-inset-right)); }
  .top .brand { display: none; }
  .steps a, .top-link { padding: var(--s2) var(--s2); }
}
/* the trial's parts wrap rather than hide off the side (Safari aA 200% on a small phone) */
.trial-top .steps { flex: 0 1 auto; row-gap: 2px; }
@media (max-width: 720px) {
  .trial-top .steps { gap: 0; }
  .trial-top .steps a { padding: 6px 5px; gap: 2px; }
  /* the trial's four parts need the row on a phone: the mark stays on the laptop, the name menu (Sign out) on both */
  .trial-top .brand { display: none; }
  /* tight enough that the four parts with their ticks, Help and the name menu stay one row at 390 px */
  .trial-top { gap: 2px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .trial-top .top-link { padding: var(--s2) 6px; }
}
/* Very narrow (Safari aA 200% and up on a phone): nothing may stay pinned, it would hold a third of the screen */
@media (max-width: 300px) {
  .top, .pagebar { position: static; }
  .top, .pagebar, .steps { flex-wrap: wrap; }
  .pagebar .title { flex-basis: 100%; }
  /* the book's banner keeps its first sentence; the rest is said under the comment box (P8) */
  .locked-bar .more { display: none; }
}

/* ---- buttons and fields ---- */
button, .btn {
  font: inherit; font-size: var(--t-md); min-height: 44px; padding: 10px var(--s4); border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-weight: 600;
  box-shadow: var(--shadow-xs); line-height: 1.25;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out);
}
button:hover, .btn:hover { background-color: var(--surface-sunk); border-color: var(--field-line); color: var(--ink); }
/* a press is felt: the button gives a little, then springs back */
button:active:not(:disabled), .btn:active { transform: scale(0.98); }
button:focus-visible, .btn:focus-visible, textarea:focus-visible, input:focus-visible, .stage:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.viewer-box.full :focus-visible { outline-color: var(--on-dark); }   /* on the dark bar the lake blue would vanish */
button:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
button:disabled:hover { background-color: var(--surface); border-color: var(--line-strong); }
.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
button.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.quiet { border-color: transparent; background: transparent; color: var(--accent); box-shadow: none; }
.quiet:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.danger { color: var(--fault); }
.danger:hover { color: var(--fault-text); }
.quiet.danger:hover { background: var(--fault-soft); }
button[aria-pressed="true"].tool { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-sm { min-height: 36px; padding: 6px var(--s3); font-size: var(--t-sm); gap: 6px; }
@media (max-width: 720px), (pointer: coarse) { .btn-sm { min-height: 44px; } }   /* a finger, not a pointer */

/* ---- the look (founder, 16 Oct: "Buttons can be made nicer and larger with more colors ... easier to skim, easier
   to press, easier to know what to do"; "everything should have icons"). One scale for every page:
   .btn-lg the one thing to do next on a screen; .primary blue, go on; .success green, Keep and done;
   .danger-fill red, Fix and delete; .soft a tinted second choice; .quiet a link that is a button. An icon
   leads its words (icons.js icon()), never stands in for them. */
.btn-lg { min-height: 52px; padding: 12px var(--s5); font-size: 1.0625rem; border-radius: var(--r-lg); }
button svg.icon, .btn svg.icon { flex: none; }
.btn-sm svg.icon { width: 16px; height: 16px; }
.success { background: var(--ok); border-color: var(--ok); color: var(--surface); box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.success:hover { background: var(--ok-text); border-color: var(--ok-text); color: var(--surface); }
.soft { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); box-shadow: none; }
.soft:hover { background: var(--accent-soft-hover); border-color: var(--accent-edge); color: var(--accent-text); }
.soft.danger { background: var(--fault-soft); border-color: var(--fault-edge); color: var(--fault-text); }
.soft.danger:hover { background: var(--fault-soft); border-color: var(--fault); color: var(--fault-text); }
/* a page's title with its place's icon in a tile beside it, and one short line under it */
.page-head h1, h1.title-head { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-3xl); }
.page-icon {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg);
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-edge);
}
/* a card's heading with its icon: the icon in the heading's own colour, a little quieter */
.title-icon { display: flex; align-items: center; gap: var(--s2); }
.title-icon > svg.icon { color: var(--muted); flex: none; }
/* one vertical rhythm on a list page: every block the same gap apart, a hidden one taking none (16 Oct: "spacing
   issues between these pop-ups and the cards") */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; }
.stack > * { margin: 0; }
.stack > .page-head { margin-bottom: var(--s1); }
/* a small tag that names what a thing is (a practice copy, an idea): its icon and one or two words */
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; line-height: 1.4;
  padding: 1px var(--s2); border-radius: 999px; white-space: nowrap; vertical-align: 0.1em;
  background: var(--neutral-soft); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--neutral-edge);
}
.tag svg.icon { width: 14px; height: 14px; }
.tag.practice { background: var(--surface); box-shadow: none; border: 1px dashed var(--field-line); }
.tag.idea { background: var(--warn-soft); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-edge); }
.tag.book { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-edge); }
textarea, input[type="text"], input[type="number"] {
  width: 100%; font: inherit; font-size: var(--t-md); padding: 10px var(--s3); border-radius: var(--radius);
  border: 1px solid var(--field-line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
::placeholder { color: var(--muted); opacity: 1; }   /* the examples teach how to write: Safari's own grey is 2.4:1 */
textarea:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
textarea:focus-visible, input:focus-visible { outline: 0; }   /* the blue edge and its halo above are the focus */
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
label { display: block; font-weight: 600; margin: 0 0 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: var(--t-sm); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ---- boxes ---- */
.wrap { max-width: 880px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); }
.wide { max-width: 1280px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad);
  margin: 0 0 var(--s4); box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card > h2:first-child { font-size: var(--t-lg); }
.center-card { max-width: 440px; width: 100%; margin: 12vh auto 0; text-align: left; padding: var(--s6); }
/* a page that is only its card (sign-in, a wrong address): the card sits a little above the middle, under
   the app's mark */
.wrap.alone { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-bottom: 16vh; }
.wrap.alone .center-card { margin-top: 0; }
.wrap.alone .center-card::before {
  content: ""; display: block; width: 40px; height: 40px; border-radius: 10px; margin-bottom: var(--s5); box-shadow: var(--shadow-xs);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.wrap.alone .center-card .primary { width: 100%; }
.page-head { margin: 0 0 var(--s5); }
.page-head h1 { margin-bottom: 6px; }
.page-head p { color: var(--muted); margin: 0; max-width: 70ch; }
/* a callout: a tinted box with a hairline edge of its own colour */
.alert { border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s3) 0; box-shadow: inset 0 0 0 1px var(--alert-edge, transparent); }
.alert.bad { background: var(--fault-soft); color: var(--fault-text); --alert-edge: var(--fault-edge); }
.alert.good { background: var(--ok-soft); color: var(--ok-text); --alert-edge: var(--ok-edge); }
.alert.info { background: var(--accent-soft); color: var(--accent-text); --alert-edge: var(--accent-edge); }
.submitted-note { margin: var(--s3) var(--gutter) 0; }   /* a submitted candidate's book page: under the book's bar */
.alert.warn { background: var(--warn-soft); color: var(--warn-text); --alert-edge: var(--warn-edge); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.alert li { overflow-wrap: break-word; }
.card.alert { box-shadow: inset 0 0 0 1px var(--alert-edge, transparent); border-color: transparent; }
.status { font-size: var(--t-sm); color: var(--muted); min-height: 1.5em; }
.status.bad { color: var(--fault); }
.status.warn { color: var(--warn-text); }
/* the line under Keep and Fix: two lines kept free, so what it says never moves the page under the Reviewer */
@media (min-width: 601px) { .check .answer #markStatus { min-height: 3em; margin: 0 0 var(--s3); } }   /* empty or not (.answer > .status:empty) */
.locked-bar { margin: var(--s3) var(--gutter) 0; }

/* ---- the picture viewer ---- */
.stage {
  position: relative; overflow: hidden; background: var(--stage); border-radius: var(--radius);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.stage.panning { cursor: grabbing; }
.stage.circling { cursor: crosshair; box-shadow: inset 0 0 0 3px var(--circle); }
.stage .layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage .layer img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.stage .layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--t-sm); }
.stage[data-loaded="failed"] .loading { color: var(--ink); cursor: pointer; text-decoration: underline; }
.stage circle.halo { stroke-width: calc(var(--px, 1) * 6px); vector-effect: none; }
.stage circle.ring { stroke-width: calc(var(--px, 1) * 3px); vector-effect: none; }
circle.halo { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 6; vector-effect: non-scaling-stroke; }
circle.ring { fill: rgba(255, 90, 31, 0.08); stroke: var(--circle); stroke-width: 3; vector-effect: non-scaling-stroke; }
.stage .badge {
  position: absolute; left: 10px; top: 10px; background: rgb(17 24 39 / 0.84); color: var(--surface);
  font-size: var(--t-xs); font-weight: 500; padding: var(--s1) 10px; border-radius: var(--r-md); pointer-events: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}
/* the viewer is one card: the picture on top, its tools in a strip along the bottom. Its edge is a ring, not a
   border, so the picture keeps every pixel of the column */
.viewer-box:not(.full) { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.viewer-box:not(.full) .stage { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 0; padding: 6px var(--s2); border-top: 1px solid var(--line); }
.toolbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: var(--s1) var(--s1); }
.toolbar .count { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 var(--s1); }
.toolbar .title { font-size: var(--t-sm); color: var(--on-dark-muted); min-width: 0; overflow-wrap: break-word; }
/* the picture's tools are quiet grey keys, so the page's own choices (Keep, Fix, Next) stay the loud ones */
.toolbar button { min-height: 40px; padding: var(--s2) var(--s3); background: var(--surface-hover); border-color: transparent; box-shadow: none; font-weight: 500; }
/* a mouse only (a tapped button keeps :hover on a touch screen), and never over a tool that is on (tablet F4) */
@media (hover: hover) { .toolbar button:not([aria-pressed="true"]):hover { background: var(--surface-press); border-color: transparent; } }
.toolbar button.primary { background: var(--accent); color: var(--surface); }
@media (max-width: 720px), (pointer: coarse) { .toolbar button { min-height: 44px; } }
/* Full screen: pinned to what the eye sees (viewer.js pinToScreen), so a page zoomed in never zooms it,
   and every touch inside it belongs to the picture, never to the page behind. */
.viewer-box.full {
  position: fixed; inset: 0; z-index: 40; background: var(--stage-dark); padding: 0; touch-action: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex; flex-direction: column;
}
.viewer-box.full .stage { flex: 1; border-radius: 0; width: 100%; height: auto !important; max-height: none !important; aspect-ratio: auto !important; background: var(--stage-dark); }
.viewer-box.full .toolbar { margin: 0; padding: var(--s2) var(--s3); background: var(--bar-dark); border-top-color: var(--on-dark-line); }
.viewer-box.full .toolbar button:not(.primary):not([aria-pressed="true"]):hover { background: rgb(255 255 255 / 0.08); }
.viewer-box.full .toolbar .count { color: var(--on-dark-muted); }
.viewer-box.full .toolbar button:not(.primary):not([aria-pressed="true"]) { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
/* Circle on, in the dark bar: the light page's dark fill would vanish here, so it lights up in the circles' colour */
.viewer-box.full button[aria-pressed="true"].tool { background: var(--circle); border-color: var(--circle); color: var(--ink); }
/* Full screen on the Page check: the page's name, Previous and Next, Keep and Fix, and Close at the far end as in the large view */
.viewer-box.full .toolbar button[aria-pressed="true"][data-mark="keep"] { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.viewer-box.full .toolbar button[aria-pressed="true"][data-mark="fix"] { background: var(--fault); border-color: var(--fault); color: var(--surface); }
.viewer-box.full #closeFull { margin-left: auto; }
@media (max-width: 600px) {
  .toolbar .wide-only { display: none; }
  .toolbar .title { flex-basis: 100%; }   /* the name on its own line, the buttons together under it */
  .toolbar { gap: var(--s1); padding: 6px var(--s1); }
  .toolbar .count { padding: 0; }
  .toolbar button { padding: var(--s2) 10px; }
  .answer .status { min-height: 0; margin: 0; }
}
.only-full { display: none; }
.viewer-box.full .only-full { display: inline-flex; }
.viewer-box.full .toolbar .sep { background: rgb(255 255 255 / 0.22); }
/* phone, Full screen on the Page check: the page's name on its own line, the tools under it */
@media (max-width: 600px) {
  .viewer-box.full #fullTitle { order: -1; }
}
/* a phone held sideways, Full screen: the bar is one short row, so the picture gets the height (F1). Two
   fingers zoom in place of − and +, and the pager says which page it is */
@media (max-height: 500px) {
  .viewer-box.full .toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 4px 8px; }
  .viewer-box.full .toolbar > * { flex-shrink: 0; }
  .viewer-box.full .toolbar .title, .viewer-box.full #circleCount, .viewer-box.full .toolbar .wide-only,
  .viewer-box.full .toolbar .sep { display: none; }
}
/* a phone held upright, Full screen: the picture is a strip across a tall screen, so say how to make it larger (F2) */
.turn-hint { display: none; }
@media (orientation: portrait) and (max-width: 720px) and (pointer: coarse) {
  .viewer-box.full .turn-hint { display: block; flex-basis: 100%; margin: 0; text-align: center; font-size: var(--t-sm); color: var(--on-dark-muted); }
}

/* ---- Part 1 layout ---- */
.pictures { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); padding: var(--s4) var(--gutter); max-width: 1680px; margin: 0 auto; }
/* the box is as wide as its column and as tall as its picture (viewer.js gives it the picture's shape), never taller than the screen */
.pictures .stage { width: 100%; height: auto; max-height: calc(100dvh - var(--header) - 96px); min-height: 320px; }
.locked .pictures .stage { max-height: calc(100dvh - var(--header) - 168px); }   /* after Submit the bar above takes its own room */
/* the answer column is a panel of its own beside the picture: what this page is, Keep or Fix, the comment */
.answer {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow);
  padding: 20px; align-self: start; min-width: 0;
}
.answer h1 { margin-bottom: var(--s1); font-size: var(--t-xl); }
.answer > h2.small { margin-top: var(--s4); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s4) 0; }
.choice button { min-height: 56px; font-weight: 600; font-size: 1.0625rem; }
/* each answer carries a dot of its colour, so the colour it turns is no surprise */
.choice button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; flex: none; background: var(--dot, var(--line-strong)); box-shadow: 0 0 0 3px var(--dot-halo, transparent); }
.choice button[data-mark="keep"], .choice button[data-mark="right"] { --dot: var(--ok); --dot-halo: var(--ok-soft); }
.choice button[data-mark="fix"], .choice button[data-mark="fault"] { --dot: var(--fault); --dot-halo: var(--fault-soft); }
.choice button[data-mark="keep"]:hover, .choice button[data-mark="right"]:hover { background: var(--ok-soft); border-color: var(--ok); }
.choice button[data-mark="fix"]:hover, .choice button[data-mark="fault"]:hover { background: var(--fault-soft); border-color: var(--fault); }
.choice button[aria-pressed="true"] { --dot: var(--surface); --dot-halo: rgb(255 255 255 / 0.25); box-shadow: var(--shadow-xs); }
.choice button[aria-pressed="true"][data-mark="right"] { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.choice button[aria-pressed="true"][data-mark="fault"] { background: var(--fault); border-color: var(--fault); color: var(--surface); }
.navrow { display: flex; gap: var(--s2); margin: var(--s4) 0; }
.navrow > * { flex: 1; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: var(--s2); }
.strip a {
  display: grid; place-items: center; height: 40px; border-radius: var(--r-md); text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--ink); font-variant-numeric: tabular-nums; font-size: var(--t-sm); font-weight: 500;
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.strip a:hover { border-color: var(--field-line); }
@media (max-width: 720px), (pointer: coarse) { .strip a { height: 44px; } .checklist a { display: inline-block; padding: 12px 0; } }
.strip a.right { background: var(--ok-soft); border-color: var(--ok); }
.strip a.fault { background: var(--fault-soft); border-color: var(--fault); }
.strip a.part { background: var(--warn-soft); border-style: dashed; }
.strip a[aria-current="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (max-width: 900px) {
  .pictures { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
  /* a phone turned sideways: the picture fits the screen, with its buttons and room to scroll below */
  .pictures .stage { min-height: 0; aspect-ratio: 4 / 3; max-height: calc(100dvh - var(--header) - 72px); }
}

/* ---- words, fix, submit ---- */
.page-text { font-size: 1.0625rem; line-height: 1.6; background: var(--surface-sunk); border-left: 3px solid var(--line-strong); padding: var(--s3) var(--s4); border-radius: 6px; margin: 0 0 var(--s3); }
.page-text b { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.stepnum { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--t-sm); margin-right: var(--s2); }
.file-pick { position: relative; }
.file-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
progress { width: 100%; height: 8px; accent-color: var(--accent); }
.preview { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); margin-top: var(--s2); }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.checklist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { content: "\25CB"; color: var(--muted); }
.checklist li.ok::before { content: "\2713"; color: var(--ok); font-weight: 700; }

/* ---- dialog ---- */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgb(3 7 18 / 0.42); display: grid; place-items: center; padding: var(--s4);
  transition: opacity 160ms ease; @starting-style { opacity: 0; }
}
.dialog {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--s5); width: 460px; max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem); overflow: auto; box-shadow: 0 0 0 1px var(--neutral-edge), var(--shadow-pop);
}
.dialog h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.dialog p { color: var(--ink-soft); }
.dialog .row { justify-content: flex-end; margin-top: var(--s5); }
@media (prefers-reduced-motion: reduce) {
  .scrim, .account .menu, .notice { transition: none; }
  button:active:not(:disabled), .btn:active { transform: none; }
}

/* ---- help ---- */
/* the video above its lines on every screen: beside them it was too small to read on a laptop */
.help-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.help-item video { width: 100%; max-width: 760px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--stage); display: block; box-shadow: var(--shadow); }
.help-item ul { margin: 0; padding-left: 20px; }
.help-item li { margin-bottom: 6px; overflow-wrap: break-word; }   /* an email address breaks rather than push the page sideways */
@media (max-width: 720px) { .help-item { gap: var(--s3); } }

/* ---- the founder's People and Settings ---- */
.section-head { margin: var(--s7) 0 var(--s3); }
.section-head:first-child { margin-top: 0; }
#view-people > section + section { margin-top: var(--s6); }   /* one even gap between People's three parts */
.section-head h2 { margin: 0 0 var(--s1); font-size: var(--t-lg); }
/* a settings card: one even gap between its lines; a message line takes room only once it says something */
.settings-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.settings-card > * { margin: 0; }
.settings-card > h2 { margin-bottom: var(--s1); }
.settings-card > label:not(.toggle) { margin-top: var(--s3); }
.settings-card > .status:empty { min-height: 0; margin: 0; }   /* after a row too: every card ends the same (L10) */   /* kept in the page, so a screen reader still hears it fill */
.settings-card > p:not(.status):empty { display: none; }
.section-head p { margin: 0; color: var(--muted); }
.people-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: 0 0 var(--s4); }
.person-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-content: start; overflow-wrap: break-word; min-width: 0; }
.person-card.revoked { box-shadow: none; background: var(--surface-sunk); color: var(--muted); }
.person-card .name-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.person-card .name-line b { font-size: var(--t-lg); font-weight: 600; }
.person-card .row { margin-top: var(--s1); }
.add-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.add-row input { flex: 1 1 16rem; width: auto; min-width: 0; max-width: 100%; }   /* shrinks to the column at aA 200% (P2) */
/* a table in a card: a quiet header row on grey, hairlines between rows, the row under the pointer lit */
table.people { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; margin-top: var(--s4); }
table.people th, table.people td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.people tr:last-child td { border-bottom: 0; }
table.people th { font-size: var(--t-xs); color: var(--muted); font-weight: 600; background: var(--surface-sunk); white-space: nowrap; }
table.people th:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
table.people th:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
table.people thead th { border-bottom: 0; }
table.people td { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
table.people tbody tr:hover td { background: var(--surface-sunk); }
table.people tr.revoked td { color: var(--muted); }
table.people a.name { font-weight: 600; text-decoration: none; }
table.people a.name:hover { text-decoration: underline; }
@media (max-width: 720px), (pointer: coarse) { table.people a.name { display: inline-block; padding: 12px 0; } }
.table-scroll { overflow-x: auto; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--line); display: inline-block; }
.dots i.y { background: var(--ok); }
.dots i.n { background: var(--fault); }
.score { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s4); font-size: 0.9375rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
.pic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 800px) { .pic-grid { grid-template-columns: 1fr; } }
.pic-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.pic-card .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--stage); cursor: zoom-in; }
.pic-card .thumb img, .pic-card .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pic-card .body { padding: var(--s3) var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pic-card .body h3 { font-size: var(--t-xs); color: var(--muted); margin: 0 0 var(--s1); font-weight: 600; }
.pic-card .head { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--s4); font-weight: 600; border-bottom: 1px solid var(--line); }
/* a badge: a tinted tag with a hairline ring of its own colour (Tremor's badge) */
.pill {
  display: inline-block; max-width: 100%; font-size: var(--t-xs); line-height: 1.4; padding: 2px var(--s2); border-radius: var(--r-sm); font-weight: 600;
  background: var(--neutral-soft); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--pill-edge, var(--neutral-edge));
}
.pill.y { background: var(--ok-soft); color: var(--ok-text); --pill-edge: var(--ok-edge); }
.pill.n { background: var(--fault-soft); color: var(--fault-text); --pill-edge: var(--fault-edge); }
.pill.m { background: var(--neutral-soft); color: var(--muted); }
mark { background: var(--highlight); color: inherit; padding: 0 2px; border-radius: 3px; }
.word-err { display: flex; gap: var(--s3); justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.word-err.likely { background: var(--warn-soft); margin: 0 calc(-1 * var(--card-pad)); padding: 10px var(--card-pad); }
/* a set of choices in one row (shadcn's toggle group): one box, the chosen one filled */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xs); }   /* wraps at aA 300% rather than push the page sideways */
.seg button { border: 0; border-radius: 0; min-height: 36px; padding: 6px var(--s3); font-size: var(--t-sm); box-shadow: none; font-weight: 500; }
.seg button:hover { background: var(--surface-hover); }
.seg button:active:not(:disabled) { transform: none; }
@media (max-width: 720px), (pointer: coarse) { .seg button { min-height: 44px; } }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 600; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.side figure { margin: 0; }
.side figcaption { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s1); font-weight: 600; }
.side img, .diffmap { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; background: var(--stage); }
@media (max-width: 640px) { .side { grid-template-columns: 1fr; } }
.linkbox { display: flex; gap: var(--s2); align-items: center; background: var(--accent-soft); padding: 10px var(--s3); border-radius: var(--radius); margin: var(--s2) 0; flex-wrap: wrap; }
.linkbox code { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: var(--t-xs); }
@media (max-width: 700px) {
  table.people thead { display: none; }
  table.people, table.people tbody, table.people tr, table.people td { display: block; }
  table.people tr { border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  table.people tr:last-child { border-bottom: 0; }
  /* label then value; the value drops under its label when large text leaves no room beside it */
  table.people td { border: 0; padding: 3px 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); align-items: baseline; overflow-wrap: break-word; }
  table.people td::before { content: attr(data-label); color: var(--muted); font-size: var(--t-xs); flex: 0 0 auto; width: 5.5em; max-width: 100%; }
  table.people td > * { min-width: 0; }
}

/* ---- real books (#280): the list ---- */
.book-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
/* a group's heading: its icon, its name, a rule to the edge */
.book-list h2.group { font-size: var(--t-md); font-weight: 600; color: var(--ink-soft); margin: var(--s4) 0 0; display: flex; align-items: center; gap: var(--s2); }
.book-list h2.group > svg.icon { color: var(--muted); }
.book-list h2.group::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: var(--s1); }
.book-list h2.group:first-child { margin-top: 0; }
.book-list h2.group[data-group="started"] { color: var(--accent-text); }
.book-list h2.group[data-group="started"] > svg.icon { color: var(--accent); }
/* A book's card: its cover, then its name, stage and progress, then Open. The text takes the card's width;
   Open goes under it once the card is narrower than about two thirds of a laptop column (a phone, or a big
   text size: rem grows with it) */
.book-row { margin: 0; overflow-wrap: break-word; }
.book-row { --cover-w: 76px; }
/* one grid on every card (L2, 17 Oct): the cover, the text beside it, the buttons under the text in the same place */
.book-head { display: grid; grid-template-columns: var(--cover-w) minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: start; }
.book-head > .book-cover { grid-row: span 2; }
.book-head > .book-info { min-width: 0; display: grid; gap: var(--s2); }
.book-info > * { margin: 0; }
/* the cover: its own size reserved, so nothing moves when it loads */
.book-cover {
  flex: none; display: block; width: var(--cover-w); aspect-ratio: 24 / 25; border-radius: var(--r-md); overflow: hidden;
  background: var(--stage); box-shadow: 0 0 0 1px var(--line), var(--shadow-xs); color: var(--muted);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover .img-fail { min-width: 0; min-height: 0; height: 100%; padding: 2px; font-size: 0.75rem; }
.book-cover > svg.icon { width: 100%; height: 100%; padding: 22px; }
/* the button may wrap its words and take the card's width rather than push the page sideways (aA 200%) */
.book-head > .row { grid-column: 2; justify-self: start; min-width: 0; }
/* a Reviewer's practice-copy line under the buttons, in line with the text above it */
.book-row > .note-line { margin: var(--s3) 0 0 calc(var(--cover-w) + var(--s4)); }
.book-head > .row .btn { white-space: normal; text-align: center; max-width: 100%; }
.book-row > .alert, .book-row > details.alert { margin: var(--s3) 0 0; }
.book-row h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; }
.book-row h2 a { text-decoration: none; color: var(--ink); }
.book-row h2 a:hover { text-decoration: underline; }
.book-row h2 .tag { margin-right: var(--s1); }
@media (max-width: 720px), (pointer: coarse) { .book-row h2 a { display: inline-block; padding: 10px 0; } }
.facts { font-size: var(--t-sm); color: var(--muted); display: flex; gap: var(--s1) var(--s4); flex-wrap: wrap; align-items: center; font-variant-numeric: tabular-nums; }
.facts > span:has(> svg.icon) { display: inline-flex; align-items: center; gap: 5px; }
.facts svg.icon { width: 15px; height: 15px; flex: none; }
/* how far the check is: a bar and its words ("12 of 20 checked · 2 to fix") */
.progress { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.progress .bar { height: 6px; border-radius: 999px; background: var(--surface-press); overflow: hidden; display: flex; max-width: 22rem; }
.progress .bar i { display: block; height: 100%; background: var(--ok); }
.progress .bar i.fix { background: var(--fault); }
.progress .words { overflow-wrap: break-word; }
.progress .words > span { white-space: nowrap; }   /* "6 of 20 checked" never splits: the parts wrap between them */
.progress .words .fix { color: var(--fault-text); font-weight: 600; }
.progress .words .drafts { color: var(--warn-text); font-weight: 600; }
.progress.none { color: var(--muted); }
/* the founder's line of what the book's art has cost so far */
.cost { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--t-sm); cursor: help; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.cost svg.icon { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .book-row { --cover-w: 56px; }
  .book-head { gap: var(--s3); }
  .book-head > .book-cover { grid-row: auto; }
  .book-head > .row { grid-column: 1 / -1; justify-self: stretch; }
  .book-row > .note-line { margin-left: 0; }
  .book-head > .row > * { flex: 1 1 0; min-width: min(100%, 9rem); }   /* About and Open side by side, wrapping at big text */
}
.pill.ready { background: var(--accent-soft); color: var(--accent-text); --pill-edge: var(--accent-edge); }
.pill.working, .pill.queued, .pill.paused, .pill.changed { background: var(--warn-soft); color: var(--warn-text); --pill-edge: var(--warn-edge); }
.pill.stuck { background: var(--fault-soft); color: var(--fault-text); --pill-edge: var(--fault-edge); }
.pill.chris, .pill.idle { background: var(--neutral-soft); color: var(--muted); }
.pill.done { background: var(--ok-soft); color: var(--ok-text); --pill-edge: var(--ok-edge); }
/* a book's stage carries its icon, or else a dot of its colour, before its words (the words say it too) */
.pill:has(> svg.icon) { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px var(--s2); font-size: var(--t-sm); }
.pill > svg.icon { width: 15px; height: 15px; flex: none; }
.pill:is(.ready, .working, .queued, .changed, .stuck, .chris, .idle, .done):not(:has(> svg.icon))::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  margin-right: 6px; vertical-align: 0.12em; opacity: 0.85;
}

/* ---- who checks a book (bookkit.js whoBox): the Reviewer picker, practice copies ---- */
.who { margin-top: var(--s3); display: grid; gap: var(--s2); }
.who .row { align-items: center; }
.who .row .btn-sm { min-height: 44px; }   /* as tall as the picker beside it */
.who label { margin: 0; }
select {
  font: inherit; font-size: var(--t-md); min-height: 44px; max-width: 100%; padding: 8px var(--s3); border-radius: var(--radius);
  border: 1px solid var(--field-line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
}
select { height: max(44px, calc(1.5em + 18px)); }   /* WebKit ignores a select's min-height (I9), Mac Safari too (L8) */
select:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.who .alert { margin: 0; }
.who .status:empty { display: none; }
.copy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.copy-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto auto; align-items: center; gap: var(--s1) var(--s3); padding: var(--s1) 0; border-top: 1px solid var(--line); }
.copy-list .copy-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
@media (max-width: 720px) {
  .copy-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .copy-list .copy-progress { grid-column: 1 / -1; grid-row: 2; }
}
.copy-list li a { font-weight: 600; }
.copy-list .copy-who { display: inline-flex; align-items: center; gap: 6px; }
.copy-list .copy-who svg.icon { width: 16px; height: 16px; color: var(--muted); }
/* a one-line note with its icon: a practice copy says so in the card's own grey, not a coloured box */
.note-line { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
.note-line svg.icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.who-row label { display: inline-flex; }
/* "Asked of you": one compact line on a card until he opens it */
.book-row details.alert { padding: var(--s2) var(--s3); }
.book-row details.alert > summary { display: flex; align-items: center; gap: var(--s2); }
.book-row details.alert > summary svg.icon { width: 16px; height: 16px; flex: none; }
.book-row details.alert[open] > summary { margin-bottom: var(--s1); }
.cost-box > summary { list-style: none; display: inline-flex; }
.cost-box > summary::-webkit-details-marker { display: none; }
.cost-box ul { margin: var(--s1) 0 0; padding-left: 20px; }
.ticks { display: grid; gap: var(--s1); margin: 0 0 var(--s3); }
label.tick { display: flex; align-items: center; gap: var(--s2); font-weight: 550; min-height: 44px; margin: 0; }
label.tick input { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---- the Page check ---- */
/* a laptop: the picture, its tools and the people in it stay put under the bars while the answer column scrolls
   with the page (founder, 16 Oct: "it scrolls the controls on the right so you can always keep the images");
   the picture leaves room under it for the people, so likeness is judged without scrolling at 1440 x 900 */
.check { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); padding: var(--s4) var(--gutter); max-width: 1800px; margin: 0 auto;
  --cast-room: 168px; }
.check > .pic-col { position: sticky; top: calc(var(--header) + var(--bar-h) + var(--s4)); align-self: start; min-width: 0; }
.check .stage { width: min(100%, var(--cap) * var(--ar, 100)); height: auto; min-height: 240px; margin-inline: auto;
  --cap: calc(100dvh - var(--header) - var(--bar-h) - var(--tools-h) - var(--cast-room) - 2 * var(--s4)); max-height: var(--cap); }
.check .answer { min-width: 0; }
.cast { display: flex; gap: var(--s4); overflow-x: auto; padding: var(--s1) 0 var(--s2); margin-top: var(--s2); }
.cast figure { margin: 0; flex: 0 0 auto; }
/* a caption wraps to its picture's width rather than run out of a strip that scrolls sideways (P12) */
.cast figcaption { font-size: var(--t-xs); font-weight: 600; margin-bottom: var(--s1); color: var(--muted); width: min-content; min-width: 100%; }
.cast .pair { display: flex; gap: var(--s1); }
.cast img { height: 120px; width: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--stage); display: block; }
button.pic { padding: 0; border: 0; min-height: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); display: block; box-shadow: none; }
button.pic:hover { background: none; }
button.pic:hover img { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.comment { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.comment .who { font-size: var(--t-xs); color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.comment .who b { color: var(--ink); }
.comment p { margin: var(--s1) 0; overflow-wrap: break-word; white-space: pre-wrap; }
.line-agent, .line-chris { font-size: 0.9375rem; background: var(--surface-sunk); border-left: 3px solid var(--accent); padding: 6px 10px; border-radius: 6px; margin: 6px 0; overflow-wrap: break-word; }
.line-chris { border-left-color: var(--ok); }
.comment.teach { background: var(--ok-soft); margin: 0 calc(-1 * var(--s3)); padding: var(--s3); border-radius: var(--r-sm); }
.tool-box { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.tool-box h2 { font-size: var(--t-md); font-weight: 600; }
.versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.versions figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s2); min-width: 0; background: var(--surface); box-shadow: var(--shadow-xs); }
.versions figure.current { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.versions img { width: 100%; height: auto; border-radius: var(--r-sm); display: block; background: var(--stage); }
.versions figcaption { font-size: var(--t-sm); margin: var(--s1) 0; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.versions .why { overflow-wrap: break-word; white-space: pre-wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s4); }
/* Keep and Fix side by side, one above the other when the screen is too narrow for both (aA 300%) */
.check .choice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.grid a {
  display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 150ms ease, border-color 150ms ease;
}
.grid a:hover { border-color: var(--line-strong); box-shadow: 0 6px 16px -6px rgb(16 24 40 / 0.16), var(--shadow); }
.grid a img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--stage); display: block; border-bottom: 1px solid var(--line); }
.grid a .cap { padding: 10px var(--s3); font-size: var(--t-sm); font-weight: 500; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.grid a.keep { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok), var(--shadow); }
.grid a.fix { border-color: var(--fault); box-shadow: inset 0 0 0 1px var(--fault), var(--shadow); }
.choice button[aria-pressed="true"][data-mark="keep"] { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.choice button[aria-pressed="true"][data-mark="fix"] { background: var(--fault); border-color: var(--fault); color: var(--surface); }
.danger-fill { background: var(--fault); border-color: var(--fault); color: var(--surface); }
.danger-fill:hover { background: var(--fault-hover); border-color: var(--fault-hover); }
.prewrap, #story { white-space: pre-wrap; overflow-wrap: break-word; }
.lookat { background: var(--warn-soft); border-radius: var(--r-md); padding: 10px var(--s3); margin: var(--s2) 0; box-shadow: inset 0 0 0 1px var(--warn-edge); }
.lookat.chris { background: var(--neutral-soft); box-shadow: inset 0 0 0 1px var(--neutral-edge); }
.lookat p { margin: 0 0 6px; }
.finish ul { margin: 6px 0 var(--s3); padding-left: 20px; overflow-wrap: break-word; }
.finish li + li { margin-top: var(--s1); }
.narrow { max-width: 120px; }
.mt8 { margin-top: var(--s2); }
.mt24 { margin-top: var(--s5); }
.row + .row, .row + p { margin-top: var(--s2); }   /* stacked button rows never touch */
.page-head .facts { color: var(--muted); }
.toggle { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.toggle input { width: 22px; height: 22px; }
.check-label { display: flex; gap: var(--s2); align-items: center; font-weight: 400; margin: var(--s2) 0; min-height: 44px; cursor: pointer; }
.check-label input { width: 22px; height: 22px; flex: 0 0 auto; }
.job-line { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: var(--t-sm); padding: var(--s1) 0; }
/* one column up to 1100 px, so a 13-inch iPad upright never gets a smaller picture than an 11-inch (I3) */
@media (max-width: 1100px) {
  .check { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .check > .pic-col { position: static; }
  /* as tall as the screen under the book's bar allows, and no wider than the picture at that height
     (viewer.js sets --ar), so a capped box still hugs its picture (U18) */
  .check .stage {
    --cap: calc(100dvh - var(--header) - var(--bar-h) - var(--tools-h) - var(--s5));
    height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: var(--cap);
    width: min(100%, var(--cap) * var(--ar, 100)); margin-inline: auto;
  }
}
/* Move the words and the hand fix need a laptop or an iPad (upright from 744 px); a phone gets one line (I1) */
@media (max-width: 700px) { .laptop-only { display: none !important; } }
/* a phone held sideways (P1): the header and the book's bar scroll away, and the picture takes the screen's height */
@media (max-height: 520px) {
  .top, .pagebar { position: static; }
  .check .stage, .pictures .stage { --cap: calc(100dvh - var(--s5)); max-height: var(--cap); min-height: 0; width: min(100%, var(--cap) * var(--ar, 100)); margin-inline: auto; }
}
@media (min-width: 701px) { .phone-only { display: none !important; } }

/* ---- the Reference check: the family's photos stay beside each person's versions ---- */
.ref { max-width: 1680px; margin: 0 auto; padding: var(--s5) var(--gutter) var(--s8); }
/* the notes for Chris sit under the intro at its full width: beside it, long notes squeezed the heading to a letter a line */
.ref-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
.person { padding: 0; overflow: visible; scroll-margin-top: calc(var(--header) + var(--pagebar) + var(--s3)); }
.person-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.person-top h2 { margin: 0; }
.person-body { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--s5); padding: var(--s5); }
/* the photos stay in view while the versions scroll past them; a long set scrolls inside its column */
.ref-photos { min-width: 0; align-self: start; position: sticky; top: calc(var(--header) + var(--pagebar) + var(--s4));
  max-height: calc(100dvh - var(--header) - var(--pagebar) - var(--s6)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s1); }
.ref-photos h3, .ref-versions h3 { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin: 0 0 var(--s2); }
.ref-photos .cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); overflow: visible; margin: 0; padding: 0; }
.ref-photos .cast figure { min-width: 0; }
.ref-photos .cast img { width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.ref-photos .about { list-style: none; padding: 0; margin: var(--s4) 0 0; font-size: var(--t-sm); display: grid; gap: var(--s1); }
.ref-photos .about b { font-weight: 650; }
.ref-versions { min-width: 0; }
/* each version as large as the column allows, never taller than the screen; two abreast on a wide screen */
.versions.wide-versions { grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr)); gap: var(--s4); margin: 0; }
.wide-versions img { max-height: calc(100dvh - var(--header) - var(--pagebar) - 160px); object-fit: contain; }
.wide-versions figure { padding: var(--s3); }
.wide-versions figcaption { font-size: var(--t-md); margin: 0 0 var(--s2); }
.wide-versions .row { margin-top: var(--s3); }
.wide-versions .row button { min-height: 44px; padding: 10px var(--s5); font-size: var(--t-md); }
.wide-versions textarea { margin-top: var(--s3); }
.person-note { padding: 0 var(--s5) var(--s4); margin: 0; }
.person-top h2:focus { outline: none; }   /* where a "To do" link lands: a place to read from, not a control */
.wide-versions .status:empty { min-height: 0; margin: 0; }   /* a version's own message takes room only when it says something */
#approved.cast img { height: 220px; }
@media (max-width: 1100px) {
  .person-body { grid-template-columns: minmax(200px, 32%) minmax(0, 1fr); gap: var(--s4); }
  .ref-photos .cast { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 799px) { .person-body { grid-template-columns: minmax(0, 1fr); } .ref-photos { position: static; max-height: none; overflow: visible; } }
/* the To do line's names: chips a thumb's size, never a comma stranded at the start of a line (P7, I11) */
.todo-names { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.todo-names a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 550; box-shadow: var(--shadow-xs); }
.todo-names a:hover { background: var(--accent-soft); border-color: var(--accent-edge); }
@media (max-width: 720px), (pointer: coarse) { .todo-names a { min-height: 44px; } }
@media (max-width: 720px) {
  .ref { padding-top: var(--s4); }
  .person-top, .person-body { padding: var(--s4); }
  .person-note { padding: 0 var(--s4) var(--s4); }
  /* a version's picture runs the card's full width: this is the likeness check, the picture leads */
  .person-body { padding-left: 0; padding-right: 0; }
  .ref-photos, .ref-versions > h3, .ref-versions > p, .wide-versions .row, .wide-versions figcaption, .wide-versions .why, .wide-versions .status { padding-left: var(--s4); padding-right: var(--s4); }
  .wide-versions textarea { margin-left: var(--s4); margin-right: var(--s4); width: calc(100% - 2 * var(--s4)); }
  .wide-versions figure { border: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .wide-versions figure.current { box-shadow: none; }
  .wide-versions img { border-radius: 0; }
  .person { scroll-margin-top: calc(var(--pagebar) + var(--s3)); }
  .ref-photos .cast { display: flex; overflow-x: auto; padding-bottom: var(--s2); }
  .ref-photos .cast figure { flex: 0 0 auto; }
  .ref-photos .cast img { width: auto; height: 160px; }
  #approved.cast img { height: 140px; }
}

/* ---- what the family emailed ---- */
.mail { display: grid; gap: var(--s3); }
.mail-msg { border-left: 3px solid var(--accent); background: var(--surface-sunk); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s3) var(--s4); min-width: 0; }
.mail-msg.studio { border-left-color: var(--ok); }
details.mail-msg > summary { list-style: none; }
details.mail-msg > summary::-webkit-details-marker { display: none; }
details.mail-msg > summary .from { margin: 0; }
details.mail-msg > summary .open { color: var(--accent); font-weight: 600; }
details.mail-msg[open] > summary .open { display: none; }
details.mail-msg[open] > summary .from { margin-bottom: var(--s2); }
.mail-msg .from { display: flex; gap: var(--s2) var(--s3); flex-wrap: wrap; align-items: baseline; font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s2); }
.mail-msg .from b { color: var(--ink); font-size: var(--t-md); }
.mail-msg .body { white-space: pre-wrap; overflow-wrap: break-word; margin: 0; max-width: 75ch; }
/* each emailed photo's box is there before it loads, so the strip never moves (L9); the whole photo inside it */
.mail-msg .cast img { width: 120px; height: 160px; object-fit: contain; }
.mail-site { font-size: var(--t-sm); color: var(--muted); }
.mail-site summary { cursor: pointer; }
.mail-site ul { margin: var(--s2) 0 0; padding-left: 20px; }

/* ---- Move the words (#289): the caption editor, full screen, a laptop or an iPad. The editor is the cockpit's
   (tools/cockpit_editor.js); words.js sets it up; these are its looks here (the Desk's CSP takes no <style>). ---- */
@font-face { font-family: "Mali"; src: url("/static/fonts/Mali-Medium.ttf") format("truetype"); font-display: block; }
html.words-open { overflow: hidden; }
.words-editor { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.words-head {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; min-height: var(--pagebar);
  padding: var(--s3) var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line);
}
.words-head h2 { margin: 0; font-size: var(--t-lg); }
.words-body { flex: 1; min-height: 0; padding: var(--s4) var(--gutter); }
.words-body .msg { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: var(--s7) 0 var(--s4); margin: 0; }
.words-body > .row { justify-content: center; }
/* the picture takes all the room; the controls are one column beside it, Save always in view under them */
.ced {
  height: 100%; display: grid; gap: var(--s4) var(--s5); grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage tools" "stage foot";
}
.ced .stage { grid-area: stage; align-self: start; cursor: move; }
.ced .stage .konvajs-content { margin: 0 auto; }
.ced .tools { grid-area: tools; min-height: 0; overflow-y: auto; display: grid; gap: var(--s2); align-content: start; padding: 3px; }
.ced .tools p { margin: 0; }
.ced .how { font-weight: 600; }
.ced .tb { display: grid; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--shadow-xs); }
.ced .tb.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ced .seglbl { margin: 0; font-size: var(--t-md); overflow-wrap: anywhere; }
.ced .seglbl .first { font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
/* only the selected block's controls show; another block's card is its name, pressed to select it */
.ced .tb:not(.active) > :not(.seglbl) { display: none; }
.ced .pick { all: unset; display: block; width: 100%; cursor: pointer; font-weight: 650; border-radius: var(--r-sm); }
.ced .pick:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 4px; }
.ced .tb:not(.active):hover { border-color: var(--line-strong); }
.ced .ctl { display: grid; gap: var(--s1); justify-items: start; }
.ced .ctl .lbl { font-size: var(--t-sm); font-weight: 600; }
.ced .ctl .lbl .pt { font-weight: 400; color: var(--muted); margin-left: var(--s1); }   /* "About 16 pt in print" beside Size */
.ced .rb { justify-self: start; }
.ced .foot { grid-area: foot; display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.ced .foot p { margin: 0; font-size: var(--t-sm); }
/* What the page says about the picture sits under it, at the foot of the picture's column (the picture is sized to
   leave it room, words.js maxH), so the controls beside it keep their room at 1366x768 (W12). Nothing moves
   (founder): the shade line keeps one line, the warning box three (scrolling past them) and the status two, whether
   or not they say anything, so neither the picture, the cards nor Save shift when a warning comes and goes. */
.ced .foot.notes { grid-area: stage; align-self: end; border-top: 0; padding-top: 0; }
.ced .foot .shadeoff { line-height: 1.45; min-height: 1.45em; }
.ced .foot .warn {
  background: var(--warn-soft); color: var(--warn-text); border-radius: var(--r-md); padding: var(--s2) var(--s3); white-space: pre-line;
  box-shadow: inset 0 0 0 1px var(--warn-edge); line-height: 1.45; box-sizing: border-box; height: calc(3 * 1.45em + 2 * var(--s2)); overflow-y: auto;
}
.ced .foot .warn:empty { background: transparent; box-shadow: none; }
.ced .foot .st { color: var(--muted); line-height: 1.45; min-height: 2.9em; overflow-wrap: anywhere; }
.ced .foot .st.ok { color: var(--ok-text); }
.ced .foot .st.bad { color: var(--fault); }   /* a refusal reads as one, never as a hint (F4) */
.ced .foot .row { justify-content: center; }
@media (max-width: 1200px) { .ced { grid-template-columns: minmax(0, 1fr) 320px; } }
/* a narrow window or an iPad upright: the controls go under the picture, so the picture takes the width (I3) */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .words-body { overflow-y: auto; }
  .ced { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "stage" "notes" "tools" "foot"; }
  .ced .foot.notes { grid-area: notes; }
}

.notice {
  position: fixed; left: 50%; bottom: max(var(--s4), env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; max-width: calc(100vw - 2rem); background: var(--ink); color: var(--surface); padding: var(--s3) var(--s4);
  border-radius: var(--r-lg); font-size: 0.9375rem; font-weight: 500; box-shadow: var(--shadow-pop);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
  @starting-style { opacity: 0; transform: translate(-50%, 8px); }
}

/* Full screen's bar is at the foot: a notice there would cover Previous and the count (tablet F8), so it shows at the top */
body:has(.viewer-box.full) .notice { bottom: auto; top: max(var(--s4), env(safe-area-inset-top)); }

/* a picture that would not load, in its own place (common.js), and the count under a box near its cap */
.img-fail {
  display: grid; place-items: center; min-width: 120px; min-height: 80px; padding: var(--s2) var(--s3); text-align: center;
  background: var(--stage); color: var(--ink); font-size: var(--t-sm); border-radius: var(--r-sm); cursor: pointer; text-decoration: underline;
}
.text-count { font-size: var(--t-xs); color: var(--muted); margin: var(--s1) 0 0; font-variant-numeric: tabular-nums; }
.text-count.full { color: var(--fault); }
details > summary { cursor: pointer; }
@media (max-width: 720px), (pointer: coarse) { details > summary { padding-top: 12px; padding-bottom: 12px; } }   /* 44 px to tap */
@media (hover: hover) and (pointer: fine) { .touch-only { display: none; } }   /* a line only a phone or tablet needs */
.fine-only { display: none; }   /* a line only a mouse or trackpad needs */
@media (hover: hover) and (pointer: fine) { .fine-only { display: block; } }

/* Safari aA 200% on a phone: a card's text gets the width, so a book's card stays under a screen tall (S17) */
@media (max-width: 300px) {
  :root { --card-pad: var(--s4); }
  /* the answer column gives its panel up, so its words and buttons keep the width */
  .answer { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .choice button::before { display: none; }
  /* the trial's answers, Previous and Next and the 1-12 keys stack rather than push the page sideways */
  .choice { grid-template-columns: minmax(0, 1fr); }
  .navrow, .checklist li { flex-wrap: wrap; }
  .strip { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .center-card { padding: var(--card-pad); }
  .wrap.alone .center-card::before { display: none; }
}
/* very narrow (Safari zoomed to 300%): the boxes give up their padding before the page scrolls sideways */
@media (max-width: 240px) {
  :root { --gutter: 8px; --card-pad: var(--s3); }
  .person-top, .person-body { padding: var(--s3); }
  button, .btn { white-space: normal; max-width: 100%; }
  .pagebar .btn, .pagebar button { white-space: normal; }
}

/* Safari 300% (130 px): long words in a person's facts ("strawberry-blonde") break rather than push the
   Reference check sideways; the founder's Reviewers row wraps (re-test, 13 Oct). */
[data-person] { overflow-wrap: break-word; min-width: 0; }
#reviewers li, #reviewers li .row, #devices li { flex-wrap: wrap; }   /* and Revoke drops under its device (P2) */
/* a device's words stay beside its tick and wrap there; "This device" keeps a gap from the name (L10) */
#devices li > span:first-of-type { flex: 1 1 12rem; min-width: 0; }
#devices li .pill { margin-left: var(--s2); }

/* ---- Message Chris (bookkit.js): the header's button and count, the box, the messages ---- */
.top button.message-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-text); font-weight: 550; box-shadow: var(--shadow-xs); }
.top button.message-btn:hover { background: var(--accent-soft); border-color: var(--accent-edge); }
.count-new {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--surface); font-size: var(--t-xs); font-weight: 650; line-height: 1;
}
.count-new[hidden] { display: none; }
/* a phone: the Reviewer's header wraps to a second row rather than run off the side */
@media (max-width: 420px) {
  .top.reviewer-top { flex-wrap: wrap; row-gap: 0; gap: 2px; }
  /* tight enough that Books, Messages, Message Chris, Help and the name menu stay one row at 390 px */
  .reviewer-top .steps a, .reviewer-top .top-link { padding-left: 7px; padding-right: 7px; }
  .reviewer-top button.message-btn { padding-left: 8px; padding-right: 8px; }
}
.dialog.message-dialog { display: flex; flex-direction: column; overflow: hidden; max-height: calc(var(--vvh, 100dvh) - 2rem); }
.message-dialog .dialog-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; margin: 0 calc(-1 * var(--s1)); padding: 0 var(--s1); }
.message-dialog fieldset { border: 0; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s1); }
.message-dialog legend { font-weight: 650; margin-bottom: var(--s1); padding: 0; }
.message-dialog .kind-book { padding-left: 30px; }
.message-dialog .kind-book select { width: 100%; }
.message-dialog textarea { width: 100%; }
.message-dialog .ask-or { margin: var(--s2) 0 0; padding-left: 1.1em; }
.messages-card .row.spread { justify-content: space-between; }
.messages-card h2 { margin: 0; }
.messages-card > .message:first-child { border-top: 0; padding-top: 0; }
.messages-card textarea { width: 100%; min-height: 64px; }
/* a message: what it is about leads (a book's cover or an idea's lightbulb, its tag, the book's name), then the words */
.message .who { font-size: var(--t-sm); gap: var(--s1) var(--s2); margin-top: 0; align-items: center; }
.message .who a, .message .who b { font-weight: 600; color: var(--ink); }
.message .who a { color: var(--accent-text); }
.msg-pic {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); overflow: hidden;
  background: var(--stage); color: var(--muted); box-shadow: 0 0 0 1px var(--line); margin-right: var(--s1);
}
.msg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-pic.idea { background: var(--warn-soft); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-edge); }
.msg-body { padding-left: calc(36px + var(--s3)); }
.message:not(:has(.msg-pic)) .msg-body { padding-left: 0; }
@media (max-width: 520px) { .msg-body { padding-left: 0; } }
.msg-act { display: grid; gap: var(--s2); margin-top: var(--s2); }
.msg-act .row + .status:empty { display: none; }
.kind-head { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin: var(--s5) 0 0; padding-bottom: var(--s1); }
.messages-card > .kind-head:first-of-type { margin-top: var(--s4); }
#list > .kind-head:first-child { margin-top: 0; }
.kind-head + .message { border-top: 0; }
.messages-card .message:last-child, #list > .message:last-child { padding-bottom: 0; }

/* ---- About this order (order.js): the order, the family's words, photos and emails, read only ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s3); }
.photo-grid figure { margin: 0; min-width: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--stage); display: block; }
.photo-grid figcaption { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s1); font-weight: 500; }
h3.sub { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin: var(--s4) 0 var(--s1); }
.qa:first-child h3.sub { margin-top: 0; }
.quote { margin: 0; padding: var(--s2) var(--s3); background: var(--surface-sunk); border-left: 3px solid var(--line-strong); border-radius: 0 var(--r-md) var(--r-md) 0; overflow-wrap: break-word; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
#storyCard summary { list-style: none; display: flex; align-items: center; gap: var(--s2); }
#storyCard summary::-webkit-details-marker { display: none; }
#storyCard summary::after { content: "Show"; color: var(--accent); font-weight: 600; font-size: var(--t-sm); margin-left: auto; }
#storyCard details[open] summary::after { content: "Hide"; }
.summary-title { margin: 0; font-size: var(--t-lg); }
/* the story folds to its heading with a Show beside it, so a closed card never reads as an empty one */
#storyCard summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
#storyCard summary::-webkit-details-marker { display: none; }
#storyCard summary .open { color: var(--accent); font-weight: 600; }
#storyCard details[open] summary .open { display: none; }
#askChris a { font-weight: 600; }

/* ==== lane PAGE, 16 Oct: the Page check after the founder's test (book.html, book.js, bookkit.js workStatus).
   New global pieces first (icons, the spinner, the scroll gutter, the meaning buttons), then the page's own. ==== */
html { scrollbar-gutter: stable; }   /* a page that grows a scrollbar never narrows the picture by its width */
.icon { flex: none; }
button .icon, .btn .icon { margin-inline: -2px; }
@keyframes desk-spin { to { transform: rotate(360deg); } }
.icon.spin { animation: desk-spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .icon.spin { animation: none; } }
/* buttons coloured by what they mean: Keep and Fixed green, Fix and Not fixed red (the primary stays lake blue,
   the picture's tools quiet grey) */
.ok-btn { color: var(--ok-text); border-color: var(--ok-edge); background: var(--ok-soft); }
.ok-btn:hover { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.fault-btn { color: var(--fault-text); border-color: var(--fault-edge); background: var(--fault-soft); }
.fault-btn:hover { background: var(--fault); border-color: var(--fault); color: var(--surface); }

/* ---- the book's work, one line in the book's bar (bookkit.js workStatus) ---- */
.pagebar .work-bar { flex: 0 1 auto; min-width: 0; }
.work-status { display: flex; align-items: center; gap: var(--s1) var(--s2); flex-wrap: wrap; font-size: var(--t-sm); line-height: 1.35;
  padding: 6px var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--ws-edge); background: var(--ws-bg); color: var(--ws-ink); }
.work-status.info { --ws-bg: var(--accent-soft); --ws-ink: var(--accent-text); --ws-edge: var(--accent-edge); }
.work-status.warn { --ws-bg: var(--warn-soft); --ws-ink: var(--warn-text); --ws-edge: var(--warn-edge); }
.work-status.bad { --ws-bg: var(--fault-soft); --ws-ink: var(--fault-text); --ws-edge: var(--fault-edge); }
.work-status .ws-main { font-weight: 600; }
.work-status .ws-more { overflow-wrap: anywhere; }
.work-status .ws-more .sep { opacity: 0.7; }
.work-status .btn-sm { min-height: 32px; padding: 4px var(--s3); }
@media (max-width: 720px) { .pagebar .work-bar { order: 3; flex-basis: 100%; } }
@media (max-width: 300px) { .work-status .ws-more { display: none; } }   /* Safari 200% on a phone: the first words only */

/* ---- the picture's bar: tools left, the pager right; every slot keeps its width as the page changes ---- */
.toolbar .tb-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.toolbar .tb-group.only-full { display: none; }
/* Keep and Fix: in the panel while it is open, in the bar while it is folded away (a phone held sideways) */
.viewer-box.full.panel-closed .toolbar .tb-group.only-full { display: inline-flex; }
/* a sticky column is a layer of its own: Full screen must be on top of the page's bars, so the column lets go */
.check > .pic-col:has(.viewer-box.full) { position: static; }
.toolbar .pager { margin-left: auto; }
.toolbar .where { min-width: 5.5em; text-align: center; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* ", 16 to check" only where the bar has room: below 1440 px it wrapped the bar to two rows and shrank the picture
   (explorer, 26 Oct); a phone gives the pager a row of its own. "20 of 20, 20 to check" fits the box, so the count
   changing never moves Previous */
.toolbar #where .to-check { display: none; }
@media (min-width: 1440px), (max-width: 600px) {
  .toolbar #where .to-check { display: inline; }
  .toolbar #where.skipping { min-width: 10.5em; }
}
.toolbar #circleCount { min-width: 4.6em; }
.toolbar #circleCount .wide-only { display: inline; }
@media (min-width: 601px) { .toolbar #circleCount { min-width: 12.5em; } }
@media (max-width: 600px) { .toolbar #circleCount .wide-only { display: none; } .toolbar .pager { flex-basis: 100%; justify-content: space-between; } }
.toolbar .pager .where { flex: 1; }
@media (min-width: 601px) { .toolbar .pager .where { flex: 0 0 auto; } }
.toolbar button.primary .icon { color: inherit; }

/* ---- the people in this page, right under the picture: every picture's box is its own shape before it loads ---- */
.cast-box { margin-top: var(--s3); }
.cast-box .cast-head { font-size: var(--t-sm); font-weight: 600; color: var(--muted); margin: 0 0 var(--s1); }
#castBox .cast { margin-top: 0; gap: var(--s3); padding: 0 0 var(--s1); }
#castBox .cast img { height: 104px; width: auto; max-width: none; object-fit: contain; }
@media (max-width: 1100px) { #castBox .cast img { height: 120px; } }

/* ---- the answer column ---- */
.answer > h1 { font-size: var(--t-xl); margin-bottom: 2px; }
.answer h2 { font-size: var(--t-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.choice button { gap: var(--s2); border-width: 1.5px; }
.choice button::before { display: none; }
.choice button[data-mark="keep"] { color: var(--ok-text); border-color: var(--ok); background: var(--ok-soft); }
.choice button[data-mark="fix"] { color: var(--fault-text); border-color: var(--fault); background: var(--fault-soft); }
.choice button[data-mark="keep"]:hover { background: var(--ok); color: var(--surface); }
.choice button[data-mark="fix"]:hover { background: var(--fault); color: var(--surface); }
.choice .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.keep-progress { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s3); }
.keep-progress .icon { margin-top: 2px; }
.answer > .status:empty { min-height: 0; margin: 0; }
.comments-box { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.comments-box > h2 { margin-bottom: var(--s2); }
.comments-box #comments > .comment:first-child { border-top: 0; padding-top: var(--s1); }
.comment.hl { background: var(--accent-soft); margin: 0 calc(-1 * var(--s3)); padding: var(--s3); border-radius: var(--r-md); }
.comment .acts { margin-top: var(--s2); gap: var(--s1) var(--s2); }
.composer { background: var(--surface-sunk); border-radius: var(--r-lg); padding: var(--s3); box-shadow: inset 0 0 0 1px var(--line); margin-top: var(--s2); }
.composer label { font-size: var(--t-sm); }
.composer textarea { min-height: 88px; }
.composer-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.composer .fine-only { margin: var(--s2) 0 0; }
.composer-head { display: flex; align-items: baseline; gap: var(--s2); justify-content: space-between; }
.composer-head label { margin-bottom: 6px; }
/* Saved / Saving... under the box, its room kept, so nothing above the caret moves as it saves (iPhone F3) */
.composer-row .save-state { margin-left: auto; min-width: 5.5em; justify-content: flex-end; text-align: right; }
.composer-row .save-state.off { flex: 1 1 12em; justify-content: flex-start; text-align: left; }
.composer .hint.bad { color: var(--fault); font-weight: 600; }
.composer .status:empty { min-height: 0; margin: 0; }
.save-state { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-sm); color: var(--muted); min-height: 1.5em; min-width: 5em; }
.save-state.saved { color: var(--ok-text); }
.save-state.off { color: var(--fault); }
.circle-list { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.chip { min-height: 36px; padding: 2px var(--s2) 2px 4px; border-radius: 999px; gap: var(--s1); font-size: var(--t-sm); background: var(--surface); }
.chip .n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--circle); color: var(--ink); font-weight: 700; font-size: var(--t-xs); }
.chip:hover { border-color: var(--fault); color: var(--fault-text); }
@media (max-width: 720px), (pointer: coarse) { .chip { min-height: 44px; padding-inline: var(--s2) var(--s3); } }
.done-list { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s2); }
.done-list > summary { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--ok-text); font-size: var(--t-sm); min-height: 36px; }
.done-list .comment { opacity: 0.85; }
.panel-send { margin-top: var(--s3); }
.panel-send button { width: 100%; }

/* ---- circles: the comment's own carry a number and an x; the page's other comments are faint, the chosen one bold ---- */
.stage circle.ring.other { stroke-opacity: 0.45; fill: none; }
.stage circle.halo.other { stroke-opacity: 0.35; }
.stage circle.ring.hl { stroke: var(--accent); fill: rgb(47 99 207 / 0.08); }
.stage .c-num circle { fill: var(--circle); stroke: white; stroke-width: calc(var(--px, 1) * 2px); }
.stage .c-num text { fill: var(--ink); font-weight: 700; text-anchor: middle; font-family: inherit; }
.stage .x-handle { pointer-events: auto; cursor: pointer; }
.stage .x-handle .hit { fill: transparent; stroke: none; }
.stage .x-handle circle:not(.hit) { fill: var(--ink); stroke: white; stroke-width: calc(var(--px, 1) * 2px); }
.stage .x-handle path { stroke: white; stroke-width: calc(var(--px, 1) * 2.4px); stroke-linecap: round; fill: none; }
.stage .x-handle:hover circle:not(.hit) { fill: var(--fault); }

/* ---- Full screen is a place to work: the picture, the bar, and the page's column in a panel beside it (under it
   on a phone held upright); the panel folds away with Comments. Keep and Fix live in the bar there. ---- */
.full-panel { display: none; }
.viewer-box.full { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 42vw); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage panel" "bar panel"; }
.viewer-box.full .stage { grid-area: stage; min-height: 0; }
.viewer-box.full .toolbar { grid-area: bar; }
.viewer-box.full .full-panel { grid-area: panel; display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-left: 1px solid var(--on-dark-line); touch-action: pan-y; }
.viewer-box.full.panel-closed { grid-template-columns: minmax(0, 1fr) 0; }
.viewer-box.full.panel-closed .full-panel { display: none; }
.viewer-box.full .full-panel .answer { box-shadow: none; border-radius: 0; padding: var(--s4); }
.viewer-box.full .full-panel .page-tool { display: none; }
.viewer-box.full .toolbar { flex-wrap: nowrap; }
.viewer-box.full .toolbar > * { flex-shrink: 0; }
.viewer-box.full .toolbar > .title { flex-shrink: 1; min-width: 0; }
.viewer-box.full .toolbar .wide-only { display: none; }
.viewer-box.full .full-panel .only-full { display: flex; }
.viewer-box.full .full-panel :focus-visible { outline-color: var(--accent); }
.viewer-box.full .toolbar .title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-dark); }
.viewer-box.full .toolbar .pager { margin-left: 0; }
.viewer-box.full .toolbar .where { color: var(--on-dark-muted); }
.viewer-box.full #panelBtn[aria-expanded="true"] { background: rgb(255 255 255 / 0.14); }
.viewer-box.full #closeFull { margin-left: auto; }
@media (orientation: portrait) and (min-height: 560px) {
  .viewer-box.full { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "stage" "bar" "panel"; }
  .viewer-box.full.panel-closed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto 0; }
  .viewer-box.full .full-panel { border-left: 0; border-top: 1px solid var(--on-dark-line); }
}

/* ==== lane LAYOUT (Page check), 17 Oct: nothing on the page moves when the page's kind, the book's work or the
   window's size changes (verification/tests/2026-10-17/verdicts/layout.md F2-F12, iphone.md F1, F2, F6) ==== */
/* the book's bar is one row on a laptop and an iPad: the work line takes the room between the name and the
   actions and shortens itself (its whole text is its tooltip), so Send never moves and the picture never drops (F11) */
@media (min-width: 721px) {
  .pagebar { flex-wrap: nowrap; }
  .pagebar .title { flex: 0 1 auto; flex-wrap: nowrap; }
  .pagebar .title .crumb, .pagebar .title .crumb-sep, .pagebar .title .where-now { flex: none; }
  .pagebar .title #bookName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pagebar .work-bar { flex: 1 1 0; }
  .pagebar .actions { flex: none; flex-wrap: nowrap; margin-left: auto; }
  .pagebar .work-status { display: inline-flex; max-width: 100%; flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; }
  .pagebar .work-status { padding-block: 2px; line-height: 1.2; }
  /* its main words never go: two short lines when the bar is narrow (an iPad), inside the bar's own height */
  .pagebar .work-status .ws-main { flex: 0 1 auto; min-width: 8em; white-space: normal; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .pagebar .work-status .ws-more { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .pagebar .work-status .btn-sm { flex: none; }
}
@media (min-width: 721px) and (max-width: 1300px) { .pagebar:has(> .work-bar:not([hidden])) .where-now { display: none; } }
/* an iPad upright (744 to 1000 px): the trial's header drops its mark (the way back is beside it) and keeps the
   person's name on one line; the book's bar shows About this order and All pages by their icons, as a phone
   does, so the book's name is read whole (tablet F6) */
@media (min-width: 721px) and (max-width: 1000px) {
  .trial-top .brand { display: none; }
  .top .account .name { white-space: nowrap; }
  .pagebar .btn-words, .pagebar .title .where-now { display: none; }
}
/* a phone: the book's bar is one compact row (three rows held a third of the screen, iphone F1): the name, About
   this order and All pages by their icons, "Send 2"; a job on the book takes the name's place, in the same height */
@media (min-width: 301px) and (max-width: 720px) {
  .pagebar { flex-wrap: nowrap; gap: var(--s2); }
  .pagebar .title { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
  .pagebar .title #bookName { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-block: 10px; line-height: 24px; }   /* 44 px, as tall as the buttons: the row's height never changes */
  .pagebar .actions { flex: none; flex-wrap: nowrap; gap: 6px; }
  .pagebar .actions .btn-sm { padding-inline: 10px; }
  .pagebar .btn-words { display: none; }
  .pagebar:has(> .work-bar:not([hidden])) .title { display: none; }
  .pagebar .work-bar { order: 0; flex: 1 1 0; min-width: 0; }
  .pagebar .work-status { flex-wrap: nowrap; padding: 2px var(--s2); line-height: 1.2; font-size: 0.8125rem; }
  .pagebar .work-status .ws-main { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .pagebar .work-status .ws-more, .pagebar .work-status > svg.icon { display: none; }   /* its words get the room */
}
/* the page's name and its note take the same room on every kind of page (a long name's second line, or the
   spread's note), so Keep and Fix stay under the finger from the Cover to the closing page (F3) */
.answer-head { min-height: calc(2 * 1.25 * var(--t-xl) + 2px); }
.answer-head > h1 { margin: 0 0 2px; }
#pageNote { line-height: calc(1.25 * var(--t-xl)); margin: 0; }
#pageNote:empty { display: none; }
/* the picture's bar: Next keeps its width when the last page names it All pages (F4); the circle count is short,
   so the bar is one row from 1280 px (F6) */
@media (min-width: 601px) { .toolbar #nextBtn { min-width: 7.5em; } }   /* a phone's pager has a row of its own */
@media (min-width: 601px) { .toolbar #circleCount, .viewer-box.full .toolbar #circleCount { min-width: 5.5em; } }
.toolbar #circleCount .wide-only { display: none; }
/* a 13-inch laptop (1280 x 800): the answer column gives the picture 40 px and the tools sit a little closer, so
   the bar stays one row. Narrower than that it is two rows, and the picture leaves room for both (--tools-h). */
@media (min-width: 1101px) and (max-width: 1300px) {
  .check { grid-template-columns: minmax(0, 1fr) 340px; }
  .check .toolbar button { padding-inline: 10px; }
  .check .toolbar .where { min-width: 4.5em; }
}
.toolbar .tb-tools { display: contents; }
/* Full screen: Comments and Close stay on the screen whatever its size; the other tools scroll sideways when the
   bar is short of room (a phone held sideways: F8; 1280 x 800 with the panel open: F9) */
@media (min-width: 601px) {
  .viewer-box.full .toolbar .tb-tools { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .viewer-box.full .toolbar .tb-tools::-webkit-scrollbar { display: none; }
  .viewer-box.full .toolbar .tb-tools > * { flex-shrink: 0; }
  .viewer-box.full .toolbar { overflow-x: visible; }
  .viewer-box.full .toolbar > .title { flex: 1 1 0; }      /* the page's name gives up its room first: it is in the panel too */
}
/* a phone held sideways: the tools' words without their icons, so Keep and Fix fit beside Comments and Close */
/* Full screen held wide: the bar runs under the picture and the panel both, so folding the panel away moves no
   button (video recorder, 17 Oct: Previous, Next, Comments and Close jumped 230-400 px) */
@media (orientation: landscape), (max-height: 559px) {
  .viewer-box.full { grid-template-areas: "stage panel" "bar bar"; }
  .viewer-box.full .full-panel { border-bottom: 1px solid var(--on-dark-line); }
  /* Keep and Fix keep their room in the bar while they are in the open panel */
  .viewer-box.full .toolbar .tb-group.only-full { display: inline-flex; visibility: hidden; }
  .viewer-box.full.panel-closed .toolbar .tb-group.only-full { visibility: visible; }
}
@media (max-height: 500px) {
  /* Undo and Fit give way on a phone held sideways (a circle's x takes it off, two fingers zoom), so Keep, Fix,
     Comments and Close fit inside the camera's cut-outs (iphone F12: about 750 px to use) */
  .viewer-box.full #undoBtn, .viewer-box.full #fitBtn { display: none; }
  .viewer-box.full .tb-tools button svg.icon { display: none; }
  .viewer-box.full .tb-tools button { padding-inline: 10px; }
  .viewer-box.full .tb-tools .where { min-width: 4.5em; }
}
/* Full screen's panel: the page's column scrolls, Send to agent stays at the panel's foot on every page (F10) */
.viewer-box.full .full-panel { display: flex; flex-direction: column; overflow: hidden; }
.viewer-box.full .full-panel > .answer { flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.viewer-box.full .full-panel > .panel-send { flex: none; margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface); }
/* an iPad upright (one column, a tall screen): the picture stays in view while the page scrolls under it, as on
   a laptop (F7). A phone, or a short window, has no room for both: the picture scrolls away with the page. */
@media (min-width: 721px) and (max-width: 1100px) and (max-aspect-ratio: 4 / 5) {
  .check > .pic-col { position: sticky; top: calc(var(--header) + var(--bar-h)); z-index: 5; background: var(--bg);
    padding: var(--s3) 0 var(--s2); margin-top: calc(-1 * var(--s3)); }
  /* the comment box being typed in: the picture lets go, so it never covers the box (book.js setupTyping) */
  .check.typing > .pic-col { position: static; }
}
/* a finger on the picture at Fit scrolls the page up and down; sideways it turns the page, two fingers zoom, and
   in Circle mode or zoomed in every touch is the picture's (iphone F2) */
.check .viewer-box:not(.full) .stage[data-zoom="1.00"]:not(.circling) { touch-action: pan-y; }

/* Safari text at 150% on a phone (about 268 px): Previous and Next keep their sides, the count on its own line
   above them, never Next alone at the left (iphone F11); the book's name ends with "..." rather than break
   inside its id */
@media (max-width: 340px) {
  .toolbar .pager { flex-wrap: wrap; row-gap: var(--s1); }
  .toolbar .pager .where { order: -1; flex: 1 1 100%; min-width: 0; }
  .toolbar .pager #nextBtn { margin-left: auto; }
}
@media (max-width: 300px) {
  .pagebar .title #bookName { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Safari text at 200% (about 201 px): a book's card puts its cover above its words, and a long stage or tag
     wraps inside the card rather than push the page sideways (iphone F10) */
  .book-row .book-head { grid-template-columns: minmax(0, 1fr); }
  .book-row .book-head > :is(.book-cover, .row) { grid-row: auto; grid-column: 1; }
  .book-row .tag, .book-row .pill { white-space: normal; }
}

/* ---- All pages: the book at a glance, then the notices with one gap between them and the grid ---- */
.page-head .head-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.page-head .head-row h1 { margin: 0; flex: 1 1 auto; }
.facts .fact { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 550; }
.facts .fact.good { color: var(--ok-text); }
.facts .fact.bad { color: var(--fault-text); }
.facts .fact.warn { color: var(--warn-text); }
.facts .fact.rule { color: var(--muted); font-weight: 400; }
.page-head > .status:empty { display: none; }
.page-head > .status { margin: var(--s2) 0 0; }
.page-head .skip-kept { margin-top: var(--s2); font-weight: 500; font-size: var(--t-sm); width: fit-content; }
.notices { display: grid; gap: var(--s3); margin: 0 0 var(--s5); }
.notices > * { min-width: 0; }
.notices .alert, .notices .card, .notices .who { margin: 0; }
.notices .messages-card.empty { padding: var(--s3) var(--s4); box-shadow: var(--shadow-xs); }
.notices .messages-card h2 { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); }
.grid a .cap .pill { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) { .viewer-box.full .toolbar { flex-wrap: wrap; } .viewer-box.full .toolbar > .title { flex-basis: 100%; } }
.viewer-box.full #circleCount .wide-only { display: none; }
@media (max-width: 600px) { .toolbar .tb-group.wide-only { display: none; } }
/* Move the words: while the exact picture is made, the picture itself says so (the line under Save is far away) */
.words-editor .ced .stage::after {
  content: "Making the exact picture..."; position: absolute; left: var(--s3); top: var(--s3); z-index: 2; pointer-events: none;
  background: rgb(17 24 39 / 0.84); color: var(--surface); font-size: var(--t-sm); font-weight: 550; padding: var(--s1) var(--s3);
  border-radius: var(--r-md); opacity: 0; transition: opacity 120ms ease;
}
.words-editor.rendering .ced .stage::after { opacity: 1; }

/* ---- the trial's timer (common.js trialClock), Start and Part 4 ---- */
.trial-clock {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px; font-size: 0.9375rem; color: var(--ink-soft);
  background: var(--neutral-soft); box-shadow: inset 0 0 0 1px var(--neutral-edge); min-width: 9.5em; justify-content: center;
}
.trial-clock b { font-weight: 650; color: var(--ink); }
.trial-clock .of { color: var(--muted); }
.trial-clock.soon { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-edge); }
.trial-clock.soon b { color: var(--warn-text); }
.trial-clock.over { background: var(--fault-soft); box-shadow: inset 0 0 0 1px var(--fault-edge); }
.trial-clock.over b { color: var(--fault-text); }
@media (max-width: 720px) { .trial-clock { min-width: 0; padding: 4px 8px; } .trial-clock .of { display: none; } }
.start-card { max-width: 40rem; margin-inline: auto; }

/* ---- the Reviewer's clock (common.js workClock, clock.py): Start working, Working 1:12 + Take a break ---- */
.work-clock {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 0.9375rem; color: var(--ink-soft);
  background: var(--neutral-soft); box-shadow: inset 0 0 0 1px var(--neutral-edge); min-width: 10.5em; justify-content: center;
}
.work-clock b { font-weight: 650; color: var(--ink); }
.work-clock b[hidden] { display: none; }
.work-clock button { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; padding: 4px 10px; border-radius: 999px; min-height: 28px; }
.work-clock.running { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-edge); }
.work-clock.running b { color: var(--ok-text); }
.work-clock.in-menu { display: none; }
@media (max-width: 720px) {
  .work-clock { display: none; }
  .work-clock.in-menu { display: flex; margin: var(--s1) var(--s2); justify-content: space-between; min-width: 0; }
  .work-clock.in-menu button { min-height: 40px; }
  .account.working > button { box-shadow: 0 0 0 2px var(--ok-edge); }
}}
table.hours td.num, table.hours th.num { text-align: right; }
table.hours tr.total td { font-weight: 650; border-top: 2px solid var(--line); }
.hours h2 .pill, #hoursRoot h2 .pill { margin-left: 8px; vertical-align: middle; }
.start-card ol { padding-left: 1.4em; display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.start-card .big { font-size: var(--t-lg); min-height: 56px; padding-inline: var(--s6); width: 100%; justify-content: center; }
.trial-books { display: grid; gap: var(--s4); }
.trial-book { display: grid; grid-template-columns: 112px 1fr; gap: var(--s4); align-items: start; }
.trial-book .book-cover { display: block; width: 112px; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--neutral-soft); }
.trial-book .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trial-book h2 { margin-bottom: var(--s1); }
.trial-book .work-status { margin: var(--s2) 0; }
.trial-book .row { margin-top: var(--s2); }
@media (max-width: 480px) { .trial-book { grid-template-columns: 72px 1fr; gap: var(--s3); } .trial-book .book-cover { width: 72px; } }
.how-list { padding-left: 1.4em; display: grid; gap: var(--s2); margin: 0; }
.guide-steps { margin-bottom: var(--s5); }
.start-list { padding-left: 1.2em; display: grid; gap: var(--s2); margin: 0 0 var(--s5); }
.trial-book .book-done, .trial-done .book-done { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; font-weight: 600; color: var(--ok-text); }
.trial-done .book-done { font-size: var(--t-lg); }
.trial-done p:last-child { margin: var(--s1) 0 0; }
.ask-foot { max-width: 72rem; margin: var(--s4) auto var(--s5); padding: 0 var(--s4); text-align: center; color: var(--muted); font-size: var(--t-sm); }
.ask-foot a { color: inherit; font-weight: 600; white-space: nowrap; }
.look-for { padding-left: 1.2em; display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.look-for .muted { display: block; font-size: var(--t-sm); }
/* a phone in the trial: the parts, the timer, Help and the name share one row, so Help is its icon */
@media (max-width: 560px) {
  .trial-top #helpLink { font-size: 0; gap: 0; padding: 0 10px; }
  .trial-top #helpLink svg.icon { display: inline; width: 20px; height: 20px; }
  .trial-top .steps a { padding-inline: 7px; }
  .trial-top { gap: 2px; }
  /* with Part 4 the five places take the first row; the timer, Help and the name the second */
  .trial-top:has(.steps a:nth-child(5)) { flex-wrap: wrap; row-gap: 0; }
  .trial-top:has(.steps a:nth-child(5)) .steps { flex: 1 0 100%; flex-wrap: nowrap; justify-content: space-between; }
}

/* ==== lane LAYOUT (lists), 17 Oct: a long message folds to six lines with Show all (bookkit.js folded) ==== */
.msg-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.msg-body .show-all { margin: 0 0 var(--s1); padding-inline: 0; }
.msg-body .show-all:hover { background: transparent; text-decoration: underline; }

/* a phone's one-row book bar holds the waiting line's words whole and nothing else: Cancel sending is on a laptop or
   iPad, where the bar has room (a phone held upright, 390 px, cut the words to fit the button) */
@media (max-width: 720px) { .pagebar .work-status [data-testid="cancel-send"] { display: none; } }
.people.books-only .classic-col { display: none; }
.book-times { list-style: none; margin: var(--s1) 0 0; padding: 0; }