/* ============================================================
   legacy-skin.css — TooPower K1 舊頁換皮（講義式淺色）
   ------------------------------------------------------------
   【載入順序】舊頁所有 CSS（tokens/base/components/zhuyin/
   print/practice/math、tp-tokens-v2、各 theme-v2）之後，
   /kids/assets/tp3.css 之後，最後才是本檔。
   搭配根目錄 tp3-shell.js：它會移除舊 .tp-site-header／
   .tp-site-footer 並注入 tp3-header/tp3-footer。本檔仍保留
   舊頁首頁尾的淺色後援樣式，JS 未載入時頁面依然可用。

   【範圍紅線】
   - 只動頁殼、介面元件、按鈕、panel、nav、tabs、forms、
     footer、App 容器。
   - 絕不碰題目內的 tp-mk-* 結構、數學符號、算式、圖表 SVG
     的顏色語義，也不碰 tpz-* 注音字格版位。
   - 不用 body{overflow-x:hidden} 掩蓋溢出；不 display:none
     隱藏工作區；不改題目引擎。
   - 全站單一淺色，不跟隨系統深色（見第 2 節）。
   - 所有 --tp3-* 引用都帶講義淺色 fallback，tp3.css 缺席
     時頁面仍是同一套淺色主題。
   ============================================================ */


/* ============================================================
   0. [hidden] 保護
   舊 base.css 用 :where([hidden])（零特異度）＋ !important；
   這裡再明文宣告一次，確保任何 display:grid/flex 都蓋不掉。
   ============================================================ */
[hidden] {
  display: none !important;
}


/* ============================================================
   1. 權杖橋接：舊 --tp-* 全部映射到 --tp3-*（附 fallback）
   舊元件（components/practice/print/math.css）不用改一行的
   情況下，顏色、字體自動跟到新設計。
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- 紙階與表面 ---- */
  --tp-paper: var(--tp3-paper, #FAF6EE);
  --tp-paper-deep: var(--tp3-paper-deep, #F3EDE0);
  --tp-surface: var(--tp3-surface, #FFFFFF);
  --tp-surface-white: var(--tp3-surface, #FFFFFF);

  /* ---- 墨階（文字） ---- */
  --tp-ink: var(--tp3-ink, #3B352C);
  --tp-ink-soft: var(--tp3-ink-soft, #6E6558);
  --tp-ink-faint: var(--tp3-ink-faint, #A79B8A);
  --tp-ink-blue: var(--tp3-blue, #5B7183);

  /* ---- 線 ---- */
  --tp-line: var(--tp3-line, #E7DECD);
  --tp-line-c: var(--tp3-line, #E7DECD);
  --tp-line-strong: var(--tp3-line, #D9CDB5);
  --tp-grid-line: var(--tp3-grid-line, #E0D4BE);

  /* ---- 朱砂（主按鈕、重點、答錯） ----
     --tp-cinnabar-dark 是舊主按鈕底色（白字 5.6:1），
     對到新主色；--tp-cinnabar 是 hover 階。 */
  --tp-cinnabar-dark: var(--tp3-primary, #A94A3C);
  --tp-cinnabar: var(--tp3-primary-hover, #C05B4B);
  --tp-cinnabar-soft: var(--tp3-primary-soft, #F6E4DF);

  /* ---- 鼠尾草綠（成功、已學會） ---- */
  --tp-sage: var(--tp3-sage, #7C8B6F);
  --tp-sage-deep: var(--tp3-sage-deep, #5E6E52);
  --tp-sage-soft: var(--tp3-sage-soft, #E9EDE2);

  /* ---- 琥珀（進行中、提示） ---- */
  --tp-amber: var(--tp3-amber, #C99A4B);
  --tp-amber-deep: var(--tp3-amber-deep, #A87A2E);
  --tp-amber-soft: var(--tp3-amber-soft, #F6ECDA);

  /* ---- 狀態語意 ---- */
  --tp-success: var(--tp3-sage-deep, #5E6E52);
  --tp-success-soft: var(--tp3-sage-soft, #E9EDE2);
  --tp-warning: var(--tp3-amber-deep, #A87A2E);
  --tp-warning-soft: var(--tp3-amber-soft, #F6ECDA);
  --tp-error: var(--tp3-danger, #A94A3C);
  --tp-error-soft: var(--tp3-primary-soft, #F6E4DF);
  --tp-info: var(--tp3-blue, #5B7183);

  /* ---- 科目識別（圖示底與徽章，不改題目圖表語義） ---- */
  --tp-subject-zh: var(--tp3-subject-chinese, #C05B4B);
  --tp-subject-zh-soft: var(--tp3-subject-chinese-soft, #F6E4DF);
  --tp-subject-math: var(--tp3-subject-math, #5B7183);
  --tp-subject-math-soft: var(--tp3-subject-math-soft, #E4EAF0);
  --tp-subject-en: var(--tp3-subject-english, #5E6E52);
  --tp-subject-en-soft: var(--tp3-subject-english-soft, #E9EDE2);
  --tp-subject-sci: var(--tp3-subject-science, #A87A2E);
  --tp-subject-sci-soft: var(--tp3-subject-science-soft, #F6ECDA);
  --tp-subject-soc: var(--tp3-subject-social, #5B7183);
  --tp-subject-soc-soft: var(--tp3-subject-social-soft, #E4EAF0);
  --tp-subject-arts: var(--tp3-amber-deep, #A87A2E);
  --tp-subject-arts-soft: var(--tp3-amber-soft, #F6ECDA);
  --tp-subject-skills: var(--tp3-primary, #A94A3C);
  --tp-subject-skills-soft: var(--tp3-primary-soft, #F6E4DF);
  --tp-subject-life: var(--tp3-sage, #7C8B6F);
  --tp-subject-life-soft: var(--tp3-sage-soft, #E9EDE2);

  /* ---- 聚焦環 ---- */
  --tp-focus-ring: var(--tp3-focus, #A94A3C);
  --tp-focus-ring-soft: rgba(169, 74, 60, 0.35);

  /* ---- 字體（系統字型堆疊，無外部請求） ---- */
  --tp-font-sans: var(--tp3-font-sans, "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif);
  --tp-font-serif: var(--tp3-font-serif, "Noto Serif TC", "Songti TC", serif);
  --tp-font-kai: var(--tp3-font-kai, "LXGW WenKai TC", "Kaiti TC", "Noto Serif TC", serif);

  /* ---- v2 語意層（tp-tokens-v2.css 的入口頁與 App 用） ---- */
  --tp-bg: var(--tp3-paper, #FAF6EE);
  --tp-bg-deep: var(--tp3-paper-deep, #F3EDE0);
  --tp-surface-2: #FDFAF3;
  --tp-text: var(--tp3-ink, #3B352C);
  --tp-text-soft: var(--tp3-ink-soft, #6E6558);
  --tp-text-faint: var(--tp3-ink-faint, #A79B8A);

  /* ---- v2 強調色（kids 朱砂系；入口頁元件吃這組） ---- */
  --tp-accent: var(--tp3-primary, #C05B4B);
  --tp-accent-text: var(--tp3-primary, #A94A3C);
  --tp-accent-strong: var(--tp3-primary-hover, #A94A3C);
  --tp-accent-on: #FFFFFF;
  --tp-accent-soft: var(--tp3-primary-soft, #F6E4DF);
  --tp-accent-softer: #FBF1EC;
}


/* ============================================================
   2. 單一淺色（integrate，1151101 改寫）
   原稿這裡有兩組「把深色壓回淺色」的覆寫（系統偏好、data-theme="dark"）。現在 tp-tokens-v2.css 已不再有
   跟隨系統深色的區塊，全站建置也會拿掉所有 prefers-color-scheme 深色寫法（tools/light_only.py），
   所以系統偏好那組不需要了。
   data-theme="dark" 那組也拿掉：它只會在 App 自己的深色開關（使用者主動切換，由 tp-theme-bridge-v2.js 同步）
   打開時出現；若在這裡強制壓回淺色，開關按了沒反應，等於壞掉。預設與回訪都是淺色。
   ============================================================ */


/* ============================================================
   3. 頁殼基底：body、舊 shell 淺色後援、深色 App 容器救援
   ============================================================ */
body {
  font-family: var(--tp-font-sans);
  color: var(--tp-ink);
  background-color: var(--tp-paper);
}

/* 深色 App（.tp-app 容器或 body 帶 app 層級）的硬編深色底
   一律回到紙色；只動容器，不動 App 內的題目圖形。 */
.tp-app,
body.tp-app,
body[data-tp-app] {
  background-color: var(--tp3-paper, #FAF6EE);
  color: var(--tp3-ink, #3B352C);
}

/* 深色 App 殼層常見的固定底列／浮鈕底色（v2 shell 變數已
   映射為淺色；這裡再保險壓掉硬編深底），不隱藏、不改位置，
   tp3-shell.js 處理結構後自然消失。 */
.tp-app-footer,
.tp-app-bar,
.tp-shell-bar {
  background-color: var(--tp3-surface, #FFFFFF);
  color: var(--tp3-ink, #3B352C);
  border-color: var(--tp3-line, #E7DECD);
}

/* 舊頁首／頁尾淺色後援：tp3-shell.js 載入成功時整塊被移除，
   這組樣式是 JS 缺席時的保底，仍是淺色、無固定深色底列。 */
.tp-site-header {
  background-color: var(--tp-paper);
  color: var(--tp-ink);
  border-bottom: 1px solid var(--tp-line);
}

.tp-site-footer {
  background-color: var(--tp-paper-deep);
  color: var(--tp-ink-soft);
  border-top: 1px solid var(--tp-line);
}

.tp-site-footer a {
  color: var(--tp-ink-soft);
}

.tp-site-footer a:hover {
  color: var(--tp-cinnabar-dark);
}

/* v2 入口頁頁首頁尾（kids-apps-template 的 .tp-header／
   .tp-footer）：結構由 tp3-shell.js 接管前維持淺色紙感。 */
.tp-header {
  background-color: var(--tp-paper);
  color: var(--tp-ink);
  border-bottom: 1px solid var(--tp-line);
}

.tp-footer {
  background-color: var(--tp-paper-deep);
  color: var(--tp-ink-soft);
  border-top: 1px solid var(--tp-line);
}

/* 內頁「你在這裡」導覽列（art.js 的 .tp-way）原本黏在舊頁首下方（top: 60px，會跑到新頁首上面蓋住它）；
   舊頁首已換成不黏的新頁首，導覽列改黏在頁面頂端。 */
.tp-way {
  top: 0;
}

/* 漂浮國字裝飾維持淡墨，深色模式下也不反白 */
.tp-float-layer .tp-float-char {
  color: rgba(59, 53, 44, 0.045);
}


/* ============================================================
   4. 介面元件：按鈕、chip、tab、segmented、表單
   觸控目標一律 ≥48px；焦點可見；朱砂只留給既有主按鈕
   （.tp-btn--primary），不新增任何實心主色按鈕。
   ============================================================ */

/* ---- 觸控下限 48px ---- */
.tp-btn,
.tp-chip,
.tp-option,
.tp-tab {
  min-height: 48px;
}

/* 舊 .tp-btn--sm 只有 40px，補到 48px */
.tp-btn--sm {
  min-height: 48px;
}

/* 舊頁首後援模式下的年級導覽連結也補到 48px */
.tp-grade-nav a {
  min-height: 48px;
}

/* ---- 焦點可見（朱砂聚焦環，所有互動元件） ---- */
.tp-btn:focus-visible,
.tp-chip:focus-visible,
.tp-option:focus-visible,
.tp-tab:focus-visible,
.tp-card:focus-visible,
.tp-version-row:focus-visible,
.tp-recent__item:focus-visible,
.tp-recent__clear:focus-visible,
.tp-card__expand:focus-visible,
.tp-search__clear:focus-visible,
.tpr-btn:focus-visible,
.tpr-open:focus-visible,
.tpr-chip:focus-within {
  outline: 3px solid var(--tp-focus-ring);
  outline-offset: 2px;
}

/* ---- chip／segmented 文字可換行，不撐出卡片 ----
   舊 chip 是 white-space:nowrap，長課名在手機會溢出；
   允許換行、限寬在容器內。 */
.tp-chip {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.tp-segmented {
  max-width: 100%;
  flex-wrap: wrap;
}

.tp-segmented span {
  white-space: normal;
  text-align: center;
  min-width: 0;
}

/* ---- 表單控制項不超出容器 ---- */
.tp-input,
.tp-select,
.tp-textarea,
.tp-answer-input {
  max-width: 100%;
}

.tp-panel input,
.tp-panel select,
.tp-panel textarea,
.tp-workspace input,
.tp-workspace select,
.tp-workspace textarea,
.tp-header-tools select,
.tp-site-header select,
.tp-field input,
.tp-field select,
.tp-filter input {
  max-width: 100%;
}

/* 表單聚焦：邊框＋柔光圈（沿用舊互動，色走新權杖） */
.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus {
  border-color: var(--tp-cinnabar);
  box-shadow: 0 0 0 3px var(--tp-focus-ring-soft);
}


/* ============================================================
   5. 375px 溢出修正
   grid/flex 子項 min-width:0；容器限寬；按鈕群可換行。
   不用 body{overflow-x:hidden} 遮掩，也不隱藏任何內容。
   ============================================================ */
.tp-container,
.tp-workspace,
.tp-panel,
.tp-sheet-viewer,
.tp-practice,
.tp-question,
.tp-options,
.tp-card,
.tp-card-grid,
.tp-empty,
.tp-filter,
.tp-hero__inner,
.tp-main,
#tp-unit {
  min-width: 0;
  max-width: 100%;
}

/* grid／flex 子項預設 min-width:auto 會撐破版面，歸零 */
.tp-workspace > *,
.tp-card-grid > *,
.tp-sheet-viewer > *,
.tp-panel > *,
.tp-practice > *,
.tp-practice__stage > *,
.tp-options > *,
.tp-site-footer__grid > *,
.tp-hero__inner > *,
.tp-filter > *,
.tp-filter__row > *,
#tp-unit > * {
  min-width: 0;
}

/* 難度與操作按鈕群：可換行、可縮，不被擠出卡片 */
.tp-practice__actions,
.tp-card__tools,
.tp-card__foot,
.tp-result__actions,
.tp-practice__topbar {
  flex-wrap: wrap;
}

.tp-practice__stage button,
.tp-panel button,
.tp-card button {
  max-width: 100%;
  flex-shrink: 1;
  min-width: 0;
}

/* 長串英文／數字不撐破容器（題目算式結構不受影響：
   只對介面文字容器設斷行，不碰 .tp-mk-*） */
.tp-card__title,
.tp-card__desc,
.tp-panel__title,
.tp-version-row__title,
.tp-recent__item,
.tp-badge,
.tp-empty__title,
.tp-empty__desc {
  overflow-wrap: break-word;
  max-width: 100%;
}

/* 頁首內層與工具列可換行收納（後援模式） */
.tp-site-header__inner {
  flex-wrap: wrap;
  row-gap: var(--tp-space-1, 4px);
}

.tp-header-tools {
  flex-wrap: wrap;
}

/* tabs 與年級導覽本就是橫向捲動列，補 scrollbar 隱藏一致性，
   並限制在容器內不外溢 */
.tp-tabs,
.tp-grade-nav {
  max-width: 100%;
}


/* ============================================================
   6. A4 考卷預覽（.tp-sheet）
   210mm ≈ 794px，遠寬於 375px。舊機制是 viewer 內
   overflow-x:auto ＋ JS 以 zoom 等比縮放，全部保留：
   - 不用 display:none 隱藏工作區；
   - viewer 限寬在版心內，sheet 不參與撐寬頁面；
   - 列印時 print.css 已 zoom:1 !important 還原實體 A4，
     本檔不再覆寫 sheet 尺寸。
   ============================================================ */
.tp-sheet-viewer {
  max-width: 100%;
  overflow-x: auto;
  background: var(--tp-paper-deep);
  border: 1px solid var(--tp-line);
}

.tp-sheet {
  background: var(--tp-surface);
  color: #1F1B14;            /* 卷面用墨，與 print.css 一致 */
}

/* 預覽內的長內容不頂破紙面 */
.tp-sheet__fields,
.tp-sheet__foot {
  flex-wrap: wrap;
}

.tp-sheet__list,
.tp-sheet__grid,
.tp-item__body {
  min-width: 0;
}


/* ============================================================
   7. 回報錯誤對話框（舊頁內嵌 tpr-*，硬編色改走新權杖）
   它是介面元件不是題目，可換色；結構與行為不動。
   ============================================================ */
.tpr-back {
  background: rgba(59, 53, 44, 0.45);
}

.tpr-modal {
  background: var(--tp3-surface, #FFFFFF);
  color: var(--tp3-ink, #3B352C);
  border: 1px solid var(--tp3-line, #E7DECD);
  box-shadow: var(--tp-shadow-pop, 0 8px 20px rgba(59, 53, 44, 0.14), 0 20px 48px rgba(59, 53, 44, 0.16));
}

.tpr-title {
  color: var(--tp3-ink, #3B352C);
}

.tpr-lead,
.tpr-privacy,
.tpr-counter {
  color: var(--tp3-ink-soft, #6E6558);
}

.tpr-label {
  color: var(--tp3-ink, #3B352C);
}

.tpr-chip {
  border-color: var(--tp3-line, #E7DECD);
  color: var(--tp3-ink, #3B352C);
}

.tpr-chip.tpr-checked {
  border-color: var(--tp3-sage, #7C8B6F);
  background: var(--tp3-sage-soft, #E9EDE2);
}

.tpr-chip input {
  accent-color: var(--tp3-sage-deep, #5E6E52);
}

.tpr-chip:focus-within {
  outline-color: var(--tp3-focus, #A94A3C);
}

.tpr-modal textarea,
.tpr-modal input[type="text"],
.tpr-modal input[type="email"] {
  background: var(--tp3-surface, #FFFFFF);
  color: var(--tp3-ink, #3B352C);
  border-color: var(--tp3-line, #E7DECD);
}

.tpr-modal textarea:focus,
.tpr-modal input[type="text"]:focus,
.tpr-modal input[type="email"]:focus {
  outline-color: var(--tp3-focus, #A94A3C);
  border-color: var(--tp3-focus, #A94A3C);
}

.tpr-err,
.tpr-status-err {
  color: var(--tp3-danger, #A94A3C);
}

.tpr-status-ok {
  color: var(--tp3-sage-deep, #5E6E52);
}

/* 對話框主按鈕：這是既有主按鈕，維持朱砂實心 */
.tpr-btn-primary {
  background: var(--tp3-primary, #A94A3C);
  border-color: var(--tp3-primary, #A94A3C);
  color: #FFFFFF;
}

.tpr-btn-ghost {
  background: var(--tp3-surface, #FFFFFF);
  color: var(--tp3-ink, #3B352C);
  border-color: var(--tp3-line, #E7DECD);
}

.tpr-btn:focus-visible {
  outline-color: var(--tp3-focus, #A94A3C);
}

.tpr-open:hover,
.tpr-open:focus-visible {
  color: var(--tp3-primary, #A94A3C);
}


/* ============================================================
   8. 動效偏好：舊頁的裝飾動畫尊重 prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tp-float-layer .tp-float-char,
  .tp-practice__mascot {
    animation: none;
  }
}


/* ============================================================
   9. 列印
   只隱藏舊介面（頁首頁尾、toast、對話框、注入的新 shell）、
   紙張白底黑墨。不覆寫 math.css 的題目符號、tp-mk-* 與
   圖表 SVG；考卷尺寸與 zoom 還原由 print.css 負責。
   ============================================================ */
@media print {
  html,
  body {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #1F1B14;
  }

  /* 舊介面與注入殼全部隱藏（.tp-no-print 舊規則也覆蓋） */
  .tp-site-header,
  .tp-site-footer,
  .tp-header,
  .tp-footer,
  .tp-float-layer,
  .tp-toast-region,
  .tp-breadcrumb,
  .tp-source-note,
  .tpr-back,
  .tpr-open,
  .tp3-header,
  .tp3-footer,
  .tp3-legacy-tools {
    display: none !important;
  }

  /* 介面卡片類容器列印時去陰影去底，讓內容白紙黑墨 */
  .tp-panel,
  .tp-card,
  .tp-empty {
    background: #FFFFFF;
    box-shadow: none;
  }

  /* 卷面維持白底深墨（不碰題目符號與圖表色彩） */
  .tp-sheet {
    background: #FFFFFF;
    color: #1F1B14;
  }
}