/* Extracted from state/index.html <style> block 1. Keep page-specific rules here until componentized. */
/* ---------- THEME (matches home + widgets) ---------- */
    :root {
      --solid-d:#0076BA; --likely-d:#00A2FF; --lean-d:#56C1FF;
      --toss-up:#929292; --lean-r:#FF968D; --likely-r:#FF644E; --solid-r:#EE220C;

      --bg-page:#f3f4f6;
      --bg-card:#ffffff;
      --bg-card-subtle:#f5f5f7;
      --border-subtle:#d4d4d8;

      --text-main:#111827;
      --text-muted:#6b7280;
      --text-strong:#000;

      --radius-card:24px;
      --radius-pill:999px;

      --shadow-soft:0 18px 40px rgba(15,23,42,0.10);
      --shadow-subtle:0 1px 3px rgba(15,23,42,0.15);
    }

    @media (prefers-color-scheme: dark){
      :root{
        --bg-page:#020617;
        --bg-card:#020617;
        --bg-card-subtle:#020617;
        --border-subtle:#1f2937;

        --text-main:#e5e7eb;
        --text-muted:#9ca3af;
        --text-strong:#f9fafb;

        --shadow-soft:0 18px 40px rgba(0,0,0,0.90);
        --shadow-subtle:0 1px 3px rgba(0,0,0,0.60);
      }
    }

    body{
      margin:0;
      background:var(--bg-page);
      color:var(--text-main);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
          }

    .container{
      max-width:1150px;
      margin:auto;
      padding:1.2rem;
    }

    .page-head{
      margin: 0.25rem 0 1.2rem;
      display:flex;
      flex-direction:column;
      gap:0.35rem;
      align-items:center;
      text-align:center;
    }

    .cm-label{
      font-size:0.8rem;
      text-transform:uppercase;
      letter-spacing:0.12em;
      font-weight:600;
      color:var(--text-muted);
    }

    .cm-h1{
      font-size: clamp(1.8rem, 2.6vw, 2.6rem);
      font-weight:800;
      letter-spacing:-0.03em;
      color:var(--text-strong);
      margin:0;
    }

    .sub{
      font-size:0.95rem;
      color:var(--text-muted);
      margin:0.1rem 0 0;
      line-height:1.35;
      max-width: 72ch;
    }

    
    /* ---------- US HERO (Outline + Title) ---------- */
    .us-hero{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0.35rem;
    }

    .us-outline-wrap{
      width:min(560px, 90vw);
      height: clamp(130px, 20vw, 220px);
      aspect-ratio: 2.35 / 1;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--text-muted);
      margin-top: 0.15rem;
      margin-bottom: 0.15rem;
    }

    .us-outline-wrap svg{
      display:block;
      width:100%;
      height:100%;
      overflow:visible;
    }

    /* Premium, consistent reveal (same vibe as state-specific) */
    #usOutlineSvg{ overflow: visible; }

    #usOutlineGroup{
      transform-box: fill-box;
      transform-origin: center;
      opacity: 1;
    }

    .us-outline-fill{
      fill: url(#cm-us-outline-fill);
      opacity: 0;
    }

    .us-outline-stroke-path{
      fill: none;
      stroke: url(#cm-us-outline-stroke);
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
    }

    .us-state-border-path{
      fill:none;
      stroke:var(--text-muted);
      stroke-width:1.15;
      stroke-linecap:round;
      stroke-linejoin:round;
      opacity:.58;
      vector-effect:non-scaling-stroke;
    }
#usOutlineSvg.outline-animate #usOutlineGroup{
      animation: cmUSOutlinePop 820ms cubic-bezier(.2,.9,.2,1) both;
    }
    #usOutlineSvg.outline-animate .us-outline-fill{
      animation: cmUSOutlineFill 900ms ease 520ms forwards;
    }

    @keyframes cmUSOutlinePop{
      from{ opacity: 0; transform: translateY(2px) scale(0.985); }
      55%{ opacity: 1; }
      to{ opacity: 1; transform: translateY(0px) scale(1); }
    }
    @keyframes cmUSOutlineFill{
      from{ opacity: 0; }
      to{ opacity: 0.14; }
    }

    @media (prefers-reduced-motion: reduce){
      #usOutlineSvg.outline-animate #usOutlineGroup,
      #usOutlineSvg.outline-animate .us-outline-fill{
        animation: none !important;
      }
      .us-outline-stroke-path{ opacity: 0.95; }
      .us-outline-fill{ opacity: 0.12; }
    }

    @media (prefers-color-scheme: dark){
    }
/* ---------- CARD ---------- */
    .cm-card{
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:var(--radius-card);
      padding:1.2rem 1.4rem;
      box-shadow:var(--shadow-soft);
    }

    /* ---------- CONTROLS ---------- */
    .controls{
      display:flex;
      gap:0.75rem;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin: 1rem 0 1.2rem;
    }

    .search{
      flex: 1 1 320px;
      display:flex;
      align-items:center;
      gap:0.6rem;
      background:var(--bg-card-subtle);
      border:1px solid var(--border-subtle);
      border-radius:18px;
      box-shadow:var(--shadow-subtle);
      padding:0.75rem 0.9rem;
    }

    .search input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      color:var(--text-main);
      font-size:0.95rem;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0.35rem 0.7rem;
      border-radius:var(--radius-pill);
      font-size:0.8rem;
      font-weight:700;
      white-space:nowrap;
      box-shadow:var(--shadow-subtle);
      border:1px solid var(--border-subtle);
      background:var(--bg-card-subtle);
      color:var(--text-muted);
      user-select:none;
    }

    .count{
      color:var(--text-muted);
      font-size:0.9rem;
      font-weight:600;
    }

    /* ---------- GRID ---------- */
    .grid{
      display:grid;
      gap:0.9rem;
      grid-template-columns: repeat(12, 1fr);
    }

    .tile{
      grid-column: span 4;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0.8rem;

      padding:0.95rem 1.05rem;
      border-radius:18px;
      border:1px solid var(--border-subtle);
      background:var(--bg-card-subtle);
      box-shadow:var(--shadow-subtle);
      text-decoration:none;

      transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
      color: inherit;
    }

    .tile:hover{
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--border-subtle) 70%, #0000);
      box-shadow: 0 10px 22px rgba(15,23,42,0.12);
    }

    @media (max-width: 980px){
      .tile{ grid-column: span 6; }
      .cm-card{ padding: 1.05rem 1.05rem; }
    }
    @media (max-width: 640px){
      .tile{ grid-column: span 12; }
    }

    .left{
      display:flex;
      flex-direction:column;
      gap:0.15rem;
      min-width:0;
    }

    .abbr{
      font-size:0.75rem;
      letter-spacing:0.14em;
      text-transform:uppercase;
      font-weight:800;
      color:var(--text-muted);
    }

    .name{
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-0.01em;
      color:var(--text-strong);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .hint{
      font-size:0.85rem;
      color:var(--text-muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .chev{
      flex:0 0 auto;
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid var(--border-subtle);
      background:var(--bg-card);
      box-shadow:var(--shadow-subtle);
      display:grid;
      place-items:center;
      color:var(--text-muted);
      font-weight:900;
    }

    .empty{
      margin-top: 1rem;
      color: var(--text-muted);
      line-height: 1.4;
    }