/* ForgeOS Home Life — the homepage's sections below the hero, made to be
 * pressed (forgeos-home-life.js builds every control styled here). Without
 * the script none of these classes appear and the page reads as authored.
 * Motion is decoration: every animation and transition stops for anyone who
 * asked for less, and the state each one ends in is shown at once instead.
 */

.hl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.hl-seg-b:focus-visible, .hl-shot-go:focus-visible, .fstep .num:focus-visible, .hl-task:focus-visible,
.hl-tab:focus-visible, .hl-switch:focus-visible, .hl-compose .go:focus-visible, .hl-runs .cap:focus-visible { outline: 3px solid var(--m19-brand-400); outline-offset: 2px; }
.hl-wait { opacity: 0; transform: translateY(6px); }
.hl-said, .hl-bubble, .vcard .out i, .rail .end, .rail .mid span, .vcard .seal, .evidence > div, .proof-panel .seal, .hl-runs p { transition: opacity var(--life-d2) var(--life-ease), transform var(--life-d2) var(--life-ease); }

/* ── A row of pressable segments ─────────────────────────────────────────── */
.hl-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; padding: 4px; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.hl-seg-b { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 560 14px/1 var(--life-text); cursor: pointer; transition: background var(--life-d1), color var(--life-d1); }
.hl-seg-b[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.hl-filter { margin: 22px auto 24px; }
@media (max-width: 560px) { .hl-seg { border-radius: 20px; gap: 2px; } .hl-seg-b { padding: 0 12px; } }

/* ── The difference ──────────────────────────────────────────────────────── */
.hl-seg + .versus { margin-top: 18px; }
.versus .vcard { transition: opacity var(--life-d2) var(--life-ease), transform var(--life-d2) var(--life-ease); }
/* The card not shown steps back without fading its words: at .55 opacity its
   text fell to 2.2:1 (axe, 2026-10-03). */
.versus[data-show="model"] .vcard.forge, .versus[data-show="forge"] .vcard.model { filter: grayscale(.6); transform: scale(.985); box-shadow: none; }
.vcard.model .out { min-height: 9.5em; }


/* ── The gallery ─────────────────────────────────────────────────────────── */
.sl-shot { position: relative; }
.sl-shot[hidden] { display: none; }
.hl-shot-go { position: absolute; inset: 0; width: 100%; border: 0; border-radius: var(--life-r-lg); background: transparent; cursor: pointer; }
.sl-shot .hl-bubble { position: absolute; z-index: 1; left: 18px; right: 18px; top: 18px; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: #111827; color: #fff; font: 500 12.5px/1.35 var(--life-text); box-shadow: var(--life-shadow-2); opacity: 0; transform: translateY(6px); pointer-events: none; }
.sl-shot.is-asking .hl-bubble { opacity: 1; transform: none; }
.sl-shot-art > * { transform-box: fill-box; transform-origin: center; }
.sl-shot.is-building .sl-shot-art > :not(:first-child) { animation: hl-pop 520ms var(--life-spring) both; animation-delay: calc(var(--k, 0) * 70ms + 400ms); }
@keyframes hl-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ── How it works ────────────────────────────────────────────────────────── */
.hl-how { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hl-states { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hl-states li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--n-line-2); font-size: 12.5px; color: var(--n-ink-3); transition: background var(--life-d2), color var(--life-d2), border-color var(--life-d2); }
.hl-states li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.hl-states li[data-state="done"] { color: var(--n-ink-2); }
.hl-states li[data-state="done"]::before { background: var(--ok-n, #4ade80); opacity: 1; }
.hl-states li[data-state="now"] { color: #fff; border-color: rgba(129,140,248,.6); background: rgba(99,102,241,.22); }
.hl-states li[data-state="now"]::before { opacity: 1; animation: hl-pulse 1.4s ease-in-out infinite; }
@keyframes hl-pulse { 50% { transform: scale(1.6); opacity: .45; } }
.hl-now { flex-basis: 100%; margin: 0; min-height: 1.5em; font-size: 14.5px; color: var(--n-ink-2); }
.hl-how + .flow { margin-top: 32px; }
.fstep button.num { padding: 0; font: inherit; cursor: pointer; transition: transform var(--life-d2) var(--life-spring), box-shadow var(--life-d2), background var(--life-d2); }
.fstep, .fstep h3, .fstep p { transition: opacity var(--life-d2) var(--life-ease); }
.flow.is-playing .fstep:not(.is-done):not(.is-now) { opacity: .42; }
.fstep.is-done .num { background: rgba(99,102,241,.28); color: #fff; }
.fstep.is-now .num { background: var(--path); color: #fff; border-color: transparent; transform: scale(1.12); box-shadow: 0 0 0 6px var(--n-100), 0 0 0 10px rgba(99,102,241,.35); }

/* ── Model routing ───────────────────────────────────────────────────────── */
button.hl-task { width: 100%; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--life-d2), background var(--life-d2), box-shadow var(--life-d2); }
.hl-task:hover { border-color: var(--line-2); }
.hl-task.is-on { border-color: var(--tint-200, var(--m19-brand-400)); background: var(--tint-050); box-shadow: var(--life-shadow-1); }
.hl-task.is-on .pick { animation: hl-chosen 600ms var(--life-spring); }
@keyframes hl-chosen { 40% { transform: scale(1.1); } }
.hl-why { margin: 0; min-height: 3em; padding: 10px 14px; border-left: 3px solid var(--tint-200, var(--m19-brand-400)); font-size: 14px; color: var(--ink-2); }

/* ── Proof ───────────────────────────────────────────────────────────────── */
.hl-proof-do { display: flex; flex-wrap: wrap; gap: 8px; }
.night .hl-proof-do .btn-secondary { color: var(--n-ink); }
.hl-x { display: none; width: 14px; text-align: center; font-weight: 700; color: var(--m19-state-danger, #f87171); }
.evidence > div.is-fail { background: rgba(248,113,113,.1); }
.evidence > div.is-fail > svg { display: none; }
.evidence > div.is-fail .hl-x { display: block; }
.evidence > div.is-fail code { color: #fca5a5; }
.seal { transition: background var(--life-d2), border-color var(--life-d2), opacity var(--life-d2); }
.seal.is-fail { background: rgba(247,144,9,.12); border-color: rgba(247,144,9,.45); }
.seal.is-fail .ring { background: #b45309; }
.seal.is-fail .ring svg { display: none; }
.seal.is-fail .ring::after { content: "!"; font-weight: 700; }
.hl-fail[aria-pressed="true"] { border-color: rgba(247,144,9,.7); background: rgba(247,144,9,.14); }
.honest { transition: box-shadow var(--life-d2), border-color var(--life-d2); }
.honest.is-lit { border-color: rgba(247,144,9,.8); box-shadow: 0 0 0 4px rgba(247,144,9,.16); }

/* ── Recorded runs ───────────────────────────────────────────────────────── */
.hl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.hl-tab { display: grid; gap: 2px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--life-d1), background var(--life-d1); }
.hl-tab b { font-size: 14px; color: var(--ink); }
.hl-tab small { font-size: 12px; color: var(--ink-3); }
.hl-tab[aria-selected="true"] { border-color: var(--tint-200, var(--m19-brand-400)); background: var(--tint-050); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m19-brand-500) 16%, transparent); }
.caps.hl-runs { grid-template-columns: minmax(0, 760px); justify-content: center; margin-top: 18px; }
.hl-runs .cap { min-height: 0; gap: 10px; }
.hl-runs .cap[hidden] { display: none; }
.hl-runs .cap.hl-passed h3 { color: var(--ok-ink, #15803d); }
.hl-runs .cap:not(.hl-passed) h3 { color: var(--m19-state-danger-ink, #b42318); }
.hl-runs p.hl-bad { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #ef4444 9%, transparent); }
.hl-runs p.hl-warn { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 10%, transparent); }
@media (max-width: 640px) { .caps.hl-runs { grid-template-columns: minmax(0, 1fr); } .hl-tab { flex: 1 1 100%; } }

/* ── Control ─────────────────────────────────────────────────────────────── */
.rung { transition: background var(--life-d2); }
.rung.is-yes { background: var(--tint-050); }
.rung.is-asking .gate { animation: hl-chosen 700ms var(--life-spring) 2; }
.hl-switch { position: absolute; top: 22px; right: 18px; width: 44px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background var(--life-d1), border-color var(--life-d1); }
.hl-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); transition: transform var(--life-d1) var(--life-ease), background var(--life-d1); }
.hl-switch[aria-checked="true"] { background: var(--m19-brand-500, #6366f1); border-color: transparent; }
.hl-switch[aria-checked="true"] .hl-knob { transform: translateX(18px); background: #fff; }
.hl-said-control { margin: 16px 0 0; min-height: 3em; font-size: 15px; color: var(--ink-2); }

/* ── The close ───────────────────────────────────────────────────────────── */
form.hl-compose { display: block; transition: border-color .2s; }
form.hl-compose:focus-within { border-color: rgba(165,180,252,.6); }
form.hl-compose:focus-within { box-shadow: var(--glow), 0 0 0 3px rgba(129,140,248,.45); }
form.hl-compose .hl-ask, form.hl-compose .hl-ask:focus, form.hl-compose .hl-ask:focus-visible { display: block; width: 100%; min-height: 3.2em; margin: 0; padding: 0; resize: none; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--n-ink); font: 400 17px/1.5 var(--life-text); }
.hl-ask::placeholder { color: var(--n-ink-3); }
.hl-compose .chip { cursor: pointer; font: inherit; font-size: 13px; }
.hl-compose .go { border: 0; padding: 0; cursor: pointer; }
.hl-carry { margin: 12px auto 0; max-width: 720px; text-align: center; font-size: 13px; color: var(--n-ink-3); }

@media (prefers-reduced-motion: reduce) {
  .hl-wait { opacity: 1; transform: none; }
  .hl-said, .hl-bubble, .vcard .out i, .rail .end, .rail .mid span, .vcard .seal, .evidence > div, .proof-panel .seal, .hl-runs p,
  .versus .vcard, .hl-seg-b, .hl-states li, .hl-states li::before, .fstep, .fstep h3, .fstep p, .fstep button.num, .hl-task, .hl-task .pick,
  .seal, .honest, .hl-tab, .rung, .rung .gate, .hl-switch, .hl-knob, .sl-shot-art > * { animation: none !important; transition: none !important; }
}

/* Small grey text on the pale selected tint measured 4.44:1; the second ink clears 4.5. */
.hl-task.is-on small, .hl-tab[aria-selected="true"] small, .rung.is-yes p, .rung.is-yes .step { color: var(--ink-2); }