/* ---- Apple-native layout (public/ios.js) -----------------------------------------------------------
   UIKit metrics: 44pt nav bar and rows, 16pt margins, 34pt large titles on tab roots only, 17pt body,
   15pt subtitles, 13pt section headers/footers, hairline separators inset to the text, 10pt grouped
   corners, flat system colours, no shadows except menus and sheets. Tokens: skin-apple.css. */
.ios-only, .ios-tab-ico, .ios-tab-label { display: none !important; }
:root[data-skin="apple"] .ios-only { display: flex !important; }
:root[data-skin="apple"] .ios-only[hidden] { display: none !important; }
:root[data-skin="apple"] .topbar-title, :root[data-skin="apple"] .top-actions { display: none; }
:root[data-skin="apple"] {
  --tap: #d1d1d6; --chev: #c4c4c7; --sheet-bg: #f2f2f7; --warn-sym: #ff9500; --sym-gray: #8e8e93; --tab-idle: #999999;
  --material: #f9f9f9e6; --menu-bg: #ececec; --as-bg: #f9f9f9eb;
}
@media (prefers-color-scheme: dark) { :root[data-skin="apple"]:not([data-theme="light"]) { --tap: #3a3a3c; --chev: #5a5a5f; --sheet-bg: #1c1c1e; --warn-sym: #ff9f0a; --sym-gray: #8e8e93; --tab-idle: #8e8e93; --material: #161616e6; --menu-bg: #2c2c2e; --as-bg: #2c2c2eeb; } }
:root[data-skin="apple"][data-theme="dark"] { --tap: #3a3a3c; --chev: #5a5a5f; --sheet-bg: #1c1c1e; --warn-sym: #ff9f0a; --sym-gray: #8e8e93; --tab-idle: #8e8e93; --material: #161616e6; --menu-bg: #2c2c2e; --as-bg: #2c2c2eeb; }
:root[data-skin="apple"] body { font-size: 17px; line-height: 22px; letter-spacing: -0.022em; -webkit-tap-highlight-color: transparent; }
:root[data-skin="apple"] main { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
:root[data-skin="apple"] .shell { background: var(--bg); }

/* Navigation bar (UINavigationBar): transparent at the scroll edge, material once content scrolls under it */
:root[data-skin="apple"] .topbar, :root[data-skin="apple"] body.alert-mode .topbar, :root[data-skin="apple"] body.safe-mode .topbar {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; height: 44px; padding: 0 8px;
  border-bottom: .5px solid transparent; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .2s, border-color .2s;
}
:root[data-skin="apple"] body.ios-scrolled .topbar { border-bottom-color: var(--line-strong); background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.ios-back { grid-column: 1; justify-self: start; align-items: center; gap: 4px; max-width: 100%; min-height: 44px; border: 0; padding: 0 8px 0 2px; background: none; color: var(--brand); font: inherit; font-size: 17px; letter-spacing: -0.022em; }
.ios-back svg { width: 12px; height: 20px; flex: none; }
.ios-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-back:active, .ios-more:active { opacity: .2; }
.ios-nav-title { grid-column: 2; justify-content: center; max-width: 56vw; overflow: hidden; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.022em; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
body.ios-scrolled .ios-nav-title, body.ios-inline .ios-nav-title { opacity: 1; }
.ios-more { grid-column: 3; justify-self: end; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--brand); }
.ios-more svg { width: 22px; height: 22px; }
[dir="rtl"] .ios-back svg { transform: scaleX(-1); }

/* Large title: only on tab roots */
.ios-large-title { margin: 3px 0 8px; color: var(--ink); font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .011em; }
body.ios-inline main { padding-top: 12px; }
.ios-intro { margin: 4px 16px 20px; color: var(--muted); font-size: 15px; line-height: 20px; }

/* Inset grouped list (UITableView .insetGrouped) */
.ios-section { margin: 0 0 35px; }
.ios-section-header { margin: 0 0 6px; padding: 0 16px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: -0.006em; text-transform: uppercase; }
.ios-section-footer { margin: 6px 0 0; padding: 0 16px; color: var(--muted); font-size: 13px; line-height: 18px; letter-spacing: -0.006em; }
.ios-section-footer a { color: var(--brand); text-decoration: none; }
.ios-list { overflow: hidden; border-radius: 10px; background: var(--surface); }
.ios-row { --inset: 16px; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; border: 0; padding: 11px 16px; background: none; color: var(--ink); font: inherit; font-size: 17px; line-height: 22px; letter-spacing: -0.022em; text-align: start; }
.ios-row:has(> .ios-icon) { --inset: 59px; padding-block: 7px; min-height: 44px; }
.ios-row:has(> .ios-lead) { --inset: 52px; }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; inset-inline: var(--inset) 0; border-top: .5px solid var(--line-strong); }
.ios-row.tappable { cursor: pointer; }
.ios-row.tappable:active { background: var(--tap); }
.ios-row.tappable:active::before, .ios-row.tappable:active + .ios-row::before { border-color: transparent; }
label.ios-row { cursor: pointer; }
.ios-row[disabled] { color: var(--faint); pointer-events: none; }
.ios-row-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ios-label { overflow-wrap: anywhere; }
.ios-sub { color: var(--muted); font-size: 15px; line-height: 20px; letter-spacing: -0.016em; overflow-wrap: anywhere; }
.ios-row.issue .ios-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ios-row.text .ios-label { font-size: 15px; line-height: 20px; }
.ios-value { flex: none; max-width: 52%; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
.ios-chev { flex: none; width: 8px; height: 14px; margin-inline-start: -4px; color: var(--chev); }
[dir="rtl"] .ios-chev { transform: scaleX(-1); }
.ios-action { justify-content: flex-start; color: var(--brand); }
.ios-action.destructive { color: var(--risk); }
.ios-action .ios-spinner { margin-inline-end: 8px; }
.ios-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #fff; background: var(--tone); }
.ios-icon .g { width: 20px; height: 20px; }
.ios-lead { flex: none; display: grid; place-items: center; width: 24px; }
.tone-blue { --tone: #007aff; } .tone-red { --tone: #ff3b30; } .tone-orange { --tone: #ff9500; } .tone-green { --tone: #34c759; }
.tone-purple { --tone: #af52de; } .tone-indigo { --tone: #5856d6; } .tone-teal { --tone: #30b0c7; } .tone-gray { --tone: #8e8e93; }
.ios-trail-sym { flex: none; display: grid; }
.ios-trail-sym .sym { width: 20px; height: 20px; }
.ios-badge { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.ios-danger-text { color: var(--risk); }
.path { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; letter-spacing: 0; overflow-wrap: anywhere; }

/* Symbols */
.sym { flex: none; width: 22px; height: 22px; display: block; }
.big-sym { width: 60px; height: 60px; display: block; }
.ios-spinner { position: relative; display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: -4px; animation: iosSpin 1s steps(8) infinite; }
.ios-spinner i { position: absolute; left: 45%; top: 0; width: 10%; height: 28%; border-radius: 2px; background: var(--muted); transform-origin: 50% 178%; }
.ios-spinner .s0 { transform: rotate(0deg); opacity: 1; } .ios-spinner .s1 { transform: rotate(45deg); opacity: .86; } .ios-spinner .s2 { transform: rotate(90deg); opacity: .72; } .ios-spinner .s3 { transform: rotate(135deg); opacity: .6; }
.ios-spinner .s4 { transform: rotate(180deg); opacity: .48; } .ios-spinner .s5 { transform: rotate(225deg); opacity: .38; } .ios-spinner .s6 { transform: rotate(270deg); opacity: .3; } .ios-spinner .s7 { transform: rotate(315deg); opacity: .22; }
.ios-spinner.large { width: 36px; height: 36px; }
@keyframes iosSpin { to { transform: rotate(360deg); } }

/* Status header: symbol, title and footnote on the grouped background (as in Software Update) */
.ios-header { display: grid; justify-items: center; gap: 4px; margin: 6px 0 28px; padding: 0 20px; text-align: center; }
.ios-header .big-sym, .ios-header-spinner { margin-bottom: 10px; }
.ios-header-spinner { display: grid; place-items: center; width: 60px; height: 60px; }
.ios-header .big-sym { animation: symIn .45s cubic-bezier(.32,.72,0,1) both; }
.ios-header h2 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ios-header p { margin: 0; color: var(--muted); font-size: 15px; line-height: 20px; letter-spacing: -0.016em; }
.ios-header .ios-progress { width: min(260px, 80%); margin: 14px 0 0; }
.ios-progress-caption { font-size: 13px !important; line-height: 18px !important; font-variant-numeric: tabular-nums; }
@keyframes symIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* Live check rows */
.ios-row.pending { color: var(--faint); }
.ios-row.just .sym { animation: symIn .3s cubic-bezier(.32,.72,0,1) both; }

/* UIProgressView */
.ios-progress { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--fill-2); }
.ios-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width .3s ease; }

/* Controls */
.ios-text-btn { flex: none; border: 0; padding: 0; background: none; color: var(--brand); font: inherit; font-size: 17px; }
.ios-text-btn:active { opacity: .2; }
.ios-seg { display: flex; margin: 4px 0 24px; padding: 2px; border-radius: 9px; background: var(--fill); }
.ios-seg button { position: relative; flex: 1; min-width: 0; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.006em; white-space: nowrap; }
.ios-seg button + button::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; border-left: .5px solid var(--line-strong); }
.ios-seg button.active::before, .ios-seg button.active + button::before { display: none; }
.ios-seg button.active { background: var(--surface); font-weight: 600; box-shadow: 0 3px 8px #0000001f, 0 3px 1px #0000000a, 0 0 0 .5px #0000000a; }
@media (prefers-color-scheme: dark) { :root[data-skin="apple"]:not([data-theme="light"]) .ios-seg button.active { background: #636366; } }
:root[data-skin="apple"][data-theme="dark"] .ios-seg button.active { background: #636366; }
.ios-row.field input { width: 100%; min-width: 0; height: 22px; border: 0; padding: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; letter-spacing: -0.022em; outline: none; }
.ios-row.field input::placeholder { color: var(--faint); }
.ios-switch { position: relative; flex: none; width: 51px; height: 31px; }
.ios-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ios-switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--fill-2); transition: background .25s; }
.ios-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px #00000026, 0 3px 1px #0000000f; transition: transform .3s cubic-bezier(.32,.72,0,1); }
.ios-switch input:checked + i { background: #34c759; }
.ios-switch input:checked + i::after { transform: translateX(20px); }
.ios-switch input:disabled + i { opacity: .5; }
.ios-meter { display: inline-flex; gap: 3px; }
.ios-meter i { width: 16px; height: 5px; border-radius: 3px; background: var(--fill-2); }
.ios-meter.s0 i.on, .ios-meter.s1 i.on { background: var(--risk); } .ios-meter.s2 i.on { background: #ff9500; } .ios-meter.s3 i.on, .ios-meter.s4 i.on { background: #34c759; }

/* Reminders-style checklist */
details.ios-row { display: block; padding: 0; --inset: 52px; }
details.ios-row > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; cursor: pointer; list-style: none; }
details.ios-row > summary::-webkit-details-marker { display: none; }
details.ios-row[open] > summary .ios-chev { transform: rotate(90deg); }
details.ios-row > p { margin: -6px 16px 12px 52px; color: var(--muted); font-size: 15px; line-height: 20px; }
.ios-circle { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--chev); border-radius: 50%; padding: 0; background: none; color: transparent; }
.ios-circle .ios-check { width: 12px; height: 11px; }
.reviewed .ios-circle { border-color: var(--brand); background: var(--brand); color: #fff; }
.reviewed .ios-label { color: var(--muted); }

/* ContentUnavailableView */
.ios-empty { display: grid; justify-items: center; gap: 6px; padding: 80px 24px 40px; text-align: center; }
.ios-empty-sym { color: var(--sym-gray); }
.ios-empty-sym .g { width: 54px; height: 54px; --tone: var(--bg); }
.ios-empty h2 { margin: 10px 0 0; color: var(--ink); font-size: 22px; font-weight: 700; line-height: 28px; }
.ios-empty p { max-width: 300px; margin: 0; color: var(--muted); font-size: 15px; line-height: 20px; }

/* Tab bar (UITabBar): filled glyphs, grey when idle, tint when selected; no pill */
:root[data-skin="apple"] .mobile-nav > button > .i, :root[data-skin="apple"] .mobile-nav > button > small:not(.ios-tab-label) { display: none; }
:root[data-skin="apple"] .ios-tab-ico { display: block !important; width: 28px; height: 28px; }
:root[data-skin="apple"] .ios-tab-label { display: block !important; font-size: 10px; font-weight: 500; line-height: 12px; letter-spacing: .01em; }
:root[data-skin="apple"] .mobile-nav button { justify-content: flex-start; gap: 1px; padding-top: 5px; color: var(--tab-idle); }
:root[data-skin="apple"] .mobile-nav button.active { color: var(--brand); }
:root[data-skin="apple"] .mobile-nav { height: calc(49px + env(safe-area-inset-bottom)); background: var(--material); }

/* Pull-down menu (UIMenu) */
#ios-overlay { position: relative; z-index: 60; }
.ios-menu-scrim, .ios-sheet-scrim { position: fixed; inset: 0; }
.ios-sheet-scrim { background: #00000066; animation: fadeIn .25s ease both; }
.ios-menu { position: fixed; top: calc(42px + env(safe-area-inset-top)); right: max(8px, calc(50vw - 215px + 8px)); width: 250px; overflow: hidden; border-radius: 13px; background: color-mix(in srgb, var(--menu-bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); box-shadow: 0 8px 64px #00000033; transform-origin: top right; animation: menuIn .32s cubic-bezier(.32,.72,0,1) both; }
[dir="rtl"] .ios-menu { right: auto; left: max(8px, calc(50vw - 215px + 8px)); transform-origin: top left; }
@keyframes menuIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
.ios-menu-group + .ios-menu-group { border-top: 8px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ios-menu-group small { display: block; padding: 8px 16px 4px 16px; color: var(--muted); font-size: 13px; line-height: 18px; }
.ios-menu-item { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 44px; border: 0; padding: 0 16px 0 8px; background: none; color: var(--ink); font: inherit; font-size: 17px; letter-spacing: -0.022em; text-align: start; cursor: pointer; }
.ios-menu-item + .ios-menu-item { box-shadow: inset 0 .5px 0 var(--line-strong); }
.ios-menu-item:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ios-menu-item > span:nth-child(2) { flex: 1; }
.mi-check { display: grid; place-items: center; width: 24px; flex: none; color: var(--ink); }
.mi-check .ios-check { width: 13px; height: 12px; }
.mi-icon { display: grid; color: var(--ink); }
.mi-icon .g { width: 20px; height: 20px; --tone: var(--menu-bg); }
.ios-menu-item select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 17px; }

/* Action sheet (UIAlertController .actionSheet) */
.ios-action-sheet { position: fixed; left: 50%; bottom: 0; display: grid; gap: 8px; width: min(430px, 100vw); padding: 0 8px calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); animation: sheetIn .4s cubic-bezier(.32,.72,0,1) both; }
@keyframes sheetIn { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.ios-as-group { overflow: hidden; border-radius: 14px; background: var(--as-bg); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); }
.ios-as-head { padding: 14px 16px; text-align: center; }
.ios-as-head strong { display: block; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.ios-as-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.ios-as-btn { display: block; width: 100%; min-height: 57px; border: 0; border-top: .5px solid var(--line-strong); padding: 0 16px; background: none; color: var(--brand); font: inherit; font-size: 20px; letter-spacing: .02em; cursor: pointer; }
.ios-as-group > .ios-as-btn:first-child { border-top: 0; }
.ios-as-btn.destructive { color: var(--risk); }
.ios-as-btn.cancel { border: 0; border-radius: 14px; background: var(--surface); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root[data-skin="apple"]:not([data-theme="light"]) .ios-as-btn.cancel { background: #2c2c2e; } }
:root[data-skin="apple"][data-theme="dark"] .ios-as-btn.cancel { background: #2c2c2e; }
.ios-as-btn:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body.ios-overlay-open { overflow: hidden; }

/* App modals as iOS alerts (confirm / clear / demo issue) and a page sheet (fix wizard) */
:root[data-skin="apple"] .modal-backdrop { background: #00000040; -webkit-backdrop-filter: none; backdrop-filter: none; animation: fadeIn .2s ease both; }
:root[data-skin="apple"] .modal:not(.modal-sheet) { width: 270px; max-width: calc(100vw - 48px); padding: 19px 0 0; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--menu-bg) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); box-shadow: none; text-align: center; animation: alertIn .3s cubic-bezier(.32,.72,0,1) both; }
@keyframes alertIn { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }
:root[data-skin="apple"] .modal .modal-icon { display: none; }
:root[data-skin="apple"] .modal:not(.modal-sheet) h2 { margin: 0 16px 2px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: -0.022em; }
:root[data-skin="apple"] .modal:not(.modal-sheet) p { margin: 0 16px 19px; color: var(--ink); font-size: 13px; line-height: 18px; }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions { display: flex; flex-direction: row-reverse; gap: 0; margin: 0; border-top: .5px solid var(--line-strong); }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions button { flex: 1; min-height: 44px; margin: 0; border: 0; border-radius: 0; padding: 0 8px; background: none; color: var(--brand); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; box-shadow: none; filter: none; transform: none; }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions button + button { border-inline-end: .5px solid var(--line-strong); }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions .primary-button { font-weight: 600; }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions .danger-button { color: var(--risk); }
:root[data-skin="apple"] .modal:not(.modal-sheet) .modal-actions button:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
:root[data-skin="apple"] .modal.modal-sheet { position: fixed; left: 50%; bottom: 0; width: min(430px, 100vw); max-width: none; max-height: 90vh; overflow: auto; margin: 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 10px 10px 0 0; background: var(--sheet-bg); box-shadow: none; text-align: start; transform: translateX(-50%); animation: sheetIn .45s cubic-bezier(.32,.72,0,1) both; }
:root[data-skin="apple"] .modal.modal-sheet::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: var(--fill-2); }
:root[data-skin="apple"] .modal.modal-sheet h2 { margin: 0 0 14px; color: var(--ink); font-size: 17px; font-weight: 600; text-align: center; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-progress { margin: 0 0 14px; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-progress small { display: block; margin: 0 16px 6px; color: var(--muted); font-size: 13px; font-weight: 400; text-transform: uppercase; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-progress div { height: 4px; margin: 0 16px; background: var(--fill-2); }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps { gap: 0; overflow: hidden; border-radius: 10px; background: var(--surface); }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li { position: relative; align-items: center; gap: 12px; border-radius: 0; padding: 11px 16px; color: var(--muted); font-size: 15px; line-height: 20px; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li + li::before { content: ""; position: absolute; top: 0; inset-inline: 52px 0; border-top: .5px solid var(--line-strong); }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li.current { background: none; color: var(--ink); font-weight: 400; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li span { width: 24px; height: 24px; background: var(--fill-2); color: var(--muted); font-size: 13px; font-weight: 600; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li.current span { background: var(--brand); color: #fff; }
:root[data-skin="apple"] .modal.modal-sheet .wizard-steps li.done span { background: #34c759; color: #fff; }
:root[data-skin="apple"] .modal.modal-sheet .modal-actions { display: grid; gap: 0; margin-top: 35px; overflow: hidden; border-radius: 10px; background: var(--surface); }
:root[data-skin="apple"] .modal.modal-sheet .modal-actions button { min-height: 44px; margin: 0; border: 0; border-radius: 0; padding: 0 16px; background: none; color: var(--brand); font-size: 17px; font-weight: 400; text-align: start; box-shadow: none; filter: none; transform: none; }
:root[data-skin="apple"] .modal.modal-sheet .modal-actions button + button { box-shadow: inset 0 .5px 0 var(--line-strong); }

/* Toast as a HUD capsule */
:root[data-skin="apple"] #toast { border-radius: 22px; background: var(--material); color: var(--ink); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 8px 30px #00000026; font-size: 15px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .ios-spinner { animation-duration: 3s; }
  .ios-action-sheet, .ios-menu, .ios-header .big-sym, :root[data-skin="apple"] .modal { animation: none !important; }
}

/* Alert landing page (/alert): the visited page, dimmed, behind a system-style alert */
.ios-alert-scene { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.ios-alert-page { position: absolute; inset: 0; padding: calc(16px + env(safe-area-inset-top)) 20px; background: var(--surface); filter: blur(1.5px); }
.ios-alert-page::after { content: ""; position: absolute; inset: 0; background: #00000059; }
.ios-alert-url { width: fit-content; max-width: 80%; margin: 0 auto 28px; padding: 9px 18px; border-radius: 12px; background: var(--fill); color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-alert-page h2 { margin: 0 0 8px; color: var(--ink); font-size: 28px; font-weight: 700; }
.ios-alert-page p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.ios-alert-page i { display: block; height: 44px; margin-bottom: 12px; border-radius: 10px; background: var(--fill); }
.ios-alert-page b { display: block; height: 50px; border-radius: 12px; background: var(--brand); opacity: .7; }
.ios-alert { position: relative; z-index: 1; width: 270px; max-width: calc(100vw - 48px); overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); text-align: center; animation: alertIn .35s cubic-bezier(.32,.72,0,1) both; }
.ios-alert-body { display: grid; justify-items: center; gap: 2px; padding: 20px 16px 18px; }
.ios-alert-sym { width: 46px; height: 46px; margin-bottom: 8px; animation: symIn .5s .1s cubic-bezier(.32,.72,0,1) both; }
.ios-alert-brand { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.ios-alert h2 { margin: 0 0 4px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: -0.022em; }
.ios-alert p { margin: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.ios-alert-domain { margin-top: 6px !important; font-weight: 600; overflow-wrap: anywhere; }
.ios-alert-btn { display: block; width: 100%; min-height: 44px; border: 0; border-top: .5px solid var(--line-strong); padding: 0 12px; background: none; color: var(--brand); font: inherit; font-size: 17px; letter-spacing: -0.022em; }
.ios-alert-btn.preferred { font-weight: 600; }
.ios-alert-btn:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
:root[data-skin="apple"] .ios-alert-btn:focus-visible { outline: none; box-shadow: none; background: color-mix(in srgb, var(--brand) 12%, transparent); }