/* 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 1st place, a #1 rank and real prismatic rarity, nothing else: 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, plus the diamonds of the Deep Dive's section rail. 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%);
  --j-text-1: linear-gradient(100deg, var(--j-p1-rose) 0%, var(--j-p1) 40%, var(--j-p1-sky) 75%, var(--j-p1-mint) 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) ---------- */

/* Not a finishing place. While 1st place was gold these borrowed its colour as "the gold one": title blades, the top
   tier and grade (S+, S, Challenger), busiest-week and favourite-day bars, the most-played bar, rating gains, record
   crowns and tiles, a ladder rank of any number, and the gold augments of the Wrap's and Augment God's honeycombs.
   They are not 1st places, so here they get the gold of 2nd and 3rd back: every 1st-place token is pointed at its gold
   twin on the element that uses it (or the box around it). A rank of #1 on a leaderboard stays prismatic. */
body .cp-hero--champion .cp-hero__kicker > span:first-child,
body .cp-hero--champion .cp-filter .j-label,
body .cp-tier--splus,
body .cp-metal--splus,
body .cp-metal--l-challenger,
body .j-grade--s,
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-mark--crown,
body .ddv-record--record,
body .ddv-record__crown,
body .hof-standing__rank,
body .ddv-standing__rank,
body .ddv-past__rank,
body .wr-slide--augments .j-hc__cell--first,
body #augment-god .ddv-frame {
  --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);
}

/* The landing page's Firsts fact is a 1st place: prismatic, like the dashboard band's 1st rate. */
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));
}