/* ==========================================================================
   DashView — iOS-style smoothness layer (css/ios-smooth.css · v2.26)
   Loaded LAST on every page, together with js/ios-smooth.js.

   Goal: the whole product scrolls, loads and transitions the way iOS does —
   one spring curve, nothing that repaints every frame, no hard edges.

   1  Tokens          one easing set for the whole theme
   2  Page            load fade, rubber-band, momentum scrolling, tap feel
   3  Landing colour  section glows without hard edges, calmer aurora
   4  Landing motion  blur-free headings / hero words (blur on text = GPU jank)
   5  Landing cost    backdrop-blur only where it is seen, footer skipped until near
   6  App views       dashboard / People tabs fade in
   Everything animated is opacity / transform and is off for reduced motion.
   Nothing here removes a feature or changes markup.
   ========================================================================== */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --ios-ease: cubic-bezier(.22, 1, .36, 1);        /* decelerate, no overshoot */
  --ios-spring: cubic-bezier(.32, .72, 0, 1);      /* iOS sheet / navigation curve */
  --ios-bounce: cubic-bezier(.34, 1.4, .64, 1);    /* tiny overshoot for pops */
  --ios-fast: .22s;
  --ios-base: .42s;
  --ios-slow: .7s;
}

/* ── 2 · PAGE ───────────────────────────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* the colour you see when the page is pulled past its end */
  background-color: var(--bg, #0a0c0b);
}
/* keep native momentum on every scroll area and stop scroll chaining out of panels */
.table-wrap, .tbl-wrap, .rc-tablewrap, .data-grid-wrap, .modal-card, .cmd-list,
[class*="drawer-body"], [class*="-body"][style*="overflow"], .aiw-messages, .sp-body {
  -webkit-overflow-scrolling: touch;
}
.modal-card, .cmd-list, [class*="drawer-body"], .aiw-messages, .sp-body { overscroll-behavior: contain; }

/* the landing page is a normal document: give it the iOS rubber-band back
   (index-plus.css switched it off, which is what made scrolling feel "dead" at the ends) */
html.ios-landing { overscroll-behavior-y: auto; }
/* the real scroll is driven by the browser or by js/ios-smooth.js — a CSS smooth-scroll on top of a
   per-frame scrollTo() restarts the animation every frame and makes it stutter */
html.ios-landing { scroll-behavior: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* soft arrival on every page; opacity only, so position:fixed children are never affected */
  body { animation: iosPageIn var(--ios-slow) var(--ios-ease) backwards; }
  @keyframes iosPageIn { from { opacity: 0; } to { opacity: 1; } }

  /* page → page: the same cross-fade on every page (index already opted in) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .2s var(--ios-ease) both iosVtOut; }
  ::view-transition-new(root) { animation: .34s var(--ios-ease) both iosVtIn; }
  @keyframes iosVtOut { to { opacity: 0; } }
  @keyframes iosVtIn { from { opacity: 0; } }
}

/* press feedback like a native control: instant in, springy out */
@media (hover: none) {
  .btn:active, button:active:not(:disabled), [role="button"]:active { transition-duration: .08s; }
}

/* ── 3 · LANDING · COLOUR ───────────────────────────────────────────────── */
/* The per-section glow was a 1100px box whose gradient was still visible at its edges (a hard vertical edge near
   the left side) and it started at full strength on the section's top line (a hard horizontal step between sections).
   Now: full width (the edges are the screen edges) and the light is centred inside the section, so it fades in
   from the section above and fades out toward the one below. */
.ig-sec::before {
  left: 0; width: 100%; transform: none; top: 0; height: 100%;
  background: radial-gradient(ellipse 58% 52% at 50% 34%, var(--pl-glow, rgba(232, 163, 61, .14)), transparent 100%);
}
.ig-sec:nth-of-type(3n+2)::before { background: radial-gradient(ellipse 52% 50% at 26% 34%, rgba(var(--pl-teal, 64, 201, 184), .12), transparent 100%); }
.ig-sec:nth-of-type(3n)::before   { background: radial-gradient(ellipse 52% 50% at 76% 34%, rgba(var(--pl-violet, 150, 124, 255), .11), transparent 100%); }

/* aurora: no 60px blur on a 1500px layer, no endless repaint.
   The conic gradient already fades smoothly, so it needs no blur; it turns very slowly on the GPU
   only (transform) and stands still on phones and low-power devices. */
.ig-bg::after { filter: none; animation-duration: 140s; will-change: transform; }
html.ios-lite .ig-bg::after, html.ios-touch .ig-bg::after { animation: none; }
html.ios-lite .ig-blob, html.ios-touch .ig-blob { animation-duration: 60s; }
html.ios-lite .ig-blob.c { display: none; }
/* every glass surface sits on the same warm / cool base: a hairline of light on top, depth below */
html[data-theme="light"] .ig-sec::before { opacity: .8; }

/* ── 4 · LANDING · MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* hero words: rise + fade only. The old keyframes blurred each word by up to 14px, which
     repaints text on every frame and left the last words looking out of focus for a second */
  @keyframes ipWord {
    0%   { opacity: 0; transform: translate3d(0, .5em, 0); }
    100% { opacity: 1; transform: none; }
  }
  .ig-h1 .word { animation-duration: .85s; animation-timing-function: var(--ios-ease); }
  .ig-h1 .word.ig-grad { animation-duration: .85s, 5s; }

  /* section headings: same idea — no filter on big gradient text */
  .js-rv .ig-head.rv:not(.in) h2, .ig-head.rv:not(.in) h2 { filter: none; opacity: 0; transform: translate3d(0, 14px, 0); }
  .ig-head.rv h2 { transition: opacity .8s var(--ios-ease), transform .9s var(--ios-ease), letter-spacing .9s var(--ios-ease); }
  .ig-head.rv.in h2 { opacity: 1; transform: none; }

  /* one calm 3D entrance instead of a steep tilt that has to re-rasterise a huge window */
  .ig-stage.rv { transform: perspective(1400px) translate3d(0, 40px, 0) rotateX(6deg) scale(.965); }

  /* nav tucks away with the iOS spring */
  .nav { transition-timing-function: var(--ios-spring); }
}

/* ── 5 · LANDING · COST ─────────────────────────────────────────────────── */
/* the footer is far below the fold and never needed on first paint: skip its layout/paint until it is near.
   (sections themselves are NOT skipped: skipped sections are measured with a guessed height, which makes the
   scrollbar jump while you scroll and lets anchor links land short) */
.footer { content-visibility: auto; contain-intrinsic-size: auto 310px; }
/* a footer blur over a flat page is invisible but costs a full-width backdrop pass */
.footer { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* phones / tablets: the page behind the cards is already soft aurora, so blurring it again for every card
   buys nothing and is what drops frames on a scroll. Keep blur on the nav and tab bar only. */
@media (hover: none), (max-width: 900px) {
  .ig-glass, .ig-float, .btn-outline, .ig-cta-band .cta-input, .ip-sticky, .ip-top {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .ig-glass, .ig-float { background-color: color-mix(in srgb, var(--bg, #0a0c0b) 58%, transparent); }
  html[data-theme="light"] .ig-glass, html[data-theme="light"] .ig-float { background-color: rgba(255, 255, 255, .72); }
  .ig-sec::before { opacity: .7; }
}
html.ios-lite .ig-glass, html.ios-lite .ig-float { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── 6 · APP VIEWS ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* switching a tab in the dashboard / People: fade in, no layout movement */
  .view-panel.active { animation: iosViewIn var(--ios-base) var(--ios-ease) backwards; }
  @keyframes iosViewIn { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  html.ios-landing { scroll-behavior: auto; }
  .view-panel.active { animation: none; }
}

/* background keeps still while the hero is out of view (nothing to see, nothing to repaint) */
html.ios-hero-off .ig-bg::after, html.ios-hero-off .ig-blob { animation-play-state: paused; }

/* ── 7 · POPUPS · iOS notification banner, alert and sheet ─────────────────
   Every toast and dialog in the product (landing, dashboard, People, AI, Settings) gets the same iOS material:
   frosted glass with a hairline edge, continuous rounded corners, a springy entrance and a soft exit.
   The software-update popup and its banner live in js/updater.js and follow the same rules. */
:root {
  --ios-glass: color-mix(in srgb, var(--paper, #1c1c1e) 74%, transparent);
  --ios-glass-edge: rgba(255, 255, 255, .14);
  --ios-pop-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 18px 44px -14px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .22);
}
html[data-theme="light"] {
  --ios-glass: rgba(255, 255, 255, .78);
  --ios-glass-edge: rgba(255, 255, 255, .9);
  --ios-pop-shadow: 0 1px 0 #fff inset, 0 18px 44px -16px rgba(20, 28, 60, .35), 0 2px 8px rgba(20, 28, 60, .1);
}

/* toasts = notification banners */
.toast-stack { z-index: 2147481000; gap: 10px; max-width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.toast {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 18px; max-width: 100%;
  font: 500 14px/1.35 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; letter-spacing: -.005em;
  color: var(--ink, #f2f2f7); text-wrap: pretty;
  background: var(--ios-glass); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: .5px solid var(--ios-glass-edge); border-left-width: .5px; border-radius: 22px;
  box-shadow: var(--ios-pop-shadow); pointer-events: auto; touch-action: pan-y;
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal, #e8a33d); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal, #e8a33d) 18%, transparent); }
.toast.toast-success::before { background: var(--ios-green, #30d158); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-green, #30d158) 18%, transparent); }
.toast.toast-error::before   { background: var(--ios-red, #ff453a);   box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-red, #ff453a) 18%, transparent); }
.toast.toast-warning::before { background: var(--ios-orange, #ff9f0a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-orange, #ff9f0a) 18%, transparent); }
.toast.toast-info::before    { background: var(--ios-blue, #0a84ff);   box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-blue, #0a84ff) 18%, transparent); }
.toast.toast-success, .toast.toast-error, .toast.toast-warning, .toast.toast-info { border-left: .5px solid var(--ios-glass-edge); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes iosToastUp   { 0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); } 60% { opacity: 1; } 78% { transform: translate3d(0, -2px, 0) scale(1.006); } 100% { opacity: 1; transform: none; } }
  @keyframes iosToastDown { 0% { opacity: 0; transform: translate3d(0, -22px, 0) scale(.94); } 60% { opacity: 1; } 78% { transform: translate3d(0, 2px, 0) scale(1.006); } 100% { opacity: 1; transform: none; } }
  @keyframes iosToastOutDown { to { opacity: 0; transform: translate3d(0, 14px, 0) scale(.95); } }
  @keyframes iosToastOutUp   { to { opacity: 0; transform: translate3d(0, -14px, 0) scale(.95); } }
  .toast { animation: iosToastUp .56s var(--ios-spring) both; }
  .toast.leaving { animation: iosToastOutDown .28s cubic-bezier(.4, 0, 1, 1) forwards; }
  html[data-toastpos="tr"] .toast { animation-name: iosToastDown; }
  html[data-toastpos="tr"] .toast.leaving { animation-name: iosToastOutUp; }
}
/* phones: the toast is a real iOS banner at the top of the screen, under the status bar */
@media (max-width: 640px) {
  .toast-stack, html[data-toastpos] .toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto; left: 8px; right: 8px; transform: none; max-width: none; align-items: stretch;
  }
  .toast { animation-name: iosToastDown; border-radius: 26px; }
  .toast.leaving { animation-name: iosToastOutUp; }
}

/* dialogs (waitlist, forms, confirmations): iOS alert / sheet */
.modal-overlay { background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); transition: opacity .3s var(--ios-ease), visibility .3s; }
html[data-theme="light"] .modal-overlay { background: rgba(80, 90, 120, .26); }
.modal-card {
  background: var(--ios-glass); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
  border: .5px solid var(--ios-glass-edge); border-radius: 28px; box-shadow: var(--ios-pop-shadow);
  transition: transform .5s var(--ios-spring), opacity .3s var(--ios-ease);
}
.modal-card h3 { letter-spacing: -.02em; }
.modal-card button:active, .modal-card .btn:active { transform: scale(.97); }
@media (max-width: 560px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card { max-width: none; width: 100%; border-radius: 28px 28px 0 0; padding-bottom: calc(var(--sp-8, 24px) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
  .modal-overlay.open .modal-card { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .toast, .modal-card, .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toast, .modal-card { background: var(--paper, #1c1c1e); }
}
@media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation: none; } .modal-card, .modal-overlay { transition: none; } }

/* ── 8 · SCROLLING · iOS feel on every page ────────────────────────────────
   Wheel easing lives in js/ios-smooth.js (all pages). This part is what CSS alone can do:
   slim overlay-style scrollbars, momentum + containment for panels, anchors that stop below sticky bars. */
html { scroll-padding-top: 76px; }
* { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 140, .42) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(128, 128, 140, .38); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 140, .62); background-clip: content-box; border: 3px solid transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
.dash-nav, .stg-content, .stg-rail, .dvu-bd, .table-wrap, .tbl-wrap, .cmd-list, .aiw-messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dvu-bd { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html, .dvu-bd { scroll-behavior: auto; } }