/* =========================================================================
   GRADING BADGE styles. Every selector is prefixed `.gb`, so this file can be
   dropped into index.html without reaching into anything already there.

   It consumes the palette variables site.css / index.html already define
   (--desk-2, --ink, --mint, --amber, --coral, ...) and provides a fallback for
   each, so it renders correctly on a page that does not define them.

   THE DESIGN RULE THIS FILE EXISTS TO ENFORCE:
   "cannot assess" must never look like "do not grade". A missing measurement
   and a negative measurement are different claims, and a user who reads one as
   the other either wastes $114.99 or misses a real opportunity. So:
     - do-not-grade  = SOLID coral fill, solid border, a decisive ✕
     - cannot-assess = DASHED grey outline, no fill, a ?, lower contrast
   Colour alone never carries it: the mark, the border style and the fill all
   differ, so it survives greyscale and colour-blindness.
   ========================================================================= */

.gb{
  --gb-ink:var(--ink,#e8edf2);
  --gb-dim:var(--ink-dim,#94a3b4);
  --gb-line:var(--line,#2b3543);
  --gb-panel:var(--desk-2,#181e28);
  --gb-good:var(--mint,#4fe3a3);
  --gb-warn:var(--amber,#f2c14e);
  --gb-bad:var(--coral,#ff6b6b);
  --gb-mute:var(--ink-faint,#8493a6);
  display:block;
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif);
  color:var(--gb-ink);
}

/* ---- header / pill ---- */
.gb-head{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.gb-head:focus-visible{outline:2px solid var(--gb-warn);outline-offset:3px;border-radius:8px}

.gb-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
}
.gb-mark{font-size:11px;line-height:1;opacity:.95}
.gb-lab{line-height:1}
.gb-num{
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:12px;padding-left:7px;margin-left:1px;
  border-left:1px solid currentColor;opacity:.9;
}

/* worth grading — the only state that gets a confident fill */
.gb-worth .gb-pill{
  color:var(--gb-good);
  background:rgba(79,227,163,.12);
  border-color:rgba(79,227,163,.42);
}
/* marginal — amber, deliberately less assertive */
.gb-marg .gb-pill{
  color:var(--gb-warn);
  background:rgba(242,193,78,.10);
  border-color:rgba(242,193,78,.36);
}
/* do not grade — a REAL finding, so it is stated solidly */
.gb-dont .gb-pill{
  color:var(--gb-bad);
  background:rgba(255,107,107,.12);
  border-color:rgba(255,107,107,.42);
}
/* CANNOT ASSESS — no fill, DASHED border, muted ink. Visibly an absence of
   information rather than a judgement. */
.gb-unk .gb-pill{
  color:var(--gb-mute);
  background:transparent;
  border:1px dashed var(--gb-line);
  font-weight:500;
}
.gb-unk .gb-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  border:1px solid currentColor;font-size:9px;font-weight:700;
}
/* not applicable — quieter still */
.gb-na .gb-pill{
  color:var(--gb-mute);background:transparent;
  border:1px solid var(--gb-line);font-weight:500;opacity:.8;
}

.gb-chev{
  font-size:10px;color:var(--gb-dim);
  transition:transform .15s ease;flex:0 0 auto;
}
.gb.gb-open .gb-chev{transform:rotate(180deg)}

/* ---- body ---- */
.gb-body{display:none;margin-top:10px}
.gb.gb-open .gb-body{display:block}

.gb-say{
  margin:0 0 10px;font-size:12.5px;line-height:1.65;color:var(--gb-dim);
}
.gb-say.gb-warn{color:var(--gb-ink)}

.gb-grid{
  border:1px solid var(--gb-line);border-radius:var(--r-sm,8px);
  background:var(--gb-panel);margin:0 0 10px;overflow:hidden;
}
.gb-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 11px;font-size:12px;
  border-bottom:1px solid var(--line-soft,rgba(255,255,255,.05));
}
.gb-row:last-child{border-bottom:0}
.gb-row span{color:var(--gb-dim)}
.gb-row b{
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  font-weight:600;text-align:right;color:var(--gb-ink);
}
.gb-sub{
  display:block;font-style:normal;font-size:10.5px;
  color:var(--gb-mute);font-weight:400;margin-top:2px;
}
.gb-est{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gb-warn);
  border:1px solid currentColor;border-radius:4px;padding:0 3px;margin-left:5px;
}
.gb-ok{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gb-good);
  border:1px solid currentColor;border-radius:4px;padding:0 3px;margin-left:5px;
}
.gb-bad{color:var(--gb-bad);font-style:normal;font-weight:700}

/* ---- gem rate: the assumption, next to the number it has to beat ---- */
.gb-gem{
  border:1px solid var(--gb-line);border-left:3px solid var(--gb-warn);
  border-radius:var(--r-sm,8px);background:var(--gb-panel);
  padding:9px 11px;margin:0 0 10px;
}
.gb-gemrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:12px;padding:2px 0;
}
.gb-gemrow span{color:var(--gb-dim)}
.gb-gemrow b{
  font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
  color:var(--gb-ink);
}

/* ---- confidence: four dots, filled to the level ---- */
.gb-conf{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:var(--gb-dim);margin:0 0 8px;
}
.gb-conf b{color:var(--gb-ink);font-weight:600;text-transform:capitalize}
.gb-dots{display:inline-flex;gap:3px;flex:0 0 auto}
.gb-dots i{
  width:7px;height:7px;border-radius:50%;
  border:1px solid var(--gb-line);background:transparent;
}
.gb-c1 .gb-dots i:nth-child(-n+1),
.gb-c2 .gb-dots i:nth-child(-n+2),
.gb-c3 .gb-dots i:nth-child(-n+3),
.gb-c4 .gb-dots i:nth-child(-n+4){background:currentColor;border-color:currentColor}
.gb-c1{color:var(--gb-bad)}
.gb-c2{color:var(--gb-warn)}
.gb-c3{color:var(--gb-dim)}
.gb-c4{color:var(--gb-good)}
.gb-c0{color:var(--gb-mute)}

/* ---- caveats: never hidden behind a toggle inside the toggle ---- */
.gb-cav{
  margin:0 0 6px;font-size:11.5px;line-height:1.6;color:var(--gb-mute);
  padding-left:12px;position:relative;
}
.gb-cav::before{content:'·';position:absolute;left:3px;top:-1px;font-weight:700}
.gb-cav.gb-shadow{opacity:.85;font-style:italic}

/* ---- narrow screens: index.html already has a 375px overflow problem;
       nothing here may widen the page. ---- */
@media (max-width:640px){
  .gb-pill{white-space:normal}
  .gb-row,.gb-gemrow{flex-wrap:wrap;gap:2px}
  .gb-row b,.gb-gemrow b{text-align:left}
}

/* ---- light theme: the page flips its variables, but the tinted fills are
       literal rgba() and need their own light values. ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .gb-worth .gb-pill{background:rgba(10,125,79,.10);border-color:rgba(10,125,79,.35)}
  :root:not([data-theme="dark"]) .gb-marg  .gb-pill{background:rgba(150,105,10,.10);border-color:rgba(150,105,10,.32)}
  :root:not([data-theme="dark"]) .gb-dont  .gb-pill{background:rgba(207,53,53,.10);border-color:rgba(207,53,53,.35)}
}
:root[data-theme="light"] .gb-worth .gb-pill{background:rgba(10,125,79,.10);border-color:rgba(10,125,79,.35)}
:root[data-theme="light"] .gb-marg  .gb-pill{background:rgba(150,105,10,.10);border-color:rgba(150,105,10,.32)}
:root[data-theme="light"] .gb-dont  .gb-pill{background:rgba(207,53,53,.10);border-color:rgba(207,53,53,.35)}