/* Q800 — the SHEET: the app's ONE modal overlay pattern (SECTION4-REDLINES §4.2). Phone (≤760) = a bottom
   sheet that slides up from the bottom edge; desktop (≥761) = a centered dialog. One component, two staged
   sizes — the mobile pattern the §3 net-new flows compose (Voters filter · Canvass cut/assign/door · Events
   create · push). Tokens only, zero raw hex except the backdrop alpha on --ink.
   A11y: role="dialog" aria-modal, labelled by the title; focus trapped; focus returns to the invoker; body
   scroll locked only while open; dismiss = × (44×44) + backdrop tap + Esc + (sheet) grabber swipe-down.
   Reduced-motion collapses the slide to a fade / instant (the state change is the feedback). */

/* scrim — backdrop --ink at 40%; tap to dismiss */
.sheet-scrim{
  position:fixed;inset:0;z-index:200;
  background:rgba(18,16,22,.40);
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease,ease),visibility .22s;
  -webkit-tap-highlight-color:transparent;
}
.sheet-scrim.is-open{opacity:1;visibility:visible}

/* the sheet shell — bottom sheet on phone */
.sheet{
  position:fixed;z-index:201;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  background:var(--surface,#fff);
  border-top:1.5px solid var(--line,#E3E7ED);
  border-radius:var(--r-lg,16px) var(--r-lg,16px) 0 0;
  box-shadow:var(--shadow-soft-lg,0 12px 32px rgba(18,16,22,.10));
  max-height:82vh;max-height:82dvh;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(101%);
  transition:transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
  will-change:transform;outline:none;
}
.sheet.is-open{transform:translateY(0)}

/* grabber — 36×4 --line-strong, 10px pad; the swipe-down-to-dismiss affordance */
.sheet__grab{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:10px 0 6px;cursor:grab;touch-action:none}
.sheet__grab::before{content:"";width:36px;height:4px;border-radius:var(--r-pill,999px);background:var(--line-strong,#D8DCE2)}

/* header: title + sub (left), × close (right) */
.sheet__hd{flex:0 0 auto;display:flex;align-items:flex-start;gap:12px;padding:2px 16px 8px}
.sheet__ttl{flex:1 1 auto;min-width:0}
.sheet__title{margin:0;font-family:var(--font-display,inherit);font-weight:600;font-size:var(--fs-d4,19px);line-height:var(--lh-d4,1.18);color:var(--ink,#121016)}
.sheet__sub{margin:2px 0 0;font-size:var(--fs-small,14.5px);color:var(--muted,#56535F)}
.sheet__x{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid var(--line,#E3E7ED);background:var(--surface,#fff);cursor:pointer;color:var(--ink,#121016);
  border-radius:var(--r,12px);-webkit-tap-highlight-color:transparent;
}
.sheet__x:hover{background:var(--surface-sunken,#EFECE2)}
.sheet__x:focus-visible{outline:var(--focus-ring,3px solid var(--accent));outline-offset:var(--focus-offset,2px)}
.sheet__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* body: the scrolling content region — pad 16, scroll contained */
.sheet__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 16px}

/* section eyebrow inside a sheet (PAST DISPOSITION / PARTY / REGISTERED) */
.sheet__eyebrow{margin:18px 0 10px;font-size:var(--fs-eyebrow,12px);font-weight:700;letter-spacing:var(--ls-eyebrow,.14em);text-transform:uppercase;color:var(--muted,#56535F)}
.sheet__eyebrow:first-child{margin-top:6px}

/* chip grid inside a sheet — the filter/disposition chips (r-12 rounded rects, selected = accent fill) */
.sheet__chips{display:flex;flex-wrap:wrap;gap:10px}
.sheet-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1.5px solid var(--line-strong,#D8DCE2);border-radius:var(--r,12px);
  background:var(--surface,#fff);color:var(--ink,#121016);font:inherit;font-size:var(--fs-small,14.5px);font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.sheet-chip:focus-visible{outline:var(--focus-ring,3px solid var(--accent));outline-offset:2px}
.sheet-chip[aria-pressed="true"],.sheet-chip.is-on{background:var(--accent);border-color:var(--ink);color:var(--on-accent)}

/* footer: sticky action bar — Clear (ghost) + primary commit ("Show N …") */
.sheet__ft{
  flex:0 0 auto;display:flex;gap:10px;align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1.5px solid var(--line,#E3E7ED);background:var(--surface,#fff);
}
.sheet__ft .sheet__commit{flex:1 1 auto}

/* ≥761: the sheet becomes a CENTERED DIALOG (app tier — --r-lg + --shadow-pop; forms 440, rich 560) */
@media (min-width:761px){
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    width:min(440px,calc(100vw - 48px));max-height:86vh;
    border:1.5px solid var(--line,#E3E7ED);border-radius:var(--r-lg,16px);
    box-shadow:var(--shadow-pop,4px 6px 0 var(--ink));
    transform:translate(-50%,-46%) scale(.98);opacity:0;
    transition:opacity .14s var(--ease,ease),transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1));
  }
  .sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sheet--rich{width:min(560px,calc(100vw - 48px))}
  .sheet__grab{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sheet-scrim,.sheet{transition:opacity .12s linear !important}
  .sheet{transform:none;top:auto;bottom:0;left:0;right:0;width:auto}
  .sheet.is-open{transform:none}
  @media (min-width:761px){
    .sheet{top:50%;left:50%;right:auto;bottom:auto;width:min(440px,calc(100vw - 48px));transform:translate(-50%,-50%)}
    .sheet.is-open{transform:translate(-50%,-50%)}
  }
}