/* ---------------------------------------------------------------------------
   site.css — components for the prodggect-20xx voter guide
   ---------------------------------------------------------------------------
   BEM naming, flat, following the convention read off destiny.gg's stylesheet.
   Depends on tokens.css.
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; }
p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrapper { width: var(--wrapper); margin-inline: auto; }
.wrapper--narrow { width: var(--wrapper-narrow); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Navbar --------------------------------------------------------------- */

.navbar { display: flex; align-items: center; gap: 2rem; padding: 1.5rem 0; }

.navbar__brand {
  font: 700 var(--text-base)/var(--leading-base) var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.navbar__brand:hover { text-decoration: none; }
.navbar__brand span { color: var(--accent-text); }

.navbar__items { display: flex; gap: .5rem; margin-left: auto; }

.navbar__item {
  display: flex; align-items: center; height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font: 500 var(--text-sm)/var(--leading-sm) var(--font-body);
  transition: all var(--transition);
}
.navbar__item:hover { background-color: var(--bg-raised); color: var(--text-primary); text-decoration: none; }
.navbar__item--active { color: var(--text-primary); background-color: var(--bg-raised); }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex; justify-content: center; align-items: center;
  flex-shrink: 0; height: 2.5rem; padding: 0 1rem; gap: .5rem;
  white-space: nowrap; background: none; border: none;
  border-radius: var(--radius-md);
  font: 600 var(--text-sm)/var(--leading-sm) var(--font-body);
  cursor: pointer; user-select: none;
  transition: all var(--transition);
}
.button:hover { text-decoration: none; }

.button--primary { background-color: var(--accent-solid); color: #fff; }
.button--primary:not(:disabled):hover  { background-color: var(--accent-solid-hover); }
.button--primary:not(:disabled):active { background-color: var(--accent-solid-active); }

/* border via box-shadow so the box model never shifts on hover — dgg's trick */
.button--secondary {
  background-color: var(--bg-surface); color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-interactive);
}
.button--secondary:not(:disabled):hover  { background-color: var(--bg-raised); box-shadow: 0 0 0 1px var(--border-hover); }
.button--secondary:not(:disabled):active { background-color: var(--slate-1); }

.button--tertiary { color: var(--text-primary); }
.button--tertiary:not(:disabled):hover { background-color: var(--bg-raised); }

.button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Badges --------------------------------------------------------------- */
/* dgg's recipe, generalized: bg = step 3, text = step 11, border = step 6 */

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.5rem; padding: 0 .75rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font: 600 var(--text-xs)/var(--leading-xs) var(--font-body);
  white-space: nowrap;
}
.badge--neutral { background-color: var(--slate-3); color: var(--slate-11); border-color: var(--slate-6); }
.badge--primary { background-color: var(--blue-3);  color: var(--blue-11);  border-color: var(--blue-6); }
.badge--success { background-color: var(--jade-3);  color: var(--jade-11);  border-color: var(--jade-6); }
.badge--danger  { background-color: var(--red-3);   color: var(--red-11);   border-color: var(--red-6); }
.badge--warning { background-color: var(--amber-3); color: var(--amber-11); border-color: var(--amber-6); }

/* --- Stance chip ---------------------------------------------------------- */
/* The guide's core vocabulary. Same 3/11/6 recipe, one hue per stance family. */

.stance {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2rem; padding: 0 .875rem;
  border-radius: var(--radius-pill); border: 1px solid;
  font: 700 var(--text-sm)/var(--leading-sm) var(--font-body);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.stance::before {
  content: ""; width: .5rem; height: .5rem;
  border-radius: 50%; background-color: currentColor;
}
.stance--yes,  .stance--lean-yes { background-color: var(--jade-3);  color: var(--jade-11);  border-color: var(--jade-6); }
.stance--no,   .stance--lean-no  { background-color: var(--red-3);   color: var(--red-11);   border-color: var(--red-6); }
.stance--watch                   { background-color: var(--amber-3); color: var(--amber-11); border-color: var(--amber-6); }
.stance--none                    { background-color: var(--slate-3); color: var(--slate-11); border-color: var(--slate-6); }

/* "lean" reads softer than a firm call: hollow dot instead of filled */
.stance--lean-yes::before,
.stance--lean-no::before { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; }

.stance--lg { height: 2.5rem; padding: 0 1.125rem; font-size: var(--text-base); }

/* --- Cards ---------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-body);
}
/* dgg highlights with a soft glow rather than a hard border */
.card--prominent {
  border-color: var(--blue-7);
  background-color: var(--blue-2);
  box-shadow: 0 0 64px 0 rgba(0, 119, 255, .23);
}
.card--warning { border-color: var(--amber-6); background-color: var(--amber-2); }

.card__title {
  font: 600 var(--text-base)/var(--leading-base) var(--font-body);
  color: var(--text-primary);
}
.card__meta { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* --- Section headings ----------------------------------------------------- */

.section { margin-block: 2.5rem; }

.section__title {
  font: 600 var(--text-lg)/var(--leading-lg) var(--font-heading);
  margin-block-end: .25rem;
}
.section__hint {
  color: var(--text-muted);
  font-size: var(--text-xs); line-height: var(--leading-xs);
  margin-block-end: 1rem;
}

/* --- Tables --------------------------------------------------------------- */

.table-wrapper { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }

table { width: 100%; border-spacing: 0; border-collapse: collapse; }

thead tr, tbody tr:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }

th, td { padding: .75rem 1rem; box-sizing: border-box; text-align: left; vertical-align: top; }
td .meter { margin-block-start: .375rem; }

/* lifted verbatim from dgg — worth stealing for a table-heavy guide */
th {
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

td { font: 400 var(--text-sm)/var(--leading-sm) var(--font-body); color: var(--text-secondary); }
td.is-numeric { font-family: var(--font-mono); font-weight: 500; text-align: right; white-space: nowrap; }
td.is-axis { color: var(--text-primary); font-weight: 500; }

/* --- Axis score cells ----------------------------------------------------- */

.score { font-family: var(--font-mono); font-weight: 600; }
.score--pos { color: var(--jade-11); }
.score--neg { color: var(--red-11); }
.score--zero { color: var(--text-muted); }

/* --- Diverging meter ------------------------------------------------------ */
/* Set --pct (0-50%) and add .is-pos / .is-neg. Zero sits dead center. */

.meter {
  position: relative;
  height: .5rem;
  min-width: 6rem;
  background-color: var(--slate-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meter::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background-color: var(--slate-7); z-index: 1;
}
.meter__fill { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.meter__fill.is-pos { left: 50%;  width: var(--pct); background-color: var(--jade-9); }
.meter__fill.is-neg { right: 50%; width: var(--pct); background-color: var(--red-9); }

.meter--lg { height: .75rem; }

/* --- Total readout -------------------------------------------------------- */

.total { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.total__value {
  font: 600 var(--text-xl)/var(--leading-xl) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.total__value.is-pos { color: var(--jade-11); }
.total__value.is-neg { color: var(--red-11); }
.total__meter { flex: 1; min-width: 12rem; }
.total__scale {
  display: flex; justify-content: space-between;
  margin-block-start: .375rem;
  color: var(--text-muted);
  font: 500 var(--text-xs) var(--font-mono);
}

/* --- Confidence pips ------------------------------------------------------ */

.conf { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.conf__pips { display: inline-flex; gap: 2px; }
.conf__pip { width: .3125rem; height: .75rem; border-radius: 1px; background-color: var(--slate-6); }
.conf__pip.is-on { background-color: var(--slate-10); }
.conf--high .conf__pip.is-on { background-color: var(--jade-9); }
.conf--low  .conf__pip.is-on { background-color: var(--amber-9); }
.conf__label { color: var(--text-muted); font: 500 var(--text-xs) var(--font-mono); }

/* --- Draft banner --------------------------------------------------------- */
/* The "nothing unapproved is a position" contract, rendered. */

.draft-banner {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid var(--amber-6);
  border-radius: var(--radius-lg);
  background-color: var(--amber-2);
  margin-block-end: 2rem;
}
.draft-banner__icon { color: var(--amber-11); font-size: var(--text-base); line-height: 1.25; }
.draft-banner__body { display: flex; flex-direction: column; gap: .375rem; }
.draft-banner__title {
  font: 700 var(--text-sm)/var(--leading-sm) var(--font-body);
  color: var(--amber-11);
  text-transform: uppercase; letter-spacing: .04em;
}
.draft-banner__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.draft-banner__text code {
  font-family: var(--font-mono); font-size: .8em;
  padding: .1em .35em; border-radius: 3px;
  background-color: var(--slate-3); color: var(--text-primary);
}

/* --- Measure header ------------------------------------------------------- */

.measure-header { display: flex; flex-direction: column; gap: 1rem; margin-block-end: 2rem; }
.measure-header__eyebrow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.measure-header__id { font: 500 var(--text-xs) var(--font-mono); color: var(--text-muted); }
.measure-header__title {
  font: 600 var(--text-xl)/var(--leading-xl) var(--font-heading);
  font-size: clamp(var(--text-lg), 1.19vw + 1.03rem, var(--text-xl));
}
.measure-header__sos { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-base); }
.measure-header__stance { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Definition rows ------------------------------------------------------ */

.deflist { display: grid; grid-template-columns: 10rem 1fr; gap: .75rem 1.5rem; }
.deflist__key {
  color: var(--text-muted);
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  padding-block-start: .1rem;
}
.deflist__val { color: var(--text-secondary); }

/* --- Chip list (backers / opponents) -------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background-color: var(--bg-raised);
  color: var(--text-secondary);
  font: 500 var(--text-xs)/var(--leading-xs) var(--font-body);
}

/* --- Prose ---------------------------------------------------------------- */

.prose { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.65; }
.prose p + p { margin-block-start: 1rem; }
.prose strong { color: var(--text-primary); font-weight: 600; }

/* --- Source list ---------------------------------------------------------- */

.sources { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sources li {
  display: flex; gap: .75rem;
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.sources li::before { content: "→"; color: var(--text-muted); flex-shrink: 0; }

/* --- Checklist ------------------------------------------------------------ */

.checklist { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.checklist li {
  display: flex; gap: .75rem; align-items: flex-start;
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.checklist__box {
  flex-shrink: 0; width: 1rem; height: 1rem; margin-block-start: .125rem;
  border: 1px solid var(--border-hover); border-radius: 3px;
}
.checklist li.is-blocking .checklist__box { border-color: var(--red-6); background-color: var(--red-3); }

/* --- Measure list (index) ------------------------------------------------- */

.measure-list { display: flex; flex-direction: column; gap: .75rem; }

.measure-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: center; gap: 1.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  transition: all var(--transition);
}
.measure-row, .measure-row:hover { text-decoration: none; }
.measure-row:hover { border-color: var(--border-hover); background-color: var(--bg-raised); }
.measure-row__id { display: block; font: 500 var(--text-xs) var(--font-mono); color: var(--text-muted); }
.measure-row__title { display: block; font: 600 var(--text-sm)/var(--leading-sm) var(--font-body); color: var(--text-primary); }
.measure-row__sos {
  color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs);
  margin-block-start: .25rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  margin-block-start: 4rem;
  padding-block: 2rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs); line-height: var(--leading-xs);
}
.footer p + p { margin-block-start: .5rem; }

/* --- Bleed ----------------------------------------------------------------
   Lets a wide block (the axis table) escape .wrapper--narrow and use the full
   content width. Prose stays at a readable measure; data gets room to breathe.
-------------------------------------------------------------------------- */

.bleed {
  position: relative; left: 50%;
  width: min(72rem, 100vw - 4rem);
  transform: translateX(-50%);
}

/* --- Axis table column sizing --------------------------------------------- */

.axis-table col.col-axis     { width: 12rem; }
.axis-table col.col-weight   { width: 5rem; }
.axis-table col.col-score    { width: 4.5rem; }
.axis-table col.col-meter    { width: 8rem; }
.axis-table col.col-weighted { width: 6rem; }
.axis-table col.col-why      { width: auto; }
.axis-table col.col-conf     { width: 7rem; }

.axis-table td.is-axis { font-size: var(--text-sm); }

/* --- Page rhythm ---------------------------------------------------------- */

.page { padding-block-end: clamp(2rem, 6.25vw - .5rem, 4rem); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 48rem) {
  :root { --wrapper: min(72rem, 100% - 2rem); --wrapper-narrow: min(52rem, 100% - 2rem); }
  .navbar { gap: 1rem; flex-wrap: wrap; }
  .navbar__items { margin-left: 0; width: 100%; overflow-x: auto; }
  .deflist { grid-template-columns: 1fr; gap: .25rem 0; }
  .deflist__val { margin-block-end: .75rem; }
  .measure-row { grid-template-columns: 1fr; gap: .75rem; }
}