/* ===========================================================
   Deepsea Watch v2 — hi-fi dark sonar aesthetic
   Palette: deep navy + cyan + amber + warm-red overdue
   Type:   Inter (UI) + JetBrains Mono (numerals, technical labels)
   =========================================================== */

:root {
  /* base surfaces */
  --bg:           #07101a;
  --bg-2:         #0c1825;
  --surface:      #0f1d2c;
  --surface-2:    #142536;
  --surface-3:    #1a2e42;
  --border:       #1f3550;
  --border-soft:  #182b41;
  --ink:          #e6eef7;
  --ink-2:        #b7c5d6;
  --muted:        #7a8ea4;
  --muted-2:      #56697e;

  /* phase colors */
  --live:         oklch(0.78 0.13 200);   /* cyan */
  --live-dim:     oklch(0.42 0.10 200);
  --live-glow:    oklch(0.78 0.13 200 / 0.18);
  --window:       oklch(0.80 0.16 80);    /* amber */
  --window-dim:   oklch(0.42 0.10 80);
  --window-glow:  oklch(0.80 0.16 80 / 0.20);
  --gap:          oklch(0.58 0.04 250);   /* steel */
  --gap-dim:      oklch(0.32 0.03 250);
  --overdue:      oklch(0.68 0.20 30);    /* warm red */
  --overdue-dim:  oklch(0.38 0.14 30);
  --overdue-glow: oklch(0.68 0.20 30 / 0.20);

  --radius:       10px;
  --radius-sm:    6px;
  --shadow-1:     0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(20, 60, 100, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(8, 30, 50, 0.4), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 60px;
}

/* ============== Header ============== */
.hdr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.hdr-center { display: flex; justify-content: center; }
.hdr-left { display: flex; gap: 14px; align-items: center; }
.hdr-titleblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.logo {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--live);
  box-shadow: 0 0 24px var(--live-glow) inset;
  flex-shrink: 0;
}
.hdr-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: oklch(0.82 0.16 80);
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.hdr h1 {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 3px;
  line-height: 1;
}
.hdr-watch { font-weight: 300; }
.hdr-sub {
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 6px;
  margin-left: 2px;
}
.hdr-tag {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

.hdr-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 320px;
}
.hdr-actions { justify-content: flex-end; align-items: center; }
.hdr-counts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cnt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 9px 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.cnt-live    { color: var(--live);    border-color: var(--live-dim); }
.cnt-window  { color: var(--window);  border-color: var(--window-dim); }
.cnt-overdue { color: var(--overdue); border-color: var(--overdue-dim); }
.cnt-unk     { color: var(--muted); }
.hdr-actions { display: flex; gap: 6px; align-items: center; }

/* ============== Switch ============== */
.cargo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cargo:hover { background: var(--surface-2); }
.cargo:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

.cargo-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, oklch(0.68 0.20 30 / 0.30), oklch(0.80 0.16 80 / 0.18));
  transition: width 1s linear;
  z-index: 0;
}
.cargo-idle .cargo-fill { background: transparent; }
.cargo-ready .cargo-fill { background: oklch(0.78 0.13 150 / 0.18); width: 100% !important; transition: none; }

.cargo-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  min-height: 64px;
}
.cargo-compact .cargo-body { padding: 8px 14px; gap: 12px; min-height: 52px; }
.cargo-meta { display: flex; align-items: center; gap: 14px; }
.cargo-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-2);
  background: var(--bg-2);
  flex-shrink: 0;
}
.cargo-text { display: flex; flex-direction: column; }
.cargo-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.cargo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

.cargo-time-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cargo-time {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cargo-ready .cargo-time {
  font-size: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cargo-action {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* state styling */
.cargo-active {
  border-color: oklch(0.68 0.20 30 / 0.5);
  box-shadow: 0 0 24px oklch(0.68 0.20 30 / 0.15);
}
.cargo-active .cargo-icon { color: oklch(0.80 0.16 80); border-color: oklch(0.80 0.16 80 / 0.4); }
.cargo-active .cargo-time { color: oklch(0.80 0.16 80); }
.cargo-active .cargo-label { color: oklch(0.80 0.16 80); }

.cargo-ready {
  border-color: oklch(0.78 0.13 150 / 0.6);
  box-shadow: 0 0 28px oklch(0.78 0.13 150 / 0.25);
  animation: ready-pulse 2.4s ease-in-out infinite;
}
@keyframes ready-pulse {
  0%, 100% { box-shadow: 0 0 28px oklch(0.78 0.13 150 / 0.25); }
  50%      { box-shadow: 0 0 40px oklch(0.78 0.13 150 / 0.45); }
}
.cargo-ready .cargo-icon { color: oklch(0.82 0.16 150); border-color: oklch(0.82 0.16 150 / 0.5); }
.cargo-ready .cargo-time { color: oklch(0.82 0.16 150); }
.cargo-ready .cargo-label { color: oklch(0.82 0.16 150); }

/* ============== Region selector ============== */
.region-select {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.region-opt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  font-weight: 600;
  padding: 0 10px;
  height: 32px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.region-opt:last-child { border-right: none; }
.region-opt:hover { color: var(--ink); background: var(--surface-3); }
.region-opt.active {
  background: oklch(0.78 0.13 200 / 0.18);
  color: var(--live);
  box-shadow: inset 0 -2px 0 var(--live);
}

/* ============== Compact cargo (in header) ============== */
.cargo-compact {
  width: 100%;
}
.cargo-compact .cargo-icon { width: 28px; height: 28px; }
.cargo-compact .cargo-icon svg { width: 16px; height: 16px; }
.cargo-compact .cargo-text { gap: 1px; }
.cargo-compact .cargo-label { font-size: 11px; letter-spacing: 0.8px; }
.cargo-compact .cargo-sub { font-size: 9.5px; letter-spacing: 0.5px; margin-top: 1px; }
.cargo-compact .cargo-time { font-size: 20px; }
.cargo-compact.cargo-ready .cargo-time { font-size: 13px; letter-spacing: 0.4px; }
.cargo-compact .cargo-action { font-size: 9px; }
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.switch:hover { background: var(--surface-3); }
.switch input { display: none; }
.switch-track {
  position: relative;
  width: 28px;
  height: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.switch-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 10px; height: 10px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s;
}
.switch input:checked + .switch-track {
  background: oklch(0.78 0.13 200 / 0.25);
  border-color: var(--live-dim);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(14px);
  background: var(--live);
  box-shadow: 0 0 6px var(--live);
}

/* ============== Buttons ============== */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;  /* anchors with .btn shouldn't carry the browser underline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  /* swallow the hover/active changes when disabled */
  background: var(--surface-2);
  border-color: var(--border);
  transform: none;
}
.btn-primary {
  background: oklch(0.78 0.13 200 / 0.18);
  border-color: var(--live-dim);
  color: var(--live);
  box-shadow: inset 0 -2px 0 var(--live);
}
.btn-primary:hover { background: oklch(0.78 0.13 200 / 0.28); color: var(--live); border-color: var(--live-dim); }
.btn-down {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-2);
}
.btn-down:hover { background: var(--surface-3); color: var(--overdue); border-color: var(--overdue-dim); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

.btn-link {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.btn-link:hover { color: var(--ink); }
.btn-link-danger:hover { color: var(--overdue); }

/* ============== Help ============== */
.help {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
.help-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--live);
  margin-bottom: 6px;
}
/* inline icon (used in help text to demo button states) */
.inline-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: oklch(0.78 0.13 200 / 0.14);
  border: 1px solid var(--live-dim);
  border-radius: 4px;
  color: var(--live);
  box-shadow: 0 0 8px var(--live-glow);
  vertical-align: -5px;
  margin: 0 2px;
}
.inline-icon-btn svg { width: 12px; height: 12px; fill: currentColor; }

/* red kill dot legend swatch */
.lg-mark-kill::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.68 0.22 25);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px oklch(0.68 0.22 25);
}
.help-d { color: var(--ink-2); font-size: 13px; }

.help-legend {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.help-legend .help-h { margin-bottom: 10px; }
.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.lg-item { display: inline-flex; align-items: center; gap: 8px; }
.lg-swatch {
  display: inline-block;
  width: 28px; height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-soft);
}
.lg-past-event { background: repeating-linear-gradient(-45deg, oklch(0.78 0.13 200 / 0.5) 0 4px, oklch(0.78 0.13 200 / 0.15) 4px 8px); }
.lg-gap { background: oklch(0.40 0.02 250 / 0.45); }
.lg-spawn-window { background: repeating-linear-gradient(-45deg, oklch(0.80 0.16 80 / 0.7) 0 3px, oklch(0.80 0.16 80 / 0.25) 3px 6px); border-color: oklch(0.80 0.16 80 / 0.5); }
.lg-event-certain { background: oklch(0.78 0.13 200 / 0.4); }
.lg-event-uncertain-end { background: repeating-linear-gradient(45deg, oklch(0.78 0.13 200 / 0.5) 0 3px, transparent 3px 6px); }

.lg-mark {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
}
.lg-mark-live::before { display: none; }
.lg-mark-live::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.lg-mark-down::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--muted); transform: translateX(-50%);
}
.lg-mark-down::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; background: var(--muted); transform: translate(-50%, -50%) rotate(45deg);
}
.lg-mark-now::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--live); transform: translateX(-50%); box-shadow: 0 0 6px var(--live);
}

.lg-callout-swatch {
  display: inline-block;
  width: 28px; height: 14px;
  position: relative;
}
.lg-callout-swatch::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--window); transform: translateY(-50%);
}

/* ============== Row ============== */
.list { display: flex; flex-direction: column; gap: 10px; }

.row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.row::before {
  /* left phase accent */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--muted-2);
  transition: background 0.3s, box-shadow 0.3s;
}
.row-phase-live::before    { background: var(--live);    box-shadow: 0 0 18px var(--live-glow); }
.row-phase-window::before  { background: var(--window);  box-shadow: 0 0 18px var(--window-glow); }
.row-phase-gap::before     { background: var(--gap-dim); }
.row-phase-down_only::before { background: var(--gap-dim); }
.row-phase-overdue::before { background: var(--overdue); box-shadow: 0 0 18px var(--overdue-glow); }
.row-phase-unknown::before { background: transparent; }

.row-phase-live    { background: linear-gradient(90deg, oklch(0.78 0.13 200 / 0.04), transparent 30%), var(--surface); }
.row-phase-window  { background: linear-gradient(90deg, oklch(0.80 0.16 80 / 0.05), transparent 30%), var(--surface); }
.row-phase-overdue { background: linear-gradient(90deg, oklch(0.68 0.20 30 / 0.05), transparent 30%), var(--surface); }

.row-grid {
  display: grid;
  grid-template-columns: 120px 220px 1fr 280px;
  gap: 20px;
  align-items: center;
  padding: 16px 20px 16px 22px;
}

/* === col-world === */
.col-world { display: flex; flex-direction: column; gap: 8px; position: relative; }
.world-head { display: flex; align-items: center; gap: 8px; }
.world-name {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* shared micro-button base for boats + skull.
   Idle = clearly visible (solid border, full opacity, subtle surface);
   active = amber/window theme color with matching glow. */
.boats-toggle,
.micro-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-2);
  cursor: pointer;
  opacity: 1;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.boats-toggle:hover,
.micro-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-soft);
  color: var(--ink);
}
.boats-toggle:disabled,
.micro-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.boats-toggle.active,
.micro-btn.active {
  border-color: var(--window-dim);
  background: oklch(0.80 0.16 80 / 0.16);
  color: var(--window);
  box-shadow: 0 0 10px var(--window-glow);
}
.boats-toggle.active:hover,
.micro-btn.active:hover {
  background: oklch(0.80 0.16 80 / 0.24);
  border-color: var(--window-dim);
  color: var(--window);
}

.boat-icon { width: 13px; height: 13px; }
.skull-icon { width: 13px; height: 13px; }

.kill-countdown {
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: oklch(0.72 0.22 25);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}
.kill-countdown::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(0.65 0.20 25);
  box-shadow: 0 0 6px oklch(0.65 0.20 25);
  animation: pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* === badge === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  width: fit-content;
}
.badge-live    { color: var(--live);    border-color: var(--live-dim);    background: oklch(0.78 0.13 200 / 0.08); }
.badge-est     { color: var(--live);    border-color: var(--live-dim);    background: oklch(0.78 0.13 200 / 0.04); opacity: 0.85; border-style: dashed; }
.badge-window  { color: var(--window);  border-color: var(--window-dim);  background: oklch(0.80 0.16 80 / 0.10); }
.badge-gap     { color: var(--ink-2);   border-color: var(--border); }
.badge-down    { color: var(--ink-2);   border-color: var(--border); }
.badge-overdue { color: var(--overdue); border-color: var(--overdue-dim); background: oklch(0.68 0.20 30 / 0.10); }
.badge-unk     { color: var(--muted-2); border-style: dashed; }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}
.dot-live    { background: var(--live);    box-shadow: 0 0 8px var(--live);    animation: pulse 1.8s ease-in-out infinite; }
.dot-est     { background: var(--live-dim); }
.dot-window  { background: var(--window);  box-shadow: 0 0 8px var(--window);  animation: pulse 1.8s ease-in-out infinite; }
.dot-gap     { background: var(--muted); }
.dot-overdue { background: var(--overdue); box-shadow: 0 0 10px var(--overdue); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* === col-primary === */
.col-primary { display: flex; flex-direction: column; gap: 6px; }
.primary { display: flex; flex-direction: column; }
.primary-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.primary-num-tail {
  font-size: 16px;
  color: var(--muted);
  font-weight: 400;
}
.primary-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.primary-spawn .primary-num    { color: var(--window); font-size: 22px; }
.primary-overdue .primary-num  { color: var(--overdue); font-size: 22px; }
.primary-estimate .primary-num { color: var(--ink-2); }
.primary-estimate .approx { color: var(--muted); margin-right: 6px; font-weight: 400; }
.row-phase-live .primary-num   { color: var(--live); }

.next-spawn {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
}
.ns-label {
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 10px;
  white-space: nowrap;
}
.ns-time {
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

/* === col-timeline === */
.col-timeline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px; /* room above bar for now-label */
}
.tl-track {
  position: relative;
  width: 100%;
  height: 34px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ---- timeline annotations (toggled by Legend switch) ----
   Collapse to zero height when the legend is off so the callout sits
   tight to the track. Expand smoothly when legend toggled on. */
.tl-annotations {
  position: relative;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, height 0.2s ease;
}
.tl-with-legend .tl-annotations { opacity: 1; height: 22px; }
.tl-ann {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.tl-ann-below { top: 0; }
.tl-ann-text {
  background: transparent;
  padding: 0;
  margin-top: 4px;
}
.tl-ann-line {
  width: 1px;
  height: 5px;
  background: var(--muted);
  opacity: 0.6;
}
.tl-ann-below .tl-ann-line { margin-bottom: 0; }
.tl-track {
  position: relative;
  width: 100%;
  height: 34px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tl-seg {
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
}
.tl-past-event {
  background: repeating-linear-gradient(
    -45deg,
    oklch(0.78 0.13 200 / 0.18) 0 6px,
    oklch(0.78 0.13 200 / 0.06) 6px 12px
  );
  border-left: 1px solid oklch(0.78 0.13 200 / 0.3);
  border-right: 1px solid oklch(0.78 0.13 200 / 0.3);
}
.tl-gap {
  background: oklch(0.40 0.02 250 / 0.18);
}
.tl-spawn-window {
  background: repeating-linear-gradient(
    -45deg,
    oklch(0.80 0.16 80 / 0.30) 0 5px,
    oklch(0.80 0.16 80 / 0.12) 5px 10px
  );
  border-left: 1px solid oklch(0.80 0.16 80 / 0.5);
  border-right: 1px solid oklch(0.80 0.16 80 / 0.5);
}
.tl-event-certain {
  background: oklch(0.78 0.13 200 / 0.15);
}
.tl-event-uncertain-end {
  background: repeating-linear-gradient(
    45deg,
    oklch(0.78 0.13 200 / 0.20) 0 4px,
    transparent 4px 8px
  );
}

/* hour tick */
.tl-hour-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: oklch(1 0 0 / 0.05);
  pointer-events: none;
}
.tl-hour-label {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0.7;
}

/* live observation: small white dot centered in the bar */
.tl-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 3;
  border-radius: 50%;
}
/* red kill dot on timeline */
.tl-dot-kill {
  width: 6px;
  height: 6px;
  background: oklch(0.68 0.22 25);
  box-shadow: 0 0 4px oklch(0.68 0.22 25);
}
/* live observation: white dot in the bar */
.tl-dot-live {
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

/* observation marks (down only now) */
.tl-mark {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 3;
}
.tl-mark-down {
  background: var(--muted);
}
.tl-mark-down::before {
  content: "";
  position: absolute;
  top: -2px; left: 50%;
  width: 5px; height: 5px;
  background: var(--muted);
  transform: translateX(-50%) rotate(45deg);
}

/* now marker: glowing cyan bar inside the track + timestamp below */
.tl-now-bar {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--live);
  box-shadow: 0 0 10px var(--live), 0 0 3px var(--live);
  z-index: 4;
  pointer-events: none;
}
.tl-now-label {
  position: absolute;
  top: 0;          /* above the track */
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--live);
  white-space: nowrap;
  letter-spacing: 0.3px;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  background: var(--bg-2);
  padding: 2px 5px;
  border-radius: 3px;
  box-shadow: 0 0 8px var(--live-glow);
}

/* callout for next spawn band */
.tl-callout {
  position: relative;
  height: 14px;
  pointer-events: none;
}
.tl-callout-line {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: var(--window);
}
.tl-callout-label {
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--window);
}

/* === col-controls === */
.col-controls { display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding-top: 16px; }
.ctrl-row { display: flex; gap: 6px; align-items: center; }
.ctrl-row-sub { justify-content: space-between; margin-top: 2px; }
.time-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 34px;
  color: var(--ink);
  font-size: 13px;
  line-height: 32px;
  outline: none;
  transition: border-color 0.15s;
  font-variant-numeric: tabular-nums;
  width: 0;          /* let flex shrink */
  min-width: 0;
}
.ctrl-row .btn {
  height: 34px;
  padding: 0 12px;
  line-height: 32px;
}
.time-input:focus { border-color: var(--live); box-shadow: 0 0 0 2px var(--live-glow); }
.time-input::placeholder { color: var(--muted-2); }
.time-input.shake {
  animation: shake 0.35s;
  border-color: var(--overdue);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* === history === */
.row-history {
  background: var(--bg-2);
  border-top: 1px solid var(--border-soft);
  padding: 10px 22px 14px;
}
.hist-empty {
  color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 0;
}
.hist-list { display: flex; flex-direction: column; gap: 4px; }
.hist-item {
  display: grid;
  grid-template-columns: 70px 60px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.hist-item:hover { background: var(--surface); }
.hist-time { font-family: 'JetBrains Mono', monospace; color: var(--ink-2); }
.hist-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
}
.hist-live .hist-type { color: var(--live); }
.hist-down .hist-type { color: var(--muted); }
.hist-detail { color: var(--ink-2); font-size: 12px; }
.hist-detail .mono { color: var(--ink); }
.hist-del {
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.hist-del:hover { color: var(--overdue); }

/* === footer === */
.ftr {
  text-align: center;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 36px;
  text-transform: uppercase;
}

/* responsive */
@media (max-width: 1080px) {
  .row-grid {
    grid-template-columns: 100px 1fr 260px;
    grid-template-areas:
      "world primary controls"
      "timeline timeline timeline";
    gap: 14px;
  }
  .col-world { grid-area: world; }
  .col-primary { grid-area: primary; }
  .col-controls { grid-area: controls; }
  .col-timeline { grid-area: timeline; }
}
@media (max-width: 720px) {
  .app { padding: 18px 14px 60px; }
  .hdr { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hdr-right { align-items: flex-start; }
  .row-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "world" "primary" "timeline" "controls";
  }
  .help-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Additions for the server-backed app (v2.1)
   Auth chip, disputed badge, history reporter column, kill log.
   =========================================================== */

/* ---------- error banner ---------- */
.err-banner {
  background: oklch(0.68 0.20 30 / 0.10);
  border: 1px solid var(--overdue-dim);
  color: var(--overdue);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* ---------- auth chip ---------- */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  height: 32px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.auth-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-2);
}
.auth-name {
  font-weight: 600;
  color: var(--ink);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-chip form { margin: 0; padding: 0; display: inline-flex; }
.auth-chip .btn-link { padding: 0 0 0 4px; font-size: 10px; }

.btn-steam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: oklch(0.78 0.13 200 / 0.18);
  border: 1px solid var(--live-dim);
  color: var(--live);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 var(--live);
  transition: background 0.15s;
}
.btn-steam:hover { background: oklch(0.78 0.13 200 / 0.28); }

/* ---------- disputed badge ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge-disputed {
  color: var(--overdue);
  border-color: var(--overdue-dim);
  background: oklch(0.68 0.20 30 / 0.10);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--overdue-dim);
}

/* "✓ 3 reporters agree" confidence chip under the badge */
.row-conf {
  color: var(--live);
  opacity: 0.8;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ---------- history with reporter ---------- */
.hist-item {
  grid-template-columns: 70px 60px 1fr auto 24px;
}
.hist-reporter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-2);
}
.hist-name {
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-name:hover { color: var(--live); text-decoration: underline; }
.hist-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.hist-outlier { opacity: 0.55; }
.hist-outlier .hist-detail { color: var(--muted); }
.hist-outlier .hist-tag {
  background: oklch(0.68 0.20 30 / 0.18);
  color: var(--overdue);
}
.hist-deleted { opacity: 0.4; text-decoration: line-through; }
.hist-kill .hist-type { color: oklch(0.72 0.22 25); }

/* ---------- kill log page ---------- */
.kill-intro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.2px;
}
.kill-intro strong { color: var(--live); font-weight: 600; }

.killlog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.killlog-head, .killlog-row {
  display: grid;
  grid-template-columns: 220px 80px 1fr 60px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
}
.killlog-head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.killlog-row {
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--ink-2);
}
.killlog-row:last-child { border-bottom: none; }
.killlog-row:hover { background: var(--surface-2); }
.killlog-when {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
  line-height: 1.2;
}
.killlog-date { color: var(--ink); }
.killlog-ago { font-size: 10px; letter-spacing: 0.4px; }
.killlog-world {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--ink);
}
.killlog-reporter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.killlog-reporter .hist-name { font-size: 13px; }
.killlog-steamid {
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.killlog-status { text-align: right; }
.killlog-deleted { opacity: 0.4; text-decoration: line-through; }
.killlog-deleted .hist-tag { background: var(--surface-3); color: var(--muted); }

@media (max-width: 720px) {
  .killlog-head, .killlog-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .killlog-status { text-align: left; }
}

/* personal-only kill log: 3 columns instead of 4 (no reporter column) */
.killlog-row-personal,
.killlog-head:has(+ .killlog-row-personal) {
  grid-template-columns: 220px 80px 1fr;
}
/* fallback for browsers without :has() */
.killlog-head { grid-template-columns: 220px 80px 1fr 60px; }

/* ===========================================================
   v2.3 — relaxed row dimensions, read-only layout when signed out.
   =========================================================== */

.app { padding: 18px 28px 30px; }
.hdr { padding-bottom: 12px; margin-bottom: 14px; }

.list { gap: 6px; }

.row-grid {
  /* Default state: controls column is just wide enough for the Log
     Remaining trigger; col-timeline (1fr) takes everything else. When
     the row is in is-logging state, controls grows to 280px and the
     timeline shrinks to match — no overlap. The grid-template-columns
     transition makes that shrink animated rather than instant. */
  grid-template-columns: 120px 220px 1fr 130px;
  transition: grid-template-columns 0.22s ease;
  padding: 10px 18px 10px 20px;
  gap: 18px;
  align-items: center;
  min-height: 72px;
}
.row.is-logging .row-grid {
  grid-template-columns: 120px 220px 1fr 280px;
}

/* world column */
.col-world { gap: 5px; }
.world-name { font-size: 18px; }
.boats-toggle, .skull-toggle, .micro-btn { width: 20px; height: 20px; }
.boat-icon, .skull-icon { width: 11px; height: 11px; }
.badge { font-size: 10px; padding: 2px 8px; }
.badge-disputed { font-size: 9px; padding: 1px 6px; }
.row-conf { font-size: 9.5px; margin-top: 1px; }
.kill-countdown { top: -7px; font-size: 9px; }

/* primary column */
.col-primary { gap: 3px; }
.primary-num { font-size: 22px; line-height: 1.1; }
.primary-num-tail { font-size: 13px; }
.primary-spawn .primary-num, .primary-overdue .primary-num { font-size: 17px; }
.primary-sub { font-size: 10px; margin-top: 1px; }
.next-spawn { margin-top: 2px; }
.ns-label { font-size: 9px; }
.ns-time { font-size: 11px; }

/* Timeline: .tl is a fixed-height container holding ONLY the track in flow;
   the now-label, callout, and annotations are absolutely positioned outside
   the flow so they don't push the bar around when they appear/disappear. */
.tl {
  position: relative;
  width: 100%;
  height: 32px;       /* equals track height */
  padding: 0;
  display: block;     /* override original flex */
}
.tl-track { height: 32px; }

/* "now" timestamp floats just above the track. */
.tl-now-label {
  position: absolute;
  bottom: calc(100% + 4px);
  top: auto;          /* override original `top: 0/1px` */
  font-size: 10px;
  padding: 1px 4px;
}

.tl-hour-label { font-size: 8px; }

/* next-spawn callout floats just below the track. */
.tl-callout {
  position: absolute;
  top: calc(100% + 4px);
  height: 12px;
}
.tl-callout-label { font-size: 9px; top: 2px; }

/* Annotations also float below the track. Hidden by default (height 0).
   With legend toggled on they expand and may visually overlap the callout
   — acceptable trade-off in legend mode to keep the bar position fixed. */
.tl-annotations {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  height: 0;
}
.tl-with-legend .tl-annotations { height: 16px; }
.tl-ann { font-size: 9px; }

/* Controls column: trigger sits centered vertically. History link floats
   absolutely below the trigger so it doesn't grow the column height
   (which would un-center the trigger). */
.col-controls {
  position: relative;
  padding-top: 0;
  height: 32px;       /* equals the trigger height */
  align-items: stretch;
}
.ctrl-row { gap: 6px; }
.ctrl-row-sub {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin-top: 0;
  justify-content: flex-end;
}
.ctrl-row .btn, .time-input { height: 32px; line-height: 30px; }
.time-input { font-size: 13px; padding: 0 10px; }
.btn { font-size: 11px; padding: 6px 12px; }
.btn-link { font-size: 10px; }

/* Log Remaining: the trigger and the expanded panel are stacked at the
   right edge of col-controls. Toggling is-logging shrinks col-timeline
   (via the row-grid transition above) so the expanded panel — which
   simply fills col-controls — never overlaps the bar. The trigger and
   expanded panel crossfade. */
.ctrl-collapse {
  position: relative;
  height: 32px;
  width: 100%;
}
.ctrl-collapse .btn-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 32px;
  padding: 0 14px;
  opacity: 1;
  transition: opacity 0.18s ease;
}
.ctrl-collapse.is-open .btn-trigger {
  opacity: 0;
  pointer-events: none;
}
.ctrl-collapse .ctrl-expanded {
  position: absolute;
  inset: 0;                     /* fills col-controls; grows with it */
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.ctrl-collapse.is-open .ctrl-expanded {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.08s;      /* fade in after the column starts widening */
}
.ctrl-collapse .ctrl-expanded .time-input { flex: 1; min-width: 0; }
.ctrl-collapse .ctrl-expanded .btn { flex: 0 0 auto; }

/* responsive: keep things sane on narrower screens but don't grow the row */
@media (max-width: 1080px) {
  .row-grid { padding: 10px 12px; gap: 14px; }
}

/* Steam sign-in: button sits in line with neighbor controls. The helper
   caption is absolutely positioned ABOVE so it doesn't add height to the
   flex row (which would force every sibling to grow when align-items:
   stretch was in effect — though we've also pinned align-items: center). */
.auth-signin {
  position: relative;
  display: inline-flex;
}
.auth-signin-hint {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

/* ============== Donate modal ============== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 18, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  animation: modal-fade-in 0.16s ease-out;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal {
  width: 460px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(58, 207, 255, 0.06);
  animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin: 0;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.modal-close:hover { color: var(--ink); background: var(--surface-2); }
.modal-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 16px;
}
.modal-err {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--overdue-dim);
  background: oklch(0.68 0.20 30 / 0.10);
  color: var(--overdue);
  font-size: 11.5px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.2px;
}
.modal-loading {
  text-align: center;
  padding: 24px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* tile grid */
.donate-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.donate-tile {
  display: grid;
  place-items: center;
  padding: 18px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.donate-tile:hover {
  background: oklch(0.80 0.16 80 / 0.16);
  border-color: var(--window-dim);
  color: var(--window);
  box-shadow: 0 0 12px var(--window-glow);
}
.donate-tile.is-active {
  background: oklch(0.80 0.16 80 / 0.20);
  border-color: var(--window-dim);
  color: var(--window);
  box-shadow: 0 0 12px var(--window-glow);
}
.donate-tile-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.donate-tile-other .donate-tile-amt {
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Other-amount input row */
.donate-other {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.donate-other-prefix {
  font-size: 16px;
  color: var(--muted);
}
.donate-other-input {
  flex: 1;
  height: 32px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -0.2px;
}
.donate-other-input::-webkit-outer-spin-button,
.donate-other-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Step header on "pay" view */
.modal-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-step-amount {
  font-size: 13px;
  color: var(--window);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Stripe element mount point — Stripe injects its own iframe; we just give
   it some space and a border so it doesn't float in mid-air. */
.donate-element-host {
  min-height: 220px;
  padding: 4px 0 12px;
}

.donate-submit {
  width: 100%;
  height: 38px;
  font-size: 13px;
}

/* Header donate button: just the heart, 32px square so it lines up with the
   other header controls. */
.btn-donate-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-donate-icon svg { color: oklch(0.72 0.22 25); }
.btn-donate-icon:hover svg {
  /* slight glow on the heart on hover */
  filter: drop-shadow(0 0 4px oklch(0.72 0.22 25 / 0.7));
}

/* Footer donate button: full-text CTA, amber theming, more visual weight
   than the header icon since it's the primary "tip jar" surface. */
.btn-donate-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  background: oklch(0.80 0.16 80 / 0.10);
  border: 1px solid var(--window-dim);
  border-radius: var(--radius-sm);
  color: var(--window);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-donate-footer:hover {
  background: oklch(0.80 0.16 80 / 0.20);
  border-color: var(--window);
  color: var(--window);
  box-shadow: 0 0 14px var(--window-glow);
}
.btn-donate-footer svg { color: oklch(0.72 0.22 25); }

/* Unify header-control heights at 32px so Legend / Kill log / region picker /
   auth chip / donate heart all sit on the same baseline. Some originals had
   padding-driven heights that ended up at ~28-30px depending on font metrics
   — pin everything to 32px box-sizing border-box and they line up. */
.hdr-actions > .switch,
.hdr-actions > .btn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.hdr-actions > .region-select { height: 32px; }
.hdr-actions > .region-select .region-opt { height: 30px; }   /* inside 1px border */

/* Footer becomes a small vertical stack: donate button on top, version string
   underneath. Centered, breathable. */
.ftr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ============== Toasts ============== */
.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  cursor: pointer;
  animation: toast-in 0.18s ease-out;
}
.toast-error   { border-left-color: var(--overdue); }
.toast-error::before {
  content: "⚠ ";
  color: var(--overdue);
  font-weight: 700;
  margin-right: 4px;
}
.toast-success { border-left-color: var(--live); }
.toast-success::before {
  content: "✓ ";
  color: var(--live);
  font-weight: 700;
  margin-right: 4px;
}
.toast-info    { border-left-color: var(--window); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}