/* CannaScope Lite: one stylesheet, no framework, mobile first.
   Type: Bricolage Grotesque for display (headings, brand, the big readings),
   Inter for everything you actually read in bulk. */

:root{
  --font-display:"Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --font-text:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --paper:#10171A; --panel:#182327; --panel2:#1F2D32; --ink:#E8EFF0; --muted:#94A8AC;
  --line:#2C3D43; --accent:#34D399; --accent-ink:#04231A; --focus:#6EE7B7;
  --ok:#17A34A;    --ok-ink:#fff;
  --low:#A3CD3A;   --low-ink:#1b2a06;
  --mid:#F5BB3F;   --mid-ink:#2a1d05;
  --high:#F08A5D;  --high-ink:#2a1205;
  --over:#E2474A;  --over-ink:#fff;
  --none:#55666B;  --none-ink:#EEF3F3;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.22);
  --r:14px;
}
html[data-theme="light"]{
  --paper:#F5F8F7; --panel:#FFFFFF; --panel2:#EEF4F2; --ink:#0F1E22; --muted:#55696E;
  --line:#D9E4E2; --accent:#0F9D63; --accent-ink:#fff; --focus:#0F9D63;
  --none:#C3D0D2; --none-ink:#223236;
  --shadow:0 1px 2px rgba(16,40,45,.07), 0 10px 30px rgba(16,40,45,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.55 var(--font-text);
  -webkit-text-size-adjust:100%;
}
a{color:var(--focus)}
.wrap{max-width:1060px; margin:0 auto; padding:0 16px}
h1,h2,h3,.val,.brand,.tab .t-name,.tile .v{font-family:var(--font-display)}

/* ---------------------------------------------------------------- top bar */
.topbar{position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--line); padding:10px 0}
.bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.brand{font-size:1.3rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:9px}
.brand img{width:30px; height:30px; display:block; flex:0 0 auto}
.brand-lite{color:var(--accent); margin-left:.22em; font-weight:500}
.brand-v{font-family:var(--font-text); font-size:.6rem; font-weight:800; letter-spacing:.06em;
  vertical-align:super; margin-left:.35em; color:var(--muted); border:1px solid var(--line);
  border-radius:5px; padding:1px 4px}
.bar-right{display:flex; gap:7px; align-items:center; margin-left:auto; flex:1 1 260px;
  justify-content:flex-end}
.search-wrap{position:relative; flex:1 1 200px; min-width:0; max-width:360px}
.search{width:100%}

/* type-ahead list */
.sugg{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.45); overflow:hidden; max-height:62vh; overflow-y:auto}
.sugg[hidden]{display:none}
.sugg-h{font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px 4px}
.sugg-i{display:flex; gap:9px; align-items:baseline; padding:8px 12px; cursor:pointer;
  border:0; background:none; width:100%; text-align:left; font:inherit; color:var(--ink)}
.sugg-i:hover,.sugg-i[aria-selected="true"]{background:var(--panel2)}
.sugg-i b{font-weight:700}
.sugg-i .n{margin-left:auto; font-size:.76rem; color:var(--muted); flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.sugg-i mark{background:none; color:var(--accent); font-weight:800}
.sugg-none{padding:12px; color:var(--muted); font-size:.88rem}

.to-top{position:fixed; right:16px; bottom:16px; z-index:30; border-radius:999px;
  padding:10px 15px; font-weight:700; box-shadow:var(--shadow); background:var(--panel)}
.to-top[hidden]{display:none}

/* a producer name in a row filters to that producer */
.by .who{cursor:pointer; border-bottom:1px dotted transparent}
.by .who:hover{border-bottom-color:var(--accent)}

input,select,button{font:inherit; color:inherit}
input[type="search"],input[type="date"],select{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; width:100%; color:var(--ink); appearance:none;
}
input[type="date"]{min-height:42px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

button{cursor:pointer; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); padding:9px 13px; font-weight:600; white-space:nowrap}
button:hover{border-color:var(--accent)}
.ghost.sm{padding:6px 10px; font-size:.86rem}
.ghost.icon{padding:9px 11px; line-height:1}
.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  font-weight:700; padding:11px 18px; font-size:1rem}
.primary:hover{filter:brightness(1.07)}
.linkish{background:none; border:0; padding:0; color:var(--focus); font-weight:600;
  text-decoration:underline; font-size:inherit}

.install-help{max-width:460px}

/* ---------------------------------------------------------------- hero */
.hero{padding:26px 0 8px; text-align:center}
.hero[hidden]{display:none}
.hero h1{font-size:clamp(1.75rem, 5.2vw, 2.9rem); line-height:1.08; letter-spacing:-.035em;
  font-weight:800; margin:0 0 12px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{font-size:1.05rem; color:var(--muted); max-width:58ch; margin:0 auto 18px}
.hero-act{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}

/* numbered step headings */
.step-h{font-size:1.12rem; font-weight:700; letter-spacing:-.015em; margin:26px 0 10px;
  display:flex; align-items:center; gap:9px; justify-content:center}
.step-n{display:inline-grid; place-items:center; width:25px; height:25px; flex:0 0 auto;
  border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font-size:.82rem; font-weight:800; font-family:var(--font-text)}

/* ---------------------------------------------------------------- what to check */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow)}

.tabs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
/* Two labeled groups keep six buttons from reading as one undifferentiated wall. */
.tab-cap{grid-column:1/-1; font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 -2px}
.tab-cap:first-child{margin-top:0}
.tab{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; line-height:1.25}
.tab .t-name{font-weight:700; font-size:1.02rem; letter-spacing:-.02em}
.tab .t-sub{font-size:.75rem; color:var(--muted); font-weight:500}
.tab[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tab[aria-pressed="true"] .t-sub{color:var(--accent-ink); opacity:.8}

/* ---------------------------------------------------------------- the period
   Two labeled steps (how much time, ending when), then the answer in plain English, with
   the power controls folded away. Previously five controls sat in one undifferentiated stack. */
.window{padding:14px}
.win-step{margin-bottom:13px}
.win-cap{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px}

.ranges{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.range{padding:10px 6px; font-size:.87rem; font-weight:700}
.range[aria-pressed="true"]{background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink)}

.win-row{display:flex; gap:7px; align-items:center; justify-content:center}
.win-row input[type="date"]{flex:0 1 220px; min-width:0; text-align:center}
.step{flex:0 0 auto; padding:10px 14px; font-size:.9rem; font-weight:800; line-height:1}
.step[disabled]{opacity:.35; cursor:not-allowed}

.win-range{margin:0; padding:11px 12px; text-align:center; font-size:1rem; font-weight:600;
  background:var(--panel2); border-radius:10px}
.win-range b{color:var(--accent); font-family:var(--font-display)}

.jump{margin-top:11px; border-top:1px solid var(--line); padding-top:10px}
.jump>summary{cursor:pointer; list-style:none; font-size:.86rem; font-weight:700;
  color:var(--muted); display:flex; align-items:center; gap:7px}
.jump>summary::-webkit-details-marker{display:none}
.jump>summary::before{content:"▸"; font-size:.9em}
.jump[open]>summary::before{content:"▾"}
.jump>summary:hover{color:var(--accent)}
.jump-body{padding-top:11px}
.load-row{display:flex; gap:7px; align-items:center; max-width:380px}
.load-row select{flex:1 1 auto; min-width:0; width:auto}
.primary.sm{padding:9px 16px; font-size:.88rem; flex:0 0 auto}
.quick{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.chip-btn{padding:6px 12px; font-size:.82rem; border-radius:999px}
.chip-btn[aria-pressed="true"]{background:var(--panel2); border-color:var(--accent); color:var(--accent)}
.load-note{margin:9px 0 0; font-size:.82rem; color:var(--muted)}
.load-note b{color:var(--accent)}

/* ---------------------------------------------------------------- narrow it down */
.filters{padding:0; margin:12px 0 0}
.filters>summary{cursor:pointer; padding:13px 14px; font-weight:700; list-style:none;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:44px}
.filters>summary>span:first-of-type{white-space:nowrap}
.filters>summary::-webkit-details-marker{display:none}
.filters>summary::before{content:"▸"; color:var(--muted); font-size:.9em}
.filters[open]>summary::before{content:"▾"}
.filters[open]>summary{border-bottom:1px solid var(--line)}
.f-hint{font-size:.8rem; font-weight:500; color:var(--muted)}
.f-count{font-size:.78rem; font-weight:700; color:var(--accent); margin-left:auto}
.ctl-grid{display:grid; gap:12px; grid-template-columns:1fr; padding:14px}
.ctl{display:flex; flex-direction:column; gap:5px; min-width:0}
.ctl>span{font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted)}
.ctl-foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 14px 14px; border-top:1px solid var(--line)}
.chk{display:flex; gap:9px; align-items:center; font-size:.88rem; color:var(--muted);
  cursor:pointer; margin-right:auto; min-height:38px; padding:2px 0}
.chk input{accent-color:var(--accent); width:20px; height:20px; flex:0 0 auto}

.load-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.load-lab{font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); width:100%; text-align:center}
.load-row select{flex:1 1 190px; max-width:260px; width:auto}
.primary.sm{padding:9px 15px; font-size:.9rem; flex:0 0 auto}
.load-note{margin:9px 0 0; font-size:.82rem; color:var(--muted); text-align:center}
.load-note b{color:var(--accent)}

.save{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:22px 0 4px}

/* ---------------------------------------------------------------- summary */
.summary{margin:0 0 14px}
/* the period header updates before its data does; dim rather than mislead */
.summary.busy{opacity:.4}
.sum-head{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin:0 0 4px;
  text-align:center}
.sum-sub{color:var(--muted); margin:0 auto 7px; font-size:.94rem; text-align:center;
  max-width:64ch}
.sum-count{margin:0 0 14px; font-size:.94rem; color:var(--muted); text-align:center}
.sum-count b{color:var(--ink); font-variant-numeric:tabular-nums}
.legend{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:14px 0 0;
  font-size:.82rem; color:var(--muted); line-height:2; justify-content:center}
.legend .pill{font-size:.64rem; padding:2px 7px}
.tiles{display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 13px; text-align:center}
button.tile{cursor:pointer; font:inherit; color:inherit; width:100%}
button.tile:hover{border-color:var(--accent)}
button.tile .v{color:var(--accent)}

/* brief flash on the row a tile sent you to */
@keyframes cs-flash{0%{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.25)}
  100%{border-color:var(--line);box-shadow:var(--shadow)}}
.row.flash{animation:cs-flash 1.6s ease-out}
.tile .k{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); display:block}
.tile .v{font-size:1.7rem; font-weight:800; letter-spacing:-.03em; line-height:1.12;
  font-variant-numeric:tabular-nums}
.tile .n{font-size:.79rem; color:var(--muted)}

.notice{border:1px solid var(--line); border-left:4px solid var(--mid);
  background:var(--panel); border-radius:10px; padding:11px 14px; margin:12px 0; font-size:.92rem}
.notice.bad{border-left-color:var(--over)}
.notice.ok{border-left-color:var(--accent)}
.notice b{color:var(--ink)}




/* Sort sits with the results it orders, not buried in a collapsed panel. */
.sortbar{display:flex; align-items:center; gap:9px; margin:0 0 12px; justify-content:center;
  flex-wrap:wrap}
.sortbar label{font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted)}
.sortbar select{width:auto; min-width:210px; padding:8px 32px 8px 11px}

/* ---------------------------------------------------------------- results */
/* One quiet line instead of two blocks of legal text above every result set. The full
   wording is in the footer and in the guide, one tap away. */
.finenote{margin:0 0 14px; padding:9px 12px; font-size:.82rem; color:var(--muted);
  line-height:1.55; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--mid); border-radius:9px; text-align:left}
.finenote b{color:var(--ink)}
.finenote .linkish{font-size:.82rem}

.results{display:flex; flex-direction:column; gap:10px}
.row{display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; box-shadow:var(--shadow)}
.rank{font-size:.82rem; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums;
  min-width:2.1ch; text-align:right; padding-top:7px; grid-column:1; grid-row:1 / -1;
  font-family:var(--font-display)}
.row-main{min-width:0; grid-column:3}
.reading{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; margin-bottom:3px}
.val{font-size:1.7rem; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
  line-height:1.08}
.unit{font-size:.85rem; color:var(--muted); font-weight:600}
.of{font-size:.82rem; color:var(--muted)}
.pill{font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap}
.p-ok{background:var(--ok); color:var(--ok-ink)}
.p-low{background:var(--low); color:var(--low-ink)}
.p-mid{background:var(--mid); color:var(--mid-ink)}
.p-high{background:var(--high); color:var(--high-ink)}
.p-over{background:var(--over); color:var(--over-ink)}
.p-none{background:var(--none); color:var(--none-ink)}

/* product-type picture, shown only when artwork exists for that dosage form */
.row-mark{grid-column:2; padding-top:4px}
.tmark{width:46px; height:46px; object-fit:contain; display:block;
  background:var(--panel2); border-radius:12px; padding:3px}

/* compact secondary links: photo + label, alongside the COA button */
.doclink{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink); border-radius:9px; padding:7px 10px;
  font-size:.8rem; font-weight:700; text-decoration:none; white-space:nowrap}
.doclink:hover{border-color:var(--accent); color:var(--accent)}

.pname{font-size:1.2rem; font-weight:800; letter-spacing:-.025em; line-height:1.28;
  margin:4px 0 2px; overflow-wrap:anywhere}
.pname a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--muted)}
.pname a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.dupgrp li a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--muted)}
.dupgrp li a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* Producer + registration date: the two facts people scan for, at full contrast. */
.by{font-size:1.06rem; line-height:1.45; margin:0 0 3px}
.by .who{font-weight:700; color:var(--accent)}
.by .when{color:var(--ink); font-weight:600}
.by .sep{opacity:.45; margin:0 6px}
/* Inline flow, not flex: on a phone a flex row makes every fragment its own line and the
   card grows to a full screen. As running text it wraps like a sentence and stays compact. */
.meta{font-size:.78rem; color:var(--muted); line-height:1.6}
.meta>*{display:inline}
.meta .sep{opacity:.45; margin:0 3px}
.tag{display:inline-block !important; font-size:.7rem; font-weight:700; padding:1px 7px;
  border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--muted)}
.actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; grid-column:3}
.coa{display:inline-flex; align-items:center; gap:6px; background:var(--accent);
  color:var(--accent-ink); border:0; border-radius:9px; padding:8px 13px;
  font-size:.86rem; font-weight:700; text-decoration:none}
.coa:hover{filter:brightness(1.08)}
.coa.dis{background:var(--none); color:var(--none-ink); cursor:not-allowed}

.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.chip{font-size:.74rem; border:1px solid var(--line); border-radius:8px; padding:3px 8px;
  background:var(--panel2); font-variant-numeric:tabular-nums}
.chip b{font-weight:700}
.chip.hit{border-color:var(--over); color:var(--over)}

.dupgrp{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; box-shadow:var(--shadow)}
.dupgrp h3{margin:0 0 3px; font-size:1.1rem; letter-spacing:-.02em}
.dupgrp ul{margin:8px 0 0; padding-left:18px}
.dupgrp li{margin:3px 0; font-size:.9rem}
.dupgrp li .d{color:var(--muted); font-size:.85rem}
.dup-actions{margin-top:10px}

.more{margin:14px 0 6px; text-align:center}
.empty{background:var(--panel); border:1px dashed var(--line); border-radius:var(--r);
  padding:28px 18px; text-align:center; color:var(--muted)}
.empty b{color:var(--ink); display:block; margin-bottom:5px; font-size:1.1rem;
  font-family:var(--font-display); letter-spacing:-.02em}
.empty-act{margin-top:16px}
.empty-note{margin-top:8px; font-size:.82rem}

.spin{text-align:center; color:var(--muted); padding:32px 0}

/* ---------------------------------------------------------------- the guide */
/* A browser that does not know <dialog> treats it as an ordinary element and would show the
   whole guide inline on page load. Keep it hidden until something sets [open]. */
dialog:not([open]){display:none}

.guide{border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--ink);
  padding:0; max-width:720px; width:calc(100% - 28px); max-height:88vh; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.guide::backdrop{background:rgba(4,10,12,.72)}
.guide-head{position:sticky; top:0; display:flex; align-items:center; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--line); background:var(--panel); z-index:1}
.guide-head h2{margin:0; font-size:1.22rem; letter-spacing:-.03em; flex:1 1 auto; text-align:left}
.guide-body{padding:0 22px 26px; overflow-y:auto; max-height:calc(88vh - 62px);
  font-size:.95rem; line-height:1.62}

/* the opening paragraph reads as a standfirst, not as body copy */
.guide-body .lede{font-size:1.04rem; line-height:1.6; color:var(--ink); margin:20px 0 4px;
  padding-bottom:18px; border-bottom:1px solid var(--line)}

.guide-body h3{font-size:1.02rem; letter-spacing:-.01em; margin:26px 0 10px; color:var(--accent);
  text-transform:uppercase; font-size:.78rem; font-weight:800; letter-spacing:.09em}
.guide-body p{margin:.6rem 0; color:var(--muted)}
.guide-body p b,.guide-body li b{color:var(--ink)}

/* term/definition pairs as indented blocks with an accent rule, previously they ran together */
.gl{margin:0}
.gl dt{font-weight:700; color:var(--ink); margin-top:14px; font-size:1rem}
.gl dd{margin:3px 0 0; padding-left:13px; border-left:2px solid var(--line); color:var(--muted)}

.gsteps,.gtips{margin:.6rem 0; padding-left:22px; color:var(--muted)}
.gsteps li,.gtips li{margin:.45rem 0; padding-left:3px}
.gsteps{counter-reset:none}

.legend-list{list-style:none; margin:.7rem 0 0; padding:0; color:var(--muted)}
.legend-list li{display:flex; gap:11px; align-items:center; margin:.42rem 0; font-size:.9rem}
.legend-list .pill{flex:0 0 auto; min-width:112px; text-align:center}

.guide-foot{margin-top:26px !important; padding-top:14px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted)}

/* ---------------------------------------------------------------- footer */
.foot{margin:34px 0 44px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.88rem; text-align:center}
.foot p{margin:.6rem 0}
.foot b{color:var(--ink)}
.cov{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 15px; text-align:center}
.src{font-size:.82rem; opacity:.9; max-width:74ch; margin-left:auto; margin-right:auto;
  text-align:left}
code{background:var(--panel2); padding:1px 5px; border-radius:5px; font-size:.9em}

/* ---------------------------------------------------------------- phones */
@media (max-width:539px){
  /* the hint is a nicety; on a phone it cost three lines of height, so drop it */
  .f-hint{display:none}
  .range{padding:10px 3px; font-size:.76rem}
  .step{padding:10px 11px}
  .bar-right{flex-basis:100%; margin-left:0; flex-wrap:wrap; justify-content:stretch}
  .search-wrap{max-width:none; order:-1; flex:1 0 100%}
  .row{padding:12px 13px; gap:8px}
  .tiles{gap:8px}
  .step{padding:9px 8px; font-size:.8rem}
  .tab{padding:11px 12px}
  .hero{padding:18px 0 4px}
  .guide{width:calc(100% - 20px); max-width:none; max-height:82vh; border-radius:16px;
    margin:auto}
  .guide-body{max-height:calc(82vh - 58px); padding:0 16px 20px}
  .guide-head{padding:13px 16px}
  .guide-head h2{font-size:1.06rem}
  .install-help{max-width:none}
  .legend-list li{flex-wrap:wrap}
}

/* ---------------------------------------------------------------- wider screens */
@media (min-width:560px){
  .ctl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .row{grid-template-columns:auto auto 1fr auto; align-items:center}
  .rank{grid-row:1}
  .row-mark{grid-row:1; padding-top:0}
  .actions{grid-column:4; grid-row:1; margin-top:0; justify-content:flex-end; max-width:216px}
  .actions .coa{flex:1 0 100%; justify-content:center}
  .actions .doclink{flex:1 1 0; justify-content:center}
}
@media (min-width:860px){
  .ctl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .row,.dupgrp,.tab{transition:border-color .12s ease}
  .row:hover,.dupgrp:hover{border-color:var(--accent)}
}
@media print{
  .topbar,.window,.filters,.hero,.tabs,.more,.actions,.save,.step-h{display:none}
  body{background:#fff; color:#000}
}

/* ---------------------------------------------------------------- re-test / multiple COA
   One product whose certificate carries several laboratory samples. The list is ordered
   oldest to newest and the newest is marked, because the whole point of the view is that an
   earlier sample can disagree with the one the product actually shipped on. */
.rt-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.rt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.5; }
.rt-when { font-weight: 650; }
.rt-v { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
        padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
        background: var(--panel2); color: var(--muted); }
.rt-v.good { background: color-mix(in srgb, var(--ok) 18%, transparent);
             border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.rt-v.bad  { background: color-mix(in srgb, var(--over) 18%, transparent);
             border-color: color-mix(in srgb, var(--over) 45%, transparent); color: var(--over); }
.rt-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
          color: var(--accent); }
.rt-note { margin: 12px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 560px) {
  .rt-list { padding-left: 16px; }
  .rt-list li { gap: 6px; }
}

/* High-caution hazard badge. Sits after the percentage pill, sized to the pill rather than to
   the big number, so it reads as a marker on the result and never as a banner over the row. */
/* The caution mark. Deliberately small: it sits beside the percentage pill as a marker on the
   reading, never as a banner. The product-type picture is the prominent image on a row. */
.hazard { width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle;
          margin-left: 3px; opacity: .95; }
@media (max-width: 560px) { .hazard { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: no-preference) { .hazard { transition: opacity .2s ease; } }

/* ---------------------------------------------------------------- wide-screen result rows
   On a desktop the result card had a dead gutter running down its middle: the text column is
   already 1fr, so the width was there, the type was simply too small to use it and the
   secondary lab values sat underneath the row instead of beside it.

   Two changes, no markup change. The type steps up so the numbers and names read at arm's
   length, and .row-main becomes a two-column grid whose second track holds the chips. That
   track is `auto`, so on a row with no chips it collapses to nothing and the text keeps the
   full width rather than indenting around an empty box. */
@media (min-width:900px){
  .val{font-size:2.2rem; letter-spacing:-.04em}
  .unit{font-size:1rem}
  .of{font-size:.95rem}
  .pill{font-size:.82rem; padding:3px 11px}
  .pname{font-size:1.45rem; line-height:1.25}
  .by{font-size:1.18rem}
  .meta{font-size:.88rem; line-height:1.65}
  .tag{font-size:.76rem; padding:2px 9px}
  .actions{max-width:248px}

}

/* The side column only appears once there is genuinely room for it. Introducing it at 900px
   squeezed the product name into two wrapped lines to make space for a panel, which is the
   same crowding the change set out to fix, just moved. Below this width the caution mark stays
   inline beside the percentage pill and the chips stay under the row. */
@media (min-width:1080px){
  /* Sizes must be relative to the ROW, never to the viewport. .wrap caps the page at 1060px,
     so a side column set to 24vw kept growing after the row had stopped: at a 1400px viewport
     it asked for 330px inside a 662px track that also had a 360px floor on the text column,
     overflowed by 56px and laid itself over the COA buttons. Fixed width, no floor. */
  .row-main{display:grid; grid-template-columns:minmax(0,1fr) auto;
            column-gap:26px; align-items:start; min-width:0}
  .row-main>*{grid-column:1; min-width:0}
  .row-main>.row-side{grid-column:2; grid-row:1 / -1; align-self:center;
                      display:flex; flex-direction:column; gap:10px;
                      /* No percentage max-width here: this sits in an `auto` track, so a
                         percentage resolves against a track width that is itself derived from
                         this element, and the browser collapses it (it fell to 100px, wrapping
                         the panel one word per line). A fixed width is the only stable answer. */
                      width:252px; margin-top:0}
  .row-side .chips{margin-top:0; flex-direction:column; align-items:flex-start; gap:8px}
  .row-side .chip{font-size:.9rem; padding:6px 12px; line-height:1.4}
}
@media (min-width:1200px){
  .val{font-size:2.5rem}
  .pname{font-size:1.6rem}
  .by{font-size:1.24rem}
  .meta{font-size:.92rem}
}




/* Beta marker in the header. Sits next to the version chip so the status is visible on every
   screen without occupying a line of its own; the full explanation is in the standing note
   above the results and in the footer. */
.brand-beta{display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px;
            font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
            background:color-mix(in srgb, var(--mid) 22%, transparent);
            border:1px solid color-mix(in srgb, var(--mid) 55%, transparent);
            color:var(--mid); vertical-align:middle}

/* Buttons default to white-space:nowrap, which is right for a one-word action button and wrong
   for the two that carry a whole label: the view tabs and the stat tiles. With nowrap those
   pushed the page wider than a 375px phone, so the whole site scrolled sideways. Everything
   else keeps nowrap. */
.tab, button.tile{white-space:normal}
.tab .t-name{overflow-wrap:anywhere}
.tile .k, .tile .n{overflow-wrap:anywhere}
/* The header lockup gained a version chip and a beta chip; below ~360px that trio no longer
   fits on one line, so let it wrap rather than widen the page. */
/* .brand is an inline-flex, so white-space alone cannot break it: the chips are flex items and
   flex items do not wrap without flex-wrap. Without this the lockup ran 20px past the content
   box on a 320px phone and scrolled the whole page sideways. */
@media (max-width:380px){
  .brand{white-space:normal; flex-wrap:wrap; row-gap:2px; max-width:100%}
  .brand-v, .brand-beta{margin-left:4px}
}

/* A flag pill carries a whole sentence ("Yeast & Mold 380,000 over its 100,000 limit"), not a
   two-word label, so it must wrap. The short severity pills keep nowrap: breaking "93% of
   limit" across two lines would look broken. */
.pill.is-long{white-space:normal; text-align:left; line-height:1.35}

/* "All Products" is the only member of its group and is not a ranking, so it spans the row
   instead of leaving a ragged gap beside two empty cells. */
.tab-wide{grid-column:1/-1}


/* The product-type picture is the one image a row is meant to be read by, so it grows with the
   available width. The caution mark does not: it stays a small marker beside the pill at every
   size. */
@media (min-width:900px){
  .tmark{width:58px; height:58px; border-radius:14px; padding:4px}
  .row-mark{padding-top:2px}
}
@media (min-width:1200px){
  .tmark{width:66px; height:66px; border-radius:16px}
}

/* Touch targets. On a phone the period arrows were 28x33, well under the 44px a fingertip
   needs, and they are the control people use most after the period buttons themselves. The
   document links get a floor too, since every one of them starts a download and a mis-tap
   is a wasted file. Desktop keeps the tighter sizes, where a pointer is precise. */
@media (max-width:700px){
  .step{min-width:44px; min-height:44px}
  .coa, .doclink{min-height:42px}
  .chip-btn{min-height:40px}
}
/* The checkbox itself is 20px, but its label is the real target, so give the pair a
   comfortable row rather than enlarging the box out of proportion. Only the height is set
   here; .chk above already owns the layout. */
.chk{min-height:40px}