/* Operator Studio — Shared Component Styles Reusable across ALL surfaces. No surface-specific rules here. Depends on base-tokens.css. */ /* ── Reset ────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%} body{min-height:100vh;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;overflow-x:hidden;touch-action:manipulation;overscroll-behavior-y:contain} button{font-family:var(--font-ui);cursor:pointer;border:none;outline:none;min-height:var(--control-min)} input,select,textarea{font-family:var(--font-ui);border:none;outline:none;font-size:16px;max-width:100%} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px} a{color:var(--accent);text-decoration:none} img,canvas{display:block;max-width:100%} /* ── Layout containers ───────────────────────────────────────── */ .container{width:min(var(--content-lg),100%);margin:0 auto} .shell{width:min(var(--content-xl),100%);margin:0 auto} .shell-narrow{width:min(var(--content-sm),100%);margin:0 auto} body[data-os-shell="page"],body[data-os-shell="post"]{overflow-x:hidden;background-image:radial-gradient(circle,var(--texture-dot) 1px,transparent 1px);background-size:24px 24px} body[data-os-shell="page"]{padding:0 var(--space-page-x) var(--space-8)} body[data-os-shell="post"]{padding:0 0 var(--space-8)} @media(min-width:640px){body[data-os-shell="page"]{padding-left:var(--space-page-x-wide);padding-right:var(--space-page-x-wide)}} /* ── Typography ───────────────────────────────────────────────── */ h1{margin:0;font-family:var(--font-ui);font-size:var(--fs-hero);line-height:1.1;color:var(--text)} h2{font-family:var(--font-ui);font-size:var(--fs-feature);font-weight:600;color:var(--text);margin-bottom:var(--space-4)} h3{font-family:var(--font-ui);font-size:var(--fs-title);font-weight:600;color:var(--text)} .kicker{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-stack-md)} .eyebrow,.label{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.3;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3)} .lead{color:var(--text-2);max-width:var(--content-readable);margin-bottom:var(--space-stack-xl)} .mono{font-family:var(--font-mono)} .small{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.4;color:var(--text-2)} .muted{color:var(--text-2)} code{font-family:var(--font-mono);color:var(--text);background:var(--surface-2);padding:2px 6px;border-radius:3px} /* ── Sections (content-page block rhythm — owned here, not per page) ── */ .sec{padding:var(--space-section) 0;border-bottom:1px solid var(--border)} .sec:last-of-type{border-bottom:none} /* Content-page hero heading — scoped to .sec so tool pages (agents/governance, .tool-intro) and prose pages keep their own h1; matches the value 10 content pages were each declaring inline. */ .sec h1, .hero h1{font-size:var(--fs-hero);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin-bottom:var(--space-stack-lg)} /* ── Cards & Panels ──────────────────────────────────────────── */ .card,.panel{border:var(--border-w) solid var(--border);border-radius:var(--r);background:var(--surface);padding:var(--space-panel);min-width:0} .card:hover{border-color:var(--accent-border);background:var(--surface-2)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;border-bottom:var(--border-w) solid var(--border-soft)} .panel-title{font-family:var(--font-ui);font-size:var(--fs-title);font-weight:700;color:var(--text)} .panel-body{padding:12px} .empty{padding:var(--space-panel);border:var(--border-w) solid var(--border-soft);border-radius:var(--r);color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-body);text-align:center} .error{color:var(--loss);padding:var(--space-panel);text-align:center;font-family:var(--font-mono);font-size:var(--fs-body)} /* ── Grids ───────────────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)} @media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}} /* ── Tables ──────────────────────────────────────────────────── */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;min-width:var(--table-min);border-collapse:collapse} thead th{padding:10px 8px;border-bottom:var(--border-w) solid var(--border-soft);text-align:left;vertical-align:top;font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);font-weight:500} tbody td{padding:10px 8px;border-bottom:var(--border-w) solid var(--border-soft);font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);vertical-align:top} tbody tr:last-child td{border-bottom:0} .num{text-align:right;font-variant-numeric:tabular-nums} .pos{color:var(--profit)} .neg{color:var(--loss)} /* ── Tags & Badges ───────────────────────────────────────────── */ .tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 8px;border:var(--border-w) solid var(--border);border-radius:var(--r);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:uppercase;color:var(--text)} .tag.up,.tag.long,.tag.buy{color:var(--profit);border-color:var(--profit-border);background:var(--profit-dim)} .tag.down,.tag.short,.tag.sell{color:var(--loss);border-color:var(--loss-border);background:var(--loss-dim)} .tag.open{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)} .tag.warn{color:var(--warn);border-color:var(--warn-border);background:var(--warn-dim)} .tag.paper{opacity:.6} /* ── Status indicators ───────────────────────────────────────── */ .dot{width:9px;height:9px;border-radius:50%;background:var(--text-3);flex-shrink:0} .dot.up{background:var(--profit);box-shadow:0 0 16px var(--profit-dim)} .dot.down{background:var(--loss);box-shadow:0 0 16px var(--loss-dim)} .dot.warn{background:var(--warn);box-shadow:0 0 16px var(--warn-dim)} .dot.dead{background:var(--text-3)} /* ── Buttons ─────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-min);padding:0 var(--control-pad-x);border:var(--border-w) solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s} .btn:hover,.btn:focus-visible{border-color:var(--accent-border);background:var(--accent-dim);color:var(--accent)} .btn-primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700} .btn-primary:hover{opacity:.85} .btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)} .btn-ghost:hover{color:var(--text);background:var(--card-hover)} .btn:active{transform:translateY(1px)} /* ── Metrics ──────────────────────────────────────────────────── */ .metric-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);margin-bottom:4px} .metric-value{font-family:var(--font-mono);font-size:var(--fs-metric);line-height:1.1;color:var(--text)} .metric-sub{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);margin-top:2px} /* ── Top ticker strip (always visible, side-fade, scroll-adjusts) ──── */ .os-ticker { position: sticky; top: var(--strip, 48px); left: 0; right: 0; z-index: calc(var(--shell-z, 80) - 1); height: var(--status-footer-h, 34px); overflow: hidden; background: rgba(10,10,12,.6); border-bottom: 1px solid rgba(113,121,208,.08); opacity: 1; transition: background .4s cubic-bezier(.4,0,.2,1), border-color .4s; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .os-ticker.is-scrolled { background: rgba(10,10,12,.85); border-bottom-color: rgba(113,121,208,.14); } :root[data-theme="light"] .os-ticker { background: rgba(245,245,247,.7); border-bottom-color: rgba(71,77,160,.08); } :root[data-theme="light"] .os-ticker.is-scrolled { background: rgba(245,245,247,.9); border-bottom-color: rgba(71,77,160,.14); } .os-dot{width:var(--status-dot-size);height:var(--status-dot-size);border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background .4s,box-shadow .4s} .os-dot.ok{background:var(--profit);box-shadow:var(--status-dot-glow-profit)} .os-dot.warn{background:var(--warn);box-shadow:var(--status-dot-glow-warn)} .os-ticker-track{display:flex;height:100%;animation:os-ticker-scroll 28s linear infinite} .os-ticker-track:hover{animation-play-state:paused} .os-ticker-segment{display:inline-flex;align-items:center;gap:14px;padding:0 80px 0 var(--space-page-x);white-space:nowrap;flex-shrink:0;font-family:var(--font-mono);font-size:var(--status-footer-fs);color:var(--text-2)} .os-ticker-sep{color:var(--text-4)} .os-ticker-link{color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:.02em;transition:opacity .15s} .os-ticker-link:hover{opacity:.75} @keyframes os-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.os-ticker-track{animation:none;overflow-x:auto}} /* Mobile: ticker flows naturally, not sticky — prevents content overlap */ @media (max-width: 560px) { .os-ticker { position: static; top: auto; } body[data-os-ticker] { scroll-padding-top: var(--strip, 48px); } } /* ── Command / List rows ────────────────────────────────────── */ .cmd-grid{display:grid;grid-template-columns:1fr;gap:8px} .cmd-row,.health-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)} .cmd-copy{min-width:0} .cmd-title{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);overflow-wrap:anywhere} .cmd-meta{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);margin-top:2px} .breaker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px} .breaker{border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface);padding:8px} .breaker strong{display:block;font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);margin-top:4px} /* ── Feed / Health lists ────────────────────────────────────── */ .health-list,.feed-list{display:grid;gap:8px} .feed-row{display:grid;grid-template-columns:1fr auto;align-items:start;gap:10px;min-height:48px;padding:9px 10px;border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)} .feed-main{min-width:0} .feed-title{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);overflow-wrap:anywhere} .feed-meta{margin-top:3px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2)} /* ── Mobile cards (alternative to tables on mobile) ─────────── */ .mobile-cards{display:grid;gap:8px} .signal-card,.backtest-card{padding:var(--space-panel);border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)} .card-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:var(--border-w) solid var(--border-soft)} .card-line:last-child{border-bottom:0} .card-line .small{text-transform:uppercase;letter-spacing:var(--track-label)} .card-line strong{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:500;text-align:right;overflow-wrap:anywhere} /* ── Utility ─────────────────────────────────────────────────── */ .desktop-only{display:none} @media(min-width:760px){.desktop-only{display:block}} @media(max-width:760px){.mobile-only{display:block}} /* ── Reduced motion ──────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ── Feature list ────────────────────────────────────────────── */ .feature-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-stack-lg);padding:0;list-style:none} .feature-list li{padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft);font-size:var(--fs-body);color:var(--text-2);line-height:1.6} .feature-list li:last-child{border-bottom:none} .feature-list li strong{color:var(--text)} /* ── Subnav grid ─────────────────────────────────────────────── */ .subnav-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--space-stack-lg)} @media(min-width:640px){.subnav-grid{grid-template-columns:1fr 1fr}} /* Nav-card affordance (#222): tap targets must read pre-attentively on mobile (no hover) — uniform 1px tinted border + trailing chevron + slight elevation. (#212: no directional left-stroke; the affordance is the accent chevron.) */ .subnav-card{position:relative;display:block;padding:var(--space-panel);padding-right:calc(var(--space-panel) + 22px);border:1px solid var(--accent-border);border-radius:var(--r);background:var(--surface-2);transition:border-color .15s,background .15s,transform .1s;text-decoration:none} .subnav-card::after{content:"→";position:absolute;top:var(--space-panel);right:var(--space-panel);color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-body);line-height:1} .subnav-card:active{transform:translateY(1px)} .subnav-card:hover{border-color:var(--accent-border);background:var(--surface)} .subnav-card h3{font-size:var(--fs-title);font-weight:700;margin-bottom:4px;color:var(--text)} .subnav-card p{font-size:var(--fs-body);color:var(--text-3);line-height:1.5} /* ── Status pill (Active / In development) ────────────────────── */ .status-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--fs-xxs);letter-spacing:var(--track-label);text-transform:uppercase;border-radius:var(--r);padding:3px 8px;margin-bottom:var(--space-stack-md)} .status-pill.active{color:var(--profit);border:var(--border-w) solid var(--profit-border);background:var(--profit-dim)} .status-pill.active::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--profit);flex-shrink:0;animation:pulse-dot 2.4s ease-in-out infinite} @keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--profit-border)}60%{opacity:.5;box-shadow:0 0 0 3px transparent}} .status-pill.dev{color:var(--text-3);border:var(--border-w) solid var(--border);background:var(--surface-2)} /* ── Differentiator grid ──────────────────────────────────────── */ .diff-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--space-stack-lg)} @media(min-width:640px){.diff-grid{grid-template-columns:1fr 1fr}} .diff-card{padding:var(--space-panel);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)} .diff-card h3{font-size:var(--fs-title);font-weight:700;margin-bottom:6px;color:var(--text)} .diff-card p{font-size:var(--fs-body);color:var(--text-3);line-height:1.55} /* ── Live proof block ─────────────────────────────────────────── */ /* Live-data treatment: green-tinted panel + the pulsing .live-dot in the kicker above mark this as real-time system output, distinct from static/nav cards (#222). (#212: uniform 1px tinted border; the green tint + live-dot carry the live signal, not a directional left-stroke.) */ .proof-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-stack-lg);margin-bottom:var(--space-stack-lg);background:var(--profit-dim);border:1px solid var(--profit-border);border-radius:var(--r);padding:var(--space-panel)} .proof-stat{display:flex;flex-direction:column;gap:4px;min-width:100px} .proof-val{font-family:var(--font-mono);font-size:var(--fs-value);font-weight:600;color:var(--text);line-height:1.1} .proof-lbl{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)} .muted-note{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-4);line-height:1.5;margin-top:var(--space-stack-sm)} .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--profit);box-shadow:0 0 0 0 var(--profit-border);animation:pulse-dot 2.4s ease-in-out infinite;margin-right:7px;vertical-align:middle} @media(prefers-reduced-motion:reduce){.live-dot{animation:none}} /* ── Gate block (locked content preview) ──────────────────────── */ .gate-list{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-stack-lg)} .gate-block{border:var(--border-w) solid var(--border);border-radius:var(--r);padding:var(--space-panel);background:var(--surface);display:flex;align-items:center;gap:var(--space-8)} .gate-label{font-size:var(--fs-body);color:var(--text-2);flex:1;line-height:1.4} .gate-label small{display:block;font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--text-4);letter-spacing:.04em;text-transform:uppercase;margin-top:3px} .gate-hint{font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--text-4);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} /* ── Site footer ─────────────────────────────────────────────── */ /* 2026-05-31: full-bleed surface band owned entirely by shared CSS. Bleed is body-padding-independent — calc(50% - 50vw) lands the left edge on the viewport edge whether the parent is full-width-padded (most pages), zero-padded (long-form posts), or a centered column. The scrollbar-width sliver from 100vw is clipped by body{overflow-x:hidden}, which every active page now sets. Content stays in the gutter via padding. */ .os-footer { width: 100vw; margin-left: calc(50% - 50vw); padding: var(--space-section) var(--space-page-x) var(--space-8); background: var(--surface); border-top: 1px solid var(--border); margin-top: var(--space-section); } @media (min-width: 640px) { .os-footer { padding-left: var(--space-page-x-wide); padding-right: var(--space-page-x-wide); } } .os-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; max-width: var(--content-lg); margin-left: auto; margin-right: auto; } @media (max-width: 760px) { .os-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .os-footer-grid { grid-template-columns: 1fr; } } .os-footer-bottom { max-width: var(--content-lg); margin-left: auto; margin-right: auto; } .os-footer-logo-slot { margin-bottom: 8px; } .os-footer-wordmark { font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--text); text-decoration: none; display: inline-block; transition: color .12s; } .os-footer-wordmark:hover { color: var(--accent); } .os-footer-tagline { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-4); line-height: 1.6; margin-top: 6px; } .os-footer-col-head { font-family: var(--font-mono); font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; } .os-footer-links { display: flex; flex-direction: column; gap: 8px; } .os-footer-links a { font-size: var(--fs-body); color: var(--text-3); text-decoration: none; transition: color .12s; } .os-footer-links a:hover { color: var(--text); } .os-footer-social { display: flex; gap: 8px; margin-bottom: 16px; } .os-social-btn { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-3); text-decoration: none; transition: border-color .15s, color .15s; flex-shrink: 0; } .os-social-btn:hover { border-color: var(--accent-border); color: var(--accent); } .os-footer-lang { display: flex; gap: 4px; } .os-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-4); } .os-footer-status { display: flex; align-items: center; gap: 6px; } .os-footer-legal { display: flex; gap: 12px; } .os-footer-legal a { color: var(--text-4); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-xs); transition: color .12s; } .os-footer-legal a:hover { color: var(--text-2); } /* ── Reveal motion (one substrate, lifted from per-page inline