/* /plants/ styles. Source of truth; build_plants.py copies it to out/plants.css?v=<hash>. */
@import url("/tokens.css?v=2");
:root { --ground:var(--bg); --ink:var(--text); --accent-soft:rgba(230,161,92,.14);
        --seg-on:var(--on-accent); --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.25); }
* { box-sizing:border-box; }
html { overflow-x:hidden; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
       font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:28px 20px 60px; }
h1,h2,h3 { font-weight:650; letter-spacing:-.02em; margin:0; text-wrap:balance; }
h1 { font-size:clamp(24px,4vw,34px); margin:14px 0 10px; overflow-wrap:anywhere; }
h2 { font-size:20px; margin:34px 0 12px; }
a { color:var(--accent-text); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.latin { font-style:italic; }
.eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.lede { color:var(--muted); max-width:70ch; margin:6px 0; }
nav.top { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; margin-top:2px; }
nav.top a { text-decoration:none; color:var(--muted); padding:4px 0; border-bottom:2px solid transparent; }
nav.top a:hover, nav.top a[aria-current] { color:var(--ink); border-bottom-color:var(--accent); }
.brand { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.brand .name { font-weight:650; } .brand .name a { color:inherit; text-decoration:none; }
.brand svg { color:var(--accent); width:26px; height:26px; }
.crumbs { font-size:13px; color:var(--muted); margin:16px 0 0; }
.crumbs a { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:16px; }
.card { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:16px;
        text-decoration:none; color:var(--ink); display:block; box-shadow:var(--shadow); }
.card:hover { border-color:var(--accent); }
.card b { font-size:16px; } .card .n { color:var(--muted); font-size:13px; margin-top:6px; }
.card .cheap { margin-top:8px; font-size:13px; color:var(--accent-text); }
.bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0 10px; }
#q { flex:1 1 280px; min-width:0; font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line);
     border-radius:8px; background:var(--surface-2); color:var(--ink); }
#q:focus { outline:2px solid var(--accent); outline-offset:-1px; }
select.sel { font:inherit; font-size:14px; padding:9px 10px; border:1px solid var(--line);
             border-radius:8px; background:var(--surface-2); color:var(--ink); max-width:100%; }
label.chk { font-size:13.5px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:14px; min-width:640px; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
     background:var(--surface); white-space:nowrap; font-weight:600; }
th button { all:unset; cursor:pointer; text-transform:inherit; letter-spacing:inherit; font:inherit; color:inherit; }
th button:hover, th button:focus-visible { color:var(--ink); }
th[aria-sort="ascending"] button::after { content:" \2191"; }
th[aria-sort="descending"] button::after { content:" \2193"; }
td.num, th.num { text-align:right; }
tr:last-child td { border-bottom:0; }
.sup { color:var(--muted); font-size:12.5px; }
.oos { color:var(--danger); font-size:12px; }
.ins { color:var(--success); font-size:12px; }
.note { font-size:12.5px; color:var(--muted); max-width:78ch; }
.exitem { padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.exitem b { margin-right:8px; } .exitem span { color:var(--muted); }
.meta { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:10px 0 0; }
.funding { font-size:12.5px; color:var(--muted); max-width:78ch; }
.subnav { display:flex; gap:2px; flex-wrap:wrap; margin:16px 0 4px; padding:4px;
           border:1px solid var(--line); border-radius:10px; background:var(--surface);
           position:sticky; top:0; z-index:6; }
.subnav a { font-size:13px; padding:7px 12px; border-radius:7px; text-decoration:none;
             color:var(--muted); white-space:nowrap; }
.subnav a:hover { color:var(--ink); background:var(--surface-2); }
.subnav a[aria-current] { color:var(--seg-on); background:var(--accent); font-weight:600; }
.grp { margin-top:34px; scroll-margin-top:64px; }
.grp-head { display:flex; align-items:baseline; gap:12px; padding-bottom:10px;
             border-bottom:1px solid var(--line); }
.grp-head h2 { margin:0; font-size:18px; }
.grp-head .n { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
                margin-left:auto; white-space:nowrap; }
.grp-note { font-size:13px; color:var(--muted); margin:9px 0 0; }
.verdict { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
            background:var(--line); border:1px solid var(--line); border-radius:10px;
            overflow:hidden; margin:18px 0 6px; }
.vcell { background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.vcell .k { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.vcell .v { font-size:22px; font-weight:600; letter-spacing:-.01em; }
.vcell .s { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.vcell.hi .v { color:var(--accent-text); }
.callout { margin:16px 0 6px; padding:14px 16px; border-left:3px solid var(--warn);
            background:var(--surface-2); border-radius:0 8px 8px 0; font-size:14px; max-width:80ch; }
.callout b { color:var(--warn); }
.sample { margin:18px 0 0; padding:12px 16px; border:2px solid var(--danger); border-radius:8px;
          background:var(--surface-2); font-size:14px; }
.sample b { color:var(--danger); }
.badge { display:inline-block; font-size:11px; padding:1px 7px; border:1px solid var(--line-2);
         border-radius:99px; color:var(--muted); vertical-align:middle; margin-left:6px; font-style:normal; }
.tx td a { text-decoration:none; border-bottom:1px solid transparent; }
.tx td a:hover, .tx td a:focus-visible { border-bottom-color:var(--accent); }
.tx .nm { font-weight:600; } .tx .cm { display:block; color:var(--muted); font-size:12.5px; }
td.price b { font-size:15.5px; color:var(--accent-text); }
td.price .was { display:block; color:var(--muted); font-size:11.5px; }
.ladder { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px;
          background:var(--surface); overflow:hidden; }
.ladder li { display:grid; grid-template-columns:minmax(120px,190px) 1fr auto; gap:4px 14px;
             padding:11px 14px; border-bottom:1px solid var(--line); align-items:center; }
.ladder li:last-child { border-bottom:0; }
.ladder .lg b { display:block; font-size:14px; }
.ladder .lg span { font-size:12px; color:var(--muted); }
.ladder .track { min-width:0; }
.ladder .fill { display:block; height:12px; border-radius:6px; background:var(--accent); min-width:3px; }
.ladder .oosbar .fill { opacity:.4; }
.ladder .step { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.ladder .step b { color:var(--ink); font-weight:600; }
.ladder .lp { text-align:right; font-size:16px; font-weight:600; color:var(--accent-text); white-space:nowrap; }
.ladder .lp small { display:block; font-size:11.5px; font-weight:400; color:var(--muted); }
.srch-res { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px;
            background:var(--surface); }
.srch-res:empty { display:none; }
.srch-res li a { display:flex; gap:12px; justify-content:space-between; align-items:baseline;
                 padding:10px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.srch-res li:last-child a { border-bottom:0; }
.srch-res li a:hover, .srch-res li a:focus-visible { background:var(--surface-2); }
.srch-res .r { color:var(--accent-text); white-space:nowrap; font-size:13px; }
.srch-res .c { color:var(--muted); font-size:12.5px; display:block; }
.steps { font-size:14px; max-width:80ch; padding-left:20px; }
.steps li { margin:6px 0; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--seg-on); padding:8px 12px; z-index:10; }
.skip:focus { left:8px; top:8px; }
.rsup, .rcap { display:none; }
@media (max-width:720px) {
  table { min-width:0; }
  .rt thead { display:none; }
  .rt tr { display:grid; grid-template-columns:1fr auto; gap:2px 10px;
           padding:11px 12px; border-bottom:1px solid var(--line); }
  .rt tr:last-child { border-bottom:0; }
  .rt td { display:block; padding:0; border:0; }
  .rt td.hide-sm { display:none; }
  .rt td.main { grid-column:1; }
  .rt td.price { grid-column:2; grid-row:1 / span 3; align-self:center; text-align:right; }
  .rt td.price b { font-size:19px; }
  .rsup, .rcap { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
  .subnav { position:static; overflow-x:auto; flex-wrap:nowrap; }
  .verdict { grid-template-columns:repeat(2,1fr); }
  .ladder li { grid-template-columns:1fr auto; }
  .ladder .track { grid-column:1 / -1; grid-row:2; }
  .ladder .lp { grid-row:1; grid-column:2; }
  .rt.bands tr { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .bands td.price .was { font-family:var(--sans); white-space:normal; }
}
/* landing pages: size bands and the facet tables */
.bands td.band b { display:block; }
.bands td.band span { font-size:12px; color:var(--muted); }
.facet-intro { max-width:76ch; }
.facet-intro p { margin:8px 0; }
.tx .nsup { white-space:nowrap; }
.pill { display:inline-block; font-size:12px; padding:2px 9px; border:1px solid var(--line-2); border-radius:99px;
        color:var(--muted); text-decoration:none; margin:2px 4px 2px 0; }
.pill:hover { border-color:var(--accent); color:var(--ink); }
.landing { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:16px; }
footer.pf { margin-top:40px; }