/* pages/trainer/skin-library.css — the library's four pillar tabs
   (wireframes 3a/3b, decision 0015).

   Turn 3's fix first: ONE content column. Every block below shares the
   column's left edge and its width, and the collection fills it. The chart
   used to cap itself at five column-widths inside a much wider main, which
   is what stranded it with dead space beside it. Colours are --play-*
   tokens only. */

/* No max-width of its own: main already caps and centres its children, and
   a second cap here would only be a rule that never wins. */
/* The kana tile metrics, in one place: the chart's column width, each
   grid's cap and the narrow layout are all calc()ed from these. */
.libcol{--kc-tile:72px;--kc-gap:14px;display:flex;flex-direction:column;gap:14px;width:100%}

/* ---- search: one icon in the title row, one field under it ----------- */
/* On the caption line, after the words it filters (bhassa-feedback#11) —
   sized to that line, not to the title. */
.lb-find{flex:none;width:26px;height:26px;border:2px solid transparent;border-radius:50%;
  background:none;color:var(--play-mute);cursor:pointer;font-size:.85rem;line-height:1}
.lb-find:hover,.lb-find.on{border-color:var(--play-ink);color:var(--play-ink);background:var(--play-card)}
.lb-find:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.lb-search input{width:100%;border:2px solid var(--play-ink);border-radius:12px;padding:9px 14px;
  background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);font-size:1rem}
.lb-search input:focus{outline:none;border-color:var(--play-link)}

/* ---- the title line -------------------------------------------------- */
.lb-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lb-name{display:flex;flex-direction:column;gap:1px}
.lb-cap{display:inline-flex;align-items:center;gap:6px}
.lb-name b{font-family:var(--play-display);font-size:1.5rem;line-height:1.1}
.lb-title .lb-drill{font-size:.95rem;padding:5px 18px}
.lb-toggle{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--play-ink);
  border-radius:999px;background:var(--play-card);padding:3px 12px;color:var(--play-soft)}
.lb-toggle button{background:none;border:0;cursor:pointer;color:var(--play-mute);
  font-family:var(--play-display);font-size:.95rem;padding:2px 2px}
.lb-toggle button.on{color:var(--play-accent);font-weight:700}
.lb-toggle button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:6px}
.lb-sel{border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);
  color:var(--play-ink);font-family:var(--play-display);font-size:.9rem;padding:6px 12px;cursor:pointer}
.lb-sel:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* ---- Kana Meadows: the chart ------------------------------------------
   Full tiles, not chips: 72x86 at desktop, the character large enough to
   read as a SHAPE (which is what a learner is memorising) with the romaji
   under it, always visible. 3a asked for hover-only romaji; the reviewed
   design overrides that, and hover-only was never reachable on touch
   anyway — it needed a (hover:none) escape hatch to be usable at all.

   The track is a fraction, never a fixed 144px, and the tile takes its
   height from aspect-ratio: below the grid's own max-width the tiles shrink
   together instead of overflowing, so one rule set serves every width. */
/* Left-aligned, not centred: the card that opens sits in the space to the
   right, and a centred chart would leave a gap on both sides instead of one
   usable column on one side. */
.lb-chart{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0 4px;width:100%}
/* .shellui-scoped on purpose: the ember skin sets .shellui .kgrid{gap:14px},
   which outranks a bare .kc-grid. It happens to match this gap today, and
   would still silently win — and resize every tile — if either changed. */
.shellui .kc-grid{
  display:grid;gap:var(--kc-gap);justify-content:start;width:100%;
  max-width:calc(var(--kc-n,5) * var(--kc-tile) + (var(--kc-n,5) - 1) * var(--kc-gap));
}
.kc-break{color:var(--play-soft);letter-spacing:.14em}

.shellui .lb-chart .kcell{
  width:100%;aspect-ratio:72/86;padding:0;
  border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);color:var(--play-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:transform .06s ease,box-shadow .06s ease;
}
/* Sized against the viewport rather than the tile: the tile is a grid
   fraction, and CSS has no unit for "share of my own box" without a
   container query — the clamp keeps it legible at 320px and stops it
   outgrowing the tile once the grid hits its cap. */
.shellui .lb-chart .kcell .c{font-size:clamp(1rem,2.2vw,1.8rem);line-height:1}
.lb-chart .kcell .r{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--play-mute);white-space:nowrap}
.lb-chart .kcell .r[lang="hi"]{text-transform:none;letter-spacing:0;font-size:.65rem}
/* Devanagari in the Devanagari stack, on both grids (.lb-chart is the kana
   chart, .kgrid the kanji one): body.shellui puts Inter first, and a Hindi
   gloss under that stack rendered in whichever face Inter's fallback chain
   reached, not the one --devanagari chose (#169). */
.shellui .kcell .r[lang="hi"]{font-family:var(--devanagari)}
.shellui .lb-chart .kcell:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--play-edge)}
.shellui .lb-chart .kcell.known{background:var(--play-accent);color:var(--play-accent-ink)}
.shellui .lb-chart .kcell.known .r{color:var(--play-accent-ink)}
.shellui .lb-chart .kcell.learn{background:var(--play-accent-soft)}
.shellui .lb-chart .kcell.sel{box-shadow:0 3px 0 var(--play-edge)}
.shellui .lb-chart .kcell.empty{border-color:transparent;background:none;cursor:default;visibility:hidden}
.lb-chart .kcell:focus-visible{outline:3px solid var(--play-link);outline-offset:3px}

@media (max-width:560px){
  .libcol{--kc-gap:8px}
  .shellui .lb-chart .kcell{border-radius:9px;gap:2px}
  .lb-chart .kcell .r{font-size:.55rem;letter-spacing:.05em}
}

/* The reading rules keep their content but not their weight: a fold, so the
   chart above stays the bare thing 3a asks for. */
.kc-rules{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);padding:10px 14px}
.kc-rules>summary{cursor:pointer;font-family:var(--play-display);font-size:1rem;color:var(--play-ink)}
.kc-rules[open]>summary{margin-bottom:8px}
.kc-rule{padding:6px 0;border-top:1px solid var(--play-track)}
.kc-rule:first-of-type{border-top:0}
.kc-rule b{display:block;font-size:1.05rem}
.kc-rule span{font-size:.85rem;color:var(--play-mute)}

/* ---- Vocab Town: theme chips + word cards (3b) ----------------------- */
.lb-chips{display:flex;flex-wrap:wrap;gap:6px}
.lb-chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--play-ink);border-radius:999px;
  padding:3px 13px;background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.9rem;cursor:pointer}
.lb-chip i{font-style:normal;font-size:.75rem;color:var(--play-mute)}
.lb-chip:hover{transform:translateY(1px)}
.lb-chip.on{background:var(--play-accent);color:var(--play-accent-ink)}
.lb-chip.on i{color:var(--play-accent-ink)}
.lb-chip:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.lb-more{border:2px dashed var(--play-soft);border-radius:999px;padding:3px 13px;background:none;
  color:var(--play-mute);font-family:var(--play-display);font-size:.9rem;cursor:pointer}
.lb-more:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* Three to a row, filling the column — never a centered orphan list. */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink);
  padding:10px 12px 12px;font-family:var(--play-display);width:100%}
/* The opener carries the card's whole hit area through a stretched
   pseudo-element, so the card still feels like one target while the speaker
   stays its own control on top of it. */
.wcard .w-open{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:none;border:0;padding:0;margin:0;text-align:left;color:inherit;
  font:inherit;cursor:pointer;width:100%;padding-right:34px}
.wcard .w-open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.wcard .w-open:focus-visible{outline:none}
.wcard .w-open:focus-visible::after{outline:3px solid var(--play-link);outline-offset:2px}
.wcard .w-say{position:absolute;top:8px;right:8px;z-index:1}
.wcard:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--play-edge)}

.wcard.is-open{box-shadow:0 4px 0 var(--play-edge)}
/* Not started: dashed and quiet, so the grid shows at a glance how far in
   the reader is — the bar says the same thing for everything else. */
.wcard.is-new{border-style:dashed;border-color:var(--play-soft);color:var(--play-mute)}
.w-jp{font-size:1.35rem;line-height:1.2;font-family:var(--jp)}
.w-read{font-size:.9rem}
.w-meta{font-size:.7rem}
.w-bar{display:block;width:100%;height:8px;margin-top:6px;border:2px solid var(--play-ink);
  border-radius:999px;background:var(--play-card);overflow:hidden}
.wcard.is-new .w-bar{border-color:var(--play-soft)}
.w-bar i{display:block;height:100%;background:var(--play-accent);border-radius:999px}

@media (max-width:899px){
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .wgrid{grid-template-columns:minmax(0,1fr)}
  .kc-grid{gap:10px}
  .lb-name b{font-size:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  .lb-chart .kcell,.wcard,.lb-chip,.lb-chart .kcell .r{transition:none}
}

/* ---- kana: chart left, the tapped character to its right -------------
   The chart takes its natural width (auto) and the card takes the rest,
   so the card is never squeezed by a chart that is only 416px wide. It
   sticks while the chart scrolls past — a card that scrolled away would
   send the reader back up to see what they had just tapped. */
.lb-split{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
/* A definite width, not `auto`: an auto track sizes to the tiles' own
   content — the romaji, a few characters wide — so the chart collapsed to
   291px and the tiles shrank with it. Five tiles is the widest row. */
.lb-chartcol{width:calc(5 * var(--kc-tile) + 4 * var(--kc-gap));min-width:0}
.lb-detail{position:sticky;top:8px;min-width:0}
/* The card's top edge sits on the first row of tiles, not 8px above it —
   the chart keeps that 8px of air for a selected tile's ring, so the card
   takes the same 8px (bhassa-feedback#11). */
.lb-split>.lb-detail{margin-top:8px}
.lb-detail:empty{display:none}
.lb-detail .ld-inline{margin-bottom:0}

/* No room beside the chart: the card goes back above it, where a tap can
   still be seen without scrolling. */
@media (max-width:899px){
  .lb-split{display:flex;flex-direction:column}
  .lb-chartcol{width:100%}
  .lb-detail{position:static;order:-1;width:100%;margin-top:0}
  /* Except the card the collection opens with: nobody tapped it, and
     hoisting it would push the chart — the point of the page — off the
     first screen. It sits after the chart until a tap earns it the top. */
  .lb-split.is-auto .lb-detail{order:0}
}


/* ---- the script switch, flush right on the title line ---------------- */
/* One control with a live half, not two adjacent buttons. It sat above the
   chart until bhassa-feedback#11: there it pushed the grid's top edge below
   the card's, and the reader wanted it where the search dot was. */
.kc-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);align-self:center}
.kc-switch button{border:0;border-radius:999px;padding:5px 16px;background:none;cursor:pointer;
  color:var(--play-mute);font-family:var(--play-display);font-size:.95rem;white-space:nowrap}
.kc-switch button:hover{color:var(--play-ink)}
.kc-switch button.on{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.kc-switch button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* ---- the character card (wireframe 4a) -------------------------------- */
/* One centre axis: chip and ✕ on the top rule, then glyph, reading, meta,
   the two comparison boxes, the words, the action row — each centred on the
   same line. */
/* The outline is --play-soft, not --play-ink, and the ledge is 4px of the
   same rather than 6px of --play-edge. At ink weight the card read as
   selected rather than as a container: a 2px near-black rule plus a 6px
   near-black slab down two sides is more emphasis than a panel that is
   simply open needs, and it shouted over the chart it sits beside. Soft
   keeps the edge legible on both grounds without the highlight. */
.kz-card{border:2px solid var(--play-soft);border-radius:16px;background:var(--play-card);
  color:var(--play-ink);box-shadow:4px 4px 0 var(--play-soft);padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:12px;font-family:var(--play-display)}
.kz-top{display:flex;align-items:center;gap:10px}
.kz-status{border:2px solid var(--play-ink);border-radius:999px;padding:1px 12px;
  font-size:.8rem;white-space:nowrap;background:var(--play-card)}
.kz-status.is-learning{background:var(--play-accent-soft)}
.kz-status.is-known{background:var(--play-accent);color:var(--play-accent-ink)}
.kz-x{margin-left:auto;width:28px;height:28px;flex:none;border:2px solid var(--play-ink);
  border-radius:50%;background:var(--play-card);color:var(--play-ink);cursor:pointer;
  font-size:.85rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.kz-x:hover{background:var(--play-accent);color:var(--play-accent-ink)}
.kz-x:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

.kz-hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-4px}
.kz-char{font-size:clamp(3.5rem,7vw,6rem);line-height:1.05;font-family:var(--jp)}
.kz-read{display:flex;align-items:center;gap:8px}
.kz-read b{font-size:1.35rem}

.kz-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kz-box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card)}
.kz-glyphs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kz-glyph{font-size:1.6rem;line-height:1.1;border:0;background:none;padding:0 2px;
  color:var(--play-ink);cursor:pointer;font-family:var(--jp)}
.kz-glyph:hover{color:var(--play-accent)}
.kz-glyph:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:6px}
.kz-glyph.is-off{color:var(--play-soft);cursor:default}

.kz-words{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);padding:8px 12px}
.kz-word{display:flex;align-items:center;gap:10px;padding:2px 0}
.kz-word>.jp{font-size:1.05rem;white-space:nowrap}
.kz-word>.p-tag{flex:1;text-transform:none;letter-spacing:0}

.kz-actions{display:flex;align-items:center;gap:10px}
.kz-drill{flex:1;text-align:center}
.kz-step{border:2px solid var(--play-ink);border-radius:999px;background:var(--play-card);
  color:var(--play-ink);padding:4px 12px;cursor:pointer;font-family:var(--play-display);
  font-size:.85rem;white-space:nowrap}
.kz-step:hover{background:var(--play-paper)}
.kz-step:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.kz-step.is-off{opacity:.35;cursor:default}

/* Destructive is not prominent: a small underlined link under the actions,
   never a button competing with the one thing this card is for. */
.kz-reset{display:flex;justify-content:center}
.kz-link{border:0;background:none;padding:2px 4px;cursor:pointer;
  color:var(--play-mute);font-family:var(--play-display);font-size:.78rem;text-decoration:underline}
.kz-link:hover{color:var(--play-ink)}
.kz-link:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:6px}

@media (max-width:560px){
  .kz-pair{grid-template-columns:1fr}
  .kz-actions{flex-wrap:wrap}
  .kz-drill{order:-1;flex-basis:100%}
}

/* The speaker on a word card: small, quiet at rest, ember on hover — it is
   a second action on a card whose first action is opening it. */
.wcard .w-say{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border:2px solid var(--play-ink);border-radius:50%;
  background:var(--play-card);color:var(--play-ink);cursor:pointer}
.wcard .w-say:hover{background:var(--play-accent);color:var(--play-accent-ink);border-color:var(--play-ink)}
.wcard .w-say:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.wcard .w-say svg{width:13px;height:13px}
.wcard.is-new .w-say{border-color:var(--play-soft);color:var(--play-mute)}

/* ---- the kanji specimen card (wireframe 5a) --------------------------- */
/* Glyph and the writing column side by side, then the two readings as
   separate tiles — 5a is explicit that スイ and みず must never share a
   line. */
.kz-spec{display:flex;align-items:center;gap:14px}
.kz-spec .kz-hero{flex:1;min-width:0}
.kz-side{width:132px;flex:none;display:flex;flex-direction:column;gap:6px}
.kz-strokes{gap:0}
.kz-strokes b{font-size:1.6rem;line-height:1.1}
.kz-trace{font-size:.85rem;padding:5px 10px;text-align:center}
.kz-trace.on{background:var(--play-accent);color:var(--play-accent-ink)}
.kz-readings .kz-box{gap:2px}
.kz-yomi{font-size:1.15rem;line-height:1.2;text-align:center;word-break:break-word}
.kz-dev{font-size:.85rem;line-height:1.3;text-align:center;color:var(--play-mute)}
.kz-pad{border:2px solid var(--play-ink);border-radius:12px;padding:8px;background:var(--play-paper)}
.kz-note{font-size:.85rem}
.kz-kanji .kz-char{font-size:clamp(3rem,5.5vw,5rem)}
.kz-kanji .kz-word .p-tag{text-transform:none;letter-spacing:0}

/* Kanji tiles fill their own column; capped so the card has room beside
   them, the way the kana chart's five tracks leave room. */
@media (min-width:901px){
  .lb-split.is-kanji .lb-chartcol{width:calc(6 * 84px + 5 * 14px)}
}
@media (max-width:560px){
  .kz-spec{flex-direction:column;align-items:stretch}
  .kz-side{width:100%;flex-direction:row}
  .kz-strokes{flex:1}
  .kz-trace{flex:1}
}