/* ==========================================================================
   alive.css: the living layer, the what-if line and the next band. Load AFTER garage.css.
   The type here is the phone's four sizes (12, 13, 15, 17) at every width: tools/phone-lint.mjs holds a phone to them.
   Motion is opacity and transform only, run by transitions that end on the resting state, and none of it is on a glass
   panel's ancestor (alive.js picks what moves). prefers-reduced-motion asks for none of it.
   ========================================================================== */

:root{ --ease-out:cubic-bezier(.2,.75,.3,1); }

/* ---------- a piece rises into place as it arrives (alive.js adds .rv, then .in) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{ opacity:0; transform:translate3d(0,18px,0) }          /* put away at once: no transition on the way out */
  .rv.in{ opacity:1; transform:none;                         /* the transition belongs to arriving, so a transition only ever runs forwards */
          transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
          transition-delay:calc(var(--i,0) * 70ms) }
}
@media (prefers-reduced-motion:no-preference){
  /* a chart below the fold waits at its start and draws when it arrives (alive.js charts()) */
  .chart.cp:not(.in) .bar, .chart.cp:not(.in) .val{ animation-play-state:paused }
}
@media print{ .rv{ opacity:1 !important; transform:none !important } .chart.cp .bar, .chart.cp .val{ animation:none !important } }

/* ---------- the what-if line: the lead-in of a page's h1 (tools/voice.py) ----------
   garage.css colours every span in an h1 with the accent, so the premise and its lead-in say what they are (.gx raises them above it). */
.gx h1 .wi-k, .tt-main h1 .wi-k{ display:block; margin:0 0 .75em; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:12px; font-weight:700;
          line-height:1.3; letter-spacing:.2em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.gx h1 .wi-k::before{ content:""; display:block; width:56px; height:6px; margin:0 0 .9em; transform:skewX(-24deg); transform-origin:left;
          background:linear-gradient(var(--ignition,#F4511E) 0 3px, transparent 3px 4px, var(--speed-blue,#57C7F5) 4px 6px) }
.gx h1 .wi-t{ display:block; color:var(--ink); text-wrap:balance }
.gx h1 .wi-t span, .gx h1 .wi-t em{ color:var(--ignition,#F4511E); font-style:normal }
.hero h1 .wi-t{ font-size:clamp(1.7rem,5.6vw,2.9rem); line-height:1.1; letter-spacing:-.015em }

/* ---------- the next band ---------- */
.nx{ position:relative; margin:56px 0 0; padding:clamp(22px,4.6vw,44px); border-left:3px solid var(--ignition,#F4511E) }
.nx-in{ display:grid; gap:clamp(24px,4.4vw,48px); grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .nx-in{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:start } }
.nx-eyebrow{ margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.nx-stripes{ display:block; width:84px; height:8px; margin:0 0 18px; transform:skewX(-24deg); transform-origin:left;
             background:linear-gradient(var(--ignition,#F4511E) 0 3px, transparent 3px 5px, var(--speed-blue,#57C7F5) 5px 8px) }
.nx-h{ margin:0 0 .5em; font-family:var(--display); font-weight:900; font-size:clamp(1.55rem,5.2vw,2.35rem); line-height:1.08;
       letter-spacing:-.01em; color:var(--ink); text-wrap:balance }
.nx-lede{ margin:0; max-width:34rem; font-size:17px; line-height:1.55; color:var(--ink-2) }

/* the two doors: a segmented pair, one line under it that says what the picked one is */
.nx-doors{ margin:0 0 12px; padding:0; border:0; min-width:0; display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.nx-door{ position:relative; display:block; cursor:pointer }
.nx-door input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.nx-dc{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; min-height:56px; padding:10px 18px 10px 14px; text-align:center;
        font-size:15px; font-weight:800; line-height:1.2; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2);
        background:rgba(229,231,235,.05); box-shadow:inset 0 -1px 0 rgba(229,231,235,.2);
        clip-path:polygon(0 0,100% 0,calc(100% - var(--cut,10px)) 100%,0 100%);
        transition:background .25s var(--ease-out), box-shadow .25s var(--ease-out), color .25s var(--ease-out) }
.nx-door input:hover + .nx-dc{ background:rgba(229,231,235,.09); color:var(--ink) }
.nx-door input:checked + .nx-dc{ color:var(--ink); background:linear-gradient(90deg,rgba(244,81,30,.24),rgba(244,81,30,.06));
                                 box-shadow:inset 4px 0 0 var(--ignition,#F4511E), inset 0 -2px 0 rgba(244,81,30,.75) }
.nx-door input:focus-visible + .nx-dc{ box-shadow:inset 0 0 0 2px var(--speed-blue,#57C7F5) }
.nx-door input:checked:focus-visible + .nx-dc{ box-shadow:inset 4px 0 0 var(--ignition,#F4511E), inset 0 0 0 2px var(--speed-blue,#57C7F5) }
.nx-dd{ position:relative; margin:0 0 18px; min-height:3em; font-size:15px; line-height:1.45; color:var(--ink-2) }
.nx-dd [data-d]{ display:none }
.nx[data-door="follow"] .nx-dd [data-d="follow"], .nx[data-door="build"] .nx-dd [data-d="build"], .nx:not([data-door]) .nx-dd [data-d="follow"]{ display:block }
@media (prefers-reduced-motion:no-preference){
  .nx-dd [data-d]{ animation:nx-swap .4s var(--ease-out) both }
  @keyframes nx-swap{ from{ transform:translate3d(0,6px,0) } to{ transform:none } }
}

.nx-row{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); align-items:end; margin:0 0 6px }
@media (min-width:560px){ .nx-row{ grid-template-columns:minmax(0,1fr) auto } .nx-row .nx-go{ width:auto; min-width:11.5rem } }
.nx-f{ margin:0; display:grid; gap:6px }
.nx-f label, .nx-chips legend{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2) }
.nx-f:focus-within label{ color:var(--ignition,#F4511E) }
.nx-f input, .nx-f textarea{ box-sizing:border-box; width:100%; min-height:52px; padding:13px 16px; border:0; border-radius:0;
        border-bottom:1px solid rgba(229,231,235,.3); background:rgba(229,231,235,.06); color:var(--ink);
        font:inherit; font-size:17px; line-height:1.4;
        clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
        transition:background .2s var(--ease-out), box-shadow .2s var(--ease-out) }
.nx-f textarea{ min-height:84px; resize:vertical }
.nx-f input:hover, .nx-f textarea:hover{ background:rgba(229,231,235,.09) }
.nx-f input:focus-visible, .nx-f textarea:focus-visible{ outline:2px solid transparent; background:rgba(229,231,235,.1);
        box-shadow:inset 4px 0 0 var(--ignition,#F4511E) }
.nx-f input::placeholder{ color:var(--ink-3) }

/* Tell us more: the chips and the line, folded away until asked for (the second door opens it: the line is what that door is for) */
.nx-more{ margin:0 0 4px }
.nx-more > summary{ display:flex; align-items:center; gap:.6em; min-height:44px; cursor:pointer; list-style:none; font-size:15px; font-weight:700;
        letter-spacing:.04em; color:var(--ink-2) }
.nx-more > summary::-webkit-details-marker{ display:none }
.nx-more > summary::before{ content:""; flex:none; width:9px; height:9px; margin:0 4px 0 2px; border-right:2px solid var(--ignition,#F4511E);
        border-bottom:2px solid var(--ignition,#F4511E); transform:rotate(-45deg); transition:transform .25s var(--ease-out) }
.nx-more[open] > summary::before{ transform:rotate(45deg) }
.nx-more > summary:hover{ color:var(--ink) }
.nx-more > summary:focus-visible{ outline:2px solid var(--speed-blue,#57C7F5); outline-offset:2px }
.nx-more summary small{ font-size:12px; font-weight:400; letter-spacing:.06em; color:var(--ink-3) }
.nx-more [data-t]{ display:none }
.nx-more[data-door="follow"] [data-t="follow"], .nx-more[data-door="build"] [data-t="build"], .nx-more:not([data-door]) [data-t="follow"]{ display:inline }
.nx-more[open] > :not(summary){ animation:nx-open .35s var(--ease-out) both }
@keyframes nx-open{ from{ transform:translate3d(0,-6px,0) } to{ transform:none } }
.nx-more .nx-f{ margin:6px 0 4px }
.nx-chips{ margin:6px 0 14px; padding:0; border:0; min-width:0 }
.nx-chips legend{ padding:0; margin:0 0 9px }
.nx-chipset{ display:flex; flex-wrap:wrap; gap:8px }
.nx-chip{ position:relative; display:block }
.nx-chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.nx-chip span{ display:block; padding:10px 14px; font-size:15px; line-height:1.2; color:var(--ink-2); background:rgba(229,231,235,.06);
               box-shadow:inset 0 -1px 0 rgba(229,231,235,.22);
               transition:background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out) }
.nx-chip input:hover + span{ background:rgba(229,231,235,.1); color:var(--ink) }
.nx-chip input:checked + span{ color:var(--ink); background:rgba(244,81,30,.18); box-shadow:inset 0 -2px 0 var(--ignition,#F4511E) }
.nx-chip input:focus-visible + span{ box-shadow:inset 0 0 0 2px var(--speed-blue,#57C7F5) }
/* the second door has no use for the chips */
.nx[data-door="build"] .nx-chips{ display:none }

.nx-err{ margin:0 0 12px; color:var(--amber,#F6A22B); font-size:15px; line-height:1.4 }
.nx-err:empty{ display:none }
.nx-go{ width:100%; justify-content:center; cursor:pointer; font-family:inherit; position:relative; overflow:hidden }
.nx-go[disabled]{ opacity:.7; cursor:progress }
.nx-go [data-t]{ display:none }
.nx-go[data-door="follow"] [data-t="follow"], .nx-go[data-door="build"] [data-t="build"], .nx-go:not([data-door]) [data-t="follow"]{ display:inline }
.nx-fine{ margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--ink-3) }
.nx-fine a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px }

/* a line of "the same, elsewhere" under the form: share, the feed, the notes (follow.js wires the share button) */
.nx-links{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--hairline,rgba(229,231,235,.1)) }

/* joined: the form gives way to what is next */
.nx-done{ display:none; outline:0 }
.nx[data-state="done"] .nx-form{ display:none }
.nx[data-state="done"] .nx-done{ display:block }
.nx-check{ display:block; width:60px; height:60px; margin:0 0 14px }
.nx-check circle{ fill:none; stroke:var(--ignition,#F4511E); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:0 }
.nx-check path{ fill:none; stroke:var(--speed-blue,#57C7F5); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:0 }
@media (prefers-reduced-motion:no-preference){
  .nx[data-state="done"] .nx-check circle{ animation:nx-ring .8s var(--ease-out) both }
  .nx[data-state="done"] .nx-check path{ animation:nx-tick .5s .45s var(--ease-out) both }
  .nx[data-state="done"] .nx-done > *:not(.nx-check){ animation:nx-up .6s .2s var(--ease-out) both }
  .nx-go::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
                 transform:translateX(-120%) }
  .nx[data-busy] .nx-go::after{ animation:nx-sweep 1.1s linear infinite }
}
@keyframes nx-ring{ from{ stroke-dashoffset:151 } to{ stroke-dashoffset:0 } }
@keyframes nx-tick{ from{ stroke-dashoffset:34 } to{ stroke-dashoffset:0 } }
@keyframes nx-up{ from{ transform:translate3d(0,10px,0) } to{ transform:none } }
@keyframes nx-sweep{ to{ transform:translateX(120%) } }
.nx-done h3{ margin:0 0 .5em; font-family:var(--display); font-weight:900; font-size:clamp(1.3rem,4.4vw,1.8rem); line-height:1.1; text-transform:uppercase; color:var(--ink) }
.nx-p{ margin:0 0 1em; font-size:15px; line-height:1.55; color:var(--ink-2) }
.nx-route{ display:grid; gap:8px; padding:16px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); background:rgba(229,231,235,.04) }
.nx-route span{ color:var(--ink-2); font-size:15px; line-height:1.45 }
.nx-route .nx-go{ margin-top:6px }
.nx-back{ margin:14px 0 0; font-size:13px }