/* Gunmetal's four partials are asked for here as well as by gunmetal.css, so the browser fetches all five files at
   once when this one arrives instead of waiting for gunmetal.css to name them (one round trip less). */
@import url("obsidian.css");
@import url("cool-light.css");
@import url("neutral-light.css");
@import url("gilt-placements.css");
@import url("gunmetal.css");

/* Theme "sweats" on top of Gunmetal: less yellow. The default theme since 12 Nov 2026. Admin found the pages too
   gold: 1st place was gold, the page furniture was gold and the values were gold. What it changes (three reviews by
   admin on 11 and 12 Nov 2026, then approved):
   - Prismatic is the top of a ladder, as in Arena's prismatic > gold > silver: a 1st place, a #1 rank, a record, the
     top grade, tier and league, and real prismatic rarity. It is the iridescent rose > lilac > sky > blue-violet of
     League's prismatic augments and the TCG's prismatic cards, with no green. 2nd and 3rd are gold, 4th silver, 5th and
     6th graphite.
   - ArenaSweats red (the logo's SWEATS, the scroll bar) marks only what is selected: the chosen tab, toggle, season and
     chart view, the sorted column, a selected row or card, plus the diamonds of the Deep Dive's section rail. The site
     header is the exception: its current page stays gold (admin's choice). Slanted marks, the small diamonds between facts and
     label words stay gold (a first version turned them red: too much).
   - Hairlines between panels and rows are neutral platinum instead of gold, and a panel title's rail fades from gold
     into that neutral line.
   Checked by eye on the dashboard, the Deep Dive's Time section and a champion page; the rest follows the rules at
   the end of this file. The old look: journey_local.py --theme gunmetal. */

:root {
  /* ---- Placements: the prismatic ladder (the values tokens.css ships; gilt-placements.css had replaced them) ---- */
  --j-p1-hi: #f7ecff;
  --j-p1-rose: #ffbfe9;
  --j-p1: #d8b6ff;
  --j-p1-mid: #c4abff;
  --j-p1-sky: #a6cbff;
  /* The end of the shimmer is a blue-violet, not tokens.css's mint: Arena's prismatic has no green (admin, 12 Nov). */
  --j-p1-mint: #b6b2ff;
  --j-prism-mint: #a9bdf2;
  --j-p1-lo: #9a90f2;
  --j-p1-deep: #5d56b6;
  --j-p2-hi: #fff4cf;
  --j-p2-light: #ffe28f;
  --j-p2: #f6c856;
  --j-p2-lo: #d9a43a;
  --j-p2-deep: #8c6418;
  --j-p3: #e6b94e;
  --j-p4-hi: #f3f6fa;
  --j-p4-light: #dfe5ec;
  --j-p4: #bac3ce;
  --j-p4-lo: #8a95a3;
  --j-p4-deep: #515a68;
  --j-p5-hi: #8a909b;
  --j-p5-light: #9ca2ac;
  --j-p5: #6e7480;
  --j-p5-lo: #474b55;
  --j-p5-deep: #2b2e34;
  --j-p6: #5b606b;
  --j-p1-rgb: 216, 182, 255;
  --j-p2-rgb: 246, 200, 86;
  --j-p4-rgb: 186, 195, 206;
  --j-p5-rgb: 110, 116, 128;
  --j-fill-1: linear-gradient(125deg, var(--j-p1-rose) 0%, var(--j-p1) 34%, var(--j-p1-sky) 68%, var(--j-p1-mint) 100%);
  --j-fill-2: linear-gradient(180deg, var(--j-p2-light) 0%, var(--j-p2) 45%, var(--j-p2-lo) 100%);
  --j-fill-3: linear-gradient(180deg, #f6d880 0%, var(--j-p3) 45%, #c4952f 100%);
  --j-fill-4: linear-gradient(180deg, var(--j-p4-light) 0%, var(--j-p4) 50%, var(--j-p4-lo) 100%);
  --j-fill-5: linear-gradient(180deg, var(--j-p5-hi) 0%, var(--j-p5) 50%, var(--j-p5-lo) 100%);
  --j-fill-6: linear-gradient(180deg, #7b808b 0%, var(--j-p6) 50%, #3c4048 100%);
  --j-edge-1: linear-gradient(160deg, var(--j-p1-hi) 0%, var(--j-p1-rose) 22%, var(--j-p1) 46%, var(--j-p1-sky) 72%, var(--j-p1-mint) 100%);
  --j-edge-2: linear-gradient(160deg, var(--j-p2-hi) 0%, var(--j-p2) 40%, var(--j-p2-lo) 72%, var(--j-p2-deep) 100%);
  --j-edge-4: linear-gradient(160deg, var(--j-p4-hi) 0%, var(--j-p4) 45%, var(--j-p4-lo) 75%, var(--j-p4-deep) 100%);
  --j-edge-5: linear-gradient(160deg, var(--j-p5-light) 0%, var(--j-p5) 45%, var(--j-p5-lo) 75%, var(--j-p5-deep) 100%);
  /* Prismatic as text. Thin letters wash a pastel gradient out to one lilac, so text gets stronger stops than the bars
     and tiles: a clear pink at the start and a clear blue towards the end, left to right across the word. */
  --j-text-1: linear-gradient(95deg, #ff8fd6 0%, #d9a2ff 34%, #7fbcff 70%, #a595ff 100%);
  --j-glow-1: 0 0 12px rgba(var(--j-p1-rgb), 0.5);

  /* ---- Hairlines: neutral platinum. Controls (buttons, inputs) keep their gold outline. ---- */
  --j-line: rgba(var(--j-plat-rgb), 0.11);
  --j-line-soft: rgba(var(--j-plat-rgb), 0.07);
  --j-line-row: rgba(var(--j-plat-rgb), 0.09);
  --j-line-divider: rgba(var(--j-plat-rgb), 0.12);
  --j-line-mid: rgba(var(--j-plat-rgb), 0.2);
  --j-rule: linear-gradient(90deg, rgba(var(--j-plat-rgb), 0.32), rgba(var(--j-plat-rgb), 0));
  --j-rule-center: linear-gradient(90deg, rgba(var(--j-plat-rgb), 0), rgba(var(--j-plat-rgb), 0.3) 12%, rgba(var(--j-plat-rgb), 0.3) 88%, rgba(var(--j-plat-rgb), 0));

  /* ---- ArenaSweats red: the logo's own red (#a64b44, the scroll bar's) with its lighter and darker steps, not the
     theme's scarlet (--j-red-*), which stays for live states and losses. ---- */
  --j-sw-50: #ffe9e4;
  --j-sw-100: #f6ded8;
  --j-sw-200: #ef9284;
  --j-sw-300: #d9665a;
  --j-sw-350: #c4574d;
  --j-sw-400: #a64b44;
  --j-sw-500: #8a3c36;
  --j-sw-600: #6b2923;
  --j-sw-rgb: 217, 102, 90;
  --j-sw-deep-rgb: 166, 75, 68;
  /* The plate of a chosen chart view. */
  --j-sw-face: linear-gradient(180deg, var(--j-sw-350) 0%, var(--j-sw-400) 46%, var(--j-sw-500) 100%);
  --j-sw-lip: inset 0 1px 0 rgba(255, 210, 190, 0.3), inset 0 -1px 0 rgba(60, 10, 6, 0.55);
}

/* ---------- Shared components ---------- */

/* Panel titles keep their gold edge and slashes; the rail starts gold and fades into the neutral hairline. */
body .j-head__rule {
  background:
    linear-gradient(90deg, var(--j-gold-300), rgba(var(--j-plat-rgb), 0.3) 24%, rgba(var(--j-plat-rgb), 0.1)) 0 0 / 100% 2px no-repeat,
    linear-gradient(rgba(var(--j-shadow-rgb), 0.7), rgba(var(--j-shadow-rgb), 0.7)) 0 2px / 100% 1px no-repeat;
}

/* Toggles: neutral at rest, red when chosen. */
body .j-seg {
  border-color: rgba(var(--j-plat-rgb), 0.18);
}

body .j-seg:hover {
  border-color: rgba(var(--j-sw-rgb), 0.55);
  color: var(--j-text);
}

body .j-seg.is-active {
  border-color: var(--j-sw-300);
  background: linear-gradient(180deg, rgba(var(--j-sw-rgb), 0.26), rgba(var(--j-sw-deep-rgb), 0.14));
  color: var(--j-white);
}

body .j-seg.is-active b {
  color: var(--j-sw-100);
}

/* The season switch: the chosen act is red, like the other toggles. */
body .j-season__opt:hover {
  color: var(--j-text);
  background: rgba(var(--j-sw-rgb), 0.08);
}

body .j-season__opt.is-active {
  color: var(--j-white);
  background: rgba(var(--j-sw-rgb), 0.18);
  box-shadow: inset 0 -2px 0 var(--j-sw-300);
}

/* ---------- Dashboard ---------- */

/* Tabs: neutral keycaps; the chosen one carries a red top edge and a red icon. */
body .j-tabs {
  background:
    linear-gradient(rgba(var(--j-plat-rgb), 0.22), rgba(var(--j-plat-rgb), 0.22)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.15), rgba(var(--j-shadow-rgb), 0.45));
}

body .j-tab::after {
  background:
    linear-gradient(var(--j-sw-300), var(--j-sw-300)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--j-sw-rgb), 0.2), rgba(var(--j-sw-rgb), 0.03) 70%, rgba(var(--j-sw-rgb), 0.08));
}

body .j-tab__icon { color: var(--j-silver-600); }
body .j-tab__name { color: var(--j-silver-200); }
body .j-tab:hover .j-tab__name { color: var(--j-white); }
body .j-tab:hover .j-tab__icon { color: var(--j-sw-200); }

body .j-tab.is-active::before {
  background: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.12), rgba(var(--j-white-rgb), 0.05) 70%, rgba(var(--j-sw-rgb), 0.1)), var(--j-coal-700);
}

body .j-tab.is-active .j-tab__name { color: var(--j-white); }
body .j-tab.is-active .j-tab__icon { color: var(--j-sw-200); }

/* The band's 1st rate is first place: prismatic like every other 1st (the band drew it gold with the top-3 rate). */
body .db-stats .j-stat--prism .j-stat__value {
  background: var(--j-text-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A text shadow would paint over the see-through letters. */
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 10px rgba(var(--j-p1-rgb), 0.3));
}

/* Games per day counts games, not places, so it must not turn prismatic with 1st place: it keeps the golds and silvers
   it has in Gunmetal (5+ polished gold, 3+ pale gold, 1+ silver). Best finish per day, beside it, shows places. */
body .ov-calpanel--games .j-fill-1 { background: var(--j-gloss), linear-gradient(180deg, #fff3c6 0%, #ffdc6e 22%, #ffcc3d 50%, #f4b52f 82%, #ffd25a 100%); }
body .ov-calpanel--games .j-fill-2 { background: var(--j-gloss), linear-gradient(180deg, #f2e7c6 0%, #dfcb98 48%, #c8ba92 100%); }
body .ov-calpanel--games .ov-cal__cell.is-first::after { box-shadow: 0 0 10px rgba(255, 200, 64, 0.55); }

/* ---------- Deep Dive ---------- */

/* The slanted blades stay gold; only the lines between stat rows and the title's glow go neutral. */
body .ddv-head__title {
  text-shadow: 0 3px 0 rgba(var(--j-shadow-rgb), 0.85), 0 0 30px rgba(var(--j-plat-rgb), 0.16);
}

body .ddv-stats__row,
body .ddv-stats__row:last-child {
  border-color: rgba(var(--j-plat-rgb), 0.12);
}

/* Chart views: the chosen one is a red plate. */
body .ddv-tab::after {
  background: var(--j-sw-face);
  box-shadow: var(--j-sw-lip);
}

body .ddv-tab:hover { color: var(--j-white); }
body .ddv-tab:hover::after { opacity: 0.35; }
body .ddv-tab.is-active { color: var(--j-white); }

/* The section rail on the right: red diamonds on a neutral line. Its words keep their colours. */
body .ddv-rail__line {
  background: linear-gradient(180deg, rgba(var(--j-plat-rgb), 0), rgba(var(--j-plat-rgb), 0.2) 8%, rgba(var(--j-plat-rgb), 0.2) 92%, rgba(var(--j-plat-rgb), 0));
}

body .ddv-rail__item > i { border-color: rgba(var(--j-sw-rgb), 0.75); }
body .ddv-rail__item:hover > i { border-color: var(--j-sw-200); }

body .ddv-rail__item.is-active > i {
  border-color: var(--j-sw-100);
  background: var(--j-sw-300);
  box-shadow: 0 0 10px rgba(var(--j-sw-rgb), 0.8);
}

/* ---------- The rest of the site (12 Nov 2026, after an audit of every use of the 1st-place colour) ---------- */

/* Prismatic is the top of a ladder, as in Arena's own prismatic > gold > silver: a 1st-place finish, a #1 rank, a
   record, the top grade (S), the top tier (S+), the top league (Challenger), the rarest step and real prismatic
   rarity. Those all read the 1st-place tokens and need nothing here.

   Not the top of a ladder. While 1st place was gold these borrowed its colour as "the gold one": title blades and
   filter labels on champion pages, busiest-week and favourite-day bars, the most-played bar, rating gains, a ladder
   rank of any number, and the gold augments of the Wrap's honeycomb. Here they get the gold of 2nd place back: every
   1st-place token is pointed at its gold twin on the element that uses it (or the box around it). */
body .cp-hero--champion .cp-hero__kicker > span:first-child,
body .cp-hero--champion .cp-filter .j-label,
body .ch-weeks__bar.is-top,
body .ov-week__col.is-top,
body .wr-champs__bar,
body .ddv-diverge__up,
body .ddv-comp__track,
body .hof-standing__rank,
body .ddv-standing__rank,
body .ddv-past__rank,
body .wr-slide--augments .j-hc__cell--first {
  --j-p1: var(--j-p2);
  --j-p1-hi: var(--j-p2-hi);
  --j-p1-rose: var(--j-p2-light);
  --j-p1-mid: var(--j-p2);
  --j-p1-sky: var(--j-p2-lo);
  --j-p1-mint: var(--j-p2-light);
  --j-p1-lo: var(--j-p2-lo);
  --j-p1-deep: var(--j-p2-deep);
  --j-p1-rgb: var(--j-p2-rgb);
  --j-fill-1: var(--j-fill-2);
  --j-edge-1: var(--j-edge-2);
  --j-text-1: linear-gradient(180deg, var(--j-p2-hi) 0%, var(--j-p2-light) 36%, var(--j-p2) 56%, var(--j-p2-lo) 100%);
  --j-glow-1: 0 0 14px rgba(var(--j-p2-rgb), 0.55);
}

/* A champion, item or augment page's win rate is its 1st-place rate: prismatic, like the dashboard band's. */
body .cp-band__stat--first dd,
body .lp-facts .j-stat--prism .j-stat__value {
  background: var(--j-text-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* Chosen tabs elsewhere, red like the dashboard's: champion page sections and view switch, dashboard sub-tabs, the
   match detail's tabs. */
body .cp-tabs a.is-active { color: var(--j-white); }
body .cp-tabs a.is-active::after { background: var(--j-sw-300); }

body .cp-tabs__ink {
  background: linear-gradient(90deg, rgba(var(--j-sw-rgb), 0.35), var(--j-sw-300) 20%, var(--j-sw-100) 50%, var(--j-sw-300) 80%, rgba(var(--j-sw-rgb), 0.35));
}

body .cp-tabs__pip {
  border-color: var(--j-sw-300);
  background: var(--j-sw-50);
}

body .cp-viewswitch .j-tab::after {
  background:
    linear-gradient(var(--j-sw-300), var(--j-sw-300)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--j-sw-rgb), 0.2), rgba(var(--j-sw-rgb), 0.03) 70%, rgba(var(--j-sw-rgb), 0.08));
}

body .cp-viewswitch .j-tab.is-active::before {
  background: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.12), rgba(var(--j-white-rgb), 0.05) 70%, rgba(var(--j-sw-rgb), 0.1)), var(--j-coal-700);
}

body .cp-viewswitch .j-tab.is-active .j-tab__name { color: var(--j-white); }
body .cp-viewswitch .j-tab.is-active .j-tab__icon { color: var(--j-sw-200); }

body .kt-subtab::before,
body .kt-subtab::after { background: var(--j-sw-300); }
body .kt-subtab:hover { background: rgba(var(--j-sw-rgb), 0.06); }
body .kt-subtab.is-active { color: var(--j-white); }
body .kt-subtab.is-active b { color: var(--j-sw-100); }

body .mh-tabs__tab.is-active { color: var(--j-white); }

body .mh-tabs__ink {
  background: linear-gradient(90deg, rgba(var(--j-sw-rgb), 0), var(--j-sw-300) 28%, var(--j-sw-50) 50%, var(--j-sw-300) 72%, rgba(var(--j-sw-rgb), 0));
}

/* ---------- Every other "this one is chosen" state (12 Nov 2026): red, like the tabs ---------- */

/* The site header keeps its gold: admin looked at the current page's underline in gold and in red and chose gold
   (12 Nov 2026). So the top bar, its menu and its search suggestions are not touched here. */

/* Lists: the sorted column, the selected row's edge and wash, picked bars and cards. */
body .us-head__sort:hover,
body .us-head__sort.is-active { color: var(--j-sw-200); }

body .j-row::before,
body .ddv-hb__row::before { background: var(--j-sw-300); }

body .j-row:hover,
body .ddv-hb__row:hover,
body .ddv-hb__row:focus-visible { background-color: rgba(var(--j-white-rgb), 0.04); }

body .ch-row.is-selected {
  background: linear-gradient(90deg, rgba(var(--j-sw-rgb), 0.16), rgba(var(--j-sw-rgb), 0.03));
}

body .ddv-hb__row.is-picked { background: rgba(var(--j-sw-rgb), 0.1); }

body .ff-row.is-selected,
body .cb-vs.is-selected {
  border-color: rgba(var(--j-sw-rgb), 0.55);
  background: rgba(var(--j-sw-rgb), 0.08);
}

body .bd-spot__pick.is-active {
  border-color: rgba(var(--j-sw-rgb), 0.8);
  background: rgba(var(--j-sw-rgb), 0.14);
  box-shadow: inset 0 -2px 0 var(--j-sw-300);
}

body .bg-plate.is-picked .bg-frame {
  --bg-rim: linear-gradient(160deg, var(--j-sw-50), var(--j-sw-200) 50%, var(--j-sw-400));
}

body .ddv-flow__card.is-current {
  border-color: var(--j-sw-200);
  box-shadow: 0 0 0 1px rgba(var(--j-sw-rgb), 0.45), 0 0 40px rgba(var(--j-sw-rgb), 0.3);
}

/* ---------- Prismatic text has the whole range (12 Nov 2026) ---------- */

/* Most 1st-place text was one flat colour (--j-p1, a lilac), which read as plain purple beside the prismatic bars and
   tiles. Text that is a 1st place is now painted with the text gradient, like .j-ord--1 and .kt-prism already were.
   Only elements that hold text: an empty element with one of these classes is a bar or a swatch. */
body :is(dd, dt, b, em, strong, span, small, p, td).is-p1:not(:empty),
body .j-stat--prism .j-stat__value,
body .db-stats .j-stat--prism .j-stat__value,
body .lp-facts .j-stat--prism .j-stat__value,
body .cp-band__stat--first dd {
  background: var(--j-text-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* A text shadow would paint over the see-through letters. */
  text-shadow: none;
}