/* ==========================================================================
   Valorant scouting tool
   --------------------------------------------------------------------------
   Design note: the signature element is the denominator chip. Every rate in
   this interface carries the sample it came from, and thin samples render
   visibly provisional - dimmed, dotted, amber - so a 2-game number can never
   be read as a fact. That rule drives the whole colour system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --paper:    #E7EAEE;
  --panel:    #FFFFFF;
  --panel-2:  #F3F5F8;
  --panel-3:  #E9ECF1;

  --ink:      #141920;
  --ink-2:    #4B5563;
  --ink-3:    #7D8794;
  --rule:     #D0D6DE;
  --rule-2:   #E2E6EC;

  --rail:        #002B6E;   /* side panel - deep navy from the accent family */
  --rail-deep:   #001E4F;   /* brand block and wells */
  --rail-ink:    #E4EBF8;   /* primary text - 11.2:1 on the panel */
  --rail-ink-2:  #93A9CE;   /* secondary text - 5.6:1, still passes at small sizes */
  --rail-hover:  #0A3C8C;   /* hover fill */
  --rail-line:   #113F86;   /* dividers */

  --gold:        #FDB032;   /* used sparingly: the current item, and the brand mark */
  --gold-ink:    #002B6E;   /* text on gold - 7.3:1 */

  --accent:      #003599;
  --accent-ink:  #002A7A;   /* hover / pressed */
  --accent-soft: #E6EBF7;   /* tinted fill */
  --accent-line: #C3CEE8;   /* tinted border */

  --attack:   #B23A3A;
  --defense:  #0E6E7C;
  --good:     #2C7A57;
  --thin:     #9C6300;
  --thin-bg:  #FBF1DC;

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r: 3px;
  --shadow: 0 1px 2px rgba(20,25,32,.06), 0 4px 14px rgba(20,25,32,.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- shell ------------------------------------------------------------ */
.app {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  background: var(--rail);
  color: var(--rail-ink);
  padding: 18px 0 40px;
  border-right: 1px solid var(--rail-deep);
}
.rail-brand {
  padding: 0 18px 16px;
  border-bottom: 1px solid var(--rail-line);
  margin-bottom: 14px;
}
.rail-brand b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: .06em; color: #fff; text-transform: uppercase;
}
.rail-brand span { font-size: 11.5px; color: var(--rail-ink-2); letter-spacing: .03em; }

.rail-nav { padding: 0 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.rail-nav button {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; color: var(--rail-ink); cursor: pointer;
  padding: 8px 9px; border-radius: var(--r); text-align: left; width: 100%;
  font-size: 13.5px;
}
.rail-nav button:hover { background: var(--rail-hover); color: #fff; }
.rail-nav button[aria-current="true"] {
  background: var(--gold); color: var(--gold-ink); font-weight: 600;
}
.rail-nav button[aria-current="true"] .dot { opacity: .85; }
.rail-nav .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }

.rail-section {
  padding: 12px 18px 6px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rail-ink-2); font-weight: 600;
}

.tree { padding: 0 10px; }
.tree-team > summary {
  list-style: none; cursor: pointer; padding: 7px 9px; border-radius: var(--r);
  font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--rail-ink);
}
.tree-team > summary::-webkit-details-marker { display: none; }
.tree-team > summary:hover { background: var(--rail-hover); color: #fff; }
.tree-team[open] > summary { color: var(--rail-ink); }
.tree-tour { margin: 2px 0 6px 10px; border-left: 1px solid var(--rail-line); padding-left: 8px; }
.tree-tour > summary {
  list-style: none; cursor: pointer; padding: 5px 7px; font-size: 12.5px; color: var(--rail-ink-2);
  border-radius: var(--r);
}
.tree-tour > summary::-webkit-details-marker { display: none; }
.tree-tour > summary:hover { background: var(--rail-hover); color: #fff; }
.tree-opp {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--rail-ink); cursor: pointer; padding: 5px 7px 5px 16px; font-size: 12.5px;
  border-radius: var(--r);
}
.tree-opp:hover { background: var(--rail-hover); color: #fff; }
.tree-opp[aria-current="true"] {
  background: var(--rail-deep); color: #fff; font-weight: 500;
  box-shadow: inset 2px 0 0 var(--gold);
}
.tree-add {
  background: none; border: 1px dashed var(--rail-line); color: var(--rail-ink-2); cursor: pointer;
  font-size: 11.5px; padding: 4px 8px; border-radius: var(--r); margin: 3px 0 0 16px;
}
.tree-add:hover { border-color: var(--gold); color: var(--gold); }

/* ---- main ------------------------------------------------------------- */
.main { padding: 26px 30px 80px; min-width: 0; }
.view { display: none; }
.view.active { display: block; }

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; max-width: 74ch; }

.eyebrow {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 5px;
}

.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0;
}
.card > h2 {
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.card > h2 small { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-3); }

/* ---- controls --------------------------------------------------------- */
.btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 8px 15px; border-radius: var(--r); cursor: pointer; font-size: 13.5px;
  font-weight: 500;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { background: transparent; color: var(--attack); border-color: #E4C4C4; }

input[type=text], input[type=number], input[type=url], textarea, select {
  width: 100%; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 8px 10px; font-size: 14px;
}
input:focus, textarea:focus, select:focus, button:focus-visible, .tree-opp:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
textarea { resize: vertical; min-height: 120px; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
label.field { display: block; margin-bottom: 14px; }
label.field > span {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px;
}
label.field > em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ---- the denominator chip: the signature element ---------------------- */
.rate { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rate b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: inherit;
}
.den {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--ink-3); background: var(--panel-3); border-radius: 2px;
  padding: 1px 5px; letter-spacing: -.01em;
}
.rate.solid .den { color: var(--good); background: #E6F2EC; }
.rate.thin b {
  font-weight: 400; color: var(--thin);
  text-decoration: underline dotted var(--thin); text-underline-offset: 3px;
}
.rate.thin .den { color: var(--thin); background: var(--thin-bg); }
.rate.none b { color: var(--ink-3); font-weight: 400; }

.flag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
  background: var(--thin-bg); color: var(--thin); border: 1px solid #EBD9B4;
}
.flag.ok { background: #E6F2EC; color: var(--good); border-color: #C4E1D3; }

.pill {
  display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-3); color: var(--ink-2); margin: 0 4px 4px 0;
}
.pill.atk { background: #F6E7E7; color: var(--attack); }
.pill.def { background: #E0EFF1; color: var(--defense); }

/* ---- tables ----------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; }
th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 0 12px 8px 0; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; padding-right: 18px; }
tbody tr:hover { background: var(--panel-2); }

/* ---- map boxes -------------------------------------------------------- */
.mapgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
}
.mapbox {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); min-width: 0; overflow: hidden;
}
.mapbox-head {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--rule-2);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.mapbox-head h3 { font-size: 17px; font-weight: 700; }
.mapbox-head .played { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mapbox-wl { text-align: right; }
.mapbox-wl .big {
  font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mapbox-body { padding: 13px 16px 15px; }
.mapbox-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; margin-bottom: 12px;
}
.mini { min-width: 0; }
.mini .lbl {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 3px;
}
.comp {
  background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 9px 11px; margin-bottom: 10px;
}
.comp .agents {
  font-family: var(--display); font-weight: 600; font-size: 13.5px;
  line-height: 1.45; word-break: break-word;
}
.comp .shape { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mapbox details { border-top: 1px solid var(--rule-2); margin-top: 4px; }
.mapbox details > summary {
  cursor: pointer; padding: 9px 0 0; font-size: 12.5px; color: var(--accent);
  font-weight: 500; list-style: none;
}
.mapbox details > summary::-webkit-details-marker { display: none; }
.mapbox details > summary::before { content: '+ '; }
.mapbox details[open] > summary::before { content: '– '; }
.mapbox details .inner { padding: 10px 0 4px; font-size: 12.5px; }
.mapbox details .inner h4 {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 12px 0 5px;
}
.mapbox details .inner h4:first-child { margin-top: 0; }
.poslist { margin: 0; padding: 0; list-style: none; }
.poslist li { padding: 5px 0; border-bottom: 1px solid var(--rule-2); }
.poslist li:last-child { border-bottom: 0; }
.poslist .who { font-weight: 600; }

/* ---- player cards ----------------------------------------------------- */
.playergrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.pcard {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 15px 16px 14px; min-width: 0;
}
.pcard-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pcard-head h3 { font-size: 16px; font-weight: 700; word-break: break-word; }
.pcard-head .role { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.rankblock { text-align: right; white-space: nowrap; }
.rankblock .cur { font-family: var(--display); font-weight: 600; font-size: 14px; }
.rankblock .peak { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.statrow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 13px 0 11px; padding: 11px 0; border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.stat { min-width: 0; }
.stat .lbl {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.stat .val { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .val.thin { color: var(--thin); font-weight: 400; text-decoration: underline dotted; text-underline-offset: 3px; }
.stat .sub { font-size: 10px; color: var(--ink-3); font-family: var(--mono); }

/* ---- banners ---------------------------------------------------------- */
.banner {
  border-radius: var(--r); padding: 12px 15px; margin-bottom: 16px; font-size: 13.5px;
  border: 1px solid; display: flex; gap: 11px; align-items: flex-start;
}
.banner.warn { background: var(--thin-bg); border-color: #EBD9B4; color: #6E4700; }
.banner.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.banner.bad  { background: #F8EAEA; border-color: #E8C6C6; color: #7A2222; }
.banner b { font-weight: 600; }
.banner .x { margin-left: auto; }

/* ---- report header ---------------------------------------------------- */
.rephead {
  background: var(--ink); color: #fff; border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 16px;
}
.rephead .eyebrow { color: #8A94A0; }
.rephead h1 { font-size: 30px; font-weight: 700; color: #fff; word-break: break-word; }
.rephead .meta { color: #A9B2BD; font-size: 12.5px; margin-top: 7px; }
.rephead .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.rephead .btn.ghost { color: #fff; border-color: #3B434E; }
.rephead .btn.ghost:hover { background: #262E38; }
.sharebox {
  display: flex; gap: 6px; align-items: center; margin-top: 12px;
  background: #1D242D; border: 1px solid #2F3742; border-radius: var(--r); padding: 6px 6px 6px 11px;
}
.sharebox code {
  font-family: var(--mono); font-size: 11.5px; color: #B9C2CC; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}

/* ---- draft assistant -------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.tabs button {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs button .n { font-family: var(--mono); font-size: 11px; opacity: .65; margin-left: 5px; }
.draftbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px; margin-bottom: 16px;
}
.draftbar .cell {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 11px 13px;
}
.draftbar .cell .lbl {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.draftbar .cell .v { font-family: var(--mono); font-size: 19px; font-weight: 600; margin-top: 3px; }

.bar { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar.def i { background: var(--defense); }
.bar.atk i { background: var(--attack); }

/* ---- misc ------------------------------------------------------------- */
.empty {
  text-align: center; padding: 46px 20px; color: var(--ink-3);
  border: 1px dashed var(--rule); border-radius: var(--r); background: var(--panel);
}
.empty h3 { font-size: 16px; color: var(--ink-2); margin-bottom: 6px; }
.progress { height: 5px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.steps { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 11px; line-height: 1.75; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--r);
  font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.22); z-index: 90;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { border-right: 0; border-bottom: 1px solid var(--rail-line); padding-bottom: 16px; }
  .main { padding: 20px 16px 70px; }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablewrap { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 420px) {
  .page-head h1 { font-size: 22px; }
  .rephead h1 { font-size: 23px; }
  .card { padding: 14px; }
  .mapbox-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .rail, .rephead .actions, .sharebox, .tabs { display: none !important; }
  body { background: #fff; }
  .card, .mapbox, .pcard { box-shadow: none; break-inside: avoid; }
  .app { grid-template-columns: minmax(0, 1fr); }
}

/* ---- map pool table ---------------------------------------------------- */
.maptable { min-width: 1010px; }
.maptable thead tr:first-child th { border-bottom: 0; padding-bottom: 4px; }
.maptable th[colspan] {
  text-align: center; border-bottom: 1px solid var(--rule-2);
  padding-bottom: 4px; margin-bottom: 2px;
}
.maptable th.atkcol[colspan] { color: var(--attack); }
.maptable th.defcol[colspan] { color: var(--defense); }
.maptable td.atkcol { background: #FCF7F7; }
.maptable td.defcol { background: #F4FAFB; }
.maptable tbody tr:hover td.atkcol { background: #F8EFEF; }
.maptable tbody tr:hover td.defcol { background: #EAF4F6; }
.maptable tr.unplayed td { color: var(--ink-3); }
.maptable tr.unplayed td b { font-weight: 500; }
.num.provisional {
  color: var(--thin); font-weight: 400;
  text-decoration: underline dotted var(--thin); text-underline-offset: 3px;
}

/* ---- pistols per map --------------------------------------------------- */
.pistolgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}
.pistolside {
  background: var(--panel-2); border: 1px solid var(--rule-2);
  border-radius: var(--r); padding: 9px 11px; min-width: 0;
}
.pistolside .lbl {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}
.pistolside .lbl.atk { color: var(--attack); }
.pistolside .lbl.def { color: var(--defense); }
.eyebrow.atk { color: var(--attack); }
.eyebrow.def { color: var(--defense); }

/* ---- site commitment --------------------------------------------------- */
.commitrow {
  padding: 9px 0; border-bottom: 1px solid var(--rule-2);
}
.commitrow:first-child { padding-top: 0; }
.commitrow:last-of-type { border-bottom: 0; }
.commitrow-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.commitrow-head b { font-family: var(--display); font-size: 15px; }
.commitrow-head .pill { margin: 0; }
.commitstats {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12.5px;
}
.commitstats .k {
  display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.commitstats > span { min-width: 0; }

/* ---- first blood / first death ---------------------------------------- */
.fb { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.fb b { font-size: 14px; font-weight: 600; }
.fb .den { background: none; padding: 0; font-size: 10px; }
.fb.thin b {
  color: var(--thin); font-weight: 400;
  text-decoration: underline dotted var(--thin); text-underline-offset: 3px;
}
.fb.thin .den { color: var(--thin); }

/* ---- alt account links ------------------------------------------------- */
.altrow {
  display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}
.altrow input { font-size: 13px; padding: 6px 8px; }
.altrow .main input { font-weight: 600; }
.altrow .rm {
  background: none; border: 1px solid var(--rule); color: var(--ink-3);
  border-radius: var(--r); cursor: pointer; padding: 5px 9px; font-size: 12px; line-height: 1;
}
.altrow .rm:hover { color: var(--attack); border-color: #E4C4C4; }
.altlabels {
  display: grid; gap: 8px; margin-bottom: 4px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
@media (max-width: 720px) {
  .altrow, .altlabels { grid-template-columns: minmax(0, 1fr); }
  .altlabels { display: none; }
  .altrow { padding: 9px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--panel-2); }
}

/* ---- weapons ----------------------------------------------------------- */
.wtable { min-width: 780px; }
.wtable td.rangecell { white-space: nowrap; }
.rangebar {
  display: inline-flex; height: 6px; width: 54px; border-radius: 3px;
  overflow: hidden; background: var(--panel-3); vertical-align: middle; margin-right: 6px;
}
.rangebar i { display: block; height: 100%; background: var(--good); }
.rangebar i.lose { background: var(--attack); opacity: .45; }

/* ---- on-this-page navigation ------------------------------------------- */
.rail-jump { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 1px; }
.rail-jump a {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  color: var(--rail-ink-2); text-decoration: none; font-size: 12.5px;
  padding: 6px 9px; border-radius: var(--r); border-left: 2px solid transparent;
}
.rail-jump a:hover { background: var(--rail-hover); color: #fff; }
.rail-jump a.here {
  background: var(--rail-deep); color: #fff; font-weight: 500;
  border-left-color: var(--gold);
}
.rail-jump a .tick {
  font-family: var(--mono); font-size: 10px; color: var(--rail-ink-2); flex-shrink: 0;
}
.rail-jump a.here .tick { color: var(--gold); }
#railJumpWrap[hidden] { display: none; }

/* ---- weapon tabs -------------------------------------------------------- */
.wtabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule-2);
}
.wtabs button {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; min-width: 0;
}
.wtabs button:hover { background: var(--panel-2); }
.wtabs button[aria-selected="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.wtabs button .alt {
  font-size: 10px; opacity: .7; margin-left: 5px; font-family: var(--mono);
}
.wtabs .sep { width: 1px; background: var(--rule); margin: 2px 4px; align-self: stretch; }

/* ---- collapsible diagnostics section ------------------------------------ */
.foldcard > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
  font-family: var(--display); font-size: 15px; font-weight: 600;
}
.foldcard > summary::-webkit-details-marker { display: none; }
.foldcard > summary .hint {
  font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--accent);
}
.foldcard > summary .hint::before { content: 'Show '; }
.foldcard[open] > summary .hint::before { content: 'Hide '; }
.foldcard[open] > summary {
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-2);
}

/* ---- standalone export -------------------------------------------------- */
/* An exported report has no server behind it, so anything that would call one
   is removed rather than left to fail. */
body.standalone [data-server-only],
body.standalone .rail-nav button[data-view="scout"],
body.standalone .rail-nav button[data-view="archive"],
body.standalone .rail-nav button[data-view="settings"],
body.standalone .rail-nav button[data-view="raw"],
body.standalone #railTeams { display: none !important; }

.standalone-note {
  padding: 10px 18px 0; font-size: 11.5px; color: var(--rail-ink-2); line-height: 1.5;
}

/* ---- tracker.gg link ---------------------------------------------------- */
.trackerlink {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  color: var(--accent); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: 2px; padding: 1px 6px; margin-left: 7px; vertical-align: middle;
}
.trackerlink:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- pistol plan -------------------------------------------------------- */
.planblock {
  border-top: 1px solid var(--rule-2); margin-top: 14px; padding-top: 13px;
}
.plan-title {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 10px;
}
.plan-side { margin-bottom: 14px; }
.plan-side:last-of-type { margin-bottom: 4px; }
.plan-side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.plan-side-head .lbl {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}
.plan-side-head .lbl.atk { color: var(--attack); }
.plan-side-head .lbl.def { color: var(--defense); }

.plan-branch {
  border-left: 3px solid var(--rule); padding: 8px 0 8px 11px; margin-bottom: 8px;
  background: var(--panel-2); border-radius: 0 var(--r) var(--r) 0;
}
.plan-branch.win { border-left-color: var(--good); }
.plan-branch.lose { border-left-color: var(--attack); }
.plan-branch-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-right: 11px;
}
.plan-branch-head b { font-size: 13px; }

.plan-round {
  display: grid; align-items: baseline; gap: 4px 10px; padding: 4px 11px 4px 0;
  grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) auto;
  border-top: 1px solid var(--rule-2);
}
.plan-round:first-of-type { border-top: 0; }
.plan-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.plan-buy { font-weight: 500; font-size: 13px; min-width: 0; }
.plan-site { font-size: 13px; color: var(--ink-2); min-width: 0; }
.plan-buy em, .plan-site em {
  display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3);
}
.plan-win { justify-self: end; }
.plan-empty { grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-3); }
.plan-both {
  font-size: 12px; color: var(--ink-2); padding: 7px 11px 0 0;
  margin-top: 5px; border-top: 1px solid var(--rule-2);
}
.plan-note { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.5; }

@media (max-width: 480px) {
  .plan-round { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .plan-site { grid-column: 2 / -1; }
}

/* ---- map picker --------------------------------------------------------- */
.mapchecks {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
}
.mapcheck {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 6px 9px; cursor: pointer; background: var(--panel); font-size: 13px;
}
.mapcheck:hover { background: var(--panel-2); }
.mapcheck input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.mapcheck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapcheck:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-line); font-weight: 500;
}
.mapcheck.was-picked span::after {
  content: 'in report'; display: inline-block; margin-left: 6px;
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; vertical-align: middle;
}
.mapcheck-none {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--thin);
  background: var(--thin-bg); border: 1px solid #EBD9B4;
  border-radius: var(--r); padding: 8px 10px;
}
.mapchecks-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px;
}

/* ---- tournament series -------------------------------------------------- */
.series {
  border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 12px; overflow: hidden; background: var(--panel);
}
.series:last-child { margin-bottom: 0; }
.series-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--panel-2); border-bottom: 1px solid var(--rule-2);
  font-family: var(--display); font-size: 14px;
}
.series-head .muted { font-family: var(--body); font-weight: 400; }
.series-score { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.series .tablewrap { margin: 0; padding: 0 14px; }
.series table { min-width: 620px; }
.series thead th { padding-top: 10px; }
.series tbody tr:last-child td { border-bottom: 0; }
.series tbody tr:last-child td:first-child { padding-bottom: 12px; }

/* ---- starting side ------------------------------------------------------ */
.startside {
  background: var(--panel-2); border: 1px solid var(--rule-2);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px;
}
.startside-row {
  display: grid; gap: 4px 12px; align-items: baseline; padding: 4px 0;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
}
.startside-row .lbl {
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
}
.startside-row .lbl.atk { color: var(--attack); }
.startside-row .lbl.def { color: var(--defense); }
.startside-win { justify-self: end; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 420px) {
  .startside-row { grid-template-columns: minmax(0, 1fr) auto; }
  .startside-win { grid-column: 1 / -1; justify-self: start; }
}


/* ---- gold accents in the content area ----------------------------------- */
/* The report header carries a thin gold rule so the panel colour reads as
   part of the design rather than an isolated stripe. */
.rephead { border-top: 3px solid var(--gold); }
.rephead .eyebrow { color: var(--gold); opacity: .9; }

/* The selected weapon tab and map tab echo the navy; the gold stays reserved
   for position, not selection, so the two never compete. */
.card > h2 { border-bottom-color: var(--rule-2); }

/* ---- pistol site splits -------------------------------------------------- */
.plan-sitepct {
  display: inline-block; margin-right: 10px; font-size: 13px; line-height: 1.25;
  vertical-align: top;
}
.plan-sitepct:last-child { margin-right: 0; }
.plan-sitepct b { font-weight: 600; }
.plan-sitepct em {
  display: block; font-style: normal; font-size: 10px; color: var(--ink-3);
  font-family: var(--mono);
}
.plan-overall {
  font-size: 12.5px; color: var(--ink-2); padding: 7px 10px; margin-bottom: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.plan-buy em, .plan-site em { display: block; font-style: normal; }

/* ---- ranks faced --------------------------------------------------------- */
.rankblock-sec {
  border-top: 1px solid var(--rule-2); margin-top: 14px; padding-top: 13px;
}
.rankbar {
  display: grid; gap: 8px 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  background: var(--panel-2); border: 1px solid var(--rule-2);
  border-radius: var(--r); padding: 9px 11px;
}
.rankbar .k {
  display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.rankbar b { font-family: var(--display); font-size: 13.5px; }

.outliers { list-style: none; margin: 0; padding: 0; }
.outlier {
  display: grid; gap: 2px 10px; align-items: baseline; padding: 6px 0 6px 10px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--rule-2); border-left: 3px solid var(--rule);
}
.outlier:last-child { border-bottom: 0; }
.outlier.above { border-left-color: var(--attack); }
.outlier.below { border-left-color: var(--defense); }
.outlier-rank { font-family: var(--display); font-weight: 600; font-size: 13px; }
.outlier-who { font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.outlier-gap {
  font-family: var(--mono); font-size: 11px; font-weight: 600; justify-self: end;
  white-space: nowrap;
}
.outlier.above .outlier-gap { color: var(--attack); }
.outlier.below .outlier-gap { color: var(--defense); }
.outlier-when {
  grid-column: 1 / -1; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono);
}

/* ---- coach's dashboard --------------------------------------------------- */
.dash-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.dash-panel {
  border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 12px 13px; background: var(--panel-2); min-width: 0;
}
.dash-title {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 9px;
}
.dash-big {
  font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-big .rate b { font-size: 26px; }
.dash-big .den { font-size: 10px; vertical-align: middle; }

.dash-map { padding: 7px 0; border-top: 1px solid var(--rule-2); }
.dash-map:first-of-type { border-top: 0; padding-top: 0; }
.dash-map-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.dash-map-head b { font-family: var(--display); font-size: 14px; }
.dash-comp {
  font-size: 12px; color: var(--ink-2); margin-top: 2px;
  overflow-wrap: anywhere; line-height: 1.35;
}
.dash-side { color: var(--ink-3); margin-top: 2px; }

.dash-gun {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 4px 0; border-top: 1px solid var(--rule-2); font-size: 12.5px;
}
.dash-gun:first-of-type { border-top: 0; }

/* ---- team strength index ------------------------------------------------- */
.tsi-panel { background: var(--accent-soft); border-color: var(--accent-line); }
.tsi-value { color: var(--accent); }
.tsi-rows { margin-top: 4px; }
.tsi-row {
  display: grid; gap: 4px 8px; align-items: center; padding: 5px 0;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  border-top: 1px solid var(--accent-line);
}
.tsi-row:first-child { border-top: 0; }
.tsi-row.unranked { opacity: .55; }
.tsi-role {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  min-width: 28px; padding: 2px 5px; cursor: pointer;
  border-radius: 2px; border: 1px solid var(--accent-line);
  background: var(--panel); color: var(--ink-3);
}
.tsi-role[data-role="starter"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.tsi-role:hover { border-color: var(--accent); }
.tsi-name {
  font-size: 12.5px; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsi-rank { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.tsi-score { font-size: 12.5px; font-weight: 600; justify-self: end; }
@media (max-width: 420px) {
  .tsi-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tsi-rank { grid-column: 2 / -1; }
}

/* ---- signed-in badge ----------------------------------------------------- */
#whoami {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 11.5px; color: var(--rail-ink-2);
}
#whoami[hidden] { display: none; }
#whoName {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px;
}
#signOut {
  margin-left: auto; background: none; cursor: pointer;
  border: 1px solid var(--rail-line); color: var(--rail-ink-2);
  border-radius: var(--r); padding: 2px 7px; font-size: 10.5px; white-space: nowrap;
}
#signOut:hover { border-color: var(--gold); color: var(--gold); }