/**
 * 全课程统一 · 背诵讲义版式（屏幕阅读 + A4 打印）
 * 各讲 handout 页在页内保留专题配色/互动样式，本文件统一外壳与通用组件。
 */
@import url("grammar-logo.css");

:root {
  --gh-accent: #0d9488;
  --gh-accent-ink: #0f766e;
  --gh-accent-bg: #ccfbf1;
  --gh-paper: #fffbf5;
  --gh-ink: #1e293b;
  --gh-ink-soft: #5d4037;
  --gh-edge: #5d4037;
  --gh-shadow: rgba(15, 23, 42, 0.1);
  --gh-sheet-max: 900px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* —— 页面基底 —— */
body.grammar-handout-page {
  margin: 0;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 12% 12%, rgba(204, 251, 241, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(255, 237, 213, 0.35) 0%, transparent 40%),
    linear-gradient(168deg, #e0f2fe 0%, #f0fdfa 38%, #e2e8f0 100%);
  color: var(--gh-ink);
  padding: 0 1rem calc(var(--grammar-pager-gap, 2.85rem) + 0.5rem);
  line-height: 1.65;
  font-size: 16px;
}

body.grammar-handout-page.has-lesson-pager {
  --lesson-pager-gap: var(--grammar-pager-gap, 2.85rem);
}

/* —— 顶栏（别名兼容旧 class）—— */
.grammar-handout-top,
.l13-handout-top {
  max-width: var(--gh-sheet-max);
  margin: 0.65rem auto 0;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: linear-gradient(180deg, #fff, #f0fdfa);
  border: 3px solid var(--gh-edge);
  border-radius: 14px 18px 12px 16px;
  box-shadow: 0 4px 0 rgba(13, 148, 136, 0.12);
  position: sticky;
  top: 0;
  z-index: 20;
}

.grammar-handout-top .top-bar-main,
.l13-handout-top .top-bar-main {
  flex: 1 1 200px;
  min-width: 0;
}

.grammar-handout-top .top-bar-main strong,
.l13-handout-top .top-bar-main strong {
  display: block;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: var(--gh-accent-ink);
}

.grammar-handout-top .subtitle-line,
.l13-handout-top .subtitle-line {
  display: block;
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
  font-weight: 700;
  color: #64748b;
  margin-top: 0.12rem;
}

.grammar-handout-index-link,
.l13-index-link,
.lesson-index-link {
  flex: 0 0 auto;
  font-size: clamp(0.72rem, 2vw, 0.82rem);
  font-weight: 800;
  color: var(--gh-accent-ink) !important;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
  border: 2px solid var(--gh-accent);
  background: linear-gradient(180deg, #f0fdfa, var(--gh-accent-bg));
  box-shadow: 0 2px 0 rgba(13, 148, 136, 0.15);
  white-space: nowrap;
}

.grammar-handout-index-link:hover,
.l13-index-link:hover {
  filter: brightness(1.04);
}

/* —— 打印提示与按钮 —— */
.grammar-handout-print-hint,
.no-print-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--gh-accent-ink);
  margin: 0.5rem auto;
  max-width: var(--gh-sheet-max);
  font-weight: 700;
  line-height: 1.45;
}

.grammar-handout-pdf-bar,
.handout-pdf-bar {
  max-width: var(--gh-sheet-max);
  margin: 0.5rem auto 0.65rem;
  padding: 0 0.25rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.btn-handout-pdf,
#btnHandoutPrint,
#btnPrint {
  font-size: 0.88rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 3px solid var(--gh-accent);
  background: linear-gradient(180deg, #fff, #f0fdfa);
  color: var(--gh-accent-ink);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
  font-family: inherit;
  touch-action: manipulation;
}

.btn-handout-pdf:hover {
  background: var(--gh-accent-bg);
}

/* —— 节次跳转 —— */
.grammar-handout-section-nav,
.handout-section-nav {
  max-width: var(--gh-sheet-max);
  margin: 0 auto 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}

.grammar-handout-section-nav a,
.handout-section-nav a {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 2px solid rgba(13, 148, 136, 0.35);
  background: rgba(255, 255, 255, 0.9);
  color: var(--gh-accent-ink);
  text-decoration: none;
}

.grammar-handout-section-nav a:hover,
.handout-section-nav a:hover {
  background: var(--gh-accent-bg);
}

/* —— 讲义主纸 —— */
body.grammar-handout-page main.sheet,
body.grammar-handout-page .sheet {
  max-width: var(--gh-sheet-max);
  margin: 0 auto;
  background: var(--gh-paper);
  border-radius: 12px 28px 16px 20px;
  border: 4px solid var(--gh-accent);
  box-shadow: 6px 8px 0 rgba(13, 148, 136, 0.18), 14px 18px 32px var(--gh-shadow);
  padding: 1.35rem 1.45rem 2rem;
  position: relative;
}

body.grammar-handout-page main.sheet::before,
body.grammar-handout-page .sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(13, 148, 136, 0.22);
  border-radius: 6px 22px 10px 8px;
  pointer-events: none;
}

body.grammar-handout-page .inner {
  position: relative;
  z-index: 1;
}

/* —— 封面条 —— */
.cover-banner {
  margin: 0 0 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 3px solid var(--gh-edge);
  background: linear-gradient(145deg, #0f766e 0%, #115e59 55%, #134e4a 100%);
  color: #f0fdfa;
  text-align: center;
}

.cover-banner .cover-kicker {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

.cover-banner .cover-topic {
  margin: 0.25rem 0 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 900;
  line-height: 1.35;
}

/* —— 标题区 —— */
.doc-title {
  font-size: clamp(1.28rem, 3vw, 1.65rem);
  text-align: center;
  color: var(--gh-accent-ink);
  margin: 0 0 0.3rem;
  font-weight: 900;
  line-height: 1.3;
}

.doc-subtitle {
  margin: 0 auto 0.85rem;
  text-align: center;
  color: var(--gh-ink-soft);
  font-weight: 800;
  font-size: 0.9rem;
  max-width: 36em;
}

.print-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 3px solid var(--gh-accent);
}

.print-header .field {
  flex: 1;
  min-width: 140px;
  font-size: 0.88rem;
}

.print-header label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--gh-ink-soft);
  font-weight: 700;
}

.print-header .line {
  border-bottom: 2px solid var(--gh-ink);
  min-height: 1.4rem;
}

.intro {
  border: 3px solid var(--gh-accent);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(180deg, rgba(204, 251, 241, 0.55), rgba(255, 251, 245, 0.95));
  font-size: 0.88rem;
  margin-bottom: 0.85rem;
}

.intro strong {
  color: var(--gh-accent-ink);
}

/* —— 章节与正文组件 —— */
h2.section-title {
  font-size: 1.08rem;
  color: var(--gh-accent-ink);
  margin: 1.15rem 0 0.55rem;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid rgba(13, 148, 136, 0.35);
  scroll-margin-top: 5rem;
}

h2.section-title:first-of-type {
  margin-top: 0;
}

h3.block-title {
  font-size: 1rem;
  color: #0d47a1;
  margin: 0.75rem 0 0.45rem;
}

.note {
  font-size: 0.84rem;
  color: var(--gh-ink-soft);
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 2px dashed rgba(13, 148, 136, 0.4);
  background: rgba(240, 253, 250, 0.85);
  margin: 0.4rem 0 0.6rem;
  font-weight: 600;
}

.formula-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 0.45rem 0 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  border: 3px solid var(--gh-accent);
  background: linear-gradient(180deg, #f0fdfa, #fff);
  font-weight: 900;
  font-size: clamp(0.95rem, 2.2vw, 1.12rem);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.card {
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 2px solid rgba(93, 64, 55, 0.2);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.04);
}

.card strong {
  color: var(--gh-accent-ink);
}

ul.compact {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
}

.compact li {
  margin: 0.24rem 0;
}

.example {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.92rem;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 0.45rem 0;
  font-size: 0.82rem;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(13, 148, 136, 0.2);
}

.data th,
.data td {
  padding: 0.4rem 0.48rem;
  border-bottom: 1px solid rgba(128, 91, 47, 0.12);
  text-align: left;
  vertical-align: top;
}

.data th {
  background: rgba(13, 148, 136, 0.88);
  color: #fff;
  font-weight: 900;
}

.data tr:nth-child(even) td {
  background: rgba(204, 251, 241, 0.35);
}

.grammar-handout-footer,
.footer-min,
.footer-note {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}

.grammar-handout-footer a,
.footer-min a {
  color: var(--gh-accent-ink);
  font-weight: 900;
}

/* L10 动词表容器 */
.grammar-handout-table-wrap {
  max-width: var(--gh-sheet-max);
  margin: 0 auto;
  background: var(--gh-paper);
  border-radius: 12px;
  border: 4px solid var(--gh-accent);
  padding: 1rem;
  box-shadow: 6px 8px 0 rgba(13, 148, 136, 0.15);
}

/* L05 互动讲义：保留全屏，仅收紧顶栏间距 */
body.grammar-handout-page.grammar-handout--interactive {
  padding-bottom: calc(var(--grammar-pager-gap, 2.85rem) + 0.25rem);
}

body.grammar-handout-page.grammar-handout--interactive .screen-app {
  margin-top: 0.35rem;
}

/* 讲义页：勿锁死在 16:9 小窗内，避免长内容像「空白」 */
@media (min-width: 769px) and (min-height: 560px) {
  body.grammar-handout-page.has-lesson-pager > main.sheet {
    height: auto !important;
    max-height: none !important;
    min-height: min(70vh, 100%) !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
  }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* —— 背诵口诀 · 一页收束（L01 / L02 统一：橙标题 + 浅灰底居中） —— */
.handout-chant-block {
  margin-top: 0.75rem;
}

.handout-chant-block h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  color: #bf360c;
}

.quote-box.handout-chant-box {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid #c8d4df;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef1f4 0%, #f6f8fa 50%, #fafbfc 100%);
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 700;
  color: #1a2a3a;
  text-align: center;
}

/* 出版物级 A4 打印：见 grammar-handout-print.css（各讲义页以 media=print 引入） */