/* Record pages.
   The same design as the directories: jade and cinnabar on paper, Newsreader
   for the reading, Instrument Sans for the furniture, Noto Serif SC for the
   Chinese. The tokens are copied from partials/directory.css deliberately, so
   a record page can be opened on its own without dragging the whole directory
   engine's stylesheet along with it. */

:root{
  --paper:#E9ECE4; --paper-2:#DFE4D9; --card:#FFFFFF; --card-2:#F4F6F1;
  --ink:#0F140E; --ink-2:#39433A; --ink-3:#5C685C; --ink-4:#7C877B;
  --line:#B9C2B6; --line-2:#97A294; --line-3:#DDE2D8;
  --jade:#1C5A43; --jade-2:#25765A; --jade-soft:#DCE9DF;
  --cinnabar:#9C3527; --cinnabar-soft:#F7E6E2;
  --on-jade:#FFFFFF;
  --sh-1:0 1px 2px rgba(15,20,14,.07);
  --sh-2:0 10px 30px -12px rgba(15,20,14,.32),0 1px 3px rgba(15,20,14,.08);
  --f-d:"Newsreader",Georgia,serif;
  --f-u:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,monospace;
  --f-c:"Noto Serif SC","Songti SC",serif;
  --measure:36rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E110D; --paper-2:#141814; --card:#181D17; --card-2:#1F251E;
  --ink:#EAF0E6; --ink-2:#C2CCBE; --ink-3:#94A092; --ink-4:#788476;
  --line:#333B31; --line-2:#4C5649; --line-3:#242B23;
  --jade:#7FC9A4; --jade-2:#95D6B4; --jade-soft:#1A2C22;
  --cinnabar:#E4907C; --cinnabar-soft:#2C1D1A;
  --on-jade:#0E110D;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0E110D; --paper-2:#141814; --card:#181D17; --card-2:#1F251E;
  --ink:#EAF0E6; --ink-2:#C2CCBE; --ink-3:#94A092; --ink-4:#788476;
  --line:#333B31; --line-2:#4C5649; --line-3:#242B23;
  --jade:#7FC9A4; --jade-2:#95D6B4; --jade-soft:#1A2C22;
  --cinnabar:#E4907C; --cinnabar-soft:#2C1D1A;
  --on-jade:#0E110D; color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.66 var(--f-d);-webkit-font-smoothing:antialiased}
.han,[lang="zh"]{font-family:var(--f-c)}
.dim{color:var(--ink-3)}
.sep{color:var(--ink-4);margin:0 .55em}
a{color:var(--jade);text-underline-offset:.15em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:2px solid var(--jade);outline-offset:2px;border-radius:3px}

.wrap,body > nav,body > header,body > section,body > figure.hero{max-width:58rem;margin-inline:auto;
  padding-inline:1.5rem}
body > section:last-of-type{padding-bottom:5rem}

/* ---------- breadcrumbs ---------- */
.crumbs{font:400 .8rem/1.5 var(--f-u);color:var(--ink-3);padding-top:1.7rem;letter-spacing:.012em}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--jade);text-decoration:underline}

/* ---------- record header ---------- */
.rechead{padding-block:1.3rem 1.7rem;border-bottom:1px solid var(--line);margin-bottom:2.3rem}
.rechead h1{font:600 clamp(2.1rem,5.5vw,3.25rem)/1.08 var(--f-d);margin:0;
  letter-spacing:-.022em;text-wrap:balance}
.rechead .sub{font:400 1.16rem/1.45 var(--f-d);color:var(--ink-2);margin:.55rem 0 0}
.rechead .english{font:400 .92rem/1.5 var(--f-u);color:var(--ink-3);margin:.3rem 0 0;
  letter-spacing:.012em}
.warnings{display:inline-block;margin:1rem 0 0;padding:.3rem .8rem;border-radius:999px;
  background:var(--cinnabar-soft);color:var(--cinnabar);
  border:1px solid color-mix(in srgb,var(--cinnabar) 45%,transparent);
  font:500 .78rem/1.6 var(--f-u);letter-spacing:.035em;text-transform:uppercase}
/* Who graded the toxicity. Deliberately quiet and not uppercase: the badge is
   the warning, this is the citation under it. */
.gradesrc{margin:.4rem 0 0;font:400 .8rem/1.5 var(--f-u);color:var(--ink-3)}

/* ---------- sections ---------- */
section{margin:0 0 2.8rem}
section h2{font:500 .72rem/1 var(--f-u);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 1.1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-3)}
section h3{font:600 1.05rem/1.3 var(--f-d);margin:0 0 .35rem;letter-spacing:-.008em}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.05rem}

/* ---------- names ---------- */
table.names{border-collapse:collapse;width:100%;max-width:var(--measure)}
table.names th{text-align:left;font:500 .7rem/1.5 var(--f-u);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);padding:.55rem 1.5rem .55rem 0;
  vertical-align:baseline;white-space:nowrap;width:9.5rem}
table.names td{padding:.55rem 0;border-bottom:1px solid var(--line-3)}
table.names tr:last-child td{border-bottom:0}

dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:1.2rem 1.8rem;margin:0}
.fact dt{font:500 .7rem/1.5 var(--f-u);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4)}
.fact dd{margin:.2rem 0 0}

/* ---------- actions ---------- */
.actions{display:grid;gap:1.4rem;max-width:var(--measure)}
.action ul{margin:.35rem 0 0;padding-left:1.15rem}
.action li{margin:.22rem 0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table.dose,table.ingredients{border-collapse:collapse;width:100%;
  font:400 .94rem/1.5 var(--f-u);background:var(--card);
  border:1px solid var(--line-3);border-radius:8px;overflow:hidden}
table.dose th,table.ingredients th{text-align:left;font:500 .68rem/1.5 var(--f-u);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
  padding:.7rem .9rem;border-bottom:1px solid var(--line-2);background:var(--card-2);
  white-space:nowrap}
table.dose td,table.ingredients td{padding:.62rem .9rem;border-bottom:1px solid var(--line-3)}
table.dose tr:last-child td,table.ingredients tr:last-child td{border-bottom:0}
.n{font-family:var(--f-m);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

ul.cautions{margin:0;padding-left:1.15rem;max-width:var(--measure)}
ul.cautions strong{font:500 .7rem/1.5 var(--f-u);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinnabar);margin-right:.45em}

/* ---------- related: the internal link layer ---------- */
.relgroup{margin:0 0 1.5rem}
.relgroup ul{margin:0;padding-left:1.15rem}
.relgroup li{margin:.2rem 0}
.relgroup .note{color:var(--ink-3);font-size:.9em}
ul.cols{columns:2;column-gap:2.2rem}
@media (max-width:640px){ul.cols{columns:1}}

/* ---------- clinical lists: symptoms, modifications, combinations, research ---------- */
ul.plain,ul.mods,ul.combos,ul.refs{margin:0;padding-left:1.15rem;max-width:var(--measure)}
ul.plain li,ul.mods li,ul.combos li,ul.refs li{margin:.22rem 0;break-inside:avoid}
ul.mods .changes{font-family:var(--f-u);font-size:.94em}
details.more{margin-top:.5rem;max-width:var(--measure)}
details.more>summary{cursor:pointer;font-family:var(--f-u);font-size:.94em;margin:.35rem 0;width:max-content}
details.more[open]>summary{margin-bottom:.4rem}
/* A combination reads as the herbs on one line, then why they are paired. */
ul.combos li{margin:0 0 1.15rem}
ul.combos li:last-child{margin-bottom:0}
ul.combos .pair{margin:0;font-weight:500}
ul.combos .pair a{text-decoration-thickness:.06em}
ul.combos .note{margin:0}
ul.combos .sep{color:var(--ink-4);margin:0 .35em;font-weight:400}
ul.combos .note,ul.refs .note,table.dose .note{color:var(--ink-3);font-size:.9em}
table.dose .note{display:block}
ul.refs a{overflow-wrap:anywhere}

/* ---------- photograph ---------- */
/* The photo sits in the text column, landscape and cropped to 3:2, so a tall
   or huge original cannot push the record down the page. */
figure.hero{margin:0 auto 2.2rem}
figure.hero img{width:100%;max-width:40rem;aspect-ratio:3/2;object-fit:cover;height:auto;display:block;border-radius:8px;
  border:1px solid var(--line-3);box-shadow:var(--sh-1)}

/* ---------- home ---------- */
.home{padding:5.5rem 0 3.5rem;border-bottom:0}
.home h1{font:600 clamp(2.6rem,8vw,4.2rem)/1.02 var(--f-d);margin:0;letter-spacing:-.028em}
.lede{font:400 1.26rem/1.5 var(--f-d);color:var(--ink-2);margin:1.1rem 0 2.8rem;
  max-width:var(--measure)}
.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;
  max-width:var(--measure)}
.entry{display:grid;gap:.22rem;padding:1.15rem 1.35rem;border:1px solid var(--line);
  border-radius:9px;text-decoration:none;background:var(--card);box-shadow:var(--sh-1)}
.entry:hover{border-color:var(--jade);background:var(--jade-soft)}
.entry strong{font:600 1.2rem/1.3 var(--f-d);color:var(--ink)}
.entry span{font:400 .84rem/1.5 var(--f-u);color:var(--ink-3)}

@media (max-width:560px){
  body{font-size:16px}
  table.names th{width:auto;display:block;padding-bottom:.1rem}
  table.names td{display:block;padding-top:0}
}

/* The no-script fallback list. Only ever seen without scripting, but it should
   still look like part of the site when it is. */
.plainindex{padding:2rem 1.5rem 4rem;max-width:58rem;margin-inline:auto}
.plainindex ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2.4rem}
.plainindex li{margin:.22rem 0;break-inside:avoid}
.plainindex li span{color:var(--ink-3);font:400 .85rem/1.5 var(--f-u)}
@media (max-width:640px){.plainindex ul{columns:1}}

/* ---------- site nav on record and category pages ---------- */
.sitenav{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-block:.9rem .2rem;border-bottom:1px solid var(--line-3)}
.sitenav .brand{font:500 1.05rem/1 var(--f-d);letter-spacing:-.012em;color:var(--ink);
  text-decoration:none}
.sitenav .brand:hover{color:var(--jade)}
.sitenav .links{margin-left:auto;display:flex;gap:14px;font:400 .88rem/1.5 var(--f-u);
  color:var(--ink-3)}
.sitenav .links a{color:var(--ink-3);text-decoration:none}
.sitenav .links a:hover{color:var(--jade)}
.sitenav .links b{color:var(--ink);font-weight:600;border-bottom:2px solid var(--jade);
  padding-bottom:2px}

/* ---------- category pages ---------- */
ul.catlist{list-style:none;margin:0;padding:0;columns:2;column-gap:2.4rem}
ul.catlist li{margin:.3rem 0;break-inside:avoid;display:flex;gap:.6rem;align-items:baseline}
ul.catlist .count,section h2 .count{font:400 .78rem/1 var(--f-m);color:var(--ink-4);
  font-variant-numeric:tabular-nums}
ul.reclist{list-style:none;margin:0;padding:0}
ul.reclist li{margin:.26rem 0;break-inside:avoid}
ul.reclist .second{color:var(--ink-3);font:italic 400 .88rem/1.5 var(--f-d)}
@media (max-width:640px){ul.catlist{columns:1}}

/* ---------- byline ----------
   The name at the foot of every record. Quiet by design: it is there to be
   found and checked, not to interrupt someone reading a herb. The disclaimer
   sits with it because the two are the same statement - here is who stands
   behind this, and here is what it is and is not for. */
footer.byline{margin:3.2rem 0 1.4rem;padding-top:1rem;
  border-top:1px solid var(--line-3);font:400 .84rem/1.6 var(--f-u);color:var(--ink-3)}
footer.byline p{margin:.35rem 0}
footer.byline a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
footer.byline a:hover{color:var(--jade);border-bottom-color:var(--jade)}
footer.byline .disclaimer{color:var(--ink-4);max-width:62ch}

/* The site-wide note. Emitted by the document shell on all 1,714 pages, so it
   has to sit correctly under a record page's byline AND under a directory,
   category, search or about page that has no byline at all. Hence its own
   rule rather than a variant of the byline's. */
footer.sitenote{margin:2.4rem auto 1.6rem;padding:1rem 1.2rem 0;max-width:var(--measure,72rem);
  border-top:1px solid var(--line-3);font:400 .8rem/1.6 var(--f-u)}
footer.sitenote .disclaimer{margin:0;color:var(--ink-4);max-width:62ch}
footer.sitenote .sitelinks{margin:.6rem 0 0;color:var(--ink-4)}
footer.sitenote .sitelinks a{color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--line)}
footer.sitenote .sitelinks a:hover{color:var(--jade);border-bottom-color:var(--jade)}
footer.sitenote .sitelinks .sep{margin:0 .5rem;color:var(--line-3)}
footer.byline + footer.sitenote{border-top:0;margin-top:0;padding-top:0}

/* ---------- about page ---------- */
.byline-home{margin:1.8rem 0 0;font:400 .86rem/1.6 var(--f-u);color:var(--ink-3)}
.byline-home a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.byline-home a:hover{color:var(--jade);border-bottom-color:var(--jade)}
ul.catlist li a[rel="me"]{font-weight:500}

/* Herb dialog on formula pages (herb-modal.js) */
dialog.herbmodal{width:min(760px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:1px solid var(--line);
  border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-2);overflow:auto}
dialog.herbmodal::backdrop{background:rgba(15,20,14,.45)}
dialog.herbmodal .bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--paper);border-bottom:1px solid var(--line-3)}
dialog.herbmodal .fullrecord{font-family:var(--f-u);font-weight:500;color:var(--jade)}
dialog.herbmodal .close{margin-left:auto;border:0;background:transparent;color:var(--ink-2);font-size:26px;line-height:1;
  cursor:pointer;padding:2px 8px;border-radius:8px}
dialog.herbmodal .close:hover{background:var(--paper-2)}
dialog.herbmodal .content{padding:4px 16px 20px}
dialog.herbmodal .content[aria-busy="true"]{min-height:200px}
dialog.herbmodal .content header.rechead h1{font-size:clamp(28px,5vw,40px)}
dialog.herbmodal .content figure.hero{margin:0 0 1.6rem}
dialog.herbmodal .content figure.hero img{max-width:24rem}

/* ---------- search ----------
   One box over the whole catalogue. The nav form is a real GET to /search/,
   so it is furniture rather than an application: it looks like the rest of
   the nav and only turns into a page when it is used. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.sitenav .navsearch{flex:1 1 100%;display:flex;gap:.5rem;margin:.55rem 0 .5rem}
.sitenav .navsearch input{flex:1 1 auto;min-width:0;max-width:26rem;
  font:400 .9rem/1.4 var(--f-u);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:.42rem .7rem;
  -webkit-appearance:none;appearance:none}
.sitenav .navsearch input::placeholder{color:var(--ink-4)}
.sitenav .navsearch input:focus{border-color:var(--jade);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--jade) 22%,transparent)}
.sitenav .navsearch button{font:500 .82rem/1.4 var(--f-u);letter-spacing:.02em;
  color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);
  border-radius:7px;padding:.42rem .9rem;cursor:pointer}
.sitenav .navsearch button:hover{border-color:var(--jade);color:var(--jade)}

/* The box is the last body > section on /search/, and that rule adds five rem
   of footer room under it - a hole between the box and the first result. */
.searchbox{margin-bottom:1.6rem}
body > section.searchbox:last-of-type{padding-bottom:0}
.searchbox form{display:flex;gap:.6rem;max-width:var(--measure)}
.searchbox input{flex:1 1 auto;min-width:0;font:400 1.05rem/1.5 var(--f-u);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:.62rem .9rem;-webkit-appearance:none;appearance:none}
.searchbox input::placeholder{color:var(--ink-4)}
.searchbox input:focus{border-color:var(--jade);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--jade) 22%,transparent)}
.searchbox button{font:500 .9rem/1.5 var(--f-u);color:var(--on-jade);background:var(--jade);
  border:1px solid var(--jade);border-radius:9px;padding:.62rem 1.2rem;cursor:pointer}
.searchbox button:hover{background:var(--jade-2);border-color:var(--jade-2)}
.shint{font:400 .82rem/1.55 var(--f-u);color:var(--ink-4);margin:.6rem 0 0;max-width:var(--measure)}

/* #results is a div, so it misses the body > section wrapper rule. */
#results{max-width:58rem;margin-inline:auto;padding-inline:1.5rem;padding-bottom:4rem}
body > noscript{display:block;max-width:58rem;margin-inline:auto;padding-inline:1.5rem}
.sresults{margin-bottom:2.4rem}
ol.shits{list-style:none;margin:0;padding:0;max-width:var(--measure)}
ol.shits > li{margin:0 0 1.15rem}
ol.shits > li > a{font:600 1.06rem/1.35 var(--f-d);text-decoration:none}
ol.shits > li > a:hover{text-decoration:underline}
.snames{margin:.1rem 0 0;font:400 .88rem/1.5 var(--f-u);color:var(--ink-3)}
.ssnip{margin:.25rem 0 0;font:400 .93rem/1.55 var(--f-d);color:var(--ink-2)}
.smore{font:400 .84rem/1.5 var(--f-u);color:var(--ink-4);margin:.2rem 0 0}
.snote{font:400 1rem/1.6 var(--f-d);color:var(--ink-2);max-width:var(--measure);margin:1rem 0}
#results mark,.snote mark{background:var(--jade-soft);color:inherit;
  border-radius:2px;padding:0 .08em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}

@media (max-width:560px){
  .searchbox form{flex-wrap:wrap}
  .searchbox input{flex:1 1 100%}
  .searchbox button{flex:1 1 100%}
  .sitenav .navsearch input{max-width:none}
}
.smore .moreb{font:inherit;font-family:var(--f-u);font-size:.9rem;color:var(--jade);background:none;
  border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin-left:6px;cursor:pointer}
.smore .moreb:hover{border-color:var(--jade)}

/* The directory pages' heading. They shipped with no h1 at all - the mock-up
   put the brand in a header link and never said what the page was. */
/* h1.dirhead had visible styling here. The directory <h1> is now .vh - in the
   document for crawlers and screen readers, off the screen for everyone else -
   and an element+class rule would out-specify .vh and put its margin and
   padding back, leaving a 1px box with spacing around it. */