/* ---------------------------------------------------------------------------
   bazi.css — page-scoped styles for /learn/bazi.html, on dexa-style tokens.
   ---------------------------------------------------------------------------
   The page's header and footer are the site's shared chrome (styles.css); this
   file styles the article only. The article rules still read the names they
   were written against (--bg-dark, --text-light, --text-muted, --primary,
   --primary-light, --gold). They are re-declared below on body.bazi-page AS
   dexa-style tokens, so the article follows the site's light/dark switch with
   no theme rule of its own. --accent is dexa-style's.

   Light is the default, like every AstroDexa page; dark is the visitor's
   choice, :root[data-theme='dark'].
--------------------------------------------------------------------------- */

body.bazi-page {
  --bg-dark: var(--paper);
  --bg-darker: var(--paper-sunken);
  --text-light: var(--ink);
  --text-muted: var(--ink-soft);
  --primary: var(--brand-green);
  --primary-light: var(--brand-green);
  --primary-dark: var(--brand-green-hover);
  --gold: var(--status-warning);

  /* Surfaces of the figures and callouts. */
  --bz-surface: var(--paper-raised);
  --bz-surface-2: var(--paper-sunken);
  --bz-border: var(--rule-strong);
  --bz-border-soft: var(--rule);
  --bz-shade: var(--accent-soft);
  --bz-grid: var(--rule);

  /* The five element inks: data, not chrome. Water is blue rather than the
     traditional black, because black on the dark ground cannot be read. */
  --bz-wood: #15803d;
  --bz-fire: #b91c1c;
  --bz-earth: #a16207;
  --bz-metal: #475569;
  --bz-water: #1d4ed8;

  --bz-wood-bg: rgba(21, 128, 61, 0.10);
  --bz-fire-bg: rgba(185, 28, 28, 0.09);
  --bz-earth-bg: rgba(161, 98, 7, 0.11);
  --bz-metal-bg: rgba(71, 85, 105, 0.10);
  --bz-water-bg: rgba(29, 78, 216, 0.09);

  --bz-hanzi: "Hiragino Sans GB", "Songti SC", "PingFang SC", "Microsoft YaHei",
               "Noto Sans CJK SC", "Noto Serif CJK SC", "Source Han Sans SC", serif;
}

/* data, not chrome: the element inks for a dark ground. */
:root[data-theme='dark'] body.bazi-page {
  --bz-wood: #34d399;
  --bz-fire: #f87171;
  --bz-earth: #d9a441;
  --bz-metal: #cbd5e1;
  --bz-water: #60a5fa;

  --bz-wood-bg: rgba(52, 211, 153, 0.14);
  --bz-fire-bg: rgba(248, 113, 113, 0.14);
  --bz-earth-bg: rgba(217, 164, 65, 0.16);
  --bz-metal-bg: rgba(203, 213, 225, 0.12);
  --bz-water-bg: rgba(96, 165, 250, 0.14);
}

/* Article shell ---------------------------------------------------------- */

.bz-article {
  padding: var(--space-2xl) 1.25rem var(--space-3xl);
}

.bz-wrap {
  max-width: 820px;
  margin: 0 auto;
}

.bz-hero {
  border-bottom: 1px solid var(--bz-border-soft);
  padding-bottom: 2.25rem;
  margin-bottom: 2.5rem;
}

.bz-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.bz-article h1 {
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.bz-standfirst {
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
  color: var(--text-muted);
}

.bz-article h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  line-height: 1.25;
  margin: 3.5rem 0 1rem;
  color: var(--text-light);
  scroll-margin-top: 6rem;
}

.bz-article h3 {
  font-size: clamp(1.08rem, 3vw, 1.25rem);
  margin: 2.25rem 0 0.75rem;
}

.bz-article h4 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--text-light);
}

.bz-article p {
  color: var(--text-muted);
  margin-bottom: 1.05rem;
  font-size: 1.02rem;
}

.bz-article strong { color: var(--text-light); }

.bz-article ul,
.bz-article ol {
  color: var(--text-muted);
  margin: 0 0 1.05rem 0;
  padding-left: 1.4rem;
}

.bz-article li { margin-bottom: 0.45rem; }

.bz-article hr {
  border: none;
  border-top: 1px solid var(--bz-border-soft);
  margin: 3rem 0;
}

/* Inline Chinese ---------------------------------------------------------- */

.hz {
  font-family: var(--bz-hanzi);
  font-size: 1.06em;
  color: var(--text-light);
}

.py { font-style: italic; }

/* Table of contents ------------------------------------------------------- */

.bz-toc {
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 2.5rem;
}

.bz-toc h2 {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted) !important;
  margin: 0 0 0.75rem !important;
}

.bz-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.93rem;
}

@media (max-width: 560px) {
  .bz-toc ol { columns: 1; }
}

/* Callouts ---------------------------------------------------------------- */

.bz-note {
  border-left: 3px solid var(--accent);
  background: var(--bz-surface);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.15rem;
  margin: 1.75rem 0;
}

.bz-note p:last-child { margin-bottom: 0; }

.bz-note-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.bz-note.is-warn { border-left-color: var(--gold); }
.bz-note.is-warn .bz-note-label { color: var(--gold); }

.bz-note.is-engine { border-left-color: var(--primary); }
.bz-note.is-engine .bz-note-label { color: var(--primary-light); }

/* Figures ----------------------------------------------------------------- */

.bz-fig {
  margin: 2rem 0 2.25rem;
}

.bz-fig svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.bz-fig figcaption {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 0.7rem;
  padding-left: 0.1rem;
}

/* Horizontal scroll rail for the diagrams and tables too wide to shrink. */
.bz-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
}

.bz-scroll > svg,
.bz-scroll > table {
  min-width: var(--bz-min, 560px);
}

.bz-scroll::-webkit-scrollbar { height: 8px; }
.bz-scroll::-webkit-scrollbar-thumb {
  background: var(--bz-border);
  border-radius: 8px;
}

/* SVG text defaults ------------------------------------------------------- */

.bz-fig svg text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", sans-serif;
  fill: var(--text-light);
}

.bz-fig svg .hzs {
  font-family: var(--bz-hanzi);
  fill: var(--text-light);
}

.bz-fig svg .mut { fill: var(--text-muted); }
.bz-fig svg .lbl { font-size: 13px; fill: var(--text-muted); }
.bz-fig svg .ttl { font-size: 15px; font-weight: 700; fill: var(--text-light); }

.bz-fig svg .card {
  fill: var(--bz-surface);
  stroke: var(--bz-border);
  stroke-width: 1.25;
}

.bz-fig svg .card2 {
  fill: var(--bz-surface-2);
  stroke: var(--bz-border);
  stroke-width: 1.25;
}

.bz-fig svg .rule { stroke: var(--bz-grid); stroke-width: 1; fill: none; }
.bz-fig svg .lead { stroke: var(--text-muted); stroke-width: 1.2; fill: none; }

.e-wood { fill: var(--bz-wood); }
.e-fire { fill: var(--bz-fire); }
.e-earth { fill: var(--bz-earth); }
.e-metal { fill: var(--bz-metal); }
.e-water { fill: var(--bz-water); }

.b-wood { fill: var(--bz-wood-bg); stroke: var(--bz-wood); stroke-width: 1.25; }
.b-fire { fill: var(--bz-fire-bg); stroke: var(--bz-fire); stroke-width: 1.25; }
.b-earth { fill: var(--bz-earth-bg); stroke: var(--bz-earth); stroke-width: 1.25; }
.b-metal { fill: var(--bz-metal-bg); stroke: var(--bz-metal); stroke-width: 1.25; }
.b-water { fill: var(--bz-water-bg); stroke: var(--bz-water); stroke-width: 1.25; }

.s-wood { stroke: var(--bz-wood); }
.s-fire { stroke: var(--bz-fire); }
.s-earth { stroke: var(--bz-earth); }
.s-metal { stroke: var(--bz-metal); }
.s-water { stroke: var(--bz-water); }

.bz-fig svg .sheng {
  stroke: var(--primary-light);
  stroke-width: 2.4;
  fill: none;
  marker-end: url(#bz-arrow-sheng);
}

.bz-fig svg .ke {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  stroke-dasharray: 7 5;
  marker-end: url(#bz-arrow-ke);
}

.bz-fig svg .hi { fill: var(--bz-shade); }
.bz-fig svg .acc { fill: var(--accent); }
.bz-fig svg .gld { fill: var(--gold); }
.bz-fig svg .grn { fill: var(--primary-light); }

.bz-fig svg .acc-s { stroke: var(--accent); }
.bz-fig svg .gld-s { stroke: var(--gold); }
.bz-fig svg .grn-s { stroke: var(--primary-light); }

/* Tables ------------------------------------------------------------------ */

.bz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0;
}

.bz-table caption {
  caption-side: top;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.86rem;
  padding-bottom: 0.6rem;
}

.bz-table th,
.bz-table td {
  border: 1px solid var(--bz-border-soft);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
  color: var(--text-muted);
}

.bz-table thead th {
  background: var(--bz-surface-2);
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.bz-table tbody th {
  background: var(--bz-surface);
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.bz-table tbody tr:nth-child(even) td { background: var(--bz-surface); }

.bz-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* The paipan grid --------------------------------------------------------- */

.bz-paipan {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  border: 1px solid var(--bz-border);
  border-radius: 12px;
  overflow: hidden;
}

.bz-paipan th,
.bz-paipan td {
  border-bottom: 1px solid var(--bz-border-soft);
  border-right: 1px solid var(--bz-border-soft);
  padding: 0.55rem 0.6rem;
  text-align: center;
  vertical-align: middle;
  color: var(--text-muted);
}

.bz-paipan tr > *:last-child { border-right: none; }
.bz-paipan tr:last-child > * { border-bottom: none; }

.bz-paipan thead th {
  background: var(--bz-surface-2);
  color: var(--text-light);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bz-paipan tbody th {
  background: var(--bz-surface);
  color: var(--text-muted);
  text-align: right;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bz-paipan .glyph {
  font-family: var(--bz-hanzi);
  font-size: 2.1rem;
  line-height: 1.15;
  display: block;
  color: var(--text-light);
}

.bz-paipan .sub {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.bz-paipan .dm-col { background: var(--bz-shade); }

.bz-paipan .hidden-row .hs {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
}

.bz-paipan .hs .hz { font-size: 1rem; }

.bz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bz-legend li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }

.bz-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}

.sw-wood { background: var(--bz-wood); }
.sw-fire { background: var(--bz-fire); }
.sw-earth { background: var(--bz-earth); }
.sw-metal { background: var(--bz-metal); }
.sw-water { background: var(--bz-water); }

/* Closing call to action -------------------------------------------------- */

.bz-cta {
  margin: 3.5rem 0 0;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--bz-border);
  border-radius: 14px;
  background: var(--bz-surface);
}

.bz-cta h2 {
  margin-top: 0 !important;
  font-size: 1.35rem !important;
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 640px) {
  .bz-article { padding: var(--space-xl) 1rem var(--space-2xl); }
  .bz-paipan .glyph { font-size: 1.6rem; }
  .bz-paipan th,
  .bz-paipan td { padding: 0.4rem 0.35rem; }
}