/* ===========================================================================
   PhytoNexus design system

   Palette: every colour is a real plant pigment, and the severity ramp runs
   through four of them in ascending order of what the pigment signals in the
   field - chlorophyll (green, benign) to cochineal (deep red, stop).

     chlorophyll  #14513B   Minor
     berberine    #C9971B   Moderate
     annatto      #BE5518   Major
     cochineal    #97133D   Contraindicated

   Signature: the TLC lane. Thin-layer chromatography is the identification
   technique of pharmacognosy, so severity is drawn as a developed lane with
   bands rather than as a pill or a meter.

   Type: Newsreader for display and for every binomial (italic, as botanical
   convention requires), IBM Plex Sans for body, IBM Plex Mono for data.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F2F5F0; --paper-2:#FBFCFA; --paper-3:#E9EEE7;
  --ink:#0F1913; --ink-2:#2C3A32; --graphite:#5B685F; --faint:#8A968E;
  --rule:#D5DCD1; --rule-2:#C2CCBD;

  --chlorophyll:#14513B; --chlorophyll-d:#0A3325; --chlorophyll-l:#E4EDE7;
  --berberine:#C9971B;  --berberine-l:#FAF0D6;
  --annatto:#BE5518;    --annatto-l:#FBE8DC;
  --cochineal:#97133D;  --cochineal-l:#FADFE6;
  --indigo:#25406B;     --indigo-l:#E2E8F2;
  --anthocyanin:#4B2A6B;--anthocyanin-l:#EDE5F4;

  --r:3px; --r-lg:6px;
  --shadow:0 1px 2px rgba(15,25,19,.05), 0 8px 24px -16px rgba(15,25,19,.18);
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 15.5px/1.6 var(--sans);
  /* faint herbarium grid - 8mm, the ruling on a mounting sheet */
  background-image:
    linear-gradient(to right, rgba(20,81,59,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,81,59,.035) 1px, transparent 1px);
  background-size:30px 30px;
}
a{color:var(--chlorophyll); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-.012em; margin:0 0 .4em}
h1{font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.1}
h2{font-size:1.55rem; line-height:1.2}
h3{font-size:1.18rem}
p{margin:0 0 .9em}
hr{border:0; border-top:1px solid var(--rule); margin:26px 0}
small{font-size:.82rem}
::selection{background:var(--berberine-l)}
:focus-visible{outline:2px solid var(--chlorophyll); outline-offset:2px; border-radius:2px}

/* binomials are always Newsreader italic - botanical convention as identity */
.bino{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:.005em}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.narrow{max-width:820px}
.mono{font-family:var(--mono); font-size:.84em; letter-spacing:-.01em}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--graphite)}
.muted{color:var(--graphite)}
.faint{color:var(--faint)}
.tr{text-align:right} .tc{text-align:center}
.nowrap{white-space:nowrap}

/* ------------------------------------------------------------------ header */
header.top{
  position:sticky; top:0; z-index:60; background:rgba(242,245,240,.93);
  backdrop-filter:saturate(1.4) blur(9px); border-bottom:1px solid var(--rule);
}
.top-in{display:flex; align-items:center; gap:20px; height:60px;
  max-width:var(--maxw); margin:0 auto; padding:0 22px}
.brand{display:flex; align-items:baseline; gap:9px; font-family:var(--serif);
  font-size:1.32rem; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand b{font-weight:500}
.brand .leaf{width:9px; height:19px; border-radius:9px 9px 2px 9px;
  background:linear-gradient(160deg,var(--chlorophyll),var(--berberine)); display:inline-block;
  transform:rotate(-14deg)}
nav.main{display:flex; gap:2px; margin-left:auto; align-items:center}
nav.main a{font-family:var(--mono); font-size:.76rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); padding:7px 10px; border-radius:var(--r)}
nav.main a:hover{background:var(--paper-3); text-decoration:none}
nav.main a.on{color:var(--chlorophyll); box-shadow:inset 0 -2px 0 var(--chlorophyll)}
.who{font-family:var(--mono); font-size:.72rem; color:var(--graphite); padding-left:12px;
  border-left:1px solid var(--rule); margin-left:6px}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--rule);
  border-radius:var(--r); padding:6px 9px; font-size:1rem; cursor:pointer}

/* -------------------------------------------------------------------- hero */
.hero{padding:54px 0 34px; position:relative; overflow:hidden}
.hero h1{max-width:19ch}
.hero .lede{font-size:1.06rem; color:var(--ink-2); max-width:56ch}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:end}

/* search --------------------------------------------------------------------*/
.searchbox{position:relative; margin-top:24px}
.searchbox input{
  width:100%; font:400 1.12rem/1.3 var(--sans); padding:16px 130px 16px 44px;
  border:1px solid var(--rule-2); border-radius:var(--r-lg); background:var(--paper-2);
  color:var(--ink); box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
.searchbox input:focus{outline:none; border-color:var(--chlorophyll);
  box-shadow:0 0 0 3px var(--chlorophyll-l)}
.searchbox .ico{position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:1rem; pointer-events:none}
.searchbox button{position:absolute; right:7px; top:7px; bottom:7px; padding:0 18px}
.ac{position:absolute; left:0; right:0; top:calc(100% + 5px); background:var(--paper-2);
  border:1px solid var(--rule-2); border-radius:var(--r-lg); box-shadow:var(--shadow);
  z-index:40; max-height:340px; overflow:auto; display:none}
.ac.open{display:block}
.ac-item{display:flex; gap:11px; align-items:center; padding:9px 14px; cursor:pointer;
  border-bottom:1px solid var(--paper-3)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--chlorophyll-l)}
.ac-item .n{flex:1; min-width:0}
.ac-item .cm{display:block; font-size:.8rem; color:var(--graphite);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ac-empty{padding:14px; color:var(--graphite); font-size:.9rem}

/* -------------------------------------------------------- corpus band strip */
/* The hero visual: one band per interaction edge in the knowledge base,
   coloured by severity. It is the actual data, not decoration.              */
.corpus{margin-top:6px}
.corpus-lanes{display:flex; gap:1px; height:96px; align-items:flex-end;
  padding:10px 12px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--r-lg); overflow:hidden}
.corpus-lanes i{flex:1 1 0; min-width:1px; border-radius:1px 1px 0 0;
  transform-origin:bottom; animation:grow .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(.05); opacity:.3} to{transform:scaleY(1); opacity:1}}
.corpus-key{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
  font-family:var(--mono); font-size:.7rem; color:var(--graphite)}
.corpus-key span{display:flex; align-items:center; gap:6px}
.corpus-key i{width:9px; height:9px; border-radius:1px; display:inline-block}

/* ------------------------------------------------------------------- stats */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; margin:26px 0}
.statrow div{background:var(--paper-2); padding:14px 16px}
.statrow b{display:block; font-family:var(--serif); font-size:1.72rem; font-weight:400;
  line-height:1; letter-spacing:-.02em}
.statrow span{font-family:var(--mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--graphite)}

/* ------------------------------------------------------------------- cards */
.card{background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:20px 22px; margin-bottom:18px}
.card.tight{padding:14px 16px}
.card > h3:first-child, .card > h2:first-child{margin-top:0}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g-side{grid-template-columns:1fr 320px; align-items:start}
.g-mono{grid-template-columns:210px 1fr; gap:34px; align-items:start}

/* ------------------------------------------------------------------ pills */
.pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.05em; padding:3px 8px; border-radius:99px;
  border:1px solid var(--rule-2); color:var(--ink-2); background:var(--paper-3);
  white-space:nowrap}
.pill-ok{background:var(--chlorophyll-l); border-color:#B7CFC1; color:var(--chlorophyll-d)}
.pill-warn{background:var(--berberine-l); border-color:#E4CE8C; color:#78590A}
.pill-bad{background:var(--cochineal-l); border-color:#E5AFC0; color:var(--cochineal)}
.pill-tier1{background:var(--indigo-l); border-color:#B9C6DC; color:var(--indigo)}
.pill-pred{background:var(--anthocyanin-l); border-color:#C7B4D8; color:var(--anthocyanin)}

/* -------------------------------------------------- severity + TLC lanes  */
.sev{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.03em; white-space:nowrap}
.sev .sev-n{display:inline-grid; place-items:center; width:17px; height:17px;
  border-radius:2px; color:#fff; font-size:.66rem; font-weight:500}
.sev-minor .sev-n{background:var(--chlorophyll)}    .sev-minor{color:var(--chlorophyll-d)}
.sev-moderate .sev-n{background:var(--berberine)}   .sev-moderate{color:#78590A}
.sev-major .sev-n{background:var(--annatto)}        .sev-major{color:#8A3A0E}
.sev-avoid .sev-n{background:var(--cochineal)}      .sev-avoid{color:var(--cochineal)}
.sev-none .sev-n{background:var(--faint)}           .sev-none{color:var(--graphite)}

/* the developed lane: a track with a band whose height is the severity */
.tlc{display:inline-flex; gap:2px; align-items:flex-end; height:26px;
  padding:2px 3px; background:var(--paper-3); border-radius:2px;
  border:1px solid var(--rule)}
.tlc i{width:6px; border-radius:1px; background:var(--rule-2); align-self:flex-end}
.tlc i.b1{height:25%; background:var(--chlorophyll)}
.tlc i.b2{height:50%; background:var(--berberine)}
.tlc i.b3{height:75%; background:var(--annatto)}
.tlc i.b4{height:100%; background:var(--cochineal)}

.lane{display:block; height:7px; background:var(--paper-3); border-radius:99px;
  overflow:hidden; min-width:60px}
.lane-fill{display:block; height:100%; border-radius:99px;
  animation:wipe .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes wipe{from{transform:scaleX(0); transform-origin:left} to{transform:scaleX(1)}}
.lane-minor{background:var(--chlorophyll)} .lane-moderate{background:var(--berberine)}
.lane-major{background:var(--annatto)}     .lane-avoid{background:var(--cochineal)}
.lane-none{background:var(--faint)}
.lane-indigo{background:var(--indigo)} .lane-anth{background:var(--anthocyanin)}

/* profile strip on the monograph hero */
.profile{display:flex; gap:3px; align-items:flex-end; height:54px; padding:6px 8px;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r)}
.profile i{width:9px; border-radius:1px 1px 0 0; animation:grow .5s both}
.profile i[data-p="predicted"]{opacity:.45}

/* ------------------------------------------------------------------ tables */
table.t{width:100%; border-collapse:collapse; font-size:.92rem}
table.t th{font-family:var(--mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--graphite); text-align:left; font-weight:400;
  padding:8px 12px; border-bottom:1px solid var(--rule-2); vertical-align:bottom}
table.t td{padding:11px 12px; border-bottom:1px solid var(--paper-3); vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:#F7F9F6}
table.t.rows tbody tr{cursor:pointer}
.t-scroll{overflow-x:auto; margin:0 -22px; padding:0 22px}

/* mechanism drawer inside the interaction table */
tr.mech > td{background:#F6F8F4; border-top:0; padding:0 12px 16px}
tr.mech .mech-in{border-left:2px solid var(--chlorophyll); padding:2px 0 2px 14px;
  font-size:.9rem; max-width:78ch}
tr.mech dl{display:grid; grid-template-columns:96px 1fr; gap:4px 14px; margin:10px 0 0}
tr.mech dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); padding-top:3px}
tr.mech dd{margin:0}

/* ------------------------------------------------------------------- forms */
label{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],select,textarea{
  width:100%; font:400 .95rem/1.4 var(--sans); padding:9px 11px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule-2); border-radius:var(--r)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--chlorophyll);
  box-shadow:0 0 0 3px var(--chlorophyll-l)}
textarea{min-height:96px; resize:vertical}
.field{margin-bottom:15px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row > *{flex:1 1 200px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:500 .86rem/1 var(--sans); padding:11px 17px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--chlorophyll); background:var(--chlorophyll); color:#fff;
  transition:background .14s, transform .06s}
.btn:hover{background:var(--chlorophyll-d); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--chlorophyll)}
.btn.ghost:hover{background:var(--chlorophyll-l)}
.btn.plain{background:var(--paper-2); color:var(--ink-2); border-color:var(--rule-2)}
.btn.plain:hover{background:var(--paper-3)}
.btn.danger{background:var(--cochineal); border-color:var(--cochineal)}
.btn.danger:hover{background:#7A0F31}
.btn.sm{padding:7px 11px; font-size:.78rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.chk{display:flex; align-items:flex-start; gap:9px; font-family:var(--sans);
  font-size:.9rem; text-transform:none; letter-spacing:0; color:var(--ink-2);
  margin-bottom:7px; cursor:pointer}
.chk input{width:auto; margin-top:2px; accent-color:var(--chlorophyll)}

/* token picker used by the regimen checker */
.tokens{display:flex; flex-wrap:wrap; gap:7px; min-height:44px; padding:8px;
  border:1px solid var(--rule-2); border-radius:var(--r); background:var(--paper-2)}
.token{display:inline-flex; align-items:center; gap:7px; font-size:.84rem;
  background:var(--chlorophyll-l); border:1px solid #B7CFC1; color:var(--chlorophyll-d);
  padding:4px 6px 4px 10px; border-radius:99px}
.token.drug{background:var(--indigo-l); border-color:#B9C6DC; color:var(--indigo)}
.token b{font-weight:500}
.token button{background:none; border:0; cursor:pointer; color:inherit; font-size:1rem;
  line-height:1; padding:0 2px; opacity:.6}
.token button:hover{opacity:1}

/* ----------------------------------------------------------------- notices */
.note{border:1px solid var(--rule-2); border-left:3px solid var(--graphite);
  background:var(--paper-2); border-radius:var(--r); padding:13px 16px; margin:0 0 16px;
  font-size:.92rem}
.note-ok{border-left-color:var(--chlorophyll); background:var(--chlorophyll-l)}
.note-warn{border-left-color:var(--berberine); background:var(--berberine-l)}
.note-bad{border-left-color:var(--cochineal); background:var(--cochineal-l)}
.note-info{border-left-color:var(--indigo); background:var(--indigo-l)}
.note b{font-weight:600}
.flash{position:fixed; right:18px; top:72px; z-index:200; max-width:360px}
.flash .note{box-shadow:var(--shadow); animation:slidein .3s both}
@keyframes slidein{from{transform:translateX(14px); opacity:0}}

/* --------------------------------------------------------- monograph shell */
.mono-index{position:sticky; top:78px}
.mono-index ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--rule)}
.mono-index li{counter-increment:sec}
.mono-index a{display:block; padding:7px 0 7px 14px; margin-left:-1px;
  border-left:2px solid transparent; font-size:.88rem; color:var(--ink-2)}
.mono-index a::before{content:counter(sec,decimal-leading-zero) "  ";
  font-family:var(--mono); font-size:.68rem; color:var(--faint)}
.mono-index a:hover,.mono-index a.on{border-left-color:var(--chlorophyll);
  color:var(--chlorophyll); text-decoration:none; background:linear-gradient(90deg,var(--chlorophyll-l),transparent)}
.mono-index ol{counter-reset:sec}

section.sec{padding-top:12px; margin-bottom:34px; scroll-margin-top:76px}
section.sec > h2{display:flex; align-items:baseline; gap:12px; padding-bottom:8px;
  border-bottom:1px solid var(--rule-2)}
section.sec > h2 .num{font-family:var(--mono); font-size:.72rem; color:var(--faint);
  letter-spacing:.1em}

dl.kv{display:grid; grid-template-columns:190px 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; margin:0}
dl.kv dt{background:var(--paper-3); padding:10px 13px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite)}
dl.kv dd{background:var(--paper-2); padding:10px 13px; margin:0}

/* --------------------------------------------------------------- mind map */
.mm-shell{position:relative; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--paper-2); overflow:hidden}
.mm-shell canvas{display:block; width:100%; height:620px; cursor:grab;
  background-image:radial-gradient(rgba(20,81,59,.09) 1px, transparent 1px);
  background-size:22px 22px}
.mm-shell canvas:active{cursor:grabbing}
.mm-bar{position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap;
  background:rgba(251,252,250,.94); border:1px solid var(--rule); border-radius:var(--r);
  padding:6px}
.mm-key{position:absolute; right:12px; bottom:12px; background:rgba(251,252,250,.94);
  border:1px solid var(--rule); border-radius:var(--r); padding:9px 11px;
  font-family:var(--mono); font-size:.68rem; color:var(--graphite)}
.mm-key div{display:flex; align-items:center; gap:7px; margin:3px 0}
.mm-key i{width:10px; height:10px; border-radius:50%; display:inline-block}
.mm-tip{position:absolute; pointer-events:none; background:var(--ink); color:#F2F5F0;
  font-size:.78rem; padding:6px 9px; border-radius:var(--r); max-width:280px;
  opacity:0; transition:opacity .12s; z-index:5}

/* ----------------------------------------------------------------- charts */
.chart{width:100%; height:auto; display:block; overflow:visible}
.chart text{font-family:var(--mono); font-size:9.5px; fill:var(--graphite)}
.chart .axis{stroke:var(--rule-2); stroke-width:1}
.chart .gl{stroke:var(--rule); stroke-width:1; stroke-dasharray:2 3}
.hm rect{stroke:var(--paper-2); stroke-width:1}
.hm text.rl{fill:var(--ink-2); font-size:9px}

/* --------------------------------------------------------------- lit cards */
.lit{border-bottom:1px solid var(--paper-3); padding:16px 0}
.lit:last-child{border-bottom:0}
.lit h4{font-family:var(--serif); font-size:1.06rem; font-weight:400; margin:0 0 5px;
  line-height:1.3}
.lit-meta{display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-family:var(--mono);
  font-size:.7rem; color:var(--graphite); margin-bottom:7px}
.lit-abs{font-size:.9rem; color:var(--ink-2); max-width:82ch}
.lit-abs.clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden}
.rank{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:.66rem; padding:2px 7px; border-radius:2px; border:1px solid var(--rule-2)}
.rank-1,.rank-2{background:var(--chlorophyll-l); border-color:#B7CFC1; color:var(--chlorophyll-d)}
.rank-3,.rank-4{background:var(--berberine-l); border-color:#E4CE8C; color:#78590A}
.rank-5,.rank-6{background:var(--paper-3)}
.rank-7,.rank-8{background:var(--paper-3); color:var(--faint)}

.spinner{display:inline-block; width:14px; height:14px; border:2px solid var(--rule-2);
  border-top-color:var(--chlorophyll); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------- admin */
.admin-shell{display:grid; grid-template-columns:212px 1fr; gap:0; min-height:calc(100vh - 60px)}
.admin-nav{background:var(--ink); padding:20px 0; border-right:1px solid var(--chlorophyll-d)}
.admin-nav .lbl{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:#6E8079; padding:16px 20px 6px}
.admin-nav a{display:block; padding:8px 20px; color:#C9D4CD; font-size:.9rem}
.admin-nav a:hover{background:#182620; color:#fff; text-decoration:none}
.admin-nav a.on{background:var(--chlorophyll); color:#fff;
  box-shadow:inset 3px 0 0 var(--berberine)}
.admin-main{padding:26px 28px; background:var(--paper); min-width:0}
.admin-main > h1{font-size:1.7rem}

.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.toolbar form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto; min-width:150px}
.pager{display:flex; gap:4px; align-items:center; margin-top:16px; flex-wrap:wrap}
.pager a,.pager span{font-family:var(--mono); font-size:.78rem; padding:6px 10px;
  border:1px solid var(--rule-2); border-radius:var(--r); background:var(--paper-2)}
.pager span.cur{background:var(--chlorophyll); color:#fff; border-color:var(--chlorophyll)}

/* ------------------------------------------------------------------ footer */
footer.bot{border-top:1px solid var(--rule); margin-top:54px; padding:26px 0 40px;
  font-size:.86rem; color:var(--graphite)}
footer.bot .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px}
footer.bot a{color:var(--ink-2)}
footer.bot .legal{margin-top:20px; padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.7rem; color:var(--faint)}

/* ------------------------------------------------------------------- print */
@media print{
  body{background:#fff; background-image:none; font-size:10.5pt}
  header.top,footer.bot,nav.main,.no-print,.mm-bar,.admin-nav{display:none !important}
  .wrap{max-width:none; padding:0}
  .card{border:1px solid #bbb; break-inside:avoid; box-shadow:none}
  section.sec{break-inside:avoid}
  a{color:#000; text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555}
  @page{size:A4; margin:16mm 14mm}
  .letterhead{display:block !important}
}
.letterhead{display:none; border-bottom:2px solid var(--chlorophyll);
  padding-bottom:8px; margin-bottom:16px}
.letterhead h1{font-size:18pt; margin:0}
.letterhead .sub{font-family:var(--mono); font-size:8pt; color:#444}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .hero-grid,.g-side,.g-mono,.g2,.g3,footer.bot .cols{grid-template-columns:1fr}
  .g-mono{gap:18px} .mono-index{position:static; margin-bottom:18px}
  .mono-index ol{display:flex; flex-wrap:wrap; border-left:0; gap:4px}
  .mono-index a{border-left:0; border-bottom:2px solid transparent; padding:6px 9px}
  .admin-shell{grid-template-columns:1fr}
  .admin-nav{display:flex; flex-wrap:wrap; padding:8px}
  .admin-nav .lbl{display:none}
  .admin-nav a{padding:6px 10px}
}
@media (max-width:760px){
  nav.main{position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--paper-2); border-bottom:1px solid var(--rule); padding:8px;
    display:none; box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:11px 14px; font-size:.84rem}
  .burger{display:block}
  .who{border:0; padding:8px 14px}
  dl.kv{grid-template-columns:1fr}
  dl.kv dt{padding-bottom:2px}
  tr.mech dl{grid-template-columns:1fr}
  .searchbox input{padding:14px 14px 14px 40px; font-size:1rem}
  .searchbox button{position:static; width:100%; margin-top:9px; padding:12px}
  .statrow{grid-template-columns:1fr 1fr}
  .mm-shell canvas{height:440px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---- interaction-vocabulary gate badges on literature results ---------- */
.lit-terms { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 6px; }
.ixterm {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 2px;
  background: var(--paper-3); color: var(--chlorophyll);
  border: 1px solid rgba(20,81,59,.22);
}
.ixterm.faint { background: transparent; color: var(--faint); border-color: var(--rule-2); }
.ixterm.weak {
  background: transparent; color: var(--ink-3);
  border-style: dashed; border-color: var(--rule-2);
}