/* ------------------------------------------------------------------
   儒濟生 · 中醫溫書 — note page bridge
   The lesson notes (notes/*.html, zhenduan/notes/*.html, zhongyao/notes/*.html)
   ship their own inline design tokens, which used to look different from the
   index / subject pages (main.css). This sheet re-maps the notes' variables
   onto the site palette and restyles their topbar so the whole site reads as
   one design. Content markup is untouched.
   Injected right before </head> so it wins over the note's inline <style>.
   ------------------------------------------------------------------ */

:root {
  /* palette: align the notes' tokens with assets/css/main.css */
  --ivory: #FBF8F1;
  --paper: #FFFFFF;
  --slate: #1F1B16;
  --clay: #A83E2E;
  --clay-d: #8A3025;
  --oat: #E0D7C8;
  --olive: #4D7A68;
  --gold: #B08D57;
  --g100: #F7F3EA;
  --g200: #EFE9DC;
  --g300: #E0D7C8;
  --g500: #8A8275;
  --g700: #4A4239;
  --serif: "LXGW WenKai", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

body {
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--serif);
}

/* progress bar -> same accent as the site */
.progress-bar { background: var(--clay); }

/* ---------- topbar: same language as .top-tabs on the index pages ---------- */
.note-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 24px;
  background: var(--ivory);
  border-bottom: 1px solid var(--oat);
}

.note-topbar .nb-brand {
  font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--clay);
  margin-right: 10px;
  white-space: nowrap;
}

.note-topbar .nb-link {
  font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--g700);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.note-topbar .nb-link:hover {
  background: #F7E9E6;
  color: var(--clay);
  text-decoration: none;
}

.note-topbar .nb-spacer { flex: 1 1 12px; }

/* ---------- hero / section accents ---------- */
.article-hero { border-bottom: 1px solid var(--oat); }

.eyebrow,
.article-meta {
  color: var(--clay);
  font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  letter-spacing: .5px;
}

h1, h2, h3, h4 { color: var(--slate); }

h2 {
  border-bottom: 1px solid var(--oat);
  padding-bottom: .3em;
}

a { color: var(--clay); }

/* callouts: match the site's note-callout language */
.callout {
  border-left-color: var(--clay);
  background: #FBF6F4;
}

.callout-important { border-left-color: var(--clay); background: #FBF6F4; }
.callout-danger    { border-left-color: #8A3025;   background: #F7E9E6; }
.callout-note      { border-left-color: var(--olive); background: #EDF3F0; }

.callout-title { color: var(--clay); }
.callout-danger .callout-title { color: #8A3025; }
.callout-note .callout-title { color: var(--olive); }

/* tables: same border language as the site */
.table-wrapper table,
table { border-color: var(--oat); }

thead th { background: #F7F3EA; color: var(--slate); }

/* seal stays, just soften it */
.seal { opacity: .9; }

/* ---------- narrow screens ---------- */
@media (max-width: 640px) {
  .note-topbar { padding: 8px 14px; }
  .note-topbar .nb-link { font-size: 12.5px; padding: 5px 9px; }
  .note-topbar .nb-brand { font-size: 12.5px; }
}