.card-romanization,.japanese-label-frame { display:none; }
.display-controls button[data-toggle="romanization"] { color:#248eaa; }
.display-controls button[data-toggle="romanization"].is-on { color:#fff; background:#248eaa; }
.flashcard.is-japanese-three-track > .card-hanzi,.flashcard.is-japanese-three-track > .card-pinyin,.flashcard.is-japanese-three-track > .card-romanization { display:none!important; }
.flashcard.is-japanese-three-track:not(.is-audio-only) .card-art-fallback { display:none!important; }
.flashcard.is-japanese-three-track.is-japanese-art-only > .japanese-label-frame { display:none!important; }
.flashcard.is-japanese-three-track > .japanese-label-frame { z-index:1; display:grid; grid-area:labels; align-self:center; justify-self:stretch; width:100%; height:min(64%,300px); min-width:0; padding:0 54px; box-sizing:border-box; text-align:center; }
.japanese-label-frame p { display:none; width:100%; max-width:100%; min-width:0; margin:0; color:#1d1d1d; font-family:"Avenir Next",Avenir,sans-serif; font-weight:700; line-height:1.05; overflow:visible; text-wrap:nowrap; }
.japanese-label-frame.shows-native .japanese-native { display:block; --japanese-min-size:26px; font-size:104px; }
.japanese-label-frame.shows-kana .japanese-kana { display:block; --japanese-min-size:20px; color:var(--pinyin); font-size:62px; font-weight:600; }
.japanese-label-frame.shows-romanization .japanese-romanization { display:block; --japanese-min-size:18px; color:#248eaa; font-size:52px; font-weight:500; }
.japanese-label-frame[data-track-count="1"] { grid-template-rows:1fr; }
.japanese-label-frame[data-track-count="2"] { grid-template-rows:1fr 1fr; gap:8px; }
.japanese-label-frame[data-track-count="3"] { grid-template-rows:repeat(3,1fr); gap:5px; }
@media(min-width:900px){
  /* The compact desktop header uses 36px controls. Keep kana on one fitted
     * line there, rather than letting the two glyphs wrap and clip vertically. */
  .review-header-center > .display-controls button.is-japanese-reading-control { font-size:12px; line-height:1; white-space:nowrap; }
  /* Span the same full-height column as the artwork. The old `labels` grid
     * area stopped above the footer, which made every sparse rōmaji state
     * appear to climb toward the top of the card. */
  .flashcard.is-japanese-three-track > .japanese-label-frame { grid-area:1 / 2 / 4 / 3; align-self:center; padding:0 clamp(16px,4cqi,54px); }
  /* One- and two-track frames retain fractional rows for their established
     * geometry. Centre each actual line inside its row rather than letting a
     * stretching paragraph place its text at that row's top edge. */
  .flashcard.is-japanese-three-track > .japanese-label-frame > p { align-self:center; }
  /* The desktop card also has a compact, height-constrained form. Scale every
     * Japanese track from that card's container just as the Mandarin labels
     * do, so no script keeps a full desktop pixel size as the card contracts. */
  .japanese-label-frame.shows-native .japanese-native { font-size:min(104px,11cqi); }
  .japanese-label-frame.shows-kana .japanese-kana { font-size:min(62px,7cqi); }
  .japanese-label-frame.shows-romanization .japanese-romanization { font-size:min(52px,5.8cqi); }
  /* Treat any rōmaji-bearing pair as one centred label group. This gives its
     * gap a real value instead of spreading two lines across empty fractions
     * of the frame. */
  .japanese-label-frame[data-track-combination="kana-romanization"],
  .japanese-label-frame[data-track-combination="native-kana"],
  .japanese-label-frame[data-track-combination="native-romanization"],
  .japanese-label-frame[data-track-combination="native-kana-romanization"] { align-content:center; }
  .japanese-label-frame[data-track-combination="kana-romanization"],
  .japanese-label-frame[data-track-combination="native-kana"],
  .japanese-label-frame[data-track-combination="native-romanization"] { grid-template-rows:max-content max-content; gap:clamp(6px,1.5cqi,16px); }
  .japanese-label-frame[data-track-combination="native-kana-romanization"] { grid-template-rows:max-content max-content max-content; gap:clamp(6px,1.5cqi,16px); }
  /* Rōmaji remains a supporting reading even in the three-line state. */
  .japanese-label-frame[data-track-combination="kana-romanization"] .japanese-romanization,
  .japanese-label-frame[data-track-combination="native-romanization"] .japanese-romanization { font-size:min(46px,5.2cqi); }
  .japanese-label-frame[data-track-combination="native-kana-romanization"] .japanese-romanization { font-size:min(40px,4.6cqi); }
  /* If a long native label cannot stay substantial on one line, use the
     * available second line at a readable size instead of reducing it toward
     * the tiny text seen in the hot-chocolate card. */
  .japanese-label-frame[data-track-combination="native-romanization"] .japanese-native { --japanese-min-size:64px; }
  /* Removing art is a new composition, not a transparent left column. */
  .flashcard.is-japanese-three-track.is-japanese-hero { grid-template-areas:"hero"; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
  .flashcard.is-japanese-three-track.is-japanese-hero > .artwork { display:none!important; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame { grid-area:hero; align-self:center; height:auto; padding:0 clamp(30px,8cqi,120px); }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="1"] { grid-template-rows:max-content; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="2"] { grid-template-rows:max-content max-content; gap:clamp(18px,2cqi,28px); }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="3"] { grid-template-rows:max-content max-content max-content; gap:clamp(14px,1.6cqi,24px); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-native { font-size:min(118px,12cqi); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-kana { font-size:min(70px,7.5cqi); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-romanization { font-size:min(56px,6cqi); }
  .flashcard.is-japanese-three-track.is-japanese-hero > .card-footer { grid-template-columns:1fr; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .card-footer .card-english { grid-column:1; justify-self:start; padding-left:clamp(10px,2cqi,14px); text-align:left; }
}
@container (max-width:800px) {
  /* On the compact desktop card, a long native term may still use two lines,
     * but it must be allowed to reduce with the rest of the composition. */
  .japanese-label-frame[data-track-combination="native-romanization"] .japanese-native { --japanese-min-size:28px; }
}
@media(max-width:899px){
  .flashcard.is-japanese-three-track { grid-template-areas:"art" "labels" "footer" !important; grid-template-rows:minmax(0,1fr) var(--japanese-label-row,178px) 72px !important; }
  .flashcard.is-japanese-three-track > .japanese-label-frame { height:var(--japanese-label-row,178px); padding:0 32px; }
  .japanese-label-frame.shows-native .japanese-native { font-size:calc(72px * var(--japanese-label-scale,1)); }
  .japanese-label-frame.shows-kana .japanese-kana { font-size:calc(44px * var(--japanese-label-scale,1)); }
  .japanese-label-frame.shows-romanization .japanese-romanization { font-size:calc(34px * var(--japanese-label-scale,1)); }
  /* Kana is the dominant label when native text is absent, so it gets the
     same starting scale as the native script rather than inheriting the
     smaller supporting-reading scale. */
  .japanese-label-frame[data-track-combination="kana"] .japanese-kana,
  .japanese-label-frame[data-track-combination="kana-romanization"] .japanese-kana { font-size:calc(72px * var(--japanese-label-scale,1)); }
  /* Rōmaji on its own is the primary label, not a small caption beneath a
     * hidden script line. It therefore occupies that same dominant slot. */
  .japanese-label-frame[data-track-combination="romanization"] .japanese-romanization { --japanese-min-size:26px; font-size:calc(62px * var(--japanese-label-scale,1)); }
  /* These two combinations are a compact two-line group. The native+kana
     pair intentionally keeps its existing, airier placement; only pairs
     with rōmaji close to half of their former visible gap. */
  .japanese-label-frame[data-track-combination="kana-romanization"],
  .japanese-label-frame[data-track-combination="native-romanization"] { grid-template-rows:max-content max-content; align-content:center; gap:calc(16px * var(--japanese-label-scale,1)); }
  /* With no illustration, give the Japanese frame the whole visual region
     * and promote the currently visible tracks just like other hero cards. */
  .flashcard.is-japanese-three-track.is-japanese-hero { grid-template-areas:"labels" "footer" !important; grid-template-rows:minmax(0,1fr) 72px !important; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .artwork { display:none!important; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame { grid-area:labels; align-self:center; height:auto; padding:0 34px; transform:none; }
  /* Hero labels are content-sized groups. Fractional rows were useful beside
     an illustration, but without art they leave sparse Japanese tracks pinned
     to the top of an otherwise empty frame. */
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="1"] { grid-template-rows:max-content; }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="2"] { grid-template-rows:max-content max-content; gap:clamp(14px,3vw,20px); }
  .flashcard.is-japanese-three-track.is-japanese-hero > .japanese-label-frame[data-track-count="3"] { grid-template-rows:max-content max-content max-content; gap:clamp(12px,2.6vw,18px); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-native { font-size:calc(94px * var(--japanese-label-scale,1)); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-kana { font-size:calc(60px * var(--japanese-label-scale,1)); }
  .flashcard.is-japanese-three-track.is-japanese-hero .japanese-romanization { font-size:calc(46px * var(--japanese-label-scale,1)); }
  .flashcard.is-japanese-three-track.is-japanese-art-only { grid-template-areas:"art" "footer" !important; grid-template-rows:minmax(0,1fr) 72px !important; }
}
/* review-swift.css has a 760–899px phone firewall with a more specific
 * `.review-view .flashcard.layout-full` selector. Reassert the one real
 * Japanese phone grid in that range so it never becomes a third, implicit
 * "semi-wide" composition between phone and desktop. */
@media(min-width:760px) and (max-width:899px){
  .review-view .flashcard.is-japanese-three-track.layout-full {
    grid-template-areas:"art" "labels" "footer" !important;
    grid-template-rows:minmax(0,1fr) var(--japanese-label-row,178px) 72px !important;
  }
  .review-view .flashcard.is-japanese-three-track.is-japanese-hero.layout-full {
    grid-template-areas:"labels" "footer" !important;
    grid-template-rows:minmax(0,1fr) 72px !important;
  }
}