/* 獨立下載頁使用 CourseHub 同一組語意值，不依賴網路字型或外部套件。 */
:root {
  color-scheme: light;
  --color-text-primary: #20242a;
  --color-text-secondary: #66707a;
  --color-bg-primary: #fff;
  --color-bg-secondary: #f4f6f8;
  --color-border: #d9dee5;
  /* 主色沿用 CourseHub 課程橘（globals.css 的 --color-primary 系列）。 */
  --color-teaching: #d83a16;
  --color-teaching-dark: #a92b10;
  --color-teaching-soft: #fde9e4;
  --color-teaching-faint: #fff6f3;
  --color-success: #557963;
  --color-warning: #a97936;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: .75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --type-label: 12px;
  --type-body: 14px;
  --type-heading-3: 16px;
  --type-heading-1: 28px;
  --duration-fast: 150ms;
  --duration-standard: 200ms;
  --ease-product: cubic-bezier(.2,.8,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  line-height: 1.65;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 標題列固定在上方，簡報框與註腳在剩餘高度內上下置中。 */
body { display: flex; flex-direction: column; min-width: 320px; min-height: 100dvh; margin: 0; }
button, input, a { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, input { touch-action: manipulation; }
button { transition: background-color var(--duration-fast) var(--ease-product), border-color var(--duration-fast) var(--ease-product); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:active:not(:disabled) { background: var(--color-teaching-soft); color: var(--color-teaching-dark); }
:focus-visible { outline: 3px solid var(--color-teaching); outline-offset: 3px; }
h1:focus, h2:focus { outline: none; }
h1:focus-visible, h2:focus-visible { outline: 3px solid var(--color-teaching); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 5; top: var(--space-md); left: var(--space-md); padding: var(--space-md); background: var(--color-bg-primary); color: var(--color-teaching-dark); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-2xl); border-bottom: 1px solid var(--color-border); background: var(--color-bg-primary); }
.brand { display: inline-flex; gap: var(--space-md); align-items: center; color: inherit; font-weight: 700; text-decoration: none; }
.brand:hover { color: var(--color-teaching-dark); }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; background: var(--color-teaching); color: var(--color-bg-primary); border-radius: var(--radius-sm); }
.header-note, .page-footer, .instruction { font-size: var(--type-label); color: var(--color-text-secondary); }
/* 16:9 橫式簡報框：寬度依視窗高度計算，比例由 aspect-ratio 固定。 */
.presentation-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); width: min(calc(100% - 48px), 1280px, max(960px, calc((100dvh - 132px) * 16 / 9))); aspect-ratio: 16 / 9; flex-shrink: 0; min-height: 0; margin: auto auto var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-primary); }
.side-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--space-md) var(--space-md); border-right: 1px solid var(--color-border); border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--color-bg-secondary); }
.course-label, .eyebrow, .section-kicker, .progress-label { color: var(--color-text-secondary); font-size: var(--type-label); font-weight: 600; }
.course-label { padding: 0 var(--space-md) var(--space-sm); }
.chapter-nav { display: grid; gap: var(--space-xs); }
.chapter-button { display: flex; align-items: center; gap: var(--space-md); min-height: 44px; padding: var(--space-md); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; text-align: left; font-size: var(--type-body); }
.chapter-button:hover { background: var(--color-bg-primary); }
.chapter-button[aria-current] { border-color: var(--color-teaching); background: var(--color-teaching-soft); color: var(--color-teaching-dark); }
.chapter-number { color: var(--color-teaching-dark); font-size: var(--type-label); font-weight: 700; }
.side-footer { margin-top: auto; padding: var(--space-sm) var(--space-md) 0; }
.progress-text { display: block; margin-top: var(--space-xs); font-size: var(--type-body); }
.progress-track { height: 6px; margin-top: var(--space-md); border-radius: var(--radius-sm); background: var(--color-border); }
.progress-fill { height: 100%; border-radius: inherit; background: var(--color-teaching); transition: width var(--duration-standard) var(--ease-product); }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--space-2xl); }
.stage-topline { flex-shrink: 0; display: flex; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.stage-count { color: var(--color-text-secondary); font-size: var(--type-label); }
.slide-panel { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-2xl) 0; animation: arrive var(--duration-standard) var(--ease-product); }
.section-kicker { margin: 0 0 var(--space-md); color: var(--color-teaching-dark); }
h1, h2 { margin: 0; font-size: var(--type-heading-1); line-height: 1.4; text-wrap: balance; }
.lead { margin: var(--space-lg) 0 0; color: var(--color-text-secondary); font-size: var(--type-heading-3); }
p { overflow-wrap: anywhere; }
.outcome-card, .reveal-item { margin-top: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.outcome-card p, .reveal-item p { margin: var(--space-sm) 0 0; }
.choice-list { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.choice-button, .recap-button { display: flex; align-items: center; gap: var(--space-md); min-height: 48px; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); text-align: left; font-size: var(--type-body); }
.choice-button:hover, .recap-button:hover { border-color: var(--color-teaching); background: var(--color-teaching-faint); }
.choice-button[aria-pressed="true"] { border-color: var(--color-teaching); background: var(--color-teaching-soft); color: var(--color-teaching-dark); }
.choice-letter { font-weight: 700; color: var(--color-teaching-dark); }
.feedback { margin-top: var(--space-lg); padding: var(--space-lg); border-left: 3px solid var(--color-success); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-success) 8%, var(--color-bg-primary)); font-size: var(--type-body); }
.feedback[data-kind="hint"] { border-left-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-primary)); }
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-xl); font-size: var(--type-body); }
.reveal-item { margin-top: 0; padding: var(--space-lg); animation: arrive var(--duration-standard) var(--ease-product); }
/* 隱藏答案仍保留版位，揭露與收起不會推動操作列。 */
.reveal-item[hidden] { display: block !important; visibility: hidden; }
.reveal-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.flip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.flip-card { padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; text-align: left; perspective: 1000px; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform var(--duration-standard) var(--ease-product); }
.flip-card[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); min-height: 240px; padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-secondary); backface-visibility: hidden; font-size: var(--type-label); }
.flip-face strong { font-size: var(--type-heading-3); }
.flip-card:hover .flip-face { border-color: var(--color-teaching); }
.flip-back { transform: rotateY(180deg); border-color: var(--color-teaching); background: var(--color-teaching-faint); }
.simulator { display: grid; gap: var(--space-lg); }
.simulator label { font-weight: 700; }
input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--color-teaching); cursor: pointer; }
.sort-list { display: grid; gap: var(--space-md); margin: var(--space-xl) 0 0; padding-left: var(--space-xl); }
.sort-list li { padding: var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--type-body); }
.sort-list strong { display: inline-block; min-width: 45%; }
.move-button { min-height: 44px; margin-left: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-primary); font-size: var(--type-label); }
.move-button:hover:not(:disabled) { background: var(--color-teaching-faint); border-color: var(--color-teaching); }
.recap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.completion-message { margin: var(--space-xl) 0; font-size: var(--type-body); }
.stage-controls { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.control-button { min-height: 44px; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-teaching); border-radius: var(--radius-md); background: var(--color-teaching); color: var(--color-bg-primary); font-size: var(--type-body); font-weight: 600; }
.control-button:hover:not(:disabled) { background: var(--color-teaching-dark); }
.control-button--secondary { border-color: var(--color-border); background: var(--color-bg-primary); color: var(--color-text-primary); }
.control-button--secondary:hover:not(:disabled) { border-color: var(--color-teaching); background: var(--color-teaching-faint); }
.control-hint { color: var(--color-text-secondary); font-size: var(--type-label); }
.page-footer { width: min(calc(100% - 48px), 1280px, max(960px, calc((100dvh - 132px) * 16 / 9))); margin: 0 auto auto; padding-bottom: var(--space-xl); text-align: right; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  .site-header { padding: var(--space-md) var(--space-lg); }
  .header-note { display: none; }
  .page-footer { width: calc(100% - 24px); }
  .presentation-shell { height: auto; aspect-ratio: auto; grid-template-columns: 1fr; width: calc(100% - 24px); margin-top: var(--space-md); }
  .side-panel { overflow: visible; padding: var(--space-lg); border-right: 0; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .chapter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-button { gap: var(--space-sm); padding: var(--space-sm); font-size: var(--type-label); }
  .side-footer { padding: var(--space-lg) var(--space-xs) 0; }
  .side-footer .instruction { margin: var(--space-xs) 0; }
  .stage { height: 720px; padding: var(--space-xl); }
  .reveal-stack { grid-template-columns: 1fr; }
  h1, h2 { font-size: 23px; }
  .flip-grid, .recap-grid { grid-template-columns: 1fr; }
  .flip-face { min-height: 200px; }
  .stage-controls { flex-wrap: wrap; }
  .control-hint { order: 1; width: 100%; text-align: center; }
  .sort-list strong { display: block; margin-bottom: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.home-panel:not([hidden]) { display: flex; }
/* margin auto 置中：內容高於框時從頂端開始捲動，不會被裁切。 */
.home-content { width: 100%; margin: auto 0; }
.home-content h1 { text-wrap: balance; }
.home-brief { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.home-brief p { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-lg); margin: 0; font-size: var(--type-body); }
.home-brief p + p { margin-top: var(--space-lg); }
.stage:has(.home-panel:not([hidden])) .stage-controls { visibility: hidden; }
@media (max-width: 720px) {
  .home-panel:not([hidden]) { display: block; }
  .home-brief p { grid-template-columns: 1fr; gap: var(--space-sm); }
}

.date-timeline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 2px solid var(--color-border); font-size: var(--type-label); }
.date-timeline strong { color: var(--color-teaching-dark); }
.writing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.notice-form { display: grid; gap: var(--space-md); }
.notice-form label { display: grid; gap: var(--space-xs); font-size: var(--type-body); font-weight: 600; }
.notice-form input { width: 100%; min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-primary); color: var(--color-text-primary); font-size: var(--type-body); }
.notice-form input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.notice-form input:hover { border-color: var(--color-teaching); }
.notice-preview { padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-teaching-faint); overflow-wrap: anywhere; }
.notice-preview h3 { margin: var(--space-md) 0; font-size: var(--type-heading-3); }
.notice-preview p { margin: var(--space-md) 0; font-size: var(--type-body); }
.review-details { margin-top: var(--space-xl); font-size: var(--type-body); }
.review-details summary { cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-sm); color: var(--color-teaching-dark); }
.review-details summary:hover { background: var(--color-teaching-faint); }
.review-details[open] summary { background: var(--color-teaching-soft); }
@media (max-width: 720px) {
  .writing-grid { grid-template-columns: 1fr; }
}