/* iOS Decimal: platform chrome and controls (Apple HIG structure, Decimal tokens). */

.platform-ios { font-family: var(--m-font-family); }

/* ---- Navigation bar ---------------------------------------------------- */
.ios-nav-bar {
  height: var(--m-nav-bar-height);
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--m-space-8);
  background: var(--m-surface-page);
  border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider);
}
.ios-nav-bar__title { font: var(--m-type-heading-2); color: var(--m-glyphs-prominent); text-align: center; margin: 0; }
.ios-nav-bar__leading { display: flex; align-items: center; justify-self: start; }
.ios-nav-bar__trailing { display: flex; align-items: center; justify-self: end; }
.ios-nav-bar--large { border-bottom: 0; }
.ios-large-title { font: var(--m-type-heading-4); color: var(--m-glyphs-prominent); margin: 0; padding: 0 var(--m-screen-margin) var(--m-space-8); min-height: var(--m-large-title-height); display: flex; align-items: flex-end; }
.ios-bar-btn { display: inline-flex; align-items: center; gap: var(--m-space-2); min-height: var(--m-touch-target); min-width: var(--m-touch-target); padding: 0 var(--m-space-8); border: 0; background: none; color: var(--m-glyphs-action); font: var(--m-type-label-3); cursor: pointer; }
.ios-bar-btn--done { font: var(--m-type-label-3-prominent); }

/* ---- Tab bar ------------------------------------------------------------ */
.ios-tab-bar {
  flex: none;
  display: flex;
  height: calc(var(--m-tab-bar-padding-top) + var(--m-tab-bar-height) + var(--m-home-indicator-height));
  padding-top: var(--m-tab-bar-padding-top);
  padding-bottom: var(--m-home-indicator-height);
  background: var(--m-surface-card);
  border-top: var(--m-stroke-s) solid var(--m-stroke-divider);
}
.ios-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--m-space-2);
  border: 0;
  background: none;
  color: var(--m-glyphs-secondary);
  font: var(--m-type-supplemental-2);
  letter-spacing: var(--m-tracking-supplemental-2);
  cursor: pointer;
}
.ios-tab[aria-selected="true"] { color: var(--m-glyphs-action); }
.ios-tab .icon { width: 24px; height: 24px; }
.ios-tab__badge { position: relative; }
.ios-tab__badge .m-badge { top: -4px; right: -12px; }

/* ---- Toolbar ------------------------------------------------------------ */
.ios-toolbar { flex: none; display: flex; justify-content: space-between; align-items: center; min-height: var(--m-toolbar-height); padding: 0 var(--m-space-8); background: var(--m-surface-card); border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }

/* ---- Search field ------------------------------------------------------- */
.ios-search { display: flex; align-items: center; gap: var(--m-space-8); height: var(--m-search-field-height); padding: 0 var(--m-space-8); border-radius: var(--m-corner-control); background: var(--m-surface-sunken); color: var(--m-glyphs-secondary); }
.ios-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--m-type-body-2); color: var(--m-glyphs-prominent); }
.ios-search-row { display: flex; align-items: center; gap: var(--m-space-8); }
.ios-search-row .ios-search { flex: 1; }

/* ---- Segmented control (decimal-content-switcher) ---------------------- */
.ios-segmented { display: flex; padding: var(--m-space-2); gap: var(--m-space-2); border-radius: var(--m-corner-control); background: var(--m-surface-sunken); }
.ios-segment { flex: 1; min-height: 32px; border: 0; border-radius: var(--m-corner-m); background: transparent; color: var(--m-glyphs-default); font: var(--m-type-label-2); letter-spacing: var(--m-tracking-label-2); cursor: pointer; position: relative; }
.ios-segment::after { content: ""; position: absolute; inset: -6px 0; }
.ios-segment[aria-selected="true"] { background: var(--m-surface-card); color: var(--m-glyphs-prominent); font: var(--m-type-label-2-prominent); box-shadow: var(--m-elevation-low); }

/* ---- Lists (inset grouped, decimal-list / decimal-list-item) ----------- */
.ios-list-header { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); text-transform: uppercase; color: var(--m-glyphs-secondary); margin: 0 0 var(--m-space-4) var(--m-space-16); }
.ios-list-footer { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); margin: var(--m-space-4) var(--m-space-16) 0; }
.ios-list { list-style: none; margin: 0; padding: 0; border-radius: var(--m-corner-card); background: var(--m-surface-card); overflow: hidden; }
.ios-row {
  display: flex;
  align-items: center;
  gap: var(--m-space-12);
  min-height: var(--m-list-row-min-height);
  padding: var(--m-space-8) var(--m-space-16);
  position: relative;
  background: var(--m-surface-card);
  font: var(--m-type-body-2);
  color: var(--m-glyphs-prominent);
}
.ios-row + .ios-row::before,
.ios-list > li + li > .ios-row::before { content: ""; position: absolute; top: 0; left: var(--m-space-16); right: 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }
.ios-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ios-row__sub { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.ios-row__detail { color: var(--m-glyphs-secondary); font: var(--m-type-body-2); }
.ios-row__chevron { width: 8px; height: 8px; border-right: var(--m-stroke-m) solid var(--m-glyphs-disabled); border-top: var(--m-stroke-m) solid var(--m-glyphs-disabled); transform: rotate(45deg); flex: none; }
.ios-row__check { color: var(--m-glyphs-action); }
.ios-row--action { color: var(--m-glyphs-action); }
.ios-row--destructive { color: var(--m-glyphs-destructive); }
.ios-row__icon { width: 32px; height: 32px; border-radius: var(--m-corner-l); background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ios-row__icon .icon { width: 16px; height: 16px; }

/* Swipe actions */
.swipe { position: relative; overflow: hidden; }
.swipe__actions { position: absolute; inset: 0 0 0 auto; display: flex; }
.swipe__actions button { width: 80px; border: 0; color: var(--m-glyphs-on-fill); font: var(--m-type-label-2-prominent); cursor: pointer; }
.swipe__flag { background: var(--m-fill-primary); }
.swipe__delete { background: var(--m-fill-destructive); }
.swipe__content { position: relative; z-index: 1; touch-action: pan-y; cursor: grab; transition: transform var(--m-duration-base) var(--m-easing); }
.swipe.is-dragging .swipe__content { transition: none; }

/* ---- Switch (decimal-toggle-switch) ------------------------------------ */
.ios-switch { position: relative; width: var(--m-switch-width); height: var(--m-switch-height); flex: none; border-radius: var(--m-corner-pill); background: var(--m-stroke-divider); border: 0; padding: 0; cursor: pointer; transition: background var(--m-duration-fast); }
.ios-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: var(--m-switch-knob); height: var(--m-switch-knob); border-radius: 50%; background: var(--m-fill-control); box-shadow: var(--m-elevation-medium); transition: transform var(--m-duration-fast) var(--m-easing); }
.ios-switch[aria-checked="true"] { background: var(--m-fill-constructive); }
.ios-switch[aria-checked="true"]::after { transform: translateX(calc(var(--m-switch-width) - var(--m-switch-knob) - 4px)); }
.ios-switch:focus-visible { outline: var(--m-stroke-m) solid var(--m-stroke-focus); outline-offset: 2px; }
.ios-switch:disabled { opacity: 0.4; }

/* ---- Action sheet ------------------------------------------------------- */
.ios-action-sheet { width: 100%; padding: var(--m-space-8); display: flex; flex-direction: column; gap: var(--m-space-8); }
.ios-action-sheet__group { border-radius: var(--m-corner-dialog); background: var(--m-surface-card); overflow: hidden; }
.ios-action-sheet__title { padding: var(--m-space-12) var(--m-space-16); text-align: center; font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.ios-action-sheet button { display: block; width: 100%; min-height: 56px; border: 0; border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); background: var(--m-surface-card); color: var(--m-glyphs-action); font: var(--m-type-heading-3); font-weight: 400; cursor: pointer; }
.ios-action-sheet button:last-child { border-bottom: 0; }
.ios-action-sheet .is-destructive { color: var(--m-glyphs-destructive); }
.ios-action-sheet .is-cancel { font: var(--m-type-heading-3); }

/* ---- Alert (decimal-modal) ---------------------------------------------- */
.ios-alert { width: var(--m-dialog-width); border-radius: var(--m-corner-dialog); background: var(--m-surface-card); overflow: hidden; text-align: center; box-shadow: var(--m-elevation-high); }
.ios-alert__body { padding: var(--m-space-16); }
.ios-alert__title { font: var(--m-type-heading-2); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-4); }
.ios-alert__text { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); margin: 0; }
.ios-alert__actions { display: flex; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); }
.ios-alert__actions button { flex: 1; min-height: var(--m-touch-target); border: 0; background: none; color: var(--m-glyphs-action); font: var(--m-type-label-3); cursor: pointer; }
.ios-alert__actions button + button { border-left: var(--m-stroke-s) solid var(--m-stroke-divider); }
.ios-alert__actions .is-preferred { font: var(--m-type-label-3-prominent); }
.ios-alert__actions .is-destructive { color: var(--m-glyphs-destructive); }

/* ---- Sheet (decimal-drawer on mobile) ----------------------------------- */
.ios-sheet { width: 100%; background: var(--m-surface-page); border-radius: var(--m-corner-sheet) var(--m-corner-sheet) 0 0; box-shadow: var(--m-elevation-high); display: flex; flex-direction: column; max-height: 90%; }
.ios-sheet__grabber { align-self: center; width: var(--m-sheet-grabber-width); height: var(--m-sheet-grabber-height); border-radius: var(--m-corner-pill); background: var(--m-stroke-control); margin: var(--m-space-8) 0 0; }
.ios-sheet__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--m-space-8); min-height: var(--m-nav-bar-height); }
.ios-sheet__header .ios-nav-bar__title { grid-column: 2; }
.ios-sheet__body { padding: 0 var(--m-screen-margin) var(--m-space-24); display: flex; flex-direction: column; gap: var(--m-space-16); }

/* ---- Pop-up / pull-down button (decimal-dropdown, decimal-menu) -------- */
.ios-popup-btn { display: inline-flex; align-items: center; gap: var(--m-space-4); min-height: var(--m-touch-target); border: 0; background: none; color: var(--m-glyphs-action); font: var(--m-type-body-2); cursor: pointer; padding: 0; }
.ios-popup-btn::after { content: ""; width: 6px; height: 6px; border-right: var(--m-stroke-m) solid currentColor; border-bottom: var(--m-stroke-m) solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: var(--m-space-4); }



/* ---- Date picker (decimal-date-picker, decimal-calendar) --------------- */
.ios-date-compact { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--m-space-12); border-radius: var(--m-corner-control); background: var(--m-surface-sunken); color: var(--m-glyphs-action); font: var(--m-type-body-2); border: 0; cursor: pointer; }
.ios-calendar { background: var(--m-surface-card); border-radius: var(--m-corner-card); padding: var(--m-space-12); }
.ios-calendar__head { display: flex; justify-content: space-between; align-items: center; font: var(--m-type-heading-2); color: var(--m-glyphs-prominent); margin-bottom: var(--m-space-8); }
.ios-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: var(--m-space-2); }
.ios-calendar__grid span { font: var(--m-type-label-1-prominent); color: var(--m-glyphs-secondary); padding: var(--m-space-4) 0; }
.ios-calendar__grid button { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: var(--m-type-body-2); color: var(--m-glyphs-prominent); cursor: pointer; }
.ios-calendar__grid button[aria-selected="true"] { background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }
.ios-calendar__grid button.is-today { color: var(--m-glyphs-action); font: var(--m-type-label-3-prominent); }

/* Wheel picker */
.ios-wheel { position: relative; height: 176px; overflow: hidden; display: flex; justify-content: center; gap: var(--m-space-24); background: var(--m-surface-card); border-radius: var(--m-corner-card); }
.ios-wheel::before { content: ""; position: absolute; left: var(--m-space-8); right: var(--m-space-8); top: 50%; height: 36px; transform: translateY(-50%); border-radius: var(--m-corner-l); background: var(--m-surface-sunken); }
.ios-wheel ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; font: var(--m-type-heading-3); font-weight: 400; color: var(--m-glyphs-disabled); text-align: center; }
.ios-wheel li { height: 36px; display: flex; align-items: center; justify-content: center; }
.ios-wheel li.is-selected { color: var(--m-glyphs-prominent); }

/* ---- iPad split view ----------------------------------------------------- */
.ios-split { display: grid; grid-template-columns: 136px 1fr; min-height: 320px; }
.ios-split__master { background: var(--m-surface-sunken); border-right: var(--m-stroke-s) solid var(--m-stroke-divider); padding: var(--m-space-8); display: flex; flex-direction: column; gap: var(--m-space-4); }
.ios-split__master button { text-align: left; border: 0; background: none; padding: var(--m-space-8); border-radius: var(--m-corner-l); font: var(--m-type-label-2); color: var(--m-glyphs-prominent); cursor: pointer; min-height: var(--m-touch-target); }
.ios-split__master button[aria-current="true"] { background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }
.ios-split__detail { padding: var(--m-space-16); display: flex; flex-direction: column; gap: var(--m-space-12); }

/* ---- Biometric prompt (Face ID) ---------------------------------------- */
.ios-biometric { width: 168px; padding: var(--m-space-24) var(--m-space-16); border-radius: var(--m-corner-dialog); background: var(--m-surface-card); display: flex; flex-direction: column; align-items: center; gap: var(--m-space-12); font: var(--m-type-label-2-prominent); color: var(--m-glyphs-prominent); box-shadow: var(--m-elevation-high); }
.ios-biometric .icon { width: 56px; height: 56px; color: var(--m-glyphs-action); }

/* ---- Keyboard inset (simulated) ---------------------------------------- */
.ios-keyboard { flex: none; height: 216px; background: var(--m-surface-sunken); border-top: var(--m-stroke-s) solid var(--m-stroke-divider); display: grid; grid-template-rows: repeat(4, 1fr); gap: var(--m-space-8); padding: var(--m-space-8) var(--m-space-4); }
.ios-keyboard__row { display: flex; gap: var(--m-space-4); justify-content: center; }
.ios-keyboard__row span { flex: 1; max-width: 32px; border-radius: var(--m-corner-m); background: var(--m-surface-card); box-shadow: var(--m-elevation-low); }

/* ---- Pull to refresh ----------------------------------------------------- */
.ios-refresh { display: flex; justify-content: center; padding: var(--m-space-12) 0; }