/* Compass Afar -- iOS-native components. Reads ONLY the --ios-* tokens in theme.css (light + dark live there), so nothing here
   hardcodes a colour, size or radius. Shared building blocks:
     .ios-screen        a screen in grouped style (grey-pink page, 16px margins, safe-area bottom)
     .ios-large-title   the 34px title at the top of a screen
     .ios-section       header (footnote, caps) + .ios-list (one 12px card) + footer (footnote)
     .ios-row           tile · title (+subtitle) · value · chevron  |  switch  |  check  |  destructive
     .ios-btn           the one filled primary button; .ios-btn-plain = tinted text button
     .ios-sheet         bottom sheet on the grouped background (the .sp-* sheet below is the same component, restyled)
     .ios-tabbar        bottom tab bar (built, not mounted yet -- see ios-preview.html)
   Markup is produced by ios-ui.js (IOS.row / IOS.group / ...). */

/* ---------- screen + titles ---------- */
.screen.ios-screen{
  background: var(--ios-bg); color: var(--ios-label); font-family: var(--ios-font);
  padding: 0 var(--ios-margin) calc(var(--ios-sp-3) + var(--ios-safe-bottom));
}
.ios-screen p{ margin:0; }
.ios-large-title{
  margin: 0; padding: var(--ios-sp-1) 0 var(--ios-sp-1);
  font: var(--ios-w-bold) var(--ios-fs-large)/var(--ios-lh-large) var(--ios-font); letter-spacing: .37px; color: var(--ios-label);
}

/* ---------- sections and grouped lists ---------- */
.ios-section{ margin-top: var(--ios-sp-3); }
.ios-section:first-child{ margin-top: var(--ios-sp-2); }
.ios-section-h{
  margin: 0; padding: 0 var(--ios-margin) 6px;
  font: var(--ios-w-regular) var(--ios-fs-foot)/var(--ios-lh-foot) var(--ios-font); text-transform: uppercase; letter-spacing: -.08px; color: var(--ios-label-2);
}
.ios-section-f{
  margin: 0; padding: 8px var(--ios-margin) 0;
  font: var(--ios-w-regular) var(--ios-fs-foot)/var(--ios-lh-foot) var(--ios-font); color: var(--ios-label-2);
}
.ios-list{ background: var(--ios-card); border-radius: var(--ios-radius-card); overflow: hidden; }

/* ---------- rows ---------- */
.ios-row{
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--ios-row-h);
  padding: 8px var(--ios-margin); margin: 0; box-sizing: border-box;
  appearance: none; border: 0; background: transparent; text-align: left; cursor: default;
  font: var(--ios-w-regular) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font); color: var(--ios-label);
  --ios-inset: var(--ios-margin);
}
.ios-row.has-tile{ --ios-inset: calc(var(--ios-margin) + var(--ios-tile) + 12px); }
/* hairline between rows, inset from the left (past the icon tile when there is one) */
.ios-row + .ios-row::before{ content: ""; position: absolute; top: 0; left: var(--ios-inset); right: 0; border-top: .5px solid var(--ios-separator); }
button.ios-row, label.ios-row, a.ios-row{ cursor: pointer; }
button.ios-row:active, label.ios-row:active, a.ios-row:active{ background: var(--ios-highlight); }
.ios-row:focus-visible{ outline: 2px solid var(--ios-tint); outline-offset: -2px; }
.ios-row.is-disabled{ cursor: default; }
.ios-row.is-disabled .ios-row-title{ color: var(--ios-label-3); }
.ios-row.is-disabled .ios-tile{ opacity: .5; }

.ios-tile{
  flex: none; width: var(--ios-tile); height: var(--ios-tile); border-radius: var(--ios-radius-tile);
  display: flex; align-items: center; justify-content: center; background: var(--ios-tint-soft); color: var(--ios-tint);
}
.ios-tile .icon{ width: 17px; height: 17px; display: flex; }
.ios-tile .icon svg{ width: 100%; height: 100%; }
.ios-tile.tone-fill{ background: var(--ios-tint-fill); color: var(--ios-on-tint); }
.ios-tile.tone-neutral{ background: var(--ios-fill); color: var(--ios-label-2); }

.ios-row-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ios-row-title{ font-size: var(--ios-fs-body); line-height: var(--ios-lh-body); color: var(--ios-label); overflow-wrap: anywhere; }
.ios-row-sub{ font-size: var(--ios-fs-sub); line-height: var(--ios-lh-sub); color: var(--ios-label-2); overflow-wrap: anywhere; }
.ios-row-value{
  flex: 0 1 auto; max-width: 55%; margin-left: auto; text-align: right; color: var(--ios-label-2);
  font-size: var(--ios-fs-body); line-height: var(--ios-lh-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ios-chev{ flex: none; display: flex; color: var(--ios-label-3); margin-right: -4px; }
.ios-chev .icon{ width: 14px; height: 14px; display: flex; }
.ios-chev svg{ width: 100%; height: 100%; stroke-width: 2.8; }
.ios-check{ flex: none; display: flex; color: var(--ios-tint); visibility: hidden; }
.ios-check .icon{ width: 18px; height: 18px; display: flex; }
.ios-row[aria-pressed="true"] .ios-check{ visibility: visible; }
.ios-row-center{ justify-content: center; text-align: center; }
.ios-row-destructive .ios-row-title{ color: var(--ios-destructive); }
.ios-row-profile{ min-height: 76px; padding-top: 12px; padding-bottom: 12px; gap: 14px; }
.ios-avatar{
  flex: none; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ios-tint-fill); color: var(--ios-on-tint); font: var(--ios-w-semibold) var(--ios-fs-title)/1 var(--ios-font);
}
.ios-row-profile .ios-row-title{ font-size: var(--ios-fs-title-s); line-height: var(--ios-lh-title-s); font-weight: var(--ios-w-semibold); }
.ios-input{
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; text-align: right; appearance: none;
  font: var(--ios-w-regular) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font); color: var(--ios-label);
}
.ios-input:focus{ outline: none; }
.ios-input::placeholder{ color: var(--ios-label-3); }
.ios-text{ padding: var(--ios-sp-2); font-size: var(--ios-fs-sub); line-height: var(--ios-lh-sub); color: var(--ios-label); }
.ios-text p + p{ margin-top: 10px; }
.ios-text .ios-muted{ color: var(--ios-label-2); }

/* ---------- switch (51 x 31, like UISwitch) ---------- */
.ios-switch{ position: relative; flex: none; width: 51px; height: 31px; margin-left: auto; }
.ios-switch input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ios-switch i{ position: absolute; inset: 0; border-radius: 999px; background: var(--ios-switch-off); transition: background var(--dur-fast) ease; pointer-events: none; }
.ios-switch i::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22); transition: transform var(--dur-fast) var(--ease-out);
}
.ios-switch input:checked + i{ background: var(--ios-tint-fill); }
.ios-switch input:checked + i::after{ transform: translateX(20px); }
.ios-switch input:focus-visible + i{ outline: 2px solid var(--ios-tint); outline-offset: 2px; }

/* ---------- buttons ---------- */
.ios-btn{
  appearance: none; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 20px; margin: 0;
  border-radius: var(--ios-radius-btn); background: var(--ios-tint-fill); color: var(--ios-on-tint); cursor: pointer;
  font: var(--ios-w-semibold) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font);
}
.ios-btn:active{ opacity: .78; }
.ios-btn[disabled]{ opacity: .4; cursor: default; }
.ios-btn-plain{
  appearance: none; border: 0; background: transparent; min-height: var(--ios-row-h); padding: 0 var(--ios-sp-1); margin: 0; cursor: pointer;
  color: var(--ios-tint); font: var(--ios-w-regular) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font);
}
.ios-btn-plain:active{ opacity: .5; }
.ios-btn-plain[disabled]{ opacity: .4; cursor: default; }
.ios-btn-plain.is-destructive{ color: var(--ios-destructive); }
.ios-btn-row{ display: flex; justify-content: center; margin-top: var(--ios-sp-2); }

/* ---------- sheet: the shared bottom sheet (grabber, rounded top) ---------- */
.sp-backdrop{ background: var(--scrim); }
.sp-sheet{
  background: var(--ios-card); color: var(--ios-label); font-family: var(--ios-font);
  border-radius: var(--ios-radius-sheet) var(--ios-radius-sheet) 0 0; box-shadow: none;
  padding: 6px var(--ios-margin) calc(var(--ios-sp-2) + var(--ios-safe-bottom));
}
.sp-sheet.ios-sheet{ background: var(--ios-bg); }
.sp-grab{ width: 36px; height: 5px; margin: 5px auto 8px; background: var(--ios-label-3); }
.sp-title{ margin: 0 0 var(--ios-sp-2); text-align: center; font: var(--ios-w-semibold) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font); }
.sheet-body{ padding: 2px 0 6px; }
.sp-sheet .field-error{ padding: 0 var(--ios-margin); font-size: var(--ios-fs-foot); line-height: var(--ios-lh-foot); }
.sp-sheet .field-error:empty{ min-height: 0; margin: 0; }
.sp-sheet .form-note{ font-size: var(--ios-fs-foot); line-height: var(--ios-lh-foot); color: var(--ios-label-2); }
.ios-sheet .sheet-actions{ margin-top: var(--ios-sp-2); padding-top: 0; }
.ios-sheet .sheet-actions .ios-btn{ flex: 1; }
/* forms that still use the older components (the budget schedule form) sit sensibly inside the new sheet */
.ios-sheet .seg-control{ background: var(--ios-fill); border-radius: 9px; padding: 2px; gap: 0; margin-bottom: var(--ios-sp-2); }
.ios-sheet .seg-control button{ padding: 7px 4px; border-radius: 7px; font: var(--ios-w-regular) var(--ios-fs-sub)/var(--ios-lh-sub) var(--ios-font); color: var(--ios-label); min-height: 32px; }
.ios-sheet .seg-control button[aria-checked="true"]{ background: var(--ios-card); color: var(--ios-label); font-weight: var(--ios-w-semibold); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.ios-sheet .field{ margin-bottom: var(--ios-sp-1); }
.ios-sheet .field label{ display: block; padding: 0 var(--ios-margin) 6px; font: var(--ios-w-regular) var(--ios-fs-foot)/var(--ios-lh-foot) var(--ios-font); text-transform: uppercase; color: var(--ios-label-2); }
.ios-sheet .field input, .ios-sheet .field select{
  width: 100%; box-sizing: border-box; min-height: var(--ios-row-h); padding: 10px var(--ios-margin); border: 0; border-radius: var(--ios-radius-card);
  background: var(--ios-card); color: var(--ios-label); font: var(--ios-w-regular) var(--ios-fs-body)/var(--ios-lh-body) var(--ios-font);
}
.ios-sheet .split-box{ background: var(--ios-card); border: 0; border-radius: var(--ios-radius-card); padding: var(--ios-sp-1) var(--ios-margin); }
.ios-sheet .split-row input{ border: 0; background: var(--ios-fill); min-height: 34px; border-radius: 8px; }
.ios-sheet .split-head .btn-link{ font-weight: var(--ios-w-regular); }

/* ---------- tab bar (built; mounted in a later step) ---------- */
.ios-tabbar{
  display: flex; align-items: stretch; justify-content: space-around; box-sizing: border-box; min-height: calc(var(--ios-tabbar-h) + var(--ios-safe-bottom));
  padding: 0 4px var(--ios-safe-bottom); background: var(--ios-bar); border-top: .5px solid var(--ios-separator);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-family: var(--ios-font);
}
.ios-tab{
  flex: 1; min-width: 0; min-height: var(--ios-tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  appearance: none; border: 0; background: transparent; margin: 0; padding: 4px 0 2px; cursor: pointer; color: var(--ios-label-2);
  font: var(--ios-w-regular) var(--ios-fs-tab)/12px var(--ios-font); letter-spacing: .1px;
}
.ios-tab .icon{ width: 25px; height: 25px; display: flex; }
.ios-tab .icon svg{ width: 100%; height: 100%; }
.ios-tab[aria-current="page"]{ color: var(--ios-tint); }
.ios-tab:focus-visible{ outline: 2px solid var(--ios-tint); outline-offset: -2px; border-radius: 8px; }