/* voter-tool.css — Broad Daylight app skin for the Voter Tool surface.
   MOBILE (<=760) ONLY. Desktop (>760) inherits the existing shell untouched.
   Tokens only (theme.css). Composes the shared sheet (.sheet/.sheet-chip) and
   skeletons (.sk*). No raw hex, no rainbow, no emoji, no dotted status pills. */

@media (max-width:760px){
  /* Warm ground behind the cards; cards sit on --surface white. */
  .vt{max-width:100%}
  .vt-list{gap:14px}

  /* ---- Home header (Your voters) ---- */
  .vt-home-head{margin:0 0 14px}
  .vt-home-h1{font-size:26px}
  .vt-home-sub{font-size:14px}
  .vt-setup-pill{align-self:flex-start}

  /* ---- App card: --surface + thin line + radius + offset stamp shadow ---- */
  .vt .card,
  .vt-list-card{
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-pop-sm);
    padding:16px;
  }
  .vt-list-top{margin:0 0 12px}

  /* ---- Tool grid: 1 tool card per row on phone, stamp cards ---- */
  .vt-toolgrid{grid-template-columns:1fr;gap:10px;margin:0 0 16px}
  .vt-toolcard{
    border:2px solid var(--ink);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-pop-sm);
    padding:14px 16px;
    min-height:52px;
    justify-content:center;
  }
  .vt-toolcard:active{transform:translate(1px,2px);box-shadow:0 0 0 var(--ink)}
  .vt-toolcard__h{font-size:16px}

  /* ---- Setup checklist ---- */
  .vt-setup{border-radius:var(--r-lg)}
  .vt-setup__lbl{letter-spacing:var(--ls-eyebrow)}

  /* ---- Section eyebrow (uppercase 12px letterspaced muted) ---- */
  .vt-crm-cap{letter-spacing:var(--ls-eyebrow)}

  /* ---- Inputs / search: 16px (no iOS zoom), min-height, radius ---- */
  .vt .card input[type="text"],
  .vt .card input[type="search"],
  .vt .card input[type="email"],
  .vt .card input[type="number"],
  .vt .card input[type="date"],
  .vt .card textarea{
    font-size:16px;
    min-height:48px;
    border:1.5px solid var(--line);
    border-radius:var(--r-lg);
    background:var(--surface);
  }
  .vt .card textarea{min-height:96px}
  .vt-row input,.vt-row textarea{max-width:100%}
  .vt-row{align-items:stretch}

  /* ---- Stat tiles: 2-across on phone (Doors/Conversations/Supporters wrap) ---- */
  .vt-stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .vt-stat{
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-pop-sm);
    padding:14px;
  }
  .vt-stat.is-pop{box-shadow:var(--shadow-pop-sm)}
  .vt-stat-l{letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-eyebrow)}
  .vt-stat-n{font-size:26px}

  /* ---- The CRM hub already stacks below 760; tidy the spacing ---- */
  .vt-crm-hub{gap:16px}
  .vt-crm-matching{border-radius:var(--r-lg)}

  /* ---- One-tap preset lists: full-width stacked quick-starts ---- */
  .vt-crm-presets{gap:10px}
  .vt-crm-preset{width:100%;min-height:48px;display:flex;align-items:center}

  /* ---- Data table: comfortable tap rows ---- */
  .vt-crm-table td{padding:12px 10px 12px 0}
  .vt-td-act{min-height:44px}

  /* =========================================================
     FILTERS — mobile: the inline .vt-filter block is relocated
     into the shared sheet at open. On the list we show a ghost
     "Filters" pill + active-filter chips. (Q571 mobile skin)
     ========================================================= */
  .vt-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 4px}
  .vt-filters-open{
    display:inline-flex;align-items:center;gap:7px;
    min-height:44px;padding:9px 16px;
    border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
    background:var(--surface);color:var(--ink);
    font-weight:600;font-size:14px;cursor:pointer;
  }
  .vt-filters-open:hover{border-color:var(--ink)}
  .vt-filters-open:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .vt-filters-open .vt-filters-n{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;
    border-radius:var(--r-pill);
    background:var(--accent-wash);color:var(--accent);
    font-size:12px;font-weight:700;
  }
  /* active-filter chips row (read-out of what's applied) */
  .vt-active{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
  .vt-active:empty{display:none}
  .vt-active-chip{
    display:inline-flex;align-items:center;gap:6px;
    min-height:44px;padding:5px 4px 5px 12px;
    border-radius:var(--r-pill);
    background:var(--accent-wash);color:var(--accent-strong);
    border:1.5px solid var(--accent-soft);
    font-size:13px;font-weight:600;
  }
  .vt-active-chip button{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;min-height:44px;min-width:44px;padding:0;margin:0;
    border:0;border-radius:var(--r-pill);
    background:transparent;color:var(--accent-strong);
    font-size:15px;line-height:1;cursor:pointer;
  }
  .vt-active-chip button:hover{background:var(--accent-soft)}
  .vt-active-chip button:focus-visible{outline:var(--focus-ring);outline-offset:1px}

  /* When the filter block is docked inside the sheet, drop its own
     heading (the sheet header owns it) and let chips read as sheet chips. */
  .sheet .vt-filter{margin:0}
  .sheet .vt-filter > .vt-crm-cap{display:none}
  .sheet .vt-fgroup{margin:0 0 4px}
  .sheet .vt-fg-h{display:block;margin:0 0 8px;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
  /* the filter toggle pills become sheet-chip sized inside the sheet */
  .sheet .vt-pill{min-height:44px;margin:0 8px 8px 0}
  .sheet .vt-reg-in{min-height:44px;font-size:16px}

  /* Hide the inline filter block on the list once it lives behind the sheet
     (JS sets data-vt-docked on the CRM box when the sheet is wired). */
  [data-crm][data-vt-docked] > .vt-crm-hub .vt-filter{display:none}

  /* =========================================================
     VOTER LOOKUP results as cards (name + meta + status chip)
     ========================================================= */
  .vt-crm-preview[data-vr-results] li,
  .vt-crm-preview[data-vf-results] li{
    border-top:0;padding:0;margin:0 0 10px;
  }
  .vt-crm-preview[data-vr-results] [data-vr-open]{
    display:block;width:100%;text-align:left;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-pop-sm);
    padding:14px 16px;min-height:52px;
    font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);
    text-decoration:none;
  }
  .vt-crm-preview[data-vr-results] [data-vr-open]:active{transform:translate(1px,2px);box-shadow:0 0 0 var(--ink)}

  /* voter detail: name in Bricolage, status chip as soft pill */
  .vr-head h4{font-family:var(--font-display);font-size:19px}
  .pill.vr-signed{
    background:var(--ok-soft);color:var(--ok);
    border:0;border-radius:var(--r-pill);
    padding:5px 12px;font-size:13px;font-weight:600;
  }
  .vr-tag{border-radius:var(--r-pill)}

  /* =========================================================
     SIGNATURES verifier — dual bar + scan card
     ========================================================= */
  .vf-card{border-radius:var(--r-lg);box-shadow:var(--shadow-pop-sm)}
  .vf-valid{font-size:28px}
  /* verifier search results as tidy rows */
  .vt-crm-preview[data-vf-results] li{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border-top:0;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--r);
    padding:10px 12px;
  }
  .vt-crm-preview[data-vf-results] [data-vf-toggle]{flex:0 0 auto;min-height:44px}
  /* signed = ok-soft status chip look on the toggle when active */
  .vt-crm-preview[data-vf-results] [data-vf-toggle][data-signed="1"]{
    background:var(--ok-soft);border-color:var(--ok);color:var(--ok);
  }
}

/* Reduced motion: the press-in transforms are decorative, drop them. */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .vt-toolcard:active,
  .vt-crm-preview[data-vr-results] [data-vr-open]:active{transform:none}
}