/* =================================================================== window styles (docs/window-styles.md)
   <html class="win-<id>"> (client/js/theme.js; Settings > Display > Window style). Every stylesheet writes its window
   colours as tokens with today's colour as the fallback (var(--bg-1, #0c1240)), so Classic defines nothing here and looks
   exactly as before. A style redefines the tokens on every .window (only there: text drawn on the map, the floor title
   card and the banners keep their colours), then reshapes the shared pieces (the window, the cursor row, buttons).
   Tokens:
     --win-a / --win-b      the window's top and bottom fill        --hud-a / --hud-b   the HUD windows' fill
     --win-border           the rim (solid)                         --rim-rgb           the rim as r, g, b (faint lines)
     --rim-hi               light blue lines and outlines           --hl-rgb            the row highlight wash
     --bg-0 .. --bg-3       the navy ramp, darkest wells to the panel's top
     --slot / --slot-line   button and slot fill / line             --win-dim           the world under a modal window
     --ink / --dim          body text / quiet text                  --gold              accent: titles, focus, "on"
     --tx-hi / --tx-dim / --tx-faint   light text colours by strength
     --tx-gold / --tx-good / --tx-info / --tx-pink / --tx-bad   coloured text by meaning (ui.js T() maps its colours here)
     --acc-1 / --acc-2 / --on-acc      the gold "on" chip's light and dark stops, and the dark text on it (ui.js T()'s dark text too)
     --bg-x                 the big windows' close button (purple in Classic)
     --win-bw / --win-r / --win-shadow the window's rim width, corner radius and shadow (style.css .window)
   The ROM UI (F9) keeps Classic under its own frames: theme.js sets no class there. This sheet is not touched by colour
   sweeps: its literals are the styles' own. */

/* ---------------------------------------------------------------- Paper (the default): white cards, black ink */
html.win-paper :is(.window, .tcard) {
  --win-a: #fbfbf8; --win-b: #f4f3ee; --win-border: #111; --rim-rgb: 17, 17, 17; --rim-hi: #111; --hl-rgb: 0, 0, 0;
  --hud-a: rgba(251, 251, 248, 0.96); --hud-b: rgba(242, 241, 235, 0.96);
  --bg-0: #e3e2db; --bg-1: #ebeae4; --bg-2: #f2f1ec; --bg-3: #f8f8f4;
  --slot: #fbfbf8; --slot-line: #111; --win-dim: rgba(24, 24, 24, 0.38);
  --ink: #111; --dim: #555; --gold: #111;
  --tx-hi: #111; --tx-dim: #4d4d4d; --tx-faint: #7a7a7a;
  --tx-gold: #111; --tx-good: #1b7a2b; --tx-info: #1d5ea8; --tx-pink: #a52f6c; --tx-bad: #b3261e;
  --acc-1: #111; --acc-2: #111; --on-acc: #fbfbf8; --bg-x: #fbfbf8;
  --win-bw: 2px; --win-r: 6px; --win-shadow: 4px 4px 0 #111;
}
/* ---------------------------------------------------------------- Ink: black panels, white rule */
html.win-ink :is(.window, .tcard) {
  --win-a: #000; --win-b: #000; --win-border: #fff; --rim-rgb: 255, 255, 255; --rim-hi: #fff;
  --hud-a: rgba(0, 0, 0, 0.92); --hud-b: rgba(0, 0, 0, 0.92);
  --bg-0: #000; --bg-1: #0a0a0a; --bg-2: #151515; --bg-3: #222;
  --slot: #000; --slot-line: #fff; --win-dim: rgba(0, 0, 0, 0.6);
  --ink: #fff; --dim: #b3b3b3; --gold: #fff;
  --tx-hi: #fff; --tx-dim: #c2c2c2; --tx-faint: #8c8c8c; --tx-gold: #fff;
  --acc-1: #fff; --acc-2: #fff; --on-acc: #000; --bg-x: #000;
  --win-bw: 2px; --win-r: 6px; --win-shadow: 0 0 0 2px #000, 0 10px 24px rgba(0, 0, 0, 0.55);
}
/* ---------------------------------------------------------------- Graphite: smoked glass, grey ramp, colour only where it means something */
html.win-graphite :is(.window, .tcard) {
  --win-a: rgba(42, 42, 46, 0.86); --win-b: rgba(16, 16, 18, 0.9); --win-border: rgba(255, 255, 255, 0.3); --rim-rgb: 255, 255, 255; --rim-hi: rgba(255, 255, 255, 0.45);
  --hud-a: rgba(36, 36, 40, 0.88); --hud-b: rgba(16, 16, 18, 0.9);
  --bg-0: #0b0b0c; --bg-1: #141416; --bg-2: #1e1e21; --bg-3: #2b2b2f;
  --slot: rgba(255, 255, 255, 0.07); --slot-line: rgba(255, 255, 255, 0.32); --win-dim: rgba(0, 0, 0, 0.5);
  --ink: #f2f2f2; --dim: #a6a6a6; --gold: #f2f2f2;
  --tx-hi: #f2f2f2; --tx-dim: #bdbdbd; --tx-faint: #8a8a8a; --tx-gold: #fff;
  --acc-1: #f2f2f2; --acc-2: #d4d4d4; --on-acc: #111; --bg-x: rgba(255, 255, 255, 0.08);
  --win-bw: 1px; --win-r: 14px; --win-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 34px rgba(0, 0, 0, 0.5);
}
/* ---------------------------------------------------------------- Frosted Night: the Classic blue as glass */
html.win-frosted :is(.window, .tcard) {
  --win-a: rgba(48, 66, 170, 0.8); --win-b: rgba(18, 26, 86, 0.86); --win-border: rgba(200, 214, 255, 0.45); --rim-hi: rgba(200, 214, 255, 0.55);
  --hud-a: rgba(44, 60, 160, 0.84); --hud-b: rgba(18, 26, 86, 0.88);
  --slot: rgba(10, 16, 60, 0.55); --slot-line: rgba(200, 214, 255, 0.4);
  --gold: #ffd66b;
  --win-bw: 1px; --win-r: 16px; --win-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px rgba(2, 4, 24, 0.5);
}
/* ---------------------------------------------------------------- Bold Flat: solid blue, navy outline, yellow title strips */
html.win-flat :is(.window, .tcard) {
  --win-a: #2440b4; --win-b: #2440b4; --win-border: #0b1240; --rim-hi: #8ea2ff;
  --hud-a: #2440b4; --hud-b: #2440b4;
  --bg-0: #0b1240; --bg-1: #14227a; --bg-2: #1b2e98; --bg-3: #2a48c0;
  --slot: #14227a; --slot-line: #0b1240; --gold: #ffd23f;
  --acc-1: #fff; --acc-2: #fff; --on-acc: #0b1240; --bg-x: #14227a;
  --win-bw: 3px; --win-r: 14px; --win-shadow: 0 5px 0 #0b1240, 0 10px 20px rgba(0, 0, 0, 0.35);
}

/* ================================================================ shared pieces, per style */
/* the title screen's card (title.css .tcard) takes the style's frame; its glow and dark title shadow are Classic's */
html:is(.win-paper, .win-ink, .win-graphite, .win-frosted, .win-flat) .tcard { background: linear-gradient(180deg, var(--win-a), var(--win-b)); border-width: var(--win-bw); border-radius: var(--win-r); box-shadow: var(--win-shadow); }
html:is(.win-paper, .win-ink, .win-graphite, .win-flat) :is(.tc-head, .tc-star) { text-shadow: none; filter: none; }
html:is(.win-paper, .win-ink, .win-graphite, .win-frosted, .win-flat) .tcard::before { border-radius: var(--win-r); }

/* the solid styles: the windows that open over the HUD are solid (the HUD's own fill lets the cards under them show) */
html:is(.win-paper, .win-ink, .win-flat) #hud :is(#settings, #help, #social, #bagpanel, #dialog, .pmd-menu) { background: linear-gradient(180deg, var(--win-a), var(--win-b)); }

/* glass: the blur only on desktop windows that open over the world (on phones it costs frames) */
html:not(.touch).win-frosted :is(.pmd-menu, #dialog, #settings, #bagpanel, #help, .notice, #social, .shop-win) {
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}
html:not(.touch).win-graphite :is(.pmd-menu, #dialog, #settings, #bagpanel, #help, .notice, #social, .shop-win) {
  -webkit-backdrop-filter: blur(12px) saturate(40%); backdrop-filter: blur(12px) saturate(40%);
}

/* the cursor row: inverted in the black-and-white styles, a soft pill in the glass ones, a white pill in Bold Flat */
html.win-paper .mitem.sel { background: #111; color: #fbfbf8; }
html.win-ink .mitem.sel { background: #fff; color: #000; }
html.win-flat .mitem.sel { background: #fff; color: #0b1240; box-shadow: 0 3px 0 #0b1240; }
html:is(.win-paper, .win-ink, .win-flat) .mitem.sel :is(.t, .msub, .cursor) { color: inherit !important; }
html.win-frosted .mitem.sel { background: linear-gradient(90deg, rgba(140, 170, 255, 0.38), rgba(140, 170, 255, 0.12)); box-shadow: inset 0 0 0 1px rgba(200, 214, 255, 0.45); }
html.win-graphite .mitem.sel { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
html:is(.win-frosted, .win-graphite, .win-flat) .mitem { border-radius: 10px; }
html:is(.win-paper, .win-ink) .mitem { border-radius: 3px; }

/* ---------------------------------------------------------------- buttons: every text button and close button in the
   windows (the list below; tools/button-audit.mjs lists the buttons a style shows). Every style gives them its shape
   (--btn-r corners, --btn-bw rim, --btn-shadow); the black-and-white styles also give them its colours: a neutral button,
   the picked / go one inverted (--btn-on-*), a danger one in --btn-bad text. Frosted Night and Bold Flat keep the
   buttons' own colours (gold "on", green go, red leave). Cards, tiles and rows (job notes, Pokédex cards, grid tiles)
   are not buttons here: the tokens colour them. When a new feature adds a button class, add it to the three lists. */
html.win-paper {
  --btn-r: 4px; --btn-bw: 2px; --btn-shadow: 2px 2px 0 #111; --btn-bg: #fbfbf8; --btn-line: #111; --btn-ink: #111;
  --btn-on-bg: #111; --btn-on-line: #111; --btn-on-ink: #fbfbf8; --btn-on-shadow: none; --btn-bad: #b3261e;
}
html.win-ink {
  --btn-r: 4px; --btn-bw: 2px; --btn-shadow: none; --btn-bg: #000; --btn-line: #fff; --btn-ink: #fff;
  --btn-on-bg: #fff; --btn-on-line: #fff; --btn-on-ink: #000; --btn-on-shadow: none; --btn-bad: #ff8a7a;
}
html.win-graphite {
  --btn-r: 999px; --btn-bw: 1px; --btn-shadow: none; --btn-bg: rgba(255, 255, 255, 0.07); --btn-line: rgba(255, 255, 255, 0.32); --btn-ink: #f2f2f2;
  --btn-on-bg: #f2f2f2; --btn-on-line: #f2f2f2; --btn-on-ink: #111; --btn-on-shadow: none; --btn-bad: #ff9a8a;
}
html.win-frosted { --btn-r: 999px; --btn-bw: 1px; --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
html.win-flat { --btn-r: 10px; --btn-bw: 2px; --btn-shadow: 0 3px 0 #0b1240; }

/* the shape, every style but Classic */
html:is(.win-paper, .win-ink, .win-graphite, .win-frosted, .win-flat) :is(
  .sbtn, .shop-btn, .tgo, .tback, .tchip, .ttab, .tc-back, .nbtns button, #sos button, .jtabs button, .jback, .jgo, .jr-next, .jreplay,
  .jw-tab, .jw-track, .jw-btn, .jw-replay, .jw-back, .sn-btns button, .bk-step, .lok, .ord-arr, .ord-chip, .ord-lead,
  .dxseg button, .dxmore, .dxanims button, .dxev, .dxback, .pt-tab, .pt-fav, .pt-fold, .pt-sos, .pt-sort, #quiz .qname button,
  #quiz .qshow button, #quiz .qbtns button, .snt-ask button, .snt-choices button, .ctab, .sw-tab, .sw-chip, .sw-fold, .tw-sort, .tw-btn,
  .tw-iqt, .se-go, .se-role, .pepisodes, #cutscene .cs-ok, #cutscene .cs-confirm button, #settings .set-tab, .dstep, .ob-fold,
  #logbox .loghead button, .tc-foot button, .keycap, .qb, .qk, .qtab, .dxshinybtn, .sx, .ord-x,
  .win-x, .pmd-menu .mclose, .bp-x, .set-x, .help-x, .sw-x, .jclose, .dxclose, .jb-close, .shop-x, .lclose, .tw-x, .snt-close
) { border-style: solid; border-width: var(--btn-bw); border-radius: var(--btn-r); box-shadow: var(--btn-shadow); }
html.win-flat :is(.sbtn, .shop-btn, .tback, .tchip, .ttab, .jw-btn, .jw-tab, .sw-tab, .sw-chip, .tw-btn, .tw-sort, .dxseg button, #settings .set-tab, .win-x, .pmd-menu .mclose, .jclose, .dxclose, .shop-x, .lclose, .tw-x) { border-color: #0b1240; }

/* the colours, the black-and-white styles */
html:is(.win-paper, .win-ink, .win-graphite) :is(
  .sbtn, .shop-btn, .tgo, .tback, .tchip, .ttab, .tc-back, .nbtns button, #sos button, .jtabs button, .jback, .jgo, .jr-next, .jreplay,
  .jw-tab, .jw-track, .jw-btn, .jw-replay, .jw-back, .sn-btns button, .bk-step, .lok, .ord-arr, .ord-chip, .ord-lead,
  .dxseg button, .dxmore, .dxanims button, .dxev, .dxback, .pt-tab, .pt-fav, .pt-fold, .pt-sos, .pt-sort, #quiz .qname button,
  #quiz .qshow button, #quiz .qbtns button, .snt-ask button, .snt-choices button, .ctab, .sw-tab, .sw-chip, .sw-fold, .tw-sort, .tw-btn,
  .tw-iqt, .se-go, .se-role, .pepisodes, #cutscene .cs-ok, #cutscene .cs-confirm button, #settings .set-tab, .dstep, .ob-fold,
  #logbox .loghead button, .tc-foot button, .keycap, .qb, .qk, .qtab, .dxshinybtn, .sx, .ord-x,
  .win-x, .pmd-menu .mclose, .bp-x, .set-x, .help-x, .sw-x, .jclose, .dxclose, .jb-close, .shop-x, .lclose, .tw-x, .snt-close
) { background: var(--btn-bg); border-color: var(--btn-line); color: var(--btn-ink); text-shadow: none;
  --tx-hi: var(--btn-ink); --tx-dim: var(--btn-ink); --tx-gold: var(--btn-ink); --on-acc: var(--btn-ink); }
/* picked, go, confirm: inverted */
html:is(.win-paper, .win-ink, .win-graphite) :is(
  .sbtn, .shop-btn, .tchip, .ttab, .jtabs button, .jw-tab, .jw-track, .dxseg button, .dxanims button, .ctab, .sw-tab, .sw-chip,
  .tw-sort, .tw-btn, .snt-choices button, .pt-tab, #settings .set-tab, .se-role, .ord-chip, .qtab, .qk, .dxshinybtn
):is(.on, .sel, .right, [aria-selected="true"]),
html:is(.win-paper, .win-ink, .win-graphite) :is(.tgo:not(.tdanger), .jgo.go, .jr-next, .sbtn.go, .shop-btn.ok, .se-go, .lok, .pt-sos, #quiz .qbtns .ok, .sn-btns .sn-ok, #cutscene .cs-ok, .nbtns .yes, .qb.ok, .keycap.cap) {
  background: var(--btn-on-bg); border-color: var(--btn-on-line); color: var(--btn-on-ink); box-shadow: var(--btn-on-shadow);
  --tx-hi: var(--btn-on-ink); --tx-dim: var(--btn-on-ink); --tx-gold: var(--btn-on-ink); --on-acc: var(--btn-on-ink);
}
/* leave, give up, decline: danger text */
html:is(.win-paper, .win-ink, .win-graphite) :is(.nbtns .no, #sos button, .tgo.tdanger, .shop-btn.leave, .shop-btn.warn, .shop-btn.switch):not(#no-id) {   /* :not(#…) outranks the colour list's ids */
  color: var(--btn-bad); --tx-hi: var(--btn-bad); --tx-dim: var(--btn-bad);
}
/* the labels the code writes inside (ui.js T() spans, counts) take the button's ink */
html:is(.win-paper, .win-ink, .win-graphite) :is(.sbtn, .shop-btn, .tgo, .ttab, .jw-tab, .jw-track, .sw-tab, .sw-chip, .ctab, .tw-btn, .nbtns button, #sos button, #settings .set-tab) :is(.t, .num) { color: inherit !important; }

/* Bold Flat: the yellow title strip on menus and Settings, the speaker's name as a tag */
html.win-flat .pmd-menu .mtitle { background: var(--gold); margin: calc(-10px * var(--k)) calc(-12px * var(--k)) 8px calc(-8px * var(--k)); padding-top: calc(7px * var(--k)); padding-bottom: calc(6px * var(--k)); border-bottom: 3px solid #0b1240; border-radius: 11px 11px 0 0; }
html.win-flat .pmd-menu .mtitle :is(.t, .mpage) { color: #0b1240 !important; }
html.win-flat #settings .set-head { background: var(--gold); margin: calc(-12px * var(--k)) calc(-18px * var(--k)) 8px; padding: calc(6px * var(--k)) calc(18px * var(--k)); border-bottom: 3px solid #0b1240; border-radius: 11px 11px 0 0; }
html.win-flat #settings .set-head .t { color: #0b1240 !important; }
html.win-flat #dialog .dname { align-self: flex-start; background: var(--gold); border: 3px solid #0b1240; border-radius: 8px; padding: 1px 10px; }
html.win-flat #dialog :is(.dname, .dname .t) { color: #0b1240 !important; }

/* Paper: the speaker's name on a black tag, a heavier title rule; Ink: a dashed one */
html.win-paper #dialog .dname { align-self: flex-start; background: #111; border-radius: 3px; padding: 2px 10px; }
html.win-paper #dialog :is(.dname, .dname .t) { color: #fbfbf8 !important; }   /* setText colours the name inline */
html.win-paper .pmd-menu .mtitle { border-bottom: 2px solid #111; }
html.win-ink .pmd-menu .mtitle { border-bottom: 1px dashed rgba(255, 255, 255, 0.55); }

/* scrollbars */
html.win-paper .window ::-webkit-scrollbar-track { background: #e3e2db; box-shadow: inset 0 0 0 1px #111; }
html.win-paper .window ::-webkit-scrollbar-thumb { background: #111; border-color: #e3e2db; box-shadow: none; }
html.win-ink .window ::-webkit-scrollbar-track { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
html.win-ink .window ::-webkit-scrollbar-thumb { background: #fff; border-color: #000; box-shadow: none; }
html.win-graphite .window ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); box-shadow: none; }
html.win-graphite .window ::-webkit-scrollbar-thumb { background: #8c8c8c; border-color: #141416; box-shadow: none; }
@supports not selector(::-webkit-scrollbar) {
  html.win-paper .window * { scrollbar-color: #111 #e3e2db; }
  html.win-ink .window * { scrollbar-color: #fff #000; }
  html.win-graphite .window * { scrollbar-color: #8c8c8c rgba(0, 0, 0, 0.4); }
}

/* Settings > Display > Window style: each card draws a small window in its style (.ws-pv): the window, a title line and
   a picked button. The same in every style, so the cards compare. */
.ws-pv { position: relative; display: block; height: calc(54px * var(--k)); box-sizing: border-box; overflow: hidden;
  background: var(--pv-bg); border: var(--pv-bw) solid var(--pv-rim); border-radius: var(--pv-r); box-shadow: var(--pv-sh, none); }
.ws-pv::before { content: ""; position: absolute; left: 9%; top: 18%; width: 46%; height: 13%; border-radius: 2px; background: var(--pv-title); }
.ws-pv::after { content: ""; position: absolute; left: 9%; bottom: 16%; width: 42%; height: 26%; border-radius: var(--pv-br); background: var(--pv-btn); box-shadow: var(--pv-btn-sh, none); }
.ws-paper { --pv-bg: #fbfbf8; --pv-bw: 2px; --pv-rim: #111; --pv-r: 4px; --pv-sh: 3px 3px 0 #111; --pv-title: #111; --pv-btn: #111; --pv-br: 3px; }
.ws-ink { --pv-bg: #000; --pv-bw: 2px; --pv-rim: #fff; --pv-r: 4px; --pv-title: #fff; --pv-btn: #fff; --pv-br: 3px; }
.ws-classic { --pv-bg: linear-gradient(#2c3c96, #18205e); --pv-bw: 2px; --pv-rim: #c9d2ff; --pv-r: 6px; --pv-sh: 0 0 0 1px #0a0e30; --pv-title: #ffe36a; --pv-btn: linear-gradient(#ffe88a, #e8b830); --pv-br: 4px; }
.ws-graphite { --pv-bg: linear-gradient(#3a3a3e, #121214); --pv-bw: 1px; --pv-rim: rgba(255, 255, 255, 0.4); --pv-r: 10px; --pv-title: #a6a6a6; --pv-btn: #f2f2f2; --pv-br: 999px; }
.ws-frosted { --pv-bg: linear-gradient(rgba(70, 92, 210, 0.95), rgba(24, 34, 110, 0.95)); --pv-bw: 1px; --pv-rim: rgba(200, 214, 255, 0.7); --pv-r: 10px; --pv-title: #c3cdf5; --pv-btn: #ffd66b; --pv-br: 999px; --pv-btn-sh: 0 0 8px rgba(255, 214, 107, 0.6); }
.ws-flat { --pv-bg: linear-gradient(#ffd23f 0 34%, #2440b4 34%); --pv-bw: 2px; --pv-rim: #0b1240; --pv-r: 7px; --pv-sh: 0 3px 0 #0b1240; --pv-title: #0b1240; --pv-btn: #fff; --pv-br: 6px; --pv-btn-sh: 0 2px 0 #0b1240; }