/* ============================================================
   Guild Watch — "The Fool's Ledger"
   Base palette sampled from the guild logo: deep navy-violet
   ground, antique-gold line work. Tarot-card panel framing,
   gray-fog gradients, Discord class colors.
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ground — from the logo's navy-violet */
  --bg: #171a28;
  --bg-raise: #1e2233;
  --panel: #232741;
  --panel-edge: #2e3352;
  /* antique gold — from the logo's stroke */
  --gold: #d9a94f;
  --gold-dim: #9a7c42;
  --gold-faint: #5c4f33;
  /* accents */
  --arcane: #9d86d9;
  --steel: #7a9ec7;
  /* text */
  --ink: #e9e6dc;
  --ink-dim: #a09db0;
  --ink-faint: #6b6880;
  /* semantic */
  --ok: #7dc98f;
  --warn: #e0b458;
  --bad: #d0524f;
  /* class identity — the guild's Discord role colors */
  --c-knight: #e6b674;
  --c-duelist: #e0837a;
  --c-sage: #92c79c;
  --c-sorcerer: #87adf0;

  --font-head: 'Cinzel', 'Palatino', Georgia, serif;
  --font-ui: 'Rajdhani', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  --font-num: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

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

html { height: 100%; }

body {
  min-height: 100%;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(157, 134, 217, 0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(122, 158, 199, 0.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.45;
}

/* Calm backdrop to match the approved mockup: two very faint sigil rings and a
   soft low fog. No radiating tick-band, no stars — the content panels are the
   focus. Pure CSS, fixed, non-interactive. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, transparent 69%, rgba(217, 169, 79, 0.06) 70%, transparent 71%) center / 760px 760px no-repeat,
    radial-gradient(closest-side, transparent 45%, rgba(157, 134, 217, 0.05) 46%, transparent 47%) center / 760px 760px no-repeat,
    radial-gradient(circle at 50% 40%, rgba(208, 82, 79, 0.04), transparent 42%);
}

/* soft gray fog rising from the bottom */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 42vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 30% 130%, rgba(122, 158, 199, 0.06), transparent 62%),
    linear-gradient(to top, rgba(122, 158, 199, 0.05), transparent);
}

/* ---------------------------------------------------------- app shell */

#app { min-height: 100vh; }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.rail {
  background: linear-gradient(180deg, rgba(22, 25, 46, 0.96), rgba(18, 21, 40, 0.96));
  border-right: 1px solid var(--gold-faint);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.rail .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.rail .brand img { width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(217, 169, 79, 0.35)); }
.rail .brand b {
  font-family: var(--font-head); color: var(--gold); letter-spacing: 0.12em;
  font-size: 15px; text-transform: uppercase; line-height: 1.05;
}

.rail a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  color: var(--ink-dim); text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer;
  letter-spacing: 0.03em;
}
.rail a .ic { width: 18px; text-align: center; opacity: 0.9; }
.rail a:hover { color: var(--ink); background: rgba(157, 134, 217, 0.08); }
.rail a.active { color: var(--gold); background: rgba(217, 169, 79, 0.12);
  box-shadow: inset 0 0 0 1px var(--gold-faint); }

.rail .spacer { flex: 1; }
.rail .meter-wrap { padding: 10px 10px 6px; }
.rail .meter-wrap .lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.rail .meter { height: 7px; border-radius: 5px; background: #10131f; margin-top: 6px;
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--panel-edge); }
.rail .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.rail .meter-val { font-size: 12px; color: var(--ink-dim); margin-top: 5px; font-family: var(--font-num); }
.rail .me { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; color: var(--ink-dim); flex-wrap: wrap; }
.rail .me .badge { font-size: 11px; }

.shell-main { min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--panel-edge); background: rgba(23, 26, 40, 0.7);
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(4px);
}
.topbar .me {
  display: flex; align-items: center; gap: 8px; padding: 0 22px; margin-left: auto;
  font-size: 14px; color: var(--ink-dim); white-space: nowrap; flex: 0 0 auto;
}
.topbar .me .badge { font-size: 11px; }
.status {
  display: flex; align-items: center; gap: 22px; padding: 11px 26px; flex-wrap: wrap; flex: 1 1 auto;
}
.status .s { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-dim); }
.status .s b { color: var(--ink); font-family: var(--font-num); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; }
.status .clash-tag { margin-left: auto; font-size: 13px; color: var(--gold);
  border: 1px solid var(--gold-faint); padding: 3px 12px; border-radius: 14px; }

main { padding: 24px 26px 64px; max-width: 1200px; }

.page-title { font-family: var(--font-head); font-size: 22px; color: var(--gold); font-weight: 600;
  letter-spacing: 0.06em; margin-bottom: 3px; }
.page-sub { color: var(--ink-faint); font-size: 15px; margin-bottom: 20px; }

/* mobile: rail collapses to a top bar */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; }
  .rail .brand { padding: 4px 8px; }
  .rail .brand b { display: none; }
  .rail .spacer, .rail .meter-wrap { display: none; }
  .rail .me { margin-left: auto; }
  main { padding: 16px 12px 48px; }
}

/* ---------------------------------------------------------- tarot card panels */

.card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(157, 134, 217, 0.04), transparent 35%),
    var(--panel);
  border: 1px solid var(--gold-faint);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(23, 26, 40, 0.9),
    inset 0 0 0 2px rgba(217, 169, 79, 0.14),
    0 6px 22px rgba(0, 0, 0, 0.35);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.card > h2, .card > h3, .card > .roster-head > h2 {
  font-family: var(--font-head);
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.card > h2 .sub, .card > h3 .sub, .card > .roster-head > h2 .sub {
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-size: 15px;
}

hr.glyph {
  border: none;
  text-align: center;
  margin: 16px 0;
  border-top: 1px solid var(--panel-edge);
  position: relative;
}
hr.glyph::after {
  content: '✦';
  color: var(--gold-dim);
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  padding: 0 10px;
  font-size: 12px;
}

/* ---------------------------------------------------------- forms */

label.field { display: block; margin-bottom: 12px; }

/* the log form gives its section titles more presence over the inputs */
.log-form label.field .lbl {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  margin-bottom: 5px;
}
.log-form label.field.owned .lbl { color: var(--gold); }
.log-form input { padding: 6px 10px; font-size: 15px; }

/* log-form fields are div.field with a span.field-lbl title. Every field
   carries the same padding + transparent border so sizes stay aligned; the
   fields you need to fill in (owned) get a yellow rounded box around the
   whole thing — title and input together. */
.log-form .field { border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; align-self: start; }
.log-form .field-lbl { display: block; font-size: 15px; font-weight: 600; color: var(--ink-dim); margin-bottom: 6px; }
.log-form .field.own { border-color: var(--gold); background: rgba(217, 169, 79, 0.07); }
.log-form .field.own .field-lbl { color: var(--gold); }

/* fields the signed-in user is responsible for updating — the whole control
   (input, or the entire button group for station/clash) gets a gold surround */
label.field.owned .lbl { color: var(--gold); }
label.field.owned > input { border-color: var(--gold-dim); }
label.field.owned .station-picks {
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  padding: 6px;
  background: rgba(217, 169, 79, 0.05);
}
.duty-tag {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gold);
  border: 1px solid var(--gold-faint);
  border-radius: 10px;
  padding: 0 7px;
  text-transform: none;
}

label.field span.lbl {
  display: block;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

input[type='text'], input[type='password'], input[type='number'],
input[type='date'], select, textarea {
  width: 100%;
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 17px;
}

input[type='number'] { font-family: var(--font-num); font-size: 15px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(217, 169, 79, 0.15);
}

input.input-bad, input.input-bad:focus {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(208, 82, 79, 0.18);
}

button {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: linear-gradient(180deg, #2e3352, #262a44);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

button:hover { border-color: var(--gold-dim); color: var(--gold); }

button.primary {
  background: linear-gradient(180deg, #8a6a2e, #6b5124);
  border-color: var(--gold-dim);
  color: #f4e9d0;
}
button.primary:hover { background: linear-gradient(180deg, #9a7736, #7b5e2a); color: #fff; }

button.danger { border-color: #6b3434; color: var(--bad); }
button.danger:hover { background: rgba(208, 82, 79, 0.12); }

button.ghost { background: none; border-color: transparent; color: var(--ink-dim); }
button.ghost:hover { color: var(--gold); border-color: transparent; }

button:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------- tables */

table.ledger { width: 100%; border-collapse: collapse; }

table.ledger th {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding: 8px 12px;
  border-bottom: 1px solid var(--gold-faint);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

table.ledger th.nosort { cursor: default; }
table.ledger th .arrow { color: var(--gold); }

table.ledger td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(46, 51, 82, 0.5);
  font-size: 16px;
  vertical-align: middle;
}

table.ledger tbody tr { transition: background 0.1s; }
table.ledger tbody tr:hover td { background: rgba(157, 134, 217, 0.06); }
table.ledger tbody tr:hover td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
table.ledger tbody tr:hover td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* every cell and header is left-aligned — data lines up under its title */
table.ledger th, table.ledger td { text-align: left; }
td.num { font-family: var(--font-num); font-size: 14px; }

/* card variant: each row is a separated rounded pill (matches the game's
   member list). Used for the Members table. */
table.ledger.cards { border-collapse: separate; border-spacing: 0 8px; }
table.ledger.cards th { border-bottom: none; padding-bottom: 2px; }
table.ledger.cards tbody td {
  background: var(--bg-raise);
  border-top: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
}
table.ledger.cards tbody td:first-child {
  border-left: 1px solid var(--panel-edge);
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
table.ledger.cards tbody td:last-child {
  border-right: 1px solid var(--panel-edge);
  border-top-right-radius: 14px; border-bottom-right-radius: 14px;
}
table.ledger.cards tbody tr:hover td { background: rgba(157, 134, 217, 0.08); }
table.ledger.cards tbody tr:hover td { border-color: var(--gold-faint); }

a.player-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--ink-faint);
}
a.player-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 11px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}

.badge.class-Knight { color: var(--c-knight); border-color: var(--c-knight); }
.badge.class-Duelist { color: var(--c-duelist); border-color: var(--c-duelist); }
.badge.class-Sage { color: var(--c-sage); border-color: var(--c-sage); }
.badge.class-Sorcerer { color: var(--c-sorcerer); border-color: var(--c-sorcerer); }

.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.badge.dim { color: var(--ink-faint); border-color: var(--ink-faint); }
.badge.gold { color: var(--gold); border-color: var(--gold-dim); }
.badge.arcane { color: var(--arcane); border-color: var(--arcane); }

.note-flag { cursor: help; color: var(--warn); margin-left: 5px; }

.badge.clickable { cursor: pointer; }
.badge.clickable:hover { filter: brightness(1.25); }

/* ---------------------------------------------------------- misc ui */

.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 10px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.15s ease-out;
  max-width: 420px;
}

.toast.error { border-color: var(--bad); color: var(--bad); }

@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.empty-state {
  text-align: center;
  color: var(--ink-faint);
  padding: 40px 20px;
  position: relative;
}

.empty-state img.watermark {
  width: 90px;
  opacity: 0.16;
  display: block;
  margin: 0 auto 12px;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 130px; }
.row > .fit { flex: 0 0 auto; min-width: 0; }

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

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.gold { color: var(--gold); }
.num { font-family: var(--font-num); }

/* ---------------------------------------------------------- login */

.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-wrap img.logo-big {
  width: 130px;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 18px rgba(217, 169, 79, 0.25));
}

.login-wrap h1 {
  font-family: var(--font-head);
  color: var(--gold);
  letter-spacing: 0.2em;
  font-size: 26px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.login-wrap .tagline {
  color: var(--ink-faint);
  margin-bottom: 26px;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.login-card { width: 340px; }

/* ---------------------------------------------------------- entry screen */

.autocomplete { position: relative; }

.autocomplete .options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-raise);
  border: 1px solid var(--gold-dim);
  border-radius: 0 0 4px 4px;
  z-index: 30;
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete .options .opt {
  padding: 7px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.autocomplete .options .opt.sel,
.autocomplete .options .opt:hover { background: rgba(217, 169, 79, 0.14); }

.station-picks { display: flex; gap: 6px; flex-wrap: wrap; }

.station-picks button {
  flex: 1;
  min-width: 76px;
  padding: 11px 6px;
  font-size: 15px;
  border-radius: 12px;
}

.station-picks button.sel {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(217, 169, 79, 0.12);
  box-shadow: inset 0 0 8px rgba(217, 169, 79, 0.12);
}

.member-actions { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.member-nav { display: flex; align-items: center; gap: 10px; }
.member-nav .nav-pos { font-family: var(--font-num); font-size: 13px; color: var(--ink-faint); }
.member-nav button:disabled { opacity: 0.35; cursor: default; }

.entry-selected {
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--gold);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------- queue */

.queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: var(--bg-raise);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  flex-wrap: wrap;
  transition: border-color 0.12s, transform 0.12s;
}

.queue-item:hover { border-color: var(--gold-faint); transform: translateX(2px); }

.queue-item .fields { display: flex; gap: 5px; flex-wrap: wrap; }

.chip {
  display: inline-block;
  font-size: 13px;
  font-family: var(--font-num);
  padding: 2px 10px;
  border-radius: 16px;
  border: 1px solid var(--panel-edge);
  color: var(--ink-dim);
}

.chip.due { border-color: var(--warn); color: var(--warn); }
.chip.due:hover { background: rgba(224, 180, 88, 0.12); }

.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px 14px; }

/* category owner-toggle pills — grayed when off, gold when on */
button.toggle {
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 14px;
  background: transparent;
  border-color: var(--panel-edge);
  color: var(--ink-faint);
  opacity: 0.75;
}
button.toggle.on {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(217, 169, 79, 0.12);
  opacity: 1;
}
button.toggle:hover { border-color: var(--gold-dim); color: var(--ink); opacity: 1; }
button.toggle.on:hover { color: var(--gold); }

/* compact single-line category toggles in the Accounts table */
button.toggle.compact { padding: 4px 10px; font-size: 13px; letter-spacing: 0; }
.chip-wrap.one-line { flex-wrap: nowrap; gap: 6px; }

/* compact role dropdown in the Accounts table */
select.role-select {
  width: auto;
  min-width: 96px;
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 16px;
}

/* icon-only action buttons (edit / remove) */
button.icon-btn {
  padding: 6px 9px;
  border-radius: 12px;
  line-height: 0;
}
button.icon-btn svg { display: block; }

/* a button styled to read as an inline text link (duty member names) */
button.link-like {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px dotted var(--ink-faint);
  letter-spacing: 0;
}
button.link-like:hover { color: var(--gold); border-bottom-color: var(--gold); background: none; }

/* ---------------------------------------------------------- charts */

.chart-box svg { width: 100%; height: auto; display: block; }

.chart-title {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.chart-title > span:first-child { white-space: nowrap; }
.chart-title .mode {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.03em;
  text-align: right;
}

.mode.fitted { color: var(--arcane); }
.mode.median { color: var(--steel); }
.mode.extrapolating { color: var(--warn); }
.mode.nodata { color: var(--ink-faint); }

/* member-view chart toolbar: scale note left, 7d/30d switch right */
.chart-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.chart-toolbar .ct-note { font-size: 12px; color: var(--ink-faint); }
.seg { display: inline-flex; border: 1px solid var(--panel-edge); border-radius: 10px; overflow: hidden; }
.seg button {
  border: none; border-radius: 0; padding: 5px 12px; font-size: 12px; min-width: 0;
  background: transparent; color: var(--ink-dim);
}
.seg button + button { border-left: 1px solid var(--panel-edge); }
.seg button:hover { color: var(--ink); background: rgba(217, 169, 79, 0.06); }
.seg button.sel { color: var(--gold); background: rgba(217, 169, 79, 0.14); }

svg.chart .hover-zone { cursor: crosshair; }

/* raw entries: collapsible, with a date-range filter row */
.entries-card > summary .sub { font-size: 12px; letter-spacing: 0; text-transform: none; }
.entries-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.entries-filter input[type=date] { width: 150px; }

/* ---------------------------------------------------------- warnings view */

.warn-row { border-left: 3px solid transparent; }
.warn-row.has-warn { border-left-color: var(--warn); }
.warn-row.has-bad { border-left-color: var(--bad); }

.threshold-bar {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 10px 0;
}

.threshold-bar label.field { margin: 0; width: 130px; }
.threshold-bar label.field.wide { width: 240px; }
.threshold-bar .apply-btn { align-self: flex-end; margin-left: 4px; }

/* ---------------------------------------------------------- audit */

.audit-line {
  font-family: var(--font-num);
  font-size: 13px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(46, 51, 82, 0.45);
  background: rgba(217, 169, 79, 0.015);
}

.audit-line .ts { color: var(--ink-faint); margin-right: 10px; }
.audit-line .who { color: var(--steel); margin-right: 10px; }
.audit-line .what { color: var(--gold-dim); margin-right: 10px; }
.audit-line .diff { color: var(--ink-dim); word-break: break-all; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 700px) {
  main { padding: 12px; }
  header.topbar { padding: 8px 10px; gap: 8px; }
  header.topbar h1 { display: none; }
  body { font-size: 16px; }
  .grid2 { grid-template-columns: 1fr; }
  table.ledger { display: block; overflow-x: auto; }
}

/* ============================================================
   Redesign component kit — tiles, sparklines, member rows,
   severity chips, duty bars, log queue.
   ============================================================ */

.grid { display: grid; gap: 16px; }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .g5 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr; } .g2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .g5 { grid-template-columns: 1fr; } .g4 { grid-template-columns: 1fr; } }

svg.spark { display: block; }

/* stat tile */
.tile { background: var(--bg-raise); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 14px 16px; }
.tile .t-lbl { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }
.tile .t-val { font-family: var(--font-num); font-size: 26px; margin-top: 4px; letter-spacing: -0.01em; }
.tile .t-val .t-sm { font-size: 15px; color: var(--ink-faint); }
.tile .t-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 22px; }
.tile .t-delta { font-size: 12px; font-family: var(--font-num); }
.t-delta.up { color: var(--ok); } .t-delta.down { color: var(--bad); } .t-delta.flat { color: var(--ink-faint); }

/* severity chip + stripe */
.warn-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.warn-filter button.pick { flex: 0 0 auto; min-width: 0; padding: 5px 11px; font-size: 13px; }
.sev { font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 11px; border: 1px solid; white-space: nowrap; }
.sev.warn { color: var(--warn); border-color: var(--warn); }
.sev.bad { color: var(--bad); border-color: var(--bad); }
.stripe { width: 4px; align-self: stretch; min-height: 30px; border-radius: 3px; background: transparent; }
.stripe.warn { background: var(--warn); } .stripe.bad { background: var(--bad); }

/* leaderboard member row */
.lead-head, .mrow {
  display: grid;
  grid-template-columns: 16px minmax(210px, 1.55fr) 0.62fr 0.62fr 0.62fr 0.52fr 0.5fr 0.52fr 58px;
  gap: 16px; align-items: center;
}
.lead-head { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold);
  padding: 0 6px 8px 0; border-bottom: 1px solid var(--gold-faint); }
/* indent the NAME header past the rank column so it lines up with the name text */
.lead-head > span:nth-child(2) { padding-left: 42px; }
.mrow { padding: 11px 6px 11px 0; border-bottom: 1px solid var(--hair, rgba(46,51,82,0.5)); }
.mrow:last-child { border-bottom: none; }
.mrow:hover { background: rgba(157, 134, 217, 0.05); border-radius: 10px; }
.m-name { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.m-rankbox { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 0 0 auto; min-width: 30px; }
.m-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.m-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.m-name a:hover { color: var(--gold); }
.m-stat { display: flex; flex-direction: column; gap: 3px; }
.m-stat .v { font-family: var(--font-num); font-size: 15px; }
.m-stat .k2 { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.m-stat.withspark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.m-name .badge { display: block; width: 85%; text-align: left; }
.m-rank { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--gold-dim);
  min-width: 26px; }
.m-move { font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.m-move.up { color: var(--ok); }
.m-move.down { color: var(--bad); }
.m-move.same { color: var(--ink-faint); }
.m-move.new { color: var(--gold); font-size: 10px; letter-spacing: 0.06em; }
/* collapsible add-member card */
.addmember > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--font-head); color: var(--gold); font-weight: 600; font-size: 17px;
  letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px;
}
.addmember > summary::-webkit-details-marker { display: none; }
.addmember > summary::before {
  content: '+'; font-family: var(--font-num); font-size: 20px; line-height: 1;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-faint); border-radius: 8px; color: var(--gold);
}
.addmember[open] > summary { margin-bottom: 16px; }
.addmember[open] > summary::before { content: '\2212'; } /* minus */
/* selection mode */
.sel-toggle.on { color: var(--gold); border-color: var(--gold-dim); background: rgba(217, 169, 79, 0.1); }
.select-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(217, 169, 79, 0.07); border: 1px solid var(--gold-faint); }
.select-bar .sel-count { font-family: var(--font-num); font-size: 14px; color: var(--ink); }
.select-bar .sel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.select-result { padding: 12px; margin-bottom: 12px; border-radius: 12px;
  background: var(--bg-raise); border: 1px solid var(--panel-edge); }
.select-result .sr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; }
.select-result .sr-head b { color: var(--gold); font-family: var(--font-head); letter-spacing: 0.04em; }
.select-result .sr-list { width: 100%; font-family: var(--font-mono, monospace); font-size: 14px;
  resize: vertical; }
.sel-bubble { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-faint);
  display: inline-block; box-sizing: border-box; transition: all 0.1s; }
.sel-bubble.on { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 3px var(--bg-raise); }
.mrow.selecting { cursor: pointer; user-select: none; }
.mrow.selecting:hover { background: rgba(157, 134, 217, 0.06); border-radius: 10px; }
.mrow.sel-on { background: rgba(217, 169, 79, 0.09); border-radius: 10px; }
.m-pname { font-weight: 600; color: var(--ink); }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.roster-head h2 { flex: 0 1 auto; }
.roster-head .roster-search { width: 240px; flex: 0 0 240px; }
.m-status { display: flex; align-items: center; justify-content: flex-start; }
.m-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }

/* duty progress rows */
.duty { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(46,51,82,0.5); }
.duty:last-child { border: none; }
.duty .dname { width: 148px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.duty .dbar { flex: 1; height: 8px; border-radius: 5px; background: #10131f; overflow: hidden; box-shadow: inset 0 0 0 1px var(--panel-edge); }
.duty .dbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.duty .dbar i.done { background: linear-gradient(90deg, #4f8c60, var(--ok)); }
.duty .dcount { width: 92px; text-align: right; font-family: var(--font-num); font-size: 13px; color: var(--ink-dim); }

/* triage flag card */
.flagcard { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--panel-edge);
  border-left: 4px solid var(--warn); border-radius: 12px; background: var(--bg-raise); flex-wrap: nowrap; }
.flagcard.bad { border-left-color: var(--bad); }
.flagcard .fc-name { flex: 0 0 auto; min-width: 130px; display: flex; flex-direction: column; gap: 2px; }
.flagcard .fc-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.flagcard .fc-name a:hover { color: var(--gold); }
.flagcard .fc-sub { font-size: 12px; color: var(--ink-faint); }
.flagcard .fc-checks { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.flagcard .fc-end { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.flagcard .fc-detail { font-size: 12px; color: var(--ink-faint); }

/* log guided-queue layout */
.loggrid { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .loggrid { grid-template-columns: 1fr; } }
.qgroup-h { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-dim);
  margin: 14px 0 4px; display: flex; align-items: center; gap: 8px; }
.qitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; }
.qitem:hover { background: rgba(157, 134, 217, 0.06); }
.qitem.sel { background: rgba(217, 169, 79, 0.1); border-color: var(--gold-faint); }
.qitem .qn { font-weight: 600; }
.qitem .qtags { margin-left: auto; display: flex; gap: 5px; }
.qgroup { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-dim); padding: 12px 10px 5px; }
.qgroup:first-child { padding-top: 2px; }
.progressline { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 14px; margin-bottom: 14px; }
.progressline .pl-bar { flex: 1; max-width: 280px; height: 7px; border-radius: 5px; background: #10131f;
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--panel-edge); }
.progressline .pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.qitem .qn { font-weight: 600; font-size: 16px; }

/* log form: station / clash choice buttons */
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks.own { border: 1px solid var(--gold-dim); border-radius: 14px; padding: 6px; background: rgba(217, 169, 79, 0.05); }
button.pick {
  flex: 1 1 auto; min-width: 84px; text-align: center;
  padding: 10px 12px; font-size: 15px; font-weight: 600; border-radius: 12px;
  background: var(--bg-raise); border: 1px solid var(--panel-edge); color: var(--ink-dim);
}
button.pick:hover { border-color: var(--gold-dim); color: var(--ink); }
button.pick.sel { border-color: var(--gold); color: var(--gold); background: rgba(217, 169, 79, 0.14); }

/* log form: action buttons — one prominent primary, matched-height secondaries */
button.btn {
  border-radius: 12px; padding: 11px 24px; font-size: 15px; font-weight: 600;
  background: linear-gradient(180deg, #b98f3a, #8a6a2e); border: 1px solid var(--gold-dim); color: #f4e9d0;
}
button.btn:hover { background: linear-gradient(180deg, #caa04a, #9a7736); color: #fff; border-color: var(--gold); }
button.btn.ghost { background: var(--bg-raise); border: 1px solid var(--panel-edge); color: var(--ink-dim); }
button.btn.ghost:hover { background: var(--bg-raise); border-color: var(--gold-dim); color: var(--ink); }