/* ===========================================================================
   BurnCast · burncast.app

   Direction: DEEP SPACE HUD. The page is a spacecraft telemetry overlay, a
   readout floating on the void, not a document about an app. Instruments earn
   trust by showing their own scale, so nothing here is a decorative number.

   Colour is state, never decoration. Cyan is tokens, violet is the session
   clock, and green/amber/rose are the three verdicts the engine can return
   (Pace.swift). A number changes colour only because its verdict changed.

   The atmosphere (nebula + stars) is confined to the hero and sits BEHIND
   grounded panels: a surface a reading is printed on is opaque enough that no
   star ever shows through a numeral.
   =========================================================================== */

/* --- faces ---------------------------------------------------------------
   Self-hosted, latin subset only. A site whose argument is that the app makes
   no network calls has no business fetching fonts from someone else's server. */

@font-face { font-family:'Michroma'; src:url('/fonts/michroma-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/fonts/chakra-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/fonts/chakra-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/fonts/chakra-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/fonts/chakra-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'STM'; src:url('/fonts/sharetech-400.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  /* ground */
  --void:      #04060f;
  --void-lift: #070b18;
  --card:      #0a0e1c;                 /* Palette.card, dark side */
  --card-2:    #0f1527;                 /* Palette.cardRaised */

  /* type · Palette.swift's dark side. Every value verified on --void. */
  --ink:    #e6edff;   /* 16.4:1 */
  --dim:    #96a6c8;   /*  8.3:1  body prose */
  --faint:  #68789c;   /*  4.6:1  channel labels; never darker, they are text */

  /* structure */
  --hair:      rgba(140,180,255,.22);   /* Palette.edge */
  --hair-soft: rgba(140,180,255,.10);
  --track:     rgba(140,180,255,.16);   /* Palette.trackFill */
  /* Panels are a real surface now, not a 5% tint: readings sit on ground. */
  --panel:     rgba(9,13,26,.88);
  --panel-2:   rgba(13,19,36,.94);

  /* signals · the app's own semantics. Cyan is TOKENS and the brand accent;
     violet is the SESSION CLOCK. The verdict ramp is spent in exactly one
     place: the run of the token rail lying past the clock line. */
  --cy: #4fd8ff;   --vi: #a77bff;
  --gr: #4dffb0;   --am: #ffc24d;   --rd: #ff5d7a;
  --am-hot: #ff9a4d;  --rd-hot: #ff8a6e;

  --display: 'Michroma', 'Eurostile', 'Helvetica Neue', sans-serif;
  --body:    'Chakra', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'STM', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* motion · deceleration only; no bounce, no elastic */
  --e-quart: cubic-bezier(.25, 1, .5, 1);
  --e-quint: cubic-bezier(.22, 1, .36, 1);
  --e-expo:  cubic-bezier(.16, 1, .3, 1);

  --z-atmos: -2;  --z-base: 0;  --z-raised: 10;  --z-nav: 200;

  --gut: 26px;
  --mast: 62px;          /* masthead height; the sticky stage sits under it */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- atmosphere ----------------------------------------------------------
   The CSS nebula is the floor for the whole page. The WebGL canvas (stars and
   drifting cloud) is painted on top of it by app.js, and is only lit while the
   hero is on screen, and fades out as the tour begins. */

body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-atmos); pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -6%,  rgba(79,216,255,.13), transparent 62%),
    radial-gradient(760px 560px at 88%  8%,  rgba(167,123,255,.13), transparent 62%),
    radial-gradient(1100px 700px at 50% 108%, rgba(77,255,176,.06), transparent 66%);
}

#atmos {
  position: fixed; inset: 0; z-index: var(--z-atmos);
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--e-quart);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
#atmos.lit { opacity: 1; }
#atmos.off { opacity: 0; }

a { color: inherit; }
::selection { background: var(--cy); color: #04060f; }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 2px; }

/* --- shell ---------------------------------------------------------------- */

.sheet { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: var(--z-base); }

/* --- channel label -------------------------------------------------------- */


/* The instruments on this site are drawn in HTML, so the prose had never needed
   a rule for a real image. The download page shows one. */
.prose figure { margin: 26px 0; }
.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 255, .16);
}
.prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--faint);
}

.spec {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-block;
}

/* --- headings ------------------------------------------------------------- */

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

h1 {
  font-family: var(--display);
  font-size: clamp(27px, 4.4vw, 54px);
  line-height: 1.18;
  letter-spacing: .005em;
  margin: 26px 0 30px;
  max-width: 20ch;
  font-weight: 400;
}
h1.long { font-size: clamp(22px, 3.3vw, 40px); max-width: 28ch; }
h1 em { font-style: normal; color: var(--cy); }

h2 {
  font-family: var(--display);
  font-size: clamp(19px, 2.6vw, 31px);
  line-height: 1.3;
  letter-spacing: .005em;
  margin: 12px 0 18px;
  max-width: 26ch;
  font-weight: 400;
}
h2 em { font-style: normal; color: var(--cy); }

.stand {
  color: var(--dim);
  max-width: 56ch;
  font-size: 18.5px;
  line-height: 1.7;
  margin: 0 0 6px;
}
/* Copy streams in, token by token, behind a caret.

   The words are in the document the whole time; only their opacity moves. The
   hiding rule is scoped to .streaming, which nothing in this stylesheet sets --
   the script adds it, and removes it when the sentence has finished arriving.
   So a page whose JavaScript never runs, or has not run yet, shows the copy
   rather than an empty paragraph, and so does anything reading the rendered
   document mid-reveal. */
.streaming .tok { opacity: 0; }
/* A short fade rather than a hard flip. Long enough that a word arrives
   instead of appearing, short enough that it still reads as typing: the
   overlap between consecutive words is what makes the line feel continuous
   rather than stepped. */
.streaming .tok.on { opacity: 1; transition: opacity 120ms ease-out; }

.caret {
  display: inline-block; width: .5em; height: 1em; margin-left: 3px; vertical-align: -.12em;
  background: var(--cy); border-radius: 1px; animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.stand b, .stand strong { color: var(--ink); font-weight: 600; }

.lede { color: var(--dim); max-width: 66ch; margin: 0 0 20px; }
.lede b, .lede strong { color: var(--ink); font-weight: 600; }

code {
  font-family: var(--mono); font-size: .9em; color: var(--cy);
  background: rgba(79,216,255,.08); padding: 1px 6px; border-radius: 4px;
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(4,6,15,.76);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hair-soft);
}
.masthead .sheet { display: flex; align-items: center; gap: 22px; padding: 14px var(--gut); min-height: var(--mast); }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13.5px; letter-spacing: .12em;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark svg { width: 26px; height: 26px; display: block; flex: none; }
.wordmark i { font-style: normal; color: var(--cy); }

.designation { margin-left: 4px; }

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.masthead nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); text-decoration: none;
  transition: color .18s var(--e-quart);
}
.masthead nav a:hover { color: var(--cy); }
.masthead nav a.cta {
  color: var(--ink); border: 1px solid var(--hair); border-radius: 100px;
  padding: 8px 16px;
  transition: border-color .18s var(--e-quart), color .18s var(--e-quart),
              box-shadow .18s var(--e-quart);
}
.masthead nav a.cta:hover {
  color: var(--cy); border-color: rgba(79,216,255,.5);
  box-shadow: 0 0 20px rgba(79,216,255,.16);
}

/* --- buttons -------------------------------------------------------------- */

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border-radius: 100px;
  background: var(--cy); color: #04060f; border: 1px solid transparent;
  transition: transform .16s var(--e-quart), box-shadow .22s var(--e-quart),
              background-color .18s var(--e-quart);
  box-shadow: 0 0 0 rgba(79,216,255,0);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(79,216,255,.32); }
.btn:active { transform: translateY(0); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn.big { padding: 18px 32px; font-size: 13px; }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn.ghost:hover {
  border-color: rgba(79,216,255,.5); color: var(--cy);
  box-shadow: 0 0 24px rgba(79,216,255,.14);
}

.btn-note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  color: var(--faint); text-transform: uppercase;
}

/* --- sections ------------------------------------------------------------
   Padding on the top edge only. The shorthand form was here before and it
   zeroed the side gutters inherited from .sheet on every viewport under the
   1200px max-width. */

.hero  { position: relative; z-index: 0; padding-top: 0; }
.hero-copy { padding-top: clamp(56px, 8vh, 96px); }
.block { padding-top: clamp(64px, 9vw, 118px); }

/* Scanlines: a phosphor surface for the hero only, never across body copy. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* --- instrument surfaces -------------------------------------------------- */

.glass {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.flat {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
}

/* =========================================================================
   The hero stage: a menu bar, the HUD, the verdict, the remedy, all one sticky
   block that your scroll runs forward, and back, through a session.
   ========================================================================= */

.stage-wrap { height: 280vh; margin-top: 76px; }
.stage {
  position: sticky; top: calc(var(--mast) + 14px);
  display: grid; gap: 12px;
}
/* Grid items default to min-width:auto, and one no-wrap menu bar would widen
   the whole column past the viewport on a phone. */
.stage > * { min-width: 0; }

/* menu bar ------------------------------------------------------------------ */

.menubar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 32px; padding: 0 14px; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--hair-soft);
  background: rgba(22,27,44,.92);
  font-size: 13px; color: var(--dim); user-select: none;
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.mb-left { min-width: 0; overflow: hidden; }
.mb-right { flex: none; }
.mb-left .mb-app { color: var(--ink); font-weight: 600; }
.mb-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(230,237,255,.55); }
.mb-glyph { width: 15px; height: 15px; color: rgba(230,237,255,.7); }
.mb-clock { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The chip: MeterArt.swift. A rounded bar filled to tokens used, a tick where
   the clock stands, and the burn rate beside it, all tinted by severity. */
.mb-chip { display: inline-flex; align-items: center; gap: 7px; }
.mb-bar {
  position: relative; display: block; width: 30px; height: 11px; border-radius: 6px;
  background: rgba(255,255,255,.2); overflow: visible;
}
.mb-bar .mb-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 6px;
  background: #33d199; transition: width .9s var(--e-quint), background-color .4s var(--e-quart);
}
.mb-bar .mb-tick {
  position: absolute; top: -1px; bottom: -1px; left: 0; width: 1.5px; margin-left: -.75px;
  background: rgba(255,255,255,.92); transition: left .9s var(--e-quint);
}
.mb-chip em {
  font-style: normal; font-weight: 600; font-size: 13px; color: #33d199;
  font-variant-numeric: tabular-nums; transition: color .4s var(--e-quart);
}
.mb-chip.big .mb-bar { width: 44px; height: 15px; border-radius: 8px; }
.mb-chip.big em { font-size: 16px; }

/* --- the HUD: PaceRails.swift, in HTML ------------------------------------- */

.hud { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 30px); }
/* How far the scroll has run the session. */
.hud-progress { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--cy); opacity: .85; pointer-events: none; }
@keyframes chipglow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 35% { box-shadow: 0 0 0 7px rgba(255,255,255,.13); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.mb-chip { border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.mb-chip.pulse { animation: chipglow .7s var(--e-quart) 1; }

.hud-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 22px;
}
.hud-head .spec { margin-left: auto; }

.ratio {
  font-family: var(--display); font-size: clamp(36px, 6vw, 56px); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
  transition: color .5s var(--e-quart);
}
.ratio-word {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}

.rails { display: flex; align-items: flex-start; gap: 12px; }
.rail-keys, .rail-vals { display: flex; flex-direction: column; gap: 7px; flex: none; }
.rail-keys { width: 78px; }
.rail-vals { width: 54px; }
.rail-tracks { flex: 1; min-width: 0; }
.rail-pair { position: relative; display: flex; flex-direction: column; gap: 7px; }

.rail-key {
  display: flex; align-items: center; gap: 7px; height: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.rail-key i { width: 8px; height: 8px; border-radius: 1px; flex: none; background: currentColor; }

.rail-track { position: relative; height: 12px; border-radius: 3px; background: var(--track); overflow: hidden; }
.rail-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px 0 0 3px;
  background: var(--cy);
  transition: width .95s var(--e-quint), background-color .4s var(--e-quart);
}
.rail-track + .rail-track .rail-fill { background: var(--vi); }
.cyfill { background: var(--cy); } .vifill { background: var(--vi); }
.rail-hot {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  transition: left .95s var(--e-quint), width .95s var(--e-quint), background .4s var(--e-quart);
}
.critramp { background: linear-gradient(90deg, var(--rd), var(--rd-hot)); }
.rail-val {
  height: 12px; display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.rail-val.dim { color: var(--dim); }

.clockline { position: absolute; inset: -5px 0; pointer-events: none; }
.clockline i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  margin-left: -1px; background: var(--ink); border-radius: 100px;
  box-shadow: 0 0 0 1.5px var(--void);
  transition: left .95s var(--e-quint);
}

.rail-axis {
  position: relative; height: 15px; margin-top: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--faint);
}
.rail-axis .s { position: absolute; left: 0; }
.rail-axis .e { position: absolute; right: 0; }
.rail-axis .n { position: absolute; transform: translateX(-50%); color: var(--dim); transition: left .95s var(--e-quint); }

/* While the scroll drives the reading, frames are the tween. */
.hud.live .rail-fill, .hud.live .rail-hot, .hud.live .clockline i, .hud.live .rail-axis .n,
.stage.live .mb-bar .mb-fill, .stage.live .mb-bar .mb-tick { transition: none; }

.readouts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hair-soft);
}
.readouts div { display: flex; align-items: baseline; gap: 9px; }
.readouts .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.readouts .v { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; transition: color .4s var(--e-quart); }

.cy { color: var(--cy); } .vi { color: var(--vi); }
.gr { color: var(--gr); } .am { color: var(--am); } .rd { color: var(--rd); }

/* verdict strip ------------------------------------------------------------- */

.verdict-strip { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; }
.verdict-strip .dot {
  width: 8px; height: 8px; border-radius: 100px; background: var(--rd); flex: none; margin-top: 9px;
  box-shadow: 0 0 12px currentColor; color: var(--rd);
  transition: background-color .4s var(--e-quart), color .4s var(--e-quart);
}
.verdict-strip p { margin: 0; font-size: 15px; color: var(--dim); }
.verdict-strip strong { color: var(--ink); font-weight: 600; }

/* remedy row: RecommendationRow, from the popover ----------------------------- */

.remedy {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  padding: 14px 18px;
  transition: opacity .55s var(--e-quart), transform .55s var(--e-quart), visibility 0s;
}
.remedy.is-hidden { opacity: 0; transform: translateY(10px); visibility: hidden; transition-delay: 0s, 0s, .55s; }
.remedy .bulb { width: 18px; height: 18px; color: var(--cy); margin-top: 2px; }
.r-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.r-driver { margin: 3px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.r-detail { margin: 3px 0 0; font-size: 13px; color: var(--dim); line-height: 1.5; }
.cmd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.cmd {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--cy); background: rgba(79,216,255,.14); border: 1px solid transparent;
  border-radius: 4px; padding: 5px 10px;
  transition: background-color .18s var(--e-quart), border-color .18s var(--e-quart);
}
.cmd:hover { background: rgba(79,216,255,.22); }
.cmd.copied { color: var(--gr); background: rgba(77,255,176,.14); }
.cmd svg { width: 12px; height: 12px; }
.impact { font-size: 12.5px; color: var(--dim); }

.stage-cue {
  margin: 2px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; line-height: 1.5;
  text-transform: uppercase; color: var(--faint); display: flex; align-items: flex-start; gap: 12px;
  min-height: 1.5em;
}
/* The cue is the gesture being asked for: a wheel, a dot dropping through it.
   Once the scroll has begun it stops asking. The dot rides the capsule at
   the stage's progress and the wheel becomes a read-out. */
.stage-cue .wheel {
  position: relative; flex: none; width: 13px; height: 21px; margin-top: -2px;
  border: 1.5px solid rgba(140,180,255,.5); border-radius: 8px;
  transition: border-color .4s var(--e-quart);
}
.stage-cue .wheel span {
  position: absolute; left: 50%; top: 4px; width: 3px; height: 5px; margin-left: -1.5px;
  border-radius: 2px; background: var(--cy);
  animation: wheeldot 1.5s var(--e-quart) infinite;
}
@keyframes wheeldot {
  0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; }
  75% { transform: translateY(7px); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; }
}
.stage-cue.quiet .wheel { border-color: rgba(140,180,255,.28); }
.stage-cue.quiet .wheel span { animation: none; opacity: 1; transform: translateY(calc(var(--p, 0) * 8px)); }
.stage-cue .caret { width: .45em; height: .9em; background: var(--faint); margin-left: 2px; }

/* --- switches (state pickers) --------------------------------------------- */

.switches { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 0; }
.switch {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  background: transparent; border: 1px solid var(--hair);
  border-radius: 100px; padding: 9px 17px; cursor: pointer;
  transition: color .18s var(--e-quart), border-color .18s var(--e-quart), background-color .18s var(--e-quart);
}
.switch:hover { color: var(--ink); border-color: rgba(140,180,255,.34); }
.switch[aria-pressed="true"] { color: var(--cy); border-color: rgba(79,216,255,.55); background: rgba(79,216,255,.09); }

/* --- chips (SAMPLE, badges) ------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; color: var(--dim); background: rgba(140,180,255,.12);
}
.chip.warn { color: var(--am); background: rgba(255,194,77,.16); }
.chip.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =========================================================================
   The popover: NowView.swift, restaged
   ========================================================================= */

.pop-layout { display: grid; grid-template-columns: 1fr 384px; gap: 52px; align-items: start; margin-top: 28px; }

.popover {
  width: 100%; max-width: 384px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 16px;
  padding: 14px; display: grid; gap: 10px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  font-size: 13px; color: var(--ink);
}
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
.pop-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 10.5px; letter-spacing: .12em; }
.pop-mark .pm-lt { font-weight: 400; color: var(--cy); }
.pm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gr); }

.pop-card { background: var(--card-2); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 13px 14px; display: grid; gap: 9px; }
.pop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.badge {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 3px;
  color: var(--dim); border: 1px solid rgba(150,166,200,.4);
}
.badge.crit { color: var(--rd); border-color: rgba(255,93,122,.4); }
.badge.warn { color: var(--am); border-color: rgba(255,194,77,.4); }

.pop-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pace-ratio { display: grid; }
.pace-ratio .cap { font-size: 11px; color: var(--dim); }
.pace-ratio .fig { font-family: var(--display); font-size: 27px; line-height: 1.1; color: var(--rd); }
.pace-ratio .fig i { font-style: normal; font-family: var(--body); font-weight: 700; font-size: 19px; vertical-align: 3px; margin-left: 1px; }
.runway { text-align: right; display: grid; gap: 1px; }
.runway .rw { font-size: 11px; color: var(--dim); }
.runway .rw .rw-n { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.runway small { font-size: 10.5px; color: var(--dim); }
/* The one line in the card that carries a verdict colour: it exists only when
   the tokens are forecast to go before the window comes back. */
.runway .out { font-weight: 600; color: var(--rd); }

.popover .rails { gap: 9px; }
.popover .rail-keys { width: 60px; }
.popover .rail-vals { width: 40px; }
.popover .rail-key { font-size: 9.5px; letter-spacing: .12em; gap: 5px; }
.popover .rail-val { font-size: 12.5px; }
.popover .rail-axis { font-size: 10px; }

.pop-row.wk { align-items: baseline; }
.wk-head { font-size: 14.5px; font-weight: 600; color: var(--rd); }
.wk-reset { font-size: 10px; color: var(--dim); white-space: nowrap; }
.mini-week svg { display: block; width: 100%; height: 76px; overflow: visible; }
.wk-stats { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); }
.wk-stats .wk-n { font-size: 12px; font-weight: 700; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }

.pop-card.rec { grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.pop-card.rec .bulb { width: 16px; height: 16px; color: var(--cy); margin-top: 2px; }
.pop-card.rec .r-title { font-size: 13.5px; }
.pop-card.rec .r-driver { font-size: 12px; }
.pop-card.rec .r-detail { font-size: 11.5px; }
.pop-card.rec .cmd { font-size: 11.5px; padding: 4px 9px; }
.pop-card.rec .impact { font-size: 11px; }

.pop-foot { display: flex; align-items: center; gap: 13px; padding: 2px 4px 0; font-size: 10.5px; color: var(--faint); }
.pop-foot svg { width: 13px; height: 13px; color: var(--dim); }
.pop-foot .sp { flex: 1; }

.pop-notes { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 22px; max-width: 54ch; }
.pop-notes li { position: relative; padding-left: 20px; color: var(--dim); font-size: 15.5px; line-height: 1.6; }
.pop-notes li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--cy);
  transition: transform .4s var(--e-quart), box-shadow .4s var(--e-quart);
}
.pop-notes b { color: var(--ink); font-weight: 600; transition: color .4s var(--e-quart); }
.pop-notes em { color: var(--ink); font-style: italic; }
.pop-notes li { transition: color .4s var(--e-quart); }
/* Lit together: the card crossing the middle of the screen and the bullet
   that explains it. */
.pop-notes li.lit { color: var(--ink); }
.pop-notes li.lit b { color: var(--cy); }
.pop-notes li.lit::before { transform: scale(1.5); box-shadow: 0 0 14px var(--cy); }
.pop-card { transition: border-color .45s var(--e-quart), box-shadow .45s var(--e-quart), background-color .45s var(--e-quart); }
.pop-card.lit { border-color: rgba(79,216,255,.38); box-shadow: 0 0 0 1px rgba(79,216,255,.12), 0 18px 50px -24px rgba(79,216,255,.45); background: #111a30; }

/* =========================================================================
   How it works
   ========================================================================= */

.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.steps > li {
  position: relative; background: var(--panel); border: 1px solid var(--hair); border-radius: 16px;
  padding: 22px 22px 24px; counter-increment: step;
}
.steps > li::after {
  content: "0" counter(step); position: absolute; top: 18px; right: 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--faint);
}
.steps > li > b { display: block; font-size: 16.5px; font-weight: 600; margin: 16px 0 6px; color: var(--ink); }
.steps > li > span { color: var(--dim); font-size: 14.5px; line-height: 1.66; }

.steps.mini { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.steps.mini > li { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px 14px 54px; }
.steps.mini > li::after {
  content: counter(step); top: 12px; left: 16px; right: auto;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; font-size: 12px; color: var(--cy);
}
.steps.mini > li > b { margin: 0; font-size: 15px; }
.steps.mini > li > span { font-size: 14px; }

/* --- proofs row ------------------------------------------------------------- */

.proofs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.proofs li { background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.proofs b { color: var(--ink); font-weight: 600; }

/* =========================================================================
   The other direction: three readings of the chip
   ========================================================================= */

.chips-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 26px; padding: 6px; }
.chipdemo { display: grid; gap: 12px; padding: 18px 20px; }
.chipdemo + .chipdemo { border-left: 1px solid var(--hair-soft); }
.cd-text { font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.cd-text b { color: var(--ink); font-weight: 600; }

/* --- privacy panel -------------------------------------------------------- */

.claims { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.claims li { display: flex; gap: 13px; align-items: flex-start; color: var(--dim); font-size: 15.5px; line-height: 1.6; }
.claims li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--gr); }
.claims strong { color: var(--ink); font-weight: 600; }

/* --- FAQ -------------------------------------------------------------------- */

.faq { max-width: 72ch; margin-top: 6px; border-top: 1px solid var(--hair-soft); }
.faq details { border-bottom: 1px solid var(--hair-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative;
  font-size: 16.5px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg); transition: transform .2s var(--e-quart);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -1px; }
.faq summary:hover { color: var(--cy); }
.faq p { margin: -4px 0 18px; color: var(--dim); font-size: 15.5px; max-width: 64ch; }
.faq em { color: var(--ink); }

/* --- get ------------------------------------------------------------------ */

.get-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--dim); }
.trust li::before { content: "✓"; color: var(--gr); margin-right: 9px; }

/* --- spec table (download page) ------------------------------------------- */

.scroll { overflow-x: auto; }
.measure { width: 100%; border-collapse: collapse; font-size: 15px; }
.measure td { padding: 13px 0; border-bottom: 1px solid var(--hair-soft); vertical-align: top; }
.measure tr:last-child td { border-bottom: 0; }
.measure td:first-child { color: var(--dim); padding-right: 24px; white-space: nowrap; }
.measure .num { font-family: var(--mono); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- footer --------------------------------------------------------------- */

footer { margin-top: clamp(72px, 10vw, 130px); border-top: 1px solid var(--hair-soft); }
footer .sheet { padding: 26px var(--gut) 64px; }
footer .top { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
footer nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); text-decoration: none; transition: color .18s var(--e-quart); }
footer nav a:hover { color: var(--cy); }
footer .fine { color: var(--faint); font-size: 12.5px; line-height: 1.7; max-width: 88ch; margin: 0; }

/* ===========================================================================
   Long-form pages (privacy, support, download, 404)
   =========================================================================== */

.doc { padding-top: 54px; }
.doc-head { border-bottom: 1px solid var(--hair); padding-bottom: 26px; margin-bottom: 34px; }
.doc-head h1 { max-width: 22ch; margin: 14px 0 16px; }
.doc-meta { display: flex; gap: 20px; flex-wrap: wrap; }

.doc-body { display: grid; grid-template-columns: 232px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }

.toc { position: sticky; top: 78px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: block; text-decoration: none; color: var(--faint);
  font-size: 13px; line-height: 1.45; padding: 5px 10px; border-radius: 6px;
  border-left: 1px solid var(--hair-soft);
  transition: color .16s var(--e-quart), background-color .16s var(--e-quart);
}
.toc a:hover { color: var(--cy); background: rgba(79,216,255,.06); }

.prose { max-width: 72ch; min-width: 0; }
.prose h2 { font-family: var(--display); font-size: clamp(17px, 2.1vw, 22px); margin: 46px 0 14px; max-width: none; color: var(--ink); scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16.5px; font-weight: 600; margin: 30px 0 10px; color: var(--ink); scroll-margin-top: 84px; }
.prose p { color: var(--dim); margin: 0 0 15px; }
.prose ul, .prose ol { color: var(--dim); margin: 0 0 15px; padding-left: 21px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-style: italic; }
.prose a:not(.btn) { color: var(--cy); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-size: .88em; }
.prose .measure { margin: 20px 0; }

.callout { background: var(--panel-2); border: 1px solid var(--hair); border-radius: 14px; padding: 20px 22px; margin: 0 0 22px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* Which build a feature belongs to.
   BurnCast ships as two different programs: a direct download that can
   install the status-line helper, and a sandboxed App Store build that cannot.
   One disclaimer at the bottom of a page is a disclaimer nobody reads; these
   mark the boundary at each place a feature is actually described, so someone
   holding the store build never follows an instruction it cannot obey. */
.callout.scope { border-color: rgba(255,194,77,.34); background: rgba(255,194,77,.06); }
.callout.scope .eyebrow { color: var(--am); display: block; margin-bottom: 8px; }

.build-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; vertical-align: middle;
  color: var(--am); border: 1px solid rgba(255,194,77,.4);
  border-radius: 3px; padding: 2px 7px; margin-left: 10px; white-space: nowrap;
}
h2 .build-tag, h3 .build-tag { position: relative; top: -1px; }

.void-page { padding: clamp(72px, 14vh, 140px) 0 0; text-align: center; }
.void-page h1 { max-width: none; margin-left: auto; margin-right: auto; }
.void-page .stand { margin-left: auto; margin-right: auto; }
.void-page .actions { justify-content: center; }

/* ===========================================================================
   Motion
   =========================================================================== */

@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.boot > * { animation: lift .8s var(--e-expo) backwards; }
.boot > *:nth-child(1) { animation-delay: .04s; }
.boot > *:nth-child(2) { animation-delay: .12s; }
.boot > *:nth-child(3) { animation-delay: .20s; }
.boot > *:nth-child(4) { animation-delay: .28s; }
.boot > *:nth-child(5) { animation-delay: .36s; }

/* Scroll-driven reveals, native. `animation-timeline` degrades to "no
   animation" rather than "stuck at the from-state", so unsupported browsers
   simply get the finished page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: lift .9s var(--e-expo) both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
    /* Grids arrive one item at a time: each child rides its own view timeline,
       offset a little further than the one before it. */
    .stagger > * { animation: lift .9s var(--e-expo) both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .stagger > *:nth-child(2) { animation-range: entry 7% cover 32%; }
    .stagger > *:nth-child(3) { animation-range: entry 14% cover 38%; }
    .stagger > *:nth-child(4) { animation-range: entry 21% cover 44%; }
    .stagger > *:nth-child(5) { animation-range: entry 28% cover 50%; }
    .stagger > *:nth-child(n+6) { animation-range: entry 35% cover 56%; }
    /* The bullets come in from the side, toward the app they describe. */
    .pop-notes.stagger > li { animation-name: slidein; }
    /* The popover moves against the scroll, a little slower than the page. */
    .popover { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes slidein { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(56px); } to { transform: translateY(-56px); } }
/* The what-if chart draws itself as it scrolls into view: the burn line
   traces forward, the bars grow, then the forecast and its band fade in. (The
   week chart above it is drawn by the scroll itself; see demo.js.) */
@keyframes drawline { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes growbar  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fadein   { from { opacity: 0; } to { opacity: 1; } }
.weekchart.draw .past { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: drawline 1.5s var(--e-quart) .1s forwards; }
.weekchart.draw .forecast, .weekchart.draw .band, .weekchart.draw .land-t,
.weekchart.draw .callout-bg, .weekchart.draw .callout-t { opacity: 0; animation: fadein .7s var(--e-quart) 1.25s forwards; }
.weekchart.draw .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: growbar .8s var(--e-quart) both; }
.weekchart.draw .bar:nth-of-type(2n) { animation-delay: .12s; }
.weekchart.draw .bar:nth-of-type(3n) { animation-delay: .24s; }

/* Bars that fill when their panel arrives. app.js marks these `pre` while
   they are still below the fold and clears it as they enter. */
.popover.pre .rail-fill, .popover.pre .rail-hot, .chips-strip.pre .mb-bar .mb-fill { width: 0 !important; }
.mini-week .past { stroke-dasharray: 700; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--e-quart) .2s; }
.mini-week .fc, .mini-week .land { transition: opacity .6s var(--e-quart) 1.2s; }
.popover.pre .mini-week .past { stroke-dashoffset: 700; }
.popover.pre .mini-week .fc, .popover.pre .mini-week .land { opacity: 0; }

/* A single sweep across the HUD when it powers on. */
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(2400%); } }
.hud .sweepline {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(79,216,255,.13), transparent);
  animation: sweep 2.1s var(--e-quart) .35s 1 both;
}

/* The what-if nudge: after a quiet moment, one pill asks to be pressed. */
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,216,255,0); } 50% { box-shadow: 0 0 0 6px rgba(79,216,255,.22); } }
.pills button.nudge { animation: nudge 1.6s var(--e-quart) 3; border-color: rgba(79,216,255,.5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #atmos { transition: none; }
  .hud .sweepline, .caret { display: none; }
  .stage-cue .wheel span { animation: none; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1100px) {
  .pop-layout { grid-template-columns: 1fr 360px; gap: 32px; }
}

@media (max-width: 940px) {
  .doc-body { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .hide-md { display: none; }
  .pop-layout { grid-template-columns: 1fr; gap: 26px; }
  .popover { max-width: 420px; order: -1; animation: none; }
  .steps { grid-template-columns: 1fr; }
  .proofs, .chips-strip { grid-template-columns: 1fr; }
  .chipdemo + .chipdemo { border-left: 0; border-top: 1px solid var(--hair-soft); }
  .get-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
  :root { --gut: 20px; --mast: 58px; }
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .stage-wrap { height: 230vh; margin-top: 48px; }
  .stage { top: calc(var(--mast) + 8px); gap: 10px; }
  .menubar { font-size: 12px; padding: 0 10px; }
  .mb-left, .mb-right { gap: 11px; }
  .rails { gap: 9px; }
  .rail-keys { width: 58px; }
  .rail-vals { width: 44px; }
  .rail-key { font-size: 9px; letter-spacing: .1em; gap: 5px; }
  .rail-val { font-size: 12.5px; }
  .readouts { gap: 10px 20px; }
  .masthead .sheet { gap: 14px; }
  .masthead nav { gap: 14px; }
  .btn { padding: 14px 20px; font-size: 11.5px; }
}

/* Short viewports can't hold the whole stage; it simply scrolls like content
   and app.js drives the reading from the stage's own position instead. */
@media (max-height: 700px) {
  .stage-wrap { height: auto; }
  .stage { position: static; }
}

@media (max-width: 560px) {
  .measure td { display: block; padding: 4px 0; }
  .measure td:first-child { padding-top: 12px; }
  .measure tr { display: block; border-bottom: 1px solid var(--hair-soft); padding-bottom: 8px; }
  .measure .num { text-align: left; white-space: normal; }
  .measure tr:last-child { border-bottom: 0; }
}

@media (max-width: 460px) {
  .designation, .hide-xs { display: none; }
  .stage-cue { min-height: 3em; }
  .hud { padding: 16px; }
  .hud-head { padding-bottom: 14px; margin-bottom: 16px; }
  .readouts { margin-top: 18px; padding-top: 14px; }
  .r-detail { display: none; }
}

/* ===========================================================================
   The app, rebuilt in HTML: the week view, the what-if panel, the windows
   =========================================================================== */

.appwin {
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
}

.appwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--hair-soft);
  background: rgba(255,255,255,.018);
}
.appwin-bar .lights { display: flex; gap: 6px; }
.appwin-bar .lights i { width: 11px; height: 11px; border-radius: 50%; background: rgba(140,180,255,.20); }
.appwin-bar .chip { margin-left: auto; }

.appwin-tabs { display: flex; gap: 2px; margin: 0 auto; }
.appwin-bar .lights + .appwin-tabs { margin-left: auto; }
.appwin-tabs button {
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  padding: 5px 15px; border-radius: 7px; border: 0;
  background: transparent; color: var(--dim);
  transition: background-color .18s var(--e-quart), color .18s var(--e-quart);
}
.appwin-tabs button:hover { color: var(--ink); }
.appwin-tabs button[aria-selected="true"] { background: rgba(140,180,255,.13); color: var(--ink); }

.appwin-body { padding: 18px; }

.app-headline { font-size: 15.5px; font-weight: 700; margin: 0 0 14px; line-height: 1.4; transition: color .45s var(--e-quart); }

.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.tile {
  border: 1px solid var(--hair-soft); border-radius: 9px; padding: 11px 12px;
  background: rgba(140,180,255,.035);
  transition: background-color .45s var(--e-quart), border-color .45s var(--e-quart);
  min-width: 0;
}
.tile .fig { font-size: 21px; font-weight: 700; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile .fig u { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--dim); margin-left: 1px; }
.tile .lab { font-size: 10.5px; color: var(--dim); margin-top: 5px; line-height: 1.32; }
.tile.is-comfortable { background: rgba(77,255,176,.09);  border-color: rgba(77,255,176,.30); }
.tile.is-close       { background: rgba(255,194,77,.09);  border-color: rgba(255,194,77,.32); }
.tile.is-over        { background: rgba(255,93,122,.10);  border-color: rgba(255,93,122,.34); }

.weekchart { margin-top: 16px; }
.weekchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.weekchart .gridline { stroke: rgba(140,180,255,.10); stroke-width: 1; }
.weekchart .axis-t { font-family: var(--mono); font-size: 10px; fill: var(--faint); }
.weekchart .day-t  { font-size: 11.5px; font-weight: 600; fill: var(--dim); }
.weekchart .mark-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; fill: var(--faint); }
.weekchart .land-t { font-family: var(--mono); font-size: 12px; }
.weekchart .band       { transition: d .8s var(--e-quint), fill .45s var(--e-quart); }
.weekchart .past       { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.weekchart .typical    { fill: none; stroke: rgba(150,166,200,.5); stroke-width: 1.4; stroke-dasharray: 2 4; }
.weekchart .forecast   { fill: none; stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round; transition: stroke .45s var(--e-quart); }
.weekchart .limit      { stroke-width: 1.4; stroke-dasharray: 6 5; transition: stroke .45s var(--e-quart); }
.weekchart .nowline    { stroke: rgba(230,237,255,.55); stroke-width: 1.2; }
.weekchart .callout-bg { fill: #131828; stroke: rgba(255,93,122,.45); }
.weekchart .callout-t  { font-size: 12px; font-weight: 700; fill: #ff5d7a; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; align-items: center; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim); }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.chart-legend .ln { width: 16px; height: 0; border-top: 2px solid; border-radius: 0; }

.whatif { margin-top: 16px; border: 1px solid var(--hair-soft); border-radius: 11px; padding: 15px 16px; }
.whatif h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 13px; font-weight: 400; }
.whatif-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.whatif-row > .rl { font-size: 12.5px; font-weight: 600; width: 46px; flex: none; color: var(--ink); }
.pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pills button {
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  padding: 5px 13px; border-radius: 100px;
  border: 1px solid transparent; background: rgba(140,180,255,.09); color: var(--dim);
  transition: background-color .18s var(--e-quart), color .18s var(--e-quart), border-color .18s var(--e-quart);
}
.pills button:hover { color: var(--ink); background: rgba(140,180,255,.16); }
.pills button[aria-pressed="true"] { background: rgba(79,216,255,.15); color: var(--ink); border-color: rgba(79,216,255,.5); }
.whatif .now-note { font-size: 10.5px; color: var(--faint); margin: 0 0 12px 58px; }
.whatif .verdict { font-size: 12.5px; color: var(--dim); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.whatif .verdict b { color: var(--ink); }

.mrows { display: grid; gap: 11px; margin-top: 4px; }
.mrow { display: flex; align-items: center; gap: 12px; }
.mrow .nm { width: 74px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mrow .tr { flex: 1; height: 14px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 0; }
.mrow .tr i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .8s var(--e-quint); }
.mrow .pc { width: 96px; flex: none; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.mrow .pc b { color: var(--ink); font-weight: 400; }

.scenarios { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.scenarios .lead { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }

.demo-note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; }
.demo-note b { color: var(--dim); font-weight: 600; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .appwin-body { padding: 14px; }
  .mrow .nm { width: 58px; font-size: 11.5px; }
  .mrow .pc { width: 74px; font-size: 11.5px; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .appwin-tabs button { padding: 5px 10px; font-size: 12px; }
  .whatif .now-note { margin-left: 0; }
  /* The chart is drawn in a 1000-unit viewBox; at phone width its type lands
     under 4px. Bigger units, not bigger pixels. */
  .weekchart .axis-t { font-size: 22px; }
  .weekchart .mark-t { font-size: 19px; letter-spacing: .1em; }
  .weekchart .land-t { font-size: 26px; }
  .weekchart .day-t  { font-size: 26px; }
  .weekchart .callout-t { font-size: 24px; }
  .weekchart .limit, .weekchart .forecast { stroke-width: 3.5; }
  .weekchart .past { stroke-width: 3.5; }
}