/* Hallmark · checked: 2026-11-05 · genre: product-tool · shape: app screen · built: the project · redesign: restyle */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, the ten tool and trainer pages read as a second template
   (navy title bars, Silkscreen numbers, a 3px rim on every box, "Loading…" for loading); fixed by putting them on the home
   page's own paper: three tones, hairlines, the one lift shadow, Nunito everywhere but the wordmark, skeletons at the size
   of what is coming, the replay viewer drawn as the games' own log. */
/* Hallmark · waive 24b · the house rhythm is the home page's: a 22px gutter, 20/22 plate padding, 10px grid gaps · the trainer pages must share one left edge and one tile gap with index.html and the wiki, not a 4px scale of their own */
/* ==================================================================================================
   Trainer pages and tools: /me, /battles, /prices, /usage, /breeding-calculator, /stat-calculator, /team-checker,
   /damage-calculator, /tools, /trainer. Website Phase 1 (2026-10-21), Kalos look (2026-10-26), cream craft pass
   (2026-11-05: Adam 10-28 "Looks like slop" on the tool tabs; 11-04 picked the cream Lumiose look).

   What this file owns: the page body under the night band (assets/kalos.css draws the nav, the band and the footer):
   the paper tones and hairlines, the lifted plate, buttons, forms, the stat tiles, the box grid and detail sheet, the
   Pokédex grid, the calculators' tables, the replay viewer, the skeletons. EVERY colour and face is a token in :root.

   Sprites are our Gen 5 art at 96x96 and are drawn at exactly 96px (x1), never a fraction (skill sprite-scale).
   Cached hard by _headers: bump ?v= on every page that links this file when it changes (v=13 now).
   ================================================================================================== */
:root{
  /* paper: three tones, a well, two hairlines */
  --paper-0:#f6efdc; --paper-1:#fbf6ea; --paper-2:#f3ebd6; --well:#ece2c8;
  --hair:rgba(44,36,20,.09); --hair-2:rgba(44,36,20,.15); --hair-3:rgba(44,36,20,.26);
  --paper-top:#fffdf6; --chip-ink:#fffaf0; --white-soft:rgba(255,255,255,.9);
  /* ink */
  --ink:#2c2414; --body:#4a4130; --mut:#6f6548; --gold:#856100;
  /* the one accent and its key */
  --y:#ffcb05; --y2:#ffdb4d; --y-deep:#a37f00; --on-y:#2a1d00; --y-soft:rgba(255,203,5,.18); --y-lip:rgba(120,90,0,.2);
  /* outcomes */
  --good:#3f7d2c; --good-soft:rgba(63,125,44,.10); --bad:#b0412e; --bad-soft:rgba(176,65,46,.10); --blue:#3a63b8;
  --m-bronze:#8a5a2b; --m-silver:#5f6b78; --m-plat:#3d6f8a; --m-master:#7a3d8a;
  /* the night, for the one dark thing on a page (the band is kalos.css's) */
  --night:#141634; --dlg:#171d3a; --lamp:#ffd56b; --cream:#fff4d6; --cream2:#cfd1f2;
  --cream-line:rgba(255,244,214,.6); --cream-wash:rgba(255,244,214,.08); --night-step:rgba(0,0,0,.35); --night-veil:rgba(23,29,58,.5);
  --glint:rgba(255,255,255,.55); --glint-2:rgba(255,255,255,.8); --cream-wash-2:rgba(255,244,214,.14); --inset-well:rgba(44,36,20,.05); --sheet-shadow:rgba(0,0,0,.4); --chip-lip:rgba(0,0,0,.25);
  --shade:rgba(70,55,20,.09); --shade-2:rgba(70,55,20,.07); --shade-3:rgba(70,55,20,.10); --shade-deep:rgba(70,55,20,.2); --shade-sheet:rgba(0,0,0,.28);
  /* elevation: one lift, by shadow only; the 1px contact shadow is the edge */
  --lift:inset 0 1px 0 var(--white-soft),inset 0 -2px 0 rgba(44,36,20,.04),0 1px 2px var(--shade),0 4px 8px -2px var(--shade-2),0 16px 22px -12px var(--shade-3);
  --lift-up:inset 0 1px 0 var(--white-soft),inset 0 -2px 0 rgba(44,36,20,.04),0 0 0 1px var(--hair-2),0 1px 1px var(--shade-2),0 3px 4px -1px var(--shade-2),0 12px 18px -6px var(--shade),0 36px 48px -22px var(--shade-deep);
  /* flat keys (11-05: the 3D lip and the glow were the "AI generated" look Adam rejected; same recipe as kalos.css) */
  --key:0 1px 2px rgba(0,0,0,.2);
  --key-hover:0 2px 4px rgba(0,0,0,.18);
  --key-down:inset 0 2px 3px rgba(0,0,0,.18);
  --e-out:cubic-bezier(.16,1,.3,1); --e-ui:cubic-bezier(.2,0,0,1);
  --disp:"Silkscreen",system-ui,sans-serif; --body-f:"Nunito",system-ui,sans-serif;
  /* the 18 types, the site's own chips */
  --t-normal:#8a8574; --t-fire:#dd6610; --t-water:#2f7fd0; --t-electric:#c19406; --t-grass:#4e9c33; --t-ice:#3f9fb0;
  --t-fighting:#b23520; --t-poison:#8a3f97; --t-ground:#a5762f; --t-flying:#6c93d4; --t-psychic:#d43f70; --t-bug:#7a8c1c;
  --t-rock:#96803a; --t-ghost:#56508c; --t-dragon:#5138c0; --t-dark:#55463d; --t-steel:#6f8290; --t-fairy:#cf5f92;
  /* the names the older page scripts and kalos.css still ask for */
  --bg:var(--paper-0); --surface:var(--paper-1); --bg2:var(--well); --line:var(--hair); --line2:var(--hair-2);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{font-family:var(--body-f);background:var(--paper-0);color:var(--body);font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;font-kerning:normal}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--dlg);outline-offset:3px;border-radius:6px}
img{max-width:100%}
h1{font-family:var(--body-f);color:var(--ink);font-weight:700;line-height:1.1;letter-spacing:-.024em;text-wrap:balance;font-size:clamp(1.75rem,3.4vw,2.25rem);margin:8px 0 10px;overflow-wrap:break-word;min-width:0}
h2,h3{font-family:var(--body-f);color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:-.014em;text-wrap:balance}
h2{font-size:1.25rem;margin:28px 0 10px}
h3{font-size:1rem;margin:0 0 8px}
p{text-wrap:pretty}
b,strong{font-weight:700}
::selection{background:var(--y-soft);color:var(--ink)}
/* the same 1160px measure and 22px gutter as the nav and the page band, so every page shares one left edge */
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
@media (max-width:820px){.wrap{padding:0 16px}}
main{padding:28px 0 60px;min-height:60vh}
main.wrap{padding-top:28px}
.lead{max-width:62ch;margin-bottom:16px}
.note{font-size:.875rem;color:var(--mut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── the buttons: the yellow key (flat, one edge), the paper key (ghost), a small text button ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-family:var(--body-f);
  font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:-.005em;color:var(--on-y);border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  background:var(--y);border:1px solid var(--y-deep);box-shadow:var(--key);
  transition:transform .12s var(--e-ui),box-shadow .15s var(--e-ui),background-color .15s var(--e-ui)}
.btn:hover{background-color:var(--y2);text-decoration:none;box-shadow:var(--key-hover)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--key-down)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--paper-1);color:var(--ink);border-color:var(--hair-2);box-shadow:none}
.btn.ghost:hover{background:var(--paper-top);border-color:var(--hair-3)}
.btn.ghost:active{transform:translateY(0) scale(.985);box-shadow:inset 0 1px 2px var(--shade)}
.btn.ghost:disabled{box-shadow:inset 0 0 0 1px var(--hair),0 2px 0 var(--hair)}
.btn.sm{padding:8px 14px;font-size:.9rem;border-radius:8px}
/* in the night band a ghost key is cream on navy */
.kband .btn.ghost{background:var(--cream-wash);color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream-line),0 4px 0 var(--night-step)}
.kband .btn.ghost:hover{background:var(--cream-wash-2);box-shadow:inset 0 0 0 2px var(--cream),0 4px 0 var(--night-step)}
.kband .btn.ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--cream),0 1px 0 var(--night-step)}
.kband .btn:focus-visible,.kband a:focus-visible{outline-color:var(--lamp)}
.linkish,button.linkish{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;display:block;text-align:left}
.linkish:hover{text-decoration-thickness:2px}

/* ── the plate: one lifted sheet of lighter paper; the title is a ruled line, not a bar ────────────── */
.panel{background:var(--paper-1);border:0;border-radius:16px;padding:20px 22px;box-shadow:var(--lift)}
.panel.plate{border:0;border-radius:16px;padding:20px 22px;box-shadow:var(--lift);overflow:visible;outline:0;
  background:radial-gradient(60% 80% at 20% -20%,var(--glint-2),transparent),var(--paper-1)}
.panel.plate>h2:first-child,.panel.plate>h2.ptitle{margin:0 0 16px;padding:0 0 12px;background:none;border:0;border-bottom:1px solid var(--hair-2);
  color:var(--ink);font-size:1.1875rem;letter-spacing:-.014em}
.panel.plate>h3{margin-top:18px}
.panel+.panel,.panel.plate+.panel.plate,.result{margin-top:16px}
@media (max-width:520px){.panel,.panel.plate{padding:16px 16px;border-radius:14px}}
.center{text-align:center;max-width:560px;margin:40px auto}
.center .btn{margin:14px 0 10px}

/* ── the trainer rail: where you are inside your own pages, under the band ─────────────────────────── */
.tnav{background:var(--paper-1);box-shadow:inset 0 -1px 0 var(--hair-2),inset 0 1px 0 var(--hair)}
.tnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tnav .wrap::-webkit-scrollbar{display:none}
.tnav a{display:inline-flex;align-items:center;gap:8px;padding:13px 12px 11px;font-weight:600;font-size:.95rem;color:var(--body);white-space:nowrap;
  border-bottom:3px solid transparent;text-decoration:none;transition:color .15s var(--e-ui)}
.tnav a:hover{color:var(--ink)}
.tnav a.on{color:var(--ink);border-bottom-color:var(--y)}
.tnav a:focus-visible{outline-offset:-3px;border-radius:0}
@media (max-width:820px){.tnav a{padding:12px 10px 10px;font-size:.9rem}}

/* ── skeletons: the shape of what is coming, at the size it will be; a slow breath, still under reduced motion ──── */
.skel{display:block;background:var(--well);border-radius:8px;animation:skpulse 1.8s var(--e-ui) infinite}
.skel.t{height:.95em;margin:.35em 0;border-radius:5px}
.skel.t.w2{width:40%}.skel.t.w3{width:60%}.skel.t.w4{width:80%}
.skel.h{height:1.6em;width:46%;margin-bottom:12px}
.skel.tile{height:84px;border-radius:12px}
.skel.row{height:52px;margin-top:10px;border-radius:10px}
.skel.sq{width:96px;height:96px;border-radius:12px;flex:none}
.skcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0 18px}
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.skgrid .skel{height:150px;border-radius:14px}
@keyframes skpulse{50%{opacity:.5}}

/* ── the welcome: what signing in gets you, on one plate ─────────────────────────────────────────────── */
.hello{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 40px;align-items:start;margin:8px 0 0}
.hello h2{margin:0 0 10px;font-size:1.5rem;letter-spacing:-.02em}
.hello .lead{margin-bottom:18px}
.hello .btn{margin:0 0 14px}
.hello .note{max-width:44ch}
.gets{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.gets li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair-2)}
.gets img{width:60px;height:60px;image-rendering:pixelated;display:block}
.gets li>div>b{display:block;color:var(--ink);font-size:1.0625rem}
.gets span{color:var(--body);font-size:.95rem}
@media (max-width:820px){.hello{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ── the trainer header: the name, the five numbers as tiles ──────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0 6px}
.card{background:var(--paper-1);border:0;border-radius:12px;padding:12px 14px;box-shadow:var(--lift)}
.card b{display:block;font-family:var(--body-f);font-size:1.5rem;color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.card span{font-size:.84rem;color:var(--mut);font-weight:600}
.tabs{display:flex;gap:6px;margin:20px 0 14px;border-bottom:1px solid var(--hair-2);flex-wrap:wrap}
.tabs button,.tabs a{font:inherit;font-weight:700;background:none;border:0;padding:10px 14px;color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .15s var(--e-ui)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--y)}
.tabs button:focus-visible{outline-offset:-3px;border-radius:0}

/* ── forms and filters ───────────────────────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters input[type=search],.filters select,.field input,.field select,.filters input[list]{font:inherit;font-size:.95rem;padding:9px 11px;border-radius:9px;
  border:1px solid var(--hair-2);background:var(--paper-1);color:var(--ink);min-width:0;box-shadow:inset 0 1px 2px var(--inset-well);
  transition:border-color .15s var(--e-ui),box-shadow .15s var(--e-ui)}
.filters input:hover,.filters select:hover,.field input:hover,.field select:hover{border-color:var(--hair-3)}
.filters input:focus,.filters select:focus,.field input:focus,.field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--y-soft)}
.filters input[type=search]{flex:1 1 200px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;padding:8px 12px;border-radius:8px;border:1px solid var(--hair-2);background:var(--paper-1);
  color:var(--ink);cursor:pointer;user-select:none;transition:background-color .15s var(--e-ui),border-color .15s var(--e-ui)}
.chip:hover{border-color:var(--hair-3);background:var(--paper-top)}
.chip:has(input:checked){background:var(--well);border-color:var(--hair-3)}
.chip:has(input:focus-visible){outline:3px solid var(--dlg);outline-offset:2px}
.chip input{accent-color:var(--gold)}
.count{font-size:.875rem;color:var(--mut);margin:0 0 10px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label,.lbl{font-size:.84rem;font-weight:600;color:var(--body)}
.field input,.field select{width:100%}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.pick{display:flex;gap:12px;align-items:center}
.pick img{width:96px;height:96px;image-rendering:pixelated;background:var(--well);border-radius:12px;flex:none}
.ivrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:4px}
.ivrow label{display:flex;flex-direction:column;align-items:center;font-size:.75rem;font-weight:600;color:var(--mut);background:var(--paper-1);border:1px solid var(--hair-2);border-radius:9px;padding:5px 2px;cursor:pointer;text-align:center;
  transition:background-color .15s var(--e-ui),border-color .15s var(--e-ui),color .15s var(--e-ui)}
.ivrow label:hover{border-color:var(--hair-3)}
.ivrow input{accent-color:var(--good);margin-top:3px;width:18px;height:18px}
.ivrow label:has(input:checked){background:var(--dlg);border-color:var(--dlg);color:var(--lamp)}
.ivrow label:has(input:focus-visible){outline:3px solid var(--dlg);outline-offset:2px}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;padding-top:24px}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.row2{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:10px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:860px){.slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.slots{grid-template-columns:1fr}}
.slot{border:1px solid var(--hair-2);border-radius:12px;padding:12px;background:var(--paper-2)}
.slot .pick{display:flex;gap:8px;align-items:center}
.slot .pick img{width:96px;height:96px;image-rendering:pixelated;flex:none}
.slot .mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.slot .mv input{font:inherit;font-size:.875rem;padding:7px 9px;border-radius:8px;border:1px solid var(--hair-2);background:var(--paper-1);color:var(--ink);width:100%;min-width:0}
.slot .mv input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--y-soft)}

/* ── the box: 96px art on a tile, the name under it ──────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.mon{position:relative;background:var(--paper-1);border:0;border-radius:14px;padding:8px 8px 10px;text-align:center;cursor:pointer;font:inherit;color:inherit;
  box-shadow:var(--lift);transition:box-shadow .3s var(--e-ui),transform .3s var(--e-ui)}
.mon:hover{box-shadow:var(--lift-up);transform:translateY(-2px)}
.mon:active{transform:translateY(0);transition-duration:.12s}
.mon:focus-visible{outline:3px solid var(--dlg);outline-offset:2px}
.mon img{width:96px;height:96px;image-rendering:pixelated;display:block;margin:0 auto}
.mon .nm{display:block;font-weight:700;color:var(--ink);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon .sub{display:block;font-size:.78rem;color:var(--mut)}
.mon .tag{position:absolute;top:6px;left:8px;font-size:.75rem;font-weight:600;color:var(--mut)}
.mon .star{position:absolute;top:5px;right:8px;color:var(--gold);font-size:.9rem}
.more{display:block;margin:16px auto 0}
@media (max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}

/* ── the detail sheet ────────────────────────────────────────────────────────────────────────────── */
dialog.sheet{margin:auto;border:0;border-radius:18px;padding:0;max-width:560px;width:calc(100% - 24px);background:var(--paper-1);color:var(--body);box-shadow:0 30px 60px -20px var(--sheet-shadow)}
dialog.sheet::backdrop{background:var(--night-veil)}
.sheet .top{display:flex;gap:14px;align-items:center;padding:18px 18px 8px}
.sheet .top img{width:96px;height:96px;image-rendering:pixelated;background:var(--well);border-radius:14px}
.sheet .x{position:absolute;top:10px;right:12px;font:inherit;font-size:1.3rem;background:none;border:0;color:var(--mut);cursor:pointer;width:36px;height:36px;border-radius:8px}
.sheet .x:hover{background:var(--well);color:var(--ink)}
.sheet .body{padding:4px 18px 18px}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:.9rem;margin:8px 0 12px}
.facts dt{color:var(--mut);font-weight:600}
.facts dd{color:var(--ink)}
table.stats{width:100%;border-collapse:collapse;font-size:.88rem}
table.stats th{text-align:left;font-weight:600;color:var(--mut);padding:3px 0;width:72px}
table.stats td{padding:3px 6px;color:var(--ink);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:5px;background:var(--well);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--y)}
.bar i.max{background:var(--good)}
.up{color:var(--bad)}.down{color:var(--blue)}
.moves{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.moves span{background:var(--paper-2);border:1px solid var(--hair-2);border-radius:8px;padding:3px 9px;font-size:.85rem;color:var(--ink);font-weight:600}

/* ── the Pokédex: regions as ruled tiles, 96px art in the grid ──────────────────────────────────── */
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.region{background:var(--paper-1);border:0;border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;text-align:left;color:inherit;box-shadow:var(--lift);
  transition:box-shadow .3s var(--e-ui)}
.region:hover{box-shadow:var(--lift-up)}
.region[aria-pressed=true]{box-shadow:var(--lift),inset 0 0 0 2px var(--gold)}
.region b{font-family:var(--body-f);font-weight:700;color:var(--ink);font-size:1rem}
.region .num{float:right;font-size:.82rem;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.region .bar{margin-top:8px}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
.dx{background:var(--paper-1);border:0;border-radius:10px;padding:4px;text-align:center;position:relative;box-shadow:inset 0 0 0 1px var(--hair)}
.dx img{width:96px;height:96px;image-rendering:pixelated}
.dx span{display:block;font-size:.75rem;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.dx.unseen img{filter:brightness(0);opacity:.18}
.dx.seen img{opacity:.45;filter:grayscale(1)}
.dx .star{position:absolute;top:2px;right:5px;color:var(--gold);font-size:.75rem}
.weekdex-h{font-size:.95rem;font-weight:700;margin:14px 0 2px;color:var(--ink)}
.weekdex{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.weekdex img{width:96px;height:96px;image-rendering:pixelated}

/* ── the breeding calculator and planner: ruled lists with the games' menu cursor ────────────────── */
.verdict{font-family:var(--body-f);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.verdict.no{color:var(--bad)}
.hatch{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.hatch div{display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--hair-2);border-radius:12px;padding:6px 12px 6px 6px;font-weight:700;color:var(--ink)}
.hatch img{width:96px;height:96px;image-rendering:pixelated}
.odds{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.odds .card b{font-size:1.1rem}
ul.tips{padding-left:20px;margin-top:8px}
ul.tips li{margin-bottom:4px}
.plan-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
ol.steps{list-style:none;margin:6px 0 0;border-top:1px solid var(--hair-3)}
ol.steps li{position:relative;display:flex;gap:12px;align-items:center;padding:8px 4px 8px 26px;border-bottom:1px solid var(--hair-2)}
ol.steps li::before{content:"";position:absolute;left:6px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:8px solid var(--dlg);border-right:0}
ol.steps li.goal{background:var(--good-soft)}
ol.steps li.goal::before{border-left-color:var(--good)}
ol.steps img{width:96px;height:96px;image-rendering:pixelated;flex:none}
ol.steps b{color:var(--ink)}
.ivdots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.ivdots i{width:9px;height:9px;background:var(--hair-3)}
.ivdots i.on{background:var(--good)}
.ivdots i.off{background:transparent;border:1px dashed var(--hair-3)}
ol.bestpairs{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hair-3)}
ol.bestpairs li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 4px 12px 26px;border-bottom:1px solid var(--hair-2)}
ol.bestpairs li.top{background:var(--good-soft)}
ol.bestpairs li.top::before{content:"";position:absolute;left:6px;top:50px;border:6px solid transparent;border-left:8px solid var(--good);border-right:0}
ol.bestpairs .who{display:flex;flex:none}
ol.bestpairs .who img{width:96px;height:96px;image-rendering:pixelated}
ol.bestpairs p{margin:0 0 4px}
ol.bestpairs .nm b{color:var(--ink)}
ol.bestpairs .btn{margin-top:6px;padding:7px 12px;font-size:.875rem}
@media (max-width:480px){ol.bestpairs li{flex-direction:column;gap:6px}}
.support{display:flex;gap:14px;align-items:center;margin-top:16px}
.support img{image-rendering:pixelated;flex:none}
#daycare-row{margin:0 0 10px}
#cplan{margin:0 0 16px}
#cplan h3{margin:16px 0 4px}
ul.cplan{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--hair-3)}
ul.cplan li{display:flex;gap:12px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--hair-2)}
ul.cplan img{width:96px;height:96px;image-rendering:pixelated;flex:none}
ul.cplan b{display:block;color:var(--ink)}
ul.cplan span{color:var(--body);font-size:.92rem}

/* ── My progress ─────────────────────────────────────────────────────────────────────────────────── */
ul.pgrows{list-style:none;margin:0 0 14px;padding:0}
ul.pgrows li{display:grid;grid-template-columns:minmax(110px,30%) minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--hair-2)}
ul.pgrows .k{color:var(--ink);font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
ul.pgrows b{font-size:.88rem;color:var(--body);white-space:nowrap;font-variant-numeric:tabular-nums}
ul.pgeggs{list-style:none;margin:8px 0 0;padding:0}
ul.pgeggs li{padding:8px 0;border-top:1px solid var(--hair-2)}
ul.pgeggs b{display:block;color:var(--ink)}
ul.pgeggs span{color:var(--body);font-size:.92rem}
.pgmeter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:4px 0 10px}
.pgmeter span{font-weight:600;color:var(--ink);font-size:.9rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){ul.pgrows li{grid-template-columns:minmax(0,1fr) auto}ul.pgrows .bar{grid-column:1/-1;grid-row:2}}

/* ── tables (stat calculator, team checker, usage, prices): ruled rows, numbers right and tabular ─── */
table.st{width:100%;border-collapse:collapse;margin-top:4px;border-top:1px solid var(--hair-3);font-variant-numeric:tabular-nums}
table.st th,table.st td{padding:8px 4px;border-bottom:1px solid var(--hair-2);text-align:left;vertical-align:middle}
table.st th{font-size:.8rem;font-weight:600;color:var(--mut)}
table.st th:nth-child(n+2):not(.bar){text-align:right}
table.st td:nth-child(n+2):not(.bar){text-align:right}
#ivfind th:nth-child(2),#ivfind td:nth-child(2){text-align:left}
table.st td.n{font-weight:700;color:var(--ink);white-space:nowrap}
table.st td.n .up{color:var(--bad)}table.st td.n .dn{color:var(--blue)}
table.st td.v{font-family:var(--body-f);font-weight:700;font-size:1rem;color:var(--ink);text-align:right;width:52px;font-variant-numeric:tabular-nums}
table.st input{font:inherit;width:62px;padding:6px 6px;-moz-appearance:textfield;appearance:textfield;border-radius:7px;border:1px solid var(--hair-2);background:var(--paper-1);color:var(--ink);text-align:right}
table.st input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--y-soft)}
table.st td.bar,table.st th.bar{width:34%;height:auto;border-radius:0;overflow:visible;min-width:0;background:linear-gradient(var(--well),var(--well)) left center/100% 10px no-repeat}
table.st th.bar{background:none}
table.st td.bar i{display:block;height:10px;background:var(--good);min-width:2px}
table.st td.bar i.lo{background:var(--y-deep)}table.st td.bar i.vlo{background:var(--bad)}
table.st td.ivs{font-weight:700;color:var(--ink)}
table.st td.ivs.no{color:var(--bad)}
.evline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-weight:600}
.evline .over{color:var(--bad)}
@media (max-width:520px){.row2{grid-template-columns:1fr 1fr}.row2 .field:first-child{grid-column:1/-1}table.st td.bar{display:none}table.st th.bar{display:none}table.st input{width:56px;padding:5px 4px}}
table.st input::-webkit-outer-spin-button,table.st input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ty{display:inline-block;min-width:68px;padding:2px 6px;border-radius:4px;font-size:.75rem;font-weight:700;color:var(--chip-ink);text-align:center;box-shadow:inset 0 -2px 0 var(--chip-lip)}
.ty.normal{background:var(--t-normal)}.ty.fire{background:var(--t-fire)}.ty.water{background:var(--t-water)}.ty.electric{background:var(--t-electric)}
.ty.grass{background:var(--t-grass)}.ty.ice{background:var(--t-ice)}.ty.fighting{background:var(--t-fighting)}.ty.poison{background:var(--t-poison)}
.ty.ground{background:var(--t-ground)}.ty.flying{background:var(--t-flying)}.ty.psychic{background:var(--t-psychic)}.ty.bug{background:var(--t-bug)}
.ty.rock{background:var(--t-rock)}.ty.ghost{background:var(--t-ghost)}.ty.dragon{background:var(--t-dragon)}.ty.dark{background:var(--t-dark)}
.ty.steel{background:var(--t-steel)}.ty.fairy{background:var(--t-fairy)}
/* a matrix reads best at its natural width: stretched to the plate, each 2x cell became a 120px slab */
table.st.tg{width:auto;min-width:min(100%,520px)}
@media (min-width:760px){table.st.tg{min-width:640px}}
table.tg td.m,table.tg th.m{text-align:center!important;font-weight:700;width:34px;font-size:.875rem;font-variant-numeric:tabular-nums}
@media (min-width:760px){table.tg td.m{width:48px}}
table.tg td.m.x4{color:var(--chip-ink);background:var(--bad)}table.tg td.m.x2{color:var(--bad)}
table.tg td.m.h{color:var(--blue)}table.tg td.m.q{color:var(--chip-ink);background:var(--blue)}table.tg td.m.z{color:var(--chip-ink);background:var(--mut)}
table.tg tr.hole{background:var(--bad-soft)}
table.tg th.m img{width:96px;height:96px;image-rendering:pixelated;display:block;margin:0 auto}
.tgwrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.verdicts{margin:10px 0 0;padding-left:20px}
.verdicts li{margin-bottom:4px}
.covgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 16px;border-top:1px solid var(--hair-3);margin-top:6px}
.covgrid div{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--hair-2);font-weight:600;font-size:.875rem}
.covgrid .se{color:var(--good)}.covgrid .nv{color:var(--mut)}.covgrid .bd{color:var(--bad)}
#result .big{font-size:1.25rem;font-weight:700;color:var(--ink);margin:4px 0 8px}
#result h3{margin:0 0 4px}
.umon{display:flex;align-items:center;gap:10px}
.umon img{width:96px;height:96px;image-rendering:pixelated;flex:none}
table.st.usage td.v,table.st.usage th:nth-child(n+3){text-align:right;white-space:nowrap;width:1%;padding-left:18px}
table.st.usage th:nth-child(2){text-align:left}
table.st.usage td{padding:4px 4px}
/* usage v2 (2026-11-07): tap a row for its moves; pairs; the winning teams */
table.st.usage td.v small{color:var(--mut);font-weight:400;font-size:.76rem}table.st.usage td.few span{color:var(--mut);font-weight:400;font-size:.8rem}
table.st.usage tr.has-moves{cursor:pointer}table.st.usage tr.has-moves:hover td,table.st.usage tr.has-moves:focus-visible td{background:var(--well)}
table.st.usage tr.has-moves td:nth-child(2) .umon>span:last-child::after{content:" ▾";color:var(--mut);font-size:.8em}table.st.usage tr.has-moves[aria-expanded="true"] td:nth-child(2) .umon>span:last-child::after{content:" ▴"}
table.st.usage tr.umoves-row td{padding:2px 8px 10px 44px;text-align:left;width:auto;white-space:normal}
ul.umoves{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}ul.umoves li{font-size:.84rem}ul.umoves li b{display:block;color:var(--ink)}ul.umoves li span{color:var(--mut)}
.upair{display:inline-flex;align-items:center;gap:6px}.upair i{font-style:normal;color:var(--mut)}.upair .umon img{width:32px;height:32px}
ul.uteams{list-style:none;margin:0;padding:0}ul.uteams li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair-2)}
ul.uteams .six{display:flex;flex-wrap:wrap;gap:4px 12px}ul.uteams .six .umon{font-size:.84rem}ul.uteams .tv{text-align:right;white-space:nowrap;font-size:.84rem}ul.uteams .tv b{display:block;color:var(--ink)}ul.uteams .tv span{color:var(--mut)}
@media (max-width:640px){ul.uteams li{flex-direction:column;align-items:flex-start}ul.uteams .tv{text-align:left}}
table.st.usage td.n{width:1%;padding-right:12px}
#one .top{display:flex;align-items:center;gap:12px;margin-top:12px}
#one .top img{image-rendering:pixelated;width:96px;height:96px}

/* ── the tools hub: a ruled list with the menu cursor ────────────────────────────────────────────── */
.toollist{list-style:none;margin:-4px 0 0}
.toollist li+li{border-top:1px solid var(--hair-2)}
.toollist a{position:relative;display:flex;gap:14px;align-items:center;padding:14px 6px 14px 28px;color:inherit;border-radius:8px;transition:background-color .15s var(--e-ui)}
.toollist a::before{content:"";position:absolute;left:8px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:8px solid var(--dlg);border-right:0}
.toollist a:focus-visible{outline:3px solid var(--dlg);outline-offset:-3px;background:var(--paper-2)}
.toollist a:hover{background:var(--paper-2);text-decoration:none}
.toollist img{width:56px;height:56px;image-rendering:pixelated;flex:none}
.toollist b{display:block;color:var(--ink);font-size:1.05rem}
@media (max-width:520px){.toollist a{padding:14px 4px 14px 22px;gap:12px}.toollist a::before{left:4px}.toollist img{width:48px;height:48px}}

/* ── public trainer profiles: the card as ruled rows ─────────────────────────────────────────────── */
.tcard{display:flex;gap:18px;align-items:center}
.tcard img{width:96px;height:96px;image-rendering:pixelated;flex:none;background:var(--well);border:0;border-radius:12px}
.tcard .who b{display:block;font-family:var(--body-f);font-weight:700;font-size:1.35rem;color:var(--ink);line-height:1.2;letter-spacing:-.02em}
.tcard .who span{color:var(--mut);font-weight:600}
.trows{list-style:none;border-top:1px solid var(--hair-3);margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.trows li{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid var(--hair-2);font-weight:600}
.trows li b{font-family:var(--body-f);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:520px){.trows{grid-template-columns:1fr}}
.tmedals h3{margin:14px 0 8px;font-size:1rem}
.tmedals ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tmedals li{padding:4px 12px;border-radius:8px;border:1px solid var(--hair-2);font-size:.88rem;background:var(--paper-2)}
.tmedals li.t1 b{color:var(--m-bronze)}.tmedals li.t2 b{color:var(--m-silver)}.tmedals li.t3 b{color:var(--gold)}.tmedals li.t4 b{color:var(--m-plat)}.tmedals li.t5 b{color:var(--m-master)}

/* ── /battles: the list by day, the replay viewer ─────────────────────────────────────────────────
   The list: each row is the match-up, the two leads at x1 facing each other, the result word in its colour, the foe,
   when and how long. The viewer: the result as a banner, both teams as 96px figures with name and level, the stepper
   (Previous, Play, Next, speed, a turn readout and a hairline progress), and the log with the lines that matter weighted:
   a move name bold, a faint in the bad colour with a rule on its left, a hit line in gold, a status line in the ink. */
.bday{margin:0 0 6px}
.bday h3{font-size:.84rem;font-weight:600;color:var(--mut);margin:18px 0 2px;padding:0 4px}
.bday:first-child h3{margin-top:4px}
.blist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.blist li{border-bottom:1px solid var(--hair-2)}
.brow{display:grid;grid-template-columns:96px minmax(0,1fr) 96px;gap:4px 14px;align-items:center;padding:6px 4px;color:inherit;border-radius:10px;
  transition:background-color .15s var(--e-ui)}
.brow:hover{background:var(--paper-2);text-decoration:none}
.brow:focus-visible{outline:3px solid var(--dlg);outline-offset:-3px}
.brow img{width:96px;height:96px;image-rendering:pixelated;display:block}
.brow .them img{transform:scaleX(-1)}
.brow .mid{min-width:0}
.brow .res{font-weight:700;font-size:1.0625rem;color:var(--ink)}
.brow .res.won{color:var(--good)}.brow .res.lost{color:var(--bad)}.brow .res.draw{color:var(--mut)}
.brow .bvs{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.brow .when{display:block;font-size:.875rem;color:var(--mut)}
.brow .teams{display:block;font-size:.84rem;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
@media (max-width:520px){.brow{grid-template-columns:96px minmax(0,1fr);gap:2px 10px}.brow .them{display:none}}
.empty{text-align:center;padding:28px 12px 8px}
.empty img{width:60px;height:60px;image-rendering:pixelated;display:block;margin:0 auto 6px;opacity:.9}
.empty h3{font-size:1.25rem;margin:6px 0 6px}
.empty p{max-width:46ch;margin:0 auto 14px}
.rhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin:0 0 14px}
.rhead .back{font-weight:600}
.rbanner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:14px 18px;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2);margin:0 0 18px}
.rbanner .word{font-weight:700;font-size:1.75rem;letter-spacing:-.025em;line-height:1;color:var(--ink);grid-row:span 2}
.rbanner.won{background:var(--good-soft)}.rbanner.won .word{color:var(--good)}
.rbanner.lost{background:var(--bad-soft)}.rbanner.lost .word{color:var(--bad)}
.rbanner .vs{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.rbanner .meta{font-size:.875rem;color:var(--mut)}
.rteams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0 0 18px}
.rteam h3{font-size:.84rem;font-weight:600;color:var(--mut);margin:0 0 6px}
.rteam ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 4px}
.rteam li{width:96px;text-align:center;transition:opacity .3s var(--e-ui)}
.rteam img{width:96px;height:96px;image-rendering:pixelated;display:block}
.rteam.them img{transform:scaleX(-1)}
.rteam .nm{display:block;font-size:.78rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rteam .lv{display:block;font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}
.rteam li.out{opacity:.4}
.rteam li.out img{filter:grayscale(1)}
.rteam li.out .lv{color:var(--bad);font-weight:700}
@media (max-width:820px){.rteams{grid-template-columns:1fr}}
.rctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.rctl .turn{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto}
.rctl select{font:inherit;font-size:.9rem;font-weight:600;padding:8px 10px;border-radius:8px;border:1px solid var(--hair-2);background:var(--paper-1);color:var(--ink)}
.rctl select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--y-soft)}
.rprog{height:4px;border-radius:3px;background:var(--well);margin:4px 0 14px;overflow:hidden}
.rprog i{display:block;height:100%;width:100%;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--e-ui)}
.rhint{font-size:.8rem;color:var(--mut);margin:0 0 10px}
.rhint kbd{font:inherit;font-weight:700;color:var(--ink);background:var(--paper-2);border:1px solid var(--hair-2);border-radius:5px;padding:0 6px}
.rlog{border-top:1px solid var(--hair-3)}
.rlog h3{margin:14px 0 4px;font-size:.84rem;font-weight:600;color:var(--mut)}
.rlog h3:first-child{margin-top:12px}
.rlog p{margin:0;padding:3px 0 3px 12px;border-left:3px solid transparent;font-size:.98rem}
.rlog p b{color:var(--ink)}
.rlog p.move{color:var(--ink)}
.rlog p.faint{color:var(--bad);font-weight:700;border-left-color:var(--bad)}
.rlog p.crit,.rlog p.super{color:var(--gold);font-weight:700}
.rlog p.resist,.rlog p.immune{color:var(--mut);font-weight:600}
.rlog p.status{color:var(--ink);font-weight:600}
.rlog p.switch{color:var(--body);font-weight:600;border-left-color:var(--hair-3)}
.rlog p.end{color:var(--ink);font-weight:700;border-left-color:var(--y);margin-top:6px}
.rlog p.now{background:var(--paper-2);border-radius:0 6px 6px 0}
.rcopy{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair-2)}
.rcopy .note{margin:0}
/* the sign-out link in the nav reads as a quiet text link */
nav.kn .links a.text.quiet{color:var(--cream2);font-weight:600}

/* ── motion: the breath of a skeleton and the lift of a tile are the only moving things; reduced motion stops both ── */
@media (prefers-reduced-motion:reduce){
  .skel{animation:none;opacity:.8}
  .mon,.region,.brow,.rteam li,.rprog i,.btn,.chip,.tabs button,.tnav a,.filters input,.filters select,.field input,.field select,.ivrow label,.toollist a{transition:none!important}
  .mon:hover{transform:none}
}

/* ── /me → Parties (2026-11-07, dark behind SITE_PARTY_EDIT; assets/party-edit.js) ─────────────────────────────── */
.pe-card .pe-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.pe-card .pe-head h3{margin:0 auto 0 0;font-size:1.15rem;overflow-wrap:anywhere}
.pe-card .pe-head input{flex:1 1 200px;min-width:0;font:inherit;font-size:16px;padding:8px 10px;border-radius:8px;border:1px solid var(--hair-2);background:var(--paper-top);color:var(--ink)}
.pe-card .pe-head input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--y-soft)}
.panel.plate.pe-active{box-shadow:var(--lift),inset 0 0 0 2px var(--gold)}
.pe-card>.btn{margin-top:12px}
.pe-badge{font-size:.8rem;font-weight:700;color:var(--gold);padding:4px 10px;border-radius:999px;background:var(--well)}
.pe-slot{cursor:default}
.pe-slot:hover{transform:none;box-shadow:none}
.pe-ctl{display:flex;justify-content:center;gap:4px;margin-top:6px}
.pe-ctl .btn.sm{min-width:44px;min-height:44px;padding:6px 8px}
.pe-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;margin-bottom:12px;border-radius:10px;background:var(--well)}
.pe-confirm p{margin:0 auto 0 0;flex:1 1 220px}
.btn.pe-danger{background:var(--bad);color:var(--chip-ink);border-color:var(--bad)}
.btn.pe-danger:hover{background:var(--bad);filter:brightness(.88)}
.pe-pick{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair-2)}
.pe-bad{color:var(--bad);font-weight:600}