/* =====================================================================
   GoNews Advanced - SHELL stylesheet (A's visual system: tokens, Jakarta, header, hero,
   search, ☰ sheet, dialog box, footer, shared components) + A's cheat sheet / updates / calendar pages.
   Page content lives in the parts (see PARTS.md), each with its own scoped stylesheet:
   parts/home.css (.pg-home) · parts/tabs.css (.pg-tabs) · parts/swipe.css (.pg-swipe) · parts/dialog.css (.dlg) ·
   parts/install.css (.dlg .in…, .in-row, .in-nudge: @imported below, every page).
   Calm chapters on one grid. Pictures carry the information: sprites on tinted plates,
   one accent, gold only for shiny + prices, category colour only as a small dot.
   One vertical rhythm: 52 px between chapters (desktop), 44 px (phones).
   ===================================================================== */
/* parts/install.css - "Add to home screen" (renderer parts/install.js · behaviour parts/install.client.js).
   @imported at the top of styles.css (every page; the build inlines it). Scopes: .dlg .in… (the popup content in the
   shell's dialog) · .in-row (the ☰ row; looks like the Calendar (.ics) pill next to it) · .in-nudge (the phone card)
   · body.in-nudged / html.is-locked (page room under the card, the card out of the way of a dialog / ☰ / search).
   Same picture language as the details dialog (parts/dialog.css): a picture band on the tinted plate (the ✕ floats
   over its corner), then title, ≤ 3 dot points, the steps. Values mirror dialog.css (dg-hero, dg-b, dg-t, dg-facts). */

.dlg .in { --in-on: #30d158; position: relative; } /* iOS switch "on" green (drawn like the real one) */
.dlg .in:focus { outline: none; }
:where(:root[data-theme="light"]) .dlg .in { --in-on: #248a3d; } /* light theme (PARTS.md §4) */

/* ---------- the picture band: our icon on a home-screen row ---------- */
.dlg .in-hero {
  display: flex; align-items: center; justify-content: center;
  min-height: 176px; padding: 26px 56px 20px;
  background:
    radial-gradient(56% 78% at 50% 60%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 74%),
    radial-gradient(90% 60% at 50% 0%, var(--plate-hi), transparent 70%),
    var(--plate);
}
.dlg .in-home { display: flex; align-items: flex-start; gap: 26px; }
.dlg .in-app { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; }
.dlg .in-app img, .dlg .in-app i { display: block; width: 72px; height: 72px; border-radius: 17px; }
.dlg .in-app img { box-shadow: var(--lift); }
.dlg .in-app b { font-size: 13px; font-weight: 650; line-height: 16px; color: var(--text); }
.dlg .in-ghost i { background: var(--hair-2); }
.dlg .in-ghost b { width: 44px; height: 8px; margin-top: 4px; background: var(--hair-2); border-radius: 4px; }
.dlg .in-ghost { opacity: .7; }

/* ---------- words ---------- */
.dlg .in-b { padding: 18px 26px 22px; }
.dlg .in-t { margin: 0; font-size: 26px; font-weight: 770; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.dlg .in-for { margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--mute); }
.dlg .in-perks { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.dlg .in-perks li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.dlg .in-perks li::before { content: ""; position: absolute; top: .62em; left: 3px; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.dlg .in-none li::before { background: var(--mute); }

/* the steps: a numbered row each, hairlines between (like the dialog's lists) */
.dlg .in-steps { display: grid; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: in-step; }
.dlg .in-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); counter-increment: in-step; }
.dlg .in-steps > li:last-child { padding-bottom: 0; }
.dlg .in-steps > li::before {
  content: counter(in-step); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px;
  font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-radius: 50%;
}
.dlg .in-s { margin: 0; font-size: 15px; font-weight: 550; line-height: 28px; color: var(--text); }
.dlg .in-s b { font-weight: 750; }
.dlg .in-n { margin: 2px 0 0; font-size: 13px; line-height: 24px; color: var(--mute); }
.dlg .in-n b { font-weight: 700; color: var(--text-2); }
/* a key: the glyph on a small button face, in the line of text */
.dlg .in-k { display: inline-grid; place-items: center; width: 32px; height: 26px; margin: -2px 2px 0; vertical-align: middle; color: var(--accent); background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: 9px; }
.dlg .in-n .in-k { width: 28px; height: 22px; border-radius: 8px; }
.dlg .in-g { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg .in-n .in-g { width: 16px; height: 16px; }
.dlg .in-g .in-gs { fill: currentColor; stroke: none; }
.dlg .in-k-tg { width: 44px; }
.dlg .in-tg { width: 30px; height: 18px; }
.dlg .in-tg .in-tg-t { fill: var(--in-on); stroke: none; }
.dlg .in-tg .in-tg-k { fill: #fff; stroke: none; }

/* the browser's own prompt: one button */
.dlg .in-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 20px 0 0; padding: 0 20px; font-size: 15px; font-weight: 750; color: var(--on-accent); cursor: pointer; background: var(--accent); border: 0; border-radius: 999px; }
.dlg .in-go:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }

/* ---------- the ☰ row (shell class .ics gives the pill) ---------- */
.in-row { cursor: pointer; }

/* ---------- the phone nudge: a small card above the home bar, once ---------- */
.in-nudge {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 0 auto; padding: 8px 8px 8px 10px;
  color: var(--text); background: var(--surface); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: var(--lift-lg);
  animation: in-rise .28s ease;
}
@keyframes in-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.in-nudge-i { display: block; flex: none; width: 40px; height: 40px; border-radius: 10px; }
.in-nudge-t { flex: 1 1 auto; min-width: 0; margin: 0 0 0 2px; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.in-nudge-go { flex: none; height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 750; color: var(--on-accent); cursor: pointer; background: var(--accent); border: 0; border-radius: 999px; }
.in-nudge-x { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--text); cursor: pointer; background: var(--surface-2); border: 0; border-radius: 50%; }
.in-nudge-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.in-nudge :is(.in-nudge-go, .in-nudge-x):focus:not(:focus-visible) { outline: none; }
html.is-locked .in-nudge { visibility: hidden; } /* a dialog, ☰ or the search is open */
body.in-nudged .foot { padding-bottom: calc(48px + 72px + env(safe-area-inset-bottom, 0px)); } /* the page's end scrolls above the card */

/* ---------- phones ---------- */
@media (max-width: 639px) {
  /* the ✕ (40 px at top 12) owns the band's top-right corner, as in the details dialog */
  .dlg .in-hero { min-height: 150px; padding: 58px 16px 18px; }
  .dlg .in-home { gap: 20px; }
  .dlg .in-app, .dlg .in-app img, .dlg .in-app i { width: 64px; }
  .dlg .in-app img, .dlg .in-app i { height: 64px; border-radius: 15px; }
  .dlg .in-b { padding: 16px 16px 18px; }
  .dlg .in-t { font-size: 22px; }
  .dlg .in-perks li { font-size: 14px; }
}
@media (max-width: 359px) {
  .in-nudge-i { display: none; }
  .in-nudge-go { padding: 0 14px; }
}
/* drawer.css - SHELL: every <dialog class="dlg"> (the details / raid / install popup in #dlg, a part's own dialog such
   as the calendar chooser) as a bottom DRAWER on phones and touch tablets up to 900 px (owner 2026-10-16). The gesture
   + the animated close: src/drawer.js (DRAWER_MQ = the media query below - change both together). @imported by
   styles.css; selectors are `dialog.dlg …` so they win over the centred modal's `.dlg` rules without depending on order.
   Desktop and touch screens over 900 px: the centred modal of styles.css, untouched.
   · up to 639 px: full width · 640-900 px (touch tablets, landscape phones): up to 720 px wide, centred - both bottom-
     anchored with rounded top corners, a grab handle on top
   · bottom: the drawer reaches the screen edge, its content stops above the iPhone home bar (env(safe-area-inset-bottom))
   · top: never higher than the status bar (--safe-t) + 10 px, at least 24 px of page above it (the backdrop to tap)
   · slides up on open (.38 s, the iOS sheet curve), the backdrop fades in; reduced motion → no slide, no fade */
.dlg-grab { display: none; }

@media (max-width: 639px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  dialog.dlg {
    --dlg-top: max(calc(var(--safe-t) + 10px), 24px);
    inset: auto 0 0 0; width: 100%; max-width: 720px; max-height: calc(100dvh - var(--dlg-top)); margin: 0 auto;
    overflow: visible;
  }
  dialog.dlg > .dlg-body {
    max-height: calc(100dvh - var(--dlg-top));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-width: 1px 1px 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .12), 0 -24px 60px -20px rgba(0, 0, 0, .55);
  }
  dialog.dlg[open] { animation: dlg-up .38s cubic-bezier(.32, .72, 0, 1); }
  dialog.dlg[open]::backdrop { animation: dlg-fade .3s ease; }
  dialog.dlg.is-dragging { will-change: transform; user-select: none; -webkit-user-select: none; }
  /* the grab handle: a pill centred on the top edge; its strip (120 × 26 px) starts a drag, never a scroll */
  .dlg-grab { position: absolute; top: 0; left: 50%; z-index: 2; display: block; width: 120px; height: 26px; cursor: grab; touch-action: none; transform: translateX(-50%); }
  .dlg-grab::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; background: color-mix(in srgb, var(--text) 30%, transparent); border-radius: 3px; transform: translateX(-50%); }
  dialog.dlg.is-dragging .dlg-grab { cursor: grabbing; }
}
@keyframes dlg-up { from { transform: translate3d(0, 100%, 0); } }
@keyframes dlg-fade { from { opacity: 0; } }
/* the shell turns animations off under reduced motion (styles.css); its rule does not reach ::backdrop */
@media (prefers-reduced-motion: reduce) {
  dialog.dlg[open], dialog.dlg[open]::backdrop { animation: none; }
}

@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --safe-t: env(safe-area-inset-top, 0px); /* iPhone status bar under viewport-fit=cover: the header grows by it, offsets follow */
  --font: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #0b0d12;
  --surface: #13161d;
  --surface-2: #1a1e27;
  --plate: #151922;
  --plate-hi: rgba(255, 255, 255, .055);
  --hair: rgba(255, 255, 255, .07);
  --hair-2: rgba(255, 255, 255, .13);
  --text: #eef0f5;
  --text-2: #b9c0cf;
  --mute: #8790a3;
  --accent: #8fb4ff;
  --on-accent: #0b0d12;
  --gold: #f2c45c;
  --live: #ff7369;
  --glow: rgba(110, 140, 255, .13);
  --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .65);
  --lift-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 80px -24px rgba(0, 0, 0, .75);
  /* dark theme: a faint light rim + soft backlight, so near-black sprites (Zekrom, Yveltal, Umbreon …) never
     sink into the dark plates; the drop shadow keeps the depth */
  --sprite-shadow: drop-shadow(0 0 1px rgba(255, 255, 255, .5)) drop-shadow(0 0 7px rgba(205, 215, 255, .2)) drop-shadow(0 6px 10px rgba(0, 0, 0, .4));
  --t-five: #ff8576;
  --t-mega: #b892ff;
  --t-shadow: #9a8cff;
  --t-three: #f2b65c;
  --t-one: #e98fb6;
  --on-live: #1b0b0a;
  --bar: rgba(255, 255, 255, .16);
  --face: #4b5469;
  --face-hi: rgba(255, 255, 255, .2);
  --face-ring: rgba(255, 255, 255, .24);
  --face-rim: drop-shadow(0 0 1.5px rgba(255, 255, 255, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  --wrap: 1140px;
  --gut: 24px;
  --gap-sec: 52px;
  --r: 18px;
  --r-lg: 24px;
  --bar-h: 60px;
}
/* Light theme = <html data-theme="light">. src/launch.js resolves the visitor's choice (Dark - the default · Light · Auto =
   the system's prefers-color-scheme, live) before the first paint; no attribute = dark (the no-JS look). Every themed rule
   keys off that attribute, never the media query, and :where() keeps each at the specificity it had under the query. */
:root:where([data-theme="light"]) {
  color-scheme: light;
  --bg: #fffffd;
  --surface: #ffffff;
  --surface-2: #efeee8;
  --plate: #ecebe5;
  --plate-hi: rgba(255, 255, 255, .7);
  --hair: rgba(20, 22, 30, .08);
  --hair-2: rgba(20, 22, 30, .14);
  --text: #14161c;
  --text-2: #3e4452;
  --mute: #606675;
  --accent: #2f56cc;
  --on-accent: #ffffff;
  --gold: #785504;
  --live: #ba372e;
  --glow: rgba(70, 110, 255, .09);
  --lift: 0 1px 2px rgba(20, 22, 30, .06), 0 12px 30px -18px rgba(20, 22, 30, .28);
  --lift-lg: 0 2px 6px rgba(20, 22, 30, .08), 0 30px 70px -28px rgba(20, 22, 30, .35);
  --sprite-shadow: drop-shadow(0 5px 7px rgba(30, 30, 40, .2));
  --t-five: #b23d32;
  --t-mega: #7749cd;
  --t-shadow: #5a47cf;
  --t-three: #8d5a08;
  --t-one: #ae3d70;
  --on-live: #fff;
  --bar: rgba(20, 22, 30, .13);
  --face: #ffffff;
  --face-hi: rgba(255, 255, 255, .7);
  --face-ring: transparent;
  --face-rim: none;
}

/* category colour (dots, plate tint) */
.cat-raid { --c: #f0766b; } .cat-max { --c: #c58af5; } .cat-spot { --c: #e9b23c; } .cat-cd { --c: #43c47f; }
.cat-big { --c: #2bbfb3; } .cat-event { --c: #5f9cf0; } .cat-research { --c: #d8b23a; } .cat-pass { --c: #e0b04d; }
.cat-season { --c: #9b87f2; } .cat-gbl { --c: #7f8cf0; } .cat-promo { --c: #ea72b4; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; } /* app feel: scroll only, no double-tap / pinch zoom */
/* open search, details dialog or ☰ sheet: the page behind does not scroll (app.js lockPage; the scrollbar's width is
   kept as padding, no shift - the dialog and the sheet keep their place too) */
html.is-locked { overflow: hidden; }
html.is-locked body { padding-right: var(--sbw, 0px); }
html.is-locked .dlg { right: var(--sbw, 0px); }
html.is-locked .sheet { padding-right: var(--sbw, 0px); }
/* anchor targets clear the sticky bar (scroll-margin, not html scroll-padding: that would make focusing
   a control in the sticky bar scroll the page); so does a control the keyboard focuses (WCAG 2.4.11), an anchor
   target keeps its own margin (the rule after this one) */
main :is(a, button, summary, input, [tabindex]) { scroll-margin-top: calc(var(--bar-h) + var(--safe-t) + 12px); }
main [id], .find { scroll-margin-top: calc(76px + var(--safe-t)); }
body { margin: 0; font: 15px/1.55 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a:focus-visible { border-radius: 6px; }
/* focus rings for the keyboard only (owner 2026-10-17): after a tap / click (app.js → <html data-input="pointer">) no ring
   on anything - a card, a pager track iOS focuses in its place, the opener a dialog hands focus back to, the ☰ sheet's ✕.
   Tab, the arrows, Enter, Space, Esc → "key": every ring is back (WCAG 2.4.7). Text fields keep their own focus look
   (the search box glow, the filters' borders). */
:root[data-input="pointer"] :focus { outline: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; background: var(--surface); border-radius: 10px; }
main:focus { outline: none; }

/* ---------- header (one line, both states; 🔍 in both) ---------- */
.top { position: sticky; top: 0; z-index: 50; padding-top: var(--safe-t); background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .2s ease, box-shadow .2s ease; }
body.stuck .top { border-bottom-color: var(--hair); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .55); }
.top-row { display: flex; align-items: center; height: var(--bar-h); }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 40px; font-size: 16.5px; font-weight: 750; line-height: 22px; letter-spacing: -.015em; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; font-weight: 550; color: var(--mute); }
.mark { display: block; flex: none; width: 30px; height: 30px; border-radius: 9px; }
.mark img { display: block; width: 30px; height: 30px; border-radius: 9px; }
:where(:root:not([data-theme="light"])) .mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 14px rgba(120, 150, 255, .25); }
/* phone crumb (C): "GoNews Advanced | This week" once scrolled; hidden whole if it would not fit */
.crumb { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 9px; min-width: 0; margin-left: 10px; margin-right: 17px; overflow: hidden; font-size: 14px; font-weight: 650; line-height: 22px; color: var(--text-2); white-space: nowrap; }
.crumb::before { content: ""; flex: none; width: 1.5px; height: 18px; background: var(--hair-2); border-radius: 1px; }
.crumb.is-off { display: none; }
.chap { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.chap a { position: relative; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-2); white-space: nowrap; border-radius: 10px; }
.chap a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.chap a.is-current { color: var(--text); }
.chap a.is-current::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tools { display: flex; flex: none; align-items: center; gap: 8px; margin-left: 10px; }
.icon-btn { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--text); cursor: pointer; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 12px; }
.icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Chapter links from 768 px - measured with the final CHAPTERS "Now · Today · Tomorrow · This week · More"
   (measured in Chrome, every page, both themes): brand 190 + min gap 24 + links 370 + 10
   + 🔍 40 + 8 + ☰ 40 = 682 px of content + 48 px gutters = 730 px → 38 px headroom at 768 (brand → first link 63 px).
   Safety net: app.js folds the links into ☰ (body.hd-fold) if real widths ever exceed the row. */
@media (max-width: 767px) {
  .chap { display: none; }
  .tools { margin-left: auto; }
}
body.hd-fold .chap { display: none; }
body.hd-fold .tools { margin-left: auto; }
@media (min-width: 768px) { .crumb { display: none; } }

/* ---------- hero: slogan + search + one row of sprite chips ---------- */
.hero { padding: 20px var(--gut) 0; text-align: center; background: radial-gradient(900px 300px at 50% -130px, var(--glow), transparent 72%); }
.slogan { margin: 0 auto 14px; font-size: clamp(23px, 2.5vw, 34px); font-weight: 750; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.slogan span { display: inline-block; }
.slogan span + span { color: var(--mute); }
.find { position: relative; max-width: 640px; margin: 0 auto; text-align: left; }
body.finding .find { z-index: 70; }
.find-box { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 18px; cursor: text; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: var(--lift); transition: border-color .15s, box-shadow .15s; }
.find-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--lift); }
.find-i { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; }
.find-box input { flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: 0; }
.find-box input::placeholder { color: var(--mute); }
.find-box input::-webkit-search-cancel-button { display: none; }
.find-k { flex: none; margin-right: 8px; padding: 1px 8px; font: 600 12px/18px var(--mono); color: var(--mute); border: 1px solid var(--hair-2); border-radius: 7px; }
.find-box:focus-within .find-k { display: none; }
@media (hover: none) { .find-k { display: none; } }
/* clear: a 32px circle with a drawn × (a text glyph sat low and grew with some fonts); the "/" hint hides while it shows */
.find-x { display: grid; flex: none; place-items: center; width: 32px; height: 32px; min-height: 0; margin-right: 2px; padding: 0; color: var(--text-2); cursor: pointer; background: var(--surface-2); border: 0; border-radius: 50%; }
.find-x svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.find-x { position: relative; }
.find-x::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* 40px tap area around the 32px circle */
.find-x:hover { color: var(--text); }
.find-box:has(.find-x:not([hidden])) .find-k { display: none; }
.find-res { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 70; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 22px; }
.find-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 7, 11, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.find-dock .find { display: none; }
body.find-float .find { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; z-index: 70; display: block; width: min(640px, calc(100% - 24px)); transform: translateX(-50%); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; height: 36px; margin: 12px auto 0; overflow: hidden; }

/* sprite chips (hero row + empty results panel) */
.sug { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 6px; font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; cursor: pointer; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; }
.sug:not(:has(.mon)) { padding-left: 14px; }
.sug:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }
.sug .sug-i { width: 26px; height: 26px; background: radial-gradient(70% 70% at 50% 45%, var(--plate-hi), transparent 72%), var(--plate); border-radius: 50%; }
.sug .sug-i img { filter: none; }

/* glyph art (stroke icons on plates; one language for categories, launchers, missing art) */
.glyph { width: 46%; max-width: 60px; height: auto; fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.glyph .g-fill { fill: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent); stroke: none; }
.glyph .g-solid { fill: var(--c, var(--accent)); stroke: none; }
.egg .egg-b { fill: #f3efe4; stroke: color-mix(in srgb, #8b6fd6 45%, transparent); stroke-width: 1.4; }
.egg .egg-k { font: 800 12.5px var(--font); fill: #2a2d36; text-anchor: middle; }
.cal .cal-b { fill: var(--surface); stroke: var(--hair-2); stroke-width: 1.4; }
.cal .cal-t { fill: var(--live); }
.cal .cal-m { font: 800 6.6px var(--font); fill: #fff; text-anchor: middle; letter-spacing: .06em; }
.cal .cal-n { font: 800 15px var(--font); fill: var(--text); text-anchor: middle; }
.balls { display: flex; align-items: center; justify-content: center; gap: 6%; width: 88%; }
.balls .ball { width: 30%; max-width: 46px; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.balls.bn1 .ball { width: 44%; }
.ball .cup-bg { fill: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.ball .cup-ln { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mon.is-shadow img { filter: drop-shadow(0 0 5px rgba(150, 90, 230, .75)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }

/* ---------- chapters: one grid, one header pattern, one rhythm ---------- */
main.wrap { display: block; padding-bottom: var(--gap-sec); }
.stage { margin-top: var(--gap-sec); }
.sh { display: flex; align-items: center; gap: 16px; min-height: 40px; margin-bottom: 14px; }
.sh-a { display: flex; flex: 0 1 auto; align-items: baseline; gap: 14px; min-width: 0; }
.sh-t { flex: none; margin: 0; font-size: 24px; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
.sh-m { flex: 0 1 auto; min-width: 0; margin: 0; padding-top: 3px; font-size: 14px; font-weight: 550; color: var(--mute); }
.sh-x { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.empty { margin: 0; padding: 18px 20px; font-size: 14px; color: var(--mute); border: 1px dashed var(--hair-2); border-radius: var(--r); }
.warn-banner { margin: 16px 0 0; padding: 10px 14px; font-size: 13.5px; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 14px; }

/* segmented control (weeks, passes) */
.seg { display: flex; flex: 0 1 auto; gap: 2px; min-width: 0; max-width: 100%; padding: 3px; overflow-x: auto; background: var(--surface-2); border-radius: 12px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-b { flex: none; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; cursor: pointer; background: none; border: 0; border-radius: 9px; }
.seg-b:hover { color: var(--text); }
.seg-b[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px var(--hair); }
/* the same look as a radio group (H.segRadio - a filter: This week's views, the calendar): <fieldset class="seg"> +
   <label class="seg-b"><input type="radio">; the radio covers its segment (native arrow keys, the segment's focus ring) */
fieldset.seg { margin: 0; border: 0; min-inline-size: 0; }
label.seg-b { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.seg-b > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; background: none; border: 0; border-radius: inherit; -webkit-appearance: none; appearance: none; }
.seg-b > input:focus-visible { outline-offset: 1px; }
.seg-b:has(> input:checked) { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px var(--hair); }

/* labels + badges */
.kind { display: block; min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; text-overflow: ellipsis; }
.kind::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; vertical-align: middle; background: var(--c, var(--mute)); border-radius: 50%; }
.b { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 20px; padding: 0 8px; font-size: 11px; font-weight: 750; letter-spacing: .01em; color: var(--text-2); white-space: nowrap; background: var(--surface-2); border-radius: 999px; }
.b .spk { position: static; width: 11px; height: 11px; }
.b-paid, .b-shiny { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.b-shiny { position: relative; } /* its hidden "shiny " (.vh) stays inside the badge: never escapes a scroll track */
.b .dk { margin-left: -1px; font-style: normal; font-weight: 650; }
.b .dk::before { content: "· "; }
.b-last { color: var(--live); background: color-mix(in srgb, var(--live) 14%, var(--surface)); }
.b-new { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.tz { padding: 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--hair-2); border-radius: 6px; }
.cd { font-variant-numeric: tabular-nums; }
/* est. badge: small to the eye, ≥ 40 px to the finger (hit area), tooltip on hover / focus / tap */
.est { position: relative; padding: 1px 6px; font-size: 11px; font-weight: 750; color: var(--gold); cursor: help; background: color-mix(in srgb, var(--gold) 8%, transparent); border: 0; border-radius: 6px; }
.est::before { content: ""; position: absolute; inset: -11px -8px; }
.est[data-pinned] { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.tip { position: fixed; z-index: 90; width: max-content; max-width: min(280px, calc(100vw - 16px)); margin: 0; padding: 8px 11px; font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; color: var(--bg); background: var(--text); border-radius: 10px; box-shadow: var(--lift); } /* hoverable (WCAG 1.4.13): app.js keeps it while the pointer is on it */
.est-inline { font-style: normal; font-weight: 750; color: var(--gold); }
.gold { color: var(--gold); }
/* H.tipped(): any value with a hover / focus / tap tooltip (data-tip), no visible extra text - e.g. odds + basis */
.tipped { position: relative; display: inline; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; cursor: help; background: none; border: 0; }
.tipped::before { content: ""; position: absolute; inset: -10px -6px; }
/* H.chev(dir): a drawn chevron for pagers (size it in the part: width / height) */
.chev { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* a part that failed to load or threw while rendering (console has the error) */
.part-err { margin: 28px 0; padding: 18px 20px; font-size: 14px; color: var(--live); border: 1px dashed color-mix(in srgb, var(--live) 50%, transparent); border-radius: var(--r); }
.dash { display: block; width: 16px; height: 2px; background: var(--hair-2); border-radius: 2px; }

/* pokémon sprites */
.mon { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.mon img { width: 100%; height: 100%; object-fit: contain; filter: var(--sprite-shadow); }
/* a Pokémon HOME render (H.hdImg: the big pictures): drawn by its trim box on every browser (Safari has no object-view-box) -
   its visible box fitted (contain) + centred in the .mon box (--fw / --fh = the visible share of the 512 px picture, --cx /
   --cy = its centre). The wrapper reaches 16 px past the box so the sprite's drop shadows stay whole, and clips the
   picture's transparent margin there (no overflow). The .mon box needs a size of its own (every big picture has one). */
.mon > .hd { position: absolute; inset: -16px; overflow: clip; container-type: size; pointer-events: none; }
.mon > .hd > img { --hs: min((100cqw - 32px) / var(--fw), (100cqh - 32px) / var(--fh)); position: absolute; top: calc(50cqh - var(--hs) * var(--cy)); left: calc(50cqw - var(--hs) * var(--cx)); width: var(--hs); max-width: none; height: var(--hs); max-height: none; object-fit: fill; }
.mon-xs { width: 28px; height: 28px; }
.mon-sm { width: 40px; height: 40px; }
.mon-md { width: 56px; height: 56px; }
.mon-lg { width: 76px; height: 76px; }
.mon-xl { width: 100px; height: 100px; }
.mon-gl { display: grid; place-items: center; width: 100%; height: 100%; }
.mon-gl .glyph { width: 74%; max-width: none; --c: var(--mute); }
.plate .mon-gl .glyph { --c: inherit; }
.spk { position: absolute; top: -2px; right: -4px; width: 16px; height: 16px; fill: var(--gold); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent)); }
.is-debut .spk { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.25) rotate(14deg); opacity: .75; } }
/* faces (C): sprite discs, overlapping */
.faces { display: inline-flex; align-items: center; }
.faces .face { padding: 3px; background: radial-gradient(70% 70% at 50% 42%, var(--face-hi), transparent 74%), var(--face); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--face-ring), 0 0 0 2px var(--plate); }
.faces .face + .face { margin-left: -10px; }
.faces .face img { filter: var(--face-rim); }

/* plate: the one picture treatment (sprites or a glyph on a tinted plate) */
.plate { position: relative; display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(64% 76% at 50% 56%, color-mix(in srgb, var(--c, var(--accent)) 20%, transparent), transparent 76%), radial-gradient(90% 60% at 50% 0%, var(--plate-hi), transparent 70%), var(--plate); border-radius: 18px; }
.plate { container-type: size; }
.plate.pn1 .mon { width: 70cqh; height: 70cqh; }
.plate.pn2 .mon { width: min(60cqh, 40cqw); height: min(60cqh, 40cqw); }
.plate.pn2 .mon + .mon { margin-left: -3cqw; }
.plate.pn3 .mon { width: min(54cqh, 29cqw); height: min(54cqh, 29cqw); margin: 0 -1.5cqw; }
.plate.pn3 .mon:nth-child(2) { z-index: 1; transform: translateY(5%) scale(1.1); }
.plate > .glyph { width: min(44cqw, 46cqh); max-width: none; }
.plate .balls { width: min(88cqw, 150cqh); }
.plate .balls .ball { width: 30%; max-width: none; }
.plate .flags { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; pointer-events: none; }
.plate .flags .b { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.live-dot { display: inline-block; width: 7px; height: 7px; background: var(--live); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }

/* balanced ("justified") grid - spans come from render.js rowSizes() */
.jg { --g: 16px; display: grid; grid-template-columns: repeat(var(--jcc), minmax(0, 1fr)); row-gap: 22px; column-gap: 0; margin-inline: calc(var(--g) / -2); }
.jg-i { grid-column: span var(--jc); min-width: 0; padding-inline: calc(var(--g) / 2); }
@media (min-width: 640px) {
  .jg { grid-template-columns: repeat(var(--jcb), minmax(0, 1fr)); }
  .jg-i { grid-column: span var(--jb); }
}
@media (min-width: 1024px) {
  .jg { grid-template-columns: repeat(var(--jca), minmax(0, 1fr)); }
  .jg-i { grid-column: span var(--ja); }
}
/* uniform tiles (render.js ugrid): one tile size per breakpoint, rows balanced and centred on 2·max
   half-tracks; a set that fits one row is a centred flex row */
.ug { --g: 16px; display: grid; grid-template-columns: repeat(var(--ucc), minmax(0, 1fr)); row-gap: 18px; column-gap: 0; margin-inline: calc(var(--g) / -2); }
.ug-i { grid-column: var(--uc, auto) / span 2; min-width: 0; padding-inline: calc(var(--g) / 2); }
@media (min-width: 640px) {
  .ug { grid-template-columns: repeat(var(--ucb), minmax(0, 1fr)); }
  .ug-i { grid-column: var(--ub, auto) / span 2; }
}
@media (min-width: 1024px) {
  .ug { grid-template-columns: repeat(var(--uca), minmax(0, 1fr)); }
  .ug-i { grid-column: var(--ua, auto) / span 2; }
}
@media (max-width: 639px) { .ug.fit-c { display: flex; justify-content: center; } .ug.fit-c > .ug-i { flex: 0 0 calc(100% / var(--umc)); max-width: calc(100% / var(--umc)); } }
@media (min-width: 640px) and (max-width: 1023px) { .ug.fit-b { display: flex; justify-content: center; } .ug.fit-b > .ug-i { flex: 0 0 calc(100% / var(--umb)); max-width: calc(100% / var(--umb)); } }
@media (min-width: 1024px) { .ug.fit-a { display: flex; justify-content: center; } .ug.fit-a > .ug-i { flex: 0 0 calc(100% / var(--uma)); max-width: calc(100% / var(--uma)); } }
/* fixed mode: one row of 1/max tiles (render.js jgrid(…, fixed)) */
@media (max-width: 639px) { .jg.fit-c { display: flex; } .jg.fit-c > .jg-i { flex: 0 0 calc(100% / var(--jmc)); max-width: calc(100% / var(--jmc)); } }
@media (min-width: 640px) and (max-width: 1023px) { .jg.fit-b { display: flex; } .jg.fit-b > .jg-i { flex: 0 0 calc(100% / var(--jmb)); max-width: calc(100% / var(--jmb)); } }
@media (min-width: 1024px) { .jg.fit-a { display: flex; } .jg.fit-a > .jg-i { flex: 0 0 calc(100% / var(--jma)); max-width: calc(100% / var(--jma)); } }

@keyframes swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.boss-spk { position: absolute; top: 12px; right: 12px; }
.boss-tier { position: absolute; top: 10px; left: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 750; line-height: 20px; color: var(--t); white-space: nowrap; background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.boss-spk .spk { position: static; display: block; width: 18px; height: 18px; }

/* ---------- raid card (H.raidCard; FINAL2 Round 3 #3): ONE look for every raid Pokémon - picture · name · type icons ·
   CP range · the weather-boosted range after its weather icons · the gold shiny mark. The tier is the band around the
   cards (--t from .tone-* on the group), never card text. Sizes follow the card's own width (container "rc"). ---------- */
.rc { container: rc / inline-size; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0; font: inherit; color: var(--text); text-align: center; background: none; border: 0; }
button.rc { cursor: pointer; border-radius: var(--r); }
.rc-art { position: relative; display: block; flex: none; }
.rc-art > .mon { position: absolute; width: auto; height: auto; }
.rc-spk { position: absolute; z-index: 1; top: 8px; right: 8px; line-height: 0; }
.rc-spk .spk { position: static; display: block; width: 16px; height: 16px; }
.rc-spk-i { display: block; flex: none; line-height: 0; }
.rc-spk-i .spk { position: static; display: block; width: 15px; height: 15px; }
/* plate: the Raids tab tile (a soft glow in the tier colour) */
.rc-plate { width: 100%; aspect-ratio: 10 / 9; background: radial-gradient(closest-side at 50% 55%, color-mix(in srgb, var(--t, var(--accent)) 26%, transparent), color-mix(in srgb, var(--t, var(--accent)) 9%, transparent) 62%, transparent); border-radius: var(--r); }
.rc.is-shadow .rc-plate { background: radial-gradient(closest-side at 50% 55%, color-mix(in srgb, var(--t-shadow) 32%, transparent), color-mix(in srgb, var(--t-shadow) 11%, transparent) 62%, transparent); }
.rc-plate > .mon { inset: 11% 13% 10%; transition: transform .18s ease; }
button.rc:hover .rc-plate > .mon { transform: translateY(-4px); }
/* disc: a medal ringed in the tier colour (unused since the Now lane took the plate) */
.rc-disc { --sz: min(92px, calc(100cqi - 10px)); width: var(--sz); height: var(--sz); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t, var(--accent)) 26%, transparent), transparent 70%), var(--surface-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t, var(--accent)) 42%, transparent); }
.rc-disc > .mon { inset: 14%; }
.rc-disc .rc-spk { top: 1%; right: 1%; }
/* face: the small picture of the row layout */
.rc-face { width: 44px; height: 44px; background: radial-gradient(closest-side, color-mix(in srgb, var(--t, var(--accent)) 22%, transparent), transparent); border-radius: 50%; }
.rc-face > .mon { inset: 6%; }
.rc-face .rc-spk { top: -5px; right: auto; left: -6px; } /* the face's outer corner: the name beside it stays clear */
.rc-face .rc-spk .spk { width: 13px; height: 13px; }
/* words: name, type icons (LeekDuck's, on the type colour if one fails), CP */
.rc-tx { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; min-width: 0; }
.rc-hd { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.rc-nm { max-width: 100%; font-size: 13.5px; font-weight: 720; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
/* type badge = round LeekDuck type icon + the type name in a tinted pill (the Rocket page's badge; owner: same on raid cards) */
.tb { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 3px; font-size: 12.5px; font-weight: 720; color: var(--tx, var(--tc)); white-space: nowrap; background: color-mix(in srgb, var(--tc) 16%, transparent); border-radius: 999px; }
.tb-i { display: block; flex: none; width: 18px; height: 18px; border-radius: 50%; }
.rc-ty { display: flex; flex: none; flex-wrap: nowrap; justify-content: center; gap: 4px; max-width: 100%; }
.tb-io { justify-content: center; width: 34px; padding: 0; }
.rc-row .rc-ty { justify-content: flex-start; }
.rc-row .tb { height: 22px; padding: 0 8px 0 3px; font-size: 12px; gap: 4px; }
.rc-row .tb-i { width: 16px; height: 16px; }
/* cards side by side line up: a stretched card keeps its name on top and its type icons + numbers at the bottom, so a
   name that takes two lines never pushes its numbers out of the row */
.rc-card > .rc-tx, .rc-card .rc-hd { flex: 1 1 auto; }
.rc-card .rc-ty { margin-top: auto; }
/* Raids page (typeNames): name + CP from the top, the named type pills last (they may wrap; the card has no box) */
.rc-card.rc-tl > .rc-tx { justify-content: flex-start; }
.rc-card.rc-tl .rc-hd { flex: 0 0 auto; }
.rc-card.rc-tl .rc-ty { flex-wrap: wrap; margin-top: 4px; }
.rc-t { display: block; width: 18px; height: 18px; background: var(--tc, var(--mute)); border-radius: 50%; }
.rc-t img { display: block; width: 100%; height: 100%; }
/* CP: label | range on two grid columns, so the normal and the boosted range line up */
.rc-cp { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 2px 6px; font-size: 12px; line-height: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-r { display: contents; }
.rc-k { display: inline-flex; justify-self: end; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--mute); }
.rc-cp b { justify-self: start; font-weight: 750; color: var(--text); }
.rc-b b { font-weight: 700; color: var(--text-2); }
.rc-w { display: block; line-height: 0; }
.rc-w img { display: block; width: 16px; height: 16px; filter: invert(1); opacity: .86; }
.rc-bk { font-size: 10px; font-weight: 750; letter-spacing: .02em; color: var(--mute); }
:where(:root[data-theme="light"]) .rc-w img { filter: none; opacity: .78; }
/* a narrow card (several a row on a phone, the rail): the boosted range takes its weather icons on the line above */
@container rc (max-width: 97px) {
  .rc-nm { font-size: 12.5px; }
  .rc-cp { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; }
  .rc-r { display: flex; align-items: center; gap: 4px; }
  .rc-b { flex-direction: column; gap: 1px; }
  .rc-w img { width: 15px; height: 15px; }
}
/* … and below 90 px the "CP" label goes (the range reads as CP next to its boosted range; neighbours keep a gap) */
@container rc (max-width: 89px) { .rc-n .rc-k { display: none; } }
@container rc (max-width: 69px) { .rc-cp { font-size: 11px; } }
/* row layout (tiles, week chips, lists): the picture left, name + types on one line, the ranges under it */
.rc-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
.rc-row .rc-tx { flex: 1 1 0; align-items: flex-start; gap: 3px; }
.rc-row .rc-hd { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.rc-row .rc-nm { font-size: 13.5px; text-wrap: pretty; overflow-wrap: normal; hyphens: manual; }
.rc-row .rc-t { width: 16px; height: 16px; }
.rc-row .rc-cp { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1px 12px; }
.rc-row .rc-r { display: inline-flex; align-items: center; gap: 5px; }
.rc-row .rc-w img { width: 15px; height: 15px; }
/* a narrow row (week board columns): picture + name on the first line, the ranges below at full width */
@container rc (max-width: 150px) {
  .rc-row .rc-tx { display: contents; }
  .rc-row .rc-hd { flex: 1 1 0; min-width: 0; }
  .rc-row .rc-cp { flex: 0 0 100%; flex-direction: column; align-items: flex-start; }
  .rc-row .rc-b { flex-direction: row; }
  .rc-row .rc-x { flex: 0 0 100%; }
}
/* the narrowest rows (a tablet's week board): face + type icons on the first line, the name under it, then the ranges */
@container rc (max-width: 104px) {
  .rc-row .rc-hd { display: contents; }
  .rc-row .rc-nm { order: 1; flex: 0 0 100%; }
  .rc-row .rc-cp { order: 2; }
  .rc-row .rc-x { order: 3; }
}

/* ---------- More: picture cards with one live fact (C's picture language) ---------- */
.more-g { row-gap: 26px; }
.mc { display: flex; flex-direction: column; gap: 3px; height: 100%; color: var(--text); }
.mc:hover { text-decoration: none; }
.mc-art { container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 12px; height: 128px; margin-bottom: 9px; padding: 0 12px; background: radial-gradient(64% 76% at 50% 56%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 76%), radial-gradient(90% 60% at 50% 0%, var(--plate-hi), transparent 70%), var(--plate); border-radius: var(--r); transition: transform .18s ease, box-shadow .18s ease; }
.mc:hover .mc-art { transform: translateY(-3px); box-shadow: var(--lift); }
.mc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.mc-t { font-size: 15.5px; font-weight: 720; letter-spacing: -.01em; }
.mc-t::after { content: " →"; content: " →" / ""; color: var(--mute); } /* decorative: no alt text (the first value = fallback) */
.mc-f { font-size: 13px; line-height: 1.4; color: var(--mute); text-wrap: balance; }
/* face size from the card's own width (cqi = 1% of the art box's content width): the art always fits
   with ≥ 12 px to spare; the egg card shows the egg + 2 faces when the card is narrow */
.mc-art > * { --fs: min(64px, calc((100cqi - 8px) / 2.56)); }
.mc-art:has(> .egg) > * { --fs: min(64px, calc((100cqi - 20px) / 3.3)); }
@container (max-width: 200px) {
  .mc-art:has(> .egg) > * { --fs: min(60px, calc((100cqi - 20px) / 2.52)); }
  .mc-art .egg + .faces .face:nth-child(3) { display: none; }
}
.mc-art .faces .face { width: var(--fs); height: var(--fs); padding: calc(var(--fs) * .09); }
.mc-art .faces .face + .face { margin-left: calc(var(--fs) * -.22); }
.mc-art .egg { flex: none; width: calc(var(--fs) * .72); height: auto; aspect-ratio: 40 / 48; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.mc-art .glyph { flex: none; width: min(46px, 22cqi); max-width: none; --c: var(--accent); }
.mc-art .cal { flex: none; width: min(54px, 26cqi); height: auto; aspect-ratio: 1; }
.big { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-art .big { font-size: min(34px, 18cqi); }
.big.gold { color: var(--gold); }
.bigp { display: inline-flex; align-items: baseline; gap: 8px; }
.big-k { font-size: 16px; font-weight: 750; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-art .big-k { font-size: min(16px, 9cqi); }
.mc-swipe .mc-art { background: radial-gradient(64% 76% at 50% 56%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 76%), var(--plate); }
.mc-rocket .mc-art { background: radial-gradient(64% 76% at 50% 56%, rgba(130, 70, 210, .22), transparent 74%), var(--plate); }
.mc[aria-current="page"] .mc-art { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- reference pages ---------- */
/* launcher row: the 8 pages as compact picture pills (faces, egg, gold price, big number - the language
   of More and the ☰ cards), one row; it scrolls sideways where it does not fit (≤ 56 px tall) */
.launch-top { margin-top: 14px; }
.launch { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut); }
.launch::-webkit-scrollbar { display: none; }
.launch-l { display: flex; gap: 6px; width: max-content; margin: 0 auto; padding: 0; list-style: none; }
.lp { display: flex; align-items: center; gap: 8px; height: 50px; padding: 4px 14px 4px 4px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; }
.lp:hover { color: var(--text); text-decoration: none; border-color: var(--hair-2); }
.lp[aria-current="page"] { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lp-art { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, var(--plate-hi), transparent 72%), var(--plate); border-radius: 12px; }
.lp-art .faces .face { width: 24px; height: 24px; padding: 1px; }
.lp-art .faces .face + .face { margin-left: -10px; }
.lp-art .faces .face:nth-child(n+3), .lp-art .egg + .faces, .lp-art .glyph + .big, .lp-art .cal + .big, .lp-art .big-k { display: none; }
.lp-art .egg { width: 22px; height: 26px; }
.lp-art .egg-k { display: none; }
.lp-art .glyph { width: 24px; max-width: none; --c: var(--accent); }
.lp-art .cal { width: 28px; height: 28px; }
.lp-art .big { font-size: 11.5px; letter-spacing: -.02em; }
.page-h { margin: 30px 0 0; }
.page-t { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 780; line-height: 1.08; letter-spacing: -.035em; }
.page-m { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
.page-h .ics { display: inline-flex; margin-top: 14px; }
.jump { margin-top: 18px; }
.jump ul { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
@media (max-width: 639px) { .jump ul { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } }
.jump a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; background: var(--surface); border: 1px solid var(--hair); border-radius: 999px; }
.jump a:hover { color: var(--text); text-decoration: none; border-color: var(--hair-2); }
.page-foot { margin: 40px 0 0; font-size: 14px; color: var(--mute); }
.page-foot a { padding: 11px 0; }
.band { margin-top: 44px; }
.sub-h { margin: 18px 0 12px; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fold > summary, .mo > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker, .mo > summary::-webkit-details-marker { display: none; }
.src-fold { margin-top: 44px; }
.src-fold > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13px; font-weight: 650; color: var(--mute); }
.src-fold > summary::after { content: "▾"; content: "▾" / ""; font-size: 11px; }
.src-fold[open] > summary::after { transform: rotate(180deg); }
.src-fold .src { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font-size: 12.5px; }
.src a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.ver { font-size: 12px; font-weight: 500; color: var(--mute); }
.n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; font-weight: 750; color: var(--text-2); background: var(--surface-2); border-radius: 999px; }

.tone-five { --t: var(--t-five); } .tone-mega { --t: var(--t-mega); } .tone-shadow { --t: var(--t-shadow); } .tone-three { --t: var(--t-three); } .tone-one { --t: var(--t-one); }
.band-five { --t: var(--t-five); } .band-mega { --t: var(--t-mega); } .band-shadow { --t: var(--t-shadow); } .band-three { --t: var(--t-three); } .band-one { --t: var(--t-one); }
.band > .sh .sh-t::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 10px 2px 0; background: var(--t, var(--accent)); border-radius: 50%; vertical-align: middle; }
.types { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; }
.t { padding: 1px 8px; font-size: 11px; font-style: normal; font-weight: 700; text-transform: capitalize; color: var(--tx, var(--tc, var(--mute))); background: color-mix(in srgb, var(--tc, var(--mute)) 15%, transparent); border-radius: 999px; }
.t-normal { --tc: #a3a37c; } .t-fire { --tc: #f08a43; } .t-water { --tc: #5f93f0; } .t-electric { --tc: #d9b51e; } .t-grass { --tc: #62b346; }
.t-ice { --tc: #4cbcb7; } .t-fighting { --tc: #d2493f; } .t-poison { --tc: #b04fae; } .t-ground { --tc: #c9a046; } .t-flying { --tc: #8f7ae8; }
.t-psychic { --tc: #f0607f; } .t-bug { --tc: #95a51f; } .t-rock { --tc: #ad9a3a; } .t-ghost { --tc: #8065a8; } .t-dragon { --tc: #7c4ff5; }
.t-dark { --tc: #8b7562; } .t-steel { --tc: #8d9ab0; } .t-fairy { --tc: #e08ab8; }
/* chip text: dark theme lifts the darkest hues; light theme darkens all to AA (≥ 4.6:1 on their tint) */
.t-fighting { --tx: #de7972; } .t-poison { --tx: #c57ec4; } .t-flying { --tx: #9c89eb; } .t-ghost { --tx: #a28ebf; } .t-dragon { --tx: #a586f8; } .t-dark { --tx: #a49384; }
:where(:root[data-theme="light"]) .t-normal { --tx: #5b5b46; } :where(:root[data-theme="light"]) .t-fire { --tx: #8f4d1f; } :where(:root[data-theme="light"]) .t-water { --tx: #2f5394; }
:where(:root[data-theme="light"]) .t-electric { --tx: #6c5a0f; } :where(:root[data-theme="light"]) .t-grass { --tx: #376427; } :where(:root[data-theme="light"]) .t-ice { --tx: #23615f; }
:where(:root[data-theme="light"]) .t-fighting { --tx: #9b362e; } :where(:root[data-theme="light"]) .t-poison { --tx: #863c84; } :where(:root[data-theme="light"]) .t-ground { --tx: #6d5726; }
:where(:root[data-theme="light"]) .t-flying { --tx: #5d5097; } :where(:root[data-theme="light"]) .t-psychic { --tx: #993550; } :where(:root[data-theme="light"]) .t-bug { --tx: #565f12; }
:where(:root[data-theme="light"]) .t-rock { --tx: #645922; } :where(:root[data-theme="light"]) .t-ghost { --tx: #644f84; } :where(:root[data-theme="light"]) .t-dragon { --tx: #5d3bc0; }
:where(:root[data-theme="light"]) .t-dark { --tx: #675648; } :where(:root[data-theme="light"]) .t-steel { --tx: #545c69; } :where(:root[data-theme="light"]) .t-fairy { --tx: #8a3f68; }
.wx-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pr-n { margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--mute); }
.pr { display: inline-flex; flex-direction: column; align-items: flex-start; }
.pr-u { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.pr-u.is-free { color: var(--mute); }
.pr-k { font-size: 13px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr-u:empty { display: none; }
.pr-u:empty + .pr-k { font-size: 22px; font-weight: 800; color: var(--gold); }

/* cheat sheet: big-number tiles */
.jg.nums { row-gap: 0; } /* beats the phone .jg row-gap: the tiles carry their own 16 px bottom padding */
.nums > .jg-i { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding-bottom: 16px; }
.num { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 6px; height: 100%; padding: 14px 16px 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; }
.num-l { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--mute); }
.num-v { align-self: start; margin: 0; font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.num-v.s { font-size: 23px; letter-spacing: -.02em; }
.num-v.txt { font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.num-c { display: flex; flex-wrap: wrap; align-items: center; align-self: start; gap: 4px 8px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.num-c:empty { display: none; }
/* shiny odds print plain; the basis is a tooltip on the number itself (no badge, no extra text) */
.num-v .tipped { font: inherit; letter-spacing: inherit; }
/* measured wild rates (shinyrates.com, last 24 h) under the curated shiny tiles */
.nums-m { margin-top: 10px; }
.nums-m .sub-h { margin: 0 0 12px; }
.nums-src { margin: 0; font-size: 12px; color: var(--mute); }
.nums-src a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }

/* updates: changelog rail + image-first posts */
.rail { position: relative; margin: 0; padding: 0; list-style: none; }
.rail-d { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; }
.rail-t { position: relative; margin: 0; padding: 14px 0 0 22px; font-size: 14px; font-weight: 750; }
.rail-t span { display: block; font-size: 12px; font-weight: 600; color: var(--mute); }
.rail-t::before { content: ""; position: absolute; left: 3px; top: 0; bottom: -1px; width: 1px; background: var(--hair-2); }
.rail-t::after { content: ""; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); }
.rail-l { margin: 0; padding: 0; list-style: none; }
.chg { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.chg-art { flex: none; }
.chg-art { width: 52px; height: 52px; border-radius: 14px; }
.chg-art .mon-md { width: 70%; height: 70%; }
.chg-art.pn2 .mon-md { width: 52%; height: 52%; }
.chg-art > .glyph { width: 56%; }
.chg-art .balls { width: 60%; }
.chg-art .balls .ball { width: 100%; max-width: none; }
.rail-d:first-child .chg:first-child { border-top: 0; }
.chg .tag { display: inline-block; margin-right: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.4; color: var(--text-2); white-space: nowrap; vertical-align: 1px; background: var(--surface-2); border-radius: 6px; }
.chg-b { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }
.chg-t { margin-right: 6px; }
.chg-s { margin-left: 8px; font-size: 12.5px; white-space: nowrap; }
.chg-s a { margin-right: 8px; color: var(--mute); }
.chg .est { margin-left: 6px; }
.posts { row-gap: 22px; }
.post { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.post:hover { text-decoration: none; }
.post .plate { height: 128px; margin-bottom: 6px; }
.post-t { font-size: 14.5px; font-weight: 680; line-height: 1.35; text-wrap: balance; }
.post-d { font-size: 12.5px; color: var(--mute); }

/* calendar: this week + months collapsed into sprite stacks */
.month { margin-top: 14px; }
.month:first-of-type { margin-top: 30px; }
.mo { border-top: 1px solid var(--hair); }
.month:last-child .mo { border-bottom: 1px solid var(--hair); }
.mo-s { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.mo-t { flex: none; min-width: 150px; font-size: 22px; }
.mo-n { flex: none; font-size: 13.5px; font-weight: 600; color: var(--mute); }
.mo-faces { display: flex; flex: 1; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; }
.mo-faces .face { width: 44px; height: 44px; margin-left: -10px; padding: 4px; background: var(--plate); border: 2px solid var(--bg); border-radius: 50%; }
.mo-faces .face:first-child { margin-left: 0; }
.face-more { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.mo-chev { flex: none; width: 10px; height: 10px; margin: 0 6px 0 4px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.mo[open] .mo-chev { transform: rotate(225deg) translateY(-2px); }
.cal-l { margin: 0 0 18px; padding: 0; list-style: none; columns: 2 380px; column-gap: 32px; }
.cal-l > li { break-inside: avoid; scroll-margin-top: 80px; }
.cal-l > li.is-target .cal-r { box-shadow: inset 3px 0 0 var(--accent); }
.cal-r { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 0 8px 8px; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--hair); }
.cal-r .plate { width: 48px; height: 48px; border-radius: 13px; }
.cal-tx { display: flex; flex-direction: column; min-width: 0; }
.cal-t { font-size: 14.5px; font-weight: 650; line-height: 1.3; text-wrap: balance; }
.cal-f { display: none; }
.cal-m { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cal-d { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-k { flex: 1 1 auto; white-space: normal; }
/* the calendar's head tools: All · Raids · Events (?show=, app.js) + the .ics button; a filter that leaves nothing: one line */
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }
.page-h .cal-tools .ics { margin-top: 0; }
.cal-none { margin-top: 30px; }
@media (max-width: 639px) { .cal-seg { flex: 1 1 100%; } .cal-seg .seg-b { flex: 1 1 0; } }
.ics { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 650; color: var(--text); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; }
.ics:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }

/* ---------- details popup: just the card ---------- */
.dlg { width: min(680px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px - var(--safe-t)); padding: 0; overflow: visible; color: var(--text); background: transparent; border: 0; }
.dlg::backdrop { background: rgba(5, 7, 11, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dlg-body { max-height: calc(100dvh - 48px - var(--safe-t)); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--lift-lg); }
.dlg-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--text); cursor: pointer; background: var(--surface-2); border: 0; border-radius: 50%; }
.dlg-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dlg-x:focus:not(:focus-visible) { outline: none; }
.dlg:focus, .sheet:focus { outline: none; }
.nw { white-space: nowrap; }

/* ---------- search results ---------- */
.res { padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 22px; box-shadow: var(--lift-lg); }
.find-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.find-try { width: 100%; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.res-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13.5px; font-weight: 650; color: var(--mute); }
.res-close { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 40px; margin-left: auto; padding: 0 14px; font-size: 13px; font-weight: 650; cursor: pointer; background: var(--surface-2); border: 0; border-radius: 999px; }
.res-close kbd { font: 600 11px var(--mono); color: var(--mute); }
@media (hover: none) { .res-close kbd { display: none; } }
.res-sec + .res-sec { margin-top: 14px; }
.res-t { margin: 12px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.res-t span { margin-left: 4px; color: var(--text-2); }
.pks { display: grid; gap: 10px; }
.pks > .res-extra { gap: 10px; }
.pk { padding: 12px 14px 12px; background: var(--surface-2); border-radius: 18px; }
.pk-h { display: flex; align-items: center; gap: 12px; }
.pk-h .mon-xl { width: 56px; height: 56px; padding: 4px; background: var(--surface); border-radius: 50%; }
.pk-h h3 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.pk-dx { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; font-size: 13px; font-weight: 650; white-space: nowrap; } /* its Pokédex page */
.pk-g { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 10px; }
.pk-l { padding-top: 7px; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pk-l.is-now { color: var(--live); }
.pk-l.is-next { color: var(--accent); }
.hits { display: grid; gap: 2px; }
.hit { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; column-gap: 10px; width: 100%; padding: 7px 10px; font-size: 13.5px; line-height: 1.35; color: var(--text); text-align: left; cursor: pointer; background: var(--surface); border: 0; border-radius: 10px; }
.hit:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.hit b { grid-row: span 2; font-size: 12px; font-weight: 750; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hit b.is-live { color: var(--live); }
.hit span { min-width: 0; font-weight: 600; }
.hit small { grid-column: 2; font-size: 12px; color: var(--mute); }
.pk-none { margin: 10px 0 0 74px; font-size: 13px; color: var(--mute); }
.res-more { min-height: 36px; margin-top: 6px; padding: 6px 14px; font-size: 13px; font-weight: 650; color: var(--accent); cursor: pointer; background: none; border: 1px solid var(--hair-2); border-radius: 999px; }
.res-extra { display: grid; gap: 2px; }
.srows, .oths { display: grid; gap: 2px; }
.srow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 6px 10px 6px 6px; color: var(--text); text-align: left; cursor: pointer; background: var(--surface-2); border: 0; border-radius: 12px; }
.srow:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.srow .plate { width: 40px; height: 40px; border-radius: 10px; }
.srow-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.srow-t { font-size: 14px; font-weight: 650; line-height: 1.3; }
.srow-w { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.srow-d { font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.srow-d .is-live { color: var(--live); }
.oth { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; font-size: 13.5px; color: var(--text); background: var(--surface-2); border-radius: 12px; }
.oth:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.oth-tag { justify-self: start; padding: 1px 7px; font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; background: var(--surface); border-radius: 6px; }
.oth-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oth b { font-weight: 750; color: var(--gold); white-space: nowrap; }
.oth b i { font-style: normal; color: var(--mute); }

/* ---------- ☰ sheet (modal dialog; [data-scrim] dims the page behind it) ---------- */
.sheet { inset: 0 0 auto 0; width: 100%; max-width: none; height: auto; max-height: calc(100dvh - 44px); margin: 0; padding: var(--safe-t) 0 0; overflow: hidden; color: var(--text); background: var(--bg); border: 0; border-radius: 0 0 24px 24px; box-shadow: var(--lift-lg); }
.sheet[open] { display: flex; flex-direction: column; animation: drop .22s ease; }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet::backdrop { background: transparent; }
.sheet-top { flex: none; border-bottom: 1px solid var(--hair); }
.sheet-top .tools { margin-left: auto; }
.sheet .brand:focus:not(:focus-visible) { outline: none; }
.sheet-body { flex: 1 1 auto; min-height: 0; padding-top: 6px; padding-bottom: 20px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-h { margin: 14px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
/* chapter tiles with date numerals (B) */
/* one tile per main-page chapter (render.js sheetChapters; --n = tile count, class n<count>) */
.sheet-chap { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
.sc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 68px; padding: 8px 4px; color: var(--text); background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.sc:hover { text-decoration: none; border-color: var(--hair-2); }
.sc.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-n { display: flex; align-items: center; justify-content: center; height: 26px; }
.sc-n b { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-n .live-dot { width: 6px; height: 6px; }
.sc-n .face { width: 24px; height: 24px; padding: 1px; }
.sc-n .face + .face { margin-left: -8px; }
.sc-n .glyph { width: 24px; }
.sc-t { font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
/* page cards, compact: picture left, words right */
.sheet-g { row-gap: 8px; --g: 8px; }
.sheet .sheet-g { row-gap: 10px; } /* the shared grid sets 18px; the ☰ page list is tighter (owner) */
.sheet-g .mc { flex-direction: row; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; }
.sheet-g .mc-art { flex: none; flex-direction: column; gap: 0; width: 60px; height: 60px; margin: 0; padding: 0; border-radius: 12px; }
.sheet-g .mc:hover .mc-art { transform: none; box-shadow: none; }
.sheet-g .mc-art .faces .face { width: 28px; height: 28px; padding: 2px; }
.sheet-g .mc-art .faces .face + .face { margin-left: -12px; }
.sheet-g .mc-art .glyph { width: 30px; }
.sheet-g .mc-art .egg { width: 26px; height: 31px; }
.sheet-g .mc-art .egg-k { display: none; }
.sheet-g .mc-art .cal { width: 34px; height: 34px; }
.sheet-g .mc-art .egg + .faces, .sheet-g .mc-art .glyph + .big, .sheet-g .mc-art .cal + .big { display: none; }
.sheet-g .big { font-size: 15px; }
.sheet-g .bigp { flex-direction: column; align-items: center; gap: 1px; }
.sheet-g .big-k { font-size: 11px; }
.sheet-g .mc-t { font-size: 14px; }
.sheet-g .mc-t::after { content: none; }
.sheet-g .mc-f { font-size: 12px; white-space: nowrap; }
.sheet-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* "Add to home screen" (install part) + Theme */
/* Theme: its own row under the pills, at the row's end from 1024 px */
.thm-w { display: flex; flex: 1 1 100%; align-items: center; gap: 12px; }
.thm-l { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 1024px) { .thm-w { flex: none; margin-left: auto; } }

/* ---------- theme switch (☰ + footer): Dark · Light · Auto ----------
   Three radios [data-theme-pick] (native arrow keys) in the Research switch's look (parts/tabs.research.css .rs-sw),
   each covering its whole segment so its focus ring is the segment's. src/launch.js applies + saves the choice. */
.thm { display: flex; flex: none; gap: 2px; min-width: 0; margin: 0; padding: 3px; background: var(--surface-2); border: 0; border-radius: 12px; }
.thm-b { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; cursor: pointer; border-radius: 9px; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.thm-b:hover { color: var(--text); }
.thm-b input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; background: none; border: 0; border-radius: inherit; -webkit-appearance: none; appearance: none; }
.thm-b input:focus-visible { outline-offset: 1px; }
.thm-b:has(input:checked) { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px var(--hair); }
.thm-i { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thm-i .thm-f { fill: currentColor; stroke: none; }
/* the footer's: compact, quieter */
.thm-s { border-radius: 11px; }
.thm-s .thm-b { gap: 5px; height: 30px; padding: 0 10px; font-size: 12.5px; color: var(--mute); border-radius: 8px; }
.thm-s .thm-b:hover, .thm-s .thm-b:has(input:checked) { color: var(--text); }
.thm-s .thm-i { width: 14px; height: 14px; }

/* ---------- footer ---------- */
.foot { padding: 30px 0 48px; font-size: 13px; color: var(--mute); border-top: 1px solid var(--hair); }
.foot-in > p { max-width: 760px; margin: 0 0 8px; }
.foot a { color: var(--text-2); }
.foot-in > p a { padding: 12px 0; }
.foot-b { display: flex; align-items: center; gap: 16px; margin-bottom: 14px !important; }
.foot-b .brand { min-height: 40px; font-size: 15px; }
.foot-b .mark, .foot-b .mark img { width: 26px; height: 26px; border-radius: 8px; }
.foot-b time { font-size: 12.5px; }
/* the theme switch: last in the footer on phones; from 640 px at the end of the brand row (centred on its 46 px). A grid,
   not position: a positioned footer would change how Chrome rasterises its text. */
.foot .thm-s { width: fit-content; margin-top: 18px; }
@media (min-width: 640px) {
  .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .foot-in > * { grid-column: 1 / -1; }
  .foot-in > .foot-b { grid-column: 1; grid-row: 1; }
  .foot .thm-s { grid-column: 2; grid-row: 1; align-self: start; margin: 5px 0 0; }
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 0 12px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; white-space: nowrap; }

@media (max-width: 899px) {
  .cal-l { columns: 1; }
}

/* ---------- phones ---------- */
/* the launcher row scrolls sideways wherever it does not fit (phones up to ≈ 1030 px): a soft edge on the side(s) with
   more pills (app.js sets is-l / is-r from the real overflow + scroll position), never a hard cut */
.launch.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.launch.is-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.launch.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (max-width: 639px) {
  :root { --gut: 16px; --gap-sec: 44px; --bar-h: 56px; }
  body { font-size: 14.5px; }
  .brand { gap: 9px; font-size: 16px; }
  .mark, .mark img { width: 28px; height: 28px; border-radius: 8px; }
  .crumb { margin-left: 8px; gap: 8px; font-size: 13.5px; }
  .hero { padding-top: 20px; }
  .slogan { margin-bottom: 16px; }
  .find-box { height: 52px; padding-left: 16px; border-radius: 16px; }
  .chips { height: 40px; margin-top: 12px; }
  .sug { height: 40px; }
  .sh { flex-direction: column; align-items: stretch; gap: 10px; }
  .sh-a { gap: 10px; }
  .sh-t { font-size: 22px; }
  .sh-m { font-size: 13px; }
  .sh-x { margin-left: 0; }
  .sh-x .seg { flex: 1; }
  .sh-x .seg-b { flex: 1; }
  .stage > .sh:only-child { flex-direction: row; align-items: baseline; }
  .seg-b { height: 40px; padding: 0 10px; font-size: 12.5px; }
  .boss-tier { top: 7px; left: 7px; padding: 0 7px; font-size: 10.5px; line-height: 18px; }
  .boss-spk { top: 8px; right: 8px; }
  .boss-spk .spk { width: 14px; height: 14px; }
  .jg { --g: 12px; row-gap: 18px; }
  .mc-art { height: 104px; gap: 8px; }
  .mc-t { font-size: 14.5px; }
  .mc-f { font-size: 12px; }
  .launch-top { margin-top: 10px; }
  .page-h { margin-top: 18px; }
  .jump a { height: 40px; }
  .rail-d { display: block; }
  .rail-t { padding: 16px 0 6px 0; }
  .rail-t::before, .rail-t::after { display: none; }
  .rail-t span { display: inline; margin-left: 6px; }
  .chg { align-items: flex-start; gap: 12px; }
  .chg-art { width: 44px; height: 44px; border-radius: 12px; }
  .chg .tag { display: table; margin: 0 0 4px; }
  .rail-d:first-child .chg:first-child { border-top: 1px solid var(--hair); }
  .chg-s { display: inline; margin: 0; white-space: normal; }
  .chg-s a { display: inline-block; padding: 11px 0; margin: -11px 10px -11px 0; }
  .src a { min-height: 40px; }
  .mo-s { gap: 10px; min-height: 68px; }
  .mo-t { min-width: 0; font-size: 19px; }
  .mo-faces .face { width: 36px; height: 36px; margin-left: -12px; }
  .mo-faces .face:nth-child(n+5) { display: none; }
  .pr-u { font-size: 24px; }
  .num-v { font-size: 26px; }
  .num-v.s { font-size: 19px; }
  .num-v.txt { font-size: 14px; }
  /* the dialogs: a bottom drawer here (drawer.css) */
  body.find-float .find { top: 8px; width: calc(100% - 16px); }
  .res { padding: 12px 12px 14px; }
  .pk { padding: 10px 12px; }
  .pk-h .mon-xl { width: 46px; height: 46px; }
  .pk-h h3 { font-size: 17px; }
  .pk-g { grid-template-columns: 1fr; gap: 4px; margin-top: 8px; }
  .pk-l { padding: 0; }
  .pk-none { margin-left: 0; }
  .hit { grid-template-columns: 58px minmax(0, 1fr); min-height: 40px; }
  .srow { min-height: 52px; }

  .oth { grid-template-columns: 64px minmax(0, 1fr); }
  .oth-t { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .oth b { grid-column: 2; }
  .res-more { min-height: 40px; }
  .sheet-chap { gap: 4px; }
  .sheet-g .mc { gap: 10px; padding: 5px 8px 5px 5px; }
  .sheet-g .mc-art { width: 52px; height: 52px; }
  .sheet-g .mc-art .faces .face { width: 24px; height: 24px; padding: 1px; }
  .sheet-g .mc-art .faces .face + .face { margin-left: -8px; }
  .sheet-g .mc-art .faces .face:nth-child(n+3) { display: none; }
  .sheet-g .big { font-size: 13.5px; }
  .sheet-chap { gap: 6px; }
  .sc { min-height: 64px; padding: 8px 6px; }
  .sc-n b { font-size: 17px; }
  .sc-t { font-size: 11.5px; }
  .seg-b:not(.wk-tab) { height: 40px; }
  .foot-nav a { min-height: 40px; }
  /* theme: the ☰ switch spans the row (equal thirds), both take finger-sized segments */
  .thm-w .thm { flex: 1 1 auto; }
  .thm-w .thm-b { height: 40px; padding: 0 8px; }
  .thm-s .thm-b { height: 36px; }
}
@media (max-width: 399px) {
  /* calendar rows: the category goes under the date instead of being cut */
  .cal-m { flex-direction: column; align-items: flex-start; gap: 0; }
  /* one size step down: every chapter label keeps ≥ 6 px to its tile border */
  .sc-n b { font-size: 16px; }
  .sc-t { font-size: 11px; }
}
@media (max-width: 379px) {
  /* small phones: 5 chapter tiles no longer fit one row with room → 2 + 3 (Raids, Today big) */
  .sheet-chap.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sheet-chap.n5 > .sc { grid-column: span 2; }
  .sheet-chap.n5 > .sc:nth-child(-n+2) { grid-column: span 3; }
  .sheet-chap.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips { gap: 6px; }
  .sug { gap: 5px; padding: 0 11px 0 5px; font-size: 13px; }
  .sug .sug-i { width: 24px; height: 24px; }
}
@media (max-width: 359px) {
  .brand { font-size: 15px; }
  .seg-b { padding: 0 8px; }
}
/* landscape phones: the sheet scrolls, never overflows; the bottom strip stays tappable */
@media (max-height: 480px) {
  .sheet-chap { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}