/* ===== governance.css — proposals + holder snapshots =====
   Synthwave surfaces, but every colour pair here was checked against the token set rather than
   picked by eye. Notes on the two that matter are inline. */

.comm-props-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.prop-intro { color: var(--text-dim); font-size: max(var(--text-floor), 0.92rem); margin: 0.4rem 0 1rem; line-height: 1.55; }

/* ---------- compose ---------- */
.prop-form { display: grid; gap: 0.7rem; margin-bottom: 1.2rem; }
.prop-form input[type="text"], .prop-form textarea {
  width: 100%; background: var(--glass-well); color: var(--text);
  border: 1.5px solid var(--edge-ctl); border-radius: var(--r-2);
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: max(var(--text-floor), 1rem);
}
.prop-form textarea { resize: vertical; min-height: 96px; }
.prop-form-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- list ---------- */
.comm-props-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.prop-item {
  background: linear-gradient(180deg, var(--glass-sheen), transparent 46%), var(--glass-lo);
  border: 1px solid var(--hair); border-radius: var(--r-3); padding: 1.1rem 1.2rem;
}
.prop-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.prop-title { font-size: max(var(--text-floor), 1.08rem); margin: 0; line-height: 1.3; }
.prop-body { color: var(--text-dim); margin: 0.3rem 0 0.6rem; line-height: 1.6; white-space: pre-wrap; }
.prop-by { color: var(--text-mute); font-size: max(var(--text-floor), 0.8rem); margin: 0 0 0.8rem; }
.prop-empty { color: var(--text-dim); text-align: center; padding: 1.4rem 0; }

.prop-pill-draft    { background: var(--d-tint);  color: var(--diamond); }
.prop-pill-open     { background: var(--g-tint);  color: var(--green-bright); }
.prop-pill-passed   { background: var(--g-tint);  color: var(--green-bright); }
.prop-pill-expired  { background: var(--o-tint);  color: var(--gold); }
/* --red on its own 14% tint measured 4.51:1 — passing by 0.01, which any lightening of the card
   surface would break. Lighter text on a weaker tint gives real headroom instead. */
.prop-pill-rejected { background: rgba(255,93,93,0.10); color: #ff7b7b; }

/* ---------- quorum ---------- */
.prop-quorum { margin: 0.6rem 0 0.9rem; }
.prop-quorum .gxp { margin: 0.4rem 0 0.2rem; }   /* .gxp ships with 1rem margins that dead-space every row */
.prop-quorum-t { font-size: max(var(--text-floor), 0.85rem); color: var(--text-dim); margin: 0.2rem 0 0; }
.prop-sealed { font-size: max(var(--text-floor), 0.78rem); color: var(--text-mute); margin: 0.25rem 0 0; font-style: italic; }

/* ---------- ballot ---------- */
.prop-vote { display: grid; gap: 0.6rem; margin: 0.7rem 0; }
.prop-ballot { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Selection state must not be carried by colour alone (WCAG 1.4.1) — aria-checked covers assistive
   tech, this ring covers sighted colour-blind users. */
/* .prop-choice rides on .sort-btn, and styles.css now turns every .sort-btn::before into the matrix grid layer
   (absolute, inset 0, behind the label). The ○/◉ marker lives on this same ::before, so it is put back into the
   flow here — the marker is the 1.4.1 cue and outranks the grid. The pointer light (::after) still rides. */
.prop-choice::before { content: "○ "; position: static; background-image: none; animation: none; opacity: 0.7; }
.prop-choice:hover::before, .prop-choice:focus-visible::before { opacity: 0.7; animation: none; }
.prop-choice[aria-checked="true"]::before,
.prop-choice[aria-checked="true"]:hover::before, .prop-choice[aria-checked="true"]:focus-visible::before { content: "◉ "; opacity: 1; }
@media (forced-colors: active) { .prop-choice::before { display: inline; } }   /* styles.css hides the grid layers there; the marker is not one */
.prop-cast { justify-self: start; }
/* A green ring on a green button is 1:1. Dark ring, bright halo — readable on any accent. */
.prop-cast:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; box-shadow: 0 0 0 6px var(--green-bright); }
.prop-gate { font-size: max(var(--text-floor), 0.86rem); color: var(--text-dim); margin: 0; }
.prop-mine { font-size: max(var(--text-floor), 0.85rem); color: var(--text-dim); margin: 0.2rem 0 0; }
.prop-note { font-size: max(var(--text-floor), 0.78rem); color: var(--text-mute); margin: 0.3rem 0 0; }
.prop-draft-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.7rem; }

/* ---------- result bars ---------- */
.prop-result { margin: 0.9rem 0 0.2rem; }
.prop-result-h { display: flex; justify-content: space-between; font-size: max(var(--text-floor), 0.85rem); color: var(--text-dim); }
.prop-bar-wrap { position: relative; margin: 1.5rem 0 0.5rem; }  /* top margin makes room for the % label */
.prop-bar {
  position: relative; height: 26px; border-radius: var(--r-pill); overflow: hidden;
  border: 1.5px solid var(--ink-4);
  /* The exposed track IS the "against" share. It carries a stripe so the yes/no split is legible
     without relying on hue — red-against-green is the worst possible pairing for the most common
     forms of colour blindness, and this is the primary quantity in the feature. */
  background:
    repeating-linear-gradient(135deg, rgba(255,93,93,0.30) 0 6px, rgba(255,93,93,0.16) 6px 12px),
    linear-gradient(90deg, #8f2f2f, var(--red));
}
.prop-seg-yes {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  transform-origin: left center;                 /* scaleX, not width: compositor-only, no layout */
  background: linear-gradient(90deg, var(--green-dark), var(--green-bright));
  border-right: 3px solid var(--ink-1);          /* 16.3:1 on green, 6.6:1 on red — the boundary passes 1.4.11 */
  box-shadow: 0 0 14px var(--glow-g);
  transition: transform var(--dur-4) var(--ease-xp);
}
/* The threshold marker is a SIBLING of the clipping bar, not a child — inside it, overflow:hidden
   would clip both the overhang and the label entirely. Dark core, gold halo: gold alone on a bright
   green fill measures 1.47:1. */
.prop-threshold {
  position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px;
  background: var(--ink-1); border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 8px rgba(255,179,64,0.55);
  pointer-events: none;
}
.prop-threshold b {
  position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%);
  font-size: max(var(--text-floor), 0.72rem); font-weight: 800; color: var(--gold); white-space: nowrap;
}
.prop-counts { font-size: max(var(--text-floor), 0.84rem); color: var(--text-dim); margin: 0.35rem 0 0; }
.prop-c-yes { color: var(--green-bright); } .prop-c-no { color: #ff7b7b; } .prop-c-abs { color: var(--text-dim); }
.prop-why { font-size: max(var(--text-floor), 0.86rem); color: var(--text-dim); margin: 0.5rem 0 0; }

/* ---------- snapshots ---------- */
.snap-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 0.8rem; }
.snap-tab {
  flex: 0 0 auto; background: var(--ctl-fill-lo); color: var(--ctl-ink);
  border: 1.5px solid var(--ctl-fill-lo); border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem; font-size: max(var(--text-floor), 0.82rem); cursor: pointer; white-space: nowrap;
}
.snap-tab:hover { background: var(--ctl-fill-hi); }
.snap-tab.is-on { color: var(--on-green); border-color: var(--green); background: linear-gradient(180deg, var(--green-bright), var(--green)); }
/* a green ring on a green tab is 1:1 — same dark-ring / bright-halo pattern as .prop-cast */
.snap-tab.is-on:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 2px; box-shadow: 0 0 0 6px var(--green-bright); }
.snap-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: max(var(--text-floor), 0.85rem); color: var(--text-dim); margin-bottom: 0.7rem; }
.snap-warn { background: var(--o-tint); border-left: 3px solid var(--gold); border-radius: 0 var(--r-1) var(--r-1) 0;
             padding: 0.7rem 0.9rem; margin: 0 0 0.8rem; font-size: max(var(--text-floor), 0.88rem); color: var(--text); }
.snap-none, .snap-running { color: var(--text-dim); text-align: center; padding: 1.2rem 0; }
.snap-tablewrap { overflow-x: auto; max-height: 560px; overflow-y: auto; border: 1px solid var(--hair); border-radius: var(--r-2); }
.snap-table { width: 100%; border-collapse: collapse; font-size: max(var(--text-floor), 0.88rem); min-width: 460px; }
.snap-table thead th {
  position: sticky; top: 0; z-index: 1;            /* the header survives scrolling a long list */
  background: var(--ink-2); color: var(--text-mute);
  text-align: left; font-weight: 600; font-size: max(var(--text-floor), 0.76rem); letter-spacing: var(--tr-caps); text-transform: uppercase;
  padding: 0.6rem 0.7rem; border-bottom: 1.5px solid var(--edge-ctl);
}
.snap-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--g-wash); }   /* row rule is a green wash — --rule-soft was never defined, so the white fallback was live */
.snap-rank { color: var(--text-mute); font-variant-numeric: tabular-nums; width: 3.2rem; }
.snap-addr code { font-size: max(var(--text-floor), 0.82rem); color: var(--text-dim); }
.snap-bal, .snap-pct { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.snap-pct { color: var(--green-bright); }
/* .copy-btn already paints the green matrix tile (styles.css) — this only makes it compact enough for a table cell.
   No opacity wash and no transparent fill: those left the tile's grid drawn over nothing. 24px is the 2.5.8 mouse floor. */
.snap-copy { padding: 0 0.25rem; min-width: 24px; min-height: 24px; margin-left: 0.25rem; }
/* styles.css lifts every .copy-btn to 44px at this width; the 24px floor above would out-cascade it, so restate it */
@media (max-width: 600px) { .snap-copy { min-width: 44px; min-height: 44px; } }
.snap-more-wrap { text-align: center; margin-top: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .prop-seg-yes { transition: none; }
}

/* ===== matrix tile: the snapshot tabs =====================================================
   The same two layers styles.css gives every .btn (see "The matrix grid" at its end) — .snap-tab is
   not in that list, so it takes them here. ::before is the dark cell grid that drifts on hover,
   ::after the pointer-lit cells around --mx/--my (app.js sets them; unset, the centre lights).
   Same numbers as the base block, the keyframe has its own name so the two never collide. */
.snap-tab { position: relative; isolation: isolate; }
.snap-tab::before, .snap-tab::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.snap-tab::before {
  background-image:
    linear-gradient(var(--mx-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mx-line) 1px, transparent 1px);
  background-size: var(--mx-size) var(--mx-size);
  opacity: 0.42;
  transition: opacity var(--dur-2, 0.16s) ease;
}
.snap-tab::after {
  background-image:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--mx-glow) 0, transparent 46px),
    radial-gradient(circle, var(--mx-cell) 0 1.7px, transparent 2px);
  background-size: 100% 100%, var(--mx-size) var(--mx-size);
  background-position: 0 0, calc(var(--mx-size) / 2) calc(var(--mx-size) / 2);
  -webkit-mask-image: radial-gradient(circle 48px at var(--mx, 50%) var(--my, 50%), var(--ink-1) 0, transparent 100%);
          mask-image: radial-gradient(circle 48px at var(--mx, 50%) var(--my, 50%), var(--ink-1) 0, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-2, 0.16s) ease;
}
.snap-tab:hover::before, .snap-tab:focus-visible::before { opacity: 0.85; animation: gov-mx-rain 1.1s linear infinite; }
.snap-tab:hover::after, .snap-tab:focus-visible::after { opacity: 1; }
.snap-tab:active::after { -webkit-mask-image: none; mask-image: none; opacity: 0.9; }   /* the press: every cell at once */
@keyframes gov-mx-rain { from { background-position: 0 0, 0 0; } to { background-position: 0 var(--mx-size), 0 0; } }
@media (prefers-reduced-motion: reduce) { .snap-tab::before { animation: none !important; } }
html.motion-off .snap-tab::before { animation: none !important; }
@media (forced-colors: active) { .snap-tab::before, .snap-tab::after { display: none; } }