/* Brightstone iOS appearance.
 * data-style stays classic so its current and future layout fixes apply.
 * Only materials, colour, corner treatment and type weight change here.
 * No grid, order, padding, size, position, or stacking-context overrides.
 */
:root[data-appearance="ios"] {
  --bg:#f1f5fc; --surface:#fff; --text:#17243b; --muted:#57677e;
  --blue:#2563eb; --blue-deep:#1d4ed8; --blue-dark:#1e40af;
  --green:#15803d; --red:#c44727;
  --line:#dae3f1; --line-strong:#bfcee4; --hover:#eaf1fc;
  --track:#e3ebf8; --grid:#e1e8f2; --chip-bg:#eaf1ff; --chip-icon:#2563eb;
  --hero-text:#17243b; --hero-sub:#57677e;
  --ios-panel:rgba(255,255,255,.84); --ios-header:rgba(241,247,255,.90);
  --ios-menu:rgba(255,255,255,.97); --ios-selected:#fff;
  --ios-blue-wash:rgba(208,227,255,.65);
  --ios-edge:rgba(255,255,255,.88); --ios-blur:16px;
  --ios-shadow:0 3px 16px rgba(29,62,113,.055);
  --ios-menu-shadow:0 12px 36px rgba(22,45,85,.13);
  --ios-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bs-blue:var(--blue); --bs-blue-deep:var(--blue-deep);
  --bs-surface:var(--surface); --bs-text:var(--text); --bs-muted:var(--muted);
  --bs-border:var(--line); --bs-hover:var(--hover);
  --bs-shadow-popover:var(--ios-menu-shadow);
  color-scheme:light; accent-color:var(--blue);
  scrollbar-color:var(--line-strong) var(--bg);
}
:root[data-appearance="ios"][data-theme="dark"] {
  --bg:#0b1220; --surface:#152137; --text:#ecf2ff; --muted:#a9b8cf;
  --blue:#87b3ff; --blue-deep:#a1c4ff; --blue-dark:#bfdaff;
  --green:#53d58c; --red:#ff9a84;
  --line:#2a3a54; --line-strong:#405578; --hover:#20324e;
  --track:#263854; --grid:#283a55; --chip-bg:#203456; --chip-icon:#9bc3ff;
  --hero-text:#ecf2ff; --hero-sub:#a9b8cf;
  --ios-panel:rgba(21,33,55,.92); --ios-header:rgba(20,34,57,.94);
  --ios-menu:rgba(21,33,55,.98); --ios-selected:#2c4265;
  --ios-blue-wash:rgba(40,80,143,.20); --ios-edge:rgba(131,162,210,.17);
  --ios-shadow:0 3px 16px rgba(0,0,0,.12);
  --ios-menu-shadow:0 12px 36px rgba(0,0,0,.32);
  color-scheme:dark;
}
/* System preference is readable before the deferred dashboard runtime resolves it. */
@media(prefers-color-scheme:dark) {
  :root[data-appearance="ios"][data-theme="system"] {
    --bg:#0b1220; --surface:#152137; --text:#ecf2ff; --muted:#a9b8cf;
    --blue:#87b3ff; --blue-deep:#a1c4ff; --blue-dark:#bfdaff;
    --green:#53d58c; --red:#ff9a84;
    --line:#2a3a54; --line-strong:#405578; --hover:#20324e;
    --track:#263854; --grid:#283a55; --chip-bg:#203456; --chip-icon:#9bc3ff;
    --hero-text:#ecf2ff; --hero-sub:#a9b8cf;
    --ios-panel:rgba(21,33,55,.92); --ios-header:rgba(20,34,57,.94);
    --ios-menu:rgba(21,33,55,.98); --ios-selected:#2c4265;
    --ios-blue-wash:rgba(40,80,143,.20); --ios-edge:rgba(131,162,210,.17);
    --ios-shadow:0 3px 16px rgba(0,0,0,.12);
    --ios-menu-shadow:0 12px 36px rgba(0,0,0,.32);
    color-scheme:dark;
  }
}
:root[data-appearance="ios"] body {
  background:radial-gradient(ellipse at 15% 0%,var(--ios-blue-wash),transparent 56%),var(--bg);
  color:var(--text); font-family:var(--ios-font); -webkit-font-smoothing:antialiased;
}
:root[data-appearance="ios"] :is(button,input,select,textarea) {font-family:var(--ios-font);caret-color:var(--blue)}
:root[data-appearance="ios"] ::selection {background:var(--hover);color:var(--blue-deep)}
:root[data-appearance="ios"] :focus-visible {outline:2px solid var(--blue);outline-offset:3px}

/* Native-feeling navigation, in the exact existing header footprint. */
:root[data-appearance="ios"] .bsr-header {
  color:var(--text); background:var(--ios-header); border-radius:20px;
  box-shadow:var(--ios-shadow),inset 0 0 0 1px var(--ios-edge);
}
:root[data-appearance="ios"] :is(.bs-app-brand,.bs-app-brand:hover) {color:var(--blue-deep)}
:root[data-appearance="ios"] .bs-app-brand strong {font-weight:650;letter-spacing:-.025em}
:root[data-appearance="ios"] .bs-app-header :is(.bsr-hbtn,.bsr-account>summary) {
  color:var(--blue-deep);background:var(--ios-panel);border-color:transparent;border-radius:12px;
  box-shadow:0 1px 4px rgba(29,62,113,.045);
}
:root[data-appearance="ios"] .bs-app-header :is(.bsr-hbtn:hover,.bsr-account>summary:hover,.bsr-account[open]>summary) {
  color:var(--blue-deep);background:var(--hover);
}
:root[data-appearance="ios"] .bs-header-quick-nav a {color:var(--muted)}
:root[data-appearance="ios"] .bs-header-quick-nav :is(a:hover,a.is-active) {color:var(--blue-deep);background:var(--hover)}
:root[data-appearance="ios"] .bsr-sync {color:var(--muted)}

/* Quiet frosted surfaces; no Glass-style reflective gradients or decorations. */
:root[data-appearance="ios"][data-style="classic"] :is(.bsr-target,.bsr-online-target,.bsr-card,.bsr-stat,.bsr-more,.bsr-panel,.bsr-month-total,.bsr-set-target) {
  background:var(--ios-panel);border-color:var(--ios-edge);border-radius:20px;box-shadow:var(--ios-shadow);
}
:root[data-appearance="ios"] .bsr-card.is-hero {color:var(--text)}
:root[data-appearance="ios"] .bsr-card.is-hero :is(h2,.bsr-card-sync) {color:var(--muted)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-value {color:var(--blue-deep)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-compare {border-color:var(--line);color:var(--muted)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-compare strong {color:var(--text)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-change:is(.is-down,.is-flat) {color:var(--muted)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-change.is-up {color:var(--green)}
:root[data-appearance="ios"] .bsr-card.is-hero .bsr-change.is-down .bsr-arrow {color:var(--red)}
:root[data-appearance="ios"] .bsr-hero-spark {color:var(--blue)}
:root[data-appearance="ios"] .bsr-hero-hover-guide {stroke:var(--line-strong)}
:root[data-appearance="ios"] :is(.bsr-hero-hover-dot,.bsr-hero-dot,.bsr-hero-dot-glow) {fill:var(--blue)}
:root[data-appearance="ios"] .bsr-hero-hover-dot {stroke:var(--surface)}
:root[data-appearance="ios"] :is(.bsr-value,.bsr-target-amounts,.bsr-online-copy strong,.bsr-stat-text>strong) {
  font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
:root[data-appearance="ios"][data-style="classic"] :is(.bsr-card-icon,.bsr-stat-icon,.bsr-proj-icon,.bsr-accordion-icon) {
  background:var(--chip-bg);color:var(--chip-icon);border-radius:11px;box-shadow:none;
}
:root[data-appearance="ios"] .bsr-target-track {background:var(--track);box-shadow:none}
:root[data-appearance="ios"][data-style="classic"] .bsr-target .bsr-target-fill {background:var(--blue);box-shadow:none}
/* Keep the existing positive status semantics. */
:root[data-appearance="ios"][data-style="classic"] .bsr-target:is(.is-hit,.is-ontrack) .bsr-target-fill {background:var(--green)}
:root[data-appearance="ios"] .bsr-proj {background:var(--ios-panel);border-color:var(--ios-edge);border-radius:16px;box-shadow:var(--ios-shadow)}
:root[data-appearance="ios"] .bsr-proj.is-go {background:var(--ios-panel)}
:root[data-appearance="ios"] .bsr-proj :is(.bsr-proj-value,.bsr-proj-strong) {color:var(--blue-deep)}
:root[data-appearance="ios"][data-style="classic"] .bsr-online-target .bsr-presence-chart {border-bottom-color:var(--line)}
:root[data-appearance="ios"][data-style="classic"] .bsr-online-target .bsr-presence-chart i {background:var(--blue);box-shadow:none}

/* Existing currency and theme groups get the recessed iOS segmented treatment. */
:root[data-appearance="ios"] :is(.bsr-fx,.bsr-account-theme-options) {
  background:var(--track);border-color:transparent;border-radius:12px;box-shadow:none;
}
:root[data-appearance="ios"] :is(.bsr-fx-opt,.bsr-account-theme-choice) {
  background:transparent;border-color:transparent;border-radius:9px;color:var(--muted);
}
:root[data-appearance="ios"] :is(.bsr-fx-opt.is-active,.bsr-account-theme-choice.is-active) {
  background:var(--ios-selected);color:var(--blue-deep);box-shadow:0 2px 5px rgba(22,45,85,.09);
}
:root[data-appearance="ios"] .bs-account-theme button {
  background:var(--track);border-color:transparent;border-radius:9px;color:var(--muted);
}
:root[data-appearance="ios"] .bs-account-theme button.is-active {
  background:var(--ios-selected);color:var(--blue-deep);border-color:transparent;
  box-shadow:0 2px 5px rgba(22,45,85,.09);
}
:root[data-appearance="ios"] :is(.bsr-controls>.bsr-period>summary,.bsr-ledger) {
  background:var(--ios-panel);border-color:var(--ios-edge);border-radius:14px;box-shadow:var(--ios-shadow);
}
:root[data-appearance="ios"] .bsr-period-label {color:var(--blue-deep)}
:root[data-appearance="ios"] :is(.bsr-period-menu,.bs-account-popover,.bs-header-menu-popover,.bsr-sync-menu>div,.bsr-note-pop) {
  background:var(--ios-menu);color:var(--text);border-color:var(--line);border-radius:18px;box-shadow:var(--ios-menu-shadow);
}
:root[data-appearance="ios"] .bs-app-header .bs-account-popover{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-appearance="ios"] :is(.bsr-account-group-title,.bsr-account-control-label,.bsr-style-title) {color:var(--muted)}
:root[data-appearance="ios"] .bsr-style-choice {color:var(--text);border-radius:10px}
:root[data-appearance="ios"] .bsr-style-choice.is-active {background:var(--hover);color:var(--blue-deep)}
:root[data-appearance="ios"] :is(.bsr-history-dialog,.bsr-target-dialog,.bsr-pwa-sheet,.bsr-ai-panel) {
  background:var(--ios-menu);color:var(--text);border-color:var(--line);border-radius:22px;box-shadow:var(--ios-menu-shadow);
}
:root[data-appearance="ios"] :is(.bsr-ai-head,.bsr-ai-form,.bsr-pwa-sheet-head,.bsr-pwa-actions) {background:var(--ios-menu);border-color:var(--line)}

/* Blur is confined to navigation and small transient menus, never nested cards. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root[data-appearance="ios"] :is(.bsr-header,.bsr-period-menu,.bs-account-popover,.bs-header-menu-popover) {
    backdrop-filter:blur(var(--ios-blur));-webkit-backdrop-filter:blur(var(--ios-blur));
  }
}
@media(prefers-reduced-transparency:reduce) {
  :root[data-appearance="ios"] {--ios-panel:var(--surface);--ios-header:var(--surface);--ios-menu:var(--surface)}
  :root[data-appearance="ios"] :is(.bsr-header,.bsr-period-menu,.bs-account-popover,.bs-header-menu-popover) {
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}
@media(forced-colors:active) {
  :root[data-appearance="ios"] :is(.bsr-header,.bsr-target,.bsr-card,.bsr-online-target,.bsr-stat,.bsr-more,.bsr-panel) {
    background:Canvas;color:CanvasText;box-shadow:none;outline:1px solid CanvasText;
  }
}
