:root{
  --dc-red:#e21836;
  --dc-white:#ffffff;
  --dc-navy:#0d2b4d;
  --ink:#0b1320;
  --muted:#5d6b80;
  --ring:rgba(226,24,54,.35);
  --radius:18px;
  --shadow:0 8px 24px rgba(13,43,77,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.55;background:#f7f9fc;color:var(--ink)}
a{color:var(--dc-red);text-decoration:none;font-weight: bold;}
a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:var(--dc-white);color:var(--ink);box-shadow:var(--shadow)}
.site-header::after{content:"";display:block;height:6px;background:var(--dc-red);} /* thin red bar */
.shell{max-width:1100px;margin-inline:auto;padding:10px 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:90px;width:auto;display:block}

/* Hamburger */
.hamburger{inline-size:44px;block-size:44px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:transparent;color:var(--ink);cursor:pointer;z-index:1001}
.hamburger:focus{outline:3px solid var(--ring);outline-offset:2px}
.hamburger .bars{width:22px;height:16px;position:relative}
.hamburger .bars::before,.hamburger .bars::after,.hamburger .bar{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px}
.hamburger .bar{top:7px}
.hamburger .bars::before{top:0}
.hamburger .bars::after{bottom:0}

/* Drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,20,30,.45);backdrop-filter:saturate(140%) blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:999}
.drawer{position:fixed;inset-block:0;inset-inline:auto 0;width:min(360px,86vw);background:#fff;transform:translateX(100%);transition:transform .3s ease;box-shadow:-8px 0 24px rgba(0,0,0,.2);z-index:1000}
.drawer header{padding:18px 20px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between}
.drawer nav{padding:8px 12px}
.drawer a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;color:#0b1320}
.drawer a:hover{background:#f2f5fb;color:var(--dc-red)}
.drawer .go{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #e6ecf5;border-radius:10px}
.drawer-open .drawer{transform:translateX(0)}
.drawer-open .drawer-backdrop{opacity:1;visibility:visible}

/* Hero */
.hero{background:var(--dc-navy);color:var(--dc-white);padding:56px 20px}
.hero .shell{display:grid;gap:20px}
.hero h1{margin:0;font-weight:900;font-size:clamp(28px,4vw,44px)}
.hero p{margin:0;opacity:.95;max-width:65ch}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.cta a{background:var(--dc-red);color:#fff;padding:12px 16px;border-radius:14px;font-weight:700;box-shadow:var(--shadow)}
.cta a.secondary{background:#fff;color:var(--dc-navy);border:1px solid #e3e9f3}

/* Content card */
main{padding:32px 20px}
.content{max-width:900px;margin-inline:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.content h2{margin-top:0;font-size:clamp(22px,3vw,32px)}
.content h3{margin-top:26px}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#f3f5f9;color:#3c4c66;font-weight:700;letter-spacing:.2px}

/* Footer */
footer{margin-top:40px;background:#0f1b2b;color:#dbe6ff}
.spread{padding:28px 20px}
.spread .wrap{max-width:1000px;margin-inline:auto;display:grid;gap:20px}
.spread h2{margin:0;font-size:clamp(20px,2.6vw,28px)}
.social-links{display:flex;gap:16px;flex-wrap:wrap}
.social-links a{color:#eaf1ff;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#121f34;border-radius:12px}
.social-links a:hover{background:#16253e;color:#fff}
.social-links svg{width:20px;height:20px}
.legal{padding:18px 20px;border-top:1px solid rgba(219,230,255,.12);font-size:14px;color:#a5b4d6}



/* Soapbox Actions form additions */

.target-address {
  margin: 0;
}

.target-phone a {
  padding: 5px 6px;
  font-weight: 500;
}

div.target {
	margin-bottom: 30px;
}

div.actions-view-thankyou .target-name {
  margin: 0px;
}


/* ================================
   DC is ALL of US — Actions Form polish
   Scope: only within the Actions view page container
   ( <div id="page" class="sbx actions actions-view-action lay-1col"> )
   ================================ */

.actions.actions-view-action {
  /* Local tokens (inherit your brand vars with sensible fallbacks) */
  --c-text: var(--ink, #0b1320);
  --c-muted: var(--muted, #5d6b80);
  --c-border: #e5e7eb;
  --c-border-strong: #d1d5db;
  --c-surface: #ffffff;
  --c-primary: var(--dc-red, #e21836);
  --c-primary-600: #c4122f;
  --c-danger: #b91c1c;
  --rad: 12px;
  --rad-sm: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --input-h: 44px;     /* touch target min */
  --font-size: 16px;   /* avoid iOS zoom on focus */
}

/* Base typography inside the scope */
.actions.actions-view-action,
.actions.actions-view-action form {
  color: var(--c-text);
  font-size: var(--font-size);
}

/* Form "card" feel without changing markup */
.actions.actions-view-action form {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
}

/* Generic field grouping (covers most CMS/Actions markups) */
.actions.actions-view-action .control-group,
.actions.actions-view-action .form-group,
.actions.actions-view-action .field,
.actions.actions-view-action .sbx-field,
.actions.actions-view-action .sbx-row {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.1rem;
}

/* Labels */
.actions.actions-view-action label,
.actions.actions-view-action .control-label,
.actions.actions-view-action .sbx-label {
  font-weight: 700;
  line-height: 1.25;
}

/* Help/hint text */
.actions.actions-view-action .help-block,
.actions.actions-view-action .help-text,
.actions.actions-view-action .form-text,
.actions.actions-view-action .hint {
  color: var(--c-muted);
  font-size: .925rem;
}

/* Inputs, selects, textareas */
.actions.actions-view-action input[type="text"],
.actions.actions-view-action input[type="email"],
.actions.actions-view-action input[type="tel"],
.actions.actions-view-action input[type="url"],
.actions.actions-view-action input[type="number"],
.actions.actions-view-action input[type="search"],
.actions.actions-view-action input[type="password"],
.actions.actions-view-action input[type="date"],
.actions.actions-view-action input[type="time"],
.actions.actions-view-action input[type="datetime-local"],
.actions.actions-view-action select,
.actions.actions-view-action textarea {
  width: 100%;
  min-height: var(--input-h);
  padding: .65rem .9rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--rad-sm);
  background: #fff;
  color: var(--c-text);
  line-height: 1.3;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none; /* iOS normalize */
}

/* Textarea sizing */
.actions.actions-view-action textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus (with fallback if color-mix unsupported) */
@supports (box-shadow: 0 0 0 3px color-mix(in srgb, red 25%, transparent)) {
  .actions.actions-view-action input:focus,
  .actions.actions-view-action select:focus,
  .actions.actions-view-action textarea:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent);
  }
}
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 25%, transparent)) {
  .actions.actions-view-action input:focus,
  .actions.actions-view-action select:focus,
  .actions.actions-view-action textarea:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(226,24,54,.25);
  }
}

.actions.actions-view-action ::placeholder { color: #9ca3af; }

/* Disabled */
.actions.actions-view-action input[disabled],
.actions.actions-view-action select[disabled],
.actions.actions-view-action textarea[disabled] {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Native arrow for selects (consistent look) */
.actions.actions-view-action select {
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(50% - 3px),
                       calc(100% - 12px) calc(50% - 3px),
                       100% 0;
  background-size: 6px 6px, 6px 6px, 2.5rem 100%;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* Radios & checkboxes */
.actions.actions-view-action input[type="checkbox"],
.actions.actions-view-action input[type="radio"] {
  accent-color: var(--c-primary);
  width: 1.05rem;
  height: 1.05rem;
}
.actions.actions-view-action .options,
.actions.actions-view-action .radio,
.actions.actions-view-action .checkbox,
.actions.actions-view-action .sbx-options {
  display: grid;
  gap: .5rem;
}

/* Fieldset groups */
.actions.actions-view-action fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--rad);
  padding: 1rem;
  margin-bottom: 1.1rem;
}
.actions.actions-view-action legend {
  font-weight: 800;
  padding: 0 .25rem;
}

/* Validation */
.actions.actions-view-action .has-error input,
.actions.actions-view-action .has-error select,
.actions.actions-view-action .has-error textarea,
.actions.actions-view-action input.is-invalid,
.actions.actions-view-action select.is-invalid,
.actions.actions-view-action textarea.is-invalid {
  border-color: var(--c-danger);
}
@supports (box-shadow: 0 0 0 3px color-mix(in srgb, red 20%, transparent)) {
  .actions.actions-view-action .has-error input,
  .actions.actions-view-action .has-error select,
  .actions.actions-view-action .has-error textarea,
  .actions.actions-view-action input.is-invalid,
  .actions.actions-view-action select.is-invalid,
  .actions.actions-view-action textarea.is-invalid {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 20%, transparent);
  }
}
.actions.actions-view-action .error,
.actions.actions-view-action .invalid-feedback,
.actions.actions-view-action .validation-message {
  color: var(--c-danger);
  font-size: .9rem;
}

/* Buttons */
.actions.actions-view-action button,
.actions.actions-view-action .button,
.actions.actions-view-action input[type="submit"] {
  appearance: none;
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  min-height: var(--input-h);
  cursor: pointer;
  transition: background .2s, transform .02s, box-shadow .15s;
  box-shadow: var(--shadow-1);
}
.actions.actions-view-action button:hover,
.actions.actions-view-action .button:hover,
.actions.actions-view-action input[type="submit"]:hover {
  background: var(--c-primary-600);
}
.actions.actions-view-action button:active,
.actions.actions-view-action .button:active,
.actions.actions-view-action input[type="submit"]:active {
  transform: translateY(1px);
}

/* Toolbar-ish rows (if your form groups filters in a row) */
.actions.actions-view-action .form-toolbar {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (min-width: 900px) {
  .actions.actions-view-action .form-toolbar {
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
  }
  .actions.actions-view-action .toolbar-span-3 { grid-column: span 3; }
  .actions.actions-view-action .toolbar-span-4 { grid-column: span 4; }
  .actions.actions-view-action .toolbar-span-6 { grid-column: span 6; }
}

/* --- Results table polish (if the component renders a table/list) --- */
.actions.actions-view-action .results table,
.actions.actions-view-action table.sbx-results,
.actions.actions-view-action .actions-list table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-border);
  border-radius: var(--rad);
  overflow: hidden; /* rounds header corners */
  box-shadow: var(--shadow-1);
}
.actions.actions-view-action .results thead th,
.actions.actions-view-action table.sbx-results thead th,
.actions.actions-view-action .actions-list table thead th {
  background: #f7f9fc;
  font-weight: 800;
  text-align: left;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--c-border);
}
.actions.actions-view-action .results tbody td,
.actions.actions-view-action table.sbx-results tbody td,
.actions.actions-view-action .actions-list table tbody td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--c-border);
}
.actions.actions-view-action .results tbody tr:hover td,
.actions.actions-view-action table.sbx-results tbody tr:hover td,
.actions.actions-view-action .actions-list table tbody tr:hover td {
  background: #f9fafb;
}
.actions.actions-view-action .results tbody tr:last-child td,
.actions.actions-view-action table.sbx-results tbody tr:last-child td,
.actions.actions-view-action .actions-list table tbody tr:last-child td {
  border-bottom: 0;
}

/* Small note text */
.actions.actions-view-action .muted { color: var(--c-muted); }

/* =========================================
   “Who You’re Contacting” – modernized cards
   Scope: Actions view page only
   ========================================= */
.actions.actions-view-action :is(
  .who-youre-contacting,
  .who-youre-contacting-section,
  .contact-targets,
  .targets,
  .targets-list,
  .recipients,
  .officials
) {
  /* container spacing */
  margin: 18px 0;
}

/* Responsive grid for the targets list (works for ul/li or div children) */
.actions.actions-view-action :is(
  .who-youre-contacting,
  .who-youre-contacting-section,
  .contact-targets,
  .targets,
  .targets-list,
  .recipients,
  .officials
):is(ul, ol, div) {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Target card (match common child patterns) */
.actions.actions-view-action :is(
  .who-youre-contacting,
  .who-youre-contacting-section,
  .contact-targets,
  .targets,
  .targets-list,
  .recipients,
  .officials
) > :is(li, .target, .recipient, .official, .sbx-target, .person) {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  box-shadow: var(--shadow, 0 8px 24px rgba(13,43,77,.06));
  padding: 12px;
}

/* Avatar */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.avatar, .photo, .headshot, .image, .img, .pic) img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 50%;
  display: block; border: 1px solid #e6e6e6;
}

/* If no <img>, give a subtle placeholder circle */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.avatar, .photo, .headshot, .image, .img, .pic):not(:has(img)) {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #f1f4f9, #eaeef6);
  border: 1px solid #e6e6e6;
}

/* Text block */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.content, .info, .details, .body, .text) {
  display: grid; gap: 4px;
}

/* Name/title */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(h3, h4, .name, .official-name) {
  margin: 0; line-height: 1.2;
  font-weight: 800; color: var(--ink, #0b1320);
  font-size: clamp(16px, 1.6vw, 18px);
}

/* Role / office line */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.role, .title, .office, .position, .subtitle) {
  color: var(--muted, #5d6b80);
  font-size: 0.95rem;
}

/* Meta chips: party / state / district */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.meta, .tags, .chips) {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.actions.actions-view-action :is(.chip, .tag, .pill, .label, .badge) {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  background: #f3f5f9; color: #3c4c66; font-weight: 700; font-size: 12px;
  border: 1px solid #e6ecf5;
}
.actions.actions-view-action :is(.chip.party, .label.party) { background:#fff7f8; color:#7a1321; border-color:#ffe3e7; }

/* Contact actions */
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.actions, .cta, .contact, .buttons) {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}

/* Call / Email buttons (detect tel/mailto links) */
/*
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="tel:"],
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="mailto:"] {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background .2s, transform .02s, box-shadow .15s;
}
*/
/* Primary (Call) */
/*
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="tel:"] {
  background: var(--dc-red, #e21836);
  color: #fff; border: 1px solid var(--dc-red, #e21836);
}
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="tel:"]:hover { background:#c4122f; }
*/
/* Secondary (Email) */
/*
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="mailto:"] {
  background: #fff; color: var(--dc-navy, #0d2b4d);
  border: 1px solid #d1d9e8;
}
.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) a[href^="mailto:"]:hover { background:#f2f5fb; }
*/
/* Small links row: websites / social profiles */

.actions.actions-view-action :is(
  .target, .recipient, .official, .sbx-target, .person, li
) :is(.links, .profiles, .social) {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
}
.actions.actions-view-action :is(
  .links a, .profiles a, .social a
) {
  color: #3c4c66; text-decoration: none; border-bottom: 1px dotted #b6c1d6;
}
.actions.actions-view-action :is(.links a:hover, .profiles a:hover, .social a:hover) {
  color: var(--dc-red, #e21836); border-bottom-color: currentColor;
}

/* Compact on small screens */
@media (max-width: 520px) {
  .actions.actions-view-action :is(
    .who-youre-contacting,
    .who-youre-contacting-section,
    .contact-targets,
    .targets,
    .targets-list,
    .recipients,
    .officials
  ) > :is(li, .target, .recipient, .official, .sbx-target, .person) {
    grid-template-columns: 56px 1fr;
    padding: 10px;
  }
  .actions.actions-view-action :is(
    .target, .recipient, .official, .sbx-target, .person, li
  ) :is(.avatar, .photo, .headshot, .image, .img, .pic) img {
    width: 56px; height: 56px;
  }
}

.target-photo {
  width: auto !important;
}