/* Compare cockpit layer. Loads after compare.css. Overrides page layout with instruments.
   Rules: one question per instrument; graphite by default; colour only when earned;
   glance → inspect (expand in place) → read (drawer). DESIGN SAMPLE · ILLUSTRATIVE DATA */

:root { --inst-radius: 10px; --inst-pad: 14px; }

/* ---------- desk-style top nav ---------- */
.topbar { height: 52px; }
.nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; border-radius: 7px; }
.nav a.on { color: var(--ground); background: var(--accent); }

/* ---------- tile wall (overview) ---------- */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 132px; grid-template-rows: auto 1fr auto; gap: 10px 14px;
  padding: var(--inst-pad); background: var(--panel); border: 1px solid var(--line); border-radius: var(--inst-radius);
  cursor: pointer; text-align: left; color: inherit; min-height: 150px;
}
.tile:hover { border-color: var(--line-hi); background: var(--hover); }
.tile:focus-visible { outline: 2px solid var(--accent-hi); }
.tile .t-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tile .t-head .tag { flex: none; }
.tile .t-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tile .t-q { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .t-arms { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tile > div:nth-child(2) { min-width: 0; }
.tile .t-arms .arrow { color: var(--accent); }
.tile .t-gauge { display: grid; justify-items: center; align-content: start; gap: 4px; }
.tile .t-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; font-size: 11px; color: var(--muted); }
.tile .t-foot .st { margin-right: auto; }
.tile .t-foot .num { color: var(--ink-2); }

/* ring gauge */
.ring { width: 64px; height: 64px; }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--line); }
.ring .fill { stroke: var(--arm-base); stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring.partial .fill { stroke: var(--cmp-partial); }
.ring.bad .fill { stroke: var(--cmp-no); }
.ring text { fill: var(--ink); font-family: var(--font-mono); font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.ring-lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* effect sparkline */
.spark { width: 132px; height: 34px; display: block; }

/* ---------- study board ---------- */
.board-head { display: grid; gap: 8px; padding: 16px 0 12px; }
.board-head .line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-head h1 { margin: 0; font-size: 18px; font-weight: 600; }
.board-head .line2 { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); align-items: center; }
.board-head .line2 b { color: var(--ink-2); font-weight: 500; }
.board-head .actions { margin-left: auto; display: flex; gap: 6px; }
.vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; }
.vs .side { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; }
.vs .side:hover { border-color: var(--line-hi); }
.vs .side .sw { width: 8px; height: 8px; border-radius: 2px; }
.vs .changed { font-family: var(--font-ui); color: var(--ink-2); font-size: 12px; }
.vs .changed b { color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; margin-right: 6px; }

.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.inst.dim { grid-column: span 2; min-height: 150px; }
.inst {
  min-width: 0; overflow: hidden;
  grid-column: span 2; background: var(--panel); border: 1px solid var(--line); border-radius: var(--inst-radius);
  padding: var(--inst-pad); display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-height: 210px; position: relative;
}
.inst.wide { grid-column: span 3; }
.inst.full { grid-column: 1 / -1; }
.inst.open { grid-column: 1 / -1; min-height: 0; }
.inst .i-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.inst .i-q { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.inst .i-sub { font-size: 11px; color: var(--muted); min-width: 0; }
.inst .i-expand { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.inst .i-expand:hover { color: var(--ink); border-color: var(--line-hi); }
.inst .i-body { display: grid; align-content: start; min-width: 0; padding-top: 4px; overflow: hidden; }
.inst .i-read { font-size: 12px; color: var(--ink-2); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.inst .i-read b { color: var(--ink); font-weight: 600; }
.inst .i-read .withheld { color: var(--faint); font-style: italic; }
.inst .i-foot { display: flex; gap: 12px; font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); letter-spacing: .04em; }
.inst.dim { opacity: .55; }
.inst .i-detail { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 4px; display: grid; gap: 12px; }
.inst .i-detail .mtable, .inst .i-detail .dtable { font-size: 12px; }

/* big number */
.big { font-family: var(--font-mono); font-size: 30px; min-width: 0; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.big small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.big.fav { color: var(--cmp-ok); } .big.unfav { color: var(--short); } .big.neu { color: var(--ink); }
.sub-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

/* comparability instrument */
.cmp-inst { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.cmp-inst .ring { width: 84px; height: 84px; }
.cmp-inst .ring text { font-size: 15px; }
.cmp-inst .word { font-size: 15px; font-weight: 600; }
.cmp-inst .word.comparable { color: var(--cmp-ok); } .cmp-inst .word.partial { color: var(--cmp-partial); } .cmp-inst .word.not_comparable { color: var(--cmp-no); } .cmp-inst .word.not_proven { color: var(--cmp-unproven); }
.cmp-inst .split { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.cmp-inst .split b { color: var(--ink-2); font-weight: 500; }

/* effect strip */
.strip { width: 100%; height: 92px; display: block; }
.strip .band { fill: var(--diff-band); }
.strip .zero { stroke: var(--diff-zero); }
.strip .med { stroke: var(--accent); stroke-dasharray: 3 3; }
.strip .dot { fill: var(--ink-2); opacity: .8; }
.strip .dot.hi { fill: var(--accent); opacity: 1; }
.strip text { fill: var(--faint); font-size: 10px; font-family: var(--font-mono); }

/* module reach: leak bars */
.reach { display: grid; gap: 6px; }
.reach .r { display: grid; grid-template-columns: 110px 1fr 54px; gap: 10px; align-items: center; font-size: 11px; }
.reach .r .k { color: var(--muted); }
.reach .r .bar { height: 10px; background: var(--line-2); border-radius: 3px; overflow: hidden; position: relative; }
.reach .r .bar i { display: block; height: 100%; background: var(--stage-fill-hi); }
.reach .r .bar .leak { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line-hi) 3px 4px); }
.reach .r .v { font-family: var(--font-mono); text-align: right; color: var(--ink-2); }
.reach .r.paired .k::before { content: "↳ "; color: var(--faint); }
.reach .gap { height: 1px; background: var(--line-2); margin: 2px 0; }

/* ablation quad */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quad .q { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; border-top: 2px solid var(--arm-base); }
.quad .q.a3 { border-top-color: var(--arm-3); } .quad .q.a4 { border-top-color: var(--arm-4); } .quad .q.cand { border-top-color: var(--arm-cand); }
.quad .q .l { font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.quad .q .n { font-family: var(--font-mono); font-size: 16px; margin-top: 2px; }
.quad .q .d { font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.quad .q .bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.quad .q .bar i { display: block; height: 100%; background: var(--ink-2); opacity: .6; }

/* regime heat */
.heat { display: grid; gap: 4px; min-width: 0; }
.heat .hr { display: grid; grid-template-columns: 120px 1fr 44px; gap: 8px; align-items: center; font-size: 11px; }
.heat .hr .k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat .hr .cell { height: 22px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); cursor: pointer; }
.heat .hr .cell:hover { border-color: var(--line-hi); }
.heat .hr .cell.fav { background: #0f2417; border-color: #174a37; color: var(--cmp-ok); }
.heat .hr .cell.unfav { background: #2c1416; border-color: #4a2226; color: var(--fail-fg); }
.heat .hr .cell.sparse { opacity: .55; border-style: dashed; }
.heat .hr .cell.withheld { color: var(--faint); font-style: italic; }
.heat .hr .n { font-family: var(--font-mono); text-align: right; color: var(--muted); }
.heat-tabs { display: flex; gap: 2px; margin-bottom: 10px; flex-wrap: wrap; }
.heat-tabs button { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; color: var(--muted); white-space: nowrap; }
.heat-tabs button.on { background: var(--chip); color: var(--ink); }

/* divergence timeline */
.tl { width: 100%; display: block; max-height: 190px; }
.tl .lane { stroke: var(--line-2); }
.tl .same { stroke: var(--line-hi); }
.tl .div { stroke: var(--accent); }
.tl .div.invalid { stroke: var(--short); }
.tl .div.hold { stroke: var(--arm-base); }
.tl .mark { fill: var(--accent); }
.tl .mark.invalid { fill: var(--short); }
.tl .mark.hold { fill: var(--arm-base); }
.tl text { fill: var(--faint); font-size: 10px; font-family: var(--font-mono); }
.tl-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.tl-legend i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }

/* differences list, compact */
.dlist { display: grid; gap: 2px; }
.drow { display: grid; grid-template-columns: 78px 1fr 1fr 96px 84px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; cursor: pointer; border-left: 2px solid transparent; }
.drow:hover { background: var(--hover); }
.drow.defect { border-left-color: var(--short); }
.drow.unexplained { border-left-color: var(--warn); }
.drow .t { font-family: var(--font-mono); color: var(--muted); font-size: 10.5px; }
.drow .dec { font-size: 11px; }
.drow .ty { color: var(--ink-2); }
.drow .imp { font-family: var(--font-mono); text-align: right; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .imp.na { color: var(--faint); font-style: italic; font-family: var(--font-ui); }

/* reliability dials (engine mode) */
.dials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dial { display: grid; justify-items: center; gap: 2px; }
.dial .arc { width: 110px; height: 64px; }
.dial .arc path { fill: none; stroke-width: 8; stroke-linecap: butt; }
.dial .arc .tr { stroke: var(--line); }
.dial .arc .b { stroke: var(--arm-base); }
.dial .arc line.b { stroke: var(--arm-base); }
.dial .arc .c { stroke: var(--arm-cand); }
.dial .arc.unfav .c { stroke: var(--short); }
.dial .lbl { font-size: 11px; color: var(--muted); text-align: center; }
.dial .vals { font-family: var(--font-mono); font-size: 11px; }
.dial .vals .b { color: var(--arm-base); } .dial .vals .c { color: var(--arm-cand); }

/* read level: logs */
.log { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow: auto; max-height: 260px; }
.log .ln { display: grid; grid-template-columns: 62px 44px 1fr; gap: 10px; }
.log .ln .t { color: var(--faint); }
.log .ln .lv { color: var(--muted); }
.log .ln.warn .lv { color: var(--warn); } .log .ln.error .lv { color: var(--short); }
.log .ln.base .msg { color: var(--arm-base); } .log .ln.cand .msg { color: var(--arm-cand); } .log .ln.eval .msg { color: var(--ink-2); }
.read-tabs { display: flex; gap: 2px; margin: 12px 0 8px; }
.read-tabs button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; color: var(--muted); }
.read-tabs button.on { background: var(--chip); color: var(--ink); }
.excerpt { font-size: 12px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; }

@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst, .inst.wide { grid-column: span 1; }
  .inst.full, .inst.open { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wall, .board { grid-template-columns: 1fr; }
  .tile { grid-template-columns: 1fr; }
  .tile .t-gauge { grid-row: 2; justify-items: start; }
  .drow { grid-template-columns: 1fr 1fr; }
  .drow .t, .drow .ty, .drow .imp { grid-column: 1 / -1; }
}