/* parts/dialog.css - the CONTENT of the details dialog (scope: .dlg). Linked on every page.
   The dialog mechanics (.dlg box, ::backdrop, .dlg-body scroll, ✕ .dlg-x) stay in styles.css (shell).
   Every class here starts with "dg-": page parts' scoped rules (".pg-home .when") reach into the dialog too, since it
   lives in the same <body>. Shell classes reused on purpose: mon is-shadow tipped spk b kind tz cd live-dot glyph balls.
   One picture language for both modals (FINAL2 "Modals"): a full-bleed picture band on a tinted plate (the ✕ floats
   over its corner), then name, badges, numbers, the ends bar, chips, ≤ 3 facts, ONE "More" fold, one source line.
   Gold only for shiny + prices; type badges in the game's own type colours (sampled from LeekDuck's type icons). */

.dlg .dg { position: relative; }
.dlg .dg:focus { outline: none; }

/* ---------- the picture band ---------- */
.dlg .dg-hero {
  --hc: var(--c, var(--accent));
  container-type: inline-size;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px;
  min-height: 176px; padding: 26px 56px 20px;
  background:
    radial-gradient(56% 78% at 50% 60%, color-mix(in srgb, var(--hc) 26%, transparent), transparent 74%),
    radial-gradient(90% 60% at 50% 0%, var(--plate-hi), transparent 70%),
    var(--plate);
}
.dlg .dg-rp .dg-hero[class*=" dg-ty-"] { --hc: var(--ty); }
.dlg .dg-rp .dg-hero[class*=" tone-"] { --hc: var(--t); }

/* the Pokémon + its shiny, side by side, one scale (images only; ✦ on the shiny). A trimmed sprite's box has the
   sprite's own shape (--ar from the renderer): height --ph, width capped at --wmax (then both shrink together). */
.dlg .dg-pg { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.dlg .dg-pair { --ph: 150px; --pgap: 36px; --wmax: min(236px, calc((100cqi - var(--pgap)) / 2)); display: flex; align-items: center; justify-content: center; gap: var(--pgap); }
.dlg .dg-pair.dg-crop { --ph: 116px; }
.dlg .dg-pair .mon { width: auto; height: auto; }
.dlg .dg-pair.dg-ar .mon { --w: min(var(--wmax), calc(var(--ph) * var(--ar))); width: var(--w); height: calc(var(--w) / var(--ar)); }
.dlg .dg-pair:not(.dg-ar) .mon img { width: auto; height: var(--ph); max-width: var(--wmax); }
.dlg .dg-pair .mon:has(.mon-gl) { width: var(--ph); height: var(--ph); }
.dlg .dg-pair .mon.is-shadow img { filter: drop-shadow(0 0 7px rgba(150, 90, 230, .8)) var(--sprite-shadow); }
.dlg .dg-sh { position: relative; display: flex; }
.dlg .dg-sh > .spk { top: calc(var(--sy, 0%) - 10px); right: calc(var(--sx, 0%) - 12px); width: 22px; height: 22px; }
/* two bosses (Mega Charizard X + Y): a pair each, captioned with what tells them apart */
.dlg .dg-duo .dg-hero { gap: 16px 40px; }
.dlg .dg-duo .dg-pair { --ph: 112px; --pgap: 16px; --wmax: min(124px, calc((100cqi - 40px - 2 * var(--pgap)) / 4)); }
.dlg .dg-pc { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; font-weight: 750; color: var(--text); text-align: center; }
.dlg .dg-tys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* event strip: every featured Pokémon at one scale; rows balanced by the renderer (.dg-br breaks per breakpoint) */
.dlg .dg-strip { --gap: 14px; --k: 6; --fs: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px var(--gap); width: 100%; }
.dlg .dg-br { flex-basis: 100%; height: 0; }
.dlg .dg-br-c { display: none; }
.dlg .dg-n1 { --k: 1; --fs: 120px; }
.dlg .dg-n2 { --k: 2; --fs: 112px; }
.dlg .dg-n3 { --k: 3; --fs: 100px; }
.dlg .dg-n4 { --k: 4; --fs: 92px; }
.dlg .dg-n5 { --k: 5; --fs: 84px; }
.dlg .dg-n6 { --k: 6; --fs: 76px; }
.dlg .dg-fe { position: relative; display: inline-flex; flex: none; padding: 0; border-radius: 50%; }
.dlg .dg-fe::before { inset: -4px; }
.dlg .dg-fe .mon { width: min(var(--fs), calc((100cqi - (var(--k) - 1) * var(--gap)) / var(--k))); height: auto; aspect-ratio: 1; }
.dlg .dg-fe > .spk { top: 0; right: -2px; width: 15px; height: 15px; }
.dlg .dg-new { position: absolute; left: 50%; bottom: -6px; padding: 0 5px; font-size: 9.5px; font-style: normal; font-weight: 800; line-height: 15px; letter-spacing: .04em; color: var(--gold); background: var(--plate); border-radius: 6px; transform: translateX(-50%); }
.dlg .dg-fe:focus-visible { outline-offset: 2px; }

/* no Pokémon: the category glyph (GBL: one ball per league) */
.dlg .dg-glyph { display: grid; place-items: center; width: 132px; height: 132px; }
.dlg .dg-glyph > .glyph { width: 92px; max-width: none; }
.dlg .dg-glyph > .balls { width: 210px; }
.dlg .dg-glyph > .balls .ball { width: 30%; max-width: 64px; }

/* ---------- words ---------- */
.dlg .dg-b { padding: 18px 26px 12px; }
.dlg .dg-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; }
.dlg .dg-k .kind { display: inline-block; max-width: 100%; }
.dlg .dg-t { margin: 0; font-size: 26px; font-weight: 770; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.dlg .dg-msg { margin: 8px 0 6px; font-size: 14px; color: var(--mute); }

/* tier + type badges (types like the game: the type colour, white icon, AA name) */
.dlg .dg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.dlg .dg-tier { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 750; color: var(--t); white-space: nowrap; background: color-mix(in srgb, var(--t) 13%, var(--surface)); border-radius: 999px; }
.dlg .dg-ty { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 3px; font-size: 13.5px; font-weight: 750; font-style: normal; color: #fff; white-space: nowrap; background: var(--tyd, var(--ty)); border-radius: 999px; }
.dlg .dg-ty-i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; background: var(--ty); border-radius: 50%; }
.dlg .dg-ty img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.dlg .dg-tys .dg-ty { height: 24px; padding: 0 9px 0 2px; font-size: 11.5px; gap: 4px; }
.dlg .dg-tys .dg-ty-i { width: 20px; height: 20px; }
.dlg .dg-tys .dg-ty img { width: 13px; height: 13px; }
/* a data.raids boss without a raid event: in the feed's raid list now, end unknown (the line where a time would go) */
.dlg .dg-now { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--live); }
.dlg .dg-now .live-dot { width: 6px; height: 6px; }
/* the game's type colours; every type name is white (owner, 2026-10-16). Light types (Flying, Electric, Ice…) sit below AA contrast - the owner decides on deeper shades */
.dlg .dg-ty-normal { --ty: #8f97a0; } .dlg .dg-ty-fire { --ty: #ff9c58; } .dlg .dg-ty-water { --ty: #3473c8; } .dlg .dg-ty-electric { --ty: #f4d544; }
.dlg .dg-ty-grass { --ty: #5ebd64; } .dlg .dg-ty-ice { --ty: #74cebf; } .dlg .dg-ty-fighting { --ty: #cf4165; } .dlg .dg-ty-poison { --ty: #a866c8; }
.dlg .dg-ty-ground { --ty: #db7746; } .dlg .dg-ty-flying { --ty: #8ea9df; } .dlg .dg-ty-psychic { --ty: #f96e76; } .dlg .dg-ty-bug { --ty: #a8b820; }
.dlg .dg-ty-rock { --ty: #c7b78a; } .dlg .dg-ty-ghost { --ty: #5069ab; } .dlg .dg-ty-dragon { --ty: #0869c3; } .dlg .dg-ty-dark { --ty: #575869; }
.dlg .dg-ty-steel { --ty: #54879e; } .dlg .dg-ty-fairy { --ty: #ed8ee4; }

/* numbers: 100% CP · weather-boosted (+ the weather icons) · shiny odds */
/* label row + value row shared by all tiles (subgrid): the numbers line up even when a label wraps */
.dlg .dg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin: 18px 0 0; border-block: 1px solid var(--hair); }
.dlg .dg-s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dlg .dg-s1 { grid-template-columns: minmax(0, 1fr); }
.dlg .dg-st { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 3px; min-width: 0; padding: 11px 14px 12px; border-left: 1px solid var(--hair); }
.dlg .dg-st:first-child { padding-left: 0; border-left: 0; }
.dlg .dg-st-l { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: 2px 8px; min-height: 22px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.dlg .dg-st-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.dlg .dg-st-sh .dg-st-v { color: var(--gold); }
/* CP ranges (the raid card's numbers): "2073-2160"; bosses with different ranges get a line each under their short name */
.dlg .dg-rng { white-space: nowrap; }
.dlg .dg-rng:has(.dg-rv) { flex-direction: column; gap: 2px; }
.dlg .dg-rv { display: flex; align-items: baseline; gap: 6px; }
.dlg .dg-rn { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--mute); }
.dlg .dg-sep { font-style: normal; font-weight: 600; color: var(--mute); }
.dlg .dg-wx-g { display: inline-flex; align-items: center; gap: 3px; }
.dlg .dg-wx { display: block; width: 20px; height: 20px; filter: invert(1); opacity: .9; }
.dlg .dg-wx-t { font-size: 12px; font-weight: 650; color: var(--text-2); }
:where(:root[data-theme="light"]) .dlg .dg-wx { filter: none; opacity: .82; } /* light theme (PARTS.md §4) */

/* the time line + the ends bar */
.dlg .dg-when { margin-top: 18px; }
.dlg .dg-stats + .dg-when { margin-top: 16px; }
.dlg .dg-cd { margin: 0; font-size: 15px; font-weight: 750; line-height: 1.3; color: var(--text); }
.dlg .dg-live .dg-cd { color: var(--live); }
.dlg .dg-bar { display: block; height: 6px; margin: 9px 0 8px; overflow: hidden; background: var(--bar); border-radius: 6px; }
.dlg .dg-bar i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 6px; }
.dlg .dg-when-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.dlg .dg-when-d time { min-width: 0; }
.dlg .dg-live .dg-when-d { margin-top: 0; }

/* chips: price · shiny odds · key times · Raid Hour */
.dlg .dg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.dlg .dg-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; min-height: 32px; max-width: 100%; padding: 5px 12px; font-size: 13px; line-height: 1.3; color: var(--text); background: var(--surface-2); border-radius: 12px; }
.dlg .dg-chip-l { font-weight: 600; color: var(--mute); }
.dlg .dg-chip-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.dlg .dg-pr b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.dlg .dg-link { padding: 0; }
.dlg .dg-link a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; color: inherit; border-radius: inherit; }
.dlg .dg-link a:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.dlg .dg-go { color: var(--mute); }
/* the price chip sums up the cost list in "More": while that is open the list says it, so the chip steps aside */
.dlg .dg:has(.dg-more[open] .dg-buy) .dg-pr { display: none; }
.dlg .dg-odds { gap: 6px; }
.dlg .dg-odds > .spk { position: static; width: 14px; height: 14px; }
.dlg .dg-odd { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
/* several Pokémon: each number after its little sprite (no names; the sprite's alt + the tooltip name it) */
.dlg .dg-oe { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dlg .dg-of { display: inline-flex; }
.dlg .dg-om { width: 24px; height: 24px; margin-block: -4px; }
.dlg .dg-om + .dg-om { margin-left: -6px; }
.dlg .dg-om img { filter: none; }
.dlg .dg-om .mon-gl .glyph { width: 80%; }
/* a key-time label with its aside in a tooltip ("Halloween GO Pass" · tip "(earn points)") */
.dlg .dg-chip-t { font-weight: 600; color: var(--mute); }
.dlg .dg-rh .dg-chip-l { color: var(--text-2); }

/* ≤ 3 short facts */
.dlg .dg-facts { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.dlg .dg-facts li, .dlg .dg-ml li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.dlg .dg-facts li::before, .dlg .dg-ml li::before { content: ""; position: absolute; top: .62em; left: 3px; width: 5px; height: 5px; background: var(--c, var(--accent)); border-radius: 50%; }

/* bonus badges (owner 2026-10-16: "candy, stardust and XP boosts should be in badges so it's very clear"): a boost =
   a pill with LeekDuck's own picture of the resource + the amount ("2× Candy"); a rank tag in front ("R10"), a dashed
   mark after ("Deluxe 3×"). Same words as the text, only drawn. */
/* inline boxes, not flex: the words read (and copy) as one line - "R10 2× Candy", never "2×⏎Candy" */
.dlg .dg-bg { white-space: nowrap; }
.dlg .dg-bn { display: inline-block; box-sizing: border-box; height: 26px; margin-block: 1px; padding: 0 10px 0 3px; font-size: 13px; font-weight: 650; line-height: 24px; color: var(--text); vertical-align: middle; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: 999px; }
.dlg .dg-bn img { display: inline-block; width: 20px; height: 20px; margin: -2px 5px 0 0; object-fit: contain; vertical-align: middle; }
.dlg .dg-bn b { font-weight: 800; font-variant-numeric: tabular-nums; }
.dlg .dg-rk { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--mute); }
.dlg .dg-dx { display: inline-block; box-sizing: border-box; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 20px; color: var(--text-2); white-space: nowrap; vertical-align: middle; border: 1px dashed var(--hair-2); border-radius: 999px; }
.dlg .dg-facts li:has(.dg-bn), .dlg .dg-ml li:has(.dg-bn) { line-height: 30px; }
.dlg .dg-facts li:has(.dg-bn)::before, .dlg .dg-ml li:has(.dg-bn)::before { top: 13.5px; }
/* inside the cost list (12.5 px notes): a size down */
.dlg .dg-buy-n small:has(.dg-bn) { line-height: 26px; }
.dlg .dg-buy-n .dg-bn { height: 22px; padding: 0 8px 0 2px; font-size: 12px; line-height: 20px; }
.dlg .dg-buy-n .dg-bn img { width: 17px; height: 17px; margin-right: 4px; }

/* ONE "More" fold */
.dlg .dg-more { margin-top: 16px; border-top: 1px solid var(--hair); }
.dlg .dg-more > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.dlg .dg-more > summary::-webkit-details-marker { display: none; }
.dlg .dg-chev { width: 8px; height: 8px; margin: 0 6px 0 auto; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.dlg .dg-more[open] .dg-chev { transform: rotate(225deg) translateY(-2px); }
.dlg .dg-more-b { padding: 0 0 8px; }
.dlg .dg-ml { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dlg .dg-ml li { font-size: 13.5px; }
.dlg .dg-tba li::before { background: var(--mute); }
.dlg .dg-mh { margin: 16px 0 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.dlg .dg-more-b > .dg-mh:first-child { margin-top: 2px; }
.dlg .dg-buy { margin: 0; padding: 0; list-style: none; }
.dlg .dg-buy li { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; border-top: 1px solid var(--hair); }
.dlg .dg-buy li:first-child { border-top: 0; }
.dlg .dg-buy-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.4; }
.dlg .dg-buy-n small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--mute); }
.dlg .dg-buy-p { display: flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.dlg .dg-buy-p b { font-size: 15px; font-weight: 800; color: var(--gold); }
.dlg .dg-buy-p b:empty { display: none; }
.dlg .dg-buy-p span { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.dlg .dg-buy-p b:empty + span { font-size: 15px; font-weight: 800; color: var(--gold); }

/* sources: one tiny line */
.dlg .dg-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 14px; padding-top: 2px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--hair); }
.dlg .dg-more + .dg-src { margin-top: 0; }
.dlg .dg-src-k { font-weight: 700; }
.dlg .dg-sg { display: inline-flex; align-items: center; gap: 6px; }
.dlg .dg-src a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; color: var(--text-2); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.dlg .dg-src a.dg-sn { min-width: 14px; }
.dlg .dg-src-p, .dlg .dg-src-v { white-space: nowrap; }

/* ---------- Add to calendar (owner 2026-10-16; parts/dialog.cal.js + dialog.client.js) ----------
   The button: an accent pill with the calendar glyph ("Add to calendar" → once an app is remembered "Add to Google
   Calendar" …) and a small "change" next to it. A raid modal's Raid Hour / Raid Day line: words left, a compact "Add"
   right (its "change" under it). The chooser: its own small dialog (.dlg.dg-calp - a drawer on phones like #dlg). */
.dlg .dg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.dlg .dg-calw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.dlg .dg-cal { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 14px; font-size: 14px; font-weight: 720; color: var(--dg-cal-tx); white-space: nowrap; background: var(--dg-cal-bg); border-radius: 999px; transition: background-color .15s ease; }
.dlg .dg-cal:hover { text-decoration: none; }
@media (hover: hover) { /* touch screens keep :hover after a tap: no highlight there */
  .dlg .dg-cal:hover { background: var(--dg-cal-hi); }
  .dlg .dg-cal-ch:hover { color: var(--text); }
  .dlg .dg-cp-o:hover { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
}
.dlg .dg-cal:focus-visible { border-radius: 999px; }
.dlg .dg-cal-g { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg .dg-cal-ch { min-height: 32px; padding: 0 4px; font-size: 12.5px; font-weight: 650; color: var(--mute); cursor: pointer; background: none; border: 0; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.dlg { --dg-cal-tx: var(--accent); --dg-cal-bg: color-mix(in srgb, var(--accent) 14%, var(--surface)); --dg-cal-hi: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
:where(:root[data-theme="light"]) .dlg { --dg-cal-tx: #2448b4; --dg-cal-bg: color-mix(in srgb, var(--accent) 10%, var(--surface)); --dg-cal-hi: color-mix(in srgb, var(--accent) 16%, var(--surface)); } /* light theme (PARTS.md §4): AA on the tint */
/* a Raid Hour / Raid Day line of the raid modal */
.dlg .dg-mos { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.dlg .dg-mo { display: flex; align-items: center; gap: 8px 12px; min-height: 58px; padding: 8px 8px 8px 14px; background: var(--surface-2); border-radius: 16px; }
.dlg .dg-mo-t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.dlg .dg-mo-t > b { font-size: 12px; font-weight: 750; letter-spacing: .02em; color: var(--text-2); }
.dlg .dg-mo-live .dg-mo-t > b { color: var(--live); }
.dlg .dg-mo-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 15px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.dlg .dg-mo-cd { font-size: 13px; font-weight: 650; color: var(--mute); white-space: nowrap; }
.dlg .dg-calw-s { flex: none; flex-direction: column; gap: 0; }
.dlg .dg-calw-s .dg-cal { height: 40px; padding: 0 16px 0 12px; font-size: 13.5px; }
.dlg .dg-calw-s .dg-cal-ch { min-height: 24px; font-size: 12px; }
/* the chooser (its own dialog: the shell's .dlg box + drawer, this content) */
@media (min-width: 640px) { .dlg.dg-calp { width: min(440px, calc(100% - 32px)); } } /* phones: the full-width drawer */
.dlg .dg-cp .dg-b { padding: 22px 22px 20px; }
.dlg .dg-cp-t { margin: 0 52px 0 0; font-size: 22px; font-weight: 770; line-height: 1.2; letter-spacing: -.02em; }
.dlg .dg-cp-w { display: flex; flex-direction: column; gap: 1px; margin: 6px 52px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.dlg .dg-cp-w b { font-weight: 700; color: var(--text); }
.dlg .dg-cp-l { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dlg .dg-cp-o { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px 10px 10px; color: var(--text); background: var(--surface-2); border: 1.5px solid transparent; border-radius: 16px; transition: background-color .15s ease; }
.dlg .dg-cp-o:hover { text-decoration: none; }
.dlg .dg-cp-o:focus-visible { border-radius: 16px; outline-offset: 2px; }
.dlg .dg-cp-o.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.dlg .dg-cp-i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; color: var(--dg-cal-tx); background: var(--surface); border-radius: 12px; }
.dlg .dg-cp-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg .dg-cp-n { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.dlg .dg-cp-n b { font-size: 15px; font-weight: 720; }
.dlg .dg-cp-n small { font-size: 12.5px; color: var(--mute); }
.dlg .dg-cp-tag { flex: none; padding: 3px 9px; font-size: 11.5px; font-weight: 750; font-style: normal; color: var(--dg-cal-tx); background: var(--dg-cal-bg); border-radius: 999px; }
.dlg .dg-cp-x { margin: 14px 0 0; font-size: 12.5px; color: var(--mute); }

/* ---------- Counters + Mega to bring (owner 2026-10-16; src/counters.js - the raid popups + the Pokédex's Pokémon page) ----------
   Counters: one row of 6 tiles (sprite; Mega / Primal = a small "M" / "P" on its corner, Shadow = the shadow glow; under it
   the fast + charged move types as two small type discs, an elite / legacy move with a gold dot), the "est." chip beside the
   heading. Mega to bring: 1-3 Megas, each with its reasons as small badges (LeekDuck's candy picture = shares a type → more
   Candy; a type disc = super effective → more damage; each a tooltip). A tile is a button when the Pokédex is in. */
.dlg .dg-cxw { margin-top: 18px; }
.dlg .dg-cxw + .dg-cxw { margin-top: 14px; }
.dlg .dg-cxh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.dlg .dg-cxh .dg-mh { margin: 0; }
.dlg .dg-cxl { color: var(--text-2); }
.dlg .dg-cxr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dlg .dg-cxc { min-width: 0; }
.dlg .dg-cxa { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 7px 3px 8px; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; }
.dlg button.dg-cxa, .dlg button.dg-mga { cursor: pointer; }
@media (hover: hover) {
  .dlg button.dg-cxa:hover { border-color: var(--hair-2); }
}
.dlg .dg-cxa[aria-busy="true"], .dlg .dg-mga[aria-busy="true"] { opacity: .6; }
.dlg .dg-cxp > .mon { width: 100%; height: auto; aspect-ratio: 1; }
.dlg .dg-cxp { position: relative; display: block; width: 100%; max-width: 64px; }
.dlg .dg-cxm { width: 100%; height: auto; aspect-ratio: 1; }
.dlg .dg-cxm img { width: 100%; height: 100%; object-fit: contain; }
.dlg .dg-cxm.is-shadow img { filter: drop-shadow(0 0 5px rgba(150, 90, 230, .85)) var(--sprite-shadow); }
.dlg .dg-cxk { position: absolute; top: -3px; left: -3px; display: grid; place-items: center; width: 18px; height: 18px; font-size: 10.5px; font-weight: 850; font-style: normal; line-height: 1; color: var(--t-mega); background: var(--surface); border: 1.5px solid currentColor; border-radius: 50%; }
.dlg .dg-cxv { display: flex; justify-content: center; gap: 3px; }
.dlg .dg-cxi { position: relative; display: grid; flex: none; place-items: center; width: 20px; height: 20px; font-style: normal; background: var(--ty, var(--mute)); border-radius: 50%; }
.dlg .dg-cxi img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.dlg .dg-cxi.is-sp::after { content: ""; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; background: var(--gold); border: 1.5px solid var(--surface-2); border-radius: 50%; }
.dlg .dg-mg { margin-top: 14px; }
.dlg .dg-mg > .dg-mh { margin: 0 0 8px; }
/* the Mega tiles sit on the counters' grid (same columns, same tile): picture, then its reasons where a counter has its moves */
.dlg .dg-mgr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dlg .dg-mgc { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 7px 3px 8px; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; }
.dlg .dg-mgc:has(button.dg-mga:hover) { border-color: var(--hair-2); }
.dlg .dg-mga { display: block; width: 100%; max-width: 64px; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 10px; }
.dlg .dg-mga .dg-cxp { max-width: none; }
.dlg .dg-mgb { display: flex; justify-content: center; gap: 4px; }
.dlg .dg-mgt { position: relative; display: grid; flex: none; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 50%; cursor: help; }
.dlg .dg-mgt::before { content: ""; position: absolute; inset: -8px -2px; } /* a bigger tap area */
.dlg .dg-mgt-c img { width: 17px; height: 17px; object-fit: contain; }
.dlg .dg-mgt-w { font-size: 8px; font-weight: 800; }
.dlg .dg-mgt-d { background: none; border: 0; }
.dlg .dg-mgt-d .dg-cxi { width: 22px; height: 22px; }
.dlg .dg-mgt-d .dg-cxi img { width: 14px; height: 14px; }
.dlg .dg-mgt[data-pinned] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- phones ---------- */
@media (max-width: 639px) {
  .dlg .dg-cxr, .dlg .dg-mgr { gap: 5px; }
  .dlg .dg-mgc { padding: 6px 2px 7px; border-radius: 12px; }
  .dlg .dg-cxa { padding: 6px 2px 7px; border-radius: 12px; }
}
@media (max-width: 380px) {
  .dlg .dg-cxr, .dlg .dg-mgr { gap: 4px; }
  .dlg .dg-mgt, .dlg .dg-mgt-d .dg-cxi { width: 19px; height: 19px; }
  .dlg .dg-mgt-c img { width: 15px; height: 15px; }
  .dlg .dg-mgt-d .dg-cxi img { width: 12px; height: 12px; }
  .dlg .dg-mgb { gap: 2px; }
  .dlg .dg-cxi { width: 17px; height: 17px; }
  .dlg .dg-cxi img { width: 11px; height: 11px; }
  .dlg .dg-cxv { gap: 2px; }
  .dlg .dg-cxk { width: 16px; height: 16px; font-size: 9.5px; }
}
@media (max-width: 639px) {
  /* phones: the ✕ takes the band's top-right corner, so the pictures start below it and use the full width */
  .dlg .dg-hero { min-height: 150px; padding: 58px 16px 18px; gap: 14px 28px; }
  /* the ✕ (40 px at top 12) owns the band's top-right corner: the ✦ stays inside the shiny sprite's top edge */
  .dlg .dg-sh > .spk { top: calc(var(--sy, 0%) - 2px); right: calc(var(--sx, 0%) - 8px); width: 20px; height: 20px; }
  .dlg .dg-hero-glyph { min-height: 132px; padding-top: 22px; }
  .dlg .dg-pair { --ph: 118px; --pgap: 22px; --wmax: min(168px, calc((100cqi - var(--pgap) - 20px) / 2)); } /* room for the ✦ */
  .dlg .dg-pair.dg-crop { --ph: 100px; }
  .dlg .dg-duo .dg-hero { flex-wrap: nowrap; gap: 14px 18px; }
  .dlg .dg-duo .dg-pair { --ph: 80px; --pgap: 8px; --wmax: calc((100cqi - 18px - 2 * var(--pgap)) / 4); }
  .dlg .dg-strip { --gap: 12px; }
  .dlg .dg-br-a { display: none; }
  .dlg .dg-br-c { display: block; }
  .dlg .dg-n1 { --fs: 112px; }
  .dlg .dg-n2 { --fs: 104px; }
  .dlg .dg-n3 { --fs: 88px; }
  .dlg .dg-n4, .dlg .dg-n7, .dlg .dg-n8 { --k: 4; --fs: 62px; }
  .dlg .dg-n5, .dlg .dg-n6 { --k: 3; --fs: 66px; }
  .dlg .dg-many { --k: 5; --fs: 54px; --gap: 10px; }
  .dlg .dg-glyph { width: 112px; height: 112px; }
  .dlg .dg-glyph > .glyph { width: 80px; }
  .dlg .dg-glyph > .balls { width: 180px; }
  .dlg .dg-b { padding: 16px 16px 8px; }
  .dlg .dg-t { font-size: 22px; }
  .dlg .dg-tags { margin-top: 10px; }
  .dlg .dg-st { padding: 10px 10px 11px; }
  .dlg .dg-st-v { font-size: 23px; }
  .dlg .dg-facts li { font-size: 14px; }
  .dlg .dg-src { gap: 0 10px; }
  .dlg .dg-src a { min-height: 36px; }
  .dlg .dg-cp .dg-b { padding: 26px 16px 18px; } /* the chooser drawer: room for the grab handle */
}
/* phones: two ranges side by side, the shiny odds on a row of their own under them (a range never squeezes) */
@media (max-width: 639px) {
  .dlg .dg-stats.dg-r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlg .dg-r .dg-st-sh { display: flex; grid-column: 1 / -1; grid-row: auto; align-items: baseline; gap: 12px; padding: 9px 0 10px; border-top: 1px solid var(--hair); border-left: 0; }
  .dlg .dg-r .dg-st-sh .dg-st-l { min-height: 0; }
  .dlg .dg-r .dg-st-sh .dg-st-v { font-size: 21px; }
}
@media (max-width: 380px) {
  .dlg .dg-st { padding-inline: 8px; }
  .dlg .dg-st-l { font-size: 12px; }
  .dlg .dg-st-v { font-size: 21px; }
  .dlg .dg-wx { width: 18px; height: 18px; }
}