/* ═══════════════════════════════════════════════════════
   AI Learning Notes — Article page theme override
   Applies liu-bei design system on top of inline article CSS
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variable override ─────────────────────────────── */
:root {
  --paper:          #f6f0df !important;
  --paper-strong:   #ece4cf !important;
  --ink:            #1c211c !important;
  --ink-soft:       #58645d !important;
  --line:           rgba(28,33,28,0.14) !important;
  --line-strong:    rgba(28,33,28,0.22) !important;
  --accent:         #1f6d5c !important;
  --accent-strong:  #17493f !important;
  --accent-warm:    #b69042 !important;
  --rose:           #9e4337 !important;
  --shadow:         0 18px 56px rgba(20,28,23,0.13) !important;
  --radius-xl:      10px !important;
  --radius-lg:      10px !important;
  --radius-md:      8px !important;
}

/* ── Body & fonts ──────────────────────────────────── */
body {
  font-family: "Noto Serif TC","Source Han Serif TC","Microsoft JhengHei",serif !important;
  background:
    linear-gradient(135deg, rgba(31,109,92,0.09), transparent 30%),
    linear-gradient(220deg, rgba(158,67,55,0.07), transparent 28%),
    repeating-linear-gradient(
      0deg,
      rgba(28,33,28,0.022), rgba(28,33,28,0.022) 1px,
      transparent 1px, transparent 18px
    ),
    #f6f0df !important;
  animation: pageEnter 0.45s ease both !important;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body::before { display: none !important; }
body::after  { display: none !important; }

h1, h2, h3 {
  font-family: "Noto Serif TC","Source Han Serif TC","Microsoft JhengHei",serif !important;
  color: #1c211c !important;
  letter-spacing: 0.01em !important;
}
h1 {
  font-size: clamp(1.65rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
h2 { font-size: clamp(1.2rem, 2vw, 1.7rem) !important; font-weight: 700 !important; }
h3 { font-size: 1.02rem !important; font-weight: 700 !important; }

code, pre {
  font-family: "JetBrains Mono", monospace !important;
}

/* ── Panels ────────────────────────────────────────── */
.hero, .panel, .toc {
  background: rgba(255,255,255,0.56) !important;
  border: 1px solid rgba(28,33,28,0.14) !important;
  box-shadow: 0 18px 56px rgba(20,28,23,0.13) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 10px !important;
}
.hero::after { display: none !important; }

.callout {
  background: rgba(31,109,92,0.06) !important;
  border: 1px solid rgba(31,109,92,0.16) !important;
  border-radius: 8px !important;
  color: #1c211c !important;
}
.mini-card, .stat-card {
  background: rgba(255,255,255,0.62) !important;
  border-color: rgba(28,33,28,0.12) !important;
  border-radius: 8px !important;
}
.stat-card strong { color: #17493f !important; }

.figure-card {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(28,33,28,0.10) !important;
  border-radius: 8px !important;
}
.figure-actions button {
  background: rgba(28,33,28,0.82) !important;
  color: #f6f0df !important;
}
.figure-actions button:hover {
  background: rgba(31,109,92,0.88) !important;
}

/* ── Code ──────────────────────────────────────────── */
pre {
  background: #1e261e !important;
  border: 1px solid rgba(28,33,28,0.18) !important;
  border-radius: 8px !important;
  color: #d8e8d2 !important;
  font-size: 0.85rem !important;
}

/* ── Eyebrow, links ────────────────────────────────── */
.eyebrow {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.66rem !important; font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  color: #9e4337 !important;
}
a { color: #17493f !important; }
.back-links {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important; color: #58645d !important;
}
.back-links a { color: #1f6d5c !important; }
.back-links a:hover { color: #17493f !important; }

/* ── Quote ─────────────────────────────────────────── */
.quote {
  border-left: 3px solid #1f6d5c !important;
  color: #1c211c !important;
  font-size: 0.96rem !important;
  padding: 6px 0 6px 16px !important;
}

/* ── TOC ───────────────────────────────────────────── */
.toc a { color: #58645d !important; text-decoration: none !important; }
.toc a:hover { color: #1f6d5c !important; }
.toc .note { border-top-color: rgba(28,33,28,0.12) !important; }
.toc h2 { font-size: 0.95rem !important; }

/* ── Lists ─────────────────────────────────────────── */
ul, ol { color: #58645d !important; }
li strong, li b { color: #1c211c !important; }

/* ── Lede, body text ───────────────────────────────── */
.lede { font-size: 0.9rem !important; color: #58645d !important; line-height: 1.9 !important; }
.panel p { color: #58645d !important; font-size: 0.88rem !important; }
figcaption { font-size: 0.82rem !important; color: #6b7a6b !important; }

/* ── Footer ────────────────────────────────────────── */
.footer { color: #7a8a7a !important; font-size: 0.84rem !important; }
.footer a { color: #1f6d5c !important; font-family: "JetBrains Mono", monospace !important; font-size: 0.72rem !important; }
.footer-counter-label { font-family: "JetBrains Mono", monospace !important; color: #7a8a7a !important; }

/* ── Page-level overlay (transition) ──────────────── */
#page-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246,240,223,0.97);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#page-overlay.active { opacity: 1; pointer-events: all; }
.cell-stage { position: relative; width: 100px; height: 60px; }
.cell-a, .cell-b { position: absolute; top: 50%; width: 38px; height: 38px; }
.cell-a { right: calc(50% + 4px); transform: translateY(-50%); background: #1f6d5c; opacity: 0.65; animation: cellA 2.6s ease-in-out infinite; }
.cell-b { left: calc(50% + 4px); transform: translateY(-50%); background: rgba(31,109,92,0.45); animation: cellB 2.6s ease-in-out infinite; }
.cell-bridge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 14px; background: rgba(31,109,92,0.28); border-radius: 50%; animation: bridgePulse 2.6s ease-in-out infinite; }
@keyframes cellA { 0%,100% { border-radius: 55% 45% 48% 52%/52% 48% 52% 48%; transform: translateY(-50%); } 50% { border-radius: 58% 42% 44% 56%/56% 44% 56% 44%; transform: translateY(-48%) translateX(2px); } }
@keyframes cellB { 0%,100% { border-radius: 45% 55% 52% 48%/48% 52% 48% 52%; transform: translateY(-50%); } 50% { border-radius: 42% 58% 56% 44%/44% 56% 44% 56%; transform: translateY(-52%) translateX(-2px); } }
@keyframes bridgePulse { 0%,100% { width: 14px; opacity: 0.35; } 50% { width: 22px; opacity: 0.6; } }