/*
 * The installed app's frame — top bar, bottom tabs, the menu page, pull-to-refresh, page transitions (see includes/app-shell.php).
 *
 * EVERYTHING that changes how the site looks is behind `html.is-app` (set by the tiny script in includes/partials/favicons.php for the Home Screen
 * app, or by `?app=1` as a preview in any browser) AND `max-width: 899.98px` (phones and tablets held upright). A normal browser tab and a laptop
 * never match, so the website is exactly what it was. (The base "hidden" rule for the frame and the menu page's own styles, .mo-*, live at the end of style.css:
 * they must work on every page. This file is NOT linked with a media attribute on purpose — a stylesheet whose media does not match is fetched lazily and
 * kept the service worker's update from taking over, see t81.)
 *
 * Design: ONE system with the site — ink bar on top (matches the phone's status bar), cream tab bar with a gold pill behind the current tab.
 * Safe areas are variables (--safe-top / --safe-bottom) so a notch or the home indicator never covers a button.
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ================================================================ inside the app: phones and tablets held upright */
@media (max-width: 899.98px) {

  html.is-app {
    --app-bar-h: 52px;
    --app-sub-h: 0px;
    --app-tab-h: 58px;
    --app-top: calc(var(--safe-top) + var(--app-bar-h) + var(--app-sub-h));
    --app-bottom: calc(var(--app-tab-h) + var(--safe-bottom));
    --app-top-now: var(--app-top);                 /* where the content under the top bar rests: under the bar, or — while it has slid away — right under the phone's clock */
    --app-dock: var(--app-bottom);                 /* where things that sit at the bottom of the screen rest: on top of the tabs, or — while the tabs have slid away — on the screen's edge */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;               /* our own pull-to-refresh replaces the browser's */
    scroll-padding-top: calc(var(--app-top) + 12px);
  }
  html.is-app:has(.app-bar-sub) { --app-sub-h: 60px; }
  html.is-app:has(.app-tabs.is-off) { --app-bottom: var(--safe-bottom); }
  html.is-app.tabs-hidden { --app-dock: var(--safe-bottom); }
  html.is-app.bar-hidden { --app-top-now: var(--safe-top); }
  html.is-app a, html.is-app button, html.is-app summary, html.is-app label { touch-action: manipulation; }

  /* the website's own chrome gives way to the app's */
  html.is-app .site-header, html.is-app .nav-mobile, html.is-app .site-footer, html.is-app .back-to-top, html.is-app .progress-bar-top,
  html.is-app .tutor-top, html.is-app .tutor-tabs, html.is-app [data-app-install], html.is-app .app-cta { display: none !important; }

  /* room for the bars (pages without them — admin, sign-in screens — only clear the notch / home indicator) */
  html.is-app body { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
  html.is-app body:has(.app-bar) { padding-top: var(--app-top); }
  html.is-app body:has(.app-tabs) { padding-bottom: var(--app-bottom); }

  /* the phone's status bar (clock, battery) is drawn over the top of the page in the app, in white: on a page with no bar of ours (admin, tutor sign-in) the strip behind it is ink too */
  html.is-app body:not(:has(.app-bar))::before { content: ""; position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: var(--safe-top); background: var(--ink-900); pointer-events: none; }

  /* -------------------------------------------------------------- top bar */
  html.is-app .app-bar {
    display: block; position: fixed; z-index: 1000; top: 0; left: 0; right: 0;
    padding-top: var(--safe-top);
    background: var(--ink-900); color: var(--white);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 6px 14px -10px rgba(13,15,26,0.55);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .app-bar-main { display: flex; align-items: center; gap: 6px; height: var(--app-bar-h); padding: 0 calc(6px + var(--safe-right)) 0 calc(16px + var(--safe-left)); }
  .app-bar:not(.is-root) .app-bar-main { padding-left: calc(4px + var(--safe-left)); }
  .app-bar-brand { display: flex; align-items: center; height: 44px; margin: 0; padding: 0; }
  .app-bar-brand img { height: 22px; width: auto; }
  .app-bar-back, .app-bar-btn { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: var(--white); transition: background 0.15s; }
  .app-bar-back:active, .app-bar-btn:active { background: rgba(255,255,255,0.14); }
  .app-bar-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-bar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .app-bell { position: relative; }
  .app-bell-n { position: absolute; top: 4px; right: 2px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--ink-900); border-radius: var(--radius-pill); box-sizing: content-box; background: var(--nova-gold-400); color: var(--ink-900); font-size: 0.75rem; font-style: normal; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .app-bar-pill { display: inline-flex; align-items: center; height: 44px; margin-right: 2px; padding: 0 12px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; background: none; color: var(--ink-900); font-size: 0.9rem; font-weight: 700; }   /* a 44px finger target around a 34px pill (the pill is painted by ::before) */
  .app-bar-pill { position: relative; isolation: isolate; }
  .app-bar-pill::before { content: ""; position: absolute; z-index: -1; inset: 0 0; border-radius: var(--radius-pill); background: var(--nova-gold-400); }
  .app-bar-pill:active::before { background: var(--nova-gold-300); }
  .app-bar-sub { height: var(--app-sub-h); padding: 2px calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left)); }
  .app-seg { display: grid; grid-template-columns: 1fr 1fr; height: 46px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); }
  .app-seg a { display: grid; place-items: center; border: 4px solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); color: rgba(255,255,255,0.78); font-size: 0.9rem; font-weight: 600; transition: background-color 0.2s, color 0.2s; }   /* 46px finger target, painted as a 38px pill */
  .app-seg a.is-on { background-color: var(--white); color: var(--ink-900); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

  /* -------------------------------------------------------------- bottom tabs */
  html.is-app .app-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
    height: var(--app-bottom);
    padding: 6px calc(4px + var(--safe-right)) var(--safe-bottom) calc(4px + var(--safe-left));
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid var(--ink-100);
    box-shadow: 0 -12px 28px -22px rgba(20,23,42,0.55);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: transform 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)), box-shadow 0.28s;
    will-change: transform;
  }
  html.is-app .app-tabs.is-off, html.is-app.kb-open .app-tabs { display: none; }
  /* LinkedIn's bottom bar: it slides away while you read on (scrolling down) and comes straight back with the smallest scroll up — the screen is the content's, the tabs are one flick away.
     (assets/js/app-shell.js decides when; it is still in the page for a screen reader and the keyboard — focusing it brings it back.) */
  html.is-app.tabs-hidden .app-tabs { transform: translateY(calc(100% + 28px)); box-shadow: none; }
  .app-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 0; padding-top: 2px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; }
  .app-tab-label { max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-tab-ico { position: relative; display: grid; place-items: center; width: 58px; height: 30px; border-radius: var(--radius-pill); transition: background 0.25s var(--ease-out), transform 0.12s; }
  .app-tab:active .app-tab-ico { transform: scale(0.88); }
  .app-tab .app-tab-svg { width: 24px; height: 24px; transition: transform 0.2s; }
  .app-tab .app-tab-svg .f, .app-tab .app-tab-svg .d, .app-tab .app-tab-svg .s { transition: fill 0.2s, stroke 0.2s; }
  .app-tab.is-active { color: var(--ink-900); }
  .app-tab.is-active .app-tab-ico { background: color-mix(in srgb, var(--nova-gold-300) 78%, transparent); }
  .app-tab.is-active .app-tab-svg { animation: app-pop 0.32s var(--ease-out); }
  .app-tab.is-active .app-tab-svg .f { fill: currentColor; }
  .app-tab.is-active .app-tab-svg .d { stroke: var(--nova-gold-300); fill: var(--nova-gold-300); }
  .app-tab-badge { position: absolute; top: -3px; right: 9px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--paper); border-radius: var(--radius-pill); box-sizing: content-box; background: var(--ink-900); color: var(--white); font-size: 0.75rem; font-style: normal; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .app-tab-live { position: absolute; top: 0; right: 12px; width: 10px; height: 10px; border: 2px solid var(--paper); border-radius: 50%; box-sizing: content-box; background: var(--color-success); }
  .app-tab-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-success); opacity: 0; animation: app-live 1.8s ease-out infinite; }
  @keyframes app-live { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
  @keyframes app-pop { 0% { transform: scale(0.78); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

  /* -------------------------------------------------------------- the first thing under the bar: tuck the site's own header allowance away */
  html.is-app .page-hero { padding-top: 20px; }
  html.is-app .page-hero.is-listing { padding-top: 14px; }
  html.is-app .hero { padding-top: 22px; }
  html.is-app .tp, html.is-app .cls { padding-top: 16px; }
  html.is-app .error-page { padding-top: 40px; }
  html.is-app .page-hero::before, html.is-app .tp::before { display: none; }       /* the website's 5px ink rule under its header: the app bar is already there */
  html.is-app .breadcrumbs { display: none; }                            /* the Back arrow does that job */
  html.is-app .tp-tabs { top: var(--app-top-now); transition: top 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)); }   /* the tutor profile's own sticky strip sits right under the bar — and follows it up */
  html.is-app .flash-wrap { padding-top: 16px !important; }
  html.is-app .tutor-wrap { padding: 14px 16px 28px !important; }
  html.is-app .tutor-wrap h1 { font-size: 1.35rem; }

  /* things that sit at the bottom of the screen rise above the tabs */
  html.is-app .tp-bar, html.is-app .bk-bar { bottom: var(--app-bottom); padding-bottom: 12px; transition: transform 0.3s var(--ease-out), bottom 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)), padding-bottom 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)); }
  html.is-app.tabs-hidden .tp-bar, html.is-app.tabs-hidden .bk-bar { bottom: 0; padding-bottom: calc(12px + var(--safe-bottom)); }   /* the tabs have slid away: the bar rests on the screen's edge and clears the home indicator itself */
  html.is-app .tp-bar:not(.is-visible), html.is-app .bk-bar:not(.is-visible) { visibility: hidden; }
  html.is-app .toast-container { left: 12px; right: 12px; bottom: calc(var(--app-dock) + 12px); align-items: stretch; transition: bottom 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)); }
  html.is-app .toast { min-width: 0; }
  html.is-app .consent-bar { bottom: calc(var(--app-dock) + 10px); transition: bottom 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)); }
  html.is-app .pwa-offer { bottom: calc(var(--app-dock) + 12px); }
  html.is-app .app-update { bottom: calc(var(--app-dock) + 12px); transition: bottom 0.28s var(--app-ease, cubic-bezier(0.22, 0.9, 0.3, 1)); }

  /* -------------------------------------------------------------- loading + pull to refresh */
  html.is-app .app-progress { display: block; position: fixed; z-index: 1001; left: 0; right: 0; top: var(--app-top-now); height: 3px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
  html.is-app.is-navigating .app-progress { opacity: 1; }
  html.is-app .app-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--nova-gold-400); border-radius: 3px; animation: app-load 1.1s ease-in-out infinite; }
  @keyframes app-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
  html.is-app .app-ptr { display: grid; place-items: center; position: fixed; z-index: 999; left: 50%; top: calc(var(--app-top) + 6px); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--white); color: var(--ink-900); box-shadow: 0 6px 18px -4px rgba(20,23,42,0.35); opacity: 0; transform: translateY(-60px); pointer-events: none; }
  html.is-app .app-ptr svg { width: 20px; height: 20px; transition: transform 0.15s; }
  html.is-app .app-ptr.is-ready svg { transform: rotate(180deg); }
  html.is-app .app-ptr.is-busy svg { animation: btn-spin 0.8s linear infinite; }
  html.is-app .app-ptr.is-release { transition: transform 0.25s var(--ease-out), opacity 0.25s; }
}

/* page-to-page transitions: the OPT-IN is only in the real installed app (display-mode), where the browser's own chrome isn't there to show loading. The two bars keep
   their own layer so they stay still while the page between them changes. HOW it moves (push / pop / tab change) is set per navigation by assets/js/app-shell.js
   (pageswap / pagereveal add a view-transition TYPE) and styled below under html.is-app, so it can be exercised in any browser. */
@media (display-mode: standalone) and (max-width: 899.98px) {
  @view-transition { navigation: auto; }
  html.is-app .app-bar { view-transition-name: app-bar; }
  html.is-app .app-tabs { view-transition-name: app-tabs; }
}
@media (max-width: 899.98px) {
  html.is-app ::view-transition-old(root) { animation: app-vt-out 0.14s ease both; }
  html.is-app ::view-transition-new(root) { animation: app-vt-in 0.26s var(--app-ease, ease) both; }
  @keyframes app-vt-out { to { opacity: 0; } }
  @keyframes app-vt-in { from { opacity: 0; transform: translateY(8px); } }

  /* going deeper: the new page slides in from the right over the old one, which drifts left and dims (iOS push) */
  html.is-app:active-view-transition-type(forward)::view-transition-old(root) { animation: app-vt-fwd-out 0.34s var(--app-ease) both; z-index: 1; }
  html.is-app:active-view-transition-type(forward)::view-transition-new(root) { animation: app-vt-fwd-in 0.34s var(--app-ease) both; z-index: 2; }
  /* back: the page you are leaving slides away to the right, revealing the one underneath (iOS pop) */
  html.is-app:active-view-transition-type(back)::view-transition-old(root) { animation: app-vt-back-out 0.3s var(--app-ease) both; z-index: 2; }
  html.is-app:active-view-transition-type(back)::view-transition-new(root) { animation: app-vt-back-in 0.3s var(--app-ease) both; z-index: 1; }
  /* switching tabs: a quick cross-fade, no direction (the tabs are siblings, not a stack) */
  html.is-app:active-view-transition-type(tab)::view-transition-old(root) { animation: app-vt-fade-out 0.12s ease both; }
  html.is-app:active-view-transition-type(tab)::view-transition-new(root) { animation: app-vt-fade-in 0.2s ease both; }
  @keyframes app-vt-fwd-in { from { transform: translateX(100%); box-shadow: -14px 0 28px -10px rgba(13,15,26,0.28); } to { transform: none; box-shadow: none; } }
  @keyframes app-vt-fwd-out { to { transform: translateX(-22%); opacity: 0.55; } }
  @keyframes app-vt-back-in { from { transform: translateX(-22%); opacity: 0.55; } to { transform: none; opacity: 1; } }
  @keyframes app-vt-back-out { to { transform: translateX(100%); box-shadow: -14px 0 28px -10px rgba(13,15,26,0.28); } }
  @keyframes app-vt-fade-out { to { opacity: 0; } }
  @keyframes app-vt-fade-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.is-app .app-tabs, html.is-app .app-bar, html.is-app .tp-tabs, html.is-app .tp-bar, html.is-app .bk-bar, html.is-app .toast-container, html.is-app .consent-bar, html.is-app .app-update { transition: none !important; }   /* the bars still go and come back, just without sliding */
}

/* ================================================================ motion + polish inside the app (phones and tablets held upright) */
@media (max-width: 899.98px) {
  html.is-app {
    --app-ease: cubic-bezier(0.22, 0.9, 0.3, 1);        /* decelerate: things arrive fast and settle */
    --app-pop: cubic-bezier(0.34, 1.56, 0.64, 1);       /* a small overshoot for things that "land" */
    --kb: 0px;                                          /* how much of the screen the keyboard covers (assets/js/app-shell.js) */
  }

  /* the top bar: flat at the top of a page, a soft edge once content scrolls under it; a deeper page's title is in the page itself (the big heading) until that
     heading scrolls away, and only then moves up into the bar — one title at a time, the way iPhone and Android apps do it */
  html.is-app .app-bar:not(.is-scrolled) { box-shadow: none; }
  html.is-app .app-bar { transition: box-shadow 0.2s, transform 0.28s var(--app-ease); will-change: transform; }
  /* the top bar slides UP while you read on (the strip behind the phone's clock stays, in ink: the bar's own top padding is the safe area), assets/js/app-shell.js */
  html.is-app.bar-hidden .app-bar { transform: translateY(calc(-1 * (var(--app-bar-h) + var(--app-sub-h)))); box-shadow: none; }
  html.is-app .app-bar:not(.is-root) .app-bar-title { opacity: 0; transform: translateY(6px); transition: opacity 0.2s var(--app-ease), transform 0.26s var(--app-ease); }
  html.is-app .app-bar:not(.is-root).is-titled .app-bar-title { opacity: 1; transform: none; }
  .app-bar-pill { flex: 0 0 auto; white-space: nowrap; }

  /* a finger on something it can press: it presses back */
  html.is-app .btn, html.is-app .chip, html.is-app .app-bar-pill { transition: transform 0.14s var(--app-ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; }
  html.is-app .btn:active, html.is-app .chip:active { transform: scale(0.97); }
  html.is-app .class-card, html.is-app .tcard, html.is-app .msg-thread { transition: transform 0.18s var(--app-ease), background-color 0.18s; }
  html.is-app .class-card:has(a:active), html.is-app .tcard:has(a:active) { transform: scale(0.985); }
  html.is-app .msg-thread:active { background: var(--paper-alt); }
  html.is-app :is(.btn, .chip, button, summary, .app-bar, .app-tabs, .mo-row, .msg-thread, .pin-key) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* ---------------------------------------------------------------- a conversation is a chat screen: the box stays at the bottom, newest message in view */
  html.is-app:has(.msg-conv) .page-hero, html.is-app:has(.msg-conv) .tutor-wrap > h1, html.is-app:has(.msg-conv) .tutor-wrap main > h1 { display: none; }
  html.is-app:has(.msg-conv) body { padding-bottom: calc(var(--composer-h, 84px) + var(--safe-bottom) + var(--kb)); }
  html.is-app .msg-wrap { padding-top: 8px; }
  html.is-app .msg-conv { gap: 8px; }
  html.is-app .msg-list { max-height: none; overflow: visible; padding: 4px 2px 10px; }
  html.is-app .msg { max-width: 90%; }
  html.is-app .msg-bubble { animation: app-bubble 0.26s var(--app-ease) both; }
  @keyframes app-bubble { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
  html.is-app .msg-form {
    position: fixed; z-index: 950; left: 0; right: 0; bottom: var(--kb); margin: 0;
    padding: 8px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "about about" "text send"; align-items: end; gap: 4px 8px;
    background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--ink-100); box-shadow: 0 -10px 24px -20px rgba(20,23,42,0.5);
  }
  html.is-app .msg-form .msg-form-row { display: contents; }
  html.is-app .msg-form textarea { grid-area: text; min-height: 46px; max-height: 120px; padding: 11px 16px; border-radius: 23px; resize: none; line-height: 1.35; }
  html.is-app .msg-form .msg-about, html.is-app .msg-form select { grid-area: about; max-width: none; padding: 0 6px; font-size: 0.8rem; background: none; border: 0; box-shadow: none; }
  html.is-app .msg-form .btn { grid-area: send; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; justify-content: center; }
  html.is-app .msg-form .btn svg { width: 20px; height: 20px; }
  html.is-app .msg-note { padding-bottom: 8px; }

  /* ---------------------------------------------------------------- toasts (the site's one-line messages), above the tabs, swipe to dismiss */
  html.is-app .toast-container { z-index: 1400; pointer-events: none; }
  html.is-app .toast { pointer-events: auto; position: relative; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; border-radius: 16px; border-left: 0; touch-action: pan-y;
    animation: app-toast-in 0.34s var(--app-pop) both; transition: transform 0.2s var(--app-ease), opacity 0.2s; }
  html.is-app .toast > svg { width: 20px; height: 20px; flex: 0 0 auto; }
  html.is-app .toast.success > svg { color: #34D399; }
  html.is-app .toast.error > svg { color: #FCA5A5; }
  html.is-app .toast.info > svg { color: var(--nova-gold-300); }
  html.is-app .toast > span { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; line-height: 1.4; }
  html.is-app .toast > button { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 2px; border: 0; border-radius: 50%; background: none; color: rgba(255,255,255,0.7); cursor: pointer; }
  html.is-app .toast.is-leaving { opacity: 0; transform: translateY(10px) scale(0.98); }
  @keyframes app-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }

  /* ---------------------------------------------------------------- "are you sure?" as a bottom sheet instead of the browser's own box */
  .app-sheet-backdrop { position: fixed; inset: 0; z-index: 1500; background: rgba(13,15,26,0.5); opacity: 0; transition: opacity 0.26s ease; }
  .app-sheet-backdrop.is-open { opacity: 1; }
  .app-sheet { position: fixed; z-index: 1501; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; padding: 8px 20px calc(18px + var(--safe-bottom)); background: var(--paper);
    border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,0.28); transform: translateY(105%); transition: transform 0.36s var(--app-ease); overscroll-behavior: contain; }
  .app-sheet.is-open { transform: none; }
  .app-sheet::before { content: ""; display: block; width: 38px; height: 5px; margin: 4px auto 14px; border-radius: 3px; background: var(--ink-200); }
  .app-sheet h2 { margin: 0 0 6px; font-size: 1.2rem; }
  .app-sheet p { margin: 0 0 18px; color: var(--text-muted); font-size: 0.98rem; }
  .app-sheet-actions { display: grid; gap: 10px; }
  .app-sheet-actions .btn { min-height: 52px; font-size: 1rem; justify-content: center; }
  .app-sheet-actions .btn-danger { background: #B91C1C; color: var(--white); border-color: #B91C1C; }
  body.has-sheet { overflow: hidden; }

  /* ---------------------------------------------------------------- "you're offline" strip, just under the bar */
  .app-net { position: fixed; z-index: 999; left: 0; right: 0; top: var(--app-top-now); padding: 7px 16px; text-align: center; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    background: var(--nova-gold-400); color: var(--ink-900); transform: translateY(-100%); visibility: hidden; transition: transform 0.3s var(--app-ease), visibility 0s linear 0.3s; pointer-events: none; }
  .app-net.is-on { transform: none; visibility: visible; transition: transform 0.3s var(--app-ease), visibility 0s; }
  .app-net.is-back { background: #059669; color: var(--white); }
}