/* Research desk command center. Design tokens first; see DESIGN.md. */
:root {
  --bg: #080b1a; --panel: #0e1228; --panel2: #151a36; --line: #252b52; --text: #e8eaf6; --muted: #8e94b8;
  --accent: #8b5cf6; --accent-ink: #ffffff; --accent2: #a78bfa; --up: #22c55e; --down: #f43f5e; --warn: #f59e0b; --grey: #6b7686;
  --radius: 10px; --gap: 16px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f7fa; --panel: #ffffff; --panel2: #eef2f6; --line: #d8dee6; --text: #0f1720; --muted: #5b6878;
  --accent: #6d28d9; --accent-ink: #ffffff; --accent2: #7c3aed; --up: #15803d; --down: #be123c; --warn: #b45309; --grey: #8b96a5;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f7fa; --panel: #ffffff; --panel2: #eef2f6; --line: #d8dee6; --text: #0f1720; --muted: #5b6878;
    --accent: #6d28d9; --accent-ink: #ffffff; --accent2: #7c3aed; --up: #15803d; --down: #be123c; --warn: #b45309; --grey: #8b96a5;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 8px 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h2.section { margin: 24px 0 8px; font-size: 18px; }
.lead { color: var(--muted); margin: 0 0 16px; max-width: 80ch; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono, code, pre { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; word-break: break-all; }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
code { background: var(--panel2); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
pre.code { background: var(--panel2); border: 1px solid var(--line); padding: 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; font-size: 12px; max-height: 360px; overflow: auto; }

/* shell */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 52px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); white-space: nowrap; }
.brand.big { font-size: 20px; justify-content: center; margin-bottom: 24px; }
.logo { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, var(--accent), transparent 70%), var(--panel2); border: 1px solid var(--accent); }
.navwrap { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.nav-more { position: relative; flex: none; }
.nav-more summary { list-style: none; cursor: pointer; color: var(--muted); padding: 8px 10px; font-size: 14px; border-radius: 8px; white-space: nowrap; min-height: 36px; display: flex; align-items: center; gap: 4px; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.nav-more summary:hover, .nav-more[open] summary { color: var(--text); }
.nav-more summary.on { color: var(--text); background: var(--panel2); }
.nav-more .menu { position: absolute; z-index: 40; top: 40px; left: 0; min-width: 200px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); display: grid; }
.nav-more .menu a { color: var(--text); padding: 9px 10px; border-radius: 6px; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.nav-more .menu a.on { background: var(--panel); color: var(--accent); }
.nav-more .menu a:hover { background: var(--panel); text-decoration: none; }
.nav-more .menu a.prim { display: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); padding: 8px 8px; font-size: 14px; border-radius: 8px; white-space: nowrap; min-height: 36px; display: flex; align-items: center; }
.nav a.on { color: var(--text); background: var(--panel2); }
.nav a:hover { text-decoration: none; color: var(--text); }
.who { display: flex; align-items: center; gap: 10px; }
.who form { margin: 0; }
.role { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.role-owner { border-color: var(--accent); color: var(--accent); }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 8px; min-height: 44px; }
button.theme { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
button.theme:hover { color: var(--text); border-color: var(--accent); }
button.theme svg { width: 18px; height: 18px; display: block; }
.page { max-width: 1320px; margin: 0 auto; padding: 16px 16px 120px; }

/* status strip */
#status { border-bottom: 1px solid var(--line); background: var(--panel); }
.strip { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 16px; font-size: 13px; }
.kv b { font-weight: 600; }
.state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .04em; font-size: 12px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); }
.state .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-running { color: var(--up); } .s-entries_paused { color: var(--warn); } .s-halted, .s-flattening { color: var(--down); }
.needs { color: var(--warn); font-weight: 600; } .ok { color: var(--up); }
.v-consistent { color: var(--up); } .v-mismatch { color: var(--down); } .v-inconclusive { color: var(--warn); }

/* layout */
.grid { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.g-hero { grid-template-columns: 2fr 1fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); min-width: 0; }
.grid > .card { margin-bottom: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.more { display: inline-block; margin-top: 10px; font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.row form { margin: 0; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.stat { background: var(--panel2); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font: 600 20px/1.2 var(--sans); font-variant-numeric: tabular-nums; margin-top: 4px; overflow-wrap: anywhere; }
.stat.big .stat-value { font-size: 28px; }
.stat.claimed .stat-value { color: var(--grey); font-size: 18px; }
.stat.claimed.up .stat-value { color: color-mix(in srgb, var(--up) 55%, var(--grey)); }
.stat.claimed.down .stat-value { color: color-mix(in srgb, var(--down) 55%, var(--grey)); }
.stat-sub { font-size: 12px; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.kvs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 12px; font-size: 13.5px; }
.big-count { font-size: 28px; font-weight: 600; margin: 6px 0 10px; }

/* badges and tags */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); text-transform: lowercase; white-space: nowrap; }
.b-verified, .b-consistent, .b-pass, .b-ok, .b-alive, .b-supported, .b-approved, .b-on { color: var(--up); border-color: color-mix(in srgb, var(--up) 50%, transparent); }
.b-mismatch, .b-fail, .b-rugged, .b-refuted, .b-killed, .b-rejected { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.b-unverified, .b-unknown, .b-off, .b-open, .b-proposed, .b-retired { color: var(--grey); }
.b-inconclusive, .b-warn, .b-faded, .b-ineligible, .b-testing { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.b-info, .b-graduated { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
.t-down { color: var(--down); } .t-warn { color: var(--warn); }
.ref { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.preview { font-size: 12px; color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); border-radius: 6px; padding: 4px 8px; margin: 0 0 10px; }
.empty { color: var(--muted); font-style: italic; }

/* tables */
.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; }
.t td { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding: 7px 8px; vertical-align: top; }
.t .r { text-align: right; }
.t tr.sub td { border-bottom-color: var(--line); padding-top: 0; }
.t tr.retired td { opacity: .6; }
.ticker { font-family: var(--mono); overflow-wrap: anywhere; }
details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.thesis { overflow-wrap: anywhere; }

/* meters (width by class: no inline style under the CSP) */
.meter { margin: 8px 0; }
.meter-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; gap: 8px; }
.meter-track { height: 8px; background: var(--panel2); border-radius: 99px; overflow: hidden; }
.meter-track.sm { height: 6px; width: 90px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.meter-fill { height: 100%; background: var(--accent); width: 0; }
.meter-fill.hot { background: var(--warn); }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* charts */
.chart { margin: 0; }
.chart-box { width: 100%; height: 240px; }
.chart-box[data-height="180"] { height: 180px; } .chart-box[data-height="200"] { height: 200px; } .chart-box[data-height="220"] { height: 220px; } .chart-box[data-height="260"] { height: 260px; }
.chart-box[data-chart="bars"], .chart-box[data-chart="latency"] { height: auto; }
.chart-box.eq-split { display: flex; flex-direction: column; gap: 0; }
.eq-pane { position: relative; min-height: 0; }
.eq-main { flex: 7 1 0; }
.eq-dd { flex: 3 1 0; border-top: 1px solid var(--line); }
.eq-pane-label { position: absolute; z-index: 3; top: 4px; left: 6px; padding: 2px 5px; border-radius: 4px; background: var(--panel); font: 600 10.5px/1 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; pointer-events: none; }
.eq-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: -2px 0 6px; }
.eq-legend b { font: 600 13px var(--sans); font-variant-numeric: tabular-nums; color: var(--text); }
.eq-legend .k { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; margin-right: 6px; }
.eq-legend .k.claimed { border-top: 2px dashed var(--grey); }
.eq-legend .k.dd { border-top: 6px solid var(--down); width: 8px; }
figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* home */
.needs-list { list-style: none; padding: 0; margin: 0; }
.needs-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sleeve-box { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pipe { background: var(--panel2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; color: var(--text); min-height: 64px; }
.pipe:hover { text-decoration: none; outline: 1px solid var(--accent); }
.pipe-n { font-size: 24px; font-weight: 600; }
.pipe-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.p-killed .pipe-n, .col-head.p-killed { color: var(--down); } .p-graduated .pipe-n, .col-head.p-graduated { color: var(--accent); } .p-testing .pipe-n, .col-head.p-testing { color: var(--warn); }

/* results */
.result { border-top: 1px solid var(--line); padding: 14px 0; }
.result:first-of-type { border-top: 0; padding-top: 0; }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sid { font-family: var(--mono); font-weight: 600; }

/* ideas board */
.tabs { display: none; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.col-head { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; display: flex; justify-content: space-between; margin-bottom: 10px; }
.idea { display: block; background: var(--panel2); border-radius: 8px; padding: 10px; margin-bottom: 10px; color: var(--text); border: 1px solid transparent; }
.idea:hover { border-color: var(--accent); text-decoration: none; }
.idea-top { display: flex; justify-content: space-between; gap: 6px; }
.idea .thesis { margin: 6px 0; font-size: 13px; }
.steps { padding-left: 20px; margin: 0; } .steps li { margin-bottom: 8px; font-size: 13.5px; }

/* high risk */
body.hr h1 .badge { vertical-align: middle; }
.stops { margin-bottom: 10px; }
.stopline { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); gap: 8px; }
.spec { border-bottom: 1px solid var(--line); padding: 6px 0; } .spec ul { margin: 4px 0; padding-left: 18px; }
.cand { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding: 4px 0; }
.cand.pass summary { color: var(--up); }
.cli { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.s-off { color: var(--grey); }
.words { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; } .words li { margin-bottom: 4px; }
h3.sub { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; font-weight: 600; }
.queue { list-style: none; padding: 0; margin: 0; }
.qstep { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 8px; background: var(--panel2); }
.qmain { min-width: 0; } .qtitle { overflow-wrap: anywhere; }
.qside { display: flex; align-items: center; gap: 12px; flex: none; }
.countdown { display: flex; flex-direction: column; align-items: flex-end; }
.cd { font-size: 18px; font-weight: 600; color: var(--warn); }
.did li { font-size: 13.5px; }
.error { color: var(--down); border: 1px solid var(--down); border-radius: 8px; padding: 8px 10px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }

/* buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: 600 14px var(--sans); cursor: pointer; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.btn.ghost { background: transparent; }
.btn.wide { width: 100%; }
.btn.big { min-height: 56px; font-size: 16px; }
.btn.pause { border-color: var(--warn); color: var(--warn); }
.btn.kill { background: var(--down); border-color: var(--down); color: #fff; }
.controlbar { position: fixed; z-index: 30; top: 8px; right: 16px; display: flex; gap: 8px; }
.top { padding-right: 300px; }
.controlbar form { margin: 0; }
.controlbar .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.control-form fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; padding: 8px 12px; }
.control-form legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
.choice { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.choice.disabled { opacity: .55; }
.control-form input[name="reason"], .filters input, .filters select { display: block; width: 100%; min-height: 44px; margin-top: 4px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; }
.control-form > label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto auto; gap: 10px; align-items: end; font-size: 12.5px; color: var(--muted); }
.cli-list, .tool-list, .cost-warnings { list-style: none; padding: 0; margin: 0; }
.cost-warnings li { padding: 6px 0; line-height: 1.45; }
.cli-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.confirm { max-width: 760px; margin: 24px auto; }
.select { user-select: all; }
.login-box { max-width: 420px; margin: 12vh auto; padding: 24px 16px; text-align: center; }

.foot { max-width: 1320px; margin: 0 auto; padding: 0 16px 24px; font-size: 12px; color: var(--muted); }

/* explanations: a small "?" that shows its text on hover, focus or tap (app.js toggles .open on tap) */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; padding: 0; vertical-align: 1px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 10.5px/1 var(--sans); cursor: help; flex: none; }
.tip:hover, .tip:focus-visible, .tip.open { color: var(--text); border-color: var(--accent); outline: none; }
.tip:hover::after, .tip:focus-visible::after, .tip.open::after { content: attr(data-tip); position: absolute; z-index: 50; top: 22px; right: -8px; width: max-content; max-width: min(300px, 80vw); background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 400 12.5px/1.45 var(--sans); text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.stat { position: relative; padding-right: 28px; }
.stat > .tip { position: absolute; top: 8px; right: 8px; margin: 0; }
.stat > .tip::after { right: 0; }

/* home: the command center */
body.cc-page .page { max-width: 1600px; padding-bottom: 12px; }
body.cc-page .foot { max-width: 1600px; padding-bottom: 8px; }
.cc { display: flex; flex-direction: column; gap: 12px; }
.cc-top { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--up); border-radius: var(--radius); padding: 10px 14px; }
.cc-top.t-warn { border-left-color: var(--warn); } .cc-top.t-down { border-left-color: var(--down); }
.cc-line { margin: 0; font-size: 16.5px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex: 1 1 520px; min-width: 0; }
.cc-line .dot, .hchip .dot, .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: none; display: inline-block; }
.cc-top.t-warn .cc-line .dot { background: var(--warn); } .cc-top.t-down .cc-line .dot { background: var(--down); }
.cc-health { display: flex; flex-wrap: wrap; gap: 6px; }
.hchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--panel2); border-radius: 99px; padding: 3px 6px 3px 10px; white-space: nowrap; }
.hchip b { font-weight: 600; }
.h-warn .dot { background: var(--warn); } .h-down .dot { background: var(--down); } .h-muted .dot { background: var(--grey); }
.needs-pop { position: relative; }
.needs-pop summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); border-radius: 99px; padding: 3px 10px; min-height: 28px; display: inline-flex; align-items: center; }
.needs-pop summary::-webkit-details-marker { display: none; }
.needs-pop[open] .needs-list { position: absolute; z-index: 45; top: 34px; left: 0; width: min(520px, 90vw); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.cc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
.cc-kpis .stat { padding: 8px 28px 8px 12px; }
.cc-kpis .stat-value { font-size: 18px; }
.cc-kpis .stat.big .stat-value { font-size: 22px; }
.cc-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "eq eq ins feed" "mkt mkt team feed"; }
.cc-grid > .card { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.cc-grid .card-head { margin-bottom: 8px; }
.cc-grid h2 { display: flex; align-items: center; }
.cc-grid h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 6px; font-weight: 600; }
.cc-grid h3:first-child { margin-top: 0; }
.cc-equity { grid-area: eq; } .cc-feed { grid-area: feed; }
.cc-insight { grid-area: ins; } .cc-market { grid-area: mkt; } .cc-team { grid-area: team; }
.cc-equity figure.chart { margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cc-equity figcaption { display: none; }
.cc-equity .chart-box { flex: 1 1 auto; height: auto; min-height: 200px; }
/* A panel with more than fits scrolls inside itself; the visible scrollbar and the fade at its foot say there is more. */
.cc .scroll { overflow: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cc .scroll::-webkit-scrollbar { width: 6px; } .cc .scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cc .scroll.more-below { mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.cc-market .mk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 18px; min-height: 0; flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr); }
.cc-market .mk-cols.has-pos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); }
.cc-market .mk-pos, .cc-market .mk-px { display: flex; flex-direction: column; min-height: 0; }
.cc-market .mk-cols:not(.has-pos) .mk-pos { flex-direction: row; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.cc-market .mk-cols:not(.has-pos) .mk-pos .card-head { margin: 0; }
.cc-market .mk-cols:not(.has-pos) .mk-pos .empty { margin: 0; font-size: 13px; }
.cc-market .mk-cols:not(.has-pos) .mk-pos .scroll { flex: 1 1 auto; }
.cc-market .mk-px { overflow: auto; }
.cc-market .mk-px > .card-head { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.stat.word .stat-value { font: 600 16px/1.5 var(--sans); }
.b-partial { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.b-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.live.l-stale { color: var(--warn); } .live.l-stale .dot { background: var(--warn); }
.live.l-quiet { color: var(--muted); } .live.l-quiet .dot { background: var(--grey); }
.cc-feed .card-head { flex: none; }
.cc-t { font-size: 13px; }
.cc-t td, .cc-t th { padding: 5px 6px; }
.px-t { table-layout: fixed; width: 100%; }
.px-t th:nth-child(2) { width: 26%; } .px-t th:nth-child(3) { width: 20%; } .px-t th:last-child { width: 14%; }
.px-t td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-t th { position: sticky; top: 30px; background: var(--panel); z-index: 1; }
.team-t { table-layout: fixed; width: 100%; }
.team-t th:first-child { width: 30%; } .team-t th:nth-child(2) { width: 13%; } .team-t th:nth-child(3) { width: 15%; }
.team-t th:nth-child(4) { width: 16%; } .team-t th:last-child { width: 26%; }
.team-t th { white-space: normal; line-height: 1.2; vertical-align: bottom; } .team-t td:last-child { white-space: nowrap; }
.team-t td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-t th { font-size: 11.5px; }
.cc-t td.r, .cc-t th.r { text-align: right; }
.cc-t a { color: var(--text); font-weight: 600; }
.cc-t tr.pick:hover td { background: var(--panel2); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--up); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 34px 50px minmax(0, 1fr); gap: 6px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 12.5px; line-height: 1.35; }
.f-at { color: var(--muted); font-size: 11.5px; padding-top: 1px; }
.f-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.k-trade { color: var(--accent); } .k-gate { color: var(--warn); } .k-checker { color: var(--up); } .k-control, .k-risk, .k-ops { color: var(--down); }
.f-text { overflow-wrap: anywhere; } .f-text a { color: var(--text); } .f-text .ref { margin-left: 4px; color: var(--muted); }
.f-up .f-text a { border-bottom: 1px dotted var(--up); } .f-down .f-text a { border-bottom: 1px dotted var(--down); }
.f-down:not(:has(a:not(.ref))) .f-text { color: var(--down); }
.note { color: var(--muted); border-left: 2px solid var(--line); padding: 2px 0 2px 8px; margin: 8px 0 0; }
.tr-what { margin: 0 0 8px; }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tr-cols p { margin: 0 0 6px; font-size: 13.5px; }
.ai { font-family: var(--mono); font-size: 12.5px; }
blockquote.ai { margin: 2px 0 8px; padding: 6px 8px; background: var(--panel2); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
.ai-label { margin: 6px 0 0; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.ai-label::before { content: "AI"; font-weight: 700; color: var(--accent); margin-right: 6px; }
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.kv-list dt { color: var(--muted); display: flex; align-items: center; } .kv-list dd { margin: 0; text-align: right; }
.team-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.team-sum .stat-value { font-size: 17px; }
.cost-roles { list-style: none; margin: 6px 0; padding: 0; }
.cost-roles li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--muted); }
.pipeline.mini { margin-top: 8px; gap: 6px; }
.cc-insight #grading { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0; margin: 10px 0 0; }
.cc-insight #grading .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.cc-insight #grading .stat-value { font-size: 14px; }
.cc-team .meter { margin-bottom: 6px; }
.pipeline.mini .pipe { min-height: 0; padding: 4px; }
.pipeline.mini .pipe-n { font-size: 16px; }
.pipeline.mini .pipe-l { font-size: 10px; }

/* desktop: one screen, no page scroll. Header 52px, status strip and page padding make up the rest. */
@media (min-width: 1100px) {
  .tr-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 721px) and (max-width: 1099px) {
  .cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "eq eq" "ins feed" "mkt mkt" "team team"; }
  .cc-equity .chart-box { min-height: 300px; } .cc-insight .scroll { max-height: 640px; }
  .cc-feed .scroll { max-height: 640px; }
}

/* ------------------------------------------------------------ agent teams, cycle, system map */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head .team-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h-page { font-size: 20px; margin: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-svg { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes flowdash { to { stroke-dashoffset: -24; } }
.dot.pulse { animation: pulse 1.8s infinite; }
.team .card-head h2 { font-size: 16px; }
.team-kpis { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); }
.agent-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.agent-flow .hand { align-self: center; color: var(--muted); font-size: 18px; }
.agent-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.agent { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.agent.st-working { border-color: color-mix(in srgb, var(--up) 55%, var(--line)); }
.agent.st-waiting { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.agent-h { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.agent-h h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.agent-t { min-width: 0; }
.agent-t .small { display: block; overflow-wrap: anywhere; }
.agent-st { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.agent-st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); display: inline-block; flex: none; }
.st-working .agent-st { color: var(--up); } .st-working .agent-st .dot { background: var(--up); }
.st-waiting .agent-st { color: var(--warn); } .st-waiting .agent-st .dot { background: var(--warn); }
.st-idle .agent-st .dot { background: var(--accent); }
.av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 700 14px/1 var(--sans); flex: none; }
.av-ai { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.av-code { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.av-gate { background: color-mix(in srgb, var(--warn) 18%, var(--panel)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.agent-out blockquote.ai { margin: 4px 0 4px; font-size: 13px; line-height: 1.45; }
.agent-rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; margin: auto 0 0; border-top: 1px solid var(--line); padding-top: 8px; }
.agent-rec div { min-width: 0; }
.agent-rec dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.agent-rec dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 920px; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 10px 14px; min-width: 0; }
.m-ai .bubble { border-left: 3px solid var(--accent); }
.m-gate .bubble { border-left: 3px solid var(--warn); }
.msg.t-ok .bubble { border-left-color: var(--up); } .msg.t-down .bubble { border-left-color: var(--down); }
.msg-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.msg-t { font-weight: 600; margin-top: 2px; }
.msg-b { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; background: var(--panel2); }
.chip.h-ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.chip.h-down { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.chip.h-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg .dot, .sys-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); display: inline-block; flex: none; }
.lg.h-warn .dot { background: var(--warn); } .lg.h-down .dot { background: var(--down); } .lg.h-muted .dot { background: var(--grey); }
.sysmap-svg { width: 100%; height: auto; display: block; }
.sysmap-svg .col-l { fill: var(--muted); font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; dominant-baseline: hanging; }
.sysmap-svg .flow path { fill: none; stroke: var(--line); stroke-width: 1.6; }
.sysmap-svg .flow.live path { stroke: color-mix(in srgb, var(--accent) 70%, var(--line)); stroke-dasharray: 6 6; animation: flowdash 1.2s linear infinite; }
.sysmap-svg .arrowhead { fill: var(--muted); }
.sysmap-svg .flow-l { fill: var(--muted); font: 10.5px var(--sans); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.sysmap-svg .node rect { fill: var(--panel2); stroke: var(--line); stroke-width: 1.2; transition: stroke .15s; }
.sysmap-svg .node:hover rect, .sysmap-svg .node:focus rect { stroke: var(--accent); }
.sysmap-svg .node.h-down rect { stroke: color-mix(in srgb, var(--down) 70%, var(--line)); }
.sysmap-svg .node.h-warn rect { stroke: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.sysmap-svg .light { fill: var(--up); }
.sysmap-svg .h-warn .light { fill: var(--warn); } .sysmap-svg .h-down .light { fill: var(--down); } .sysmap-svg .h-muted .light { fill: var(--grey); }
.sysmap-svg .light.pulse { animation: pulse-svg 1.6s ease-in-out infinite; }
.sysmap-svg .n-name { fill: var(--text); font: 600 14.5px var(--sans); }
.sysmap-svg .n-val { fill: var(--text); font: 600 13px var(--sans); }
.sysmap-svg .n-sub { fill: var(--muted); font: 12px var(--sans); }
.sysmap-svg .g-ai rect { fill: color-mix(in srgb, var(--accent) 9%, var(--panel2)); }
.sysmap-svg .g-check rect { fill: color-mix(in srgb, var(--warn) 6%, var(--panel2)); }
.sysmap-list { display: none; list-style: none; margin: 0; padding: 0; }
.sys-item { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.sys-item .si-name { font-weight: 600; } .sys-item .si-val { font-size: 13px; text-align: right; }
.sys-item .si-sub { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.sys-item.h-warn .dot { background: var(--warn); } .sys-item.h-down .dot { background: var(--down); } .sys-item.h-muted .dot { background: var(--grey); }
@media (prefers-reduced-motion: reduce) { .dot.pulse, .sysmap-svg .light.pulse, .sysmap-svg .flow.live path { animation: none; } }
@media (max-width: 1180px) { .agent-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .agent-flow .hand { display: none; } }
@media (max-width: 720px) {
  .sysmap-svg { display: none; } .sysmap-list { display: block; }
  .agent-flow, .agent-pair { grid-template-columns: minmax(0, 1fr); }
  .page-head .team-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .chat .av { width: 26px; height: 26px; font-size: 12px; }
}

/* phone */
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .top { padding-right: 16px; gap: 8px; height: auto; min-height: 52px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
  .brand { font-size: 14px; }
  .navwrap { order: 3; flex-basis: 100%; }
  .nav { flex: 1 1 auto; mask-image: linear-gradient(to right, #000 85%, transparent); }
  .nav a { min-height: 44px; padding: 8px 7px; }
  .nav-more summary { min-height: 44px; background: var(--panel2); }
  .nav-more .menu { left: auto; right: 0; top: 48px; min-width: 220px; max-height: 70vh; overflow-y: auto; }
  .nav-more .menu a.prim { display: flex; }
  .nav-more summary.on { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .g-hero, .g-3, .g-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat.big .stat-value { font-size: 22px; }
  .controlbar { top: auto; bottom: 0; left: 0; right: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); gap: 10px; }
  .controlbar form { flex: 1; }
  .controlbar .btn { width: 100%; min-height: 52px; font-size: 15px; }
  .board { grid-template-columns: 1fr; }
  .qstep { flex-direction: column; align-items: stretch; }
  .qside { justify-content: space-between; }
  .countdown { align-items: flex-start; }
  .foot { padding-bottom: 96px; }
  .tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
  .tabs a { background: var(--panel2); border-radius: 99px; padding: 0 14px; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
  .filters { grid-template-columns: 1fr 1fr; }
  .t.stack thead { display: none; }
  .t.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .t.stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 2px; text-align: right; }
  .t.stack td::before { content: attr(data-l); color: var(--muted); font-size: 12px; text-align: left; flex: none; }
  .t.stack td.r { text-align: right; }
  .t:not(.stack) { display: block; overflow-x: auto; }
  .strip { gap: 6px 12px; font-size: 12px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 19px; }
  .cc-top { padding: 10px 12px; }
  .cc-line { font-size: 15px; flex-basis: 100%; }
  .hchip { white-space: normal; max-width: 100%; }
  .cc-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* phone: the top line, then the chart, then the numbers, then the panels */
  body.cc-page .cc { display: flex; flex-direction: column; gap: 10px; }
  body.cc-page .cc-grid { display: contents; }
  .cc-top { order: 0; } .cc-equity { order: 1; } .cc-kpis { order: 2; } .cc-feed { order: 3; } .cc-insight { order: 4; }
  .cc-market { order: 5; } .cc-team { order: 6; }
  .cc-grid > .card { margin: 0; }
  .cc-equity .chart-box { min-height: 230px; }
  .cc-kpis { gap: 6px; } .cc-kpis .stat { padding: 6px 26px 6px 10px; } .cc-kpis .stat-label { font-size: 10.5px; } .cc-kpis .stat-value { font-size: 16px; }
  .cc-kpis .stat-sub { font-size: 11px; }
  .cc-health { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; }
  .cc-health .hchip { font-size: 11.5px; padding: 4px 4px 4px 8px; white-space: normal; line-height: 1.3; display: flex; border-radius: 10px; }
  .cc-health .hchip .tip { margin-left: auto; flex: none; }
  .cc-feed .scroll { max-height: 420px; }
  .cc-insight .scroll, .cc-market .mk-px > .t, .cc-team .scroll { max-height: none; }
  .cc-market .mk-cols.has-pos { grid-template-columns: minmax(0, 1fr); }
  .feed li { grid-template-columns: 38px minmax(0, 1fr); }
  .feed .f-kind { display: none; }
  .cc-t.stack td { padding: 3px 2px; }
  .tip:hover::after, .tip:focus-visible::after, .tip.open::after { position: fixed; top: auto; bottom: 92px; left: 16px; right: 16px; max-width: none; width: auto; }
}

/* ---- trade and confirm (worker C) ---- */
.tr-root h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.tr-head-r { display: inline-flex; align-items: center; gap: 8px; }
.tr-meta { display: inline; }
.tr-strat { color: var(--text); border-bottom: 1px dotted var(--muted); cursor: help; }
abbr.tr-abbr { text-decoration: underline dotted; cursor: help; }
.tr-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; margin-bottom: 4px; }
.tr-top h3:first-child, .tr-out h3:first-child { margin-top: 4px; }
.tr-kv dd { overflow-wrap: anywhere; }
.tr-kv dd b { font-weight: 700; }
.b-closed { color: var(--muted); }
.tr-exits { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tr-exit { white-space: nowrap; }
.tr-exit a { font-weight: 600; }

/* the price chart: two inline SVGs side by side, plot then price scale, drawn in percent coordinates */
figure.tr-chart { margin: 12px 0 4px; min-width: 0; }
.tr-ch { display: grid; grid-template-columns: minmax(0, 1fr) 78px; height: 140px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tr-ch svg { display: block; height: 140px; overflow: visible; }
.tr-ch-axis { border-left: 1px solid var(--line); }
.tr-ch-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-ch-line { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.tr-ch-v { stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.tr-ch-v.buy { stroke: var(--up); } .tr-ch-v.sell { stroke: var(--down); }
.tr-ch-dot { stroke: var(--panel2); stroke-width: 1.5; }
.tr-ch-dot.buy { fill: var(--up); } .tr-ch-dot.sell { fill: var(--down); }
.tr-ch-dot.this { stroke: var(--text); stroke-width: 2; }
.tr-ch-tx { fill: var(--muted); font: 10.5px var(--sans); }
.tr-ch-lab { font: 600 11px var(--sans); paint-order: stroke; stroke: var(--panel2); stroke-width: 3px; stroke-linejoin: round; }
.tr-ch-lab.buy { fill: var(--up); } .tr-ch-lab.sell { fill: var(--down); }
.tr-ch-lastbg { fill: var(--accent); }
.tr-ch-last { fill: var(--accent-ink); font: 600 10.5px var(--sans); }
figure.tr-chart figcaption { margin-top: 4px; line-height: 1.4; }

/* the full trade page: a readable width, labels right next to their values */
.trade-page { max-width: 1100px; margin: 0 auto; }
.tr-back { margin: 4px 0 10px; }
.trade-page .kv-list { grid-template-columns: minmax(118px, max-content) minmax(0, 1fr); gap: 5px 16px; font-size: 13.5px; }
.trade-page .kv-list dd { text-align: left; }
.trade-page .tr-exits { align-items: flex-start; }
.trade-page .tr-what { font-size: 15px; }
@media (min-width: 880px) {
  .trade-page .tr-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .trade-page .tr-top figure.tr-chart { margin-top: 26px; }
  .trade-page .tr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 32px; }
}

/* the pause and kill confirm screen */
.page-confirm .controlbar { display: none; }
.page-confirm .page { padding-bottom: 32px; }
.confirm h1 { margin-top: 0; }
.cf-lead { font-size: 16px; line-height: 1.5; margin: 6px 0 10px; color: var(--text); }
.cf-exp { color: var(--warn); margin: 10px 0 0; }
.cf-actions form { flex: 1 1 220px; }
.cf-actions .btn.ghost { flex: 1 1 140px; width: auto; }
.confirm .btn.pause { background: var(--warn); border-color: var(--warn); color: var(--bg); }
.confirm .btn.kill { background: var(--down); border-color: var(--down); color: #fff; }
.cf-rec { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.cf-rec summary { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) {
  .confirm { margin: 8px auto; }
  .cf-lead { font-size: 15px; }
  .cf-actions { flex-direction: column; }
  .cf-actions form, .cf-actions .btn.ghost { flex: none; width: 100%; }
  .cf-actions .btn { min-height: 52px; }
  .tr-ch { grid-template-columns: minmax(0, 1fr) 72px; }
}

/* ---- agents, cycle, system map (worker B) ---- */
/* agent cards: a record grid and an AI cost line on every card */
.team-kpis b { color: inherit; font-weight: 700; }
.team-kpis .tip { margin-left: 0; }
.agent-rec .wide { grid-column: 1 / -1; }
.agent-cost { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.agent-cost .ac-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.agent-cost .ac-v { font-size: 13.5px; font-weight: 700; }
.agent-cost.code .ac-v { color: var(--muted); font-weight: 500; }
.agent-cost .ac-note { flex-basis: 100%; line-height: 1.35; }
.agent-out blockquote.code-out { border-left: 2px solid var(--line); }
.agent-gate { border-left: 2px solid var(--grey); padding: 2px 0 2px 8px; }
.agent-gate.g-ok { border-left-color: var(--up); } .agent-gate.g-down { border-left-color: var(--down); }
.agent-gate p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; }
.agent-gate a { color: var(--text); }
.agent-gate a:hover { color: var(--accent); }
.cycles td a[title] { color: var(--text); border-bottom: 1px dotted var(--muted); }
/* one cycle: summary under the title, the conversation across the page width */
.cyc-page { max-width: 1200px; }
.cyc-back { margin: 0 0 6px; font-size: 13px; }
.cyc-h { margin: 0 0 10px; font-size: 22px; display: flex; align-items: center; gap: 4px; }
.cyc-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0 0 16px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cyc-sum > div { background: var(--panel); padding: 7px 12px; min-width: 0; }
.cyc-sum dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; }
.cyc-sum dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cyc-sum dd a { color: var(--text); border-bottom: 1px dotted var(--accent); }
.cyc-page .chat { max-width: none; gap: 10px; }
.cyc-page .msg-b { max-width: 120ch; }
.cyc-page .msg-t a[title] { border-bottom: 1px dotted var(--accent); }
.msg-sub { margin: 10px 0 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; display: flex; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; margin: 6px 0 0; }
.facts > div { min-width: 0; border-left: 2px solid var(--line); padding-left: 8px; }
.facts dt { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; }
.facts dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cyc-arms { margin-top: 8px; font-size: 13px; }
.cyc-arms th { font-size: 11.5px; }
.cyc-arms th.r, .cyc-arms td.r { text-align: right; }
.cyc-arms th .tip { vertical-align: 0; }
.cyc-arms tr.picked td { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cyc-page .msg.t-down .bubble { color: var(--text); }
.cyc-page .msg.t-down .msg-h b, .cyc-page .msg.t-down .msg-t, .cyc-page .msg.t-down .msg-t a { color: var(--down); }
.cyc-page .msg.t-ok .msg-t a { color: var(--up); }
.cyc-arms { max-width: 860px; }
.chip[title] { cursor: help; }
.m-placeholder .bubble { border-style: dashed; background: transparent; }
.m-placeholder .msg-t, .m-placeholder .msg-b { color: var(--muted); }
.tag-ph { border: 1px dashed var(--line); background: transparent; cursor: help; }
/* system map: boxes read as links; text is wrapped server side so it stays inside its box */
.sysmap-svg .node { cursor: pointer; }
.sysmap-svg .node:focus { outline: none; }
.sysmap-svg .node:hover .box, .sysmap-svg .node:focus-visible .box { stroke: var(--accent); stroke-width: 2.2; fill: color-mix(in srgb, var(--accent) 7%, var(--panel2)); }
.sysmap-svg .n-go { fill: var(--muted); font: 600 22px var(--sans); text-anchor: end; transition: fill .15s; }
.sysmap-svg .node:hover .n-go, .sysmap-svg .node:focus-visible .n-go { fill: var(--accent); }
.sysmap-svg .node:hover .n-name { text-decoration: underline; }
.sys-item { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sys-item:hover { background: var(--panel2); text-decoration: none; }
.sys-item .si-val { overflow-wrap: anywhere; }
.sys-item .si-go { color: var(--muted); font-size: 20px; line-height: 1; }
.sys-item .si-flow { grid-column: 2 / -1; font-size: 12px; color: var(--muted); line-height: 1.4; border-left: 2px solid var(--line); padding-left: 8px; margin-top: 2px; }
.sys-notes { margin: 10px 0 0; padding-left: 18px; }
.sys-notes li { margin: 2px 0; }
@media (max-width: 720px) {
  .cyc-h { font-size: 19px; }
  .cyc-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cyc-arms { font-size: 12px; }
  .cyc-arms th { white-space: normal; vertical-align: bottom; }
  .cyc-arms th, .cyc-arms td { padding: 5px 4px; }
}

/* plain dates keep their capitals */
.badge.b-partial { text-transform: none; }

/* ---- round 3: results, ideas, positions, costs ---- */
.r-name { font: 600 16px/1.3 var(--sans); color: var(--text); }
.r-name:hover { color: var(--accent); }
.r-exec { align-items: start; }
.r-slip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.r-slip .stat { padding: 8px 26px 8px 10px; }
.r-slip .stat-value { font-size: 17px; }
.r-lat td:first-child { white-space: normal; }
.r-lat .r-use { white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.col-sub { margin: -6px 0 10px; font-size: 12px; color: var(--muted); }
.idea { min-width: 0; }
.idea-top { align-items: baseline; }
.idea-name { font: 600 14px/1.35 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.idea-name:hover { color: var(--accent); }
.idea-why { color: var(--text); margin: 6px 0 4px; }
.idea-ids { margin: -10px 0 14px; overflow-wrap: anywhere; }
.step-link { font-size: 12.5px; white-space: nowrap; }
.gate-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.gate-tile { background: var(--panel2); border-radius: 8px; padding: 8px 10px; min-width: 0; cursor: help; }
.gate-tile .gt-v { font: 600 18px/1.3 var(--sans); margin-top: 2px; }
.gate-tile .stat-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.c-top { align-items: start; }
.c-why { margin-top: 10px; padding: 8px 10px; background: var(--panel2); border-radius: 8px; }
@media (max-width: 720px) {
  .r-slip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gate-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* ---- round 3: research, high risk, auto, controls, checker, audit ---- */
/* tables in these pages stay inside their cards: long words wrap, headings may wrap */
.rm-row .t td, .rm-alloc .t td, .feats td, .hr-by td, .hr-limits td, .verdicts td, .audit-t td { overflow-wrap: anywhere; }
.rm-findings th, .alloc th, .feats th, .verdicts th { white-space: normal; vertical-align: bottom; }
.alloc th.why, .alloc td.why { width: 36%; min-width: 28ch; }
.alloc td.why { font-size: 13px; color: var(--muted); line-height: 1.45; }
.share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.share .meter-track { flex: 1 1 60px; min-width: 50px; margin: 0; }
.share .num { white-space: nowrap; }
/* a raw command under a plain sentence: label, sentence, then the code to type */
.howto { border: 1px solid var(--line); background: var(--panel2); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; min-width: 0; }
.howto-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.howto p { margin: 4px 0 8px; }
code.howto-cmd { display: block; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-all; user-select: all; }
.howto .fill { margin: 6px 0 0; padding-left: 18px; }
.cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; }
.cli-grid .howto { margin: 0; }
.owner-only { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
/* field and tool names: small, grey, beside the plain label */
.fname { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: normal; }
.tool-list { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 4px 16px; margin-bottom: 4px; }
.tool-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; padding: 2px 0; }
.tool-list .fname { margin-left: 0; }
/* a token's own name, set by its creator: quoted, dotted, never markup */
.tokname { font-family: var(--mono); overflow-wrap: anywhere; border-bottom: 1px dotted var(--muted); cursor: help; }
/* the gate's checks in plain words */
.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px 18px; margin: 8px 0 0; }
.gloss > div { border-left: 2px solid var(--line); padding-left: 8px; min-width: 0; }
.gloss dt { font-weight: 600; font-size: 13.5px; }
.gloss dd { margin: 2px 0 0; line-height: 1.4; }
.rawline { overflow-wrap: anywhere; margin-top: 2px; }
.rawmap { margin-top: 8px; }
.rawmap summary, details.tech summary { cursor: pointer; }
details.tech { overflow-wrap: anywhere; }
.verdicts tr.sub td { padding-top: 0; padding-bottom: 8px; }
.hr-pnl .chart { margin-bottom: 4px; }
.hr-by { margin-top: 2px; }
h2 .muted.small { font-weight: 400; margin-left: 6px; }
@media (max-width: 720px) {
  .alloc th.why, .alloc td.why { width: auto; min-width: 0; }
  .share { min-width: 0; }
}
/* ---- round 3: agent teams, research cycle, system map ---- */
/* agent cards: the job in a line, a short list of recent work, and an AI cost line with a real gap */
.agents-lead { margin: -4px 0 12px; max-width: 120ch; color: var(--muted); }
.team-paper { margin: -4px 0 12px; padding: 6px 10px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); border-radius: 4px; line-height: 1.45; }
.agent-job { margin: -2px 0 0; color: var(--muted); line-height: 1.4; }
.agent-recent ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.agent-recent li { font-size: 12.5px; line-height: 1.4; padding-left: 10px; border-left: 2px solid var(--line); overflow-wrap: anywhere; }
.agent-recent li a { color: var(--text); }
.agent-recent li a:hover { color: var(--accent); }
.agent-recent .empty { margin: 4px 0 0; }
.agent-rec dd.tx { font-family: var(--sans); }
.agent-cost { justify-content: flex-start; column-gap: 8px; }
.agent-cost .ac-v { margin-left: auto; text-align: right; }
.agent-cost.code .ac-v { font-family: var(--sans); }
.tag-ai { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
/* what each role has cost: a bar per role and the split by team, so the card has no empty half */
.agents-shared { align-items: stretch; }
.role-costs { display: flex; flex-direction: column; }
.rc-table .rc-barh { width: 26%; }
.rc-table td.rc-bar { vertical-align: middle; }
.rc-table .meter-track { height: 8px; }
.rc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: auto; padding-top: 14px; }
.rc-cell { background: var(--panel2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-cell .rc-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rc-cell .rc-v { font-size: 17px; font-weight: 700; }
.rc-cell.rc-total { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
/* one cycle: the conversation on the left, the cycle summary and the gate's numbers in a side panel */
.cyc-page { max-width: none; }
.cyc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.cyc-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cyc-side .card { margin: 0; padding: 14px; }
.cyc-side-h { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.kvg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 8px 0 0; }
.kvg > div { min-width: 0; border-left: 2px solid var(--line); padding: 1px 0 1px 8px; }
.kvg dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 2px; }
.kvg dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kvg dd a { color: var(--text); border-bottom: 1px dotted var(--accent); }
.kvg-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.kvg-side .wide { grid-column: 1 / -1; }
.cyc-verdict { margin: 0 0 10px; font-weight: 700; }
.cyc-verdict.up { color: var(--up); } .cyc-verdict.down { color: var(--down); }
.gate-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gt { background: var(--panel2); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.gt-l { font-size: 11.5px; color: var(--muted); line-height: 1.3; display: flex; align-items: flex-start; gap: 2px; }
.gt-v { font-size: 18px; font-weight: 700; margin-top: 3px; }
.gt-s { font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.cyc-note { margin: 10px 0 0; }
.cyc-page .msg.mt-ok .bubble { border-left-color: var(--up); }
.cyc-page .msg.mt-down .bubble { border-left-color: var(--down); }
.cyc-page .msg.mt-down .msg-t, .cyc-page .msg.mt-down .msg-t a, .cyc-page .msg.mt-down .msg-h b { color: var(--down); }
.cyc-page .msg.mt-ok .msg-t a { color: var(--up); }
.ai-cap { margin: 8px 0 0; font-size: 11.5px; color: var(--accent); }
.cyc-page blockquote.ai-words { margin: 3px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.5; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); white-space: pre-wrap; max-width: none; }
.gate-checks { margin-top: 6px; font-size: 13px; }
.gate-checks th { font-size: 11.5px; }
.gate-checks td { vertical-align: top; }
.gate-checks .ck-name { font-weight: 600; min-width: 220px; }
.gate-checks .ck-name span[title] { cursor: help; }
.gate-checks .ck-word { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.gate-checks .ck-why { color: var(--muted); line-height: 1.4; min-width: 260px; }
.gate-checks td.r { white-space: nowrap; }
.gate-checks tr.ck-pass .ck-mark, .gate-checks tr.ck-pass .ck-word, .gate-checks tr.ck-pass .ck-val { color: var(--up); }
.gate-checks tr.ck-fail .ck-mark, .gate-checks tr.ck-fail .ck-word, .gate-checks tr.ck-fail .ck-val, .gate-checks tr.ck-fail .ck-name { color: var(--down); }
.gate-checks tr.ck-fail td { background: color-mix(in srgb, var(--down) 7%, transparent); }
@media (max-width: 1100px) {
  .cyc-grid { grid-template-columns: minmax(0, 1fr); }
  .cyc-side { position: static; }
}
@media (max-width: 720px) {
  .kvg, .gate-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gate-checks thead { display: none; }
  .gate-checks tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .gate-checks td { border: 0; padding: 0 4px; }
  .gate-checks .ck-name, .gate-checks .ck-why { min-width: 0; grid-column: 1 / -1; }
  .rc-table .rc-barh, .rc-table td.rc-bar { display: none; }
}
/* ---- round 3: home and trade ---- */
/* the trade's outcome in one line at the top of the card, visible without scrolling */
.tr-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; padding: 6px 10px; background: var(--panel2); border-left: 3px solid var(--grey); border-radius: 6px; }
.tr-result.up { border-left-color: var(--up); } .tr-result.down { border-left-color: var(--down); }
.tr-result-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tr-result-v { font-size: 18px; font-variant-numeric: tabular-nums; }
.tr-result.up .tr-result-v { color: var(--up); } .tr-result.down .tr-result-v { color: var(--down); }
.tr-result-v b { font-weight: 700; }
.tr-result-g { margin-left: auto; text-transform: none; }
/* a sale row wraps: when and at what price on one line, its profit or loss on its own line, never clipped */
.tr-exit { white-space: normal; display: flex; flex-direction: column; align-items: inherit; min-width: 0; }
.tr-exit-a { overflow-wrap: anywhere; }
.tr-exit-p { font-weight: 600; white-space: nowrap; }
.tr-kv dd { min-width: 0; }
.tr-exits { min-width: 0; }
/* names and numbers inside sentences stay in the sentence's own font */
.tr-name { font-family: var(--sans); font-weight: 600; border-bottom: 1px dotted var(--muted); cursor: help; }
.tr-what b, .tr-cols p b { font-family: var(--sans); }
.tr-def { margin: 0 0 6px; }
.tr-few { margin-top: 6px; }
.tr-newer { margin: 10px 0 0; }
/* the price chart: a little taller, the line dashed where it runs to a trade's own price */
.tr-ch { height: 160px; }
.tr-ch svg { height: 160px; }
.tr-ch-fillseg { stroke-dasharray: 5 4; opacity: .85; }
.tr-ch-lab { stroke-width: 4px; }
/* the full trade page uses more of a desktop screen */
.trade-page { max-width: 1240px; }
@media (min-width: 880px) {
  .trade-page .tr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
/* the live feed: a short line per trade, the strategy named once under a run of its trades */
.f-who { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; margin-top: 1px; }
.cc-foot { flex: none; margin: 6px 0 0; }
.cc-foot a { color: var(--muted); }
/* panels that scroll fade out over a whole row at the foot, so no row shows half cut */
.cc .scroll.more-below { mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent); }
/* prices: the table scrolls under its own header, with the freshness badges beside the title */
.cc-market .mk-px { overflow: hidden; }
.cc-market .mk-px > .card-head { position: static; }
.cc-market .mk-px .px-t th { top: 0; }
.mk-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* the AI team table: research families, a one line legend, the gate calls in the same colors as elsewhere */
.team-t th:first-child { width: 34%; } .team-t th:last-child { width: 24%; }
.team-legend { margin: 4px 0 0; line-height: 1.35; }
.p-waiting .pipe-n { color: var(--warn); } .p-passed .pipe-n { color: var(--up); } .p-on_paper .pipe-n { color: var(--accent); }
@media (max-width: 720px) {
  .tr-result-g { margin-left: 0; }
  .tr-exits { align-items: flex-start; }
  .cc-market .mk-px .scroll { max-height: none; }
}
/* ---- round 4: terminal quality (layout and drawing) ---- */
/* Numbers, prices, percentages and short names never break inside themselves. Table cells size to
   their longest word ("break-word" wraps only what cannot fit at all; "anywhere" let the table squeeze a
   column down to one character and split "$200" and "not tested"). Only prose cells wrap. */
.rm-row .t td, .rm-alloc .t td, .feats td, .hr-by td, .hr-limits td, .verdicts td, .audit-t td { overflow-wrap: break-word; }
.t td.num, .t td.r, .t th.r, .t td.nowrap, .t .ref { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (max-width: 720px) { .t.stack td.num, .t.stack td.r { white-space: normal; } }
.stat-value, .f-text, .ticker, .tokname, .tr-kv dd, .cyc-sum dd, .facts dd, .kvg dd, .agent-rec dd, .sys-item .si-val { overflow-wrap: break-word; }
.cycles td:last-child, .cyc-verdict .small, .agent-cost .ac-v { white-space: nowrap; }
/* meters: the fill is a span inside an inline-block track, so it needs a box of its own to take a width */
.meter-fill { display: block; }
.meter-fill.over { background: var(--down); }
/* a value that is a word ("none yet") reads as a note, not as a big number */
.stat.nil .stat-value, .stat.big.nil .stat-value, .stat.claimed.nil .stat-value, .cc-kpis .stat.nil .stat-value { font: 500 15px/1.6 var(--sans); color: var(--muted); }
/* the drawdown pane's name sits in its own strip above the bars, never on them */
.eq-dd { display: flex; flex-direction: column; }
.eq-dd .eq-pane-label { position: static; flex: none; align-self: flex-start; padding: 3px 6px 1px; background: none; }
.eq-dd .eq-dd-plot { position: relative; flex: 1 1 auto; min-height: 0; }
/* home: the live feed's record link has its own column, so the arrow stays on its row */
.feed li { grid-template-columns: 34px 50px minmax(0, 1fr) 14px; }
.feed .f-go { color: var(--muted); font-size: 12px; text-align: right; padding-top: 1px; }
.feed .f-go:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 720px) { .feed li { grid-template-columns: 38px minmax(0, 1fr) 14px; } }
/* panels that scroll end at a whole row (app.js clips there), not through text, and fade nothing */
.cc .scroll.more-below { mask-image: none; }
/* the AI team table shows a family's whole name; the two tiles above it keep their values level */
.team-t td:first-child { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.3; }
.team-sum .stat { display: flex; flex-direction: column; }
.team-sum .stat-value { margin-top: auto; }
/* every page uses a 1440 px desktop's full width, like Home, and the status strip lines up with the
   page under it (it sat 60 px in from Home's cards); each strip item is kept whole */
.page, .strip, .foot { max-width: 1600px; }
@media (min-width: 721px) {
  .strip { gap: 6px 14px; }
  .strip > * { white-space: nowrap; }
  .strip > .kv.muted { margin-left: auto; }
}
/* results: the price gaps chart and the step timings each get the page width, so no half stands empty */
.r-exec { grid-template-columns: minmax(0, 1fr); }
.r-lat td:first-child { min-width: 24ch; }
.r-lat .meter-track.sm { width: 120px; }
/* the trade page: the chart's caption sits under the outcome, beside the chart, so neither column runs empty */
@media (min-width: 880px) {
  .trade-page .tr-top { grid-template-rows: auto 1fr; }
  .trade-page .tr-top > figure.tr-chart { display: contents; }
  .trade-page .tr-top > .tr-out { grid-column: 1; grid-row: 1; }
  .trade-page .tr-top .tr-ch { grid-column: 2; grid-row: 1 / span 3; margin-top: 26px; align-self: start; }
  .trade-page .tr-top figcaption, .trade-page .tr-top .tr-few, .trade-page .tr-top figure > .empty { grid-column: 1; margin-top: 10px; }
}
.tr-ch-lab.other { fill: var(--muted); font-weight: 400; font-size: 10.5px; }
/* paired cards of very different heights: the shorter one takes less width and nothing stretches empty */
@media (min-width: 721px) {
  .grid.g-2:has(.tool-list) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  .rm-row:has(.gloss) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .grid.g-3:has(.spec) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; align-items: start; }
  .grid.g-3:has(.spec) > .card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .grid.g-3:has(.spec) > .card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .grid.g-3:has(.spec) > .card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .agents-shared .agent-pair { align-items: start; }
}

/* ---- round 4: five-second read and live and honest ---- */
.hchip .h-amber, .strip .kv .t-warn { color: var(--warn); }
.hchip .h-needs { color: var(--warn); font-weight: 600; text-decoration: none; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 99px; padding: 0 6px; }
.cc-amber { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); line-height: 1.45; }
.cc-amber li { min-width: 0; }
.cc-amber li b { color: var(--warn); font-weight: 600; }
.cc-amber .ca-head { color: var(--text); font-weight: 600; }

/* ---- round 4: plain English ---- */
.stop-sub { display: block; }
.idea-ids summary { cursor: pointer; }

/* ------------------------------------------------------------ home v2: a trading terminal, desktop first */
body.tm-page .page { max-width: 1680px; padding: 10px 14px 16px; }
body.tm-page .foot { max-width: 1680px; }
@media (min-width: 1100px) {
  #status .strip { max-width: 1680px; flex-wrap: nowrap; gap: 6px 14px; padding: 5px 14px; font-size: 12px; white-space: nowrap; overflow: hidden; }
  #status .strip > .kv { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
  #status .strip > .state, #status .strip > .needs, #status .strip > .ok { flex: none; }
  #status .strip > .kv.small { margin-left: auto; flex: none; }
  #status .state { font-size: 11px; padding: 2px 8px; }
}
.tm { display: flex; flex-direction: column; gap: 10px; }
.tm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.tm .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.tm .card-head h2 { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tm h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 12px 0 6px; font-weight: 700; }
.tm .empty { font-size: 12.5px; margin: 4px 0; }
/* the bar: one line, details fold into two pills */
.tm-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 8px; padding: 7px 12px; }
.tm-bar.t-warn { border-left-color: var(--warn); } .tm-bar.t-down { border-left-color: var(--down); }
.tm-bar .cc-line { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; color: var(--text); }
.tm-bar .cc-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: none; }
.tm-bar.t-warn .cc-line .dot { background: var(--warn); } .tm-bar.t-down .cc-line .dot { background: var(--down); }
.tm-pills { display: flex; align-items: center; gap: 8px; flex: none; }
.tm-pop { position: relative; }
.tm-pop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; white-space: nowrap; }
.tm-pop > summary::-webkit-details-marker { display: none; }
.tm-pop > summary::after { content: "\25BE"; color: var(--muted); font-size: 10px; }
.tm .needs-pop > summary { color: var(--warn); font-weight: 700; border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.tm-ok { color: var(--up); font-size: 12px; font-weight: 600; }
.hdot { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.hdot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); display: inline-block; }
.hdot.h-warn .dot { background: var(--warn); } .hdot.h-down .dot { background: var(--down); } .hdot.h-muted .dot { background: var(--grey); }
.hdot.h-down { color: var(--down); }
.tm-drop { position: absolute; z-index: 45; top: 34px; left: 0; width: min(560px, 92vw); max-height: 70vh; overflow: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .45); }
.tm-drop-r { left: auto; right: 0; width: min(680px, 92vw); }
.tm .needs-pop[open] .needs-list { position: static; width: auto; box-shadow: none; border: 0; padding: 0; background: none; }
/* Home's "needs you" pop has its own drop box (.tm-drop); the list inside it must flow, not float (owner, Nov 14:
   the pop opened as a small empty bubble because the list was absolutely placed inside a box with no height). */
.needs-pop[open] .tm-drop .needs-list { position: static; width: auto; box-shadow: none; border: 0; padding: 0; background: none; }
.tm-drop .needs-list { margin: 0; padding-left: 18px; font-size: 13px; }
.tm-drop .needs-list li { margin: 0 0 6px; }
.tm-drop .cc-health { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-drop .hchip { white-space: normal; }
.tm-drop .cc-amber { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.tm-drop .cc-amber li { margin: 0 0 4px; } .tm-drop .cc-amber b { color: var(--warn); }
.tm-drop .ca-head { color: var(--text); font-weight: 600; }
/* the numbers */
.tm-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.tm-kpis .stat { background: none; border: 0; border-radius: 0; border-right: 1px solid var(--line); padding: 8px 26px 8px 12px; min-width: 0; }
.tm-kpis .stat:last-child { border-right: 0; }
.tm-kpis .stat-label { font-size: 10.5px; letter-spacing: .08em; }
.tm-kpis .stat-value { font-size: 19px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-kpis .stat.big .stat-value { font-size: 22px; }
.tm-kpis .stat.word .stat-value, .tm-kpis .stat.nil .stat-value { font-size: 15px; }
.tm-kpis .stat-sub { font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ticker tape */
.tm-tape { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tm-tape-in { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tm-tape-in::-webkit-scrollbar { display: none; }
.tk { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-right: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.tk b { font-weight: 700; } .tk.held b { color: var(--accent); }
.tk-s { color: var(--muted); font-size: 11px; }
/* the grid: markets | equity, positions, trade flow | live feed, then insight and the AI team */
.tm-grid { display: grid; gap: 10px; grid-template-columns: 370px minmax(0, 1fr) 380px;
  grid-template-areas: "mkt live feed" "mkt eq feed" "mkt pos feed" "mkt flow feed" "ins ins team"; align-items: stretch; }
.tm-mkt { grid-area: mkt; } .tm-live { grid-area: live; } .tm-eq { grid-area: eq; } .tm-pos { grid-area: pos; } .tm-flow { grid-area: flow; }
.tm-feed { grid-area: feed; position: relative; display: flex; flex-direction: column; min-height: 520px; }
.tm-ins { grid-area: ins; } .tm-team { grid-area: team; }
/* the feed fills its column without making the column taller */
.tm-feed .scroll { position: absolute; left: 12px; right: 12px; top: 40px; bottom: 30px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tm-feed .cc-foot { position: absolute; left: 12px; bottom: 6px; margin: 0; }
.tm-feed .feed li { grid-template-columns: 30px 48px minmax(0, 1fr) 14px; padding: 5px 0; font-size: 12.5px; }
.tm-eq figure.chart { margin: 0; } .tm-eq figcaption { display: none; }
.tm-eq .eq-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; margin-bottom: 4px; }
.tm-mkt .card-head { flex-wrap: wrap; }
.tm-mkt .scroll { overflow: visible; }
.tm-mkt .mk-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-mkt .px-t { table-layout: fixed; width: 100%; font-size: 12.5px; }
.tm-mkt .px-t th { position: static; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.tm-mkt .px-t td, .tm-mkt .px-t th { padding: 5px 4px; }
.tm-mkt .px-t th:first-child { width: auto; } .tm-mkt .px-t th:nth-child(2) { width: 29%; } .tm-mkt .px-t th:nth-child(3) { width: 21%; }
.tm-mkt .px-t th:last-child { width: 15%; } .tm-mkt .px-t th:last-child, .tm-mkt .px-t td:last-child { text-align: right; }
.tm-mkt .cc-foot { margin: 6px 0 0; }
.tm-pos .cc-t, .tm-t { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.tm-t th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.tm-t td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); white-space: nowrap; }
.tm-t .r { text-align: right; }
.tm-t tr.pick { cursor: pointer; } .tm-t tr.pick:hover td { background: var(--panel2); }
.flow-t { table-layout: fixed; }
.flow-t th:nth-child(1) { width: 11%; } .flow-t th:nth-child(2) { width: 9%; } .flow-t th:nth-child(3) { width: 20%; }
.flow-t th:nth-child(4) { width: 14%; } .flow-t th:nth-child(5) { width: 14%; }
.flow-t td.tok, .flow-t td.strat { overflow: hidden; text-overflow: ellipsis; }
.flow-t td.tok a { color: var(--text); font-weight: 600; }
.flow-t td.strat { color: var(--muted); }
.sd { display: inline-block; font: 700 10.5px/1 var(--sans); letter-spacing: .05em; padding: 3px 6px; border-radius: 4px; }
.sd.s-buy { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); }
.sd.s-sell { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); }
.tm-ins #grading { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0; margin: 10px 0 0; }
.tm-ins #grading .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tm-team .meter { margin-bottom: 6px; }
.tm-team .team-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.tm-team .team-t { table-layout: fixed; width: 100%; font-size: 12px; }
.tm-team .pipeline.mini { margin-top: 8px; gap: 6px; }
/* narrower screens: no fixed columns, nothing scrolls sideways */
@media (max-width: 1279px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "live live" "eq eq" "pos pos" "flow flow" "mkt feed" "ins ins" "team team"; }
  .tm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-kpis .stat { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .tm-bar { flex-wrap: wrap; }
  .tm-bar .cc-line { flex-basis: 100%; }
  .tm-pills { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .tm-pop { min-width: 0; max-width: 100%; }
  .tm-pop > summary { white-space: normal; flex-wrap: wrap; gap: 4px 10px; max-width: 100%; }
  .tm-drop, .tm-drop-r { position: static; width: auto; max-width: 100%; margin-top: 6px; box-shadow: none; }
  .tm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-grid { display: flex; flex-direction: column; }
  .tm-feed { min-height: 460px; }
  .flow-t th:nth-child(5), .flow-t td:nth-child(5), .flow-t th:nth-child(6), .flow-t td:nth-child(6) { display: none; }
  .flow-t th:nth-child(3) { width: auto; } .flow-t th:nth-child(4) { width: 26%; }
}
/* ---- round 5: pages other than Home ---- */
/* Agent teams: the role cost table fits its half-width card (its bar column ran past the card and the 1440 screen) */
@media (min-width: 721px) {
  .agents-shared { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rc-table { table-layout: fixed; }
  .rc-table th { white-space: normal; vertical-align: bottom; }
  .rc-table th:nth-child(1) { width: 18%; }
  .rc-table th:nth-child(2) { width: 28%; }
  .rc-table th:nth-child(3) { width: 8%; }
  .rc-table th:nth-child(4), .rc-table th:nth-child(5) { width: 14%; }
  .rc-table .rc-barh { width: 18%; }
  .rc-table td, .rc-table td.r, .rc-table td.num { white-space: normal; overflow-wrap: anywhere; }
}
/* High risk: the watch list stays inside its card; a long outcome badge wraps in its cell */
.tscroll { max-width: 100%; overflow-x: auto; }
.hr-watch .badge { white-space: normal; text-align: left; line-height: 1.25; }
@media (min-width: 721px) {
  .grid.g-2:has(.hr-watch) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* a visible caption under a column heading, saying what the column's numbers are */
.t th .th-cap { display: block; white-space: normal; font-size: 11px; font-weight: 400; line-height: 1.3; max-width: 22ch; margin-left: auto; }
/* Controls: a fixed part of a command, read out beside it */
.fill .cli-part .tech-name { margin-right: 4px; }
.tm-mkt .px-t th { white-space: normal; line-height: 1.2; vertical-align: bottom; overflow: visible; }

/* the live price card: the engine's own minute bars as 15 minute candles */
.tm-live figure.chart { margin: 0; } .tm-live figcaption { display: none; }
.tm-live .chart-box { position: relative; }
.lv-plot { height: 240px; }
.lv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.lv-px { font-size: 26px; font-weight: 600; }
.tag.t-live, .tk.lv b { color: var(--accent); }

/* ===================== Terminal shell (owner's design, Nov 13): sidebar, top bar, section tabs ===================== */
body { background: radial-gradient(1200px 600px at 70% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg); }
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); border-right: 1px solid var(--line); }
.side-brand { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 2px 8px 18px; }
.side-brand:hover { text-decoration: none; }
.side-brand b { display: block; font-size: 16px; } .side-brand small { display: block; color: var(--muted); font-size: 12.5px; }
.logo-ring { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--accent); border-right-color: transparent; transform: rotate(-30deg); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); flex: none; }
.side-nav { display: grid; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 11px 12px; border-radius: 10px; font-size: 15px; min-height: 44px; }
.side-nav a:hover { color: var(--text); background: var(--panel2); text-decoration: none; }
.side-nav a.on { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side-foot { margin-top: auto; display: grid; gap: 10px; }
.side-mode { display: flex; align-items: center; gap: 10px; color: var(--text); background: var(--panel2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; padding: 12px; }
.side-mode:hover { text-decoration: none; border-color: var(--accent); }
.side-mode b { display: block; font-size: 14px; } .side-mode small { display: block; color: var(--muted); font-size: 12px; }
.side-engine { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); padding: 0 8px; }
.side-engine .dot, .live-dot .dot, .tc-st .dot, .sol-src .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); display: inline-block; flex: none; }
.t-ok .dot, .sol-src .dot.ok { background: var(--up); box-shadow: 0 0 8px color-mix(in srgb, var(--up) 70%, transparent); }
.t-warn .dot { background: var(--warn); } .t-down .dot, .sol-src .dot.down { background: var(--down); }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tb-title { font-weight: 700; font-size: 19px; white-space: nowrap; }
.tb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.tb-pill .ico { width: 15px; height: 15px; }
.tb-env { font-size: 13px; white-space: nowrap; }
.tb-gap { flex: 1; }
.tb-search { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 38px; width: min(330px, 28vw); margin-left: auto; }
.tb-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.tb-search .ico { width: 16px; height: 16px; color: var(--muted); }
.topbar .controlbar { position: static; top: auto; right: auto; }
.tb-bell { position: relative; color: var(--muted); display: inline-flex; padding: 6px; }
.tb-bell:hover { color: var(--text); }
.bell-n { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--down); color: #fff; font: 700 10.5px/17px var(--sans); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-who { position: relative; }
.tb-who summary { list-style: none; cursor: pointer; } .tb-who summary::-webkit-details-marker { display: none; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, var(--panel2)); color: #fff; font-weight: 700; font-size: 12.5px; }
.tb-menu { position: absolute; right: 0; top: 44px; z-index: 40; display: grid; gap: 8px; min-width: 150px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.pagetabs { display: flex; gap: 4px; padding: 14px 20px 0; flex-wrap: wrap; }
.pagetabs a { color: var(--muted); padding: 8px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; }
.pagetabs a:hover { color: var(--text); text-decoration: none; }
.pagetabs a.on { color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)); border-color: var(--accent); }
.shell .page { max-width: none; width: 100%; padding: 16px 20px 40px; margin: 0; }
.shell .foot { max-width: none; padding: 0 20px 16px; }
.card { background: linear-gradient(180deg, color-mix(in srgb, var(--panel2) 70%, var(--panel)), var(--panel)); border-color: var(--line); border-radius: 14px; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; gap: 4px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-brand { padding: 4px 8px 4px 0; } .side-brand small { display: none; }
  .side-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; flex: 1 1 100%; order: 3; }
  .side-nav a { padding: 8px 10px; white-space: nowrap; font-size: 14px; } .side-nav a .ico { display: none; }
  .side-foot { margin: 0 0 0 auto; } .side-mode { padding: 6px 10px; } .side-mode small, .side-engine { display: none; }
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .tb-title, .tb-env { display: none; }
  .tb-search { width: auto; flex: 1; margin-left: 0; }
  .topbar .controlbar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; }
  .shell .page { padding: 12px 12px 110px; }
  .pagetabs { padding: 10px 12px 0; overflow-x: auto; flex-wrap: nowrap; }
}

/* ===================== Home (owner's design) ===================== */
.hm { display: grid; gap: 14px; }
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hm-head h1 { margin: 0; font-size: 26px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hm-sub { font-size: 15px; font-weight: 400; color: var(--muted); }
.hm-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hm-refresh { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; }
.hm-refresh:hover { border-color: var(--accent); }
.hm-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--up) 45%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--up) 12%, var(--panel)), var(--panel)); }
.hs-cell { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-width: 0; }
.hs-cell + .hs-cell { border-left: 1px solid var(--line); }
.hs-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 14px; background: color-mix(in srgb, var(--grey) 25%, transparent); color: var(--muted); }
.hs-cell.t-ok .hs-ico { background: color-mix(in srgb, var(--up) 25%, transparent); color: var(--up); box-shadow: 0 0 12px color-mix(in srgb, var(--up) 35%, transparent); }
.hs-cell.t-warn .hs-ico { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--warn); }
.hs-cell.t-down .hs-ico { background: color-mix(in srgb, var(--down) 25%, transparent); color: var(--down); }
.hs-txt { display: grid; min-width: 0; } .hs-line { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-cell.t-ok .hs-val { color: var(--up); font-weight: 600; } .hs-cell.t-warn .hs-val { color: var(--warn); font-weight: 600; } .hs-cell.t-down .hs-val { color: var(--down); font-weight: 600; }
.hs-txt small { color: var(--muted); font-size: 12.5px; }
.hm-kpis { display: grid; grid-template-columns: 1.15fr 1.1fr 1.25fr .95fr .95fr; gap: 14px; }
.hk { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); min-width: 0; }
.hk-ico { color: var(--muted); font-size: 20px; line-height: 1; padding-top: 4px; }
.hk-body { min-width: 0; } .hk-label { font-size: 14px; color: var(--text); display: flex; align-items: center; }
.hk-value { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.hk-value small { font-size: 14px; font-weight: 500; }
.hk-none { font-size: 18px; font-weight: 500; } .hk-sub { font-size: 12px; }
.hm-sol { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; padding: 16px 20px; margin: 0; }
.sol-pair { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.sol-mark { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 200deg, #14f195, #9945ff, #14f195); flex: none; }
.sol-px { font-size: 36px; font-weight: 700; margin: 6px 0 0; }
.sol-ch { font-size: 16px; } .sol-ch small { font-size: 12px; }
.sol-day { display: flex; gap: 22px; margin: 12px 0 6px; } .sol-day div { display: flex; gap: 6px; align-items: baseline; }
.sol-day dt { color: var(--muted); font-size: 12.5px; } .sol-day dd { margin: 0; font-size: 13.5px; font-weight: 600; }
.sol-src { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
.sol-chart { position: relative; min-width: 0; }
.rng { position: absolute; top: 0; left: 0; z-index: 3; display: flex; gap: 4px; }
.rng-b { background: transparent; border: 0; color: var(--muted); padding: 4px 12px; border-radius: 7px; cursor: pointer; font: 600 12.5px var(--sans); }
.rng-b.on { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); }
.sol-plot { height: 260px; padding-top: 26px; }
.sol-empty { display: grid; place-items: center; }
.hm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hm-grid > .card, .hm-mid > .card, .hm-bottom > .card { margin: 0; padding: 14px 16px; }
.hm-mid { display: grid; gap: 14px; align-content: start; }
.hm .card-head { margin-bottom: 10px; } .hm .card-head h2 { font-size: 16.5px; display: flex; align-items: center; gap: 4px; } .hm h3 { font-size: 15px; margin: 0; }
.viewall { font-size: 13px; }
.seg { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 8px; }
.seg-b { background: transparent; border: 0; color: var(--muted); padding: 5px 14px; border-radius: 8px; cursor: pointer; font: 500 13px var(--sans); }
.seg-b.on { background: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); }
.ht { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ht th { color: var(--muted); font-weight: 500; font-size: 12.5px; text-align: left; padding: 4px 6px; }
.ht td { padding: 7px 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); white-space: nowrap; }
.ht .r { text-align: right; }
.ht tr.sel td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ht tr.sel td:first-child { border-radius: 8px 0 0 8px; } .ht tr.sel td:last-child { border-radius: 0 8px 8px 0; }
.ht tr.pick { cursor: pointer; } .ht tr.pick:hover td { background: var(--panel2); }
.ellip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tokdot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 8px; vertical-align: -3px; background: conic-gradient(from 200deg, #14f195, #9945ff, #14f195); }
.sd.s-long, .sd.s-buy { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: var(--up); background: color-mix(in srgb, var(--up) 18%, transparent); }
.sd.s-sell { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: var(--down); background: color-mix(in srgb, var(--down) 18%, transparent); }
.hm-sent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sn-sub { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.sn-mood { font-size: 24px; font-weight: 700; } .sn-mood.up { color: var(--up); } .sn-mood.down { color: var(--down); } .sn-mood.muted { color: var(--muted); }
.sn-score { font-size: 13px; color: var(--muted); } .sn-score b { color: var(--text); font-size: 15px; }
.sn-bar { height: 8px; border-radius: 4px; background: var(--panel2); margin: 10px 0; overflow: hidden; }
.sn-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--up), color-mix(in srgb, var(--up) 60%, #a3e635)); border-radius: 4px; }
.sn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.sn-stats dt { font-size: 11.5px; color: var(--muted); } .sn-stats dd { margin: 0; font-size: 14px; font-weight: 600; }
.eq-plot { height: 150px; position: relative; } .eq-plot .eq-empty { margin: 50px 0 0; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--line); background: var(--panel); }
.pill.up { border-color: color-mix(in srgb, var(--up) 50%, var(--line)); background: color-mix(in srgb, var(--up) 12%, transparent); }
.pill.down { border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--up); }
.live-dot.t-down, .live-dot.t-muted { color: var(--muted); }
.lf { list-style: none; margin: 0; padding: 0; display: grid; }
.lf li { display: flex; gap: 12px; padding: 10px 2px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lf li:first-child { border-top: 0; }
.lf-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--panel2); color: var(--accent2); font-size: 14px; }
.lf-check .lf-ico, .lf-price .lf-ico { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.lf-trade .lf-ico { color: var(--accent2); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lf li.t-down .lf-ico { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.lf li.t-warn .lf-ico { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.lf-body { min-width: 0; flex: 1; } .lf-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.lf-head a { color: var(--text); } .lf-t { font-size: 12px; white-space: nowrap; }
.lf-text { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.hm-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; }
.why-s { margin: 0 0 10px; font-size: 14.5px; }
.why-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line); background: var(--panel2); }
.chip.c-up { color: var(--up); border-color: color-mix(in srgb, var(--up) 50%, var(--line)); background: color-mix(in srgb, var(--up) 12%, transparent); }
.chip.c-down { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.chip.c-info { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.why-pts { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.why-pts li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-right: 10px; vertical-align: 1px; }
.tc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tc { display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; }
.tc:hover { border-color: var(--accent); text-decoration: none; }
.tc-head { display: grid; gap: 2px; } .tc-head b { font-size: 14.5px; }
.tc-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tc-st.t-ok { color: var(--up); }
.tc p { margin: 0; } .tc-foot { margin-top: 4px !important; }
@media (max-width: 1250px) {
  .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hm-feed { grid-column: 1 / -1; }
  .hm-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hm-status { grid-template-columns: 1fr 1fr; } .hs-cell + .hs-cell { border-left: 0; }
  .hm-kpis { grid-template-columns: 1fr 1fr; }
  .hm-sol { grid-template-columns: 1fr; }
  .hm-grid { grid-template-columns: 1fr; }
  .tc-row { grid-template-columns: 1fr 1fr; }
  .ht td, .ht th { padding: 6px 3px; font-size: 12.5px; }
  .hm-pos, .hm-flow { overflow-x: auto; }
}
.eq-in { position: absolute; inset: 0; }
.eq-plot.has-chart .eq-empty { display: none; }
.sol-plot > div { height: 100%; }

/* ---------------------------------------------------------------- Trading, Trades tab */
.tr-pills { gap: 8px; }
.hs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; color: var(--muted); }
.hs-pill b { color: var(--text); font-weight: 600; }
.hs-pill.t-ok b { color: var(--up); } .hs-pill.t-warn b { color: var(--warn); } .hs-pill.t-down b { color: var(--down); }
.hs-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.hs-pill.t-ok .dot { background: var(--up); } .hs-pill.t-warn .dot { background: var(--warn); } .hs-pill.t-down .dot { background: var(--down); }
.tr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tr-grid { display: grid; grid-template-columns: 210px minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tr-grid > .card, .tr-bottom > .card { margin: 0; padding: 14px 16px; }
.tr-filters form { display: flex; flex-direction: column; gap: 12px; }
.tr-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.tr-filters select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font: 13px var(--sans); }
.seg-f { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.seg-f legend { font-size: 13px; color: var(--muted); margin-bottom: 5px; padding: 0; }
.seg-r { flex-direction: row !important; align-items: center; padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--text) !important; }
.seg-r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-r.on, .seg-r:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.seg-r:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.tr-search input { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; width: 220px; font: 13px var(--sans); }
.tr-t .rowlink { color: var(--text); text-decoration: none; }
.tr-t tr:hover td { background: var(--panel2); }
.tr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pager { display: flex; gap: 4px; }
.pager a { min-width: 28px; text-align: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); text-decoration: none; font-size: 13px; }
.pager a.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tr-sel-head h2 { display: flex; gap: 10px; align-items: center; }
.tr-sel-facts { display: flex; gap: 22px; margin: 0 0 8px; font-size: 13px; }
.tr-sel-facts div { display: flex; gap: 6px; } .tr-sel-facts dt { color: var(--muted); } .tr-sel-facts dd { margin: 0; font-weight: 600; }
.tr-plot { height: 230px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.tr-plot > div { height: 100%; }
.tr-plot .empty { padding: 16px; }
.tr-tabs { width: 100%; display: flex; }
.tr-tabs .seg-b { flex: 1; }
.tr-pane { font-size: 13.5px; }
.tr-bottom { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 14px; }
.ex { display: grid; grid-template-columns: 130px 1fr; grid-template-rows: auto; align-items: center; gap: 16px; position: relative; }
.donut { width: 130px; height: 130px; transform: rotate(0deg); }
.donut-bg { stroke: var(--panel2); }
.donut-s { stroke-linecap: butt; }
.ds-0 { stroke: var(--up); background: var(--up); } .ds-1 { stroke: #f472b6; background: #f472b6; } .ds-2 { stroke: var(--accent2); background: var(--accent2); }
.ds-3 { stroke: #38bdf8; background: #38bdf8; } .ds-4 { stroke: var(--warn); background: var(--warn); }
.ex-mid { position: absolute; left: 0; width: 130px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ex-mid b { font-size: 21px; }
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.ex-list li { display: flex; align-items: center; gap: 8px; } .ex-list li span.num { margin-left: auto; }
.ex-list .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ex-tot { border-top: 1px solid var(--line); padding-top: 8px; }
.st-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.st-list li small { grid-column: 1 / -1; }
.st-n { font-weight: 600; font-size: 13.5px; }
.st-act { display: flex; gap: 8px; } .st-act form { margin: 0; }
@media (max-width: 1250px) {
  .tr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .tr-sel { grid-column: 1 / -1; }
  .tr-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tr-kpis, .tr-grid, .tr-bottom { grid-template-columns: minmax(0, 1fr); }
  .tr-table { overflow-x: auto; }
  .tr-search input { width: 140px; }
}
.tr-t .chip.c-info { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.hm-flow .ht td { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tc-st.t-warn { color: var(--warn); }
/* Trading, fit to 1440: a wider trades table, compact cells, and a selected panel that scrolls inside its own height */
.tr-grid { grid-template-columns: 190px minmax(0, 1.65fr) minmax(0, 1fr); }
.tr-t { font-size: 12.5px; }
.tr-t th, .tr-t td { padding-left: 5px; padding-right: 5px; }
.tr-t .chip.c-info { max-width: 112px; }
.tr-tok { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.hr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.tr-table { overflow-x: auto; }
.tr-pane { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.tr-sel-facts { flex-wrap: wrap; gap: 6px 18px; }
.tr-kpis .hk-value { white-space: normal; }
.tr-kpis .hk-value small { display: inline-block; }
/* AI Teams, Teams tab */
.at-page .hm { display: grid; gap: 14px; }
.at-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .9fr); gap: 12px; }
.at-card { margin: 0; padding: 14px 16px; display: grid; align-content: start; gap: 8px; color: var(--text); }
a.at-card:hover { border-color: var(--accent); text-decoration: none; }
.at-top { display: flex; gap: 10px; align-items: center; }
.at-top b { display: block; font-size: 15.5px; }
.at-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: none; color: var(--accent2);
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.at-ico.sm { width: 26px; height: 26px; border-radius: 7px; }
.at-trader .at-ico { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.at-task { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.at-lines { margin: 0; display: grid; gap: 3px; font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; }
.at-lines div { display: flex; justify-content: space-between; gap: 8px; } .at-lines dt { color: var(--muted); } .at-lines dd { margin: 0; font-weight: 600; text-align: right; }
.at-sum { background: linear-gradient(160deg, color-mix(in srgb, var(--up) 10%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--up) 35%, var(--line)); }
.at-big { font-size: 28px; font-weight: 700; }
.at-sum p { margin: 0; } .at-pnl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.at-pipe { margin: 0; padding: 14px 16px; }
.at-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.at-col { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel2); display: grid; align-content: start; gap: 8px; min-width: 0; }
.at-col h3 { margin: 0; font-size: 15px; } .at-col > p { margin: -4px 0 0; }
.at-col.c-paper { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); background: color-mix(in srgb, var(--up) 6%, var(--panel2)); }
.at-col.c-killed { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); background: color-mix(in srgb, var(--down) 5%, var(--panel2)); }
.at-col.c-passed h3 { color: var(--up); } .at-col.c-killed h3 { color: var(--down); }
.at-idea { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); min-width: 0; }
.at-idea:hover { border-color: var(--accent); text-decoration: none; }
.at-idea b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-idea small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.at-tags .chip { font-size: 11px; padding: 1px 8px; }
.chip.c-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.chip.c-muted { color: var(--muted); }
.at-bottom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.at-bottom > .card { margin: 0; padding: 14px 16px; }
.at-focus blockquote.ai { max-height: 150px; overflow-y: auto; }
.at-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.at-facts div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--panel2); }
.at-facts dt { font-size: 11.5px; color: var(--muted); } .at-facts dd { margin: 2px 0 0; font-weight: 600; }
.at-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.at-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; position: relative; padding-bottom: 12px; }
.at-steps li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; border-left: 2px solid var(--line); }
.at-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--grey); margin-top: 2px; }
.at-steps li.t-up .at-dot, .at-steps li.t-ok .at-dot { border-color: var(--up); background: color-mix(in srgb, var(--up) 25%, transparent); }
.at-steps li.t-down .at-dot { border-color: var(--down); } .at-steps li.t-info .at-dot { border-color: var(--accent); }
.at-steps p { margin: 2px 0 0; color: var(--muted); }
.at-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.at-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.at-list li a, .at-list li span:not(.at-ico) { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-list li.t-up .at-ico { color: var(--up); } .at-list li.t-down .at-ico { color: var(--down); }
.at-detail { margin-top: 22px; }
@media (max-width: 1250px) {
  .at-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .at-cards, .at-cols, .at-bottom { grid-template-columns: minmax(0, 1fr); }
}
/* The sidebar column keeps its panel colour the whole page down, also on a page taller than the window */
@media (min-width: 901px) {
  .shell { background: linear-gradient(to right, color-mix(in srgb, var(--panel) 88%, transparent) 231px, var(--line) 231px 232px, transparent 232px); }
}
.tr-t .chip.c-info { max-width: 86px; }
.tr-t .chip { padding: 2px 8px; font-size: 11.5px; }
.at-life { margin: 4px 0 0; }

/* System Map, owner's design: key numbers, grouped map, three panels below */
.sm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.sm-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); min-width: 0; }
.sm-kpi:hover { text-decoration: none; border-color: var(--accent); }
.sm-kpi .sm-k-l { font-size: 12.5px; color: var(--muted); }
.sm-kpi .sm-k-v { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-kpi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-kpi.t-ok { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); } .sm-kpi.t-ok .sm-k-v { color: var(--up); }
.sm-kpi.t-warn .sm-k-v { color: var(--warn); } .sm-kpi.t-down .sm-k-v { color: var(--down); } .sm-kpi.t-muted .sm-k-v { color: var(--muted); }
.sysmap.card { padding: 14px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--panel); }
.sm2 .sm-panel { fill: color-mix(in srgb, var(--accent) 4%, transparent); stroke: color-mix(in srgb, var(--accent) 35%, var(--line)); stroke-width: 1.2; }
.sm2 .sm-ptitle { fill: var(--text); font: 700 13px var(--sans); letter-spacing: .02em; }
.sm2 .flow path { stroke: color-mix(in srgb, var(--up) 30%, var(--line)); stroke-width: 2; }
.sm2 .flow.live path { stroke: var(--up); stroke-dasharray: 7 5; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--up) 70%, transparent)); }
.sm2 .node .box { fill: var(--panel2); }
.sm2 .core .node .box { fill: url(#sm-core); stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); }
.sm2 .core-a { stop-color: color-mix(in srgb, var(--accent) 30%, var(--panel2)); } .sm2 .core-b { stop-color: var(--panel2); }
.sm2 .n-ico { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm2 .node.h-ok .box { stroke: color-mix(in srgb, var(--up) 40%, var(--line)); }
.sm2 .sm-out rect { fill: var(--panel2); stroke: color-mix(in srgb, var(--up) 40%, var(--line)); stroke-width: 1.2; }
.sm2 .sm-out:hover rect { stroke: var(--accent); }
.sm2 .sm-out.t-muted rect { stroke: var(--line); }
.sm2 .o-l { fill: var(--text); font: 600 13.5px var(--sans); }
.sm2 .o-v { fill: var(--text); font: 700 14px var(--sans); text-anchor: end; }
.sm2 .sm-out.t-up .o-v { fill: var(--up); } .sm2 .sm-out.t-down .o-v { fill: var(--down); } .sm2 .sm-out.t-muted .o-v { fill: var(--muted); }
.sm2 .o-s { fill: var(--muted); font: 11.5px var(--sans); }
.sm-bottom { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.sm-spark { width: 100%; height: 110px; display: block; margin: 6px 0; }
.sm-spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sm-spark .sp-prices, .sm-legend .sl-prices .dot { stroke: var(--up); background: var(--up); }
.sm-spark .sp-trades, .sm-legend .sl-trades .dot { stroke: #60a5fa; background: #60a5fa; }
.sm-spark .sp-checks, .sm-legend .sl-checks .dot { stroke: #22d3ee; background: #22d3ee; }
.sm-spark .sp-ai, .sm-legend .sl-ai .dot { stroke: var(--accent); background: var(--accent); }
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.sm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sm-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sm-ev, .sm-st { list-style: none; margin: 0; padding: 0; }
.sm-ev li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sm-ev li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-ev .dot, .sm-st .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--up); }
.sm-ev .t-down .dot, .sm-st .h-down .dot { background: var(--down); } .sm-ev .t-warn .dot, .sm-st .h-warn .dot { background: var(--warn); }
.sm-ev .t-muted .dot, .sm-st .h-muted .dot { background: var(--grey); }
.sm-st { columns: 2; column-gap: 18px; }
.sm-st li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; break-inside: avoid; }
.sm-st a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-st .sm-w { color: var(--up); font-size: 12px; } .sm-st .h-warn .sm-w { color: var(--warn); } .sm-st .h-down .sm-w { color: var(--down); } .sm-st .h-muted .sm-w { color: var(--muted); }
@media (max-width: 1200px) { .sm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-bottom { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .sm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sysmap.card { padding: 6px 10px; } .sm-st { columns: 1; } }
.at-trader { margin-bottom: 14px; }
.at-tr-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.at-tr-col h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 8px; text-transform: none; }
.at-tr-title { margin: 0 0 6px; }
.at-tr-title.t-up b { color: var(--up); } .at-tr-title.t-warn b { color: var(--warn); }
.at-tr-pos { margin: 0 0 8px; }
.at-tr-lessons { list-style: none; margin: 0; padding: 0; }
.at-tr-lessons li { margin: 0 0 8px; }
@media (max-width: 1100px) { .at-tr-grid { grid-template-columns: 1fr; } }
/* Force exit: the AI trader's open trades on Trading, with a Force exit button on each and what became of each request */
.tr-ai { margin: 0; padding: 14px 16px; }
.fx-t td { vertical-align: middle; }
.fx-form { margin: 0; display: inline-block; }
.btn.fx-btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.fx-h { font-size: 13.5px; margin: 14px 0 6px; color: var(--muted); font-weight: 600; }
.fx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-o { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.fx-o .fx-at { margin-left: auto; }
.fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.fx-facts { margin: 10px 0 12px; }
.chip.c-up, .chip.c-down, .chip.c-warn, .chip.c-muted { white-space: nowrap; }

/* AI Teams, Scores: the AI against buy and hold and the 50-day rule (owner requirement 21). Two zones side by side at desktop width. */
.at-scores { margin-bottom: 14px; }
.sc-overall { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin: 6px 0 14px; }
.sc-all-h { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sc-vs { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-vs.t-up { border-left: 3px solid var(--up); } .sc-vs.t-down { border-left: 3px solid var(--down); }
.sc-vs-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.sc-vs-n { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-vs-n > div { display: flex; flex-direction: column; min-width: 0; }
.sc-vs-n b { font-size: 17px; }
.sc-zones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.sc-zone { min-width: 0; }
.sc-zone h3 { margin: 0 0 8px; font-size: 15px; }
.sc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.sc-t { width: 100%; }
.sc-t td.sc-tok { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sol, .sc-daily { margin: 6px 0 0; }
@media (max-width: 1100px) {
  .sc-zones { grid-template-columns: minmax(0, 1fr); }
  .sc-overall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sc-overall, .sc-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Zones and the Helius meter (Home and AI Teams), Home's short scores, the System Map's market sources */
.hm-zones, .at-zones { margin-bottom: 14px; }
.hm-zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hz-t { width: 100%; }
.hz-t td .chip { margin-left: 4px; }
.zn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; }
.zn-zone, .zn-meter { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); min-width: 0; }
.zn-z-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.zn-z-h h3 { margin: 0; font-size: 15px; }
.zn-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zn-nums > div { display: flex; flex-direction: column; min-width: 0; }
.zn-nums b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-hold { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.zn-hold li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.zn-lim { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; font-size: 12.5px; }
.zn-lim div { min-width: 0; } .zn-lim dt { color: var(--muted); } .zn-lim dd { margin: 0; }
.zn-m-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.zn-track { position: relative; }
.zn-stop { position: absolute; left: 90%; top: 0; bottom: 0; width: 2px; background: var(--down); }
.zn-svc { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.zn-svc li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding: 2px 0; }
.zn-svc small { text-align: right; }
.zn-meter.t-down { border-left: 3px solid var(--down); } .zn-meter.t-warn { border-left: 3px solid var(--warn); }
.sm-sources { margin-top: 14px; overflow-x: auto; }
.tr-zones { margin-top: 14px; }
.zn-chip { white-space: nowrap; font-size: 11.5px; padding: 1px 7px; }
.zn-chip.z-high_risk { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
@media (max-width: 1250px) {
  .zn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zn-grid .zn-meter { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .zn-grid { grid-template-columns: minmax(0, 1fr); }
  .zn-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zn-lim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-scores { overflow-x: auto; }
  .hz-t td { white-space: normal; }
  .sm-src-t td:nth-child(2), .sm-src-t th:nth-child(2) { display: none; }
}
/* Open AI positions (Trading and, short, Home) and one position's status report */
.aip-list, .aip-panel, .aip-home { margin: 0 0 14px; padding: 14px 16px; }
.aip-panel:empty { display: none; }
.aip-list .tscroll, .aip-home .tscroll { overflow-x: auto; }
.aip-t td { vertical-align: middle; white-space: nowrap; }
.aip-t td small { white-space: normal; }
.aip-t .rowlink { font-weight: 600; }
.aip-who { margin: 4px 0 10px; }
.aip-who .tech { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.aip-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 12px; }
.aip-facts dt { color: var(--muted); font-size: 12px; }
.aip-facts dd { margin: 2px 0 0; font-size: 15px; }
.aip-plan dt { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.aip-plan dd { margin: 2px 0 0; }
.aip-report blockquote.ai-words { margin: 3px 0 0; padding: 6px 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); white-space: pre-wrap; overflow-wrap: anywhere; }
.aip-levels { margin: 10px 0 6px; }
.aip-steps { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.aip-step-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.aip-pulls { margin: 4px 0 0; padding-left: 16px; font-size: 13px; overflow-wrap: anywhere; }
.aip-pulls .fname { margin-left: 0; }
.aip-fx { margin: 4px 0 8px; }
@media (max-width: 720px) {
  .aip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aip-t td { white-space: normal; }
}

/* The chat panel (R6.9): a button at the bottom right opens it (the #chat anchor, so it also works without
   JavaScript); app.js reloads its log while it is open. */
.chat-fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: 13px; }
.chat-fab .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
aside#chat { display: none; position: fixed; right: 16px; bottom: 64px; z-index: 41; width: min(420px, calc(100vw - 32px)); max-height: 70vh; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
aside#chat:target { display: flex; }
aside#chat .chat-head { display: flex; align-items: baseline; gap: 8px; }
aside#chat .chat-head h2 { margin: 0; font-size: 15px; }
aside#chat .chat-x { margin-left: auto; color: var(--muted); text-decoration: none; }
aside#chat .chat-log { flex: 1 1 auto; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
aside#chat .chat-who { display: block; font-size: 11.5px; color: var(--muted); }
aside#chat .chat-q p, aside#chat .chat-a p { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
aside#chat .chat-a { padding: 6px 8px; background: var(--panel2); border-radius: 6px; }
aside#chat .chat-ask { display: flex; gap: 6px; align-items: flex-end; }
aside#chat .chat-ask textarea { flex: 1 1 auto; resize: vertical; }
aside#chat .chat-tools { display: flex; flex-wrap: wrap; gap: 4px; }
/* AI Teams: the four traders at a glance (templates/_trader_cards.html), then the rest folded below */
.trc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .9fr); gap: 12px; }
.trc { gap: 9px; }
.trc .at-top { align-items: flex-start; }
.trc-who { display: grid; gap: 3px; min-width: 0; }
.trc-zone { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.trc-zone.hr { color: var(--warn); }
.trc-steady .at-ico { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.trc-momentum .at-ico { color: var(--accent2); }
.trc-contrarian .at-ico { color: #f4a261; background: color-mix(in srgb, #f4a261 12%, transparent); border-color: color-mix(in srgb, #f4a261 35%, transparent); }
.trc-hunter .at-ico { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.tc-st.t-info { color: var(--accent2); } .tc-st.t-down { color: var(--down); }
.tc-st.t-ok .dot { background: var(--up); } .tc-st.t-info .dot { background: var(--accent2); }
.tc-st.t-warn .dot { background: var(--warn); } .tc-st.t-down .dot { background: var(--down); }
.trc-role { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trc-note { margin: 0; padding: 5px 8px; border-radius: 8px; background: var(--panel2); }
.trc-lines dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-lines dd a { color: var(--text); } .trc-lines dd a:hover { color: var(--accent2); }
.trc-lines a.trc-last.t-up { color: var(--up); } .trc-lines a.trc-last.t-down { color: var(--down); }
.trc-open { align-items: flex-start; }
.trc-open dd { white-space: normal; display: grid; gap: 4px; justify-items: end; }
.trc-pos { display: inline-flex; align-items: center; gap: 6px; }
.trc-pos .fx-btn { min-height: 24px; padding: 0 8px; font-size: 11.5px; }
.trc-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.trc-foot b { font-size: 14px; }
.trc-meter { height: 4px; margin-top: -4px; }
.at-support { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); }
.at-support .at-card { padding: 10px 14px; gap: 6px; }
.at-support .at-task { display: none; }
.at-fold { margin: 0; padding: 0; }
.at-fold > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; list-style: none; }
.at-fold > summary::-webkit-details-marker { display: none; }
.at-fold > summary::before { content: "+"; font-weight: 700; color: var(--accent2); width: 12px; }
.at-fold[open] > summary::before { content: "-"; }
.at-fold > summary h2 { margin: 0; font-size: 15px; }
.at-fold[open] > summary { border-bottom: 1px solid var(--line); }
.at-fold > .card, .at-fold > section, .at-fold > .at-bottom, .at-fold > .at-detail { margin: 12px 16px; }
.at-fold > .card { border: 0; padding: 0; background: none; }
.at-fold .at-detail { margin-top: 12px; }
.dec-page .dec-card { max-width: 900px; }
@media (max-width: 1250px) {
  .trc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .trc-grid, .at-support { grid-template-columns: minmax(0, 1fr); }
}
.trc-unowned { grid-column: 1 / -1; margin: 0; padding: 10px 14px; display: grid; gap: 6px; }
.trc-pos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.trc-pos-list li { display: flex; align-items: center; gap: 8px; }
.trc-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* Controls (templates/controls.html): the parts as cards, then pause or kill beside the open kills, then force exit,
   then the owner-key commands, the public page and the AI assistant link in three columns */
.ctl-statecard { display: grid; gap: 10px; }
.ctl-bar h2 { margin: 0; font-size: 15px; }
.ctl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctl-part { gap: 8px; }
.ctl-part .at-task { font-size: 12.5px; }
.ctl-part.t-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ctl-part.t-down { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); }
.trc-benchmarks .at-ico, .trc-chat .at-ico, .trc-mcp .at-ico { color: var(--muted); }
.trc-research .at-ico { color: var(--accent2); }
.ctl-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ctl-two > .card { margin: 0; }
.ctl-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.ctl-where > legend { grid-column: 1 / -1; }
.ctl-where > label:first-of-type { grid-column: 1 / -1; }
.ctl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ctl-three > .card { margin: 0; }
.ctl-three .cli-grid { display: grid; gap: 6px; }
.ctl-page .hm > section, .ctl-page .hm > div { margin-bottom: 12px; }
@media (max-width: 1250px) { .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctl-three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ctl-grid, .ctl-two, .ctl-where { grid-template-columns: minmax(0, 1fr); } }

/* Trust, in the AI Teams card style: a row of status tiles with a tone dot, proof cards, two-column card grid. */
.tz-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tz-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 14px 0; }
.tz-proofs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.tz-tile { position: relative; padding: 14px 16px 14px 30px; }
.tz-tile .hk-value { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
.tz-proof .hk-value { font-size: 16px; font-weight: 600; }
.tz-tile .tk-dot { position: absolute; left: 13px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.tz-tile.t-ok .tk-dot { background: var(--up); box-shadow: 0 0 8px color-mix(in srgb, var(--up) 60%, transparent); }
.tz-tile.t-warn .tk-dot { background: var(--warn); } .tz-tile.t-down .tk-dot { background: var(--down); }
.tz-tile.t-info .tk-dot { background: var(--accent2); }
.tz-tile.t-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.tz-tile.t-down { border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.tz-lead { margin: 4px 0 14px; max-width: 110ch; color: var(--muted); }
.tz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.tz-grid > * { min-width: 0; } .tz-grid .card { margin-bottom: 0; }
.tz-grid + .card, .tz-grid + .tz-grid { margin-top: var(--gap); }
@media (max-width: 1250px) { .tz-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .tz-kpis, .tz-grid { grid-template-columns: 1fr; } }

/* The public desk (rd_console.public): the same look, read only. */
body.public .pub-chart { height: 220px; color: var(--accent, #8b5cf6); }
body.public .pub-svg { width: 100%; height: 100%; display: block; }
body.public .pub-narrow { display: none; margin: 8px 16px; }
@media (max-width: 1100px) { body.public .pub-narrow { display: block; } }