/* Tokens follow the validated data-viz palette. Dark values are declared twice on purpose: once for the OS setting and
   once for an explicit data-theme, so a light stamp beats OS-dark and a dark stamp beats OS-light. */
:root {
  color-scheme: light;
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --text: #0b0b0b;
  --muted: #52514e;
  --axis: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.12);
  --accent: #2f5fd0;
  --accent-text: #ffffff;
  --error-bg: #fdecec;   --error: #a3202a;
  --warn-bg: #fff4dc;    --warn: #8a5a00;
  --info-bg: #e8f0fe;    --info: #1f4fb0;
  --ok-bg: #e5f5ea;      --ok: #1d6b3a;
  --good: #006300;
  --bad: #a3202a;
  --seq: #2a78d6;
  /* element identity, fixed order Fire, Water, Wind, Electric, Iron; validated in stack order (light surface #fcfcfb) */
  --el-fire: #e34948;
  --el-water: #2a78d6;
  --el-wind: #008300;
  --el-electric: #4a3aa7;
  --el-iron: #eda100;
  /* compare page: players (categorical slots 1-5) and raids (ordinal one-hue ramp, oldest to newest) */
  --p1: #2a78d6; --p2: #eb6834; --p3: #1baf7a; --p4: #eda100; --p5: #e87ba4;
  --r1: #86b6ef; --r2: #5598e7; --r3: #2a78d6; --r4: #1c5cab; --r5: #104281;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --text: #ffffff;
    --muted: #c3c2b7;
    --axis: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.12);
    --accent: #6d95f0;
    --accent-text: #0d1220;
    --error-bg: #3a1c20;   --error: #ff9aa2;
    --warn-bg: #3a2f14;    --warn: #f2c66d;
    --info-bg: #182640;    --info: #9db9f5;
    --ok-bg: #16301f;      --ok: #86d3a0;
    --good: #0ca30c;
    --bad: #ff9aa2;
    --seq: #3987e5;
    --el-fire: #e66767;
    --el-water: #3987e5;
    --el-wind: #008300;
    --el-electric: #9085e9;
    --el-iron: #c98500;
    --p1: #3987e5; --p2: #d95926; --p3: #199e70; --p4: #c98500; --p5: #d55181;
    --r1: #184f95; --r2: #256abf; --r3: #3987e5; --r4: #6da7ec; --r5: #9ec5f4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --surface: #1a1a19;
  --text: #ffffff;
  --muted: #c3c2b7;
  --axis: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #6d95f0;
  --accent-text: #0d1220;
  --error-bg: #3a1c20;   --error: #ff9aa2;
  --warn-bg: #3a2f14;    --warn: #f2c66d;
  --info-bg: #182640;    --info: #9db9f5;
  --ok-bg: #16301f;      --ok: #86d3a0;
  --good: #0ca30c;
  --bad: #ff9aa2;
  --seq: #3987e5;
  --el-fire: #e66767;
  --el-water: #3987e5;
  --el-wind: #008300;
  --el-electric: #9085e9;
  --el-iron: #c98500;
  --p1: #3987e5; --p2: #d95926; --p3: #199e70; --p4: #c98500; --p5: #d55181;
  --r1: #184f95; --r2: #256abf; --r3: #3987e5; --r4: #6da7ec; --r5: #9ec5f4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
header.site .inner, main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
header.site .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
header.site .brand { font-weight: 700; white-space: nowrap; }
header.site nav a { color: var(--muted); text-decoration: none; margin-right: 16px; }
header.site nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

main { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
p { margin: 0 0 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.alert { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.alert.error { background: var(--error-bg); color: var(--error); }
.alert.warn  { background: var(--warn-bg);  color: var(--warn); }
.alert.info  { background: var(--info-bg);  color: var(--info); }
.alert.ok    { background: var(--ok-bg);    color: var(--ok); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile .label { color: var(--muted); font-size: 0.85rem; }
.tile .value { font-size: 1.9rem; font-weight: 650; line-height: 1.2; }   /* proportional figures on purpose */
.tile .value .of { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.tile .sub { color: var(--muted); font-size: 0.85rem; }
.delta { font-size: 0.85rem; margin-top: 2px; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }

/* legacy stat block used on the import preview */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat .value { font-size: 1.6rem; font-weight: 700; }
.stat .label { color: var(--muted); font-size: 0.85rem; }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.filters > div { flex: 1 1 180px; min-width: 0; }
.filters .actions { flex: 0 0 auto; }
.filters .check { flex: 0 0 auto; display: flex; align-items: center; }
.filters .check label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
select {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}

/* ---------- charts ---------- */
.chart { position: relative; height: 340px; }   /* height includes the x-axis band */
.chart canvas { display: block; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
th a.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sortlink:hover, th a.sortlink:focus-visible { text-decoration: underline; }
th[aria-sort="ascending"] a.sortlink, th[aria-sort="descending"] a.sortlink { color: var(--text); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* tables whose value columns are headed by an element or a player: header and values are centred on each other; the first
   column (raid or element names) stays left-aligned. Wins over td.num/th.num by specificity. */
table.centered th:not(:first-child), table.centered td { text-align: center; }
.table-wrap { overflow-x: auto; }
.sub { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; line-height: 1.3; }

.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline;
  background: var(--axis);
}
/* element badge + name as one unit: the badge is always on the left, on the same line, and scales with the text */
.el-label { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; vertical-align: middle; }
.el-icon { height: 1.5em; width: auto; flex: none; }   /* decorative: the name is always written out */

/* raid x element grid: one hue, more damage = stronger tint; text stays in the ink colour */
table.heat th[scope="row"] { position: sticky; left: 0; background: var(--surface); color: var(--text); white-space: nowrap; }
table.heat td { min-width: 118px; font-variant-numeric: tabular-nums; }
table.heat td.heat { background: color-mix(in srgb, var(--seq) calc(var(--heat, 0) * 42%), var(--surface)); }
table.heat td.empty { color: var(--muted); }
table.heat .v { font-weight: 600; }

/* allocation meters: track and fill are two steps of the same hue */
.two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.two-col > .card { margin-bottom: 16px; }
table.meters td .meter {
  display: inline-block; vertical-align: middle; width: 96px; height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--seq) 18%, var(--surface)); overflow: hidden; margin-right: 8px;
}
table.meters td .meter .fill { display: block; height: 100%; background: var(--seq); border-radius: 4px; }
table.meters .pct { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.hero-name { font-size: 2rem; font-weight: 650; margin-bottom: 4px; }

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.badge.ERROR, .badge.SUPERSEDED { background: var(--error-bg); color: var(--error); }
.badge.WARN { background: var(--warn-bg); color: var(--warn); }
.badge.INFO { background: var(--info-bg); color: var(--info); }
.badge.ACTIVE { background: var(--ok-bg); color: var(--ok); }
.badge.IMPORTED { background: var(--ok-bg); color: var(--ok); }
.badge.REPLACED { background: var(--info-bg); color: var(--info); }
.badge.SKIPPED { background: var(--warn-bg); color: var(--warn); }
.badge.REJECTED { background: var(--error-bg); color: var(--error); }
table.attempts td { vertical-align: top; }
table.attempts td:last-child { min-width: 22rem; }

form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
input[type="text"], input[type="number"], input[type="date"], input[type="file"] {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; color: var(--text); font-size: 0.95rem; }
.check input { margin-top: 5px; }

button, .button {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
  padding: 9px 18px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text);
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- compare page ---------- */
.swatch.s0 { background: var(--p1); }
.swatch.s1 { background: var(--p2); }
.swatch.s2 { background: var(--p3); }
.swatch.s3 { background: var(--p4); }
.swatch.s4 { background: var(--p5); }
.swatch.r0 { background: var(--r1); }
.swatch.r1 { background: var(--r2); }
.swatch.r2 { background: var(--r3); }
.swatch.r3 { background: var(--r4); }
.swatch.r4 { background: var(--r5); }

.tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.tabs a { padding: 8px 18px; color: var(--muted); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.compare-form .slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.compare-form .filters { padding: 0; border: 0; margin: 0; }
.compare-form label { display: flex; align-items: center; }

table.cmp th a { color: var(--text); font-weight: 650; }
table.cmp td, table.cmp th { vertical-align: top; }
table.cmp td .v { font-weight: 600; }
.leader { display: block; font-size: 0.8rem; font-weight: 600; color: var(--good); }
.change { font-weight: 600; white-space: nowrap; }
.change.up { color: var(--good); }
.change.down { color: var(--bad); }
.change.flat { color: var(--muted); }
.status-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.status-badge.new { background: var(--ok-bg); color: var(--ok); }
.status-badge.dropped { background: var(--warn-bg); color: var(--warn); }
.copy-status { margin-left: 8px; font-size: 0.85rem; color: var(--muted); }

/* ---------- player page ---------- */
.crumb { margin: 0 0 8px; font-size: 0.9rem; }
.crumb a { color: var(--muted); }
.player-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.player-head h1 { margin-bottom: 4px; }
.trend-badge { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; min-width: 220px; }
.trend-badge .label { display: block; font-size: 0.8rem; color: var(--muted); }
.trend-badge .value { font-weight: 650; }
.trend-badge.up .value, .trend-chip.up { color: var(--good); }
.trend-badge.down .value, .trend-chip.down { color: var(--bad); }
.trend-badge.flat .value, .trend-chip.flat { color: var(--muted); }
.trend-chip { font-size: 0.85rem; white-space: nowrap; }
.inner-tiles { margin: 12px 0 0; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.chart.radar { height: 380px; }
.small { font-size: 0.85rem; }
/* "≥" on an attack that finished a boss level; hover for why (it carries the tooltip). In this font the glyph is drawn about
   85% as tall as the digits (measured: 0.61em against 0.72em), so it is scaled up by 1/0.848 = 1.18 to stand as tall as the value
   beside it, which also puts its vertical centre on the digits' centre. It takes the value's weight. line-height: 1 keeps the
   bigger glyph from making the line (and so the chip) taller. */
.cap { color: var(--muted); font-weight: inherit; font-size: 1.18em; line-height: 1; cursor: help; }

.segmented { border: 1px solid var(--border); border-radius: 8px; padding: 0; margin: 0; display: inline-flex; overflow: hidden; }
.segmented label { position: relative; margin: 0; color: var(--text); font-size: 0.85rem; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 6px 12px; }
.segmented input:checked + span { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
  /* every chip is at least as wide as one holding 16 characters ("Electric ≥ 12.5B" and the like) after its icon, so the
     chips in a table line up whatever the element or the number; a longer one still grows. Content stays left, icon first.
     16ch + icon (about 1.3em wide) + the icon's gap (0.4em) + the chip's own gap, padding and border. */
  min-width: calc(16ch + 1.3em + 0.4em + 4px + 20px + 2px);
}
/* the damage value sits against the right edge (a leading "≥" hangs to its left), digits the same width so they stack */
.chip > b { margin-left: auto; font-variant-numeric: tabular-nums; }
.chip .swatch { margin-right: 2px; }
table.timeline td, table.attacks td { vertical-align: middle; }
/* squad cards: portrait, burst step top left, core level top right, name along the bottom; everything else (element, weapon,
   class, corporation) is in the tooltip. The overlays are always dark with white marks, so they read on any portrait in both
   themes. The card is a plain box so a focus ring can sit outside it; the rounded, clipped picture is .nk-face. */
table.attacks tbody tr.attack-main th, table.attacks tbody tr.attack-main td { border-bottom: 0; }
table.attacks td.squad { padding-top: 0; padding-bottom: 14px; }
.squad-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nk-card { position: relative; width: 112px; height: 112px; flex: none; color: #fff; border-radius: 8px; cursor: default; }
.nk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nk-face { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: var(--grid); border: 1px solid var(--border); }
.nk-portrait { display: block; width: 100%; height: 100%; object-fit: cover; }   /* decorative: the name is written on the card */
/* top edge: a fade like the one behind the name, no box, so the portrait shows through */
.nk-face::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}
/* the two corner marks: a 20px burst step and a 28px core ring, centred on the same line, whatever the pictures' own proportions */
.nk-icon, .nk-core { position: absolute; z-index: 2; }
.nk-icon { top: 8px; left: 4px; width: 20px; height: 20px; display: block; object-fit: contain; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)); }   /* 20px burst step, on the same centre line as the 28px ring */
.nk-core { top: 4px; right: 4px; width: 28px; height: 28px; display: grid; place-items: center; }
.nk-core img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* the ring's hollow centre is the image centre */
/* The level sits in the middle of the ring. Text is centred by its line box, which puts digits about 0.045em too low, so the
   glyph's real height (cap height) is centred instead; browsers without text-box get the same nudge by hand. */
.nk-core b { position: relative; font-size: 0.75rem; line-height: 1; font-weight: 700; text-shadow: 0 0 3px #000; text-box: trim-both cap alphabetic; }
.nk-core b.max { font-size: 0.4rem; letter-spacing: 0; }
@supports not (text-box: trim-both cap alphabetic) {
  .nk-core b { transform: translateY(-0.045em); }
}
.nk-name {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 14px 4px 4px; text-align: center;
  font-size: 0.75rem; font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85) 60%);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the tooltip: one shared element placed by squad-tooltip.js; each row is an icon with its name on the right */
#nk-tooltip {
  position: fixed; z-index: 100; max-width: 260px; padding: 8px 12px; border-radius: 8px; pointer-events: none;
  background: #141414; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem; line-height: 1.3;
}
#nk-tooltip[hidden] { display: none; }
#nk-tooltip .tip-name { display: block; margin-bottom: 4px; font-size: 0.9rem; }
#nk-tooltip .tip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; white-space: nowrap; }
#nk-tooltip .nk-tip-icon { width: 20px; height: 20px; flex: none; object-fit: contain; }
#nk-tooltip .tip-core { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: #c3c2b7; }input[type="search"] {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
a { color: var(--accent); }

details { margin-bottom: 8px; }
details summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.muted { color: var(--muted); }
code { font-size: 0.9em; }

@media (max-width: 760px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .chart { height: 300px; }
  .tile .value { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* the check mark after the name of a player who is in the latest member list */
.active-mark { color: var(--ok, #3fb950); font-weight: 700; cursor: help; }