/* ═══════════════════════════════════════════════════════════════════════════ Mission Control Templates · ALIEN DARK — "HALO MK-III · Year 3030" PR-0399 / DIP-0568 · Fable 5 remodel on the Ember MK-II base. Last updated: 2026-08-28 6:15 AM EDT Direction (Operator reference, 035922.png): the interface is DRAWN IN LIGHT, not painted in surfaces. Stroke-first — rings, ticks, brackets, reticles. Panels are projected glass; instruments are RADIAL. Design principles (HALO MK-III): 1. LIGHT over paint. Panel fills are near-transparent ember; the 1px stroke and its bloom carry the elevation, not surface steps. 2. ONE ember (#FD7311) at three temperatures: line, hot numeral (--ember-hot), deep fill. Reserved for action, focus, active, data. 3. Instruments are radial: stat meters are tick-ring dials, not tiles. Conic tick rings + a slow counter-rotating decor ring, CSS only. 4. The atmosphere is part of the UI: ranging rings, fine grid, nebula, one slow scan sweep. Zero images — gradients and pseudos only. 5. Inputs drop to a WELL below the glass; focus ignites the stroke. 6. Typography does the ranking: Oxanium display · Manrope UI · IBM Plex Mono for data + the command-center voice. 7. Motion is optional chrome — every animation has a reduced-motion exit. Layout: chassis-angled · nav: right. Selector contract unchanged from MK-II — kit-board.js, mc-i18n, mc-tour and the auth shell are untouched. Fonts are requested per-kit from — no shared @import here. ═══════════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ color-scheme:dark; /* ── void floor · deep warm blacks, molten-bronze cast ─────────────────── */ --bg:#0a0604; --bg2:#100a07; --surface-1:#150f0a; --surface-2:#1b140d; --surface-3:#241a10; --well:#070402; --card:var(--surface-2); --surface:var(--surface-3); /* ── projected glass · panels are light, not paint ─────────────────────── */ --pane:rgba(253,130,40,.045); --pane-2:rgba(253,130,40,.085); /* ── ink · three levels, warm ──────────────────────────────────────────── */ --text:#ecdcc8; --white:#f8efe2; --muted:#ab9179; --faint:#9a8168; /* ── the light · one ember, three temperatures ─────────────────────────── */ --accent:#FD7311; --accent-quiet:#e09a5c; --ember-hot:#ffc98a; --accent-deep:#3a1a08; --accent-ink:#1a0c04; --accent2:#BD4D03; --gold:#E07A28; --glow:rgba(253,115,17,.32); --glow-soft:rgba(253,115,17,.12); /* ── status · reserved, never reused as a series colour ────────────────── */ --ok:#3ddc84; --warn:#ffd257; --danger:#ff6b6b; /* ── lines · strokes carry the elevation ───────────────────────────────── */ --line:rgba(255,170,110,.12); --line-2:rgba(255,170,110,.22); --border:var(--line-2); --grid:rgba(253,115,17,.030); --ring:rgba(253,115,17,.5); /* ── type ──────────────────────────────────────────────────────────────── */ --font-display:'Oxanium','Manrope',system-ui,sans-serif; --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace; --fs-0:.6875rem; --fs-1:clamp(.75rem,.72rem + .14vw,.8125rem); --fs-2:clamp(.875rem,.84rem + .17vw,.9375rem); --fs-3:clamp(.9375rem,.9rem + .2vw,1.0625rem); --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; --tracking-label:.11em; --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; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-md); --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-out:cubic-bezier(0.23, 1, 0.32, 1); --ease:var(--ease-out); --dur:.18s; --dur-press:140ms; --max:76rem; --nav-h:auto; --rail-w:13rem; --dock-h:3.5rem; --bg-art-filter:none;--bg-art-opacity:1; } 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:'ss01' 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background:var(--bg);position:relative;overflow-x:hidden; } /* ══ 1 · BACKGROUND FIELD · nebula + ranging rings + scan sweep ════════════ */ .page-bg{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background:linear-gradient(178deg,var(--bg2) 0%,var(--bg) 46%,#060302 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(253,115,17,.10), transparent 62%), radial-gradient(44rem 30rem at 92% 8%, rgba(189,77,3,.06), transparent 60%), radial-gradient(70rem 40rem at 50% 118%, rgba(253,115,17,.05), transparent 64%); } /* ranging rings — the Year-3030 radar floor, one repeating radial stroke */ .page-bg__art::before{ content:"";position:absolute;left:50%;top:42%;width:120rem;height:120rem; transform:translate(-50%,-50%);border-radius:50%; background:repeating-radial-gradient(circle, transparent 0 7.4rem, rgba(253,130,40,.030) 7.4rem 7.5rem); -webkit-mask-image:radial-gradient(circle,#000 16%,transparent 62%); mask-image:radial-gradient(circle,#000 16%,transparent 62%); } .page-bg__tint{ position:absolute;inset:0; background:linear-gradient(180deg,transparent 0%,transparent 78%,rgba(0,0,0,.45) 100%); } /* one slow scan sweep — projected light passing over the glass */ .page-bg__tint::after{ content:"";position:absolute;left:-10%;right:-10%;height:24rem;top:-32%; background:linear-gradient(180deg,transparent,rgba(253,150,70,.020) 45%, rgba(255,190,120,.040) 50%,rgba(253,150,70,.020) 55%,transparent); animation:mct-scan 16s linear infinite; } @keyframes mct-scan{to{transform:translateY(200vh)}} @keyframes mct-bg-drift{from{opacity:1}to{opacity:1}} /* ══ 2 · HUD OVERLAY ═══════════════════════════════════════════════════════ */ .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:34px 34px;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 42%,rgba(0,0,0,.55) 100%); } /* corner reticles — double-stroke brackets with a bloom, drawn in light */ .hud-frame .hud-corner{ position:absolute;width:34px;height:34px; border-color:rgba(253,115,17,.55);border-style:solid;opacity:1; box-shadow:none;filter:drop-shadow(0 0 6px var(--glow-soft)); } .hud-frame .hud-corner::after{ content:"";position:absolute;width:18px;height:18px; border-color:rgba(189,77,3,.5);border-style:solid;border-width:inherit; } .hud-corner-tl{top:14px;left:14px;border-width:2px 0 0 2px} .hud-corner-tl::after{top:6px;left:6px} .hud-corner-tr{top:14px;right:14px;border-width:2px 2px 0 0} .hud-corner-tr::after{top:6px;right:6px} .hud-corner-bl{bottom:14px;left:14px;border-width:0 0 2px 2px} .hud-corner-bl::after{bottom:6px;left:6px} .hud-corner-br{bottom:14px;right:14px;border-width:0 2px 2px 0} .hud-corner-br::after{bottom:6px;right:6px} /* ══ 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} :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)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* projected glass — the fill is light, the stroke carries the panel */ .glass{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg); background:linear-gradient(180deg,var(--pane-2),var(--pane) 38%); box-shadow:0 0 0 1px rgba(0,0,0,.35), var(--e-2)} .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(253,115,17,.55),transparent);opacity:.9; } /* ember bracket — one corner of every panel is drawn hot */ .glass::after{ content:"";position:absolute;top:-1px;left:-1px;width:30px;height:30px; pointer-events:none; border-top:2px solid var(--accent);border-left:2px solid var(--accent); border-radius:4px 0 0 0;opacity:.75; filter:drop-shadow(0 0 5px var(--glow-soft)); } .header-card{padding:var(--s-5) var(--s-5) calc(var(--s-5) - .1rem);margin:var(--s-5) 0 var(--s-4)} @media (prefers-reduced-motion:no-preference){ .header-card,.meters .meter{ transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } .header-card{transition-delay:0ms} .meters .meter:nth-child(1){transition-delay:40ms} .meters .meter:nth-child(2){transition-delay:80ms} .meters .meter:nth-child(n+3){transition-delay:80ms} @starting-style{ .header-card,.meters .meter{opacity:0;transform:translateY(8px)} } } /* ══ 4 · NAV ARCHITECTURE ══════════════════════════════════════════════════ */ .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 4px 14px -10px var(--glow);transition:transform var(--dur-press) var(--ease-out), filter var(--dur-press) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out)} .mc-nav__cta:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){ .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(253,115,17,.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(253,115,17,.4),transparent)} .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)}} } } 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)} 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(253,115,17,.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}} 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:transform var(--dur-press) var(--ease-out), filter var(--dur-press) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);position:relative;z-index:1} .btn:active{transform:scale(.97)} .btn-primary{background:linear-gradient(180deg,#ff8c2f,var(--accent));color:var(--accent-ink);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px -6px var(--glow)} @media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:linear-gradient(180deg,#ff9a45,#ff8528);box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 26px -6px 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(253,115,17,.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:transform var(--dur-press) var(--ease-out), filter var(--dur-press) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out)} .chip:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){ .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(253,115,17,.45);background:var(--accent-deep)} /* ══ 9 · RADIAL INSTRUMENTS & METERS ═══════════════════════════════════════ The stat tile is now a dial: conic tick ring (::before), slow counter- rotating dashed decor ring (::after), hot numeral in the core. CSS only — kit-board.js keeps writing plain numbers into the same /. */ .meters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);justify-items:center} .meter{ position:relative;aspect-ratio:1;width:min(100%,10.5rem); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:var(--s-3);overflow:visible;text-align:center; border-radius:50%;border:1px solid var(--line-2); background:radial-gradient(circle at 50% 44%,var(--pane-2),rgba(0,0,0,.25) 74%); box-shadow:0 0 24px -14px var(--glow), inset 0 0 22px rgba(0,0,0,.5); } .meter::before{ content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none; background:repeating-conic-gradient(var(--ring) 0deg .9deg,transparent .9deg 7.5deg); -webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 8px),#000 calc(50% - 7px)); mask:radial-gradient(circle,transparent 0 calc(50% - 8px),#000 calc(50% - 7px)); opacity:.5; } .meter::after{ content:"";position:absolute;inset:15px;width:auto;height:auto;border-radius:50%;pointer-events:none; border:1px dashed rgba(224,122,40,.55);background:none;filter:none;opacity:1; animation:mct-dial-spin 46s linear infinite; } .meters .meter:nth-child(even)::after{animation-direction:reverse;animation-duration:64s} @keyframes mct-dial-spin{to{transform:rotate(360deg)}} /* the dial stays a circle under every chassis/layout override, all widths */ .meters .meter, body[data-layout=chassis-angled] .meters .meter{clip-path:none;border-radius:50%} .meter strong{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-5);color:var(--ember-hot);line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 0 16px var(--glow)} .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;max-width:88%} .meter a{display:contents} @media (max-width:960px){.meter{width:min(100%,9rem)}} .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:6px;background:rgba(253,115,17,.10);border-radius:var(--r-pill);overflow:hidden} .aw-bar__track i{display:block;height:100%;min-width:2px;border-radius:0 3px 3px 0; background:linear-gradient(90deg,var(--accent2),var(--accent)); box-shadow:0 0 10px var(--glow-soft); transition:width 900ms var(--ease-out)} @media (prefers-reduced-motion:no-preference){ @starting-style{.aw-bar__track i{width:0 !important}} } .aw-bar__n{text-align:right;color:var(--text);font-variant-numeric:tabular-nums} .aw-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} /* ══ 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;min-width:0} 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} .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} .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(--gold);border-color:color-mix(in srgb,var(--gold) 38%, transparent);background:color-mix(in srgb,var(--gold) 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(253,115,17,.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} .side-link.active span{color:var(--muted)} /* ══ 13 · FORMS ════════════════════════════════════════════════════════════ */ .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(253,115,17,.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{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:#2a221c} .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(253,115,17,.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(253,115,17,.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 · CHASSIS-ANGLED ═══════════════════════════════════════════════════ */ body[data-layout=chassis-angled] .glass{border-radius:4px 14px 4px 14px;clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px))} body[data-layout=chassis-angled] .header-card{position:relative;box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent2), var(--e-2)} body[data-layout=chassis-angled] .mc-nav__cta{border-radius:2px;color:var(--accent-ink);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} body[data-layout=chassis-angled] .mc-nav--rail{border-radius:4px 14px 4px 14px;clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));box-shadow:inset -2px 0 0 var(--accent2), inset 2px 0 0 var(--accent), var(--e-2)} body[data-layout=chassis-angled] .mc-nav--rail .mc-nav__links a{border-left:2px solid transparent;border-radius:0} body[data-layout=chassis-angled] .mc-nav--rail .mc-nav__links a:hover{border-left-color:var(--line-2)} body[data-layout=chassis-angled] .mc-nav--rail .mc-nav__links a[aria-current=page]{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-deep),transparent)} @media (max-width:900px){body[data-layout=chassis-angled] .mc-nav--rail{clip-path:none;border-radius:0 0 8px 8px}} body[data-layout=chassis-angled] .shell{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-4)} body[data-layout=chassis-angled] .task-card{border-left-width:3px} body[data-layout=chassis-angled] .sig-module{position:relative;padding:1.1rem 1.2rem 1.1rem 1.4rem;background:var(--surface-3);border:1px solid var(--line)} body[data-layout=chassis-angled] .sig-module::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;background:linear-gradient(180deg,var(--accent),var(--accent2))} body[data-layout=chassis-angled] .edge-rail{height:1px;margin:.35rem 0 .85rem;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);border-radius:1px} @media (max-width:960px){ body[data-layout=chassis-angled] .shell{grid-template-columns:1fr} body[data-layout=chassis-angled] .glass{clip-path:none;border-radius:var(--r-md)} } body[data-layout=chassis-angled] .kb-project-filter{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);border:1px solid var(--line);padding:.25rem .65rem;margin:0 .4rem 0 0} body[data-layout=chassis-angled] .kb-import-wizard fieldset{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)} body[data-layout=chassis-angled] .kb-edi-row input{border-left-width:3px} body[data-page=account] .acct-grid{display:grid;gap:1.1rem} /* ══ 20 · AD CAROUSEL ══════════════════════════════════════════════════════ */ .ad-intake{grid-column:1 / -1} .ad-carousel{position:relative;margin:.75rem 0 .35rem;border-radius:4px;overflow:hidden;border:1px solid var(--line-2);outline:1px solid rgba(255,255,255,.08);outline-offset:0;box-shadow:var(--e-2);background:var(--bg);aspect-ratio:16 / 9;width:100%;max-height:none} .ad-carousel__track{display:flex;height:100%;width:100%;transition:transform .55s var(--ease);will-change:transform} .ad-carousel__slide{flex:0 0 100%;position:relative;min-width:100%;width:100%;height:100%;margin:0;background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb,var(--accent2) 10%, transparent), var(--bg) 72%)} .ad-carousel__slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;filter:saturate(0.94) contrast(1.02)} .ad-carousel__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 42%, color-mix(in srgb,var(--bg) 88%, transparent) 100%), radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,.28) 100%);pointer-events:none} .ad-carousel__caption{position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:2;font-family:var(--font-mono)} .ad-carousel__caption strong{display:block;color:var(--white);font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.2rem} .ad-carousel__caption span{color:var(--muted);font-size:var(--fs-0);letter-spacing:.02em} .ad-carousel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.15rem;height:2.15rem;border-radius:50%;border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 78%, transparent);color:var(--accent-quiet);cursor:pointer;font-size:1rem;line-height:1;display:grid;place-items:center} .ad-carousel__nav:hover{background:var(--accent-deep);color:var(--accent);border-color:rgba(253,115,17,.4)} .ad-carousel__nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ad-carousel__nav--prev{left:.65rem} .ad-carousel__nav--next{right:.65rem} .ad-carousel__dots-row{display:flex;justify-content:center;gap:.45rem;margin:.55rem 0 .15rem} .ad-carousel__dot{width:.45rem;height:.45rem;border-radius:50%;border:1px solid var(--line-2);background:transparent;padding:0;cursor:pointer} .ad-carousel__dot.is-active{background:var(--accent);border-color:var(--accent)} /* ══ 21 · SETUP STEPS ══════════════════════════════════════════════════════ */ .aw-setup{display:grid;gap:var(--s-4);margin:var(--s-4) 0} .aw-setup__step{padding:var(--s-5)} .aw-setup__n{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label);color:var(--accent-quiet);text-transform:uppercase;margin-bottom:var(--s-2)} /* ══ 22a · REPORTS TELEMETRY CHARTS (PR-0399) ══════════════════════════════ Hosts filled by js/kit-reports-charts.js. SVG text styled here so the charts inherit theme tokens; ember palette only. */ .kr-duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-4);align-items:center} @media (max-width:720px){.kr-duo{grid-template-columns:1fr}} .kr-donut{width:min(100%,15rem);margin:0 auto;display:block} .kr-donut__n{fill:var(--ember-hot);font-family:var(--font-display);font-size:22px;font-weight:700} .kr-donut__l{fill:var(--faint);font-family:var(--font-mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase} .kr-legend{display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0 0;padding:0;list-style:none;font-family:var(--font-mono);font-size:var(--fs-0)} .kr-legend li{display:flex;align-items:center;gap:.5rem;color:var(--muted)} .kr-legend i{flex:none;width:.65rem;height:.65rem;border-radius:2px} .kr-legend b{margin-left:auto;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums} .kr-area{width:100%;height:auto;display:block} .kr-axis{fill:var(--faint);font-family:var(--font-mono);font-size:7px;letter-spacing:.08em} #chart-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)} @media (max-width:600px){#chart-usage{grid-template-columns:1fr}} .kr-gauge{display:flex;flex-direction:column;align-items:center;gap:.35rem} .kr-gauge svg{width:min(100%,11rem)} .kr-gauge__n{fill:var(--ember-hot);font-family:var(--font-display);font-size:15px;font-weight:700} .kr-gauge__l{font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:var(--tracking-label);color:var(--faint);text-transform:uppercase;text-align:center} /* ══ 22b · HALO PARITY (PR-0399 pass 2) · prototype composition ════════════ Operator picked the archive/design/aliendark-mk3 prototype as the target. This block ports its COMPOSITION: centered masthead + protractor arc, oversized CORE dial, fixed edge rulers, and the quick-dial dock. Applied only where the page opts in (.halo-masthead / .halo-dock markup). */ .halo-masthead{text-align:center} /* pass 3 — the masthead is OPEN composition: no panel box, floats on the void */ .glass.halo-masthead{background:none;border:none;box-shadow:none;padding:1.6rem 0 .3rem} .glass.halo-masthead::before,.glass.halo-masthead::after{content:none} body[data-layout=chassis-angled] .glass.halo-masthead{clip-path:none;box-shadow:none} .halo-masthead .layout-badge{border:none;background:none;padding:0; color:var(--accent2);font-family:var(--font-mono);font-size:var(--fs-0); font-weight:600;letter-spacing:.35em;text-transform:uppercase} .halo-masthead .edge-rail{display:none} .halo-masthead .header-widgets{display:block;position:relative;padding:0 9.5rem} .halo-masthead .header-kicker{letter-spacing:.45em} .halo-masthead h1{font-size:var(--fs-6);letter-spacing:.14em;margin-top:.2rem; text-shadow:0 0 24px rgba(253,140,60,.30),0 0 4px rgba(255,201,138,.35)} .halo-masthead .layout-badge{margin-top:.5rem} .halo-masthead .header-widgets > div:nth-child(2), .halo-masthead .header-widgets > div:nth-child(3){position:absolute;top:0} .halo-masthead .header-widgets > div:nth-child(2){left:0;text-align:left} .halo-masthead .header-widgets > div:nth-child(3){right:0;text-align:right} .halo-protractor{width:min(30rem,72vw);margin:.5rem auto 0;overflow:hidden;opacity:.9} .halo-protractor svg{display:block;width:100%;height:auto} .halo-protractor__sweep{animation:halo-sweep 9s linear infinite} @keyframes halo-sweep{to{stroke-dashoffset:-300}} @media (max-width:52rem){ .halo-masthead .header-widgets{padding:0} .halo-masthead .header-widgets > div:nth-child(2), .halo-masthead .header-widgets > div:nth-child(3){position:static;text-align:center;margin-top:var(--s-3)} } /* live VALUE RINGS — js/kit-halo-dials.js sets --dial-frac from the numbers kit-board.js writes; the conic ring sweeps to it. Track stays faint. */ @property --dial-frac{syntax:"";inherits:true;initial-value:0} .meter{--dial-frac:0} @media (prefers-reduced-motion:no-preference){ .meter{transition:--dial-frac 1.2s var(--ease-out)} } .meter strong::before{content:"";position:absolute;inset:2px;border-radius:50%; pointer-events:none; background:conic-gradient(var(--accent) calc(var(--dial-frac) * 360deg), rgba(253,115,17,.13) 0); -webkit-mask:radial-gradient(circle closest-side,transparent 0 calc(100% - 4px),#000 calc(100% - 3px)); mask:radial-gradient(circle closest-side,transparent 0 calc(100% - 4px),#000 calc(100% - 3px)); filter:drop-shadow(0 0 7px var(--glow-soft)); } /* five-dial instrument band: OPEN · DONE · CORE · HIGH · BURN */ .meters-halo{grid-template-columns:repeat(5,1fr)} .meter span em{display:block;font-style:normal;color:var(--faint); font-size:.58rem;letter-spacing:.14em;text-transform:lowercase;margin-top:.18rem} @media (max-width:960px){.meters-halo{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.meters-halo{grid-template-columns:1fr}} /* the CORE dial — Total reads as the central instrument of the cluster */ .meters{align-items:center} .meters .meter:has([data-meter=total]), .meters .meter:has(#m-total){width:min(100%,13.5rem)} .meters .meter:has([data-meter=total]) strong, .meters .meter:has(#m-total) strong{font-size:clamp(2.2rem,1.8rem + 1.6vw,3rem)} .meters .meter:has([data-meter=total])::before, .meters .meter:has(#m-total)::before{opacity:.7} /* fixed edge rulers — tick strips, top-center and left flank */ .hud-frame::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%); width:min(52rem,60vw);height:12px;opacity:.55; background: repeating-linear-gradient(90deg,rgba(224,150,94,.30) 0 1px,transparent 1px 12px) bottom/100% 6px no-repeat, repeating-linear-gradient(90deg,rgba(253,115,17,.5) 0 1px,transparent 1px 60px) bottom/100% 12px no-repeat} .hud-frame::after{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%); width:12px;height:min(30rem,50vh);opacity:.5; background: repeating-linear-gradient(0deg,rgba(224,150,94,.30) 0 1px,transparent 1px 12px) right/6px 100% no-repeat, repeating-linear-gradient(0deg,rgba(253,115,17,.5) 0 1px,transparent 1px 60px) right/12px 100% no-repeat} /* quick-dial dock — the prototype's bottom row of circular instruments */ .halo-dock{display:flex;justify-content:center;flex-wrap:wrap;gap:1.3rem; margin:var(--s-6) 0 var(--s-2);position:relative;z-index:1} .halo-dock a{position:relative;width:4.6rem;height:4.6rem;display:grid;place-items:center; color:var(--muted);text-decoration:none;text-align:center; font-family:var(--font-mono);font-size:.58rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;line-height:1.25;padding:.4rem} .halo-dock a::before{content:"";position:absolute;inset:0;border-radius:50%; border:1px solid var(--line-2)} .halo-dock a::after{content:"";position:absolute;inset:6px;border-radius:50%; border:1px dashed rgba(224,122,40,.5)} .halo-dock a:hover{color:var(--ember-hot)} .halo-dock a:hover::before{border-color:var(--accent);box-shadow:0 0 14px var(--glow-soft)} .halo-dock a:hover::after{border-color:var(--accent);animation:mct-dial-spin 4s linear infinite} .halo-dock span{display:block} @media (max-width:520px){.halo-dock{gap:.9rem}.halo-dock a{width:4rem;height:4rem}} @media (prefers-reduced-motion:reduce){ .halo-protractor__sweep,.halo-dock a:hover::after{animation:none !important} } /* ══ 22c · FULL-WIDTH BOARD + RAIL CARDS (PR-0399 pass 4) ══════════════════ Board nav + Onboarding live in the right rail; the task stream takes the whole main column. */ .shell.shell--full, body[data-layout=chassis-angled] .shell.shell--full{grid-template-columns:minmax(0,1fr)} .mc-nav--rail .rail-card{ margin-top:var(--s-2);padding-top:var(--s-3); border-top:1px solid var(--line); } .mc-nav--rail .rail-card .kicker{margin-bottom:var(--s-1)} .mc-nav--rail .rail-card .side-link{padding:.45rem .55rem} .mc-nav--rail .rail-card .side-link strong{font-size:var(--fs-1)} .mc-nav--rail .rail-card__note{ font-size:var(--fs-0);color:var(--muted);line-height:1.5;margin:0 0 .5rem; } @media (max-width:900px){ /* the rail collapses to a top strip on mobile — keep it lean */ .mc-nav--rail .rail-card{display:none} } /* ══ 22d · VOID CHASSIS OPS SHELF (PR-0413) ════════════════════════════════ Reports page chart pairs — hosts filled by js/kit-reports-charts.js. */ .kr-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)} @media (max-width:820px){.kr-ops{grid-template-columns:1fr}} .kr-legend--row{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin-top:.5rem} .kr-legend--row b{margin-left:.15rem} /* ══ 22 · 375px + overflow ═════════════════════════════════════════════════ */ @media (max-width:375px){ .wrap{width:min(100% - 1.25rem,var(--max));padding-bottom:var(--s-6)} .header-widgets h1{font-size:var(--fs-4)} .ad-carousel{border-radius:2px} .actions .btn{flex:1 1 auto} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .page-bg__art,.ad-carousel__track,.btn,.mc-nav__cta,.chip,.task-card,.opt-card,.header-card,.meters .meter{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important} .page-bg__tint::after,.meter::after{animation:none !important} .aw-bar__track i{transition:none !important} }