/* ═══════════════════════════════════════════════════════════════════════════ Mission Control Templates · MATRIX GREEN — "Phosphor MK-II" PR-0391 / DIP-0560 · premium remodel of the terminal-stack kit. Last updated: 2026-08-27 7:05 PM EDT Design principles (2026 dark-dashboard practice): 1. Elevation comes from SURFACE STEPS, not glow. Shadows barely read on near-black — lighter surfaces read as "closer". 2. ONE saturated accent (#00ff41), reserved for primary action, focus, active state and brand marks. Everything else is desaturated phosphor. 3. Off-white text, never pure white. Three ink levels, all AA on surface. 4. Hairline borders at low opacity. Tables get a row rule, not striping. 5. Inputs drop to a WELL darker than their card, so the fillable area reads. 6. Typography does the ranking: Space Grotesk display · Inter UI · JetBrains Mono for data + the terminal voice. 7. Motion is optional chrome — every animation has a reduced-motion exit. Layout: terminal-stack · nav: bottom. Independent visual system per kit; fonts are requested per-kit from — no shared @import here. ═══════════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ color-scheme:dark; /* ── surfaces · elevation by colour step ───────────────────────────────── */ --bg:#050807; /* page floor — near-black, faint green cast */ --bg2:#070d0a; /* page floor, lower gradient stop */ --surface-1:#0a1310; /* raised plane (rails, docks, footers) */ --surface-2:#0d1814; /* card */ --surface-3:#12211b; /* card hover / nested panel */ --well:#040706; /* form field — BELOW the card it sits in */ --card:var(--surface-2); /* legacy alias — kit-board.css + JS rely on it */ --surface:var(--surface-3);/* legacy alias */ /* ── ink · three levels, all AA on --surface-2 ─────────────────────────── */ --text:#dfeee4; /* primary 15.7:1 */ --white:#f2fbf5; /* emphasis / headings */ --muted:#8aa79a; /* secondary 7.3:1 */ --faint:#6f8f82; /* tertiary labels 5.3:1 */ /* ── accent · one saturated green, spent sparingly ─────────────────────── */ --accent:#00ff41; /* PRIMARY ACTION · FOCUS · ACTIVE only */ --accent-quiet:#5fd98c; /* readable phosphor for label text 10.6:1 */ --accent-deep:#0b3d22; /* accent-tinted fill */ --accent-ink:#03170c; /* text sitting ON the accent */ --accent2:#8cff5a; /* secondary phosphor — high-priority marks */ --gold:#d6ff4a; /* attention mark */ --glow:rgba(0,255,65,.30); /* legacy alias — used only where glow is earned */ /* ── status · reserved, never reused as a series colour ────────────────── */ --ok:#3ddc84; --warn:#ffd257; --danger:#ff6b6b; /* ── lines ─────────────────────────────────────────────────────────────── */ --line:rgba(150,255,190,.10); /* hairline: card edges, row rules */ --line-2:rgba(150,255,190,.19); /* emphasised: panel dividers, controls */ --border:var(--line-2); /* legacy alias — kit-board.css uses it */ --grid:rgba(0,255,65,.030); /* ── type ──────────────────────────────────────────────────────────────── */ --font-display:'Space Grotesk','Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Consolas,monospace; /* modular scale · 1.20 minor third, fluid */ --fs-0:.6875rem; /* 11px — micro labels */ --fs-1:clamp(.75rem,.72rem + .14vw,.8125rem); /* 12–13px — meta */ --fs-2:clamp(.875rem,.84rem + .17vw,.9375rem);/* 14–15px — UI */ --fs-3:clamp(.9375rem,.9rem + .2vw,1.0625rem);/* 15–17px — body / lede */ --fs-4:clamp(1.125rem,1.02rem + .5vw,1.375rem); --fs-5:clamp(1.4rem,1.15rem + 1.2vw,2rem); --fs-6:clamp(1.9rem,1.4rem + 2.4vw,3rem); --tracking-display:.01em; /* premium display type is NOT wide-tracked */ --tracking-label:.11em; /* micro-caps still are */ /* ── space · 4pt scale ─────────────────────────────────────────────────── */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:2.5rem; --s-8:3.5rem; /* ── radii ─────────────────────────────────────────────────────────────── */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-md); /* legacy alias */ /* ── elevation · restrained, mostly a lighter surface + hairline ───────── */ --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 2px 4px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); --e-3:0 4px 8px rgba(0,0,0,.4), 0 24px 56px -20px rgba(0,0,0,.8); --ease:cubic-bezier(.22,1,.36,1); --dur:.18s; --max:76rem; --nav-h:auto; --rail-w:13rem; --dock-h:3.5rem; --bg-art-filter:none;--bg-art-opacity:1; /* legacy hooks, kept for JS */ } html{scroll-behavior:smooth;color-scheme:dark;-webkit-text-size-adjust:100%} body{ min-height:100vh;color:var(--text); font-family:var(--font-body);font-size:var(--fs-2);line-height:1.6; font-feature-settings:'cv05' 1,'ss01' 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background:var(--bg);position:relative;overflow-x:hidden; } /* ══ 1 · BACKGROUND FIELD ══════════════════════════════════════════════════ Was a 380 KB hologram plate at 50% under a drifting scale animation. Now pure CSS: two phosphor blooms over a vertical wash. Same DOM, ~0 bytes, and the content sits on a calm floor instead of a photograph. */ .page-bg{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background: linear-gradient(178deg,var(--bg2) 0%,var(--bg) 46%,#030504 100%); } .page-bg__art{ position:absolute;inset:0; opacity:var(--bg-art-opacity);filter:var(--bg-art-filter); background: radial-gradient(58rem 34rem at 14% -6%, rgba(0,255,65,.075), transparent 62%), radial-gradient(44rem 30rem at 92% 8%, rgba(140,255,90,.045),transparent 60%), radial-gradient(70rem 40rem at 50% 118%, rgba(0,255,65,.05), transparent 64%); } .page-bg__tint{ position:absolute;inset:0; background: /* hairline horizon that separates dock from field */ linear-gradient(180deg,transparent 0%,transparent 78%,rgba(0,0,0,.45) 100%); } @keyframes mct-bg-drift{from{opacity:1}to{opacity:1}} /* retired — kept for JS refs */ /* ══ 2 · HUD OVERLAY — quiet now ═══════════════════════════════════════════ */ .hud-overlay{position:fixed;inset:0;z-index:1;pointer-events:none} .hud-grid{ position:absolute;inset:0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:44px 44px;opacity:1; mask-image:radial-gradient(ellipse 96% 78% at 50% 34%,#000 8%,transparent 78%); } .hud-vignette{ position:absolute;inset:0; background:radial-gradient(ellipse 110% 90% at 50% 40%,transparent 46%,rgba(0,0,0,.5) 100%); } /* Corner brackets: thin, unlit ticks — a nod, not a light show. */ .hud-frame .hud-corner{ position:absolute;width:22px;height:22px; border-color:rgba(0,255,65,.24);border-style:solid;opacity:1;box-shadow:none; } .hud-corner-tl{top:14px;left:14px;border-width:1px 0 0 1px} .hud-corner-tr{top:14px;right:14px;border-width:1px 1px 0 0} .hud-corner-bl{bottom:14px;left:14px;border-width:0 0 1px 1px} .hud-corner-br{bottom:14px;right:14px;border-width:0 1px 1px 0} /* ══ 3 · SHELL ═════════════════════════════════════════════════════════════ */ .wrap{ position:relative;z-index:2; width:min(100% - var(--s-6),var(--max));margin:0 auto;padding:0 0 var(--s-8); } .wrap__col{min-width:0} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul{list-style:none} img{max-width:100%;display:block} /* One focus treatment for the whole kit. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm); } select,select option{color-scheme:dark;background-color:var(--surface-1);color:var(--text)} select option:checked,select option:hover{background-color:var(--surface-3);color:var(--white)} /* ── the card primitive ──────────────────────────────────────────────────── */ .glass{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); box-shadow:var(--e-2); } /* Top-edge phosphor hairline — the one piece of "light" a card gets. */ .glass::before{ content:"";position:absolute;left:var(--s-5);right:var(--s-5);top:0;height:1px; pointer-events:none;border-radius:inherit; background:linear-gradient(90deg,transparent,rgba(0,255,65,.34),transparent); opacity:.8; } .glass::after{content:none} .header-card{padding:var(--s-5) var(--s-5) calc(var(--s-5) - .1rem);margin:var(--s-5) 0 var(--s-4)} /* ══ 4 · NAV ARCHITECTURE ══════════════════════════════════════════════════ One link contract, five placements: top · right · bottom · left · floating. Placement is driven by body[data-nav]. */ .mc-nav{--nav-pad:.5rem} .mc-nav__links{ display:flex;align-items:center;gap:var(--s-1) var(--s-3); font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500; letter-spacing:.06em;text-transform:uppercase; } .mc-nav__links a{ display:inline-flex;align-items:center;gap:var(--s-2);color:var(--muted); padding:.4rem .5rem;border-radius:var(--r-sm); transition:color var(--dur) var(--ease), background var(--dur) var(--ease); } .mc-nav__links a:hover{color:var(--text);background:rgba(255,255,255,.045)} .mc-nav__links a[aria-current=page]{color:var(--accent);background:var(--accent-deep)} .mc-nav__idx{font-style:normal;font-size:.58rem;opacity:.4;font-variant-numeric:tabular-nums} .mc-nav__cta{ display:inline-flex;align-items:center;white-space:nowrap; padding:.5rem .9rem;border-radius:var(--r-sm); background:var(--accent);color:var(--accent-ink); font-family:var(--font-mono);font-size:var(--fs-0);font-weight:600; letter-spacing:.07em;text-transform:uppercase; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 20px -8px var(--glow); transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease); } .mc-nav__cta:hover{filter:brightness(1.06);transform:translateY(-1px)} .mc-nav__brand{display:flex;align-items:center;gap:var(--s-2);min-width:0} .mc-nav__glyph{ display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:var(--r-sm); font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--accent); border:1px solid rgba(0,255,65,.32);background:var(--accent-deep); } .mc-nav__wordmark{ font-family:var(--font-display);font-size:var(--fs-1);font-weight:600;color:var(--white); letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; } .mc-nav__rule{height:1px;background:linear-gradient(90deg,rgba(0,255,65,.4),transparent)} /* ── top · sticky command bar ────────────────────────────────────────────── */ .mc-nav--top{ position:sticky;top:0;z-index:5;padding:var(--s-2) 0; background:color-mix(in srgb,var(--bg) 86%, transparent); backdrop-filter:blur(16px) saturate(1.1); border-bottom:1px solid var(--line); } .mc-nav--top .mc-nav__bar{ width:min(100% - var(--s-6),var(--max));margin:0 auto; display:flex;align-items:center;gap:var(--s-4); } .mc-nav--top .mc-nav__links{flex-wrap:wrap;margin-left:auto} .mc-nav--top .mc-nav__idx{display:none} @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .mc-nav--top{animation:mct-nav-condense linear both;animation-timeline:scroll();animation-range:0 220px} @keyframes mct-nav-condense{to{padding-block:.3rem;background:color-mix(in srgb,var(--bg) 96%, transparent)}} } } /* ── right / left · sticky rail ──────────────────────────────────────────── */ body[data-nav=left] .wrap, body[data-nav=right] .wrap{display:grid;gap:var(--s-4);align-items:start} body[data-nav=left] .wrap{grid-template-columns:var(--rail-w) minmax(0,1fr)} body[data-nav=right] .wrap{grid-template-columns:minmax(0,1fr) var(--rail-w)} body[data-nav=left] .mc-nav--rail{grid-column:1;grid-row:1} body[data-nav=left] .wrap__col{grid-column:2;grid-row:1} body[data-nav=right] .mc-nav--rail{grid-column:2;grid-row:1} body[data-nav=right] .wrap__col{grid-column:1;grid-row:1} .mc-nav--rail{ position:sticky;top:var(--s-4);align-self:start; display:flex;flex-direction:column;gap:var(--s-3); padding:var(--s-4) var(--s-3);margin-top:var(--s-5);border-radius:var(--r-lg); border:1px solid var(--line);background:var(--surface-1);box-shadow:var(--e-2); } .mc-nav--rail .mc-nav__links{flex-direction:column;align-items:stretch;gap:2px} .mc-nav--rail .mc-nav__links a{padding:.5rem .55rem} .mc-nav--rail .mc-nav__cta{justify-content:center;margin-top:var(--s-1)} /* ── bottom · TERMINAL PROMPT DOCK — this kit's signature ────────────────── */ body[data-nav=bottom] .wrap{padding-bottom:calc(var(--s-8) + var(--dock-h))} .mc-nav--bottom{ position:fixed;left:0;right:0;bottom:0;z-index:5; display:flex;align-items:center;gap:var(--s-3); min-height:var(--dock-h);padding:.45rem clamp(.75rem,4vw,2rem); background:color-mix(in srgb,var(--surface-1) 92%, transparent); backdrop-filter:blur(18px) saturate(1.1); border-top:1px solid var(--line-2); box-shadow:0 -1px 0 rgba(0,255,65,.16), 0 -18px 44px -22px rgba(0,0,0,.9); } .mc-nav--bottom .mc-nav__prompt{ flex:none;color:var(--accent-quiet);font-family:var(--font-mono); font-size:var(--fs-0);font-weight:500;letter-spacing:.02em; } .mc-nav--bottom .mc-nav__links{flex:1 1 auto;overflow-x:auto;scrollbar-width:none} .mc-nav--bottom .mc-nav__links::-webkit-scrollbar{display:none} .mc-nav--bottom .mc-nav__idx{display:none} .mc-nav__caret{ flex:none;width:.5rem;height:1.05rem;border-radius:1px;background:var(--accent); opacity:.9;animation:mct-caret 1.15s steps(2,start) infinite; } @keyframes mct-caret{to{opacity:.12}} @media (prefers-reduced-motion:reduce){.mc-nav__caret{animation:none}} /* ── floating · glass command pill ───────────────────────────────────────── */ body[data-nav=floating] .wrap{padding-bottom:6.5rem} .mc-nav--floating{ position:fixed;left:50%;bottom:1.4rem;translate:-50% 0;z-index:5; display:flex;align-items:center;gap:var(--s-2); max-width:min(100% - 1.5rem,var(--max)); padding:.45rem .6rem;border-radius:var(--r-pill); background:color-mix(in srgb,var(--surface-1) 92%, transparent); backdrop-filter:blur(22px) saturate(1.2); border:1px solid var(--line-2);box-shadow:var(--e-3); } .mc-nav--floating .mc-nav__links{overflow-x:auto;scrollbar-width:none;gap:2px var(--s-2)} .mc-nav--floating .mc-nav__links::-webkit-scrollbar{display:none} .mc-nav--floating .mc-nav__links a{padding:.34rem .6rem;border-radius:var(--r-pill)} .mc-nav--floating .mc-nav__idx{display:none} .mc-nav--floating .mc-nav__cta{border-radius:var(--r-pill)} .mc-nav__glyph--pill{width:1.9rem;height:1.9rem;border-radius:var(--r-pill)} .mc-nav__kbd{ flex:none;font-family:var(--font-mono);font-size:.6rem;color:var(--faint); padding:.2rem .4rem;border-radius:5px;border:1px solid var(--line-2); } @media (max-width:900px){ body[data-nav=left] .wrap,body[data-nav=right] .wrap{display:block} body[data-nav=left] .mc-nav--rail,body[data-nav=right] .mc-nav--rail, body[data-nav=left] .wrap__col,body[data-nav=right] .wrap__col{grid-column:auto;grid-row:auto} .mc-nav--rail{ position:sticky;top:0;z-index:5;flex-direction:row;align-items:center;gap:var(--s-2); margin:0 0 var(--s-4);border-radius:0 0 var(--r-lg) var(--r-lg);padding:.5rem .75rem; } .mc-nav--rail .mc-nav__rule{display:none} .mc-nav--rail .mc-nav__links{flex-direction:row;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;gap:2px var(--s-2)} .mc-nav--rail .mc-nav__links::-webkit-scrollbar{display:none} .mc-nav--rail .mc-nav__links a{white-space:nowrap} .mc-nav--rail .mc-nav__idx,.mc-nav--rail .mc-nav__wordmark{display:none} .mc-nav--rail .mc-nav__cta{margin-top:0} .mc-nav--top .mc-nav__links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .mc-nav--top .mc-nav__links::-webkit-scrollbar{display:none} .mc-nav--top .mc-nav__links a{white-space:nowrap} .mc-nav--floating{left:.75rem;right:.75rem;translate:none;max-width:none} } /* ══ 5 · PAGE HEADER ═══════════════════════════════════════════════════════ */ .header-widgets{ display:grid;grid-template-columns:minmax(0,1.6fr) auto auto; gap:var(--s-4) var(--s-6);align-items:end; } .header-kicker{ font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500; letter-spacing:var(--tracking-label);color:var(--accent-quiet);text-transform:uppercase; } .header-widgets h1{ font-family:var(--font-display);font-weight:600;font-size:var(--fs-5); color:var(--white);letter-spacing:var(--tracking-display);margin-top:.35rem; line-height:1.08;text-wrap:balance; } .stat-label{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label); color:var(--faint);text-transform:uppercase; } .stat-value{ font-family:var(--font-body);font-weight:600;color:var(--white); font-size:var(--fs-4);margin-top:.2rem;letter-spacing:-.01em;line-height:1.15; } .stat-value small{ display:block;font-family:var(--font-mono);font-size:var(--fs-0); color:var(--muted);font-weight:400;margin-top:.2rem;letter-spacing:0;text-transform:none; } /* ══ 6 · CONTENT GRID ══════════════════════════════════════════════════════ */ .shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-4);align-items:start} .main{display:flex;flex-direction:column;gap:var(--s-4);min-width:0} .side{display:flex;flex-direction:column;gap:var(--s-4)} .card{padding:var(--s-5)} .kicker{ font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500; letter-spacing:var(--tracking-label);color:var(--accent-quiet); text-transform:uppercase;margin-bottom:var(--s-2); } .h2{ font-family:var(--font-display);color:var(--white);font-size:var(--fs-4);font-weight:600; letter-spacing:var(--tracking-display);margin-bottom:var(--s-2); line-height:1.22;text-wrap:balance; } .lede{ color:var(--muted);font-size:var(--fs-3);line-height:1.62; max-width:60ch;margin-bottom:var(--s-4);text-wrap:pretty; } .lede strong{color:var(--text);font-weight:600} .lede code{ font-family:var(--font-mono);font-size:.9em;color:var(--accent-quiet); background:var(--well);padding:.1em .38em;border-radius:4px;border:1px solid var(--line); } /* ══ 7 · BUTTONS ═══════════════════════════════════════════════════════════ */ .actions{display:flex;flex-wrap:wrap;gap:var(--s-2)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500; letter-spacing:.07em;text-transform:uppercase; padding:.68rem 1.1rem;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); position:relative;z-index:1; } .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--accent);color:var(--accent-ink);font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 22px -10px var(--glow); } .btn-primary:hover{background:#2bff62;box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 8px 26px -10px var(--glow)} .btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)} .btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(0,255,65,.4);color:var(--white)} .btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 42%, transparent);color:var(--danger)} .btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%, transparent)} /* ══ 8 · PILLS & CHIPS ═════════════════════════════════════════════════════ */ .pills{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)} .pill{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase; padding:.3rem .65rem;border-radius:var(--r-pill);border:1px solid var(--line); color:var(--muted);background:var(--surface-3); } .pill-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%, transparent);background:color-mix(in srgb,var(--ok) 9%, transparent)} .pill-gold{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%, transparent);background:color-mix(in srgb,var(--gold) 8%, transparent)} .chip{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase; padding:.38rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line); background:transparent;color:var(--muted);cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .chip:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line-2)} .chip.is-active{color:var(--accent);border-color:rgba(0,255,65,.45);background:var(--accent-deep)} /* ══ 9 · STAT TILES & METERS ═══════════════════════════════════════════════ Stat-tile contract: label (micro-caps, tertiary ink) + value (sans semibold, PROPORTIONAL figures — tabular-nums makes a standalone 121 read loose). Value wears a text token, never the accent. A 2px accent rail carries the "live" signal instead of a glow. */ .meters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)} .meter{ position:relative;padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px); overflow:hidden; } .meter::after{ content:"";position:absolute;left:0;top:var(--s-3);bottom:var(--s-3);width:2px; border-radius:0 2px 2px 0;background:rgba(0,255,65,.5); } .meter strong{ display:block;font-family:var(--font-body);font-weight:600;font-size:var(--fs-5); color:var(--white);line-height:1.05;letter-spacing:-.02em; font-variant-numeric:proportional-nums; } .meter span{ display:block;margin-top:.3rem;font-family:var(--font-mono);font-size:var(--fs-0); letter-spacing:var(--tracking-label);color:var(--faint);text-transform:uppercase; } /* Horizontal bar rows (Reports). Thin mark, rounded data-end at the free end only, unfilled track = a lighter step of the SAME hue. */ .aw-bar{ display:grid;grid-template-columns:9rem 1fr 3rem;gap:var(--s-3);align-items:center; margin:.4rem 0;font-family:var(--font-mono);font-size:var(--fs-1); } .aw-bar__lab{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aw-bar__track{ height:8px;background:rgba(0,255,65,.10);border-radius:var(--r-pill);overflow:hidden; } .aw-bar__track i{ display:block;height:100%;background:var(--accent-quiet); border-radius:0 4px 4px 0;min-width:2px; } .aw-bar__n{ text-align:right;color:var(--text);font-variant-numeric:tabular-nums; } /* ══ 10 · PANELS, FILTERS, TABLES ══════════════════════════════════════════ */ .panel-bar{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2); padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);position:relative;z-index:1; } .panel-bar h2{ font-family:var(--font-mono);font-size:var(--fs-1);font-weight:500; letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text); } .panel-bar .hint{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--faint);letter-spacing:.05em} .filters{ display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--line);position:relative;z-index:1; } .table-wrap{overflow:auto;position:relative;z-index:1} table{width:100%;border-collapse:collapse;font-size:var(--fs-2)} th,td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--line)} th{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--faint);font-weight:500; position:sticky;top:0;background:var(--surface-2);z-index:1; } td{color:var(--text);font-variant-numeric:tabular-nums} td.muted{color:var(--muted)} tbody tr{transition:background var(--dur) var(--ease)} tbody tr:hover{background:rgba(255,255,255,.032)} /* ══ 11 · TASK LIST ════════════════════════════════════════════════════════ */ .task-list{max-height:min(70vh,920px);overflow:auto;position:relative;z-index:1} /* Flex-wrap, matching the live board's row — NOT a fixed grid. The renderer emits a different child count per mode (4 normal · 2 editing · 2 history · 2 empty), so a 3-column grid put the .pri badge in the 1fr track and left the description shrink-to-fit. Flex sizes each part by its own job. */ .task-card{ display:flex;flex-wrap:wrap;align-items:flex-start; column-gap:var(--s-3);row-gap:var(--s-2); padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line); border-left:2px solid transparent; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .task-card > .task-check, .task-card > .pri{flex:0 0 auto} .task-card > .task-check{align-self:center} /* the body block (title + meta + tags) — the renderer's unclassed
*/ .task-card > div:not(.task-actions):not(.task-edit){flex:1 1 18rem;min-width:0} .task-card > .task-edit{flex:1 1 16rem;min-width:0} .task-card > .task-actions{flex:0 0 auto;margin-left:auto;align-self:center} .task-card:hover{background:rgba(255,255,255,.038);border-left-color:var(--accent)} .task-card.is-done{opacity:.55} .task-card.is-done .task-title{text-decoration:line-through;color:var(--muted)} .pri{ font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500;letter-spacing:.05em; text-transform:uppercase;padding:.24rem .5rem;border-radius:var(--r-sm); border:1px solid var(--line-2);color:var(--muted);white-space:nowrap; } .pri.high{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 38%, transparent);background:color-mix(in srgb,var(--accent2) 10%, transparent)} .pri.low{color:var(--faint);border-color:var(--line)} .task-title{color:var(--text);font-size:var(--fs-2);margin-bottom:.3rem;line-height:1.45} .task-meta{ font-family:var(--font-mono);font-size:var(--fs-0);color:var(--faint); letter-spacing:.03em;display:flex;flex-wrap:wrap;gap:.35rem var(--s-3); } .task-meta .ok{color:var(--ok)} .task-meta .warn{color:var(--warn)} .task-status{ font-family:var(--font-mono);font-size:var(--fs-0);font-weight:500;letter-spacing:.05em; text-transform:uppercase;color:var(--accent-quiet);white-space:nowrap; } /* ══ 12 · SIDE NAV LINKS ═══════════════════════════════════════════════════ */ .side-link{ display:block;padding:.65rem .75rem;border-radius:var(--r-sm);margin-bottom:2px; border:1px solid transparent;position:relative;z-index:1; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .side-link:hover{background:rgba(255,255,255,.045);border-color:var(--line)} .side-link.active{background:var(--accent-deep);border-color:rgba(0,255,65,.28)} .side-link strong{display:block;color:var(--white);font-size:var(--fs-2);font-weight:500;margin-bottom:.1rem} .side-link span{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--faint);letter-spacing:.03em} /* --faint drops to 3.5:1 once the tile is filled with --accent-deep; step up. */ .side-link.active span{color:var(--muted)} /* ══ 13 · FORMS — the field is a WELL below its card ═══════════════════════ */ .auth-wrap{min-height:60vh;display:grid;place-items:center;padding:var(--s-6) 0} .auth-box{width:min(100%,430px);padding:var(--s-5);position:relative;z-index:1} .field{display:block;margin-bottom:var(--s-3)} .field span{ display:block;font-family:var(--font-mono);font-size:var(--fs-0); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--faint);margin-bottom:.35rem; } .field input{ width:100%;padding:.72rem .85rem;border-radius:var(--r-sm);border:1px solid var(--line-2); background:var(--well);color:var(--text);outline:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input::placeholder{color:var(--faint)} .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,255,65,.16)} .auth-status{min-height:1.15rem;font-size:var(--fs-1);margin:var(--s-2) 0;color:var(--warn)} .auth-status.ok{color:var(--ok)} /* ══ 14 · DOCS ═════════════════════════════════════════════════════════════ */ .docs-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--s-4)} .docs-article{padding:var(--s-5) var(--s-6);position:relative;z-index:1} .docs-article h1{ font-family:var(--font-display);font-weight:600;color:var(--white); font-size:var(--fs-5);letter-spacing:var(--tracking-display);margin-bottom:var(--s-3); } .docs-article h2{ font-family:var(--font-display);font-weight:600;color:var(--white); font-size:var(--fs-4);margin:var(--s-5) 0 var(--s-2); } .docs-article p,.docs-article li{color:var(--muted);margin-bottom:.6rem;max-width:70ch} .docs-article code{ font-family:var(--font-mono);font-size:.88em;color:var(--accent-quiet); background:var(--well);padding:.12em .4em;border-radius:4px;border:1px solid var(--line); } .docs-article ul{padding-left:1.15rem;list-style:disc} /* ══ 15 · FOOTER ═══════════════════════════════════════════════════════════ */ .site-footer{ margin-top:var(--s-5);padding:var(--s-5);display:flex;flex-wrap:wrap; justify-content:space-between;gap:var(--s-4);align-items:center;position:relative;z-index:1; background:var(--surface-1); } .site-footer .k{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label); color:var(--accent-quiet);text-transform:uppercase; } .site-footer .t{font-family:var(--font-display);font-weight:600;color:var(--white);font-size:var(--fs-2)} .footer-links{ display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-family:var(--font-mono); font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase; } .footer-links a{color:var(--muted);transition:color var(--dur) var(--ease)} .footer-links a:hover{color:var(--accent)} .footer-links a.footer-account{opacity:.75;letter-spacing:.05em;text-transform:uppercase} .pr-stamp{font-family:var(--font-mono);font-size:var(--fs-0);color:var(--faint);opacity:.8} /* ══ 16 · BANNER ═══════════════════════════════════════════════════════════ */ .banner{ margin:var(--s-2) 0 0;padding:.7rem var(--s-4);border-radius:var(--r-sm); border:1px solid var(--line-2);border-left:2px solid var(--accent); background:var(--surface-1);font-family:var(--font-mono);font-size:var(--fs-1); letter-spacing:.02em;color:var(--muted);position:relative;z-index:1; } /* ══ 17 · BENTO / ROUTE MAP ════════════════════════════════════════════════ */ .opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);position:relative;z-index:1} .opt-card{ padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-3);transition:border-color var(--dur) var(--ease); } .opt-card:hover{border-color:var(--line-2)} .opt-card h3{font-family:var(--font-display);font-weight:600;color:var(--white);font-size:var(--fs-3);margin:.35rem 0 .4rem} .opt-card p{color:var(--muted);font-size:var(--fs-2);margin:0} .opt-card .tag{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--accent-quiet); } /* Bento: tiles sized by importance, not by volume. */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3);position:relative;z-index:1} .bento > *{ grid-column:span 2;padding:var(--s-4);border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface-3); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .bento > *:hover{border-color:var(--line-2);background:#16281f} .bento--feature > *:first-child{grid-column:span 3} .bento > * > strong{ display:block;font-family:var(--font-display);font-weight:600;color:var(--white); font-size:var(--fs-3);letter-spacing:var(--tracking-display);margin-bottom:.3rem; } .bento > * > .lede{margin:0;font-size:var(--fs-2);max-width:44ch} @media (max-width:860px){ .bento{grid-template-columns:1fr} .bento > *,.bento--feature > *:first-child{grid-column:auto} } .roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin:var(--s-4) 0;position:relative;z-index:1} .road-step{ padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-3);position:relative; } .road-step::after{ content:"→";position:absolute;right:calc(var(--s-4) / -2 - 4px);top:50%; transform:translateY(-50%);color:var(--faint);font-size:.9rem; } .road-step:last-child::after{content:""} .road-step .n{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label); color:var(--accent-quiet);text-transform:uppercase;font-variant-numeric:tabular-nums; } .road-step h3{ font-family:var(--font-display);font-weight:600;color:var(--white); font-size:var(--fs-3);margin:.4rem 0 .3rem; } .road-step p{color:var(--muted);font-size:var(--fs-1);margin:0;line-height:1.5} .compat-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)} .compat-pill{ font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase; padding:.36rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line-2); color:var(--muted);background:var(--surface-3); } .toggle-row{display:grid;gap:var(--s-2);margin-top:var(--s-3)} .toggle{ display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4); border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-3); position:relative;z-index:1;transition:border-color var(--dur) var(--ease); } .toggle:hover{border-color:var(--line-2)} .toggle input{margin-top:.25rem;accent-color:var(--accent)} .toggle strong{display:block;color:var(--white);font-size:var(--fs-2);font-weight:600;margin-bottom:.15rem} .toggle span{font-size:var(--fs-2);color:var(--muted);line-height:1.5} @media (max-width:960px){ .shell,.header-widgets,.docs-layout,.meters,.opt-grid,.roadmap{grid-template-columns:1fr} .meters{grid-template-columns:repeat(2,1fr)} .task-list{max-height:none} .road-step::after{content:""} .header-widgets{gap:var(--s-4)} } @media (max-width:520px){ .meters{grid-template-columns:1fr} } /* ══ 18 · SIGNATURE MODULE ═════════════════════════════════════════════════ */ .sig-module{position:relative;z-index:1;margin:0} .sig-module .sig-title{ font-family:var(--font-display);font-weight:600;font-size:var(--fs-3); letter-spacing:var(--tracking-display);text-transform:none; color:var(--white);margin-bottom:.35rem; } .sig-module .sig-body{color:var(--muted);font-size:var(--fs-2);line-height:1.6;max-width:60ch} .sig-module .sig-pills{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)} .sig-icon{ display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none; border-radius:var(--r-sm);border:1px solid rgba(0,255,65,.28);background:var(--accent-deep); font-family:var(--font-mono);font-size:.95rem;color:var(--accent); } .unique-list{display:grid;gap:2px;margin:var(--s-3) 0 0;padding:0;list-style:none} .unique-list li{ font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.02em;color:var(--muted); padding:.5rem .75rem;border-left:2px solid rgba(0,255,65,.35); background:var(--well);border-radius:0 var(--r-sm) var(--r-sm) 0; } .layout-badge{ display:inline-flex;align-items:center;gap:var(--s-1); font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase; padding:.28rem .6rem;border-radius:var(--r-pill);color:var(--muted); border:1px solid var(--line-2);background:var(--surface-3); } /* ══ 19 · LAYOUT: terminal-stack ═══════════════════════════════════════════ The terminal identity now lives in STRUCTURE and VOICE — prompt dock, bracket nav, mono data columns, scanline whisper — not in forcing every glyph to a retro mono face at 0 radius. */ body[data-layout=terminal-stack]{font-family:var(--font-body)} body[data-layout=terminal-stack] .hud-grid{background-size:28px 28px;opacity:.9} /* Scanline: 3px period at low alpha. The old 2px/.55 pattern moiréd on high-DPI and read as a filter over the content. */ body[data-layout=terminal-stack] .page-bg::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px); opacity:.5; } body[data-layout=terminal-stack] .glass{ border-radius:var(--r-lg);border-color:var(--line); box-shadow:var(--e-2);backdrop-filter:none; } body[data-layout=terminal-stack] .header-widgets h1{ font-size:var(--fs-5);letter-spacing:var(--tracking-display); } body[data-layout=terminal-stack] .shell{grid-template-columns:1fr;gap:var(--s-4)} body[data-layout=terminal-stack] .side{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3); } body[data-layout=terminal-stack] .mc-nav__links{gap:var(--s-1) var(--s-2);font-size:var(--fs-0)} body[data-layout=terminal-stack] .btn{letter-spacing:.07em} /* nav: bottom — bracket prompt links, the kit's calling card */ body[data-layout=terminal-stack] .mc-nav--bottom .mc-nav__links a::before{content:"[";opacity:.3;margin-right:.15rem} body[data-layout=terminal-stack] .mc-nav--bottom .mc-nav__links a::after{content:"]";opacity:.3;margin-left:.15rem} body[data-layout=terminal-stack] .mc-nav--bottom .mc-nav__links a[aria-current=page]::before, body[data-layout=terminal-stack] .mc-nav--bottom .mc-nav__links a[aria-current=page]::after{opacity:.6} body[data-layout=terminal-stack] .sig-module{ padding:var(--s-5);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4); border:1px solid var(--line);background:var(--surface-2); } body[data-layout=terminal-stack] .sig-ticker{ overflow:hidden;white-space:nowrap;border-top:1px solid var(--line); margin-top:var(--s-4);padding-top:var(--s-3);color:var(--faint); font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.05em; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } body[data-layout=terminal-stack] .sig-ticker span{ display:inline-block;padding-left:100%;animation:mct-ticker 38s linear infinite; } @keyframes mct-ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}} @media (prefers-reduced-motion:reduce){ body[data-layout=terminal-stack] .sig-ticker span{animation:none;padding-left:0} } @media (max-width:640px){ body[data-layout=terminal-stack] .sig-module{grid-template-columns:1fr} } /* terminal-stack · board controls keep the mono voice, gain the new surfaces */ body[data-layout=terminal-stack] .kb-project-filter{ border:1px solid var(--line-2);border-radius:var(--r-sm); padding:.25rem .55rem;gap:var(--s-2);margin:0 var(--s-2) 0 0;background:var(--surface-3); } body[data-layout=terminal-stack] .kb-project-filter span::before{content:"> ";opacity:.5} body[data-layout=terminal-stack] .kb-project-filter select, body[data-layout=terminal-stack] .kb-edi-row input, body[data-layout=terminal-stack] .kb-import-wizard fieldset{ border-radius:var(--r-sm);font-family:var(--font-mono); } body[data-layout=terminal-stack] .kb-import-wizard{gap:var(--s-2)} body[data-layout=terminal-stack] .panel-bar{align-items:center;flex-wrap:wrap;gap:var(--s-2)} body[data-page=account] .shell{grid-template-columns:1fr} body[data-page=account] .acct-grid{display:grid;gap:var(--s-3)} /* ══ 20 · MOTION SAFETY NET ════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ══ 21 · USAGE ANALYTICS (PR-0391) ════════════════════════════════════════ Thin marks · 4px rounded data-end on the baseline · 2px gap between bars · recessive axes · one hue for magnitude-over-time · the validated 4-slot categorical palette (inline, from the data) for agent identity, always paired with a direct label so identity is never colour-alone. */ .mct-toolbar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s-3);margin-bottom:var(--s-4); } .mct-range{display:flex;flex-wrap:wrap;gap:var(--s-2)} .mct-tiles{margin-bottom:var(--s-5)} .mct-tiles .meter{padding:var(--s-4)} .mct-delta{ display:block;margin-top:.35rem;font-family:var(--font-mono);font-style:normal; font-size:var(--fs-0);color:var(--faint);letter-spacing:.02em; } .mct-block{margin:0 0 var(--s-5)} .mct-block:last-of-type{margin-bottom:var(--s-4)} .mct-h3{ font-family:var(--font-display);font-weight:600;font-size:var(--fs-3); color:var(--white);letter-spacing:var(--tracking-display);margin-bottom:var(--s-3); } .mct-sub{ font-family:var(--font-mono);font-size:var(--fs-0);font-weight:400; letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--faint); margin-left:var(--s-2); } /* column chart */ .mct-chart{position:relative} .mct-plot{position:relative;height:9rem} .mct-grid{ position:absolute;inset:0; background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 25%); opacity:.55; } .mct-cols{ position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px; } .mct-col{ flex:1 1 0;min-width:2px;border-radius:4px 4px 0 0; background:var(--accent-quiet); transition:background var(--dur) var(--ease); } .mct-col:hover,.mct-col:focus-visible{background:var(--accent);outline:none} .mct-axis{ display:flex;gap:2px;margin-top:.4rem; font-family:var(--font-mono);font-size:.6rem;color:var(--faint); } .mct-axis__t{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden} .mct-peak{ margin-top:.35rem;font-family:var(--font-mono);font-size:var(--fs-0);color:var(--faint); } .mct-chart--bars{display:grid;gap:.15rem} .mct-empty{color:var(--faint);font-size:var(--fs-1);font-family:var(--font-mono)} /* legend — present whenever more than one series carries identity */ .mct-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-3)} .mct-legend__i{ display:inline-flex;align-items:center;gap:.4rem; font-family:var(--font-mono);font-size:var(--fs-0);color:var(--muted); letter-spacing:.03em; } .mct-legend__i i{width:.6rem;height:.6rem;border-radius:2px;flex:none} /* hover / focus tooltip */ .mct-tip{ position:absolute;z-index:6;transform:translate(-50%,-100%);pointer-events:none; padding:.3rem .55rem;border-radius:var(--r-sm); border:1px solid var(--line-2);background:var(--surface-1);color:var(--text); font-family:var(--font-mono);font-size:var(--fs-0);white-space:nowrap; box-shadow:var(--e-2);opacity:0;transition:opacity var(--dur) var(--ease); } .mct-tip.is-on{opacity:1} .mct-details{margin:var(--s-4) 0 0;border-top:1px solid var(--line);padding-top:var(--s-3)} .mct-details summary{ cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-0); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted); } .mct-details summary:hover{color:var(--text)} .mct-details[open] summary{margin-bottom:var(--s-3)} .mct-note{ margin-top:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-0); line-height:1.6;color:var(--faint); } @media (max-width:640px){ .mct-plot{height:7rem} .mct-axis{font-size:.55rem} }