/* Design: Console — watch the work happen. A live operations feed, hard edges, numbered sections.
   Dark first. Applies only when <html data-design="console">. The feed is built by design-console.js. */

:root[data-design="console"] {
  --ink: #0A0A0B;
  --ink-2: #101012;
  --surface: #131316;
  --surface-2: #1B1B1F;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.17);
  --text: #F2F2EE;
  --text-rgb: 242, 242, 238;
  --text-2: #BEBEB6;
  --muted: #8A8A82;
  --glass: #C6F432;
  --glass-rgb: 198, 244, 50;
  --glass-hover: #D6FA6A;
  --on-glass: #0A0A0B;
  --amber: #FFB547;
  --amber-rgb: 255, 181, 71;
  --danger: #FF7A6B;
  --spot: rgba(198, 244, 50, 0.07);
  --dot: rgba(255, 255, 255, 0.055);
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-design="console"][data-theme="light"] {
  --ink: #F3F2EC;
  --ink-2: #ECEBE4;
  --surface: #FFFFFF;
  --surface-2: #E4E3DC;
  --line: rgba(10, 10, 11, 0.10);
  --line-strong: rgba(10, 10, 11, 0.22);
  --text: #0A0A0B;
  --text-rgb: 10, 10, 11;
  --text-2: #36362F;
  --muted: #6A6A62;
  --glass: #3F7A00;
  --glass-rgb: 63, 122, 0;
  --glass-hover: #346500;
  --on-glass: #FFFFFF;
  --amber: #A35B00;
  --amber-rgb: 163, 91, 0;
  --spot: rgba(63, 122, 0, 0.07);
  --dot: rgba(10, 10, 11, 0.07);
}

:root[data-design="console"] .hero-art > #estate,
:root[data-design="console"] .hero-art > .tip { display: none; }
:root[data-design="console"] .hero::before,
:root[data-design="console"] .hero::after { display: none; }
:root[data-design="console"] body { background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 22px 22px; background-attachment: fixed; }

/* type: condensed, heavy headlines; mono for labels */
:root[data-design="console"] h1 { font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: .9; font-size: clamp(2.8rem, 1.2rem + 5.2vw, 6.2rem); }
:root[data-design="console"] h2 { font-stretch: 78%; font-weight: 750; letter-spacing: -0.015em; line-height: .96; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); }
:root[data-design="console"] h3 { font-stretch: 85%; font-weight: 700; letter-spacing: -0.01em; }
:root[data-design="console"] h4 { font-stretch: 92%; font-weight: 650; }
:root[data-design="console"] .page-head h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.2rem); max-width: 16ch; }
:root[data-design="console"] .hero-copy h1 .w:nth-last-child(-n+3) > span { color: var(--glass); }
:root[data-design="console"] .hero-copy .who,
:root[data-design="console"] .seq .when,
:root[data-design="console"] .frame-bar,
:root[data-design="console"] .nav a { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; }
:root[data-design="console"] .nav a { text-transform: uppercase; }

/* numbered sections: // 01, // 02 … */
:root[data-design="console"] main { counter-reset: sec; }
:root[data-design="console"] main > section:not(.hero):not(.page-head):not(.band) { counter-increment: sec; }
:root[data-design="console"] main > section:not(.hero):not(.page-head):not(.band) h2:first-of-type::before {
  content: "// " counter(sec, decimal-leading-zero); display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500; font-stretch: 100%; letter-spacing: .08em; color: var(--glass);
}

/* hard edges */
:root[data-design="console"] .btn { border-radius: 2px; font-family: var(--font-mono); font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; }
:root[data-design="console"] .btn.lg { padding: 16px 22px; }
:root[data-design="console"] .btn.ghost { background: transparent; }
:root[data-design="console"] .themer, :root[data-design="console"] .menu-btn { border-radius: 2px; }
:root[data-design="console"] .brand { font-stretch: 85%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
:root[data-design="console"] .brand .mark { border-radius: 2px; background: var(--glass); border: 0; }
:root[data-design="console"] .brand .mark::after { inset: 7px; border-radius: 1px; background: var(--ink); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
:root[data-design="console"] .top .progress { height: 2px; }
:root[data-design="console"] .frame, :root[data-design="console"] .prodgrid, :root[data-design="console"] .cols > .spot { border-radius: 0; }
:root[data-design="console"] .prod .pname { font-stretch: 80%; font-weight: 750; text-transform: uppercase; }
:root[data-design="console"] .prod::after { height: 2px; }
:root[data-design="console"] .seq > div::before { border-radius: 0; font-family: var(--font-mono); background: var(--glass); color: var(--on-glass); border: 0; }
:root[data-design="console"] summary { font-stretch: 88%; font-weight: 650; }
:root[data-design="console"] .band { background: var(--glass); color: var(--on-glass); border: 0; }
:root[data-design="console"] .band p { color: color-mix(in oklab, var(--on-glass) 75%, transparent); }
:root[data-design="console"] .band .btn { background: var(--on-glass); color: var(--glass); }
:root[data-design="console"] .band .btn.ghost { background: transparent; color: var(--on-glass); border-color: color-mix(in oklab, var(--on-glass) 40%, transparent); }
:root[data-design="console"] form input, :root[data-design="console"] form textarea, :root[data-design="console"] form select { border-radius: 2px; font-family: var(--font-mono); font-size: .95rem; }

/* hero: words left, the live feed right */
:root[data-design="console"] .hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; min-height: min(84vh, 820px); }
:root[data-design="console"] .hero-art,
:root[data-design="console"] .page-head .hero-art { aspect-ratio: auto; max-height: none; width: 100%; margin: 0; }
@media (max-width: 980px) {
  :root[data-design="console"] .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  :root[data-design="console"] .hero-art { order: 2; aspect-ratio: auto; max-height: none; margin: 8px 0 0; }
}

/* the feed */
.cx { border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--surface) 92%, transparent); font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); }
.cx-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cx-bar .live { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.cx-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--glass); box-shadow: 0 0 0 0 rgba(var(--glass-rgb), .6); animation: cx-pulse 1.6s ease-out infinite; }
.cx-bar .tag { margin-left: auto; border: 1px solid var(--line-strong); padding: 1px 7px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
@keyframes cx-pulse { to { box-shadow: 0 0 0 8px rgba(var(--glass-rgb), 0); } }
.cx-feed { list-style: none; margin: 0; padding: 8px 0; height: 23.5em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
.cx-feed li { display: grid; grid-template-columns: 5.6em 6.4em minmax(0, 1fr) auto; gap: 0 10px; padding: 3px 14px; color: var(--text-2); animation: cx-in .35s var(--ease-out); }
.cx-feed li .t { color: var(--muted); }
.cx-feed li .a { color: var(--text); font-weight: 600; }
.cx-feed li .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-feed li .s { text-align: right; white-space: nowrap; color: var(--muted); }
.cx-feed li .s.ok { color: var(--glass); }
.cx-feed li .s.wait { color: var(--amber); }
.cx-feed li .s.wait::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 6px; vertical-align: 1px; animation: blink .9s steps(2) infinite; }
.cx-feed li .s.money { color: var(--amber); }
.cx-feed li.wait { background: rgba(var(--amber-rgb), .07); }
.cx-feed li .caret::after { content: "▍"; color: var(--glass); animation: blink .8s steps(2) infinite; margin-left: 1px; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } }
.cx-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cx-foot div { padding: 10px 14px; color: var(--muted); }
.cx-foot div + div { border-left: 1px solid var(--line); }
.cx-foot b { display: block; color: var(--text); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-foot .money b { color: var(--amber); }
.page-head .cx-feed { height: 11em; }
.page-head .cx-foot { display: none; }
@media (max-width: 560px) {
  .cx { font-size: .7rem; }
  .cx-feed { height: 18em; }
  .cx-feed li { grid-template-columns: 6em minmax(0, 1fr) auto; }
  .cx-feed li .t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-feed li, .cx-bar .live i, .cx-feed li .s.wait::before, .cx-feed li .caret::after { animation: none; }
  :root[data-design="console"] .brand .mark::after { animation: none; }
}