/* pages branch: calculators, breeding guides, collectibles, eggs/bosses/merchants. Uses the site.css tokens
   (each var() has a fallback). Phone first; no horizontal page scroll. */

/* ---- calculator pages */
.tk-form { display: grid; gap: 14px; padding: 14px; }
.tk-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 0; margin: 0; padding: 0; min-width: 0; }
.tk-grid[hidden], [data-show][hidden] { display: none; }
.tk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-f { display: grid; gap: 4px; min-width: 0; }
.js .tk-palf .tk-pal { display: none; }
.tk-palf .pp-slot { --pa-paper: var(--paper-2, #121a30); --pa-ink: var(--ink, #e9eefb); --pa-ink-2: var(--ink-2, #b0bad6); --pa-line-2: var(--line-2, #33436f);
  --pa-accent: var(--accent, #3fe0c0); --pa-accent-soft: var(--accent-soft, #10362f); --pa-accent-ink: var(--accent-ink, #6ff0d5); --pa-radius-sm: var(--radius-sm, 8px); }
.tk-l { font-size: .8125rem; font-weight: 600; color: var(--ink-2, #b0bad6); }
fieldset > .tk-l { grid-column: 1 / -1; padding: 0; }
.tk-h { font-size: .75rem; color: var(--ink-3, #8e99bb); min-height: 0; }
.tk-h:empty { display: none; }
.tk-form .input { width: 100%; min-height: 44px; font-size: 1rem; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-checks label { gap: 8px; padding: 3px 12px; }
.tk-more summary { cursor: pointer; font-weight: 600; color: var(--accent-ink, #6ff0d5); min-height: 32px; }
.tk-more[open] summary { margin-bottom: 10px; }
.tk-out { margin-top: 12px; padding: 14px; min-height: 120px; }
.tk-h2 { font-size: 1.1rem; margin: 0 0 10px; }
.tk-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 12px; }
.tk-kpi div { background: var(--card-2, #182340); border: 1px solid var(--line, #243157); border-radius: var(--radius-sm, 8px); padding: 8px 10px; }
.tk-kpi dt { font-size: .75rem; color: var(--ink-3, #8e99bb); }
.tk-kpi dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-hl td { background: var(--accent-soft, #10362f); }

/* ---- breeding guide pages */
.px-catch { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.px-catch li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--line, #243157); border-radius: var(--radius-sm, 8px); background: var(--card-2, #182340); }
.px-catch li > span { color: var(--ink-2, #b0bad6); font-size: .9rem; }
.px-back { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.px-get { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.px-dmg b { font-variant-numeric: tabular-nums; }

/* ---- collectibles / lists */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.cl-tools { display: grid; gap: 8px; margin: 10px 0; }
.cl-tools .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-count { font-variant-numeric: tabular-nums; color: var(--ink-2, #b0bad6); font-size: .86rem; }
.mk-c { position: absolute; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid #04211b;
        background: var(--c, #ffd65a); padding: 0; cursor: pointer; z-index: 2; }
.mk-c:focus-visible { outline: 2px solid var(--focus, #6ff0d5); outline-offset: 2px; }
.mk-c.found { opacity: .35; background: #8e99bb; }
.mk-c.found::after { content: "✓"; position: absolute; inset: -4px 0 0; font-size: 10px; line-height: 12px; color: #fff; text-align: center; }
.hide-found .mk-c.found { display: none; }
@media (pointer: coarse) { .mk-c { width: 18px; height: 18px; } }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #ffd65a); }
.lvl-badge { display: inline-block; min-width: 2.2em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tech-ico { vertical-align: middle; border-radius: 6px; background: var(--card-2, #182340); }
.tk-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tk-try-b { cursor: pointer; font: inherit; font-size: .875rem; min-height: 36px; }
.tk-grid:has(> .tk-palf) { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.tk-palf .pp-slot { min-width: 0; }