/* Bridges AI audit v3. One dark theme for all 16 groups (research/07 sections 4 to 7, research/08 section 13).
   --accent (gilt bronze) means act and nothing else: buttons, the picked answer, the one number that matters (hours
   back), the action eyebrow of the booking panel. The group colour is identity only: the enamel stud of the group crest
   (assets/crest/<slug>.svg, drawn by scripts/make-crests.mjs) and --group-ui, written on <html> by build.mjs, on the
   2px top edge of .g-strip. Nowhere else.
   Type: Newsreader for headlines, numbers, inscriptions, notes and opinions; Hanken Grotesk for every control and the
   body; IBM Plex Mono for counters, prompts and tags. Four sizes: display, h2, body, small. No italics, nothing above 700.
   Gradients are surfaces only. Never gradient text, never a coloured glow, never a shine sweep. */
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-400-700.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-400-700.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;

  /* stone */
  --bg: #0E0D0B;            /* page */
  --bg-2: #121110;          /* alternate band, notes, wells inside cards */
  --surface: #171513;       /* cards */
  --surface-2: #1E1C19;     /* raised, chips, hover */
  --inset: #0A0908;         /* prompt boxes, inputs */

  /* lines */
  --line: rgb(242 236 226 / .09);
  --line-2: rgb(242 236 226 / .16);
  --line-3: rgb(242 236 226 / .28);
  --line-input: #736C61;    /* 3.5:1 on --surface: input, checkbox and radio boundaries */

  /* ink (marble) */
  --ink: #F2ECE2;           /* 15.5:1 on --surface */
  --ink-2: #BDB4A6;         /* 8.9:1 */
  --ink-3: #958C7F;         /* 5.5:1 */

  /* the one accent: gilt bronze */
  --accent: #D6A85C;        /* 8.3:1 on --surface */
  --accent-hi: #E4BC78;     /* hover */
  --accent-ink: #17120A;    /* text on the accent, 8.5:1 */
  --accent-tint: rgb(214 168 92 / .08);
  --accent-line: rgb(214 168 92 / .55);

  /* meaning */
  --good: #9CCB9F;  --good-tint: rgb(156 203 159 / .10);   /* laurel: gains, done, copied */
  --bad:  #E58F72;  --bad-tint:  rgb(229 143 114 / .10);   /* terracotta: leaks, errors */

  /* group identity (build.mjs writes these per page; these are the no-skin defaults) */
  --group: #8a8178;
  --group-ui: #a39a8f;

  /* type */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-display: clamp(2.375rem, 1.6rem + 3.2vw, 3.75rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --caps: .16em;            /* inscription tracking */
  --caps-ui: .14em;         /* eyebrow tracking */

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --gutter: 16px;           /* 24px from 640px, 32px from 1024px */
  --w-survey: 640px; --w-panel: 360px; --w-page: 1120px;
  --h-strip: 54px;

  /* shape */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --r-arch: 999px 999px 16px 16px;

  /* surfaces: gradients are surfaces. Never gradient text, never coloured glow. */
  --grad-card:    linear-gradient(180deg, #1B1916 0%, #161412 100%);
  --grad-card-hi: linear-gradient(180deg, #221F1C 0%, #1A1815 100%);
  --grad-chip:    linear-gradient(180deg, #25221E 0%, #1A1816 100%);
  --edge:         linear-gradient(180deg, rgb(242 236 226 / .17), rgb(242 236 226 / .06) 55%, rgb(242 236 226 / .04));
  --edge-hi:      linear-gradient(180deg, rgb(242 236 226 / .30), rgb(242 236 226 / .10));
  --edge-accent:  linear-gradient(160deg, rgb(214 168 92 / .60), rgb(214 168 92 / .14) 40%, rgb(242 236 226 / .06) 75%, rgb(214 168 92 / .22));
  --grad-spot:    radial-gradient(90% 60% at 50% 0%, rgb(242 236 226 / .055), transparent 70%);
  /* the statue images are graded to #0E0D0B, so the niche centre stays close to it (a lighter centre shows a box) */
  --grad-niche:   radial-gradient(70% 55% at 50% 30%, #15130F 0%, #0E0D0B 72%);
  --grad-plinth:  linear-gradient(180deg, #2A2622 0%, #1A1816 100%);
  --grad-book:    linear-gradient(165deg, rgb(214 168 92 / .13) 0%, rgb(214 168 92 / .03) 45%, transparent 70%);   /* a wash: lay it over --surface */
  --scrim:        linear-gradient(180deg, rgb(14 13 11 / 0) 30%, rgb(14 13 11 / .62) 62%, rgb(14 13 11 / .95) 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --statue-mask:  radial-gradient(ellipse 62% 66% at 50% 44%, #000 55%, transparent 100%);
  --tick-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2317120A' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2310200F' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

  /* depth: neutral black only */
  --shadow-1: inset 0 1px 0 rgb(255 255 255 / .04), 0 1px 2px rgb(0 0 0 / .5), 0 12px 28px -16px rgb(0 0 0 / .85);
  --shadow-2: 0 28px 60px -24px rgb(0 0 0 / .9);

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --d-fast: 140ms; --d-base: 220ms; --d-screen: 380ms; --d-slow: 700ms;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ============================== base ============================== */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--bg); color-scheme: dark; overflow-x: clip; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--grad-spot) no-repeat, var(--bg); color: var(--ink); font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; min-height: 100dvh; }
/* the grain: kills flat "template black"; no blend mode (blend modes on a fixed full-screen layer cost frames on phones) */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .035; background-image: var(--grain); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
ul, ol { padding: 0; list-style: none; }
i, em, cite, address { font-style: normal; }
b, strong { font-weight: 600; }
figure, blockquote { margin: 0; }
pre { margin: 0; }
::selection { background: rgb(214 168 92 / .32); color: var(--ink); }

h1, h2, h3, .h2 { font-family: var(--serif); font-weight: 500; font-optical-sizing: auto; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--t-display); line-height: 1.04; }
h2, h3, .h2 { font-size: var(--t-h2); line-height: 1.15; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 3px;
  transition: text-decoration-color var(--d-base), color var(--d-base); }
@media (hover: hover) { a:hover { text-decoration-color: currentColor; } }

/* keyboard focus is ink, a picked answer is bronze: never confused */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ============================== type helpers ============================== */
.eyebrow, .mini { font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: var(--caps-ui); text-transform: uppercase; color: var(--ink-2); }
.inscr { font: 500 var(--t-small)/1.45 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-2); }
/* the dot trails each word except the last, so a line that wraps never starts with one */
.inscr span:not(:last-child)::after { content: '\00B7'; display: inline-block; margin: 0 .45em 0 .55em; letter-spacing: 0; color: var(--ink-3); }
.inscr .is-new { animation: carve var(--d-slow) var(--ease) both; }
.num { font-family: var(--serif); font-variant-numeric: tabular-nums; font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 4px; flex: none; width: max-content; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 4px 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; vertical-align: .12em; }
.tag--sample { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.muted { color: var(--ink-2); }
.fine { color: var(--ink-3); font-size: var(--t-small); line-height: 1.55; }
.fine a, .hint a, .consent a { color: var(--ink-2); }
.micro { color: var(--ink-3); font-size: var(--t-small); line-height: 1.45; text-align: center; margin-top: var(--s-3); }
.loading { padding: 96px 0; color: var(--ink-3); text-align: center; }
.ic { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.18em; }
.ic.flip { transform: scaleX(-1); }

/* ============================== layout ============================== */
.wrap { width: 100%; max-width: calc(var(--w-page) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: var(--s-6); padding-bottom: var(--s-7); display: grid; gap: var(--s-4); align-content: start; }
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--s-4); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 6px; }
.prose ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 6px; }
.prose b, .prose strong { color: var(--ink); }
.list { display: grid; gap: 10px; max-width: 720px; }
.list a { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid transparent; text-decoration: none; color: var(--ink);
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); transition: background var(--d-base); }
@media (hover: hover) { .list a:hover { background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; } }
.list span { color: var(--ink-2); font-size: var(--t-small); }
#out.list > * { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ============================== group strip and footer ============================== */
.g-strip { position: sticky; top: 0; z-index: 20; border-top: 2px solid var(--group-ui); background: rgb(14 13 11 / .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 var(--line); }
.g-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(var(--h-strip) - 2px); }
.g-id { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
/* the group mark. With a crest file it is the bronze medallion (owner's direction A), an <img> laid over the initial,
   which stays underneath as text in case the image fails: the medallion brings its own rim, and the group colour in
   its enamel stud, so the wrapper adds no background, ring or radius. Without a crest file the initial sits on a plain
   round stone. Size comes from --s: 28px in the strip and on takes, 40px (32px on short phones) on the survey notes */
.gmark { --s: 30px; position: relative; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #322E28 0%, #23201C 55%, #191714 100%); box-shadow: inset 0 0 0 1px var(--line-3);
  color: var(--ink); font: 600 calc(var(--s) * .44)/1 var(--serif); letter-spacing: 0; text-transform: none; user-select: none; }
.gmark.gcrest { background: none; box-shadow: none; border-radius: 0; }
.gcrest > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.g-strip .gmark { --s: 28px; }
.gname { font: 600 var(--t-small)/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmeta { flex: none; color: var(--ink-3); font-size: var(--t-small); white-space: nowrap; }
/* phones: the group's full name before the meta line, on two lines rather than cut */
@media (max-width: 479px) {
  .gmeta { display: none; }
  .g-strip .wrap { min-height: 54px; }
  .gname { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
}
/* in the survey the strip scrolls away so the question bar can stick */
body[data-view="audit"] .g-strip { position: static; }

.foot { margin-top: var(--s-7); padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-small); line-height: 1.6; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.foot p:first-child { max-width: 72ch; }
.foot a { color: var(--ink-2); }
.foot p:last-child a + a { margin-left: 16px; }
body[data-view="audit"] .foot { margin-top: 0; }

/* ============================== buttons ============================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px;
  border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: 600 var(--t-body)/1.2 var(--sans);
  text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(0 0 0 / .18), 0 10px 24px -14px rgb(0 0 0 / .9);
  transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base), transform var(--d-fast) var(--ease); }
.btn .ic { width: 18px; height: 18px; transition: transform var(--d-base) var(--ease); }
@media (hover: hover) { .btn:hover { background: var(--accent-hi); } .btn:hover .ic:not(.flip) { transform: translateX(3px); } }
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: default; }   /* never a pale tint of the accent */
.btn--wide { width: 100%; }
.btn--big { min-height: 60px; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
@media (hover: hover) { .btn--line:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3); } }
.btn--quiet { min-height: 40px; padding: 8px 14px; gap: 8px; white-space: nowrap; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink);
  font: 500 var(--t-small)/1 var(--mono); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--quiet .ic { width: 16px; height: 16px; }
@media (hover: hover) { .btn--quiet:hover { background: #26231F; box-shadow: inset 0 0 0 1px var(--line-3); } .btn--quiet:hover .ic { transform: none; } }
.btn--quiet.is-done, .btn--quiet.is-done:hover { color: var(--good); background: var(--good-tint); box-shadow: inset 0 0 0 1px rgb(156 203 159 / .45); }   /* "Copied" */
.btn.is-done:not(.btn--quiet) { background: var(--good); color: #10200F; }

.back { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; color: var(--ink-2); background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--d-base), color var(--d-base); }
.back .ic { width: 18px; height: 18px; }
@media (hover: hover) { .back:hover { background: var(--surface-2); color: var(--ink); } }
.back-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 40px; color: var(--ink-2); font: 600 var(--t-small)/1.3 var(--sans); text-decoration: none; }
@media (hover: hover) { .back-link:hover { color: var(--ink); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 var(--t-body)/1.25 var(--sans); text-align: center;
  transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base), transform var(--d-fast) var(--ease); }
.chip--sm { min-height: 36px; padding: 6px 13px; font-size: var(--t-small); justify-self: start; }
.chip:active { transform: scale(.98); }
@media (hover: hover) { .chip:hover { background: #26231F; box-shadow: inset 0 0 0 1px var(--line-3); } }

.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 var(--t-small)/1.2 var(--sans); transition: color var(--d-base), box-shadow var(--d-base), background var(--d-base); }
.switch .ic { width: 16px; height: 16px; }
@media (hover: hover) { .switch:hover { color: var(--ink); background: var(--surface-2); } }
.switch[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2), 0 0 0 3px rgb(242 236 226 / .08); }

/* ============================== forms ============================== */
.fields { display: grid; gap: 18px; }
.field, .other { display: grid; gap: 8px; min-width: 0; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.lbl { font: 600 var(--t-body)/1.35 var(--sans); color: var(--ink); }
.opt-l { margin-left: 4px; font-weight: 400; font-size: var(--t-small); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.inp { width: 100%; min-height: 54px; padding: 13px 16px; border: 0; border-radius: var(--r-md); background: var(--inset); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-input); font: 400 var(--t-body)/1.35 var(--sans); transition: box-shadow var(--d-base), background var(--d-base); }
.inp::placeholder { color: var(--ink-3); opacity: .85; }
.inp:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); background: #0C0B0A; }
.inp:disabled { opacity: .45; }
.inp[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
.inp:-webkit-autofill, .inp:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-input), inset 0 0 0 80px var(--surface-2); }
textarea.inp { min-height: 120px; resize: vertical; }
.phone-row { display: flex; gap: 8px; }
.phone-row .inp { flex: 1; min-width: 0; }
.cc { display: grid; place-items: center; flex: none; min-width: 60px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2); font: 600 var(--t-body)/1 var(--sans); }
.hint { color: var(--ink-3); font-size: var(--t-small); line-height: 1.5; }
.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: var(--t-small); line-height: 1.55; cursor: pointer; }
.consent input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
/* a ticked consent box is a choice the person made: bronze, like a picked answer */
.consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; border-radius: 6px; background: var(--inset) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--line-input); transition: background-color var(--d-base), box-shadow var(--d-base); }
.consent input[type="checkbox"]:checked { background-color: var(--accent); background-image: var(--tick-dark); box-shadow: none; }
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* errors get their own look (terracotta mark, ink text), so they never read as a picked answer */
.err { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bad-tint); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(229 143 114 / .35); font: 600 var(--t-small)/1.45 var(--sans); }
.err::before { content: '!'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bad); color: var(--bg); font: 700 var(--t-small)/1 var(--sans); }
.copy-manual { width: 100%; min-height: 140px; font: 400 var(--t-small)/1.6 var(--mono); }

/* ============================== people ============================== */
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2); font: 500 var(--t-body)/1 var(--serif); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--t-h2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.host-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: var(--t-small); line-height: 1.3; }
.host-chip img, .host-chip .avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); font-size: var(--t-small); }
.host-chip b { color: var(--ink); }

/* the host's note: a person (or the team) reacting to the answer. Serif, because a person is speaking */
.note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); animation: note-in var(--d-screen) var(--ease) both; }
.byline { display: inline-flex; align-items: center; }
.note .byline .gmark { --s: 40px; }
.note-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-3); }
.note-body { min-width: 0; display: grid; justify-items: start; }
.note-by { font: 600 var(--t-small)/1.35 var(--sans); color: var(--ink); }
.note-by span { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.note-t { margin-top: 3px; font: 400 var(--t-body)/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.note-skip { margin-top: 8px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2); font: 600 var(--t-small)/1 var(--sans); transition: background var(--d-base), color var(--d-base); }
@media (hover: hover) { .note-skip:hover { background: var(--surface-2); color: var(--ink); } }
.note--reply { background: var(--surface); }

/* ============================== the portrait ============================== */
.portrait { min-width: 0; }
.niche { position: relative; isolation: isolate; aspect-ratio: 3 / 4; border-radius: var(--r-arch); overflow: hidden; background: var(--grad-niche); }
/* the arch's hairline and the shadow at its foot sit above the image, so the masked bust melts under them */
.niche::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -60px 80px -30px rgb(0 0 0 / .55); }
.niche > svg.carve, .niche > img.bust, .niche > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* every statue image and every carving fades into the stone at its edges */
svg.carve, img.bust, .tile--bust .tile-img img, .get-ic img, .niche img {
  -webkit-mask-image: var(--statue-mask); mask-image: var(--statue-mask); }
svg.carve { display: block; overflow: hidden; }
.carve .s1 { transition: opacity 900ms var(--ease); }
.plinth { margin: -1px 6% 0; padding: 12px 12px 13px; border-radius: 0 0 var(--r-xs) var(--r-xs); background: var(--grad-plinth); text-align: center;
  box-shadow: inset 0 1px 0 rgb(242 236 226 / .08), 0 14px 24px -14px rgb(0 0 0 / .9); position: relative; z-index: 1; }
/* on the plinth each word is its own carved line: no dots, no ragged wrap */
.plinth .inscr { min-height: 2.9em; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.plinth .inscr span::after { content: none; }
.plinth .inscr:empty::before { content: ''; }

/* the live panel (desktop) and the thumbnail (phones and tablets) */
.portrait--panel { display: none; }
.portrait--thumb .niche { width: 46px; border-radius: 999px 999px 6px 6px; }
.portrait--thumb .niche::after { box-shadow: inset 0 0 0 1px var(--line-2); }
@media (min-width: 1024px) {
  .portrait--panel { position: sticky; top: 24px; display: grid; align-content: start; }
  .portrait--panel .niche { width: 100%; max-height: calc(100svh - 190px); max-width: calc((100svh - 190px) * .75); justify-self: center; }
  .portrait--panel .plinth { justify-self: stretch; }
  .portrait--panel .plinth .inscr { min-height: calc(4 * 1.45em); }   /* room for all four words, so the panel never jumps */
  .portrait--panel .lean { margin-top: var(--s-4); text-align: center; font: 400 var(--t-body)/1.4 var(--serif); color: var(--ink-2); }
  .portrait--thumb { display: none; }
}

/* ============================== landing ============================== */
.lp-hero { padding: var(--s-4) 0 var(--s-7); }
.lp-grid { display: grid; gap: 14px; }
.lp-text { display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.greet { font-weight: 600; color: var(--ink); }
.lp-sub { color: var(--ink-2); max-width: 48ch; }
.lp-cta { display: grid; width: 100%; max-width: 440px; margin-top: 4px; }
.lp-cta .micro { margin-top: 10px; }
.lp-text .host-chip { margin-top: 4px; }
.lp-art { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.lp-art .niche { height: min(26svh, 250px); width: auto; }
.lp-art .lean { font: 500 var(--t-small)/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); text-align: center; text-wrap: balance; }
/* short phones: the headline, sub and the button must make the first screen; the niche gives way */
@media (max-width: 1023px) and (max-height: 720px) {
  /* the niche and its line sit side by side, so the headline, sub and button still make the first screen */
  .lp-hero { padding-top: 10px; }
  .lp-grid, .lp-text { gap: 10px; }
  .lp-art { grid-template-columns: auto minmax(0, 200px); justify-content: center; align-items: center; column-gap: 18px; }
  .lp-art .niche { height: min(21svh, 200px); }
  .lp-art .lean { text-align: left; }
}
@media (min-width: 640px) and (max-width: 1023px) { .lp-art .niche { height: min(30svh, 300px); } }
@media (min-width: 1024px) {
  .lp-hero { padding: var(--s-7) 0 var(--s-8); }
  .lp-grid { grid-template-columns: minmax(0, 560px) var(--w-panel); justify-content: space-between; align-items: center; column-gap: var(--s-7); }
  .lp-art { order: 2; gap: var(--s-4); }
  .lp-art .niche { height: auto; width: min(100%, calc((100svh - var(--h-strip) - 150px) * .75)); }
  .lp-text { gap: 16px; }
  .lp-sub { max-width: 52ch; }
  .lp-cta { margin-top: 8px; }
  .lp-cta .micro { text-align: left; }
}

.lp-more { padding: var(--s-8) 0 var(--s-6); border-top: 1px solid var(--line); background: linear-gradient(var(--bg-2), var(--bg) 480px); }
.lp-more > .wrap { display: grid; gap: var(--s-8); }
.lp-gets { display: grid; gap: var(--s-5); }
.lp-gets .gets, .lp-gets > div:not(.get) { display: grid; gap: 12px; }
@media (min-width: 860px) { .lp-gets .gets, .lp-gets > div:not(.get) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* what you get: an editorial row with a hairline above, not a third grid of equal cards (the Sample below is the card) */
.get { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; align-content: start; align-items: start; padding: 18px 0 4px;
  border-top: 1px solid var(--line-2); }
.get > .get-ic { grid-row: span 2; }
.get h3 { font: 500 var(--t-h2)/1.15 var(--serif); letter-spacing: -0.015em; margin-top: 2px; }
@media (min-width: 860px) { .get { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 0 4px; } .get > .get-ic { grid-row: auto; } .get h3 { margin-top: 6px; } }
.get p { color: var(--ink-2); }
.get-ic { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink); background: var(--grad-chip); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.get-ic .ic, .get-ic svg { width: 22px; height: 22px; }
.get-ic:has(img) { width: 52px; height: 69px; border-radius: 999px 999px 8px 8px; background: var(--grad-niche); }
.get-ic img { width: 100%; height: 100%; object-fit: cover; }

.sample { position: relative; border: 1px dashed var(--line-3); border-radius: var(--r-lg); background: var(--bg-2); }
.tag--sample { position: absolute; top: 16px; right: 16px; z-index: 3; }
.lp-sample { display: grid; gap: var(--s-5); padding: 56px 20px 24px; }
.lp-sample .niche { width: min(200px, 58%); justify-self: center; }
.lp-sample-tx { display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.lp-sample-tx > p:not(.eyebrow):not(.fine) { color: var(--ink-2); }
.lp-sample-tx .fine { color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line); width: 100%; }
@media (min-width: 700px) {
  .lp-sample { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--s-6); padding: 32px 40px 32px 32px; }
  .lp-sample .niche { width: 100%; }
}

.lp-group { display: grid; gap: var(--s-5); }
.lp-group > div:first-child p { margin-top: 8px; }
.grp-photo { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.grp-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.88) brightness(.92); }
.lp-host { display: flex; gap: 14px; align-items: center; }
.lp-host-n { font-weight: 600; color: var(--ink); }
.lp-host .muted { font-size: var(--t-small); line-height: 1.5; }
@media (min-width: 860px) {
  /* photo left in an arch, host and sessions right; the last row absorbs the photo's height so the right column stays tight */
  .lp-group:has(> .grp-photo) { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--s-7); align-items: start; }
  .lp-group:has(> .grp-photo) > div:first-child:not(.lp-host) { grid-column: 1 / -1; grid-row: 1; }
  .lp-group > .grp-photo { grid-column: 1; grid-row: 2 / span 3; border-radius: var(--r-arch); }
  .lp-group > .grp-photo img { aspect-ratio: 4 / 5; }
  .lp-group:has(> .grp-photo) > .lp-host { grid-column: 2; grid-row: 2; align-self: end; }
  .lp-group:has(> .grp-photo) > .evs { grid-column: 2; grid-row: 3; }
}
.again { display: grid; justify-items: center; gap: 14px; text-align: center; padding: var(--s-5) 0; }
.again p { max-width: 52ch; color: var(--ink-2); }
.again .btn { width: 100%; max-width: 440px; }
.lp-more .again { padding: var(--s-6) 0 0; }

/* ============================== rails (scroll-snap, no library) ============================== */
.rail { min-width: 0; }
.rail-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--s-4); }
.rail-h > div:first-child, .rail-h > h2 { min-width: 0; }
.rail-h p { margin-top: 8px; color: var(--ink-2); }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; list-style: none;
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.rail-card { scroll-snap-align: start; display: grid; gap: var(--s-3); align-content: start; min-width: 0; padding: 20px; border-radius: var(--r-lg);
  border: 1px solid transparent; background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); }
.rail-card h3 { font: 600 var(--t-body)/1.35 var(--serif); letter-spacing: 0; }
.rail-card > p:not(.chg-date):not(.src) { color: var(--ink-2); }
.rail-card .prompt-box { margin-top: 4px; }
@media (min-width: 900px) {
  .rail-track { grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .lp-prompts .rail-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
.rail-nav { display: none; gap: 8px; flex: none; }
@media (hover: hover) and (pointer: fine) { .rail-nav { display: flex; } }
/* nothing to scroll: the buttons step aside */
.rail-nav:not(:has(.rail-btn:not([disabled]))) { visibility: hidden; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base); }
.rail-btn .ic { width: 18px; height: 18px; }
@media (hover: hover) { .rail-btn:not([disabled]):hover { background: #26231F; box-shadow: inset 0 0 0 1px var(--line-3); } }
.rail-btn[disabled] { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; opacity: .6; }
/* with nothing to scroll, the count steps aside with the buttons */
.rail:not(:has(.rail-btn:not([disabled]))) .rail-count { visibility: hidden; }
.rail-count { margin-top: 2px; font: 500 var(--t-small)/1 var(--mono); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================== prompt box ============================== */
.prompt-box { min-width: 0; border-radius: var(--r-sm); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prompt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 0 14px; }
.prompt-h > span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.prompt { margin: 0; padding: 10px 14px 14px; font: 400 var(--t-small)/1.65 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 2; }
.prompt .fill { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
/* a prompt on its own (no box): the same well */
pre.prompt:not(.prompt-box pre) { border-radius: var(--r-sm); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; width: 100%; }
.prompt-alt { border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.prompt-alt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  font: 600 var(--t-small)/1.35 var(--sans); color: var(--ink-2); border-radius: inherit; transition: color var(--d-base); }
.prompt-alt > summary::-webkit-details-marker { display: none; }
.prompt-alt > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--d-base) var(--ease); }
.prompt-alt[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
@media (hover: hover) { .prompt-alt > summary:hover { color: var(--ink); } }
.prompt-alt > .prompt-box { margin: 0 8px 8px; }

/* ============================== the survey ============================== */
#app { padding: 0 var(--gutter) var(--s-7); }
body[data-view="audit"] #app { min-height: calc(100dvh - var(--h-strip)); }
.q { animation: screen-in var(--d-screen) var(--ease) both; }
.survey { display: grid; gap: var(--s-6); max-width: var(--w-survey); margin: 0 auto; }
@media (min-width: 1024px) {
  .survey { max-width: none; grid-template-columns: minmax(0, var(--w-survey)) var(--w-panel); justify-content: center; align-items: start; column-gap: 32px; }
}
.q-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
/* the header's box steps aside so only the top row sticks, for the whole length of the question */
.q-head { display: contents; }
.q-top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); background: linear-gradient(var(--bg) 72%, rgb(14 13 11 / 0)); }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.progress i { position: relative; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.progress i.done { background: var(--ink-2); }
.progress i.now::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, .4));
  animation: now-in var(--d-slow) var(--ease) both; }
.count { min-width: 2ch; font: 500 var(--t-small)/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* the live row: the carving thumbnail, the inscription so far, the hours meter */
.q-live { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 10px; }
.q-live > .meter { grid-column: 1 / -1; }
.q-live-tx { display: grid; gap: 4px; min-width: 0; }
.q-live-tx .lean { color: var(--ink-3); }
.q-live-tx .inscr { font-size: var(--t-small); line-height: 1.4; }
/* phones keep the two newest words (the full inscription is on the result) */
.q-live-tx .inscr span:nth-last-child(n+3) { display: none; }
@media (min-width: 1024px) { .q-live { display: block; } .q-live > .q-live-tx, .q-live > .portrait--thumb { display: none; } }

.meter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label delta" "value delta"; align-items: center;
  column-gap: 10px; row-gap: 2px; padding: 9px 14px 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.meter > .eyebrow { grid-area: label; color: var(--ink-3); }
.meter-v { grid-area: value; justify-self: start; display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--t-h2); line-height: 1.05; color: var(--accent); white-space: nowrap; }
.meter-v small { font: 500 var(--t-small)/1 var(--sans); color: var(--ink-2); }
.meter-v.is-empty { color: var(--ink-3); font-size: var(--t-body); font-family: var(--sans); font-weight: 500; line-height: 1.6; }
.meter > .tag { grid-area: value; justify-self: end; }
.meter .delta { grid-area: delta; }
.delta { display: inline-block; font: 500 var(--t-small)/1 var(--mono); padding: 5px 8px; border-radius: var(--r-xs); color: var(--good); background: var(--good-tint);
  opacity: 0; transform: translateY(6px); transition: opacity var(--d-base), transform var(--d-base) var(--ease); }
.delta.is-on { opacity: 1; transform: none; }
.delta.is-down { color: var(--ink-2); background: rgb(242 236 226 / .06); }
@media (min-width: 480px) {
  .meter { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "label value tag delta"; column-gap: 14px; }
  .meter > .tag { grid-area: tag; justify-self: start; }
}
.meter--mini { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; background: none; box-shadow: none; }
.meter--mini .num, .meter--mini b { font-size: var(--t-body); color: var(--accent); font-weight: 600; }

.q-title { font-size: var(--t-h2); margin-top: 4px; scroll-margin-top: 80px; }
.q-help { color: var(--ink-2); margin-top: -4px; }
.q-form { display: grid; gap: 22px; margin-top: 6px; }
.part { display: grid; gap: 10px; min-width: 0; }
.part + .part { padding-top: 20px; border-top: 1px solid var(--line); }
.part-l { font: 600 var(--t-body)/1.35 var(--sans); color: var(--ink); }
.part[data-kind="chips"] .part-l { font-weight: 500; color: var(--ink-2); }
.q-note:empty { display: none; }
.q-note .note { margin-top: 2px; }
.q-note { scroll-margin-bottom: 120px; scroll-margin-top: 72px; }   /* app.js scrolls the note into view, clear of the sticky bars */
/* the next step stays in reach: the action bar sticks to the bottom; at the end of the form it sits in its own place,
   so it never covers the last option */
.q-actions { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 10px; margin: 0 calc(var(--gutter) * -1);
  padding: 28px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgb(14 13 11 / 0), var(--bg) 26px); }
.q-actions .btn { width: 100%; }
.q-actions .err { justify-self: stretch; }
@media (min-width: 1024px) { .q-top, .q-actions { margin-inline: 0; padding-inline: 0; } }

/* phones and tablets: on owner and work paths the meter takes the inscription's place beside the carving, so the
   question starts high on the screen (the inscription stays in the DOM and is shown in full on the result and the
   desktop panel); the strip already names the group, so the note's byline drops it on phones */
@media (max-width: 1023px) {
  .q-live:has(> .meter) > .q-live-tx { display: none; }
  .q-live:has(> .meter) > .meter { grid-column: auto; }
  .portrait--thumb .niche { width: 56px; }
}
@media (max-width: 639px) { .note-by span { display: none; } }
/* short phones (360x640 and the like): the question and its first answer must make the first screen, so the header
   tightens */
@media (max-width: 1023px) and (max-height: 700px) {
  body[data-view="audit"] .g-strip .wrap { min-height: 44px; }
  .q-main { gap: 10px; }
  .q-top { padding-block: 6px; }
  .note { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 11px 14px; }
  .note .byline .gmark { --s: 32px; }
  .note .note-av { width: 32px; height: 32px; }
  .note-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .note-t { font-size: var(--t-small); line-height: 1.5; }
  .q-title { margin-top: 0; }
  .q-help { margin-top: -2px; }
  .q-form { margin-top: 0; gap: 18px; }
  .part { gap: 8px; }
  .part-l { line-height: 1.3; }
  .meter { padding-block: 7px 8px; }
  .scale-c { min-height: 84px; padding: 10px 4px; gap: 4px; }
}

/* desktop keyboard hint: the option's number sits in its mark until it is picked. Shown only once the person is using
   the keyboard in the form, so to a mouse user the numbers never read like scores */
@media (hover: hover) and (pointer: fine) {
  .opt[data-key]::after { content: attr(data-key); position: absolute; right: 16px; top: 50%; width: 22px; margin-top: -6px; text-align: center;
    font: 500 12px/1 var(--mono); color: var(--ink-3); pointer-events: none; opacity: 0; transition: opacity var(--d-base); }
  .scale-c[data-key]::after { content: attr(data-key); position: absolute; top: 8px; right: 9px; font: 500 11px/1 var(--mono); color: var(--ink-3); pointer-events: none; opacity: 0; transition: opacity var(--d-base); }
  .q-form:has(:focus-visible) .opt[data-key]::after, .q-form:has(:focus-visible) .scale-c[data-key]::after { opacity: 1; }
  .q-form .opt.is-on[data-key]::after, .q-form .opt[aria-pressed="true"][data-key]::after { opacity: 0; }   /* after the rule above, same weight */
  .scale-c.is-on::after, .scale-c[aria-pressed="true"]::after { color: rgb(23 18 10 / .55); }
}

/* ============================== answers ============================== */
/* tiles: the role busts and the photo tiles (industry, where your week goes) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tiles--bust { grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .tiles, .tiles--bust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.tile { position: relative; isolation: isolate; display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  text-align: left; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-base), opacity var(--d-base), filter var(--d-base); }
/* the ring sits above the photo */
.tile::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow var(--d-base); }
.tile-img { display: block; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-tx { display: grid; gap: 2px; min-width: 0; }
.tile-t { display: block; font: 600 var(--t-body)/1.25 var(--sans); }
.tile-s { display: block; font: 400 var(--t-small)/1.35 var(--sans); color: var(--ink-2); }
.tile-mark { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: transparent; z-index: 2;
  background: rgb(14 13 11 / .55); box-shadow: inset 0 0 0 1.5px rgb(242 236 226 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base); }
.tile-mark .ic, .tile-mark svg { width: 15px; height: 15px; }
.tile.is-multi .tile-mark { border-radius: 7px; }
.tile:active { transform: scale(.985); }
/* while a photo loads: a stone shimmer, never an empty box (the photo paints over it) */
.tile:not(.is-loaded) .tile-img { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }

/* photo tiles: text on the image, under a scrim */
.tile--photo { aspect-ratio: 1 / 1; }
@media (min-width: 640px) { .tile--photo { aspect-ratio: 4 / 5; } }
.tile--photo .tile-img { position: absolute; inset: 0; z-index: -2; background: var(--surface); }
.tile--photo .tile-img img { object-position: 50% 30%; filter: saturate(.88) brightness(.86); transition: transform var(--d-slow) var(--ease), filter var(--d-base); }
.tile--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); pointer-events: none; }
.tile--photo .tile-tx { position: absolute; left: 12px; right: 12px; bottom: 11px; text-shadow: 0 1px 2px rgb(0 0 0 / .55); }
.tile--photo .tile-s { color: rgb(242 236 226 / .78); }
.tile--photo .tile-mark { position: absolute; top: 10px; right: 10px; }

/* role busts: a row card on phones (thumbnail, text, mark), a column tile with an arched image from 640px */
.tile--bust { display: grid; grid-template-columns: 64px minmax(0, 1fr) 26px; align-items: center; gap: 14px; min-height: 80px; padding: 7px 14px 7px 8px;
  border: 1px solid transparent; background: var(--grad-card) padding-box, var(--edge) border-box; }
.tile--bust::after { box-shadow: none; }
.tile--bust .tile-img { width: 64px; height: 85px; border-radius: 999px 999px 8px 8px; overflow: hidden; background: var(--grad-niche); box-shadow: inset 0 0 0 1px var(--line); }
.tile--bust .tile-img img { object-position: 50% 28%; transition: filter var(--d-base); }
.tile--bust .tile-tx { gap: 3px; }
.tile--bust .tile-mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-input); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 640px) {
  .tile--bust { display: flex; flex-direction: column; gap: 0; padding: 10px 10px 16px; }
  .tile--bust .tile-img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 999px 999px 10px 10px; }
  .tile--bust .tile-tx { padding: 14px 4px 0; }
  .tile--bust .tile-mark { position: absolute; top: 14px; right: 14px; background: rgb(14 13 11 / .55); }
}
/* desktop: both rows of busts make the first screen (head and shoulders, cropped from the top); the raw block in the
   panel steps back while the six busts are the choice */
@media (min-width: 1024px) {
  .tiles--bust .tile-img { aspect-ratio: 4 / 3; }
  .tiles--bust .tile-img img { object-position: 50% 18%; }
  .q[data-screen="role"] .portrait--panel { opacity: .5; }
  .portrait--panel .plinth:has(.inscr:empty) { visibility: hidden; }
}

@media (hover: hover) {
  .tile:hover { transform: translateY(-2px); }
  .tile:hover::after { box-shadow: inset 0 0 0 1px var(--line-3); }
  .tile--photo:hover .tile-img img { transform: scale(1.04); filter: saturate(.95) brightness(.95); }
  .tile--bust:hover { background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; }
  .tile--bust:hover .tile-img img { filter: brightness(1.06); }
}
/* picked: listed after hover, so a picked tile under the pointer keeps its ring */
.tile.is-on, .tile[aria-pressed="true"], .tile.is-on:hover, .tile[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); transform: none; }
.tile.is-on::after, .tile[aria-pressed="true"]::after { box-shadow: inset 0 0 0 1px rgb(214 168 92 / .5); }
.tile--bust.is-on, .tile--bust[aria-pressed="true"] { background: linear-gradient(var(--accent-tint), var(--accent-tint)) padding-box, var(--grad-card) padding-box, linear-gradient(var(--accent), var(--accent)) border-box; }
.tile.is-on .tile-mark, .tile[aria-pressed="true"] .tile-mark { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.tile--photo.is-on .tile-img img, .tile--photo[aria-pressed="true"] .tile-img img { filter: saturate(.95) brightness(.95); }
.tiles.is-locked .tile:not(.is-on):not([aria-pressed="true"]) { opacity: .42; pointer-events: none; }

/* option cards: an icon chip, a label and a sub-label, a state mark */
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px 12px 12px; text-align: left; color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1);
  transition: transform var(--d-fast) var(--ease), background var(--d-base), box-shadow var(--d-base), opacity var(--d-base); }
.opt-ic { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-2);
  background: var(--grad-chip); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--ease); }
.opt-ic:empty { display: none; }
.opt:has(> .opt-ic:empty) { padding-left: 18px; }
.opt-ic svg, .opt-ic .ic { width: 22px; height: 22px; }
.opt-tx { flex: 1; min-width: 0; }
.opt-t { display: block; font: 600 var(--t-body)/1.3 var(--sans); }
.opt-s { display: block; margin-top: 2px; font: 400 var(--t-small)/1.4 var(--sans); color: var(--ink-2); }
.opt-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-input); transition: background var(--d-base), box-shadow var(--d-base), color var(--d-base); }
.opt-mark svg, .opt-mark .ic { width: 14px; height: 14px; }
.opt.is-multi .opt-mark, .opt[role="checkbox"] .opt-mark { border-radius: 6px; }
@media (hover: hover) {
  .opt:hover { background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; transform: translateY(-1px); }
  .opt:hover .opt-ic { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); transform: scale(1.04); }   /* bronze only where the act is */
}
.opt:active { transform: scale(.99); }
/* picked: bronze edge, tinted card, filled chip, filled mark. After :hover, so hover never hides it */
.opt.is-on, .opt[aria-pressed="true"], .opt.is-on:hover, .opt[aria-pressed="true"]:hover {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)) padding-box, var(--grad-card) padding-box, linear-gradient(var(--accent), var(--accent)) border-box;
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-1); transform: none; }
.opt.is-on .opt-ic, .opt[aria-pressed="true"] .opt-ic { background: var(--accent); color: var(--accent-ink); box-shadow: none; transform: none; }
.opt.is-on .opt-mark, .opt[aria-pressed="true"] .opt-mark { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
/* after a single pick on an auto-advance screen, the others step back */
.opts.is-locked .opt:not(.is-on):not([aria-pressed="true"]) { opacity: .42; pointer-events: none; }

/* scale cells: ordinal answers with a level glyph */
.scale { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.scale-c { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; min-height: 92px; padding: 12px 6px; text-align: center; color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1);
  transition: transform var(--d-fast) var(--ease), background var(--d-base), color var(--d-base), box-shadow var(--d-base), opacity var(--d-base); }
.scale-t { font: 600 var(--t-body)/1.2 var(--sans); overflow-wrap: anywhere; text-wrap: balance; }
.scale-s { font: 400 var(--t-small)/1.2 var(--sans); color: var(--ink-2); text-wrap: balance; }
.lvl { height: 16px; width: auto; overflow: visible; }
.lvl rect { fill: var(--line-3); transition: fill var(--d-base); }
.lvl rect.on { fill: var(--ink-2); }   /* bronze marks the picked cell only (D25) */
@media (hover: hover) { .scale-c:hover { background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; transform: translateY(-1px); } }
.scale-c:active { transform: scale(.985); }
.scale-c.is-on, .scale-c[aria-pressed="true"], .scale-c.is-on:hover, .scale-c[aria-pressed="true"]:hover {
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); transform: none; }
.scale-c.is-on .scale-s, .scale-c[aria-pressed="true"] .scale-s { color: rgb(23 18 10 / .72); }
.scale-c.is-on .lvl rect, .scale-c[aria-pressed="true"] .lvl rect { fill: rgb(23 18 10 / .28); }
.scale-c.is-on .lvl rect.on, .scale-c[aria-pressed="true"] .lvl rect.on { fill: var(--accent-ink); }
.scale.is-locked .scale-c:not(.is-on):not([aria-pressed="true"]),
.scale.is-locked + .scale-alt .chip:not(.is-on):not([aria-pressed="true"]) { opacity: .42; pointer-events: none; }
/* five levels on a narrow phone: three over two, the second row wider, never an orphan */
@media (max-width: 479px) {
  .scale:has(> .scale-c:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .scale:has(> .scale-c:nth-child(5)) > .scale-c { grid-column: span 2; }
  .scale:has(> .scale-c:nth-child(5):last-child) > .scale-c:nth-child(n+4) { grid-column: span 3; }
}
/* non-level answers ("Prefer not to say") sit under the scale as a quiet chip */
.scale-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.scale-alt .chip { min-height: 40px; padding: 8px 14px; font-size: var(--t-small); background: transparent; color: var(--ink-2); }
/* picked chips (listed after every chip rule) */
.chip.is-on, .chip[aria-pressed="true"], .chip.is-on:hover, .chip[aria-pressed="true"]:hover,
.scale-alt .chip.is-on, .scale-alt .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.chips.is-locked .chip:not(.is-on):not([aria-pressed="true"]), .scale-alt.is-locked .chip:not(.is-on):not([aria-pressed="true"]) { opacity: .42; pointer-events: none; }

/* ============================== building moment ============================== */
.build { max-width: 880px; margin: clamp(16px, 6vh, 64px) auto 0; display: grid; gap: var(--s-6); align-items: center; animation: screen-in var(--d-screen) var(--ease) both; }
.build-art { justify-self: center; width: min(180px, 46vw); }
.build-art .niche { width: 100%; }
.build-tx { display: grid; gap: 14px; min-width: 0; }
.build-tx h2 { margin-bottom: 6px; }
.build ul { display: grid; gap: 10px; }
.build li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3); opacity: .55; transition: color var(--d-base), opacity var(--d-screen) var(--ease), box-shadow var(--d-base); }
.build li .ic { width: 20px; height: 20px; color: var(--line-3); transition: color var(--d-base), transform var(--d-base) var(--ease); }
.build li.on { color: var(--ink); opacity: 1; box-shadow: inset 0 0 0 1px var(--line-2); }
.build li.on .ic { color: var(--good); }
@media (min-width: 760px) { .build { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); } .build-art { width: 100%; } }

/* ============================== the result ============================== */
/* research/09: answer first, then the week, then the recommendation. One idea per block, detail behind a toggle that
   always shows its first line, 66 characters a line, nothing a person reads under 17px.
   The report is plain flow, not a grid: the chapter nav is a sticky child of .report, and a sticky grid item could only
   move inside its own row */
.report { max-width: var(--w-page); margin: 0 auto; padding-top: var(--s-4); animation: screen-in var(--d-screen) var(--ease) both; }
.report > * + * { margin-top: var(--s-7); }
@media (min-width: 900px) { .report > * + * { margin-top: var(--s-8); } }
/* blocks that continue a chapter sit closer than chapters do */
.report > .r-nav, .report > .r-nav + * { margin-top: var(--s-6); }
.report > .r-read ~ :is(.r-week, #aiplan, .r-2026), .report > .goal + .book, .report > .r-group + .again { margin-top: var(--s-6); }
@media (min-width: 900px) { .report > .r-read ~ :is(.r-week, #aiplan, .r-2026) { margin-top: var(--s-7); } }
body:has(.dock) .report { padding-bottom: 96px; }
body:has(.dock) .foot { padding-bottom: calc(var(--s-8) + 72px); }
/* the chapter nav is the one sticky bar on the result, so the strip scrolls away (phones keep one bar of chrome) */
body[data-view="report"] .g-strip { position: static; }
html:has(> body[data-view="report"]) { scroll-padding-top: 64px; }
/* the measure: about 66 characters a line. Set in em, not ch: a ch is the width of a zero, wider than an average
   letter, so 66ch runs to about 80 letters. 33em of Hanken is about 72 letters a line at any size; 30em of Newsreader
   (narrower letters) the same */
:where(.report) p:where(:not(.micro)), :where(.report) .day-tx { max-width: 33em; }
:where(.report) :is(.fine, .src, .stats-note, .stats-more, .hint, .fix-dfy, .pk-why) { max-width: 31em; }
:where(.report) :is(.take blockquote, .decide-row, .aiplan-note, .r-quote) { max-width: 30em; }
/* their own words, where the content marks them */
.ans { color: var(--ink); font-weight: 600; }

/* ---------- 1. the hero: who you are, the hours, and the summary (09 sections 5.2, 5.3) ---------- */
.r-hero { display: grid; gap: var(--s-6); }
.r-art { display: grid; justify-items: center; align-content: start; width: 100%; max-width: 300px; justify-self: center; min-width: 0; }
.r-art .niche { width: 100%; }
.r-art .plinth { justify-self: stretch; }
.r-holds { margin-top: 16px; max-width: 36ch; text-align: center; color: var(--ink-2); font: 400 var(--t-small)/1.55 var(--serif); }
.r-holds .eyebrow { display: block; margin-bottom: 4px; font-family: var(--sans); color: var(--ink-3); }
.r-art .switch { margin-top: 16px; }
.r-tx { display: grid; gap: 16px; align-content: start; justify-items: start; min-width: 0; }
.r-tx h1 { max-width: 18ch; }
.r-name { animation: name-in 900ms var(--ease) 1100ms both; }
/* phones and tablets: the two columns open up, so the headline follows the bust and its plinth directly and the
   summary follows the hours; what the portrait holds and the sculpture switch move under the summary */
@media (max-width: 899px) {
  .r-hero { gap: 14px; }
  .r-art, .r-tx { display: contents; }
  .r-art .niche { order: 1; justify-self: center; width: min(192px, 52vw); }
  /* the base is wider than the niche, so the four words sit two by two with no dots */
  .r-art .plinth { order: 2; justify-self: center; width: min(340px, 100%); margin: -17px 0 4px; padding: 9px 14px 10px; }
  .r-hero .plinth .inscr { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; align-items: center;
    gap: 3px 18px; min-height: 0; font-size: 11px; line-height: 1.35; letter-spacing: .1em; text-wrap: balance; }
  .r-hero .plinth .inscr span:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .r-tx > * { order: 3; justify-self: stretch; }
  .r-tx > h1, .r-tx > .eyebrow { justify-self: start; }
  .r-holds { order: 4; justify-self: center; margin-top: 10px; }
  .r-art .switch { order: 5; justify-self: center; margin-top: 0; }
}
/* short phones: a smaller niche, so the name makes the first screen */
@media (max-width: 899px) and (max-height: 700px) {
  .r-art .niche { width: min(170px, 46vw); }
}
@media (min-width: 900px) {
  .r-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
  /* the bust stays beside the summary while it is read */
  .r-art { max-width: 380px; position: sticky; top: 72px; align-self: start; }
  .r-art .niche { max-width: min(100%, 330px, calc((100svh - 250px) * .75)); justify-self: center; }
  .r-tx { gap: 12px; max-width: 640px; }
  .r-tx .stats > * { padding-block: 10px; }
}

/* the stats: the hours estimate first, in bronze; labels in inscription caps (plain words on phones, so they fit) */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-block: 1px solid var(--line-2); }
.stats:has(> :only-child) { max-width: 280px; }
.stats > * { display: grid; gap: 6px; align-content: start; padding: 14px 12px 14px 0; min-width: 0; }
.stats > * + * { padding-left: 14px; border-left: 1px solid var(--line); }
.stats b, .stats strong, .stats .num { font: 500 var(--t-h2)/1.05 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.stats b small, .stats .num small { font: 500 var(--t-small)/1 var(--sans); color: var(--ink-2); margin-left: 2px; }
.stats > :first-child b, .stats > :first-child strong, .stats > :first-child .num { color: var(--accent); }
.stats .inscr { font-size: var(--t-small); line-height: 1.35; letter-spacing: .1em; color: var(--ink-2); }
@media (max-width: 639px) {
  .stats > * { padding-block: 12px; gap: 4px; }
  .stats .inscr { font: 500 var(--t-small)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
}
.stats-note { color: var(--ink-3); font-size: var(--t-small); line-height: 1.6; margin-top: -4px; }
.stats-note .tag { margin-right: 6px; }
.stats-more { color: var(--ink-3); font-size: var(--t-small); line-height: 1.6; margin-top: -6px; }

/* the summary: "Your plan, in short". One card, three rows: in one line, the week, the recommendation */
.r-sum { display: grid; gap: 12px; width: 100%; min-width: 0; margin-top: 2px; padding: 14px 16px 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .r-sum { padding: 20px 24px 22px; } }
.sum-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.sum-t { font-size: min(var(--t-h2), 1.5rem); line-height: 1.15; }
.sum-time { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sum-time .ic { width: 14px; height: 14px; }
.sum-row { display: grid; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.sum-k, .pk-gh, .fix-do-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: var(--caps-ui); text-transform: uppercase; color: var(--ink-2); }
.sum-k .ic, .pk-gh .ic { width: 16px; height: 16px; color: var(--ink-3); }
.sum-k .tag, .pk-gh .tag, .fix-do-k .tag { letter-spacing: .08em; }
/* a bold first sentence, then the rest one step quieter */
.sum-tx, .read > p:not(.read-k), .fix-problem, .chg > p:not(.chg-date):not(.src) { color: var(--ink-2); }
:is(.sum-tx, .read > p, .fix-problem, .chg > p, .fork-c > p, .book-steps p) > b { color: var(--ink); }
.sum-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 40px; color: var(--ink); font-weight: 600; }
.sum-link .ic { width: 18px; height: 18px; }
.sum-rec > .btn { width: 100%; margin-top: 4px; }
.sum-rec > .micro { margin-top: 0; }
@media (min-width: 640px) {
  .sum-rec > .btn { justify-self: start; width: auto; min-width: 280px; }
  .sum-rec > .micro { text-align: left; }
}

/* your week at a glance: one checklist, days 1 to 3 are the fixes. Phones stack the day chip under its box so the
   title gets the whole row; from 640px the chip sits in its own column; from 900px the hint follows the title */
.days-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; }
.days-h > .sum-k { grid-column: 1 / -1; }
.days-count { grid-column: 2; grid-row: 2; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days-bar { grid-column: 1; grid-row: 2; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.days-bar i { display: block; height: 100%; border-radius: inherit; background: var(--good); transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform var(--d-slow) var(--ease); }
.days { display: grid; gap: 0; margin: 0 -6px; }
.day { position: relative; border-radius: var(--r-sm); transition: background var(--d-base); }
@media (hover: hover) { .day:has(label:hover) { background: rgb(242 236 226 / .035); } }
.day label { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "box tx" "n tx"; justify-items: center; align-content: start; align-items: start;
  column-gap: 10px; row-gap: 5px; min-height: 48px; padding: 7px 6px 8px; cursor: pointer; }
.day label > input { grid-area: box; }
.day-n { grid-area: n; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 4px; border-radius: var(--r-xs); background: var(--surface-2);
  color: var(--ink-3); white-space: nowrap; }
.day-tx { grid-area: tx; justify-self: stretch; display: grid; gap: 2px; align-content: start; min-width: 0; line-height: 1.4; }
.day-tx b { font-weight: 600; color: var(--ink); }
.day-tx > span, .day-hint { font-size: var(--t-small); line-height: 1.4; color: var(--ink-3); }
/* "Fix 1": outside the label, so tapping it never ticks the box; it shares the hint's line */
.day-go { position: absolute; right: 6px; bottom: 7px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; color: var(--ink-2);
  font: 600 var(--t-small)/1.4 var(--sans); text-decoration: none; white-space: nowrap; }
.day-go .ic { width: 15px; height: 15px; transition: transform var(--d-base) var(--ease); }
@media (hover: hover) { .day-go:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; } .day-go:hover .ic { transform: translateX(2px); } }
/* days 1 to 3 point at their fix: one line of hint ("About 15 min"; a longer fallback is cut, the fix card has it all) */
.day--fix .day-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.day--fix .day-tx { padding-right: 64px; }
.day--fix .day-tx b { margin-right: -64px; }   /* the title takes the full row; only the hint line makes room for "Fix 1" */
@media (min-width: 640px) {
  .day label { grid-template-columns: 22px 54px minmax(0, 1fr); grid-template-areas: "box n tx"; justify-items: start; column-gap: 12px; padding: 9px 6px; }
  .day-n { justify-self: stretch; text-align: center; padding: 5px 4px; margin-top: 1px; font-size: 12px; color: var(--ink-2); }
}
@media (min-width: 900px) {
  .day label { min-height: 36px; padding-block: 5px; }
  .day-tx { display: block; }
  .day-tx > span, .day-hint, .day--fix .day-hint { display: inline; }
  .day-tx b + span::before, .day-tx b + .day-hint::before { content: '\00B7'; margin: 0 .5em; color: var(--ink-3); }
  .day-go { top: 50%; bottom: auto; translate: 0 -50%; }
  .day--fix .day-tx { padding-right: 72px; }
  .day--fix .day-tx b { margin-right: 0; }
}
.day.is-done .day-tx b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.day.is-done .day-tx > span, .day.is-done .day-hint { color: var(--ink-3); }
.day.is-done .day-n { color: var(--good); background: var(--good-tint); }

/* the tick boxes: the summary's days and each fix's "Mark as done" share one look and one state */
.day input, .fix-done input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px;
  background: var(--inset) center / 14px no-repeat; box-shadow: inset 0 0 0 1.5px var(--line-input); cursor: pointer;
  transition: background-color var(--d-base), box-shadow var(--d-base), transform var(--d-fast) var(--ease); }
.day input:checked, .fix-done input:checked { background-color: var(--good); background-image: var(--tick); box-shadow: none; animation: tick-pop var(--d-base) var(--ease); }
.day input:focus-visible, .fix-done input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .day label:hover input:not(:checked), .fix-done:hover input:not(:checked) { box-shadow: inset 0 0 0 1.5px var(--ink-2); } }

/* the fork: do it yourself, or have it done. Compact in the summary (hot) and after the fixes (warm) */
.fork { display: grid; gap: 12px; min-width: 0; }
.fork > :is(h2, .h2, .micro, .fine, .muted) { grid-column: 1 / -1; }
.fork > .micro { margin-top: 0; }
@media (min-width: 640px) { .fork { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fork-c { display: grid; gap: 10px; align-content: start; justify-items: start; min-width: 0; padding: 16px 16px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; }
.fork-dfy { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge-accent) border-box; }
/* the warm position, after the fixes: its own heading over the same two cards */
.fork-after { display: grid; gap: 16px; }
.fork-dfy > .micro { width: 100%; margin-top: 0; }
.fork:not(.fork--sum) .fork-c { padding: 20px 22px 22px; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.fork-k { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: var(--caps-ui); text-transform: uppercase; color: var(--ink-2); }
.fork-k .ic { width: 16px; height: 16px; color: var(--ink-3); }
.fork-c h3 { font-size: min(var(--t-h2), 1.5rem); }
.fork-c > p:not(.fork-k):not(.fine) { color: var(--ink-2); }
.fork-c > .btn { width: 100%; margin-top: 4px; }
.fork-host { display: inline-flex; }
.fork-host img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-3); }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ticks .ic { width: 19px; height: 19px; margin-top: 3px; color: var(--good); }
.softlink { padding: 20px 22px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.softlink a { color: var(--ink); font-weight: 600; }

/* ---------- 2. the chapter nav (09 section 5.4): the current chapter is ink, never bronze (bronze means act) ---------- */
.r-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: 44px; }
/* the bar's glass runs edge to edge; the links keep the page's measure */
.r-nav::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; width: 100vw; translate: -50% 0; pointer-events: none;
  background: rgb(14 13 11 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 var(--line); }
.r-nav-in { position: relative; display: flex; align-items: center; gap: 4px; width: calc(100% + var(--gutter) * 2); height: 100%; margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.r-nav-in::-webkit-scrollbar { display: none; }
.r-nav-a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); color: var(--ink-2);
  font: 600 var(--t-small)/1 var(--sans); text-decoration: none; white-space: nowrap; transition: color var(--d-base), background var(--d-base), box-shadow var(--d-base); }
@media (hover: hover) { .r-nav-a:hover { color: var(--ink); background: rgb(242 236 226 / .04); } }
.r-nav-a[aria-current="true"], .r-nav-a[aria-current="true"]:hover { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.r-nav-a:focus-visible { outline-offset: -2px; }
.r-nav-c { display: inline-flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--good); }
.r-nav-c .ic { width: 14px; height: 14px; }
.r-nav-mark { display: none; }
.r-nav .gmark { --s: 24px; }
/* the reading line: driven by the page's own scroll, no script; browsers without scroll timelines show no line */
.r-nav-bar { display: none; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 2px; translate: -50% 0; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--ink-3); opacity: .7; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .r-nav-bar { display: block; animation: read linear both; animation-timeline: scroll(root); }
}
@media (min-width: 900px) {
  .r-nav { height: 52px; }
  .r-nav-in { width: 100%; margin-inline: 0; padding-inline: 0; }
  .r-nav-a { padding: 0 14px; }
  .r-nav-mark { display: inline-grid; margin-right: 10px; }
}

/* ---------- the disclosure (09 section 5.5): one quiet text button; the first line of what it hides stays visible ---------- */
.more { display: grid; gap: 0; min-width: 0; }
.more-body { min-width: 0; }
.more-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: -4px; padding: 0 2px; border: 0; background: none; color: var(--ink-2);
  font: 600 var(--t-small)/1.3 var(--sans); text-align: left; cursor: pointer; transition: color var(--d-base); }
.more-btn .chev { flex: none; width: 6px; height: 6px; margin: -3px 2px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--d-fast) var(--ease); }
.more.is-open > .more-btn .chev, .more-btn[aria-expanded="true"] .chev { transform: translateY(3px) rotate(-135deg); }
@media (hover: hover) { .more-btn:hover { color: var(--ink); } }
/* the estimate method: a link-like button inside the Estimate line */
.more-btn.more-btn--inline { display: inline; min-height: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
@media (hover: hover) { .more-btn.more-btn--inline:hover { color: var(--ink); text-decoration-color: currentColor; } }
/* closed states, by kind */
.more[data-more="steps"]:not(.is-open) .fix-steps > li:nth-child(n+2) { display: none; }
.more[data-more="steps"].is-open .fix-steps > li:nth-child(n+2) { animation: rise var(--d-base) var(--ease) both; }
.more[data-more="prompt"]:not(.is-open) .prompt { max-height: calc(3.2em + 12px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.more[data-more="prompt"]:not(.is-open) pre.prompt:not(.prompt-box pre) { max-height: calc(3.2em + 16px); }
.more[data-more="why"]:not(.is-open) .fix-why,
.more[data-more="take"]:not(.is-open) .take blockquote p,
.more[data-more="take"]:not(.is-open) .take blockquote:not(:has(p)) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.more[data-more="note"]:not(.is-open) .aiplan-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.more[data-more="note"]:not(.is-open) :is(.aiplan-move, .prompt-box, .aiplan-prompt) { display: none; }

/* ---------- 3. the fixes (09 section 5.6): the same anatomy on every card ---------- */
.fixes { display: grid; gap: 20px; }
.fixes > .h2 + .muted, .fixes > h2 + .muted { margin-top: -10px; }
@media (min-width: 900px) { .fixes { gap: 24px; } }
.fix { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); }
@media (min-width: 1024px) { .fix { padding: 24px 28px 26px; gap: 18px; } }
.fix--topup { background: var(--grad-card) padding-box, linear-gradient(var(--line-2), var(--line-2)) border-box; box-shadow: none; }
.fix-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
/* the photo is a thumbnail now; the fix number sits on its corner */
.fix-thumb { position: relative; display: block; width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); }
.fix-thumb img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: saturate(.88) brightness(.9); }
.fix-thumb:has(img)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; }
.fix-num { position: absolute; left: -6px; bottom: -6px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 0 0 3px #191714; color: var(--ink); font: 600 var(--t-small)/1 var(--serif);
  font-variant-numeric: tabular-nums; }
/* no photo (non-owner paths): the number alone, larger */
.fix-thumb:not(:has(img)) { width: 44px; height: 44px; }
.fix-thumb:not(:has(img)) .fix-num, .fix-h > .fix-num { position: static; width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--line-3); font-size: min(var(--t-h2), 1.5rem); }
@media (min-width: 1024px) { .fix-thumb { width: 88px; height: 88px; } }
.fix-ht { display: grid; gap: 6px; align-content: start; min-width: 0; }
.fix-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fix-k .eyebrow { color: var(--ink-2); }
.fix h3 { font-size: var(--t-h2); }
.fix-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-3); font-size: var(--t-small); line-height: 1.4; }
.fix-time { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-small); }
.fix-time .ic { width: 14px; height: 14px; }
.fix-body, .fix-l, .fix-r { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .fix-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; } }
/* "Do this": the move itself, its plan tag and its sources, never collapsed */
.fix-move { display: grid; gap: 4px; padding: 12px 14px 13px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.fix-do { font-weight: 600; line-height: 1.5; color: var(--ink); }
.fix-do b { font-weight: inherit; }
.fix-move .src { margin-top: 2px; }
.fix-steps { display: grid; gap: 12px; counter-reset: step; }
.fix-steps li { position: relative; counter-increment: step; padding-left: 40px; min-height: 28px; line-height: 1.5; }
.fix-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 500 var(--t-small)/1 var(--mono); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.fix-why { color: var(--ink-2); line-height: 1.6; }
.fix-why b { color: var(--ink); }
.fix-why .src { display: inline; margin-left: 4px; }
.fix-extra { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.fix-extra .take { padding-left: 16px; }
@media (min-width: 1024px) { .fix-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
.fix-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.fix-done { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px 6px 9px; border-radius: var(--r-pill); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 var(--t-small)/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--d-base), color var(--d-base), box-shadow var(--d-base); }
.fix-done input { width: 20px; height: 20px; margin: 0; border-radius: 6px; background-size: 12px; }
.fix-done:has(input:checked) { color: var(--good); background: var(--good-tint); box-shadow: inset 0 0 0 1px rgb(156 203 159 / .45); }
.fix-sess { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 600 var(--t-small)/1.4 var(--sans); }
.fix-sess .ic { color: var(--ink-2); }
.fix-dfy { flex: 1 1 360px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.55; }
.fix-dfy a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.fix-dfy .muted { color: var(--ink-3); }
/* a fix marked as done: its title steps back, a "Done" tag joins the eyebrow and the number becomes a tick */
:is(.fix.is-done, .fix:has(.fix-done input:checked)) h3 { color: var(--ink-2); }
:is(.fix.is-done, .fix:has(.fix-done input:checked)) .fix-k::after { content: 'Done'; display: inline-flex; align-items: center; padding: 4px 6px; border-radius: var(--r-xs);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--good); box-shadow: inset 0 0 0 1px rgb(156 203 159 / .45); }
:is(.fix.is-done, .fix:has(.fix-done input:checked)) .fix-num { color: transparent; background: var(--good) var(--tick) center / 14px no-repeat; }
:is(.fix.is-done, .fix:has(.fix-done input:checked)) .fix-thumb img { filter: saturate(.5) brightness(.7); }

/* ---------- 4. why this plan fits you (09 section 5.8) ---------- */
.r-read { display: grid; gap: 14px; }
.r-read > .muted { margin-top: -6px; }
.reads { display: grid; gap: 14px; }
.read { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); min-width: 0; }
.read-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.read > .tag { justify-self: start; }
.read--take .take { padding-left: 16px; }
@media (min-width: 900px) { .reads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* opinion blocks: real opinions, clearly opinions (the rule on the left, the byline and the Opinion tag always show) */
.take { display: grid; gap: 12px; padding: 2px 0 2px 20px; border-left: 2px solid var(--line-3); min-width: 0; }
.take blockquote p, .take blockquote { font: 400 var(--t-body)/1.6 var(--serif); color: var(--ink); text-wrap: pretty; }
.take .byline, .take figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 600 var(--t-small)/1.3 var(--sans); color: var(--ink-2); }
.take .note-av, .take figcaption img:not(.gcrest img) { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-3); }
.take .gmark { --s: 28px; }
.take--hero { width: 100%; }
.take--hero blockquote p, .take--hero blockquote { line-height: 1.55; }
.take--book { padding-left: 18px; }

/* where your hours go */
.r-week { display: grid; gap: 14px; }
.week { display: grid; gap: 8px; }
.week-bar { display: flex; gap: 4px; min-height: 72px; }
.week-bar span { display: grid; align-content: end; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.week-bar span b { font: 600 var(--t-small)/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.week-bar span i { font: 500 var(--t-small)/1 var(--mono); color: var(--ink-3); }
.week-bar .w0 { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.week-back { min-width: 170px; padding-top: 8px; border-top: 2px solid var(--accent); font: 600 var(--t-small)/1.3 var(--sans); color: var(--ink); }
@media (max-width: 639px) {
  .week-bar { flex-direction: column; min-height: 0; }
  .week-bar span { flex: none !important; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; }
  .week-bar span b { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .week-bar span i { flex: none; }
  .week-back { width: auto !important; }
}

/* the note written by Claude (owners, never waited for) */
#aiplan:empty { display: none; }
.aiplan { display: grid; gap: 14px; justify-items: start; padding: 24px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); animation: screen-in var(--d-screen) var(--ease) both; }
.aiplan > .more { justify-self: stretch; }
.aiplan div.more-body { display: grid; gap: 14px; }
.aiplan .mini { display: inline-flex; align-items: center; gap: 8px; }
.aiplan-note { font: 400 var(--t-body)/1.6 var(--serif); color: var(--ink); }
.aiplan-move { display: grid; gap: 10px; width: 100%; }
.aiplan-move h3 { font-size: var(--t-body); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.aiplan-move ol { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; color: var(--ink-2); }
.aiplan .prompt-box, .aiplan > .prompt { width: 100%; }

/* what changed in 2026 (the one rail on the result): the date and the plan tag share a line when they fit */
.chg { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 10px 12px; }
.chg > :not(.chg-date):not(.tag) { flex: 1 1 100%; }
.chg-date { font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: var(--caps-ui); text-transform: uppercase; color: var(--ink-3); }
.chg h3 { margin-top: 4px; }
.src { color: var(--ink-3); font-size: var(--t-small); line-height: 1.5; }
.src a { color: var(--ink-2); }
.chg .src { margin-top: 2px; }

/* ---------- 5. the prompt pack (09 section 5.11): a grouped list, every title scannable at once ---------- */
.pack { display: grid; gap: 16px; }
.pack-h { display: grid; gap: 8px; justify-items: start; }
.pack-h > .muted { margin-top: -2px; }
.pack-h > .btn { margin-top: 6px; }
@media (min-width: 760px) {
  .pack-h { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
  .pack-h > :not(.btn) { grid-column: 1; }
  .pack-h > .btn { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* what never goes into AI: a callout just above the prompts */
.never { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px 10px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.never > .ic { width: 20px; height: 20px; color: var(--ink-2); }
.never > :not(.ic):not(.mini):not(h2):not(h3) { grid-column: 1 / -1; }
.never > :is(h2, h3, .mini):first-child { grid-column: 1 / -1; }
.never .ticks { gap: 8px 28px; }
.never .ticks .ic { color: var(--ink-3); }
@media (min-width: 640px) { .never .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-group { display: grid; gap: 10px; min-width: 0; }
.pk-group + .pk-group, .never + .pk-group { margin-top: 12px; }
.pk-gh .gmark { --s: 24px; margin-block: -5px; }
.pk-group > .fine { margin-top: -4px; }
.pk-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .pk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } }
.pk { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pk-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; }
.pk-h > .count { grid-column: 1; grid-row: 1; align-self: start; margin-top: 4px; min-width: 2ch; text-align: left; }
.pk-t { grid-column: 2; grid-row: 1; font: 600 var(--t-body)/1.35 var(--sans); letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.pk-ref { grid-column: 2; grid-row: 2; justify-self: start; color: var(--ink-3); font-size: var(--t-small); line-height: 1.4; }
.pk-h > .btn { grid-column: 3; grid-row: 1 / span 2; }
.pk-why { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.pk pre.prompt:not(.prompt-box pre) { padding: 10px 12px; }
.pk .more[data-more="prompt"]:not(.is-open) pre.prompt:not(.prompt-box pre) { max-height: calc(3.2em + 12px); }

/* ---------- 6. the recommendation panel (09 section 5.12): the bronze edge and wash are reserved for it ---------- */
.book { position: relative; display: grid; border-radius: var(--r-lg); border: 1px solid transparent; overflow: hidden; overflow: clip;
  background: var(--grad-book) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge-accent) border-box; box-shadow: var(--shadow-2); }
/* the photo sits in its own column wrapper: a sticky element sticks within its parent, so with the section as the
   parent it slid down over the full-width calendar row (owner, 2026-10-07: "image overlays with the booking") */
.book-artcol { min-width: 0; }
.book-art { position: relative; margin: 0; }
.book-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.88) brightness(.88); }
.book-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--surface)); pointer-events: none; }
@media (max-width: 639px) { .book-art, .book-artcol { display: none; } }
.book-in { display: grid; gap: 14px; justify-items: start; padding: 22px 20px 24px; min-width: 0; }
.book-in > .eyebrow:first-child, .book > .eyebrow:first-child { color: var(--accent); }   /* the panel's action label */
.book h2 { font-size: var(--t-h2); }
.book .mini { margin-top: 6px; }
/* worth it if, skip it if: the booking take, still an opinion, with its byline */
.book-decide { width: 100%; gap: 0; }
/* the label starts the sentence: "Worth it if the repeat work is eating your week..." */
.decide-row { padding: 11px 0; }
.decide-row > p { display: inline; }
.decide-row:first-child { padding-top: 2px; }
.decide-row + .decide-row { border-top: 1px solid var(--line); }
.decide-k { display: inline-flex !important; align-items: center; gap: 6px; margin-right: .45em; font: 600 var(--t-small)/1.3 var(--sans); vertical-align: .08em; }
.decide-k .ic { width: 16px; height: 16px; }
.decide-yes .decide-k { color: var(--good); }
.decide-no .decide-k { color: var(--ink-2); }
.minus { flex: none; display: inline-block; width: 10px; height: 2px; margin: 0 3px; border-radius: 1px; background: currentColor; }
.decide-row > p:not(.decide-k) { font: 400 var(--t-body)/1.55 var(--serif); color: var(--ink); }
.book-decide > .byline, .book-decide > figcaption { padding-top: 12px; border-top: 1px solid var(--line); }
.book-why { display: grid; gap: 12px; }
.book-why li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; line-height: 1.5; }
.book-why .ic { width: 20px; height: 20px; margin-top: 3px; color: var(--good); }
/* how the call works: three numbered steps */
.book-steps { display: grid; gap: 12px; width: 100%; }
.book-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.bs-n { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3);
  color: var(--ink); font: 600 var(--t-small)/1 var(--serif); font-variant-numeric: tabular-nums; }
.book-steps p { color: var(--ink-2); line-height: 1.5; }
.book-host { display: flex; align-items: center; gap: 12px; width: 100%; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.book-host img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-3); }
.book-host p { line-height: 1.4; }
.book-in > .btn { width: 100%; margin-top: 4px; }
.book-in > .micro { width: 100%; margin-top: -6px; }
.book-alt { margin-top: -4px; }
.book-alt a { color: var(--ink-2); }
.book-fit { color: var(--ink-2); line-height: 1.6; }
.book-fit b { color: var(--ink); }
.book .cases, .book .typ { width: 100%; }
@media (min-width: 900px) {
  .book:not(.book--soft) { grid-template-columns: 40% minmax(0, 1fr); }
  .book-art { position: sticky; top: 72px; align-self: start; }
  .book-art img { aspect-ratio: 4 / 5; }
  .book-art::after { background: linear-gradient(90deg, transparent 55%, var(--surface)), linear-gradient(180deg, transparent 70%, var(--surface)); }
  .book-in { padding: 28px 32px 30px; }
  .book-in > .btn { width: auto; min-width: 320px; }
  .book-in > .micro, .book-in > .book-alt { text-align: left; }
}
/* soft variant (diy, exploring): quiet, no art, no bronze */
.book--soft { background: var(--bg-2); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.book--soft .book-in > .eyebrow:first-child, .book--soft > .eyebrow:first-child { color: var(--ink-2); }
.book--soft .book-in { padding: 24px; }
.book--soft > :not(.book-in) { margin: 0 24px; }
.book--soft > .eyebrow:first-child { margin-top: 24px; }

/* goal, then the panel it leads into */
/* a solid edge: a dashed border means "Sample" in this system (07 section 6), and the goal is the person's own */
.goal-f { display: grid; gap: 12px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--bg-2); }
.goal-row { display: grid; gap: 10px; }
@media (min-width: 640px) { .goal-row { grid-template-columns: minmax(0, 1fr) auto; } }
.r-quote { padding: 4px 0 4px 22px; border-left: 2px solid var(--line-3); font: 400 var(--t-h2)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.r-quote p { font: inherit; }

/* the group block */
.r-group { display: grid; gap: 20px; padding: 24px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); align-items: start; }
.r-group > * { min-width: 0; }
.r-group-in { display: grid; gap: 16px; justify-items: start; }
.r-group-in > .evs { width: 100%; }
.r-group h2 { margin-bottom: 0; }
.r-group .host-chip { justify-self: start; }
.r-group > .share { padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .r-group { padding: 32px; }
  /* photo left in an arch; everything else stacks on the right (row gap 0 so empty rows cost nothing) */
  .r-group:has(> .grp-photo) { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: var(--s-7); row-gap: 0; }
  .r-group > .grp-photo { grid-column: 1; grid-row: 1 / -1; border-radius: var(--r-arch); }
  .r-group > .grp-photo img { aspect-ratio: 4 / 5; }
  .r-group:has(> .grp-photo) > :not(.grp-photo) { grid-column: 2; }
  .r-group:has(> .grp-photo) > :not(.grp-photo) ~ :not(.grp-photo) { margin-top: 20px; }
}
.share { display: grid; gap: 12px; }
.share p { color: var(--ink-2); }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btns .btn { min-height: 48px; padding: 10px 18px; }
.r-foot { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .r-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* session cards */
.evs { display: grid; gap: 10px; }
.ev { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--ink); text-decoration: none;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); transition: background var(--d-base); }
@media (hover: hover) { .ev:hover { background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; } }
.ev-date { flex: none; width: 56px; padding: 7px 0 6px; border-radius: var(--r-sm); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); display: grid; justify-items: center; gap: 2px; }
.ev-date b { font: 600 11px/1.2 var(--sans); letter-spacing: .12em; color: var(--ink-3); }
.ev-date i { font: 500 var(--t-h2)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.ev-body { display: grid; gap: 4px; min-width: 0; }
.ev-t { font-weight: 600; line-height: 1.35; }
.ev-m { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-small); line-height: 1.4; }

/* the sticky command: one line, 64px tall on phones */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgb(14 13 11 / 0), rgb(14 13 11 / .94) 32%); transform: translateY(110%); visibility: hidden;
  transition: transform var(--d-screen) var(--ease), visibility 0s linear var(--d-screen); pointer-events: none; }
.dock.is-on { transform: none; visibility: visible; transition: transform var(--d-screen) var(--ease), visibility 0s; pointer-events: auto; }
.dock-in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.dock-in p { font: 600 var(--t-small)/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-in .btn { min-height: 48px; padding: 10px 18px; }
@media (max-width: 639px) {
  .dock { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .dock-in { padding: 10px 10px 10px 16px; }
  .dock-in .btn { min-height: 44px; padding: 8px 16px; }
}

/* ============================== call page ============================== */
#call, #booked { display: grid; gap: var(--s-7); max-width: calc(1040px + var(--gutter) * 2); padding-top: var(--s-4); padding-bottom: var(--s-6); }
.c-hero { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .c-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-7); align-items: start; } }
.c-hero-t { display: grid; gap: 16px; align-content: start; justify-items: start; min-width: 0; }
/* the call headline is a long line: it takes the h2 size so "Pick a time" makes the first screen */
.c-hero h1 { font-size: var(--t-h2); line-height: 1.15; }
.c-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font: 600 var(--t-small)/1.3 var(--sans); }
.c-chip .ic { color: var(--good); }
.c-line { font-weight: 600; color: var(--ink); }
.c-jump { min-width: 260px; }
.c-proof { font: 400 var(--t-body)/1.6 var(--serif); color: var(--ink-2); }
.c-cover-h { font: 600 var(--t-body)/1.35 var(--sans); letter-spacing: 0; margin-top: 8px; }
.c-cover { counter-reset: c; display: grid; gap: 12px; }
.c-cover li { counter-increment: c; position: relative; padding: 2px 0 2px 42px; line-height: 1.5; color: var(--ink-2); }
.c-cover li::before { content: counter(c); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--ink); font: 500 var(--t-small)/1 var(--mono); }
.c-art { display: grid; justify-items: center; align-content: start; width: 100%; max-width: 280px; justify-self: center; min-width: 0; }
@media (max-width: 899px) { .c-art .plinth .inscr { letter-spacing: .12em; } }
.c-art .niche { width: 100%; }
.c-art .plinth { justify-self: stretch; }
.c-art > p:not(.plinth) { margin-top: 14px; text-align: center; font: 400 var(--t-body)/1.45 var(--serif); color: var(--ink-2); }
@media (min-width: 900px) { .c-art { max-width: 340px; position: sticky; top: 80px; } }
.c-photo { margin: 0; }
.c-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); filter: saturate(.88) brightness(.92); }
@media (max-width: 899px) { .c-photo { display: none; } }
@media (min-width: 900px) { .c-photo img { aspect-ratio: 4 / 5; border-radius: var(--r-arch); } }
.c-book { display: grid; gap: 18px; padding: 24px; border-radius: 22px; border: 1px solid transparent; scroll-margin-top: 70px;
  background: var(--grad-card) padding-box, var(--edge-hi) border-box; box-shadow: var(--shadow-2); min-width: 0; }
.c-host { display: flex; gap: 14px; align-items: center; }
.c-host .avatar img { box-shadow: none; }
.c-host-n { font-weight: 600; color: var(--ink); }
.c-phone { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.cal { height: 940px; border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cal iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) { .cal { height: 720px; } }
/* Calendly without plan colours: a light paper card on purpose, never a raw white block on the stone */
.cal--paper { background: #F2ECE2; padding: 8px; border-radius: 16px; box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, var(--shadow-1); }
.cal--paper iframe { border-radius: 10px; }
.cal--paper .cal-skel { border-radius: 10px; background: linear-gradient(100deg, #E8E1D5 30%, #F7F2EA 50%, #E8E1D5 70%) 0 0 / 200% 100%; }
.cal--dark { background: var(--surface); }
.cal-skel { height: 100%; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.cal:has(.cal-empty) { height: auto; padding: 0; background: none; box-shadow: none; }
.cal-empty { padding: 22px; border-radius: var(--r-md); border: 1px dashed var(--line-3); color: var(--ink-2); background: var(--bg-2); }
/* phones: Calendly needs 320px or more, so the booking box goes full bleed */
@media (max-width: 599px) {
  .c-book { margin: 0 calc(var(--gutter) * -1); padding: 20px 0; border-radius: 0; border-left: 0; border-right: 0; }
  .c-book > :not(.cal) { margin-left: var(--gutter); margin-right: var(--gutter); }
  .cal { border-radius: 0; }
  .cal--paper { padding: 6px 0; border-radius: 0; }
  .cal--paper iframe, .cal--paper .cal-skel { border-radius: 0; }
  .cal:has(.cal-empty) { margin: 0 var(--gutter); }
}
.c-diy { color: var(--ink-3); font-size: var(--t-small); line-height: 1.55; }
.c-proofs { display: grid; gap: 18px; justify-items: start; }
.c-proofs > h2 { margin-bottom: -4px; }
.cases, .typ { display: grid; gap: 12px; width: 100%; }
@media (min-width: 760px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .typ { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case, .typ > div { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card) padding-box, var(--edge) border-box; box-shadow: var(--shadow-1); }
.case h3 { font-size: var(--t-body); font-weight: 600; }
.typ strong { font: 500 var(--t-h2)/1.1 var(--serif); }
.typ span { color: var(--ink-2); font-size: var(--t-small); }
.c-fit { color: var(--ink-2); max-width: 64ch; }
.c-fit b { color: var(--ink); }

/* ============================== booked page ============================== */
.b-hero { display: grid; gap: 16px; justify-items: start; }
.b-hero .r-sub, .b-generic .r-sub, .r-sub { color: var(--ink-2); max-width: 56ch; }
.b-art { display: grid; justify-items: center; width: 160px; margin-bottom: 4px; }
.b-art .niche { width: 160px; }
.b-art .plinth { justify-self: stretch; margin-inline: 0; padding: 9px 8px 10px; }
.b-art .plinth .inscr { min-height: 0; letter-spacing: .1em; }
.b-art > p:not(.plinth) { margin-top: 10px; text-align: center; }
.yes { display: grid; gap: 8px; width: 100%; max-width: 760px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--grad-card-hi) padding-box, var(--edge-hi) border-box; box-shadow: var(--shadow-2); }
.yes .mini { color: var(--ink-2); }
.yes-t { font: 400 var(--t-h2)/1.3 var(--serif); color: var(--ink); }
.yes-t b { font-weight: 600; }
.yes .fine { color: var(--ink-3); }
.addcal { display: flex; flex-wrap: wrap; gap: 10px; }
.addcal .btn { min-height: 48px; padding: 10px 18px; }
.prep, .before { display: grid; gap: 14px; justify-items: start; }
.b-generic { display: grid; gap: 16px; padding-top: var(--s-7); padding-bottom: var(--s-7); justify-items: start; }

/* ============================== motion ============================== */
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes carve { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: var(--caps); } }
@keyframes name-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes now-in { from { transform: scaleX(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: none; } }

/* reduced motion: everything lands in its final state at once (near-zero durations, so elements that animate in from
   opacity 0 still end visible) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .tile:not(.is-loaded) .tile-img, .cal-skel { animation: none !important; }
  /* the archetype name is in the DOM from the start: show it without waiting on an animation frame (spec 6.8) */
  .r-name { animation: none !important; opacity: 1; }
}

/* ============================== print: the plan on white paper ============================== */
@media print {
  :root { color-scheme: light; --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #f3f0eb; --inset: #f7f5f1; --ink: #111; --ink-2: #333; --ink-3: #555;
    --line: #ddd; --line-2: #ccc; --line-3: #999; --line-input: #999; --accent: #111; --accent-ink: #fff; --good: #2d6a35;
    --grad-card: linear-gradient(#fff, #fff); --grad-card-hi: linear-gradient(#fff, #fff); --edge: linear-gradient(#ccc, #ccc); --edge-hi: linear-gradient(#ccc, #ccc);
    --edge-accent: linear-gradient(#999, #999); --grad-book: linear-gradient(#fff, #fff); --shadow-1: none; --shadow-2: none; }
  html, body { background: #fff !important; color: #111; }
  body::after { display: none; }
  .g-strip, .foot, .dock, .q-head, .q-top, .q-live, .q-actions, .q-note, .portrait--thumb, .portrait--panel, .btn, button, .rail-nav, .rail-count, .switch,
  .r-nav, .micro, .day-go, .fix-done, .sum-time, .fork, .again, .share, .share-btns, .fix-thumb img, .book-art, .grp-photo, .r-art .niche, .c-art .niche, .goal-f,
  #landing .lp-art { display: none !important; }
  .report { padding: 0; animation: none; }
  .report > * + * { margin-top: 28px !important; }
  .r-hero { grid-template-columns: 1fr !important; }
  .r-art { max-width: none; justify-items: start; position: static; }
  /* on paper every toggle is open: steps, prompts, why now, takes and the note print in full */
  .more .fix-steps > li { display: block !important; }
  .more :is(.fix-why, .aiplan-note, .take blockquote, .take blockquote p) { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; }
  .more :is(.aiplan-move, .prompt-box) { display: grid !important; }
  .more .prompt { -webkit-mask-image: none !important; mask-image: none !important; }
  .fix-thumb, .fix-thumb:not(:has(img)) { width: auto; height: auto; }
  .fix-num { position: static !important; box-shadow: inset 0 0 0 1px #999 !important; }
  .gmark:not(.gcrest) { background: none; box-shadow: inset 0 0 0 1px #999; color: #111; }
  .stats-more[hidden] { display: block !important; }   /* the estimate method prints with the estimate */
  .rail-track { display: grid !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: 1fr !important;
    overflow: visible !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none; }
  .prompt { white-space: pre-wrap !important; overflow-wrap: anywhere; max-height: none !important; overflow: visible !important; }
  .fix, .rail-card, .read, .r-sum, .pk, .fork-c, .book, .never, .aiplan, .r-group { break-inside: avoid; box-shadow: none !important; background: #fff !important; border: 1px solid #ccc !important; }
  .day { break-inside: avoid; }
  .prompt-box, .fix-move { background: #f7f5f1 !important; box-shadow: inset 0 0 0 1px #ddd !important; }
  .stats > :first-child b, .stats > :first-child .num, .meter-v { color: #111 !important; }
  .take { border-left-color: #999; }
  .tag { color: #333; box-shadow: inset 0 0 0 1px #999; }
  a { color: #111; text-decoration-color: #999; }
  .r-name { animation: none !important; opacity: 1 !important; }
}

/* ===== v3.1 colour (owner, 2026-10-06: "more gradients; the colours should be better, it's a bit dull") =====
   The bronze still means act. Classical jewel tones, the colours of bronze patina, lapis, oxblood and amethyst glass,
   now tint the result's surfaces as gradients, so each part of the page has its own colour and the page reads in
   bands. Surfaces and buttons only: never gradient text, never a coloured glow. */
:root {
  --patina: 64 140 118; --lapis: 74 110 178; --oxblood: 156 58 62; --amethyst: 122 92 176; --gold: 214 168 92;
  --btn-grad: linear-gradient(180deg, #F3CF8A 0%, #DEAE60 52%, #C08B43 100%);
  --btn-grad-hi: linear-gradient(180deg, #F8DCA3 0%, #E7BB70 52%, #CB964C 100%);
  --solid: linear-gradient(var(--surface), var(--surface));
}
body { background: linear-gradient(180deg, #0E0D0B 0, #0F1117 34%, #120E10 68%, #0E0D0B 100%) fixed, var(--bg); }
.btn:not(.btn--line):not(.btn--quiet) { background: var(--btn-grad); }
@media (hover: hover) { .btn:not(.btn--line):not(.btn--quiet):hover { background: var(--btn-grad-hi); } }

/* the summary: gilt */
.r-sum { background: linear-gradient(155deg, rgb(var(--gold) / .17), rgb(var(--gold) / .04) 55%, transparent 80%) padding-box, var(--solid) padding-box,
  linear-gradient(155deg, rgb(var(--gold) / .65), rgb(var(--gold) / .12) 60%, rgb(var(--gold) / .3)) border-box; }
/* the 3 fixes: patina, lapis, amethyst */
.fix { --tone: var(--patina);
  background: linear-gradient(165deg, rgb(var(--tone) / .24), rgb(var(--tone) / .06) 45%, transparent 75%) padding-box, var(--solid) padding-box,
  linear-gradient(165deg, rgb(var(--tone) / .7), rgb(var(--tone) / .12) 55%, rgb(242 236 226 / .08)) border-box; }
.fixes .fix:nth-of-type(2) { --tone: var(--lapis); }
.fixes .fix:nth-of-type(3) { --tone: var(--amethyst); }
.fix .fix-num, .fix .fix-k { color: rgb(var(--tone) / 1); filter: brightness(1.45); }
/* why this plan fits: lapis, amethyst, oxblood */
.read { --tone: var(--lapis);
  background: linear-gradient(170deg, rgb(var(--tone) / .22), rgb(var(--tone) / .05) 55%, transparent) padding-box, var(--solid) padding-box,
  linear-gradient(170deg, rgb(var(--tone) / .6), rgb(242 236 226 / .08) 70%) border-box; }
.reads .read:nth-child(2) { --tone: var(--amethyst); }
.reads .read:nth-child(3) { --tone: var(--oxblood); }
/* what changed in 2026: amethyst into lapis */
.rail-card { background: linear-gradient(160deg, rgb(var(--amethyst) / .24), rgb(var(--lapis) / .10) 55%, transparent) padding-box, var(--solid) padding-box,
  linear-gradient(160deg, rgb(var(--amethyst) / .6), rgb(var(--lapis) / .25) 60%, rgb(242 236 226 / .08)) border-box; }
/* the prompt pack: a warm oxblood edge */
.pk { background: linear-gradient(90deg, rgb(var(--oxblood) / .14), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--oxblood) / .32); }
/* the booking panel: gold into oxblood into amethyst */
.book { background: linear-gradient(135deg, rgb(var(--gold) / .26), rgb(var(--oxblood) / .24) 50%, rgb(var(--amethyst) / .22)) padding-box, var(--solid) padding-box,
  linear-gradient(135deg, rgb(var(--gold) / .9), rgb(var(--oxblood) / .5) 55%, rgb(var(--amethyst) / .6)) border-box; }

/* booking bands between sections */
.cta-band { --a: var(--gold); --b: var(--oxblood);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 18px; border-radius: var(--r-lg);
  border: 1px solid transparent; box-shadow: var(--shadow-2);
  background: linear-gradient(120deg, rgb(var(--a) / .30), rgb(var(--b) / .26) 60%, rgb(var(--b) / .12)) padding-box, var(--solid) padding-box,
  linear-gradient(120deg, rgb(var(--a) / .95), rgb(var(--b) / .55)) border-box; }
.cta-band--1 { --a: var(--lapis); --b: var(--patina); }
.cta-band--2 { --a: var(--amethyst); --b: var(--lapis); }
.cta-band--3 { --a: var(--oxblood); --b: var(--gold); }
.cta-host img, .cta-host .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px rgb(var(--gold) / .85), 0 8px 18px -10px rgb(0 0 0 / .9); }
.cta-tx { display: grid; gap: 4px; min-width: 0; }
.cta-h { font: 600 var(--t-h2)/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.cta-s { color: var(--ink-2); max-width: 60ch; }
.cta-btn { grid-column: 1 / -1; width: 100%; }
@media (min-width: 760px) {
  .cta-band { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 24px; }
  .cta-btn { grid-column: auto; width: auto; white-space: nowrap; }
}
/* the closing line and the sticky bar */
.report .again { border-radius: var(--r-lg); padding: var(--s-5) 20px; background: linear-gradient(180deg, rgb(var(--gold) / .12), rgb(var(--oxblood) / .10)); box-shadow: inset 0 0 0 1px rgb(var(--gold) / .35); }
.dock-in { background: linear-gradient(110deg, rgb(var(--gold) / .22), rgb(var(--oxblood) / .2)), var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--gold) / .5), var(--shadow-2); }

/* the calendar inside the result's booking panel (owner: book on the result page itself) */
.book-cal { display: grid; gap: 14px; width: 100%; min-width: 0; scroll-margin-top: 70px; }
.book-in .cal { width: 100%; }
.book-pick-h { margin-top: 6px; }
.book-calrow { grid-column: 1 / -1; display: grid; gap: 14px; padding: 4px 20px 24px; min-width: 0; }
@media (min-width: 900px) { .book-calrow { padding: 8px 32px 32px; } .book-calrow .book-cal:has(.c-phone) { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; } }

/* the site's own booking picker (owner: no white calendar; Calendly through its API, in the site's style) */
.sp { display: grid; gap: 14px; min-width: 0; padding: 18px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: linear-gradient(160deg, rgb(var(--gold) / .10), transparent 55%) padding-box, linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
  linear-gradient(160deg, rgb(var(--gold) / .55), rgb(242 236 226 / .08) 60%) border-box; }
@media (min-width: 760px) { .sp { padding: 22px 24px 24px; } }
.sp-step { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: var(--caps-ui); text-transform: uppercase; color: var(--ink-2); }
.sp-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--btn-grad); color: var(--accent-ink); font: 700 .8rem/1 var(--sans); letter-spacing: 0; }
.sp-tz { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.sp-load { color: var(--ink-2); }
.sp-load a { color: var(--accent); }
.sp-days { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; }
.sp-day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; width: 78px; padding: 12px 6px 10px; border-radius: 14px; cursor: pointer;
  color: var(--ink); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgb(var(--lapis) / .16), transparent), var(--surface);
  transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--ease); }
.sp-dw, .sp-dm { font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sp-dd { font: 600 1.75rem/1 var(--serif); color: var(--ink); }
.sp-dc { margin-top: 4px; font: 500 .72rem/1 var(--mono); color: var(--good); }
.sp-day[aria-pressed="true"] { border-color: transparent; background: var(--btn-grad); }
.sp-day[aria-pressed="true"] :is(.sp-dw, .sp-dm, .sp-dd, .sp-dc) { color: var(--accent-ink); }
@media (hover: hover) { .sp-day:hover, .sp-time:hover { border-color: rgb(var(--gold) / .7); transform: translateY(-1px); } }
.sp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.sp-time { min-height: 48px; padding: 10px; border-radius: 12px; cursor: pointer; color: var(--ink); font: 600 var(--t-body)/1 var(--sans);
  border: 1px solid var(--line-2); background: linear-gradient(180deg, rgb(var(--patina) / .14), transparent), var(--surface); transition: border-color var(--d-fast), transform var(--d-fast) var(--ease); }
.sp-time[aria-pressed="true"] { border-color: transparent; background: var(--btn-grad); color: var(--accent-ink); }
.sp-day:focus-visible, .sp-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-who { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.sp-who .field-row { display: grid; gap: 12px; }
@media (min-width: 640px) { .sp-who .field-row { grid-template-columns: 1fr 1fr; } }
.sp-note { color: var(--ink-3); }
.book-calrow .book-cal { display: block; }
.book-cal .cal[hidden] { display: none; }

/* London cookie banner (UK rules): Accept and Reject look the same; nothing loads before a choice */
.ck { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: min(640px, calc(100% - 24px));
  display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid transparent; box-shadow: var(--shadow-2);
  background: linear-gradient(160deg, rgb(var(--gold) / .14), transparent 60%) padding-box, linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
  linear-gradient(160deg, rgb(var(--gold) / .6), rgb(242 236 226 / .1)) border-box; }
.ck[hidden] { display: none; }
.ck p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.ck p b { color: var(--ink); }
.ck p a { color: var(--ink); }
.ck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-btns .btn { min-height: 44px; padding: 10px 16px; }

/* the network page: every host, stacked */
.lp-hosts { display: inline-flex; flex: none; }
.lp-hosts img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -12px; }
.lp-hosts img:first-child { margin-left: 0; }
.lp-host--net { align-items: center; }