/* ═══════════════════════════════════════════════════════════════════════════
   TIBERIUM CONTROL — Arcline material layer.

   The skin gave the board Arcline's palette. This gives it Arcline's
   *materials*: the elevation ladder, the three glass depths, the specular
   edge, pill datum marks on active navigation, and press physics on
   everything that can be pressed.

   Loaded last, so it upgrades the board's own rules rather than fighting
   them. Nothing here invents a value — every number is a token.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Focus, from the system ──────────────────────────────────────────────
   style.css still carries its own green focus ring from before the port.
   Arcline's contract is the brand colour, 2px, on every keyboard target. */
:focus-visible {
  outline: var(--focus-ring) solid var(--brand);
  outline-offset: 2px;
}

/* The skip link is a brand surface, so its label uses the computed ink that
   Arcline derives from the fill rather than a hand-picked near-black. */
.skip {
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* ── Chrome ──────────────────────────────────────────────────────────────
   The top bar is chrome over dense content, which is exactly what the
   small glass depth is for. */
.topbar {
  background: var(--glass-canvas);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--edge);
}

.sigil { color: var(--brand); }

/* ── Cross-page navigation ───────────────────────────────────────────────
   Active rows carry a datum lozenge — a pill inset from the edges, never a
   square-ended tick, because a hard edge fights the rounded surface. */
.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: auto;
  padding-inline-start: var(--space-4);
}

.topnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 560;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.topnav__link:hover { color: var(--text); background: var(--glass-panel); }
.topnav__link:active { transform: scale(var(--press-scale)); }

.topnav__link.is-here { color: var(--brand-text); background: var(--brand-soft); }
.topnav__link.is-here::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--brand);
}

/* ── Panels become objects ───────────────────────────────────────────────
   Card radius, a hairline, and the resting elevation. Anything that reads
   as an object gets a radius; only full-bleed chrome stays square. */
.panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-xs);
}

/* The three big centre surfaces are full-bleed application chrome, not
   cards, so they keep their square edges and lose the ring. */
.panel--stage,
.panel--roster,
.rail > .panel {
  border-radius: var(--radius-none);
  border: 0;
  box-shadow: none;
  background: transparent;
}
.panel--stage { border-right: 1px solid var(--rule); }

.panel__head { border-bottom: 1px solid var(--rule); }

.panel__label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--muted);
}

/* ── Command-centre cards get the glass treatment ────────────────────────
   Menus, panels and grouped lists are the default glass depth. The
   specular rim is the system's one permitted flourish, so it goes on the
   surfaces that float above the archive and nowhere else. */
.cc__when,
.cc__maps,
.cc__crew,
.cc__ops {
  position: relative;
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--edge), var(--shadow-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cc__when::before,
.cc__maps::before,
.cc__crew::before,
.cc__ops::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--edge-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Controls ────────────────────────────────────────────────────────────
   Filter chips are a segmented control in everything but name: raised
   means selected, and the chosen one lifts on a shadow rather than only
   recolouring. */
.chip {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform 90ms var(--ease-press);
}
.chip:hover { color: var(--text); background: var(--glass-panel); }
.chip:active { transform: scale(var(--press-scale)); }
.chip.is-on {
  color: var(--text);
  background: var(--surface);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}
.chip.is-on b { color: var(--brand-text); }
.chip b { font-family: var(--font-mono); font-size: .6875rem; }

/* The filter group sits on a recessed rail, the way a segmented control does. */
.filters {
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.refresh {
  height: var(--control-height-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--edge), var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform 90ms var(--ease-press);
}
.refresh:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }
.refresh:active { transform: scale(var(--press-scale)); }

/* Link state reads as a status badge: tinted fill, never a heavy border. */
.pill {
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  border: 0;
  font-family: var(--font-mono);
  font-size: .625rem;
}
.pill__dot { border-radius: var(--radius-full); }
.pill[data-state="live"]  { color: var(--moss);  background: color-mix(in srgb, var(--moss) 15%, transparent); }
.pill[data-state="stale"] { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 15%, transparent); }
.pill[data-state="down"]  { color: var(--ember); background: color-mix(in srgb, var(--ember) 16%, transparent); }
.pill[data-state="boot"]  { color: var(--muted); background: var(--panel); }

/* ── Fields ──────────────────────────────────────────────────────────────
   Arcline fields take a soft brand halo on focus instead of a hard border
   jump, and hover precedes focus. */
.roster__search,
.crew__find {
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.roster__search:hover,
.crew__find:hover { border-color: var(--muted); }
.roster__search:focus-within,
.crew__find:focus-within {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.roster__search input,
.crew__find input { font-family: var(--font-sans); font-size: .8125rem; }
.roster__search input:focus-visible,
.crew__find input:focus-visible { outline: none; }

/* ── Data ────────────────────────────────────────────────────────────────
   Table rows are application chrome and stay square, but they take the
   system row height and the tabular figures every data context requires. */
table.ledger th {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--muted);
  background: var(--panel);
}
table.ledger td { font-family: var(--font-sans); font-size: .8125rem; }
table.ledger tbody tr { min-height: var(--row-height); }
table.ledger .num,
table.ledger td:has(output),
.kv output,
.readout dd { font-variant-numeric: tabular-nums; }

/* Rows and roster entries are pressable objects. */
.roster li,
.maps li {
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease),
              transform 90ms var(--ease-press);
}
.roster li:active,
.maps li:active { transform: scale(var(--press-scale)); }

/* ── Faction cards ───────────────────────────────────────────────────────
   These read as objects, so they get a radius, and they lift on hover the
   way an interactive panel does. */
.order {
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.order:hover {
  transform: translateY(-2px);
  box-shadow: var(--edge), var(--shadow-md);
  border-color: var(--rule-strong);
}
/* Faction cards wear their army's colour, sub-factions included. */
.order--gdi:hover   { border-color: color-mix(in srgb, var(--faction-gdi) 55%, transparent); }
.order--nod:hover   { border-color: color-mix(in srgb, var(--faction-nod) 55%, transparent); }
.order--scrin:hover { border-color: color-mix(in srgb, var(--faction-scrin) 55%, transparent); }
.order--gdi b   { color: var(--faction-gdi); }
.order--nod b   { color: var(--faction-nod); }
.order--scrin b { color: var(--faction-scrin); }

/* Player names link to their archive profile. They must not look like plain
   text, but they also must not shout in a dense list, so the underline only
   appears on hover. */
.roster .nick,
.o-nick {
  color: inherit;
  text-decoration: none;
}
.roster .nick:hover,
.o-nick:hover {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Match length ────────────────────────────────────────────────────────
   A histogram of how long games run. Bars are a distribution, not a series,
   so they take one colour and the axis carries the meaning. */
.lenchart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 132px;
  margin-bottom: var(--space-4);
}
.lenbar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  height: 100%;
}
.lenbar i {
  display: block;
  height: var(--h, 2%);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: color-mix(in srgb, var(--nod-deep) 46%, transparent);
  transition: background var(--dur-fast) var(--ease);
}
.lenbar:hover i { background: var(--nod-deep); }
.lenbar__tick {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: .59375rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cc__note {
  margin: var(--space-3) 0 0;
  padding: 0 var(--pad) var(--space-4);
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.panel__body > .cc__note { padding-inline: 0; }

/* ── Overlays ────────────────────────────────────────────────────────────
   The tooltip is a floating surface: modal-tier blur, overlay radius, and
   the lit top edge that makes it read as an object above the page. */
.tip {
  border-radius: var(--radius-md);
  border: 1px solid var(--rule-strong);
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  box-shadow: var(--edge), var(--shadow-xl);
  font-family: var(--font-sans);
}

/* ── Motion ──────────────────────────────────────────────────────────────
   Everything collapses to instant, but state stays readable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .chip:active, .refresh:active, .topnav__link:active,
  .roster li:active, .maps li:active, .order:hover { transform: none; }
}