/* phone.css — Dokusho's iPhone-only rules (html.iphone, set inline in index.html ).
Created 2026-08-24 by porting Manabi's phone.css KANJI CARD section for Dokusho v2.1 —
Joshua's order: "you need to change the Kanji card layout whenever a card is opened,
not just from the main text". The 2026-08-18 shared-sheet port carried the card BOX and
the whole-card scroll; the LAYOUT half (header hug, glyph hug, full-height story) had
stayed in Manabi's phone.css, which says so itself: "phone.css is Manabi-only, so the
shared card sheet is untouched and Dokusho/Dominos keep today's behaviour." This file
ends that for Dokusho. ⚠ Rule bodies are VERBATIM from Manabi — do not re-derive.
🌏 Dominos is still owed the same port at its next binary (portfolio-drift.json). */
/* ══════════════════════════════════════════════════════════════════════════
📱 THE KANJI CARD ON THE PHONE — the story is READ, not scrolled
Joshua, 2026-08-18, after finding it himself:
"The Kanji story is actually scrollable, but from a user perspective, it is
not clear. And the text field is much too small to have a scroll function.
If you just moved the Kanji and everything below higher and closer to the
double line, and then show the entire text of the Kanji story (not
scrollable anymore), this should do it."
WHY THE GAP WAS THERE. `.kanji-glyph-row` is `flex: 1 1 auto` with a 265px
floor and it is the ONLY flex-GROW child of the back face, so it absorbs every
spare pixel; its `.kanji-svg-wrapper` then CENTRES the drawing inside that
inflated row, which puts empty space between the brass double rule and the
glyph — and pushes the story down into a box too short to read.
⇒ On the phone: the glyph row takes its natural size, everything rides up
under the double rule, and the story is `overflow: visible` at its full
height. Leftover space falls to the FOOT of the card, where it costs nothing;
a story longer than the card scrolls the WHOLE card (face-back overflow-y:auto,
the shared sheet's 2026-08-18 rule).
🔒 SCOPED TO html.iphone, ON PURPOSE — the 265px floor and the centred wrapper
are what make the iPad card right. */
/* 🔴 THE REAL SOURCE OF THE GAP (Manabi's second pass): it is NOT the glyph
row, it is the HEADER. `.kanji-readings-top` is `min-height: 33%` with
`justify-content: center` — on a 660px card that reserves 218px for roughly 140px
of chips + meaning + divider, and the leftover splits ABOVE and BELOW the content.
The half below lands between the brass double rule and the kanji, because the
divider is the header's LAST CHILD and the empty space sits under it, inside the
header. ⇒ On the phone the header hugs its content, so the kanji, the ▶
stroke-order button and the buttons under them all ride up, and every pixel
freed goes to the story below. */
html.iphone :is(.flipped-overlay, .tile-panel-inner, .tile-overlay-card) .kanji-readings-top {
min-height: 0;
}
html.iphone :is(.flipped-overlay, .tile-panel-inner, .tile-overlay-card) .kanji-glyph-row {
flex: 0 0 auto;
min-height: 0; /* undoes the 265px floor for the phone only */
}
html.iphone :is(.flipped-overlay, .tile-panel-inner, .tile-overlay-card) .kanji-svg-wrapper {
flex: 0 0 auto; /* hug the drawing instead of centring it in slack */
}
html.iphone :is(.flipped-overlay, .tile-panel-inner, .tile-overlay-card) .kanji-mnemonic {
flex: 0 0 auto;
min-height: 0; /* the two-line floor is no longer what holds it open */
max-height: none;
overflow: visible; /* the WHOLE story — no scroll box, nothing clipped */
}