/* ============================================================
   modern.css — shared shell + typography for migrated pages.
   Same design tokens as the landing page (index.htm).
   Legacy content inside <main> keeps its structure; this file
   restyles it: fonts, colors, table treatment, spacing.
   ============================================================ */
:root{
  --jade:#2f6b52; --jade-dk:#1f4a38; --jade-lt:#eaf2ec;
  --cinnabar:#b0472f; --gold:#a9843f;
  --paper:#fbf8f2; --card:#ffffff;
  --ink:#22201c; --muted:#6d675d; --line:#e2dbcf;
  /* one stack each: Latin font first, CJK fallback — browsers pick per glyph */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "PingFang TC","Hiragino Sans GB","Microsoft JhengHei","Microsoft YaHei","Noto Sans CJK TC",sans-serif;
  --serif:Georgia,"Times New Roman","Songti TC","Noto Serif CJK TC",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.7 var(--sans);
}
.cjk{font-family:var(--sans)}
a{color:var(--jade-dk)}
a:hover{color:var(--cinnabar)}
img{max-width:100%;height:auto}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.site-head{background:linear-gradient(160deg,var(--jade) 0%,var(--jade-dk) 100%);
  color:#fff;border-bottom:4px solid var(--gold)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;padding-bottom:10px;flex-wrap:wrap}
.brand{font:700 19px/1.3 Georgia,"Times New Roman",serif;color:#fff;text-decoration:none}
.brand:hover{color:#fff}
.brand .zh{font-weight:400;color:#dbe9df;letter-spacing:.14em;margin-left:8px}
.lang-switch{display:flex;border:1px solid rgba(255,255,255,.45);border-radius:7px;overflow:hidden}
.lang-switch button{
  padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;
  background:transparent;color:#e7f0ea;border:0;border-right:1px solid rgba(255,255,255,.25);
}
.lang-switch button:last-child{border-right:0}
.lang-switch button.on{background:#fff;color:var(--jade-dk)}
.site-head .nav{display:flex;gap:2px 18px;flex-wrap:wrap;padding-bottom:12px;font-size:15px}
.site-head .nav a{color:#d5e5da;text-decoration:none;padding:3px 0}
.site-head .nav a:hover{color:#fff;text-decoration:underline}

/* ---------- language toggle ---------- */
html.only-en .lang-zh{display:none !important}
html.only-zh .lang-en{display:none !important}
.lang-note{background:#fdf3e3;border-bottom:1px solid #e8d9b8;color:#6b5424;
  padding:9px 20px;font-size:14.5px;text-align:center}

/* ---------- legacy content ---------- */
main.content{padding:30px 20px 40px;background:var(--card);
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  margin-top:0;margin-bottom:30px;overflow-wrap:break-word}
main.content p{margin:0 0 .8em}
/* FrontPage font faces and sizes vary within and between pages. Keep the
   source markup intact, but let the shared CSS set the visible type scale. */
main.content, main.content *{font-family:var(--sans) !important}
main.content *{font-size:inherit !important}
main.content h1,main.content h1 *,main.content h2,main.content h2 *,
main.content h3,main.content h3 *{font-family:var(--serif) !important}
main.content h1{font-size:30px !important;font-weight:700;line-height:1.3;color:var(--jade-dk)}
main.content h2{font-size:24px !important;font-weight:700;line-height:1.35;color:var(--jade-dk);
  margin:1.3em 0 .45em;padding-bottom:.18em;border-bottom:1px solid var(--line)}
main.content h3{font-size:20px !important;font-weight:700;line-height:1.35;color:var(--jade-dk);
  margin:1.15em 0 .4em}
main.content h4{font-size:18px !important}
/* Some FrontPage list entries were promoted to headings while adjacent entries
   stayed paragraphs. Keep list items visually parallel. */
main.content li > :is(h2,h3){
  font-size:inherit !important;font-family:var(--sans) !important;
  font-weight:inherit;line-height:inherit;color:inherit;
  border:0;padding:0;margin:0 0 .8em;
}
main.content li > :is(h2,h3) *{
  font-size:inherit !important;font-family:var(--sans) !important;
}
main.content h1:first-child,main.content h2:first-child,main.content h3:first-child{margin-top:.2em}
main.content small,main.content sup,main.content sub{font-size:.75em !important}
main.content u{text-underline-offset:3px}
/* The health-problems list has inconsistent legacy paragraph margins. */
main.content ol.health-problems-list li p{
  margin-top:0 !important;margin-bottom:0 !important;
  padding-bottom:.35em;line-height:1.5 !important;
}

/* content tables: modern bordered style; let them size naturally */
main.content table{
  border-collapse:collapse;width:auto !important;max-width:100%;
  height:auto !important;margin:14px 0;background:#fff;
}
main.content td,main.content th{
  border:1px solid var(--line);padding:9px 12px;vertical-align:top;
  width:auto !important;height:auto !important;
}
main.content table[border="0"] td,main.content table[border="0"] th{border:0;padding:4px 8px}
main.content tr:nth-child(even) td{background:#faf7f0}
main.content table[border="0"] tr:nth-child(even) td{background:transparent}
main.content hr{border:0;border-top:1px solid var(--line);margin:20px 0}
/* external links get a small departure marker */
main.content a.ext::after{content:"\2197";font-size:.72em;margin-left:2px;
  color:var(--muted);text-decoration:none;display:inline-block}
main.content blockquote{margin:12px 0 12px 18px;padding-left:14px;border-left:3px solid var(--gold)}

/* ---------- footer ---------- */
.site-foot{background:#25352c;color:#c9d6cd;padding:28px 0 32px}
.site-foot a{color:#e3ece5;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .fgrid{display:grid;gap:9px 24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}
.site-foot .fine{border-top:1px solid #3a4c41;padding-top:14px;font-size:13.5px;line-height:1.75;color:#9fb0a5;margin:10px 0 0}
.site-foot .fine a{text-decoration:underline}

/* ---------- mobile ---------- */
@media screen and (max-width:768px){
  body{font-size:16.5px}
  .brand{font-size:16.5px}
  main.content{padding:20px 14px 30px}
  /* wide legacy data tables scroll sideways instead of squeezing */
  main.content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main.content td,main.content th{white-space:normal !important;word-wrap:break-word}
}
@media print{
  .site-head,.site-foot,.lang-note{display:none}
  main.content{border:0}
}

/* ---------- landing-page reference destinations ---------- */
body.reference-page main.content{padding-top:26px}
body.reference-page main.content .reference-title{
  font-size:30px !important;font-family:var(--serif) !important;
  line-height:1.25;color:var(--jade-dk);margin:0 0 .35em !important;
  padding-bottom:.25em;border-bottom:2px solid var(--gold);
}
body.reference-page main.content .reference-title *{font-family:var(--serif) !important}
/* Keep the TCM directory's headings in the same family as its links. */
body.reference-page.ref-traditional_chinese_medicine main.content .reference-title,
body.reference-page.ref-traditional_chinese_medicine main.content .reference-title *,
body.reference-page.ref-traditional_chinese_medicine main.content h2,
body.reference-page.ref-traditional_chinese_medicine main.content h2 *,
body.reference-page.ref-traditional_chinese_medicine main.content h3,
body.reference-page.ref-traditional_chinese_medicine main.content h3 *{
  font-family:var(--sans) !important;
}
/* Legacy prose alternates between normal, 100%, and 150% line spacing.
   Mixed-language paragraphs may have language classes only on child spans. */
body.reference-page.ref-traditional_chinese_medicine main.content p.lang-en:not(.reference-byline):not(.reference-link-row),
body.reference-page.ref-traditional_chinese_medicine main.content p:has(.lang-en):not(.reference-byline):not(.reference-link-row),
body.reference-page.ref-traditional_chinese_medicine main.content p:has(.lang-zh):not(.reference-byline):not(.reference-link-row){
  line-height:1.7 !important;
}
body.reference-page main.content .reference-byline{
  font-size:14px !important;font-weight:400;color:var(--muted);margin:0 0 1em !important;
}
body.reference-page main.content .reference-byline *{font-size:inherit !important}
body.reference-page main.content .reference-deck{font-size:17px !important;color:var(--muted)}
body.reference-page main.content .reference-note{
  background:#fff4e7;border-left:4px solid var(--gold);padding:12px 16px;
  margin:12px 0 20px !important;color:#594821;
}
body.reference-page main.content .reference-section{margin-top:1.6em}
body.reference-page main.content .alphabet-nav,
body.reference-page main.content .comparison-nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 20px;
  padding:12px;background:var(--jade-lt);border:1px solid var(--line);border-radius:8px;
}
body.reference-page main.content .alphabet-nav strong{margin-right:8px;color:var(--jade-dk)}
body.reference-page main.content .alphabet-nav a,
body.reference-page main.content .comparison-nav a{
  display:inline-block;padding:5px 9px;background:#fff;border:1px solid var(--line);
  border-radius:5px;text-decoration:none;line-height:1.35;
}
body.reference-page main.content .alphabet-nav a:hover,
body.reference-page main.content .comparison-nav a:hover{border-color:var(--jade)}
body.reference-page main.content .reference-index li{padding-bottom:.3em}
body.reference-page main.content .reference-index li p,
body.reference-page main.content .reference-index li h3{
  margin-top:0 !important;margin-bottom:0 !important;line-height:1.5 !important;
}
body.reference-page main.content .reference-index li h3,
body.reference-page main.content .reference-index li h3 *{
  font-size:inherit !important;font-family:var(--sans) !important;
  font-weight:normal;color:inherit;
}
body.reference-page main.content .reference-index li.index-start{
  position:relative;border-top:1px solid var(--line);
  margin-top:2em;padding-top:.6em;
}
body.reference-page main.content .reference-index li.index-start::before{
  content:attr(data-letter);position:absolute;top:-1.5em;left:0;
  font:700 18px/1.3 var(--serif);color:var(--jade-dk);
}
body.reference-page main.content table.reference-letter-grid{
  display:block;width:100% !important;height:auto !important;margin:8px 0 22px;
  border:0;background:transparent;
}
body.reference-page main.content .reference-letter-grid tbody{display:block}
body.reference-page main.content .reference-letter-grid tr{display:flex;flex-wrap:wrap;gap:6px}
body.reference-page main.content .reference-letter-grid td{
  display:block;min-width:42px;text-align:center;background:var(--jade-lt);
  border:1px solid var(--line);border-radius:5px;padding:5px 8px;
}
body.reference-page main.content .reference-link-row{
  margin:0 !important;padding:9px 12px;border-bottom:1px solid var(--line);
  background:#fff;line-height:1.45;
}
body.reference-page main.content .reference-link-row:nth-of-type(even){background:#faf7f0}
body.reference-page main.content .reference-table-scroll{
  max-width:100%;overflow-x:auto;margin:18px 0 26px;border:1px solid var(--line);
  border-radius:8px;background:#fff;
}
body.reference-page main.content table.reference-table{
  display:table;width:100% !important;min-width:var(--table-min-width,680px);
  margin:0;background:#fff;
}
body.reference-page main.content .reference-table th{
  background:var(--jade-lt);color:var(--jade-dk);text-align:left;font-weight:700;
}
body.reference-page main.content .reference-link-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:9px;list-style:none;padding:0;
}
body.reference-page main.content .reference-link-list li{
  border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:#fff;
}
body.reference-page main.content .reference-resource{
  font-size:18px !important;font-family:var(--sans) !important;
  margin:10px 0;padding:12px 15px;border:1px solid var(--line);
  border-left:3px solid var(--jade);border-radius:6px;background:#fff;
}
body.reference-page main.content .reference-resource *{font-family:var(--sans) !important}
body.reference-page main.content .reference-timeline{width:100% !important}
body.reference-page main.content .reference-timeline th{
  min-width:130px;background:var(--jade-lt);color:var(--jade-dk);text-align:left;
}
@media screen and (max-width:650px){
  body.reference-page main.content .reference-title{font-size:26px !important}
  body.reference-page main.content .reference-timeline tr{display:block;margin-bottom:12px;border:1px solid var(--line)}
  body.reference-page main.content .reference-timeline th,
  body.reference-page main.content .reference-timeline td{display:block;width:100% !important;border:0}
}
@media screen and (max-width:650px){
  body.ref-side_effect_of_some_herbs main.content table.side-effect-table{
    display:block;min-width:0;width:100% !important;
  }
  body.ref-side_effect_of_some_herbs main.content .side-effect-table tbody{display:block}
  body.ref-side_effect_of_some_herbs main.content .side-effect-table tr{
    display:block;margin:0 0 12px;border-bottom:2px solid var(--line);
  }
  body.ref-side_effect_of_some_herbs main.content .side-effect-table tr:first-child{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
  body.ref-side_effect_of_some_herbs main.content .side-effect-table td{
    display:block;width:100% !important;border:0;background:#fff;
  }
  body.ref-side_effect_of_some_herbs main.content .side-effect-table td::before{
    content:attr(data-label);display:block;font-weight:700;color:var(--jade-dk);
    margin-bottom:4px;
  }
}
body.reference-page main.content .reference-resource-card{
  margin:10px 0;padding:12px 15px;border:1px solid var(--line);
  border-left:3px solid var(--jade);border-radius:6px;background:#fff;
}
body.reference-page main.content .reference-resource-card .reference-resource{
  margin:0;padding:0;border:0;background:transparent;
}
body.reference-page main.content .reference-resource-card p{
  margin:5px 0 0 !important;color:var(--muted);
}