/* quick-common.css — 速成輸入法入門專用精簡主題（pop 珊瑚）
   由 learn repo portal 的 common.css 抽取（2026-11-06 遷入本站）：
   pop 主題變數＋基礎版面＋課程頁用到的元件（chip／掣／回首頁）。
   本站其餘頁面（查字、部首字典）另有自己嘅樣式，唔共用呢份。 */

:root {
  --paper: #faf3ec;  --card: #fffdf8;
  --ink: #22212b;  --ink-soft: #55526a;  --ink-faint: #8e8a9e;
  --rule: #e9dfcf;  --rule-strong: #22212b;
  --accent: #ff5c39;  --accent-hover: #e8431f;  --accent-deep: #c73e1d;
  --tint: #ffe8df;  --tint-deep: #c73e1d;
  --ok: #2f7d4f;  --err: #b3371f;
  --r-card: 10px; --r-btn: 8px; --r-input: 6px; --r-pill: 999px;
  --bw: 2px;
  --shadow: 3px 3px 0 var(--ink);
  --shadow-soft: 3px 3px 0 var(--ink);
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif; }

body { background: var(--paper); color: var(--ink);
       display: flex; justify-content: center;
       min-height: 100vh; padding: 12px 15px;
       box-sizing: border-box;
       overflow-x: hidden;
       width: 100%;
       max-width: 100vw; }

h1, h2 { font-family: var(--font-display); }

.container { width: 100%; max-width: 850px; min-width: 0;
  box-sizing: border-box;
  background: var(--card);
  border: var(--bw) solid var(--rule-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  display: flex; flex-direction: column; position: relative; }

header { text-align: center; margin-bottom: 12px; position: relative; min-height: 0; padding: 2px 36px 0; }
header h1 { font-size: 1.35rem; color: var(--ink); margin-bottom: 4px; font-weight: 700;
  line-height: 1.25; word-break: keep-all; }

.status-text { color: var(--ink-faint); font-size: 0.8rem;
  text-align: center; margin-top: 4px; min-height: 1.2em; }

/* 課程 chips（quick.js 動態產生，樣式原本喺 common.css） */
.chip { border: var(--bw) solid var(--rule-strong);
  background: var(--card); color: var(--ink-soft);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease; }
.chip:hover { background: var(--tint); color: var(--tint-deep); border-color: var(--tint-deep); }
.chip.active { background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent); }

/* 掣（練習嘅 ✓確定／下一題／⌫刪除等） */
.action-btn { padding: 10px 14px;
  font-size: 0.9rem; font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn); cursor: pointer;
  background: var(--accent); color: #fff;
  transition: 0.15s; box-shadow: var(--shadow); }
.action-btn:hover { background: var(--accent-hover); }
.action-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.secondary { background: var(--card); color: var(--ink-soft);
  border: var(--bw) solid var(--rule-strong); }
.secondary:hover { background: var(--tint); color: var(--tint-deep); border-color: var(--tint-deep); }

.btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }

/* 細粒回首頁 */
.btn-home-mini {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 5;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.btn-home-mini:hover { opacity: 1; background: var(--tint); }

/* 手機：成頁貼邊，唔好縮成中間一條細卡 */
@media (max-width: 520px) {
  body { padding: 0; justify-content: flex-start; }
  .container { width: 100%; max-width: 100%; min-width: 0;
    border-radius: 0; border: none; box-shadow: none; padding: 12px 12px 20px; }
  header { padding: 4px 40px 0; }
  header h1 { font-size: 1.15rem; }
}

/* 楷書字體（同 learn repo portal 嘅注入一致，2026-11-06 遷站時寫死喺度）：
   芫茜雅楷 JyunsaiKaai（OFL-1.1）做預設、自由香港楷書（CC BY-SA 4.0）後備，
   字例以香港字形顯示；掣／輸入框保持系統字。
   字體 CSS 喺 quick.html <head> 以 <link> 載入。 */
* { font-family: 'JyunsaiKaai', 'Free HK Kai 4700', 'LXGW WenKai TC', 'Kaiti TC', '楷體', var(--font-display); }
h1, h2, h3 { font-family: 'JyunsaiKaai', 'Free HK Kai 4700', 'LXGW WenKai TC', 'Kaiti TC', '楷體', var(--font-display); }
button, input, select, textarea { font-family: var(--font-display); }