/* ==========================================================================
   Putnam Watch - shares the main site's nav, footer, hero, and brand tokens
   (loaded from /styles.css alongside this file) so it reads as one more
   page of putnamyoungdemsfl.org instead of a separate property. Only the
   roster/filter/detail-dialog UI below is unique to this page; nothing
   here should redefine a token or class that /styles.css already owns.
   ========================================================================== */

:root {
  /* Status colors. Functional, not brand - kept/in-progress/broken/unclear
     need to read at a glance and stay visually distinct from river-blue/
     azalea-pink so a status tag is never mistaken for a link or a CTA.
     Amber and coral carry over unchanged from the original palette
     (amber-600 was already darkened once from the brand's literal value to
     clear 4.5:1 contrast at the 10px size these tags actually render at).
     Kept adds a green in that same dark-text-on-light-tint shape; unclear
     and no-promise-on-file now reuse the shared neutral tokens above
     instead of a one-off gray scale. */
  --green-700: #1B7A3D;
  --green-50: #E3F5E9;
  --amber-600: #96590C;
  --amber-50: #FAEEDA;
  --amber-100: #FAC775;
  --coral-600: #993C1D;
  --coral-50: #FAECE7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* CONTROLS */
.controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.25rem;
  padding: 2.5rem 0 1.5rem;
}
.control-group { display: flex; flex-direction: column; gap: 0.4rem; }
.control-group label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link);
}
.control-group input, .control-group select {
  font-family: inherit; font-size: 0.95rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text);
}
.control-group input:focus, .control-group select:focus { border-color: var(--river-blue); }

.result-count { font-size: 0.85rem; color: var(--text-muted); padding-bottom: 0.5rem; }

/* ROSTER CARD GRID */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem 0 4rem;
}
/* /styles.css's shared .card-grid > * rule caps children at 380px for its
   own flex-based grid; cancel that here since this grid's columns are sized
   by grid-template-columns instead and shouldn't be capped. */
.card-grid > * {
  max-width: none;
}
.official-card {
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--river-blue);
  border-radius: 4px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(15, 61, 107, 0.08);
  transition: border-top-color 0.15s;
}
.official-card:hover { border-top-color: var(--azalea-pink); }

/* Holds the level tag and the election badge side by side, so a card
   without an upcoming election doesn't leave a gap where the badge would be. */
.card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.card-level {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--link);
}
.election-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber-600); background: var(--amber-50); border: 1px solid var(--amber-100);
  padding: 0.15rem 0.5rem; border-radius: 2px; white-space: nowrap;
}
.card-name { font-family: var(--font-headline); font-weight: 700; font-size: 1.25rem; color: var(--heading); line-height: 1.3; }
.card-office { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; margin-bottom: 1rem; }

.promise-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.promise-item { font-size: 0.875rem; color: var(--text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; }
.promise-item--empty { color: var(--text-muted); font-style: italic; }

/* Button on every card that opens the shared detail dialog. Outlined instead
   of filled so it doesn't visually compete with the status tags above it. */
.detail-toggle {
  margin-top: 1rem; font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--link);
  background: none; border: 1px solid var(--link); border-radius: 4px;
  padding: 0.45rem 0.9rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.detail-toggle:hover { background: var(--link); color: var(--dark-river); }

.status-tag {
  /* max-width forces the longer labels ("No significant progress made") to
     wrap onto a couple of lines instead of stretching out as one long pill
     that shoves the promise text next to it into a narrow, awkward column.
     Short labels like "Kept" are well under this width, so they're
     unaffected and stay their normal compact size. */
  flex-shrink: 0; max-width: 88px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 2px; margin-top: 0.15rem; line-height: 1.3;
}
.status-kept        { background: var(--green-50); color: var(--green-700); }
.status-in-progress { background: var(--amber-50); color: var(--amber-600); }
.status-broken      { background: var(--coral-50); color: var(--coral-600); }
/* Same neutral treatment for both - neither one is a positive or negative
   finding, just two different reasons there's nothing more definite to
   report. */
.status-unclear,
.status-no-promise-on-file { background: var(--mist-gray); color: var(--text-muted); }

.no-results { text-align: center; color: var(--text-muted); padding: 3rem 0; }

/* OFFICIAL DETAIL DIALOG
   Native <dialog> instead of a hand-rolled modal - the browser already
   handles the focus trap, the Escape key, and the backdrop, so there's a
   lot less custom JS to get wrong. */
.detail-dialog {
  /* No `position` override here on purpose - the UA stylesheet already
     makes an open <dialog> `position: fixed` with its inset at 0, which is
     what centers it, and is also what lets .detail-close below use
     position: absolute against it without any help from this rule.

     `margin: auto` DOES need to be restated here, though: the page's own
     `* { margin: 0 }` reset up top wins over the UA stylesheet's
     `dialog { margin: auto }` (author styles always beat UA styles, tie in
     specificity or not), and margin:auto is what actually centers the box
     within that fixed, inset-0 position. Without restating it, the dialog
     was rendering pinned to the top-left corner. */
  margin: auto;
  background: var(--surface); color: var(--text);
  border: none; border-top: 3px solid var(--river-blue); border-radius: 4px;
  padding: 2rem; max-width: 560px; width: calc(100% - 2rem);
  box-shadow: 0 20px 60px rgba(15, 61, 107, 0.35);
}
.detail-dialog::backdrop { background: rgba(15, 61, 107, 0.55); }
.detail-close {
  position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--page-bg);
  color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.detail-close:hover { border-color: var(--link); color: var(--link); }
.detail-level { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); margin-top: 0.5rem; }
.detail-dialog h2 { font-family: var(--font-headline); font-weight: 700; font-size: 1.6rem; color: var(--heading); margin: 0.35rem 0 0.15rem; }
.detail-office { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.detail-promise-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.detail-promise-item { border-top: 1px solid var(--border); padding-top: 1rem; }
.detail-promise-item:first-child { border-top: none; padding-top: 0; }
.detail-promise-text { font-size: 0.9rem; color: var(--text); line-height: 1.6; margin: 0.4rem 0 0.5rem; }
.detail-promise-source { font-size: 0.8rem; font-weight: 600; color: var(--link); }
.detail-promise-source:hover { text-decoration: underline; color: var(--azalea-pink); }
.detail-promise-source--missing { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }

/* small screens: stack the controls */
@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr; }
}