/* ══ War page: "Panel 5" design (war panel on top, enemies left) ═════════════
   Palette, sizes and layout lifted from the War Panel Redesigns canvas, round 5
   board 5. Scoped to #page-war so the rest of the dashboard keeps its own look.
   Fonts are the dashboard's own self-hosted Geist / Geist Mono. */
#page-war {
  --p-bg: #0d1117; --p-card: #141a22; --p-line: #1d242e; --p-row: #1a2029; --p-chip: #232b36; --p-bd: #2c3542;
  --p-text: #e6edf3; --p-muted: #8b98a8; --p-dim: #6e7b8b; --p-soft: #b8c2cf; --p-faint: #4b5563;
  --p-green: #57d18f; --p-red: #ef6b63; --p-amber: #f0b37a; --p-blue: #8ab4f8;
  color: var(--p-text); font-variant-numeric: tabular-nums;
}

/* ── Header: title + underline tabs + live note ── */
.wp-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 28px; border-bottom: 1px solid var(--p-line); margin-bottom: 20px; }
.wp-header h1 { margin: 0; font-size: 22px; font-weight: 600; padding-bottom: 12px; }
#page-war .wp-header .war-tabs { border: 0; margin: 0; gap: 22px; overflow-x: auto; }
#page-war .wp-header .war-tab { padding: 12px 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--p-muted); border-bottom: 2px solid transparent; margin-bottom: 0; }
#page-war .wp-header .war-tab:hover { color: var(--p-text); }
#page-war .wp-header .war-tab.active { color: var(--p-text); border-bottom-color: var(--p-blue); }
.wp-header .wp-live { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; color: var(--p-dim); padding-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) { .wp-header { flex-wrap: nowrap; } }

/* ── War panel ── */
.wp-panel { display: flex; flex-wrap: wrap; gap: 1px; background: var(--p-line); border-radius: 14px; overflow: hidden; }
.wp-cell { background: var(--p-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; }
.wp-cell:empty { display: none; }
.wp-score { flex: 2 1 440px; gap: 14px; }
.wp-energy, .wp-chain { flex: 1 1 230px; }
.wp-live  { flex: 1 1 100%; padding: 18px 22px; gap: 12px; }
.wp-label { font-size: 12px; color: var(--p-muted); }
.wp-sub   { font-size: 11px; color: var(--p-dim); }
.wp-big   { font-family: var(--mono); font-weight: 600; line-height: 1.1; }
.wp-sides { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 12px; }
.wp-side  { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.wp-side.right { align-items: flex-end; }
.wp-side .wp-fname, .wp-side .wp-fname a { color: var(--p-text); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wp-dots  { font-size: 12px; display: flex; gap: 8px; }
.wp-mid   { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 4px; text-align: center; }
.wp-bar   { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; }
.wp-prog  { height: 6px; background: var(--p-bg); border-radius: 3px; overflow: hidden; }
.wp-prog > div { height: 100%; background: var(--p-blue); transition: width .3s; }
.wp-cols  { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; }
.wp-list-row { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--p-line); }
.wp-list-row .nm { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-list-row .v  { font-weight: 600; width: 54px; text-align: right; }
.wp-empty { padding: 28px 0; text-align: center; color: var(--p-muted); font-size: 14px; }

/* ── Split: enemies | report column ── */
#page-war .scores-split  { margin-top: 20px; }
#page-war .scores-left   { gap: 14px; }
#page-war .scores-right  { gap: 16px; }
#page-war .scores-divider { width: 24px; align-items: flex-start; }
#page-war .scores-divider .sd-line { width: 2px; background: var(--p-line); }
#page-war .scores-divider:hover .sd-line, #page-war .scores-divider.sd-dragging .sd-line { background: var(--p-blue); box-shadow: none; }
#page-war .scores-divider .sd-handle { position: sticky; top: 240px; margin-top: 240px; width: 12px; height: 44px; border-radius: 6px; background: var(--p-chip); align-items: center; justify-content: center; padding: 0; gap: 4px; }
#page-war .scores-divider .sd-dot { width: 3px; height: 3px; background: var(--p-muted); margin: 0; }
.wp-card { background: var(--p-card); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wp-h2   { margin: 0; font-size: 17px; font-weight: 600; }
.wp-caps { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--p-muted); text-transform: uppercase; }
.wp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Segmented controls, buttons, links ── */
.wp-seg { display: flex; gap: 2px; background: var(--p-bg); padding: 3px; border-radius: 7px; }
.wp-seg button { border: 0; background: transparent; color: var(--p-muted); font: 500 12px var(--dash-font); padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.wp-seg button.on { background: var(--p-chip); color: var(--p-text); }
.wp-btn { border: 1px solid var(--p-chip); background: transparent; color: var(--p-soft); font: 500 12px var(--dash-font); padding: 5px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.wp-btn:hover { border-color: var(--p-bd); color: var(--p-text); }
#page-war .wp-btn.active-toggle { border-color: var(--p-blue) !important; color: var(--p-blue) !important; background: rgba(138,180,248,.1) !important; }
#page-war a.wp-link, #page-war button.wp-link { font: 12px var(--dash-font); color: var(--p-blue); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
#page-war a.wp-link:hover, #page-war button.wp-link:hover { color: #c3d7fb; }

/* ── Hospital / jail countdown pill: big monospace, amber in the last 5 min ── */
#page-war .hosp-pill { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--mono); padding: 2px 8px; border-radius: 999px; color: var(--p-red); background: rgba(239,107,99,.14); white-space: nowrap; }
#page-war .hosp-pill.jail { color: var(--p-amber); background: rgba(240,179,122,.14); }
#page-war .hosp-pill.soon { color: var(--p-bg); background: var(--p-amber); }

/* ── Enemy search ── */
.es-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: var(--p-bg); border: 1px solid var(--p-bd); border-radius: 10px; padding: 0 12px; height: 40px; box-sizing: border-box; }
.es-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--p-text); font: 14px var(--dash-font); }
.es-search input::placeholder { color: var(--p-dim); }
.es-select { height: 40px; background: var(--p-bg); color: var(--p-text); border: 1px solid var(--p-bd); border-radius: 10px; font: 13px var(--dash-font); padding: 0 10px; }
.es-filters { background: var(--p-card); border-radius: 14px; padding: 18px 20px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 28px; align-items: start; }
.es-head { grid-column: 1 / -1; display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.es-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.es-filters legend { font-size: 12px; color: var(--p-muted); padding: 0 0 8px; }
.es-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.es-check input { accent-color: var(--p-blue); width: 16px; height: 16px; margin: 0; }
.es-check .ct { margin-left: auto; font-size: 12px; color: var(--p-dim); }
.es-range { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.es-range .hd { display: flex; justify-content: space-between; font-size: 12px; }
.es-range .hd span:first-child { color: var(--p-muted); }
.es-range .hd span:last-child  { font-family: var(--mono); }
.es-range label { font-size: 11px; color: var(--p-dim); }
.es-range input[type=range] { accent-color: var(--p-blue); width: 100%; margin: 4px 0 0; }
.es-range .ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--p-dim); }
.es-reset { border: 0; background: transparent; color: var(--p-blue); font: 600 13px var(--dash-font); cursor: pointer; padding: 4px 0; margin-left: auto; }
.es-results-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 10px; }
.es-results-head b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.es-results-head span { font-size: 12px; color: var(--p-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-list { background: var(--p-card); border-radius: 12px; overflow-y: auto; max-height: var(--list-h, min(560px, 65vh)); }
.es-grid { display: grid; grid-template-columns: minmax(0,1fr) 64px 58px 76px; align-items: center; gap: 0 10px; padding: 0 14px; }
.es-colhead { height: 38px; font-size: 12px; color: var(--p-muted); border-bottom: 1px solid var(--p-line); }
.es-colhead button { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.es-colhead button.r { text-align: right; }
.es-row { min-height: 56px; padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; border-top: 1px solid var(--p-row); cursor: pointer; }
.es-row:hover { background: rgba(255,255,255,.02); }
.es-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.es-name a { color: var(--p-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.es-name a:hover { color: var(--p-blue); }
.es-name .lv { font-size: 12px; color: var(--p-dim); flex-shrink: 0; }
.es-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 16px; margin-top: 3px; font-size: 12px; color: var(--p-muted); }
.es-avail { font: 12px var(--mono); color: var(--p-soft); }
.es-avail.now { color: var(--p-green); }
.es-call { font-size: 11px; color: var(--p-amber); background: rgba(240,179,122,.12); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.es-power { text-align: right; font-family: var(--mono); font-size: 13px; }
.es-power.est { color: var(--p-muted); }
.es-ff { justify-self: end; font: 600 12px var(--mono); padding: 3px 7px; border-radius: 6px; color: var(--p-muted); background: var(--p-row); }
.es-ff.f3  { color: var(--p-bg); background: var(--p-green); }
.es-ff.f2  { color: var(--p-green); background: rgba(87,209,143,.14); }
.es-ff.f15 { color: var(--p-text); background: var(--p-chip); }
.es-attack { justify-self: end; text-decoration: none; font: 500 13px var(--dash-font); padding: 6px 12px; border-radius: 8px; color: var(--p-muted); box-shadow: inset 0 0 0 1px var(--p-bd); }
.es-attack.ready { background: var(--p-blue); color: var(--p-bg); box-shadow: none; }
.es-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--p-faint); }
.es-dot.online { background: var(--p-green); }
.es-dot.idle   { background: var(--p-amber); }
.es-empty { padding: 32px 16px; text-align: center; color: var(--p-muted); font-size: 14px; }
.es-empty button { border: 0; background: transparent; color: var(--p-blue); font: inherit; cursor: pointer; }

/* ── Score over time ── */
.sc-plot { position: relative; height: 150px; }
.sc-plot svg, .sc-nav svg { display: block; width: 100%; height: 100%; }
.sc-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--p-dim); }
.sc-ends { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 15px var(--mono); background: rgba(13,17,23,.75); padding: 4px 8px; border-radius: 6px; }
.sc-y { position: absolute; left: 0; font-size: 11px; color: var(--p-dim); }
.sc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--p-amber); }
.sc-cross span { position: absolute; top: 0; left: 6px; white-space: nowrap; font-size: 11px; color: var(--p-amber); }
.sc-nav { position: relative; height: 40px; background: var(--p-bg); border-radius: 6px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.sc-dim { position: absolute; top: 0; bottom: 0; background: rgba(13,17,23,.7); pointer-events: none; }
.sc-win { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 1px solid var(--p-blue); border-radius: 4px; background: rgba(138,180,248,.08); pointer-events: none; }
.sc-win span { position: absolute; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; background: var(--p-blue); }

/* ── Member table: grouped grid (OUTPUT / LOSSES / SPEND / EFF) ── */
.mt-wrap { background: var(--p-card); border-radius: 10px; overflow-x: auto; }
.mt { display: flex; flex-direction: column; min-width: 620px; }
.mt-g { display: grid; grid-template-columns: 22px minmax(150px,1fr) 80px 62px 38px 6px 62px 40px 6px 54px 34px 6px 40px; align-items: center; padding: 0 12px; }
.mt-groups { align-items: end; height: 30px; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.mt-groups span[data-g] { border-bottom: 1px solid var(--p-bd); padding-bottom: 5px; }
.mt-heads { height: 32px; font-size: 11px; color: var(--p-muted); }
.mt-heads span[data-k] { cursor: pointer; user-select: none; }
.mt-heads span.on { color: var(--p-text); font-weight: 500; }
.mt-row { height: 46px; border-top: 1px solid var(--p-line); font-size: 13px; position: relative; cursor: pointer; }
.mt-row:hover { background: rgba(255,255,255,.02); }
/* Trained during the war: amber edge + tint; small gains just the faint edge. */
.mt-row.mt-trained { background: rgba(210,153,34,.10); box-shadow: inset 3px 0 0 var(--p-amber); }
.mt-row.mt-trained:hover { background: rgba(210,153,34,.16); }
.mt-row.mt-trained-sm { background: none; box-shadow: inset 3px 0 0 rgba(210,153,34,.45); }
.mt .r { text-align: right; }
.mt .rank { color: var(--p-dim); }
.mt .soft { color: var(--p-soft); }
.mt .plus { color: var(--p-dim); font-size: 10px; }
/* "Excl. 3rd party" on: excluded hits/defeats shown beside the war-only count.
   Atk/Def columns are sized for it permanently so toggling never shifts the grid. */
.mt .tp-plus { color: var(--p-blue); font-size: 11px; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mt-name { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mt-name .l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mt-name .l1 .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-name .l2 { padding-left: 15px; font-size: 11px; display: flex; gap: 8px; align-items: center; color: var(--p-dim); white-space: nowrap; }
.mt-tier { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; cursor: pointer; }
.mt-note { padding: 10px 16px; border-top: 1px solid var(--p-line); font-size: 12px; color: var(--p-dim); }
.mt-total { height: 34px; border-top: 1px solid var(--p-bd); font-size: 12px; color: var(--p-muted); }
.mt-total b { color: var(--p-text); font-weight: 600; }
.mt .row-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.mt-row .es-dot { width: 8px; height: 8px; }
/* War report tables: fixed-height box, names scroll under sticky group/column
   heads, totals pinned to the bottom. */
.mt-scroll { max-height: var(--list-h, min(560px, 65vh)); overflow-y: auto; }
/* Drag grip under the report tables / enemy list — sets --list-h on #page-war
   for all of them at once (initListGrips in app-war.js). */
.list-grip { height: 18px; margin-top: -6px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: row-resize; touch-action: none; color: var(--p-muted); font-size: 10px; letter-spacing: .08em; }
.list-grip::before, .list-grip::after { content: ''; width: 56px; height: 5px; border-radius: 3px; background: var(--p-muted); opacity: .55; }
.list-grip:hover, .list-grip.on { color: var(--p-blue); }
.list-grip:hover::before, .list-grip:hover::after, .list-grip.on::before, .list-grip.on::after { background: var(--p-blue); opacity: 1; }
.mt-scroll .mt-groups, .mt-scroll .mt-heads, .mt-scroll .mt-total { position: sticky; z-index: 1; background: var(--p-card); }
.mt-scroll .mt-groups { top: 0; }
.mt-scroll .mt-heads { top: 30px; }
.mt-scroll .mt-total { bottom: 0; }
/* Breathing room between the number columns (the 6px spacer columns pick up a
   gap each side, so OUTPUT / LOSSES / SPEND groups separate more too). */
.mt-scroll .mt-g { column-gap: 12px; }
.mt-scroll .mt-heads { font-size: 12px; }
.mt-scroll .mt { min-width: 780px; }
.mt-scroll .mt:has(.mt-them) { min-width: 600px; }
/* Wide variant (War History) — separate Status / Power columns */
.mt-full .mt { min-width: 960px; }
.mt-full .mt-g { grid-template-columns: 32px minmax(140px,1fr) 112px 72px 104px 76px 64px 16px 72px 64px 16px 76px 52px 16px 52px; padding: 0 16px; }
.mt-full .mt-row { height: 44px; font-size: 14px; }
.mt-full .mt-heads { height: 36px; font-size: 12px; }
.mt-full .mt-groups { height: 34px; font-size: 11px; }
.mt-full .plus { font-size: 11px; }

/* ── Bleeders strip ── */
.wp-bleed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: rgba(239,107,99,.08); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.wp-bleed b { color: var(--p-red); font-weight: 600; }
.wp-bleed .who { color: var(--p-soft); }
.wp-bleed .wp-link { margin-left: auto; }

/* ── Chain bonus hits ── */
.bh-row { display: flex; align-items: flex-start; gap: 12px; padding-top: 8px; border-top: 1px solid var(--p-line); }
.bh-row > span { flex: 0 0 72px; font-size: 12px; color: var(--p-dim); padding-top: 4px; }
.bh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-chip { font-size: 12px; background: var(--p-line); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.bh-chip b { font-family: var(--mono); color: var(--p-blue); font-weight: 600; }

/* ── Activity chart ── */
.ac-plot { position: relative; height: 130px; }
.ac-plot svg { display: block; width: 100%; height: 100%; }
.ac-plot .yl { position: absolute; left: 4px; font-size: 11px; color: var(--p-dim); }
.ac-key { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ac-key i { width: 14px; height: 2px; display: inline-block; }
.ac-windows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: rgba(138,180,248,.07); border-radius: 8px; padding: 10px 12px; }
.ac-win { font-size: 13px; padding: 3px 8px; border-radius: 6px; background: var(--p-card); }
.ac-win.next { background: rgba(87,209,143,.14); }

/* The shared ticker paints elapsed war time red; the design keeps it quiet. */
#page-war .wp-mid .cd-war-start { color: var(--p-dim) !important; font-size: 11px; }
.mt-row:hover .row-actions { display: flex; }
.mt .row-actions .btn { font-size: 11px; padding: 2px 8px; }


/* Status pill sits on the name line, right of the name — never squeezed */
.mt-name .l1 .n { min-width: 0; flex-shrink: 1; }
.mt-name .l1 > :not(.n) { flex-shrink: 0; }
.mt-name .l1 .hosp-pill { margin-left: 2px; font-size: 12px; padding: 1px 7px; }
.es-name .hosp-pill { margin-left: 4px; }
/* Enemy-side grid: # · Member · Power · Atk · Def/D-A · Energy */
.mt-g.mt-them { grid-template-columns: 22px minmax(150px,1fr) 64px 6px 48px 6px 48px 44px 6px 56px; }
.mt:has(.mt-them) { min-width: 480px; }
/* Keep the "Lead lost" marker label clear of the top y-axis label */
.sc-cross span { top: 18px; }

.mt-band { padding: 10px 14px 6px; border-top: 1px solid var(--p-bd); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }

/* ── Payout ledger: ✓ · Member · CREDIT Atk/Out/Ast/Credit · LOSSES Def · RESPECT Resp/Bonus · PAY Share/Pay/link ── */
.mt-g.mt-pay { grid-template-columns: 74px minmax(170px,1fr) 46px 70px 70px 60px 10px 40px 10px 70px 52px 10px 52px 190px 66px; }
.mt:has(.mt-pay) { min-width: 1010px; }
.mt-row.mt-pay { cursor: default; height: 40px; }
.mt-row.po-out > :not(:first-child) { opacity: .55; }
.mt-pay .dim { color: var(--p-dim); }
.po-tick { border: 1px solid var(--p-bd); background: transparent; color: var(--p-muted); font: 600 11px var(--dash-font); padding: 2px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.po-tick.on, .po-tick:hover { color: var(--p-green); border-color: rgba(87,209,143,.45); background: rgba(87,209,143,.12); }
.po-tick.on:hover { color: var(--p-red); border-color: rgba(239,107,99,.45); background: rgba(239,107,99,.12); }
.po-tick:disabled { pointer-events: none; opacity: .6; }
.po-pill { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.po-pill.bleed { color: var(--p-red); background: rgba(239,107,99,.14); }
.po-pill.low { color: var(--p-amber); background: rgba(240,179,122,.14); }
.po-pill.man { color: var(--p-blue); background: rgba(138,180,248,.12); }
.po-amt { font: 600 12.5px var(--mono); color: var(--p-green); padding: 1px 5px; border: 1px dashed transparent; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.po-amt:hover, .po-amt:focus-visible { border-color: var(--p-bd); outline: none; }
.po-amt.fixed { color: var(--p-blue); border-color: rgba(138,180,248,.45); }
.po-was { color: var(--p-dim); text-decoration: line-through; font-size: 11px; margin-right: 4px; }
.po-amt-in { width: 130px; background: var(--p-bg); border: 1px solid var(--p-blue); border-radius: 5px; color: var(--p-text); font: 12.5px var(--mono); padding: 2px 6px; text-align: right; }
.po-pay { font-size: 11px; font-weight: 600; color: var(--p-green); background: rgba(87,209,143,.12); border: 1px solid rgba(87,209,143,.4); border-radius: 5px; padding: 2px 8px; text-decoration: none; white-space: nowrap; }
.po-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.po-band .po-bleed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--p-soft); }
.po-band label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.po-band input[type=number] { width: 52px; background: var(--p-bg); border: 1px solid var(--p-bd); border-radius: 5px; color: var(--p-text); font: 12px var(--mono); padding: 2px 5px; }
.po-band input:disabled { opacity: .5; }
.po-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.po-chip { border: 1px solid var(--p-chip); background: var(--p-bg); color: var(--p-soft); font: 500 12px var(--dash-font); padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.po-chip:hover { border-color: var(--p-bd); color: var(--p-text); }
.po-chip.open { border-color: var(--p-blue); color: var(--p-blue); }
.po-chip.on { border-color: rgba(87,209,143,.45); color: var(--p-green); }
.po-chip:disabled { opacity: .45; cursor: default; }
.po-chip b { font-family: var(--mono); font-weight: 600; }
.po-chip i { font-style: normal; color: var(--p-dim); }
.po-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; border: 1px solid var(--p-blue); border-radius: 8px; background: var(--p-bg); padding: 10px 12px; margin-bottom: 10px; }
.po-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--p-muted); min-width: 110px; flex: 0 1 170px; }
.po-hint { font-size: 11px; color: var(--p-dim); max-width: 380px; align-self: center; }
.po-sum { font-size: 12px; color: var(--p-muted); margin-bottom: 8px; }
.po-sum b { color: var(--p-text); }
.po-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Summary left, Copy / Pay all right, above the table */
.po-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.po-top .po-sum { margin: 0; flex: 1 1 320px; min-width: 0; }
.po-top .po-actions { order: 2; margin-left: auto; }

/* Lead-change markers on the score chart */
.sc-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(13,17,23,.85); pointer-events: auto; cursor: help; }
.sc-cross span { font-weight: 600; background: rgba(13,17,23,.8); padding: 1px 4px; border-radius: 4px; }

@media (max-width: 900px) {
  .wp-header .wp-live { text-align: left; flex-basis: 100%; padding-bottom: 8px; }
}

/* ══ Briefing tab: pre-war matchup (renderWarBriefing, app-intel.js) ═════════
   Us = --p-blue, them = --p-amber: tells apart without relying on red/green. */
.brf { display: flex; flex-direction: column; gap: 16px; --us: var(--p-blue); --them: var(--p-amber); }
.brf .us { color: var(--us); } .brf .them { color: var(--them); }
.brf-empty { padding: 48px 16px; text-align: center; color: var(--p-muted); }
.brf-card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brf-card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.brf-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.brf-label { font-size: 12px; color: var(--p-muted); }
.brf-note, .brf-sub { font-size: 12px; color: var(--p-dim); }
.brf-tag { font-size: 12px; font-weight: 400; color: var(--p-muted); }
.brf-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }
.brf-eyebrow.live { color: var(--p-green); }
.brf-center .brf-eyebrow:not(.live) { color: var(--p-amber); }

.brf-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: center; padding: 24px; }
.brf-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brf-side.end { align-items: flex-end; text-align: right; }
.brf-name { font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.brf-name.us { color: var(--us); } .brf-name.them { color: var(--them); }
.brf-center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.brf-countdown { font-family: var(--mono); font-size: 38px; font-weight: 600; line-height: 1.1; }
.brf-verdict { border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; background: var(--p-chip); color: var(--p-soft); }
.brf-verdict.us { background: rgba(138,180,248,.14); color: var(--us); }
.brf-verdict.them { background: rgba(240,179,122,.14); color: var(--them); }
.brf-btn { min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--p-bd); background: var(--p-chip); color: var(--p-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.brf-btn:hover { border-color: var(--us); }

.brf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.brf-kpi-vals { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 22px; font-weight: 600; }
.brf-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--p-chip); }
.brf-bar .us { background: var(--us); } .brf-bar .them { flex: 1; background: var(--them); }

.brf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.brf-edge { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--p-line); }
.brf-edge > span:last-child { font-family: var(--mono); }
.brf-edge.muted { color: var(--p-dim); }

.brf-band { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; }
.brf-band-key { font-size: 12px; font-weight: 600; }
.brf-band-key .us { text-align: right; }
.brf-band-l { color: var(--p-muted); font-family: var(--mono); }
.brf-band-us, .brf-band-them { display: flex; align-items: center; gap: 8px; font-family: var(--mono); min-width: 0; }
.brf-band-us { justify-content: flex-end; }
.brf-band-us div, .brf-band-them div { height: 14px; border-radius: 3px; min-width: 2px; }
.brf-band-us div { background: var(--us); } .brf-band-them div { background: var(--them); }
.brf-band.unknown div { opacity: .35; }

.brf-all summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.brf-table { width: 100%; max-width: 720px; margin: 0 auto; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.brf-table th:nth-child(2) { width: 46%; }
.brf-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); padding: 6px 12px; text-align: center; }
.brf-table th.us, .brf-table td.us { text-align: right; }
.brf-table th.them, .brf-table td.them { text-align: left; }
.brf-table td { padding: 6px 12px; border-top: 1px solid var(--p-line); font-family: var(--mono); color: var(--p-soft); }
.brf-table td.lbl { text-align: center; font-family: inherit; color: var(--p-muted); }
.brf-table td.win.us { color: var(--us); font-weight: 600; } .brf-table td.win.them { color: var(--them); font-weight: 600; }
.brf-table td.us:not(.win), .brf-table td.them:not(.win) { color: var(--p-soft); }
.brf-table .brf-group td { border-top: 0; padding: 14px 8px 4px; text-align: center; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-dim); }
.brf-foot { margin: 0; font-size: 12px; color: var(--p-dim); text-align: center; line-height: 1.6; }
.brf-pending { color: var(--p-amber); }

#page-war .war-tab.brf-dot::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--p-amber); vertical-align: middle; }

@media (max-width: 600px) {
  .brf-side.end { align-items: flex-start; text-align: left; }
  .brf-band { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); }
  .brf-countdown { font-size: 30px; }
}