/**
 * PolitiDex Alignment Tool — styles
 * Extracted from the main inline <style> block in index.html for maintainability.
 * Loaded via <link rel="stylesheet" href="alignment-tool.css"> in <head>.
 * Original 3-state intensity styling (strong / moderate / opposed).
 */

@media (max-width: 480px) {
  #align-chips { gap: 0.35rem !important; }
  #align-chips button { font-size: 0.6rem !important; padding: 0.3rem 0.5rem !important; }
}
.align-card-bar {
      width: 100%; display: flex; align-items: center; gap: 0.6rem;
      padding: 0.5rem 0.65rem; border-radius: 0.7rem; cursor: pointer; text-align: left;
      background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(45,212,191,0.04));
      border: 1px solid rgba(45,212,191,0.45);
      transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
.align-card-bar:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(45,212,191,0.06)); }
.align-card-bar:active { transform: scale(0.99); }
.align-card-num { font-family: 'Bebas Neue', sans-serif; font-weight: 900; font-size: 1.75rem; line-height: 0.9; flex-shrink: 0; }
.align-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.18rem; }
.align-card-titlerow { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.align-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; font-size: 0.74rem; }
.align-card-badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.06rem 0.42rem; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.align-card-mini { height: 5px; border-radius: 999px; background: rgba(10,15,30,0.7); overflow: hidden; }
.align-card-mini > div { height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
.align-card-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; letter-spacing: 0.04em; color: #8ea2c0; text-transform: uppercase; line-height: 1.2; }
.align-card-sub b { color: #9fdbd0; font-weight: 700; }
.align-card-chev { flex-shrink: 0; color: #5eead4; font-size: 0.78rem; line-height: 1; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.3); }
.align-card-bar:hover .align-card-chev { background: rgba(45,212,191,0.2); }
.align-card-bar.setup { background: rgba(20,184,166,0.06); border: 1px dashed rgba(45,212,191,0.42); padding: 0.4rem 0.6rem; }
.align-card-bar.setup .align-card-title { color: #7ee7d8; }
@media (max-width: 380px) {
  .align-card-num { font-size: 1.55rem; }
}
.align-drivers { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.align-drivers-lead { font-family: 'Barlow Condensed', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #7e93b3; }
.align-driver-chip { display: inline-flex; align-items: center; gap: 0.28rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; padding: 0.08rem 0.46rem; border-radius: 999px; background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.align-driver-chip b { font-weight: 800; }
.myteam-slot-match + .align-drivers { width: 90%; margin-left: auto; margin-right: auto; justify-content: center; margin-top: -0.2rem; margin-bottom: 0.45rem; }

/* ── Match → team / receipts action rail ──────────────────────────────────────
   Two one-tap primary actions under the Your Match bar. Mobile-first: equal-width
   touch targets (≥40px), wrapping to the full card width. Additive — sits below the
   existing bar/consistency/driver rows without touching their layout. */
.align-match-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.align-ma-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.34rem;
  min-height: 40px; padding: 0.5rem 0.6rem; border-radius: 0.6rem; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  border: 1px solid rgba(45,212,191,0.5); color: #baf5ec;
  background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(45,212,191,0.05));
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.align-ma-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(20,184,166,0.26), rgba(45,212,191,0.09)); }
.align-ma-btn:active { transform: scale(0.98); }
.align-ma-lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Team = gold/primary so "add them" reads as the main action; green once on-team. */
.align-ma-team { border-color: rgba(250,204,21,0.55); color: #fde68a; background: linear-gradient(135deg, rgba(202,138,4,0.18), rgba(250,204,21,0.05)); }
.align-ma-team:hover { background: linear-gradient(135deg, rgba(202,138,4,0.28), rgba(250,204,21,0.1)); }
.align-ma-team.is-on { border-color: rgba(74,222,128,0.6); color: #bbf7d0; background: linear-gradient(135deg, rgba(22,163,74,0.22), rgba(74,222,128,0.06)); }
.align-ma-team.just-added { animation: alignMaPop 0.5s ease; }
@keyframes alignMaPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* On team-slot cards only the (solo) receipts action shows — center it under the band. */
.myteam-slot-match ~ .align-match-actions.is-solo { width: 90%; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .align-ma-btn { transition: none; } .align-ma-team.just-added { animation: none; } }
@media (max-width: 380px) { .align-ma-btn { font-size: 0.68rem; padding: 0.45rem 0.4rem; gap: 0.25rem; } }

/* Breakdown-modal hand-off: frame the same action rail as the clear next step,
   sitting just above the secondary Full Profile / Adjust Issues row. */
.kraq-handoff { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.08); }
.kraq-handoff-lead { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb4d4; margin-bottom: 0.45rem; }
.kraq-handoff .align-match-actions { margin-top: 0; }
.align-topmatch-badge {
      display: inline-flex; align-items: center; gap: 0.2rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem;
      letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px;
      color: #5eead4; background: rgba(20,184,166,0.16); border: 1px solid rgba(45,212,191,0.55);
      box-shadow: 0 0 12px rgba(45,212,191,0.2);
    }
.align-fab {
      position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 47;
      display: inline-flex; align-items: center; gap: 0.6rem;
      padding: 0.7rem 1.05rem 0.7rem 0.85rem; border-radius: 999px;
      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #4f46e5 100%);
      border: 1px solid rgba(167,139,250,0.55);
      box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 22px rgba(139,92,246,0.4);
      color: #fff; cursor: pointer; max-width: min(80vw, 22rem);
      transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }
.align-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.55), 0 0 30px rgba(139,92,246,0.55); }
.align-fab:active { transform: translateY(0) scale(0.98); }
.align-fab-ico { font-size: 1.15rem; line-height: 1; flex: none; filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
.align-fab-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; text-align: left; }
.align-fab-line1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.align-fab-line2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.01em; color: rgba(233,224,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
.align-fab-count {
      flex: none; display: inline-flex; align-items: center; justify-content: center;
      min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px;
      background: #2dd4bf; color: #06231f; font-family: 'Bebas Neue', sans-serif;
      font-size: 1rem; line-height: 1; box-shadow: 0 0 12px rgba(45,212,191,0.5);
    }
.align-fab.is-active { background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #4f46e5 130%); border-color: rgba(45,212,191,0.6); }
.align-fab.is-empty { animation: alignFabPulse 2.8s ease-in-out infinite; }
body[style*="overflow: hidden"] .align-fab { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (max-width: 640px) {
  .align-fab { right: 0.85rem; bottom: 0.85rem; padding: 0.6rem 0.85rem 0.6rem 0.7rem; max-width: 70vw; }
  .align-fab-line2 { display: none; }
  .align-fab-line1 { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .align-fab.is-empty { animation: none; }
}
.align-panel {
      background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(15,23,42,0.95) 60%);
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: 1rem;
      padding: 1.25rem 1.5rem;
      position: relative;
      overflow: hidden;
    }
.align-panel::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 1rem;
      padding: 1px;
      background: linear-gradient(135deg, rgba(139,92,246,0.5), rgba(168,85,247,0.2), rgba(124,58,237,0.4));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      animation: alignGlow 4s ease-in-out infinite;
    }
.align-head-main { border-radius: 0.7rem; transition: opacity 0.18s; }
.align-head-main:hover { opacity: 0.92; }
.align-head-main:focus-visible { outline: 2px solid rgba(168,85,247,0.65); outline-offset: 4px; }
.align-head-chev {
      margin-left: auto; align-self: center; flex: none;
      font-size: 1.45rem; line-height: 1; color: #c4b5fd;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
.align-panel.align-expanded .align-head-chev { transform: rotate(180deg); }
.align-compact {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.85rem; flex-wrap: wrap;
      background: linear-gradient(135deg, rgba(139,92,246,0.13), rgba(10,15,30,0.45));
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: 0.85rem;
      padding: 0.85rem 1.05rem;
    }
.align-compact-status {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase; color: #b9aef0;
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
.align-compact-status::before { content: '🧭'; font-size: 1rem; }
.align-compact-status b { color: #e6ddff; font-weight: 800; }
.align-compact-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
      background: linear-gradient(135deg, #8b5cf6, #6d28d9);
      border: 1px solid rgba(168,85,247,0.6);
      border-radius: 999px; padding: 0.6rem 1.25rem; cursor: pointer;
      box-shadow: 0 4px 16px rgba(139,92,246,0.35);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
.align-compact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(139,92,246,0.5); }
.align-compact-btn:active { transform: translateY(0); }
.align-compact-btn-arrow { transition: transform 0.18s ease; }
.align-compact-btn:hover .align-compact-btn-arrow { transform: translateX(3px); }
.align-compact-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1 1 240px; }
.align-compact-tagline {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; font-weight: 500;
      letter-spacing: 0.01em; color: #9fb0d0; line-height: 1.45; text-transform: none;
    }
.align-compact-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.align-compact-matches {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; font-weight: 800;
      letter-spacing: 0.05em; text-transform: uppercase; color: #5eead4;
      background: rgba(20,184,166,0.12); border: 1px solid rgba(94,234,212,0.45);
      border-radius: 999px; padding: 0.58rem 1.1rem; cursor: pointer;
      box-shadow: 0 2px 14px rgba(20,184,166,0.16); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
.align-compact-matches:hover { background: rgba(20,184,166,0.2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,184,166,0.32); }
.align-compact-matches:active { transform: translateY(0); }
.align-expandable {
      display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 0;
      transition: grid-template-rows 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease;
    }
.align-expandable-inner { overflow: hidden; min-height: 0; }
.align-panel.align-collapsed .align-expandable { grid-template-rows: 0fr; opacity: 0; }
.align-panel.align-collapsed .align-clear-btn { display: none; }
.align-panel.align-expanded .align-compact { display: none; }
.align-collapse-link {
      display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: #9d8fe0;
      background: rgba(30,53,96,0.42); border: 1px solid rgba(139,92,246,0.24);
      border-radius: 999px; padding: 0.36rem 0.85rem; cursor: pointer; transition: all 0.16s;
    }
.align-collapse-link:hover { color: #c4b5fd; border-color: rgba(168,85,247,0.5); background: rgba(139,92,246,0.14); transform: translateY(-1px); }
.align-done-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem;
    }
.align-done-row .align-collapse-link { margin-top: 0; }
.align-done-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase; color: #062a25;
      background: linear-gradient(135deg, #5eead4, #14b8a6);
      border: 1px solid rgba(94,234,212,0.6);
      border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer;
      box-shadow: 0 4px 16px rgba(20,184,166,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
.align-done-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(20,184,166,0.45); }
.align-done-btn:active { transform: translateY(0); }
.align-flash { animation: alignFlash 1.2s ease-out; border-radius: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  .align-expandable, .align-head-chev, .align-compact-btn { transition: none; }
  .align-flash { animation: none; }
}
.align-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(30,53,96,0.6);
      border: 1px solid rgba(139,92,246,0.2);
      border-radius: 9999px;
      padding: 0.4rem 0.85rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: #a5b4fc;
      cursor: pointer;
      transition: all 0.2s;
      user-select: none;
      white-space: nowrap;
    }
.align-chip:hover {
      border-color: rgba(139,92,246,0.5);
      background: rgba(139,92,246,0.12);
      color: #c4b5fd;
    }
.align-chip.active {
      background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(168,85,247,0.15));
      border-color: rgba(139,92,246,0.6);
      color: #e0d5ff;
      box-shadow: 0 0 12px rgba(139,92,246,0.2);
    }
.align-opt-list {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
.align-opt-list .align-chip {
      width: 100%;
      justify-content: flex-start;
      align-items: flex-start;
      border-radius: 0.7rem;
      padding: 0.55rem 0.7rem;
      white-space: normal;
      text-align: left;
      line-height: 1.2;
      gap: 0.55rem;
    }
.align-opt-box {
      flex: 0 0 auto;
      width: 1.05rem;
      height: 1.05rem;
      margin-top: 0.05rem;
      border-radius: 0.3rem;
      border: 1.5px solid rgba(139,92,246,0.45);
      background: rgba(10,15,30,0.5);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.18s;
    }
.align-opt-box::after {
      content: '✓';
      font-size: 0.7rem;
      font-weight: 800;
      line-height: 1;
      color: #fff;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.18s;
    }
.align-chip.active .align-opt-box {
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      border-color: rgba(168,85,247,0.9);
      box-shadow: 0 0 8px rgba(139,92,246,0.45);
    }
.align-chip.active .align-opt-box::after { opacity: 1; transform: scale(1); }
.align-opt-text { flex: 1 1 auto; min-width: 0; }
.align-groups {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-bottom: 0.85rem;
    }
@media (min-width: 768px) {
  .align-groups { grid-template-columns: 1fr 1fr; }
}
.align-group {
      background: rgba(10,15,30,0.42);
      border: 1px solid rgba(139,92,246,0.16);
      border-radius: 0.85rem;
      padding: 0.65rem 0.8rem 0.75rem;
    }
.align-group-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: #9d8fe0;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
.align-group-row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 0.4rem;
    }
.align-group-row .align-chip {
      flex: 1 1 0;
      min-width: 0;
      justify-content: center;
      white-space: normal;
      text-align: center;
      line-height: 1.15;
    }
.align-vs {
      align-self: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #5b6b8c;
      text-transform: uppercase;
      flex: 0 0 auto;
    }
.align-lean {
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      padding: 0.04rem 0.32rem;
      border-radius: 999px;
      margin-left: 0.25rem;
    }
.align-chip[data-lean="R"] .align-lean {
      background: rgba(239,68,68,0.16);
      color: #fca5a5;
      border: 1px solid rgba(239,68,68,0.32);
    }
.align-chip[data-lean="D"] .align-lean {
      background: rgba(59,130,246,0.16);
      color: #93c5fd;
      border: 1px solid rgba(59,130,246,0.32);
    }
.align-cats {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 0.85rem;
    }
.align-group-divider {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #8b7fd0;
      margin: 0.65rem 0 0.1rem;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid rgba(139,92,246,0.18);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
.align-group-divider:first-child { margin-top: 0; }
.align-future-note {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-top: 0.75rem;
      padding: 0.6rem 0.8rem;
      border-radius: 0.7rem;
      border: 1px dashed rgba(139,92,246,0.4);
      background: rgba(139,92,246,0.07);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: #b9aee8;
    }
.align-future-note strong { color: #d6cbff; font-weight: 700; }
.align-future-ico { flex: 0 0 auto; font-size: 0.9rem; line-height: 1.2; }
.align-future-note.align-sig-saved {
      border-style: solid;
      border-color: rgba(74,222,128,0.4);
      background: rgba(74,222,128,0.08);
      color: #b7e8c6;
    }
.align-future-note.align-sig-saved strong { color: #d6ffe2; }
.align-sig-btn {
      display: inline-flex;
      align-items: center;
      margin-left: 0.4rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(167,139,250,0.55);
      background: rgba(139,92,246,0.18);
      color: #d6cbff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s;
    }
.align-sig-btn:hover { background: rgba(139,92,246,0.32); border-color: rgba(167,139,250,0.8); }
.align-cat {
      background: rgba(10,15,30,0.42);
      border: 1px solid rgba(139,92,246,0.16);
      border-radius: 0.85rem;
      overflow: hidden;
      transition: border-color 0.2s;
    }
.align-cat.open { border-color: rgba(139,92,246,0.34); }
.align-cat-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.7rem 0.85rem;
      text-align: left;
      transition: background 0.18s;
    }
.align-cat-head:hover { background: rgba(139,92,246,0.08); }
.align-cat-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #c4b5fd;
    }
.align-cat-ico { font-size: 0.98rem; }
.align-cat-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.align-cat-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.15rem;
      height: 1.15rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(139,92,246,0.95), rgba(168,85,247,0.7));
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.64rem;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 0 9px rgba(139,92,246,0.4);
    }
.align-cat-chev {
      color: #7c6bb0;
      font-size: 0.72rem;
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
.align-cat.open .align-cat-chev { transform: rotate(180deg); }
.align-cat-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1);
    }
.align-cat.open .align-cat-body { max-height: 1600px; }
.align-cat-body-inner { padding: 0 0.8rem 0.8rem; }
.align-search-wrap { position: relative; margin-bottom: 0.7rem; }
.align-search-wrap input {
      width: 100%;
      background: rgba(10,15,30,0.62);
      border: 1px solid rgba(139,92,246,0.28);
      border-radius: 0.7rem;
      padding: 0.62rem 2.1rem 0.62rem 2.1rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.86rem;
      letter-spacing: 0.02em;
      color: #e6ddff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
.align-search-wrap input:focus { outline: none; border-color: rgba(168,85,247,0.62); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.align-search-wrap input::placeholder { color: #7c6bb0; }
.align-search-ico { position: absolute; left: 0.72rem; top: 50%; transform: translateY(-50%); font-size: 0.82rem; pointer-events: none; opacity: 0.75; }
.align-search-clear {
      position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
      background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3);
      color: #c4b5fd; cursor: pointer; font-size: 0.72rem; line-height: 1;
      width: 1.35rem; height: 1.35rem; border-radius: 999px; display: none;
      align-items: center; justify-content: center; padding: 0;
    }
.align-search-wrap.has-text .align-search-clear { display: inline-flex; }
.align-hide { display: none !important; }
.align-search-empty {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; color: #9d8fe0;
      padding: 1.1rem 0.5rem; text-align: center; display: none; letter-spacing: 0.02em;
      flex-direction: column; align-items: center; gap: 0.2rem;
    }
.align-search-empty .align-empty-ico { font-size: 1.5rem; opacity: 0.6; margin-bottom: 0.15rem; }
.align-search-empty .align-empty-title { font-weight: 700; color: #d6cbff; font-size: 0.92rem; letter-spacing: 0.03em; }
.align-search-empty .align-empty-sub { color: #9d8fe0; font-size: 0.78rem; line-height: 1.5; max-width: 22rem; }
.align-search-empty .align-empty-sub b { color: #c4b5fd; font-weight: 700; }
.align-search-empty .align-empty-clear {
      background: none; border: none; padding: 0; cursor: pointer;
      color: #a78bfa; font-family: inherit; font-size: inherit; font-weight: 700;
      text-decoration: underline; text-underline-offset: 2px;
    }
.align-search-empty .align-empty-clear:hover { color: #c4b5fd; }
.align-quickpicks {
      background: linear-gradient(135deg, rgba(30,53,96,0.42), rgba(10,15,30,0.4));
      border: 1px solid rgba(139,92,246,0.22);
      border-radius: 0.85rem;
      padding: 0.7rem 0.85rem 0.8rem;
      margin-bottom: 0.8rem;
    }
.align-quick-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: #b9a7ef; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem;
    }
.align-quick-label .align-quick-hint { color: #7c6bb0; font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 0.72rem; }
.align-quick-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.align-quick-chip {
      padding: 0.34rem 0.7rem;
      font-size: 0.72rem;
      white-space: normal;
      text-align: left;
      line-height: 1.15;
    }
.align-quick-chip::before {
      content: '+';
      font-weight: 800;
      opacity: 0.7;
      margin-right: 0.05rem;
    }
.align-quick-chip.active::before { content: '✓'; opacity: 1; }
.align-quick-cov { margin-left: 0.3rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.01em; color: #5eead4; opacity: 0.92; }
.align-quick-chip.active .align-quick-cov { color: #99f6e4; }
.align-opt-cov {
      flex: 0 0 auto;
      align-self: flex-start;
      margin-top: 0.05rem;
      display: inline-flex;
      align-items: center;
      gap: 0.12rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: #5eead4;
      background: rgba(20,184,166,0.12);
      border: 1px solid rgba(45,212,191,0.3);
      border-radius: 999px;
      padding: 0.08rem 0.42rem;
      line-height: 1.25;
      white-space: nowrap;
    }
.align-opt-cov.is-none { color: #6f86a8; background: rgba(111,134,168,0.08); border-color: rgba(111,134,168,0.22); }
.align-chip.active .align-opt-cov { color: #99f6e4; border-color: rgba(45,212,191,0.5); background: rgba(20,184,166,0.18); }
.align-cat-cov {
      display: inline-flex;
      align-items: center;
      gap: 0.1rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: #5eead4;
      background: rgba(20,184,166,0.1);
      border: 1px solid rgba(45,212,191,0.26);
      border-radius: 999px;
      padding: 0.06rem 0.42rem;
      line-height: 1.3;
    }
.align-cov-legend {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem;
      line-height: 1.5;
      color: #9fb4d4;
      background: rgba(20,184,166,0.06);
      border: 1px solid rgba(45,212,191,0.18);
      border-left: 3px solid rgba(45,212,191,0.5);
      border-radius: 0.5rem;
      padding: 0.5rem 0.7rem;
      margin: 0 0 0.7rem;
    }
.align-cov-legend b { color: #7ee7d8; font-weight: 700; }
.align-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem;
    }
.align-sel-count {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; color: #9d8fe0;
      display: inline-flex; align-items: center; gap: 0.35rem;
    }
.align-sel-count b { color: #d6cbff; font-weight: 800; }
.align-sel-count.pop { animation: alignBadgePop 0.3s ease; }
.align-toolbar-actions { display: flex; gap: 0.35rem; }
.align-tool-btn {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase; color: #c4b5fd;
      background: rgba(30,53,96,0.5); border: 1px solid rgba(139,92,246,0.26);
      border-radius: 999px; padding: 0.26rem 0.66rem; cursor: pointer; transition: all 0.16s;
    }
.align-tool-btn:hover {
      border-color: rgba(168,85,247,0.55); background: rgba(139,92,246,0.16);
      color: #e6ddff; transform: translateY(-1px);
    }
.align-opt-row { display: flex; flex-direction: column; }
.align-intensity {
      display: none;
      gap: 0.36rem;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.55rem 0.3rem 0.35rem 1.75rem;
      margin-top: 0.15rem;
      border-top: 1px dashed rgba(139,92,246,0.16);
      animation: alignIntIn 0.24s ease;
    }
.align-opt.active ~ .align-intensity { display: flex; }
.align-int-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
      color: #9d8fe0;
      background: rgba(30,53,96,0.5);
      border: 1px solid rgba(139,92,246,0.22);
      border-radius: 999px; padding: 0.22rem 0.62rem; cursor: pointer;
      transition: all 0.16s; white-space: nowrap;
    }
.align-int-btn:hover { border-color: rgba(168,85,247,0.5); color: #c4b5fd; transform: translateY(-1px); }
/* Base per-stance tints so the five choices read as support / neutral / oppose at
   a glance even before one is picked — a faint left-edge color plus text hue.
   The `.sel` rules below (higher specificity) still fully light up the chosen one. */
.align-int-btn[data-int="strongly_support"],
.align-int-btn[data-int="support"] { border-left: 3px solid rgba(74,222,128,0.55); color: #9fdcb4; }
.align-int-btn[data-int="neutral"] { border-left: 3px solid rgba(148,163,184,0.6); color: #b9c2d0; }
.align-int-btn[data-int="oppose"],
.align-int-btn[data-int="strongly_oppose"] { border-left: 3px solid rgba(248,113,113,0.55); color: #e6a9a9; }
.align-int-btn[data-int="strongly_support"]:hover { border-color: rgba(74,222,128,0.6); color: #d1fae5; }
.align-int-btn[data-int="support"]:hover { border-color: rgba(74,222,128,0.5); color: #bbf7d0; }
.align-int-btn[data-int="neutral"]:hover { border-color: rgba(148,163,184,0.65); color: #e2e8f0; }
.align-int-btn[data-int="oppose"]:hover,
.align-int-btn[data-int="strongly_oppose"]:hover { border-color: rgba(248,113,113,0.6); color: #fecaca; }
/* "Your stance" caption that leads the intensity row. */
.align-int-caption {
      display: inline-flex; align-items: center; align-self: center;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase; color: #8f7fd6;
      margin-right: 0.15rem; white-space: nowrap;
    }
.align-int-caption::after { content: '›'; margin-left: 0.35rem; opacity: 0.6; font-weight: 700; }
.align-int-btn.sel[data-int="strongly_support"] { background: linear-gradient(135deg, rgba(74,222,128,0.32), rgba(34,197,94,0.2));  border-color: rgba(74,222,128,0.7); color: #d1fae5; box-shadow: 0 0 9px rgba(74,222,128,0.3); }
.align-int-btn.sel[data-int="support"] { background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(34,197,94,0.1));  border-color: rgba(74,222,128,0.5); color: #bbf7d0; box-shadow: 0 0 8px rgba(74,222,128,0.16); }
.align-int-btn.sel[data-int="neutral"] { background: linear-gradient(135deg, rgba(148,163,184,0.24), rgba(100,116,139,0.14));  border-color: rgba(148,163,184,0.55); color: #e2e8f0; box-shadow: 0 0 8px rgba(148,163,184,0.18); }
.align-int-btn.sel[data-int="oppose"] { background: linear-gradient(135deg, rgba(248,113,113,0.2), rgba(220,38,38,0.1)); border-color: rgba(248,113,113,0.5); color: #fecaca; box-shadow: 0 0 8px rgba(248,113,113,0.16); }
.align-int-btn.sel[data-int="strongly_oppose"] { background: linear-gradient(135deg, rgba(248,113,113,0.34), rgba(220,38,38,0.2)); border-color: rgba(248,113,113,0.75); color: #fee2e2; box-shadow: 0 0 9px rgba(248,113,113,0.3); }
/* The chosen stance sits slightly proud of the row so the active pick is obvious. */
.align-int-btn.sel { font-weight: 800; transform: translateY(-1px); }
.align-int-btn.sel[data-int="strongly_support"],
.align-int-btn.sel[data-int="support"] { border-left-color: rgba(74,222,128,0.85); }
.align-int-btn.sel[data-int="neutral"] { border-left-color: rgba(148,163,184,0.85); }
.align-int-btn.sel[data-int="oppose"],
.align-int-btn.sel[data-int="strongly_oppose"] { border-left-color: rgba(248,113,113,0.85); }
/* Live stance badge on a selected position (filled by _alignSyncAllChips). */
.align-stance-badge { display: none; align-items: center; gap: 0.2rem; margin-left: 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #bbf7d0; background: rgba(74,222,128,0.14); border: 1px solid rgba(74,222,128,0.4); border-radius: 999px; padding: 0.04rem 0.4rem; white-space: nowrap; }
.align-stance-badge::before { content: 'You: '; opacity: 0.72; font-weight: 700; }
.align-opt-row.lvl-neutral .align-stance-badge { color: #e2e8f0; background: rgba(148,163,184,0.16); border-color: rgba(148,163,184,0.45); }
.align-opt-row.lvl-oppose .align-stance-badge,
.align-opt-row.lvl-strongly_oppose .align-stance-badge { color: #fecaca; background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.45); }
.align-opt-row.opposed .align-chip.active { background: linear-gradient(135deg, rgba(248,113,113,0.16), rgba(220,38,38,0.08)); border-color: rgba(248,113,113,0.5); color: #fde0e0; }
.align-opt-row.opposed .align-chip.active .align-opt-box { background: linear-gradient(135deg, #f87171, #dc2626); border-color: rgba(248,113,113,0.9); box-shadow: 0 0 8px rgba(248,113,113,0.45); }
.align-opt-row.opposed .align-chip.active .align-opt-box::after { content: '✕'; }
.align-chip.just-toggled { animation: alignPop 0.34s ease; }
.align-cat-badge.pop { animation: alignBadgePop 0.3s ease; }
.align-profile {
      background: linear-gradient(135deg, rgba(139,92,246,0.13), rgba(10,15,30,0.5));
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: 0.9rem;
      padding: 0.95rem 1.05rem;
      margin-bottom: 0.9rem;
    }
.align-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.align-profile-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.07em; font-size: 1.12rem; color: #ece4ff; display: flex; align-items: center; gap: 0.45rem; }
.align-count-pill { font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, rgba(139,92,246,0.95), rgba(168,85,247,0.7)); border-radius: 999px; padding: 0.2rem 0.62rem; box-shadow: 0 0 10px rgba(139,92,246,0.35); }
.align-profile-strength { font-family: 'Barlow Condensed', sans-serif; font-size: 0.84rem; color: #c8bbf2; line-height: 1.45; margin-bottom: 0.55rem; }
.align-profile-strength b { font-weight: 800; }
.align-profile-strength .s-strong { color: #6ee7a0; }
.align-profile-strength .s-mod { color: #cbd5e1; }
.align-profile-strength .s-opp { color: #f89b9b; }
.align-strength-meter { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.07); margin-bottom: 0.8rem; }
.align-strength-seg { height: 100%; transition: width 0.55s cubic-bezier(0.4,0,0.2,1); }
.align-strength-seg.strong { background: linear-gradient(90deg, #22c55e, #4ade80); }
.align-strength-seg.moderate { background: linear-gradient(90deg, #64748b, #94a3b8); }
.align-strength-seg.opposed { background: linear-gradient(90deg, #dc2626, #f87171); }
/* Conviction callout — how many positions are held strongly (heaviest weight). */
.align-conviction { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.55rem; margin: -0.35rem 0 0.85rem; }
.align-conviction-pill {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 800;
      letter-spacing: 0.05em; text-transform: uppercase; color: #d1fae5;
      background: linear-gradient(135deg, rgba(74,222,128,0.24), rgba(34,197,94,0.14));
      border: 1px solid rgba(74,222,128,0.5); border-radius: 999px; padding: 0.12rem 0.55rem;
      white-space: nowrap; box-shadow: 0 0 8px rgba(74,222,128,0.18);
    }
.align-conviction-note { font-family: 'Barlow Condensed', sans-serif; font-size: 0.76rem; color: #a99fd0; line-height: 1.35; }
.align-conviction-note b { font-weight: 800; color: #c8bbf2; }
.align-conviction-none { color: #8f83be; font-style: italic; }
/* 🔥 high-engagement flag on newer Quick Picks. */
.align-quick-flame { margin-right: 0.28rem; font-size: 0.78rem; filter: saturate(1.1); }
.align-quick-chip.align-quick-hot { border-color: rgba(251,146,60,0.5); }
.align-quick-chip.align-quick-hot.active { border-color: rgba(45,212,191,0.7); }
.align-profile-cols { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) {
  .align-profile-cols { grid-template-columns: 1fr 1fr; }
}
.align-profile-col-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9d8fe0; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.align-area-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.align-area-chip {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.03em;
      background: rgba(30,53,96,0.5); border: 1px solid rgba(139,92,246,0.26); color: #c4b5fd;
      border-radius: 999px; padding: 0.28rem 0.62rem; cursor: pointer; transition: all 0.16s;
    }
.align-area-chip:hover { border-color: rgba(168,85,247,0.55); background: rgba(139,92,246,0.16); color: #e6ddff; transform: translateY(-1px); }
.align-area-chip .n { font-weight: 800; color: #a78bfa; }
.align-area-chip.todo { border-style: dashed; color: #9d8fe0; }
.align-profile-empty { font-family: 'Barlow Condensed', sans-serif; font-size: 0.86rem; color: #bcb1ea; line-height: 1.55; }
.align-profile-empty b { color: #d6cbff; }
.align-score-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background: rgba(139,92,246,0.14);
      border: 1px solid rgba(139,92,246,0.35);
      color: #a78bfa;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.6rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
.align-score-ring {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2.5px solid rgba(139,92,246,0.6);
      background: rgba(139,92,246,0.1);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.05rem;
      color: #a78bfa;
      flex-shrink: 0;
      position: relative;
      box-shadow: 0 0 12px rgba(139,92,246,0.15);
      transition: border-color 0.3s, box-shadow 0.3s, color 0.3s, background 0.3s;
    }
.align-score-ring.high { border-color: rgba(74,222,128,0.7); color: #4ade80; background: rgba(74,222,128,0.1); box-shadow: 0 0 16px rgba(74,222,128,0.2); }
.align-score-ring.mid { border-color: rgba(245,200,66,0.7); color: #f5c842; background: rgba(245,200,66,0.1); box-shadow: 0 0 16px rgba(245,200,66,0.2); }
.align-score-ring.low { border-color: rgba(248,113,113,0.7); color: #f87171; background: rgba(248,113,113,0.1); box-shadow: 0 0 16px rgba(248,113,113,0.2); }
.align-pct-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(139,92,246,0.6);
      text-align: center;
    }
.align-dir-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
      margin-top: 0.35rem;
    }
.align-dir-ring {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.9rem;
      flex-shrink: 0;
      border: 2px solid;
      transition: all 0.3s;
    }
.align-dir-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
    }
@media (max-width: 768px) {
  .align-quick-chip { min-height: 40px; }
  .align-opt-list .align-chip { min-height: 44px; padding: 0.6rem 0.75rem; }
  .align-int-btn { min-height: 38px; padding: 0.4rem 0.7rem; font-size: 0.66rem; }
  .align-tool-btn { min-height: 38px; padding: 0.4rem 0.8rem; }
  .align-cat-head { min-height: 50px; }
  /* On touch screens give the intensity row a little more room and make the
     chosen stance unmistakable — a ring plus a brighter lift than on desktop. */
  .align-intensity { gap: 0.42rem; padding-left: 1.5rem; }
  .align-int-caption { flex-basis: 100%; margin-bottom: 0.1rem; }
  .align-int-btn.sel { outline: 2px solid rgba(255,255,255,0.22); outline-offset: 1px; transform: translateY(-1px) scale(1.02); }
  .align-int-btn.sel[data-int="strongly_support"],
  .align-int-btn.sel[data-int="support"] { outline-color: rgba(74,222,128,0.5); }
  .align-int-btn.sel[data-int="neutral"] { outline-color: rgba(148,163,184,0.55); }
  .align-int-btn.sel[data-int="oppose"],
  .align-int-btn.sel[data-int="strongly_oppose"] { outline-color: rgba(248,113,113,0.5); }
  .align-opt-row.active .align-chip.active,
  .align-chip.active { box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSISTENCY (Say-vs-Do) SCORE — the second score, rendered as a compact
   sibling directly beneath the "Your Match" bar/band so the two read together.
   Neutral integrity read: does the record back up the stated positions. Uses a
   distinct violet frame so it's clearly a *different* dimension from the teal
   "Your Match", while the score number itself keeps the shared green/amber/red.
   Mobile-first: full-width, stacks under the match bar.
   ═══════════════════════════════════════════════════════════════════════════ */
.align-consist-bar {
  width: 100%; display: flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem;
  padding: 0.4rem 0.6rem; border-radius: 0.6rem; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.02));
  border: 1px solid rgba(139,92,246,0.4); font: inherit;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.align-consist-bar:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(139,92,246,0.03)); }
.align-consist-bar:active { transform: scale(0.99); }
.align-consist-bar.is-muted { cursor: default; border-color: rgba(139,92,246,0.22); background: rgba(139,92,246,0.06); }
.align-consist-bar.is-muted:hover { transform: none; }
.align-consist-ico { flex-shrink: 0; font-size: 1rem; opacity: 0.85; width: 1.6rem; text-align: center; }
.align-consist-num { font-family: 'Bebas Neue', sans-serif; font-weight: 900; font-size: 1.45rem; line-height: 0.9; flex-shrink: 0; min-width: 2.4rem; }
.align-consist-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.16rem; }
.align-consist-titlerow { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.align-consist-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; font-size: 0.7rem; color: #c4b5fd; }
.align-consist-title b { font-weight: 700; }
.align-consist-badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.06rem 0.42rem; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.align-consist-track { height: 5px; border-radius: 999px; background: rgba(10,15,30,0.7); overflow: hidden; }
.align-consist-track > div { height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
.align-consist-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.55rem; letter-spacing: 0.04em; color: #9a8fc4; text-transform: uppercase; line-height: 1.25; }

/* compact inline chip (dense contexts, sibling of .align-score-badge) */
.align-consist-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.35rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.14rem 0.5rem;
  border-radius: 999px; border: 1px solid rgba(139,92,246,0.4); white-space: nowrap;
}
.align-consist-chip.is-muted { color: #9a8fc4; background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.22); }

@media (max-width: 480px) {
  .align-consist-num { font-size: 1.25rem; min-width: 2.1rem; }
  .align-consist-title { font-size: 0.64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .align-consist-bar, .align-consist-track > div { transition: none; }
}

/* ── dual-score polish: pairing, contradictions, states, compact mini ──────── */
/* The consistency bar reads as the "record" leg paired under the match bar:
   a violet left accent groups the two without a heavy container. */
.align-consist-bar { border-left-width: 3px; border-left-color: rgba(139,92,246,0.6); }
.align-consist-badge.is-limited { color: #b9add9; background: rgba(139,92,246,0.14); border: 1px dashed rgba(139,92,246,0.5); }

/* Contradictions — made visible (neutral fact, not a verdict): a warm-red frame
   + accent on the bar and a small flag pill. Tone stays factual. */
.align-consist-bar.is-contra { border-left-color: #f87171; }
.align-consist-flag {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.52rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fca5a5;
  background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.45);
  padding: 0.05rem 0.4rem; border-radius: 999px; white-space: nowrap; line-height: 1.3;
}
.align-consist-flag.compact { font-size: 0.5rem; padding: 0.02rem 0.28rem; margin-left: 0.15rem; }

/* limited / checking states */
.align-consist-bar.is-limited { cursor: pointer; border-style: dashed; border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.05); }
.align-consist-bar.is-limited:hover { transform: translateY(-1px); }
.align-consist-bar.is-checking { cursor: default; border-color: rgba(139,92,246,0.22); background: rgba(139,92,246,0.06); }
.align-consist-bar.is-checking:hover { transform: none; }
.align-consist-spin {
  display: inline-block; width: 0.7em; height: 0.7em; vertical-align: middle;
  border: 2px solid rgba(196,181,253,0.35); border-top-color: #c4b5fd; border-radius: 50%;
  animation: alignConsistSpin 0.7s linear infinite;
}
@keyframes alignConsistSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .align-consist-spin { animation: none; } }

/* ring companion wrapper (keeps ring + consistency chip centred as one unit) */
.align-ring-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.align-ring-wrap .align-consist-chip { margin-left: 0; }

/* compact DUAL mini — both scores in one tight, tappable pill (dense surfaces) */
.align-dual-mini {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font: inherit;
  padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap;
  background: rgba(10,15,30,0.55); border: 1px solid rgba(148,163,184,0.28);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.align-dual-mini:hover { border-color: rgba(148,163,184,0.5); background: rgba(10,15,30,0.75); transform: translateY(-1px); }
.align-dm-v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.15rem; }
.align-dm-v.is-muted { color: #8ea2c0; font-weight: 700; }
.align-dm-sep { color: #55617a; font-weight: 700; }

/* ── Shared three-score legend (window._pdxScoreLegendHtml) ─────────────────
   One consistent, mobile-first explainer for 🎯 Your Match / ⚖️ Say-vs-Do /
   🤝 Promise Follow-Through, reused across surfaces so the trio reads as one
   system. `short` sits inline; `calc` is the quieter "how it's figured" note. */
.pdx-scoreleg { display: flex; flex-direction: column; gap: 0.5rem; }
.pdx-scoreleg-head {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: #cbd9ec;
}
.pdx-scoreleg-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.pdx-scoreleg-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1.3; width: 1.3rem; text-align: center; }
.pdx-scoreleg-txt {
  font-family: 'Barlow', sans-serif; font-size: 0.78rem; line-height: 1.45; color: #b9cae3; min-width: 0;
}
.pdx-scoreleg-txt b { color: #eef4ff; font-weight: 700; }
.pdx-scoreleg-calc { display: block; margin-top: 0.1rem; font-size: 0.68rem; color: #8ea2c0; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════════════
   MATCH INPUT MODE — "Match on: Stated positions | Formal-record patterns"
   One toggle, two mounts (#align-mode-main full, #align-mode-rel compact), one
   piece of state. The visual job here is honesty at a glance:

     • the ACTIVE segment is filled and lit, the other is a quiet outline, so
       which side of the politician is being matched is never a guess;
     • the two lanes carry different hues everywhere they appear — 💬 stated is
       the tool's violet, 🏛 formal-record is the institutional blue used by the
       Full Stance Record and the formal-pattern index — so a mode tag, a score
       glyph and a per-issue chip all agree without reading the words;
     • per-issue source chips take their DIRECTION colour from the shipped
       pattern palette (support #4ade80 / oppose #f87171 / mixed #f5c842) and
       their WEIGHT from the same four rungs as .pdxst-pat: filled for a real
       run, dashed and dialled back for `w-thin`. A thin pattern must never look
       as loud as a strong one — it counts, but it counts less.

   Mobile-first: the segments stack to full width and clear 38px before the
   768px rules; nothing here depends on hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.align-mode-mount:empty { display: none; }
.align-mode-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem;
  margin: 0 0 0.6rem; padding: 0.5rem 0.6rem;
  background: rgba(10,15,30,0.42);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 0.6rem;
}
.align-mode-lead {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9fb4d4; flex-shrink: 0;
}
.align-mode-segs { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.align-mode-seg {
  display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer; font: inherit;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.03em; white-space: nowrap; min-height: 34px;
  padding: 0.28rem 0.66rem; border-radius: 999px;
  color: #9fb4d4; background: rgba(30,53,96,0.4);
  border: 1px solid rgba(148,163,184,0.26);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.align-mode-seg:hover, .align-mode-seg:focus-visible {
  color: #eef4ff; border-color: rgba(148,163,184,0.5); background: rgba(30,53,96,0.7);
}
/* The chosen lane is filled in its own hue — obvious at a glance, and the hue
   is the same one its tags and chips use downstream. */
.align-mode-seg.is-on[data-align-mode="stated"] {
  color: #120a24; background: #c4b5fd; border-color: #c4b5fd;
}
.align-mode-seg.is-on[data-align-mode="record"] {
  color: #06121f; background: #93b4e6; border-color: #93b4e6;
}
.align-mode-seg.is-on { font-weight: 800; }
.align-mode-ico { font-size: 0.82rem; line-height: 1; }
.align-mode-sub {
  flex-basis: 100%; font-family: 'Barlow', sans-serif; font-size: 0.7rem;
  line-height: 1.45; color: #8ea2c0; margin-top: 0.05rem;
}
.align-mode-row.is-compact { padding: 0.4rem 0.5rem; margin-bottom: 0.5rem; }
.align-mode-row.is-compact .align-mode-seg { font-size: 0.64rem; padding: 0.24rem 0.55rem; }

/* "Matched on …" tag — rides next to a score so a result never floats free of
   the question that produced it. */
.align-mode-tag {
  display: inline-flex; align-items: center; gap: 0.24rem; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.52rem;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
  padding: 0.06rem 0.42rem; border-radius: 999px;
}
.align-mode-tag.is-stated { color: #c4b5fd; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.42); }
.align-mode-tag.is-record { color: #93b4e6; background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.44); }
.align-score-mode { font-size: 0.85em; opacity: 0.9; }
.align-compact-mode {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #9fb4d4; white-space: nowrap;
}
.align-compact-mode b { color: #cfe0f8; font-weight: 800; }
.align-compact-mode[data-align-mode="record"] { color: #93b4e6; }

/* ── per-issue signal source: `Says: Supports` vs `Record pattern: Mostly
      opposes · 8 advanced · 2 against`. Never the same shape, so a pattern can
      never be misread as a quoted claim. ──────────────────────────────────── */
.align-sig {
  display: inline-flex; align-items: center; gap: 0.26rem; flex-wrap: wrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 700;
  line-height: 1.35; padding: 0.08rem 0.44rem; border-radius: 999px;
}
.align-sig-k { font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.74; font-weight: 700; }
.align-sig b { font-weight: 800; }
.align-sig-n { font-weight: 600; font-size: 0.6rem; opacity: 0.84; }

/* stated: violet frame, tinted by the stance it claims */
.align-sig-said { color: #c4b5fd; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.4); }
.align-sig-said.is-support { color: #86efac; border-color: rgba(74,222,128,0.44); background: rgba(74,222,128,0.1); }
.align-sig-said.is-oppose  { color: #fca5a5; border-color: rgba(248,113,113,0.44); background: rgba(248,113,113,0.1); }
.align-sig-said.is-mixed   { color: #f5c842; border-color: rgba(245,200,66,0.42); background: rgba(245,200,66,0.1); }

/* record: same direction hues, but a squared-off institutional frame — and the
   weight rungs from .pdxst-pat so thin never shouts. */
.align-sig-rec {
  border-radius: 0.42rem; color: #93b4e6;
  background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.4);
}
.align-sig-rec.is-support { color: #86efac; border-color: rgba(74,222,128,0.46); background: rgba(74,222,128,0.12); }
.align-sig-rec.is-oppose  { color: #fca5a5; border-color: rgba(248,113,113,0.46); background: rgba(248,113,113,0.12); }
.align-sig-rec.is-mixed   { color: #f5c842; border-color: rgba(245,200,66,0.44); background: rgba(245,200,66,0.12); }
.align-sig-rec.w-strong { background: rgba(10,15,30,0.4); }
/* Thin and flat are told apart by border style and fill, not by opacity — the same
   correction made in stance-tree.css. A one-vote read is a weaker finding, which the
   dashed edge says; it is not a less readable fact. */
.align-sig-rec.w-thin { border-style: dashed; background: none; font-weight: 700; }
.align-sig-rec.w-flat { border-style: dotted; border-color: rgba(159,180,212,0.34); color: #9fb4d4; background: none; }
/* THE BASELINE MARK. A record-derived stand-in for an issue with no stated
   position on file: same record colours, but dashed and tagged, so a reader
   scanning a column of chips can see at a glance which sides were spoken and
   which were read off the votes. Never rendered on a stated row. */
.align-sig-rec.is-baseline { border-style: dashed; }
.align-sig-base {
  margin-left: 0.3rem; padding: 0 0.28rem; border-radius: 0.28rem;
  font-size: 0.54rem; letter-spacing: 0.045em; text-transform: uppercase; font-weight: 800;
  color: #9fb4d4; background: rgba(148,163,184,0.16); border: 1px solid rgba(148,163,184,0.3);
}
.align-cov-base { display: block; margin-top: 0.28rem; font-size: 0.68rem; line-height: 1.45; color: #8ea2c0; }

/* ── coverage honesty note — how much of what you asked this mode can answer,
      which issues it cannot, and that they are NOT quietly scored from words. */
.align-cov-note {
  display: flex; align-items: flex-start; gap: 0.45rem;
  font-family: 'Barlow', sans-serif; font-size: 0.72rem; line-height: 1.5;
  color: #9fb4d4; padding: 0.5rem 0.65rem; margin: 0.45rem 0;
  background: rgba(96,165,250,0.06);
  border: 1px solid rgba(96,165,250,0.22);
  border-left: 3px solid rgba(96,165,250,0.5);
  border-radius: 0.5rem;
}
.align-cov-ico { flex-shrink: 0; font-size: 0.9rem; line-height: 1.4; }
.align-cov-txt { min-width: 0; }
.align-cov-note b { color: #cfe0f8; font-weight: 700; }
.align-cov-miss {
  display: block; margin-top: 0.28rem; font-size: 0.68rem; line-height: 1.45; color: #8ea2c0;
}
.align-cov-wall { display: block; margin-top: 0.28rem; font-size: 0.68rem; line-height: 1.45; color: #8ea2c0; }
/* sparse is a warning, not an error — amber frame, same voice */
.align-cov-note.is-sparse {
  background: rgba(245,200,66,0.07); border-color: rgba(245,200,66,0.3); border-left-color: rgba(245,200,66,0.6);
}
.align-cov-note.is-sparse b { color: #fde68a; }
.align-cov-note.is-none { background: rgba(10,15,30,0.5); border-color: rgba(148,163,184,0.24); border-left-color: rgba(148,163,184,0.45); }
.align-cov-note.is-pending { border-left-style: dashed; }

/* ── the empty state where a match bar would be: says which mode is dry and
      offers the way back. Never a number, never a silent fallback. ────────── */
.align-mode-gap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem;
  font-family: 'Barlow', sans-serif; font-size: 0.72rem; line-height: 1.45; color: #9fb4d4;
  padding: 0.45rem 0.6rem; margin-top: 0.4rem;
  background: rgba(10,15,30,0.5);
  border: 1px dashed rgba(148,163,184,0.3);
  border-radius: 0.6rem;
}
.align-mode-gap b { color: #cfe0f8; font-weight: 700; }
.align-mode-swap {
  cursor: pointer; font: inherit;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: #c4b5fd; background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.42); border-radius: 999px;
  padding: 0.24rem 0.6rem; min-height: 32px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.align-mode-swap:hover, .align-mode-swap:focus-visible {
  color: #e6ddff; background: rgba(139,92,246,0.22); border-color: rgba(168,85,247,0.6);
}

@media (max-width: 768px) {
  /* Thumb-sized targets and a stacked toggle: on a phone the two lanes read as
     a list of two choices rather than a cramped pair of pills. */
  .align-mode-row { padding: 0.55rem; }
  .align-mode-segs { width: 100%; flex-wrap: nowrap; }
  .align-mode-seg { flex: 1 1 0; justify-content: center; min-height: 40px; font-size: 0.72rem; padding: 0.42rem 0.5rem; white-space: normal; }
  .align-mode-row.is-compact .align-mode-seg { min-height: 38px; font-size: 0.68rem; }
  .align-mode-swap { min-height: 38px; padding: 0.4rem 0.75rem; }
  .align-sig { font-size: 0.68rem; white-space: normal; }
  .align-sig-n { font-size: 0.64rem; }
  .align-compact-mode { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .align-mode-seg, .align-mode-swap { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   PROVENANCE MARKS — the visible difference between "they said this" and
   "their record did this". Every scored row on every alignment surface now
   carries one, because the fallback that fills the coverage gaps is only
   honest if it is legible as a fallback. The record glyph is 🏛 throughout;
   a baseline row additionally gets the "From the record" tag and a dashed
   edge, so it never reads as a spoken promise.
   ───────────────────────────────────────────────────────────────────────── */
.align-src-mark {
  display: inline-flex; align-items: center; gap: 0.22rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 0.3rem; padding: 0.04rem 0.3rem; white-space: nowrap;
}
.align-src-mark.is-said { color: #a5b4fc; background: rgba(129,140,248,0.13); }
.align-src-mark.is-record,
.align-src-mark.is-baseline { color: #8fa3bf; background: rgba(143,163,191,0.12); }
.align-src-mark.is-baseline { border: 1px dashed rgba(143,163,191,0.45); }
.align-src-mark.is-thin { opacity: 0.82; }
.align-src-mark-lb { letter-spacing: 0.05em; }
.align-src-mark-thin { letter-spacing: 0.07em; opacity: 0.85; }

/* Lane markers on the compact driver chips. */
.align-driver-chip.is-baseline { border-style: dashed; }
.align-driver-chip.is-thin { opacity: 0.86; }
.align-driver-src { font-size: 0.62rem; opacity: 0.75; }
.align-driver-base {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #8fa3bf;
}
.align-drivers-note {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.04em;
  color: #8fa3bf; white-space: nowrap;
}
.align-card-src { color: #8fa3bf; font-size: 0.94em; }

/* ─────────────────────────────────────────────────────────────────────────
   WHY THIS MATCH — the ranked, signed, provenance-tagged answer to "which of
   my issues actually moved this number, and what was each one built on?"
   ───────────────────────────────────────────────────────────────────────── */
.align-why {
  background: rgba(10,15,30,0.42); border: 1px solid rgba(139,92,246,0.18);
  border-radius: 0.7rem; padding: 0.65rem 0.75rem; margin-bottom: 0.9rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.align-why-head {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.06em; color: #c4b5fd; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 0.35rem;
}
.align-why-head b { text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.64rem; }
.align-why-sub { font-size: 0.66rem; color: #8fa3bf; letter-spacing: 0.03em; }
.align-why-grp { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.4rem; }
.align-why-grp-lab {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem;
  letter-spacing: 0.07em; text-transform: uppercase; padding-top: 0.22rem;
}
.align-why-grp-lab.is-up { color: #86efac; }
.align-why-grp-lab.is-down { color: #fca5a5; }
.align-why-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; min-width: 0;
}
.align-why-row {
  display: inline-flex; align-items: center; gap: 0.32rem;
  background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 0.5rem; padding: 0.16rem 0.45rem;
}
.align-why-row.is-thin { border-style: dashed; opacity: 0.88; }
.align-why-lab { font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; color: #d7e2f2; }
.align-why-star { color: #fcd34d; margin-right: 0.15rem; }
.align-why-pct { font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; line-height: 1; }
.align-why-mix {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; line-height: 1.5;
  color: #9fb4d4; letter-spacing: 0.02em; margin: 0;
}
.align-why-wall {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; line-height: 1.45;
  color: #8ea2c0; margin: 0; font-style: italic;
  border-top: 1px dashed rgba(255,255,255,0.12); padding-top: 0.38rem;
}
.align-why-wall b { font-style: normal; color: #b9c8dd; }

/* Warming state: a hole we have not finished reading is not a hole we know is
   empty, and the two must not look alike. */
.align-cov-pend { display: block; margin-top: 0.28rem; font-size: 0.68rem; line-height: 1.45; color: #93a7c4; }
.align-cov-note.is-pending { border-left-color: rgba(147,167,196,0.5); }
.align-mode-gap.is-pending { opacity: 0.9; }

@media (max-width: 768px) {
  .align-why { padding: 0.55rem 0.6rem; }
  .align-why-grp { gap: 0.3rem; }
  .align-drivers-note { white-space: normal; }
}
