/* MatchBook interface. Based on the v2 mockup's stylesheet (handoff/mockups/v2_source/style.css), with the network map, the banner and the Scorer added. */
:root {
  --bg: #0E1217; --panel: #131920; --raised: #1B232D; --raised2: #222B36; --input: #0E1217;
  --line: #1E2731; --line2: #26303C; --line3: #2E3A48; --line4: #3A4757; --line5: #33404F;
  --text: #E7EBF0; --text2: #DCE1E7; --text3: #C7CED8; --soft: #B4BDC8; --muted: #95A0AE; --muted2: #6E7A89; --muted3: #8590A0; --cash: #C7D7F5;
  --green: #3FB27F; --yellow: #E3B341; --red: #E5534B; --grey: #7D8794; --blue: #79A8FF; --link: #9CC3FF;
  --short: #79A8FF; --left: #B49CFF; --book: #463C7A; --over: #E3B341;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.4; }
body { min-height: 100vh; }
button { font-family: inherit; color: inherit; cursor: pointer; }
a { color: var(--link); }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
textarea::placeholder { color: var(--muted2); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.c-green { color: var(--green); } .c-yellow { color: var(--yellow); } .c-red { color: var(--red); } .c-grey { color: var(--muted); } .c-done { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Header */
.top { padding: 16px 24px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--muted); }
.ver { font-size: 11px; color: var(--muted); border: 1px solid var(--line3); border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: 3px; font-weight: 500; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: #151B23; border: 1px solid #232C37; border-radius: 10px; padding: 4px; }
.seg button { min-height: 38px; padding: 0 16px; border-radius: 7px; border: 0; background: transparent; color: var(--soft); font-size: 13.5px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg.small { padding: 3px; border-radius: 9px; }
.seg.small button { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 6px; }
.asof { font-size: 12px; color: var(--muted); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tg { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #222B36; background: transparent; color: var(--muted2); font-size: 13px; }
.tg[aria-pressed="true"] { background: var(--raised); color: var(--text); border-color: var(--line4); }
.tg .cnt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tg[aria-pressed="false"] .sw { opacity: 0.3; }
.sw { display: block; width: 22px; height: 0; border-top: 3px solid; flex: none; }
.sw-green { border-color: var(--green); } .sw-yellow { border-color: var(--yellow); } .sw-red { border-color: var(--red); } .sw-grey { border-color: var(--grey); border-top-style: dotted; } .sw-done { border-color: var(--blue); }
.list .sw, .chips .sw { width: 14px; }

/* Layout */
.layout { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 24px 96px; align-items: flex-start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.map-card { flex: 999 1 640px; min-width: 0; padding: 12px 16px 14px; }
.side { flex: 1 1 340px; min-width: 0; padding: 20px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #33404F transparent; }
.main-col { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.aside-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.box { background: var(--raised); border: 1px solid var(--line2); border-radius: 10px; padding: 14px; }
.box-l { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.box-h { font-size: 14px; font-weight: 500; line-height: 1.35; }
.box-s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.btn { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line5); background: var(--raised2); color: var(--text); font-size: 13px; }
.btn.wide { width: 100%; margin-top: 12px; }
.btn.ghost { background: none; border-color: var(--line2); color: var(--soft); }
.btn.reject { background: none; border-color: #4A3438; color: #F0A9A4; }
.btn.go { border: 0; background: var(--green); color: #0B1A12; font-weight: 600; padding: 0 16px; }
.btn.light { border: 0; background: var(--text); color: var(--bg); font-weight: 600; padding: 0 18px; }
.ov-head { font-size: 18px; font-weight: 600; line-height: 1.3; }

/* Map */
.map-scroll { overflow-x: auto; }
.map { position: relative; width: 100%; min-width: 900px; aspect-ratio: 1000 / 680; }
.guide { position: absolute; top: 6%; bottom: 3%; width: 1px; background: #1C2530; }
.colhead { position: absolute; top: 0; padding: 0 2px; }
.ch-t { font-size: 12px; font-weight: 600; color: var(--soft); }
.ch-s { font-size: 12px; color: var(--muted2); }
svg.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
svg.routes .rt { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; }
svg.routes .hit { fill: none; stroke: transparent; stroke-width: 12px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.dia { position: absolute; width: 8px; height: 8px; pointer-events: none; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid var(--bg); }
.node { position: absolute; width: 0; height: 0; }
.node button { position: absolute; display: flex; align-items: center; gap: 8px; background: none; border: 0; white-space: nowrap; padding: 6px 4px; }
.node .nm { font-size: 12.5px; font-weight: 500; }
.node .cc { font-family: var(--mono); font-size: 10.5px; color: #7C8796; margin-left: 6px; }
.node .dot { display: block; flex: none; border-radius: 50%; }
.map-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--muted); align-items: center; }
.lg { display: flex; align-items: center; gap: 8px; }
.dia-key { display: block; width: 8px; height: 8px; background: var(--soft); transform: rotate(45deg); }
.hcard { position: absolute; z-index: 5; width: 316px; background: var(--raised); border: 1px solid var(--line3); border-radius: 10px; padding: 14px; pointer-events: none; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.id { font-size: 12px; color: var(--muted); }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.b-green { color: var(--green); } .b-yellow { color: var(--yellow); } .b-red { color: var(--red); } .b-grey { color: var(--grey); } .b-done { color: var(--blue); }
.hc-chain { font-size: 13px; font-weight: 500; line-height: 1.35; margin-bottom: 2px; }
.hc-terms { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.hc-note { font-size: 11px; color: var(--muted3); margin-bottom: 4px; }
.row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 1.5px 0; }
.row > span:first-child { color: var(--soft); }
.row > span:last-child { color: #D6DCE3; }
.row.tot { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line3); font-size: 13px; font-weight: 600; }
.row.tot > span:first-child { color: var(--text); }
.hc-amt { font-size: 12px; color: var(--muted); text-align: right; }
.hc-cash { margin-top: 8px; background: #1F2935; border-radius: 6px; padding: 8px 8px 6px; }
.hc-cashline { font-size: 12px; color: var(--cash); line-height: 1.4; margin-top: 6px; }
.hc-roc { font-size: 12px; color: var(--cash); margin-top: 2px; }
.hc-breach { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #D6DCE3; background: #222A34; border-radius: 6px; padding: 8px 10px; }
.hc-foot { margin-top: 8px; font-size: 11px; color: var(--muted2); }

/* Outlay strip */
svg.strip { display: block; width: 100%; }
svg.strip .f-short { fill: var(--short); }
svg.strip .f-left { fill: var(--left); }
svg.strip .f-axis { fill: #3A4757; }
.strip-box { background: #161D26; border: 1px solid var(--line2); border-radius: 10px; padding: 12px 12px 10px; }
.strip-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.strip-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text3); margin-top: 8px; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.k-short { background: var(--short); } .k-left { background: var(--left); } .k-book { background: var(--book); } .k-over { background: var(--over); }
.k-line { width: 16px !important; height: 0 !important; border-top: 1.5px solid rgba(231,235,240,0.75); border-radius: 0 !important; }
.k-dash { width: 16px !important; height: 0 !important; border-top: 1.5px dashed var(--over); border-radius: 0 !important; }
.k-long { width: 16px !important; height: 0 !important; border-top: 1.5px dashed var(--left); border-radius: 0 !important; }

/* Side panels */
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.close { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--soft); display: flex; align-items: center; justify-content: center; }
.p-role { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.p-name { font-size: 20px; font-weight: 600; line-height: 1.25; }
.p-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.p-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2); }
.p-note { font-size: 12.5px; color: var(--soft); margin-top: 8px; line-height: 1.5; }
.p-upd { font-size: 11.5px; color: var(--muted2); margin-top: 6px; }
.note { background: var(--raised); border-radius: 8px; padding: 10px 12px; }
.note.policy { border: 1px dashed var(--line4); }
.note-t { font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.note-s { font-size: 11.5px; color: var(--muted2); margin-top: 4px; }
.note-s.desk { color: #7C9BD0; }
.notes { display: flex; flex-direction: column; gap: 10px; }
.cap { background: var(--raised); border-radius: 10px; padding: 12px 14px; }
.cap-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.cap-top span:first-child { color: var(--soft); font-weight: 600; }
.bar { height: 8px; border-radius: 4px; background: #2A3441; margin-top: 8px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--blue); }
.cap-line { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cap-done { font-size: 12px; color: var(--cash); margin-top: 4px; }
.tmrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--raised); border-radius: 8px; padding: 9px 12px; }
.tm-l { font-size: 13.5px; color: var(--text2); }
.tm-s { font-size: 11.5px; color: var(--muted2); }
.tm-d { font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--raised); color: var(--text2); }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.li-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.li-chain { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-terms { font-size: 11.5px; color: var(--muted); }
.li-net { font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.back { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--soft); font-size: 13px; }
.rt-chain { font-size: 18px; font-weight: 600; line-height: 1.3; }
.rt-terms { font-size: 13px; color: var(--muted); margin-top: 4px; }
.rt-parties { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin-top: 8px; }
.breach { background: #222A34; border: 1px dashed #5A6676; border-radius: 10px; padding: 12px 14px; }
.breach-h { font-size: 12px; font-weight: 600; color: var(--soft); margin-bottom: 4px; }
.breach-t { font-size: 13.5px; line-height: 1.5; }
.breach-s { font-size: 11.5px; color: var(--muted2); margin-top: 4px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sec-h .lbl { margin: 0; }
.sec-v { font-size: 13px; color: var(--cash); font-variant-numeric: tabular-nums; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 12px; }
.step-rail { display: flex; flex-direction: column; align-items: center; width: 12px; flex: none; }
.step-dot { display: block; margin-top: 5px; border-radius: 50%; }
.step-line { display: block; width: 2px; flex: 1; min-height: 12px; background: var(--line3); }
.step:last-child .step-line { background: transparent; }
.step-body { padding-bottom: 10px; min-width: 0; flex: 1; }
.step-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.step-l { font-size: 13.5px; font-weight: 500; }
.step-d { font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.step-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.kind { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.k-pol { color: var(--soft); border-color: var(--line4); border-style: dashed; }
.k-rule { color: var(--text2); border-color: #5A6676; }
.k-ovr { color: var(--link); border-color: #4E77B8; }
.step-s { font-size: 11.5px; color: var(--muted3); }
.flows { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.flows td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.flows td.d { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flows td.a { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 10px; }
.flows tr.quiet td { color: var(--muted2); }
.a-in { color: #9FDCC0; } .a-out { color: var(--text2); }
.cashline { font-size: 12.5px; color: var(--cash); background: #1F2935; border-radius: 8px; padding: 10px 12px; line-height: 1.5; margin-top: 10px; }
.lines { display: flex; flex-direction: column; }
.line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.line-l { font-size: 13.5px; }
.line-s { font-size: 11.5px; color: var(--muted3); line-height: 1.4; margin-top: 1px; }
.line-v { font-size: 13.5px; flex: none; font-variant-numeric: tabular-nums; }
.v-pos { color: #9FDCC0; } .v-neg { color: #D6DCE3; }
.net-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; }
.net-row span:first-child { font-size: 14px; font-weight: 600; }
.net-big { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.net-amt { font-size: 12.5px; color: var(--muted); text-align: right; }
.yard { font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.yard div + div { margin-top: 4px; }
.yard b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

/* Plan */
.plan-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.plan-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.plan-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.kpis { display: flex; gap: 24px; flex-wrap: wrap; }
.kpi-l { font-size: 12px; color: var(--muted); }
.kpi-v { font-size: 22px; font-variant-numeric: tabular-nums; }
.kpi-s { font-size: 11.5px; color: var(--muted2); }
.chart-card { padding: 16px 18px; }
.chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.chart-t { font-size: 14px; font-weight: 600; }
.chart-s { font-size: 12px; color: var(--muted); max-width: 62ch; line-height: 1.45; margin-top: 2px; }
.chart-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chart-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--soft); margin: 4px 0 10px; }
.fac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.open { font-size: 11px; font-weight: 600; color: var(--yellow); border: 1px solid rgba(227,179,65,0.5); border-radius: 4px; padding: 1px 6px; }
.panel-cap { font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.bars { position: relative; display: flex; align-items: flex-end; gap: 3px; }
.bars.dense { gap: 1px; }
.barcol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; }
.barcol span { display: block; }
.s-book { background: var(--book); } .s-left { background: var(--left); } .s-short { background: var(--short); } .s-over { background: var(--over); }
.limit { position: absolute; left: 0; right: 0; border-top: 1.5px solid rgba(231,235,240,0.7); pointer-events: none; }
.limit.stretch { border-top: 1.5px dashed var(--over); }
.limit.long { border-top: 1.5px dashed var(--left); }
.limit-l { position: absolute; right: 0; transform: translateY(-100%); font-size: 10.5px; color: var(--muted); padding-bottom: 1px; background: rgba(19,25,32,0.85); }
.xlabels { display: flex; gap: 3px; margin-top: 6px; }
.xlabels.dense { gap: 1px; }
.xlabels span { flex: 1; min-width: 0; font-size: 10.5px; color: var(--muted2); white-space: nowrap; overflow: visible; }
.rank-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rank-note { font-size: 13px; color: var(--soft); }
.empty { background: var(--panel); border: 1px dashed var(--line5); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); font-size: 14px; }
.deal { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 18px; align-items: flex-start; }
.rank { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; border: 1.5px solid; font-variant-numeric: tabular-nums; }
.deal-main { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deal-chain { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.deal-id { font-family: var(--mono); font-size: 12px; color: var(--muted2); margin-left: 10px; font-weight: 400; }
.deal-terms { font-size: 13px; color: var(--soft); }
.deal-sched { font-size: 12.5px; color: var(--cash); line-height: 1.45; }
.deal-strip { margin: 4px 0 2px; max-width: 520px; }
.deal-quotes { font-size: 12.5px; color: var(--muted3); line-height: 1.45; }
.deal-reason { font-size: 12.5px; color: var(--text3); line-height: 1.45; margin-top: 2px; }
.deal-side { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; text-align: right; }
.deal-net { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.deal-amt { font-size: 12px; color: var(--muted); }
.deal-roc { font-size: 12px; color: var(--cash); }
.deal-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.review { border-color: var(--line3); padding: 18px; }
.rv { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #1A222B; align-items: flex-start; }
.rv-m { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.rv-ok { background: rgba(63,178,127,0.18); color: var(--green); }
.rv-flag { background: rgba(227,179,65,0.18); color: var(--yellow); }
.rv-t { font-size: 13px; line-height: 1.45; color: var(--text2); }
.pad { padding: 18px; }
.p13 { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.done-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.done-row .sw { width: 14px; margin-top: 8px; }
.done-c { font-size: 13px; font-weight: 500; }
.done-s { font-size: 11.5px; color: var(--muted); }
.done-st { font-size: 11.5px; color: #7C9BD0; }
.done-n { font-size: 13px; color: var(--cash); flex: none; font-variant-numeric: tabular-nums; }

/* Market */
.mkt-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
/* Cards fill the width: two side by side on a wide screen, one per row on a laptop (owner, 22 October 2026). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.tile { min-width: 0; }
.tscroll { overflow-x: auto; max-width: 100%; }
table.mt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mt th { font-size: 11px; font-weight: 500; color: var(--muted2); text-align: left; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.mt td { padding: 6px 8px 6px 0; border-bottom: 1px solid #1A222B; white-space: nowrap; }
table.mt .a { text-align: right; }
table.mt .pt, table.mt .vv { font-family: var(--mono); }
table.mt .mat { font-size: 12px; color: var(--muted); }
table.mt .ch { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.srct { font-family: inherit; font-size: 10px; color: var(--muted2); border: 1px solid var(--line3); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
details.allpts > summary { cursor: pointer; font-size: 12px; color: var(--soft); margin: 8px 0 4px; }
details.info { display: inline; }
details.info > summary { display: inline; cursor: pointer; list-style: none; color: var(--soft); }
details.info > summary::-webkit-details-marker { display: none; }
details.info .info-t { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.tile { padding: 16px; display: flex; flex-direction: column; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile-t { font-size: 14px; font-weight: 600; }
.tile-k { font-size: 10.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line3); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.tile-s { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.tgrid { display: grid; grid-template-columns: 44px 84px 1fr 52px 1fr; gap: 8px; align-items: center; }
.tgrid .mat { font-size: 12px; color: var(--muted); }
.tgrid.h { font-size: 11px; color: var(--muted2); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tgrid.r { font-size: 13px; padding: 6px 0; border-bottom: 1px solid #1A222B; }
.tgrid .pt { font-family: var(--mono); color: var(--soft); }
.tgrid .vv { font-family: var(--mono); }
.tgrid .ch { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.src-screenshot { color: #9FDCC0; font-size: 12px; } .src-typed { color: var(--soft); font-size: 12px; } .src-interpolated { color: var(--yellow); font-style: italic; font-size: 12px; }
.tile-u { font-size: 11.5px; margin-top: 10px; line-height: 1.45; color: var(--soft); }
.tile-u.none { color: var(--muted2); font-style: italic; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.nx { padding: 8px 0; border-bottom: 1px solid #1A222B; }
.nx-q { font-size: 13px; color: var(--text2); }
.nx-n { font-size: 12.5px; color: var(--muted); }
.nx-n b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.howto p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text2); }
.agent { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.agent-top { display: flex; align-items: center; gap: 10px; }
.agent-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #1F2A36; flex: none; }
.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding-right: 2px; }
.msg { display: flex; }
.msg.u { justify-content: flex-end; }
.bub { max-width: 88%; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.msg.u .bub { background: #24303D; color: var(--text); }
.msg.a .bub { background: #1A2129; color: var(--text2); border: 1px solid var(--line2); }
.file { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); background: var(--raised2); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; }
.compose { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.compose label { font-size: 12px; color: var(--muted); }
.compose textarea { width: 100%; resize: vertical; background: var(--input); color: var(--text); border: 1px solid #2A3441; border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.45; }
.attach { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--soft); background: var(--raised); border-radius: 6px; padding: 6px 10px; }
.linkbtn { background: none; border: 0; color: var(--muted); font-size: 12px; min-height: 28px; }
.row-btns { display: flex; gap: 8px; justify-content: space-between; }

/* Boss */
.boss-fab { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border-radius: 999px; border: 1px solid var(--line4); background: var(--raised); color: var(--text); font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.boss-av { width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
/* The Boss window: the full height below the header and most of the width (owner, 22 October 2026). */
.boss { position: fixed; right: 0; top: var(--top-h, 120px); bottom: 0; z-index: 50; width: min(calc(100vw - 24px), max(70vw, 900px)); display: flex; flex-direction: column; background: #151B23; border: 1px solid var(--line3); border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; box-shadow: 0 20px 50px rgba(0,0,0,0.55); overflow: hidden; }
.boss-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #232C37; }
.boss-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.boss .bub { max-width: min(78%, 980px); }
.boss-msgs { gap: 14px; padding: 16px 20px; }
.msg.u .bub { background: #2B4A6E; color: #EEF4FB; border: 1px solid #3C6493; border-radius: 12px 12px 3px 12px; }
.msg.a .bub { border-radius: 12px 12px 12px 3px; }
.msg .meta { font-size: 11px; font-weight: 600; color: #B9CCE2; margin-bottom: 3px; }
.tag .tm { font-weight: 400; letter-spacing: 0; margin-left: 8px; color: var(--muted2); }
.bub .tblock { font-family: var(--mono); font-size: 12px; white-space: pre; overflow-x: auto; margin: 4px 0; padding-bottom: 2px; }
.boss .bub.wide { max-width: min(96%, 1200px); }
.fcards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; white-space: normal; }
.fcard { background: #141A21; border: 1px solid var(--line2); border-radius: 8px; }
.fcard > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; min-width: 0; }
.fcard > summary::-webkit-details-marker { display: none; }
.fcard .fid { font-family: var(--mono); font-size: 11.5px; color: var(--text); white-space: nowrap; }
.fcard .fst { font-size: 10.5px; border-radius: 3px; padding: 0 5px; border: 1px solid var(--line3); color: var(--muted); white-space: nowrap; }
.fcard .fst.st-live { color: #7FD1A8; border-color: #2E5A45; }
.fcard .fst.st-on_hold { color: #F3D27A; border-color: #5A4A1C; }
.fcard .fsum { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.fcard[open] .fsum { display: none; }
.fcard .fbody { padding: 0 10px 8px; font-size: 12.5px; line-height: 1.5; color: var(--text2); white-space: pre-wrap; }
.waitstrip { border-bottom: 1px solid #232C37; background: #1B1F14; padding: 8px 20px; max-height: 26vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: none; }
.ws-t { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #F3D27A; }
.wq { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 4px 12px; align-items: start; }
.wq-about { grid-column: 1; }
.wq-row { grid-column: 2; grid-row: 1 / span 2; }
.wq-q { font-size: 13px; color: var(--text); line-height: 1.45; }
.wq-a { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-right: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.wq-about { font-size: 11.5px; color: var(--muted2); }
.wq-row { display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 760px) { .wq { grid-template-columns: 1fr; } .wq-row { grid-column: 1; grid-row: auto; } }
.wq-row textarea { flex: 1; resize: vertical; height: 30px; min-height: 30px; background: var(--input); color: var(--text); border: 1px solid #2A3441; border-radius: 6px; padding: 6px 8px; font-family: inherit; font-size: 13px; }
.tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; }
.boss-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.bchip { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line3); background: var(--raised); color: var(--text3); font-size: 12px; }
.boss .compose { padding: 12px 20px 14px; border-top: 1px solid #232C37; }
.boss .compose textarea { resize: none; min-height: calc(4 * 1.45em + 22px); max-height: 50vh; }
.boss-chips { padding: 0 20px 10px; }
.shot-prev { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.shot-prev:empty { display: none; }
.shot-thumb { display: block; max-width: 180px; max-height: 110px; border: 1px solid var(--line); border-radius: 6px; margin: 2px 0 6px; }

/* API spend and the monthly limit (owner, 22 October 2026) */
.spend-banner { margin: 12px 24px 0; padding: 10px 14px; border-radius: 8px; background: #3A2F12; color: #F3D27A; font-size: 13px; }
.spend-banner.stopped { background: #3A1F22; color: #F0C3BF; }
.spend { margin: 20px 24px 0; }
.spend-form { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.spend-form input { width: 120px; background: var(--input); color: var(--text); border: 1px solid #2A3441; border-radius: 6px; padding: 5px 8px; }

/* The production map: every bank, every chain (owner, 22 October 2026) */
.nm-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nm-wrap { width: 100%; overflow-x: auto; }
svg.nm { display: block; margin: 0 auto; max-width: none; }
.nm-line { fill: none; stroke-linecap: round; cursor: pointer; }
.nm-hit { fill: none; stroke: transparent; stroke-width: 14px; cursor: pointer; }
.nm-node circle { fill: var(--text); }
.nm-node.grey circle { fill: #3A4552; }
.nm-name { fill: var(--text); font-size: calc(13px * var(--k, 1)); font-weight: 600; cursor: pointer; }
.nm-node.grey .nm-name { fill: var(--muted2); }
.nm-grey { fill: var(--muted2); font-size: calc(10.5px * var(--k, 1)); }
.nm-head { fill: var(--muted); font-size: calc(11px * var(--k, 1)); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.nm-lab { font-size: calc(11px * var(--k, 1)); font-family: var(--mono); }
.nm-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.nm-legend i.dash { height: 0; border-top: 3px dashed; background: none !important; }
.nm-legend span::before { display: none; }
.nm-banner { background: #3A1F22; color: #F0C3BF; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.nm-detail { font-size: 13px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* The working of a route's net (owner, 22 October 2026) */
table.wk { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.wk td { padding: 5px 0; border-bottom: 1px solid #1A222B; vertical-align: top; }
table.wk td.a { text-align: right; white-space: nowrap; padding-left: 12px; font-family: var(--mono); }
.wk-legs { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.wk-l { color: var(--text2); } .wk-s { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
tr.wk-quoted .wk-l, tr.wk-total .wk-l { font-weight: 600; color: var(--text); }
tr.wk-total td { border-top: 1px solid var(--line3); }

/* The Banks page (owner, 22 October 2026) */
.bk { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bk.with-panel { margin-right: min(440px, 40vw); }
.bk-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tabs button { min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line3); background: var(--raised); color: var(--text3); font-size: 13px; }
.bk-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
table.bk-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bk-t th { text-align: left; font-size: 11px; font-weight: 500; color: var(--muted2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.bk-t td, table.bk-t tbody th { padding: 8px 10px; border-bottom: 1px solid #1A222B; vertical-align: top; text-align: left; }
table.bk-t .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-name { padding: 0; min-height: 0; color: var(--text); font-size: 13px; font-weight: 600; text-align: left; }
.bk-name:hover { text-decoration: underline; }
.bk-today { font-size: 12px; color: #7FD1A8; font-variant-numeric: tabular-nums; }
.bk-sm { font-size: 11.5px; line-height: 1.4; }
.bk-none { color: #F0A9A4; font-size: 12px; font-weight: 600; }
.bk-flags > summary { cursor: pointer; font-size: 12px; color: #F3D27A; white-space: nowrap; }
.bk-flag { font-size: 11.5px; color: var(--muted); margin-top: 4px; max-width: 340px; }
.bk-sub td { font-size: 12px; color: var(--muted); border-bottom: 1px solid #1A222B; }
.bk-group { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bk-card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 13px; }
.bk-card-h .bk-name { font-size: 15px; }
.bk-does { color: var(--text2); }
.bk-free { margin-left: auto; font-weight: 600; color: #7FD1A8; font-variant-numeric: tabular-nums; }
.bk-toggle { margin-bottom: 4px; }
.bk-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-f { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.bk-f select { background: var(--input); color: var(--text); border: 1px solid #2A3441; border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.bk-grid td.bk-cell { min-width: 150px; font-size: 12px; border-left: 1px solid #1A222B; }
.bk-cell.st-priced { background: rgba(63,178,127,0.12); }
.bk-cell.st-cant_price { background: rgba(224,138,60,0.12); }
.bk-cell.st-priced_fx { background: rgba(227,179,65,0.16); }
.bk-cell.st-blocked { background: rgba(240,169,164,0.10); }
.bk-cell.st-off, .bk-cell.st-none { color: var(--muted2); }
.bk-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted); padding: 10px; }
.bk-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.bk-legend .st-priced::before { background: rgba(63,178,127,0.5); } .bk-legend .st-priced_fx::before { background: rgba(227,179,65,0.6); } .bk-legend .st-cant_price::before { background: rgba(224,138,60,0.5); }
.bk-legend .st-blocked::before { background: rgba(240,169,164,0.5); } .bk-legend .st-off::before { background: #232C37; }
.bk-chain { padding: 8px 0; border-bottom: 1px solid #1A222B; font-size: 13px; }
.bk-st { font-size: 10.5px; font-weight: 600; border-radius: 3px; padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.bk-st.st-priced { color: #7FD1A8; border: 1px solid #2E5A45; } .bk-st.st-priced_fx { color: #E3B341; border: 1px solid #5A4A1C; } .bk-st.st-cant_price { color: #E08A3C; border: 1px solid #5A3A1C; } .bk-st.st-blocked { color: #F0A9A4; border: 1px solid #5A2E2E; }
.bk-two { align-items: start; }
.bk-conf th { border-top: 1px dashed var(--line3); }
.bk-panel { position: fixed; right: 0; top: var(--hdr-h, 120px); bottom: 0; width: min(440px, 40vw); z-index: 40; overflow-y: auto; padding: 16px; border-radius: 12px 0 0 0; display: flex; flex-direction: column; gap: 14px; }
.bk-ptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-ph { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bk-pl .bk-pl .bk-ph { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--soft); margin: 6px 0 2px; }
.bk-pi { font-size: 12.5px; color: var(--text2); line-height: 1.45; padding: 3px 0; }
.bk-pl .fcard { margin-bottom: 6px; }
@media (max-width: 900px) { .bk.with-panel { margin-right: 0; } .bk-panel { width: 100vw; } }

/* Added for the interface (Phase 4) */
.banner { background: #3A2F12; color: #F3D27A; font-size: 12.5px; font-weight: 600; text-align: center; padding: 6px 12px; border-bottom: 1px solid #5A4A1C; }
.loading { padding: 48px 24px; color: var(--muted); font-size: 14px; }
.busy { font-size: 12px; color: var(--yellow); }
.err { margin: 12px 24px 0; padding: 10px 14px; border-radius: 8px; background: #3A1F22; color: #F0A9A4; font-size: 13px; }
.node .sq { display: block; flex: none; width: 9px; height: 9px; border-radius: 1px; }
.node.doc .nm { font-size: 11.5px; color: var(--muted); }
.colhead { top: 0; transform: translateX(-50%); text-align: center; }
.guide { transform: translateX(-0.5px); }
.scorer { background: var(--raised); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.scorer .lbl { margin-bottom: 4px; }
.alt { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #1A222B; font-size: 12.5px; }
.alt .a-l { color: var(--text2); }
.alt .a-v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt.chosen .a-l { color: var(--green); }
.deal-scorer { font-size: 12.5px; color: #9FDCC0; line-height: 1.45; }
.held { font-size: 11.5px; color: var(--yellow); margin-top: 6px; }
.cites { font-size: 11px; color: var(--muted2); font-family: var(--mono); line-height: 1.5; word-break: break-word; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }
.live .flows td.d { width: auto; white-space: nowrap; }
.draft { background: var(--raised); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.draft summary { cursor: pointer; font-size: 13px; color: var(--text2); }
.draft pre { white-space: pre-wrap; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--text2); margin: 10px 0 2px; }
.live .flows td + td { padding-left: 14px; }
/* Accounts, contacts and drafts on request (Phase 6) */
.login { display: flex; justify-content: center; padding: 64px 16px; }
.login-card { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 22px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.fld input, .fld select, .fld textarea { background: var(--input); color: var(--text); border: 1px solid #2A3441; border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 13.5px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.utable { width: 100%; border-collapse: collapse; font-size: 13px; }
.utable th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.utable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.utable td.btns { white-space: nowrap; text-align: right; }
.utable td.btns .btn { min-height: 32px; margin-left: 6px; }
.chk { font-size: 12.5px; color: var(--text2); margin-right: 8px; white-space: nowrap; }
.whoami { margin-top: 4px; text-align: right; color: var(--text3); }
.notice { margin: 12px 24px 0; padding: 10px 14px; border-radius: 8px; background: #1E2E25; color: #9FDCC0; font-size: 13px; }
.draftbub { max-width: 96% !important; }
.dr-h { font-size: 12.5px; color: var(--text3); margin-bottom: 6px; line-height: 1.5; }
.dr-b { white-space: pre-wrap; font-family: var(--sans); font-size: 13px; line-height: 1.5; margin: 0 0 8px; color: var(--text); background: var(--input); border-radius: 6px; padding: 8px 10px; }
/* Approvals (D-72): the count of proposals waiting, on the tab. */
.tbadge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #E3B341; color: #111; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* Done deals (D-75): the outlay, editable in place. */
.deal-outlay input { width: 9.5em; padding: 3px 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: rgba(255,255,255,0.04); color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.deal-outlay input[type="date"] { text-align: left; }

/* D-76: the QR code to scan with an authenticator app. */
.qr { display: flex; justify-content: center; margin: 8px 0; }
.qr svg { width: 200px; height: 200px; border-radius: 6px; }

/* How it works (D-73): the live 7-day cost on each agent card. */
.how-cost { font-size: 12.5px; color: #9aa4b2; }
.how-cost-t b { color: #e6e9ee; font-weight: 600; font-variant-numeric: tabular-nums; }