/* Trust Label — nutrition-label aesthetic. Clinical, legible, unglamorous.
   Trusted BECAUSE it doesn't try to seduce you.

   THE ONE RULE: ❌ rows have the same visual weight as ✅ rows. If the scary
   rows are smaller or greyer than the reassuring ones, the product is broken. */

:root {
  color-scheme: light dark;
  --ink: #16181d;
  --dim: #5b6070;
  --line: #d9dce3;
  --bg: #ffffff;
  --card: #fbfbfc;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e9ebf0; --dim: #9aa0b0; --line: #2b2f38; --bg: #0d0f13; --card: #14171d; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#app { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

h1 { font-size: 1.15rem; letter-spacing: .12em; margin: 0 0 .25rem; }
.sub { color: var(--dim); margin: 0 0 2rem; }
.loading { color: var(--dim); }

/* Every row: identical frame, identical padding, identical type size.
   Status is signalled by glyph + word + a thin left rule — NOT by size. */
.row {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--card);
  padding: .85rem 1rem;
  margin: 0 0 .6rem;
}
.row-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.glyph { font-size: 1rem; }               /* same for ✅ and ❌ — parity */
.word {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.claim { font-size: 1rem; }               /* same for ✅ and ❌ — parity */

/* Only the thin left rule is tinted. The claim text never dims for bad news. */
.row.ok      { border-left-color: #1a7f37; }
.row.limited { border-left-color: #9a6700; }
.row.cannot  { border-left-color: #b42318; }
.row.gap     { border-left-color: #b42318; }
.row.unknown { border-left-color: var(--dim); border-style: dashed; }

.basis-toggle {
  margin-top: .5rem;
  font: inherit;
  font-size: .82rem;
  color: var(--dim);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--dim);
  padding: 0;
  cursor: pointer;
}
.basis {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--dim);
  border-left: 2px solid var(--line);
  padding-left: .75rem;
}
#foot { color: var(--dim); font-size: .82rem; margin-top: 1.5rem; }
#foot.stale { color: #9a6700; }

/* ── the glance strip + its filter chips ─────────────────────────────────
   Shared with the app (app.html loads this file too). Each chip is a count;
   when the strip is interactive, clicking a chip filters the rows to that type.
   PARITY HOLDS UNDER FILTERING: the default is every row, and "show all" is
   always one click away — a filter is a lens the reader chooses, never a story
   we pre-select for them. */
.label-summary { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.sum-chip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .82rem; white-space: nowrap;
  background: none; color: inherit;
}
.sum-chip .sum-n { font-weight: 700; }
.sum-chip .sum-w { color: var(--dim); }
/* A chip that filters is a button — cursor + hover say so; .active marks the
   current lens. No size or colour change large enough to privilege one status
   over another (parity). */
button.sum-chip { cursor: pointer; transition: border-color .12s, background .12s; }
button.sum-chip:hover { border-color: var(--ink); }
button.sum-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sum-chip.active { border-color: var(--ink); background: var(--card); }
.sum-chip.active .sum-w { color: var(--ink); }
/* The escape hatch from any filter — "the whole honest set is always one click
   away", made literal. Quiet, but always present while a filter is on. */
.sum-clear {
  font: inherit; font-size: .8rem; cursor: pointer;
  background: none; border: 0; color: var(--dim);
  padding: .3rem .4rem; text-decoration: underline;
}
.sum-clear:hover { color: var(--ink); }