.leaflet-container {
  background: #d8e5ef;
  color: #111827;
}

/* ─── 1.30.1 SPC layout — single-line options + 2x2 quadrant grid ─────── */

.spc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "options options"
    "products outlook"
    "watches  mcds";
  gap: 0.9rem;
  /* Inherit width/padding from .wx-main; only the internal layout changes. */
}
.spc-options    { grid-area: options; }
.spc-quad--products { grid-area: products; display: flex; flex-direction: column; }
.spc-quad--outlook  { grid-area: outlook; }
.spc-quad--watches  { grid-area: watches; }
.spc-quad--mcds     { grid-area: mcds; }

.spc-quad-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.5rem;
}
.spc-quad-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.spc-quad-note {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Stack to one column on narrow viewports — quadrants flow vertically. */
@media (max-width: 960px) {
  .spc-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "options"
      "products"
      "outlook"
      "watches"
      "mcds";
  }
}

/* 2-up variant: options bar + two side-by-side quads. Used by LSR and
 * any other module that has a list+map pair but doesn't need a 2x2. */
.spc-grid--2up {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "options options"
    "products outlook";
}
@media (max-width: 960px) {
  .spc-grid--2up {
    grid-template-columns: 1fr;
    grid-template-areas:
      "options"
      "products"
      "outlook";
  }
}

/* ─── Options bar — one line, icon-first ─────────────────────────────── */
.spc-options {
  background: linear-gradient(180deg, rgba(16, 32, 54, 0.92), rgba(9, 20, 32, 0.95));
  border: 1px solid rgba(61, 103, 132, 0.36);
  border-radius: 1rem;
  padding: 0.55rem 0.85rem;
  box-shadow: var(--shadow);
}
.spc-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
}
.spc-options-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.spc-options-field select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.82rem;
}
.spc-options-label { font-size: 0.78rem; color: var(--muted); }

/* .btn-icon-pill moved to assets/css/styles.css so every module's
 * profile bar gets the same flat (no-circle) treatment. */

/* Profile bar (rendered by FilterProfiles) — push to right of options row. */
.spc-options-profiles { margin-left: auto; }
.filter-profiles-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.filter-profiles-bar select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
}

/* Type toggles (Outlooks / Watches / MCDs) — pressed-state styling. */
.spc-type-toggles {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  overflow: hidden;
}
.spc-type-chip {
  appearance: none;
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.spc-type-chip + .spc-type-chip { border-left: 1px solid var(--border); }
.spc-type-chip--active {
  background: rgba(242, 193, 78, 0.18);
  color: var(--text);
  font-weight: 600;
}

/* ─── Outlook quadrant inline subcontrols ─────────────────────────────── */
.spc-subcontrols--inline {
  padding: 0;
  margin: 0 0 0.5rem;
  max-width: none;
}

/* Sub-controls row (only inside Outlook quadrant header). */
.spc-subcontrols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: center;
}
.spc-segmented {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  overflow: hidden;
}
.spc-chip {
  appearance: none;
  background: transparent;
  color: var(--text);
  border: none;
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.spc-chip + .spc-chip { border-left: 1px solid var(--border); }
.spc-chip:hover:not(.spc-chip--disabled) { background: rgba(242, 193, 78, 0.08); }
.spc-chip--active {
  background: var(--accent);
  color: #101820;
}
.spc-chip--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Risk-tier legend chips — slightly tighter inside the inline subcontrols. */
.spc-tier-legend {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}
.spc-tier-chip {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  /* Neutral default, readable on both the dark and light panel glass.
   * Products without a categorical tier ("Less than 5% all areas",
   * "Continental United States") used to fall through to near-black text
   * on a transparent chip, which vanished on the dark floater. Coloured
   * tiers below set their own background AND text colour. */
  color: var(--text);
  background: rgba(127, 127, 127, 0.22);
  border: 1px solid rgba(127, 127, 127, 0.35);
}
.spc-tier-chip[data-tier] { border-color: rgba(0, 0, 0, 0.15); }
.spc-tier-chip[data-tier="TSTM"] { background: #c1e9c1; color: #0a0a0a; }
.spc-tier-chip[data-tier="MRGL"] { background: #66a366; color: #fff; }
.spc-tier-chip[data-tier="SLGT"] { background: #f7e37e; color: #0a0a0a; }
.spc-tier-chip[data-tier="ENH"]  { background: #e89a4f; color: #0a0a0a; }
.spc-tier-chip[data-tier="MDT"]  { background: #d43d3d; color: #fff; }
.spc-tier-chip[data-tier="HIGH"] { background: #d14dd1; color: #fff; }
.spc-tier-chip[data-tier="ELEV"] { background: #f7e37e; color: #0a0a0a; }
.spc-tier-chip[data-tier="CRIT"] { background: #e89a4f; color: #0a0a0a; }
.spc-tier-chip[data-tier="EXTM"] { background: #d43d3d; color: #fff; }
.spc-tier-chip[data-tier="IDRT"] { background: #b0b0b0; color: #0a0a0a; }
.spc-tier-chip[data-tier="SDRT"] { background: #8a8a8a; color: #fff; }

/* ─── Product list — watch group cards ────────────────────────────────── */
.spc-quad--products .wx-list {
  /* Block layout (not flex) so cards size purely by content height.
   * Earlier flex-column was shrinking children when content exceeded the
   * max-height budget instead of producing a scrollbar — squished the
   * first card down to a single line. */
  display: block;
  overflow-y: auto;
  /* Bound the list height so the right-column maps stay visible. With
   * 5 entries per page each card stays full-size and pagination handles
   * the rest. */
  max-height: 26rem;
  padding-right: 0.2rem;
}
.spc-quad--products .wx-list > .spc-card,
.spc-quad--products .wx-list > .spc-group {
  margin-bottom: 0.45rem;
}
.spc-quad--products .wx-list > .spc-card:last-of-type,
.spc-quad--products .wx-list > .spc-group:last-of-type {
  margin-bottom: 0;
}

/* Card rendering — fully isolated. No inheritance from .alert-card or
 * .compact-card so cascading ::after gradient overlays, overflow:hidden,
 * and grid-gap surprises can't make content invisible. */
.spc-card {
  display: block;
  padding: 0.45rem 0.7rem;
  background: linear-gradient(180deg, rgba(16, 32, 54, 0.55), rgba(9, 20, 32, 0.65));
  border: 1px solid rgba(61, 103, 132, 0.32);
  border-left: 4px solid var(--event-color, var(--accent));
  border-radius: 0.5rem;
  color: var(--text);
}
.spc-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.spc-card-title {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}
.spc-card-action {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.35rem;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spc-card-action:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.spc-card-body {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.35;
  margin-bottom: 0.2rem;
  /* Watches can list 20+ counties — keep the card scannable by clamping
   * to two lines; full text is in the preview overlay. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spc-card-times {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}
.spc-card--child {
  border-left-width: 3px;
  background: rgba(8, 16, 24, 0.6);
}

/* Watch group — same colored-border treatment so the operator can scan
 * the list by color even before reading any text. */
.spc-group {
  border: 1px solid rgba(61, 103, 132, 0.32);
  border-left: 4px solid var(--event-color, var(--accent));
  border-radius: 0.55rem;
  background: rgba(8, 16, 24, 0.35);
  overflow: hidden;
}
.spc-group--open {
  border-color: rgba(242, 193, 78, 0.5);
  border-left-color: var(--event-color, var(--accent));
}
.spc-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}
.spc-group-head:hover { background: rgba(242, 193, 78, 0.05); }
.spc-group-head:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.spc-group-twirl {
  display: inline-block;
  width: 0.85rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.spc-group-title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}
.spc-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  padding: 0 0.7rem 0.5rem 1.65rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.spc-group-hazards {
  color: var(--text);
  font-weight: 600;
}
.spc-group-times { color: var(--muted); }
.spc-group-count {
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.08rem 0.45rem;
  border-radius: 0.3rem;
  flex: 0 0 auto;
}

.spc-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.spc-pill--pds    { background: #7e22ce; color: #fff; }
.spc-pill--cancel { background: rgba(120, 120, 120, 0.45); color: #fff; }

.spc-group-children {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.55rem 1.65rem;
  border-top: 1px solid rgba(61, 103, 132, 0.32);
  background: rgba(0, 0, 0, 0.15);
}
.spc-child-card {
  border-left-width: 3px;
}
.spc-subtype-chip {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

/* Pager — sticky at the bottom of the products list. */
.spc-pager {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.5rem 0 0.2rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(61, 103, 132, 0.32);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(9, 20, 32, 0.9), rgba(9, 20, 32, 0.98));
}
.spc-pager-btn {
  appearance: none;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.spc-pager-btn:hover:not(:disabled) { background: rgba(242, 193, 78, 0.1); }
.spc-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.spc-pager-pos {
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 6rem;
  text-align: center;
}

/* Map quads — keep canvas tall enough to be useful but not dominant. The
 * 280px floor lets all four quadrants fit on a 1080p display without the
 * watch/mcd row falling below the fold. Larger screens get the same
 * floor; flex layout fills any extra. */
.spc-quad.map-shell { padding: 0.7rem 0.85rem 0.85rem; }
.spc-quad.map-shell .map-canvas { min-height: 280px; height: 320px; }

/* Tab-count chip kept small for the type-toggle pills. */
.spc-tab-count {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 0.2rem;
}
.spc-type-chip--active .spc-tab-count { color: var(--accent); }