/* ==========================================================================
   Pressure layer
   --------------------------------------------------------------------------
   Styles for the parts of the product that carry real state: support
   thresholds, outward actions and the response tracker.
   Everything is expressed with the tokens from common.css so dark mode is
   inherited rather than reimplemented.
   ========================================================================== */

/* ------------------------------------------------------- homepage summary */

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

.home-stats span {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.home-stats strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ------------------------------------------------------- response tracker */

.pressure-ledger-section {
  margin-bottom: 2rem;
}

.pressure-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pressure-ledger-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pressure-ledger-item.is-overdue {
  border-left-color: var(--danger);
}

.pressure-ledger-item.is-waiting {
  border-left-color: var(--accent);
}

.pressure-ledger-item.is-answered {
  border-left-color: var(--success);
}

.ledger-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: min(100%, 22rem);
  flex: 1;
}

.ledger-main a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.35;
}

.ledger-main a:hover {
  color: var(--secondary);
}

.ledger-institution,
.ledger-registration {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.ledger-institution i {
  margin-right: 0.35rem;
  color: var(--text-muted);
}

.ledger-response {
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: var(--radius-md);
}

.ledger-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.ledger-badge {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

.is-overdue .ledger-badge {
  color: #fff;
  background: var(--danger);
}

.is-waiting .ledger-badge {
  color: #78350f;
  background: #fef3c7;
}

.is-answered .ledger-badge {
  color: #fff;
  background: var(--success);
}

.ledger-doc {
  font-size: 0.8125rem;
  color: var(--secondary);
  text-decoration: none;
  white-space: nowrap;
}

.ledger-doc:hover {
  text-decoration: underline;
}

/* Shown when nothing has been transmitted yet: explains the mechanism instead
   of filling the space with invented activity. */
.empty-pressure-state {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
}

.empty-pressure-state p {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.empty-pressure-state p:last-of-type {
  margin-bottom: 0;
}

.empty-pressure-state strong {
  color: var(--text-primary);
}

.empty-pressure-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
}

.empty-pressure-cta:hover {
  gap: 0.6rem;
}

/* ------------------------------------------------------- threshold sidebar */

.threshold-box .threshold-state {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.threshold-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.threshold-count {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.threshold-bar {
  height: 8px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: var(--bg-hover);
  border-radius: 999px;
}

/* The fill keeps a minimum width so a single-digit percentage still reads as a
   started bar rather than an empty track. */
.threshold-bar span {
  display: block;
  height: 100%;
  min-width: 12px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width var(--transition-normal);
}

.threshold-bar span.is-empty {
  min-width: 0;
}

.threshold-detail {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.threshold-transmission {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  padding: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.threshold-transmission > i {
  flex-shrink: 0;
  width: 1rem;
  margin-top: 0.15rem;
  color: #3b82f6;
  text-align: center;
}

.threshold-transmission span {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.threshold-transmission strong {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.threshold-transmission small {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.threshold-transmission.is-ready {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.threshold-transmission.is-ready > i {
  color: #d97706;
}

.threshold-transmission.is-sent {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.28);
}

.threshold-transmission.is-sent > i {
  color: #059669;
}

html.dark .threshold-transmission.is-sent {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.35);
}

/* ---------------------------------------------------- support toggle button */

.threshold-box .support-btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.threshold-box .support-btn i {
  font-size: 0.8125rem;
}

.threshold-box .support-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -6px rgba(59, 130, 246, 0.5);
}

.threshold-box .support-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.threshold-box .support-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Already supporting: a settled, confirmed state. Hovering shifts it to the
   withdrawal colour so the destructive half of the toggle is never a surprise. */
/* The withdrawal label is long enough to wrap in a 280px rail, so this state
   aligns left around the tick instead of centring a ragged two-line block. */
.threshold-box .support-btn.supported {
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.8125rem;
  text-align: left;
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: none;
}

.threshold-box .support-btn.supported:hover {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  transform: none;
  box-shadow: none;
}

.threshold-box .support-btn.supported:active {
  transform: none;
  box-shadow: none;
}

html.dark .threshold-box .support-btn.supported {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
}

html.dark .threshold-box .support-btn.supported:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
}

.threshold-box .support-btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.threshold-box .support-btn:disabled i {
  animation: threshold-support-pulse 0.9s ease-in-out infinite;
}

@keyframes threshold-support-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .threshold-box .support-btn,
  .threshold-box .support-btn:hover,
  .threshold-box .support-btn:active {
    transform: none;
  }

  .threshold-box .support-btn:disabled i {
    animation: none;
  }
}

/* ----------------------------------------------- follow / favorite row */

.threshold-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.threshold-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.threshold-secondary-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-color, var(--border-light));
}

.threshold-secondary-btn.is-active {
  color: var(--secondary, #3b82f6);
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.08);
}

.threshold-secondary-btn[data-reform-favorite].is-active {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.08);
}

.threshold-secondary-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------------------------------------- public signature */

.threshold-sign {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.threshold-sign:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.threshold-sign:has(input:checked) {
  color: var(--text-primary);
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.4);
}

/* A real checkbox, restyled: it keeps keyboard focus and the accessibility
   tree, only the browser's default box is replaced. */
.threshold-sign input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.1rem 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1.5px solid var(--border-medium);
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.threshold-sign input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.threshold-sign input[type="checkbox"]:hover {
  border-color: #3b82f6;
}

.threshold-sign input[type="checkbox"]:checked {
  background: #3b82f6;
  border-color: #3b82f6;
}

.threshold-sign input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.threshold-sign input[type="checkbox"]:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* -------------------------------------------------------------- poll cards */

.voteaza-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.poll-option-row {
  margin-bottom: 0.85rem;
}

.poll-option-head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.poll-option-head strong {
  font-size: 0.875rem;
  color: var(--text-primary);
}

.poll-option-row small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.poll-total {
  padding-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
}

.poll-vote-link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
}

.poll-vote-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------- propose modal */

.proposal-modal-content {
  max-width: 560px;
  padding: 1.6rem 1.75rem 1.75rem;
}

.proposal-modal-content h2 {
  margin: 0 0 0.3rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.proposal-modal-intro {
  margin: 0 0 1.3rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.proposal-modal-content form { gap: 1rem; }

.proposal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.proposal-modal-content .form-group label {
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.proposal-modal-content .form-group input,
.proposal-modal-content .form-group textarea,
.proposal-modal-content .form-group select {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: var(--bg-card);
  font-size: 0.9rem;
}

.proposal-modal-content .form-group select { min-height: 44px; cursor: pointer; }
.proposal-modal-content .form-group textarea { min-height: 88px; }

.proposal-optional {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0.9rem 0.9rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.proposal-optional legend {
  padding: 0 0.4rem;
  margin-left: -0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.proposal-optional legend small {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.form-group label small {
  font-weight: 400;
  color: var(--text-muted);
}

.proposal-count {
  float: right;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .proposal-field-grid { grid-template-columns: 1fr; }
}

.proposal-error {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  color: #7f1d1d;
  background: #fee2e2;
  border-radius: var(--radius-md);
}

html.dark .proposal-error {
  color: #fecaca;
  background: rgba(153, 27, 27, 0.35);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .pressure-ledger-item {
    flex-direction: column;
  }

  .ledger-state {
    align-items: flex-start;
  }

  .home-stats {
    gap: 0.35rem 1rem;
  }

  .home-stats span {
    font-size: 0.75rem;
  }
}

/* ----------------------------------------------------------- OTV poll cards */
/* Results are read-only here; voting stays on OTV so one question keeps one
   official count. */

.polls-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.poll-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.poll-card.is-closed {
  opacity: 0.75;
}

.poll-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.poll-card-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.poll-state {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 999px;
}

.poll-card:not(.is-closed) .poll-state {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

.poll-description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.poll-option-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.poll-option-label strong {
  font-variant-numeric: tabular-nums;
}

.poll-bar {
  height: 6px;
  margin: 0.3rem 0 0.2rem;
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: 999px;
}

.poll-bar span {
  display: block;
  height: 100%;
  background: var(--text-muted);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.poll-option.is-leading .poll-bar span {
  background: var(--secondary);
}

.poll-option small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.poll-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
}

.poll-card-foot a {
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
}

.poll-card-foot a:hover {
  text-decoration: underline;
}

/* Votable poll options.
   Each option becomes a button while the poll is open; the member's own choice
   is marked so a changed vote is always visible. */

.poll-option-vote {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.poll-option-vote:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.poll-option-vote:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 1px;
}

.poll-option.is-mine .poll-option-vote {
  background: var(--bg-hover);
  border-color: var(--secondary);
}

.poll-option.is-mine .poll-bar span {
  background: var(--secondary);
}

.poll-option-tick {
  margin-left: 0.35rem;
  color: var(--secondary);
  font-size: 0.8em;
}

/* Disable interaction while a vote is in flight, without shifting layout. */
.poll-card.is-voting .poll-options {
  opacity: 0.6;
  pointer-events: none;
}

.poll-voted {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--secondary);
}

.poll-hint {
  font-style: italic;
}

.poll-signin-hint {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--secondary);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.poll-signin-hint:hover {
  text-decoration: underline;
}

/* Newsletter signup result */

/* Keeps the result under the form instead of beside it, so the surrounding
   two-column layout does not reflow when a message appears. */
.newsletter-action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

.newsletter-feedback {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.newsletter-feedback.is-success {
  color: #10b981;
}

.newsletter-feedback.is-error {
  color: #ef4444;
}

/* ------------------------------------------------------------------ debate box

   The invitation to argue a measure one to one. Deliberately quieter than the
   support button beside it: supporting is the primary act on this page, debating
   is the escalation for people who want to do more than click. */

.debate-box .debate-box-intro,
.debate-box .debate-box-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.debate-box .debate-box-note strong {
  color: var(--text-primary);
}

.debate-box .debate-box-note.is-quiet {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--text-tertiary, var(--text-secondary));
}

.debate-box .debate-box-loading {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.debate-box-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.debate-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 10px);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}

.debate-side i {
  font-size: 0.75rem;
}

.debate-side.is-pro:hover {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.debate-side.is-contra:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.08);
}

.debate-side:disabled {
  opacity: 0.6;
  cursor: default;
}

.debate-box-anon-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  cursor: pointer;
}

.debate-box-anon-toggle input {
  margin-top: 0.15rem;
  accent-color: #6366f1;
}

.debate-box-primary,
.debate-box-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-lg, 10px);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.debate-box-primary {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.debate-box-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.debate-box-secondary {
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
}

.debate-box-secondary:hover {
  color: var(--text-primary);
}

.debate-box-anon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: #6366f1;
}

.debate-box-queue {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------- advocate box */

.advocate-box .advocate-box-intro {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.advocate-prompt-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0;
}

.advocate-prompt-list button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  text-align: left;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid transparent;
  border-radius: 9px;
  font: 600 0.75rem/1.35 'Inter', sans-serif;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.advocate-prompt-list button i {
  width: 18px;
  color: #8b5cf6;
  text-align: center;
}

.advocate-prompt-list button:hover,
.advocate-prompt-list button.is-selected {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
}

.advocate-box-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 10px);
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.advocate-box-primary:hover {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.advocate-box-primary:disabled {
  opacity: 0.65;
  cursor: default;
}

/* ------------------------------------------------ measure typography scale

   A measure page uses one deliberate scale. The scoped baseline also
   neutralises older component-specific values, so adding a card or sidebar
   control cannot silently introduce another text size.

   Steps stay near a 1.15 ratio. Wider jumps made every description read as a
   footnote under its own title: weight, colour and spacing already separate
   the tiers, so size only has to confirm the order, not shout it. */
.measure-page-layout {
  --measure-type-caption: 0.75rem;
  --measure-type-body: 0.8125rem;
  --measure-type-lead: 0.9375rem;
  --measure-type-heading: 1rem;
  --measure-type-title: 1.375rem;
  font-size: var(--measure-type-body) !important;
}

.measure-page-layout * {
  font-size: var(--measure-type-body) !important;
}

.measure-page-layout .measure-detail-title,
.measure-page-layout .measure-detail-title-text,
.measure-page-layout .threshold-count {
  font-size: var(--measure-type-title) !important;
}

.measure-page-layout :is(
  .measure-article-content h2,
  .measure-article-content h3,
  .measure-article-content h4,
  .sidebar-box h3,
  .related-measures h2,
  .related-measures .measure-title,
  .nova-context-heading strong
) {
  font-size: var(--measure-type-heading) !important;
}

.measure-page-layout :is(
  .measure-impact-badge,
  .threshold-label,
  .threshold-transmission small,
  .nova-task-copy small,
  .nova-task-meta,
  .nova-context-heading b,
  .nova-context-card-copy small,
  .nova-context-more summary span,
  .civic-history-item span,
  .related-measures .tag,
  .related-measures .impact-badge-card
) {
  font-size: var(--measure-type-caption) !important;
}

/* The subtitle answers the title, so it stays one step below it instead of
   dropping to the compact size the surrounding controls use. */
.measure-page-layout .measure-detail-description {
  font-size: var(--measure-type-lead) !important;
}

/* The article is read, not scanned. Re-pointing the scale here lifts the prose
   and its headings together, so a paragraph sits one step under the heading it
   belongs to rather than two. The sidebar keeps the compact values because it
   stays a control panel rather than a text to read. */
.measure-article-content {
  --measure-type-caption: 0.8125rem;
  --measure-type-body: 0.9375rem;
  --measure-type-heading: 1.0625rem;
}

/* Card titles label a card, they do not open a section. The border, the
   centring and the weight already mark them, so they read at prose size and
   stop dwarfing the summary above them. */
.measure-page-layout .measure-article-content .benefit-item h4 {
  font-size: var(--measure-type-body) !important;
}

/* Icons are visual markers, not typography; keep them legible inside the
   benefit cards without introducing another text size. */
.measure-page-layout .benefit-item i {
  font-size: 1.25rem !important;
}

/* The opening summary is editorial copy, not an AI-style callout. */
.measure-article-content #section-1 > .highlight-box {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-card) 91%, #10b981);
  box-shadow: var(--shadow-sm);
}

.measure-article-content #section-1 > .highlight-box::before {
  content: "Pe scurt";
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-size: var(--measure-type-caption) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  grid-column: 1;
  grid-row: 1;
}

/* Most summaries run to several paragraphs. Without an explicit column the
   grid would flow them alternately into the badge column and the text column,
   so the second paragraph would sit under the label and stretch it. Pinning
   the badge and keeping every child in column two lets the summary grow to any
   length and still read as one block beside the label. */
.measure-article-content #section-1 > .highlight-box > * {
  grid-column: 2;
}

.measure-article-content #section-1 > .highlight-box > p {
  margin: 0;
  line-height: 1.7;
}

html.dark .measure-article-content #section-1 > .highlight-box {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.09);
}

html.dark .measure-article-content #section-1 > .highlight-box::before {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
}

@media (max-width: 520px) {
  .measure-article-content #section-1 > .highlight-box {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .measure-article-content #section-1 > .highlight-box::before {
    justify-self: start;
  }

  /* One column now, so the label stacks above the text instead of sitting
     beside it and nothing may be pushed into a second, implicit column. */
  .measure-article-content #section-1 > .highlight-box > * {
    grid-column: 1;
  }
}

/* Keep the attribution visually close to the bottom of the quote card. */
.measure-page-layout .quote {
  padding-bottom: 1.75rem;
}