/*
 * THIEPN Chinese — C9-12 mobile and accessible interaction layer.
 * Loaded after C9-01–C9-11. No competing route, learner or theme authority.
 */
.c9-visually-hidden {
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
:root {
  --c9-safe-bottom:env(safe-area-inset-bottom,0px);
  --c9-safe-top:env(safe-area-inset-top,0px);
  --c9-tap:44px;
}
html {scroll-padding-top:16px;overflow-x:clip;}
body {overflow-x:clip;}
:where(.c9-app-shell,.c9-app-shell .workspace,.c9-app-shell .workspace main,#app-content) {
  min-width:0;
}
.c9-app-shell .workspace main :where(
  article,section,aside,nav,form,figure,blockquote,
  .simple-panel,.stats-grid,.p30-find-list,.p23-word-entry,
  .c9-lesson-workspace,.c9-library,.c9-media-workspace,
  .c9-utility-page,.c9-assessment,.c9-character-page
) {min-width:0;}
.c9-app-shell .workspace main :where(
  .c9-lesson-context-card,.p31-word-family,.c9-library-word,.c9-vocab-item,
  .p25-teaching,.p26-context,.dialogue-turn,.story-paper
) {overflow-wrap:anywhere;}
.c9-app-shell .workspace main :where(
  .sentence-hanzi,.story-chinese,.dialogue-chinese,.c9-character-example,
  .p26-heading [lang="zh-Hans"],.c9-lesson-title-row [lang="zh-Hans"]
) {
  word-break:normal;
  overflow-wrap:anywhere;
  line-height:1.65;
}
.c9-app-shell .workspace main :where(
  .sentence-pinyin,.story-pinyin,.dialogue-pinyin,
  .word-pinyin,.c9-lesson-pronunciation,.c9-character-pinyin
) {line-height:1.65;overflow-wrap:anywhere;}
/* Allow content-rich native tables to scroll instead of forcing app-wide
 * horizontal overflow. The native document remains semantically a table. */
.c9-app-shell .workspace main :where(
  .c9-data-table,.progress-panel table,.p30-evidence table
) {max-width:100%;}
.c9-app-shell .workspace main :where(
  .analytics-chart,.p24-chart,.p24-syllable-current,.p23-dictionary-section
) {max-width:100%;min-width:0;overflow-x:auto;}
.c9-app-shell .workspace main :where(
  img,video,canvas,svg:not(.c9-icon)
) {max-width:100%;}
/* Shared touch targets and focus rules live in C9 system CSS. */
/* Native section anchors are programmatically focused; avoid dropping the
 * heading behind the horizontal tab bar or the mobile bottom navigation. */
.c9-lesson-workspace :where(
  .c9-native-section,.c9-lesson-header,#c9-lesson-title
),
.c9-character-section,
.c9-utility-page [tabindex="-1"],
.c9-assessment-feedback[tabindex="-1"],
.c9-media-workspace [tabindex="-1"] {
  scroll-margin-top:calc(24px + var(--c9-safe-top));
}
.c9-lesson-main .c9-native-section:focus,
.c9-character-section:focus,
.c9-assessment-feedback:focus,
.c9-app-shell .workspace main h1[tabindex="-1"]:focus {
  outline-offset:4px;
}
/* More destination dialog: native showModal receives browser-provided focus
 * containment; the existing fallback has application-level Escape/Tab care. */
.c9-mobile-drawer[open] {
  max-height:min(90dvh,840px);
  padding-bottom:var(--c9-safe-bottom);
  overscroll-behavior:contain;
}
.c9-drawer-header {
  padding-top:max(14px,env(safe-area-inset-top,0px));
}
.c9-mobile-drawer .c9-drawer-group {
  gap:7px;
}
.c9-mobile-drawer .c9-drawer-group a {
  min-height:48px;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
}
.c9-mobile-drawer :where(.c9-icon-button,#c9-drawer-close) {
  width:44px;min-width:44px;height:44px;
}
.c9-mobile-nav.mobile-nav :where(a,button) {
  -webkit-tap-highlight-color:transparent;
}
.c9-mobile-nav.mobile-nav a[aria-current="page"],
.c9-mobile-nav.mobile-nav button[aria-expanded="true"] {
  font-weight:700;
}
/* Shortcut help is a small *real* native dialog, not a second navigation UI. */
.c9-keyboard-help-trigger {
  display:inline-flex;gap:7px;align-items:center;justify-content:center;
  min-height:44px;padding:7px 11px;
  white-space:nowrap;text-decoration:none;
  background:transparent;border:1px solid var(--c9-line);
  border-radius:var(--c9-r-sm);color:var(--c9-ink);cursor:pointer;
}
.c9-keyboard-help-trigger kbd,
.c9-shortcuts-dialog kbd {
  padding:3px 6px;border:1px solid var(--c9-line-strong);
  border-radius:var(--c9-r-xs);background:var(--c9-surface-2);
  font:600 12px/1.2 var(--c9-ui);
}
.c9-shortcuts-dialog {
  width:min(620px,calc(100vw - 32px));
  max-height:min(86dvh,760px);
  margin:auto;border:1px solid var(--c9-line-strong);
  border-radius:var(--c9-r);
  padding:clamp(16px,3vw,26px);
  overflow:auto;
  background:var(--c9-surface);color:var(--c9-ink);
  box-shadow:0 14px 45px rgba(0,0,0,.18);
}
.c9-shortcuts-dialog::backdrop {
  background:rgba(7,19,20,.62);
}
.c9-shortcuts-head {
  display:flex;align-items:start;justify-content:space-between;
  gap:13px;padding-bottom:13px;border-bottom:1px solid var(--c9-line);
}
.c9-shortcuts-head h2 {
  margin:3px 0;font:600 23px/1.25 var(--c9-display);
}
.c9-shortcuts-head .c9-icon-button {
  min-height:44px;min-width:60px;padding:9px 12px;
  border:1px solid var(--c9-line-strong);
  border-radius:var(--c9-r-sm);
  background:var(--c9-surface);color:var(--c9-ink);cursor:pointer;
}
.c9-shortcuts-dialog>p {
  margin:13px 0;font-size:13px;line-height:1.65;color:var(--c9-sub);
}
.c9-shortcuts-list {display:grid;gap:0;margin:14px 0 0;}
.c9-shortcuts-list>div {
  display:grid;grid-template-columns:minmax(115px,.44fr) minmax(0,1fr);
  align-items:center;gap:14px;
  padding:12px 0;border-top:1px solid var(--c9-line);
}
.c9-shortcuts-list dt {display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.c9-shortcuts-list dd {margin:0;font-size:12px;line-height:1.55;color:var(--c9-sub);}
.c9-shortcuts-dialog .c9-shortcuts-note {
  padding:12px;background:var(--c9-surface-2);
  border:1px solid var(--c9-line);border-radius:var(--c9-r-sm);
}
/* Source-authentic writing is keyboard- and pointer-operable but *never*
 * scored. The guide is visible and announced as an alternative. */
.c9-writing-keyboard-help {
  font:400 12px/1.65 var(--c9-ui);
  color:var(--c9-sub);
  margin:0;
  padding:10px 12px;
  background:var(--c9-surface-2);
  border-left:3px solid var(--c9-sage);
  border-radius:0 var(--c9-r-xs) var(--c9-r-xs) 0;
}
#c9-writing-canvas {touch-action:none;user-select:none;}
#c9-writing-canvas:focus-visible {
  outline:4px solid var(--c9-focus)!important;
  outline-offset:4px!important;
}
.c9-writing-controls {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.c9-writing-controls :where(button) {min-height:44px;min-width:65px;}
#c9-writing-feedback {line-height:1.6;overflow-wrap:anywhere;}
/* Improve keyboard addressability for the horizontal lesson and Character
 * study tabs. No hidden focus targets. */
.c9-lesson-sections,.c9-character-tabs,.c9-tabs,
.c9-practice-page .practice-tabs,
.c9-media-workspace .mode-tabs,
.c9-utility-page .p30-search-filters {
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scroll-padding-inline:12px;
}
.c9-lesson-nav-button,.c9-character-tab {
  scroll-margin-inline:12px;
  min-width:max-content;
  white-space:normal;
  text-align:left;
}
.c9-character-tabs .c9-character-tab[aria-current="location"],
.c9-lesson-nav-button[aria-current="location"] {
  border-color:var(--c9-accent);
  color:var(--c9-accent);
  background:var(--c9-accent-soft);
}
.c9-assessment-response .c9-assessment-actions button,
.c9-practice-page .button-row button,
.c9-media-workspace .button-row button {
  min-height:44px;
}
.c9-lesson-bottom-nav,.c9-lesson-pager {
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:9px;
}
.c9-assessment-choices>.choice[aria-pressed="true"],
.c9-assessment-feedback,
.c9-assessment-queue {
  outline-offset:2px;
}
/* Screens with side-by-side native study cards stack before min-content can
 * force horizontal page overflow. */
@media (max-width:1100px) {
 .c9-learn-hub :where(.c9-discovery-grid,.c9-course-cards),
 .c9-utility-page .c9-progress-evidence-grid,
 .c9-media-workspace .c9-media-entry-grid,
 .c9-assessment .c9-assessment-columns {
   min-width:0;
 }
 .c9-lesson-layout{grid-template-columns:minmax(0,1fr);}
 .c9-lesson-right{position:static;grid-column:1;}
 .c9-lesson-left{position:sticky;top:0;z-index:12;min-width:0;}
 .c9-lesson-sections{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;gap:5px;}
 .c9-lesson-nav-button{flex:0 0 auto;min-height:44px;}
}
@media (max-width:800px){
 .c9-app-shell .workspace main{
  padding-bottom:calc(var(--c9-mobile-nav-height) + var(--c9-safe-bottom) + 40px);
  scroll-padding-bottom:calc(var(--c9-mobile-nav-height) + var(--c9-safe-bottom) + 20px);
 }
 .c9-mobile-nav.mobile-nav{
  min-height:calc(var(--c9-mobile-nav-height) + var(--c9-safe-bottom));
  padding-bottom:max(4px,var(--c9-safe-bottom));
 }
 .c9-mobile-nav.mobile-nav :where(a,button){
  min-height:52px;
  gap:3px;
  padding:5px 2px;
 }
 .c9-mobile-nav.mobile-nav .c9-icon{flex:none;}
 .c9-mobile-drawer[open]{
  max-height:min(90dvh,740px);
  bottom:0;
 }
 .c9-topbar .top-actions{gap:6px;}
 .c9-topbar .c9-keyboard-help-trigger{padding:8px 9px;min-width:44px;font-size:0;}
 .c9-topbar .c9-keyboard-help-trigger kbd{font-size:12px;}
 .c9-topbar .status-chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
 .c9-character-glyph,.c9-native-section .big-hanzi {
  max-width:100%;
  line-height:1.25;
 }
 .c9-lesson-right,.c9-character-evidence,
 .c9-library-words,.c9-assessment-columns,
 .c9-progress-units {min-width:0;}
 .c9-lesson-nav-button .c9-lesson-nav-copy small{display:none;}
}
@media (max-width:640px) {
 .c9-app-shell .workspace main {
   padding-inline:max(12px,env(safe-area-inset-left,0px));
   padding-right:max(12px,env(safe-area-inset-right,0px));
 }
 .c9-mobile-drawer[open]{width:100vw;max-width:100vw;border-radius:var(--c9-r) var(--c9-r) 0 0;}
 .c9-drawer-groups{padding:12px 12px calc(16px + var(--c9-safe-bottom));}
 .c9-drawer-group{grid-template-columns:repeat(2,minmax(0,1fr));}
 .c9-lesson-header-actions,.c9-character-hero-actions,
 .c9-character-neighbors,.c9-media-lead-actions,
 .c9-assessment-actions,.c9-lesson-pager,.c9-writing-controls{
  min-width:0;
 }
 .c9-lesson-header-actions>button,.c9-lesson-header-actions>.c9-button,
 .c9-assessment-actions>.c9-button,
 .c9-media-lead-actions>.c9-button {
  flex:1 1 auto;
  min-height:44px;
 }
 .c9-review-active .c9-assessment-hanzi{
  font-size:clamp(40px,12vw,75px);
 }
 .c9-character-example{
  grid-template-columns:minmax(0,1fr);
 }
 .c9-character-example-index{
  font-size:11px;
  margin:0;
 }
 .c9-writing-guide>span{
  font-size:clamp(60px,19vw,110px);
 }
 .c9-utility-metrics,.c9-review-complete .c9-assessment-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 .c9-utility-page .c9-search-category-grid,
 .c9-secondary-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .c9-library-word-actions,.c9-character-word-actions{
  flex-wrap:wrap;
  gap:7px;
 }
 .c9-search-page .p30-search-filters{overflow-x:auto;flex-wrap:nowrap;min-width:0;}
 .c9-search-page .p30-search-filters>*{flex:0 0 auto;}
 .c9-mobile-nav.mobile-nav :where(a,button)>span{
  font-size:clamp(10px,2.9vw,12px);
 }
 .c9-shortcuts-list>div{grid-template-columns:minmax(92px,.35fr) minmax(0,1fr);gap:9px;}
}
@media (max-width:380px) {
 .c9-drawer-group{grid-template-columns:minmax(0,1fr);}
 .c9-mobile-nav.mobile-nav :where(a,button){padding-inline:0;}
 .c9-mobile-nav.mobile-nav .c9-icon{width:20px;height:20px;}
 .c9-topbar .status-chip{max-width:95px;font-size:10px;}
 .c9-utility-page .c9-search-category-grid,.c9-secondary-grid{grid-template-columns:minmax(0,1fr);}
 .c9-assessment-stats,.c9-library-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
 .c9-shortcuts-dialog{padding:14px 11px;}
 .c9-shortcuts-list>div{grid-template-columns:minmax(0,1fr);gap:5px;}
}
/* Motion and system contrast preferences are respected without changing the
 * explicit learner-selected light/dark theme. */
@media (prefers-reduced-motion:reduce){
 :root{scroll-behavior:auto;}
 .c9-app-shell *, .c9-shortcuts-dialog *, .c9-mobile-drawer *{
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  transition-duration:.01ms!important;
 }
}
@media(forced-colors:active){
 .c9-mobile-nav.mobile-nav [aria-current="page"],
 .c9-lesson-nav-button[aria-current="location"],
 .c9-character-tab[aria-current="location"],
 .c9-assessment-choices>.choice[aria-pressed="true"]{
  outline:2px solid Highlight!important;
  outline-offset:-2px;
 }
 .c9-mobile-drawer,.c9-shortcuts-dialog,.c9-writing-keyboard-help {
  border:1px solid CanvasText;
 }
 #c9-writing-canvas {border:2px solid CanvasText;}
}