/* ============================================================================
   stateful-ai.com — "Watch Us Ship" homepage layer
   Loads ON TOP OF styles.css (base reset, :root tokens, three-voice type,
   .kicker/.cta/footer/theme-toggle). This file adds the instrument-panel tokens
   + the studio-floor components. Evolves the editorial brand; never replaces it.
   ========================================================================== */

:root {
  --status-green: #5E8C6A;      /* OPERATIONAL ● + ✓ ticks ONLY (status, not brand) */
  --panel-tab: var(--graphite); /* mono corner-tab label */
  --maxw-floor: 1240px;         /* a hair wider than 1200 — feels like a workspace */
  --scanline: color-mix(in srgb, var(--ink) 6%, transparent);
  --glass: color-mix(in srgb, var(--paper) 80%, transparent);
  --console-ink: #E9E2D6;       /* text on the dark console panels (both themes) */
  --console-bg: #14110F;        /* dark console ground (both themes) */
  --console-bg-2: #1B1713;
  --console-line: #2E2823;
}
[data-theme="dark"] {
  --status-green: #7FB58C;
  --glass: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* ---- sticky console status bar ------------------------------------------- */
.console-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: var(--t-sm);
}
.console-bar .wrap { display: flex; align-items: center; gap: 18px; padding: 9px 0; max-width: var(--maxw-floor); }
.console-bar .cb-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; }
.cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-green) 60%, transparent); animation: cb-breathe 3.2s ease-in-out infinite; }
@keyframes cb-breathe { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-green) 55%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-green) 0%, transparent); } }
.console-bar .cb-stats { display: flex; gap: 16px; color: var(--graphite); overflow: hidden; }
.console-bar .cb-stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.console-bar .cb-snap { margin-left: auto; color: var(--graphite); white-space: nowrap; }
.console-bar .cb-k { border: 1px solid var(--hairline); border-radius: 5px; padding: 2px 7px; color: var(--graphite); cursor: pointer; background: none; font-family: var(--font-mono); font-size: var(--t-xs); }
.console-bar .cb-k:hover { border-color: var(--vermilion); color: var(--ink); }
@media (max-width: 820px) {
  .console-bar .cb-stats { display: none; }
  .console-bar .cb-snap { font-size: var(--t-xs); }
}

/* ---- panel + corner tab -------------------------------------------------- */
.floor { max-width: var(--maxw-floor); margin: 0 auto; padding-inline: var(--gutter, clamp(20px,5vw,64px)); }
.panel {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-2);
  padding: clamp(20px, 3vw, 34px);
}
.panel > .tab, .wing > .tab, .sec-tab {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .04em; color: var(--panel-tab);
  display: inline-block; margin-bottom: 14px;
}
.sec-tab .num { color: var(--vermilion); }
.floor-section { padding-block: clamp(44px, 7vw, 84px); }

/* ---- hero ---------------------------------------------------------------- */
.floor-hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 64px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.04fr 0.96fr; align-items: start; } }
.hero-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 0.98; font-size: var(--t-hero, clamp(2.75rem, 6vw, 5rem)); margin: 6px 0 0; }
.hero-h .mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--vermilion) 32%, transparent) 0); padding: 0 .04em; }
.hero-lede { font-family: var(--font-serif); font-size: var(--t-lg); line-height: 1.4; color: var(--graphite); max-width: 40ch; margin: 22px 0 0; }
.hero-lede b { color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
.btn { font-family: var(--font-mono); font-size: var(--t-sm); padding: 12px 20px; border-radius: 9px; text-decoration: none; border: 1px solid var(--ink); transition: transform .15s ease, background .15s ease, color .15s ease; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.btn-ghost { background: none; color: var(--ink); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--vermilion); color: var(--vermilion); }

/* hero right column */
.hero-right { display: flex; flex-direction: column; gap: 16px; }

/* work mosaic — 4 framed product loops */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaic a { position: relative; display: block; border: 1px solid var(--hairline); border-radius: 11px; overflow: hidden; aspect-ratio: 4/3; background: var(--console-bg); text-decoration: none; }
.mosaic a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mosaic a:hover img { transform: scale(1.04); }
.mosaic a .m-label { position: absolute; left: 9px; bottom: 8px; font-family: var(--font-mono); font-size: var(--t-xs); color: #fff; background: color-mix(in srgb, var(--console-bg) 72%, transparent); padding: 3px 8px; border-radius: 6px; letter-spacing: .03em; }
.mosaic a .m-open { position: absolute; right: 9px; top: 8px; font-family: var(--font-mono); font-size: var(--t-xs); color: #fff; opacity: 0; transition: opacity .15s ease; }
.mosaic a:hover .m-open { opacity: 1; }

/* ---- the console panels (dark, scanline) --------------------------------- */
.console {
  position: relative; overflow: hidden;
  background: var(--console-bg); color: var(--console-ink);
  border: 1px solid var(--console-line); border-radius: 12px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.62;
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
  opacity: .5; mix-blend-mode: overlay; }
.console-titlebar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--console-line); }
.console-titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #3a332c; display: inline-block; }
.console:focus-within .console-titlebar i:first-child { background: var(--vermilion); }
.console-titlebar span { margin-left: 8px; color: #8a807a; font-size: 12px; }
.console-body { padding: 14px 16px; }
.console-body .out { white-space: pre-wrap; margin: 0; min-height: 6.2em; }
.console .ln-prompt { color: var(--vermilion); }
.console .ln-dim { color: #847a72; }
.console .ln-ok { color: var(--status-green); }
.console .ln-link { color: #8fb7ff; }
.console-input-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--console-line); padding: 10px 16px; }
.console-input-row .ps1 { color: var(--vermilion); }
.console-input-row input { flex: 1; background: none; border: none; outline: none; color: var(--console-ink); font-family: var(--font-mono); font-size: 13px; caret-color: var(--vermilion); }
.console-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 14px; }
.console-chips a, .console-chips button { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--console-ink); background: var(--console-bg-2); border: 1px solid var(--console-line); border-radius: 6px; padding: 4px 9px; cursor: pointer; text-decoration: none; }
.console-chips a:hover, .console-chips button:hover { border-color: var(--vermilion); color: #fff; }

/* ---- the shipping feed (one moving surface) ------------------------------ */
.feed { background: var(--console-bg); color: var(--console-ink); border: 1px solid var(--console-line); border-radius: 12px; overflow: hidden; position: relative; }
.feed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px); opacity: .5; mix-blend-mode: overlay; }
.feed-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--console-line); font-family: var(--font-mono); font-size: var(--t-xs); color: #8a807a; }
.feed-head .lp { color: var(--vermilion); }
.feed-head .chain { margin-left: auto; letter-spacing: .04em; }
.feed-rows { list-style: none; margin: 0; padding: 6px 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; min-height: 230px; }
.feed-rows li { display: flex; gap: 10px; padding: 3px 16px; white-space: nowrap; overflow: hidden; transition: background .3s ease; }
.feed-rows li.on { background: color-mix(in srgb, var(--vermilion) 9%, transparent); }
.feed-rows li .t { color: #847a72; }
.feed-rows li .pr { color: #8fb7ff; }
.feed-rows li .ok { color: var(--status-green); }
.feed-rows li .ti { color: var(--console-ink); overflow: hidden; text-overflow: ellipsis; }
.feed-rows li.on .caret { color: var(--vermilion); animation: blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- the printing run (artifact chain) ----------------------------------- */
.run-line { white-space: pre-wrap; }
.run .gate { color: var(--amber-text); }
.run a.receipt { color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px; }
.run-chip { font-family: var(--font-mono); font-size: var(--t-xs); color: #8a807a; margin-top: 10px; display: inline-flex; gap: 12px; }
.run-chip button { background: none; border: 1px solid var(--console-line); color: #8a807a; border-radius: 6px; padding: 3px 9px; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-xs); }
.run-chip button:hover { border-color: var(--vermilion); color: #fff; }

/* ---- the run: a real, readable thread (scope → ship) --------------------- */
.run-intro { font-family: var(--font-serif); font-size: var(--t-lg); line-height: 1.45; color: var(--graphite); max-width: 64ch; margin: 0 0 26px; }
.run-intro .run-meta { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.run-intro code, .msg-body code { font-family: var(--font-mono); font-size: .86em; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 5px; padding: 1px 5px; }
.streamlog { display: flex; flex-direction: column; border-left: 2px solid var(--hairline); margin-left: 7px; }
.msg { position: relative; padding: 18px 0 18px 26px; border-bottom: 1px solid var(--hairline); transition: opacity .5s ease, transform .5s ease; }
.msg:last-child { border-bottom: none; }
.msg::before { content: ""; position: absolute; left: -8px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2px solid var(--graphite); }
.msg-head { font-family: var(--font-mono); font-size: var(--t-sm); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.msg-head .who { color: var(--ink); font-weight: 600; }
.msg-head .meta { color: var(--graphite); font-size: var(--t-xs); letter-spacing: .03em; }
.msg-body { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.58; color: var(--ink); max-width: 74ch; }
.msg-drop { background: color-mix(in srgb, var(--vermilion) 4%, transparent); margin-left: -26px; padding-left: 26px; border-radius: 0 10px 10px 0; }
.msg-drop .who { color: var(--vermilion); }
.msg-flag::before { border-color: var(--vermilion); background: var(--vermilion); }
.msg-flag .who { color: var(--vermilion); }
.msg-memo { margin-top: 11px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); border: 1px dashed var(--hairline); border-radius: 8px; padding: 7px 11px; display: inline-block; }
.msg-memo span { color: var(--ink); }
.msg-gate::before { border-color: var(--amber-text); background: color-mix(in srgb, var(--amber) 35%, var(--paper)); }
.msg-gate .who { color: var(--amber-text); }
.msg-gate .msg-body { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--graphite); }
.streamlog.replaying .msg { opacity: 0; transform: translateY(10px); }
.streamlog.replaying .msg.show { opacity: 1; transform: none; }
.run-chip { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--graphite); margin-top: 20px; display: flex; gap: 13px; align-items: center; }
.run-chip button { background: none; border: 1px solid var(--hairline); color: var(--ink); border-radius: 8px; padding: 8px 15px; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-sm); }
.run-chip button:hover { border-color: var(--vermilion); color: var(--vermilion); }
@media (prefers-reduced-motion: reduce) { .msg { transition: none; } .streamlog.replaying .msg { opacity: 1; transform: none; } }

/* ---- the big board ------------------------------------------------------- */
.board { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .board { grid-template-columns: repeat(4, 1fr); } }
.board .cell { background: var(--paper-2); padding: clamp(20px,3vw,32px); text-align: left; }
.board .cell .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.board .cell .l { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); margin-top: 9px; display: block; }
.board .cell.metered .n { color: var(--status-green); }
.board .cell .verify { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--vermilion); text-decoration: none; margin-top: 7px; display: inline-block; opacity: 0; transition: opacity .15s; }
.board .cell:hover .verify { opacity: 1; }

/* ---- provenance note (the "powered by the repo" proof) ------------------- */
.provenance { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.6; color: var(--graphite); max-width: 74ch; margin: 18px 0 0; }
.provenance a { color: var(--vermilion); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--vermilion) 40%, transparent); }
.provenance a:hover { border-bottom-color: var(--vermilion); }
.cb-snap a { color: inherit; text-decoration: none; }
.cb-snap a:hover { color: var(--ink); }
.feed-head a { color: var(--vermilion); text-decoration: none; }
.feed-head a:hover { text-decoration: underline; }
[data-theme="dark"] .feed-head a, .feed-head a { color: #E8593F; }

/* ---- gallery wings (break the panel rhythm — near full-bleed) ------------ */
.wing { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--hairline); }
.wing-band { width: 100%; height: clamp(150px, 19vw, 250px); background-size: cover; background-position: center; position: relative; }
.wing-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--paper)); }
.wing .wing-head { max-width: var(--maxw-floor); margin: 0 auto 22px; padding-inline: var(--gutter, clamp(20px,5vw,64px)); }
.wing-band + .wing-head { margin-top: -34px; position: relative; }
.wing .wing-head h2 { font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: -.02em; margin: 8px 0 6px; }
.wing .wing-head p { font-family: var(--font-serif); color: var(--graphite); max-width: 58ch; margin: 0; }
.wing .wing-head .count { color: var(--vermilion); font-family: var(--font-mono); font-size: var(--t-sm); }
.wing-grid { max-width: var(--maxw-floor); margin: 0 auto; padding-inline: var(--gutter, clamp(20px,5vw,64px)); display: grid; gap: 14px; }
.wing-worlds .wing-grid, .wing-learn .wing-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wing-tools .wing-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wing-toolbelt .wing-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

/* ---- app tile (one card schema, typed chrome) ---------------------------- */
.apptile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper-2); text-decoration: none; color: inherit; overflow: hidden; transition: transform .16s ease, border-color .16s ease; }
.apptile:hover { transform: translateY(-3px); border-color: var(--vermilion); }
.apptile .chrome { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.apptile .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.apptile.is-cli .chrome { background: var(--console-bg); color: #8a807a; border-bottom-color: var(--console-line); }
.apptile.is-cli .chrome .ps1 { color: var(--vermilion); }
.apptile .body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.apptile .glyph { font-family: var(--font-mono); font-size: 22px; color: var(--vermilion); line-height: 1; }
.apptile .name { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; }
.apptile .hook { font-family: var(--font-serif); font-size: .95rem; line-height: 1.45; color: var(--graphite); flex: 1; }
.apptile .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.apptile .receipt { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.apptile .receipt::before { content: "✓ "; color: var(--status-green); }
.apptile .chip { font-family: var(--font-mono); font-size: var(--t-xs); padding: 2px 8px; border-radius: 5px; letter-spacing: .04em; white-space: nowrap; }
.chip-play { background: color-mix(in srgb, var(--vermilion) 14%, transparent); color: var(--vermilion); border: 1px solid color-mix(in srgb, var(--vermilion) 35%, transparent); }
.chip-cli { background: var(--paper); color: var(--graphite); border: 1px solid var(--hairline); }
.apptile .open { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--vermilion); }
/* learn family gets a sage edge-light */
.wing-learn .apptile:hover { border-color: var(--sage); }
.wing-learn .apptile .glyph { color: var(--sage); }

/* compact toolbelt tile */
.apptile.tb { }
.apptile.tb .body { padding: 13px 15px; gap: 4px; }
.apptile.tb .name { font-size: 1rem; }
.apptile.tb .hook { font-size: .85rem; }
.apptile.tb .chrome { display: none; }
.apptile.tb { background: var(--paper-2); }

/* ---- meet the six -------------------------------------------------------- */
.crew { max-width: var(--maxw-floor); margin: 0 auto; padding-inline: var(--gutter, clamp(20px,5vw,64px)); display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.agentcard { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper-2); padding: 16px 18px; }
.agentcard .ag-glyph { font-size: 26px; line-height: 1; }
.agentcard .ag-glyph-img { width: 44px; height: 44px; flex: 0 0 44px; image-rendering: pixelated; border-radius: 9px; border: 1px solid var(--hairline); background: var(--paper); padding: 3px; }
.agentcard .ag-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.agentcard .ag-id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.agentcard .ag-role { font-family: var(--font-serif); font-size: .9rem; color: var(--graphite); margin-top: 5px; line-height: 1.4; }

/* ---- verify block -------------------------------------------------------- */
.verify-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-family: var(--font-mono); font-size: var(--t-sm); }
.verify-list li { display: flex; gap: 10px; align-items: baseline; }
.verify-list li::before { content: "✓"; color: var(--status-green); }
.verify-list a { color: var(--vermilion); text-decoration: none; }
.verify-list a:hover { text-decoration: underline; }

/* ---- colophon ------------------------------------------------------------ */
.colophon { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); line-height: 1.7; }
.colophon b { color: var(--ink); }

/* ============================================================================
   SUB-PAGES (/gallery, /agents, /run, /how) — share the tokens + components
   ========================================================================== */
.subnav { position: sticky; top: 0; z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.subnav .wrap { display: flex; align-items: center; gap: 18px; padding: 11px 0; max-width: var(--maxw-floor); }
.subnav-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.subnav-brand .word { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.subnav-brand .dot { color: var(--vermilion); }
.subnav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--t-sm); }
.subnav-links a { color: var(--graphite); text-decoration: none; padding: 6px 11px; border-radius: 7px; }
.subnav-links a:hover { color: var(--ink); background: var(--paper-2); }
.subnav-links a.on { color: var(--vermilion); }
@media (max-width: 720px) { .subnav-links a:not(.on) { display: none; } .subnav-links .theme-toggle { display: inline-block; } }

.page-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.0; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 8px 0 0; }
.page-h .count { color: var(--vermilion); font-size: .5em; vertical-align: middle; }
.page-lede { font-family: var(--font-serif); font-size: var(--t-lg); line-height: 1.45; color: var(--graphite); max-width: 64ch; margin: 18px 0 0; }
.page-lede a, .page-lede b { color: var(--ink); }
.page-lede a { color: var(--vermilion); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--vermilion) 40%, transparent); }

/* gallery filter + typeset index */
.gfilter { display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0 8px; }
.gf { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--graphite); background: none; border: 1px solid var(--hairline); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.gf span { color: var(--vermilion); }
.gf:hover { border-color: var(--vermilion); color: var(--ink); }
.gf.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gf.on span { color: color-mix(in srgb, var(--paper) 70%, var(--vermilion)); }
.ix-sec { margin-top: 40px; }
.ix-sec .sec-tab { display: block; }
.ix-blurb { font-family: var(--font-serif); color: var(--graphite); margin: 4px 0 14px; max-width: 60ch; }
.ix-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.ix-row { display: grid; grid-template-columns: 1.8em minmax(7em, max-content) 1fr auto; gap: 6px 16px; align-items: baseline; padding: 13px 8px; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: background .12s ease; }
.ix-row:hover { background: var(--paper-2); }
.ix-glyph { grid-column: 1; color: var(--vermilion); font-family: var(--font-mono); font-size: 1.05rem; }
.ix-name { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; white-space: nowrap; }
.ix-dot { display: none; }
.ix-hook { grid-column: 3; font-family: var(--font-serif); color: var(--graphite); font-size: .95rem; }
.ix-receipt { display: none; }
.ix-row .chip { grid-column: 4; align-self: center; }
.wing-learn .ix-glyph, .ix-row[data-fam="learn"] .ix-glyph { color: var(--sage); }
@media (max-width: 640px) { .ix-row { grid-template-columns: 1.8em 1fr auto; } .ix-hook { grid-column: 2; } .ix-row .chip { grid-column: 3; } }

/* agents page */
.agent-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 30px; }
.agent-full { border: 1px solid var(--hairline); border-radius: 13px; background: var(--paper-2); padding: 20px 22px; }
.af-head { display: flex; align-items: center; gap: 14px; }
.af-glyph { font-size: 30px; line-height: 1; }
.af-glyph-img { width: 52px; height: 52px; flex: 0 0 52px; image-rendering: pixelated; border-radius: 10px; border: 1px solid var(--hairline); background: var(--paper); padding: 4px; }
.footer-emojis .fg { width: 30px; height: 30px; image-rendering: pixelated; vertical-align: middle; }
.af-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.af-id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.af-spec { font-family: var(--font-serif); font-size: 1rem; line-height: 1.5; color: var(--ink); margin: 13px 0 0; }
.af-activity { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--status-green); margin: 12px 0 0; }
.af-activity::before { content: "● "; }
.af-forbidden { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); margin: 6px 0 0; }
.yamlblock { font-family: var(--font-mono); font-size: 13px; line-height: 1.65; background: var(--console-bg); color: var(--console-ink); border: 1px solid var(--console-line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; white-space: pre; margin: 12px 0 0; }
.yamlblock .k { color: #8fb7ff; } .yamlblock .v { color: var(--console-ink); } .yamlblock .gate { color: #ffb86b; } .yamlblock .c { color: #847a72; }

/* ---- ⌘K command palette -------------------------------------------------- */
.cmdk-ov { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 45%, transparent); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmdk-box { width: min(560px, 92vw); background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.cmdk-in { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--hairline); background: none; color: var(--ink); font-family: var(--font-mono); font-size: 1rem; padding: 16px 18px; outline: none; }
.cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.cmdk-list a { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: inherit; }
.cmdk-list a:hover { background: var(--paper-2); }
.cmdk-list .ck-g { color: var(--vermilion); font-family: var(--font-mono); }
.cmdk-list b { font-family: var(--font-display); font-weight: 700; }
.cmdk-list .ck-h { font-family: var(--font-serif); font-size: .85rem; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* how-it-works page */
.how-steps { display: grid; gap: 0; margin: 34px 0 0; border-left: 2px solid var(--hairline); margin-left: 7px; }
.how-step { display: flex; gap: 18px; padding: 20px 0 20px 26px; position: relative; border-bottom: 1px solid var(--hairline); }
.how-step:last-child { border-bottom: none; }
.how-step::before { content: ""; position: absolute; left: -8px; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2px solid var(--graphite); }
.how-step:last-child::before { border-color: var(--amber-text); background: color-mix(in srgb, var(--amber) 35%, var(--paper)); }
.hs-glyph { font-size: 26px; line-height: 1.2; flex-shrink: 0; }
.hs-kick { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--vermilion); margin: 0; }
.hs-who { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); margin: 2px 0 0; }
.hs-desc { font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.5; color: var(--ink); margin: 7px 0 0; max-width: 64ch; }
.grid-2 { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.treeblock { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; background: var(--console-bg); color: var(--console-ink); border: 1px solid var(--console-line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; white-space: pre; margin: 12px 0 0; }
.treeblock .dir { color: #8fb7ff; } .treeblock .c { color: #847a72; }
.alloc { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: var(--font-mono); font-size: var(--t-sm); }
.alloc td { padding: 11px 4px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.alloc td:first-child { color: var(--graphite); } .alloc td:last-child { color: var(--ink); text-align: right; white-space: nowrap; padding-left: 16px; }
.alloc tr:last-child td:last-child { color: var(--status-green); font-weight: 600; }
.how-note { font-family: var(--font-serif); font-size: .92rem; color: var(--graphite); margin: 13px 0 0; }

/* ---- CLI replay modal ---------------------------------------------------- */
.replay-ov { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 55%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 5vh 18px; }
.replay-box { width: min(720px, 96vw); }
.replay-banner { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--vermilion) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--vermilion) 40%, transparent); border-radius: 10px 10px 0 0; padding: 11px 15px; }
.replay-banner b { color: var(--vermilion); }
.replay-term { border-radius: 0 0 12px 12px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.replay-term .console-body { max-height: 56vh; overflow: auto; }
.replay-term .console-titlebar { position: relative; }
.replay-x { position: absolute; right: 12px; top: 9px; background: none; border: 1px solid var(--console-line); color: #8a807a; border-radius: 6px; padding: 2px 9px; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-xs); }
.replay-x:hover { border-color: var(--vermilion); color: #fff; }
.replay-out .ln-prompt { color: var(--status-green); }
.replay-cap { font-family: var(--font-serif); color: var(--graphite); margin: 14px 4px 0; }
.replay-foot { display: flex; align-items: center; gap: 13px; margin: 12px 4px 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--graphite); }
.replay-foot .replay-again { background: none; border: 1px solid var(--hairline); color: var(--ink); border-radius: 7px; padding: 6px 12px; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-xs); }
.replay-foot .replay-again:hover { border-color: var(--vermilion); color: var(--vermilion); }
[data-theme="dark"] .replay-banner { background: color-mix(in srgb, var(--vermilion) 18%, var(--paper-2)); }
/* CLI tiles + index rows are now openable: signal it */
.apptile.is-cli { cursor: pointer; }
.apptile .chip-cli { color: var(--vermilion); border-color: color-mix(in srgb, var(--vermilion) 35%, transparent); background: color-mix(in srgb, var(--vermilion) 8%, transparent); }

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cb-dot { animation: none; }
  .feed-rows li.on .caret { animation: none; }
  .mosaic a img { transition: none; }
}