/* parts/tabs.css - the tabbed page /raids/ /eggs/ /research/ /rocket/ (scope: .pg-tabs). Linked only there.
   A's tokens throughout. Widths come from the page's own width (container "tabs-panel" on .tp), in the six ranges
   parts/tabs.js plans rows for: r0 < 340 · r1 340-439 · r2 440-699 · r3 700-939 · r4 940-1099 · r5 ≥ 1100 px.
   Rows are fixed by line-break markers (.br.r<k>, shown only in their range), never by greedy wrapping. */
/* parts/tabs.research.css - the Research tab (scope .pg-tabs; @imported by tabs.css). Renderer: parts/tabs.research.js.
   LeekDuck's categories in their colours, tuned per theme in JS for AA text (--rc-d dark, --rc-l light, --rk = LeekDuck's
   raw colour) and set on each .rs-cat:
     --rc   text-safe category colour (titles, the Event tag, quantity chips)   --rc-on  text on a --rc fill
     --rd   decor colour (band bar, card + bubble tints): the tuned colour in dark, LeekDuck's raw colour in light
   Rows: the same per-range line-break markers + container "tabs-panel" ranges as tabs.css (r0 < 340 · … · r5 ≥ 1100). */

/* ---------- head: h1 + meta · the switch + filter (beside the title when there is room, else under it) ---------- */
.pg-tabs .rs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.pg-tabs .rs-ht { flex: 1 1 auto; min-width: 0; }
.pg-tabs .rs-tools { display: flex; flex: 1 1 560px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; min-width: 0; }

/* Less items | All rewards - two radios (native arrow keys), each covering its whole segment so its focus ring is the segment's */
.pg-tabs .rs-sw { display: flex; flex: none; gap: 2px; min-width: 0; margin: 0; padding: 3px; background: var(--surface-2); border: 0; border-radius: 14px; }
.pg-tabs .rs-sb { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 680; color: var(--text-2); white-space: nowrap; cursor: pointer; border-radius: 11px; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.pg-tabs .rs-sb:hover { color: var(--text); }
.pg-tabs .rs-sb 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; }
.pg-tabs .rs-sb input:focus-visible { outline-offset: 1px; }
.pg-tabs .rs-sb: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); }

.pg-tabs .rs-f { position: relative; display: block; flex: 1 1 240px; max-width: 380px; min-width: 0; }
.pg-tabs .rs-fi { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.pg-tabs .rs-q { width: 100%; height: 46px; padding: 0 14px 0 42px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 14px; -webkit-appearance: none; appearance: none; }
.pg-tabs .rs-q::placeholder { color: var(--mute); opacity: 1; }
.pg-tabs .rs-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* the controls under the title (panels < 940 px): one full row, the filter takes what the switch leaves */
@container tabs-panel (max-width: 939.98px) {
  .pg-tabs .rs-tools { flex: 1 1 100%; justify-content: flex-start; }
  .pg-tabs .rs-f { flex: 1 1 240px; max-width: none; }
}
/* phones: switch and filter stacked, the switch's halves equal */
@container tabs-panel (max-width: 699.98px) {
  .pg-tabs .rs-tools { flex: 1 1 100%; }
  .pg-tabs .rs-sw, .pg-tabs .rs-f { flex: 1 1 100%; max-width: none; }
}

/* ---------- one category: a tinted band in its colour, then its task cards ---------- */
.pg-tabs .rs-list { margin-top: 24px; }
.pg-tabs .rs-cat { --rc: var(--rc-d, var(--accent)); --rd: var(--rc); --rc-on: var(--bg); position: relative; }
:where(:root[data-theme="light"]) .pg-tabs .rs-cat { --rc: var(--rc-l, var(--accent)); --rd: var(--rk, var(--rc)); --rc-on: #fff; } /* light theme (PARTS.md §4) */
.pg-tabs .rs-cat + .rs-cat { margin-top: 30px; }
.pg-tabs .rs-anchor { position: absolute; top: 0; }
.pg-tabs .rs-ch { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 46px; margin: 0 0 12px; padding: 9px 16px 9px 22px; background: color-mix(in srgb, var(--rd) 14%, var(--surface)); border-radius: 14px; }
.pg-tabs .rs-ch::before { content: ""; position: absolute; top: 11px; bottom: 11px; left: 9px; width: 4px; background: var(--rd); border-radius: 2px; }
.pg-tabs .rs-cht { min-width: 0; margin: 0; font-size: 16.5px; font-weight: 760; line-height: 1.25; letter-spacing: -.012em; color: var(--rc); text-wrap: balance; }
.pg-tabs .rs-evb { display: inline; padding: 0; font: inherit; color: inherit; text-align: left; letter-spacing: inherit; cursor: pointer; background: none; border: 0; border-radius: 6px; }
.pg-tabs .rs-evb:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pg-tabs .rs-evb .chev { display: inline-block; width: 16px; height: 16px; margin-left: 2px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-tabs .rs-tag { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 8px; font-size: 11px; font-weight: 780; letter-spacing: .02em; color: var(--rc-on); background: var(--rc); border-radius: 999px; }
.pg-tabs .rs-chw { flex: none; font-size: 13px; font-weight: 620; color: var(--text-2); white-space: nowrap; }
.pg-tabs .rs-chn { flex: none; margin-left: auto; font-size: 13px; font-weight: 720; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- task cards: each as wide as its rewards (bento rows), the rewards as one lane ---------- */
.pg-tabs .rs-bento { --tabs-g: 12px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--tabs-g); margin-bottom: -12px; }
.pg-tabs .rs-card { --tabs-l: var(--tabs-l0); display: flex; flex: var(--tabs-u) 1 0px; flex-direction: column; gap: 12px; min-width: 0; margin: 0 0 12px; padding: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--rd) 6%, transparent), transparent 56px), var(--surface); border: 1px solid color-mix(in srgb, var(--rd) 22%, var(--hair)); border-radius: var(--r); }
@container tabs-panel (min-width: 340px) { .pg-tabs .rs-card { --tabs-l: var(--tabs-l1); } }
@container tabs-panel (min-width: 440px) { .pg-tabs .rs-card { --tabs-l: var(--tabs-l2); } }
@container tabs-panel (min-width: 700px) { .pg-tabs .rs-card { --tabs-l: var(--tabs-l3); } .pg-tabs .rs-t { min-height: 2.6em; } }
@container tabs-panel (min-width: 940px) { .pg-tabs .rs-card { --tabs-l: var(--tabs-l4); } }
@container tabs-panel (min-width: 1100px) { .pg-tabs .rs-card { --tabs-l: var(--tabs-l5); } }
@container tabs-panel (max-width: 439.98px) { .pg-tabs .rs-card { padding: 13px 14px 12px; } }
.pg-tabs .rs-t { margin: 0; font-size: 14.5px; font-weight: 680; line-height: 1.3; letter-spacing: -.005em; text-wrap: pretty; }
.pg-tabs .rs-rw { display: flex; flex-wrap: wrap; justify-content: center; margin: auto 0 -8px; }

/* one reward = 1/L of the card (L = the card's slots, or its longest line when it wraps), at most 104 px: lanes line up in a
   row, a stretched or short lane is centred (rows always fill: no card max-width, so no hollow beside a lone card) */
.pg-tabs .rs-c { display: flex; flex: 0 0 min(calc(100% / var(--tabs-l) - .1px), 104px); flex-direction: column; align-items: center; gap: 3px; min-width: 0; margin-bottom: 8px; text-align: center; }
/* the bubble: the picture on a disc tinted in the category colour; quantity chip bottom right, shiny mark top right */
.pg-tabs .rs-b { position: relative; display: grid; flex: none; place-items: center; width: 50px; height: 50px; margin-bottom: 3px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rd) 24%, transparent), color-mix(in srgb, var(--rd) 11%, transparent) 74%); border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 32%, transparent); }
.pg-tabs .rs-b .mon { width: 42px; height: 42px; }
.pg-tabs .rs-item .rs-b .mon, .pg-tabs .rs-res .rs-b .mon { width: 34px; height: 34px; }
.pg-tabs .rs-spk { position: absolute; top: -3px; right: -4px; display: block; line-height: 0; }
.pg-tabs .rs-spk .spk { position: static; width: 15px; height: 15px; }
.pg-tabs .rs-qty { position: absolute; right: -9px; bottom: -5px; min-width: 22px; padding: 0 5px; font-size: 10.5px; font-weight: 780; line-height: 17px; color: var(--rc-on); text-align: center; white-space: nowrap; background: var(--rc); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); font-variant-numeric: tabular-nums; }
.pg-tabs .rs-cn { max-width: 100%; padding: 0 2px; font-size: 11px; font-weight: 620; line-height: 1.2; color: var(--text-2); hyphens: auto; overflow-wrap: break-word; }
.pg-tabs .rs-cp { max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--mute); white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pg-tabs .rs-cp .rs-k { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }

/* empty states (filter, Less items) */
.pg-tabs .rs-none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pg-tabs .rs-more { height: 34px; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 680; color: var(--text); cursor: pointer; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: 999px; }
.pg-tabs .rs-more:hover { border-color: var(--accent); }

.pg-tabs .tp { container: tabs-panel / inline-size; }

/* ---------- the tab strip: five picture tabs (A's launcher pills, as a real tablist; --tp-n = the tab count) ---------- */
.pg-tabs .tp-tabs { display: grid; grid-template-columns: repeat(var(--tp-n, 5), minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; } /* same top as the shell's launcher row on the other pages */
.pg-tabs .tp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 86px; padding: 8px 4px 9px; color: var(--text-2); background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; transition: border-color .15s ease, box-shadow .15s ease, color .15s ease; }
.pg-tabs .tp-tab:hover { color: var(--text); text-decoration: none; border-color: var(--hair-2); }
.pg-tabs .tp-tab[aria-selected="true"] { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pg-tabs .tp-tab:focus-visible { border-radius: 16px; }
.pg-tabs .tp-art { display: flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 42px; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, var(--plate-hi), transparent 72%), var(--plate); border-radius: 12px; }
.pg-tabs .tp-tab[aria-selected="true"] .tp-art { background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 74%), var(--plate); }
.pg-tabs .tp-art .faces .face { width: 27px; height: 27px; padding: 2px; }
.pg-tabs .tp-art .faces .face + .face { margin-left: -11px; }
.pg-tabs .tp-art .faces .face:nth-child(n+3) { display: none; }
.pg-tabs .tp-art .egg { display: block; width: 23px; height: 28px; }
.pg-tabs .tp-art .egg-k { display: none; }
.pg-tabs .tp-tx { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.25; }
.pg-tabs .tp-l { font-size: 13px; font-weight: 720; letter-spacing: -.01em; white-space: nowrap; }
.pg-tabs .tp-f { display: none; font-size: 12.5px; font-weight: 550; color: var(--mute); white-space: nowrap; }
@container tabs-panel (max-width: 339.98px) { .pg-tabs .tp-l { font-size: 12px; letter-spacing: -.02em; } }
/* a narrow strip shows a two-word label's first word ("Max"); the tab's name keeps both */
@container tabs-panel (max-width: 439.98px) { .pg-tabs .tp-l2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@container tabs-panel (min-width: 700px) { .pg-tabs .tp-tabs { gap: 10px; margin-top: 14px; } }
/* picture beside the words: from 940 px, where five tabs leave every label + fact its room */
@container tabs-panel (min-width: 940px) {
  .pg-tabs .tp-tab { flex-direction: row; justify-content: flex-start; gap: 12px; height: 66px; padding: 8px 12px 8px 8px; }
  .pg-tabs .tp-art { width: 50px; height: 48px; border-radius: 12px; }
  .pg-tabs .tp-art .faces .face { width: 31px; height: 31px; }
  .pg-tabs .tp-art .faces .face + .face { margin-left: -13px; }
  .pg-tabs .tp-art .egg { width: 26px; height: 31px; }
  .pg-tabs .tp-tx { align-items: flex-start; }
  .pg-tabs .tp-l { font-size: 15.5px; font-weight: 740; }
  .pg-tabs .tp-f { display: block; }
}

/* ---------- panels ---------- */
.pg-tabs .tp-panel.is-in { animation: tabs-in .22s ease both; }
@keyframes tabs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* line-break markers: a full-width zero-height flex item, shown only in its width ranges */
.pg-tabs .br { display: none; flex: 0 0 100%; width: 100%; height: 0; margin: 0; }
@container tabs-panel (max-width: 339.98px) { .pg-tabs .br.r0 { display: block; } }
@container tabs-panel (min-width: 340px) and (max-width: 439.98px) { .pg-tabs .br.r1 { display: block; } }
@container tabs-panel (min-width: 440px) and (max-width: 699.98px) { .pg-tabs .br.r2 { display: block; } }
@container tabs-panel (min-width: 700px) and (max-width: 939.98px) { .pg-tabs .br.r3 { display: block; } }
@container tabs-panel (min-width: 940px) and (max-width: 1099.98px) { .pg-tabs .br.r4 { display: block; } }
@container tabs-panel (min-width: 1100px) { .pg-tabs .br.r5 { display: block; } }

/* ---------- Raids: tier groups side by side, each as wide as its bosses (B's board, balanced) ---------- */
.pg-tabs .rb-sec { margin-top: 28px; }
.pg-tabs .rb-sec-s { margin-top: 46px; }
.pg-tabs .rb-sec-s .sh { margin-bottom: 18px; }
.pg-tabs .rb-bd { --tabs-g: 10px; --tabs-rg: 26px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--tabs-g); margin-bottom: calc(-1 * var(--tabs-rg)); }
.pg-tabs .rb-g { --tabs-c: var(--tabs-c0); --tabs-w: var(--tabs-w0); position: relative; flex: 0 0 calc(var(--tabs-w) * (100% - (var(--tabs-c) - 1) * var(--tabs-g)) / var(--tabs-c) + (var(--tabs-w) - 1) * var(--tabs-g) - .5px); min-width: 0; margin-bottom: var(--tabs-rg); }
@container tabs-panel (min-width: 340px) { .pg-tabs .rb-g { --tabs-c: var(--tabs-c1); --tabs-w: var(--tabs-w1); } }
@container tabs-panel (min-width: 440px) { .pg-tabs .rb-g { --tabs-c: var(--tabs-c2); --tabs-w: var(--tabs-w2); } .pg-tabs .rb-bd { --tabs-g: 12px; } }
@container tabs-panel (min-width: 700px) { .pg-tabs .rb-g { --tabs-c: var(--tabs-c3); --tabs-w: var(--tabs-w3); } }
@container tabs-panel (min-width: 940px) { .pg-tabs .rb-g { --tabs-c: var(--tabs-c4); --tabs-w: var(--tabs-w4); } }
@container tabs-panel (min-width: 1100px) { .pg-tabs .rb-g { --tabs-c: var(--tabs-c5); --tabs-w: var(--tabs-w5); } }
.pg-tabs .rb-anchor { position: absolute; top: 0; }
.pg-tabs .rb-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 2px 9px; font-size: 15px; font-weight: 760; line-height: 22px; letter-spacing: -.01em; border-bottom: 2px solid color-mix(in srgb, var(--t) 50%, transparent); }
.pg-tabs .rb-dot { flex: none; width: 9px; height: 9px; background: var(--t); border-radius: 50%; }
.pg-tabs .rb-hl { white-space: nowrap; }
.pg-tabs .rb-n { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.pg-tabs .rb-ts { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--tabs-g); margin-bottom: -20px; }
/* one boss = the shared raid card (H.raidCard, styles.css .rc*): here only its width (tiles per row) and row gap */
.pg-tabs .rb-t { flex: 0 0 calc((100% - (var(--tabs-w) - 1) * var(--tabs-g)) / var(--tabs-w) - .2px); width: auto; margin: 0 0 20px; padding-bottom: 2px; }
.pg-tabs .rb-t .rc-plate { margin-bottom: 1px; }

/* ---------- Eggs + Rocket filter: Research's field as is (tabs.research.css .rs-head .rs-tools .rs-f .rs-q, its empty
   note .rs-none + button .rs-more), so the three tabs' filters look and sit the same; here only the list's empty state ---------- */
.pg-tabs .tf-none { margin-top: 24px; }

/* ---------- Eggs: one band per pool, the egg on the left (on top when narrow), the Pokémon as a chart ---------- */
.pg-tabs .eg-xk { white-space: nowrap; }
.pg-tabs .eg-xk .spk, .pg-tabs .eg-x .spk { position: static; display: inline-block; width: 11px; height: 11px; vertical-align: -1px; fill: currentColor; filter: none; }
.pg-tabs .eg-pools { margin-top: 26px; }
.pg-tabs .eg-band { padding: 18px 0 6px; border-top: 1px solid var(--hair); }
.pg-tabs .eg-lab { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.pg-tabs .eg-ic { display: grid; flex: none; place-items: center; width: 46px; height: 46px; background: radial-gradient(70% 70% at 50% 40%, var(--plate-hi), transparent 72%), var(--plate); border-radius: 50%; }
.pg-tabs .eg-ic .egg { display: block; width: 26px; height: 31px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22)); }
.pg-tabs .eg-ic .egg .egg-b { stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1.6; }
.pg-tabs .eg-ic .egg-k { display: none; }
.pg-tabs .eg-lt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.pg-tabs .eg-t { margin: 0; font-size: 19px; font-weight: 760; line-height: 1.2; letter-spacing: -.015em; white-space: nowrap; }
.pg-tabs .eg-v { font-size: 13px; font-weight: 650; color: var(--mute); white-space: nowrap; }
.pg-tabs .eg-n { margin-left: auto; }
.pg-tabs .eg-cs { --tabs-c: 4; --tabs-g: 8px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--tabs-g); }
.pg-tabs .eg-c { position: relative; display: flex; flex: 0 0 calc((100% - (var(--tabs-c) - 1) * var(--tabs-g)) / var(--tabs-c) - .2px); flex-direction: column; align-items: center; gap: 5px; min-width: 0; margin: 0 0 14px; text-align: center; }
.pg-tabs .eg-c .mon { width: 62px; height: 62px; padding: 7px; background: radial-gradient(70% 70% at 50% 40%, var(--plate-hi), transparent 72%), var(--plate); border-radius: 50%; }
.pg-tabs .eg-nm { max-width: 100%; font-size: 12.5px; font-weight: 620; line-height: 1.25; color: var(--text-2); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.pg-tabs .eg-x, .pg-tabs .eg-r { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; font-size: 10.5px; font-weight: 750; line-height: 18px; color: var(--mute); white-space: nowrap; background: var(--surface-2); border-radius: 999px; }
.pg-tabs .eg-r { color: var(--accent); }
@container tabs-panel (min-width: 440px) { .pg-tabs .eg-cs { --tabs-c: 5; } }
@container tabs-panel (min-width: 700px) {
  .pg-tabs .eg-band { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; padding-top: 20px; }
  .pg-tabs .eg-lab { flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 0; }
  .pg-tabs .eg-ic { width: 56px; height: 56px; }
  .pg-tabs .eg-ic .egg { width: 31px; height: 37px; }
  .pg-tabs .eg-lt { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pg-tabs .eg-n { margin-left: 0; }
  .pg-tabs .eg-cs { --tabs-c: 6; justify-content: flex-start; }
}
@container tabs-panel (min-width: 940px) { .pg-tabs .eg-cs { --tabs-c: 8; } }
@container tabs-panel (min-width: 1100px) { .pg-tabs .eg-cs { --tabs-c: 9; } }

/* ---------- Research: parts/tabs.research.css (imported at the top) ---------- */

/* ---------- Rocket: C's lineup cards, slots 1 · 2 · 3, the catchable slot ringed ---------- */
.pg-tabs .rk-sec { margin-top: 36px; }
.pg-tabs .rk-row { --tabs-c: 1; --tabs-g: 12px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--tabs-g); margin-bottom: calc(-1 * var(--tabs-g)); }
.pg-tabs .rk-grunt { --tabs-c: 2; --tabs-g: 8px; }
@container tabs-panel (min-width: 340px) { .pg-tabs .rk-grunt { --tabs-g: 10px; } }
@container tabs-panel (min-width: 440px) { .pg-tabs .rk-lead { --tabs-c: 2; } .pg-tabs .rk-grunt { --tabs-g: 12px; } }
@container tabs-panel (min-width: 700px) { .pg-tabs .rk-grunt { --tabs-c: 3; } }
@container tabs-panel (min-width: 940px) { .pg-tabs .rk-lead, .pg-tabs .rk-grunt { --tabs-c: 4; } }
.pg-tabs .rk-card { display: flex; flex: 0 0 calc((100% - (var(--tabs-c) - 1) * var(--tabs-g)) / var(--tabs-c) - .2px); flex-direction: column; min-width: 0; margin: 0 0 var(--tabs-g); padding: 14px; container-type: inline-size; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.pg-tabs .rk-card.is-leader { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--t-shadow) 9%, transparent), transparent 70%), var(--surface); }
.pg-tabs .rk-h { display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 0 0 10px; font-size: 16px; font-weight: 760; line-height: 1.2; letter-spacing: -.01em; }
.pg-tabs .rk-nt { white-space: nowrap; }
.pg-tabs .rk-g { display: inline-flex; flex: none; color: var(--text-2); }
.pg-tabs .rk-gi { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pg-tabs .rk-slots { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pg-tabs .rk-s { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 24px 2px 8px; background: radial-gradient(80% 50% at 50% 42%, var(--plate-hi), transparent 75%), var(--plate); border-radius: 14px; }
.pg-tabs .rk-s.is-catch { background: radial-gradient(75% 46% at 50% 42%, color-mix(in srgb, var(--live) 13%, transparent), transparent 76%), radial-gradient(80% 50% at 50% 42%, var(--plate-hi), transparent 75%), var(--plate); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--live) 75%, transparent); }
.pg-tabs .rk-sn { position: absolute; top: 5px; left: 9px; font-size: 13px; font-weight: 800; line-height: 16px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pg-tabs .rk-ck { position: absolute; top: 5px; right: 8px; font-size: 10.5px; font-weight: 760; line-height: 16px; color: var(--live); }
.pg-tabs .rk-sm { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pg-tabs .rk-sm .mon { --tabs-s: clamp(28px, calc((100cqw - 12px) / 3 - 10px), 64px); width: var(--tabs-s); height: var(--tabs-s); }
/* a filter that matched Pokémon by name: the other Pokémon of the card step back */
.pg-tabs .rk-sm .mon.rk-dim { opacity: .3; filter: grayscale(.7); }
.pg-tabs .rk-none { padding: 10px 0; font-size: 12px; color: var(--mute); }
@container (max-width: 239.98px) {
  .pg-tabs .rk-ck { display: none; }
  .pg-tabs .rk-h { font-size: 15px; }
  .pg-tabs .rk-s { padding-top: 22px; }
  .pg-tabs .rk-sn { left: 7px; font-size: 12px; }
  .pg-tabs .rk-sm .mon { --tabs-s: clamp(28px, calc((100cqw - 12px) / 3 - 6px), 64px); }
}
@container tabs-panel (max-width: 439.98px) { .pg-tabs .rk-grunt .rk-card { padding: 11px 10px 10px; } }
@container tabs-panel (max-width: 339.98px) { .pg-tabs .rk-grunt .rk-card { padding: 9px 8px 8px; } .pg-tabs .rk-grunt .rk-slots { gap: 4px; } .pg-tabs .rk-grunt .rk-h { gap: 5px; } }

/* ---------- Day picker (Raids + Max Battles): seven day chips in one segmented control (radios: native arrow keys) ----------
   Each chip: the weekday over the date (Today / Tomorrow by name), up to 3 dots for what happens that day. One row at every
   width: 7 equal columns, at most 560 px wide. A narrow strip says "Tmrw" (the radio's name stays "Tomorrow, …"). */
.pg-tabs .dp { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 560px; min-inline-size: 0; margin: 16px 0 0; padding: 3px; background: var(--surface-2); border: 0; border-radius: 14px; }
.pg-tabs .dp-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: 56px; color: var(--text-2); cursor: pointer; border-radius: 11px; }
.pg-tabs .dp-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; }
.pg-tabs .dp-b > input:focus-visible { outline-offset: 1px; }
.pg-tabs .dp-b:hover { color: var(--text); }
.pg-tabs .dp-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); }
.pg-tabs .dp-w { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 720; line-height: 14px; white-space: nowrap; }
.pg-tabs .dp-ws { display: none; }
.pg-tabs .dp-n { font-size: 17px; font-weight: 770; line-height: 20px; font-variant-numeric: tabular-nums; }
.pg-tabs .dp-b.is-today .dp-n { color: var(--accent); }
.pg-tabs .dp-dots { display: flex; gap: 3px; height: 5px; }
.pg-tabs .dp-dots i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
@container tabs-panel (max-width: 439.98px) {
  .pg-tabs .dp-wl:has(+ .dp-ws) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-tabs .dp-ws { display: inline; }
  .pg-tabs .dp-w { font-size: 10.5px; letter-spacing: -.01em; }
  .pg-tabs .dp-b { height: 52px; }
}

/* ---------- a day's moments (Raid Hour, Raid Day · Max Monday, Max Battle Day): one row each, stacked ---------- */
.pg-tabs .dms { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 18px 0 0; }
.pg-tabs .dm { display: flex; align-items: center; gap: 12px; max-width: 100%; margin: 0; padding: 6px 16px 6px 6px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; }
.pg-tabs .dm:hover { text-decoration: none; border-color: var(--hair-2); }
.pg-tabs p.dm { cursor: default; border-style: dashed; }
.pg-tabs .dm-pl { width: 48px; height: 48px; border-radius: 12px; }
.pg-tabs .dm-pl > .glyph { width: 62cqw; }
.pg-tabs .dm-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-tabs .dm-t { font-size: 14.5px; font-weight: 720; line-height: 1.3; text-wrap: pretty; }
.pg-tabs .dm-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--text-2); }
.pg-tabs .dm-at { font-weight: 760; color: var(--text); font-variant-numeric: tabular-nums; }
.pg-tabs .dm-k { color: var(--text-2); }
.pg-tabs .dm-m .b { height: 18px; padding: 0 7px; font-size: 10.5px; }
.pg-tabs .dm-ptr .dm-k { font-weight: 700; color: var(--accent); }

/* ---------- Raids by day: the tag on a boss's picture (arrives that day · its last day); the 3★ + 1★ "as of today" board ---------- */
.pg-tabs .rb-tag { position: absolute; left: 50%; bottom: 3px; z-index: 1; padding: 0 7px; font-size: 11px; font-weight: 750; line-height: 18px; color: var(--text-2); white-space: nowrap; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.pg-tabs .rb-tag b { font-weight: 800; color: var(--accent); }
.pg-tabs .rb-tag.is-last { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--hair-2)); }
.pg-tabs .rd-none { margin-top: 22px; }
.pg-tabs .rb-sec-l .sh-m { font-size: 13.5px; }

/* ---------- Max Battles: tier tones (Dynamax tiers · Gigantamax · tier TBA), the card note, the line-up note, the schedule ---------- */
.pg-tabs { --tabs-mx: #f27ab8; --tabs-gmax: #ff8a63; }
:where(:root[data-theme="light"]) .pg-tabs { --tabs-mx: #ad2f6c; --tabs-gmax: #b0431f; }
.pg-tabs .tone-mx { --t: var(--tabs-mx); }
.pg-tabs .tone-mx-g { --t: var(--tabs-gmax); }
.pg-tabs .tone-mx-x { --t: var(--mute); }
.pg-tabs .mx-note { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text-2); text-wrap: balance; overflow-wrap: anywhere; }
.pg-tabs .mx-wk { margin: 0 0 16px; font-size: 13.5px; color: var(--text-2); }
.pg-tabs .mx-wk b { font-weight: 760; color: var(--text); }
.pg-tabs .mx-none { margin-top: 22px; }
.pg-tabs .mx-next { display: inline-block; margin-top: 4px; font-weight: 650; }
.pg-tabs .mx-nt { display: flex; align-items: flex-start; gap: 12px; margin: 34px 0 0; padding: 12px 16px 12px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); background: var(--surface); border: 1px dashed var(--hair-2); border-radius: var(--r); }
.pg-tabs .mx-nt b { font-weight: 740; color: var(--text); }
.pg-tabs .mx-nt-i { --c: var(--tabs-mx); display: flex; flex: none; width: 30px; height: 30px; }
.pg-tabs .mx-nt-i .glyph { width: 100%; height: 100%; }
.pg-tabs .ms { margin-top: 40px; }
.pg-tabs .ms-wk { margin: -2px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.pg-tabs .ms-wk b { font-weight: 720; color: var(--text); }
.pg-tabs .ms-l { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-tabs .ms-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; margin: 0; padding: 8px 12px 8px 8px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.pg-tabs .ms-r:hover { text-decoration: none; border-color: var(--hair-2); }
.pg-tabs .ms-pl { width: 52px; height: 44px; border-radius: 11px; }
.pg-tabs .ms-pl > .glyph { width: 60cqh; }
.pg-tabs .ms-tx { display: flex; flex: 1 1 160px; flex-direction: column; gap: 2px; min-width: 0; }
.pg-tabs .ms-t { font-size: 14.5px; font-weight: 720; line-height: 1.3; }
.pg-tabs .ms-w { font-weight: 600; color: var(--text-2); }
.pg-tabs .ms-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-tabs .ms-d { font-weight: 750; color: var(--text); }
.pg-tabs .ms-k.is-live { font-weight: 750; color: var(--live); }
.pg-tabs .ms-f { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.pg-tabs .ms-f:empty { display: none; }