/* ==========================================================================
   components.css — buttons, chips, badges, cards, tabs, disclosures,
   source citations, meters, toasts, dialogs
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--sh-1);
  transition: transform var(--d-1) var(--e-out), box-shadow var(--d-2) var(--e-out),
              background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--ink-3); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.988); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--ink-inv); --btn-bd: var(--ink); }
.btn--primary:hover:not(:disabled) { --btn-bg: color-mix(in srgb, var(--ink) 88%, var(--g3)); border-color: var(--ink); }
.btn--accent  { --btn-bg: var(--g3); --btn-fg: #fff; --btn-bd: var(--g3); }
:root[data-theme="dark"] .btn--accent { --btn-fg: #12131a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--accent { --btn-fg: #12131a; } }
.btn--ghost   { --btn-bg: transparent; --btn-bd: var(--rule); box-shadow: none; }
.btn--ghost:hover:not(:disabled) { --btn-bg: var(--card); }
.btn--lg { min-height: 52px; padding: 0.8rem 1.6rem; font-size: var(--t-base); border-radius: var(--r-3); }
.btn--sm { min-height: 34px; padding: 0.28rem 0.7rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }

.btn__glyph { font-size: 1.05em; line-height: 1; }

/* ---------- Segmented control (view switches) ---------- */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  flex-wrap: wrap;
}
.seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  min-height: 38px;
  padding: 0.3rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 620;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out);
}
.seg__btn:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 70%, transparent); }
.seg__btn[aria-checked="true"], .seg__btn[aria-selected="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--sh-1);
}
/* Selection is also marked by a glyph, so colour is never the only signal. */
.seg__btn[aria-checked="true"]::before,
.seg__btn[aria-selected="true"]::before { content: "\2713\00a0"; font-weight: 700; }

/* ---------- Chips / toggles ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 38px;
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-2) var(--e-out);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--gen-soft, var(--g3-soft));
  border-color: var(--gen, var(--g3));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--gen, var(--g3));
}
.chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; color: var(--gen, var(--g3)); }
.chip[aria-pressed="false"]::before { content: "\002b"; font-weight: 700; color: var(--ink-3); }

/* ---------- Generation tag ---------- */
.gtag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.14rem 0.6rem 0.2rem;
  border-radius: var(--r-pill);
  background: var(--gen-soft);
  color: var(--gen);
  border: 1px solid color-mix(in srgb, var(--gen) 42%, transparent);
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gtag__glyph { font-size: 0.9em; }

/* ---------- Confidence badges ----------
   Shape + glyph + text label carry the meaning; colour only reinforces it. */
.conf {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.44rem;
  border-radius: var(--r-1);
  border: 1px solid;
  white-space: nowrap;
  vertical-align: 0.06em;
}
.conf--official  { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); }
.conf--archived  { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-soft); }
.conf--community { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); border-style: dashed; }
.conf--contested { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 48%, transparent);  background: var(--bad-soft); }
.conf--unverified{ color: var(--ink-3); border-color: var(--rule-strong); background: var(--sunk); border-style: dotted; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}
.card--sunk { background: var(--card-2); box-shadow: none; }
.card--gen {
  border-top: 3px solid var(--gen);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--gen-soft) 70%, transparent), transparent 120px),
    var(--card);
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  box-shadow: var(--sh-2);
  overflow: clip;
}
.panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--card-2);
  border-bottom: 1px solid var(--rule);
}
.panel__body { padding: var(--s-5); }
@media (max-width: 560px) { .panel__body, .panel__bar { padding: var(--s-4) var(--s-3); } }

/* ---------- Callouts ---------- */
.callout {
  --co: var(--info);
  --co-soft: var(--info-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid color-mix(in srgb, var(--co) 40%, transparent);
  border-left: 4px solid var(--co);
  background: var(--co-soft);
  font-size: var(--t-sm);
}
.callout > :last-child { margin-bottom: 0; }
.callout--warn { --co: var(--warn); --co-soft: var(--warn-soft); }
.callout--bad  { --co: var(--bad);  --co-soft: var(--bad-soft); }
.callout--good { --co: var(--good); --co-soft: var(--good-soft); }
.callout__glyph { font-size: 1.2em; line-height: 1.35; }
.callout__title { font-weight: 750; display: block; margin-bottom: 0.15em; }

/* ---------- Inline definition (jargon on first use) ---------- */
.def {
  border-bottom: 2px dotted var(--g3-edge);
  cursor: help;
  font-weight: 600;
  color: inherit;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  padding: 0;
  font: inherit;
  text-align: left;
}
.def:hover { background: var(--g3-soft); }
.def::after { content: "\00a0\24d8"; font-size: 0.82em; color: var(--g3); vertical-align: 0.12em; }

.pop {
  position: absolute;
  z-index: 60;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.5;
  font-family: var(--font-ui);
}
.pop[hidden] { display: none; }
.pop__term { font-weight: 750; display: block; margin-bottom: 0.2em; }
.pop__close {
  position: absolute; top: 4px; right: 4px;
  width: 30px; height: 30px;
  border: 0; background: transparent; color: var(--ink-3);
  border-radius: var(--r-1); cursor: pointer; font-size: 1rem; line-height: 1;
}
.pop__close:hover { background: var(--sunk); color: var(--ink); }

/* ---------- Source citation marker ---------- */
.cite {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-left: 0.3em;
  padding: 0 0.34em;
  min-width: 1.6em;
  height: 1.45em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  background: var(--card-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.18em;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
}
.cite:hover { background: var(--g3-soft); border-color: var(--g3); color: var(--g3); }

/* ---------- Disclosure ---------- */
details.disc {
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--card);
  overflow: clip;
}
details.disc + details.disc { margin-top: var(--s-2); }
details.disc > summary {
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-weight: 650;
  font-size: var(--t-sm);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  background: var(--card-2);
  transition: background-color var(--d-1) var(--e-out);
}
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before {
  content: "\25b8";
  color: var(--ink-3);
  transition: transform var(--d-2) var(--e-out);
  display: inline-block;
}
details.disc[open] > summary::before { transform: rotate(90deg); }
details.disc > summary:hover { background: var(--sunk); }
details.disc > .disc__body { padding: var(--s-4); border-top: 1px solid var(--rule); }
details.disc > .disc__body > :last-child { margin-bottom: 0; }

/* ---------- Meter / progress ---------- */
.meter {
  --pct: 0%;
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  background: linear-gradient(90deg, var(--gen, var(--g3)), var(--gen-edge, var(--g3-edge)));
  border-radius: var(--r-pill);
  transition: width var(--d-4) var(--e-out);
}
/* Stripes give the fill a non-colour texture as well. */
.meter__fill::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,0.20) 0 6px, transparent 6px 13px);
  opacity: 0.75;
}
.meter--tall { height: 20px; }

/* ---------- Toast ---------- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  pointer-events: none;
  width: min(100% - 2rem, 30rem);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--ink-inv);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm);
  font-weight: 620;
  animation: toast-in var(--d-3) var(--e-pop) both;
}
.toast--out { animation: toast-out var(--d-2) var(--e-inout) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px)  scale(0.98); } }

/* ---------- Dialog ---------- */
dialog.sheet {
  width: min(100% - 2rem, 44rem);
  max-height: min(86vh, 52rem);
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-4);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--sh-3);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.sheet::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
dialog.sheet[open] { animation: sheet-in var(--d-3) var(--e-out) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
.sheet__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--card-2);
  border-bottom: 1px solid var(--rule);
}
.sheet__body { padding: var(--s-5); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out);
}

/* ---------- Loading / empty states ---------- */
.skel {
  background: linear-gradient(90deg, var(--sunk) 25%, var(--card-2) 37%, var(--sunk) 63%);
  background-size: 400% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--r-1);
  color: transparent;
}
@keyframes skel { to { background-position: -135% 0; } }

.empty {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-3);
  background: var(--card-2);
}
.empty__glyph { font-size: 2rem; opacity: 0.7; }

/* Claim disclosure: the claim and its verdict stack on a phone rather than
   forcing a nowrap badge wider than the screen. */
.claimsum { display: grid; gap: var(--s-2); min-width: 0; }
@media (min-width: 620px) {
  .claimsum { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3); }
}
.claimsum__q { font-weight: 680; overflow-wrap: break-word; }
.claimsum__v { white-space: normal; justify-self: start; line-height: 1.35; padding: 0.15rem 0.45rem; }