:root {
  --bg: #14161a;
  --panel: #1c1f26;
  --panel-2: #232730;
  --line: #2f3542;
  --text: #e6e9ef;
  --muted: #8b93a3;
  --high: #e5484d;
  --medium: #e8a33d;
  --low: #5b8def;
  --ok: #45b26b;
  /* Sampled from the "101" in the logo: the mid gold is the accent, the
     deep amber is its shadow side (borders, gradients, pressed states) and
     the pale gold is the highlight for text that sits on the dark panels. */
  --accent: #fcbc1a;
  --accent-deep: #c56b01;
  --accent-soft: #fdd32a;
  /* Text that sits ON a filled accent surface. Gold is bright, so this is
     dark rather than light. */
  --on-accent: #1a1204;
}

* { box-sizing: border-box; }

/* `hidden` has to beat every display rule below it.
 *
 * The browser's own [hidden] { display: none } is a plain UA declaration, so
 * ANY author rule setting display wins over it — and the elements this app
 * toggles are exactly the ones with layout: .overlay and .pager are flex, so
 * the guild detail overlay stayed laid out over the whole page while invisible,
 * swallowing every click. !important is the correct tool here rather than a
 * smell: it is what makes an attribute mean the same thing everywhere. */
[hidden] { display: none !important; }

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

header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}

/* The brand is the logo image. Height is fixed and width follows the
   intrinsic ratio, so the header keeps its row height whatever the asset is;
   the file itself is served at 120px tall so it stays crisp on 2x/3x screens. */
.brand {
  display: flex; align-items: center;
  flex-shrink: 0; text-decoration: none;
}
.brand img {
  height: 30px; width: auto; display: block;
}
.brand:hover img { filter: brightness(1.12); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

#analyze-form { display: flex; gap: 8px; flex: 1; min-width: 280px; }

#report-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
#report-input:focus { outline: none; border-color: var(--accent); }

button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

.status { padding: 24px 20px; color: var(--muted); }
.status.error { color: var(--high); }

.report-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
}
.report-header .title { font-weight: 600; }
.report-header .meta { color: var(--muted); font-size: 12px; }

.layout { display: flex; align-items: flex-start; }

.roster {
  width: 340px;
  flex: none;
  border-right: 1px solid var(--line);
  min-height: calc(100vh - 160px);
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.roster-row:hover { background: var(--panel); }
.roster-row.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }

.roster-row .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row .spec { color: var(--muted); font-size: 11px; display: block; font-weight: 400; }

.chips { display: flex; gap: 4px; flex: none; }
.chip {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: #101216;
}
.chip.high { background: var(--high); color: #fff; }
.chip.medium { background: var(--medium); }
.chip.low { background: var(--low); color: #fff; }
.chip.clean { background: transparent; color: var(--ok); border: 1px solid var(--ok); }

.detail { flex: 1; padding: 18px 22px; min-width: 0; }
.detail h2 { margin: 0 0 2px; font-size: 20px; }
.detail .sub { color: var(--muted); font-size: 12px; margin-bottom: 18px; }

.empty { color: var(--muted); padding: 40px 0; text-align: center; }

.finding {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--panel);
}
.finding.high { border-left-color: var(--high); }
.finding.medium { border-left-color: var(--medium); }
.finding.low { border-left-color: var(--low); }

.finding .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.finding .what { font-weight: 600; }
.finding .tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}
.finding .detail-text { color: var(--text); margin-top: 4px; }
.finding .obs {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-word;
}

h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); margin: 24px 0 10px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.missing { color: var(--high); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A numeric header must sit over its own column. Left-aligned headings above
   right-aligned values read as two unrelated lists. */
th.num { text-align: right; }
.gem-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 3px;
}

.stat-row { display: flex; gap: 28px; flex-wrap: wrap; }
.stat { }
.stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat .value { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat .note { color: var(--muted); font-size: 11px; }

.limitations {
  margin: 24px 20px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
}
.limitations summary { cursor: pointer; color: var(--text); }
.limitations ul { margin: 10px 0 0; padding-left: 18px; }
.limitations li { margin-bottom: 5px; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .roster { width: 100%; border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
}

/* ── View tabs ─────────────────────────────────────────────────────────── */
.viewbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.viewbar .spacer { flex: 1; }
.viewtab { background: none; border: 1px solid transparent; }
.viewtab.active { background: var(--panel-2); border-color: var(--line); color: var(--accent); }
#fight-picker { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
#fight-select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 13px;
}

/* ── Readiness table ───────────────────────────────────────────────────── */
.readiness { padding: 18px 22px; overflow-x: auto; }
.readiness table { min-width: 780px; }
.readiness td { white-space: nowrap; }
.cell-ok { color: var(--ok); }
.cell-warn { color: var(--medium); }
.cell-bad { color: var(--high); font-weight: 600; }
.cell-muted { color: var(--muted); }
.readiness .sub { color: var(--muted); font-size: 11px; }
/* A player name that jumps to their findings. Reads as a name, not a button —
   the whole column would look like a toolbar otherwise. */
.rowlink {
  font: inherit; font-weight: 600; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.rowlink:hover { border-bottom-style: solid; }
.rowlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.legend { color: var(--muted); font-size: 12px; margin: 0 0 14px; }

/* ── Death recap ───────────────────────────────────────────────────────── */
/* Dense on purpose: fourteen lines have to read as one sequence, not a report. */
.recap { margin: 8px 0 4px; overflow-x: auto; }
.recap table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.recap th {
  text-align: left; color: var(--muted); font-weight: 500;
  padding: 2px 8px 4px 0; border-bottom: 1px solid var(--line);
}
.recap td { padding: 2px 8px 2px 0; white-space: nowrap; }
.recap .num { text-align: right; font-variant-numeric: tabular-nums; }
.recap tbody tr td:first-child { color: var(--muted); }
/* Damage reads as the default; healing is the thing that broke the fall. */
.recap tr.heal td:nth-child(2) { color: var(--ok); }
.recap tr:not(.heal) td:nth-child(2) { color: var(--high); }
.recap tr.kb td { background: color-mix(in srgb, var(--high) 12%, transparent); font-weight: 600; }
.recap .tag { margin-left: 6px; }

/* ── Damage taken ──────────────────────────────────────────────────────── */
.dmg-bar {
  height: 6px; border-radius: 3px; background: var(--high);
  opacity: 0.75; min-width: 2px;
}

/* Scope is load-bearing, not decorative: a pooled finding and a single-pull
   finding are different claims and must never look alike. */


/* ── Compare ───────────────────────────────────────────────────────────── */
.compare-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.compare-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.compare-form input, .compare-form select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 13px; min-width: 190px;
}
.cmp-better { color: var(--ok); }
.cmp-worse { color: var(--high); }
.cmp-neutral { color: var(--muted); }
.cmp-note { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.cmp-head { display: flex; gap: 26px; margin-bottom: 14px; flex-wrap: wrap; align-items: baseline; }

/* Compare uses ONE table so every column lines up; per-category tables sized
   their columns independently and drifted. */
.cmp-table { table-layout: fixed; width: 100%; min-width: 720px; }
.cmp-table th:nth-child(1), .cmp-table td:nth-child(1) { width: 46%; }
.cmp-table th:nth-child(2), .cmp-table td:nth-child(2),
.cmp-table th:nth-child(3), .cmp-table td:nth-child(3) { width: 20%; }
.cmp-table th:nth-child(4), .cmp-table td:nth-child(4) { width: 14%; }
.cmp-table td { vertical-align: top; overflow-wrap: anywhere; }
.cmp-label > div:first-child { font-weight: 500; }
tr.cmp-cat td {
  background: var(--panel-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); font-weight: 600; padding-top: 10px;
}

/* Reasoning needs room to be specific; a table cell forces it to be vague. */
.why {
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  padding: 12px 16px; margin-bottom: 20px;
}
.why summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.why-item { margin-top: 14px; }
.why-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); margin-bottom: 5px;
}
.why-body {
  white-space: pre-wrap; font-size: 13px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.share-btn { margin-bottom: 16px; font-size: 12px; padding: 6px 12px; }

.cmp-table th:nth-child(1), .cmp-table td:nth-child(1) { width: 30%; }
.cmp-table th:nth-child(2), .cmp-table td:nth-child(2),
.cmp-table th:nth-child(3), .cmp-table td:nth-child(3) { width: 15%; }
.cmp-table th:nth-child(4), .cmp-table td:nth-child(4) { width: 10%; }
.cmp-table th:nth-child(5), .cmp-table td:nth-child(5) { width: 30%; text-align: right; }

/* ── Cast timeline ─────────────────────────────────────────────────────────
   Categorical slots from the validated dark palette (surface #1c1f26):
   all six pass lightness band, chroma floor, CVD separation, normal-vision
   floor and 3:1 contrast. Idle uses the reserved status-critical step and
   always ships with a visible label, never colour alone. */
.tl {
  --s1: #3987e5; --s2: #d95926; --s3: #199e70;
  --s4: #c98500; --s5: #d55181; --s6: #008300;
  --s-other: #6b7280;
  --status-critical: #d03b3b;
  position: relative;
  margin-top: 10px;
}
.tl svg { display: block; width: 100%; }
.tl-lane-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  fill: var(--muted);
}
.tl-axis { stroke: var(--line); stroke-width: 1; }
.tl-tick { font-size: 10px; fill: var(--muted); }
.tl-idle-label { font-size: 10px; fill: #f0a3a3; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.tl-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tl-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.tl-summary { color: var(--muted); font-size: 12px; margin-top: 8px; }

.why-caveat { color: var(--muted); font-size: 12px; margin-top: 8px; font-style: italic; }
.why-head { display: flex; align-items: center; gap: 10px; }
.why-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 10px; letter-spacing: 0;
  text-transform: none; font-weight: 600;
}
.why-badge.up { background: rgba(208,59,59,0.18); color: #f0a3a3; }
.why-badge.down { background: rgba(12,163,12,0.18); color: #7fd07f; }
.why-badge.none { background: var(--panel-2); color: var(--muted); font-weight: 400; }

/* ── Comparison reasoning ──────────────────────────────────────────────────
   Diverging pair validated against this surface: blue #3987e5 (ahead) vs
   red #e66767 (behind) — CVD dE 19.2, normal-vision 29.0, both >= 3:1.
   Every bar is direct-labelled, so colour never carries meaning alone. */
.why2 {
  --ahead: #3987e5;
  --behind: #e66767;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 18px 20px; margin-bottom: 22px;
}
.why2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.why2-head h3 { margin: 0; }
.why2-hero { text-align: right; }
.why2-hero-num { font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.why2-hero-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }

.why2-chart { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.why2-row { display: grid; grid-template-columns: minmax(140px, 30%) 1fr 74px; gap: 12px; align-items: center; }
.why2-label { font-size: 13px; overflow-wrap: anywhere; }
.why2-track { background: var(--panel-2); border-radius: 4px; height: 16px; overflow: hidden; }
.why2-bar { height: 100%; border-radius: 0 4px 4px 0; }
.why2-bar.behind, .why2-abar.behind { background: var(--behind); }
.why2-bar.ahead, .why2-abar.ahead { background: var(--ahead); }
.why2-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.why2-val.behind { color: var(--behind); }
.why2-val.ahead { color: var(--ahead); }
.why2-key { color: var(--muted); font-size: 12px; margin: 12px 0 0; }

.why2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; margin-top: 18px; }
.why2-card { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 12px 14px; }
.why2-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.why2-card-title { font-weight: 600; font-size: 13.5px; }
.why2-badge { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.why2-badge.behind { background: rgba(230,103,103,0.16); color: var(--behind); }
.why2-badge.ahead { background: rgba(57,135,229,0.16); color: var(--ahead); }
.why2-badge.none { background: var(--panel-2); color: var(--muted); font-weight: 400; }
.why2-detail { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; line-height: 1.5; }

.why2-metrics { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
/* One metric inside the flex row; a plain container, but named so the class
   scan does not report it as a dangling hook. */
.why2-metric { min-width: 0; }
.why2-metric-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.why2-metric-vals { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.why2-metric-vals .who { color: var(--muted); font-size: 12px; }

.why2-abilities { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.why2-arow { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 46px; gap: 8px; align-items: center; font-size: 12px; }
.why2-aname { color: var(--muted); overflow-wrap: anywhere; }
.why2-atrack { background: var(--panel-2); border-radius: 3px; height: 9px; overflow: hidden; }
.why2-abar { height: 100%; border-radius: 0 3px 3px 0; }
.why2-aval { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.why2-gear { margin-top: 10px; font-size: 12px; table-layout: fixed; }
.why2-gear th { font-size: 10px; }
.why2-gear td { padding: 5px 6px; }
.why2-slot { color: var(--muted); }
.why2-item { font-weight: 500; }
.why2-stats { color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
.why2-method, .why2-assume { color: var(--muted); font-size: 11px; margin-top: 9px; line-height: 1.5; }
.why2-assume { font-style: italic; }

.tl { --s-buff: #9085e9; }
.tl-buff-label { font-size: 9.5px; fill: var(--muted); }
.tl-buff-rule { stroke: var(--line); stroke-width: 1; stroke-opacity: 0.5; }

.why2-bullets { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 12.5px; }
.why2-bullets dt { color: var(--muted); }
.why2-bullets dd { margin: 0; }

/* Sentence-length labels: stack label over value in one column, so neither has
   to wrap against the other. */
.why2-bullets-stacked { grid-template-columns: 1fr; gap: 0; }
.why2-bullets-stacked dt { color: var(--text); margin-top: 8px; }
.why2-bullets-stacked dt:first-child { margin-top: 0; }
.why2-bullets-stacked dd { color: var(--muted); margin: 1px 0 0; }
.why2-gear.wide { margin-top: 12px; font-size: 12.5px; }
.why2-gear.wide th:nth-child(1), .why2-gear.wide td:nth-child(1) { width: 14%; }
.why2-gearnote { color: var(--medium); font-size: 11.5px; padding-top: 0 !important; border-bottom: 1px solid var(--line); }

/* Damage-by-ability comparison. Column tinting groups the two players without
   using series colour, which is reserved for the impact chart. */
.dmg-table { margin-top: 12px; font-size: 12.5px; table-layout: fixed; }
.dmg-table th:first-child, .dmg-table td:first-child { width: 22%; text-align: left; }
.dmg-table th.grp-a, .dmg-table th.grp-b { text-align: center; font-size: 11px; color: var(--text); }
.dmg-table .col-a { background: rgba(57,135,229,0.06); }
.dmg-table .col-b { background: rgba(230,103,103,0.06); }
.dmg-table td.strong { font-weight: 600; color: var(--text); }
.dmg-table tfoot td { border-top: 2px solid var(--line); font-weight: 600; padding-top: 8px; }
.dmg-table tr.dmg-gap td {
  border-top: none; padding-top: 6px; font-weight: 500;
  color: var(--accent); text-align: right;
}

.cmp-scope { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
/* A caveat on how to read every number below, so it must not look like a footnote. */
.cmp-scope.warn {
  color: var(--medium);
  border-left: 3px solid var(--medium);
  padding: 6px 10px;
  background: var(--panel);
  border-radius: 0 6px 6px 0;
}

/* Raw before/after beside every dps figure — a dps delta alone does not tell a
   player what their hits would actually look like. */
.why2-proj { margin-top: 10px; padding: 8px 10px; border-radius: 5px; background: var(--panel-2); }
.why2-proj-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.why2-proj-vals { display: flex; align-items: baseline; gap: 9px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.why2-proj-vals .from { color: var(--muted); }
.why2-proj-vals .arrow { color: var(--muted); }
.why2-proj-vals .to { font-size: 16px; font-weight: 600; color: var(--ahead); }
.cmp-proj { color: var(--accent); font-size: 11.5px; margin-top: 3px; }

/* Cooldown marks: dark-palette slot 8. #eda100 was tried first and FAILED the
   lightness band (L 0.764 against a dark surface). Every mark here carries its
   ability name as a direct label, so colour is not carrying identity — it only
   has to separate this lane from its neighbours. */
.tl { --s-cd: #e66767; }
.tl-cd-label { font-size: 9px; fill: #f0a3a3; }

/* Checks that could not run. Deliberately visible: a silent skip is how a real
   gap stays hidden behind an empty findings list. */
.skipped {
  margin-top: 20px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); font-size: 12.5px;
}
.skipped summary { cursor: pointer; color: var(--medium); }
.skipped table { margin-top: 10px; font-size: 12px; }

/* Wowhead links. Underline on hover only — every ability and item name is one,
   so permanent link styling would turn every table into a wall of blue. */
a.wh { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }
a.wh:hover { border-bottom-color: var(--accent); color: var(--accent); }
a.wh.gem-link { border-bottom: none; margin-right: 2px; font-size: 11px; }
.tl-cd-label, .tl-buff-label { cursor: pointer; }

/* Icons rendered by this app from the pinned catalogue, not injected by the
   Wowhead script — layout stays predictable and survives the script failing. */
.wh-icon {
  width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px;
  margin-right: 5px; border: 1px solid rgba(0,0,0,0.5);
}
a.wh.gem-link .wh-icon { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }

/* Slots where both players wear the same item: shown for completeness, but
   dimmed so the eye lands on the ones that actually differ. */
tr.gear-same { opacity: 0.5; }
tr.gear-same .why2-item { font-weight: 400; }

/* Gem sockets: the icon is the identity, so the name is visually hidden but
   still present for screen readers. Gems with no catalogue icon fall back to
   showing their name, so a socket is never rendered as an empty link. */
.gem-cell { white-space: nowrap; }
a.wh.gem-link .wh-icon { margin-right: 0; }
a.wh.gem-link > span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
a.wh.gem-link.gem-noicon > span {
  position: static; width: auto; height: auto;
  overflow: visible; clip-path: none; font-size: 0.85em;
}
.gem-count { color: var(--dim); font-size: 0.85em; margin-left: 4px; }

/* Enchant line inside a comparison gear cell. */
.why2-ench { font-size: 0.82em; color: var(--dim); margin-top: 2px; }
.why2-ench .ench-missing { color: #e66767; }
.why2-gear .gem-cell { margin-top: 3px; }

/* Checks the comparison declined to price. Collapsed by default: it is
   reassurance that nothing was silently dropped, not a primary result. */
.cmp-skipped { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.cmp-skipped summary { cursor: pointer; color: var(--dim); font-size: 0.88em; }
.skip-table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.skip-table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
.skip-check { white-space: nowrap; color: var(--text); font-size: 0.85em; }
.skip-reason { font-size: 0.85em; color: var(--dim); }
.skip-needs { font-size: 0.8em; color: var(--dim); opacity: 0.75; margin-top: 2px; }

/* Twelve columns do not fit a phone. The table scrolls inside its own box so
   the page body never scrolls sideways. */
.dmg-scroll { overflow-x: auto; }
.dmg-wide { min-width: 900px; }
.dmg-wide th, .dmg-wide td { white-space: nowrap; }
.dmg-who { font-size: 0.85em; color: var(--muted); }
/* Each ability is a pair of rows; the rule goes above the pair, not between. */
tr.dmg-row td { border-bottom: none; }
tr.dmg-row-first td { border-top: 1px solid var(--line); }
tr.dmg-row-b td { padding-bottom: 6px; }
tfoot tr.dmg-total-a td { border-top: 2px solid var(--line); }

/* A hit that landed for less than it rolled: the number is real damage dealt,
   the marker says why it looks small. */
.hit-resisted { cursor: help; }
/* The damage actually dealt stays prominent; the roll it came from is context. */
.hit-dealt { color: inherit; }
.hit-full { color: var(--dim); font-size: 0.85em; }

/* Two timelines stacked on the comparison page. */
.cmp-tl { margin-top: 16px; }
/* The timeline itself must keep class "tl" for its palette and positioning. */
.cmp-tl-head { font-size: 13px; margin-bottom: 4px; }
.cmp-tl-sub { color: var(--dim); }



/* ── Guild finder ──────────────────────────────────────────────────────── */

.sitenav { display: flex; gap: 4px; }
.sitenav a {
  color: var(--muted); text-decoration: none; font-size: 13px;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.sitenav a:hover { background: var(--panel-2); color: var(--text); }
.sitenav a.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

#q {
  flex: 1; min-width: 200px; padding: 8px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
}

main { padding: 18px 22px; }

.filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 14px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.fgroup { display: flex; flex-direction: column; gap: 4px; }
.flabel { color: var(--muted); font-size: 11px; }
.filters select {
  padding: 6px 8px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding-bottom: 6px; }
.reset {
  margin-left: auto; padding: 7px 12px; font: inherit; cursor: pointer;
  background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
}
.reset:hover { color: var(--text); border-color: var(--muted); }

/* Weekday toggles. Wide enough to hit on a phone, since half of guild-hunting
   happens on one. */
.nights { display: flex; gap: 4px; }
.night {
  min-width: 42px; padding: 6px 4px; font: inherit; font-size: 12px; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
}
.night:hover { color: var(--text); }
.night.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.guild-list { display: grid; gap: 10px; }
.guild {
  padding: 12px 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.guild:hover { border-color: var(--muted); }
.guild:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guild-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.guild-name { font-weight: 600; font-size: 15px; }
/* Faction colour, the way every WoW site does it — instantly parseable. */
.guild-name.horde { color: #e5484d; }
.guild-name.alliance { color: #5b8def; }
.guild-realm { color: var(--muted); font-size: 12px; }
.tag.recruiting { color: var(--ok); border-color: var(--ok); }
.tag.verified { color: var(--accent); border-color: var(--accent); }

.guild-facts { display: flex; flex-wrap: wrap; gap: 18px; }
.fact { min-width: 120px; }
.fact .flabel { color: var(--muted); font-size: 11px; }
.fact .fvalue { font-size: 13px; }
.fact .fvalue.muted { color: var(--muted); }

/* Anything the guild wrote about itself. Deliberately unlike the measured
   facts above: same page, different kind of truth. */
.claimed, .claimed-block {
  margin-top: 10px; padding: 8px 10px; font-size: 12.5px;
  background: var(--panel-2); border-left: 3px solid var(--medium); border-radius: 0 6px 6px 0;
}
.claimed-tag { color: var(--medium); font-size: 11px; text-transform: uppercase; margin-right: 8px; }
.claimed-block .pitch { margin: 6px 0; }
.claim-hint { margin-top: 14px; }

.pager { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 18px 0; }
.pagebtn {
  padding: 7px 12px; font: inherit; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
}
.pagebtn:disabled { color: var(--muted); cursor: default; opacity: 0.5; }
.pageinfo { color: var(--muted); font-size: 12.5px; }

.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto; z-index: 50;
}
.overlay-panel {
  position: relative; width: min(760px, 100%); padding: 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.overlay-panel .close {
  position: absolute; top: 10px; right: 12px; font-size: 20px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--muted);
}
.overlay-panel .close:hover { color: var(--text); }
.overlay-panel h2 { margin: 0 0 2px; font-size: 18px; }
.overlay-panel h2.horde { color: #e5484d; }
.overlay-panel h2.alliance { color: #5b8def; }
.overlay-panel h3 { margin: 18px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }

.nights-detail { display: flex; gap: 6px; flex-wrap: wrap; }
.night-chip {
  padding: 4px 10px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
}
table.kills { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.kills th { text-align: left; color: var(--muted); font-weight: 500; padding: 3px 8px 5px 0; }
table.kills td { padding: 3px 8px 3px 0; border-top: 1px solid var(--line); }
.auditlink { color: var(--accent); text-decoration: none; }
.auditlink:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .filters { gap: 10px; }
  .fgroup { flex: 1 1 140px; }
  .nights { flex-wrap: wrap; }
}

/* ── Landing page ──────────────────────────────────────────────────────── */

#landing { max-width: 820px; margin: 0 auto; padding: 44px 22px 64px; }

.hero { text-align: center; margin-bottom: 52px; }
.hero h1 {
  font-size: 30px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.4px;
}
.hero-sub { color: var(--muted); font-size: 15px; margin: 0 auto 24px; max-width: 620px; }

/* The input again, in the middle of the page: someone who scrolled to read
   what this does should not have to scroll back up to use it. */
.hero-form { display: flex; gap: 8px; max-width: 620px; margin: 0 auto 10px; }
#landing-input {
  flex: 1; padding: 11px 14px; font: inherit;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
#landing-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
#landing-btn {
  padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px;
}
#landing-btn:hover { filter: brightness(1.08); }
#landing-btn:disabled { opacity: 0.6; cursor: default; }
.hero-note { color: var(--muted); font-size: 12.5px; margin: 0; }
.hero-note a { color: var(--accent); }

.seo section { margin-bottom: 34px; }
.seo h2 { font-size: 17px; margin: 0 0 10px; }
.seo p { color: var(--muted); margin: 0 0 10px; }
.seo a { color: var(--accent); }
.checks { color: var(--muted); margin: 0; padding-left: 18px; }
.checks li { margin-bottom: 7px; }
.checks strong { color: var(--text); font-weight: 600; }

.faq dt { font-weight: 600; margin-top: 12px; }
.faq dd { color: var(--muted); margin: 4px 0 0; padding-left: 0; }

.page-title { font-size: 20px; margin: 0 0 8px; }

@media (max-width: 640px) {
  #landing { padding: 28px 16px 44px; }
  .hero h1 { font-size: 24px; }
  .hero-form { flex-direction: column; }
}

/* ── Guild directory, server-rendered ──────────────────────────────────── */

.lede { color: var(--muted); font-size: 14.5px; max-width: 760px; margin: 0 0 18px; }
.resultcount { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }

/* The whole card is one link: a directory row should be clickable anywhere,
   and a real <a> gives middle-click, open-in-new-tab and crawlability free. */
.guild-link { display: block; color: inherit; text-decoration: none; }
.guild-link:hover .guild-name { text-decoration: underline; }

/* Raid days lead the facts: the day is what decides whether a guild is even
   possible for someone, and the time only refines it. */
.fvalue.days { display: flex; flex-wrap: wrap; gap: 5px; }
.daychip {
  display: inline-flex; gap: 5px; align-items: baseline;
  padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.daychip .dc-day { font-weight: 600; }
.daychip .dc-time { color: var(--muted); }
.tzlabel { color: var(--muted); font-weight: 400; }

.filters .apply {
  padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px;
}
.filters .reset { align-self: center; color: var(--muted); font-size: 12.5px; }
.fgroup.grow { flex: 1; min-width: 160px; }
.fgroup input[type=search] {
  padding: 6px 8px; font: inherit; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; width: 100%;
}
.nights-group .flabel { display: block; margin-bottom: 4px; }
/* The checkbox itself is hidden; the label is the button. Keyboard users still
   get it, because focus lands on the input inside. */
.night input { position: absolute; opacity: 0; width: 0; height: 0; }
.night:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pagebtn[aria-disabled="true"] { opacity: 0.45; }
a.pagebtn { text-decoration: none; }

.guild-title { font-size: 22px; margin: 0 0 2px; }
.guild-title.horde { color: #e5484d; }
.guild-title.alliance { color: #5b8def; }
.backlink { margin-top: 26px; }
.backlink a { color: var(--accent); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.sitefooter {
  margin-top: 48px; padding: 26px 22px 34px;
  border-top: 1px solid var(--line); background: var(--panel);
}
.foot-cols {
  display: flex; flex-wrap: wrap; gap: 40px;
  max-width: 900px; margin: 0 auto 18px;
}
.foot-head { font-size: 12px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
/* The first footer column heads with the logo instead of the site name. It is
   the same asset as the header, one step smaller. */
.foot-brand { display: block; margin-bottom: 10px; }
.foot-brand img { height: 26px; width: auto; display: block; }
.foot-brand:hover img { filter: brightness(1.12); }
.foot-cols a {
  display: block; color: var(--muted); font-size: 12.5px;
  text-decoration: none; padding: 2px 0;
}
.foot-cols a:hover { color: var(--accent); }
.foot-note {
  max-width: 900px; margin: 0 auto; color: var(--muted);
  font-size: 11.5px; opacity: 0.8;
}

/* ── Blog ──────────────────────────────────────────────────────────────── */

/* ── Blog layout ───────────────────────────────────────────────────────────
   Centred like the home page, and centred the same WAY: #landing centres its
   column with margin:0 auto and centres only the .hero header inside it, while
   the prose below stays left-aligned. Running text set centred is markedly
   harder to read -- every line starts at a different x -- so the header block
   is centred and the body is not. */
.blog-wrap { max-width: 760px; margin: 0 auto; }
.page-head { text-align: center; margin-bottom: 28px; }
.page-head .lede { margin-left: auto; margin-right: auto; }

/* Post beside its CTA rail. minmax(0,…) on the text column rather than a bare
   width: without it a long code block or URL in a post forces the grid wider
   than the viewport instead of scrolling inside its own box. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 46px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  /* The rail is supporting material, so below the post rather than beside it. */
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 720px; }
}

/* ── CTA rail ───────────────────────────────────────────────────────────── */
.post-side { display: grid; gap: 16px; position: sticky; top: 18px; }
@media (max-width: 900px) { .post-side { position: static; } }

.cta {
  padding: 16px 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* The auditor is the thing most readers want; the gold edge says so without
   needing a second filled button competing with the first. */
.cta-primary { border-color: var(--accent-deep); }
.cta h2 { font-size: 14px; margin: 0 0 7px; letter-spacing: 0.2px; }
.cta p { color: var(--muted); font-size: 12.5px; margin: 0 0 13px; line-height: 1.55; }
.cta-btn {
  display: block; text-align: center; text-decoration: none;
  padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.cta-btn:hover { filter: brightness(1.08); }
.cta-btn-quiet {
  background: transparent; color: var(--text); border-color: var(--line);
}
.cta-btn-quiet:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.cta-note { font-size: 11.5px; margin: 9px 0 0 !important; text-align: center; }
.cta-links a {
  display: block; color: var(--accent); font-size: 12.5px;
  text-decoration: none; padding: 3px 0;
}
.cta-links a:hover { text-decoration: underline; }

.postlist { display: grid; gap: 14px; max-width: 760px; }
.postcard {
  padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
}
.postcard h2 { font-size: 16px; margin: 0 0 4px; }
.postcard h2 a { color: var(--text); text-decoration: none; }
.postcard h2 a:hover { color: var(--accent); }
.postcard time, .post time { color: var(--muted); font-size: 12px; }
.postcard p { color: var(--muted); margin: 6px 0 0; font-size: 13px; }

.post { max-width: 720px; }
.post-layout .post { max-width: none; }
.postbody { margin-top: 18px; }
.postbody h2 { font-size: 18px; margin: 26px 0 8px; }
.postbody h3 { font-size: 15px; margin: 20px 0 6px; }
.postbody p { margin: 0 0 12px; }
.postbody ul, .postbody ol { margin: 0 0 12px; padding-left: 20px; }
.postbody li { margin-bottom: 5px; }
.postbody code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}
.postbody pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; overflow-x: auto;
}
.postbody blockquote {
  margin: 0 0 12px; padding: 6px 12px; color: var(--muted);
  border-left: 3px solid var(--line);
}
.postbody a { color: var(--accent); }

/* ── Recent audits ─────────────────────────────────────────────────────── */

#analyze-form { position: relative; }
.recent-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 340px; overflow-y: auto; padding: 4px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.recent-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 10px; font: inherit; color: var(--text);
  background: none; border: 0; border-radius: 6px;
}
.recent-item:hover { background: var(--panel); }
.recent-item .recent-title { display: block; font-size: 13px; }
.recent-item .recent-meta { display: block; color: var(--muted); font-size: 11.5px; }
.recent-item.clear, .recent-clear {
  color: var(--muted); font-size: 12px; cursor: pointer;
  background: none; border: 0; padding: 7px 10px;
}
.recent-item.clear { border-top: 1px solid var(--line); border-radius: 0; width: 100%; text-align: left; }
.recent-item.clear:hover, .recent-clear:hover { color: var(--high); }

.recent { max-width: 820px; margin: 0 auto 44px; }
.recent h2 { font-size: 15px; margin: 0 0 10px; }
.recent-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.recent-card {
  text-align: left; cursor: pointer; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.recent-card:hover { border-color: var(--accent); }
.recent-card .recent-title {
  display: block; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-card .recent-meta { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.recent-clear { grid-column: 1 / -1; justify-self: start; }

/* ── Footer legal ──────────────────────────────────────────────────────── */

.foot-legal { max-width: 900px; margin: 0 auto; color: var(--muted); font-size: 11.5px; }
.foot-legal p { margin: 0 0 6px; }
.foot-legal a { color: var(--muted); }
.foot-links { display: flex; gap: 14px; margin-top: 10px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* A tag the guild wrote about itself, in the claimed colour rather than the
   measured one — same rule as the "the guild says" block. */
.tag.claimed-tagline { color: var(--medium); border-color: var(--medium); }

/* ── Facet browse links ────────────────────────────────────────────────── */
/* Both a way in for a reader and the internal link graph a crawler follows to
   find the filtered views at all. */
.browse { margin: 34px 0; padding-top: 22px; border-top: 1px solid var(--line); }
.browse h2 { font-size: 15px; margin: 0 0 12px; }
.browse-cols { display: flex; flex-wrap: wrap; gap: 32px; }
.browse-cols h3 { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.browse-cols a { display: block; color: var(--accent); font-size: 12.5px; text-decoration: none; padding: 2px 0; }
.browse-cols a:hover { text-decoration: underline; }

.outcome { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; }
.outcome.kill { color: var(--ok); border-color: var(--ok); }
.outcome.wipe { color: var(--medium); border-color: var(--medium); }

/* ── Guild logs table ──────────────────────────────────────────────────── */
table.logs { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.logs th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 10px 6px 0; }
table.logs th.num, table.logs td.num { text-align: right; padding-right: 14px; }
table.logs td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
table.logs .cell-muted { font-size: 11px; }
.logactions { white-space: nowrap; }
.logactions a { margin-right: 12px; text-decoration: none; }
.wcllink { color: var(--muted); }
.wcllink:hover { color: var(--accent); }

/* ── Claiming ──────────────────────────────────────────────────────────── */
#claim { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.claim-msg {
  padding: 9px 12px; margin: 0 0 12px; font-size: 13px;
  background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
}
.claimbtn {
  display: inline-block; padding: 10px 16px; margin: 4px 0 10px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  border-radius: 8px; text-decoration: none;
}
.claimbtn:hover { filter: brightness(1.08); }
.claimform { display: grid; gap: 12px; max-width: 560px; margin-top: 12px; }
.claimform label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.claimform label.field { flex-direction: column; align-items: stretch; gap: 4px; }
.claimform label.field > span { color: var(--muted); font-size: 12px; }
.claimform input[type=text], .claimform textarea, .claimform select {
  padding: 8px 10px; font: inherit; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; width: 100%;
}
.claimform button {
  justify-self: start; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px;
}

/* ── Parse percentiles ─────────────────────────────────────────────────── */
/* Warcraft Logs' own colours. A raider reads these as quantities already, and
   a different scale for the same number would only cause arguments. */
.parse {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.parse.small { font-size: 11px; padding: 0 6px; }
.parse-metric { font-size: 10px; font-weight: 500; opacity: 0.75; text-transform: uppercase; }
.parse.common    { color: #9d9d9d; }
.parse.uncommon  { color: #1eff00; }
.parse.rare      { color: #0070ff; }
.parse.epic      { color: #a335ee; }
.parse.legendary { color: #ff8000; }
.parse.astounding, .parse.artifact { color: #e5cc80; }
.stat .value .parse { font-size: 16px; }

/* A multi-select needs room to be usable; ctrl-clicking inside four rows is
   how people end up with one spec selected by accident. */
.claimform select[multiple] { height: auto; min-height: 220px; padding: 6px; }
.claimform optgroup { color: var(--muted); font-style: normal; }
.claimform option { color: var(--text); padding: 2px 4px; }
.claimform .hint { color: var(--muted); font-size: 11px; }
.filters optgroup { color: var(--muted); }