/* ============================================================
   MILO — iOS overrides (html.ios from index.html)
   iPhone: compact “Your plan” + type; iPad uses desktop plan (html.use-mac-plan) + base type.
   Safe-area insets apply to all iOS (iPhone + iPad).
   ============================================================ */

/* iPhone: global type scale (iPad uses default scales from styles.css). */
html.ios.iphone {
  --text-xs: clamp(0.8125rem, 0.76rem + 0.22vw, 0.9375rem);
  --text-sm: clamp(0.9375rem, 0.86rem + 0.38vw, 1.0625rem);
  --text-base: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.08rem + 0.55vw, 1.5625rem);
  --text-xl: clamp(1.5625rem, 1.28rem + 1.1vw, 2.375rem);
  /* Your plan: one size for field captions + “Schools 5 max” + chips */
  --ios-plan-caps-fs: 9px;
}

/* Main section titles (e.g. “See what a degree costs…”, “Dream school vs other choices”) —
   one step down from h1/h2 default so the hero doesn’t dominate the viewport. */
html.ios.iphone .main .section-top h1,
html.ios.iphone .main .section-top h2 {
  font-size: var(--text-lg);
}

/* Hero / intro body copy (e.g. “Compare the same major…”) — one step under default body. */
html.ios.iphone .main .lede {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* styles.css hides .logo-credit below 520px; iPhone viewports always are, so the line
   never appeared. Show it with compact type so the header still fits. */
html.ios.iphone .logo .logo-credit {
  display: block;
  font-size: max(9px, 0.62rem);
  line-height: 1.15;
}

html.ios.iphone .setup-bar .field label,
html.ios.iphone .setup-bar .ac-field label {
  font-size: var(--ios-plan-caps-fs);
  letter-spacing: 0.12em;
}

html.ios.iphone .setup-plan-summary__title {
  font-size: 1rem;
}

html.ios.iphone .setup-plan-summary__hint {
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* ~20% shorter than prior 44px iOS row; 16px text avoids Safari zoom-on-focus. */
html.ios.iphone .setup-bar .field input[type="number"],
html.ios.iphone .setup-bar .ac-wrap > input {
  min-height: 35px;
  font-size: 16px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}

html.ios.iphone .setup-bar .ac-pills-rail .chip {
  font-size: var(--ios-plan-caps-fs);
  padding: 2px 5px 2px 8px;
}

html.ios.iphone .setup-bar .ac-pills-rail .chip button {
  width: 16px;
  height: 16px;
  font-size: 12px;
}

html.ios .setup-bar .field-mini {
  flex: 0 1 82px;
  max-width: 96px;
}

html.ios.iphone .setup-bar .field-mini.field-years {
  flex: 0 1 42px;
  max-width: 48px;
}

/* Your plan: autocomplete lists (school, major, home state) show ~2 options; more via vertical scroll
   (default .ac-list is 280px max — too tall on iPhone). */
html.ios.iphone .setup-bar .ac-field--school .ac-list,
html.ios.iphone .setup-bar .ac-field--major .ac-list,
html.ios.iphone .setup-bar .ac-field.field-compact .ac-list {
  max-height: calc(2 * 3.35rem + 8px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Safe area above the header: same ink as the page (theme) so it isn’t a light strip
   in dark mode when the band was otherwise unpainted. */
html.ios .topbar {
  padding-top: max(0px, env(safe-area-inset-top, 0px));
  background-color: var(--color-bg);
}

/* Sticky siteline: don’t let the bar tuck under the status area when you scroll. */
html.ios .header {
  top: max(0px, env(safe-area-inset-top, 0px));
}

/* School card title: break-even strip + AI dot — one row, same height, vertically centered. */
html.ios .school-card-head-actions {
  align-items: center;
}
html.ios .school-card-head .badges {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
html.ios .school-card-head .badge.primary,
html.ios .school-card-head .badge.badge--wef-pill {
  height: 1.25rem;
  min-height: 1.25rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
html.ios .school-card-head .badge.primary {
  padding: 0 6px;
  font-size: clamp(7px, 0.45rem + 0.32vw, 9px);
  letter-spacing: 0.05em;
}
html.ios .school-card-head .badge.badge--wef-pill {
  min-width: 1.25rem;
  width: 1.25rem;
  padding: 0;
  font-size: 7px;
}

/* WEF heatmap: “Filter” + category pills at ~⅓ smaller than desktop (scale × ⅔ on type, padding, radius, gap). */
html.ios .wef-heatmap__controls {
  gap: 5px;
}
html.ios .wef-heatmap__filter-label {
  font-size: clamp(8px, 0.5rem + 0.2vw, 10px);
  margin-right: 3px;
}
html.ios .wef-hm__filter {
  font-size: 8px;
  padding: 3px 7px;
  border-radius: 13px;
  line-height: 1.2;
}

/* Right-rail section dots are hidden on iOS (no in-page nav circles). */
html.ios .section-dots {
  display: none !important;
}

html.ios .main {
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
}

html.ios .setup-plan-summary {
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
}

html.ios .setup-bar {
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
}

html.ios .school-card-head {
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

/* Compare cards: same primary ink for Published COA / fixed net $ and debt-tile
   values as in styles.css (explicit html.ios so iOS can’t miss these in cascade). */
html.ios .metric .sub.sub--ink {
  color: var(--color-text);
  font-weight: 600;
}
html.ios .metric .sub .sub--ink {
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html.ios .metric-extra .extra-v.monthly-payment,
html.ios .metric-extra .rate-slider-head .extra-v.tile-debt-out,
html.ios .metric-extra .rate-slider-head .extra-v.tile-rate-out {
  color: var(--color-text);
  font-weight: 700;
}

/* YOUR DEBT: keep “Debt limit” / loan $ on one line — truncate with … so the row doesn’t wrap and jump. */
html.ios .metric-extra--user-debt .rate-slider-head {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}
html.ios .metric-extra--user-debt .rate-slider-head .extra-k {
  flex: 0 0 auto;
}
html.ios .metric-extra--user-debt .rate-slider-head .extra-v.tile-debt-out,
html.ios .metric-extra--user-debt .rate-slider-head .extra-v.tile-rate-out {
  min-width: 0;
  flex: 1 1 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* Methodology dialog: Data Sources + Macro lines use same copy as desktop (one HTML).
   `strong` in muted paragraphs — primary ink; explicit html.ios so iOS matches. */
html.ios .info-panel__muted strong {
  color: var(--color-text);
  font-weight: 700;
}

html.ios .metrics-row {
  padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
}

/* School card: 3 main tiles — cost+median+5-yr | break-even + your debt | chart. */
html.ios .metrics-row.metrics-row--ios {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Middle tile starts with Break-even inside .metric-extra. Desktop puts 5-yr earnings
   above .metric-extra, so border-top separates sections; on iOS there is no block
   above — drop the rule and extra inset so “Break-even” lines up with other tiles’ .k. */
html.ios .earnings-metric > .metric-extra:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Stacked blocks in the first iOS column (under Total cost). */
html.ios .metric.metrics-ios-cost-debt .metrics-ios-debt-below,
html.ios .metric.metrics-ios-cost-debt .metrics-ios-5y-below-median {
  margin-top: clamp(var(--space-2), 0.4rem + 0.5vw, var(--space-3));
  padding-top: clamp(var(--space-2), 0.4rem + 0.5vw, var(--space-3));
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  min-width: 0;
}
/* First .k in each stacked sub-block. */
html.ios .metric.metrics-ios-cost-debt .metrics-ios-debt-below > .k,
html.ios .metric.metrics-ios-cost-debt .metrics-ios-5y-below-median > .k {
  margin-top: 0;
}

@media (max-width: 760px) {
  html.ios.iphone .main {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  }

  html.ios.iphone .setup-plan-summary {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  }

  html.ios.iphone .setup-bar {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  }
}

/* ----- AI heatmap: bottom sheet for major details (iOS only; opened from app.js) ----- */
html.ios.wef-hm-sheet-open,
html.ios.wef-hm-sheet-open body {
  overflow: hidden;
}

html.ios .wef-hm-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  box-sizing: border-box;
}

html.ios .wef-hm-sheet-wrap[hidden] {
  display: none !important;
}

html.ios .wef-hm-sheet-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--color-text) 42%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.ios .wef-hm-sheet-panel {
  position: relative;
  width: 100%;
  max-height: min(88vh, 100dvh - 12px);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom: none;
  /* Larger top radius than default cards — reads as a proper bottom sheet */
  border-radius: clamp(1.25rem, 5vw, 1.75rem) clamp(1.25rem, 5vw, 1.75rem) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.ios .wef-hm-sheet__chrome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-2);
  flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

html.ios .wef-hm-sheet__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  padding-right: var(--space-2);
}

html.ios .wef-hm-sheet__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.25rem -0.35rem 0 0;
  border: 2px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html.ios .wef-hm-sheet__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 var(--space-4) var(--space-4);
}

html.ios .wef-heatmap-tooltip--sheet-body {
  position: static;
  left: auto;
  top: auto;
  max-width: none;
  width: 100%;
  pointer-events: auto;
  box-shadow: none;
  border: none;
  padding: var(--space-2) 0 0;
  margin: 0;
  background: transparent;
}