/* raredisease.com — Visibility Grader
   The five handoff screens (11a–11e) as one page with four phases. Every value is a
   design-system token or a literal the handoff README gives (pill 44px, 19px serif pills,
   the 7% warm-brown ghost tint, the sun and herd geometry). Layouts are authored at
   1280px and reflow below 1024 and 640 as the README describes. */

/* The handoff asks for --size-display-3 on phones; the token set stops at display-2,
   so it is defined here, one step below. Move it into tokens/typography.css when agreed. */
:root{--size-display-3:clamp(2rem,8.5vw,2.75rem)}

[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--gutter-page);top:-100px;z-index:60;padding:var(--space-xs) var(--space-md);background:var(--surface-raised);color:var(--text-body);border-radius:var(--radius-pill);box-shadow:var(--shadow-raised);border-bottom:none}
.skip-link:focus{top:var(--space-xs)}
body{min-height:100svh;display:flex;flex-direction:column;background:var(--surface-page)}
main{position:relative;z-index:1;flex:0 0 auto}

/* ── Type helpers ─────────────────────────────────────────────────────── */
/* Headings and the sent message receive focus for screen readers only; no ring on them. */
.display:focus-visible,.gate__sent:focus-visible{box-shadow:none;outline:none}
.display{font:var(--weight-regular) var(--size-display-2)/var(--lh-display) var(--font-serif-display);letter-spacing:var(--ls-display);color:var(--ink-000);max-width:16ch;margin:0;text-wrap:balance;outline:none}
/* The banded word carries the only zebra at display size; below 44px it is plain italic. */
.display .rd-zebra::after{bottom:0}
@media (max-width:640px){.display .rd-zebra>span{background:none;color:inherit}.display .rd-zebra::after{display:none}}
.display--preview{max-width:18ch}
.lead{font:var(--type-lead);color:var(--text-muted);max-width:40ch;margin:0}
.lead--preview{max-width:46ch}
.lead em{font-style:italic}
.small{font:var(--type-body-sm)}
.muted{color:var(--text-muted)}
.caption{font:var(--type-caption);color:var(--text-subtle);margin:0}
.rd-eyebrow{margin:0}

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;padding:22px var(--gutter-page);gap:var(--space-lg)}
.wordmark{display:inline-flex;align-items:baseline;border-bottom:none;color:var(--text-heading)}
.wordmark__word{font:var(--weight-regular) 20px/1 var(--font-wordmark);letter-spacing:-.015em;color:var(--text-heading)}
.wordmark__word em{font-weight:var(--weight-light);font-style:italic}
.wordmark__tld{font:var(--weight-regular) 12px/1 var(--font-wordmark);letter-spacing:-.015em;color:var(--text-heading)}
.wordmark:hover{color:var(--text-heading)}
.hdr__action{margin-left:auto;appearance:none;background:none;border:0;padding:2px 0;font:var(--type-body-sm);color:var(--text-muted);cursor:pointer;border-bottom:1px solid transparent;transition:color var(--dur-quick) var(--ease-drift),border-color var(--dur-quick) var(--ease-drift)}
.hdr__action:hover{color:var(--text-heading);border-bottom-color:currentColor}
.hdr__tag{font:var(--type-caption);color:var(--text-muted);margin-left:14px;padding-left:14px;border-left:1px solid var(--line-soft);white-space:nowrap}

/* ── Phases ───────────────────────────────────────────────────────────── */
.phase{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;width:100%;box-sizing:border-box}
.phase__head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center}
/* The landing and the scan fit the viewport: the content takes what it needs and the scene fills
   the rest (see app.js layoutScene). Paddings therefore scale with the viewport height. */
.phase--landing{padding:clamp(40px,9vh,160px) var(--gutter-page) clamp(24px,4vh,64px);gap:40px}
.phase--scanning{padding:clamp(28px,6vh,120px) var(--gutter-page) clamp(20px,3vh,56px);gap:clamp(20px,3.5vh,36px)}
.phase--preview{padding:96px var(--gutter-page) 64px;gap:40px;max-width:1152px;margin:0 auto;justify-items:stretch;text-align:left}
.phase--preview .phase__head{text-align:center}

/* ── Landing: one input, three pills ──────────────────────────────────── */
.domain-form{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center;width:100%}
.domain{height:44px;width:100%;max-width:420px;box-sizing:border-box;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-page);font:var(--type-body);color:var(--text-heading);text-align:center;outline:none;transition:border-color var(--dur-quick) var(--ease-drift),box-shadow var(--dur-quick) var(--ease-drift)}
.domain::placeholder{color:var(--text-subtle)}
.domain:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-pill)}
.domain[aria-invalid="true"]{border-color:var(--status-urgent)}
.hint{font:var(--type-caption);color:var(--text-muted);margin:-28px 0 0;max-width:46ch}
.hint.is-error{color:var(--status-urgent)}
.pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pill{appearance:none;height:44px;padding:0 22px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:transparent;color:var(--text-heading);font:var(--weight-medium) 16px/1 var(--font-sans-ui);cursor:pointer;transition:background-color var(--dur-quick) var(--ease-drift),color var(--dur-quick) var(--ease-drift),border-color var(--dur-quick) var(--ease-drift),transform var(--dur-quick) var(--ease-drift),box-shadow var(--dur-instant) var(--ease-drift)}
.pill:hover{background:rgba(23,34,43,.06);transform:translateY(-2px)}
.pill:active{transform:translateY(1px);box-shadow:var(--shadow-inset-well)}
.pill[aria-pressed="true"]{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}
.pill[aria-pressed="true"]:hover{filter:brightness(.92)}
.pill:focus-visible{border-radius:var(--radius-pill)}

/* ── Scanning: the checklist and the progress line ────────────────────── */
.checks{width:100%;max-width:560px;margin:0;padding:0;list-style:none;display:grid;gap:2px;text-align:left}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-hairline);font:var(--type-body);color:var(--text-muted);transition:color var(--dur-base) var(--ease-drift)}
.check__mark{width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:border-color var(--dur-base) var(--ease-drift),background-color var(--dur-base) var(--ease-drift)}
.check__mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--surface-page);opacity:0;transition:opacity var(--dur-base) var(--ease-drift)}
.check[data-state="done"],.check[data-state="active"]{color:var(--text-heading)}
.check[data-state="done"] .check__mark{border-color:var(--accent);background:var(--accent)}
.check[data-state="done"] .check__mark::before{opacity:1}
.check[data-state="active"] .check__mark{border-color:var(--accent)}
/* The active check holds a steady Night Sky dot inside its ring: no looping motion. */
.check[data-state="active"] .check__mark::before{width:8px;height:8px;background:var(--accent);opacity:1}
.progress{width:100%;max-width:560px;display:grid;gap:10px}
.progress__track{height:4px;background:var(--surface-sunken);border-radius:999px;overflow:hidden}
/* Night Sky fill: the one Sunrise horizon on this view is the line in the sky below. */
.progress__fill{width:0;height:100%;background:var(--accent);border-radius:999px;transition:width var(--dur-slow) var(--ease-drift)}
.progress__caps{display:flex;justify-content:space-between;gap:var(--space-md);font:var(--type-caption);color:var(--text-subtle);text-align:left}

/* ── Preview: the report card ─────────────────────────────────────────── */
.report-card{padding:32px 36px;border:1px solid var(--line-hairline);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-rest);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;align-items:start}
.report-card__intro{display:grid;gap:14px;justify-items:start}
.report-card__tag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.report-card__title,.gate__title{margin:0;font:var(--type-h3);color:var(--text-heading)}
.report-card__intro .small{margin:0;max-width:40ch}
.report-card__rows{display:grid}
.card-row{padding:10px 0;border-bottom:1px solid var(--line-hairline);font:var(--type-body-sm);color:var(--text-body)}
.card-row:last-child{border-bottom:0}
.card-row strong{color:var(--text-heading);font-weight:var(--weight-semibold)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-heading);font:var(--type-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--good{background:var(--status-good-soft);color:var(--status-good)}
.badge--attention{background:var(--status-attention-soft);color:var(--status-attention)}
.badge--info{background:var(--status-info-soft);color:var(--status-info)}

/* ── Preview: the lead form panel ─────────────────────────────────────── */
.gate{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:center;padding:40px;background:var(--surface-sunken);border-radius:var(--radius-organic)}
.gate__intro{display:grid;gap:12px;justify-items:start}
.gate__intro .small{margin:0;max-width:40ch}
.gate__form{display:grid;gap:14px}
.field{display:grid;gap:6px;text-align:left}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field__label{font:var(--type-caption);color:var(--text-muted)}
.field__hint{font:var(--type-caption);color:var(--text-subtle);margin:0}
.field__error{font:var(--type-caption);color:var(--status-urgent);margin:0}
.input,.select{height:44px;width:100%;box-sizing:border-box;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-page);font:var(--type-body);color:var(--text-heading);outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--dur-quick) var(--ease-drift),box-shadow var(--dur-quick) var(--ease-drift)}
.input::placeholder{color:var(--text-subtle)}
.input:focus-visible,.select:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-pill)}
.input[aria-invalid="true"]{border-color:var(--status-urgent)}
.select{padding:0 40px 0 16px;cursor:pointer}
.select-wrap{position:relative;display:block}
.select-wrap::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--text-subtle);border-bottom:1.5px solid var(--text-subtle);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.btn{height:44px;width:100%;padding:0 24px;border-radius:var(--radius-pill);border:none;background:var(--accent);color:var(--text-on-accent);font:var(--weight-medium) 16px/1 var(--font-sans-ui);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background-color var(--dur-quick) var(--ease-drift),transform var(--dur-quick) var(--ease-drift),box-shadow var(--dur-quick) var(--ease-drift)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-rest)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.btn:focus-visible{border-radius:var(--radius-pill)}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.gate__sent{display:grid;gap:8px;text-align:left;outline:none;padding:4px 0}
.gate__sent-main{margin:0;font:var(--type-lead);color:var(--text-heading)}
.gate__sent .small{margin:0}
/* Honeypot for bots: off screen, never for people. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── Site footer: one line that names the company. In the flow by default; on a roomy screen it
   sits over the foot of the landing scene instead, so nothing it could cover is ever under it. */
.site-foot{padding:14px var(--gutter-page) 18px;text-align:center}
.site-foot__line{margin:0 auto;max-width:none;font:var(--type-caption);color:var(--text-muted)}
.site-foot em{font-style:italic;color:var(--text-body)}
body[data-phase="preview"] .site-foot,body[data-phase="sent"] .site-foot{padding:28px var(--gutter-page) 36px}
@media (min-width:641px) and (min-height:700px){
  body[data-phase="landing"] .site-foot{position:fixed;left:0;right:0;bottom:0;z-index:4;padding:10px var(--gutter-page);background:linear-gradient(180deg,rgba(247,241,227,0) 0%,rgba(247,241,227,.9) 50%);pointer-events:none}
  body[data-phase="landing"] .site-foot__line{pointer-events:auto}
}

/* ── The scene ────────────────────────────────────────────────────────── */
/* --s is the frame scale, --frame-top where the 480px frame sits inside the scene; both set by
   app.js layoutScene per phase. The strip is five sky tiles, so the sky fills any width. */
/* The fade from cream into the sky runs over the top of the visible scene, whatever rows of the
   frame are showing, so the edge is never hard. */
.scene{--s:1;--frame-top:0px;--tile-w:1280px;--tile-h:480px;--fade:30%;position:relative;z-index:0;overflow:hidden;pointer-events:none;flex:0 0 auto;min-height:0;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) var(--fade));mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) var(--fade))}
.scene[data-phase="landing"]{flex:1 1 auto;min-height:220px}
.scene[data-phase="scanning"]{flex:1 1 auto;min-height:160px;--fade:34%}
.scene[data-phase="preview"]{--fade:34%}
/* Tiles are whole pixels wide and overlap by one so no seam shows between them; app.js sets the
   strip position in whole pixels for the same reason. One sky per composition: Midday, the
   signature for raredisease.com. */
.scene__strip{position:absolute;left:0;top:var(--frame-top);display:flex}
.tile{position:relative;flex:0 0 auto;width:var(--tile-w);height:var(--tile-h);background:var(--grad-midday)}
.tile+.tile{margin-left:-1px}
.scene__frame{position:absolute;left:0;top:0;width:1280px;height:480px;transform:scale(var(--s));transform-origin:0 0;z-index:2}
/* The sun: the system's soft white glow, top-right of a Midday sky, partly above the frame,
   static (BrandCover places it at 62% left, above the top edge). */
.sun{position:absolute;left:58%;top:-150px;width:620px;height:620px;border-radius:50%;background:var(--sun-glow);pointer-events:none}
/* The horizon: the brand's 2px Sunrise line, with a soft glow, at the herd's hoofline. */
.horizon{position:absolute;left:-1280px;right:-1280px;top:299px;height:2px;background:var(--grad-sunrise-band);box-shadow:var(--shadow-sun);opacity:.95}
/* The herd's designed placements sat left of centre in front of the old trees; with the sky alone
   the group is shifted right so it is centred in the frame and stays in view on phones. */
.herd{position:absolute;top:0;bottom:0;left:160px;right:-160px;opacity:.22;filter:saturate(.6);transition:opacity var(--dur-scene) var(--ease-drift),filter var(--dur-scene) var(--ease-drift)}
.zebra-wrap{position:absolute}
.zebra-hit{position:absolute;inset:-8px;cursor:pointer;pointer-events:auto}
.zebra-inner{position:absolute;left:8px;right:8px;top:8px;bottom:8px}
.zebra{position:absolute;left:0;bottom:0;width:100%;height:100%;background-image:var(--alert);background-size:auto 100%;background-repeat:no-repeat;background-position:left bottom}
.drop{position:absolute;bottom:-1px;display:flex;gap:1px;animation:rd-drop 3.5s linear both}
.drop i{display:block;width:3px;height:2.5px;border-radius:50%;background:#3E2E1E;opacity:.9}

@keyframes rd-trot-r{0%{transform:translate(0,0)}12%{transform:translate(6px,-2px)}25%{transform:translate(12px,0)}37%{transform:translate(17px,-2px)}50%{transform:translate(23px,0)}62%{transform:translate(29px,-2px)}75%{transform:translate(35px,0)}87%{transform:translate(40px,-2px)}100%{transform:translate(46px,0)}}
@keyframes rd-trot-l{0%{transform:translate(0,0)}12%{transform:translate(-6px,-2px)}25%{transform:translate(-12px,0)}37%{transform:translate(-17px,-2px)}50%{transform:translate(-23px,0)}62%{transform:translate(-29px,-2px)}75%{transform:translate(-35px,0)}87%{transform:translate(-40px,-2px)}100%{transform:translate(-46px,0)}}
@keyframes rd-drop{0%{transform:translateY(-10px);opacity:0}8%{opacity:1}12%{transform:translateY(0);opacity:1}75%{opacity:1}100%{transform:translateY(0);opacity:0}}

/* ── Short screens: the scan fits a laptop display without scrolling ────── */
@media (max-height:920px){
  .phase--scanning{padding-top:clamp(16px,3vh,48px);gap:16px}
  .phase--scanning .display{font-size:var(--size-h2)}
  .phase--scanning .lead{font-size:var(--size-body)}
  .phase--scanning .phase__head{gap:6px}
  .check{padding:5px 0}
  .scene[data-phase="scanning"]{min-height:150px}
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .scene *,.check__mark::before{animation:none!important}
  .check[data-state="active"] .check__mark::before{width:8px;height:8px;border:0;background:var(--accent)}
  .herd,.progress__fill,.pill,.btn,.check,.check__mark{transition:none!important}
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .phase--preview{padding:clamp(56px,7.5vw,96px) var(--gutter-page) 64px}
  .report-card,.gate{grid-template-columns:minmax(0,1fr);gap:28px}
  .gate{padding:32px}
  .field-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .display{font-size:var(--size-display-3)}
  .hdr{padding:18px var(--gutter-page)}
  .hdr__tag{display:none}
  .phase--landing{gap:28px}
  .domain-form{gap:28px}
  .hint{margin-top:-16px}
  .report-card{padding:24px 22px}
  .gate{padding:24px 22px}
  .progress__caps{flex-direction:column;gap:4px}
}