/* 語文素養 v7.0 — 行動版穩定排版層。只處理顯示與點擊，不改資料。 */
:root{
  --v7-max:720px;
  --v7-pad:18px;
  --v7-gap:14px;
}
html,body{background:var(--bg)!important;overflow-x:hidden}
body{font-size:15px;line-height:1.6}
button,a,input,textarea,select{touch-action:manipulation}
button,a,[role="button"]{pointer-events:auto!important}
/* Safari：互動列不可使用 content-visibility，避免 hit-test 不穩 */
.item-card,.home-recent-row,.timeline-item .card,.outcome-card,.settings-row,img{content-visibility:visible!important;contain:none!important}

.app-main{max-width:var(--v7-max);padding:24px var(--v7-pad) 44px}
.header-inner{max-width:var(--v7-max);padding:0 var(--v7-pad)}
.logo-image{width:36px;height:36px;object-fit:contain;border-radius:0!important;box-shadow:none!important}
.brand-title{font-size:16px;white-space:nowrap}
.icon{width:20px;height:20px;stroke-width:1.7!important}
.icon-sm{width:16px;height:16px}
.icon-btn{width:44px;height:44px;border-radius:50%!important}

/* 每頁先有清楚標題，再放操作；手機不把按鈕文字藏掉 */
.page-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start!important;gap:12px 14px;margin:0 0 24px!important}
.page-title{font-size:28px!important;line-height:1.18!important;margin:0}
.page-kicker{font-size:13px;line-height:1.55;margin-top:6px;max-width:38em}
.page-actions{display:flex!important;align-items:center!important;justify-content:flex-end;gap:7px!important;flex-wrap:wrap!important}
.page-actions .btn,.page-actions .btn:not(.btn-primary){font-size:12.5px!important;width:auto!important;padding:8px 11px!important;white-space:nowrap!important;background:var(--surface)!important;border:1px solid var(--line)!important}
.page-actions .btn.btn-primary{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.page-actions .btn .icon{width:16px!important;height:16px!important}

.btn{min-height:44px!important;border-radius:12px!important;padding:9px 13px!important;line-height:1.25!important;white-space:nowrap!important;flex:none}
.btn-sm{min-height:38px!important;padding:7px 10px!important;font-size:12px!important}
.btn-block{width:100%!important;white-space:normal!important}
.link-btn{min-height:40px!important;padding:7px 2px!important}

/* 主頁：避免「開始一篇」箭頭掉行 */
.home-capture-main{min-height:62px!important;border-radius:14px!important}
.home-capture-copy{min-width:0}
.home-capture-copy strong,.home-capture-copy small{white-space:normal!important}
.home-capture-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.home-capture-shortcuts button{min-width:0!important;padding:9px 4px!important;white-space:nowrap!important}
.home-focus-button{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;white-space:nowrap!important}
.home-focus-button span{white-space:nowrap!important}
.home-focus-button .icon{flex:none}
.home-outcome-button{width:44px!important;height:44px!important;display:grid!important;place-items:center!important}

/* 功能多但不擁擠 */
.section{margin-bottom:28px!important}
.section-head{min-height:40px;margin:0 0 8px!important}
.section-title{font-size:13px!important;letter-spacing:.04em!important}
.detail-tools,.outcome-actions,.stroke-controls,.exam-actions,.exam-save-row,.admission-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center}
.detail-tools .btn{flex:0 0 auto}

/* 清單保持對齊 */
.item-card{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;align-items:center!important;gap:11px!important;padding:14px 0!important}
.item-leading{width:30px!important;height:30px!important;display:grid;place-items:center}
.item-body{min-width:0}
.item-card>.btn{justify-self:end}
.item-title{overflow-wrap:anywhere}
.item-text{overflow-wrap:anywhere}

/* 設定：四欄固定，不再文字擠成一團 */
.settings-row{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto 18px;align-items:center!important;gap:10px!important;min-height:68px!important;padding:11px 0!important}
.settings-leading{width:30px!important;height:30px!important}
.settings-copy{min-width:0!important}
.settings-name{font-size:14.5px!important;line-height:1.3}
.settings-desc{font-size:11.5px!important;line-height:1.45!important;white-space:normal!important}
.settings-status{max-width:90px!important;font-size:11.5px!important;text-align:right!important;white-space:normal!important;line-height:1.3!important}
.settings-row>.icon-sm{justify-self:end}

/* 成果：建立成果必須單行 */
.outcome-card{padding:18px 0!important}
.outcome-actions .btn{min-height:40px!important;padding:6px 2px!important}
.admission-entry-row{min-height:72px!important;padding:13px 0!important}
.admission-entry-copy{min-width:0}
.admission-entry-copy strong{font-size:14.5px;line-height:1.35}
.admission-entry-copy small{font-size:11.5px;line-height:1.45;white-space:normal}

/* 書房、紀錄 chips 水平滾動，不擠多行 */
.chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;padding:1px 0 6px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto!important;white-space:nowrap!important;min-height:36px}

/* 練字 */
.practice-toolbar{grid-template-columns:minmax(0,1fr) 150px!important}
.practice-input-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important}
.practice-pronunciation{grid-template-columns:118px 34px minmax(0,1fr) 44px!important}
.stroke-canvas-wrap{max-width:420px!important;border-radius:14px!important}
.basic-strokes{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.basic-stroke-btn{min-width:0!important}

/* Modal / Sheet：避免按鈕被底部安全區壓住 */
.overlay-root.active{pointer-events:auto!important}
.sheet,.modal{overscroll-behavior:contain}
.sheet-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;padding-bottom:calc(12px + var(--safe-bottom))!important}
.sheet-actions .btn{flex:1 1 auto!important}
.modal-wide{width:min(96vw,940px)!important}
.source-preview-frame{min-height:58vh!important}

/* PIN 圓形 */
.pin-pad{grid-template-columns:repeat(3,74px)!important;gap:13px 17px!important;justify-content:center!important}
.pin-key{width:74px!important;height:74px!important;aspect-ratio:1!important;border-radius:50%!important}

/* 自我檢查 */
.self-check-summary{display:flex;align-items:baseline;gap:8px;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.self-check-summary strong{font-size:28px}.self-check-summary span{font-size:12px;color:var(--muted)}
.self-check-list{display:grid}.self-check-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 9px;padding:11px 0;border-bottom:1px solid var(--line)}
.self-check-row span{grid-row:1/3;color:var(--rose2)}.self-check-row strong{font-size:13.5px}.self-check-row small{font-size:11.5px;color:var(--muted)}

/* 黑底白字＋粉色輔助 */
body[data-theme=dark]{--bg:#000!important;--surface:#0b0b0b!important;--surface2:#151515!important;--ink:#fff!important;--ink2:#fff!important;--muted:#b8b0ac!important;--line:#292929!important;--brand:#d7817c!important;--rose2:#e99a95!important}
body[data-theme=dark] .app-header{background:rgba(0,0,0,.98)!important}
body[data-theme=dark] .bottom-nav{background:rgba(5,5,5,.99)!important}

/* 固定浮動＋不出現 */
.fab{display:none!important}

@media(max-width:560px){
  .app-main{padding:21px 17px 42px!important}
  .header-inner{padding:0 17px!important}
  .page-head{grid-template-columns:1fr!important;gap:10px!important}
  .page-title{font-size:26px!important}
  .page-actions{justify-content:flex-start!important;width:100%;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:3px;scrollbar-width:none}
  .page-actions::-webkit-scrollbar{display:none}
  .page-actions .btn,.page-actions .btn:not(.btn-primary){font-size:12px!important;min-height:40px!important}
  .home-welcome h1{font-size:27px!important}
  .settings-status{max-width:76px!important}
  .practice-toolbar{grid-template-columns:1fr!important}
  .practice-pronunciation{grid-template-columns:106px 30px minmax(0,1fr) 42px!important}
  .practice-pronunciation .stroke-character{font-size:82px!important}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:360px){
  .app-main{padding-left:14px!important;padding-right:14px!important}
  .header-inner{padding-left:14px!important;padding-right:14px!important}
  .brand-title{font-size:15px}
  .home-capture-shortcuts button{font-size:11px!important}
  .settings-row{grid-template-columns:27px minmax(0,1fr) 66px 16px;gap:8px!important}
  .pin-pad{grid-template-columns:repeat(3,68px)!important}.pin-key{width:68px!important;height:68px!important}
}

@media(min-width:760px){
  .app-main{max-width:960px;padding:30px 28px 48px!important}
  .header-inner{max-width:960px;padding:0 28px!important}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
