/* pages/trainer/skin-regions.css — the library's pillar views as map
   regions (wireframes 2a–2d, decision 0015). Region banner, district /
   camp / gate cards, and the playful kana/kanji cell states. Loaded after
   the ember skin; colours are --play-* tokens only. */

.rg-head{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font-family:var(--play-display);color:var(--play-ink)}
.rg-head b{font-size:1.35rem;font-weight:700}
.rg-glyph{font-size:1.7rem;width:44px;height:44px;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);display:inline-flex;align-items:center;justify-content:center;flex:none}

.rg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.rg-card{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:12px 8px 10px;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);font-size:.9rem;cursor:pointer}
.rg-card:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--play-edge)}
.rg-card:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.rg-card.is-on{box-shadow:0 4px 0 var(--play-edge);background:var(--play-accent);color:var(--play-accent-ink)}
.rg-card.is-on:hover{transform:none}
.rg-card.is-on .p-bar{background:var(--play-card)}
.rg-card.is-on .p-fill{background:var(--play-ink)}
.rg-card.is-locked{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock)}
.rg-card.is-locked .p-bar{border-color:var(--play-soft)}
.rg-card .rg-ico{font-size:1.5rem;line-height:1.1}
.rg-card .p-bar{width:100%;height:10px}
.rg-cnt{font-size:.8rem}
.rg-card.is-all{justify-content:center}

/* Kana / kanji cells in the playful voice — the chart is the map (2a).
   known = mature (solid ember) · learn = card exists, not yet mature
   (pale fill) · untouched = plain outline. */
.shellui .kcell{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink)}
.shellui .kcell.empty{border-color:transparent;background:none}
.shellui .kcell:hover{border-color:var(--play-ink);box-shadow:0 3px 0 var(--play-edge);transform:translateY(-1px)}
.shellui .kcell.known{border-color:var(--play-ink);background:var(--play-accent);color:var(--play-accent-ink)}
.shellui .kcell.known .r{color:var(--play-accent-ink)}
.shellui .kcell.learn{background:var(--play-accent-soft)}
.shellui .kcell.sel{border-color:var(--play-ink);outline:3px solid var(--play-link);outline-offset:1px}

@media (max-width:420px){
  .rg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .rg-card,.kcell{transition:none}
}

/* 2a: the confusable pair, drilled side by side. */
.ld-pair{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.ld-pair>.jp{font-size:1.5rem}
.ld-pairbtn{font-size:.85rem;padding:4px 14px}

/* ---- 27b/27c: Kanji Mountains as a drawn ridge ------------------------ *
 * Turn 27 replaced 2c's vertical zigzag, which owned a whole column and
 * pushed the kanji below the fold. The ridge lies across the top instead:
 * camps pitched at rising altitude on one silhouette, so "camp 7 is higher
 * than camp 2" is a fact you can see rather than a number.
 *
 * 27b is the dark frame and 27c the light one, and 27c is NOT 27b inverted:
 * in daylight the sky becomes the DARKEST of the three values and the rock
 * the lightest, because a pale massif on pale paper has no silhouette. That
 * flip lives in the --play-sky/-range/-massif tokens, so one data-theme
 * switch re-values the scene with no layout change — every polygon vertex,
 * camp altitude and trail dot below is shared by both themes.
 *
 * Geometry: x is a percentage and y is a percentage of the panel's own
 * height, so the ridge keeps its shape at any width (the same trick
 * TRAIL_STOPS uses for today's trail). Camp and dot coordinates are
 * computed in app.js from the peak list the clip-path is built from — the
 * pegs cannot drift off the skyline because both read the same numbers.
 */
.km-scene{position:relative;height:262px;overflow:hidden;margin-bottom:18px;
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-sky);
  font-family:var(--play-display);color:var(--play-ink)}

/* The three separated values. --km-ridge is the shared silhouette; the
   massif is drawn twice, 4px apart, so the gap paints the ink skyline. */
.km-range,.km-ridge,.km-massif{position:absolute;left:0;right:0}
.km-range{bottom:26px;height:150px;background:var(--play-range);
  clip-path:polygon(0% 100%,10% 62%,22% 78%,34% 48%,44% 66%,56% 40%,68% 60%,80% 34%,92% 54%,100% 42%,100% 100%)}
.km-ridge{bottom:26px;height:190px;background:var(--play-ink);clip-path:polygon(var(--km-ridge))}
.km-massif{bottom:22px;height:190px;background:var(--play-massif);clip-path:polygon(var(--km-ridge))}

.km-cap{position:absolute;width:40px;height:15px;background:var(--play-ink);transform:translateX(-50%);
  clip-path:polygon(0% 100%,26% 20%,50% 62%,74% 8%,100% 100%)}

/* Night furniture. The light theme trades all of it for a sun and rock
   texture — see the guarded blocks at the foot of this section.
   The moon itself is a bare 2px ring with no fill, and --play-mute on
   --play-sky reads as barely more than the sky's own noise — reported as
   effectively invisible in dark. Rather than invent a fill for a shape the
   frame never drew filled in dark, it renders transparent there; the light
   overrides below already swap the border-COLOR in for the sun, which
   still works unchanged since border-width/style stay put. */
.km-orb{position:absolute;left:6%;top:14px;width:24px;height:24px;border-radius:50%;border:2px solid transparent}
.km-star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--play-mute)}
.km-cloud{position:absolute;left:26%;top:40px;width:104px;height:7px;background:var(--play-track);opacity:.55}

/* Camps and the trail between them share one coordinate system: --x across,
   --y up from the ground line. */
.km-dot{position:absolute;left:var(--x);bottom:var(--y);width:5px;height:5px;border-radius:50%;
  background:var(--play-mute);opacity:.7}
.km-tanu{position:absolute;left:var(--x);bottom:var(--y);width:24px;height:24px;line-height:1;pointer-events:none}
.km-tanu svg{width:100%;height:100%;display:block}

/* line-height is pinned rather than inherited because the column is anchored
   by its BOTTOM and grows upward: any extra line box pushes its top past
   .km-scene's overflow:hidden edge. Devanagari's default line box is ~19%
   taller than the Latin one, which was enough on its own to crop "⛩ शिखर"
   off the summit camp in Hindi while English cleared the same edge by 6px.
   A fixed value makes the column's height the same in every script. */
.km-camp{position:absolute;left:var(--x);bottom:var(--y);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  /* AFTER font:inherit deliberately — the `font` shorthand resets
     line-height, so setting it earlier in this block is silently undone. */
  line-height:1.3}
.km-camp .p-node{width:26px;height:26px;font-size:.8rem;border-width:2px}
.km-camp.is-open .p-node{width:28px;height:28px;font-size:.85rem}
/* The camp you are in is the only one that gets the flag, the ember peg and
   the lift; a finished camp is ember too but carries a ✓ and no lift, so the
   two never read as the same state (DESIGN.md: not by colour alone). */
.km-camp.is-current .p-node{width:34px;height:34px;font-size:.95rem;box-shadow:0 4px 0 var(--play-ink);
  background:var(--play-accent);color:var(--play-accent-ink)}
.km-camp .km-flag{font-size:.62rem;padding:0 7px;margin-bottom:2px}
.km-camp .p-tag{font-size:.7rem;letter-spacing:.02em;text-transform:none;white-space:nowrap;color:var(--play-ink)}
.km-camp .km-hint{font-size:.66rem;margin-bottom:1px;color:var(--play-mute)}
.km-camp.is-locked .p-tag{color:var(--play-mute)}
.km-camp.is-current .p-tag{color:var(--play-accent)}
.km-camp:hover .p-node{transform:translateY(-2px)}
.km-camp:focus-visible{outline:3px solid var(--play-link);outline-offset:3px;border-radius:8px}
.km-camp[aria-pressed="true"] .p-tag{text-decoration:underline;text-underline-offset:2px}

/* The ground line is the whole-mountain progress bar (3 of 107). */
.km-ground{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;align-items:center;gap:10px;
  padding:0 12px;border-top:2px solid var(--play-ink);background:var(--play-massif);color:var(--play-ink)}
.km-ground b{font-size:.72rem;white-space:nowrap}
.km-ground .p-tag{font-size:.66rem;white-space:nowrap;text-transform:none;letter-spacing:.02em}
.km-ground .p-bar{flex:1;height:6px;border-width:2px;border-color:var(--play-ink);background:var(--play-sky)}

/* ---- the camp's own header, grid and legend (27b/27c, below the ridge) -- *
 * .km-all moved here from under the ridge: a filter that clears the open
 * camp belongs beside the camp header it clears, not stranded in its own
 * centred row below the mountain. */
.kmc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kmc-head .p-ring{flex:none}
/* flex:1 (basis 0) let the All-groups pill and the sort control's combined
   width win the wrap decision outright at 320px — their hypothetical size
   is real, title's is treated as zero, so both fit ahead of it and it was
   left the few leftover pixels (11px, measured) with nowhere to wrap to. A
   real basis (the house pattern: .pf-stat, .course-row .p-bar) gives it
   enough hypothetical width to force the LOSING sibling to wrap instead. */
.kmc-title{display:flex;flex-direction:column;gap:1px;flex:1 1 110px;min-width:0}
.kmc-title b{font-size:1.35rem;line-height:1.1;font-family:var(--play-display)}
.kmc-title .p-tag{font-size:.68rem;text-transform:none;letter-spacing:.02em}
/* Sized to sit beside .kmc-sort as a matched pair rather than a pill three
   sizes too big next to a rectangle; kept on the round .p-pill shape (not
   .kmc-sort's rectangle) so a filter-reset still reads as visually
   distinct from a sort toggle. */
.km-all{flex:none;border:2px dashed var(--play-soft);background:none;cursor:pointer;
  font:inherit;font-family:var(--play-display);font-size:.8rem;padding:3px 12px}
.km-all[aria-pressed="true"]{border-style:solid;border-color:var(--play-ink);color:var(--play-ink);font-weight:700}
/* Two halves of one control, not two adjacent buttons — the kana chart's
   kc-switch grammar, reused so the library has one segmented control. */
.kmc-sort{display:flex;align-items:center;border:2px solid var(--play-ink);flex:none;border-radius:8px;overflow:hidden}
.kmc-sort button{padding:3px 10px;font:inherit;font-size:.8rem;font-family:var(--play-display);
  background:none;border:0;color:var(--play-mute);cursor:pointer}
/* Ember, matching the kana chart's own segmented control (.kc-switch
   button.on) — the house pattern for "which half is live", not a new one. */
.kmc-sort button.on{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.kmc-sort button:focus-visible{outline:3px solid var(--play-link);outline-offset:-3px}

.kmc-legend{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:8px;
  border-top:2px dashed var(--play-track);flex-wrap:wrap}
.kmc-spacer{flex:1}
.kmc-read{display:inline-flex;align-items:center;gap:6px;color:var(--play-link);
  font-family:var(--play-display);font-size:.8rem;text-decoration:none;background:none;border:0;cursor:pointer}
.kmc-read:hover{text-decoration:underline}
.kmc-read:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:6px}
.kmc-note{margin-top:10px}

/* The camp's tiles. They were <div>s until 27b — a grid of 107 things you
   can open, none of which a keyboard could reach. They are buttons now, the
   same as the kana chart's cells, which is why the layout is restated here:
   a button does not stack its children the way the div did.

   27b also moves the tile's state from its FILL to a corner dot, so a
   mostly-known camp stops being a wall of ember and the selected tile can
   read as an ember border — on a tile already filled ember it could not.
   Scoped to .kmc-grid: the kana chart keeps the fill that turn 3 removed
   its status filter in favour of. */
.shellui .kmc-grid .kcell{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:12px 4px;font:inherit;font-family:var(--play-display)}
.shellui .kmc-grid .kcell .c{font-size:2rem;line-height:1;font-family:var(--play-display-jp)}
.shellui .kmc-grid .kcell .r{font-size:.66rem;margin-top:0;color:var(--play-mute)}
.shellui .kmc-grid .kcell.known{background:var(--play-card);color:var(--play-ink)}
.shellui .kmc-grid .kcell.known .r{color:var(--play-mute)}
.shellui .kmc-grid .kcell.learn{background:var(--play-card)}
.shellui .kmc-grid .kcell.sel{border-color:var(--play-accent);border-width:3px;
  box-shadow:0 4px 0 var(--play-accent);outline:none}
.shellui .kmc-grid .kcell.sel .r{color:var(--play-accent)}
.shellui .kmc-grid .kcell:focus-visible{outline:3px solid var(--play-link);outline-offset:3px}

/* The per-tile state dot. Three states that differ in FILL GEOMETRY, not
   only hue: empty ring, half, solid — so they survive greyscale. */
.kdot{position:absolute;right:6px;top:6px;width:8px;height:8px;border-radius:50%;border:2px solid var(--play-soft)}
.kdot.is-learning{background:linear-gradient(90deg,var(--play-accent) 50%,transparent 50%);border-color:var(--play-ink)}
.kdot.is-known{background:var(--play-accent);border-color:var(--play-edge)}

/* Devanagari is never uppercased (#60); .p-tag uppercases at kit level and
   ships no cancel of its own, so every section that uses it adds one. */
:root[lang="hi"] .km-scene .p-tag,
:root[lang="hi"] .kmc-head .p-tag{text-transform:none;letter-spacing:0}

/* ---- 27c: the same ridge in daylight --------------------------------- *
 * Only what cannot be carried by a token: the moon becomes a sun, the night
 * sky loses its stars and cloud, the massif picks up a rock texture, and the
 * cap turns from snow into shading (a cream cap on cream rock is invisible).
 */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .km-star,
  :root:not([data-theme="dark"]) .km-cloud{display:none}
  :root:not([data-theme="dark"]) .km-orb{border-color:var(--play-ink);background:var(--play-accent)}
  :root:not([data-theme="dark"]) .km-cap{background:var(--play-range)}
  :root:not([data-theme="dark"]) .km-massif{background:
    repeating-linear-gradient(56deg,color-mix(in srgb,var(--play-ink) 11%,transparent) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-50deg,color-mix(in srgb,var(--play-ink) 7%,transparent) 0 1px,transparent 1px 15px),
    linear-gradient(180deg,color-mix(in srgb,var(--play-mute) 25%,transparent),transparent 52%),var(--play-massif)}
  /* Plain text vanishes on lit rock; 27c gives every camp label a card. */
  :root:not([data-theme="dark"]) .km-camp .p-tag,
  :root:not([data-theme="dark"]) .km-camp .km-hint{background:var(--play-card);
    border:2px solid var(--play-ink);padding:0 5px;border-radius:6px;color:var(--play-ink)}
}
:root[data-theme="light"] .km-star,
:root[data-theme="light"] .km-cloud{display:none}
:root[data-theme="light"] .km-orb{border-color:var(--play-ink);background:var(--play-accent)}
:root[data-theme="light"] .km-cap{background:var(--play-range)}
:root[data-theme="light"] .km-massif{background:
  repeating-linear-gradient(56deg,color-mix(in srgb,var(--play-ink) 11%,transparent) 0 1px,transparent 1px 8px),
  repeating-linear-gradient(-50deg,color-mix(in srgb,var(--play-ink) 7%,transparent) 0 1px,transparent 1px 15px),
  linear-gradient(180deg,color-mix(in srgb,var(--play-mute) 25%,transparent),transparent 52%),var(--play-massif)}
:root[data-theme="light"] .km-camp .p-tag,
:root[data-theme="light"] .km-camp .km-hint{background:var(--play-card);
  border:2px solid var(--play-ink);padding:0 5px;border-radius:6px;color:var(--play-ink)}

/* Narrow: the ridge keeps its shape but loses height, and the camp labels
   drop to the number alone so nine of them still fit across 320px. */
@media (max-width:720px){
  .km-scene{height:210px}
  /* The cap rides the summit at x=95%; at full size it clears the panel's
     right edge once the panel is narrower than about 500px. */
  .km-cap{width:24px;height:10px}
  /* Nine camps across 320px leave room for the number and nothing else.
     The flag keeps its 🚩 but sheds its count, which would hang 19px off
     the left edge at x=6% — and which the camp header's ring, directly
     below, is already showing. */
  .km-camp .kmc-name{display:none}
  .km-camp .km-hint{display:none}
  .km-ground b,.km-ground .p-tag:last-of-type{display:none}
}
@media (prefers-reduced-motion:reduce){
  .km-camp:hover .p-node{transform:none}
}

/* 2a/2c: the detail card opens in place, right under the region chrome. */
.ld-inline{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);box-shadow:6px 6px 0 var(--play-edge);padding:14px 16px;margin-bottom:14px}
.ld-inline .ldetail{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start}
.ld-inline .ld-box{grid-row:span 4}
.ld-inline .ld-char{font-size:56px;cursor:zoom-in}
.ld-inline .ld-close{justify-self:end}
@media (max-width:560px){ .ld-inline .ldetail{display:block} }