/* Hylē v4 · components. All text sizes come from the 9-step scale in tokens.css. */

/* ================= Buttons · founder review 10-09 (C6) =================
   One family, in the language of the landing hero (the frosted pill and the Start research button):
     primary    the brand-mark gradient (blue → night → amber; white text is AA on every stop) with a lit top edge.
                Hover: a soft sheen passes and the gradient drifts toward amber. Press: 1px settle.
     secondary  paper body with a light-catching edge that runs ink → blue → amber; hover brightens the edge and lifts.
     ghost      text only; a tint on hover.
     night/glass  on the field: frosted night glass with the hero pill's gradient edge (white text AA on blue and amber).
     light      on the field: solid white.        pill   marketing CTAs only (radius, never a different colour).
   Every state: hover · focus-visible (2px ring at 2px, white on the field) · active (settle) · disabled (48%, flat). */
.btn { --btn-h: var(--ctl-md); --btn-edge: linear-gradient(115deg, rgba(20,20,19,.18), rgba(18,117,216,.34) 42%, rgba(225,145,54,.42) 78%, rgba(20,20,19,.16));
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 16px; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-ui); line-height: 1; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent; transition: background-color var(--d-2) var(--ease-out), background-position var(--d-5) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), box-shadow var(--d-3) var(--ease-out), transform var(--d-2) var(--ease-press); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .arrow { transition: transform var(--d-3) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { color: #fff; background-color: var(--brand-night-2);
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%), linear-gradient(120deg, #0d5bb5 0%, #13254a 54%, #9a5212 100%);
  background-size: 260% 100%, 160% 100%; background-position: 130% 0, 0% 50%; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px -10px rgba(13,60,140,.7), 0 1px 2px rgba(11,24,48,.18); }
.btn-primary:hover { background-position: -30% 0, 100% 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 24px -10px rgba(13,60,140,.75), 0 1px 2px rgba(11,24,48,.2); }
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.10), 0 3px 8px -5px rgba(13,60,140,.7); }
.btn-primary:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(13,91,181,.3); }
.btn-accent:hover { background: var(--brand-blue-deep); }
.btn-secondary { color: var(--ink); background: linear-gradient(var(--raised), var(--raised)) padding-box, var(--btn-edge) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20,20,19,.06); }
.btn-secondary:hover { --btn-edge: linear-gradient(115deg, rgba(20,20,19,.26), rgba(18,117,216,.62) 42%, rgba(225,145,54,.72) 78%, rgba(20,20,19,.22));
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(11,24,48,.4), 0 1px 2px rgba(20,20,19,.06); }
.btn-secondary:active { box-shadow: inset 0 1px 2px rgba(20,20,19,.08); }
.btn-ghost { color: var(--ink-2); background: transparent; }
.btn-ghost:hover { background: var(--hover-tint); color: var(--ink); }
.btn-ghost:active { background: var(--press-tint); }
.btn-light { background: #fff; color: var(--ink); box-shadow: inset 0 -1px 0 rgba(20,20,19,.08), 0 1px 2px rgba(11,24,48,.2), 0 10px 24px -14px rgba(5,15,40,.6); }
.btn-light:hover { background: #fff; box-shadow: inset 0 -1px 0 rgba(20,20,19,.08), 0 0 0 4px rgba(255,255,255,.18), 0 14px 30px -14px rgba(5,15,40,.7); }
/* Night / glass: the hero pill's frosted night glass. The 50% night fill keeps white text ≥ 4.5:1 on the orange half. */
.btn-night, .btn-glass { color: #fff;
  background: linear-gradient(rgba(9,20,42,.52), rgba(9,20,42,.52)) padding-box, linear-gradient(115deg, rgba(255,255,255,.62), rgba(150,196,255,.34) 38%, rgba(255,210,154,.6) 78%, rgba(255,255,255,.22)) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 30px -14px rgba(5,15,40,.55); }
.btn-night:hover, .btn-glass:hover { background: linear-gradient(rgba(9,20,42,.64), rgba(9,20,42,.64)) padding-box, linear-gradient(115deg, rgba(255,255,255,.85), rgba(150,196,255,.5) 38%, rgba(255,210,154,.85) 78%, rgba(255,255,255,.35)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 36px -14px rgba(5,15,40,.6), 0 0 0 4px rgba(255,255,255,.06); }
:is(.btn-night, .btn-glass, .btn-light):focus-visible,
:is(.on-dark, .atmo-band, .hero-band, .surface-night, .glass-card, .pnav.on-field:not(.is-solid)) .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { --btn-h: var(--ctl-sm); padding: 0 12px; }
.btn-lg { --btn-h: var(--ctl-lg); padding: 0 22px; font-size: var(--fs-body); }
/* Marketing CTAs only (landing, public nav, final CTA, public bands). Everything in the product is --r-md. */
.btn-pill { border-radius: var(--r-pill); padding-inline: 18px; }
.btn-pill.btn-lg { padding-inline: 24px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); pointer-events: none; box-shadow: none; transform: none; filter: saturate(.55); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-secondary.is-loading::after, .btn-light.is-loading::after { border-color: rgba(20,20,19,.15); border-top-color: var(--ink); }
.btn.is-done { background: var(--success); border-color: var(--success); }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); transition: background var(--d-2), color var(--d-2), transform var(--d-1) var(--ease-press); -webkit-tap-highlight-color: transparent; }
.icon-btn:hover { background: rgba(20,20,19,.06); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }

.link { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--d-2); }
.link:hover { text-decoration-color: currentColor; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; color: var(--ink-3); background: var(--raised); border: 1px solid var(--hairline); box-shadow: 0 1px 0 var(--hairline); }
.on-dark .kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); box-shadow: none; }

/* ================= Form fields ================= */
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink); }
.fld-label .link { font-size: var(--fs-small); }
.fld-hint { font-size: var(--fs-desc); color: var(--ink-2); display: flex; align-items: center; gap: 6px; min-height: 22px; line-height: var(--lh-desc); }
.fld-hint svg { width: 14px; height: 14px; flex: none; }
.fld.is-invalid .fld-hint { color: var(--danger); }
.fld.is-valid .fld-hint { color: var(--success); }
.control { position: relative; display: flex; align-items: center; min-height: var(--ctl-lg); border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--hairline-strong); box-shadow: 0 1px 2px rgba(20,20,19,.04);
  transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), background var(--d-2); }
.control:hover { border-color: var(--ink-4); }
.control:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.fld.is-invalid .control { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.fld.is-invalid .control:focus-within { box-shadow: 0 0 0 3px rgba(181,71,58,.18); }
.control > .lead-icon { width: 18px; height: 18px; margin-left: 14px; color: var(--ink-3); flex: none; }
.control input, .control textarea { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 0; background: transparent; font-size: var(--fs-body); color: var(--ink); }
.control textarea { height: auto; padding: 14px; resize: none; line-height: var(--lh-body); }
.control input::placeholder, .control textarea::placeholder { color: var(--ink-3); }
.control .trail { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.control .state-icon { width: 18px; height: 18px; margin-right: 12px; color: var(--success); opacity: 0; transform: scale(.6); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.fld.is-valid .control .state-icon { opacity: 1; transform: none; }
.fld.shake .control { animation: shake .36s var(--ease-in-out); }
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { transform: none; } }

/* Password strength */
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter i { height: 4px; border-radius: 4px; background: var(--sunken-2); transition: background var(--d-3) var(--ease-out); }
.meter[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-level="2"] i:nth-child(-n+2) { background: var(--brand-orange); }
.meter[data-level="3"] i:nth-child(-n+3) { background: var(--accent); }
.meter[data-level="4"] i { background: var(--success); }
.rules { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); color: var(--ink-2); }
.rules li { display: inline-flex; align-items: center; gap: 6px; transition: color var(--d-2); }
.rules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: background var(--d-2), transform var(--d-2) var(--ease-out); }
.rules li.ok { color: var(--ink); }
.rules li.ok::before { background: var(--success); transform: scale(1.3); }

/* ================= Custom select (listbox) ================= */
.select { position: relative; }
.select-trigger { width: 100%; min-height: var(--ctl-lg); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--hairline-strong); text-align: left; font-size: var(--fs-body); box-shadow: 0 1px 2px rgba(20,20,19,.04); transition: border-color var(--d-2), box-shadow var(--d-2); }
.select-trigger:hover { border-color: var(--ink-4); }
.select-trigger[aria-expanded="true"], .select-trigger:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.select-trigger .value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .value { padding-inline-end: .14em; }
.select-trigger .value.placeholder { color: var(--ink-3); }
.select-trigger .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out); }
.select-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.select.compact .select-trigger { min-height: var(--ctl-md); border-radius: var(--r-md); font-size: var(--fs-ui); padding: 0 10px 0 12px; font-weight: 500; }
.listbox { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-overlay); max-height: 300px; overflow: auto; padding: 6px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-3); transform-origin: top center; }
.select.up .listbox { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.select.compact .listbox { min-width: 240px; right: auto; }
.listbox[hidden] { display: none; }
.option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-ui); color: var(--ink); cursor: pointer; }
.option .meta { margin-left: auto; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.option[aria-selected="true"] { font-weight: 600; }
.option[aria-selected="true"]::after { content: ""; width: 14px; height: 14px; margin-left: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--accent); }
.option.is-active { background: var(--sunken); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-4); }

/* ================= Checkbox / radio / switch ================= */
.check { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.check .box { flex: none; width: 20px; height: 20px; margin-top: 0; border-radius: 6px; border: 1.5px solid var(--ink-4); background: var(--raised); display: grid; place-items: center; transition: background var(--d-2) var(--ease-out), border-color var(--d-2), transform var(--d-1) var(--ease-press); }
.check .box svg { width: 14px; height: 14px; color: #fff; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--d-3) var(--ease-out) 40ms; }
.check:hover .box { border-color: var(--ink-3); }
.check:active .box { transform: scale(.9); }
.check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:indeterminate + .box { background: var(--ink); border-color: var(--ink); }
.check input:indeterminate + .box::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: #fff; }
.check input:indeterminate + .box svg { display: none; }
.check input:focus-visible + .box { box-shadow: var(--focus-ring); border-color: var(--accent); }
.check.radio .box { border-radius: 50%; }
.check.radio input:checked + .box { background: var(--raised); border: 6px solid var(--ink); }
.check.radio .box svg { display: none; }
.check strong { color: var(--ink); font-weight: 500; }
.check.is-invalid .box { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--fs-ui); }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 36px; height: 22px; border-radius: 22px; background: var(--sunken-2); box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); position: relative; transition: background var(--d-3) var(--ease-out); flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,20,19,.25); transition: transform var(--d-3) var(--ease-out); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: var(--focus-ring); }

/* ================= Segmented ================= */
/* Segmented: outer md (10) = inner 7 + 3 padding. Same 40px outer height as buttons and toolbar search. */
.segmented { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-md); background: var(--sunken); box-shadow: inset 0 0 0 1px rgba(20,20,19,.05); isolation: isolate; }
.segmented button { position: relative; z-index: 1; min-height: calc(var(--ctl-md) - 6px); padding: 0 14px; border-radius: 7px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color var(--d-2); }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { color: var(--ink); }
.segmented .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 7px; background: var(--raised); box-shadow: 0 1px 2px rgba(20,20,19,.1), 0 0 0 1px rgba(20,20,19,.05); transition: transform var(--d-4) var(--ease-out), width var(--d-4) var(--ease-out); }
.segmented.no-anim .thumb { transition: none; }

/* ================= Chips (sm controls: 32px, small text, the only pill-shaped control) ================= */
/* 10-09 C6: chips share the button language. Rest = paper with a hairline; hover = the light-catching edge; pressed = the
   brand-mark gradient (white text AA). On the field (.chip-night / .chip-glass) = the hero pill's frosted glass. */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ctl-sm); padding: 0 12px; border-radius: var(--r-pill); background: var(--raised); border: 1px solid var(--hairline-strong); font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: border-color var(--d-2), background var(--d-2), color var(--d-2), box-shadow var(--d-3) var(--ease-out), transform var(--d-1) var(--ease-press); -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: transparent; color: var(--ink); background: linear-gradient(var(--raised), var(--raised)) padding-box, linear-gradient(115deg, rgba(20,20,19,.22), rgba(18,117,216,.55) 42%, rgba(225,145,54,.65) 78%, rgba(20,20,19,.18)) border-box; box-shadow: 0 6px 14px -10px rgba(11,24,48,.4); }
.chip:active { transform: translateY(1px) scale(.98); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { border-color: transparent; color: #fff; background: var(--brand-night-2) linear-gradient(120deg, #0d5bb5 0%, #13254a 54%, #9a5212 100%) 0 50% / 175% 100% no-repeat border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -8px rgba(13,60,140,.6); }
.chip svg { width: 14px; height: 14px; }
.chip .count { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.chip[aria-pressed="true"] .count { color: rgba(255,255,255,.78); }
/* On the field: solid night chips (glass is retired). .chip-glass is an alias. */
.chip-night, .chip-glass { color: #fff; border-color: transparent;
  background: linear-gradient(rgba(9,20,42,.55), rgba(9,20,42,.55)) padding-box, linear-gradient(115deg, rgba(255,255,255,.5), rgba(150,196,255,.28) 38%, rgba(255,210,154,.5) 78%, rgba(255,255,255,.18)) border-box;
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.chip-night:hover, .chip-glass:hover { color: #fff; background: linear-gradient(rgba(9,20,42,.7), rgba(9,20,42,.7)) padding-box, linear-gradient(115deg, rgba(255,255,255,.8), rgba(150,196,255,.45) 38%, rgba(255,210,154,.8) 78%, rgba(255,255,255,.3)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px -12px rgba(5,15,40,.6); }
.chip-night[aria-pressed="true"], .chip-glass[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 6px 16px -8px rgba(5,15,40,.5); }
.chip-night:focus-visible, .chip-glass:focus-visible { outline-color: #fff; }
/* 10-09 C7: a row of chips (filters, popular searches) always wraps. No hidden sideways scroll on any width. */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.chip-row > .chip { flex: none; }

/* ================= Badges ================= */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 500; line-height: 1; white-space: nowrap; background: var(--sunken); color: var(--ink-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.plain::before { display: none; }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-warning { background: var(--warning-tint); color: var(--warning); }
.badge-danger { background: var(--danger-tint); color: var(--danger); }
.badge-info { background: var(--info-tint); color: var(--accent-ink); }
.badge-running { background: var(--info-tint); color: var(--accent-ink); }
.badge-running::before { animation: pulse 1.6s var(--ease-in-out) infinite; box-shadow: 0 0 0 0 rgba(18,117,216,.5); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18,117,216,.45); } 70% { box-shadow: 0 0 0 6px rgba(18,117,216,0); } 100% { box-shadow: 0 0 0 0 rgba(18,117,216,0); } }

/* ================= Tabs ================= */
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); }
.tabs button { position: relative; min-height: var(--ctl-md); padding: 0 12px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); transition: color var(--d-2); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs .ink-bar { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--ink); transition: transform var(--d-4) var(--ease-out), width var(--d-4) var(--ease-out); }

/* ================= Cards ================= */
.card { background: var(--raised); border-radius: var(--r-lg); box-shadow: var(--e-1); }
/* No card-in-card: a card nested in a card is a flat sunken well. Use dividers and type for hierarchy. */
.card .card { background: var(--sunken); box-shadow: none; border-radius: var(--r-md); }
.card-pad { padding: 20px; }
.card-interactive { transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.card-interactive:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.card-head h2, .card-head h3 { font-size: var(--fs-row); font-weight: 600; letter-spacing: var(--ls-row); }
.panel-title { font-size: var(--fs-row); font-weight: 600; color: var(--ink); }

/* ================= Table ================= */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); padding: 0 16px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink-2); }
.table tbody tr { transition: background var(--d-2); }
.table tbody tr:hover { background: rgba(20,20,19,.025); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-title { color: var(--ink); font-weight: 500; }
.table .num { text-align: right; }

/* ================= Progress + stepper ================= */
.progress { height: 6px; border-radius: 6px; background: var(--sunken-2); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-vivid)); transition: width var(--d-5) var(--ease-out); position: relative; }
.progress.is-live > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: sheen 1.8s var(--ease-in-out) infinite; }
@keyframes sheen { to { transform: translateX(100%); } }
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stepper .step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.stepper .step i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-4); display: grid; place-items: center; flex: none; }
.stepper .step.done { color: var(--ink-2); }
.stepper .step.done i { background: var(--ink); border-color: var(--ink); }
.stepper .step.done i::after { content: ""; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: translate(0,-1px) rotate(-45deg); }
.stepper .step.active { color: var(--accent-ink); font-weight: 500; }
.stepper .step.active i { border-color: var(--accent); }
.stepper .step.active i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
.stepper .sep { width: 14px; height: 1px; background: var(--hairline-strong); flex: none; }
.stepper.vertical { flex-direction: column; align-items: stretch; gap: 0; }

/* ================= Menus / popovers ================= */
.menu { position: absolute; z-index: var(--z-overlay); min-width: 240px; padding: 6px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-3); transform-origin: top right; }
.menu[hidden] { display: none; }
.menu a, .menu button.menu-item { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-ui); color: var(--ink); text-align: left; }
.menu a:hover, .menu button.menu-item:hover, .menu .is-active { background: var(--sunken); }
.menu svg { width: 16px; height: 16px; color: var(--ink-3); }
.menu hr { border: 0; height: 1px; background: var(--hairline); margin: 6px 4px; }
.menu .menu-head { padding: 10px 10px 8px; }

/* ================= Toasts ================= */
.toast-region { position: fixed; z-index: var(--z-toast); right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px; padding: 12px 12px 12px 16px; border-radius: var(--r-md); background: var(--ink); color: #fff; box-shadow: 0 18px 40px -12px rgba(11,24,48,.45); font-size: var(--fs-ui); }
.toast .toast-icon { width: 18px; height: 18px; flex: none; color: #7fd6c4; }
.toast .grow { line-height: 1.4; }
.toast .toast-sub { display: block; color: rgba(255,255,255,.62); font-size: var(--fs-small); font-weight: 400; }
.toast .btn { --btn-h: 32px; }

/* ================= Dialog + sheet ================= */
.scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(11,24,48,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.scrim[hidden] { display: none; }
.dialog { position: fixed; z-index: var(--z-dialog); left: 50%; top: 50%; width: min(480px, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 24px; border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--e-4); }
.dialog[hidden] { display: none; }
.dialog .t-heading { margin-bottom: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.sheet { position: fixed; z-index: var(--z-dialog); left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow: auto; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--raised); box-shadow: var(--e-4); }
.sheet[hidden] { display: none; }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--hairline-strong); margin: 0 auto 16px; }

/* ================= States ================= */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.state-art { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 20px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-3); position: relative; }
.state-art svg { width: 28px; height: 28px; }
.state-art.error { background: var(--danger-tint); color: var(--danger); }
.state-art.info { background: var(--accent-tint); color: var(--accent); }
.state p { color: var(--ink-2); max-width: 40ch; font-size: var(--fs-ui); }
.state .btn { margin-top: 12px; }
.skeleton { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--sunken); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-100%); animation: sheen 1.4s var(--ease-in-out) infinite; }
.sk-line { height: 12px; }

/* ================= Alerts ================= */
.alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); font-size: var(--fs-ui); line-height: 1.5; background: var(--info-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--info-line); }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.alert-danger { background: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger-line); }
.alert-danger svg { color: var(--danger); }
.alert-warning { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }
.alert-warning svg { color: var(--warning); }

/* ================= Command palette ================= */
.cmdk { position: fixed; z-index: var(--z-dialog); left: 50%; top: 14vh; width: min(640px, calc(100vw - 24px)); transform: translateX(-50%); border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--e-4); overflow: hidden; }
.cmdk[hidden] { display: none; }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--hairline); }
.cmdk-input svg { width: 18px; height: 18px; color: var(--ink-3); }
.cmdk-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: var(--fs-body); }
.cmdk-input input::placeholder { color: var(--ink-3); }
.cmdk-list { max-height: min(420px, 60vh); overflow: auto; padding: 8px; }
.cmdk-group { padding: 10px 10px 6px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-ui); color: var(--ink); text-align: left; }
.cmdk-item svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.cmdk-item .hint { margin-left: auto; font-size: var(--fs-small); color: var(--ink-3); }
.cmdk-item[aria-selected="true"] { background: var(--sunken); }
.cmdk-item[aria-selected="true"] svg { color: var(--ink); }
.cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hairline); background: var(--surface); font-size: var(--fs-small); color: var(--ink-3); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-empty { padding: 32px 16px; text-align: center; color: var(--ink-3); font-size: var(--fs-ui); }

/* ================= Avatar ================= */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: var(--fs-small); font-weight: 600; color: #fff; background: var(--brand-mark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* ================= Phone: every interactive control is a ≥44px target ================= */
@media (max-width: 640px) {
  .btn { --btn-h: 44px; }
  .btn-sm { --btn-h: 44px; }
  .btn-lg { --btn-h: 52px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip { min-height: 44px; padding: 0 14px; }
  .segmented button { min-height: 44px; }
  .segmented { padding: 2px; }
  .switch { min-height: 44px; }
  .tabs button { min-height: 44px; }
  .option { min-height: 44px; }
  .check { min-height: 44px; align-items: center; }
  .menu a, .menu button.menu-item { min-height: 44px; }
  .select.compact .select-trigger { min-height: 44px; }
  .toast-region { left: 12px; right: 12px; bottom: max(calc(var(--safe-bottom) + 12px), calc(12px + env(safe-area-inset-bottom))); align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ================= Evidence threads ================= */
[data-threads] { position: relative; }
.threads-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.thread-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.thread-end { fill: var(--raised); stroke: var(--accent); stroke-width: 1.5; }
.thread.is-gap .thread-line { stroke: var(--brand-orange); stroke-dasharray: 5 6; }
.thread.is-gap .thread-end { stroke: var(--brand-orange); }
.threads-svg.is-drawn .thread:not(.is-gap) .thread-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.on-dark .thread-line { stroke: rgba(255,255,255,.72); }
.on-dark .thread-end { fill: var(--brand-night); stroke: #fff; }
.on-dark .thread.is-gap .thread-line { stroke: var(--brand-glow); }
.on-dark .thread.is-gap .thread-end { stroke: var(--brand-glow); }
.threads-svg.is-converged .thread-line { stroke-width: 2.25; transition: stroke-width var(--d-4) var(--ease-out); }

/* ================= Field dots ================= */
.dot[data-f="bio"] { background: var(--field-bio); } .dot[data-f="med"] { background: var(--field-med); } .dot[data-f="aiml"] { background: var(--field-aiml); }
.dot[data-f="eng"] { background: var(--field-eng); } .dot[data-f="sci"] { background: var(--field-sci); } .dot[data-f="quant"] { background: var(--field-quant); }
.dot[data-f="biz"] { background: var(--field-biz); } .dot[data-f="policy"] { background: var(--field-policy); } .dot[data-f="ir"] { background: var(--field-ir); }
.dot[data-f="soc"] { background: var(--field-soc); } .dot[data-f="law"] { background: var(--field-law); } .dot[data-f="hum"] { background: var(--field-hum); }

/* ================= Citation chip ================= */
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; margin: 0 1px; border-radius: 6px; vertical-align: 1px; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0; color: var(--accent-ink); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--info-line); }
.cite.gap { color: var(--warning); background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }

/* ================= Evidence threads art (landing principles + auth brand panel) ================= */
.threads-art { margin: 0; position: relative; padding: 40px; border-radius: var(--r-xl); background: var(--sunken); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.threads-art figcaption { grid-column: 1 / -1; position: relative; z-index: 1; }
.ta-sources { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.ta-src { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--e-1); font-size: var(--fs-small); }
.ta-src b { display: block; font-weight: 500; color: var(--ink); }
.ta-src.is-gap { background: rgba(255,255,255,.35); box-shadow: none; border: 1.5px dashed var(--warning-line); }
.ta-src.is-gap .t-mono { color: var(--warning); }
.ta-claim { position: relative; z-index: 1; padding: 20px 22px 20px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-3); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ta-claim-body { display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 1px solid var(--hairline); }
.ta-claim-text { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); font-weight: 500; }
.ta-ports { display: flex; flex-direction: column; gap: 10px; }
.threads-art .threads-svg { z-index: 2; }


.threads-art.on-glass { padding: 0; background: transparent; gap: 48px; }
/* On the field the thread cards are solid night instruments (glass retired). */
.on-glass .ta-src { background: var(--brand-night); color: #fff; box-shadow: inset 0 0 0 1px var(--night-edge), 0 14px 30px -18px rgba(5,15,40,.6); }
.on-glass .ta-src b { color: #fff; }
.on-glass .ta-src .t-mono { color: var(--on-dark-2); }
.on-glass .ta-src.is-gap { background: rgba(11,24,48,.9); border-color: rgba(255,210,154,.6); box-shadow: none; }
.on-glass .ta-src.is-gap .t-mono { color: var(--brand-glow); }
.on-glass .ta-src .cite { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.on-glass .ta-src .cite.gap { color: var(--brand-glow); box-shadow: inset 0 0 0 1px rgba(255,210,154,.5); }
.on-glass .thread-end { fill: #fff; stroke: rgba(255,255,255,.9); }
.on-glass .thread.is-gap .thread-end { fill: var(--brand-glow); stroke: var(--brand-glow); }
.on-glass .ta-claim { box-shadow: 0 30px 60px -24px rgba(5,15,40,.55), 0 0 0 1px rgba(255,255,255,.6); color: var(--ink); }
@media (max-width: 640px) {
  .threads-art { padding: 20px 16px 20px 40px; grid-template-columns: 1fr; gap: 20px; }
  .ta-sources { gap: 10px; }
  .ta-claim { padding: 16px; }
  .threads-art figcaption { margin-left: -20px; }
}

/* Composite controls draw their own focus ring; their inner fields do not add a second one. */
.control input:focus-visible, .control textarea:focus-visible, .cmdk-input input:focus-visible, .composer input:focus-visible, .composer-card textarea:focus-visible { outline: none; }


/* =====================================================================================================
   Stage 3 · shared patterns promoted from the stage-2 lanes (one implementation each).
   ===================================================================================================== */

/* Current item in any menu (shell account / workspace menus) */
.menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu a[aria-current="page"] svg { color: var(--ink); }

/* ---------- Public page band: brand field + glass instrument card + paper sheet that overlaps it ----------
   <section class="hero-band"><div class="field" data-field></div>…<div class="glass-card">…</div></section>
   <div class="paper-sheet">…</div>
   Pages tune the band with --band-top / --band-bottom and the sheet with --sheet-overlap (or their own padding). */
.hero-band { --band-top: clamp(40px, 7vh, 76px); --band-bottom: clamp(104px, 15vh, 148px); position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: calc(var(--nav-h) + var(--band-top)) 0 var(--band-bottom); }
.hero-band > .field { z-index: -1; }
.hero-band--compact { --band-bottom: clamp(88px, 12vh, 116px); }
/* Solid designed surfaces replace glass. Night = instrument (white text, AA anywhere on the field); paper = document on the field.
   .glass-card is kept as an alias of the night instrument so existing markup reads correctly until lanes recompose. */
.surface-night, .glass-card { position: relative; border-radius: var(--r-xl); background: var(--brand-night); color: #fff; box-shadow: inset 0 0 0 1px var(--night-edge), 0 34px 80px -34px rgba(5,15,40,.7); }
.surface-night .t-eyebrow, .glass-card .t-eyebrow { color: var(--on-dark-3); }
.surface-night .ink-2, .surface-night .ink-3, .glass-card .ink-2, .glass-card .ink-3 { color: var(--on-dark-2); }
/* Light cards nested in a night surface read as paper again. */
:is(.surface-night, .glass-card) :is(.ta-claim, .card, .surface-paper, .composer-card) { color: var(--ink); }
:is(.surface-night, .glass-card) :is(.ta-claim, .card, .surface-paper, .composer-card) .t-eyebrow { color: var(--ink-3); }
:is(.surface-night, .glass-card) :is(.ta-claim, .card, .surface-paper, .composer-card) :is(.ink-2, .ink-3) { color: var(--ink-2); }
.surface-paper { position: relative; border-radius: var(--r-xl); background: var(--raised); color: var(--ink); box-shadow: 0 34px 80px -34px rgba(5,15,40,.55), 0 0 0 1px rgba(20,20,19,.06); }
.paper-sheet { --sheet-overlap: 48px; position: relative; z-index: 2; background: var(--paper); border-radius: var(--r-2xl) var(--r-2xl) 0 0; margin-top: calc(var(--sheet-overlap) * -1); padding: clamp(48px, 7vw, 72px) 0 var(--s-10); }

/* ---------- Disclosure / accordion: one behaviour (HyleUI.disclosure), two looks ----------
   Row look:     .acc > .acc-btn[aria-expanded][aria-controls] (.acc-ico plus → cross) + .acc-panel > .acc-inner
   Compact look: .disclose > .disclose-btn (chevron) + .disclose-list */
.acc-list { margin-top: 32px; border-top: 1px solid var(--hairline); }
.acc { border-bottom: 1px solid var(--hairline); }
.acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 72px; padding: 14px 4px; text-align: left; border-radius: var(--r-sm); }
.acc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); transition: transform var(--d-4) var(--ease-out), background var(--d-3), color var(--d-3); }
.acc-ico svg { width: 16px; height: 16px; }
.acc-btn:hover .acc-ico { background: var(--sunken-2); }
.acc-btn[aria-expanded="true"] .acc-ico { transform: rotate(45deg); background: var(--ink); color: #fff; }
.acc-panel { overflow: hidden; }
.acc-inner { padding: 0 4px 28px; max-width: 64ch; display: flex; flex-direction: column; gap: 14px; }
.disclose { margin-top: 20px; border-top: 1px solid var(--hairline); padding-top: 6px; }
.disclose-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); text-align: left; border-radius: var(--r-sm); transition: color var(--d-2); }
.disclose-btn:hover { color: var(--ink); }
.disclose-btn svg { width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out); flex: none; }
.disclose-btn .disclose-sum { margin-left: auto; font-weight: 400; }
.disclose-btn .disclose-sum + svg { margin-left: 4px; }
.disclose-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.disclose-list { overflow: hidden; }
ul.disclose-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; color: var(--ink-2); }
ul.disclose-list li { display: flex; gap: 10px; align-items: flex-start; }
ul.disclose-list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); flex: none; }

/* ---------- Evidence gap: dashed ochre = not yet approved / published / found ---------- */
.gap-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1.5px dashed var(--warning-line); border-radius: var(--r-sm); background: rgba(225,145,54,.05); color: var(--warning); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; }
.gap-chip svg { width: 14px; height: 14px; flex: none; }
.gap-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px dashed var(--warning-line); border-radius: var(--r-md); background: rgba(225,145,54,.05); color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.gap-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--warning); }
.gap-note strong { color: var(--ink); font-weight: 600; }

/* ---------- Composer card + starter chips (home, wizard) ---------- */
.composer-card { position: relative; border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--e-2); transition: box-shadow var(--d-3) var(--ease-out); }
.composer-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(18,117,216,.55), rgba(225,145,54,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--d-4) var(--ease-out); pointer-events: none; }
.composer-card:focus-within { box-shadow: 0 2px 4px rgba(20,20,19,.04), 0 24px 48px -20px rgba(18,117,216,.28), 0 0 0 1px rgba(20,20,19,.04); }
.composer-card:focus-within::before { opacity: 1; }
.starters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 22px 14px; border-top: 1px solid var(--hairline); background: var(--surface); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.starters > .t-small { margin-right: 4px; }
.starters .dot { width: 7px; height: 7px; }
.chip-more { color: var(--ink-3); border-color: transparent; background: transparent; }

/* ---------- Forest-plot marks (home, share, notifications) ---------- */
.forest { width: 100%; height: auto; overflow: visible; }
.forest text { font-family: var(--font-sans); font-size: var(--fs-small); fill: var(--ink-2); }
.f-null { stroke: var(--ink-4); stroke-dasharray: 3 4; }
.f-ci { stroke: var(--success); stroke-width: 2; stroke-linecap: round; }
.f-pt { fill: var(--success); stroke: var(--sunken); stroke-width: 2; }
.f-ci.is-gap { stroke: var(--brand-orange); stroke-dasharray: 4 4; }
.f-pt.is-gap { fill: var(--brand-orange); }

/* ---------- Settings layout: section rail with scrollspy, grouped rows, inline save state ----------
   .set-layout > (.set-rail > .rail-group / .rail-link / ul.rail-spy[data-spy]) + .set-body > .set-sec > .card.set-card > .set-row
   Behaviour: HyleUI.scrollspy(list) and HyleUI.saveState(el, state, msg, retry). */
.set-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 48px; align-items: start; }
.set-body { display: flex; flex-direction: column; gap: 40px; min-width: 0; max-width: 820px; }
.set-rail { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; gap: 2px; }
.rail-group { padding: 0 10px 8px; margin-top: 22px; }
.rail-group:first-child { margin-top: 0; }
.rail-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); transition: background var(--d-2), color var(--d-2); }
.rail-link svg { width: 18px; height: 18px; color: var(--ink-3); transition: color var(--d-2); flex: none; }
.rail-link:hover { background: rgba(20,20,19,.045); color: var(--ink); }
.rail-link[aria-current="page"] { background: var(--raised); color: var(--ink); box-shadow: var(--e-1); }
.rail-link[aria-current="page"] svg { color: var(--ink); }
.rail-spy { position: relative; margin: 4px 0 12px 19px; border-left: 1px solid var(--hairline); }
.rail-spy a { display: block; padding: 6px 12px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); transition: color var(--d-2); }
.rail-spy a:hover { color: var(--ink); }
.rail-spy a.is-active { color: var(--ink); font-weight: 500; }
.spy-bar { position: absolute; left: -1px; top: 0; width: 2px; height: 31px; border-radius: 2px; background: var(--ink); transform: translateY(var(--spy-y, 0)); transition: transform var(--d-4) var(--ease-out), height var(--d-4) var(--ease-out); opacity: 0; }
.spy-bar.is-on { opacity: 1; }
.set-sec { scroll-margin-top: calc(var(--topbar-h) + 24px); }
.set-sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px 2px; }
.set-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--raised); color: var(--ink-2); box-shadow: var(--e-1); }
.set-ico svg { width: 18px; height: 18px; }
.set-sec-head .t-small, .set-sec-head .t-desc { margin-top: 2px; }
.set-card { position: relative; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; min-height: 72px; padding: 16px 20px; border-top: 1px solid var(--hairline); }
.set-row:first-child { border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.set-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.set-row:only-child { border-radius: var(--r-lg); }
.set-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-row); line-height: var(--lh-row); letter-spacing: var(--ls-row); font-weight: 600; color: var(--ink); }
.set-desc { margin-top: 3px; max-width: 62ch; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.set-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.set-ctl-wide { width: min(400px, 100%); min-width: min(360px, 100%); }
.set-ctl-wide .fld { width: 100%; }
.set-row-stack { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.set-row-block { grid-template-columns: minmax(0, 1fr); background: var(--sunken); }
.set-row-head { min-height: 0; padding-bottom: 12px; }
.set-ctl .switch { min-width: 44px; min-height: 44px; justify-content: center; gap: 0; }
.set-row:not(.set-row-block):not(.set-row-stack):hover { background: rgba(20,20,19,.014); }
.save { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; font-size: var(--fs-small); font-weight: 400; line-height: 1; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); pointer-events: none; white-space: nowrap; }
.save[data-state] { opacity: 1; transform: none; }
.save[data-state="saved"] { color: var(--success); }
.save[data-state="error"] { color: var(--danger); pointer-events: auto; }
.save svg { width: 14px; height: 14px; }
.save .tick path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: save-tick .42s var(--ease-out) .05s forwards; }
@keyframes save-tick { to { stroke-dashoffset: 0; } }
.save .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hairline-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.save .retry { display: inline-flex; align-items: center; min-height: 28px; padding: 0 4px; margin-left: 2px; font-weight: 500; color: var(--danger); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1180px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .set-body { max-width: none; }
  .set-rail { position: static; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent); }
  .set-rail::-webkit-scrollbar { display: none; }
  .rail-group, .rail-spy { display: none; }
  .rail-link { flex: none; min-height: var(--ctl-md); padding: 0 14px 0 12px; border-radius: var(--r-pill); background: var(--raised); box-shadow: var(--e-1); scroll-snap-align: start; }
  .rail-link[aria-current="page"] { background: var(--ink); color: #fff; }
  .rail-link[aria-current="page"] svg { color: #fff; }
}
@media (max-width: 640px) {
  .hero-band { --band-top: 20px; --band-bottom: 72px; }
  .paper-sheet { --sheet-overlap: 40px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .toast .btn { --btn-h: 44px; }
  .set-sec-head { margin-left: 0; }
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .set-ctl { justify-content: flex-start; flex-wrap: wrap; }
  .set-ctl-wide { width: 100%; }
  .set-ctl .segmented { width: 100%; }
  .set-row:has(> .set-ctl > .switch:only-child), .set-row:has(> .set-ctl > .btn-sm:only-child) { grid-template-columns: minmax(0, 1fr) auto; }
  .set-row:has(> .set-ctl > .switch:only-child) .set-ctl, .set-row:has(> .set-ctl > .btn-sm:only-child) .set-ctl { justify-content: flex-end; }
  .set-row-head { grid-template-columns: minmax(0, 1fr) auto; }
  .rail-link { min-height: 44px; }
  .save .retry { min-height: 44px; min-width: 44px; }
}


/* ---------- Toolbar search: one size for every list/search toolbar (40px like .btn on desktop, 44px on phone) ---------- */
.control-search { min-height: var(--ctl-md); border-radius: var(--r-md); }
.control-search > .lead-icon { width: 16px; height: 16px; margin-left: 12px; }
.control-search input { height: 38px; font-size: var(--fs-ui); -webkit-appearance: none; appearance: none; }
.control-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
@media (max-width: 640px) { .control-search { min-height: 44px; } .control-search input { height: 44px; } }

/* =====================================================================================================
   Round 2 · safe area, docks, brand moments
   ===================================================================================================== */

/* ---------- Safe-area contract (phone + tablet, wherever the bottom nav or a dock shows) ----------
   One inset, --safe-bottom (px), written by HyleUI.safeArea(): bottom nav + every visible [data-dock] + device inset.
   Every persistent bottom element carries data-dock and becomes a full-width opaque bar stacked on the nav.
   Floating pills / FABs over content are not part of the system. Transient overlays (toast, sheet, dialog, menu) are exempt. */
@media (max-width: 1024px) {
  /* Geometry is the system's (higher specificity); surface and padding are the page's to tune, but must stay opaque. */
  html body [data-dock] { position: fixed; z-index: var(--z-nav); left: 0; right: 0; top: auto; bottom: var(--dock-offset, var(--dock-base)); width: auto; max-width: none; margin: 0; transform: none; translate: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-dock] { background: var(--dock-bg, var(--raised)); box-shadow: 0 -1px 0 var(--hairline), 0 -12px 24px -22px rgba(20,20,19,.35);
    padding: 8px var(--gutter) calc(8px + var(--dock-inset, 0px)); }
  /* A dock is the top layer of the page. Its ancestors give up their z-index so it is never trapped in a lower stacking
     context and painted under later content (Round 4A: onboarding's footer covered Continue at the end of the page). */
  html body :has([data-dock]:not([hidden])) { z-index: auto; }
  [data-dock][hidden] { display: none; }
  [data-dock] > .btn:only-child { width: 100%; }
  /* Pages without the app shell end above their docks too. */
  body:not(.app-body) { padding-bottom: var(--safe-bottom); }
}

/* ---------- Toolbar: every control in one row shares the md height ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar > .chip, .toolbar .chip-row > .chip { min-height: var(--ctl-md); }
@media (max-width: 640px) { .toolbar > .chip, .toolbar .chip-row > .chip { min-height: 44px; } }

/* ---------- Brand moments in the app (max one per screen; never behind body text) ---------- */
/* Live rule: a 2px field line with a slow sheen while something runs. */
.field-rule { position: relative; height: 2px; border-radius: 2px; background: var(--brand-gradient); overflow: hidden; }
/* The sheen is a highlight painted inside a full-width track (background-position), never a box that travels past the edge:
   a box sweeping beyond the right edge is horizontal overflow, which widens the phone layout viewport and drops the bottom
   nav and docks below the screen (Round 4A). Hosts set the highlight width with background-size. */
.field-rule.is-live::after, .app-top.is-live::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent) no-repeat; background-size: 30% 100%; animation: rule-sheen 2.6s var(--ease-in-out) infinite; pointer-events: none; }
.app-top.is-live { border-bottom-color: transparent !important; }
.app-top.is-live::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-gradient); opacity: .9; }
.app-top.is-live::after { bottom: -1px; top: auto; height: 2px; }
@keyframes rule-sheen { 0% { background-position: -70% 0; } 100% { background-position: 170% 0; } }
/* Field tile: study / workspace marks and first-run empty states. */
.field-tile { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--tile, 40px); height: var(--tile, 40px); border-radius: calc(var(--tile, 40px) * .28); overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(120% 90% at 18% 88%, #1275d8 0%, rgba(18,117,216,0) 62%), radial-gradient(110% 90% at 92% 8%, #e19136 0%, rgba(225,145,54,0) 58%), linear-gradient(135deg, #0d5bb5, #13254a 60%, #b36718); }
.field-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.field-tile svg { width: 44%; height: 44%; }
.state-art.is-brand { background: none; color: #fff; }
.state-art.is-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 90% at 18% 88%, #1275d8 0%, rgba(18,117,216,0) 62%), radial-gradient(110% 90% at 92% 8%, #e19136 0%, rgba(225,145,54,0) 58%), linear-gradient(135deg, #0d5bb5, #13254a 60%, #b36718); }
.state-art { isolation: isolate; }
/* Field panel: one completion / plan moment. Text sits bottom-left, on the blue side, always AA. */
.field-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); color: #fff; background: var(--brand-night); padding: clamp(20px, 3vw, 32px); }
.field-panel > .field { z-index: -1; }
.field-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(200deg, rgba(8,18,40,0) 30%, rgba(8,18,40,.55) 100%); }
.field-panel .t-small, .field-panel .t-mono, .field-panel .t-eyebrow { color: var(--on-dark-2); }
/* Night instrument bar: status lines, order summaries, plan meters. */
.night-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--brand-night); color: #fff; box-shadow: inset 0 0 0 1px var(--night-edge); }
.night-bar .t-small, .night-bar .t-mono { color: var(--on-dark-2); }
/* Official brand wordmark inherits ink/white from its surface. */
.wordmark { gap: 0; }
a.focus-brand, a.spec-bar-brand { min-height: 44px; min-width: 44px; }
.hy-wordmark { display: block; flex: none; width: auto; height: 30px; aspect-ratio: 1919 / 950; fill: currentColor; overflow: visible; }
.hy-name { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }
.hy-name .hy-wordmark { height: 20px; }
.focus-brand .wordmark, .spec-bar-brand .wordmark { min-height: 0; min-width: 0; }
.hy-avatar { --avatar-size: 32px; display: inline-flex; flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: clamp(8px, calc(var(--avatar-size) * .25), 12px); overflow: hidden; vertical-align: middle; background: #a48aff; }
.hy-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hy-avatar.is-sm { --avatar-size: 24px; }
.hy-avatar.is-md { --avatar-size: 32px; }
.hy-avatar.is-lg { --avatar-size: 40px; }
.hy-avatar.is-xl { --avatar-size: 56px; }
@media (max-width: 640px) { .wordmark .hy-wordmark { height: 26px; } }

/* =====================================================================================================
   Leading visuals (Audit-fix A) — give every card and list row a meaningful lead instead of a bare dot.
     .field-glyph[data-f]   field icon on its field tint (sizes .is-sm 32 · 40 · .is-lg 48 · .is-xl 64; .is-solid = filled)
     .file-badge[data-type] document shape, folded corner, type code in mono (sizes .is-sm 32 · 40 · .is-lg 48)
     .fig-thumb > img       figure-type thumbnail from assets/fields/*-t.webp or assets/figures-pro/thumbs/*.png
                             (.is-sm 48 · 64 · .is-lg 96 · .is-wide full width 16:10; [data-f] adds the field edge)
     .lead-stack            thumbnail with a field glyph or file badge pinned to its corner
   Lanes: put the lead in the first grid column of .list-row (auto) or at the top of a card. Leads are decorative
   (aria-hidden) unless they carry information the row text does not.
   ===================================================================================================== */
.field-glyph { --fg: var(--ink-3); --s: 40px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); color: var(--fg);
  background: color-mix(in srgb, var(--fg) 11%, var(--raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent); }
.field-glyph svg { width: 48%; height: 48%; stroke-width: 1.9; }
.field-glyph.is-sm { --s: 32px; } .field-glyph.is-lg { --s: 48px; } .field-glyph.is-xl { --s: 64px; }
.field-glyph.is-solid { color: #fff; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--fg) 70%, #fff), var(--fg) 70%); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--fg) 90%, transparent), inset 0 0 0 1px rgba(255,255,255,.12); }
.field-glyph[data-f="bio"] { --fg: var(--field-bio); } .field-glyph[data-f="med"] { --fg: var(--field-med); } .field-glyph[data-f="aiml"] { --fg: var(--field-aiml); }
.field-glyph[data-f="eng"] { --fg: var(--field-eng); } .field-glyph[data-f="sci"] { --fg: var(--field-sci); } .field-glyph[data-f="quant"] { --fg: var(--field-quant); }
.field-glyph[data-f="biz"] { --fg: var(--field-biz); } .field-glyph[data-f="policy"] { --fg: var(--field-policy); } .field-glyph[data-f="ir"] { --fg: var(--field-ir); }
.field-glyph[data-f="soc"] { --fg: var(--field-soc); } .field-glyph[data-f="law"] { --fg: var(--field-law); } .field-glyph[data-f="hum"] { --fg: var(--field-hum); }

.file-badge { --fb: var(--ink-2); --s: 40px; position: relative; flex: none; display: inline-flex; align-items: flex-end; justify-content: center; width: calc(var(--s) * .86); height: var(--s); padding: 0 0 calc(var(--s) * .16);
  border-radius: 5px 9px 5px 5px; background: linear-gradient(180deg, var(--raised), #f8f6f0); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 2px rgba(20,20,19,.06);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--fb); clip-path: polygon(0 0, 66% 0, 100% 26%, 100% 100%, 0 100%); }
.file-badge::before { content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 26%; border-bottom-left-radius: 4px; background: color-mix(in srgb, var(--fb) 22%, var(--sunken-2)); }
.file-badge::after { content: ""; position: absolute; left: 7px; right: 7px; top: calc(var(--s) * .3); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fb) 55%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--fb) 26%, transparent); }
.file-badge.is-sm { --s: 32px; } .file-badge.is-sm::after { display: none; } .file-badge.is-lg { --s: 48px; }
.file-badge[data-type="pdf"] { --fb: #a63d31; }
.file-badge[data-type="csv"], .file-badge[data-type="xlsx"], .file-badge[data-type="xls"], .file-badge[data-type="tsv"] { --fb: #0d6f62; }
.file-badge[data-type="docx"], .file-badge[data-type="doc"], .file-badge[data-type="md"], .file-badge[data-type="tex"] { --fb: #0f63b8; }
.file-badge[data-type="png"], .file-badge[data-type="jpg"], .file-badge[data-type="svg"], .file-badge[data-type="tif"] { --fb: #7e3b77; }
.file-badge[data-type="py"], .file-badge[data-type="ipynb"], .file-badge[data-type="r"], .file-badge[data-type="rmd"] { --fb: #5a3fc4; }
.file-badge[data-type="bib"], .file-badge[data-type="ris"] { --fb: #8a4f0d; }
.file-badge[data-type="zip"], .file-badge[data-type="json"], .file-badge[data-type="txt"] { --fb: var(--ink-2); }

.fig-thumb { --w: 64px; position: relative; flex: none; display: block; width: var(--w); aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--raised);
  box-shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgba(20,20,19,.06); }
.fig-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform var(--d-4) var(--ease-out); }
.fig-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(20,20,19,.05), inset 0 -18px 24px -20px rgba(20,20,19,.18); }
.fig-thumb[data-f]::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fg, var(--accent)); }
.fig-thumb[data-f="bio"] { --fg: var(--field-bio); } .fig-thumb[data-f="med"] { --fg: var(--field-med); } .fig-thumb[data-f="aiml"] { --fg: var(--field-aiml); }
.fig-thumb[data-f="eng"] { --fg: var(--field-eng); } .fig-thumb[data-f="sci"] { --fg: var(--field-sci); } .fig-thumb[data-f="quant"] { --fg: var(--field-quant); }
.fig-thumb[data-f="biz"] { --fg: var(--field-biz); } .fig-thumb[data-f="policy"] { --fg: var(--field-policy); } .fig-thumb[data-f="ir"] { --fg: var(--field-ir); }
.fig-thumb[data-f="soc"] { --fg: var(--field-soc); } .fig-thumb[data-f="law"] { --fg: var(--field-law); } .fig-thumb[data-f="hum"] { --fg: var(--field-hum); }
.fig-thumb.is-sm { --w: 48px; } .fig-thumb.is-lg { --w: 96px; border-radius: var(--r-lg); }
.fig-thumb.is-wide { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
:is(a, button, .card-interactive, .list-row):hover .fig-thumb img { transform: scale(1.04); }
.lead-stack { position: relative; flex: none; display: inline-block; }
.lead-stack > .field-glyph, .lead-stack > .file-badge { position: absolute; right: -6px; bottom: -6px; box-shadow: 0 0 0 2px var(--raised), 0 4px 10px -6px rgba(20,20,19,.4); }
.lead-stack > .field-glyph { --s: 24px; border-radius: 8px; }
.list-row > .lead, .list-row > .field-glyph, .list-row > .file-badge, .list-row > .fig-thumb, .list-row > .lead-stack { align-self: center; }

/* =====================================================================================================
   Interaction states (Audit-fix A) — tokens in tokens.css "Interaction states". Opt-in helpers for lanes:
     .is-hoverable  tint on hover          .is-pressable   press tint + 1px settle      .is-liftable  card lift
     .is-selectable selected = raised + edge + field bar ([aria-selected=true] | [aria-current] | .is-selected)
     [data-busy] (+ aria-busy="true")  loading region: dims and blocks it, sheen across it (opt-in; aria-busy alone only announces)
     .skeleton-line / .skeleton-thumb / .skeleton-row   loading placeholders (sheen from .skeleton)
     .state.is-empty | .is-noresults | .is-error | .is-offline   empty / error blocks (art + line + one action)
   ===================================================================================================== */
.is-hoverable, .is-pressable, .is-liftable, .is-selectable { position: relative; transition: background var(--d-2), box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), color var(--d-2); }
.is-hoverable:hover { background: var(--hover-tint); }
.is-pressable:active { background: var(--press-tint); transform: translateY(var(--press-shift)); }
.is-liftable:hover { box-shadow: var(--e-2); transform: translateY(var(--hover-lift)); }
.is-liftable:active { box-shadow: var(--e-1); transform: translateY(0); }
.is-selectable:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected) { background: var(--selected-bg); box-shadow: var(--selected-edge); }
.is-selectable:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-selected)::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--selected-bar); }
:is(.is-hoverable, .is-pressable, .is-liftable, .is-selectable, .card-interactive, .list-row):focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.card-interactive:focus-within:not(:focus) { box-shadow: var(--e-2), var(--focus-ring); }
.card-interactive:active { transform: translateY(0); box-shadow: var(--e-1); }
.list-row:active { background: var(--press-tint); }
.list-row:is([aria-selected="true"], .is-selected) { background: var(--selected-bg); box-shadow: var(--selected-edge); }
/* Specimen states: [data-force] renders a state statically (system board, lane specimens). */
.list-row[data-force="hover"], .is-hoverable[data-force="hover"] { background: var(--hover-tint); }
.list-row[data-force="hover"] .fig-thumb img { transform: scale(1.04); }
.is-liftable[data-force="hover"], .card-interactive[data-force="hover"] { box-shadow: var(--e-2); transform: translateY(var(--hover-lift)); }
.list-row[data-force="active"], .is-pressable[data-force="active"] { background: var(--press-tint); }
[data-force="focus"] { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.list-row[data-force="focus"] { outline-offset: -2px; border-radius: var(--r-sm); }
:is(button, .btn, .chip, .icon-btn, .control):is([disabled], [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; }
.icon-btn:active { background: var(--press-tint); }
.icon-btn[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); }
[data-busy] { position: relative; }
[data-busy]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: auto; cursor: progress;
  background: linear-gradient(90deg, rgba(250,249,245,.55), var(--loading-sheen), rgba(250,249,245,.55)) 0 0 / 300% 100% no-repeat; animation: busy-sheen 1.4s var(--ease-in-out) infinite; }
@keyframes busy-sheen { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton-line { display: block; height: .8em; border-radius: 4px; background: var(--loading-base); position: relative; overflow: hidden; }
.skeleton-line + .skeleton-line { margin-top: .6em; }
.skeleton-line.is-short { width: 42%; } .skeleton-line.is-mid { width: 68%; }
.skeleton-thumb { display: block; width: 64px; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--loading-base); position: relative; overflow: hidden; }
.skeleton-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--hairline); }
.skeleton-line::after, .skeleton-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--loading-sheen), transparent); transform: translateX(-100%); animation: sheen 1.4s var(--ease-in-out) infinite; }
.state.is-empty .state-art, .state.is-noresults .state-art { width: var(--empty-art); height: var(--empty-art); }
.state.is-noresults .state-art { background: var(--sunken); color: var(--ink-3); }
.state.is-error .state-art { background: var(--danger-tint); color: var(--danger); }
.state.is-offline .state-art { background: var(--warning-tint); color: var(--warning); }
.state.is-inline { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-lg); background: var(--sunken); }
.state.is-inline .state-art { margin: 0; width: 48px; height: 48px; border-radius: 14px; }
.state.is-inline .btn { margin: 0 0 0 auto; }
@media (prefers-reduced-motion: reduce) { [data-busy]::after, .skeleton-line::after, .skeleton-thumb::after { animation: none !important; } }

/* Bounded integer skeleton widths used by the authored demo templates. */
.skeleton.sk-line.sk-w-0{width:0%}
.skeleton.sk-line.sk-w-1{width:1%}
.skeleton.sk-line.sk-w-2{width:2%}
.skeleton.sk-line.sk-w-3{width:3%}
.skeleton.sk-line.sk-w-4{width:4%}
.skeleton.sk-line.sk-w-5{width:5%}
.skeleton.sk-line.sk-w-6{width:6%}
.skeleton.sk-line.sk-w-7{width:7%}
.skeleton.sk-line.sk-w-8{width:8%}
.skeleton.sk-line.sk-w-9{width:9%}
.skeleton.sk-line.sk-w-10{width:10%}
.skeleton.sk-line.sk-w-11{width:11%}
.skeleton.sk-line.sk-w-12{width:12%}
.skeleton.sk-line.sk-w-13{width:13%}
.skeleton.sk-line.sk-w-14{width:14%}
.skeleton.sk-line.sk-w-15{width:15%}
.skeleton.sk-line.sk-w-16{width:16%}
.skeleton.sk-line.sk-w-17{width:17%}
.skeleton.sk-line.sk-w-18{width:18%}
.skeleton.sk-line.sk-w-19{width:19%}
.skeleton.sk-line.sk-w-20{width:20%}
.skeleton.sk-line.sk-w-21{width:21%}
.skeleton.sk-line.sk-w-22{width:22%}
.skeleton.sk-line.sk-w-23{width:23%}
.skeleton.sk-line.sk-w-24{width:24%}
.skeleton.sk-line.sk-w-25{width:25%}
.skeleton.sk-line.sk-w-26{width:26%}
.skeleton.sk-line.sk-w-27{width:27%}
.skeleton.sk-line.sk-w-28{width:28%}
.skeleton.sk-line.sk-w-29{width:29%}
.skeleton.sk-line.sk-w-30{width:30%}
.skeleton.sk-line.sk-w-31{width:31%}
.skeleton.sk-line.sk-w-32{width:32%}
.skeleton.sk-line.sk-w-33{width:33%}
.skeleton.sk-line.sk-w-34{width:34%}
.skeleton.sk-line.sk-w-35{width:35%}
.skeleton.sk-line.sk-w-36{width:36%}
.skeleton.sk-line.sk-w-37{width:37%}
.skeleton.sk-line.sk-w-38{width:38%}
.skeleton.sk-line.sk-w-39{width:39%}
.skeleton.sk-line.sk-w-40{width:40%}
.skeleton.sk-line.sk-w-41{width:41%}
.skeleton.sk-line.sk-w-42{width:42%}
.skeleton.sk-line.sk-w-43{width:43%}
.skeleton.sk-line.sk-w-44{width:44%}
.skeleton.sk-line.sk-w-45{width:45%}
.skeleton.sk-line.sk-w-46{width:46%}
.skeleton.sk-line.sk-w-47{width:47%}
.skeleton.sk-line.sk-w-48{width:48%}
.skeleton.sk-line.sk-w-49{width:49%}
.skeleton.sk-line.sk-w-50{width:50%}
.skeleton.sk-line.sk-w-51{width:51%}
.skeleton.sk-line.sk-w-52{width:52%}
.skeleton.sk-line.sk-w-53{width:53%}
.skeleton.sk-line.sk-w-54{width:54%}
.skeleton.sk-line.sk-w-55{width:55%}
.skeleton.sk-line.sk-w-56{width:56%}
.skeleton.sk-line.sk-w-57{width:57%}
.skeleton.sk-line.sk-w-58{width:58%}
.skeleton.sk-line.sk-w-59{width:59%}
.skeleton.sk-line.sk-w-60{width:60%}
.skeleton.sk-line.sk-w-61{width:61%}
.skeleton.sk-line.sk-w-62{width:62%}
.skeleton.sk-line.sk-w-63{width:63%}
.skeleton.sk-line.sk-w-64{width:64%}
.skeleton.sk-line.sk-w-65{width:65%}
.skeleton.sk-line.sk-w-66{width:66%}
.skeleton.sk-line.sk-w-67{width:67%}
.skeleton.sk-line.sk-w-68{width:68%}
.skeleton.sk-line.sk-w-69{width:69%}
.skeleton.sk-line.sk-w-70{width:70%}
.skeleton.sk-line.sk-w-71{width:71%}
.skeleton.sk-line.sk-w-72{width:72%}
.skeleton.sk-line.sk-w-73{width:73%}
.skeleton.sk-line.sk-w-74{width:74%}
.skeleton.sk-line.sk-w-75{width:75%}
.skeleton.sk-line.sk-w-76{width:76%}
.skeleton.sk-line.sk-w-77{width:77%}
.skeleton.sk-line.sk-w-78{width:78%}
.skeleton.sk-line.sk-w-79{width:79%}
.skeleton.sk-line.sk-w-80{width:80%}
.skeleton.sk-line.sk-w-81{width:81%}
.skeleton.sk-line.sk-w-82{width:82%}
.skeleton.sk-line.sk-w-83{width:83%}
.skeleton.sk-line.sk-w-84{width:84%}
.skeleton.sk-line.sk-w-85{width:85%}
.skeleton.sk-line.sk-w-86{width:86%}
.skeleton.sk-line.sk-w-87{width:87%}
.skeleton.sk-line.sk-w-88{width:88%}
.skeleton.sk-line.sk-w-89{width:89%}
.skeleton.sk-line.sk-w-90{width:90%}
.skeleton.sk-line.sk-w-91{width:91%}
.skeleton.sk-line.sk-w-92{width:92%}
.skeleton.sk-line.sk-w-93{width:93%}
.skeleton.sk-line.sk-w-94{width:94%}
.skeleton.sk-line.sk-w-95{width:95%}
.skeleton.sk-line.sk-w-96{width:96%}
.skeleton.sk-line.sk-w-97{width:97%}
.skeleton.sk-line.sk-w-98{width:98%}
.skeleton.sk-line.sk-w-99{width:99%}
.skeleton.sk-line.sk-w-100{width:100%}
/* =====================================================================================================
   Public content patterns · founder review 10-09 (C8)
   What follows the shader band on help, whats-new, notices, trust and the legal pages. One vocabulary, one edge:
   the light-catching blue → amber edge of the buttons, used at rest on icon tiles and lit on hover on link cards.
     .ps-head            section header: Goodly title + one lede line. .is-split puts the lede beside the title (≥ 860).
     .sec-icon            lucide icon on a paper tile with the edge. .is-sm 32 · 40 · .is-lg 48. [data-tone="amber"] for the warm side.
     .rule                divider that fades at both ends. .rule.is-brand starts with a short blue → amber stroke.
     .icon-list > li      icon tile · .il-t title (row step) · .il-d description (desc step); hairlines between rows.
     .c-card              content card: tile, .c-t title, .c-d description, optional .c-go link row. a.c-card lifts and lights its edge.
     .tick-list           prose list with a small field mark instead of the browser disc (legal answers, help answers).
   Page lanes compose these; nothing here changes page copy. Examples live on system.html#patterns.
   ===================================================================================================== */
:root { --edge-rest: linear-gradient(135deg, rgba(18,117,216,.42), rgba(20,20,19,.08) 50%, rgba(225,145,54,.5));
        --edge-lit: linear-gradient(115deg, rgba(20,20,19,.2), rgba(18,117,216,.6) 42%, rgba(225,145,54,.7) 78%, rgba(20,20,19,.18)); }
.ps-head { display: grid; gap: 12px; max-width: 780px; margin-bottom: clamp(28px, 3vw, 48px); }
.ps-head > :is(h2, h3, .t-title) { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--ls-title); color: var(--ink); text-wrap: balance; font-synthesis: none; }
.ps-head > p { max-width: 60ch; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); text-wrap: pretty; }
.ps-head > .sec-icon { margin-bottom: 4px; }
.ps-head.is-split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
.ps-head.is-split > .sec-icon { grid-column: 1 / -1; }
@media (max-width: 860px) { .ps-head.is-split { grid-template-columns: minmax(0, 1fr); } }
.sec-icon { --s: 40px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); color: var(--accent-ink); border: 1px solid transparent;
  background: linear-gradient(var(--raised), var(--surface)) padding-box, var(--edge-rest) border-box; box-shadow: 0 6px 14px -10px rgba(11,24,48,.35); }
.sec-icon svg { width: 50%; height: 50%; stroke-width: 1.8; }
.sec-icon.is-sm { --s: 32px; } .sec-icon.is-lg { --s: 48px; }
.sec-icon[data-tone="amber"] { color: var(--brand-orange-deep); }
.rule { display: block; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--hairline-strong) 6%, var(--hairline-strong) 94%, transparent); }
.rule.is-brand { background: linear-gradient(90deg, var(--brand-blue) 0, var(--brand-orange) 56px, var(--hairline-strong) 56px, var(--hairline-strong) 94%, transparent); }
.icon-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.icon-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.icon-list > li > .sec-icon { grid-row: span 2; }
.icon-list .il-t { font-size: var(--fs-row); font-weight: 600; line-height: var(--lh-row); color: var(--ink); }
.icon-list .il-d { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.c-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--raised); color: var(--ink);
  transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), border-color var(--d-2); }
.c-card > .sec-icon { margin-bottom: 6px; }
.c-card .c-t { font-size: var(--fs-row); font-weight: 600; line-height: var(--lh-row); }
.c-card .c-d { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.c-card .c-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); font-weight: 500; color: var(--accent-ink); }
.c-card .c-go svg { width: 16px; height: 16px; transition: transform var(--d-3) var(--ease-out); }
a.c-card:hover, .c-card.is-link:hover { border-color: transparent; background: linear-gradient(var(--raised), var(--raised)) padding-box, var(--edge-lit) border-box; box-shadow: var(--e-2); transform: translateY(var(--hover-lift)); }
a.c-card:hover .c-go svg { transform: translateX(3px); }
a.c-card:active { transform: translateY(0); box-shadow: var(--e-1); }
a.c-card:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.tick-list { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.tick-list > li { position: relative; padding-left: 22px; }
.tick-list > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--brand-blue), var(--brand-orange)); }
@media (prefers-reduced-motion: reduce) { .c-card, a.c-card:hover { transition: none; transform: none; } }