/* ========================================
   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 0 0.75rem;
  box-shadow: var(--shadow-card);
}

.ios-mode .content-card 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 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 {
  background: var(--ios-accent);
  color: #FFFFFF;
  border-color: transparent;
}

.ios-mode .content-card--reassurance h4,
.ios-mode .content-card--reassurance p {
  color: #FFFFFF;
}

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

.ios-mode .content-card--warning {
  border-left: 4px solid var(--ios-accent);
  padding-left: 1rem;
}

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

/* -------- Checklist -------- */
.ios-mode .ios-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ios-mode .ios-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 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;
  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;
}

.ios-mode .ios-urgency-item[data-level="1"] .ios-urgency-badge { background: #FFBABA; }
.ios-mode .ios-urgency-item[data-level="2"] .ios-urgency-badge { background: #FFD6A5; }
.ios-mode .ios-urgency-item[data-level="3"] .ios-urgency-badge { background: #FFE0A5; }
.ios-mode .ios-urgency-item[data-level="4"] .ios-urgency-badge { background: #A8E6B0; }
.ios-mode .ios-urgency-item[data-level="5"] .ios-urgency-badge { background: #B2EDED; }

.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;
}

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

/* -------- 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 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;
  color: var(--ios-accent);
  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.75rem + 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.75rem;
  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.75rem 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 */
.ios-mode .stacked-card .flow-step[open] > summary .flow-step-number {
  background: var(--ios-accent);
  color: #FFFFFF;
  border-color: var(--ios-accent);
}

/* 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.75rem;
  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 {
  --tile-color: var(--ios-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.875rem 1rem 1rem;
  border-radius: var(--radius-tile);
  border: 1px solid var(--ios-border);
  border-left: 4px solid var(--tile-color);
  background: var(--ios-bg-nested);
  min-height: 88px;
  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);
}

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

.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 {
  font-size: 0.875rem;
  color: var(--ios-muted);
  text-align: left;
  line-height: 1.25;
  font-weight: 400;
  margin: 0;
}

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

/* Zone tile colors: 4px left bar + tinted background. Light theme mixes the
   zone color with the nested bg at 40%; dark theme boosts to 65% for
   visibility. */
.ios-mode .zone-btn[data-zone="red"]    { --tile-color: var(--section-red);    background: color-mix(in srgb, var(--section-red) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="blue"]   { --tile-color: var(--section-blue);   background: color-mix(in srgb, var(--section-blue) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="green"]  { --tile-color: var(--section-green);  background: color-mix(in srgb, var(--section-green) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="pink"]   { --tile-color: var(--section-pink);   background: color-mix(in srgb, var(--section-pink) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="raz"]    { --tile-color: var(--section-orange); background: color-mix(in srgb, var(--section-orange) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="yellow"] { --tile-color: var(--section-yellow); background: color-mix(in srgb, var(--section-yellow) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="cyez"]   { --tile-color: var(--section-teal);   background: color-mix(in srgb, var(--section-teal) 40%, var(--ios-bg-nested)); }
.ios-mode .zone-btn[data-zone="purple"] { --tile-color: var(--section-purple); background: color-mix(in srgb, var(--section-purple) 40%, var(--ios-bg-nested)); }

[data-theme="dark"] .ios-mode .zone-btn[data-zone="red"]    { background: color-mix(in srgb, var(--section-red) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="blue"]   { background: color-mix(in srgb, var(--section-blue) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="green"]  { background: color-mix(in srgb, var(--section-green) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="pink"]   { background: color-mix(in srgb, var(--section-pink) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="raz"]    { background: color-mix(in srgb, var(--section-orange) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="yellow"] { background: color-mix(in srgb, var(--section-yellow) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="cyez"]   { background: color-mix(in srgb, var(--section-teal) 65%, var(--ios-bg-nested)); }
[data-theme="dark"] .ios-mode .zone-btn[data-zone="purple"] { background: color-mix(in srgb, var(--section-purple) 65%, var(--ios-bg-nested)); }

.ios-mode .zone-btn.active,
.ios-mode .zone-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--tile-color), var(--shadow-card);
  transform: translateY(-1px);
}

.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;
}

/* -------- Zone detail stat mini-cards -------- */
.ios-mode .zone-stats {
  display: grid;
  grid-template-columns: 1fr 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;
}

.ios-mode .faq-search__input {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ios-border);
  background: var(--ios-bg-card);
  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 {
  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;
}

/* -------- 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);
}