/* v1.87.140: Isolated layout for eight seeded beginner lessons only. */
/* ---- v1.87.138 — isolated beginner keyboard/number practice layout ----
   v1.87.136 rendered basic and number lessons in the generic sentence grid.
   Their KPI cards spilled beyond the 72px KPI track, and the example itself
   occupied an obsolete 60px track. Do not change unrelated lesson types.
*/
@media(min-width:1101px){
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas{
    grid-template-rows:48px 78px 168px 76px 32px 228px 28px!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metrics-formal,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metrics-formal{
    height:78px!important;min-height:78px!important;max-height:78px!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-card,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-card{
    height:78px!important;min-height:78px!important;max-height:78px!important;
    box-sizing:border-box!important;grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;padding:6px 12px!important;align-items:center!important;overflow:hidden!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-copy,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-copy{
    min-height:0!important;height:54px!important;display:grid!important;
    grid-template-rows:13px 30px 11px!important;align-content:center!important;
    justify-content:start!important;overflow:visible!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-label,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-label{
    height:13px!important;line-height:13px!important;font-size:11.5px!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-label small,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-label small{
    font-size:7.2px!important;line-height:1!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-copy b,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-copy b{
    height:30px!important;margin:0!important;display:flex!important;align-items:center!important;
    font-size:29px!important;line-height:30px!important;overflow:visible!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-sub,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-sub{
    height:11px!important;margin:0!important;display:block!important;
    font-size:9px!important;line-height:11px!important;white-space:nowrap!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-metric-icon,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-metric-icon{
    width:38px!important;height:38px!important;align-self:center!important;
  }
}
/* All eight lessons are identified by a protected seed metadata marker.  The
   five basic/number lessons require a dedicated two-track sentence panel. */
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-sentence-formal,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-sentence-formal{
  grid-row:3!important;width:100%!important;height:142px!important;
  min-height:142px!important;max-height:142px!important;margin:0!important;
  padding:2px 12px 0!important;box-sizing:border-box!important;
  display:grid!important;grid-template-rows:116px 20px!important;row-gap:2px!important;
  align-content:start!important;justify-items:stretch!important;
  overflow:visible!important;position:relative!important;z-index:2!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example{
  grid-row:1!important;width:100%!important;max-width:none!important;
  height:116px!important;min-height:116px!important;max-height:116px!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;
  display:grid!important;grid-template-rows:58px 24px 34px!important;row-gap:0!important;
  align-content:start!important;justify-items:stretch!important;overflow:visible!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-jp,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-jp{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:100%!important;height:58px!important;min-height:58px!important;
  max-height:58px!important;margin:0 auto!important;padding:0!important;
  box-sizing:border-box!important;white-space:nowrap!important;
  font-size:46px!important;line-height:1.12!important;
  letter-spacing:.07em!important;overflow:visible!important;
  border-bottom:1px dashed #c8cbd0!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-jp{
  text-transform:uppercase!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-kana,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-kana{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:100%!important;height:24px!important;min-height:24px!important;
  max-height:24px!important;margin:0 auto!important;padding:0!important;
  font-size:17px!important;line-height:1.15!important;overflow:visible!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-roman,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-roman{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:100%!important;height:34px!important;min-height:34px!important;
  max-height:34px!important;margin:0 auto!important;padding:0!important;
  font-size:22px!important;line-height:1.1!important;white-space:nowrap!important;
  overflow:visible!important;
}
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-progress-row,
html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-progress-row{
  grid-row:2!important;width:min(100%,1120px)!important;max-width:1120px!important;
  height:20px!important;min-height:20px!important;max-height:20px!important;
  margin:0 auto!important;padding:2px 0 0!important;align-self:start!important;
  box-sizing:border-box!important;
}
@media(max-width:1100px){
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-jp,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-jp{
    font-size:clamp(26px,5vw,42px)!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-kana,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-kana{
    font-size:clamp(12px,2.6vw,17px)!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-current-example .tc-roman,
  html body.tc-stage-practice .tc-shell[data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-current-example .tc-roman{
    font-size:clamp(14px,3.4vw,22px)!important;
  }
}
/* Specificity must exceed the older word-lane rules (which include data-tc-app). */
@media(max-width:500px){
  html body.tc-stage-practice .tc-shell[data-tc-app][data-lesson-type="word"][data-tc-beginner-lesson="beginner-romaji-first-steps"] .tc-practice-canvas .tc-current-example .tc-jp,
  html body.tc-stage-practice .tc-shell[data-tc-app][data-lesson-type="word"][data-tc-beginner-lesson="beginner-romaji-tricky-sounds"] .tc-practice-canvas .tc-current-example .tc-jp{
    font-size:34px!important;letter-spacing:.025em!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-lesson-type="word"][data-tc-beginner-lesson="beginner-romaji-first-steps"] .tc-practice-canvas .tc-current-example .tc-roman,
  html body.tc-stage-practice .tc-shell[data-tc-app][data-lesson-type="word"][data-tc-beginner-lesson="beginner-romaji-tricky-sounds"] .tc-practice-canvas .tc-current-example .tc-roman{
    font-size:18px!important;letter-spacing:.035em!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-lesson-type="short"][data-tc-beginner-lesson="beginner-easy-short-100"] .tc-practice-canvas .tc-current-example .tc-roman{
    font-size:min(var(--tc-short-roman-size,15.5px),15px)!important;
    letter-spacing:.035em!important;
  }
}
/* Old shared sentence CSS applies justify-content:flex-start to the grid,
   collapsing its auto column to roughly 106px. Make this lane full width. */
html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson][data-lesson-type="basic"] .tc-practice-canvas .tc-sentence-formal,
html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson][data-lesson-type="number"] .tc-practice-canvas .tc-sentence-formal{
  grid-template-columns:minmax(0,1fr)!important;
  justify-content:stretch!important;
  justify-items:stretch!important;
}

/* v1.87.140: the legacy desktop NEXT FINGER grid outranks the mobile rule.
   Restrict its two-column phone layout to our eight seeded lessons only. */
@media(max-width:600px){
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger.tc-next-finger-formal{
    width:100%!important;max-width:none!important;min-width:0!important;
    height:auto!important;min-height:72px!important;
    display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;
    align-items:center!important;gap:10px!important;
    padding:8px 11px!important;box-sizing:border-box!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger-formal .tc-next-key{
    width:50px!important;height:54px!important;font-size:26px!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger-copy{
    min-width:0!important;width:100%!important;overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger-copy>strong{
    font-size:clamp(16px,4.5vw,22px)!important;line-height:1.35!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger-copy>small{
    font-size:10px!important;line-height:1.25!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-next-finger-copy>em{
    font-size:10px!important;line-height:1.35!important;
  }
  html body.tc-stage-practice .tc-shell[data-tc-app][data-tc-beginner-lesson] .tc-practice-canvas .tc-hands-formal{
    display:none!important;
  }
}