/* Ground Zero DayZ Tool dashboard — a field console, not a card grid.
   Barlow (industrial widths) for the interface, Spline Sans Mono for coordinates and ids.
   Ink-blue neutrals; the maker's blue and red are used only as signals. Ruler ticks and
   contour lines are the one decorative idea, taken from the survey sheets the maps come from. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --bg-0: #090c11;      /* page */
  --bg-1: #0d1117;      /* sidebar */
  --bg-2: #121820;      /* panels */
  --bg-3: #18202b;      /* hover, raised */
  --bg-input: #0b0f15;
  --line: #1f2937;
  --line-strong: #2b394b;
  --grid: rgba(120, 150, 190, .055);
  --contour: rgba(120, 160, 210, .16);

  --text: #e6ebf2;
  --text-2: #9aa7ba;
  --text-3: #7486a0;

  --blue: #5aa1f0;
  --blue-fill: #2c6dcf;
  --blue-fill-hover: #3a7be0;
  --blue-soft: rgba(90, 161, 240, .13);
  --blue-ring: rgba(90, 161, 240, .38);
  --red: #f2585d;
  --red-fill: #c8383e;
  --red-soft: rgba(242, 88, 93, .13);
  --green: #43c185;
  --green-soft: rgba(67, 193, 133, .13);
  --amber: #e8ad44;
  --amber-soft: rgba(232, 173, 68, .13);
  --pink: #f27aa5;
  --teal: #38c2b0;

  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --r-s: 4px;
  --r: 6px;
  --r-l: 10px;
  --side-w: 256px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f1f3f7;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef1f6;
  --bg-input: #ffffff;
  --line: #e0e5ed;
  --line-strong: #c8d0dc;
  --grid: rgba(60, 90, 140, .07);
  --contour: rgba(60, 100, 160, .18);

  --text: #111827;
  --text-2: #465266;
  --text-3: #5f6c81;   /* was #667287: 4.37:1 on --bg-0, which is under 4.5 for small text; this is 4.8:1 */

  --blue: #1a5fc4;
  --blue-fill: #1f63c9;
  --blue-fill-hover: #1a56b3;
  --blue-soft: rgba(31, 99, 201, .1);
  --blue-ring: rgba(31, 99, 201, .3);
  --red: #c4302f;
  --red-fill: #c4302f;
  --red-soft: rgba(196, 48, 47, .1);
  --green: #178a52;
  --green-soft: rgba(23, 138, 82, .1);
  --amber: #9a6200;
  --amber-soft: rgba(154, 98, 0, .11);
  --pink: #c13c6e;
  --teal: #0f8f80;

  --shadow: 0 10px 30px rgba(20, 30, 50, .16);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--text);
  font: 400 15px/1.55 var(--font-ui);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A position that opens iZurvive on that spot: a dotted underline marks it as clickable among plain numbers */
.coord-link { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.coord-link:hover { text-decoration-style: solid; }
code, .mono { font-family: var(--font-mono); font-size: .86em; }
code { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-s); padding: 1px 6px; color: var(--text); }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--blue-ring); }
.muted { color: var(--text-2); font-size: 14px; }
.faint { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 15px; height: 15px; }
.ic.lg { width: 22px; height: 22px; }

/* ─── Shell ──────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--bg-1); border-right: 1px solid var(--line);
  padding: 18px 12px 0;
  scroll-padding-bottom: 120px;   /* the pinned footer is ~106px: keep a focused or scrolled-to page link clear of it */
  scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .ic { width: 26px; height: 26px; color: var(--blue); stroke-width: 1.5; }
.brand-name { font: 700 17px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; }
.brand-name b { font-weight: 700; color: var(--blue); letter-spacing: .1em; margin-left: 4px; }
.side .brand-name { line-height: 1.12; }
.side .brand-name b { display: block; margin: 2px 0 0; }      /* the sidebar is narrow: "Ground Zero" over "DayZ Tool", on purpose, instead of one word left alone on a second line */

.guild-switch {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); color: var(--text);
}
.guild-switch:hover { text-decoration: none; border-color: var(--line-strong); background: var(--bg-3); }
.guild-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-3); object-fit: cover; flex: 0 0 auto; display: grid; place-items: center; font: 700 14px var(--font-cond); color: var(--text-2); overflow: hidden; }
.guild-switch .who { min-width: 0; flex: 1; line-height: 1.25; }
.guild-switch .who strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guild-switch .who small { color: var(--text-3); font-size: 12px; }
.guild-switch .ic { color: var(--text-3); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label {
  display: flex; align-items: center; gap: 8px;
  font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
  padding: 14px 10px 6px;
}
.nav-label::before { content: ''; width: 12px; height: 1px; background: var(--line-strong); }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 6px 10px; border-radius: var(--r); border: 0; background: none;
  color: var(--text-2); font: 500 14.5px/1.2 var(--font-ui); text-align: left; cursor: pointer;
  position: relative;
}
.nav-item .ic { color: var(--text-3); transition: color .12s; }
.nav-item:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.nav-item:hover .ic { color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--blue-soft); color: var(--text); }
.nav-item[aria-current="page"] .ic { color: var(--blue); }
.nav-item[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }

/* Always in view: the signed-in row (theme, log out) and the Support button stay pinned to the bottom of the sidebar while the list of
   pages scrolls above them. (Before, on an ordinary window they sat below the fold and needed a scroll to find.) The sidebar has no
   bottom padding of its own for this reason: the footer carries it, so the pinned footer sits flush with the window's edge. */
.side-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; padding: 10px 0 14px; background: var(--bg-1); border-top: 1px solid var(--line); }
.side-foot .who-row { display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 8px; color: var(--text-2); font-size: 13.5px; min-width: 0; }
.side-foot .who-row .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font: 700 12px var(--font-cond); flex: 0 0 auto; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--text-3); cursor: pointer; flex: 0 0 auto; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.icon-btn span { display: none; }
.credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px 0; }
.credit img { width: 88px; height: auto; display: block; opacity: .92; }
.credit a { font: 500 12.5px var(--font-ui); color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.credit a:hover { color: var(--text); text-decoration: none; }
.credit.solo { margin-top: 40px; padding: 0; }
.side-foot .release-note { margin: 8px 0 0; padding: 0 8px; font: 600 11px/1.2 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
/* The "support raptor's work" link. Tinted so it is seen, still quiet enough not to nag. It is used on the status page, the
   login and server-picker screens and in the sidebar; written as a.support-btn so it beats the faint `.credit a` above. */
a.support-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: var(--r); border: 1px solid var(--blue-ring); background: var(--blue-soft);
  color: var(--blue); font: 600 13.5px/1 var(--font-ui); white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
}
a.support-btn:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); border-color: var(--blue); color: var(--text); text-decoration: none; }
a.support-btn:active { transform: translateY(1px); }
a.support-btn .ic { width: 15px; height: 15px; }
a.support-btn .ic.heart { fill: var(--red); stroke: var(--red); }
a.support-btn .ic.sm { opacity: .75; }
a.support-btn.lg { height: 56px; padding: 0 26px; gap: 10px; font-size: 17px; border-radius: var(--r-l); }
a.support-btn.lg .ic { width: 19px; height: 19px; }
a.support-btn.lg .ic.sm { width: 15px; height: 15px; }

.mbar { display: none; }
.scrim { display: none; }

.main { position: relative; min-width: 0; padding: 0 44px 96px; }
.main::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.main::after {
  content: ''; position: absolute; top: 0; right: 0; width: min(760px, 72%); height: 360px; pointer-events: none; background: var(--contour); opacity: .8;
  -webkit-mask: url(contours.svg) 100% 0 / cover no-repeat, linear-gradient(to left, #000 15%, transparent 92%), linear-gradient(#000 35%, transparent);
  -webkit-mask-composite: source-in, source-in;
  mask: url(contours.svg) 100% 0 / cover no-repeat, linear-gradient(to left, #000 15%, transparent 92%), linear-gradient(#000 35%, transparent);
  mask-composite: intersect, intersect;
}
.page { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.pane[hidden] { display: none; }

/* ─── Page header ────────────────────────────────────────────────────────── */
.page-head { padding: 46px 0 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--blue); }
.page-head h1 { font: 600 42px/1.04 var(--font-cond); letter-spacing: .005em; color: var(--text); max-width: 22ch; text-wrap: balance; }
.lead { margin-top: 12px; max-width: 64ch; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* a linked name on the Players page: it shares a line with its Remove button (also on a phone), and a gamertag with no spaces breaks anywhere rather than pushing the button out of the panel */
.link-row > span { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
.link-row > .btn { flex: 0 0 auto; }
.ruler {
  height: 9px; margin: 26px 0 0;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 50px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10px) left bottom / 100% 5px no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}

.subtabs { display: flex; gap: 2px; margin: 8px 0 0; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  position: relative; padding: 14px 14px 12px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 500 14.5px var(--font-ui); color: var(--text-2); border-radius: var(--r) var(--r) 0 0;
}
.subtab:hover { color: var(--text); background: var(--bg-3); }
.subtab[aria-selected="true"] { color: var(--text); }
.subtab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--blue); border-radius: 2px; }

/* ─── Settings blocks ────────────────────────────────────────────────────── */
.block { display: grid; grid-template-columns: minmax(210px, 290px) minmax(0, 1fr); gap: 10px 56px; padding: 32px 0; border-top: 1px solid var(--line); }
.pane > .block:first-child, .page > .block:first-of-type { border-top: 0; }
.block-meta h3 { font: 600 17px/1.3 var(--font-ui); color: var(--text); }
.block-meta p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.block-meta .tag { margin-top: 10px; }
.block-meta code, .lead code, .hint code { border-color: transparent; }
.block-body { min-width: 0; }
.block.wide { grid-template-columns: minmax(0, 1fr); }
.block.wide > .block-meta { max-width: 70ch; }
.block.danger-zone { border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line)); border-radius: var(--r-l); padding: 24px 26px; margin-top: 28px; background: var(--red-soft); }
.block.danger-zone .block-meta h3 { color: var(--red); }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.panel:empty { display: none; }
.panel + .panel, .panel + form, form + .panel, .panel + .field { margin-top: 14px; }
.panel-pad { padding: 18px 20px; }
.panel > p.muted { padding: 22px 18px; text-align: center; }
.sub-title { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 26px 0 12px; }
.sub-title:first-child { margin-top: 0; }
/* A title row that can carry a small either/or switch on its right (Wallets → rank by Total / Cash / Bank).
   The fixed height keeps two side-by-side boards level whether or not one of them has the switch. */
.lb-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 36px; margin: 0 0 12px; }
.lb-head .sub-title { margin: 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; flex: 0 0 auto; }
.seg button { border: 0; background: none; cursor: pointer; padding: 5px 14px; border-radius: 999px; font: 500 13px var(--font-ui); color: var(--text-2); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--bg-2); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(0, 0, 0, .18); }
.seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.section-title { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 26px 0 12px; }
.section-title:first-child { margin-top: 0; }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
label, .label { display: block; margin-bottom: 6px; font: 500 13.5px/1.3 var(--font-ui); color: var(--text-2); }
.hint { margin-top: 6px; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.hint code { font-size: .92em; }

input, select, textarea {
  font: inherit; color: var(--text); width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-input); border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-3)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input[type=number], input[type=time] { font-variant-numeric: tabular-nums; }
input[type=time] { width: auto; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; cursor: pointer; }
select option { background: var(--bg-2); color: var(--text); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--blue-fill); cursor: pointer; flex: 0 0 auto; }
.mono-input, textarea.mono-input { font-family: var(--font-mono); font-size: 13px; }

.grid { display: grid; gap: 0 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.row > .field { flex: 1 1 170px; margin-bottom: 0; }
.row > .btn, .row > button { flex: 0 0 auto; }
.row.center { align-items: center; }
form.row + form.row, .row + .row { margin-top: 14px; }
.actions-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.spacer { flex: 1; }

/* Buttons */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; font: 500 14px/1 var(--font-ui); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
}
button:hover, .btn:hover { background: var(--bg-3); border-color: var(--text-3); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
button.primary, .btn.primary { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--blue-fill-hover); border-color: var(--blue-fill-hover); }
button.danger, .btn.danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line-strong)); }
button.danger:hover, .btn.danger:hover { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover, .btn.ghost:hover { background: var(--bg-3); color: var(--text); }
button.sm, .btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
button.icon, .btn.icon { width: 34px; padding: 0; }

/* Switches */
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0; color: var(--text); font: 400 14.5px/1.35 var(--font-ui); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { flex: 0 0 auto; width: 36px; height: 20px; margin-top: 1px; border-radius: 20px; background: var(--bg-3); border: 1px solid var(--line-strong); position: relative; transition: background .15s, border-color .15s; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: var(--blue-fill); border-color: var(--blue-fill); }
.switch input:checked + .track::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .45; }
.switch strong { display: block; font-weight: 500; }
.switch small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; }
.switch-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); }
.switch-list .switch { padding: 14px 16px; }
.switch-list .switch + .switch { border-top: 1px solid var(--line); }
/* a detail that belongs to the switch above it (indented to line up with its words) */
.switch-list .switch-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 0 16px 14px 64px; }
.switch-list .switch-sub[hidden] { display: none; }
.switch-list .switch-sub label { color: var(--text-2); font-size: 13.5px; }
.switch-list .switch-sub input { width: 120px; }
.switch-list .switch-sub + .switch { border-top: 1px solid var(--line); }
.switch.inline-switch { align-items: center; }

/* Tags, chips, lamps */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-s); font: 600 11px/1.2 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: var(--bg-3); border: 1px solid var(--line); white-space: nowrap; }
.tag.blue { color: var(--blue); background: var(--blue-soft); border-color: transparent; }
.tag.green { color: var(--green); background: var(--green-soft); border-color: transparent; }
.tag.red { color: var(--red); background: var(--red-soft); border-color: transparent; }
.tag.amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.lamp.on, .lamp.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp.off, .lamp.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.lamp.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.off { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* Messages and toasts */
.msg { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.45; margin-bottom: 16px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); }
.msg.hidden { display: none; }
.msg.error { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft); color: color-mix(in srgb, var(--red) 55%, var(--text)); }
.msg.success { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); color: color-mix(in srgb, var(--green) 55%, var(--text)); }
.msg.warn { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); }
.msg.info { border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: var(--blue-soft); }
.msg .ic { margin-top: 2px; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 14px; border-radius: var(--r-l); background: var(--bg-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 14px; cursor: pointer; animation: toast-in .2s ease-out; }
.toast .ic { color: var(--green); }
.toast.error .ic { color: var(--red); }
.toast.info .ic { color: var(--blue); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Lists and rows */
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; min-height: 54px; font-size: 14.5px; }
.panel > .list-item + .list-item, .panel > .rule-cat + .rule-cat { border-top: 1px solid var(--line); }
.list-item > div:first-child { min-width: 0; }
.list-item .meta, .meta { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.list-item .meta code { overflow-wrap: anywhere; }   /* a long folder path wraps instead of pushing the row wider */
.list-item .actions, .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.list-item .actions.wrap, .actions.wrap { flex-wrap: wrap; flex: 0 1 auto; }     /* a row of buttons that may take several lines on a narrow screen (a zone has five) */
.list-item .rank { font: 600 15px var(--font-cond); color: var(--text-3); width: 30px; flex: 0 0 auto; }
.list-item.col { flex-direction: column; align-items: stretch; }
.kv { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 20px; }
.kv-row { display: contents; }
.kv dt { color: var(--text-3); font-size: 13.5px; padding: 11px 0 11px 18px; border-top: 1px solid var(--line); }
.kv dd { padding: 11px 18px 11px 0; border-top: 1px solid var(--line); word-break: break-word; }
.kv dt:first-of-type, .kv dd:first-of-type { border-top: 0; }
.empty { display: grid; justify-items: center; gap: 4px; padding: 34px 20px; text-align: center; color: var(--text-2); }
.empty .ic { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 6px; }
.empty strong { font-weight: 500; color: var(--text); }
.empty small { color: var(--text-3); font-size: 13px; max-width: 46ch; }
.skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.loading-rows { display: grid; gap: 14px; padding: 20px 18px; }
/* "Reading the game server's files…" (loading.js): shown inside the area being loaded, never over the whole page. `.block` replaces a
   list's contents; `.strip` sits above content that stays. Colours are all tokens, so both themes work without a second set. */
.gz-spin { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--blue); animation: gz-spin .8s linear infinite; }
@keyframes gz-spin { to { transform: rotate(360deg); } }
.gz-load { color: var(--text-2); font-size: 14px; line-height: 1.45; }
.gz-load-text { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.gz-load-slow { color: var(--text-3); font-size: 13px; max-width: 52ch; }
.gz-load.gz-block { display: grid; justify-items: center; gap: 10px; padding: 30px 18px 22px; text-align: center; }
.gz-load.gz-block .gz-spin { width: 24px; height: 24px; }
.gz-load-skel { display: grid; gap: 12px; width: min(100%, 440px); margin-top: 8px; }
.gz-load.gz-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; margin-bottom: 12px; background: var(--blue-soft); border: 1px solid var(--blue-ring); border-radius: var(--r); }
.gz-load.gz-strip .gz-load-slow { flex: 1 0 100%; padding-left: 30px; }
.gz-err .ic { flex: 0 0 auto; color: var(--red); }
.gz-err .gz-err-body { display: grid; gap: 2px; min-width: 0; text-align: left; }
.gz-err .gz-err-body strong { color: var(--text); font-weight: 600; }
.gz-err .gz-err-msg { color: var(--text-2); overflow-wrap: anywhere; max-width: 64ch; }
.gz-load.gz-block.gz-err { grid-template-columns: auto; justify-items: center; gap: 8px; }
.gz-load.gz-block.gz-err .ic { width: 26px; height: 26px; }
.gz-load.gz-block.gz-err .gz-err-body { text-align: center; justify-items: center; }
.gz-load.gz-strip.gz-err { flex-wrap: nowrap; background: var(--red-soft); border-color: var(--red); }
.gz-load.gz-strip.gz-err .gz-retry { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 520px) {
  .gz-load.gz-strip.gz-err { flex-wrap: wrap; }
  .gz-load.gz-strip.gz-err .gz-err-body { flex: 1 1 calc(100% - 40px); }
  .gz-load.gz-strip.gz-err .gz-retry { margin-left: 30px; }
}
/* No spinning for people who asked for less motion: the ring stays put (a still ring with one lit quarter), and the shimmer stops. */
@media (prefers-reduced-motion: reduce) {
  .gz-spin { animation: none; }
  .gz-load .skel { animation: none; }
}
.rule-cat h3 { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); padding: 16px 18px 6px; }
.rule-cat .list-item { padding-top: 9px; padding-bottom: 9px; min-height: 0; align-items: flex-start; }
/* A rule keeps the line breaks it was written with; its number hangs beside all of the lines. */
.rule-row { display: flex; gap: 12px; flex: 1; min-width: 0; }
.rule-num { flex: 0 0 auto; min-width: 1.5em; text-align: right; }
.rule-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
/* The "Add a rule" box: big to start with, grows as you type (where the browser can: field-sizing) and can be dragged taller. */
.rule-box { min-height: 11rem; max-height: 34rem; field-sizing: content; }
.field-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.field-foot .hint { margin: 0; }
.char-count { font: 500 12.5px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.char-count.warn { color: var(--amber); }
.char-count.over { color: var(--red); font-weight: 600; }

/* ─── Overview ───────────────────────────────────────────────────────────── */
.readouts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.readout { padding: 20px 22px 18px; border-left: 1px solid var(--line); min-width: 0; }
.readout:first-child { border-left: 0; }
.readout .k { font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.readout .v { margin-top: 12px; font: 600 38px/1 var(--font-cond); letter-spacing: .01em; display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.readout .v small { font: 500 15px var(--font-cond); color: var(--text-3); letter-spacing: .06em; margin-left: -4px; }
.readout .s { margin-top: 8px; color: var(--text-3); font-size: 13px; }

.checklist { display: grid; }
.check-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 18px; }
.check-item + .check-item { border-top: 1px solid var(--line); }
.check-item .state { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: transparent; }
.check-item.done .state { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.check-item.done .state .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.check-item .state .ic { width: 13px; height: 13px; }
.check-item.todo .state { border-color: var(--amber); }
.check-item strong { font-weight: 500; display: block; }
.check-item small { color: var(--text-3); font-size: 13px; display: block; margin-top: 1px; }
.progress { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 13.5px; margin-bottom: 14px; }
.progress .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; max-width: 260px; }
.progress .bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width .3s; }

/* ─── Feeds: event-channel rows ──────────────────────────────────────────── */
.channel-rows > .field { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 4px 24px; align-items: center; margin: 0; padding: 13px 18px; }
.channel-rows > .field + .field { border-top: 1px solid var(--line); }
.channel-rows label { margin: 0; color: var(--text); font-weight: 500; font-size: 14.5px; }
.channel-rows .hint { grid-column: 1; grid-row: 2; margin: 0; }
.channel-rows select, .channel-rows .combo { grid-column: 2; grid-row: 1 / span 2; }

/* ─── Activity feed ──────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: transparent; color: var(--text-2); }
.filter[aria-pressed="true"] { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.event-list { font-family: var(--font-mono); }
.event-row { display: grid; grid-template-columns: 70px 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 16px; font-size: 12.5px; line-height: 1.5; border-top: 1px solid var(--line); }
.event-row:first-child { border-top: 0; }
.event-row:hover { background: var(--bg-3); }
.event-time { color: var(--text-3); padding-top: 1px; }
.event-badge { --ev: var(--text-3); justify-self: start; padding: 1px 7px; border-radius: var(--r-s); font: 600 10.5px/1.5 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ev); background: color-mix(in srgb, var(--ev) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ev) 28%, transparent); }
.event-badge.connect, .event-badge.connecting, .event-badge.playerlist { --ev: var(--green); }
.event-badge.disconnect, .event-badge.raw, .event-badge.suicide, .event-badge.env_hit, .event-badge.session { --ev: var(--text-3); }
.event-badge.respawn, .event-badge.respawning { --ev: var(--teal); }
.event-badge.kill, .event-badge.death, .event-badge.hit, .event-badge.explosion { --ev: var(--red); }
.event-badge.placed, .event-badge.building { --ev: var(--amber); }
.event-badge.flag { --ev: var(--pink); }
.event-badge.chat, .event-badge.emote, .event-badge.other { --ev: var(--blue); }
.event-badge.unconscious, .event-badge.conscious { --ev: #b58de0; }
.event-row > span:last-child { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-chip { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-s); padding: 2px 9px; }
.pl-chip small { margin-left: 8px; color: var(--text-3); font-size: 11.5px; }

/* ─── Files ──────────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 14px; font: 500 13px var(--font-mono); color: var(--text-3); word-break: break-all; }
.breadcrumb button { height: auto; padding: 3px 7px; border: 0; background: none; color: var(--blue); font: inherit; border-radius: var(--r-s); }
.breadcrumb button:hover { background: var(--blue-soft); }
.breadcrumb .sep { color: var(--text-3); }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; font-size: 14px; cursor: pointer; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-row:hover { background: var(--bg-3); }
.file-row .fname { display: flex; align-items: center; gap: 11px; min-width: 0; word-break: break-all; }
.file-row .fname .ic { color: var(--text-3); }
.file-row .fname .ic.dir { color: var(--blue); }
.file-row .fmeta { color: var(--text-3); font: 12px var(--font-mono); flex: 0 0 auto; }
.code-block { background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font: 12.5px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-all; max-height: 460px; overflow: auto; color: var(--text); }

/* ─── Raid damage ────────────────────────────────────────────────────────── */
.damage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.damage-tile { position: relative; padding: 18px 20px 16px 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.damage-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--text-3); }
.damage-tile.raid::before { background: var(--red); box-shadow: 0 0 18px var(--red); }
.damage-tile.safe::before { background: var(--green); box-shadow: 0 0 18px var(--green); }
.damage-tile .dt-label { font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.damage-tile .dt-state { margin-top: 10px; font: 600 40px/1 var(--font-cond); letter-spacing: .02em; }
.damage-tile.raid .dt-state { color: var(--red); }
.damage-tile.safe .dt-state { color: var(--green); }
.damage-tile .dt-note { margin-top: 8px; color: var(--text-2); font-size: 13.5px; }
.damage-next { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 20px; border-radius: var(--r); font-size: 14.5px; background: var(--bg-2); border: 1px solid var(--line); }
.damage-next.open { border-color: color-mix(in srgb, var(--red) 50%, transparent); background: var(--red-soft); }
.damage-next.closed { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); }
.damage-next:empty { display: none; }
/* Server restarts: one card per game server, and the plain-words summary of what its plan will do */
.rs-list { display: grid; gap: 28px; }
.rs-preview { display: grid; gap: 6px; margin-top: 14px; padding: 13px 16px; border-radius: var(--r); font-size: 14.5px; background: var(--bg-2); border: 1px solid var(--line); }
.rs-preview code { padding: 1px 7px; border-radius: 6px; background: var(--bg-3, var(--line)); font-variant-numeric: tabular-nums; }
.rs-preview:empty { display: none; }
/* Airdrops: the status panel, and one row per airdrop file */
.ad-stack { display: grid; gap: 28px; margin-top: 22px; }
.ad-status { margin: 4px 0 18px; }
.ad-phase { display: grid; gap: 6px; padding: 15px 18px; border-radius: var(--r); font-size: 14.5px; background: var(--bg-2); border: 1px solid var(--line); }
.ad-phase.listed { border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: var(--amber-soft); }
.ad-phase.announced { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); }
.ad-big { font: 600 18px/1.25 var(--font-ui); }
.ad-files { display: grid; gap: 10px; }
.ad-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.ad-file.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.ad-name { display: flex; align-items: center; gap: 12px; flex: 1 1 250px; min-width: 0; }
.ad-text { display: grid; gap: 4px; min-width: 0; }
.ad-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ad-title strong { overflow-wrap: break-word; min-width: 0; }
.ad-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ad-emoji { font-size: 24px; line-height: 1; }
.ad-centre { font-variant-numeric: tabular-nums; }
.ad-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 13.5px; }
.ad-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ad-draw { flex: 0 0 auto; white-space: nowrap; }
.rt-files { display: grid; gap: 14px; }
.rt-file { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.rt-file.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.rt-settings { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.ad-file-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ad-uplist { display: grid; gap: 8px; margin: 14px 0 4px; }
.ad-up { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.ad-up .ad-text { flex: 1 1 auto; min-width: 0; }
/* Bounties: a target's row with the reasons it carries */
.bounty-row { gap: 6px; }
.bounty-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bounty-reasons { margin: 2px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; display: grid; gap: 2px; }
.dmg-window { display: grid; gap: 14px; padding: 16px 18px; margin-bottom: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.dmg-days { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip { height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; background: transparent; color: var(--text-2); }
.day-chip.on { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
.dmg-times { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.dmg-times .tfield label { margin-bottom: 6px; }
.dmg-times .dmg-remove { margin-left: auto; }
.dmg-empty { color: var(--text-3); font-size: 14px; padding: 4px 0 12px; }

/* ─── Trader ─────────────────────────────────────────────────────────────── */
.trader-head, .trader-row { display: grid; grid-template-columns: minmax(190px, 2.2fr) minmax(120px, 1.2fr) minmax(120px, 1.2fr) 92px 92px minmax(140px, 1.4fr) 84px; gap: 14px; align-items: center; }
.trader-row .tr-oos { color: var(--red); font-weight: 600; }
.trader-head { padding: 12px 18px; font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--bg-3); }
.trader-group { display: flex; align-items: baseline; gap: 10px; padding: 18px 18px 8px; font: 600 15px var(--font-ui); color: var(--text); }
.trader-group span { font-weight: 400; color: var(--text-3); font-size: 13px; }
.trader-row { padding: 12px 18px; border-top: 1px solid var(--line); }
.trader-row.is-new { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.trader-row .tr-cls { font-size: 12px; color: var(--text-3); margin-top: 5px; word-break: break-all; }
.trader-row .tr-side label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--text); }
.trader-row input:not([type=checkbox]) { height: 34px; }
.trader-row .tr-now { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.trader-row .tr-now b { color: var(--text); font-weight: 600; }
.tr-flag { display: inline-block; font: 600 10px/1.4 var(--font-cond); letter-spacing: .08em; padding: 1px 6px; border-radius: var(--r-s); background: var(--bg-3); color: var(--text-3); margin-left: 6px; vertical-align: middle; text-transform: uppercase; }
.trader-result { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.trader-result + .trader-result { border-top: 1px solid var(--line); }
.trader-result .tr-info { flex: 1; min-width: 0; }
.trader-result .tr-info small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.trader-result button { flex: 0 0 auto; height: 30px; font-size: 13px; padding: 0 12px; }
.trader-status { font: 600 10.5px/1.5 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--r-s); background: var(--bg-3); color: var(--text-2); }
.trader-status.pending { background: var(--amber-soft); color: var(--amber); }
.trader-status.accepted, .trader-status.claimed { background: var(--blue-soft); color: var(--blue); }
.trader-status.fulfilled { background: var(--green-soft); color: var(--green); }
.trader-status.cancelled, .trader-status.expired { background: var(--red-soft); color: var(--red); }
.trader-row .tr-mobile-label { display: none; }
@media (max-width: 860px) {
  .trader-head { display: none; }
  .trader-row .tr-mobile-label { display: block; margin: 0 0 6px; font-size: 13px; color: var(--text); }
  .trader-row { grid-template-columns: 1fr 1fr; }
  .trader-row .tr-name, .trader-row .tr-now { grid-column: 1 / -1; }
}

/* ─── Role picker ────────────────────────────────────────────────────────── */
.role-picker { position: relative; }
.role-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.role-picker-chips:empty { display: none; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--blue-soft); color: var(--blue); }
.role-chip button { height: auto; width: 18px; padding: 0; border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; border-radius: 50%; opacity: .7; }
.role-chip button:hover { opacity: 1; background: var(--red-soft); color: var(--red); }
.role-picker-results { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 240px; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.role-picker-result { padding: 9px 13px; cursor: pointer; font-size: 14px; }
.role-picker-result:hover, .role-picker-result.active { background: var(--bg-3); }
.role-picker-empty { padding: 10px 13px; font-size: 13px; color: var(--text-3); }

/* ─── Searchable dropdowns (combo.js) ────────────────────────────────────── */
/* A <select data-search> keeps working underneath — invisible, laid over its button — and the button is drawn to match the select
   it replaces, so nothing around it moves. The list itself lives on <body> and is positioned with fixed coordinates, because most of
   these fields sit inside panels that clip anything hanging out of them. */
.combo { position: relative; display: block; min-width: 0; }
.combo-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
button.combo-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 38px; padding: 0 36px 0 12px;
  font: 400 15px/1.2 var(--font-ui); color: var(--text); text-align: left;
  background: var(--bg-input) var(--chevron) no-repeat right 12px center / 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .12s, box-shadow .12s;
}
button.combo-btn:hover { background-color: var(--bg-input); border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-3)); }
button.combo-btn:active { transform: none; }
button.combo-btn:focus-visible, button.combo-btn[aria-expanded="true"] { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
button.combo-btn.is-invalid { border-color: var(--red); }
button.combo-btn.is-empty .combo-text { color: var(--text-3); }
button.combo-btn:disabled { opacity: .5; }
.combo-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

.combo-scrim { position: fixed; inset: 0; z-index: 119; background: rgba(0, 0, 0, .5); }
.combo-pop {
  position: fixed; z-index: 120; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: var(--shadow);
  animation: combo-in .12s ease-out;
}
.combo-pop.above { animation-name: combo-in-up; }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes combo-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.combo-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); }
.combo-search > .ic { color: var(--text-3); }
.combo-input { flex: 1; min-width: 0; width: auto; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.combo-input:hover, .combo-input:focus { border: 0; box-shadow: none; }
button.combo-close { display: none; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--text-3); }
.combo-list { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 4px; max-height: 288px; scrollbar-width: thin; }
.combo-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); font-size: 14.5px; line-height: 1.25; color: var(--text); cursor: pointer; }
.combo-opt.is-active { background: var(--bg-3); }
.combo-opt[aria-selected="true"] { font-weight: 600; }
.combo-opt.is-none .combo-text { color: var(--text-3); font-weight: 400; }
.combo-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.combo-hint { flex: 0 1 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; letter-spacing: .02em; }
.combo-opt.is-active .combo-hint { color: var(--text-2); }   /* the raised row is a touch lighter, so its faint text needs to be a touch stronger */
.combo-opt mark { background: var(--blue-soft); color: var(--blue); border-radius: 2px; box-shadow: 0 0 0 1px var(--blue-soft); font-weight: 700; }
.combo-check { flex: 0 0 auto; color: var(--blue); }
.combo-empty { padding: 20px 14px; text-align: center; color: var(--text-2); font-size: 14px; }
/* On a phone the list is a sheet at the top of the screen: the keyboard comes up from the bottom and would cover anything lower. */
.combo-pop.sheet { left: 8px; right: 8px; width: auto; max-height: calc(var(--vvh, 100vh) - 16px); }
.combo-pop.sheet .combo-list { max-height: calc(var(--vvh, 100vh) - 80px); }
.combo-pop.sheet .combo-opt { padding: 12px; font-size: 16px; }
.combo-pop.sheet button.combo-close { display: inline-grid; place-items: center; }

/* ─── Player lookup ──────────────────────────────────────────────────────── */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.profile-head .avatar { width: 40px; height: 40px; font-size: 16px; }
.profile-head strong { font-size: 16px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.mini-stats > div { padding: 16px 18px; border-left: 1px solid var(--line); min-width: 0; }
.mini-stats > div:first-child { border-left: 0; }
.mini-stats .k { font: 600 11px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.mini-stats .v { margin-top: 8px; font: 600 24px/1.1 var(--font-cond); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mini-stats .v.small { font: 500 14px/1.4 var(--font-ui); }
.profile-section { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.profile-section:last-child { border-bottom: 0; }
.profile-section h4 { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }

/* ─── Login / server picker ──────────────────────────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); min-height: 100vh; }
.auth-art { position: relative; overflow: hidden; background: var(--bg-1); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; }
.auth-art::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; }
.contours { position: absolute; inset: -4%; background: var(--contour); -webkit-mask: url(contours.svg) center / cover no-repeat; mask: url(contours.svg) center / cover no-repeat; }
.auth-art > *:not(.contours) { position: relative; }
.auth-art .brand { padding: 0; }
.auth-art h2 { font: 600 clamp(38px, 5vw, 64px)/1 var(--font-cond); letter-spacing: .005em; max-width: 14ch; text-wrap: balance; }
.auth-art .sheet-note { display: flex; gap: 28px; flex-wrap: wrap; font: 500 12px var(--font-mono); color: var(--text-3); letter-spacing: .04em; }
.auth-art .sheet-note b { color: var(--text-2); font-weight: 500; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box h1 { font: 600 34px/1.05 var(--font-cond); margin: 0 0 10px; }
.auth-box p { color: var(--text-2); }
.auth-box .btn.primary { width: 100%; height: 46px; margin-top: 26px; font-size: 15px; }
.auth-fine { margin-top: 22px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-3); }
.picker { min-height: 100vh; }
.picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.picker-bar .brand { padding: 0; }
.picker-bar .right { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; }
.picker-main { position: relative; max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.picker-main::before { content: ''; position: absolute; inset: 0 -200px auto -200px; height: 300px; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.picker-main > * { position: relative; }
.server-list { display: grid; margin-top: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.server-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: var(--text); }
.server-item + .server-item { border-top: 1px solid var(--line); }
.server-item:hover { background: var(--bg-3); text-decoration: none; }
.server-item .guild-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.server-item .who { flex: 1; min-width: 0; }
.server-item .who strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-item .who span { color: var(--text-3); font-size: 13.5px; }
.server-item .ic { color: var(--text-3); }
.server-item:hover .ic { color: var(--blue); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .main { padding: 0 28px 80px; } .block { gap: 10px 36px; } }
@media (max-width: 960px) {
  .app { display: block; }
  .side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: none; }
  .side.open { transform: none; box-shadow: var(--shadow); }
  .scrim { display: block; position: fixed; z-index: 55; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .mbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; height: 54px; padding: 0 14px; background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .mbar .title { font: 600 18px var(--font-cond); letter-spacing: .04em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar button { width: 38px; padding: 0; }
  .main { padding: 0 18px 72px; }
  .page-head { padding-top: 28px; }
  .page-head h1 { font-size: 34px; }
  .block { grid-template-columns: minmax(0, 1fr); padding: 26px 0; }
  .block-meta { margin-bottom: 8px; }
  .readouts { grid-template-columns: repeat(2, 1fr); }
  .readout:nth-child(3) { border-left: 0; }
  .readout:nth-child(n+3) { border-top: 1px solid var(--line); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { min-height: 280px; padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-art h2 { font-size: 40px; }
}
@media (max-width: 700px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .row > .field { flex-basis: 100%; }
  .channel-rows > .field { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .channel-rows .hint { grid-row: auto; }
  .channel-rows select, .channel-rows .combo { grid-column: 1; grid-row: auto; }
  .mini-stats { grid-template-columns: 1fr; }
  .mini-stats > div { border-left: 0; border-top: 1px solid var(--line); }
  .mini-stats > div:first-child { border-top: 0; }
  .event-row { grid-template-columns: 62px minmax(0, 1fr); }
  .event-row .event-badge { grid-column: 2; grid-row: 1; }
  .event-row > span:last-child { grid-column: 1 / -1; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .kv dd { padding-left: 18px; border-top: 0; padding-top: 2px; }
  .list-item { flex-wrap: wrap; }
  .block.danger-zone { padding: 20px 18px; }
  #toasts { left: 16px; right: 16px; bottom: 16px; }
}

/* ─── Custom builds ──────────────────────────────────────────────────────── */
.dropzone {
  display: grid; justify-items: center; gap: 4px; padding: 34px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-l); background: var(--bg-2); color: var(--text-2);
  transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.over, .dropzone:focus-visible { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.dropzone .ic { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 6px; }
.dropzone.over .ic, .dropzone:hover .ic { color: var(--blue); }
.dropzone strong { font-weight: 500; color: var(--text); font-size: 15.5px; }
.dropzone small { color: var(--text-3); font-size: 13px; max-width: 52ch; }

.fold { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); }
.fold summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 14px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.fold[open] summary::before { transform: rotate(45deg); }
.fold summary:hover { color: var(--text); }
.fold-body { padding: 2px 16px 16px; }
.fold + .hint { margin-top: 12px; }

.plain-list { margin: 6px 0 0 18px; }
.plain-list li + li { margin-top: 3px; }
.hint.bad { color: var(--red); }

.radio-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; cursor: pointer; color: var(--text); font: 400 14.5px/1.35 var(--font-ui); }
.turn-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; align-items: center; }
.turn-grid .radio-row { padding: 0; }
.inline-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.inline-field input[type=number] { width: 112px; }
.unit { color: var(--text-3); font-size: 13.5px; }

.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.nudge select { width: auto; height: 30px; padding: 0 30px 0 10px; font-size: 13px; background-position: right 9px center; }
.nudge-label { font: 600 11px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.nudge-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }

.plots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; align-items: start; }
.plot { background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.plot figcaption { padding: 10px 14px; border-bottom: 1px solid var(--line); font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.plot svg { display: block; width: 100%; height: auto; }
.plot .p-grid { stroke: var(--line); stroke-width: 1; }
.plot .p-grid.strong { stroke: var(--line-strong); }
.plot .p-label { fill: var(--text-3); font: 9.5px var(--font-mono); }
.plot .p-dot { fill: var(--blue); }
.plot .p-tick { stroke: color-mix(in srgb, var(--blue) 60%, var(--text-2)); stroke-width: 1.3; stroke-linecap: round; }
.plot .p-anchor { fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; }
.plot .p-north path { fill: var(--text-2); }
.plot .p-north text { fill: var(--text-3); font: 600 10px var(--font-cond); letter-spacing: .06em; }
.plot .p-scale { fill: none; stroke: var(--text-2); stroke-width: 1.4; }
.plot .p-scale text { stroke: none; fill: var(--text-2); font: 10px var(--font-mono); }
.plot .m-map { fill: color-mix(in srgb, var(--blue) 5%, var(--bg-input)); stroke: var(--line-strong); }
.plot .m-before { fill: none; stroke: var(--text-3); stroke-dasharray: 3 2; stroke-width: 1.3; }
.plot .m-after { fill: var(--amber); fill-opacity: .25; stroke: var(--amber); stroke-width: 1.6; }
.plot .m-link { stroke: var(--text-3); stroke-dasharray: 2 3; stroke-width: 1; }
.plot .m-player { fill: var(--green); }
.plot-caption { padding: 8px 14px 12px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.plot.map svg { max-width: 380px; margin: 0 auto; }

.mini-stats.four { grid-template-columns: repeat(4, 1fr); }
.mini-stats .unit { font: 500 14px var(--font-cond); letter-spacing: .04em; }
.mini-stats .s { margin-top: 4px; color: var(--text-3); font-size: 12.5px; }
.panel > .mini-stats:last-child { border-bottom: 0; }

@media (max-width: 960px) {
  .plots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plot.map { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; }
  .plot.map figcaption { grid-column: 1 / -1; }
  .plot.map svg { max-width: none; }
}
@media (max-width: 700px) {
  .plots { grid-template-columns: minmax(0, 1fr); }
  .plot.map { display: block; }
  .plot.map svg { max-width: 380px; }
  .mini-stats.four { grid-template-columns: repeat(2, 1fr); }
  .mini-stats.four > div { border-top: 0; border-left: 1px solid var(--line); }
  .mini-stats.four > div:nth-child(odd) { border-left: 0; }
  .mini-stats.four > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .turn-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .turn-grid .inline-field { margin-bottom: 10px; }
}

/* ─── Player map ──────────────────────────────────────────────────────────── */
/* The picture is a survey sheet: markers are the one warm colour on it. The overlays that sit ON the map (readout,
   names, grid labels) use a fixed dark ink so they read over the picture in either theme; the chrome around it
   uses the normal tokens. */
.pm {
  --pm-marker: #ff9f1c;               /* the same orange the Discord map uses */
  --pm-ink: rgba(9, 12, 17, .86);
  display: grid; grid-template-columns: minmax(0, min(84vh, 880px)) minmax(280px, 380px); gap: 24px; justify-content: start;
  align-items: start; padding-top: 22px;
}
.pm-main { min-width: 0; }
.pm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; min-height: 30px; }
.pm-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); min-width: 0; }
.pm-status strong { color: var(--text); font-weight: 600; }
.pm-live { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); animation: pm-pulse 2.4s ease-in-out infinite; }
.pm-live.stale { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); animation: none; }
.pm-live.idle { background: var(--text-3); box-shadow: 0 0 0 3px var(--bg-3); animation: none; }
.pm-live.bad { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); animation: none; }
@keyframes pm-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.pm-toggles { margin: 0; }

.pm-viewport {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #0b1016;
  border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: var(--shadow);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.pm-viewport.dragging { cursor: grabbing; }
.pm-viewport:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pm-image { display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
.pm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pm-svg * { vector-effect: non-scaling-stroke; }
.pm-gridline { stroke: rgba(255, 255, 255, .17); stroke-width: 1px; }
.pm-zone { fill: rgba(232, 173, 68, .16); stroke: #e8ad44; stroke-width: 1.6px; stroke-dasharray: 6 4; }
.pm-viewport[data-grid="off"] .pm-gridline, .pm-viewport[data-grid="off"] .pm-gl { display: none; }
.pm-viewport[data-zones="off"] .pm-zone, .pm-viewport[data-zones="off"] .pm-zlabel { display: none; }
.pm-layer { position: absolute; inset: 0; pointer-events: none; }

/* Everything on the map keeps its size as the picture zooms: the world scales by --s, these scale back by 1/--s. */
.pm-gl, .pm-zlabel, .pm-pin, .pm-marker, .pm-cluster { position: absolute; transform-origin: 0 0; }
.pm-gl { padding: 2px 4px; font: 600 11px/1 var(--font-mono); color: rgba(255, 255, 255, .8); text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; transform: scale(calc(1 / var(--s, 1))); }
.pm-gl-x { top: 0; }
.pm-gl-z { left: 0; }
.pm-zlabel { transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); transform-origin: 50% 50%; white-space: nowrap; font: 600 12px/1 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: #ffe2a3; text-shadow: 0 0 4px #000, 0 0 3px #000, 0 0 2px #000; }
.pm-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; transform: scale(calc(1 / var(--s, 1))); transform-origin: 50% 50%; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(9, 12, 17, .7), 0 1px 6px rgba(0, 0, 0, .6); }
.pm-pin::before, .pm-pin::after { content: ''; position: absolute; background: #fff; left: 50%; top: 50%; }
.pm-pin::before { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.pm-pin::after { width: 10px; height: 2px; transform: translate(-50%, -50%); }

.pm-marker {
  all: unset; box-sizing: border-box; position: absolute; pointer-events: auto; cursor: pointer;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; transform: scale(calc(1 / var(--s, 1))); transform-origin: 50% 50%;
}
.pm-dot {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pm-marker); color: #16110a;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .6); font: 700 12px/1 var(--font-cond); font-variant-numeric: tabular-nums;
}
.pm-name {
  display: none; position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); z-index: 1;
  padding: 3px 8px; border-radius: 4px; background: var(--pm-ink); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  font: 600 12px/1.25 var(--font-ui); white-space: nowrap;
}
.pm-marker.flip .pm-name { left: auto; right: calc(100% + 5px); }   /* near the east edge the name goes on the other side, not off the map */
.pm-viewport[data-names="on"] .pm-name, .pm-marker:hover .pm-name, .pm-marker:focus-visible .pm-name, .pm-marker.sel .pm-name { display: block; }
.pm-marker:hover, .pm-marker:focus-visible { z-index: 4; }
.pm-marker:focus-visible .pm-dot { outline: 2px solid var(--blue); outline-offset: 2px; }
.pm-marker.sel { z-index: 5; }
.pm-marker.sel .pm-dot { box-shadow: 0 0 0 3px var(--blue), 0 2px 8px rgba(0, 0, 0, .65); }
/* Players standing close together fold into one badge: bigger, with a halo, showing how many. */
.pm-cluster {
  all: unset; box-sizing: border-box; position: absolute; pointer-events: auto; cursor: pointer; z-index: 2;
  width: 32px; height: 32px; margin: -16px 0 0 -16px; transform: scale(calc(1 / var(--s, 1))); transform-origin: 50% 50%;
}
/* A dark disc with an amber ring and count, so it can't be mistaken for player number 2 (an amber disc). */
.pm-cluster .pm-dot { width: 32px; height: 32px; background: #1a1409; color: #ffc46b; border: 3px solid var(--pm-marker); font-size: 14px; box-shadow: 0 0 0 4px rgba(255, 159, 28, .3), 0 1px 6px rgba(0, 0, 0, .7); }
.pm-cluster:hover, .pm-cluster:focus-visible { z-index: 4; }
.pm-cluster:hover .pm-dot { background: #2a1f0c; }
.pm-cluster:focus-visible .pm-dot { outline: 2px solid var(--blue); outline-offset: 3px; }

.pm-zoom { position: absolute; right: 12px; top: 12px; z-index: 10; display: grid; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); cursor: default; }
.pm-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; background: var(--bg-2); display: grid; place-items: center; color: var(--text); }
.pm-btn + .pm-btn { border-top: 1px solid var(--line); }
.pm-btn:hover { background: var(--bg-3); border-color: transparent; }
.pm-btn .ic { width: 17px; height: 17px; }
.pm-readout { position: absolute; left: 12px; bottom: 12px; z-index: 10; padding: 5px 10px; border-radius: var(--r); background: var(--pm-ink); color: #eef2f8; border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; pointer-events: none; }
.pm-tip { position: absolute; z-index: 20; max-width: 260px; display: grid; gap: 2px; padding: 9px 12px; border-radius: var(--r); background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 13px; pointer-events: none; }
.pm-tip strong { font: 600 15px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.pm-tip .mono { color: var(--text-2); }
.pm-tipzone { color: var(--amber); font-weight: 500; }
.pm-empty { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.pm-empty > div { display: grid; justify-items: center; gap: 4px; max-width: 320px; padding: 18px 22px; text-align: center; border-radius: var(--r-l); background: color-mix(in srgb, var(--bg-2) 94%, transparent); border: 1px solid var(--line-strong); box-shadow: var(--shadow); color: var(--text-2); }
.pm-empty .ic { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 4px; }
.pm-empty strong { color: var(--text); font-weight: 500; }
.pm-empty small { color: var(--text-3); font-size: 13px; }
.pm-caption { margin-top: 10px; color: var(--text-3); font-size: 13px; }

.hm-frame {
  position: relative; width: 100%; max-width: 820px; aspect-ratio: 1 / 1; overflow: hidden;
  background: #0b1016; border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: var(--shadow);
  margin: 18px auto 0;
}
.hm-image { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.hm-image.loaded { opacity: 1; }
.hm-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; }
.hm-empty > div { display: grid; justify-items: center; gap: 4px; max-width: 320px; padding: 18px 22px; text-align: center; border-radius: var(--r-l); background: color-mix(in srgb, var(--bg-2) 94%, transparent); border: 1px solid var(--line-strong); box-shadow: var(--shadow); color: var(--text-2); }
.hm-empty .ic { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 4px; }
.hm-empty strong { color: var(--text); font-weight: 500; }
.hm-empty small { color: var(--text-3); font-size: 13px; }

/* Traffic map: the busiest named places, under the picture (same width as the picture's frame) */
.tr-places { max-width: 820px; margin: 14px auto 0; }
.tr-places-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.tr-places-head h2 { margin: 0; font: 600 13px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.tr-places-head span { color: var(--text-3); font-size: 13px; }
.tr-list { list-style: none; margin: 0; padding: 6px 0; }
.tr-list li { display: grid; grid-template-columns: 28px minmax(0, 11rem) minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; padding: 9px 20px; }
.tr-list li + li { border-top: 1px solid var(--line); }
.tr-rank { color: var(--text-3); font: 600 15px/1 var(--font-cond); font-variant-numeric: tabular-nums; }
.tr-name { display: grid; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.tr-name small { color: var(--text-3); font-size: 12px; font-weight: 400; }
.tr-bar { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.tr-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2563eb, #60a5fa 55%, #facc15); }
.tr-share { text-align: right; font: 600 15px/1 var(--font-cond); font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 560px) {
  .tr-list li { grid-template-columns: 24px minmax(0, 1fr) 3rem; padding: 9px 16px; }
  .tr-bar { grid-column: 2 / 4; grid-row: 2; }
}

.pm-side { min-width: 0; }
.pm-side .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-list { position: relative; max-height: min(62vh, 620px); overflow: auto; }
/* a row is its button (the player) and, beside it, the coordinates as a link — a link can't live inside a button; on a narrow screen the coordinates drop under the name, as they always were */
.pm-item { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); }
.pm-item:first-child { border-top: 0; }
.pm-item:hover { background: var(--bg-3); }
.pm-item:has(.pm-row.sel) { background: var(--blue-soft); }
.pm-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; padding: 10px 16px; cursor: pointer; }
.pm-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pm-spot { flex: 0 0 auto; padding: 0 16px 0 4px; white-space: nowrap; }
@media (max-width: 560px) {
  .pm-row { flex-basis: 100%; padding-bottom: 2px; }
  .pm-spot { flex-basis: 100%; padding: 0 16px 10px 52px; white-space: normal; }
}
.pm-num { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pm-marker); color: #16110a; font: 700 12px/1 var(--font-cond); }
.pm-who { flex: 1 1 auto; min-width: 0; display: grid; }
.pm-who strong { font-weight: 500; overflow-wrap: anywhere; }
.pm-who .meta { margin-top: 0; }
.pm-row .tag { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-unplaced { padding: 14px 16px; border-top: 1px solid var(--line); }
.pm-unplaced h4 { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.pm-unplaced p { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .pm { grid-template-columns: minmax(0, 1fr); }
  .pm-list { max-height: none; }
}
@media (max-width: 700px) {
  .pm { gap: 18px; }
  .pm-zoom { right: 8px; top: 8px; }
  .pm-btn { width: 40px; height: 40px; }
  .pm-readout { left: 8px; bottom: 8px; }
}

/* ─── Bunker rotator ─────────────────────────────────────────────────────── */
.bnk-notices { display: grid; gap: 10px; }
.bnk-notices:not(:empty) { margin-top: 16px; }
.bnk-notices .msg { margin: 0; }
.bnk-row { align-items: center; }
.bnk-row.bad { background: linear-gradient(90deg, var(--red-soft), transparent 55%); }
.bnk-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bnk-name strong { font-weight: 600; }
.bnk-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.bnk-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.bnk-note .ic { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--text-3); }
.bnk-note.ok .ic { color: var(--green); }
.bnk-note.warn .ic { color: var(--amber); }
.bnk-note.error { color: color-mix(in srgb, var(--red) 55%, var(--text)); }
.bnk-note.error .ic { color: var(--red); }
.bnk-result { margin-top: 16px; padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r); white-space: pre-wrap; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.bnk-tree { margin: 10px 0 6px; padding: 12px 16px; text-align: left; font: 13px/1.6 var(--font-mono); color: var(--text-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; max-width: 100%; }
.chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.chip-x:hover { background: var(--bg-2); color: var(--red); }
.chip-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.chip-x .ic { width: 12px; height: 12px; }
/* Add bunkers: the dropped files (one row each) and what will be saved from them */
#bnkAddWork { margin-top: 22px; }
.bnk-file { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 160px 40px; gap: 8px 16px; align-items: start; padding: 13px 18px; font-size: 14.5px; }
.panel > .bnk-file + .bnk-file { border-top: 1px solid var(--line); }
.bnk-file.bad { background: linear-gradient(90deg, var(--red-soft), transparent 55%); }
.bnk-file-name { min-width: 0; overflow-wrap: anywhere; }
.bnk-file input, .bnk-file select { width: 100%; }
.bnk-file .meta { margin-top: 3px; }
.bnk-file > .btn { justify-self: end; }
.bnk-plan { align-items: stretch; gap: 2px; }
.bnk-plan .meta { overflow-wrap: anywhere; }
.bnk-rep { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; font-size: 14px; cursor: pointer; }
.bnk-rep input { margin-top: 3px; }
@media (max-width: 700px) {
  .bnk-row { flex-wrap: wrap; }
  .bnk-side { width: 100%; justify-content: space-between; }
  .bnk-file { grid-template-columns: minmax(0, 1fr) 40px; }
  .bnk-file > div:nth-child(2), .bnk-file > div:nth-child(3) { grid-column: 1 / -1; }
  .bnk-file > .btn { grid-row: 1; grid-column: 2; }
}


/* ─── Vehicle spawns ─────────────────────────────────────────────────────── */
.vh-notices, .vh-notes { display: grid; gap: 10px; }
.vh-notices:not(:empty) { margin-top: 16px; }
.vh-notes:not(:empty) { margin-top: 14px; }
.vh-notices .msg, .vh-notes .msg { margin: 0; }

/* the vehicle tiles: a name over a small label, one of them on */
.vh-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.vh-picks > .hint { grid-column: 1 / -1; margin: 0; }
.vh-pick { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: start; align-content: center; gap: 4px; height: auto; min-height: 58px; padding: 10px 12px; text-align: left; white-space: normal; border-radius: var(--r-l); }
.vh-pick-name { font: 600 14.5px/1.2 var(--font-ui); color: var(--text); }
.vh-pick-meta { font: 600 11px/1.2 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.vh-pick[aria-checked="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.vh-pick:focus-visible, .vh-colour:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* the colours of the picked vehicle, each with its dot */
.vh-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-colours[hidden], .vh-pick[hidden] { display: none; }
.vh-colour { height: 34px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13.5px; color: var(--text-2); }
.vh-colour[aria-checked="true"] { color: var(--text); border-color: var(--blue); background: var(--blue-soft); }
.vh-colour.noparts::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--amber); }
.vh-dot { --c: transparent; display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1.5px solid color-mix(in srgb, var(--text-3) 65%, var(--c)); }
.vh-dot.plain { background: none; border: 1.5px dashed var(--text-3); }
.vh-colour .vh-dot { width: 13px; height: 13px; }

/* the list */
.vh-row { align-items: center; }
.vh-row.bad { background: linear-gradient(90deg, var(--red-soft), transparent 55%); }
.vh-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vh-name strong { font-weight: 600; }
.vh-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vh-side .btn.armed { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .vh-row.fresh { animation: vh-fresh 2.6s ease-out 1; }
}
@keyframes vh-fresh { from { background: var(--blue-soft); } to { background: transparent; } }

/* what happened after pressing Add */
.vh-result { margin-top: 16px; padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r); white-space: pre-wrap; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.vh-result.warn { border-left-color: var(--amber); }
.vh-result[hidden] { display: none; }
@media (max-width: 700px) {
  .vh-row { flex-wrap: wrap; }
  .vh-side { width: 100%; justify-content: flex-start; }
  .vh-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ─── Auto shop ──────────────────────────────────────────────────────────── */
.shp-notices { display: grid; gap: 10px; }
.shp-notices:not(:empty) { margin-top: 16px; }
.shp-notices .msg { margin: 0; }

/* the on / off switch on top */
.shp-master { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 26px 0 18px; padding: 20px 24px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r-l); }
.shp-master.on { border-left-color: var(--green); background: linear-gradient(90deg, var(--green-soft), transparent 45%), var(--bg-2); }
.shp-master-head { display: flex; align-items: center; gap: 12px; }
.shp-master-head h2 { font: 600 21px/1.2 var(--font-cond); letter-spacing: .02em; }
.shp-master p { margin-top: 6px; max-width: 62ch; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.shp-bigswitch { align-items: center; gap: 14px; flex: 0 0 auto; }
.shp-bigswitch .track { width: 56px; height: 30px; margin-top: 0; }
.shp-bigswitch .track::after { top: 3px; left: 3px; width: 22px; height: 22px; }
.shp-bigswitch input:checked + .track { background: var(--green); border-color: var(--green); }
.shp-bigswitch input:checked + .track::after { transform: translateX(26px); }
.shp-sw-label { min-width: 52px; font: 600 13px/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.shp-master.on .shp-sw-label { color: var(--green); }

/* the list */
.shp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 14px; }
.shp-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.shp-search { position: relative; flex: 1 1 240px; max-width: 320px; }
.shp-search .ic { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--text-3); pointer-events: none; }
.shp-search input { width: 100%; padding-left: 34px; }
.shp-toolbar select { flex: 0 0 auto; width: 200px; }
.icon-btn { width: 38px; padding: 0; justify-content: center; }
.shp-kbd { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .16); font: 600 11px/1.5 var(--font-mono); letter-spacing: 0; }
.shp-table { overflow: hidden; }
.shp-tr { display: grid; grid-template-columns: minmax(96px, .7fr) minmax(0, 2.6fr) minmax(0, 1fr) minmax(88px, .8fr) 56px 84px; gap: 0 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.shp-tr:first-child { border-top: 0; }
.shp-th { padding-top: 10px; padding-bottom: 10px; background: var(--bg-3); color: var(--text-2); font: 600 11.5px/1.2 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; }
.shp-th button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.shp-th button:hover { color: var(--text); }
.shp-th button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.shp-th button .ic { width: 11px; height: 11px; opacity: .35; }
.shp-th [aria-sort] .ic { opacity: 1; color: var(--blue); }
.shp-row:hover { background: var(--bg-3); }
.shp-row.off .shp-c-name strong { color: var(--text-2); }
.shp-row.off { opacity: .72; }
.shp-c-id { font: 12.5px/1.3 var(--font-mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-c-name { min-width: 0; }
.shp-c-name strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-c-name small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-badges { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.shp-badges .tag { font-size: 10.5px; padding: 2px 7px; }
.shp-c-cat { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-c-price { font-variant-numeric: tabular-nums; font-weight: 500; }
.shp-c-price small { color: var(--text-3); font-weight: 400; }
.shp-hide-label { display: none; }
.shp-c-act { display: flex; justify-content: flex-end; gap: 6px; }
.shp-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); color: var(--text-2); cursor: pointer; }
.shp-ib:hover { color: var(--text); border-color: var(--line-strong); }
.shp-ib.danger:hover { color: var(--red); border-color: var(--red); }
.shp-ib:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.shp-ib .ic { width: 15px; height: 15px; }
.shp-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin-top: 4px; background: var(--red-soft); border-radius: var(--r); font-size: 14px; }
.shp-foot { margin: 10px 2px 0; }

/* the editor */
.shp-edhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 26px 0 16px; }
.shp-edhead h2 { font: 600 22px/1.2 var(--font-cond); letter-spacing: .02em; }
.shp-edgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.shp-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.shp-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.shp-card > header h3 { font: 600 17px/1.2 var(--font-cond); letter-spacing: .03em; }
.shp-card-body { padding: 20px; display: grid; gap: 18px; }
.shp-card-body .field { margin: 0; }
.shp-wide { grid-column: 1 / -1; }
.shp-quick { margin-top: 8px; }
.shp-quick .chip-btn { height: 28px; padding: 0 11px; font-size: 12.5px; }
.shp-quick .chip-btn.on { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.shp-chipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 46px; margin-bottom: 8px; padding: 8px; background: var(--bg-input); border: 1px solid var(--line-strong); border-radius: var(--r); }
.shp-chipbox:empty::before { content: attr(data-empty); padding: 0 6px; color: var(--text-3); font-size: 14px; }
.shp-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 11px; background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; color: var(--text); }
.shp-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-chip .ct { padding: 0 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 600 12px/1.6 var(--font-mono); }
.shp-chip.unknown { border-style: dashed; border-color: var(--amber); }
.shp-chip button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--text-3); cursor: pointer; }
.shp-chip button:hover { background: var(--bg-2); color: var(--text); }
.shp-chip button.x:hover { color: var(--red); }
.shp-chip button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.shp-chip button .ic { width: 12px; height: 12px; }
.shp-role-chip { padding-left: 12px; }
.shp-role-dot { width: 9px; height: 9px; margin-right: 2px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.shp-picker { position: relative; }
.shp-picker-bar { display: flex; align-items: center; gap: 0; background: var(--bg-input); border: 1px solid var(--line-strong); border-radius: var(--r); }
.shp-picker-bar:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.shp-picker-bar > .ic { flex: 0 0 auto; width: 15px; height: 15px; margin-left: 12px; color: var(--text-3); }
.shp-picker-bar input { flex: 1 1 auto; min-width: 0; border: 0; background: none; box-shadow: none; outline: none; padding-left: 10px; }
.shp-picker-bar select { flex: 0 0 auto; width: auto; max-width: 42%; border: 0; border-left: 1px solid var(--line); border-radius: 0; background-color: transparent; box-shadow: none; outline: none; }
.shp-picker-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 340px; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.shp-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; width: 100%; padding: 9px 14px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); color: var(--text); cursor: pointer; font: inherit; }
.shp-opt:first-child { border-top: 0; }
.shp-opt:hover, .shp-opt.active { background: var(--blue-soft); }
.shp-opt .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-opt .cls { grid-column: 1; font: 12px/1.3 var(--font-mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-opt .grp { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; color: var(--text-3); text-align: right; }
.shp-opt.custom .nm { color: var(--blue); }
.shp-opt-empty { padding: 14px; color: var(--text-3); font-size: 14px; }
.shp-clear { margin-top: 8px; align-items: center; }
.shp-disc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(90px, .5fr) auto; gap: 0 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line); }
.shp-disc:first-child { border-top: 0; padding-top: 0; }
.shp-disc .field { margin: 0; }
.shp-disc label { margin-bottom: 4px; font-size: 12.5px; }
.shp-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 0; background: linear-gradient(to top, var(--bg-0) 70%, transparent); }

/* purchases and the settings' no-spawn areas */
.shp-buy { align-items: flex-start; }
.shp-buy.bad { background: linear-gradient(90deg, var(--red-soft), transparent 55%); }
.shp-remove { margin-top: 12px; padding: 14px 16px; max-width: 440px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); }
.shp-remove .row { margin-top: 12px; }
.shp-ex { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px 0; border-top: 1px solid var(--line); }
.shp-ex .field:nth-child(1) { grid-column: 1 / 6; }
.shp-ex .field:nth-child(2) { grid-column: 1 / 3; }
.shp-ex .field:nth-child(3) { grid-column: 3 / 5; }
.shp-ex .field:nth-child(4) { grid-column: 5 / 7; }
.shp-ex > button { grid-column: 6; grid-row: 1; justify-self: end; }
.shp-ex:first-child { border-top: 0; padding-top: 0; }
.shp-ex:last-child { padding-bottom: 0; }
.shp-ex .field { margin: 0; }
.shp-ex label { margin-bottom: 4px; font-size: 12.5px; }

@media (max-width: 980px) {
  .shp-edgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .shp-tr { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 16px; padding: 14px 16px; }
  .shp-th { display: none; }
  .shp-c-id { display: none; }
  .shp-c-name { grid-column: 1 / 3; grid-row: 1; }
  .shp-c-act { grid-column: 3; grid-row: 1; }
  .shp-c-cat { grid-column: 1; grid-row: 2; }
  .shp-c-price { grid-column: 2; grid-row: 2; }
  .shp-c-hide { grid-column: 3; grid-row: 2; justify-self: end; }
  .shp-hide-label { display: inline; }
  .shp-master { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .shp-buy { flex-wrap: wrap; }
  .shp-disc { grid-template-columns: minmax(0, 1fr) minmax(0, 90px); }
  .shp-disc button { grid-column: 1 / -1; justify-self: start; }
  .shp-search { max-width: none; flex-basis: 100%; }
  .shp-toolbar select { flex: 1 1 100%; width: 100%; }
  .shp-toolbar-actions { margin-left: 0; width: 100%; }
  .shp-toolbar-actions .btn.primary { flex: 1 1 auto; justify-content: center; }
}

/* ─── Zone rules ─────────────────────────────────────────────────────────────
   (shares the Auto shop's master banner, readouts, chip boxes and editor cards: the classes are the shp-* ones above) */
.zr-rule, .zr-ban { align-items: flex-start; }
.zr-rule.off, .zr-ban.off { opacity: .72; }
.zr-rule-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.zr-rule .shp-confirm, .zr-ban .shp-confirm { margin-top: 8px; }
.zr-sql { margin: 10px 0 0; padding: 12px 14px; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--r); font: 12.5px/1.55 var(--font-mono); white-space: pre; overflow-x: auto; color: var(--text); }
.zr-trig { display: grid; gap: 12px; margin-bottom: 10px; padding: 14px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-l); }
.zr-trig-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zr-trig-head strong { font: 600 15px/1.3 var(--font-cond); letter-spacing: .04em; }
.zr-trig .field { margin: 0; }
.zr-trig .chips .chip-btn.on { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.zr-pat { margin-top: 2px; }
@media (max-width: 700px) {
  .zr-rule { flex-wrap: wrap; }
  .zr-rule-side { width: 100%; justify-content: flex-end; }
}

/* ─── Permissions ────────────────────────────────────────────────────────── */
.access-chip { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; padding: 6px 10px; border-radius: var(--r); background: var(--amber-soft); color: var(--amber); font: 600 11.5px/1.2 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; }
/* The sidebar's game-server picker: which of the guild's game servers the page is about. Hidden unless there is a real
   choice (see renderServerPicker in guild.js). */
.server-pick { display: block; margin: 0 2px 8px; }
.server-pick-label { display: block; margin: 0 0 4px 4px; color: var(--text-3); font: 600 11px/1.2 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; }
.server-pick select { width: 100%; height: 34px; font-size: 13px; padding: 0 30px 0 10px; background-position: right 9px center; }
.perm-roles { display: grid; gap: 12px; }
.perm-role { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: border-color .15s; }
.perm-role.dirty { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.perm-toggle { width: 100%; height: auto; min-height: 58px; padding: 12px 18px; justify-content: flex-start; gap: 14px; border: 0; border-radius: 0; background: none; text-align: left; white-space: normal; font-size: 15px; }
.perm-toggle:hover { background: var(--bg-3); border-color: transparent; }
.perm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; box-shadow: 0 0 0 3px var(--bg-3); }
.perm-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.perm-id { font: 12px var(--font-mono); color: var(--text-3); font-weight: 400; margin-left: 6px; }
.perm-sum { color: var(--text-3); font-size: 13.5px; font-weight: 400; margin-left: auto; text-align: right; }
.perm-badges { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.perm-badges:empty { display: none; }
.perm-chev { color: var(--text-3); transition: transform .15s; }
.perm-toggle[aria-expanded="true"] .perm-chev { transform: rotate(180deg); }
.perm-body { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
.perm-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.perm-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 4px; }
.perm-col-head h4 { font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.perm-col-head small { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.perm-group { margin-top: 12px; }
.perm-group-title { font: 600 11px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin: 0 0 8px 2px; }
.perm-body .switch-list { background: var(--bg-input); }
.perm-body .switch-list .switch { padding: 12px 14px; }
.perm-page { color: var(--text-3); font-weight: 400; }
.perm-risk { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--amber); }
.perm-risk .ic { flex: 0 0 auto; margin-top: 2px; width: 13px; height: 13px; }
.perm-cmds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.perm-cmds code { border: 0; padding: 1px 6px; font-size: 11.5px; color: var(--text-2); }
.perm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line); }
.perm-presets-label { font: 600 11.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.perm-presets-note { width: 100%; color: var(--text-3); font-size: 13px; }
.chip-btn { height: 30px; padding: 0 13px; border-radius: 999px; background: var(--bg-3); font-size: 13px; color: var(--text-2); }
.chip-btn:hover { color: var(--text); }
.perm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.perm-body > .msg { margin: 16px 0 0; }
.perm-notes { display: grid; gap: 12px; padding: 0; list-style: none; max-width: 70ch; }
.perm-notes li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.perm-notes li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 8px; height: 1px; background: var(--blue); }
.perm-notes strong { color: var(--text); }
.server-item .tag { margin-left: 4px; vertical-align: 1px; }
@media (max-width: 900px) { .perm-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .perm-toggle { flex-wrap: wrap; row-gap: 4px; }
  .perm-sum { order: 5; flex-basis: 100%; margin-left: 26px; text-align: left; }
  .perm-body { padding: 4px 12px 16px; }
}

/* ─── Tickets (Community → Tickets) ──────────────────────────────────────── */
/* The panel/multi-panel editor: a column of collapsible cards (there are nine — a panel has a lot to say) next to a sticky live preview. */
.tk-edlayout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tk-edcards { display: grid; gap: 14px; min-width: 0; }
.tk-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.tk-card > summary { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; list-style: none; }
.tk-card > summary::-webkit-details-marker { display: none; }
.tk-card > summary h3 { flex: 1 1 auto; font: 600 15.5px/1.2 var(--font-cond); letter-spacing: .03em; }
.tk-card > summary .chev { color: var(--text-3); transition: transform .15s; flex: 0 0 auto; }
.tk-card[open] > summary .chev { transform: rotate(180deg); }
.tk-card[open] > summary { border-bottom: 1px solid var(--line); }
.tk-card-body { padding: 18px 20px; display: grid; gap: 16px; }
.tk-card-body .field { margin: 0; }
.tk-preview-col { position: sticky; top: 18px; display: grid; gap: 10px; }
.tk-preview-head { font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
/* A small mock of a Discord embed and its button, themed to the dashboard but shaped like the real thing. */
.tk-embed { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; display: grid; gap: 10px; border-left: 4px solid var(--tk-accent, var(--blue)); }
.tk-embed-title { font: 600 16px/1.3 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.tk-embed-desc { font-size: 14px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-embed-desc:empty, .tk-embed-title:empty { display: none; }
.tk-embed-media { max-width: 100%; border-radius: var(--r); display: block; }
.tk-embed-thumb { position: absolute; top: 16px; right: 18px; width: 64px; height: 64px; border-radius: var(--r); object-fit: cover; }
.tk-embed-wrap { position: relative; padding-right: 0; }
.tk-embed-wrap.has-thumb { padding-right: 76px; }
.tk-embed-footer { font-size: 12px; color: var(--text-3); }
.tk-embed-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-embed-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--r); font: 500 14px/1 var(--font-ui); width: max-content; }
.tk-embed-btn.blurple { background: var(--blue-fill); color: #fff; }
.tk-embed-btn.green { background: var(--green); color: #062; }
.tk-embed-btn.red { background: var(--red-fill); color: #fff; }
.tk-embed-btn.grey { background: var(--bg-3); color: var(--text); border: 1px solid var(--line-strong); }
.tk-embed-content { font-size: 14px; color: var(--text); }
/* A compact grid of permission switches — ten of them for a panel or a team, two to a row. */
.tk-permgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-input); overflow: hidden; }
.tk-permgrid .switch { padding: 11px 14px; font-size: 13.5px; }
.tk-permgrid .switch:nth-child(odd) { border-right: 1px solid var(--line); }
.tk-permgrid .switch:nth-child(n+3) { border-top: 1px solid var(--line); }
/* The panels checklist inside a multi-panel's editor — reuses the switch-list look for a plain checkbox list. */
.tk-checklist { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); }
.tk-checklist label { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-size: 14px; }
.tk-checklist label + label { border-top: 1px solid var(--line); }
.tk-checklist input { width: 17px; height: 17px; accent-color: var(--blue); }
.tk-checklist .off { color: var(--text-3); }
/* Support hours: one row per day. */
.tk-day-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tk-day-row:first-child { border-top: 0; }
.tk-day-label { flex: 0 0 42px; font-weight: 600; font-size: 13.5px; }
.tk-day-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--blue); flex: 0 0 auto; }
.tk-day-windows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }
.tk-day-windows input[type="time"] { width: 108px; }
.tk-day-row.off .tk-day-windows { color: var(--text-3); font-size: 13px; }
/* The Open tab: one row per ticket that is currently open. */
.tk-open-row .tag.claimed { background: var(--green-soft); color: var(--green); }
@media (max-width: 980px) {
  .tk-edlayout { grid-template-columns: minmax(0, 1fr); }
  .tk-preview-col { position: static; }
}
@media (max-width: 700px) {
  .tk-permgrid { grid-template-columns: minmax(0, 1fr); }
  .tk-permgrid .switch:nth-child(odd) { border-right: 0; }
  .tk-permgrid .switch:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* ─── Game servers ───────────────────────────────────────────────────────── */
/* A saved password/token: shown as a disabled placeholder with a Change button, never the real value. */
.gs-secret-row { display: flex; gap: 8px; align-items: center; }
.gs-secret-row input { flex: 1 1 auto; }
.gs-secret-row .btn { flex: 0 0 auto; }
.gs-secret-row input[disabled] { color: var(--text-3); font-style: italic; }

/* ─── Gas strike ─────────────────────────────────────────────────────────────
   (shares the Auto shop's master banner, readouts, chip boxes, no-spawn rows and save bar: those are the shp-* classes above) */
.stk-master .shp-sw-label { min-width: 64px; }
/* the price is the hero tile: wider than the others, and a number never breaks in the middle (100,000,000 has to fit whole) */
#stkStats { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); }
#stkStats .readout .v { flex-wrap: wrap; gap: 0 10px; }
#stkStats .readout .v small { margin-left: 0; }
#stkStats .stk-big { font-size: 38px; white-space: nowrap; }
#stkStats .stk-big.long { font-size: 32px; }
@media (max-width: 960px) {
  #stkStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stkStats .readout:nth-child(1), #stkStats .readout:nth-child(4) { grid-column: 1 / -1; }
  #stkStats .readout:nth-child(n+2) { border-top: 1px solid var(--line); }
  #stkStats .readout:nth-child(2), #stkStats .readout:nth-child(4) { border-left: 0; }
  #stkStats .readout:nth-child(3) { border-left: 1px solid var(--line); }
}
#stkStats .readout .s a { color: var(--blue); text-decoration: none; }
#stkStats .readout .s a:hover { text-decoration: underline; }
.stk-row .shp-remove { margin-top: 12px; }

/* the price: the number a strike costs, set big enough to read at a glance and type into without squinting */
.stk-price { padding: 22px 24px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.stk-price.bad { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.stk-price-label { margin-bottom: 12px; font: 600 11.5px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.stk-price-input { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .12s, box-shadow .12s; }
.stk-price-input:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-3)); }
.stk-price-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.stk-price.bad .stk-price-input { border-color: var(--red); }
.stk-price-input input { flex: 1 1 auto; min-width: 0; height: 72px; padding: 0 18px; background: transparent; border: 0; box-shadow: none; font: 600 44px/1 var(--font-cond); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.stk-price-input input:hover, .stk-price-input input:focus { border: 0; box-shadow: none; }
.stk-cur { flex: 0 0 auto; padding-right: 20px; font: 600 15px/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.stk-price-note { min-height: 22px; margin-top: 12px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.stk-price-note strong { color: var(--text); font-weight: 600; }
.stk-price-note .bad { color: var(--red); }
.stk-scale { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.stk-scale:empty { display: none; }
.stk-scale .ic { flex: 0 0 auto; margin-top: 2px; color: var(--text-3); }
.stk-scale strong { color: var(--text); font-weight: 600; }
.stk-price .shp-quick { margin-top: 14px; }

/* "Where it may land": the limits sit in fieldsets that are switched off (greyed, untouchable, values kept) while strikes may land anywhere */
.stk-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity .15s ease; }
.stk-fieldset:disabled { opacity: .42; }
.stk-fieldset:disabled * { cursor: not-allowed; }
#stkGasLimits { margin-top: 16px; }

@media (max-width: 700px) {
  .stk-price { padding: 18px 16px 16px; }
  .stk-price-input input { height: 62px; padding: 0 14px; font-size: 36px; }
  .stk-cur { padding-right: 14px; }
}

/* ─── Conquest ─────────────────────────────────────────────────────────────────
   (shares the Gas strike's master banner, the readouts, the quick-pick chips and the save bar: those are the shp-* and stk-* classes above) */
/* a tag that carries a value to be copied as it is (a flag's class name is case-sensitive: Flag_BrainZ, not FLAG_BRAINZ) */
.tag.raw { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: 0; text-transform: none; }
#cqStats .readout .v { flex-wrap: wrap; gap: 0 10px; overflow-wrap: anywhere; }
#cqStats .readout .v small { margin-left: 0; }
#cqStats .readout .s a { color: var(--blue); }

/* the standings read like a scoreboard: the rank and the points are the two things the eye should find */
.cq-rank { gap: 18px; }
.cq-pos { flex: 0 0 38px; text-align: center; font: 600 24px/1 var(--font-cond); font-variant-numeric: tabular-nums; color: var(--text-3); }
.cq-rank.r1 { background: linear-gradient(90deg, var(--amber-soft), transparent 40%); }
.cq-rank.r1 .cq-pos { color: var(--amber); }
.cq-rank.r2 .cq-pos { color: var(--text-2); }
.cq-rank.r3 .cq-pos { color: color-mix(in srgb, var(--amber) 55%, var(--text-3)); }
.cq-who { flex: 1 1 0; min-width: 0; }
.cq-score { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; }
.cq-score b { font: 600 30px/1 var(--font-cond); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cq-score small { color: var(--text-3); font: 600 11px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; }
.cq-warn { color: var(--amber); }
.cq-ok { color: var(--green); }

/* a flag: the edge says whether it stands */
.cq-flag { align-items: flex-start; border-left: 3px solid transparent; }
.cq-flag.up { border-left-color: var(--green); background: linear-gradient(90deg, var(--green-soft), transparent 35%); }
.cq-flag.unsure { border-left-color: var(--amber); }
.cq-flag-main { flex: 1 1 0; min-width: 0; }
.cq-flag-main .meta { overflow-wrap: anywhere; }
.cq-holder { margin-top: 8px; font-size: 14.5px; overflow-wrap: anywhere; }
.cq-markbox, .cq-confirm { margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: var(--r); background: var(--amber-soft); font-size: 14px; line-height: 1.5; }
.cq-confirm { margin-top: 16px; }
.cq-markbox p, .cq-confirm p { margin-bottom: 10px; }

/* the check against the logs: what the bot has written down, beside what the logs say */
.cq-checkhead { font-size: 14.5px; line-height: 1.5; }
.cq-checkrow { gap: 8px; }
.cq-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-size: 14px; overflow-wrap: anywhere; }
.cq-cmp small { display: block; margin-bottom: 2px; color: var(--text-3); font: 600 11px/1.2 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; }

/* the one-time setup SQL */
.cq-sql { max-height: 340px; padding: 14px 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-input); color: var(--text-2); font: 12.5px/1.55 var(--font-mono); white-space: pre; }

@media (max-width: 700px) {
  .cq-rank { gap: 12px; }
  .cq-score b { font-size: 26px; }
  .cq-flag { flex-direction: column; align-items: stretch; }
  .cq-flag .bnk-side { flex-wrap: wrap; }
  .cq-cmp { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Gifs (the Banter block on Server setup) ─────────────────────────────────── */
.gif-box { margin-top: 16px; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); }
.gif-head { display: flex; align-items: center; gap: 10px; }
.gif-head strong { font-weight: 600; }
.gif-text { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.gif-text a { color: var(--blue); }
.gif-meta { margin-top: 8px; }
.gif-meta:empty { display: none; }
.gif-box .actions-bar { margin-top: 12px; }
.gif-box .msg { margin: 12px 0 0; }
.gif-preview { margin: 14px 0 0; }
.gif-preview[hidden] { display: none; }
.gif-preview img { display: block; max-width: min(100%, 260px); max-height: 220px; border-radius: var(--r); background: var(--bg-3); }
.gif-preview figcaption { margin-top: 6px; }

/* ─── The coordinate picker: a map you click to choose a spot (coord_picker.js) — the gas strike's X and Z, on the status page and on the dashboard ──────────────────────────────────── */
.gz-picker { display: grid; gap: 8px; width: min(100%, 62vh); margin-inline: auto; min-width: 0; }
.gz-pick-view { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-3); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gz-pick-view:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gz-pick-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.gz-pick-img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.gz-pick-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gz-pick-grid line { stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gz-pick-pin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; background: var(--red-fill); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .5); transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); pointer-events: none; }
.gz-pick-pin[hidden] { display: none; }
.gz-pick-pin::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; }
.gz-pick-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.gz-pick-read { flex: 1 1 160px; min-width: 0; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.gz-pick-read strong { color: var(--text); font: 600 13.5px var(--font-mono); white-space: nowrap; }
.gz-pick-zoom { display: inline-flex; gap: 6px; }
.gz-pick-zoom[hidden] { display: none; }
.gz-pick-zoom .gz-pick-btn { min-width: 40px; height: 36px; padding: 0 10px; font-size: 18px; line-height: 1; }

/* The "Add a Discord" placeholder under the list of servers (payments come later): readable, not clickable. */
.add-discord { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.add-discord .btn:disabled { opacity: 1; cursor: default; }
.add-discord .meta { max-width: 60ch; }

/* The "Add a Discord" panel: the servers this person administers, each with the one thing that makes sense for it (pay, add the bot, open it). */
.add-discord .btn.primary { padding-inline: 18px; }
.add-discord .msg { margin: 0; max-width: 60ch; }
.add-panel { width: min(100%, 640px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.add-panel-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 12px; }
.add-panel-head strong { font: 600 17px/1.2 var(--font-cond); letter-spacing: .02em; color: var(--text); }
.add-list { display: flex; flex-direction: column; }
.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 20px; border-top: 1px solid var(--line); }
.add-row .guild-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.add-row .who { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.add-row .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-row .who > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--text-3); }
.add-row .btn { flex: 0 0 auto; }
.add-row-msg { flex: 1 1 100%; margin: 4px 0 0; }
.add-discord .add-fine { padding: 12px 20px 16px; border-top: 1px solid var(--line); max-width: none; }
.add-list > .msg, .add-list > .loading-rows { margin: 0 20px 16px; }

/* A server with no subscription: the page that replaces its dashboard. */
.locked-box { padding-top: 56px; max-width: 640px; }
.locked-box h1 { font: 600 38px/1.06 var(--font-cond); letter-spacing: .005em; color: var(--text); max-width: 20ch; text-wrap: balance; }
.locked-box .actions-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.locked-box .msg { margin-top: 22px; }
.locked-box .meta { margin-top: 14px; max-width: 60ch; }

/* The Billing card at the bottom of the Overview. */
.billing-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 20px; }
.billing-line .billing-text { flex: 1 1 260px; min-width: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.billing-line .billing-text strong { color: var(--text); }

/* "Which game server do you want to edit?" — one big button per game server. */
.server-gate .gate-list { display: flex; flex-direction: column; margin-top: 26px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.server-gate .gate-list:empty { display: none; }
/* (a <button>, so the global button rule is undone: it is 38px tall, one centred nowrap line — a card with a name, a map and a tag in it has to grow to hold them) */
.gate-card { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; height: auto; min-height: 76px; padding: 16px 20px; border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; white-space: normal; cursor: pointer; font: inherit; }
.gate-card + .gate-card { border-top: 1px solid var(--line); }
.gate-card:hover, .gate-card:focus-visible { background: var(--bg-3); }
.gate-card .guild-icon { width: 44px; height: 44px; border-radius: 12px; }
.gate-card .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gate-card .who strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-card .who > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--text-3); }
.gate-card > .ic { color: var(--text-3); flex: 0 0 auto; }

/* A file row in the file browser: the size, and a small download button beside it. */
.file-row .fmeta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.file-row .fmeta .icon-btn { width: 28px; height: 28px; }