/* ==========================================================================
   Pokopia Wiki — design system
   Calm, paper-warm, mobile-first. One accent (moss), one warm highlight (clay).
   ========================================================================== */

:root {
  /* palette — light */
  --paper: #faf7f1;
  --paper-2: #f3eee4;
  --surface: #ffffff;
  --ink: #1d2621;
  --ink-2: #46554c;
  --muted: #616f66;
  --line: #e6dfd2;
  --line-2: #d5cbb9;
  --moss: #2b6f4f;
  --moss-soft: #e3f0e8;
  --clay: #96501f;
  --clay-soft: #f7ebe1;
  --sky: #2b6b8f;
  --shadow: 0 1px 2px rgba(29, 38, 33, .05), 0 8px 24px -12px rgba(29, 38, 33, .18);
  --shadow-sm: 0 1px 2px rgba(29, 38, 33, .06);

  --r-sm: 8px;
  --r: 14px;
  --ico: 64px;   /* item thumbnail on a list row; 72px from tablet up */
  --r-lg: 22px;
  --tap: 44px;

  /* Google Sans carries a Thai subset, so body copy stays in one face in both languages;
     Playpen Sans Thai covers Latin as well as Thai, so headings and navigation do too. */
  --font-body: "Google Sans", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playpen Sans Thai", "Playpen Sans", "Google Sans", ui-rounded, system-ui, sans-serif;

  --wrap: 1160px;
  --read: 68ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121614;
    --paper-2: #171d19;
    --surface: #1a211d;
    --ink: #e9efe9;
    --ink-2: #b9c6bd;
    --muted: #8d9d92;
    --line: #28312c;
    --line-2: #35403a;
    --moss: #6cc094;
    --moss-soft: #172a21;
    --clay: #e39a68;
    --clay-soft: #2b201a;
    --sky: #7ab8d8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121614;
  --paper-2: #171d19;
  --surface: #1a211d;
  --ink: #e9efe9;
  --ink-2: #b9c6bd;
  --muted: #8d9d92;
  --line: #28312c;
  --line-2: #35403a;
  --moss: #6cc094;
  --moss-soft: #172a21;
  --clay: #e39a68;
  --clay-soft: #2b201a;
  --sky: #7ab8d8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The filter hides rows with el.hidden, which only works through the UA rule
   [hidden]{display:none} — and any author `display` beats that. .row, .rows, .mon,
   .dex-grid and .sec-title all set one, so filtering silently did nothing without this. */
[hidden] { display: none !important; }
/* The type scale is all rem, so the root carries it. A percentage rather than a px so a
   reader who has raised their browser's font size still gets the benefit of it. */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:lang(th) { line-height: 1.85; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(1.65rem, 5.2vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
h3 { font-size: 1.06rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 16px); }
.prose { max-width: var(--read); }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.4rem; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.prose li + li { margin-top: .35em; }
.prose strong { font-weight: 600; color: var(--ink); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-right: auto; letter-spacing: 0; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand small { display: block; font-family: var(--font-body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1; margin-top: 2px; }
.icon-btn {
  width: var(--tap); height: var(--tap); flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); height: var(--tap); }
.lang-switch a { display: grid; place-items: center; padding: 0 13px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.lang-switch a[aria-current] { background: var(--moss); color: var(--surface); }

/* Header pieces that move between the bar and the drawer. .wide-only sets display:flex
   when shown, which is right for .lang-switch and .panel-tools but silently overrode
   .icon-btn's `display: grid; place-items: center` on the theme button — under flex,
   justify-items does nothing and the 19px icon packed into the top-left of its 44px
   circle. The button keeps its grid when shown. */
.wide-only { display: none; }
.narrow-only { display: flex; }
@media (min-width: 560px) {
  .wide-only { display: flex; }
  .icon-btn.wide-only { display: grid; }
  .narrow-only { display: none; }
}
.panel-tools { gap: 8px; align-items: center; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

/* nav drawer */
.nav-panel { display: none; border-top: 1px solid var(--line); padding: 12px 0 18px; }
.nav-panel[data-open] {
  display: block;
  /* The menu sits inside the sticky header, and a sticky element taller than the screen
     cannot be scrolled past its bottom — on a phone the last sections were out of reach.
     So the open panel is capped at the space below the header row and scrolls inside
     itself. --head-h is measured by app.js when the menu opens; 100vh is the fallback for
     browsers without dvh, which is the one that tracks a phone's collapsing URL bar. */
  max-height: calc(100vh - var(--head-h, 59px));
  max-height: calc(100dvh - var(--head-h, 59px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* while the menu is open the page behind it stays put, so a swipe scrolls the menu */
body.nav-open { overflow: hidden; }
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.nav-grid a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r-sm); font-family: var(--font-display); font-size: .92rem; color: var(--ink-2); }
.nav-grid a:hover { background: var(--paper-2); color: var(--ink); }
.nav-grid a[aria-current] { background: var(--moss-soft); color: var(--moss); font-weight: 600; }
.nav-grid svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav-sec { grid-column: 1/-1; font-family: var(--font-display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 4px; font-weight: 600; }

/* ---------- search ---------- */
.search-shell { position: fixed; inset: 0; z-index: 60; display: none; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px); }
.search-shell[data-open] { display: block; }
.search-box { width: min(100% - 24px, 660px); margin: 8vh auto 0; }
.search-input-row { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 6px 6px 14px; box-shadow: var(--shadow); }
.search-input-row > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.search-input-row input { flex: 1; border: 0; background: none; padding: 12px 0; font-size: 1.02rem; min-width: 0; }
.search-input-row input:focus { outline: none; }
.search-results { margin-top: 12px; max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); }
.sr-item:hover, .sr-item[data-sel] { background: var(--surface); }
.sr-item img { width: 34px; height: 34px; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.sr-kind { margin-left: auto; font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; flex: none; }
.sr-name { font-weight: 500; }
.sr-sub { font-size: .78rem; color: var(--muted); }
.sr-empty { padding: 24px; text-align: center; color: var(--muted); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 30px 0 34px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.eyebrow { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--moss); font-weight: 600; }
.lede { font-size: 1.08rem; color: var(--ink-2); max-width: 56ch; }

/* ---------- cards & grids ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.grid { display: grid; gap: 12px; }
.g-2 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }

/* dex grid */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mon {
  display: block; text-align: center; padding: 10px 6px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.mon:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.mon img { width: 68px; height: 68px; margin: 0 auto; object-fit: contain; }
.mon-no { font-size: .7rem; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mon-name { font-size: .8rem; font-weight: 600; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.mon-sub { font-size: .72rem; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* chips / tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip[aria-pressed="true"] { background: var(--moss); border-color: var(--moss); color: #fff; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--paper-2); color: var(--ink-2); }
.tag-moss { background: var(--moss-soft); color: var(--moss); }
.tag-clay { background: var(--clay-soft); color: var(--clay); }

/* type pills */
.type { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: #fff; }

/* table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }

/* Scrollbars inside the page were invisible on desktop, so a table that ran off the edge
   looked like it simply ended. Give every scrollable area a thin, always-visible one. */
.table-scroll, .chips-open, .search-results, .island-finds, .finds, .spec-mons, .fav-scroll { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.table-scroll::-webkit-scrollbar, .chips-open::-webkit-scrollbar,
.search-results::-webkit-scrollbar, .spec-mons::-webkit-scrollbar,
.fav-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.table-scroll::-webkit-scrollbar-track, .chips-open::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track, .spec-mons::-webkit-scrollbar-track,
.fav-scroll::-webkit-scrollbar-track { background: var(--paper-2); border-radius: 99px; }
.table-scroll::-webkit-scrollbar-thumb, .chips-open::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb, .spec-mons::-webkit-scrollbar-thumb,
.fav-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.table-scroll::-webkit-scrollbar-thumb:hover, .chips-open::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover { background: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--paper-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* list rows (items, recipes) */
.rows { display: grid; gap: 8px; }
.row {
  display: grid; grid-template-columns: var(--ico) 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
/* A row with a real picture gives it a fifth of the width; one that only has a line icon
   keeps the compact column, or it would be a big empty tile with a small glyph in it.
   Browsers without :has() fall back to the compact column, which is what it was before. */
.row:has(.row-pic) { grid-template-columns: minmax(var(--ico), 20%) 1fr; }

/* the tile fills its column, so it is a fifth of the row and stays square */
.row-ico { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); }
.row-ico svg { width: 30%; height: 30%; min-width: 22px; max-width: 52px; }
.row-name { font-weight: 600; font-size: .95rem; line-height: 1.4; }
.row-th { font-size: .82rem; color: var(--moss); }
.row-desc { font-size: 1rem; color: var(--ink-2); margin-top: 3px; }
.row-meta { font-size: .76rem; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.hab-mons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hab-mons a { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--paper-2); font-size: .78rem; font-weight: 500; }
.hab-mons a:hover { background: var(--moss-soft); color: var(--moss); }
.hab-mons img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.row { content-visibility: auto; contain-intrinsic-size: auto 120px; }
:target.row { outline: 2px solid var(--moss); outline-offset: 3px; }
.row { scroll-margin-top: 168px; }

/* Grid view. The rows are the same markup either way — only the container changes — so
   the toggle costs no extra HTML and keeps every id, filter and :target working. */
.rows.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.rows.as-grid > .row, .rows.as-grid > .row-wide { grid-template-columns: 1fr; align-content: start; }

/* In grid view the picture leads: a square about 80% of the card, centred above the text,
   rather than a thumbnail in a left-hand column. The icons are 250-500px sources, so there
   is resolution for it. */
.rows.as-grid .row-ico { width: 80%; height: auto; aspect-ratio: 1; justify-self: center; }
.rows.as-grid .row-pic { padding: 7%; }
.rows.as-grid .row-ico svg { width: 26%; height: 26%; }
.rows.as-grid .hab-pic { width: 100%; height: auto; aspect-ratio: 10 / 7; }

.count-row { display: flex; align-items: center; gap: 12px; }
.count-row .count { margin: 0; }
.view-switch { display: flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.view-switch button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--muted); }
.view-switch button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view-switch button[aria-pressed="true"] { background: var(--moss); color: var(--surface); }
@media (min-width: 640px) { :root { --ico: 72px; } }
.mat { font-size: .76rem; padding: 3px 9px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.mat b { color: var(--clay); font-variant-numeric: tabular-nums; }

/* item icons and habitat pictures (downloaded by scripts/sprites.mjs) */
.row-pic { object-fit: contain; padding: 6%; background: var(--paper-2); }
.mat { display: inline-flex; align-items: center; gap: 5px; }
.mat-ico { width: 24px; height: 24px; object-fit: contain; flex: none; }
.cell-item { display: flex; align-items: flex-start; gap: 9px; }
.cell-ico { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 7px; background: var(--paper-2); }
.mon-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.mon-chip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.mon-chip:hover { color: var(--moss); }

/* Pokemon shown large enough to recognise, for lists short enough to afford it. Uses the
   official artwork rather than the 96px sprite, which would blur at this size. */
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-top: 4px; }
.mon-tile { display: grid; justify-items: center; gap: 5px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.mon-tile img { width: 88px; height: 88px; object-fit: contain; }
.mon-tile span { font-size: .86rem; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.mon-tile:hover { border-color: var(--moss); background: var(--moss-soft); color: var(--moss); }

/* housemates: themed houses, and the per-Pokémon finder */
.mon-tile { position: relative; }
.hm-badge { position: absolute; top: 6px; right: 6px; font-size: .7rem; padding: 1px 7px; border-radius: 999px; }
.hm-night { background: var(--ink); color: var(--surface); }
.hm-day { background: var(--clay-soft); color: var(--clay); }
.hm-theme { display: grid; gap: 12px; margin-top: 12px; }
.hm-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hm-plus { color: var(--muted); font-weight: 600; }
.hm-count { margin-left: auto; font-size: .84rem; color: var(--muted); }
.hm-note { margin: 0; font-size: .88rem; color: var(--clay); }
.hm-finder { display: grid; gap: 12px; }
.hm-finder h2 { font-size: 1.15rem; }
.hm-me { display: flex; align-items: center; gap: 14px; }
.hm-me .mon-tile { width: 120px; }
.hm-head { margin: 6px 0 0; font-size: 1rem; }
.hm-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hm-result { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; background: var(--surface); }
.hm-result .mon-tile { border: 0; padding: 4px; }
.hm-why { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }
.hm-why .kit-label { width: 100%; }
.hm-jump .chip b { color: var(--clay); margin-left: 4px; }

/* favourites block on a Pokémon page */
.likes { display: grid; gap: 14px; margin-top: 12px; }
.like-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.like-head h3 { margin: 0; font-size: .95rem; }
.like-head span { font-size: .76rem; color: var(--muted); }
.likes .chip { cursor: default; white-space: normal; }
.likes .chip b { color: var(--clay); font-variant-numeric: tabular-nums; }
.likes .chip .gloss { font-size: .72rem; }
.chip-on { background: var(--moss-soft); border-color: var(--moss); color: var(--moss); font-weight: 600; }
.fav-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: var(--clay-soft); color: var(--clay); font-size: .74rem; font-variant-numeric: tabular-nums; }
.fav-items { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-item { display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2);
  font-size: .76rem; font-weight: 500; }
.fav-item img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.fav-more { padding: 5px 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* a favourite category lists every item it holds, so the box scrolls past a few rows */
.fav-scroll { max-height: 168px; overflow-y: auto; padding: 2px 4px 2px 0; align-content: start; }
.like-tier { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }

/* ideal habitat */
.env { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.env-pick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; }
.env-pick b { color: var(--moss); }
.env-pick span:last-child { margin-left: auto; font-size: .76rem; color: var(--muted); }
.env-desc { margin: 6px 0 0; font-size: 1rem; color: var(--ink-2); }

/* time-of-day and weather conditions: the ones that do not apply stay visible but muted,
   so "night only" reads as a restriction rather than as missing data */
.conds { display: grid; gap: 12px; margin-top: 12px; }
.cond-block { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.cond-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.cond-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cond { padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--muted); opacity: .45; }
.cond-on { background: var(--moss-soft); border-color: var(--moss); color: var(--moss); font-weight: 600; opacity: 1; }
.cond-note { margin: 8px 0 0; font-size: .82rem; color: var(--clay); font-weight: 500; }

/* paint patterns */
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-top: 10px; }
.pattern { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center; }
.pattern img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--paper-2); }
.pattern-src { margin-top: 6px; font-size: .7rem; color: var(--ink-2); line-height: 1.3; }
.pattern-cost { margin-top: 3px; font-size: .72rem; color: var(--muted); }

/* human records: the text is the point, so it gets room to read */
.rec-text { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--line-2);
  background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rec-text p { margin: 0 0 8px; font-size: .9rem; line-height: 1.65; color: var(--ink-2); }
.rec-text p:last-child { margin-bottom: 0; }
.rec-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); font-style: italic; }
.rec-shot { margin: 10px 0 0; }
.rec-shot img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--line); }
.rec-shot figcaption { margin-top: 6px; max-width: 340px; font-size: .76rem; line-height: 1.5; color: var(--muted); }

/* toys */
.toy { grid-template-columns: 60px 1fr; }
.toy-pic { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; background: var(--paper-2); }
.toy-mons { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.toy-mons .mon-chip { padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--paper-2); font-size: .72rem; }
.toy-mons .mon-chip img { width: 26px; height: 26px; }
.toy-mons .mon-chip:hover { background: var(--moss-soft); }
@media (min-width: 640px) { .toy { grid-template-columns: 72px 1fr; } .toy-pic { width: 72px; height: 72px; } }

/* shop unlocks: a recipe unlock gets a badge, since it is not the item itself */
.unlock-recipe { padding: 1px 6px; border-radius: 999px; background: var(--clay-soft); color: var(--clay);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
td .fav-items { max-width: 760px; }
@media (min-width: 560px) { .conds { grid-template-columns: 1fr 1fr; } }

/* cooking equipment */
.cookware { display: grid; gap: 14px; margin-top: 12px; }
.cookware-type { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
td .fav-item { margin: 1px 0; }
td .fav-items { gap: 4px; }

/* dream islands */
.islands { display: grid; gap: 12px; margin-top: 12px; }
.island { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.island-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.island-head h3 { margin: 0; font-size: 1rem; }
.island-doll { width: 56px; height: 56px; object-fit: contain; flex: none; border-radius: 12px; background: var(--paper-2); }
.island-sub { margin: 3px 0 0; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.island-finds, .finds { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.island-finds summary, .finds summary { cursor: pointer; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.island-finds summary b, .finds summary b { color: var(--clay); font-variant-numeric: tabular-nums; }
.island-finds .fav-items, .finds .fav-items { margin-top: 10px; }
/* a whole area's terrain can run to 200 chips, so the long groups scroll in place */
.finds .fav-items { max-height: 340px; overflow-y: auto; align-content: start; padding-right: 4px; }
.finds-note { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
@media (min-width: 700px) { .islands { grid-template-columns: 1fr 1fr; } }

/* outfits */
.outfit { grid-template-columns: 72px 1fr; align-items: center; }
.outfit-pic { width: 72px; height: 72px; object-fit: cover; object-position: top center;
  border-radius: 10px; background: var(--paper-2); }
@media (min-width: 640px) { .outfit { grid-template-columns: 96px 1fr; } .outfit-pic { width: 96px; height: 96px; } }

/* Ditto's moves */
/* A move card leads with its icon as a square the full width of the card. The source
   images are 250px, so there is resolution to spare; the five secondary moves have no icon
   upstream and show the artwork of the Pokemon the move is borrowed from instead. */
.move-card { display: flex; flex-direction: column; }
.move-art { aspect-ratio: 1; border-radius: var(--r); background: var(--paper-2);
  display: grid; place-items: center; overflow: hidden; }
.move-art img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.move-art > a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.move-art > a:hover { background: var(--moss-soft); }
.move-art-blank { display: grid; place-items: center; color: var(--muted); width: 100%; height: 100%; }
.move-art-blank svg { width: 30%; height: 30%; }
.move-name { margin: 13px 0 0; }
.move-effect { font-size: .92rem; color: var(--ink-2); margin: 8px 0 0; }

/* building kits */
.kit { grid-template-columns: 88px 1fr; }
.kit-pic { width: 88px; height: 88px; object-fit: contain; border-radius: 12px; background: var(--paper-2); }
.kit-line { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.kit-label { flex: none; min-width: 78px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.kit-helpers { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-helper { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--moss-soft); color: var(--moss); font-size: .76rem; font-weight: 500; }
.kit-helper b { font-variant-numeric: tabular-nums; }
.kit-helper a { color: inherit; text-decoration: underline; text-decoration-color: transparent; }
.kit-helper a:hover { text-decoration-color: currentColor; }

/* how many Pokemon can live in a finished kit — the headline fact on the card */
.kit-live { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 12px; border-radius: 999px;
  background: var(--moss-soft); color: var(--moss); font-size: .92rem; font-weight: 600; }
.kit-live b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.kit-live-no { background: var(--paper-2); color: var(--muted); font-weight: 500; }
.kit-live-gap { background: var(--clay-soft); color: var(--clay); font-weight: 500; }
.kit-shape { margin-top: 5px; }
.kit-shape span + span::before { content: '·'; margin-right: 6px; color: var(--line); }

/* how a crafting recipe is unlocked, under the material list on an item row */
.recipe-src { margin-top: 5px; font-style: italic; }
.kit .fav-item b { color: var(--clay); font-variant-numeric: tabular-nums; }
.kit .fav-item img { width: 30px; height: 30px; }

/* the Pokémon that have a specialty: every one of them, in a box that scrolls */
.spec-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px;
  margin-top: 10px; max-height: 216px; overflow-y: auto; padding-right: 4px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.spec-mon { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; border-radius: var(--r-sm); }
.spec-mon img { width: 40px; height: 40px; object-fit: contain; }
.spec-mon span { font-size: .68rem; line-height: 1.25; color: var(--muted); text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.spec-mon:hover { background: var(--moss-soft); }

/* A specialty card. The badge sits on the title line — an earlier version gave it a
   full-height column, but object-fit centres the artwork in whatever box it is given, so
   on the specialties index the icon drifted down to the middle of a card made tall by its
   Pokemon list. Keeping it in the header pins it to the text it belongs to, and leaves the
   description the full width of the card rather than a squeezed second column. */
.spec-head { display: flex; align-items: center; gap: 11px; }
.spec-badge { width: 46px; height: 46px; object-fit: contain; flex: none; }
.spec-head h3 { line-height: 1.3; }
.spec-desc { font-size: .92rem; color: var(--ink-2); margin: 10px 0 0; }
.spec-count { font-size: .84rem; color: var(--muted); margin: 8px 0 0; }
.spec-mon:hover span { color: var(--moss); }
@media (min-width: 640px) { .kit { grid-template-columns: 128px 1fr; } .kit-pic { width: 128px; height: 128px; } }
.move-unlock { display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.move-unlock svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.move-unlock a { color: var(--moss); font-weight: 600; }
.move-boost { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-size: .8rem; color: var(--ink-2); }

/* cross-references to an item's row on its category page */
.item-link { color: inherit; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; text-decoration-color: var(--line-2); }
.item-link:hover { color: var(--moss); text-decoration-color: var(--moss); }
.mat a.item-link, .row-name a { color: inherit; }
.row-name a:hover { color: var(--moss); }
a.fav-item:hover { background: var(--moss-soft); color: var(--moss); }
.row-wide { grid-template-columns: minmax(96px, 20%) 1fr; }
.hab-pic { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 10px; background: var(--paper-2); }
@media (min-width: 640px) {
  .row-wide { grid-template-columns: minmax(150px, 20%) 1fr; }
}

/* toolbar */
.toolbar { position: sticky; top: 59px; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); padding: 10px 0; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.filter-input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: .95rem; }
.filter-input:focus { outline: none; border-color: var(--moss); }
/* The filter chips wrap onto as many rows as they need — sideways scrolling gave no clue
   that anything was past the right edge. Expanded, the bar is capped so a long list still
   leaves the page usable on a phone, and that cap scrolls with a visible bar. */
.chips-scroll { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chips-scroll.chips-open { max-height: 38vh; overflow-y: auto; padding: 2px 4px 2px 0; }
.chip-more {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px dashed var(--line-2); background: none; color: var(--muted);
}
.chip-more:hover { border-color: var(--moss); color: var(--moss); }
.count { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.more-btn { width: 100%; padding: 14px; border-radius: var(--r); border: 1px dashed var(--line-2); background: none; color: var(--ink-2); cursor: pointer; font-weight: 500; }
.more-btn:hover { background: var(--surface); }

/* ---------- pokemon detail ---------- */
.mon-head { display: grid; gap: 18px; align-items: center; }
@media (min-width: 720px) { .mon-head { grid-template-columns: 260px 1fr; gap: 30px; } }
.mon-art { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; place-items: center; }
.mon-art img { width: 100%; max-width: 230px; }

/* the story cast — one card each, artwork big enough to actually read the design */
.cast { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: start; }
.cast-pic { width: 116px; height: 116px; object-fit: contain; flex: none;
  border-radius: var(--r); background: var(--paper-2); padding: 6px; }
.cast h2 { font-size: 1.25rem; }
.cast-role { font-size: .84rem; color: var(--muted); margin: 3px 0 12px; }
.cast-desc { margin: 0; color: var(--ink-2); }
@media (min-width: 560px) { .cast { grid-template-columns: 168px 1fr; gap: 24px; } .cast-pic { width: 168px; height: 168px; } }
@media (min-width: 900px) { .cast { grid-template-columns: 208px 1fr; gap: 28px; } .cast-pic { width: 208px; height: 208px; padding: 10px; } }
.kv { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 6px 16px; font-size: .92rem; }
.kv dt { color: var(--muted); font-size: .82rem; }
.kv dd { margin: 0; }

/* ---------- misc ---------- */
.sec-title { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 12px; }
.sec-title h2 { margin: 0; }
.sec-title span { font-size: .8rem; color: var(--muted); }
.crumb { font-size: .8rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 14px 0 6px; }
.crumb a:hover { color: var(--moss); }
.note { background: var(--moss-soft); border-left: 3px solid var(--moss); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; font-size: 1rem; color: var(--ink-2); }
.note-clay { background: var(--clay-soft); border-color: var(--clay); }
.gloss { font-size: .8rem; color: var(--muted); }
.gloss::before { content: "≈ "; opacity: .6; }

.site-foot { margin-top: 60px; border-top: 1px solid var(--line); padding: 26px 0 46px; font-size: .84rem; color: var(--muted); }
.site-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.site-foot a:hover { color: var(--moss); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--surface); padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--moss); }

@media (min-width: 900px) {
  html { font-size: 112.5%; }
  .hero { padding: 46px 0 40px; }
}