/* drill-overlay.css — the Library's own drill, over the card it came from.
 *
 * The panel is playful (--play-* + the .p- kit), because it opens over the
 * Library, which is playful-skinned, from a .p-btn on a .kz-card. The two
 * components it hosts — the sketchpad and the glyph clip — keep their own
 * base-token internals, exactly as they already do on the kana card itself;
 * only their geometry is restated here.
 *
 * Colours are tokens (decision 0008). The backdrop is .zoom from dialog.css.
 *
 * SPECIFICITY, not order. Every rule here that overrides a .p- kit class is
 * scoped under .dro-panel, because playful.css is linked AFTER this file and
 * a bare .dro-x (0,1,0) therefore LOSES to .p-tag (0,1,0) on the same
 * element. Measured, not assumed: the typing prompt was rendering a whole
 * sentence in uppercase at .72rem with .1em tracking, and the "as in" line
 * with it. Scoping wins regardless of link order, so a later reshuffle of
 * app.html cannot quietly undo it.
 */

/* The page behind must not scroll under a modal: the drill is the thing on
   screen while it is open. */
body.dro-open{overflow:hidden}

/* Wider and left-aligned, where .zoom-panel is a 440px centred column.
   scrollbar-gutter: at 320px the drawing face is taller than the typing one
   and overflows the panel's 88vh; the scrollbar it grows then takes 6px from
   the square (246 against 252), which is the frame moving with the face.
   A stable gutter is reserved whether or not the face scrolls. Measured. */
.dro-panel{
  max-width:860px;scrollbar-gutter:stable;
  text-align:left;
  background:var(--play-card);
  color:var(--play-ink);
  border:2px solid var(--play-ink);
  border-radius:16px;
  box-shadow:8px 8px 0 var(--play-edge);
  padding:14px 16px 16px;
  font-family:var(--play-display);
}

/* ---- head: ‹ back to <char> card · type/draw · ✕ ---------------------- */

.dro-head{display:flex;align-items:center;gap:10px}
/* ‹ carries the previous character beside the chevron, so the walk names
   where it goes. Auto width, since a glyph is wider than the 34px .p-ic dot. */
.dro-panel .dro-back{
  flex:none;cursor:pointer;font-size:1rem;line-height:1;padding:0 8px;
  width:auto;min-width:34px;gap:3px;
}
.dro-panel .dro-back .jp{font-size:1.05rem}
.dro-back:hover:not([disabled]){background:var(--play-paper)}
.dro-back:focus-visible,.dro-x:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
/* The walk's ends are shown, not hidden: a control that vanishes at the edge
   of the chart moves everything beside it. */
.dro-panel .dro-back[disabled]{
  border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock);cursor:default;
}
/* flex:none comes from .p-ic; restating it here only loses the cascade. */
.dro-x{margin-left:auto;cursor:pointer;line-height:1;padding:0}
.dro-x:hover{background:var(--play-paper)}

/* The two-key segmented toggle. Centred between the two doors, so neither
   reads as the primary way out. */
.dro-faces{
  margin-left:auto;display:inline-flex;border:2px solid var(--play-ink);
  border-radius:999px;overflow:hidden;background:var(--play-card);flex:none;
}
.dro-face{
  border:0;background:none;color:var(--play-ink);font-family:var(--play-display);
  font-size:.78rem;padding:5px 14px;cursor:pointer;white-space:nowrap;
}
.dro-face + .dro-face{border-left:2px solid var(--play-ink)}
/* The ember, as `.p-pill.is-accent` already does for a chosen pill. It was
   ink-on-paper, which in dark reads as a white slab and looks like the
   disabled half rather than the live one. --play-accent-ink is the
   near-black the palette pins for text ON the ember (issue 158). */
.dro-face.on{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.dro-face:focus-visible{outline:3px solid var(--play-link);outline-offset:-3px}

.dro-body{margin-top:10px}

/* ---- the two faces, one frame (26c / 26d) ------------------------------
   A square on the left, a column on the right, in BOTH modes — so that the
   toggle changes what the boxes hold and nothing about where they are. The
   square is a kana's own shape; the 2:1 pad this replaces left two dead
   wings either side of a glyph that never needed them. */

/* The pad's width is PINNED, and only the column flexes. Measured: `flex:1`
   on both, with an aspect-ratio on the pad, did not split the row evenly —
   408/404 on the drawing face, 420/392 on the typing one, the difference
   tracking each face's content — so the frame the toggle must not move was
   moving by up to 12px. A pinned width does not depend on how the flex
   algorithm resolves an aspect-ratio item at all. flex-start on the row, so
   the pad's height comes from its width and not from the column's content;
   the column stretches to the pad.

   TWO THIRDS, and 4/3 is arithmetic rather than taste: it is exactly
   (2/3 width) / (1/2 height), so the pad keeps the height it had at the
   even split and the panel is the same size it was. Widen the pad without
   it and the whole dialog grows by 134px. */
.dro-main{display:flex;align-items:flex-start;gap:12px}
.dro-square{
  flex:none;width:calc((100% - 12px) * 2 / 3);max-width:560px;
  aspect-ratio:4/3;position:relative;
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);
  box-shadow:6px 6px 0 var(--play-edge);overflow:hidden;container-type:size;
}
.dro-col{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;gap:8px}

/* Labels that live ON the square, at its corners. */
.dro-onpad{position:absolute;white-space:nowrap}
.dro-sounds,.dro-chart{left:12px;top:10px;display:inline-flex;align-items:center;gap:6px}
.dro-strokes,.dro-audiolater{right:12px;top:10px}
.dro-panel .dro-howto{left:12px;bottom:10px;font-size:.62rem}
.dro-sounds b{font-size:1rem;color:var(--play-ink);font-family:var(--sans)}
.dro-panel .dro-strokes{font-size:.66rem}
.dro-panel .dro-audiolater{font-size:.62rem}

/* The pad fills the square; its own chrome is the square's now. */
.dro-pad .sketch{margin:0;max-width:none;height:100%}
.dro-pad .sketch-stage{height:100%;border:0;border-radius:0;background:none;box-shadow:none}
.dro-pad .sketch-pad{
  background:none;border-width:0;border-radius:0;aspect-ratio:auto;
  width:100%;height:100%;color:var(--play-ink);border-color:var(--play-track);
}
.dro-pad .sketch-ghost{font-size:min(74cqh,300px);color:var(--play-track)}
/* Its undo/clear render in the column instead (data-sketch-for). */
.dro-pad .sketch-top{display:none}

/* The typing face: the glyph is the question, full ink, and the field sits
   under it inside the same square. */
.dro-ask{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px 12px 14px}
.dro-tbig{font-size:min(46cqh,190px);line-height:1;font-family:var(--jp)}
.dro-field{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(82%,320px)}
.dro-panel .dro-tprompt{margin:0;text-transform:none;letter-spacing:0;font-size:.72rem;text-align:center}
.dro-input{
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);
  color:var(--play-ink);font-family:var(--play-display);font-size:1.15rem;
  padding:8px 14px;width:100%;text-align:center;box-shadow:0 4px 0 var(--play-edge);
}
.dro-input:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.dro-panel .dro-rule{text-transform:none;letter-spacing:0;font-size:.6rem;text-align:center;white-space:normal}

/* ---- the column ----------------------------------------------------- */

.dro-panel .dro-box{padding:8px 10px;background:var(--play-paper)}
.dro-panel .dro-boxtag{font-size:.6rem}
.dro-boxhead{display:flex;align-items:center;justify-content:space-between;gap:6px}

/* The model: the character writing itself, with the replay it ships. */
/* `flex:1` is what makes the model taller: the column is the pad's height,
   and everything else in it is content-sized, so the model takes whatever
   is left. It grows and shrinks with the pad instead of holding a number
   that would be wrong at the next width. */
.dro-panel .dro-clip{
  position:relative;padding:0;flex:1;
  display:flex;align-items:center;justify-content:center;min-height:170px;
}
.dro-clip .gclip{margin:0;max-width:none}
.dro-clip .gclip-stage{border:0;background:none;min-height:0;padding:8px}
.dro-clip .gclip-svg{width:min(148px,84%);height:auto;aspect-ratio:1;color:var(--play-ink)}
.dro-clip .gclip-cap{display:none}
/* The same four, for a kanji's stroke order (#228). The head is hidden because
   .dro-cliptag is already this box's one heading and the stroke count is
   already the .dro-strokes pill — showing it twice is how the box overflowed
   at narrow widths. The credit line stays: decision 0014 wants the
   attribution riding with the drawing, not filed somewhere else. */
.dro-clip .sorder{margin:0;max-width:none}
.dro-clip .sorder-head{display:none}
.dro-clip .sorder-stage{border:0;background:none;min-height:0;padding:8px}
.dro-clip .sorder-svg{width:min(148px,84%);height:auto;aspect-ratio:1;color:var(--play-ink)}
.dro-clip .sorder-credit{margin:2px 0 0;font-size:10px}
.dro-cliptag{position:absolute;left:10px;top:8px}

/* Two boxes, side by side: shapes to keep apart, and the one character to
   hold together with this one. Their own headings are what separates them —
   no colour is doing that work, so nothing here needs a second accent or a
   contrast exemption. The twin box is one tile wide; look-alikes take the
   rest, since there can be one, two or three of them. */
.dro-pairs{display:flex;gap:8px;align-items:stretch}
.dro-panel .dro-alike{flex:1;min-width:0}
.dro-panel .dro-twin{flex:none}
.dro-tiles{display:flex;gap:6px;margin-top:6px}
/* The column is a third of the row now, and a character can have three
   look-alikes beside its twin — 46px is what lets that fit; wrap is the
   backstop for the locales where it does not. */
.dro-pairs{flex-wrap:wrap}
.dro-tile{
  flex:1;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 2px;border:2px solid var(--play-track);border-radius:8px;
}
.dro-tile .jp{font-size:22px;line-height:1.1}
.dro-panel .dro-tile .p-tag{font-size:.58rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Words it appears in: shape and meaning only, softened — the reading and
   its speaker are the answer and arrive with it. Soft, not faint: the ink
   still has to read (measured, both themes). */
/* The words box takes whatever height the square leaves: on the typing face
   the column holds less than on the drawing one, and 26c's own complaint
   about the last build was "a column that is one tile and a void". */
.dro-panel .dro-meet{flex:1}
.dro-words{display:flex;flex-direction:column;gap:3px;margin-top:6px;opacity:.72}
.dro-word{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.dro-word .jp{font-size:.95rem;flex:none}
.dro-gloss{font-size:.72rem;color:var(--play-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Unlocked: full ink, and the reading and its speaker join the row. The
   gloss takes its own line so a long word does not push them out of a
   third-width column. */
.dro-panel .dro-meet.is-open .dro-words{opacity:1;gap:7px}
.dro-meet.is-open .dro-word{row-gap:1px}
.dro-meet.is-open .dro-wread{font-size:.8rem;color:var(--play-mute)}
.dro-meet.is-open .dro-gloss{flex-basis:100%}

/* The pad's own controls, at the foot of the column. */
.dro-padbtns{display:flex;gap:6px;margin-top:auto}
.dro-padbtns .p-gbtn{flex:1;font-size:.8rem;white-space:nowrap;text-align:center;padding:6px 8px}

/* ---- the answer -------------------------------------------------------- */

/* The verdict is the column's first box now, not a bar across a box of its
   own — that bar was the whole reason the answer screen stood taller than
   the two it follows. */
.dro-rbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dro-rbar b{font-size:1rem;white-space:nowrap}
.dro-panel .dro-retry{margin-left:auto;font-size:.8rem;padding:4px 12px;white-space:nowrap}
.dro-rstars{margin-left:auto;font-size:.8rem;white-space:nowrap;color:var(--play-accent)}
.dro-rstars .is-off{opacity:.35}

/* .dro-square already gives it the pad's exact width, shape, border and
   ledge — which is also what keeps the strokes honest, since they are
   stored normalised (0..1) and repainted into whatever box they are given. */
.dro-over{position:relative}
.dro-model{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:min(140px,20vw);line-height:1;color:var(--play-track);
}
.dro-yours{position:absolute;inset:0;width:100%;height:100%;color:var(--play-accent)}
.dro-panel .dro-legend{
  position:absolute;left:10px;bottom:8px;font-size:.6rem;
  text-transform:none;letter-spacing:0;
}
.dro-sw{display:inline-block;line-height:1}
.dro-sw.is-you{color:var(--play-accent)}
.dro-sw.is-model{color:var(--play-track)}

/* The typed answer, where the drawing face shows the overlay. Same square. */
.dro-typedback{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:22px 12px;
}
/* Right and wrong are told in words in the bar above; the strike is the
   second, non-colour signal DESIGN.md asks for, so no new accent is needed. */
.dro-tgiven{font-size:1.6rem;font-family:var(--sans)}
.dro-tgiven.is-off{color:var(--play-mute);text-decoration:line-through}

.dro-panel .dro-answer{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
}
.dro-abig{font-size:70px;line-height:1;font-family:var(--jp)}
.dro-asound{display:flex;align-items:center;gap:6px;font-size:1rem}
/* .say sizes itself for the teaching card's body text; next to a caption it
   would tower over the line. Shrunk to the size zoom.css already uses for a
   speaker beside small text (.ex .j .say), and never under the 24x24 touch
   floor (issue 138) — the icon gets smaller, the target does not.
   Hung on the class the markup actually asks for, so a speaker moved out of
   these two lines keeps the size its class promises. */
.dro-panel .dro-saysm{
  margin-left:0;padding:2px 7px;font-size:11px;
  min-width:24px;min-height:24px;flex:none;
}

/* ---- foot -------------------------------------------------------------- */

.dro-foot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
/* Two lines' worth of bubble, always, reserved on the ROW rather than on the
   bubble — 58 of the 104 characters have no mnemonic at all and so render no
   bubble for a min-height to sit on, which is most of why the panel had two
   heights. The other part: of the 46 that do have one, 43 set on one line
   and 3 on two. So the dialog was one of two sizes depending on which
   character you had walked to, and it jumped under the pointer every few
   presses of next. Reserving the taller case costs a line of white on the
   short ones and buys a dialog that never moves.
   font-size here so `lh` resolves to the bubble's own line box; the 16px is
   the padding and border the bubble must also contain, the box being
   border-box. Where `lh` is unsupported the declaration is dropped and the
   behaviour is simply today's. */
.dro-says{
  display:flex;align-items:center;gap:8px;flex:1;min-width:200px;
  font-size:.8rem;min-height:calc(2lh + 16px);
}
.dro-says .p-bub{margin:0;font-size:1em}
.dro-tanu{width:30px;height:30px;flex:none;color:var(--play-ink)}
.dro-go{white-space:nowrap}
/* Skip and the primary side by side. The footer had room for both on one
   line and stacked them anyway. `grid-auto-columns:1fr` is what keeps them
   the same size: one column each, both sized to the wider label, which
   holds in Hindi — where they run about a third longer — and would not if a
   width were pinned to a number here. */
.dro-acts{
  margin-left:auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:stretch;gap:8px;
}
.dro-panel .dro-next{white-space:nowrap}
.dro-panel .dro-next[disabled]{
  border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock);
  box-shadow:none;cursor:default;transform:none;
}

/* .p-tag uppercases at kit level with no cancel of its own, and Devanagari
   must never be uppercased. */
:root[lang="hi"] .dro-panel .p-tag{text-transform:none;letter-spacing:0}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width:760px){
  .dro-panel{padding:12px 12px 14px}
  /* One rule stacks all four screens now that they share the frame. */
  .dro-main{flex-direction:column}
  /* Square again once stacked: the pad is full width with no column beside
     it, so the 4:3 that buys the column its third of the row would only
     cost 61px of drawing height here. Pad and answer overlay share the
     rule, so within any one viewport the strokes are never stretched. */
  .dro-square{max-width:none;width:100%;aspect-ratio:1}
  .dro-panel .dro-clip{min-height:150px}
  /* Two boxes will not sit beside each other in a 246px column. */
  .dro-pairs{flex-direction:column}
  .dro-panel .dro-twin{flex:1}
  .dro-twin .dro-tile{flex:none;min-width:72px}
}
@media (max-width:400px){
  .dro-face{padding:5px 9px;font-size:.72rem}
  .dro-abig{font-size:54px}
}