/* Conquest Reborn - the signed-in suite: Conquest Logs (/logs), the Gear Planner (/gear), Meta
   (/meta), How We Count (/how-we-count), and the account page's privacy panel (.su-privacy).
   Layers on the tokens in css/style.css; include after it and css/auth.css. Every rule is scoped
   to an su- class, so the account page can load this file without anything else changing.

   Colour. The theme is gold-only; the suite adds colour only where colour is data, by the game's
   own conventions:
     item quality   --q0..--q7 (poor ... heirloom). The rare blue and the epic purple are lifted a
                    step from the game's #0070dd / #a335ee so the names clear 4.5:1 on the panel
                    (#101524); the hues stay recognisable.
     class          an inline colour per class id from js/suite-common.js (the stock ten from
                    css/account.css, a golden-angle hue for the rest), on the name or a dot; the name
                    beside it is the identity.
     gain / loss    the Gear Planner's --gp-up / --gp-down (its section below).
   Nothing else is coloured: letters, chips, bars and banners stay gold, parchment or muted. */

.su-page [hidden],
.su-privacy [hidden] { display: none !important; }

.su-page,
.su-privacy {
  --q0: #9d9d9d;
  --q1: var(--ink);
  --q2: #1eff00;
  --q3: #4c9ef0;
  --q4: #b86cf2;
  --q5: #ff8000;
  --q6: #e6cc80;
  --q7: #e6cc80;
  --su-row-hover: #151b2d;
  --su-own: rgba(200, 169, 94, 0.07);
  --su-panel-2: #0d1120;
}

.su-page {
  color-scheme: dark;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.su-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Head ---------- */
.su-head { margin-bottom: 22px; }
.su-kicker {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  margin: 0 0 8px;
}
.su-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 10px;
}
.su-sub { color: var(--muted); margin: 0; max-width: 66ch; }
.su-loading { color: var(--muted); margin: 18px 0; }

/* ---------- Suite navigation ---------- */
.su-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 28px;
}
.su-tab {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 0 9px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.su-tab:hover { color: var(--gold-bright); text-decoration: none; }
.su-tab[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); }
.su-tab-out::after { content: " \2197"; font-family: "Alegreya Sans", sans-serif; font-size: 0.8em; opacity: 0.7; }

.su-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 16px;
}
.su-subtab,
.su-pill {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 7px 13px;
}
.su-subtab:hover,
.su-pill:hover { color: var(--gold-bright); border-color: var(--line); text-decoration: none; }
.su-subtab[aria-current="page"],
.su-pill[aria-current="page"] { color: var(--gold-bright); border-color: var(--gold); background: var(--gold-wash); }
.su-pill.is-small { font-size: 0.72rem; padding: 5px 10px; }

/* ---------- Gates ---------- */
.su-gate { display: grid; place-items: center; padding: 30px 0 60px; }
.su-gate-panel {
  max-width: 520px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px 34px;
}
.su-gate-panel h2 { font-size: 1.3rem; color: var(--gold); margin: 0 0 12px; }
.su-gate-panel p { color: var(--muted); margin: 0 0 24px; overflow-wrap: anywhere; }
.su-gate-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.su-page button.btn,
.su-privacy button.btn { font-family: Cinzel, serif; }

/* ---------- View head, text, banners ---------- */
.su-view-head { margin: 0 0 14px; }
.su-view-title { font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
/* focus moves to the view's heading after a navigation (for screen readers); it is not a control,
   so it gets no ring */
.su-view-title:focus,
.su-view-title:focus-visible { outline: none; }

.su-empty { color: var(--muted); padding: 14px 2px; margin: 0; }
.su-note { color: var(--muted); font-size: 0.92rem; margin: 6px 0; }
.su-foot { color: var(--muted); font-size: 0.86rem; margin: 10px 0 0; }
.su-msg { color: var(--gold-bright); min-height: 1.4em; margin: 10px 0 0; }
.su-strong { color: var(--ink); font-weight: 700; }
.su-link { color: var(--gold-bright); }
.su-back { margin: 0 0 6px; color: var(--muted); font-size: 0.92rem; }
.su-context { color: var(--muted); margin: 16px 0 10px; }

.su-banner {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 9px 14px;
  margin: 10px 0;
  font-size: 0.93rem;
}
.su-banner.is-warn { border-left-color: var(--gold-bright); }
.su-banner-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  white-space: nowrap;
}
.su-banner-text { flex: 1 1 260px; min-width: 0; }

/* ---------- Filters ---------- */
.su-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin: 14px 0 14px;
}
.su-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.su-field-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.su-field select,
.su-field input {
  background: var(--bg-field);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 7px 9px;
  max-width: 100%;
}
.su-field select:focus-visible,
.su-field input:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }

/* ---------- Cards and facts ---------- */
.su-card {
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 22px 22px;
  min-width: 0;
}
.su-card h3 { font-size: 1.05rem; color: var(--gold); margin: 0 0 12px; }
.su-card .su-kicker { margin-bottom: 4px; }

.su-run-line { color: var(--muted); margin: 6px 0 10px; overflow-wrap: anywhere; }
.su-outcome.is-timed,
.su-outcome.is-cleared { color: var(--gold-bright); font-weight: 700; }
.su-guild { color: var(--ink); }

.su-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px 18px;
  margin: 14px 0 4px;
}
.su-fact dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
}
.su-fact dd { margin: 0; font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Composition: one line per role */
.su-comp { display: grid; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-faint); }
.su-comp-row { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; }
.su-comp-role {
  flex: 0 0 76px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.su-comp-names { display: flex; flex-wrap: wrap; gap: 4px 18px; min-width: 0; flex: 1 1 240px; }

/* ---------- Chips ---------- */
.su-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.su-chip {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.6;
}
.su-chip.is-small { font-size: 0.56rem; padding: 0 6px; margin-left: 6px; }
.su-chip.is-kill { color: var(--gold-bright); border-color: var(--gold); }
.su-chip.is-collecting { color: var(--muted); border-style: dashed; }

/* ---------- Players ---------- */
.su-member { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.su-member-name { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
a.su-member-name:hover { text-decoration: underline; }
.su-member-name.is-hidden { font-weight: 400; font-style: italic; }
.su-member.is-own .su-member-name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.su-you {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bg);
  background: var(--gold);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.5;
}
.su-member-note { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.su-member-sub { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
/* Guild tag (run report, phase P4 item 8): "<Name>" beside the title, and a line under a Meters row's player */
.su-view-titlerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.su-run-guild { color: var(--muted); font-size: 1.05rem; overflow-wrap: anywhere; }
.su-guild-link { text-decoration: underline dotted; text-underline-offset: 3px; }
.su-guild-link:hover, .su-guild-link:focus-visible { color: var(--gold-bright); }
.su-member-cell { min-width: 0; }
.su-member-guild { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; overflow-wrap: anywhere; }

.su-group { display: inline; line-height: 1.7; }
.su-group-fold summary { cursor: pointer; color: var(--gold-bright); font-size: 0.9rem; }
.su-group-fold[open] summary { margin-bottom: 4px; }

/* ---------- Icons (js/suite-common.js iconNode: /logs, /gear and /meta) ---------- */
/* A framed glyph; the icon image fades in over it once loaded. A missing icon keeps the glyph. */
.su-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--su-panel-2);
  overflow: hidden;
  vertical-align: middle;
}
.su-icon.is-small { width: 22px; height: 22px; }
.su-icon img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.su-icon.is-loaded img { opacity: 1; }
.su-icon.is-loaded .su-glyph { visibility: hidden; }
.su-glyph {
  display: inline-grid;
  place-items: center;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.su-icon.is-small .su-glyph { font-size: 0.5rem; }
.su-icon .su-dot { box-shadow: none; }
.su-with-icon { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.su-char-icons { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: middle; }

/* ---------- Support credit beside a ranking (phase P5): a figure, a few spell icons, a PARTIAL chip ---------- */
.su-support-cell { display: inline-flex; align-items: center; gap: 6px; }
.su-support-spells { display: inline-flex; align-items: center; gap: 3px; }
.su-support-spell { display: inline-flex; position: relative; }  /* its hidden .su-sr text stays in the table's own scroll box */
.su-support-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.su-support-none { color: var(--muted); }
.gp-bsrc .su-subtabs { margin: 0; }

/* ---------- What players wear (phase P5 batch 2): a slot's most worn items, enchantments and gems with their shares ---------- */
.su-table td.gp-cell-wear { white-space: normal; min-width: 210px; vertical-align: top; }
.gp-wear-list { display: grid; gap: 6px; }
.gp-wear-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.gp-wear-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.gp-wear-name { overflow-wrap: break-word; }
.su-table.gp-wear th[scope="row"] { width: 1%; white-space: nowrap; }
.gp-wear-count { margin-top: 10px; }
.gp-wear-pct { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-wear-extras { display: grid; gap: 20px; margin-top: 20px; }
@media (max-width: 600px) {
  .su-table td.gp-cell-wear { min-width: 230px; }
  .gp-wear-extras .su-table td.gp-cell-item { min-width: 210px; }
}

/* ---------- Tables (each scrolls in its own box; the page never scrolls sideways) ---------- */
.su-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  margin: 8px 0 0;
}
.su-card .su-table-wrap { border-radius: 4px; }
.su-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}
.su-table th,
.su-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-faint);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 400;
}
.su-table tbody tr:last-child > * { border-bottom: 0; }
.su-table thead th {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-bottom-color: var(--line);
  font-family: "Alegreya Sans", sans-serif;
}
.su-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.su-table tbody th { color: var(--ink); }
.su-table tbody tr:hover > * { background: var(--su-row-hover); }
.su-table tr.is-own > * { background: var(--su-own); }
.su-table tr.is-total > * { color: var(--muted); font-weight: 700; border-top: 1px solid var(--line); }
.su-table .su-strong { font-weight: 700; }
.su-table td.su-cell-group { white-space: normal; min-width: 260px; }
/* a run's Gear & Build table (phase P4): the item column keeps room for its icon and name */
.su-table td.su-cell-item { white-space: normal; min-width: 200px; }

/* the first column stays put while the rest scrolls sideways (opaque, so nothing shows through) */
.su-table-wrap.is-sticky .su-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-panel);
  box-shadow: 1px 0 0 var(--line-faint);
  white-space: normal;
  min-width: 150px;
  max-width: 260px;
}
.su-table-wrap.is-sticky .su-table tbody tr:hover > :first-child { background: var(--su-row-hover); }
.su-table-wrap.is-sticky .su-table tr.is-own > :first-child { background: #16192a; }

.su-sort {
  all: unset;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.su-sort:hover { color: var(--gold-bright); }
.su-sort:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
th[aria-sort] .su-sort { color: var(--gold-bright); }
th[aria-sort] .su-sort::after { content: " \25BE"; }

/* a run in a list: its place (the link), when, and its chips */
.su-run { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.su-run-name { color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
a.su-run-name:hover { color: var(--gold-bright); text-decoration: underline; }
.su-run-meta { color: var(--muted); font-size: 0.8rem; }
.su-ability { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; white-space: normal; }

/* share bars: the value, with a thin gold bar under it */
.su-share { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 64px; }
.su-share-track { display: block; width: 64px; height: 4px; background: var(--line-faint); border-radius: 2px; overflow: hidden; }
.su-share-bar { display: block; height: 100%; background: var(--gold); }

/* ---------- Run report ---------- */
.su-run-head { margin-bottom: 4px; }
.su-run-body { min-width: 0; }
.su-stack { display: grid; gap: 22px; min-width: 0; }
.su-block { min-width: 0; }
.su-block h3,
.su-block h4 { font-size: 0.95rem; color: var(--gold); margin: 0 0 4px; letter-spacing: 0.06em; }

/* Timeline (run report, phase P4 item 7): a step line per player in an inline SVG, the pulls shaded behind it. The
   line colours are the players' class colours (set from js/logs.js); nothing here is coloured by itself. */
.su-tl { min-width: 0; }
.su-tl-pick { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.su-tl-legend {
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.su-tl-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); font-size: 0.88rem; cursor: pointer; }
.su-tl-opt input { margin: 0; accent-color: var(--gold); }
.su-tl-opt input:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
.su-tl-swatch { display: inline-block; flex: none; width: 22px; height: 8px; }
.su-tl-sline { fill: none; stroke-width: 2.4; stroke-linecap: butt; }
.su-tl-mode { margin: 0 0 12px; justify-self: start; }
.su-tl-more { margin: 12px 0 0; }
.su-tl-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
}
.su-tl-grid { stroke: var(--line-faint); stroke-width: 1; }
.su-tl-axis { fill: var(--muted); font-size: 11px; }
.su-tl-unit { fill: var(--muted); font-size: 10px; }
.su-tl:focus { outline: none; }
.su-tl-pull { fill: var(--gold-wash); }
.su-tl-pull.is-kill { fill: rgba(200, 169, 94, 0.22); }
.su-tl-pulln { fill: var(--gold); font-size: 10px; }
.su-tl-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.su-tl-death { stroke: var(--bg); stroke-width: 1; }

.su-attempt {
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  margin: 0 0 10px;
  min-width: 0;
}
.su-attempt > .su-table-wrap { border: 0; border-top: 1px solid var(--line-faint); border-radius: 0 0 6px 6px; margin: 0; }
.su-attempt-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.su-attempt-sum:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: -3px; }
.su-attempt-n {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.su-attempt-meta { color: var(--muted); font-size: 0.9rem; }

/* a death's Recap expander (phase P4, the "recap" capture): the button in its Deaths row, and the row it opens
   under it - one cell across the table, its content held at the scroll box's left edge and never wider than that
   box, so any screen reads it without scrolling the deaths table sideways. The content never sizes the deaths
   table (inline-size containment): an opened recap leaves its columns, the RECAP button included, where they were,
   and its own table scrolls in its own box. Its width: the deaths table's own scroll box (a size container once a
   recap row is in it), else the screen less the page's gutters, never more than the page's 1,230 px inside */
.su-recap-btn {
  all: unset;
  cursor: pointer;
  color: var(--gold-bright);
  font-size: 0.86rem;
  white-space: nowrap;
}
.su-recap-btn::after { content: " \25BE"; }
.su-recap-btn[aria-expanded="true"]::after { content: " \25B4"; }
.su-recap-btn:hover { text-decoration: underline; }
.su-recap-btn:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
.su-table-wrap.is-sticky .su-table tr.su-recap-row > td,
.su-table tr.su-recap-row > td {
  position: static;
  min-width: 0;
  max-width: none;
  white-space: normal;
  padding: 0 0 12px;
  background: var(--su-panel-2);
  box-shadow: none;
}
.su-table-wrap.is-sticky .su-table tbody tr.su-recap-row:hover > td { background: var(--su-panel-2); }
.su-recap {
  position: sticky;
  left: 0;
  contain: inline-size;
  max-width: min(calc(100vw - 48px), 1230px);
  padding: 10px 12px 0;
}
@supports (width: 1cqw) and selector(:has(a)) {
  .su-table-wrap:has(> .su-table > tbody > tr.su-recap-row) { container-type: inline-size; }
  .su-recap { max-width: 100cqw; }
}
.su-recap .su-table-wrap { margin: 0; }
.su-recap .su-table-wrap.is-sticky .su-table tr > :first-child { min-width: 0; white-space: nowrap; }
.su-recap .su-empty,
.su-recap .su-note,
.su-recap .su-loading { margin: 0; padding: 4px 2px; }

.su-board-title { font-size: 1.1rem; color: var(--gold); margin: 8px 0 6px; overflow-wrap: anywhere; }

.su-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; flex-wrap: wrap; }
.su-pager-at { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.su-pager .btn[disabled] { opacity: 0.4; cursor: default; }
.su-more { margin-top: 14px; }

/* ---------- Rankings (Conquest Logs #rank=) ----------
   The scopes list: a group per difficulty (raid) or one list of dungeons (Mythic+), each scope's specs
   as links. The percentile is plain text in the table's own colours: no colour bands keyed to it. */
.su-rank-scopes { display: grid; gap: 18px; margin-top: 8px; min-width: 0; }
.su-rank-group { min-width: 0; }
.su-rank-scope {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
  gap: 6px 18px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
  min-width: 0;
}
.su-rank-scope-name { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.su-rank-scope-keys { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.su-rank-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.su-rank-spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-width: 0;
}
.su-rank-spec:hover .su-rank-spec-name { text-decoration: underline; }
.su-rank-spec:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 2px; }
.su-rank-spec-name { font-weight: 700; overflow-wrap: anywhere; }
.su-rank-spec-class { color: var(--muted); font-size: 0.8rem; }
.su-rank-notes { margin-top: 6px; }
.su-attempt-note { margin: 0 16px 10px; }

/* ---------- Character page ---------- */
.su-char-head { margin-bottom: 4px; }
.su-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.su-sections > .su-section:nth-child(-n+3) { grid-column: 1 / -1; }
/* the character page: Mythic+, best ranked kills, records and recent runs take the full width */
.su-sections.is-char > .su-section:nth-child(-n+4) { grid-column: 1 / -1; }
.su-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.su-score-v { font-family: Cinzel, Georgia, serif; font-size: 2rem; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.su-score-l { color: var(--muted); }

.su-item { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.su-item.q0 { color: var(--q0); }
.su-item.q1 { color: var(--q1); }
.su-item.q2 { color: var(--q2); }
.su-item.q3 { color: var(--q3); }
.su-item.q4 { color: var(--q4); }
.su-item.q5 { color: var(--q5); }
.su-item.q6 { color: var(--q6); }
.su-item.q7 { color: var(--q7); }

.su-ca {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  columns: 2 220px;
  column-gap: 24px;
}
.su-ca li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-faint);
}
.su-ca-name { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.su-ca-rank { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* ---------- Find ---------- */
.su-find { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 10px 0 0; }
.su-find .su-field input { width: 260px; max-width: 100%; }

/* ---------- Meta: tabs, legend, roles, specs ---------- */
.su-tabgroups { display: grid; gap: 10px; margin: 6px 0 4px; }
.su-tabgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-tabgroup-label {
  flex: 0 0 84px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.su-disclaim {
  background: var(--bg-raise);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 0.93rem;
}
.su-disclaim p { margin: 0 0 6px; }
.su-disclaim p:last-child { margin: 0; }

.su-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 18px;
}
.su-legend-i { display: inline-flex; align-items: center; gap: 6px; }

.su-letter {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: var(--gold-wash);
}
.su-letter.is-s { color: var(--gold-bright); }
.su-letter.is-small { width: 20px; height: 20px; font-size: 0.72rem; }

.su-role { margin: 0 0 18px; }
.su-role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.su-role-head h3 { margin: 0; font-size: 1.15rem; }
.su-role-note { color: var(--muted); font-size: 0.9rem; margin: 0; }
.su-role-caveat { color: var(--muted); font-size: 0.88rem; font-style: italic; margin: 6px 0 0; }
.su-role-bar {
  margin: 12px 0 4px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}
.su-role-group {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-family: "Alegreya Sans", sans-serif;
  text-transform: uppercase;
  margin: 16px 0 2px;
}

.su-specs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 0 20px;
}
.su-spec { border-bottom: 1px solid var(--line-faint); min-width: 0; }
.su-spec-btn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  padding: 9px 4px;
  cursor: pointer;
}
.su-spec-btn:hover { background: var(--su-row-hover); }
.su-spec-btn:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: -2px; }
.su-spec-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.su-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-panel);
}
.su-spec-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.su-spec-name { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.su-spec-class { color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.su-spec-val { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.su-rel { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.su-rel-v { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.su-rel-ci { color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-spec-side { grid-column: 1 / -1; color: var(--muted); font-size: 0.8rem; padding-left: 19px; }
.su-spec.is-open .su-spec-btn { background: var(--su-row-hover); }
.su-spec-card { padding: 4px 6px 14px 19px; }
.su-spec-card .su-facts { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 8px; }
.su-spec-card .su-table-wrap { background: var(--su-panel-2); }

/* ---------- How We Count (long-form) ---------- */
.su-prose { max-width: 52rem; }
.su-prose h2 { font-size: 1.35rem; margin: 2.4rem 0 0.8rem; scroll-margin-top: 90px; }
.su-prose p,
.su-prose li,
.su-prose dd { color: var(--ink); opacity: 0.92; }
.su-prose p { margin: 0 0 1rem; }
.su-prose ul,
.su-prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.su-prose li { margin: 0.35rem 0; }
.su-prose strong { color: var(--ink); }
.su-prose a { color: var(--gold-bright); }
.su-prose .su-table-wrap { margin: 0.4rem 0 1.2rem; }
.su-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 16px;
  background: var(--bg-raise);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  font-size: 0.92rem;
}
.su-toc a { color: var(--muted); }
.su-defs { display: grid; gap: 14px; margin: 0 0 1.2rem; }
.su-defs dt { font-weight: 700; color: var(--gold); }
.su-defs dd { margin: 2px 0 0; }
.su-formula {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 10px 14px;
  overflow-x: auto;
  white-space: nowrap;
}
.su-formula-inline { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; white-space: nowrap; }

/* ---------- The account page's privacy panel ---------- */
.su-privacy .su-hide-list { display: grid; gap: 8px; margin: 0 0 12px; }
.su-hide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  background: rgba(10, 13, 22, 0.6);
}
.su-hide-id { display: flex; flex-direction: column; min-width: 0; }
.su-hide-name { font-family: Cinzel, serif; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.su-hide-meta { color: var(--muted); font-size: 0.85rem; }
.su-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
}
.su-switch input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.su-switch input:disabled + span { color: var(--disabled-ink); }
.su-switch input:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
.su-suite-links { display: flex; gap: 10px; flex-wrap: wrap; }
.su-privacy .acct-msg .su-signin-again { margin: 8px 0 0; display: inline-block; }
.su-privacy .su-hide-list .su-signin-again { justify-self: start; }

/* ---------- Narrow screens: a 16px gutter; tables scroll in their own box ---------- */
@media (max-width: 760px) {
  .su-sections { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .su-rank-scope { grid-template-columns: minmax(0, 1fr); }
  .su-page { padding: 32px 16px 72px; }
  .su-tabs { gap: 2px 16px; }
  .su-tab { font-size: 0.78rem; }
  .su-card { padding: 16px 14px; }
  .su-field { flex: 1 1 42%; }
  .su-field select { width: 100%; }
  .su-table { font-size: 0.86rem; }
  .su-table th,
  .su-table td { padding: 7px 8px; }
  .su-table-wrap.is-sticky .su-table tr > :first-child { min-width: 120px; max-width: 170px; }
  .su-table td.su-cell-item { min-width: 160px; }
  .su-gate-panel { padding: 30px 20px; }
  .su-comp-role { flex-basis: 100%; }
  .su-tabgroup-label { flex-basis: 100%; }
  .su-find .su-field { flex: 1 1 100%; }
  .su-find .su-field input { width: 100%; }
  .su-hide-row { padding: 10px 12px; }
}

/* ---------- Gear Planner (/gear) ----------
   Two more data colours, for gains and losses only (compare, the Upgrade Finder, the picker): a light
   green for "up" and a light red for "down", both over 7:1 on the panel (#101524); the sign (+ / −) beside
   every number carries the same meaning for anyone who cannot tell the two apart. Icons are 36px (20px in
   compact lists) with a lettered glyph under them: the glyph shows until the icon has loaded, and stays
   when there is none. */
.gp-page {
  --gp-up: #6fd39a;
  --gp-down: #ff8f80;
  --gp-warn: #ffb35c;
}
.gp-up { color: var(--gp-up); font-weight: 700; }
.gp-down { color: var(--gp-down); font-weight: 700; }

.su-page .btn.is-small { font-size: 0.66rem; padding: 4px 9px; letter-spacing: 0.04em; }
.su-page .btn.is-on { color: var(--gold-bright); border-color: var(--gold); background: var(--gold-wash); }
.su-page button.btn[disabled] { opacity: 0.45; cursor: default; }

.gp-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gp-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-item-sub { color: var(--muted); font-size: 0.8rem; white-space: normal; overflow-wrap: anywhere; }
.gp-empty { color: var(--muted); font-style: italic; }
.gp-planned {
  align-self: flex-start;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bg);
  background: var(--gold);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 1.6;
}
.su-table td.gp-cell-item { white-space: normal; min-width: 220px; }
.su-table td.gp-cell-wrap { white-space: normal; min-width: 160px; }
.su-table td.gp-cell-acts { white-space: normal; }
.gp-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.gp-item-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gp-item-cell .gp-acts { padding-left: 46px; }
.gp-extras { color: var(--ink); opacity: 0.85; }
.su-table td.gp-cell-stat { white-space: normal; }
.gp-stat { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gp-positions th[scope="row"] { width: 1%; white-space: nowrap; }
.gp-row-acts { justify-content: flex-start; margin-top: 14px; }

.gp-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
  margin: 16px 0 20px;
  align-items: start;
}
.gp-side { display: grid; gap: 20px; min-width: 0; }
.gp-sheet .su-section,
.gp-side .su-section { min-width: 0; }
.gp-page .su-view > .su-section,
.gp-page .su-view > div:not([class]) > .su-section,
.gp-page .su-view > div:not([class]) > div:not([class]) > .su-section { margin-top: 20px; }

.gp-filters { align-items: center; }
.gp-check { font-size: 0.92rem; }
.gp-hint { color: var(--muted); font-size: 0.85rem; }
.gp-range input { accent-color: var(--gold); width: 180px; max-width: 100%; }
.gp-inline-link { align-self: center; }
.gp-tabs { margin: 8px 0 6px; }
.gp-banner-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.gp-sources { display: flex; flex-direction: column; gap: 2px; }
.gp-source { font-size: 0.82rem; color: var(--ink); overflow-wrap: anywhere; }
.gp-source.is-more { color: var(--muted); font-style: italic; }
.gp-current { margin: 10px 0 14px; }
.gp-compare-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 8px; }
.gp-vs { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; }
.gp-more { margin-top: 12px; }

.gp-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.gp-bonus { color: var(--muted); font-size: 0.86rem; margin: 2px 0 0; overflow-wrap: anywhere; }
.gp-bonus.is-on { color: var(--ink); }
.gp-caps { margin-top: 14px; }
.gp-cap-line { margin: 2px 0; font-variant-numeric: tabular-nums; }

.gp-save .su-field input { width: 280px; max-width: 100%; }
.gp-share,
.gp-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg-field);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 9px;
  margin: 4px 0 12px;
}
.gp-text { font-family: Consolas, "Courier New", monospace; resize: vertical; }
.gp-share:focus-visible,
.gp-text:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }

.gp-specs { display: grid; gap: 14px; margin: 12px 0 0; }
.gp-spec-class { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.gp-spec-list { margin: 6px 0 0; }

.gp-weights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 16px;
  margin: 8px 0 0;
}
.gp-weights .su-field input { width: 100%; box-sizing: border-box; }

.gp-ca { columns: 2 260px; }
.gp-ca li { flex-wrap: wrap; }                  /* M9: a row's description sits on its own line under the name and the rank */
.gp-ca li.is-held .su-ca-name { color: var(--gold-bright); }
.gp-ca-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.gp-subhead { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.12em; margin: 14px 0 2px; }
.gp-home { margin-top: 24px; }
.gp-home > .su-section:nth-child(-n+3) { grid-column: auto; }

/* ---------- Talent grid (/gear#talents=<spec>, talent builder M6, read only) ----------
   Nodes are DOM buttons on the client's 44 px pitch (left / top = 44 * position - 1, set by js/talents.js), 34 px wide;
   the connection lines are an SVG layer under them; a gate is a rule across the tab with its label in the gutter right of
   the grid. The grid scrolls inside its own box (never the page). A node's state is ALWAYS a class (is-<state>), a mark
   character and words in its accessible name; the colours only repeat it: gold = held, green = available, red = a
   problem, dim = out of reach. Marks and edge styles (dashed = not both ends held) carry the same meaning without colour. */
.gp-ta { display: grid; gap: 14px; margin: 6px 0 0; min-width: 0; }
.gp-ta-controls { margin: 0; align-items: flex-end; }
.gp-ta-controls .su-field input { width: 5.2em; }
.gp-ta-tabs { margin: 0; }
.gp-ta-body { display: grid; gap: 14px; min-width: 0; }
.gp-ta-view { display: grid; gap: 14px; min-width: 0; }

.gp-ta-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 26px; }
.gp-ta-meter { display: grid; gap: 4px; min-width: 0; }
.gp-ta-meter-name { color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; overflow-wrap: anywhere; }
.gp-ta-meter-fig { color: var(--ink); font-variant-numeric: tabular-nums; }
.gp-ta-bar { display: block; height: 6px; background: var(--su-panel-2); border: 1px solid var(--line-faint); border-radius: 3px; overflow: hidden; }
.gp-ta-bar-fill { display: block; height: 100%; background: var(--gold); }
.gp-ta-meter.is-over .gp-ta-meter-fig { color: var(--gp-down); }
.gp-ta-meter.is-over .gp-ta-bar-fill { background: var(--gp-down); }

.gp-ta-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: 16px; align-items: start; }
.gp-ta-box {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  background: var(--su-panel-2);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
}
.gp-ta-stage { position: relative; margin: 2px; flex: none; }
.gp-ta-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.gp-ta-edge { stroke: #6f7690; stroke-width: 2; stroke-dasharray: 3 3; fill: none; }
.gp-ta-edge.is-lit { stroke: var(--gold); stroke-width: 3; stroke-dasharray: none; }

.gp-ta-gate { position: absolute; left: 0; height: 0; z-index: 1; pointer-events: none; border-top: 1px dashed #6f7690; }
.gp-ta-gate.is-open { border-top-style: solid; border-top-color: var(--gp-up); }
.gp-ta-gate-label {
  position: absolute;
  top: -9px;
  display: grid;
  gap: 1px;
  width: 200px;
  box-sizing: border-box;
  padding: 1px 6px;
  background: var(--su-panel-2);
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--muted);
}
.gp-ta-gate-text { color: var(--ink); }
.gp-ta-gate.is-open .gp-ta-gate-fig { color: var(--gp-up); }
.gp-ta-gate.is-locked .gp-ta-gate-fig { color: var(--gp-down); }

.gp-ta-node {
  --ta-edge: #6f7690;
  --ta-fill: #151a2c;
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.gp-ta-node:focus-visible { outline: 2px dashed var(--gold-bright); outline-offset: 3px; z-index: 4; }
/* a half-second press is the touch refund: it must not start a text selection or the callout of a long press on the node's glyph */
.gp-ta-node, .gp-ta-node * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* the tap target is 44 px (the pitch): the 34 px node plus an invisible 5 px margin that is part of the button, so two
   neighbours touch and never overlap */
.gp-ta-node::before { content: ""; position: absolute; inset: -5px; }
.gp-ta-node:hover { z-index: 3; }
.gp-ta-face, .gp-ta-fill { position: absolute; display: grid; place-items: center; }
.gp-ta-face { inset: 0; background: var(--ta-edge); }
.gp-ta-fill { inset: 2px; background: var(--ta-fill); overflow: hidden; }
.gp-ta-fill .su-icon { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 0; }
.gp-ta-node.is-square .gp-ta-face, .gp-ta-node.is-square .gp-ta-fill { border-radius: 4px; }
.gp-ta-node.is-circle .gp-ta-face, .gp-ta-node.is-circle .gp-ta-fill { border-radius: 50%; }
.gp-ta-node.is-hex .gp-ta-face, .gp-ta-node.is-hex .gp-ta-fill { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.gp-ta-mark, .gp-ta-rank, .gp-ta-kind {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--ta-edge);
  border-radius: 8px;
  color: var(--ink);
  pointer-events: none;
}
.gp-ta-mark { right: -5px; top: -6px; }
.gp-ta-rank { right: -4px; bottom: -6px; border-radius: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-ta-kind { left: -4px; bottom: -6px; color: var(--gold-bright); border-color: var(--gold); }

/* a choice pair: one cell, two options side by side, each with its own state */
.gp-ta-node.is-choice { display: flex; gap: 2px; background: var(--ta-edge); padding: 2px; border-radius: 5px; }
.gp-ta-opt {
  --ta-edge: #6f7690;
  --ta-fill: #151a2c;
  position: relative;
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  border-radius: 3px;
  background: var(--ta-fill);
  overflow: visible;
}
.gp-ta-opt .su-icon { width: 14px; height: 14px; border: 0; background: transparent; }
.gp-ta-opt .su-glyph { font-size: 0.7rem; }
.gp-ta-opt .gp-ta-mark { right: auto; left: 50%; top: auto; bottom: -9px; transform: translateX(-50%); min-width: 14px; height: 14px; line-height: 12px; font-size: 0.62rem; }

/* states: the colours repeat the mark and the words, they are not the only cue */
.gp-ta-node.is-owned, .gp-ta-opt.is-owned, .gp-ta-node.is-partial, .gp-ta-opt.is-partial { --ta-edge: var(--gold-bright); --ta-fill: #4a3e1c; }
.gp-ta-node.is-granted, .gp-ta-opt.is-granted { --ta-edge: var(--gold); --ta-fill: #35301f; }
.gp-ta-node.is-invalid-held, .gp-ta-opt.is-invalid-held { --ta-edge: var(--gp-down); --ta-fill: #3a1e1e; }
.gp-ta-node.is-available, .gp-ta-opt.is-available { --ta-edge: var(--gp-up); --ta-fill: #17261f; }
.gp-ta-node.is-no-connection, .gp-ta-opt.is-no-connection,
.gp-ta-node.is-choice-blocked, .gp-ta-opt.is-choice-blocked { --ta-edge: #8a8f9f; --ta-fill: #181c2b; }
.gp-ta-node.is-gated, .gp-ta-opt.is-gated,
.gp-ta-node.is-level-locked, .gp-ta-opt.is-level-locked,
.gp-ta-node.is-over-budget, .gp-ta-opt.is-over-budget,
.gp-ta-node.is-wrong-tab, .gp-ta-opt.is-wrong-tab { --ta-edge: #6a7189; --ta-fill: #10131f; }
.gp-ta-node.is-gated .gp-ta-fill, .gp-ta-node.is-level-locked .gp-ta-fill,
.gp-ta-node.is-over-budget .gp-ta-fill, .gp-ta-node.is-wrong-tab .gp-ta-fill,
.gp-ta-node.is-no-connection .gp-ta-fill, .gp-ta-node.is-choice-blocked .gp-ta-fill { opacity: 0.72; }

.gp-ta-detail { min-width: 0; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--line-faint); border-radius: 4px; }
.gp-ta-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gp-ta-detail-title { margin: 0; font-size: 1rem; color: var(--gold); overflow-wrap: anywhere; }
.gp-ta-detail-title:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
.gp-ta-info { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-faint); }
.gp-ta-info:first-of-type { border-top: 0; padding-top: 0; }
.gp-ta-info-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; color: var(--ink); overflow-wrap: anywhere; }
.gp-ta-detail .su-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0 0; }
.gp-ta-detail .su-fact dd { font-size: 0.92rem; }
/* M9: a node's description, under its name in the details (and under a row of the list view). It is data: shown as text, a line
   break in it is a break (pre-line); a rank list marks the current rank with a border AND the word CURRENT. */
.gp-ta-desc { margin: 8px 0 0; min-width: 0; }
.gp-ta-desc[hidden] { display: none; }
.gp-ta-desc.is-loading { min-height: 2.9em; }          /* the first open of a class: room for the line that will come */
.gp-ta-desc-label { margin: 0 0 3px; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); }
.gp-ta-desc-wait { margin: 0; color: var(--muted); font-size: 0.88rem; }
.gp-ta-desc-text { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.gp-ta-desc-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-ta-desc-ranks li { display: grid; gap: 1px; padding: 4px 8px; border-left: 3px solid transparent; }
.gp-ta-desc-ranks li.is-current { border-left-color: var(--gold); background: var(--gold-wash); }
.gp-ta-desc-rank { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); }
.gp-ta-desc-ranks li.is-current .gp-ta-desc-rank { color: var(--gold-bright); }
.gp-ca-desc { flex: 0 0 100%; margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.gp-ta-chip.is-owned, .gp-ta-chip.is-granted, .gp-ta-chip.is-partial { color: var(--gold-bright); border-color: var(--gold); }
.gp-ta-chip.is-available { color: var(--gp-up); border-color: var(--gp-up); }
.gp-ta-chip.is-invalid-held { color: var(--gp-down); border-color: var(--gp-down); }

.gp-ta-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.82rem; }
.gp-ta-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gp-ta-key {
  display: inline-block;
  min-width: 20px;
  box-sizing: border-box;
  padding: 0 4px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 16px;
  border: 2px solid #6f7690;
  border-radius: 4px;
  color: var(--ink);
  background: #151a2c;
}
.gp-ta-key.is-owned, .gp-ta-key.is-partial { border-color: var(--gold-bright); background: #4a3e1c; }
.gp-ta-key.is-granted { border-color: var(--gold); background: #35301f; }
.gp-ta-key.is-invalid-held { border-color: var(--gp-down); background: #3a1e1e; }
.gp-ta-key.is-available { border-color: var(--gp-up); background: #17261f; }
.gp-ta-key.is-gated, .gp-ta-key.is-level-locked, .gp-ta-key.is-over-budget, .gp-ta-key.is-wrong-tab { border-color: #6a7189; background: #10131f; }
/* the gates as plain lines under the grid (the labels in the grid's right gutter scroll out of view on a phone) */
.gp-ta-gates { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--ink); font-size: 0.82rem; }
.gp-ta-gate-item { padding-left: 10px; border-left: 3px dashed #6f7690; overflow-wrap: anywhere; }
.gp-ta-gate-item.is-open { border-left-style: solid; border-left-color: var(--gp-up); }
.gp-ta-unplaced { min-width: 0; }
.gp-ta-plain { margin: 6px 0 0; padding: 0 0 0 18px; color: var(--ink); }
.gp-ta-plain li { margin: 3px 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .gp-ta-main { grid-template-columns: minmax(0, 1fr); }
}
/* a finger needs 44 px: the grid's own controls only (the site-wide small buttons and pills stay as they are) */
@media (max-width: 760px), (pointer: coarse) {
  .gp-ta .btn.is-small, .gp-ta .su-pill, .gp-ta .gp-inline-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; }
  .gp-ta .su-field input { min-height: 44px; box-sizing: border-box; }
}
/* Windows high contrast: backgrounds are dropped, so the shapes need borders of their own */
@media (forced-colors: active) {
  .gp-ta-face { box-sizing: border-box; border: 2px solid CanvasText; }
  .gp-ta-node.is-choice { border: 2px solid CanvasText; }
  .gp-ta-opt { border: 1px solid CanvasText; }
  .gp-ta-node.is-owned .gp-ta-face, .gp-ta-node.is-granted .gp-ta-face, .gp-ta-node.is-partial .gp-ta-face { border-color: Highlight; }
  .gp-ta-edge { stroke: CanvasText; }
  .gp-ta-edge.is-lit { stroke: Highlight; }
  .gp-ta-node:focus-visible { outline-color: Highlight; }
  .gp-ta-desc-ranks li.is-current { border-left-color: Highlight; }
}
@media (max-width: 600px) {
  .gp-ta-box { padding: 6px; }
  .gp-ta-controls .su-field { flex: 0 0 auto; }
}

/* ---------- Talent builder (/gear#talents=<spec>, talent builder M7) ----------
   The grid above made editable. The status line says what every step did or why it was refused; the plus and minus buttons in
   a node's details are the primary controls (44 px); right-click and a half-second press on a node are extras. A WARNING (a rule
   only the game checks) is a triangle mark on the node AND words in its details and in the Problems list: never colour alone.
   Nothing moves or fades: there is no animation to turn off, and the reduced-motion rule below keeps it that way. */
.gp-tb [hidden] { display: none !important; }
.gp-tb-bar { margin: 0; }
.gp-tb-bar .su-field select { min-height: 36px; max-width: 100%; }
.gp-tb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.gp-tb .btn[aria-disabled="true"] { opacity: 0.85; cursor: default; }
.gp-tb .btn.is-armed { color: var(--gp-down); border-color: var(--gp-down); }
.gp-tb-status {
  margin: 0;
  min-height: 2.4em;
  box-sizing: border-box;
  padding: 0 12px;          /* no vertical padding: the clamp clips at the padding box, and a third line would show in it */
  line-height: 1.6;
  background: var(--su-panel-2);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* two lines on screen; the whole sentence stays in the live region (and in the tooltip) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-pack: center;
  overflow: hidden;
}
/* the slimmer layout (UX pass): the tree comes first. The bar is ONE row (spec, level, tabs, view, then the actions at the right);
   where the page opened from is one quiet line; the meters and the verdict share a row; the Problems block and the tools sit under the tree */
.gp-tb { gap: 10px; }
.gp-tb-from { margin: 0; padding: 0 2px; color: var(--muted); font-size: 0.86rem; overflow-wrap: anywhere; }
.gp-tb-notes { margin: 0; }
.gp-tb-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.gp-tb-stat .gp-ta-meters { flex: 1 1 420px; min-width: 0; }
.gp-tb-stat .su-chips { margin: 0; flex: 0 1 auto; max-width: 100%; align-items: center; }
.gp-tb-bar .gp-inline-link { align-self: flex-end; padding-bottom: 6px; }
.gp-tb-problems { padding: 8px 14px; }
.gp-tb-probsum { cursor: pointer; color: var(--ink); font-weight: 700; padding: 2px 0; overflow-wrap: anywhere; }
.gp-tb-probsum:focus-visible { outline: 1.5px dashed var(--gold-bright); outline-offset: 3px; }
.gp-tb-problems[open] > .gp-tb-probsum { margin-bottom: 6px; }
.gp-tb-problems .gp-tb-problist { max-height: 40vh; overflow: auto; }
.gp-tb-tools { padding: 6px 12px; }
/* the page head on this route: the title is small, the strapline and kicker go, the tabs are one row that scrolls */
.su-page.is-talents { padding-top: 24px; }
.su-page.is-talents .su-head { margin-bottom: 6px; }
.su-page.is-talents .su-head .su-kicker,
.su-page.is-talents .su-head .su-sub,
.su-page.is-talents .su-view-head .su-kicker { display: none; }
.su-page.is-talents .su-title { font-size: 1.05rem; margin: 0; letter-spacing: 0.06em; }
.su-page.is-talents .su-tabs { margin-bottom: 10px; }
.su-page.is-talents .su-tab { padding: 6px 0 5px; }
.su-page.is-talents .su-view-head { margin: 0 0 4px; }
.su-page.is-talents .su-view-title { font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* with the builder on screen the tab already says where you are: the heading stays for assistive technology, off screen */
.su-page.is-talents .su-view:has(.gp-tb) .su-view-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) {
  .su-page.is-talents .su-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .su-page.is-talents .su-tabs::-webkit-scrollbar { display: none; }
  .su-page.is-talents .su-tab { flex: 0 0 auto; white-space: nowrap; }
}
@media (pointer: coarse) {
  .su-page.is-talents .su-tab { padding: 11px 0 10px; }
}
@media (max-width: 600px) {
  .gp-tb-bar .gp-inline-link { align-self: auto; padding: 2px 0; }
  .gp-tb-stat .gp-ta-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; flex-basis: 100%; }
  .gp-tb-stat .gp-ta-meter-fig { font-size: 0.92rem; }
  .gp-tb-status { font-size: 0.92rem; line-height: 1.5; padding: 0 10px; }
}

.gp-ta-warnbox { position: absolute; left: -6px; top: -7px; z-index: 3; pointer-events: none; }
.gp-ta-warn {
  display: block;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 0.62rem;
  line-height: 14px;
  text-align: center;
  background: var(--bg);
  color: var(--gp-warn);
  border: 1px solid var(--gp-warn);
  border-radius: 3px;
}
.gp-ta-opt .gp-ta-warnbox { left: -4px; top: -8px; }

.gp-tb-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gp-tb-step { min-width: 44px; min-height: 44px; box-sizing: border-box; }
.gp-tb-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-tb-why { margin: 6px 0 0; overflow-wrap: anywhere; }
.gp-tb-warnhead { margin: 10px 0 2px; color: var(--gp-warn); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; }
.gp-tb-warns { margin: 0; padding: 0 0 0 18px; color: var(--ink); font-size: 0.9rem; }
.gp-tb-warns li { margin: 3px 0; overflow-wrap: anywhere; }
.gp-tb-notices { margin: 0 0 8px; padding: 0 0 0 18px; color: var(--ink); font-size: 0.9rem; }
.gp-tb-notice { margin: 3px 0; overflow-wrap: anywhere; }

/* M8: compare with my build, pick rates, the pick-rate fill. Every mark is a letter or a figure with a shape: never colour alone. */
.gp-tb-tools { padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--line-faint); border-radius: 4px; }
.gp-tb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gp-tb-tool[aria-expanded="true"] { color: var(--gold-bright); border-color: var(--gold); }
.gp-tb-toolbody:empty { display: none; }
.gp-tb-panel { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-faint); }
.gp-tb-panel h3 { margin: 0 0 6px; }
.gp-tb-cmphead { margin: 12px 0 2px; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.gp-tb-cmpsum { margin: 0 0 6px; color: var(--gold-bright); font-weight: 700; overflow-wrap: anywhere; }
.gp-tb-diflist, .gp-tb-missing, .gp-tb-fit, .gp-tb-whole { margin-top: 12px; }
.gp-tb-wholecopy { margin-top: 8px; }
.gp-tb-difrows, .gp-tb-missrows, .gp-tb-wholerows { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gp-tb-wholerows { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); margin-top: 10px; }
.gp-tb-difrow, .gp-tb-missrow, .gp-tb-wholerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.gp-tb-difname { color: var(--ink); font-weight: 700; }
.gp-tb-fitnote { max-width: 60ch; }
.gp-tb-cmpnote { overflow-wrap: anywhere; }
.gp-ta-pct {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 11px;                 /* the band between the corner badges (state mark above, rank and kind below): nothing covers a figure */
  box-sizing: border-box;
  height: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: rgba(8, 10, 20, 0.88);
  color: var(--ink);
  border-radius: 2px;
  pointer-events: none;
}
/* a choice option is 15 px wide: its figure, its difference mark and its state mark are stacked top, middle, bottom, so none covers another */
.gp-ta-opt .gp-ta-pct { left: 50%; right: auto; bottom: auto; top: 0; transform: translateX(-50%); width: auto; min-width: 0; height: 11px; padding: 0; font-size: 0.6rem; letter-spacing: -0.03em; line-height: 11px; background: rgba(8, 10, 20, 0.9); border-radius: 2px; }
/* a plain node with a difference mark: the mark sits on the left edge, between the warning (above) and the signature badge (below), so the figure band starts right of it and no badge covers another */
.gp-ta-node[data-dif]:not(.is-choice) .gp-ta-pct { left: 6px; }
.gp-ta-dif {
  position: absolute;
  z-index: 3;
  left: -10px;
  top: 10.5px;
  box-sizing: border-box;
  min-width: 15px;
  height: 13px;
  padding: 0 1px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 9px;
  text-align: center;
  background: var(--bg);
  border: 2px solid var(--ink);
  color: var(--ink);
  pointer-events: none;
}
.gp-ta-dif.is-mine { border-color: var(--gold-bright); color: var(--gold-bright); border-radius: 3px; }
.gp-ta-dif.is-theirs { border-color: var(--gp-up); color: var(--gp-up); border-style: dashed; border-radius: 8px; }
.gp-ta-dif.is-rank { border-color: var(--gp-warn); color: var(--gp-warn); border-style: double; border-width: 3px; line-height: 7px; font-size: 0.58rem; border-radius: 0; }
.gp-ta-opt .gp-ta-dif { left: 50%; top: 11px; bottom: auto; transform: translateX(-50%); min-width: 14px; height: 14px; padding: 0 1px; line-height: 10px; }
.gp-ta-opt .gp-ta-dif.is-rank { line-height: 8px; font-size: 0.58rem; }
/* an option that carries a rule warning (it sits top left, 16 px high): its figure, difference mark and state mark each move down to clear it */
.gp-ta-opt[data-warn] .gp-ta-pct { top: 8px; height: 10px; line-height: 10px; }
.gp-ta-opt[data-warn] .gp-ta-dif { top: 18px; height: 12px; line-height: 8px; }
.gp-ta-opt[data-warn] .gp-ta-dif.is-rank { line-height: 6px; }
.gp-ta-opt[data-warn] .gp-ta-mark { bottom: -12px; }
.gp-tb .su-ca li { flex-wrap: wrap; }          /* the list view: a row with a difference chip and a figure chip wraps instead of widening the page */

.gp-tb-problems, .gp-tb-share, .gp-tb-saves, .gp-tb-help {
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
}
.gp-tb-problist { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gp-tb-prob { padding: 4px 0 4px 10px; border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.gp-tb-prob.is-hard { border-left-color: var(--gp-down); }
.gp-tb-prob.is-warn { border-left-color: var(--gp-warn); }
.gp-tb-jump { margin-left: 6px; }
.gp-tb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 8px 0 0; }
.gp-tb-out, .gp-tb-list { width: 100%; margin-top: 8px; }
.gp-tb-out input, .gp-tb-list textarea, .gp-tb-paste input { width: 100%; box-sizing: border-box; font-family: inherit; }
.gp-tb-paste { flex: 1 1 260px; }
.gp-tb-list textarea { min-height: 12em; resize: vertical; background: var(--su-panel-2); color: var(--ink); border: 1px solid var(--line-faint); border-radius: 4px; padding: 8px; }
.gp-tb-saveform .su-field { flex: 1 1 260px; }
.gp-tb-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; }
.gp-tb-save-name { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.gp-tb-save-meta { margin: 0; }
.gp-tb-helplist { margin: 8px 0 0; display: grid; gap: 4px; }
.gp-tb-helplist dt { margin-top: 8px; color: var(--gold); font-size: 0.86rem; letter-spacing: 0.06em; }
.gp-tb-helplist dd { margin: 0; color: var(--ink); }

/* a finger needs 44 px for every builder control (the site-wide small buttons stay as they are) */
@media (max-width: 760px), (pointer: coarse) {
  .gp-tb .btn, .gp-tb .su-field select, .gp-tb .su-field input, .gp-tb .su-field textarea { min-height: 44px; box-sizing: border-box; }
  .gp-tb .btn { display: inline-flex; align-items: center; justify-content: center; }
  .gp-tb .su-field select { font-size: 1rem; }          /* 16 px: a phone does not zoom the page when a select gets the focus */
  /* the grid is far below the status line on a phone: the line follows the player, under the site bar, so a refusal is seen */
  .gp-tb-status { position: sticky; top: var(--gp-tb-bar, 64px); z-index: 6; }
  .gp-tb-acts { margin-left: 0; flex: 1 1 100%; }
  .gp-tb-acts .btn { flex: 1 1 auto; }
  .gp-ta-node, .gp-ta-box { scroll-margin-top: calc(var(--gp-tb-bar, 64px) + 90px); }      /* a focused node is not left under the bar and the status line */
}
@media (forced-colors: active) {
  .gp-ta-warn { border-color: CanvasText; color: CanvasText; }
  .gp-ta-pct, .gp-ta-dif { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
  .gp-tb-tools { border: 1px solid CanvasText; }
  .gp-tb-status, .gp-tb-problems, .gp-tb-share, .gp-tb-saves, .gp-tb-help { border: 1px solid CanvasText; }
  .gp-tb-prob { border-left-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-tb, .gp-tb *, .gp-ta, .gp-ta * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 960px) {
  .gp-sheet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .su-table td.gp-cell-item { min-width: 170px; }
  .gp-item-cell .gp-acts { padding-left: 0; }
  .su-icon { width: 30px; height: 30px; }
  .gp-weights { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gp-range input { width: 100%; }
  .gp-tb-wholerows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }      /* the whole-build list: two columns on a phone, not 50 rows in one */
}