@layer ui-sdk;

/* Layout and motion are the live site's, rule for rule: the first screen pairs the one action with the
   Report's contents page; the story pins a map and stacks Report pages over it; the preview screen is page
   one of a Report with the order form beside it. The skin is the modular one: system font, soft palette,
   rounded corners, hairline borders and soft shadows. */
:root {
  --paper: #F6F7F4; --sheet: #FFFFFF; --ink: #14201A; --ink-2: #5A665F; --line: #E3E7E1; --line-strong: #CBD3CC;
  --green: #1F5E45; --green-hover: #174A36; --green-2: #4E9A78; --on-green: #FFFFFF; --mark: #D5EADD; --soft: #E7F1EB; --dot: #9AA39C;
  --bad: #B3261E; --bad-bg: #FCEEEC; --bad-line: #F2C9C4; --bad-ink: #6E1510;
  --hover: #F0F3EF; --well: #EDF0EC; --knob: #FFFFFF; --street: #E4E8E2; --glass: rgba(255, 255, 255, .92);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --data: var(--font);
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --shadow: 0 1px 2px rgba(20, 32, 26, .05), 0 6px 24px rgba(20, 32, 26, .07);
  --shadow-lg: 0 2px 4px rgba(20, 32, 26, .06), 0 18px 48px rgba(20, 32, 26, .12);
  --bar-h: 0rem;
  /* Motion: pages push like a stack; small things settle quickly. */
  --push-t: .42s; --push-ease: cubic-bezier(.32, .72, 0, 1); --quick: .15s ease;
  --hatch: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px);
  color-scheme: light;
}
/* Dark mode: the same roles on dark paper. The greens get lighter, so they still read as text and as
   marks, and a green button carries dark text. Set by the switch at the top; boot.js applies it early. */
:root[data-theme="dark"] {
  --paper: #0E1411; --sheet: #161D19; --ink: #EAF0EC; --ink-2: #9AA79F; --line: #26302B; --line-strong: #3B4841;
  --green: #6FC59C; --green-hover: #86D3AE; --green-2: #3E8F6C; --on-green: #0B1410; --mark: #1E4A38; --soft: #19281F; --dot: #6A766F;
  --bad: #F28B82; --bad-bg: #3A1B18; --bad-line: #6B2A24; --bad-ink: #F7C9C4;
  --hover: #232D28; --well: #212B26; --knob: #36433D; --street: #1D2621; --glass: rgba(22, 29, 25, .92);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1410' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must win over every display rule below: the scripts show and hide blocks with it. */
[hidden] { display: none !important; }
html.motion { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.wrap {
  padding-left: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
}
.inner { max-width: 78rem; margin-inline: auto; }
h1, h2, h3, p { margin: 0; }
/* The system font is about 18% narrower than the wide face the layout was drawn for, so display sizes
   are scaled up by that much: headlines fill the same width as before. */
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.6vw, 3.55rem); line-height: 1.06; }
h3 { font: 650 1.05rem/1.3 var(--display); letter-spacing: -.01em; }
.label { font: 600 .8125rem/1.35 var(--data); letter-spacing: .01em; color: var(--green); }
mark { color: inherit; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 84% / 100% 46%; padding-inline: .08em; margin-inline: -.08em; border-radius: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.short { display: none; }
.fine { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 0; background: var(--green); color: var(--on-green); padding: .75rem 1.2rem; border-radius: var(--r); font: 600 1rem var(--body); transition: background .15s ease; }
.cta:hover { background: var(--green-hover); }
.cta[aria-disabled="true"], .cta[data-pending] { opacity: .65; cursor: progress; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* Logo */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; }
.brand span { font-weight: 500; }
.logo { width: 1.75rem; height: 1.75rem; flex: none; }
.v-l { fill: var(--v-l, var(--green)); }
.v-r { fill: var(--v-r, var(--green-2)); }
.v-d { fill: var(--v-d, var(--ink)); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.nav-links { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem); font-size: .9375rem; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links .linkbtn { color: var(--ink); font-weight: 500; }
.soon-btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line-strong); background: var(--sheet); border-radius: 999px; padding: .38rem .45rem .38rem .8rem; font-size: .875rem; font-weight: 600; transition: background .15s ease; }
.soon-btn:hover { background: var(--soft); }
/* Dark mode switch. The knob follows the page's theme, not the button, so it is right before any script runs. */
.theme { flex: none; display: inline-flex; align-items: center; width: 2.875rem; height: 1.75rem; padding: 0 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--line); transition: background .15s ease; }
.theme:hover { background: var(--line-strong); }
.theme-thumb { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .28); color: var(--ink); }
.theme svg { width: .8125rem; height: .8125rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme .moon, :root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
:root[data-theme="dark"] .theme-thumb { transform: translateX(1.125rem); }
:root[data-theme="dark"] .theme { background: var(--well); }
html.motion .theme-thumb { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.soon-btn small { font: 600 .75rem/1 var(--data); background: var(--soft); color: var(--green); padding: .22rem .5rem; border-radius: 999px; margin: 0; }
html:not([data-view="home"]) .only-home, html[data-view="home"] .only-preview { display: none; }

/* Screen 1 */
.hero-grid { min-height: calc(100svh - var(--bar-h) - 4.6rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(1rem, 3vh, 2rem) clamp(2.5rem, 9vh, 5.5rem); }
.hero-copy { display: grid; gap: 1.15rem; min-width: 0; }
.hero-copy .sub { max-width: 35rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.finder { display: grid; gap: .75rem; max-width: 40rem; margin-top: .5rem; }
.finder ui-combobox { display: grid; gap: .6rem; }
.finder-row { position: relative; display: flex; align-items: center; gap: .25rem; padding: .375rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: calc(var(--r) + 6px); box-shadow: var(--shadow-lg); transition: border-color .15s ease, box-shadow .15s ease; }
.finder-row:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px var(--soft), var(--shadow-lg); }
/* Sent here from elsewhere on the page ("Get this for your restaurant"): the box is ringed, and pulses when motion is welcome. */
.finder-row[data-nudge] { border-color: var(--green); box-shadow: 0 0 0 5px var(--mark), var(--shadow-lg); }
@keyframes nudge { from { box-shadow: 0 0 0 0 var(--green-2), var(--shadow-lg); } to { box-shadow: 0 0 0 18px transparent, var(--shadow-lg); } }
html.motion .finder-row[data-nudge] { animation: nudge .85s ease-out 2; }
.pinico { flex: none; width: 1.3rem; margin-left: .55rem; align-self: center; }
.pinico .halo { fill: var(--mark); }
.pinico .core { fill: var(--green); }
/* The library wraps the input, so the wrapper is the part that must be allowed to shrink. */
.finder-row ui-combobox-input { flex: 1; min-width: 0; display: flex; }
.finder-row input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; padding: .8rem .5rem; font: 500 1.0625rem var(--body); color: var(--ink); outline: none; }
.finder-row input::placeholder { color: var(--ink-2); opacity: 1; font-weight: 400; }
.go { flex: none; min-height: 3rem; border: 0; background: var(--green); color: var(--on-green); padding: 0 1.2rem; border-radius: var(--r); font: 600 1rem var(--body); transition: background .15s ease; }
.go:hover { background: var(--green-hover); }
.finder-list { margin: 0; width: var(--anchor-width); max-height: min(24rem, var(--available-height)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: .4rem; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.finder-list ui-combobox-list { display: grid; gap: 2px; }
.finder-list ui-combobox-item { display: grid; gap: .05rem; padding: .65rem .8rem; border-radius: var(--r-sm); cursor: pointer; }
.finder-list ui-combobox-item[data-highlighted] { background: var(--soft); }
.finder-list ui-combobox-item b { font-weight: 600; }
.finder-list ui-combobox-item span { font-size: .875rem; color: var(--ink-2); }
.finder-list .foot { order: 2; padding: .5rem .8rem .3rem; margin-top: .25rem; border-top: 1px solid var(--line); font-size: .75rem; font-weight: 500; color: var(--ink-2); }
.finder-list .foot:empty { display: none; }
.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; font-size: .9rem; counter-reset: j; }
.journey li { display: inline-flex; align-items: center; gap: .45rem; counter-increment: j; }
.journey li::before { content: counter(j); flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--soft); color: var(--green); font: 700 .75rem/1 var(--data); }

@property --fade-a { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-b { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* The contents card. It opens in place: the list and the sample pages share one grid cell, so the frame
   keeps its place and size whichever is showing. Hidden views stay in layout (visibility, never display). */
.toc { --pad: 1.25rem; container-type: inline-size; min-width: 0; display: grid; overflow: clip; padding: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: rotate(1deg); }
.peek-list, .peek-page { grid-area: 1 / 1; min-width: 0; display: grid; gap: .8rem; align-content: start; padding: 1.2rem var(--pad) 1.25rem; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; }
.toc h2, .peek-title h3 { font: 800 1.3rem/1.15 var(--display); letter-spacing: -.01em; }
.peek-list ol { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: t; }
/* On a wide screen the list scrolls inside the card, which stays six rows tall (`--fold` is measured by
   the script). Its edges fade where rows continue. On a phone the page already scrolls, so every row shows. */
@media (min-width: 861px) {
  .peek-scroll { max-height: var(--fold, none); overflow-y: auto; scrollbar-width: none; --fade-a: 0px; --fade-b: 0px; transition: --fade-a .25s ease, --fade-b .25s ease; -webkit-mask-image: linear-gradient(transparent, #000 var(--fade-a), #000 calc(100% - var(--fade-b)), transparent); mask-image: linear-gradient(transparent, #000 var(--fade-a), #000 calc(100% - var(--fade-b)), transparent); }
  .peek-scroll::-webkit-scrollbar { display: none; } /* no scroll bar: the peeking row and the fade say there is more */
  .peek-scroll[data-above] { --fade-a: 1.25rem; }
  .peek-scroll[data-below] { --fade-b: 2.75rem; }
}
.peek-list li { border-top: 1px solid var(--line); counter-increment: t; }
.peek-list li ui-button { display: block; }
.row { width: 100%; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; align-items: baseline; gap: .05rem .6rem; padding: .6rem .5rem; border: 0; border-radius: var(--r); background: none; text-align: left; transition: background .15s ease; }
.row::before { content: counter(t); grid-area: 1 / 1; font: 600 .8rem var(--data); color: var(--ink-2); }
.row b { grid-area: 1 / 2; font-weight: 600; }
.row .find { grid-area: 1 / 3; }
.row small { grid-area: 2 / 2 / 3 / 4; font-size: .8125rem; color: var(--ink-2); }
.row .chev { grid-area: 1 / 4 / 3 / 5; align-self: center; margin-left: .15rem; }
.row:active { background: var(--soft); }
.row:focus-visible { outline-offset: -2px; }
.peek-list li.payoff { border-top-color: transparent; }
.peek-list li.payoff .row { background: var(--soft); }
.peek-list li.payoff .row:active { background: var(--mark); }
.find { font: 700 .8125rem var(--data); color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The one arrow: on anything that opens, on Back and on the pager. Nothing else carries it. */
.chev { flex: none; width: .5rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--line-strong); transition: color .15s ease, transform .15s ease; }
.chev.left { transform: scaleX(-1); }
.row:focus-visible .chev { color: var(--green); transform: translateX(2px); }
/* Hover only where there is a pointer: on touch it would stick to the row after Back. */
@media (hover: hover) {
  .row:hover { background: var(--soft); }
  .peek-list li.payoff .row:hover { background: var(--mark); }
  .row:hover .chev { color: var(--green); transform: translateX(2px); }
}
/* In a narrow card the arrow takes its room from the number column and the padding, not from the titles. */
@container (max-width: 28.5rem) {
  .row { grid-template-columns: 1.1rem minmax(0, 1fr) auto auto; padding-inline: .3rem; }
  .row .chev { margin-left: -.2rem; }
  .toc .more { padding-inline: 2rem .3rem; }
}
.toc .more { padding: 1rem .5rem .2rem 2.6rem; font-size: .9375rem; font-weight: 500; }

/* A sample page inside the card: Back and the pager stay put, the page between them changes. */
.peek-page { grid-template-rows: auto minmax(0, 1fr) auto; outline: none; }
.peek-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.45rem -.45rem -.45rem -.5rem; }
.peek-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .3rem .7rem .3rem .55rem; border: 0; border-radius: 999px; background: none; font: 600 .8125rem/1.35 var(--data); letter-spacing: .01em; color: var(--green); transition: background .15s ease; }
.peek-back .chev, .peek-step .chev { width: .4375rem; height: .75rem; color: currentColor; }
.peek-pager { display: inline-flex; align-items: center; gap: .1rem; font: 600 .8125rem var(--data); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-pager > span { min-width: 3rem; text-align: center; }
.peek-step { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); transition: background .15s ease; }
.peek-back:hover, .peek-step:hover { background: var(--soft); }
.peek-step[aria-disabled="true"] { background: none; color: var(--line-strong); cursor: default; }
.peek-stack { display: grid; min-width: 0; }
.peek-body { grid-area: 1 / 1; min-width: 0; display: grid; gap: .7rem; align-content: start; }
.peek-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.peek-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.peek-foot .linkbtn { font-weight: 600; }
.toc[data-open] .peek-list, .toc:not([data-open]) .peek-page, .peek-body:not([data-pos="active"]) { visibility: hidden; }
.toc[data-open] .peek-list { transform: translateX(-100%); }
.toc:not([data-open]) .peek-page { transform: translateX(100%); }
.peek-body[data-pos="before"] { transform: translateX(calc(-100% - var(--pad))); }
.peek-body[data-pos="after"] { transform: translateX(calc(100% + var(--pad))); }
/* What the pages are made of. Tables, charts, dots and the calendar are the Report's own parts. */
.peek-body .tbl { font-size: .8125rem; }
.peek-body .tbl th, .peek-body .tbl td { padding-inline: .3rem; }
.peek-body .tbl .tag { padding: .1rem .5rem; font-size: .75rem; }
.peek-body .closebox { gap: .3rem; }
.peek-body [data-mark="close-row"], .peek-body .caxis { grid-template-columns: 4.2rem minmax(0, 1fr) 4.4rem; font-size: .8125rem; }
.peek-body .ctrack { height: 1.5rem; }
.peek-body .ctrack i { box-shadow: 0 0 0 3px var(--sheet); }
.peek-body .note { font-size: .9rem; }
.peek-body .facts { gap: .6rem 1.6rem; }
.peek-body .facts span { max-width: 11rem; line-height: 1.3; }
.peek-body .gapbox { border: 0; background: var(--soft); color: var(--green); font-size: .8125rem; }
.voice { display: grid; gap: .35rem; }
.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; font-size: .875rem; }
.tally li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 1.6rem; align-items: center; gap: 0 .6rem; margin-inline: -.5rem; padding: .2rem .5rem; border-radius: var(--r-sm); }
.tally .kind { justify-self: start; padding: .1rem .5rem; border-radius: 999px; background: var(--well); font: 600 .75rem/1.4 var(--data); color: var(--ink-2); }
.tally [data-kind="praise"] .kind { background: var(--soft); color: var(--green); }
.tally .kind, .tally b { grid-row: 1 / 3; }
.tally b { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.tally .bar { grid-area: 2 / 2; margin: 3px auto 0 0; }
.tally [data-kind="praise"] .bar { background: var(--green-2); }
.chart { display: grid; gap: .35rem; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 5.5rem; padding-top: .25rem; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; height: calc(var(--h) * 1%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--dot); }
.bars i[data-peak] { background: var(--green); }
.bars-key { display: flex; justify-content: space-between; gap: 3px; font: 500 .75rem/1.2 var(--data); color: var(--ink-2); }
.bars-key.months span { flex: 1; text-align: center; }
.ages { display: grid; gap: .45rem; }
.agebar, .agekey { display: flex; gap: 3px; }
.agebar { height: .7rem; }
.agebar i, .agekey span { flex: var(--w) 1 0; min-width: 0; }
.agebar i { border-radius: 999px; background: var(--green-2); }
.agebar i:nth-child(3) { background: var(--green); }
.agekey { font-size: .75rem; line-height: 1.3; color: var(--ink-2); }
.agekey span { display: grid; }
.agekey b { font-size: .875rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Screen 2: the story */
.scene { scroll-margin-top: var(--bar-h); border-top: 1px solid var(--line); }
.stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2rem, 6vh, 4rem); }
.steps { display: grid; gap: 2.75rem; min-width: 0; }
.step { display: grid; gap: .9rem; align-content: start; max-width: 30rem; }
.step > p { color: var(--ink-2); }
.count { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: .25rem; }
.count div { display: grid; gap: .15rem; }
.count b { font: 700 clamp(2rem, 4vw, 2.9rem)/1 var(--data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count span { max-width: 13.5rem; font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
.mapcol { position: relative; display: grid; gap: .6rem; justify-items: end; min-width: 0; }
.mapbox { width: 100%; max-width: 38rem; aspect-ratio: 1; -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%); }
.mapbox svg { display: block; width: 100%; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .8125rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.lg { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot); }
.lg.same { background: var(--green); }
.lg.sq { border-radius: 3px; background: var(--sheet); border: 1.5px solid var(--ink); }
.streets line, .streets path { fill: none; stroke: var(--street); stroke-linecap: round; }
.streets .major { stroke-width: 8; }
.streets .minor { stroke-width: 2.5; }
.ring { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.ring-fill { fill: var(--mark); opacity: calc(var(--people, 1) * .7); }
.ring-label, .inst text { font: 600 13px var(--data); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.ring-label { opacity: var(--ringp, 1); }
.fd { fill: var(--dot); opacity: clamp(0, calc((var(--food, 1) * 1.08 - var(--t)) * 14), 1); }
.fd.same { fill: var(--green); }
.inst { opacity: clamp(0, calc((var(--people, 1) - var(--t)) * 8), 1); }
.inst rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; rx: 3px; }
.inst path { fill: none; stroke: var(--ink); stroke-width: 2; }
.pin-halo { fill: var(--mark); }
.pin-dot { fill: var(--green); }

.sheet { width: 100%; max-width: 31rem; display: grid; gap: .6rem; margin-top: 1rem; padding: 1rem 1.1rem 1.1rem; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tbl th { padding: .4rem .45rem; text-align: right; border-bottom: 1px solid var(--line); font: 600 .75rem/1.3 var(--data); color: var(--ink-2); }
.tbl td { padding: .5rem .45rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl th:first-child, .tbl td:first-child { text-align: left; white-space: normal; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.you td, .tbl tr[data-you] td { background: var(--soft); font-weight: 600; }
.tbl tbody td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tbl tbody td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.bar { display: block; height: 5px; margin: 4px 0 0 auto; width: calc(var(--w) * 1%); min-width: 3px; border-radius: 999px; background: var(--dot); }
.you .bar { background: var(--green); }
.says { display: grid; gap: .1rem; font-size: .875rem; }
.says p { margin-inline: -.5rem; padding: .2rem .5rem; border-radius: var(--r-sm); }
.cal { width: 100%; max-width: 15rem; display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.cal i { aspect-ratio: 1; background: var(--well); border-radius: 3px; }
.cal i[data-day="crowd"] { background: var(--green); }
.cal i[data-day="today"] { background: var(--sheet); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; font-size: .9rem; }
.rows li { margin-inline: -.5rem; padding: .5rem; border-radius: var(--r-sm); background: linear-gradient(var(--line), var(--line)) no-repeat .5rem 0 / calc(100% - 1rem) 1px; }
.rows .when { font: 600 .8125rem var(--data); margin-right: .5rem; font-variant-numeric: tabular-nums; }

/* Screen 3: why trust it */
.scene-trust { scroll-margin-top: var(--bar-h); border-top: 1px solid var(--line); }
.trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 12vh, 7rem); }
.story { display: grid; gap: 1.2rem; max-width: 32rem; }
.story p { color: var(--ink-2); }
.rules { display: grid; gap: clamp(2.5rem, 13vh, 7.5rem); min-width: 0; }
.rule { display: grid; gap: .8rem; max-width: 34rem; }
.rule h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
.slip { display: grid; gap: .4rem; padding: 1rem 1.15rem; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.slip.hatch { border: 1px dashed var(--line-strong); background: var(--hatch), var(--sheet); }
.close .inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; padding-block: clamp(3rem, 10vh, 6rem); border-top: 1px solid var(--line); }
.close h2 { max-width: 17ch; }

/* Preview screen: page one of a Report, with the order beside it */
.pv .inner { padding-bottom: clamp(3rem, 9vh, 5rem); }
.pv-top { display: grid; gap: .65rem; padding-block: clamp(.5rem, 3vh, 1.75rem) 1.5rem; border-bottom: 1px solid var(--line); }
.pv-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; font-size: .9375rem; color: var(--ink-2); }
.pv-loading { display: grid; gap: .6rem; padding-block: 2.5rem 30vh; font-size: 1.05rem; }
.pv-loading li { list-style: none; display: flex; align-items: center; gap: .65rem; color: var(--ink-2); opacity: .5; transition: opacity .3s ease, color .3s ease; }
.pv-loading li::before { content: ""; width: 1.05rem; height: 1.05rem; border: 2px solid var(--line-strong); border-radius: 50%; transition: background .3s ease, border-color .3s ease; }
.pv-loading li[data-state="done"] { opacity: 1; color: var(--ink); font-weight: 500; }
.pv-loading li[data-state="done"]::before { background: var(--green) var(--check) center / 70% no-repeat; border-color: var(--green); }
.pv-loading ul { margin: 0; padding: 0; display: grid; gap: .6rem; }
.pv-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.7fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); padding-top: 1.75rem; }
.pv-main { display: grid; gap: 2.4rem; min-width: 0; }
.blk { display: grid; gap: .9rem; }
.blk h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -.015em; }
.facts { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; }
.facts div { display: grid; gap: .2rem; }
.facts b { font: 700 1.9rem/1.05 var(--data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.facts span { font-size: .8125rem; color: var(--ink-2); }
.pv-side { min-width: 0; position: sticky; top: calc(var(--bar-h) + 1rem + env(safe-area-inset-top, 0px)); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.order { display: grid; gap: 1.1rem; padding: 1.35rem; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.order h2 { font-size: 1.45rem; letter-spacing: -.015em; }
.tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--soft); color: var(--green); font: 700 .8125rem/1.3 var(--data); font-variant-numeric: tabular-nums; }
.inside { list-style: none; margin: 0; padding: 0; display: grid; font-size: .9375rem; }
.inside li { display: flex; justify-content: space-between; gap: 1rem; margin-inline: -.5rem; padding: .34rem .5rem; border-radius: var(--r-sm); background: linear-gradient(var(--line), var(--line)) no-repeat .5rem 0 / calc(100% - 1rem) 1px; }
.inside li span { font: 500 .8125rem/1.8 var(--data); color: var(--ink-2); white-space: nowrap; }
ui-field { display: grid; gap: .45rem; min-width: 0; }
ui-field .label { color: var(--ink); }
ui-field-error { display: block; }
.err { color: var(--bad); font-size: .8125rem; }
.scroll { overflow-x: auto; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--well); border-radius: var(--r); }
.seg ui-segmented-control-item { padding: .55rem .5rem; border-radius: calc(var(--r) - 4px); text-align: center; font-size: .9375rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.seg ui-segmented-control-item:hover { color: var(--ink); }
.seg ui-segmented-control-item[data-checked] { background: var(--knob); color: var(--green); box-shadow: var(--shadow); }
.seg ui-segmented-control-item:focus-visible { outline-offset: -2px; }
.field { width: 100%; min-height: 2.875rem; padding: .7rem .85rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); font: 500 1rem var(--body); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.field::placeholder { color: var(--ink-2); font-weight: 400; }
.field:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--soft); }
.field[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.done { display: grid; gap: .9rem; }
.track { list-style: none; margin: 0; padding: 0; display: grid; }
.track li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; font-size: .9375rem; color: var(--ink-2); }
.track li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; border: 2px solid var(--line-strong); border-radius: 50%; }
.track li[data-state="done"] { color: var(--ink); font-weight: 500; }
.track li[data-state="done"]::before { background: var(--green) var(--check) center / 70% no-repeat; border-color: var(--green); }
.buybar { position: fixed; inset: auto 0 0; z-index: 15; display: none; padding-block: .65rem calc(.65rem + env(safe-area-inset-bottom, 0px)); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.buybar .cta { width: 100%; }

/* Free page pictures */
.axis { position: relative; height: 1.15rem; font: 500 .75rem/1 var(--data); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: .3rem; transform: translateX(-50%); white-space: nowrap; }
.ratewrap { max-width: 22rem; padding-inline: .3rem; }
.ratebar { position: relative; height: .65rem; border-radius: 999px; background: var(--well); overflow: hidden; }
.ratebar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); border-radius: 999px; background: var(--green); }
.duo { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 1.25rem 2rem; }
.fig { margin: 0; display: grid; gap: .5rem; }
.fig svg { display: block; width: 100%; max-width: 17rem; }
[data-mark="ring"] { fill: none; stroke: var(--line); stroke-width: 1.5; }
[data-mark="ring"][data-outer] { stroke: var(--line-strong); stroke-dasharray: 3 5; }
[data-mark="ring-label"] { font: 500 10px var(--data); fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
[data-mark="place"] { fill: var(--dot); }
[data-mark="rival"] { fill: var(--green); }
[data-mark="rival-number"] { font: 700 11px var(--data); fill: var(--on-green); }
.closebox { display: grid; gap: .5rem; min-width: 0; }
[data-mark="close-row"], .caxis { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 4.6rem; align-items: center; gap: .7rem; font-size: .875rem; margin-inline: -.5rem; padding-inline: .5rem; }
[data-mark="close-row"] { border-radius: var(--r-sm); }
.caxis .axis { grid-column: 2; }
[data-mark="close-row"][data-you] { font-weight: 650; }
.nb { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .35rem; border-radius: 50%; background: var(--green); font: 700 .7rem/1 var(--data); color: var(--on-green); vertical-align: 1px; }
.ctrack { position: relative; height: 1.7rem; background: linear-gradient(var(--line), var(--line)) no-repeat 0 50% / 100% 2px; }
.ctrack::before { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--x) * 1%); border-radius: 999px; background: var(--dot); }
.ctrack i { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px var(--paper); }
[data-mark="close-row"][data-you] .ctrack::before, [data-mark="close-row"][data-you] .ctrack i { background: var(--green); }
.ctime { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.units { display: flex; flex-wrap: wrap; gap: 4px; max-width: 27rem; }
.units i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green-2); }
.pv .cal { max-width: 19rem; }
.lg.key-hol { border-radius: 3px; background: var(--green); }
.lg.key-today { border-radius: 3px; background: var(--sheet); outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.nline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; max-width: 33rem; }
.node { display: grid; gap: .2rem; }
.node b { font: 700 1.9rem/1.05 var(--data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.node span { font-size: .8125rem; color: var(--ink-2); }
.gapbox { padding: .6rem .7rem; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--hatch), var(--sheet); font: 600 .75rem/1.35 var(--data); font-style: normal; text-align: center; color: var(--ink-2); }
.paids { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: .75rem; }
/* A paid tile opens in place, like the contents card: its front and a small sample share one cell. */
.paid { min-width: 0; display: grid; overflow: clip; background: var(--sheet); border: 1px dashed var(--line-strong); border-radius: var(--r); transition: border-color .2s ease; }
.paid > ui-button, .flip-back { grid-area: 1 / 1; min-width: 0; }
.paid > ui-button { display: grid; }
.flip-front { display: grid; grid-template-rows: 1fr auto auto; gap: .6rem; width: 100%; padding: .85rem .95rem .9rem; border: 0; border-radius: inherit; background: none; text-align: left; }
.flip-front b { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.flip-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .15rem .75rem; }
.tagp { font: 600 .75rem/1.3 var(--data); color: var(--green); }
.tagp.see { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); transition: color .15s ease; }
.tagp.see .chev { width: .375rem; height: .65rem; }
.flip-back { display: grid; gap: .5rem; align-content: start; padding: .5rem .95rem .85rem; }
.flip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .5rem; margin-left: -.55rem; }
.flip-back .bars { height: 2.75rem; }
.paid[data-open] { border-color: var(--line); }
.paid[data-open] > ui-button, .paid:not([data-open]) > .flip-back { visibility: hidden; }
.paid[data-open] > ui-button { transform: translateX(-100%); }
.paid:not([data-open]) > .flip-back { transform: translateX(100%); }
.flip-front:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  .paid:not([data-open]):hover { border-color: var(--green-2); }
  .flip-front:hover .see, .flip-front:hover .chev { color: var(--green); }
  .flip-front:hover .chev { transform: translateX(2px); }
}
.shape { display: block; height: 2.6rem; }
/* What the tile samples are drawn with. */
.spark { display: block; width: 100%; max-width: 17rem; height: 2.75rem; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark circle { fill: var(--green); stroke: var(--sheet); stroke-width: 2; }
.rank { display: flex; gap: 3px; height: 1.3rem; }
.rank i { flex: 1; border-radius: 4px; background: var(--well); }
.rank i[data-you] { background: var(--green); }
.late { display: flex; flex-wrap: wrap; gap: 5px; }
.late i { width: .75rem; height: .75rem; border-radius: 50%; background: var(--dot); }
.late i[data-late] { background: var(--green); }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; font-size: .8125rem; line-height: 1.35; }
.mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 .6rem; margin-inline: -.4rem; padding: .15rem .4rem; border-radius: 6px; }
.mini li > span:nth-child(2):not(.tag) { color: var(--ink-2); }
.mini li b { font-variant-numeric: tabular-nums; }
.mini .bar { grid-column: 1 / -1; margin: 2px auto 0 0; }
.mini .tag { padding: .05rem .45rem; font-size: .6875rem; }
.mini.events li { display: block; }
.mini.events .when { margin-right: .45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.shape i { display: block; background: var(--hatch); border: 1px solid var(--line-strong); border-radius: 4px; }
.sh-line { border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); background: var(--hatch); border-radius: 0 0 0 4px; }
.sh-heat { background: repeating-linear-gradient(0deg, var(--sheet) 0 2px, transparent 2px 25%), repeating-linear-gradient(90deg, var(--sheet) 0 2px, transparent 2px 14.2857%), var(--hatch); border: 1px solid var(--line-strong); border-radius: 6px; }
.sh-rank { height: 1.3rem; margin-block: .65rem; background: repeating-linear-gradient(90deg, var(--sheet) 0 2px, transparent 2px 6.25%), var(--hatch); border: 1px solid var(--line-strong); border-radius: 999px; }
.sh-bars { display: grid; gap: 4px; align-content: center; }
.sh-bars i { height: .6rem; border-radius: 999px; }
.sh-bars i:nth-child(1) { width: 78%; } .sh-bars i:nth-child(2) { width: 62%; } .sh-bars i:nth-child(3) { width: 70%; }
.sh-bars.alt i:nth-child(1) { width: 100%; } .sh-bars.alt i:nth-child(2) { width: 64%; } .sh-bars.alt i:nth-child(3) { width: 38%; }
.sh-pod { display: flex; align-items: flex-end; gap: 4px; max-width: 9rem; }
.sh-pod i { flex: 1; border-bottom: 0; }
.sh-pod i:nth-child(1) { height: 68%; } .sh-pod i:nth-child(2) { height: 100%; } .sh-pod i:nth-child(3) { height: 42%; }
.sh-seg { display: flex; gap: 3px; height: 1.3rem; margin-block: .65rem; }
.sh-seg i:nth-child(1) { width: 22%; } .sh-seg i:nth-child(2) { width: 34%; } .sh-seg i:nth-child(3) { width: 28%; } .sh-seg i:nth-child(4) { width: 16%; }

/* Footer */
footer { background: var(--sheet); color: var(--ink); border-top: 1px solid var(--line); }
footer .inner { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vh, 4rem) 1.5rem; }
.fgrid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.6fr)); gap: 2rem; }
.fcol { display: grid; gap: .5rem; align-content: start; min-width: 0; font-size: .9375rem; }
.fbrand p { max-width: 25rem; color: var(--ink-2); }
.fcol .linkbtn { justify-self: start; color: var(--ink); text-decoration: none; }
.fcol .linkbtn:hover { color: var(--green); text-decoration: underline; }
.sel { user-select: all; -webkit-user-select: all; }
.fbot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }

/* Portal panel */
.soon { margin: 0; width: min(22rem, calc(100vw - 32px)); display: grid; gap: .7rem; padding: 1.25rem; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transition: opacity .15s ease, transform .15s ease; }
.soon[data-starting-style], .soon[data-ending-style] { opacity: 0; transform: translateY(-4px); }
.soon h3 { font-size: 1.35rem; font-weight: 700; }
.soon p { color: var(--ink-2); }
.soon .cta { justify-self: start; }

/* Marks: pointing at one lights everything in its figure that stands for the same thing, and the caption
   says what it is (marks.ts sets data-lit and data-live). */
.cal i[data-key] { cursor: pointer; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color var(--quick); }
.cal i[data-key][data-lit] { outline-color: var(--ink); }
.rows li, .inside li, .says p, .tally li, .mini li, [data-mark="close-row"], .tbl td { transition: background-color var(--quick); }
/* Rows of data answer the pointer with a soft background, where there is a pointer to answer. */
@media (hover: hover) {
  .rows li:hover, .inside li:hover, .says p:hover, .tally li:hover, .mini li:hover, [data-mark="close-row"]:hover, .tbl tbody tr:hover td { background-color: var(--hover); }
  .tbl tbody tr.you:hover td, .tbl tbody tr[data-you]:hover td { background-color: var(--mark); }
}
[data-mark="rival"], [data-mark="rival-number"], .pin-halo, .fd.same { transition: stroke var(--quick), fill var(--quick); }
.rows li[data-lit], [data-mark="close-row"][data-lit] { background-color: var(--soft); }
.tbl tbody tr[data-lit] td { background-color: var(--soft); }
.tbl tbody tr[data-you][data-lit] td, .tbl tbody tr.you[data-lit] td { background-color: var(--mark); }
[data-mark="rival"], .pin-halo { stroke: transparent; stroke-width: 2.5px; }
[data-mark="rival"][data-lit], .pin-halo[data-lit] { stroke: var(--ink); }
svg [data-key] { cursor: pointer; }
/* A rival's dot on the map carries a wide unseen edge, so a finger can find it; lit, the edge shows as a halo. */
.fd.same { stroke: transparent; stroke-width: 16px; paint-order: stroke; cursor: pointer; }
.fd.same[data-lit] { stroke: var(--mark); }
/* The label that pops up at a mark (marks.ts places it above the mark, or below near the screen's top). */
.tip { position: fixed; left: 0; top: 0; z-index: 40; display: grid; gap: .05rem; max-width: min(17rem, calc(100vw - 16px)); padding: .45rem .7rem .5rem; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 .8125rem/1.3 var(--body); box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px) scale(.97); transform-origin: var(--caret, 50%) 100%; transition: opacity var(--quick), transform var(--quick), translate .18s var(--push-ease), visibility 0s linear .15s; }
.tip b { font-weight: 700; }
.tip span { opacity: .78; }
.tip::after { content: ""; position: absolute; left: var(--caret, 50%); top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: inherit; rotate: 45deg; }
.tip[data-below] { transform-origin: var(--caret, 50%) 0; transform: translateY(-4px) scale(.97); }
.tip[data-below]::after { top: 0; }
.tip[data-show] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--quick), transform var(--quick), translate .18s var(--push-ease), visibility 0s; }
.tip[data-snap] { transition: none; }

/* Sliders: a visitor tries a rule instead of reading it. The library places the thumb and the fill. */
ui-slider { display: grid; gap: .3rem; min-width: 0; }
ui-slider-control { display: flex; align-items: center; height: 1.75rem; padding-inline: .625rem; cursor: pointer; touch-action: pan-y; }
ui-slider-track { position: relative; flex: 1; height: .375rem; border-radius: 999px; background: var(--well); }
ui-slider-indicator { height: 100%; border-radius: 999px; background: var(--green); }
ui-slider-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--knob); border: 1px solid var(--line-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
ui-slider-thumb:has(:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.slip .try { display: grid; gap: .55rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px dashed var(--line-strong); }
.slip .try .label b { font-variant-numeric: tabular-nums; }
.known { display: flex; gap: 5px; }
.known i { flex: 1; max-width: 2.25rem; height: .75rem; border: 1px dashed var(--line-strong); border-radius: 4px; transition: background-color .2s ease, border-color .2s ease; }
.known i[data-known] { border-color: transparent; background: var(--dot); }
[data-enough] .known i[data-known] { background: var(--green); }
.verdict { font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: color .2s ease; }
[data-enough] .verdict { color: var(--green); }
.samples { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }

/* Scroll story, only when motion is welcome. Without it every block stays visible in flow. */
html.pin .scene { height: 540vh; }
html.pin .scene > .inner { height: 100%; }
html.pin .stage { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); height: calc(100svh - var(--bar-h)); padding-block: clamp(1rem, 3vh, 2.5rem); }
html.pin .mapbox { max-width: min(100%, calc(100svh - var(--bar-h) - 6.5rem)); }
html.pin .steps { gap: 0; }
html.pin .step { grid-area: 1 / 1; opacity: 0; transform: translateY(1.25rem); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
html.pin .step[data-active] { opacity: 1; transform: none; pointer-events: auto; }
html.pin .sheet { position: absolute; width: auto; max-width: none; margin: 0; opacity: 0; transform: translateY(60%) rotate(3deg); pointer-events: none; transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, translate .2s ease, z-index .18s step-end; }
/* A covered sheet comes to the front when pressed (story.ts sets data-front); it lifts a little to say so. */
html.pin .sheet { z-index: 0; }
html.pin .sheet[data-front] { z-index: 1; }
@keyframes lift { 45% { translate: 0 -14px; } }
html.motion.pin .sheet[data-front] { animation: lift .4s var(--push-ease); }
@media (hover: hover) and (min-width: 861px) {
  html.pin .sheet[data-past]:not([data-front]) { cursor: pointer; }
  html.pin .sheet[data-past]:not([data-front]):hover { translate: 0 -6px; }
}
html.pin .sheet[data-active] { opacity: 1; pointer-events: auto; }
html.pin .s-rivals { left: 0; right: 10%; top: 4%; }
html.pin .s-rivals[data-active] { transform: rotate(-1.4deg); }
html.pin .s-cal { left: 9%; right: 0; top: 21%; }
html.pin .s-cal[data-active] { transform: rotate(1deg); }
html.pin .s-work { left: 3%; right: 5%; top: 38%; }
html.pin .s-work[data-active] { transform: rotate(-.7deg); }
html.motion .story { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12vh); }
html.motion .rules { padding-bottom: 14vh; }
html.motion .rule { opacity: .28; transform: translateY(1.5rem); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.motion .rule[data-active] { opacity: 1; transform: none; }
html.motion h1 mark { animation: swipe .8s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
/* The card's views change over: the one leaving fades quickly and slides a little, the one arriving follows. */
/* A view that leaves slides out and then stops being visible; the one that arrives slides in beside it. */
html.motion .peek-list, html.motion .peek-page, html.motion .peek-body, html.motion .paid > ui-button, html.motion .flip-back { transition: transform var(--push-t) var(--push-ease), visibility 0s linear var(--push-t); }
html.motion .toc:not([data-open]) .peek-list, html.motion .toc[data-open] .peek-page, html.motion .peek-body[data-pos="active"], html.motion .paid:not([data-open]) > ui-button, html.motion .paid[data-open] > .flip-back { transition: transform var(--push-t) var(--push-ease), visibility 0s; }
/* While the page is closed its sections settle without moving, so opening shows the right one at once. */
html.motion .toc:not([data-open]) .peek-body { transition: none; }
/* A new screen (home, a Preview Report, an Order) fades in; the very first one just appears. */
@keyframes view-in { from { opacity: 0; } }
html.motion[data-ready] main:not([hidden]) { animation: view-in .3s ease; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@keyframes swipe { from { background-size: 0% 46%; } to { background-size: 100% 46%; } }

@media (max-width: 860px) {
  .hero-grid, .stage, .trust, .pv-body { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { align-items: start; gap: 2.5rem; }
  .toc { transform: none; }
  .mapcol { order: -1; justify-items: center; }
  .mapbox { max-width: 24rem; }
  .rules { gap: 2.5rem; }
  .pv-side { position: static; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  html[data-view="preview"] .buybar[data-visible] { display: block; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbrand, .fcontact { grid-column: 1 / -1; }
  html.pin .stage { grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: .9rem; }
  html.pin .mapcol { min-height: 24rem; align-content: start; }
  html.pin .mapbox { max-width: min(100%, 21rem); }
  html.pin .legend { display: none; }
  html.pin .s-rivals, html.pin .s-cal, html.pin .s-work { left: 0; right: 0; top: 0; }
  html.pin .s-rivals[data-active], html.pin .s-cal[data-active], html.pin .s-work[data-active] { transform: rotate(-.5deg); }
  html.pin .sheet[data-past] { opacity: 0; }
  html.pin .step p { font-size: 1rem; }
  html.motion .story { position: static; }
  html.motion .rules { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .nav-links a, .long { display: none; }
  .short { display: inline; }
  .go { padding: 0 1rem; }
  .brand { font-size: 1.0625rem; }
  .nav-links { gap: .5rem; }
  .pv .tbl { font-size: .8125rem; }
  .pv .tbl th, .pv .tbl td { padding-inline: .28rem; }
  html[data-view="preview"] .soon-btn, html[data-view="order"] .soon-btn, html[data-view="orders"] .soon-btn { display: none; }
  .nav-links a.nav-orders { display: inline; }
  .soon-btn { padding-right: .8rem; }
  .soon-btn small { display: none; }
  .fgrid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .fcol .sel { overflow-wrap: anywhere; }
}

@media (max-width: 374px) {
  .nav { gap: .5rem; }
  .nav-links { gap: .35rem; }
  .nav-links .soon-btn { display: none; } /* the footer keeps "Portal (soon)" */
  .brand { font-size: 1rem; }
}

/* States the live site adds: notices, refusals, the Order page */
.notice { display: grid; gap: .5rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); font-size: .9375rem; }
.notice.bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink); }
.notice.wait { border-style: dashed; }
.notice .cta { justify-self: start; }
.inline-form { display: flex; flex-wrap: wrap; align-items: start; gap: .5rem; max-width: 30rem; }
.inline-form ui-field { flex: 1 1 14rem; }
.ov { padding-block: clamp(1.5rem, 6vh, 4rem); }
.ov .inner { display: grid; justify-items: start; gap: 1.5rem; max-width: 34rem; }
.ov .order { width: 100%; }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; width: 100%; }
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; padding: 1rem 1.15rem; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.orow:hover { border-color: var(--green); box-shadow: var(--shadow); }
.orow b { font-weight: 600; overflow-wrap: anywhere; }
.orow .fine { grid-column: 1 / -1; }
.track li[data-state="now"] { color: var(--ink); }
.track li[data-state="now"]::before { border-color: var(--green); box-shadow: 0 0 0 4px var(--soft); }
.pv-top .refusal { max-width: 40rem; }
[aria-busy="true"] { opacity: .6; pointer-events: none; }
.legal .inner { display: grid; gap: 1rem; max-width: 46rem; padding-block: clamp(1.5rem, 5vh, 3rem); }
.legal h1 { font-size: clamp(2.1rem, 4.7vw, 3.05rem); }
.legal h2 { font-size: 1.25rem; margin-top: .75rem; }
.legal p, .legal li { max-width: 65ch; }
.draft { padding: .6rem .85rem; border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: .875rem; color: var(--ink-2); }
a.linkbtn { color: var(--green); }
.cal i[data-day="unknown"], .lg.key-unknown { border-radius: 3px; background: var(--hatch), var(--sheet); outline: 1px dashed var(--line-strong); outline-offset: -1px; }