/* ==========================================================================
   ios.css — Apple iOS 26 / HIG content layer.
   Everything here is scoped under `body.ios` (set by app.js on the restyled
   routes: auth, onboarding, dashboard, plans, calendar). The protected routes
   (landing "home" and "u/:handle" profile) never get the .ios class, so they
   render exactly as before. The navigation glass layer (glass-nav, #bnav,
   home-nav, .topbar) is intentionally NOT targeted here.

   Two things live in this file:
     1. Reusable iOS component classes (.ios-screen, .ios-list, .ios-row,
        .ios-card, .ios-stat, .ios-large-title …) used by the rebuilt markup.
     2. Scoped overrides of the legacy shared primitives (.btn, .field, .seg,
        .switch, .card, .modal-card, .chip, .toast) so existing markup on the
        restyled routes instantly adopts the Apple look.
   ========================================================================== */

/* ----------------------------------------------- legacy token remap (scoped)
   The view modules reference the old design tokens both in CSS and in *inline*
   styles (e.g. background:var(--white), border:var(--border), var(--flame)).
   Re-pointing those tokens here — ONLY under body.ios — retones every inline
   style to the Apple palette at once, while the protected home/profile (no
   .ios class) keep the original values. Hard-coded hex/px inline values are
   not affected, but the vast majority of colors flow through these vars.      */
body.ios {
  /* surfaces */
  --surface-0: #FFFFFF;                 /* page background (grouped)          */
  --surface-1: #FFFFFF;                 /* fills / icon tiles inside cards     */
  --surface-2: #E5E5EA;                 /* pressed / nested fills              */
  --surface-dim: #F2F2F7;
  /* text ramp → iOS labels */
  --ink:   var(--ios-label);
  --ink-press: #000000;
  --fg-1:  var(--ios-label);
  --fg-2:  var(--ios-label-2);
  --fg-3:  var(--ios-label-3);
  /* hairlines — exact iOS divider color everywhere (also legacy inline rows) */
  --border: #EEEEEE;
  --border-strong: #E2E2E6;
  --ring-track: var(--ios-fill);
  /* radii → iOS continuous corners */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  /* single accent (tint) for brand/interactive uses */
  --flame:   var(--tint);   --flame-bg:   var(--tint-bg);
  --protein: var(--tint);   --protein-bg: var(--tint-bg);
  --teal:    var(--tint);
  /* keep a touch of variation for multi-series data-viz only */
  --fat:   #5AC8FA;  --fat-bg:   rgba(90,200,250,0.14);
  --carbs: #FF9F0A;  --carbs-bg: rgba(255,159,10,0.12);
  /* status */
  --danger: var(--ios-red);
  --verified: var(--ios-green);
  --verified-bg: rgba(52,199,89,0.14);
}

/* ------------------------------------------------------------ page surface */
body.ios {
  background: var(--ios-bg-grouped);
  color: var(--ios-label);
}
body.ios #view { background: var(--ios-bg-grouped); min-height: 100vh; }
body.ios ::selection { background: var(--tint-bg); }

/* A standard centered "phone" screen. On desktop the content stays a phone-
   width column on the grouped backdrop (the app is mobile-only for now). */
.ios-screen {
  max-width: var(--ios-phone-max);
  margin: 0 auto;
  padding: 8px var(--ios-margin) calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
body.has-bnav .ios-screen { padding-bottom: 104px; }

/* ------------------------------------------------------------ large title */
.ios-large-title {
  padding: 8px 0 14px;
}
.ios-large-title h1 {
  font: 700 34px/1.08 var(--font-sans);
  letter-spacing: -0.022em;
  color: var(--ios-label);
  margin: 0;
}
.ios-large-title p {
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ios-label-2);
  margin: 6px 0 0;
  text-wrap: pretty;
}

/* A compact inline nav title row (back chevron · title · trailing action) */
.ios-navbar {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin-bottom: 6px;
}
.ios-navbar .title { font: 600 17px/1.2 var(--font-sans); flex: 1; text-align: center; }
.ios-navbar .lead, .ios-navbar .trail { min-width: 64px; display: flex; align-items: center; }
.ios-navbar .trail { justify-content: flex-end; }
.ios-back {
  display: inline-flex; align-items: center; gap: 2px;
  font: 400 17px/1 var(--font-sans); color: var(--tint);
  background: none; border: none; cursor: pointer; padding: 6px 0;
}
.ios-back svg { width: 20px; height: 20px; }

/* ------------------------------------------------------ section labels */
.ios-section-label {
  font: 400 13px/1.3 var(--font-sans);
  color: var(--ios-label-2);
  letter-spacing: -0.01em;
  text-transform: none;            /* iOS 26 uses sentence case, not CAPS */
  padding: 22px 16px 7px;
}
.ios-section-label:first-child { padding-top: 6px; }
.ios-section-foot {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ios-label-2);
  padding: 7px 16px 0;
}

/* ============================ INSET GROUPED LIST ====================== */
.ios-list {
  background: var(--ios-bg-secondary-grouped);
  border-radius: var(--ios-r-group);
  overflow: hidden;
  box-shadow: var(--ios-shadow-card);
}
.ios-list + .ios-list { margin-top: 22px; }

.ios-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 11px 16px;
  position: relative;
  background: var(--ios-bg-secondary-grouped);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease;
  text-align: left;
}
.ios-row[as-static], .ios-row.static { cursor: default; }
.ios-row:not(.static):active { background: var(--ios-fill-3); }
/* hairline separator inset to the label edge */
.ios-row + .ios-row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0;
  height: 1px; background: var(--ios-separator);
  transform: scaleY(0.5); transform-origin: top;
}
.ios-row.has-ic + .ios-row.has-ic::before { left: 56px; }

.ios-row .ic {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: #fff;
}
.ios-row .ic svg { width: 18px; height: 18px; }
.ios-row .ic.gray { background: var(--ios-fill); color: var(--ios-label); }
.ios-row .tx { flex: 1; min-width: 0; }
.ios-row .tx b { font: 400 17px/1.25 var(--font-sans); font-weight: 400; color: var(--ios-label); display: block; }
.ios-row .tx span { font: 400 13px/1.3 var(--font-sans); color: var(--ios-label-2); display: block; margin-top: 2px; }
.ios-row .val { font: 400 17px/1.2 var(--font-sans); color: var(--ios-label-2); white-space: nowrap; }
.ios-row .chev { color: var(--ios-label-3); display: inline-flex; flex: none; }
.ios-row .chev svg { width: 17px; height: 17px; }

/* ============================ GENERIC CARD ============================ */
.ios-card {
  background: var(--ios-bg-secondary-grouped);
  border-radius: var(--ios-r-card);
  padding: 18px;
  box-shadow: var(--ios-shadow-card);
}
.ios-card + .ios-card { margin-top: 16px; }

/* ============================ STAT TILES ============================== */
.ios-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ios-stat {
  background: var(--ios-bg-secondary-grouped);
  border-radius: var(--ios-r-card);
  padding: 16px;
  box-shadow: var(--ios-shadow-card);
  display: flex; flex-direction: column; gap: 4px;
}
.ios-stat .lab { font: 400 13px/1.2 var(--font-sans); color: var(--ios-label-2); display: flex; align-items: center; gap: 6px; }
.ios-stat .lab svg { width: 15px; height: 15px; color: var(--tint); }
.ios-stat .val { font: 700 28px/1.05 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ios-label); }
.ios-stat .val .u { font: 600 13px/1 var(--font-sans); color: var(--ios-label-3); }
.ios-stat .delta { font: 600 13px/1 var(--font-sans); }
.ios-stat .delta.up { color: var(--ios-green); }
.ios-stat .delta.down { color: var(--ios-red); }

/* A prominent dark/tinted hero card (e.g. balance) */
.ios-hero {
  background: var(--ios-label);
  color: #fff;
  border-radius: var(--ios-r-card);
  padding: 22px;
}
.ios-hero .lab { font: 400 13px/1 var(--font-sans); color: rgba(255,255,255,0.6); }
.ios-hero .val { font: 700 36px/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 10px; }

/* ============================ BUTTONS (scoped) ======================== */
body.ios .btn {
  height: 50px; padding: 0 20px; border-radius: var(--ios-r-btn);
  font: 600 17px/1 var(--font-sans); gap: 8px;
  transition: background-color .15s ease, opacity .12s ease, transform .12s ease;
}
body.ios .btn:active { transform: scale(0.97); opacity: .85; }
body.ios .btn:not(:disabled):hover { transform: none; box-shadow: none; }

body.ios .btn-primary { background: var(--tint); color: #fff; }
body.ios .btn-primary:not(:disabled):hover { background: var(--tint-press); }

body.ios .btn-outline {
  background: var(--ios-fill); color: var(--tint); border: none;
}
body.ios .btn-outline:hover { background: var(--ios-fill); }

body.ios .btn-ghost { background: transparent; color: var(--tint); }
body.ios .btn-ghost:hover { background: transparent; color: var(--tint-press); }

body.ios .btn-sm { height: 36px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
body.ios .btn-lg { height: 52px; font-size: 17px; }

/* secondary tinted utility button */
body.ios .btn-tinted { background: var(--tint-bg); color: var(--tint); }

/* ============================ FIELDS (scoped) ========================= */
body.ios .field > label {
  font: 400 13px/1.3 var(--font-sans); color: var(--ios-label-2);
  padding-left: 4px;
}
body.ios .field input,
body.ios .field textarea,
body.ios .field select {
  height: 46px; border-radius: var(--ios-r-field);
  border: 1px solid transparent;
  background: var(--ios-bg-secondary-grouped);
  box-shadow: var(--ios-shadow-card);
  font: 400 17px/1 var(--font-sans); color: var(--ios-label);
  padding: 0 14px;
}
body.ios .field textarea { height: auto; padding: 12px 14px; }
body.ios .field input::placeholder,
body.ios .field textarea::placeholder { color: var(--ios-label-3); }
body.ios .field input:focus,
body.ios .field textarea:focus,
body.ios .field select:focus {
  border-color: var(--tint);
  box-shadow: 0 0 0 3px var(--tint-bg);
}

/* ============================ SEGMENTED (scoped) ===================== */
body.ios .seg {
  background: var(--ios-fill);
  padding: 2px; gap: 0; border-radius: 9px;
}
body.ios .seg button {
  height: 30px; padding: 0 14px; border-radius: 7px;
  font: 600 13px/1 var(--font-sans); color: var(--ios-label);
}
body.ios .seg button.on {
  background: var(--ios-bg); color: var(--ios-label);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04);
}

/* ============================ SWITCH (scoped) ======================== */
body.ios .switch { width: 51px; height: 31px; }
body.ios .switch .track { background: var(--ios-fill); }
body.ios .switch .knob {
  width: 27px; height: 27px; top: 2px; left: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
}
body.ios .switch input:checked + .track { background: var(--ios-green); }
body.ios .switch input:checked ~ .knob { transform: translateX(20px); }

/* ============================ CHIPS / BADGES (scoped) ================ */
body.ios .chip { background: var(--ios-fill-2); color: var(--ios-label-2); border-radius: var(--r-pill); }
body.ios .chip.verified { background: rgba(52,199,89,0.14); color: #1F8F3C; }
body.ios .badge-live { background: rgba(52,199,89,0.14); color: #1F8F3C; }

/* ============================ GENERIC CARD OVERRIDE ================== */
/* legacy .card on restyled routes → iOS grouped card (no hairline border) */
body.ios .card {
  background: var(--ios-bg-secondary-grouped);
  border: none;
  border-radius: var(--ios-r-card);
  box-shadow: var(--ios-shadow-card);
}

/* ============================ MODAL → SHEET ========================== */
body.ios .scrim {
  background: rgba(0,0,0,0.4);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
  transition: opacity 0.23s cubic-bezier(0.15, 0.85, 0.35, 1) !important;
}
@media (min-width: 480px) {
  body.ios .scrim {
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 !important;
  }
}

body.ios .modal-card {
  width: 100%; max-width: 460px;
  border-radius: var(--ios-r-sheet) var(--ios-r-sheet) 0 0 !important;
  background: var(--ios-bg-elevated);
  box-shadow: var(--ios-shadow-sheet);
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom)) !important;
  transform: translateY(100%) !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  transition: transform 0.23s cubic-bezier(0.15, 0.85, 0.35, 1) !important;
}
@media (min-width: 480px) {
  body.ios .modal-card {
    border-radius: var(--ios-r-sheet) var(--ios-r-sheet) 0 0 !important;
    transform: translateY(100%) !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}
body.ios .scrim.show .modal-card { transform: translateY(0) !important; }
/* grabber handle */
body.ios .modal-card::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px; background: var(--ios-fill);
}
body.ios .modal-card h3 { font: 700 20px/1.25 var(--font-sans); color: var(--ios-label); }
body.ios .modal-card p { font: 400 15px/1.45 var(--font-sans); color: var(--ios-label-2); }

body.ios .subm-head { padding-top: 24px; }
body.ios .subm-list { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Force scrim container to align bottom-sheet style when subscribers modal is open */
.scrim:has(.subm-fs),
body.ios .scrim:has(.subm-fs),
body.cal-mode .scrim:has(.subm-fs) {
  background: rgba(0,0,0,0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important; /* Prevent any scrolling of the scrim when bottom-sheet is open to avoid showing negative margin area */
}

/* Ensure the subscriber modal sits perfectly flat at the bottom with 0px bottom margin and 0 bottom border-radius */
body.ios .modal-card.subm-fs,
.modal-card.subm-fs {
  border-radius: var(--ios-r-sheet) var(--ios-r-sheet) 0 0 !important;
  margin-top: auto !important;
  margin-bottom: -20px !important; /* Safe negative margin to tuck deep into the absolute bottom edge of viewport */
  padding-bottom: calc(24px + env(safe-area-inset-bottom) + 20px) !important; /* Offset padding to prevent content cut off */
  max-height: calc(100vh - 40px) !important;
  width: 100% !important;
  max-width: 460px !important;
  box-shadow: var(--ios-shadow-sheet) !important;
  transform: translateY(100%) !important;
  transition: transform 0.23s cubic-bezier(0.15, 0.85, 0.35, 1) !important;
}

/* Ensure show transition works seamlessly */
.scrim.show .modal-card.subm-fs {
  transform: translateY(0) !important;
}

/* ============================ TOASTS (scoped) ======================== */
body.ios .toast-wrap { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); max-width: 420px; }
body.ios .toast {
  background: rgba(28,28,30,0.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 16px;
  transform: translateY(140%);
}
body.ios .toast.in { transform: none; }
body.ios .toast .ti { background: rgba(255,255,255,0.16); color: #fff; border-radius: 9px; }

/* ---- editor-sheet header buttons → plain iOS circular controls -------- */
body.ios .btn-oval-back, body.ios .btn-oval-close {
  border-radius: 50% !important;
  width: 30px; height: 30px;
  box-shadow: none !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
}
body.ios .btn-oval-back:hover, body.ios .btn-oval-close:hover {
  background: var(--surface-2) !important; transform: none;
}

/* ==========================================================================
   Structural primitives used by the rebuilt view markup (large title, groups,
   inset rows) + micro-animations. Scoped to body.ios.
   ========================================================================== */
body.ios .ios-title { padding: 0px 0 10px; }
body.ios .ios-title h1 { font: 700 32px/1.06 var(--font-sans); letter-spacing: -0.024em; color: var(--ios-label); margin: 0; }
body.ios .ios-title p { font: 400 14px/1.4 var(--font-sans); color: var(--ios-label-2); margin: 4px 0 0; text-wrap: pretty; }

body.ios .ios-group { margin-top: 24px; }
body.ios .ios-title + .ios-group { margin-top: 10px; }
body.ios .ios-grouplabel { font: 400 13px/1.3 var(--font-sans); color: var(--ios-label-2); padding: 0 16px 5px; }

/* inset row family (.ios-rrow) — colored rounded icon tile + text + value + chevron */
body.ios .ios-rrow {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; width: 100%; padding: 9px 16px;
  position: relative; background: var(--ios-bg-secondary-grouped);
  cursor: pointer; text-decoration: none; color: var(--ios-label);
  border: none; text-align: left; font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, transform .16s cubic-bezier(.2,.8,.3,1);
}
body.ios .ios-rrow:active { background: var(--ios-fill-2); transform: scale(.985); }
body.ios .ios-rrow + .ios-rrow::before {
  content: ""; position: absolute; left: 58px; right: 0; top: 0; height: 1px;
  background: var(--ios-separator-line);
}
body.ios .ios-rt { width: 30px; height: 30px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
body.ios .ios-rt svg { width: 18px; height: 18px; }
body.ios .ios-rimg { width: 36px; height: 36px; object-fit: contain; flex: none; }
body.ios .ios-rb { flex: 1; min-width: 0; }
body.ios .ios-rb b { font: 400 17px/1.25 var(--font-sans); display: block; color: var(--ios-label); }
body.ios .ios-rb span { font: 400 13px/1.3 var(--font-sans); color: var(--ios-label-2); display: block; margin-top: 1px; }
body.ios .ios-rv { font: 400 17px/1 var(--font-sans); color: var(--ios-label-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ios .ios-rc { color: #C7C7CC; flex: none; display: inline-flex; }
body.ios .ios-rc svg { width: 16px; height: 16px; }

/* non-interactive rows (pure data) */
body.ios .ios-rrow.static { cursor: default; }
body.ios .ios-rrow.static:active { transform: none; background: var(--ios-bg-secondary-grouped); }
/* prominent numeric value on the right of a row */
body.ios .ios-rv.perf-num { font: 700 17px/1 var(--font-num); color: var(--ios-label); }
body.ios .ios-rrow .trend { margin-right: 2px; flex: none; }

/* ---- micro-animations -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body.ios [data-reveal] { animation: iosReveal .5s cubic-bezier(.22,1,.36,1) both; }
  body.ios [data-reveal]:nth-of-type(2) { animation-delay: .05s; }
  body.ios [data-reveal]:nth-of-type(3) { animation-delay: .10s; }
  body.ios [data-reveal]:nth-of-type(4) { animation-delay: .15s; }
  body.ios [data-reveal]:nth-of-type(5) { animation-delay: .20s; }
  body.ios [data-reveal]:nth-of-type(6) { animation-delay: .25s; }
}
@keyframes iosReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Editor controls (HIG): image wells, color grid, form rows, sheet header.
   Used by the rebuilt Design editors. Scoped to body.ios.
   ========================================================================== */
/* sheet title block */
body.ios .ed-head { margin: 2px 0 6px; }
body.ios .ed-head h3 { font: 700 22px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--ios-label); margin: 0; }
body.ios .ed-head p { font: 400 14px/1.4 var(--font-sans); color: var(--ios-label-2); margin: 6px 0 0; }

/* image well — tappable preview that opens the file picker */
body.ios .iow {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--ios-fill-2); border: 1px dashed var(--ios-separator-opaque);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s;
}
body.ios .iow:active { transform: scale(.99); background: var(--ios-fill); }
body.ios .iow img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ios .iow-banner { width: 100%; aspect-ratio: 16 / 7; border-radius: 16px; }
body.ios .iow-avatar { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto; }
body.ios .iow .iow-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ios-label-2); font: 600 13px/1.2 var(--font-sans); text-align: center; padding: 8px; }
body.ios .iow .iow-ph svg { width: 26px; height: 26px; color: var(--tint); }
body.ios .iow-actions { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
body.ios .iow-actions button { background: none; border: none; color: var(--tint); font: 600 15px/1 var(--font-sans); cursor: pointer; padding: 6px 10px; border-radius: 8px; }
body.ios .iow-actions button:active { background: var(--ios-fill-2); }
body.ios .iow-actions button.danger { color: var(--ios-red); }

/* color swatch grid (replaces raw <input type=color>) */
body.ios .color-grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 2px 2px; }
body.ios .color-grid .sw { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: none; padding: 0; transition: transform .12s cubic-bezier(.2,.8,.3,1); }
body.ios .color-grid .sw:active { transform: scale(.88); }
body.ios .color-grid .sw.on { box-shadow: 0 0 0 2.5px var(--ios-bg-secondary-grouped), 0 0 0 5px var(--tint); }

/* form row inputs inside an .ios-list (label tile + field) */
body.ios .ios-rrow .row-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 0;
  font: 400 17px/1.3 var(--font-sans); color: var(--ios-label);
}
body.ios .ios-rrow .row-input::placeholder { color: var(--ios-label-3); }
/* a switch sitting at the trailing edge of a row */
body.ios .ios-rrow > .switch { flex: none; margin-left: auto; }

/* link editor cards (Linktree-style list of links) */
body.ios .link-edit-card { background: var(--ios-bg-secondary-grouped); border-radius: var(--ios-r-card); padding: 12px 14px 14px; box-shadow: var(--ios-shadow-card); margin-bottom: 12px; }
body.ios .lec-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
body.ios .lec-grip { color: var(--ios-label-3); display: inline-flex; cursor: grab; }
body.ios .lec-grip svg { width: 20px; height: 20px; transform: rotate(90deg); }
body.ios .lec-title { flex: 1; font: 600 15px/1.2 var(--font-sans); color: var(--ios-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ios .lec-del { background: none; border: none; cursor: pointer; color: var(--ios-red); display: inline-flex; padding: 4px; }
body.ios .lec-del svg { width: 18px; height: 18px; }
body.ios .link-edit-card .ios-list { box-shadow: none; }

/* wizard step dots */
body.ios .wiz-dots { display: flex; gap: 7px; justify-content: center; margin: 2px 0 18px; }
body.ios .wiz-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ios-fill); transition: background .2s, transform .2s; }
body.ios .wiz-dots i.on { background: var(--tint); transform: scale(1.15); }
body.ios .wiz-dots i.done { background: var(--tint); opacity: .45; }

/* ============================ FAB / RESET ============================ */
body.ios .reset-fab {
  border-radius: var(--r-pill); background: var(--ios-bg-secondary-grouped);
  border: none; box-shadow: var(--ios-shadow-card); color: var(--ios-label-2);
}