/* ============================================================
   theme-subpage.css — SUBPAGE + HUB components (deep-dive themes)
   Ported from the classical-reading-site skill (style-subpage.css).
   All CSS variables used here already exist in assets/style.css.
   OKLCH + var-driven, matching the 史記 core design system.
   ============================================================ */

/* ---- cross-links / pills ---- */
.pill { display:inline-block; font-family:var(--hei); font-size:var(--t-xs);
  padding:2px 11px; border-radius:99px; background:var(--accent-wash);
  color:var(--accent-deep); margin:0 var(--s1) var(--s2) 0; letter-spacing:.04em; }
.plink { color:var(--accent-deep); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid var(--gold); padding-bottom:1px; }
.plink:hover { color:var(--vermilion); border-bottom-color:var(--vermilion); }

/* ---- HUB: org chart ---- */
.org { margin:var(--s6) 0; text-align:center; }
.org__root { display:inline-block; background:var(--ink); color:var(--paper);
  font-family:var(--hei); font-weight:700; font-size:var(--t-md);
  padding:var(--s3) var(--s6); border-radius:var(--radius); box-shadow:0 3px 0 var(--gold-lo); }
.org__line { width:2px; height:22px; background:var(--rule-strong); margin:0 auto; }
.org__row { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); }
.org__node { flex:0 1 auto; min-width:120px; background:var(--paper-raised);
  border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s3) var(--s4);
  font-family:var(--hei); font-size:var(--t-sm); color:var(--ink-1); text-align:left; }
.org__node b { color:var(--accent-deep); display:block; margin-bottom:3px; }
.org__node--key { border-top:3px solid var(--vermilion); }
.org__node--sup { border-top:3px solid var(--gold); }

/* ---- HUB: subpage cards ---- */
.subcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s4); margin:var(--s5) 0 var(--s6); }
.subcard { display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper-raised); border:1px solid var(--rule); border-top:3px solid var(--vermilion);
  border-radius:var(--radius); padding:var(--s5); transition:transform .15s, box-shadow .15s; }
.subcard:hover { transform:translateY(-3px); box-shadow:0 6px 16px oklch(0 0 0 / .09);
  border-top-color:var(--gold); }
.subcard__no { font-family:var(--hei); font-weight:700; font-size:var(--t-xs);
  letter-spacing:.16em; color:var(--vermilion); }
.subcard h3 { font-family:var(--song); font-size:var(--t-md); font-weight:900;
  color:var(--ink); margin:var(--s2) 0 var(--s2); line-height:1.4; }
.subcard p { font-size:var(--t-xs); line-height:1.75; color:var(--ink-soft); margin:0 0 var(--s3); }
.subcard__go { font-family:var(--hei); font-size:var(--t-xs); font-weight:700;
  color:var(--gold-text); margin-top:auto; }

/* ---- HUB: overview mapping table ---- */
.maptable { width:100%; border-collapse:collapse; margin:var(--s5) 0 var(--s4);
  font-family:var(--hei); font-size:var(--t-sm); }
.maptable caption { font-family:var(--kai); font-size:var(--t-md); font-weight:700;
  color:var(--ink); text-align:left; margin-bottom:var(--s3); }
.maptable th { background:var(--paper-sunk); text-align:left; padding:var(--s3);
  border:1px solid var(--rule); color:var(--ink); font-weight:700; }
.maptable td { padding:var(--s3); border:1px solid var(--rule); vertical-align:top;
  color:var(--ink-1); line-height:1.75; }
.maptable tr:nth-child(even) td { background:var(--paper-raised); }
.maptable td b { color:var(--accent-deep); }

/* ---- SUBPAGE: section sub-nav (lhs) ---- */
.subnav { list-style:none; margin:0 0 var(--s5); padding:0; }
.subnav__title { font-family:var(--hei); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; color:var(--ink-faint); margin:0 0 var(--s2); }
.subnav li { margin-bottom:1px; }
.subnav a { display:block; padding:var(--s2) var(--s3); font-family:var(--hei);
  font-size:var(--t-sm); color:var(--ink-soft); text-decoration:none;
  border-left:2px solid transparent; border-radius:0 var(--radius) var(--radius) 0; }
.subnav a:hover, .subnav a.is-current { background:var(--accent-wash);
  border-left-color:var(--vermilion); color:var(--accent-deep); font-weight:700; }

/* ---- SUBPAGE: process flow (CSS boxes + arrows) ---- */
.flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--s3); margin:var(--s5) 0; }
.fnode { flex:1 1 170px; min-width:150px; background:var(--paper-raised);
  border:1px solid var(--rule); border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s4); }
.fnode__t { font-family:var(--hei); font-weight:700; font-size:var(--t-sm);
  color:var(--accent-deep); margin:0 0 var(--s2); line-height:1.4; }
.fnode__d { font-size:var(--t-xs); line-height:1.65; color:var(--ink-soft); margin:0; }
.fnode--anc { border-top-color:var(--vermilion); }
.fnode--mod { border-top-color:var(--gold); }
.farrow { display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:var(--t-lg); font-weight:700; flex:0 0 auto; min-width:24px; }

/* ---- SUBPAGE: ancient↔modern two-column ---- */
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:var(--s5) 0;
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.cmp__col { padding:var(--s4) var(--s5); }
.cmp__col--anc { background:oklch(0.95 0.04 28 / .12); border-right:1px solid var(--rule); }
.cmp__col--mod { background:oklch(0.96 0.03 80 / .14); }
.cmp__h { font-family:var(--hei); font-size:11px; font-weight:700; letter-spacing:.14em; margin:0 0 var(--s3); }
.cmp__col--anc .cmp__h { color:var(--vermilion); }
.cmp__col--mod .cmp__h { color:var(--gold-text); }
.cmp__col ul { margin:0; padding-left:var(--s5); }
.cmp__col li { font-size:var(--t-sm); line-height:1.85; color:var(--ink-1); margin-bottom:var(--s2); }
.cmp__col li b { color:var(--accent-deep); }

/* ---- SUBPAGE: policy-insight callout ---- */
.insight { background:linear-gradient(180deg, var(--gold-lo), transparent);
  border:1px solid var(--rule); border-left:4px solid var(--gold);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s6) 0; }
.insight__tag { font-family:var(--hei); font-size:11px; font-weight:700;
  letter-spacing:.16em; color:var(--gold-text); margin:0 0 var(--s2); }
.insight h3 { font-family:var(--song); font-size:var(--t-md); font-weight:900;
  color:var(--ink); margin:0 0 var(--s3); }
.insight p { margin:0 0 var(--s3); line-height:1.95; font-size:var(--t-sm); color:var(--ink-1); }
.insight p:last-child { margin-bottom:0; }
.insight b { color:var(--accent-deep); }

/* ---- SUBPAGE: source quote block ---- */
.srcq { background:var(--slip); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s4) var(--s5); margin:var(--s5) 0; font-family:var(--kai);
  font-size:var(--t-md); line-height:2; color:var(--ink); }
.srcq cite { display:block; margin-top:var(--s2); font-family:var(--hei);
  font-size:var(--t-xs); font-style:normal; color:var(--ink-faint); letter-spacing:.05em; }

/* ---- HUB wrapper: inherit category hue from the host theme page ---- */
/* The theme page sets --card-hue; the injected hub must re-declare the
   accent vars from it so org/subcard/maptable accents match the category. */
.theme-hub {
  --hue: var(--card-hue);
  --accent:      oklch(0.485 0.115 var(--hue));
  --accent-deep: oklch(0.385 0.095 var(--hue));
  --accent-wash: oklch(0.485 0.115 var(--hue) / .08);
  --accent-line: oklch(0.485 0.115 var(--hue) / .32);
}

/* ---- responsive for new components ---- */
@media (max-width:720px) {
  .cmp { grid-template-columns:1fr; }
  .cmp__col--anc { border-right:0; border-bottom:1px solid var(--rule); }
  .fnode { flex-basis:100%; }
  .farrow { transform:rotate(90deg); }
}