/* t2.css — Terminal2 v4 mockup, variant A (evolve).
   Introduces NO new palette: every colour is a theme.css token. The only
   additions are the three lane-identity hues the old theme lacked (--id-*). */
:root{
  --id-deepseek-v4-1-flash:#0e8a96; --id-claude-opus-5-5:#d457a8; --id-qwen3-8-max:#f0b429;
  --id-claude-sonnet-5-5:#8fa3ff; --id-gpt-6-1-sol:#9878e8; --id-grok-4-7:#cf5f16; --id-jev-neutral:#8a93a6;
}
*{box-sizing:border-box}
body{font-size:13px;line-height:1.35;min-width:0}
.mono{font-family:var(--font-mono)}
.up{color:var(--long)} .dn{color:var(--short)} .mut{color:var(--muted)} .fnt{color:var(--faint)} .acc{color:var(--accent)} .wr{color:var(--warn)}
.wrap{max-width:1440px;margin:0 auto;padding:14px 16px 40px}
/* ribbon */
.ribbon{background:var(--engine-row);border-bottom:1px solid var(--line);color:var(--accent);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-align:center;padding:5px 10px}
/* top bar */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;margin-bottom:10px}
.logo{font-family:var(--font-mono);font-weight:700;letter-spacing:.12em;display:flex;align-items:center;gap:8px}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.nav{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;flex-wrap:wrap}
.navitem{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);padding:6px 9px;border-radius:7px;white-space:nowrap}
.navitem:hover{color:var(--ink)}
.navitem-on{color:var(--ground)!important;background:var(--accent)}
.mode{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.mode a,.mode span{padding:8px 12px;color:var(--muted)}
.mode .on{background:var(--accent);color:var(--ground);font-weight:700}
.mode .off{color:var(--faint);text-decoration:line-through;cursor:not-allowed}
.sp{flex:1}
.hl{font-family:var(--font-mono);font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}
.hd{width:8px;height:8px;border-radius:50%;display:inline-block}
.subnav{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.subnav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;padding:6px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);background:var(--panel-2)}
.subnav a:hover{border-color:var(--line-hi);color:var(--ink)}
.subnav a.on{border-color:var(--accent);color:var(--accent);background:var(--chip)}
/* ticker strip */
.tick{display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:12px;overflow:hidden}
.tk{padding:9px 12px;border-right:1px solid var(--line-2);min-width:0}
.tk:last-child{border-right:0}
.tk b{font-family:var(--font-mono);font-size:15px}
.tk svg{display:block;margin-top:2px}
/* chips + tags */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;background:var(--chip);border:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.chip.sim{border-color:var(--accent);color:var(--accent)}
.chip.sample{border-color:var(--info);color:var(--info)}
.chip.ok{background:var(--pass-bg);color:var(--pass-fg);border-color:var(--pass-bg)}
.chip.bad{background:var(--fail-bg);color:var(--fail-fg);border-color:var(--fail-bc)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.off{color:var(--faint);border-style:dashed}
.new,.chg{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;padding:1px 5px;border-radius:4px;vertical-align:middle;margin-left:6px}
.new{background:var(--accent);color:var(--ground);font-weight:700}
.chg{border:1px solid var(--accent);color:var(--accent)}
body.nochg .new,body.nochg .chg{display:none}
.dec{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:2px 7px;border-radius:4px;font-weight:700}
.dec-flat{background:var(--chip);color:var(--muted)}
.dec-hold{background:#102440;color:var(--info)}
.dec-long,.dec-open-long{background:var(--pass-bg);color:var(--pass-fg)}
.dec-short,.dec-open-short{background:var(--fail-bg);color:var(--fail-fg)}
.dec-close{background:#3a2f10;color:var(--accent)}
.dec-invalid{background:var(--engine-row);color:var(--warn);border:1px solid var(--warn)}
.dec-na{background:transparent;color:var(--faint);border:1px dashed var(--line-hi)}
.mdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}
/* panels */
.panel{padding:14px 16px;margin-bottom:12px}
.ph{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ph h2{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ph .sub-t{color:var(--muted);font-size:11.5px}
.grid2{display:grid;grid-template-columns:minmax(0,1000fr) minmax(0,396fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.grid2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{padding:10px 12px}
.kpi b{display:block;font-family:var(--font-mono);font-size:17px;margin-top:3px}
.kpi small{color:var(--faint);font-size:11px}
a.card,.card{display:block;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink)}
a.card:hover{border-color:var(--line-hi);color:var(--ink)}
.card.sel{border-color:var(--accent);background:var(--hover)}
.card.warnb{border-color:var(--warn)}
/* tables */
table{border-collapse:collapse;width:100%}
th{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:400;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:7px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:hover td{background:var(--hover)}
td.n,th.n{text-align:right;font-family:var(--font-mono)}
.scroll{overflow-x:auto}
/* matrix */
.mx{table-layout:fixed;min-width:980px}
.mx td{padding:0;border:1px solid var(--line-2)}
.mx th.mh{width:152px}
.cell{display:block;padding:8px 9px;color:var(--ink);min-height:92px}
.cell:hover{background:var(--hover);color:var(--ink)}
.cell .l1{display:flex;justify-content:space-between;align-items:center;gap:4px}
.cell .l2{font-family:var(--font-mono);font-size:11px;margin-top:4px}
.cell .l3{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:3px}
.cell.broken{background:var(--engine-row);box-shadow:inset 0 0 0 1px var(--warn)}
.cell.heat{box-shadow:none}
.mrow td.m{padding:8px 10px;background:var(--panel-2)}
.rowtot{font-family:var(--font-mono)}
/* timeline strip */
.strip{display:flex;gap:2px}
.strip i{display:block;flex:1;height:18px;border-radius:2px;background:var(--chip);min-width:6px}
.strip i.h{background:#17376a}.strip i.o{background:var(--long)}.strip i.os{background:var(--short)}.strip i.c{background:var(--accent)}.strip i.x{background:var(--warn);opacity:.9}.strip i.f{background:var(--line-hi)}
.strip.sm i{height:10px}
/* bars */
.bar{height:8px;background:var(--chip);border-radius:4px;position:relative;overflow:hidden}
.bar b{display:block;height:100%;background:var(--accent)}
.bar b.l{background:var(--long)} .bar b.s{background:var(--short)}
.bar.gap{overflow:visible}
.gauge{height:12px;background:var(--chip);border-radius:6px;position:relative}
.gauge b{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--accent)}
.gauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--short)}
/* stages / ladder */
.gate{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:6px;font-family:var(--font-mono);font-size:11px;margin-bottom:4px}
.gate.pass{background:var(--pass-bg);color:var(--pass-fg)} .gate.fail{background:var(--fail-bg);color:var(--fail-fg)} .gate.na{background:var(--panel-2);color:var(--faint);border:1px dashed var(--line-hi)}
.gate span.r{margin-left:auto;color:inherit;opacity:.8}
.mod{background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px}
.mod.drv{border-color:var(--accent)}
.mod.na{opacity:.7;border-style:dashed}
.mod .kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-family:var(--font-mono);font-size:11px;margin-top:6px}
.mod .kv span:nth-child(odd){color:var(--faint)}
.mod .kv span:nth-child(even){text-align:right;color:var(--ink-2)}
.quote{border-left:2px solid var(--accent);padding:2px 0 2px 12px;color:var(--ink-2);margin:6px 0}
.quote mark{background:#3a2f10;color:var(--accent-hi);padding:0 2px;border-radius:3px}
.callout{background:var(--engine-row);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--ink-2);margin-bottom:12px}
.callout.bad{border-left-color:var(--short);background:var(--fail-bg)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tape{display:flex;gap:9px;align-items:baseline;padding:4px 8px;border-left:2px solid var(--line-hi);font-size:12px}
.tape.eng{border-left-color:var(--accent);background:var(--engine-row)}
.tape time{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);flex:none}
select{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-family:var(--font-mono);font-size:11px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel-2);color:var(--muted);border:0;padding:5px 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--ground);font-weight:700}
/* changes panel */
.changes{border-color:var(--accent);background:var(--engine-row)}
.changes ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px}
.changes li{font-size:12px;color:var(--ink-2)}
.changes li b{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;margin-right:6px}
.foot{color:var(--faint);font-family:var(--font-mono);font-size:10.5px;margin-top:14px}
@media (max-width:820px){
  .wrap{padding:8px 8px 30px}
  .grid2,.grid3,.grid2e{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top{gap:8px;padding:8px}
  .nav{width:100%} .sp{display:none}
  .tick{grid-template-columns:repeat(3,1fr)} .tk{border-bottom:1px solid var(--line-2)} .tk b{font-size:13px}
  .changes ul{grid-template-columns:1fr}
  .panel{padding:11px 11px}
  /* matrix collapses to a compact heat map: chip + P&L only */
  .mx{min-width:0;width:100%}
  .mx th.mh{width:64px}
  .mx th{padding:5px 2px;font-size:9px;letter-spacing:0;text-align:center}
  .mrow td.m{padding:6px 5px;font-size:10px}
  .mrow td.m .full{display:none}
  .cell{padding:4px 2px;min-height:48px;text-align:center}
  .cell .l1{justify-content:center}
  .cell .l1 .age,.cell .l3,.cell .l2 .det{display:none}
  .cell .l2{font-size:9.5px;margin-top:3px}
  .cell .dec{font-size:8.5px;padding:1px 3px;letter-spacing:0}
  .hide-m{display:none!important}
  .scroll table.keep{min-width:560px}
  table.cards-m thead{display:none}
}
@media (min-width:821px){.show-m{display:none!important}}
.mx td.rowtot,.mx td.n{vertical-align:middle;padding:0 10px}
@media (max-width:820px){.chip{white-space:normal}.cell.broken .l2{font-size:8px}}
@media (max-width:820px){.grid2,.grid3,.grid2e{grid-template-columns:minmax(0,1fr)}.grid2>div,.grid3>*,.grid2e>*{min-width:0}.panel{overflow-x:auto}.gate span.r{text-align:right}.gate{flex-wrap:wrap}td,th{padding:6px 4px}}