/* HexAstra — modo fácil: pasos, comparación lado a lado Tierra | destino y ficha del par.
 * Identidad: docs/marca.md y css/brand.css. Estructura y piso de accesibilidad tomados de Hallmark. */

/* ---------- Mode switching (wiring kept) ---------- */
body.mode-easy .adv { display: none !important; }
body.mode-advanced #easy-app { display: none !important; }

.mode-switch {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
}
.mode-switch [role="tab"] {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
}
.mode-switch [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.mode-switch [role="tab"][aria-selected="true"]:hover { background: var(--color-accent-2); color: var(--color-accent-ink); }
a.btn { text-decoration: none; }

#easy-app { flex: 1; }
.easy { max-width: var(--container); margin-inline: auto; }

/* ---------- Stepper ---------- */
.easy-side { min-width: 0; }
.easy-steps { padding: 0; }
.easy-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.easy-step-btn {
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  border-bottom: var(--rule-bar) solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
.easy-step-btn:hover:not(:disabled) { background: transparent; color: var(--color-ink); }
.easy-step-btn:active:not(:disabled) { background: transparent; color: var(--color-accent-2); }
.easy-step-btn:disabled { background: transparent; border-color: transparent; color: var(--color-muted); opacity: 0.75; cursor: not-allowed; }
.easy-step-num { font: 500 var(--text-sm)/1 var(--font-outlier); }
.easy-step.is-current .easy-step-btn { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.easy-step.is-done .easy-step-btn { color: var(--color-ink-2); }

/* ---------- Featured shortcuts ---------- */
.easy-featured { padding: var(--space-md) 0 var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.easy-featured > summary { cursor: pointer; font: 600 var(--text-sm)/1.5 var(--font-display); color: var(--color-accent); }
.easy-featured[open] > summary { margin-bottom: var(--space-xs); }
.easy-featured-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); align-items: baseline; }
.easy-featured-head h2 { font-size: var(--text-lg); color: var(--color-ink); }
.easy-featured-head p { max-width: 72ch; font-size: var(--text-sm); color: var(--color-muted); }
#easy-featured-groups { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.easy-feat-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); align-items: baseline; }
.easy-feat-group h3 { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.easy-feat-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.easy-feat-chip {
  gap: var(--space-xs);
  min-height: 36px;
  padding: 0 var(--space-sm);
  font: 500 var(--text-sm)/1.2 var(--font-display);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-chip);
  position: relative;
}
.easy-feat-chip::after { content: ""; position: absolute; inset: -4px 0; }
.easy-feat-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.easy-feat-chip.is-selected { background: var(--color-selected); color: var(--color-ink); border-color: var(--color-accent); }
.easy-feat-chip.is-pending { color: var(--color-muted); border-style: dashed; }
.easy-feat-panel { margin-top: var(--space-md); }
.easy-feat-card { padding: var(--space-md) var(--space-lg); background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink-2); }
.easy-feat-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.easy-feat-card h3 { font-size: var(--text-xl); color: var(--color-ink); }
.easy-feat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.easy-feat-card > p { max-width: 70ch; }
.easy-feat-card > p + p { margin-top: var(--space-xs); }

/* ---------- Layout: steps beside the comparison ---------- */
.easy-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: 0 var(--space-xl);
  padding: var(--space-md) var(--gutter) var(--space-2xl);
  align-items: start;
}
.easy-main { min-width: 0; }
.easy-pane { padding-top: var(--space-sm); }
.easy-title { font-size: var(--text-2xl); color: var(--color-ink); }
.easy-title:focus { outline: none; }
.easy-title:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.easy-lead { margin-top: var(--space-xs); max-width: 60ch; color: var(--color-ink-2); }
.easy-lead-mini { margin-top: var(--space-2xs); max-width: 60ch; font-size: var(--text-sm); color: var(--color-muted); }
.easy-recap { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: var(--space-xs) 0 0; }
.easy-recap div { display: flex; gap: var(--space-xs); align-items: baseline; }
.easy-recap dt { font-size: var(--text-sm); color: var(--color-muted); }
.easy-recap dd { margin: 0; font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--hx-cian); }

.easy-body-toggle { display: inline-flex; gap: 3px; padding: 3px; margin: var(--space-md) 0 var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.easy-body-toggle button { min-height: 34px; border: 0; border-radius: 6px; min-width: 6rem; background: transparent; color: var(--color-muted); }
.easy-body-toggle button[aria-selected="true"]#easy-body-moon { background: var(--hx-luna); color: var(--hx-noche); }
.easy-body-toggle button[aria-selected="true"]#easy-body-mars { background: var(--hx-marte); color: var(--hx-noche); }

/* Destination and preset rows: a ruled list on the sheet, never boxed cards. */
.easy-cards, .easy-presets { display: grid; gap: var(--space-xs); }
.easy-card {
  display: block;
  width: 100%;
  min-height: 0;
  padding: var(--space-sm) var(--space-sm);
  font: 400 var(--text-sm)/1.5 var(--font-body);
  color: var(--color-ink-2);
  text-align: left;
  white-space: normal;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.easy-card:hover { border-color: var(--color-accent); }
.easy-card:active { background: var(--color-paper-3); }
.easy-card.is-selected { background: var(--color-selected); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.easy-card-body { display: grid; gap: var(--space-2xs); }
.easy-card h3, .easy-card-preset h3 { font-size: var(--text-lg); color: var(--color-ink); }
.easy-card-name { color: var(--color-muted); }
.easy-card-body p:last-child { color: var(--color-muted); }
.easy-card-body p, .easy-card-preset p { max-width: 68ch; }
.easy-card-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.easy-card-chips:empty { display: none; }
.easy-weights { display: flex; gap: var(--space-md); margin: var(--space-xs) 0 0; }
.easy-weights div { display: flex; gap: var(--space-2xs); align-items: baseline; }
.easy-weights dt { font: 600 var(--text-xs)/1 var(--font-display); color: var(--color-muted); }
.easy-weights dd { margin: 0; font: 600 var(--text-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-ink); }

.easy-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  font: 600 var(--text-xs)/1.3 var(--font-body);
  color: var(--color-muted);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-chip);
  white-space: nowrap;
}
.easy-chip-warn { color: var(--color-warn-ink); border-color: var(--color-warn-ink); }
.easy-chip-menos { color: var(--color-menos); border-color: var(--color-menos); }
.easy-chip-moon { color: var(--hx-luna); border-color: var(--hx-luna); }
.easy-chip-mars { color: var(--hx-marte); border-color: var(--hx-marte); }

/* ---------- Actions ---------- */
.easy-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.easy-actions-inline { margin-top: var(--space-sm); }
.easy-btn { min-height: var(--control-h); }
.easy-btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.easy-btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-accent-ink); }
.easy-btn-primary:active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.easy-btn-primary { font-weight: 600; }
.easy-btn-primary:disabled { background: var(--color-paper-2); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.easy-link {
  display: inline;
  min-height: 0;
  padding: 0;
  font: 500 var(--text-sm)/1.4 var(--font-body);
  color: var(--color-accent);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
.easy-link:hover { background: transparent; color: var(--color-accent-2); text-decoration-thickness: 2px; }
.easy-link:active { background: transparent; color: var(--color-accent-2); }

/* ---------- Scope and filters ---------- */
.easy-scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); margin-top: var(--space-md); }
.easy-scope-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.easy-scope-card:hover { border-color: var(--color-accent); }
.easy-scope-card.is-selected { background: var(--color-selected); border-color: var(--color-accent); }
.easy-scope-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.easy-scope-card input { grid-row: 1 / span 2; margin: var(--space-2xs) 0 0; }
.easy-scope-card strong { font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.easy-scope-card span { font-size: var(--text-sm); color: var(--color-muted); }
.easy-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-sm); }
.easy-filters.is-hidden { display: none; }
.easy-field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.easy-field select { width: 100%; }
.easy-check { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); min-height: 32px; cursor: pointer; color: var(--color-ink); }
.easy-note { margin-top: var(--space-2xs); max-width: 64ch; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- States ---------- */
.easy-status { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); background: var(--color-paper-2); border-radius: var(--radius-pill); }
.easy-status-warn { color: var(--color-warn-ink); border: var(--rule-hair) solid var(--color-warn-ink); }
.easy-status-error { color: var(--hx-noche); background: var(--color-error); }

/* ---------- The ranking ledger ---------- */
#easy-results { margin-top: var(--space-xl); }
.easy-results-head { padding-bottom: var(--space-xs); }
.easy-results-head h3 { font-size: var(--text-xl); color: var(--color-ink); max-width: 32ch; }
.easy-results-head p { margin-top: var(--space-2xs); }
.easy-rank { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.easy-result {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: var(--space-sm) var(--space-md);
  font: 400 var(--text-sm)/1.5 var(--font-body);
  color: var(--color-ink-2);
  text-align: left;
  white-space: normal;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.easy-result:hover { border-color: var(--color-accent); }
.easy-result:active { background: var(--color-paper-3); }
.easy-result.is-selected { background: var(--color-selected); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.easy-score { display: grid; justify-items: stretch; gap: var(--space-3xs); text-align: right; }
.easy-score-num { font: 700 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.easy-score-den { font-size: var(--text-xs); color: var(--color-muted); }
.easy-result-body { display: grid; gap: var(--space-2xs); min-width: 0; }
.easy-result-rank { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.easy-result-rank .num { font-weight: 600; color: var(--hx-cian); }
.easy-result-body h3 { font-size: var(--text-lg); color: var(--color-ink); }
.easy-why, .easy-breaks { max-width: 64ch; }
.easy-why strong, .easy-breaks strong { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); }
.easy-breaks strong { color: var(--hx-marte); }
.easy-missing { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.easy-rank-compact .easy-result { grid-template-columns: 4rem minmax(0, 1fr); }

/* ---------- The comparison: Earth | destination, side by side ---------- */
.easy-compare {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-xs);
  max-height: 100dvh;
  overflow: auto;
  padding: var(--space-sm) 0 var(--space-md);
  background: var(--color-paper);
}
.easy-maps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.easy-map-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; overflow: hidden; background: var(--color-map); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.easy-map-wrap-dest { border-color: color-mix(in srgb, var(--dest-color, var(--hx-luna)) 55%, var(--hx-linea)); }
.easy-compare[data-body="mars"] { --dest-color: var(--hx-marte); }
.easy-compare[data-body="moon"] { --dest-color: var(--hx-luna); }
.easy-map-label { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); padding: var(--space-xs) var(--space-md); background: var(--color-sheet); }
.easy-map-label h3 { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xl); color: var(--color-ink); }
.easy-map-label h3::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--hx-celeste); }
.easy-map-wrap-dest .easy-map-label h3::before { background: var(--dest-color, var(--hx-luna)); }
.easy-map-tools { display: inline-flex; gap: 2px; padding: 2px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.easy-map-btn { min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: 6px; background: transparent; color: var(--color-muted); font-size: var(--text-sm); position: relative; }
.easy-map-btn::after { content: ""; position: absolute; inset: -6px 0; }
.easy-map-btn.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
.easy-map-btn.is-active:hover { background: var(--color-accent-2); color: var(--color-accent-ink); }
.easy-map { height: clamp(300px, 52dvh, 560px); background: var(--color-map); }
.easy-map-hint { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); max-width: 80ch; }

/* Pines: cada cuerpo con su color (Tierra celeste, Marte óxido, Luna gris) y anillo cian al seleccionarlo. */
.easy-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font: 700 var(--text-xs)/1 var(--font-body);
  color: var(--hx-noche);
  background: var(--hx-celeste);
  border: 2px solid var(--hx-noche);
  border-radius: 50%;
}
.easy-pin.is-active { outline: 3px solid var(--hx-cian); outline-offset: 1px; }
.easy-pin-feat { width: 22px; height: 22px; background: var(--color-menos); }
.easy-pin-feat.is-active { outline: 3px solid var(--hx-cian); }
.easy-pin-dest { width: 12px; height: 12px; background: var(--hx-luna); border: 2px solid var(--hx-noche); }
.easy-pin-dest.mars { background: var(--hx-marte); }
.easy-pin-dest.is-active { width: 22px; height: 22px; border-width: 3px; outline: 3px solid var(--hx-cian); outline-offset: 1px; }
.leaflet-tooltip.easy-tip-dest { font-weight: 600; }

/* The pair ledger under the maps. */
.easy-pair { background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md) var(--space-md); }
.easy-pair-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.easy-pair-col { display: grid; gap: var(--space-3xs); align-content: start; min-width: 0; }
.easy-pair-col + .easy-pair-col { padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.easy-pair-side { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.easy-pair-side::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--side-color, var(--hx-celeste)); }
.easy-pair-col.is-mars { --side-color: var(--hx-marte); }
.easy-pair-col.is-moon { --side-color: var(--hx-luna); }
.easy-pair-col.is-dest-empty { --side-color: var(--hx-linea); }
.easy-pair-col h3 { font-size: var(--text-xl); color: var(--color-ink); }
.easy-pair-coord { font: 400 var(--text-xs)/1.4 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.easy-pair-place { font-size: var(--text-sm); }
.easy-pair-empty { font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.easy-pair-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.easy-pair-score .score-bar { flex-basis: 100%; }
.easy-pair-score .easy-score-num { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; }
.easy-pair-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); margin: var(--space-xs) 0 0; }
.easy-pair-why dt { font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--color-ink); }
.easy-pair-why div:first-child dt { color: var(--hx-cian); }
.easy-pair-why div + div dt { color: var(--hx-marte); }
.easy-pair-why dd { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); }
.easy-pair .easy-missing { margin-top: var(--space-xs); }
.easy-pair > p:last-child { margin-top: var(--space-xs); }

/* ---------- Calculation dialog ---------- */
.easy-modal-bg { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-md); background: var(--color-scrim); }
.easy-modal-bg.is-open { display: flex; }
.easy-modal { max-width: 640px; max-height: 86dvh; overflow: auto; padding: var(--space-lg); background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.easy-modal h2 { font-size: var(--text-2xl); color: var(--color-ink); margin-bottom: var(--space-sm); }
.easy-modal p + p, .easy-modal p + table, .easy-modal table + p { margin-top: var(--space-sm); }
.easy-close { float: right; margin: 0 0 var(--space-sm) var(--space-sm); }
.easy-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.easy-table thead th { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.easy-table th, .easy-table td { padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; text-align: left; border-top: var(--rule-hair) solid var(--color-rule); }
.easy-table th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); }
.easy-table tbody th { color: var(--color-ink-2); }
.easy-table td { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .easy-layout { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .easy-compare { position: static; order: -1; padding-top: var(--space-sm); max-height: none; overflow: visible; }
  .easy-map { height: clamp(220px, 34dvh, 340px); }
  .easy-featured-head, .easy-feat-group { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .easy-stepper { gap: 0 var(--space-md); }
  .easy-step-label { font-size: var(--text-xs); }
  .easy-scope, .easy-filters, .easy-pair-grid, .easy-pair-why { grid-template-columns: minmax(0, 1fr); }
  .easy-scope-card + .easy-scope-card { border-left: 0; }
  .easy-pair-col + .easy-pair-col { padding-left: 0; padding-top: var(--space-xs); border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .easy-result { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-sm); }
  .easy-score-num { font-size: 1.5rem; }
  .easy-map-label { min-height: 52px; padding: var(--space-xs) var(--space-sm); }
  .easy-map-label h3 { font-size: var(--text-lg); }
  .easy-pair { padding-inline: var(--space-sm); }
  /* Por debajo de 560 px los dos mapas se apilan, más anchos, y siguen visibles a la vez. */
  .easy-maps { grid-template-columns: minmax(0, 1fr); }
  .easy-map { height: clamp(200px, 30dvh, 260px); }

}

/* Mismo alto que el shell de escritorio: mapas fijos a la vista, listas y ficha desplazables. */
@media (min-width: 60rem) and (min-height: 40rem) {
  #easy-app { min-height: 0; }
  .easy { height: 100%; }
  .easy-layout {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: var(--space-lg);
    padding-block: var(--space-sm);
    align-items: stretch;
  }
  .easy-side { display: flex; flex-direction: column; min-height: 0; }
  .easy-steps { flex: none; }
  .easy-stepper { gap: 0 var(--space-sm); }
  .easy-step-btn { gap: var(--space-2xs); }
  .easy-step-label { font-size: var(--text-sm); }
  .easy-featured { flex: none; padding-block: var(--space-xs); }
  .easy-featured[open] { max-height: 40%; overflow: auto; }
  .easy-main { flex: 1; min-height: 0; overflow: auto; padding-right: var(--space-xs); }
  .easy-compare {
    position: static;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, auto);
    align-content: stretch;
  }
  .easy-maps { min-height: 0; }
  .easy-map { height: 100%; min-height: 0; }
  .easy-map-label { min-height: 60px; padding-inline: var(--space-sm); }
  .easy-map-label h3 { font-size: var(--text-lg); }
  .easy-map-btn { padding-inline: var(--space-xs); }
  .easy-pair { max-height: 34dvh; min-height: 0; overflow: auto; padding: var(--space-sm); }
  .easy-pair-col h3 { font-size: var(--text-lg); }
  .easy-pair-score { margin-top: var(--space-xs); }
  .easy-pair-score .easy-score-num { font-size: var(--text-2xl); }
  .easy-main, .easy-featured, .easy-pair { overscroll-behavior: contain; scrollbar-gutter: stable; }
}