/* Track Desk. Two themes on one variable set; the theme is stamped on * by theme.js before first paint. */ :root { --bg: #070b14; --panel: #0e1524; --panel2: #131c2e; --line: #1e2b42; --ink: #e8f0fb; --muted: #93a7c4; --dim: #6b7f9c; --accent: #38bdf8; --accent-ink: #04121d; --pink: #f472b6; --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --crit: #fb7185; --radius: 12px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-theme="light"] { --bg: #f5f8fc; --panel: #ffffff; --panel2: #eef3fa; --line: #d3e0ef; --ink: #0d1726; --muted: #4a5f7a; --dim: #6b7f9c; --accent: #0369a1; --accent-ink: #ffffff; --pink: #be185d; --ok: #047857; --warn: #a16207; --bad: #b91c1c; --crit: #9f1239; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: hidden; } a { color: var(--accent); } code, kbd, pre, .mono { font-family: var(--mono); } .hidden { display: none !important; } .mono { font-family: var(--mono); font-size: 0.88em; } .small { font-size: 0.85em; } .muted { color: var(--muted); } .dim { color: var(--dim); } /* --- Header ------------------------------------------------------------------ */ .topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 30; } .brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .brand strong { letter-spacing: 0.2px; } .backlink { text-decoration: none; color: var(--muted); font-size: 0.9rem; } .backlink:hover { color: var(--accent); } .sep { color: var(--dim); } .topactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .credits { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .topup { font-size: 0.82rem; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--accent); } button { font: inherit; cursor: pointer; } .ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; font-size: 0.85rem; } .ghost:hover { color: var(--ink); border-color: var(--accent); } /* --- Lane switcher ------------------------------------------------------------ */ .lanes { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel2); } .lanegroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lanegroup > .stage { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--dim); } .lanebtns { display: flex; flex-wrap: wrap; gap: 6px; } .lane { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 6px 14px; font-size: 0.88rem; white-space: nowrap; } .lane:hover { border-color: var(--accent); color: var(--ink); } .lane.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } /* --- Layout ------------------------------------------------------------------- */ main { max-width: 1080px; margin: 0 auto; padding: 22px 20px 64px; } .hero h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 12px 0 10px; } .lede { color: var(--muted); max-width: 74ch; } .herobtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; } .big { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); padding: 10px 16px; font-size: 0.95rem; } .big:hover { border-color: var(--accent); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 18px 0; } .field { margin-bottom: 14px; } .labelrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; } label { display: block; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); } textarea, input[type="text"], select { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; } select { font-family: var(--sans); font-size: 0.9rem; } textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } textarea { min-height: 230px; resize: vertical; } .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .dropzone { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; } .dropzone.hot { border-color: var(--accent); background: var(--panel2); } .dropbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } /* --- Prescan ------------------------------------------------------------------ */ .prescan { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; } .prescan h3 { margin: 0 0 10px; font-size: 0.98rem; } .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; } .stat .k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); } .stat .v { font-size: 1.15rem; font-weight: 600; font-family: var(--mono); } .scorebar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .scorepill { border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 0.8rem; background: var(--panel); } .scorepill b { font-family: var(--mono); } .s5, .s4 { color: var(--ok); } .s3 { color: var(--warn); } .s2, .s1, .s0 { color: var(--bad); } .flaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .flagitem { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 9px 12px; } .flagitem.critical { border-left-color: var(--crit); } .flagitem.high { border-left-color: var(--bad); } .flagitem.medium { border-left-color: var(--warn); } .flagitem.low { border-left-color: var(--dim); } .flaghead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .flagid { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); } .flagtitle { font-weight: 600; font-size: 0.92rem; } .flagdetail { color: var(--muted); font-size: 0.88rem; margin-top: 4px; } .flagev { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; } .chip { font-family: var(--mono); font-size: 0.74rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; word-break: break-all; } .sev { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; } .sev.critical { color: var(--crit); } .sev.high { color: var(--bad); } .sev.medium { color: var(--warn); } .sev.low { color: var(--dim); } .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ghost.small { padding: 3px 9px; font-size: 0.76rem; margin-top: 8px; } .ghost:disabled { opacity: 0.45; cursor: not-allowed; } /* --- Run-to-run comparison ------------------------------------------------------ */ .diffstrip { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); } .diffstrip > p { margin: 0 0 8px; } .diffcounts { display: flex; flex-wrap: wrap; gap: 8px; } .diffpill { font-size: 0.82rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; color: var(--muted); } .diffpill b { font-family: var(--mono); margin-right: 3px; } .diffpill.diff-closed { color: var(--ok); border-color: var(--ok); } .diffpill.diff-open { color: var(--warn); border-color: var(--warn); } .diffpill.diff-new { color: var(--bad); border-color: var(--bad); } .diffrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 9px; } .difflabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; flex: 0 0 auto; } .difflabel.diff-closed { color: var(--ok); } .difflabel.diff-open { color: var(--warn); } .difflabel.diff-new { color: var(--bad); } /* --- Checklists ----------------------------------------------------------------- */ .checklist { list-style: none; padding-left: 0; } .checkitem { margin-bottom: 6px; } .checkitem label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; } .checkitem input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); } .checkitem.ticked > label > span { color: var(--dim); text-decoration: line-through; } /* --- Run controls ------------------------------------------------------------- */ .runrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; } .primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px 22px; font-size: 1rem; font-weight: 650; } .primary:disabled { opacity: 0.45; cursor: not-allowed; } .meter { color: var(--muted); font-size: 0.85rem; } .gate, .note, .clipnote { margin-top: 10px; font-size: 0.87rem; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } .gate a, .gate [data-act] { color: var(--accent); cursor: pointer; text-decoration: underline; } /* --- Progress ----------------------------------------------------------------- */ .progress { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; } .progress h3 { margin: 0 0 4px; font-size: 1rem; } .status { color: var(--muted); font-size: 0.87rem; font-family: var(--mono); } .steplist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .step { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; color: var(--dim); } .step-ic { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; margin-top: 3px; } .step.done { color: var(--ink); } .step.done .step-ic { background: var(--ok); border-color: var(--ok); } .step.live { color: var(--ink); } .step.live .step-ic { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); } /* --- Result ------------------------------------------------------------------- */ .reshead { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; } .reshead h2 { margin: 0; font-size: 1.3rem; } .verdict { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; } .verdict.ready { color: var(--ok); border-color: var(--ok); } .verdict.needs-work { color: var(--warn); border-color: var(--warn); } .verdict.rebuild { color: var(--bad); border-color: var(--bad); } .lanetag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pink); border: 1px solid var(--pink); border-radius: 999px; padding: 2px 10px; } .headline { font-size: 1.02rem; margin: 10px 0 6px; } h3.sec { font-size: 1rem; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); } h3.sec:first-of-type { border-top: 0; padding-top: 0; } .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; font-size: 0.87rem; min-width: 460px; } th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--dim); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; } tbody tr:hover { background: var(--panel2); } pre { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.82rem; line-height: 1.5; margin: 0; } pre code { background: none; padding: 0; } /* --- Lane bodies -------------------------------------------------------------- */ .scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .scorecell { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; } .scorecell .area { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dim); } .scorecell .val { font-size: 1.4rem; font-weight: 700; font-family: var(--mono); } .scorecell .note { font-size: 0.83rem; color: var(--muted); margin-top: 4px; } .scorecell.pass .val { color: var(--ok); } .scorecell.partial .val { color: var(--warn); } .scorecell.fail .val { color: var(--bad); } .plain { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; } .plain li { margin-bottom: 5px; } .callcard, .metriccard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } .callhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; } .method { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; background: var(--accent); color: var(--accent-ink); border-radius: 5px; padding: 1px 7px; } .callname { font-weight: 650; font-family: var(--mono); font-size: 0.92rem; word-break: break-word; } .callwhen { color: var(--muted); font-size: 0.86rem; margin-bottom: 8px; } .stagetag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--muted); } .formula { font-family: var(--mono); font-size: 0.83rem; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; margin: 7px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .reconrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); } .reconrow:last-child { border-bottom: 0; } .recon-confirmed { color: var(--ok); } .recon-adjusted { color: var(--warn); } .recon-set-aside { color: var(--dim); } .recon-missing { color: var(--bad); } .handoff { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .handoff button { background: var(--panel2); border: 1px solid var(--pink); color: var(--pink); border-radius: 999px; padding: 7px 15px; font-size: 0.86rem; } .handoff button:hover { background: var(--pink); color: var(--panel); } .partialnote { background: var(--panel2); border: 1px solid var(--warn); border-radius: 9px; padding: 9px 12px; color: var(--warn); font-size: 0.87rem; margin: 10px 0; } /* --- History ------------------------------------------------------------------ */ .histlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .histrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } .histmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; min-width: 0; } .histtitle { font-weight: 600; font-size: 0.92rem; word-break: break-word; } /* --- Footer, toasts ----------------------------------------------------------- */ footer { border-top: 1px solid var(--line); padding: 22px 20px 46px; color: var(--muted); font-size: 0.87rem; } footer .inner { max-width: 1080px; margin: 0 auto; } footer p { margin: 6px 0; } #toasts { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 28px)); } .toast { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; padding: 10px 13px; font-size: 0.87rem; box-shadow: 0 6px 22px rgba(0,0,0,0.35); transition: opacity 0.4s ease; } .toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--bad); } .toast.gone { opacity: 0; } .toast a { margin-left: 8px; } details { margin-top: 14px; } summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; } /* --- Small viewports ---------------------------------------------------------- */ @media (max-width: 640px) { main { padding: 16px 14px 56px; } .topbar { padding: 10px 14px; } .lanes { padding: 12px 14px; gap: 12px; } .card { padding: 14px; } .primary { width: 100%; } .runrow { gap: 9px; } table { min-width: 420px; } .statgrid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); } } @media print { .topbar, .lanes, .herobtns, .handoff, #toasts, form, .progress, .prescan, footer { display: none !important; } body { background: #fff; color: #000; } } /* --- Docs pages (api.html, tokens.html) ---------------------------------------- */ .doc { max-width: 900px; margin: 0 auto; padding: 24px 20px 70px; } .doc h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin: 8px 0 12px; } .doc h2 { font-size: 1.15rem; margin: 30px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); } .doc h3 { font-size: 1rem; margin: 20px 0 6px; } .doc p { color: var(--muted); } .doc ul, .doc ol { color: var(--muted); } .doc li { margin-bottom: 5px; } .doc pre { margin: 10px 0; } .doc table { margin: 10px 0; } .statebox, .tokenbox { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; } .tokenbox { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; color: var(--ink); } .tokenrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; } .mini { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); padding: 5px 11px; font-size: 0.83rem; } .mini:hover { color: var(--ink); border-color: var(--accent); } .foot { margin-top: 34px; color: var(--dim); font-size: 0.85rem; } .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; } .tab { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 4px 12px; font-size: 0.8rem; font-family: var(--mono); } .tab:hover { color: var(--ink); border-color: var(--accent); } .tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .codegroup { margin: 10px 0 18px; } .codegroup pre { overflow-x: auto; }