/* =====================================================================
   Science Textbook Interactive — Shared Stylesheet (lib.css)
   Targets (per user spec):
     · 12" tablet 横向          ≈ 1366–1600 CSS px
     · Z Fold + 有线显示器 (DeX) 1920×1080 起，最多 4K
   设计基线：≥ 1280 CSS px 横向。<1100px 仅做"侧栏掉到下方"的优雅降级，
   不为手机/折叠态外屏单独优化。
   ===================================================================== */

/* --- 1. Tokens ----------------------------------------------------- */
:root {
  --bg: #f5f7fa;
  --page: #ffffff;
  --ink: #1f2933;
  --ink-soft: #4a5563;
  --ink-muted: #8794a3;

  /* Science textbook brand (sampled from the original) */
  --teal:        #0a8a96;
  --teal-soft:   #d8eef0;
  --teal-bg:     #eaf6f7;
  --teal-dark:   #075c66;

  --magenta:     #c2185b;
  --magenta-light:#fce4ec;
  --connect-red: #c43a3a;
  --connect-bg:  #fdecec;

  --fun-yellow:  #f0a500;
  --fun-bg:      #fff7d6;

  --arrow1: #173f6b;
  --arrow2: #6b2c4f;
  --arrow3: #b73247;
  --arrow4: #e07b3a;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 2px 10px rgba(0,0,0,.06);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1f2e;
    --page: #232a3a;
    --ink: #e8ecf2;
    --ink-soft: #b8c1cf;
    --ink-muted: #7a8392;
  }
}

/* --- 2. Reset & typography ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;            /* 12" 平板/DeX 距离稍远，正文调大一档 */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { color: var(--teal-dark); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 36px; font-weight: 800; letter-spacing: -.5px; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
p  { margin: 0 0 .95em; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

sup { font-size: .65em; vertical-align: super; line-height: 0; color: var(--magenta); }

/* --- 3. Top bar ---------------------------------------------------- */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  background: var(--page);
  border-bottom: 1px solid #dde3eb;
  position: sticky; top: 0; z-index: 50;
}
.top-bar .home,
.top-bar .cmd-link {
  color: var(--teal-dark); font-weight: 700; font-size: 14px;
  padding: 6px 12px; border-radius: 6px;
}
.top-bar .home:hover { background: var(--teal-bg); text-decoration: none; }
.top-bar .cmd-link {
  color: var(--magenta);
  margin-left: 8px;
}
.top-bar .cmd-link:hover { background: var(--magenta-light); text-decoration: none; }
.top-bar .review-link {
  background: var(--magenta);
  color: white !important;
  margin-left: 8px;
}
.top-bar .review-link:hover { background: #7a1f4a; color: white !important; }
.top-bar .nav-group { display: flex; align-items: center; }
.top-bar .crumb { color: var(--ink-muted); font-size: 13px; letter-spacing: .5px; }
.top-bar .pnum { color: var(--teal); font-weight: 700; font-family: ui-monospace, monospace; font-size: 13px; }

/* --- 4. Page container --------------------------------------------- */
.page {
  max-width: 1560px;          /* 充分利用 12" 平板/DeX 显示器横向空间 */
  margin: 0 auto;
  padding: 22px 28px;
}

/* Two-column main + side rail — 默认布局（≥1280px 都用） */
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.main-col {
  background: var(--page);
  padding: 32px 44px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 1100px;          /* 避免在 DeX 4K 上行长 > 100 字符 */
}

/* DeX/大显示器（≥1600px）：主栏 padding 略放大、留白舒展 */
@media (min-width: 1600px) {
  .main-col { padding: 40px 56px; }
  body { font-size: 18px; }
}

/* 优雅降级 —— DeX 窗口被缩窄、或意外在小屏打开时把侧栏移到正文下方 */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .side-rail { order: 2; position: static; }
  .main-col { padding: 24px 28px; }
}

/* --- 5. Side rail items (CONNECT THE DOTS, FUN FACT, etc.) -------- */
.side-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 72px; }
.side-card {
  background: var(--page);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  border-left: 5px solid var(--connect-red);
}
.side-card .icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--connect-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--connect-red); font-weight: 800; font-size: 14px;
  margin-bottom: 6px;
}
.side-card.connect { border-left-color: var(--connect-red); }
.side-card.connect .icon { background: var(--connect-bg); color: var(--connect-red); }
.side-card.fun-fact { border-left-color: var(--fun-yellow); }
.side-card.fun-fact .icon { background: var(--fun-bg); color: var(--fun-yellow); }
.side-card .label {
  font-size: 11px; letter-spacing: 1.5px; font-weight: 800;
  color: var(--ink-muted); display: block; margin-bottom: 6px;
}
.side-card .title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.side-card .body { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.side-card .ref { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }

/* --- 6. Word lookup (the core feature) ---------------------------- */
.w {
  /* Each English word gets wrapped in span.w */
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.w:hover { background: rgba(194,24,91, .08); }
.w.active { background: var(--magenta-light); outline: 1px solid var(--magenta); }
/* 3-state word color:
   .fresh    (lvl=0) 不熟 → 红色虚下划线
   .familiar (lvl=1) 模糊 → 黄色下划线
   .known    (lvl=2) 已会 → 绿色下划线
*/
.w.fresh, .hotbox.fresh {
  background: rgba(196, 58, 58, .08);
  border-bottom: 2px dashed var(--connect-red);
}
.w.familiar, .hotbox.familiar {
  background: rgba(240, 165, 0, .12);
  border-bottom: 2px solid var(--fun-yellow);
}
.w.known, .hotbox.known {
  background: var(--teal-bg);
  border-bottom: 2px solid var(--teal);
}
/* Hotbox versions need stronger contrast since they're transparent overlays */
.canvas-wrap .hotbox.fresh    { background: rgba(196, 58, 58, .22); }
.canvas-wrap .hotbox.familiar { background: rgba(240, 165, 0, .25); }
.canvas-wrap .hotbox.known    { background: rgba(46, 168, 134, .22); }

.pop {
  position: absolute;
  background: var(--page);
  border: 1px solid #dde3eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 12px 16px;
  max-width: 380px;
  min-width: 240px;
  z-index: 100;
  font-size: 14px;
  line-height: 1.55;
}
.pop .phonetic {
  color: var(--ink-muted);
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px;
  margin: -2px 0 6px;
  letter-spacing: 0;
}
.pop .explains { margin: 6px 0 8px; }
.pop .ex-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed #f0f3f6;
  font-size: 14px;
}
.pop .ex-row:last-child { border-bottom: none; }
.pop .ex-pos {
  display: inline-block;
  min-width: 38px;
  font-size: 11px;
  color: var(--magenta);
  font-style: italic;
  font-weight: 700;
}
.pop .sci-note {
  background: var(--teal-bg);
  border-left: 3px solid var(--teal);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  color: var(--teal-dark);
  margin: 8px 0;
}
.pop .etym {
  background: var(--fun-bg);
  border-left: 3px solid var(--fun-yellow);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #6a5520;
  margin: 8px 0;
  font-style: italic;
}
.pop .examples { margin: 8px 0; }
.pop .ex-card {
  background: var(--bg);
  border-radius: 5px;
  padding: 6px 10px;
  margin: 5px 0;
  border-left: 3px solid var(--teal);
}
.pop .ex-en { color: var(--ink); font-size: 13px; }
.pop .ex-cn { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.pop .cached-note {
  font-size: 10px;
  color: var(--ink-muted);
  text-align: right;
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}
.pop .cached-note.fresh { color: var(--teal); }
.pop .loading { color: var(--ink-muted); font-style: italic; padding: 6px 0; }

/* Inline translate panel inside popover */
.pop .tr-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #dde3eb;
}
.pop .tr-loading { color: var(--ink-muted); font-style: italic; padding: 6px 0; }
.pop .tr-err { color: var(--connect-red); font-size: 13px; padding: 6px 0; }
.pop .tr-head {
  font-size: 11px; letter-spacing: 1px; font-weight: 800;
  color: var(--magenta); margin-bottom: 4px;
}
.pop .tr-src {
  color: var(--ink-muted); font-size: 12px;
  background: var(--bg); padding: 4px 8px;
  border-radius: 4px; margin-bottom: 6px;
  font-style: italic; line-height: 1.45;
}
.pop .tr-cn {
  color: var(--ink); font-size: 14px;
  background: var(--teal-bg); padding: 6px 10px;
  border-radius: 4px; border-left: 3px solid var(--teal);
  line-height: 1.55;
}
.pop .tr-note {
  color: var(--ink-soft); font-size: 12px;
  margin-top: 4px;
}

/* Smaller button for translate actions */
.pop .actions .btn.tr {
  background: var(--magenta-light);
  color: var(--magenta);
  border-color: var(--magenta-border);
  font-weight: 700;
}
.pop .actions .btn.tr:hover {
  background: var(--magenta);
  color: white;
}

/* 3-state rating buttons */
.pop .actions { flex-wrap: wrap; }
.pop .btn.rate {
  font-weight: 700; font-size: 12px;
  flex: 1; min-width: 64px;
}
.pop .btn.rate:hover { transform: translateY(-1px); }
.pop .btn.rate.active-lvl-0 {
  background: var(--connect-bg); color: var(--connect-red);
  border-color: var(--connect-red);
}
.pop .btn.rate.active-lvl-1 {
  background: var(--fun-bg); color: #6a5520;
  border-color: var(--fun-yellow);
}
.pop .btn.rate.active-lvl-2 {
  background: var(--teal-bg); color: var(--teal-dark);
  border-color: var(--teal);
}
.pop .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #dde3eb;
}
.pop .word { font-weight: 800; color: var(--magenta); font-size: 17px; }
.pop .pos { font-size: 11px; color: var(--ink-muted); font-style: italic; letter-spacing: .5px; }
.pop .speak-btn {
  margin-left: auto;
  background: var(--teal-bg);
  border: 1px solid var(--teal);
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 80ms ease, background 120ms ease;
}
.pop .speak-btn:hover { background: var(--teal); color: white; transform: scale(1.08); }
.pop .speak-btn:active { transform: scale(.94); }
.pop .cn { color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.pop .note { color: var(--ink-soft); font-size: 13px; margin-bottom: 4px; }
.pop .ex { color: var(--ink-muted); font-size: 12px; padding: 4px 8px; background: var(--bg); border-radius: 6px; border-left: 3px solid var(--teal); }
.pop .actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dde3eb; }
.pop .btn {
  flex: 1; font-size: 12px; padding: 6px 8px; border-radius: 5px;
  border: 1px solid #dde3eb; background: var(--bg); cursor: pointer; color: var(--ink-soft);
}
.pop .btn.primary { background: var(--teal); color: white; border-color: var(--teal); }
.pop .miss { color: var(--ink-muted); font-style: italic; }

/* --- 7. Figures & captions ---------------------------------------- */
.fig { margin: 18px 0; }
.fig img, .fig picture, .fig figure img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--radius);
}
.fig .cap, figcaption.cap {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 600;
}
.fig .cap .figref { color: var(--teal-dark); font-weight: 800; margin-right: 4px; }
.fig .cap .figref::before { content: "▶ "; color: var(--teal); }
.fig.below .cap .figref::before { content: "▲ "; }

/* Float figures inside body text */
.fig.right { float: right; max-width: 38%; margin: 6px 0 12px 22px; clear: right; }
.fig.left  { float: left;  max-width: 38%; margin: 6px 22px 12px 0; clear: left; }
@media (max-width: 1100px) { .fig.right, .fig.left { float: none; max-width: 100%; margin: 18px 0; } }

/* --- 8. Diabetes timeline (figure 1.1 reflowed) ------------------- */
.timeline {
  margin: 24px 0 30px;
  display: grid;
  gap: 16px;
}
.tl-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: stretch;
}
.tl-era {
  background: var(--page);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: white;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.25;
}
.tl-row.t1 .tl-era { background: var(--arrow1); }
.tl-row.t2 .tl-era { background: var(--arrow2); }
.tl-row.t3 .tl-era { background: var(--arrow3); }
.tl-row.t4 .tl-era { background: var(--arrow4); }
.tl-row.t5 .tl-era { background: #c9572a; }
.tl-row.t6 .tl-era { background: #d97548; }
.tl-body {
  background: #f4f7fa;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
}
.tl-body img { float: right; width: 80px; height: 80px; margin: 0 0 6px 12px; border-radius: 50%; object-fit: cover; }

/* --- 9. Image canvas (T1/T5 — image-first with hotspot overlay) --- */
.canvas-wrap {
  position: relative;
  max-width: 1280px;           /* 12" 平板/DeX 上能完整看见原页面 */
  margin: 0 auto;
  background: var(--page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
@media (min-width: 1700px) { .canvas-wrap { max-width: 1440px; } }
.canvas-wrap > img,
.canvas-wrap > picture > img {
  display: block;
  width: 100%;
  height: auto;
}
.canvas-wrap .hotbox {
  position: absolute;
  cursor: pointer;
  color: transparent;            /* invisible text overlay, but selectable */
  user-select: text;
  background: transparent;
  border-radius: 2px;
  transition: background 120ms ease, outline 120ms ease;
  /* Make the box exactly cover its bbox; expand hit area slightly */
  padding: 0;
  font-size: 0;                  /* don't disrupt layout */
}
.canvas-wrap .hotbox::before {
  content: "";
  position: absolute;
  inset: -2px -2px;
}
.canvas-wrap .hotbox:hover {
  background: rgba(255, 215, 0, .28);
  outline: 1.5px solid var(--magenta);
}
.canvas-wrap .hotbox.active {
  background: rgba(194, 24, 91, .22);
  outline: 1.5px solid var(--magenta);
}
.canvas-wrap.show-hotspots .hotbox {
  background: rgba(255, 215, 0, .14);
  outline: 1px dashed rgba(194,24,91,.45);
}

/* Toolbar above canvas */
.canvas-tools {
  display: flex; gap: 8px; align-items: center;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.canvas-tools .tool-btn {
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid #dde3eb; background: var(--page); cursor: pointer;
  font-size: 12px; color: var(--ink-soft); font-weight: 600;
}
.canvas-tools .tool-btn.on { background: var(--teal); color: white; border-color: var(--teal); }
.canvas-tools .count { margin-left: auto; color: var(--ink-muted); font-size: 12px; }

/* --- 10. Section title ribbon ------------------------------------- */
.section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.section-head .sec-num {
  background: var(--teal);
  color: white;
  font-weight: 800;
  font-size: 22px;
  padding: 4px 16px;
  border-radius: 6px;
  letter-spacing: 0;
}
.section-head h1 { color: var(--teal-dark); }

/* Hint banner */
.hint-banner {
  background: var(--teal-bg);
  border-left: 4px solid var(--teal);
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.hint-banner b { color: var(--teal-dark); }

/* --- 11. Nav bar at bottom ---------------------------------------- */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px;
  padding: 14px 18px;
  background: var(--page);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.nav-bar a {
  padding: 8px 16px;
  background: var(--teal-bg);
  border-radius: 8px;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 14px;
}
.nav-bar a.disabled { opacity: .35; pointer-events: none; }

/* --- 12. Index / landing ------------------------------------------ */
.cover {
  max-width: 1200px; margin: 0 auto; padding: 28px 18px;
}
.cover h1 { font-size: 36px; color: var(--teal-dark); }
.cover .sub { color: var(--ink-muted); font-size: 14px; margin-bottom: 24px; }
.thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px;
}
.thumb-card {
  background: var(--page);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.thumb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.thumb-card img { width: 100%; height: auto; display: block; aspect-ratio: 0.707; object-fit: cover; }
.thumb-card .meta { padding: 12px 14px; }
.thumb-card .tag {
  display: inline-block; font-size: 10px; letter-spacing: 1.2px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px; background: var(--teal-bg); color: var(--teal-dark);
  margin-bottom: 6px;
}
.thumb-card .title { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.thumb-card .desc { font-size: 13px; color: var(--ink-soft); }

/* （已移除 S/M 断点 —— 按你的要求只针对 12" 平板和 DeX 显示器优化） */