/* css/president.css — President's Dashboard.
   Royal gold treatment over the base tokens. Sibling of css/home.css.

   ── DESIGN CONTRACT ──────────────────────────────────────────────
   This page is the delivery of the promise made by the mock on
   /presidents-invite (css/presidents-invite.css, .pv-* classes). The gold
   values, the pill tabs, the president strip, the capacity meters, the
   applicant row and the alliance table are all ported from there
   DELIBERATELY — if you restyle one side, restyle both or the pitch stops
   matching the product. Class names stay .pr-* because js/president.js
   writes them; only the visual language is shared.

   The STAGE (the framed dashboard) is pinned dark in both themes, the same
   "lit gallery" rule /presidents uses — gold on a light background loses
   the royal read entirely. Page chrome outside the frame still follows the
   user's theme. */

.page-president {
  /* legacy names kept: existing rules + js reference them */
  --pr-gold: #f0b445;
  --pr-gold-2: #ffe9b0;
  --pr-gold-deep: #c98f2b;
  --pr-gold-line: rgba(240, 180, 69, .30);
  --pr-gold-wash: rgba(240, 180, 69, .10);
  /* stage surfaces — fixed, theme-independent (see contract above) */
  --pr-stage-1: #151b26;
  --pr-stage-2: #0b0e14;
  --pr-stage-3: rgba(255, 255, 255, .04);
  --pr-line: rgba(255, 255, 255, .08);
  --pr-line-2: rgba(255, 255, 255, .14);
  --pr-t1: #eaecf0;
  --pr-t2: #8b95a1;
  /* Lightened from #6b7480, which measured 4.00:1 on the stage — under the
     4.5 AA floor. This token carries the SMALLEST type on the page (8.5–10.5px
     meta, stat labels, capacity note), so it's the one that could least afford
     to be borderline. Now ~4.9:1. */
  --pr-t3: #7a8390;
  --pr-ok: #00e87a;
  --pr-warn: #f59e0b;
  --pr-bad: #f87171;
  --pr-blue: #60a5fa;
}

.pr-wrap { max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; }

/* ── the royal stage ──────────────────────────────────────────────
   Gradient border-box is the invite page's .pv-royal, verbatim. */
.pr-stage {
  border: 1px solid transparent; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  background:
    linear-gradient(168deg, rgba(240, 180, 69, .12), rgba(240, 180, 69, 0) 34%) padding-box,
    linear-gradient(180deg, rgba(21, 27, 38, .97), rgba(8, 10, 15, .99)) padding-box,
    linear-gradient(158deg, #ffe9ae, #f0b445 38%, rgba(240, 180, 69, .25) 55%, #d29a33 100%) border-box;
  color: var(--pr-t1);
}
/* Inside the stage, text tokens are pinned so a light theme can't wash it out. */
.pr-stage .pr-muted, .pr-stage .pr-sub, .pr-stage .pr-dim { color: var(--pr-t2); }

.pr-stage-bar {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--pr-line);
  background: linear-gradient(165deg, rgba(240, 180, 69, .09), transparent 45%);
}
.pr-stage-dots { display: flex; gap: 6px; flex: none; }
.pr-stage-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #1a2230; border: 1px solid var(--pr-line-2);
}
/* The warzone number is the one thing in this bar that must survive. It sits
   in its own non-shrinking element and the PREFIX is what truncates — with a
   single ellipsised string, a 320px phone clipped "…Warz" and lost it. */
.pr-stage-title {
  display: flex; align-items: baseline; gap: .4em; min-width: 0;
  font-family: var(--font-data, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pr-t2);
}
.pr-stage-title-pre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-stage-title b { color: var(--pr-gold); flex: none; white-space: nowrap; }
@media (max-width: 560px) { .pr-stage-title-pre { display: none; } }
.pr-stage-body { padding: 20px; }

/* Live-data tag. The invite mock says "illustrative preview"; here the data
   is real, so it always reads live — that contrast is the point. */
.pr-livetag {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto;
  font-family: var(--font-data, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pr-ok); border: 1px solid rgba(0, 232, 122, .35);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.pr-livetag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pr-ok); }
@media (max-width: 560px) {
  .pr-stage-body { padding: 14px; }
  .pr-livetag { display: none; }
}

/* ── Pro ⇄ President switcher ─────────────────────────────────────
   The two dashboards are SEPARATE surfaces, not tabs of one thing: /home is
   the Pro alliance console, /president is the warzone command centre. This
   sits above the stage so the split is stated before either is read. */
.pr-switch {
  display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; align-items: center;
}
.pr-sw-link {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--font-data, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-1, rgba(255, 255, 255, .08));
  color: var(--text-2, #8b95a1); background: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.pr-sw-link:hover { border-color: var(--pr-gold-line); color: var(--text-1, #eaecf0); }
.pr-sw-link.current {
  color: #1c1204; border-color: transparent;
  background: linear-gradient(120deg, #ffd98a, #f0b445);
}
/* --text-2, not --text-3: base.css scopes --text-3 to "hints / disabled" and
   it measured ~2.6:1 here in both themes. This is a real sentence explaining
   the two-dashboard split, so it has to be readable. */
.pr-sw-note {
  font-size: 11.5px; color: var(--text-2, #8b95a1); margin-left: 4px;
}
@media (max-width: 560px) { .pr-sw-note { flex-basis: 100%; margin: 2px 0 0; } }

/* ── loading ─────────────────────────────────────────────────── */
.pr-load { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; }
.pr-load-text { color: var(--text-dim, #9fb0bf); font-size: 14px; }
.pr-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(224, 168, 0, .25); border-top-color: var(--pr-gold, #e0a800);
  animation: pr-spin 0.8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ── cards ───────────────────────────────────────────────────── */
/* Inside the stage these sit on the dark stage surface, not the themed one. */
.pr-card {
  background: var(--pr-stage-3);
  border: 1px solid var(--pr-line);
  border-radius: 10px; padding: 16px 18px; margin: 0 0 14px;
}
.pr-card h2 {
  margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--pr-t1);
  letter-spacing: -.01em;
}
.pr-sub { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--pr-t2); }
.pr-muted { color: var(--pr-t2); font-size: 13px; }

.pr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pr-grid2 { grid-template-columns: 1fr; } }

/* ── term line ───────────────────────────────────────────────────
   The old .pr-head / .pr-eyebrow / .pr-title block is gone: the big gold
   "Warzone N" heading it styled was replaced by the stage title bar, which
   says the same thing in the chrome. Only the seat/date line survives. */
.pr-term-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.pr-term {
  display: inline-flex; align-items: center;
  font-family: var(--font-data, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.pr-term.ok { color: #1c1204; background: linear-gradient(120deg, #ffd98a, #f0b445); }
.pr-term.warn { color: var(--pr-gold); background: transparent; border: 1px solid var(--pr-gold); }
.pr-dateline { font-family: var(--font-data, monospace); font-size: 10px; color: var(--pr-t3); }

/* president identity strip — ported from .pv-prez-strip */
.pr-prez-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 16px; border-radius: 10px;
  border: 1px solid var(--pr-gold-line);
  background: linear-gradient(165deg, rgba(240, 180, 69, .10), rgba(240, 180, 69, .02) 60%);
}
.pr-prez-av {
  position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #ffe9b0, #f0b445 55%, var(--pr-gold-deep));
  box-shadow: 0 0 0 2px rgba(240, 180, 69, .35), 0 0 18px rgba(240, 180, 69, .18);
}
.pr-prez-av img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.pr-prez-ini {
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 15px; color: #1c1204;
}
/* Crown sits centred ABOVE the disc (was offset top-left, which clipped
   against the strip edge on narrow screens). */
.pr-prez-crown {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.pr-prez-id { flex: 1; min-width: 180px; }
.pr-prez-nm { font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; }
.pr-prez-sub {
  font-family: var(--font-data, monospace); font-size: 10.5px;
  color: var(--pr-t2); margin-top: 2px;
}
.pr-prez-sub b { color: var(--pr-gold); }
.pr-prez-standing { text-align: right; flex: none; margin-left: auto; }
.pr-prez-standing b {
  display: block; font-family: var(--font-data, monospace); font-size: 15px;
  font-weight: 700; color: var(--pr-gold-2);
}
.pr-prez-standing span {
  display: block; font-family: var(--font-data, monospace); font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pr-t3); margin-top: 1px;
}
@media (max-width: 560px) { .pr-prez-standing { text-align: left; margin-left: 0; } }

/* ── tabs — pills, matching the invite mock (.pv-tab) ─────────── */
.pr-tabs { display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; }
.pr-tab {
  appearance: none; cursor: pointer;
  font-family: var(--font-data, monospace); font-size: 11.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
  color: var(--pr-t2); background: transparent; border: 1px solid var(--pr-line);
  transition: color .15s ease, border-color .15s ease;
}
.pr-tab:hover { color: var(--pr-t1); border-color: var(--pr-line-2); }
.pr-tab.active {
  color: #1c1204; background: linear-gradient(120deg, #ffd98a, #f0b445); border-color: transparent;
}
/* pending-count pip (Transfer Desk "3" in the mock) */
.pr-tab .n {
  display: inline-block; min-width: 16px; text-align: center; margin-left: 5px;
  border-radius: 999px; font-size: 10px; padding: 0 4px;
  background: rgba(240, 180, 69, .18); color: var(--pr-gold-2);
}
.pr-tab.active .n { background: rgba(28, 18, 4, .18); color: #1c1204; }
.pr-tabpanel.hidden { display: none; }

/* ── desk controls strip (.pv-desk-controls) ─────────────────── */
.pr-desk-controls {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 14px;
  font-family: var(--font-data, monospace); font-size: 11px; color: var(--pr-t3);
}
.pr-desk-controls .ctl b { color: var(--pr-t2); }
.pr-desk-controls .ctl .on { color: var(--pr-ok); }
.pr-desk-controls .ctl .off { color: var(--pr-t3); }

/* ── stat grid (standing) ────────────────────────────────────── */
.pr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pr-stat {
  background: var(--glass-bg-2, rgba(255, 255, 255, .03)); border-radius: 12px;
  padding: 12px 10px; text-align: center;
}
.pr-stat.wide { grid-column: 1 / -1; }
.pr-stat-val { font-size: 22px; font-weight: 800; color: var(--text, #e8eef4); }
.pr-stat-val.accent { color: var(--pr-gold-2, #ffcf5c); }
.pr-stat-lbl { font-size: 11.5px; color: var(--text-dim, #9fb0bf); margin-top: 3px; }
.pr-stat-tiers { font-size: 15px; font-weight: 600; }

/* ── population flow ─────────────────────────────────────────── */
.pr-flow-tally { display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.pr-flow-tally-in { color: #6fd47f; }
.pr-flow-tally-out { color: #ff9a7a; }
.pr-flow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .pr-flow-cols { grid-template-columns: 1fr; } }
.pr-flow-h {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #9fb0bf); margin-bottom: 6px;
}
.pr-flow-row {
  display: grid; grid-template-columns: 14px 1fr auto auto auto; gap: 7px; align-items: center;
  padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pr-flow-arrow.in { color: #6fd47f; } .pr-flow-arrow.out { color: #ff9a7a; }
.pr-flow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-flow-ally { color: var(--pr-gold-2, #ffcf5c); font-size: 11.5px; }
.pr-flow-wz { color: var(--text-dim, #9fb0bf); font-size: 11px; }
.pr-flow-pw { font-variant-numeric: tabular-nums; color: var(--text, #e8eef4); }

/* ── alliances (overview top-10) — the invite growth-tracker table ──
   Header row + gold tag chip + green share bar, ported from .pv-growth so
   the shipped table is the one the pitch showed. */
.pr-ally-head, .pr-ally-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 82px 140px;
  gap: 12px; align-items: center;
}
.pr-ally-head {
  font-family: var(--font-data, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pr-t3);
  padding: 0 2px 10px; border-bottom: 1px solid var(--pr-line);
}
.pr-ally-head .num { text-align: right; }
.pr-ally-row {
  padding: 11px 2px; border-bottom: 1px solid var(--pr-line);
  transition: background .15s ease;
}
.pr-ally-row:last-child { border-bottom: 0; }
.pr-ally-row:hover { background: var(--pr-stage-3); }
.pr-ally-id { display: flex; align-items: center; min-width: 0; }
.pr-ally-abbr {
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 12px;
  color: var(--pr-gold-2); border: 1px solid var(--pr-gold-line);
  background: rgba(240, 180, 69, .12); border-radius: 6px; padding: 2px 7px;
  margin-right: 9px; flex: none;
}
.pr-ally-name {
  font-weight: 600; font-size: 14px; color: var(--pr-t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-ally-mem, .pr-ally-pw {
  font-family: var(--font-data, monospace); font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--pr-t1);
}
.pr-share { width: 140px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pr-share span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #00c466, #00e87a); }
/* Narrow: drop the share bar and member count, keep name + power. */
@media (max-width: 620px) {
  .pr-ally-head, .pr-ally-row { grid-template-columns: minmax(0, 1fr) 82px; }
  .pr-ally-mem, .pr-ally-head .c-mem, .pr-ally-share, .pr-ally-head .c-share { display: none; }
}

/* ── alliances tab (expandable roster) ───────────────────────── */
/* ── alliances TAB — same table language, rows still expand ────
   Column template is shared with .pr-atab-head so the header lines up with
   the rows; keep the two in sync if you change either. */
.pr-alist { display: flex; flex-direction: column; }
.pr-atab-head {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 58px 76px 132px 16px;
  gap: 10px; align-items: center; padding: 0 13px 10px;
  font-family: var(--font-data, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pr-t3);
  border-bottom: 1px solid var(--pr-line);
}
.pr-atab-head .num { text-align: right; }
.pr-a-card { border: 0; border-bottom: 1px solid var(--pr-line); background: transparent; overflow: hidden; }
.pr-a-card:last-child { border-bottom: 0; }
.pr-a-card.open { background: var(--pr-stage-3); }
.pr-a-head {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--pr-t1);
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 58px 76px 132px 16px;
  gap: 10px; align-items: center; padding: 11px 13px;
  font: 600 13px/1.3 'Outfit', system-ui, sans-serif;
}
.pr-a-head:hover { background: rgba(255, 255, 255, .03); }
.pr-a-rk {
  font-family: var(--font-data, monospace); color: var(--pr-t3);
  font-variant-numeric: tabular-nums; text-align: center; font-size: 11px;
}
.pr-a-id { display: flex; align-items: center; gap: 0; min-width: 0; }
.pr-a-abbr {
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 12px;
  color: var(--pr-gold-2); border: 1px solid var(--pr-gold-line);
  background: rgba(240, 180, 69, .12); border-radius: 6px; padding: 2px 7px;
  margin-right: 9px; flex: none;
}
.pr-a-name {
  color: var(--pr-t1); font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-a-mem, .pr-a-pw {
  font-family: var(--font-data, monospace); font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--pr-t1);
}
.pr-a-share { display: flex; justify-content: flex-start; }
.pr-a-chev { color: var(--pr-t3); transition: transform .15s ease; text-align: center; }
.pr-a-card.open .pr-a-chev { transform: rotate(180deg); }
.pr-a-body { display: none; padding: 0 13px 11px; }
.pr-a-card.open .pr-a-body { display: block; }
@media (max-width: 760px) {
  .pr-atab-head, .pr-a-head { grid-template-columns: 26px minmax(0, 1fr) 76px 16px; }
  .pr-a-mem, .pr-a-share, .pr-atab-head .c-mem, .pr-atab-head .c-share { display: none; }
}

.pr-m-list { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 7px; }
/* Member rows are REAL columns: fixed widths so the four data columns
   line up down the list (auto-packed columns clustered into one ragged
   right edge), right-aligned numerics, a hairline separator per column,
   zebra striping for row tracking. */
.pr-m-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px 66px 68px 82px;
  gap: 0; align-items: stretch; font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pr-m-row:nth-child(even) { background: rgba(255, 255, 255, .025); }
.pr-m-row:last-child { border-bottom: 0; }
.pr-m-row > * { display: flex; align-items: center; padding: 6px 4px; min-width: 0; }
.pr-m-i { color: var(--text-dim, #9fb0bf); font-variant-numeric: tabular-nums; justify-content: center; font-size: 11px; }
.pr-m-nm { font-weight: 600; overflow: hidden; }
.pr-m-nm, .pr-m-head > :nth-child(2) { white-space: nowrap; text-overflow: ellipsis; display: block; padding: 6px 8px 6px 4px; line-height: 1.6; }
/* the four data columns: right-aligned, hairline-separated */
.pr-m-row > :nth-child(n+3) {
  justify-content: flex-end; text-align: right;
  border-left: 1px solid rgba(255, 255, 255, .05); padding: 6px 9px;
  font-variant-numeric: tabular-nums;
}
.pr-m-cc { font-size: 10.5px; color: var(--text-dim, #9fb0bf); letter-spacing: .04em; }
.pr-m-kl { font-size: 11.5px; color: var(--text-dim, #9fb0bf); }
.pr-m-pw { font-weight: 700; }
@media (max-width: 620px) {
  .pr-m-row { grid-template-columns: 22px minmax(0, 1fr) 70px 84px; }
  .pr-m-cc, .pr-m-kl { display: none; }
}

/* ── rivals tab ──────────────────────────────────────────────── */
.pr-tr-head, .pr-bd-head {
  display: grid; gap: 9px; align-items: center; padding: 0 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #9fb0bf); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pr-tr-head { grid-template-columns: minmax(0, 1fr) 34px 34px 44px 76px; }
.pr-tr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px 44px 76px; gap: 9px;
  align-items: center; padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pr-tr-wz { font-weight: 700; color: var(--pr-gold-2, #ffcf5c); text-decoration: none; }
.pr-tr-wz:hover { text-decoration: underline; }
.pr-tr-in { color: #6fd47f; font-variant-numeric: tabular-nums; }
.pr-tr-out { color: #ff9a7a; font-variant-numeric: tabular-nums; }
.pr-tr-net, .pr-tr-pw { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-dim, #9fb0bf); }
.pr-tr-net.up, .pr-tr-pw.up { color: #6fd47f; }
.pr-tr-net.down, .pr-tr-pw.down { color: #ff9a7a; }

.pr-bd-head { grid-template-columns: 30px minmax(0, 1fr) 44px 50px 72px 58px; }
.pr-bd-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px 50px 72px 58px; gap: 9px;
  align-items: center; padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pr-bd-row.me { background: rgba(224, 168, 0, .09); border-radius: 8px; padding-inline: 7px; margin-inline: -7px; }
.pr-bd-rk { color: var(--text-dim, #9fb0bf); font-variant-numeric: tabular-nums; text-align: center; }
.pr-bd-wz { font-weight: 700; color: var(--pr-gold-2, #ffcf5c); text-decoration: none; }
a.pr-bd-wz:hover { text-decoration: underline; }
.pr-bd-you {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #2a1e00; background: linear-gradient(135deg, #ffcf5c, #e0a800);
  border-radius: 999px; padding: 1px 6px; margin-left: 5px;
}
.pr-bd-lws, .pr-bd-pl { color: var(--text-dim, #9fb0bf); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.pr-bd-pw { font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-bd-gapv { text-align: right; font-size: 11.5px; }
.pr-bd-gap { text-align: center; color: var(--text-dim, #9fb0bf); font-size: 11px; letter-spacing: .2em; padding: 3px 0; }
@media (max-width: 620px) {
  .pr-bd-head, .pr-bd-row { grid-template-columns: 26px minmax(0, 1fr) 62px 54px; }
  .pr-bd-lws, .pr-bd-pl { display: none; }
}

/* ── stubs / pick / buttons ──────────────────────────────────── */
.pr-stub { text-align: center; padding: 34px 22px; }
.pr-stub-soon {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pr-gold, #e0a800);
  border: 1px dashed rgba(224, 168, 0, .5); border-radius: 999px; padding: 4px 12px;
}
.pr-pick { text-align: center; max-width: 440px; margin: 40px auto; }
.pr-crown { font-size: 40px; margin-bottom: 6px; }
.pr-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.pr-input {
  background: var(--glass-bg-2, rgba(255, 255, 255, .05)); color: var(--text, #e8eef4);
  border: 1px solid var(--border, rgba(255, 255, 255, .15)); border-radius: 10px;
  padding: 10px 12px; font-size: 15px; max-width: 180px;
}
.pr-btn {
  appearance: none; cursor: pointer; font: 700 14px/1 'Outfit', system-ui, sans-serif;
  padding: 11px 16px; border-radius: 10px; border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center;
}
.pr-btn.primary { background: linear-gradient(135deg, #ffcf5c, #e0a800); color: #2a1e00; }
.pr-btn.ghost { background: transparent; color: var(--text, #e8eef4); border-color: var(--border, rgba(255, 255, 255, .18)); }

/* ── transfer desk ───────────────────────────────────────────── */
.pr-dim { color: var(--text-dim, #9fb0bf); font-weight: 400; }
.pr-msg { font-size: 12.5px; margin-left: 10px; }
.pr-msg.ok { color: #8fe388; } .pr-msg.err { color: #ff8f8f; }
.pr-textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
/* .pr-label lives with the settings panel below — the old 12px/margin
   version was replaced there, not duplicated here. */

/* ── transfer capacity card (.pv-cap-card) ───────────────────── */
.pr-cap { border-color: var(--pr-line); }
.pr-cap-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 13px; }
.pr-cap-kv {
  font-family: var(--font-data, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pr-t3);
}
.pr-cap-kv b { color: var(--pr-t1); font-size: 12px; letter-spacing: 0; }
/* window-state chip — the president's own policy setting */
.pr-winchip {
  font-family: var(--font-data, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; border: 1px solid; flex: none;
}
.pr-win-open { color: var(--pr-ok); border-color: rgba(0, 232, 122, .4); background: rgba(0, 232, 122, .07); }
.pr-win-semi { color: var(--pr-warn); border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .07); }
.pr-win-limited { color: var(--pr-bad); border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .06); }
.pr-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.pr-m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pr-m-tier {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
}
/* round pips, matching the game's own rating dots (was square) */
.pr-m-tier i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.pr-m-count {
  font-family: var(--font-data, monospace); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pr-t1);
}
.pr-m-full { color: var(--pr-bad); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; margin-left: 4px; }
.pr-m-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pr-m-fill { display: block; height: 100%; border-radius: 999px; }
.pr-m-applied { margin-top: 5px; font-family: var(--font-data, monospace); font-size: 9.5px; color: var(--pr-t3); letter-spacing: .02em; }

/* ── Desk filter + summary bar ───────────────────────────────── */
.pr-deskfilter { margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.pr-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-fchip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--font-data, monospace); font-size: 11.5px; font-weight: 600;
  color: var(--pr-t2); padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--pr-line, rgba(255,255,255,.12)); background: var(--pr-stage-3, rgba(255,255,255,.03));
}
.pr-fchip:hover { color: var(--pr-t1); border-color: var(--pr-line-2, rgba(255,255,255,.22)); }
.pr-fchip b { font-weight: 800; color: var(--pr-t1); font-variant-numeric: tabular-nums; }
.pr-fchip.active { color: #0d1117; background: var(--pr-gold-2, #ffcf5c); border-color: var(--pr-gold-2, #ffcf5c); }
.pr-fchip.active b, .pr-fchip.active .pr-fchip-q { color: #0d1117; }
.pr-fchip .pr-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.pr-fchip-q { color: var(--pr-t3); font-weight: 600; }
.pr-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-fsel {
  font-family: var(--font-data, monospace); font-size: 11.5px; color: var(--pr-t1);
  background: var(--pr-stage-3, rgba(255,255,255,.03)); border: 1px solid var(--pr-line, rgba(255,255,255,.12));
  border-radius: 8px; padding: 5px 8px; cursor: pointer;
}
.pr-fclear, .pr-flink {
  font-family: var(--font-data, monospace); font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--pr-t2); background: none; border: 0; text-decoration: underline; padding: 4px 2px;
}
.pr-fclear:hover, .pr-flink:hover { color: var(--pr-t1); }
.pr-fmatch { color: var(--pr-gold-2, #ffcf5c); font-weight: 700; }
.pr-cap-note {
  margin: 13px 0 0; font-family: var(--font-data, monospace); font-size: 10px;
  color: var(--pr-t3); line-height: 1.7;
}
.pr-cap-note b { color: var(--pr-t2); }

/* ── MOVERS & SHAKERS ─────────────────────────────────────────── */
.pr-movers-day { font-size: 12px; font-weight: 500; color: var(--text-dim, #9fb0bf); margin-left: 6px; }
.pr-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.pr-mv-col { min-width: 0; }
.pr-mv-h {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim, #9fb0bf); padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .12));
}
.pr-mv {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 8px;
  align-items: baseline; padding: 6px 0; font-size: 13px;
}
.pr-mv-arrow { font-size: 10px; line-height: 1.6; }
.pr-mv-arrow.up { color: #6ee7a8; }
.pr-mv-arrow.down { color: #f0908f; }
.pr-mv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mv-name.pm-clickable { cursor: pointer; }
.pr-mv-name.pm-clickable:hover { text-decoration: underline; }
.pr-mv-delta { font-family: var(--font-data, monospace); font-size: 12.5px; font-weight: 700; text-align: right; }
.pr-mv-delta.up { color: #6ee7a8; }
.pr-mv-delta.down { color: #f0908f; }
/* THP + alliance sit on a second line under the name, out of the way. */
.pr-mv-thp, .pr-mv-ally {
  grid-column: 2 / 3; font-size: 11px; color: var(--text-dim, #9fb0bf);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-mv-ally { grid-column: 3 / 4; text-align: right; }
.pr-mv-empty { font-size: 12px; padding: 8px 0; }
@media (max-width: 620px) { .pr-mv-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ── CLOCKS ───────────────────────────────────────────────────── */
.pr-ck { display: grid; gap: 2px; }
.pr-ck-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.pr-ck-row:last-child { border-bottom: none; }
.pr-ck-k { font-size: 11.5px; color: var(--text-dim, #9fb0bf); }
.pr-ck-v { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ck-cd {
  font-family: var(--font-data, monospace); font-size: 12.5px;
  color: var(--accent, #e0a800); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pr-ck-soft { color: var(--text-dim, #9fb0bf); font-size: 11px; }
@media (max-width: 620px) {
  .pr-ck-row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; }
  .pr-ck-k { font-size: 11px; }
}

/* Transfer Surge card — the GAME's entry tier, not the president's policy.
   Blue-edged so it reads as observed fact next to the gold policy cards. */
.pr-surge { border-color: rgba(96, 165, 250, .3); }
.pr-surge-open    { color: #6ee7a8; }
.pr-surge-semi    { color: #f0c674; }
.pr-surge-limited { color: #f0908f; }
.pr-cap-dim { opacity: .72; margin-top: 6px; }
/* (.pr-quota-row / .pr-qf / .pr-qf input replaced by .pr-quota-grid and the
   labelled .pr-qf field in the recruiting-settings block below.) */

.pr-linkrow { display: flex; gap: 8px; }
.pr-linkinput { flex: 1; max-width: none; font-size: 13px; }

.pr-desk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pr-desk-head h2 { margin: 0; }
.pr-desk-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pr-desk-counts { font-size: 12px; color: var(--text-dim, #9fb0bf); display: flex; gap: 10px; }
.pr-desk-counts .ok { color: #6fd47f; } .pr-desk-counts .no { color: #ff9a7a; }

/* Export column picker (popover under the ⤓ Export CSV button). */
.pr-export-wrap { position: relative; display: inline-flex; }
.pr-export-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: min(320px, 86vw); padding: 12px 14px; border-radius: 12px;
  background: var(--pr-stage-1, #151b26); border: 1px solid var(--pr-line, rgba(255, 255, 255, .14));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5); text-align: left;
}
.pr-export-pop.hidden { display: none; }
.pr-export-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--pr-t1, #eaecf0); margin-bottom: 9px;
}
.pr-export-quick { display: flex; gap: 4px; }
.pr-export-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
  max-height: 42vh; overflow: auto; margin-bottom: 11px;
}
.pr-export-col {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--pr-t1, #eaecf0); padding: 2px 0;
}
.pr-export-col input { accent-color: var(--pr-gold-2, #ffcf5c); }
.pr-export-col input:disabled + span { opacity: .65; }
.pr-export-go { width: 100%; justify-content: center; font-size: 13px; padding: 8px 10px; }

.pr-appgroup {
  border: 1px solid var(--border, rgba(255, 255, 255, .1)); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
}
.pr-appgroup .pr-app { border: 0; border-radius: 0; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pr-appgroup .pr-app:last-child { border-bottom: 0; }
.pr-app-nested { background: rgba(255, 255, 255, .015); padding-left: 26px; }
.pr-appgroup.pr-aon { border-color: rgba(255, 170, 60, .5); }
.pr-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 8px 13px; background: rgba(224, 168, 0, .07); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pr-group-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pr-gold-2, #ffcf5c); }
.pr-group-acts { display: flex; gap: 6px; }
.pr-app-vouch { font-size: 10.5px; color: var(--pr-gold-2, #ffcf5c); border: 1px solid rgba(224, 168, 0, .4); border-radius: 999px; padding: 1px 7px; }
/* ── applicant row (.pv-applicant) ────────────────────────────
   One horizontal band per applicant: avatar · identity · stats · rating ·
   actions. The old layout stacked these, which made a desk of ten reads
   like a wall of text — the president is scanning for a rating and a
   number, so both get their own column. */
.pr-app {
  display: grid; align-items: center; gap: 8px 14px;
  /* Stats and rating are FIXED widths, not auto. Each applicant is its own
     grid, so auto columns size to that row's content and the numbers zig-zag
     down the list — a rating-less row shifted the stats 46px. Fixed widths
     make the desk scan as one column of hero power and one of ratings. */
  grid-template-columns: 40px minmax(150px, 1fr) 152px 86px auto;
  grid-template-areas:
    "av   id   stats score actions"
    ".    note note  note  note";
  border: 1px solid var(--pr-line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--pr-stage-3);
}
/* identity column: name + badges on one line, meta beneath (mock's .pv-a-id) */
.pr-app-id { grid-area: id; min-width: 0; }
.pr-app:last-of-type { margin-bottom: 0; }
.pr-app-accepted { border-color: rgba(0, 232, 122, .4); }
.pr-app-rejected { opacity: .62; }

.pr-app-av {
  grid-area: av; width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 13px;
  color: var(--pr-gold-2); position: relative;
  background: linear-gradient(160deg, #1a2230, #0d1117);
  border: 1px solid var(--pr-gold-line);
}
.pr-app-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pr-app-main { min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pr-app-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.pr-app-trust {
  font-family: var(--font-data, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid; flex: none;
}
.pr-trust-ok  { color: var(--pr-ok);   border-color: rgba(0, 232, 122, .35);  background: rgba(0, 232, 122, .07); }
.pr-trust-mid { color: var(--pr-blue); border-color: rgba(96, 165, 250, .35); background: rgba(96, 165, 250, .07); }
.pr-trust-low { color: var(--pr-t3);   border-color: var(--pr-line-2);        background: transparent; }

/* commander rating chip — its own column, like the mock's .pv-score */
.pr-app-colour {
  grid-area: score; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-data, monospace); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.pr-sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* stat pair — hero power + growth, the two numbers a decision turns on */
.pr-app-stats { grid-area: stats; display: flex; gap: 18px; flex: none; }
.pr-app-stat b { display: block; font-family: var(--font-data, monospace); font-size: 14px; font-weight: 700; }
.pr-app-stat span {
  display: block; font-family: var(--font-data, monospace); font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pr-t3); margin-top: 1px;
}

.pr-app-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-data, monospace); font-size: 10.5px; color: var(--pr-t3); margin-top: 3px;
}
.pr-app-lane { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; opacity: .8; }

/* Below ~880px five columns stop fitting: identity keeps the top row beside
   the avatar and rating, then stats and actions each take a full row rather
   than squeezing to unreadable. */
@media (max-width: 880px) {
  .pr-app {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "av    id    score"
      "stats stats stats"
      "note  note  note"
      "actions actions actions";
  }
  .pr-app-stats { gap: 22px; }
  .pr-app-actions { margin-left: 0; }
}
/* auto-match evidence chips (board corroboration / collisions / duplicates) */
.pr-match {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.pr-match.ok { color: #9fe6ac; background: rgba(111, 212, 127, .1); border-color: rgba(111, 212, 127, .3); }
.pr-match.warn { color: #ffc48a; background: rgba(255, 170, 60, .1); border-color: rgba(255, 170, 60, .35); }
.pr-match.dim { color: var(--text-dim, #9fb0bf); border-color: var(--border, rgba(255, 255, 255, .14)); border-style: dashed; }

.pr-growth { font-weight: 700; }

/* ── Squad meta (Overview card + applicant chip) ─────────────── */
.pr-sub-inline { font-size: 12px; font-weight: 500; color: var(--text-dim, #9fb0bf); }
.pr-squad-sub { font-size: 11.5px; margin-bottom: 8px; }
.pr-squad-bars { display: flex; flex-direction: column; gap: 8px; }
.pr-squad-row { display: grid; grid-template-columns: 84px 1fr 60px; align-items: center; gap: 10px; }
.pr-squad-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.pr-squad-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.pr-squad-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pr-squad-fill { height: 100%; border-radius: 999px; }
.pr-squad-val { font-size: 12px; font-weight: 700; text-align: right; }
.pr-squad-hint { font-size: 12.5px; color: var(--text-2, #c4d2dd); line-height: 1.45; margin: 12px 0 0; }
.pr-squad-note { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
.pr-app-squad {
  font-size: 11px; padding: 1px 7px 1px 6px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
}
.pr-app-squad[data-squad="air"]     { color: #60a5fa; }
.pr-app-squad[data-squad="tank"]    { color: #f59e0b; }
.pr-app-squad[data-squad="missile"] { color: #f87171; }
.pr-growth-up { color: #6fd47f; }
.pr-growth-down { color: #ff9a7a; }
.pr-growth-flat { color: var(--text-dim, #9fb0bf); }
.pr-app-note {
  grid-area: note; font-size: 12.5px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .03); line-height: 1.45; color: var(--pr-t2);
}
.pr-app-actions { grid-area: actions; display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; }
.pr-app-status {
  font-family: var(--font-data, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 8px; flex: none;
  /* Fixed width so "WAITING" and "ACCEPTED" don't size the actions column
     differently — that fed back through the 1fr identity column and knocked
     the stats/rating columns 7px out of line between rows. */
  min-width: 92px; box-sizing: border-box; text-align: center;
}
.pr-st-waiting { color: var(--pr-t2); background: rgba(255, 255, 255, .06); }
.pr-st-accepted { color: #04160c; background: linear-gradient(120deg, #4ef0a4, #00e87a); }
.pr-st-rejected { color: #fff; background: rgba(248, 113, 113, .45); }
/* Action buttons carry the outcome's colour, so the destructive one is never
   a same-looking neighbour of Accept (.pv-abtn-*). */
.pr-mini {
  appearance: none; cursor: pointer;
  font-family: var(--font-data, monospace); font-size: 10.5px; font-weight: 700;
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--pr-line-2);
  background: transparent; color: var(--pr-t1);
  transition: border-color .15s ease, background .15s ease;
}
.pr-mini[data-act="accepted"] { color: var(--pr-ok); border-color: rgba(0, 232, 122, .4); }
.pr-mini[data-act="waiting"]  { color: var(--pr-warn); border-color: rgba(245, 158, 11, .4); }
.pr-mini.danger, .pr-mini[data-act="rejected"] { color: var(--pr-bad); border-color: rgba(248, 113, 113, .35); }
.pr-mini[data-act="accepted"]:hover { background: rgba(0, 232, 122, .1); }
.pr-mini[data-act="waiting"]:hover  { background: rgba(245, 158, 11, .1); }
.pr-mini[data-act="rejected"]:hover { background: rgba(248, 113, 113, .1); }
.pr-mini:hover { border-color: var(--pr-gold-line); }
.pr-mini:disabled { opacity: .5; cursor: default; }

/* ── recruiting settings ──────────────────────────────────────────
   This panel was left in the pre-polish language and broke on narrow
   screens: the quota inputs wrapped raggedly, and .pr-input's 180px
   max-width truncated both selects ("Applicants only — Pro p…") and
   clipped the textareas. Fields are full-width here; only the quota
   numbers stay small, in a grid that reflows instead of wrapping. */
.pr-settings { padding: 0; }
.pr-set-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
}
.pr-set-summary::-webkit-details-marker { display: none; }
.pr-set-title { font-size: 15.5px; font-weight: 700; color: var(--pr-t1); letter-spacing: -.01em; }
.pr-set-chev { color: var(--pr-t3); transition: transform .15s ease; }
.pr-settings[open] .pr-set-chev { transform: rotate(180deg); }
.pr-settings[open] .pr-set-summary { border-bottom: 1px solid var(--pr-line); }
.pr-set-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; }

.pr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-label {
  display: block; margin: 0;
  font-family: var(--font-data, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pr-t2);
}
.pr-label .pr-dim { letter-spacing: .04em; text-transform: none; font-size: 10px; }
/* Field help that used to be crammed into <option> text, where a native
   select truncates it. */
.pr-hint { font-size: 11.5px; line-height: 1.5; color: var(--pr-t2); }

/* Quota row: 5 fields on one line where they fit. Narrow, auto-fit alone
   gave 2+2+1 — a lone Gold field orphaned on its own row. Points isn't a
   tier anyway, so below 560px it takes the full width and the four tiers
   sit as a tidy 2×2 under it. */
.pr-quota-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px; margin: 0;
}
@media (max-width: 560px) {
  .pr-quota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-quota-grid > .pr-qf:first-child { grid-column: 1 / -1; }
}
.pr-qf { display: flex; flex-direction: column; gap: 5px; min-width: 0; cursor: pointer; }
.pr-qf-lbl {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-data, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pr-t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-qf-lbl i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pr-qf-in {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-data, monospace); font-size: 13px;
  padding: 9px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .04); color: var(--pr-t1);
  border: 1px solid var(--pr-line-2);
}
.pr-qf-in:focus { outline: none; border-color: var(--pr-gold-line); }

/* Fields inside the settings panel go full width — the shared .pr-input
   cap is for the compact warzone picker, not for these. */
.pr-set-body .pr-input { max-width: none; width: 100%; box-sizing: border-box; }
.pr-set-body select.pr-input,
.pr-set-body textarea.pr-input {
  font-size: 13.5px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); color: var(--pr-t1);
  border: 1px solid var(--pr-line-2);
}
.pr-set-body textarea.pr-input { line-height: 1.5; min-height: 92px; resize: vertical; }
.pr-set-body .pr-input:focus { outline: none; border-color: var(--pr-gold-line); }

.pr-toggle {
  display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  margin: 0; line-height: 1.45; color: var(--pr-t2); cursor: pointer;
}
.pr-toggle input { margin-top: 2px; flex: none; accent-color: var(--pr-gold); }
.pr-toggle b { color: var(--pr-t1); }

/* Save sits in the flow with its status message beside it, wrapping to its
   own line rather than colliding on a phone. */
.pr-set-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.pr-set-actions .pr-msg { margin-left: 0; }
@media (max-width: 480px) {
  .pr-set-actions .pr-btn { width: 100%; justify-content: center; }
}

/* ── messages (Slice 4) ──────────────────────────────────────── */
.pr-threads { display: flex; flex-direction: column; gap: 8px; }
.pr-thread {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  background: var(--glass-bg-2, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .1));
  border-radius: 12px; padding: 11px 13px; color: var(--text, #e8eef4);
}
.pr-thread:hover { border-color: rgba(224, 168, 0, .4); }
.pr-thread.blocked { opacity: .55; }
.pr-thread-top { display: flex; align-items: center; justify-content: space-between; }
.pr-thread-name { font-weight: 700; font-size: 14px; }
.pr-thread-unread { background: #e0a800; color: #2a1e00; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.pr-thread-snip { display: block; font-size: 12.5px; color: var(--text-dim, #9fb0bf); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pr-convo.hidden { display: none; }
.pr-convo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pr-convo-name { font-weight: 700; font-size: 15px; }
.pr-bubbles { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.pr-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.pr-bubble-body { white-space: pre-wrap; word-break: break-word; }
.pr-bubble-time { font-size: 10.5px; opacity: .6; margin-top: 3px; }
.pr-bubble.me { align-self: flex-end; background: linear-gradient(135deg, #ffcf5c, #e0a800); color: #2a1e00; }
.pr-bubble.them { align-self: flex-start; background: var(--glass-bg-3, rgba(255, 255, 255, .06)); color: var(--text, #e8eef4); }
.pr-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.pr-reply .pr-textarea { flex: 1; }

/* ── clickable player names → shared player modal ──────────────
   Applicant names on the Transfer Desk and the population-flow names on
   Overview. Name only: the applicant row also carries Accept/Waiting/Reject. */
.pr-app-name.pm-clickable,
.pr-flow-name.pm-clickable { cursor: pointer; }
.pr-app-name.pm-clickable:hover,
.pr-flow-name.pm-clickable:hover { color: var(--pr-gold, #f6d873); text-decoration: underline; }
.pr-app-name.pm-clickable:focus-visible,
.pr-flow-name.pm-clickable:focus-visible { outline: 2px solid var(--pr-gold, #f6d873); outline-offset: 2px; border-radius: 4px; }

/* ── 🪑 Seat board (president-seats.js) ─────────────────────────
   Meters reuse .pr-m-tier/.pr-m-bar/.pr-m-fill from the desk. */
.pr-seat-meters { display: flex; flex-direction: column; gap: 8px; }
.pr-seat-meter { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; }
.pr-seat-left { font: 500 12px/1 var(--font-data); color: var(--text-3); white-space: nowrap; }
.pr-seat-left b { color: var(--accent); }
.pr-seat-left b.full { color: #f59e0b; }
.pr-seat-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pr-seat-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-align: left;
  padding: 9px 12px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2);
  cursor: pointer; color: var(--text-1); }
.pr-seat-hit:hover:not(:disabled) { border-color: var(--accent-border); }
.pr-seat-hit:disabled { opacity: .5; cursor: default; }
.pr-seat-hit-n { font: 600 13px/1.2 var(--font-ui); }
.pr-seat-hit-m { font: 500 12px/1.2 var(--font-data); color: var(--text-3); }
.pr-seat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--border-1); border-radius: 10px;
  background: var(--bg-2); margin-bottom: 6px; }
.pr-seat-row.accepted { border-color: var(--accent-border); background: var(--accent-glow); }
.pr-seat-who { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 150px; }
.pr-seat-who b { font: 600 13px/1.2 var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; }
.pr-seat-rm { border: 0; background: none; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 2px 6px; }
.pr-seat-rm:hover { color: #e0455a; }
.pr-seat-dist { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-1); font: 500 13px/1.4 var(--font-ui); }
.pr-seat-dist:last-child { border-bottom: 0; }
.pr-seat-dist b { color: var(--text-1); min-width: 90px; }
.pr-seat-dist span { color: var(--text-3); font-family: var(--font-data); font-size: 12px; }
.pr-seat-dist-cols i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 3px 0 8px; vertical-align: baseline; }

/* ── Seat board v2: avatars, toolbar, bulk (president-seats.js) ── */
.pr-seat-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--border-1);
  font: 700 12px/1 var(--font-data); color: var(--text-3); }
.pr-seat-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-seat-addrow { display: flex; gap: 8px; flex-wrap: wrap; }
/* .pr-inp — the seat board's control class. Was referenced without a
   definition (selects rendered as raw browser defaults); now the
   canonical LWS control, matching .hm-input on /home. */
.pr-inp {
  background-color: var(--bg-2); border: 1px solid var(--border-1);
  color: var(--text-1); border-radius: 10px; padding: 9px 12px;
  font: 500 14px/1.3 var(--font-ui);
}
.pr-inp:focus { outline: none; border-color: var(--accent-border, var(--accent)); }
.pr-inp.wide { width: 100%; }
.pr-seat-addrow .pr-inp { flex: 1 1 220px; }
.pr-inp.sm { padding: 6px 28px 6px 8px; font-size: 12px; max-width: 130px; background-position: right 8px center; }
.pr-seat-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.pr-seat-toolbar .pr-inp { max-width: 170px; }
.pr-seat-pills { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border-1); border-radius: 999px; }
.pr-seat-pills button { border: 0; background: none; cursor: pointer; padding: 5px 10px; border-radius: 999px;
  font: 600 12px/1 var(--font-ui); color: var(--text-3); display: inline-flex; align-items: center; }
.pr-seat-pills button.on { background: var(--bg-3); color: var(--text-1); }
.pr-seat-pills .pr-sw { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.pr-seat-bulk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.pr-seat-bulk .pr-inp { max-width: 190px; }
@media (max-width: 560px) {
  .pr-seat-toolbar .pr-inp, .pr-seat-bulk .pr-inp { max-width: none; flex: 1 1 140px; }
}

/* Member-list header (Alliances tab) — shares .pr-m-row's grid so the
   620px collapse hides the same columns in header and rows together. */
.pr-m-head { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #9fb0bf); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pr-m-head:nth-child(even) { background: none; }
.pr-m-dl { font-size: 11.5px; }
.pr-m-nod { color: var(--text-dim, #9fb0bf); font-style: normal; font-size: 11px; }

/* Freshness caveat on the president strip — the crown comes from the
   committed snapshot (roster isPresident), not a live read. */
.pr-prez-note { flex-basis: 100%; font-size: 11px; line-height: 1.45; color: var(--text-dim, #9fb0bf); margin-top: 6px; }