/* ========================================
   Per-screen layouts + new block-type styles (Phase 3)
   ======================================== */

/* -------- Stacked-card layout (e.g. Before-you-come) -------- */
.ios-mode .stacked-card {
  background: var(--ios-bg-card);
  border: 1px solid var(--ios-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin: 0 0 var(--space-sm);
  box-shadow: var(--shadow-card);
}

.ios-mode .stacked-card__kicker {
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ios-kicker);
  margin: 0 0 0.75rem;
}

/* -------- Content cards (reassurance, warning, default) -------- */
.ios-mode .content-card {
  background: var(--ios-bg-card);
  border: 1px solid var(--ios-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin: 0 var(--space-xs) 0.75rem;
  box-shadow: var(--shadow-card);
}

.ios-mode .content-card :is(h3, h4) {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ios-ink);
}

.ios-mode .content-card-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.ios-mode .content-card-head :is(h3, h4) {
  margin: 0;
}

.ios-mode .content-card-icon {
  width: 24px;
  height: 24px;
  color: var(--ios-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ios-mode .content-card-icon svg {
  width: 24px;
  height: 24px;
}

.ios-mode .content-card--reassurance {
  /* Soft accent surface with ink text, not white-on-green: white on
     #76B043 measures 2.60:1 (1.73:1 on the dark-mode lime). The variant is
     currently unused by content, but the CSS must be safe to author against. */
  background: var(--ios-accent-soft);
  color: var(--ios-ink);
  border-color: transparent;
  border-left: 4px solid var(--ios-accent);
}

.ios-mode .content-card--reassurance :is(h3, h4),
.ios-mode .content-card--reassurance p {
  color: var(--ios-ink);
}

.ios-mode .content-card--reassurance p {
  margin: 0;
  line-height: 1.45;
}

/* Warning card ("Return to the ED or call 911 if") - red gradient surface
   replaces the prior 4px green left bar. Light tokens (--section-red
   #FFBABA -> --section-red-end #FFA0A0) keep the urgency visible without
   going too saturated; dark tokens (#5C2828 -> #401818) carry the same
   reading in dark mode. Body / heading text inherits --ios-ink which has
   AA contrast on both stops in both themes. */
.ios-mode .content-card--warning {
  background: linear-gradient(135deg, var(--section-red), var(--section-red-end));
}

.ios-mode .content-card--warning .content-card-icon {
  color: var(--ios-ink);
}

/* -------- Checklist -------- */
.ios-mode .ios-checklist {
  list-style: none;
  margin: 0 var(--space-xs) 0.75rem;
  padding: 0 1rem;
  background: var(--ios-bg-card);
  border: 1px solid var(--ios-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.ios-mode .ios-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--ios-divider);
  min-height: 44px;
}

.ios-mode .ios-checklist-item:last-child {
  border-bottom: none;
}

.ios-mode .ios-checklist-checkbox {
  width: 22px;
  height: 22px;
  margin: 0.125rem 0 0;
  accent-color: var(--ios-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.ios-mode .ios-checklist-label {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ios-mode .ios-checklist-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ios-ink);
  line-height: 1.4;
}

.ios-mode .ios-checklist-desc {
  font-size: 0.9375rem;
  color: var(--ios-muted);
  line-height: 1.4;
}

/* -------- Urgency list -------- */
.ios-mode .ios-urgency-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.ios-mode .ios-urgency-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--ios-divider);
}

.ios-mode .ios-urgency-item:last-child {
  border-bottom: none;
}

.ios-mode .ios-urgency-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a1a;
  flex-shrink: 0;
}

/* CTAS-convention hues, deepened just enough that the white digit clears
   AAA 7:1 (blue 8.5:1, red 8.6:1, green 8.2:1; the old #0057B8/#C00000/
   #2E7D32 measured 6.9/6.5/5.1). */
.ios-mode .ios-urgency-item[data-level="1"] .ios-urgency-badge { background: #004A9E; color: #ffffff; }
.ios-mode .ios-urgency-item[data-level="2"] .ios-urgency-badge { background: #9E0000; color: #ffffff; }
.ios-mode .ios-urgency-item[data-level="3"] .ios-urgency-badge { background: #FFCC00; }
.ios-mode .ios-urgency-item[data-level="4"] .ios-urgency-badge { background: #245A27; color: #ffffff; }
.ios-mode .ios-urgency-item[data-level="5"] .ios-urgency-badge { background: #F4F4F4; border: 1px solid #D1D1D6; }

.ios-mode .ios-urgency-body {
  flex: 1;
  min-width: 0;
}

.ios-mode .ios-urgency-label {
  margin: 0 0 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ios-ink);
}

.ios-mode .ios-urgency-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ios-muted);
  line-height: 1.35;
}

.ios-mode .ios-urgency-hours {
  font-size: 0.9375rem;
  color: var(--ios-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

.ios-mode #urgency-levels .stacked-card__kicker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* Real DOM element (rendered by render.js for #urgency-levels), replacing
   the former ::after pseudo-content so Google Translate can translate it.
   Pin color + weight to match the h2's text content - explicit values
   guard against cascade quirks that made the right-side label read as
   visibly darker than the left-side "Urgency Levels" text. */
.ios-mode .stacked-card__kicker-aside {
  color: var(--ios-kicker);
  font-weight: 700;
}

/* -------- Section body spacing in iOS mode -------- */
.ios-mode .accordion-body > * + * {
  margin-top: 0.75rem;
}

/* Extra breathing room when an action-grid is followed by a `.content-card`
   (today: AYV "Admission or transfer" wide tile -> "Return to the ED or call
   911 if" warning card). 12px is right for back-to-back content blocks but
   reads as too tight when the next block is a different-treatment surface
   (warning gradient vs cream tile). 24px gives a clear "section break"
   without resorting to a divider. Specificity (0,4,0) wins over the
   universal sibling rule (0,2,0) above. */
.ios-mode .accordion-body > .action-grid + .content-card {
  margin-top: var(--space-md);
}

/* The universal sibling rule above silently beats `.ios-kicker`'s own
   `margin-top: 2.5rem` because `.ios-mode .accordion-body > * + *` has
   higher specificity (0,2,0) than `.ios-kicker` (0,1,0). On Home the
   gap above each kicker still reads as ~24px because `.ios-tiles` /
   `.ios-hero` carry `margin-bottom: var(--space-md)` (24px) which wins
   the collapse. WYW's predecessors only have 8-16px, so without this
   re-assertion the kicker sat 12px below them. Restoring 24px here
   makes WYW match Home's perceived rhythm without touching per-block
   margins. Bottom margin stays at the universal 12px (kicker → next
   block); the kicker's own `margin-bottom: 4px` is dominated by the
   next sibling's 12px margin-top from the universal rule, on Home and
   WYW alike. */
.ios-mode .accordion-body > .ios-kicker {
  margin-top: var(--space-md);
  /* Re-assert muted kicker color: `.ios-mode .accordion-body > p`
     (specificity 0,2,1) below paints all direct-child paragraphs in
     `--ios-ink` for body-copy legibility, which silently darkened the
     `.ios-kicker` (specificity 0,1,0) on hub pages (WYW, AYV) where the
     kicker renders as a `<p>` directly under the accordion-body. Find
     Your Zone is unaffected because it's an `<h2>` two levels deep
     inside `.stacked-card`. This selector is 0,3,0 (three classes) so
     it wins on specificity over the paragraph rule and restores the
     muted gray that matches `.stacked-card__kicker`. */
  color: var(--ios-kicker);
}

/* When a kicker is the very first block in the page body (e.g. the
   "Before you leave..." kicker on After Your Visit), the section hero
   immediately above already provides separation via its bottom padding
   (`.ios-section-hero` carries `padding-bottom: var(--space-sm)`).
   Re-zeroing the top margin here matches the tight hero -> first-card
   rhythm on Process / Home, where the first content block sits flush
   under the hero. Specificity (0,3,1) beats the universal accordion-body
   kicker rule above (0,3,0). */
.ios-mode .accordion-body > .ios-kicker:first-child {
  margin-top: 0;
}

/* Tighten the gap between a kicker and a horizontal scroller so the
   visible kicker -> first-tile distance matches "Find Your Zone" on
   Process (12px). Without this override, kicker bottom margin (4px)
   collapses with the scroller-wrap's universal 12px margin-top to 12px,
   then the inner `.team-scroller` / `.test-scroller` adds another 4px
   of top padding (intentional breathing room for tile focus rings),
   producing 16px of visible space - 4px more than the action-grid /
   checklist kickers on the same page, and 4px more than Find Your Zone.
   Pulling the wrap's margin-top to 8px nets back to 12px after the
   inner padding. Specificity (0,4,0) beats both the universal sibling
   rule (0,2,0) and the kicker margin-top rule above. */
.ios-mode .accordion-body > .ios-kicker + .team-scroller-wrap,
.ios-mode .accordion-body > .ios-kicker + .test-scroller-wrap {
  margin-top: 0.5rem;
}

/* Hub pages with `hideTitle: true` and a single subsection (After Your
   Visit, While You Wait) get an sr-only <h2> injected before the first
   content block by render.js. It is `position: absolute` so it has no
   visual size, but it still counts as a sibling for `:first-child` and
   `+` selectors - which means the rules above (and the universal
   sibling rule) push the first real block ~24-40px below the page
   hero. Treat the block immediately after that sr-only sibling like a
   first child so the spacing matches the hero -> stacked-card rhythm
   on How the ED Works (layout: stacked-cards, which skips the sr-only
   branch entirely). */
.ios-mode .accordion-body > .sr-only + .ios-kicker,
.ios-mode .accordion-body > .sr-only + .feature-card {
  margin-top: 0;
}

/* When a kicker is the very first block in the page body (e.g. the
   "Before you leave..." kicker on After Your Visit), the section hero
   immediately above already provides separation via its bottom padding
   (`.ios-section-hero` carries `padding-bottom: var(--space-sm)`).
   Re-zeroing the top margin here matches the tight hero -> first-card
   rhythm on Process / Home, where the first content block sits flush
   under the hero. Specificity (0,3,1) beats the universal accordion-body
   kicker rule above (0,3,0). */
.ios-mode .accordion-body > .ios-kicker:first-child {
  margin-top: 0;
}

/* -------- Collapsible card summary (Support Programs pattern) -------- */
.ios-mode .content-card.collapsible-card {
  padding: 0;
  overflow: hidden;
}

.ios-mode .content-card.collapsible-card > summary {
  list-style: none;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  cursor: pointer;
}

.ios-mode .content-card.collapsible-card > summary::-webkit-details-marker {
  display: none;
}

.ios-mode .content-card.collapsible-card > summary :is(h3, h4) {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.ios-mode .content-card.collapsible-card .content-card-category {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--type-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  font-weight: 600;
  /* accent-strong, not accent: #76B043 on the soft-lime chip measures
     2.31:1; accent-strong holds 4.5:1 in both themes. */
  color: var(--ios-accent-strong);
  background: var(--ios-accent-soft);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.ios-mode .content-card.collapsible-card > summary .details-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

.ios-mode .content-card.collapsible-card .content-card-summary {
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ios-muted);
  line-height: 1.4;
}

.ios-mode .content-card.collapsible-card .collapsible-card-content {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--ios-divider);
  padding-top: 1rem;
}

/* -------- Flow-steps inside the "Your Visit, Step by Step" card -------- */

/* Zero out individual step borders + shadow in iOS mode so the 4 rows read as
   unified rows inside one cream card. */
.ios-mode .stacked-card .flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.ios-mode .stacked-card .flow-steps > li {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Vertical connector: runs from below each non-last flow-step's badge to the
   bottom of its wrapping <li>. The adjacent .flow-arrow <li> continues the
   line across the gap between steps. Together they form a continuous line
   through expanded content. */
.ios-mode .stacked-card .flow-steps > li:not([aria-hidden]):not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(0.5rem + 36px);
  bottom: 0;
  left: 17.5px;
  width: 1px;
  background: var(--ios-divider);
}

/* Top half of the connector: reaches from the top of each non-first
   flow-step <li> down to the badge's top edge (matches summary padding-top
   so the line visually touches the badge). */
.ios-mode .stacked-card .flow-steps > li:not([aria-hidden]):not(:first-child)::after {
  content: "";
  position: absolute;
  top: 0;
  height: 0.5rem;
  left: 17.5px;
  width: 1px;
  background: var(--ios-divider);
}

.ios-mode .stacked-card .flow-step {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.ios-mode .stacked-card .flow-step + .flow-step {
  border-top: 1px solid var(--ios-divider);
}

.ios-mode .stacked-card .flow-step > summary {
  padding: 0.5rem 0;
  gap: 0.875rem;
  cursor: pointer;
  list-style: none;
}

.ios-mode .stacked-card .flow-step > summary::-webkit-details-marker { display: none; }

.ios-mode .stacked-card .flow-step > summary h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--ios-ink);
  flex: 1;
}

/* Light-gray rounded-square badge with muted digit - matches design */
.ios-mode .stacked-card .flow-step-number {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ios-bg-nested);
  color: var(--ios-muted);
  border: 1px solid var(--ios-border);
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Open step: MGH-green filled badge with white digit.
   Uses --ios-accent-strong (#33501C) for AAA contrast: white on #76B043 is
   only 2.4:1, whereas on #33501C it's ~9.1:1. */
.ios-mode .stacked-card .flow-step[open] > summary .flow-step-number {
  background: var(--ios-accent-strong);
  color: #FFFFFF;
  border-color: var(--ios-accent-strong);
}

/* Override components.css default hairline between open summary + content */
.ios-mode .stacked-card .flow-step[open] > summary {
  border-bottom: none;
}

/* Solid connector line rendered inside the arrow <li> between consecutive
   flow-steps. Aligned with the badge column (18px from left). */
.ios-mode .stacked-card .flow-steps > li[aria-hidden="true"] {
  padding: 0;
  margin: 0;
}

.ios-mode .stacked-card .flow-arrow {
  display: block;
  width: 0;
  height: 0.5rem;
  margin: 0 0 0 17.5px;
  border-left: 1px solid var(--ios-divider);
  background: none;
}

.ios-mode .stacked-card .flow-arrow::before,
.ios-mode .stacked-card .flow-arrow::after {
  display: none; /* Remove any legacy line/triangle pseudo elements */
}

.ios-mode .stacked-card .flow-step-content {
  padding: 0.25rem 0 0.875rem 52px; /* aligns content under the step heading */
}

.ios-mode .stacked-card .flow-step-content > * + * {
  margin-top: 0.75rem;
}

/* Section title (kicker) for stacked-cards - cards.css already handles
   `.stacked-card__kicker`; upper-case + comma version handled in JSON. */

/* -------- Zone tile grid (Process screen) - classic big-tile layout -------- */
.ios-mode .zone-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* Drop the classic 1rem top/bottom margin on .zone-selector when it's nested
   inside a stacked-card. Otherwise the zone-selector's bottom margin stacks
   with the card's 1.25rem padding, leaving ~36px of empty cream below the
   "Don't know your zone yet?" note - which reads as an extra empty card. */
.ios-mode .stacked-card > .zone-selector {
  margin: 0;
}

/* Find Your Zone: strip the cream-card chrome on this specific stacked-card.
   The zone tiles carry their own colors and the italic note reads fine on
   the body background, so wrapping them in a cream card just produced an
   "empty section" silhouette below the tiles and above the footer. Kicker +
   content stay, but the card itself becomes invisible. */
.ios-mode #find-your-zone.stacked-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ios-mode .zone-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-tile);
  border: 1px solid var(--ios-border);
  background: var(--ios-bg-nested);
  min-height: 56px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ios-mode .zone-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Press feedback (see the press-feedback block in components.css). */
@media (prefers-reduced-motion: no-preference) {
  .ios-mode .zone-btn:active {
    transform: scale(0.98);
  }

  .ios-mode .ios-filter-pill:active {
    transform: scale(0.95);
  }
}

.ios-mode .zone-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.ios-mode .zone-btn .zone-btn-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.ios-mode .zone-btn .zone-btn-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ios-ink);
  line-height: 1.2;
}

.ios-mode .zone-btn .zone-btn-alt {
  display: none;
  font-size: 0.875rem;
  /* --ios-ink, not --ios-muted: the muted grey measures 3.1-3.7:1 against
     the deeper zone gradient stops (below the 4.5:1 AA minimum for this
     14px text); ink measures 4.7-7.9:1 across all zone gradients. */
  color: var(--ios-ink);
  text-align: left;
  line-height: 1.25;
  font-weight: 400;
  margin: 0;
}

.ios-mode .zone-btn[aria-expanded="true"] .zone-btn-alt {
  display: block;
}

.ios-mode .zone-btn .zone-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border: 0;
  color: var(--ios-muted);
  transform: none;
}

.ios-mode .zone-btn.active .zone-btn-arrow {
  transform: none;
}

.ios-mode .zone-btn[aria-expanded="false"] .details-chevron-icon {
  transform: rotate(180deg);
}

.ios-mode .zone-btn[aria-expanded="true"] .details-chevron-icon {
  transform: rotate(0deg);
}

/* Zone tile colors: each zone uses its 135deg gradient (--section-X ->
   --section-X-end) as the full background, replacing the previous 4px
   left bar + flat 40%-tinted surface. The same tokens are redefined for
   dark mode in variables.css (e.g. --section-green light #A8E6B0/#88D898 ->
   dark #1E5C22/#124016), so light + dark gradients fall out of one rule
   per zone. Earlier dark-theme 65% mix overrides are no longer needed.

   `--tile-color` is also set per zone (to the deeper gradient stop) so
   that accordion.js can read it on click and propagate it as
   `--selected-zone-color` to the .zone-detail panel below the grid -
   that's how the expanded body's `border-left` picks up the zone's hue
   and matches the gradient header above it. */
.ios-mode .zone-btn[data-zone="red"]    { --tile-color: var(--section-red-end);    background: linear-gradient(135deg, var(--section-red),    var(--section-red-end)); }
.ios-mode .zone-btn[data-zone="blue"]   { --tile-color: var(--section-blue-end);   background: linear-gradient(135deg, var(--section-blue),   var(--section-blue-end)); }
.ios-mode .zone-btn[data-zone="green"]  { --tile-color: var(--section-green-end);  background: linear-gradient(135deg, var(--section-green),  var(--section-green-end)); }
.ios-mode .zone-btn[data-zone="pink"]   { --tile-color: var(--section-pink-end);   background: linear-gradient(135deg, var(--section-pink),   var(--section-pink-end)); }
.ios-mode .zone-btn[data-zone="raz"]    { --tile-color: var(--section-orange-end); background: linear-gradient(135deg, var(--section-orange), var(--section-orange-end)); }
.ios-mode .zone-btn[data-zone="yellow"] { --tile-color: var(--section-yellow-end); background: linear-gradient(135deg, var(--section-yellow), var(--section-yellow-end)); }
.ios-mode .zone-btn[data-zone="cyez"]   { --tile-color: var(--section-teal-end);   background: linear-gradient(135deg, var(--section-teal),   var(--section-teal-end)); }
.ios-mode .zone-btn[data-zone="purple"] { --tile-color: var(--section-purple-end); background: linear-gradient(135deg, var(--section-purple), var(--section-purple-end)); }

.ios-mode .zone-btn[hidden] {
  display: none;
}

.ios-mode .zone-btn[aria-expanded="true"] {
  grid-column: 1 / -1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  box-shadow: none;
  transform: none;
}

.ios-mode .zone-btn[aria-expanded="true"]:hover {
  transform: none;
  box-shadow: none;
}

.ios-mode .zone-detail {
  background: var(--ios-bg-card);
  border: 1px solid var(--ios-border);
  border-left: 4px solid var(--ios-accent);
  border-radius: var(--radius-tile);
  padding: 1rem;
  margin: 1rem 0;
}

/* Programmatically-focused non-interactive targets (accordion.js focuses the
   first heading in the expanded zone detail; map.js focuses the zone-info
   panel after a zone label is tapped). These carry tabindex="-1" solely so
   screen readers announce the new content - they are not keyboard-interactive,
   so suppress both :focus and :focus-visible rings (matching the pattern in
   ios.css for [data-screen-title]). */
.ios-mode .zone-flow-content :is(h2, h3, h4):focus,
.ios-mode .zone-flow-content :is(h2, h3, h4):focus-visible,
.ios-mode .zone-info-panel:focus,
.ios-mode .zone-info-panel:focus-visible {
  outline: none;
}

.ios-mode .zone-selector-grid:has(.zone-btn[aria-expanded="true"]) {
  margin-bottom: 0;
}

/* Active tile lifts to top of grid and spans full width (POR Apr 28: keep
   sibling zones visible when one is expanded - they reflow below the detail
   panel instead of being hidden). */
.ios-mode .zone-selector-grid .zone-btn[aria-expanded="true"] {
  grid-column: 1 / -1;
  order: -2;
}

/* Detail panel now lives inside .zone-selector-grid (render.js change) so
   grid `order` can slot it directly below the active tile. Full width.
   Negative margin-top closes the 0.75rem grid gap above the panel so the
   active tile and detail visually fuse (the squared corners + colored left
   border below complete the connector). The gap below the panel (between
   detail and the first sibling tile) stays at 0.75rem - that's a useful
   visual break between "this zone's detail" and "other zones". */
.ios-mode .zone-selector-grid:has(.zone-btn[aria-expanded="true"]) .zone-detail {
  grid-column: 1 / -1;
  order: -1;
  margin-top: -0.75rem;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-left-color: var(--selected-zone-color, var(--ios-accent));
  background: var(--ios-bg-nested);
}


/* -------- Zone detail stat mini-cards -------- */
.ios-mode .zone-stats {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare `1fr` means `minmax(auto, 1fr)`, so each
     column refuses to shrink below its content's min-content width. At the
     larger text sizes that floor exceeds the container and the grid pushes
     the whole page into horizontal scrolling - on exactly the accessibility
     path that needs it least. minmax(0, ...) lets the text wrap instead.
     (screens.css `.zone-grid` already had this right.) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
}

.ios-mode .zone-stat {
  background: var(--ios-bg-nested);
  border: 1px solid var(--ios-border);
  border-radius: var(--radius-tile);
  padding: 0.75rem 0.875rem;
  text-align: left;
}

.ios-mode .zone-stat__label {
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ios-muted);
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.ios-mode .zone-stat__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ios-ink);
  margin: 0;
}

/* -------- FAQ screen: search + empty state -------- */
.ios-mode .faq-search {
  /* 5px top margin leaves room for the 3px outline + 2px offset on focus;
     parent .accordion-content has overflow:hidden which would otherwise
     clip the focus ring. */
  margin: 5px 0 1rem;
  position: relative;
}

.ios-mode .faq-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ios-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ios-mode .faq-search__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.ios-mode .faq-search__input {
  width: 100%;
  /* Extra left padding clears the leading magnifying-glass icon. */
  padding: 0.875rem 1.125rem 0.875rem 2.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ios-border);
  /* Nested (pure white in light, near-black in dark) gives clear contrast
     against the warm page background; a card-tone bg blended in. */
  background: var(--ios-bg-nested);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 1rem;
  color: var(--ios-ink);
  font-family: inherit;
}

.ios-mode .faq-search__input::placeholder {
  color: var(--ios-muted);
}

.ios-mode .faq-search__input:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.ios-mode .faq-empty-state {
  color: var(--ios-muted);
  font-size: 0.9375rem;
  text-align: center;
  padding: 1rem;
  margin: 0 0 1rem;
  background: var(--ios-bg-card);
  border: 1px dashed var(--ios-border);
  border-radius: var(--radius-tile);
}

.ios-mode .faq-empty-state[hidden] {
  display: none;
}

.ios-mode .faq-category-heading,
.ios-mode .expanded-card-heading {
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ios-kicker);
  margin: 1.25rem 0 0.5rem;
  padding: 0;
}

.ios-mode .expanded-card-section:first-child .expanded-card-heading {
  margin-top: 0;
}

/* -------- Legacy accordion-body polish in ios-mode -------- */
.ios-mode .accordion-body > p,
.ios-mode .accordion-body > ul,
.ios-mode .accordion-body > ol {
  color: var(--ios-ink);
}

.ios-mode .accordion-body h3,
.ios-mode .accordion-body h4 {
  color: var(--ios-ink);
}

/* -------- Filter pills (Support Programs) -------- */
.ios-mode .ios-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-sm);
}

.ios-mode .ios-filter-pill {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ios-border);
  background: var(--ios-bg-card);
  color: var(--ios-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}

.ios-mode .ios-filter-pill:hover {
  background: var(--ios-bg-nested);
}

.ios-mode .ios-filter-pill:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.ios-mode .ios-filter-pill[aria-pressed="true"] {
  background: var(--ios-ink);
  /* Use --ios-bg-body (inverts per theme) instead of hardcoded white so the
     active pill doesn't render white-on-near-white in dark mode. */
  color: var(--ios-bg-body);
  border-color: var(--ios-ink);
  font-weight: 600;
}