/* ØMEGA Hall — layout and components, ported from the approved canvas.
   Discrete variants live here; only per-datum geometry (bar widths, SVG
   coordinates) stays inline in the markup. */

.shell {
  min-height: 100vh;
  background: radial-gradient(1100px 520px at 10% -14%, #1d2233 0%, var(--bg) 62%);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 13, 18, .8);
}
.brand { display: flex; align-items: center; gap: 13px; flex: 1 1 260px; min-width: 0; }
.crest {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--border-gold); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2e2415, #12141b);
  font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--gold);
}
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; color: #efe8d8;
}
.brand__sub {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.topbar__right { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.snapdot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.snaptxt { font-size: 12px; color: var(--muted); }
.who { font-size: 13px; color: var(--text); padding-left: 10px; border-left: 1px solid var(--border); }
.chip {
  padding: 2px 8px; border-radius: var(--r-sm); font-size: 10.5px;
  letter-spacing: .12em; font-weight: 600;
}
.chip--gold  { background: #3a2f14; border: 1px solid var(--border-gold); color: var(--gold-2); }
.chip--muted { background: #22262f; border: 1px solid #353c49; color: #b2b8c6; }
.logout { margin: 0; }
.logout button {
  background: none; border: 1px solid var(--border-2); border-radius: var(--r-md);
  color: var(--muted); padding: 6px 12px; font: inherit; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.logout button:hover { color: var(--text); border-color: var(--muted-2); }

/* ---------- nav ---------- */
.nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-bottom: 1px solid var(--border-3); }
.pill {
  padding: 8px 15px; border: 1px solid var(--border-2); background: transparent;
  color: var(--muted); border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.pill:hover:not(:disabled) { color: var(--text); border-color: var(--muted-3); }
.pill--on { border-color: var(--gold); background: rgba(217,180,91,.12); color: var(--gold-2); }
.pill:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- layout ---------- */
.main { padding: 24px 22px 70px; max-width: 1520px; margin: 0 auto; }

.panel {
  padding: 18px 20px; background: var(--panel);
  border: 1px solid #242b3a; border-radius: var(--r-md); margin-bottom: 14px;
}
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.panel h2 {
  margin: 0; flex: 1 1 220px; font-family: var(--font-head); font-weight: 600;
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--heading);
}
.panel__note { font-size: 12px; color: var(--muted-2); }
.empty pre {
  background: var(--sunken); border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 12px; overflow-x: auto; color: var(--gold-2); font-size: 12.5px;
}

/* ---------- KPI cards ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.kpi {
  padding: 16px 18px; background: var(--panel); border: 1px solid #242b3a;
  border-top: 2px solid var(--gold); border-radius: var(--r-md);
}
.kpi__label {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2);
}
.kpi__value { font-size: 30px; line-height: 1.2; color: var(--text-2); }
.kpi__foot { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kpi__sub { font-size: 11.5px; color: var(--muted-3); }
.is-up   { color: var(--green); }
.is-down { color: var(--red); }

/* ---------- composition ---------- */
.insight {
  margin: 10px 0 0; font-size: 13px; color: #9aa0b0; max-width: 780px;
}
.insight strong { color: var(--text); font-weight: 600; }
.split { margin-top: 16px; }
.split__bar {
  display: flex; height: 10px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--slate);
}
.split__main { background: var(--gold); }
.split__legend {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; font-size: 12.5px; color: #b9bdc9;
}
.split__legend b { margin-left: 4px; font-size: 16px; color: var(--text-2); }
.split__legend em { font-style: normal; margin-left: 6px; color: var(--muted-3); font-size: 11.5px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm); margin-right: 7px; }
.dot--main { background: var(--gold); }
.dot--farm { background: var(--slate); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin-top: 18px; }
.grid { width: 100%; min-width: 640px; border-collapse: collapse; }
.grid th {
  padding: 9px 12px; text-align: left; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); font-weight: 600;
  border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
.grid td { padding: 10px 12px; border-bottom: 1px solid var(--border-3); font-size: 14px; }
.grid tbody tr:nth-child(even) { background: var(--panel-2); }
.grid tfoot td {
  border-top: 1px solid var(--border-2); border-bottom: none; padding: 11px 12px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--heading);
}
.grid .r { text-align: right; }
.grid .num { font-family: var(--font-num); font-size: 15px; }
.gold  { color: var(--gold); }
.green { color: var(--green-2); }
.muted { color: var(--muted); }

.badge {
  padding: 2px 7px; border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: 12px; letter-spacing: .06em;
}
.badge--gold { background: #3a2f14; border: 1px solid var(--border-gold); color: var(--gold-2); }

/* ---------- alliance bars ---------- */
.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.bar__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.bar__name { font-size: 13px; color: #c6cbd6; flex: 1 1 auto; min-width: 0; }
.bar__name.is-family { color: var(--gold-2); }
.bar__meta { font-size: 11.5px; color: var(--muted-3); }
.bar__val { font-size: 14px; color: var(--muted); }
.bar__track { height: 9px; border-radius: var(--r-sm); background: var(--border-3); overflow: hidden; }
.bar__fill { height: 100%; background: #3b4356; }
.bar__fill.is-family { background: linear-gradient(90deg, var(--gold), #8a6f2f); }

@media (max-width: 640px) {
  .main { padding: 18px 14px 50px; }
  .topbar { padding: 14px 16px; }
  .nav { padding: 10px 14px; }
}

/* ---------- compliance summary ---------- */
.compliance { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.compliance__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--panel-2);
  border: 1px solid var(--border-3); border-radius: var(--r-md); font-size: 13px;
}
.compliance__row b { color: var(--text-2); font-size: 15px; }
.compliance__bad { margin-left: auto; color: var(--red-2); font-size: 13px; }
a.compliance__bad:hover { color: var(--red); text-decoration: underline; }
.compliance__ok { margin-left: auto; color: var(--green-2); font-size: 13px; }

.tag {
  padding: 2px 9px; border-radius: var(--r-sm); font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.tag--good { background:#1b3129; border:1px solid #2f5a47; color: var(--green-2); }
.tag--warn { background:#332a17; border:1px solid #5c4a24; color:#e8c27a; }
.tag--bad  { background:#331c1f; border:1px solid #5c2f35; color: var(--red-2); }
.tag--flat { background:#1c2230; border:1px solid var(--border-2); color:#a2a8b6; }
.tag--gold { background:#3a2f14; border:1px solid var(--border-gold); color: var(--gold-2); }

/* ---------- farm cap watch ---------- */
.capstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 16px;
}
.capstat {
  padding: 14px 16px; background: var(--panel-2);
  border: 1px solid var(--border-3); border-left: 3px solid var(--border-2);
  border-radius: var(--r-md);
}
.capstat--bad  { border-left-color: var(--red); }
.capstat--warn { border-left-color: #e8c27a; }
.capstat--ok   { border-left-color: var(--green); }
.capstat__n { font-size: 30px; line-height: 1.1; color: var(--text-2); }
.capstat__k { font-size: 12px; color: var(--text); margin-top: 2px; }
.capstat__s { font-size: 11px; color: var(--muted-3); margin-top: 2px; }

.lordid { font-family: var(--font-num); font-size: 12px; color: var(--muted-3); margin-left: 6px; }
.red { color: var(--red-2); }
.panel__foot { margin: 12px 0 0; font-size: 12px; color: var(--muted-3); }
.signin {
  padding: 6px 12px; border: 1px solid var(--border-gold); border-radius: var(--r-md);
  color: var(--gold-2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.signin:hover { background: rgba(217,180,91,.12); color: var(--gold-3); }

/* ---------- leaderboard controls ---------- */
.lbctl {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 16px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--grow { flex: 1 1 240px; }
.field__k {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.select, .input {
  padding: 9px 11px; background: var(--sunken); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-md); font: inherit; font-size: 13px;
}
.select { min-width: 260px; max-width: 100%; }
.select:focus, .input:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,180,91,.15);
}
.toggle { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: hidden; }
.toggle__b {
  padding: 9px 14px; border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
}
.toggle__b:hover { color: var(--text); }
.toggle__b--on { background: var(--gold); color: #12141b; }

.btn {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--border-gold);
  border-radius: var(--r-md); background: var(--gold); color: #12141b;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.btn:hover { background: var(--gold-2); color: #12141b; }
.btn--ghost {
  background: transparent; border-color: var(--border-2); color: var(--muted); font-weight: 600;
}
.btn--ghost:hover { background: transparent; color: var(--text); border-color: var(--muted-3); }

/* ---------- leaderboard table ---------- */
.grid--lb { min-width: 1080px; }
.grid--lb th[data-sort] { cursor: pointer; user-select: none; }
.grid--lb th[data-sort]:hover { color: var(--text); }
.grid--lb th.is-sorted { color: var(--gold-2); }
.grid--lb th.is-sorted::after { content: ' ↓'; }
.grid--lb tbody tr:hover { background: var(--panel-3); }

.typetag {
  margin-left: 7px; padding: 1px 6px; border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: 11px; letter-spacing: .05em;
}
.typetag--main { background: #2a2413; border: 1px solid #5c4a24; color: var(--gold-2); }
.typetag--farm { background: #1b2130; border: 1px solid #333c52; color: #8f9cb5; }
.alias { margin-left: 7px; font-size: 12px; color: var(--muted-3); font-style: italic; }
.badge--grey { background: #22262f; border: 1px solid #353c49; color: #b2b8c6; }
.dash { color: var(--muted-3); }

.lbfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--muted);
}

/* ---------- player profile ---------- */
.backlink { margin: 0 0 14px; font-size: 12.5px; }
.phead {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  padding: 20px 22px; margin-bottom: 14px;
  border: 1px solid #2b2415; border-left: 3px solid var(--gold);
  border-radius: var(--r-md); background: linear-gradient(110deg, #1e1a12 0%, #12151d 55%);
}
.phead__avatar {
  width: 68px; height: 68px; flex: none; border: 1px solid var(--border-gold);
  border-radius: var(--r-md); background: linear-gradient(160deg, #2e2415, #12141b);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--gold);
}
.phead__main { flex: 1 1 320px; min-width: 0; }
.phead__name {
  margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 25px;
  letter-spacing: .03em; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.phead__meta { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.phead__stats { display: flex; gap: 26px; flex: none; }
.phead__stats .k { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2); }
.phead__stats .v { font-family: var(--font-num); font-size: 30px; line-height: 1.15; color: var(--gold); }
.phead__stats .s { font-size: 11px; color: var(--muted-3); }
.phead__stats .s.ok  { color: var(--green-2); }
.phead__stats .s.bad { color: var(--red-2); }

.aka {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: 12.5px;
}
.aka__k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.aka__v { color: var(--text); }
.aka__v em { font-style: normal; color: var(--muted-3); margin-left: 4px; }

/* stat cards double as the chart's metric selector */
.pstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.pstat {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 13px 15px; background: var(--panel); border: 1px solid #242b3a;
  border-radius: var(--r-md); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, background .15s;
}
.pstat:hover { border-color: var(--muted-3); }
.pstat--on { background: var(--panel-3); border-color: var(--border-gold); }
.pstat__k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.pstat__v { font-size: 24px; line-height: 1.1; color: var(--text-2); }
.pstat__d { font-size: 13px; }

/* chart: the aspect-ratio box is what keeps the HTML label layer aligned
   with the SVG at every width */
.chart { position: relative; aspect-ratio: 600 / 230; width: 100%; margin-top: 14px; }
.chart > svg, .chart__labels { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__labels { pointer-events: none; font-variant-numeric: tabular-nums; }
.chart__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted-3); font-size: 13px; text-align: center; padding: 0 20px;
}
.chart.is-narrow .chart__labels span:nth-child(even) { display: none; }

.chartsum {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border-3);
}
.chartsum__i { display: flex; flex-direction: column; gap: 2px; }
.chartsum__k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.chartsum__v { font-size: 20px; }
.chartsum__legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-left: auto; }
.chartsum__legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #b9bdc9; }
.chartsum__legend .lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.checks { min-width: 0; }
.checks td { font-size: 13px; }
.checks td.num { color: var(--text-2); }
.grid--lb tr.is-click { cursor: pointer; }
.select--sm { min-width: 190px; }

/* ---------- import page ---------- */
.notice {
  padding: 14px 16px; margin-bottom: 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-2); background: var(--panel);
}
.notice--inline { margin: 16px 0 0; }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { margin: 0; font-size: 13px; color: var(--muted); }
.notice--good { border-color: #2f5a47; background: #16241e; }
.notice--good strong { color: var(--green-2); }
.notice--bad  { border-color: #5c2f35; background: #2a171a; }
.notice--bad strong { color: var(--red-2); }
.notice--warn { border-color: #5c4a24; background: #2a2416; }
.notice--warn strong { color: #e8c27a; }

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 24px; margin-top: 16px; text-align: center; cursor: pointer;
  border: 1px dashed var(--border-2); border-radius: var(--r-md); background: var(--sunken);
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop--over { border-color: var(--gold); background: #141a24; }
.drop--has { border-style: solid; border-color: var(--border-gold); }
.drop__title { font-family: var(--font-head); font-size: 17px; color: var(--text-2); }
.drop__sub { font-size: 12px; color: var(--muted-3); }
.drop__btn { margin-top: 6px; }
.drop__file {
  margin-top: 8px; font-family: var(--font-num); font-size: 14px; color: var(--gold-2);
}

.vgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 18px;
}
.vstat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--border-3);
  border-left: 3px solid var(--gold); border-radius: var(--r-md);
}
.vstat__n { font-size: 28px; line-height: 1.1; color: var(--text-2); }
.vstat__k { font-size: 12px; color: var(--text); }
.vstat__s { font-size: 11px; color: var(--muted-3); }
.grid td.small { font-size: 12px; color: var(--muted); }

/* ---------- family trend: two charts per row, stacking on narrow screens ---------- */
/* Exactly two per row, each half width — auto-fit packed three across on a
   wide monitor, which made them smaller than the sparklines they replaced.
   minmax(0,1fr) rather than 1fr so a wide SVG cannot force the column open. */
.trendgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tcard {
  margin: 0;
  padding: 16px 18px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border-3);
  border-radius: var(--r-md);
  min-width: 0;                 /* lets the grid column actually shrink */
}
.tcard__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.tcard__k {
  flex: 1 1 auto;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.tcard__v { font-size: 28px; line-height: 1.1; color: var(--text-2); }
.tcard__d { font-size: 14px; }

/* Same aspect-ratio trick as the profile chart: it guarantees the HTML label
   layer and the SVG occupy identical boxes at every width. */
.tcard__chart { position: relative; aspect-ratio: 520 / 210; width: 100%; }
.tcard__chart > svg,
.tcard__labels { position: absolute; inset: 0; width: 100%; height: 100%; }
.tcard__labels { pointer-events: none; font-variant-numeric: tabular-nums; }

/* Below this a half-width chart is narrower than its own axis labels. */
@media (max-width: 860px) {
  .trendgrid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .tcard__v { font-size: 22px; }
}

/* ---------- period selector ---------- */
.lbctl--period {
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border-3);
}
.input--date { min-width: 150px; color-scheme: dark; }
.periodnote {
  margin: 12px 0 0; padding: 10px 12px; font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border-3);
  border-left: 3px solid var(--gold); border-radius: var(--r-md);
}
.periodnote strong { color: var(--text); }
.lbfoot__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn--on { border-color: var(--border-gold); color: var(--gold-2); background: rgba(217,180,91,.12); }
.periodnote--warn { border-left-color: #e8c27a; background: #2a2416; }
.periodnote--warn strong { color: #e8c27a; }
.pperiod { margin-bottom: 14px; border-bottom: none; padding-bottom: 0; }
.trendrange { flex: none; }
.trendrange .toggle__b { text-decoration: none; display: inline-block; }

/* ---------- language picker ----------
   Sits in the topbar beside the snapshot chip. It is a real <form> so it works
   without JavaScript; the visible label is hidden on wide screens because the
   globe-sized control is self-explanatory beside a list of endonyms, but it
   stays in the DOM for screen readers. */
.langpick { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.langpick__l {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-3);
}
.langpick__sel {
  padding: 5px 8px; min-width: 0; background: var(--sunken); color: var(--muted);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer;
}
.langpick__sel:hover { color: var(--text); border-color: var(--border-gold); }
.langpick__sel:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,180,91,.15);
}
.btn--xs { padding: 5px 9px; font-size: 11px; }

/* Below the breakpoint the topbar wraps and every character counts. */
@media (max-width: 760px) {
  .langpick__l { display: none; }
}

/* ---------- snapshot remarks editor ----------
   One short free-text field per snapshot date. The inputs are deliberately
   full-width in their column: a remark is read on a chart axis, so seeing
   the whole of it while typing is what stops "SoS2-4136 Season St…". */
.grid--notes td { vertical-align: middle; }
.grid--notes td:first-child { white-space: nowrap; }
.input--note { width: 100%; min-width: 180px; padding: 7px 10px; font-size: 13px; }

/* ---------- leaderboard: sticky header, column picker, inline tag ----------
   position:sticky pins to the nearest SCROLLING ancestor, and .tablewrap is
   already one (overflow-x:auto makes overflow-y compute to auto). Without a
   bounded height it never scrolls, so the header would scroll away with the
   page and stick to nothing. Hence the max-height: the rows scroll inside
   the panel and the header stays put. */
.tablewrap--tall { max-height: calc(100vh - 230px); min-height: 320px; overflow: auto; }
.tablewrap--tall .grid thead th {
  position: sticky; top: 0; z-index: 2;
  /* Opaque, and the panel's own colour rather than the zebra stripe's, or
     even rows would blend into it as they scroll UNDER the header. */
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border-2);
}

/* The alliance tag in front of the name. Sized down and spaced so it reads
   as a prefix rather than as part of the name itself. */
.atag {
  font-family: var(--font-num); font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted-3);
}
.atag--fam { color: var(--gold-dim); }

/* Column picker.
   Positioned explicitly rather than left to the UA's dialog geometry. A
   modal dialog defaults to width:fit-content with margin:auto, and on a
   phone that came out wider than the screen and anchored to the layout
   viewport, so the checkbox labels sat off the left edge and the sheet
   could only be seen by zooming out. inset + box-sizing removes every one
   of those variables, and works the same whether the dialog was opened
   modally or through the attribute fallback. */
.colpick:not([open]) { display: none; }
.colpick {
  position: fixed; z-index: 100;
  margin: 0; padding: 0; box-sizing: border-box;
  max-height: 82vh; overflow: hidden;
  border: 1px solid var(--border-2);
  background: var(--panel); color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);

  /* Phone first: a bottom sheet, within thumb reach and exactly as wide as
     the screen, so the longest column name cannot push it off the side. */
  inset: auto 0 0 0; width: auto;
  border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0;
}
.colpick::backdrop { background: rgba(0,0,0,.62); }

/* The header stays put and only the list scrolls, so Close is always
   reachable however many columns there are. */
.colpick__box { display: flex; flex-direction: column; max-height: 82vh; }
.colpick__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border-2);
}
.colpick__t {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.colpick__x {
  background: none; border: 0; padding: 2px 6px; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted-2);
}
.colpick__x:hover { color: var(--text); }
.colpick__menu {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  overscroll-behavior: contain;          /* no scroll-chaining to the page */
  padding: 8px;
}
.colpick__i {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--muted); cursor: pointer;
}
.colpick__i:hover { background: var(--panel-3); color: var(--text); }
.colpick__i input { accent-color: var(--gold); width: 17px; height: 17px; flex: none; }

/* With room, it becomes an ordinary centred dialog. */
@media (min-width: 561px) {
  .colpick {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: 320px; max-width: calc(100vw - 32px);
    border-radius: var(--r-md); border-bottom: 1px solid var(--border-2);
  }
  .colpick__i { padding: 7px 8px; font-size: 13px; }
}

/* The page must not scroll behind the sheet: on Android a fixed element is
   anchored to the LAYOUT viewport, so panning the page underneath drags the
   sheet out of view with it. */
html.is-modal, html.is-modal body { overflow: hidden; }