/* =====================================================================
   @deontech/glass — the look and feel, shared by every Smart DeonTech app
   (12 Oct 2026, from IFAIMA, after Flighty)

   Drop-in: link this file after the app's own stylesheet and load glass.js.
   It works on the markup the mainframe apps already use:

     .modal-overlay > .modal    dialogs     .sheet-overlay > .sheet   sheets
     #tabbar .tab(.active)      the phone's bottom tab bar

   Colours come from the app: --primary (its accent) and --panel (its card
   colour), with the dark theme on [data-theme="dark"]. Nothing here changes
   a computer's layout except that dialogs settle in instead of popping.
   ===================================================================== */
:root {
  --dg-accent: var(--primary, var(--accent, #0072BC));
  --dg-sheet: var(--panel, var(--surface, #fff));
  --dg-ink: #0B1B2E;
  --dg-glass: rgba(255, 255, 255, .72);
  --dg-glass-edge: rgba(255, 255, 255, .85);
  --dg-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 26px rgba(0, 20, 50, .22);
  --dg-bubble: rgba(11, 27, 46, .1);
  --dg-spring: cubic-bezier(.32, 1.45, .5, 1);
  --dg-ease: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="auto-light"]) {
    --dg-ink: #F2F6FA; --dg-glass: rgba(40, 48, 60, .62); --dg-glass-edge: rgba(255, 255, 255, .14);
    --dg-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 26px rgba(0, 0, 0, .45); --dg-bubble: rgba(255, 255, 255, .14);
  }
}
[data-theme="dark"] {
  --dg-ink: #F2F6FA;
  --dg-glass: rgba(40, 48, 60, .62);
  --dg-glass-edge: rgba(255, 255, 255, .14);
  --dg-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 26px rgba(0, 0, 0, .45);
  --dg-bubble: rgba(255, 255, 255, .14);
}

/* ---- Dialogs on a computer: they settle in ---- */
@keyframes dg-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay, .sheet-overlay { animation: dg-fade .22s ease; }
.modal-overlay > .modal { animation: dg-pop .3s cubic-bezier(.2, .8, .2, 1); }

/* ---- Phones and small tablets: every dialog and sheet is a sheet ----
   It slides up from the bottom with a grab handle. Drag it up and it takes
   the screen; drag it down and it goes back to half, then away. A tall one
   opens at about half the screen, the page still in view above it. */
.dg-grab { display: none; }
@keyframes dg-up { from { transform: translateY(100%); } to { transform: translateY(var(--dg-y, 0px)); } }
@media (max-width: 820px) {
  .modal-overlay.dg-on, .sheet-overlay.dg-on {
    align-items: flex-end !important; justify-content: center; padding: 0 !important; overflow: hidden !important;
    height: var(--app-vvh, 100dvh); background: rgba(0, 18, 40, .34); backdrop-filter: none;
  }
  .dg-on > .dg-sheet {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    max-height: calc(var(--app-vvh, 100dvh) - 44px) !important; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0 !important; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .22);
    transform: translateY(var(--dg-y, 0px)); transition: transform .42s var(--dg-ease);
    animation: dg-up .42s var(--dg-ease);
  }
  .dg-on > .dg-sheet.dg-half { overflow: hidden; }
  .dg-on > .dg-sheet.dg-drag { transition: none; }
  .dg-on > .dg-sheet.dg-gone { transform: translateY(105%); transition: transform .26s cubic-bezier(.4, 0, 1, 1); }
  .dg-on .dg-grab, dialog.dg-sheet .dg-grab { display: block; position: sticky; top: -24px; z-index: 5; height: 22px; margin: -14px 0 4px; touch-action: none; }
  .dg-grab::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; margin: 6px auto 0; background: rgba(120, 130, 145, .45); }
  html.dg-lock, html.dg-lock body { overflow: hidden; }
  /* A short one (a confirmation, a detail, a field or two) is a card that
     grows out of what was tapped and shrinks back into it; tap outside to close. */
  .modal-overlay.dg-zoomon, .sheet-overlay.dg-zoomon {
    align-items: center !important; justify-content: center !important; padding: 16px !important; overflow: hidden !important;
    height: var(--app-vvh, 100dvh); background: rgba(0, 18, 40, .34); backdrop-filter: none;
  }
  .dg-zoomon > .dg-card { width: 100% !important; max-width: 440px !important; margin: 0 !important; border-radius: 22px !important;
    max-height: calc(var(--app-vvh, 100dvh) - 32px) !important; overflow-y: auto; animation: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
  dialog.dg-card[open] { border-radius: 22px !important; animation: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
  /* A native <dialog> (Pulse): the dialog is its own sheet. */
  dialog.dg-sheet[open] { position: fixed; margin: auto 0 0 !important; inset: auto 0 0 0; width: 100% !important; max-width: none !important;
    max-height: calc(var(--app-vvh, 100dvh) - 44px) !important; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0 !important; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(var(--dg-y, 0px)); transition: transform .42s var(--dg-ease); animation: dg-up .42s var(--dg-ease); }
  dialog.dg-sheet.dg-half { overflow: hidden; }
  dialog.dg-sheet.dg-drag { transition: none; }
  dialog.dg-sheet.dg-gone { transform: translateY(105%); transition: transform .26s cubic-bezier(.4, 0, 1, 1); }
  dialog.dg-sheet::backdrop { background: rgba(0, 18, 40, .34); }
}

/* ---- The phone's tab bar, floating, in glass ----
   The selected pill lifts into a lens that follows the finger along the bar,
   magnifying what it passes over; let go and it drops onto the tab under it. */
@media (max-width: 820px) {
  .dg-bar {
    left: 12px !important; right: 12px !important; bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 22px)) !important;
    height: 62px; padding: 4px !important; border-radius: 32px; border: 1px solid var(--dg-glass-edge) !important;
    background: var(--dg-glass) !important; color: var(--dg-ink);
    -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
    box-shadow: var(--dg-shadow) !important; touch-action: none; user-select: none; -webkit-user-select: none;
    align-items: stretch;
  }
  .dg-bar .dg-tab { -webkit-touch-callout: none; -webkit-user-drag: none; position: relative; z-index: 2; justify-content: center; color: inherit; opacity: .78; transition: color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
  .dg-bar .dg-tab.dg-active { color: var(--dg-accent); opacity: 1; }
  [data-theme="dark"] .dg-bar .dg-tab.dg-active { color: #63B4F0; }
  .dg-bar .dg-tab svg { flex: none; width: 22px; height: 22px; transition: transform .35s var(--dg-spring); }
  .dg-bar .dg-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dg-bar .dg-tab.dg-under svg { transform: scale(1.28) translateY(-1px); }
  .dg-bubble { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 28px; background: var(--dg-bubble); pointer-events: none;
    transition: left .48s var(--dg-spring), width .48s var(--dg-spring), transform .3s var(--dg-spring), background .3s, box-shadow .3s; }
  .dg-bubble.dg-lift { transform: scale(1.22, 1.3); transition: transform .3s var(--dg-spring), background .3s, box-shadow .3s;
    background: radial-gradient(120% 140% at 50% 20%, rgba(255,255,255,.6), rgba(255,255,255,.14) 60%, rgba(255,255,255,.22));
    -webkit-backdrop-filter: blur(1px) brightness(1.2) saturate(1.8); backdrop-filter: blur(1px) brightness(1.2) saturate(1.8);
    box-shadow: inset 2px 0 3px rgba(0, 210, 255, .45), inset -2px 0 3px rgba(255, 60, 200, .4), inset 0 1px 1px rgba(255,255,255,.9), 0 8px 24px rgba(0,0,0,.28); }
  /* Room under every page for the floating bar. */
  body.dg-has-bar .main, body.dg-has-bar main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Pull to refresh (only when opened from the Home Screen) ---- */
.dg-ptr { position: fixed; z-index: 90; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  background: var(--dg-glass); border: 1px solid var(--dg-glass-edge); box-shadow: var(--dg-shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; place-items: center; color: var(--dg-accent);
  transform: translateY(-60px); opacity: 0; pointer-events: none; }
.dg-ptr svg { width: 22px; height: 22px; }
.dg-ptr.dg-spin svg { animation: dg-spin .8s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .sheet-overlay, .modal-overlay > .modal, .dg-on > .dg-sheet { animation: none !important; transition: none !important; }
  .dg-bubble, .dg-bar .dg-tab svg { transition: none !important; }
}
@media print { .dg-grab, .dg-bubble, .dg-ptr { display: none !important; } }