/* =====================================================================
   VWI PWA UI – iOS-style "Liquid Glass" for web apps
   ---------------------------------------------------------------------
   Web approximation of Apple's Liquid Glass: blurred, saturated,
   translucent layers with a specular edge and a soft shadow.
   Default theme = LIGHT. Dark follows the system setting, or force it
   with data-theme="dark" | "light" on <html> (or any container).
   Accent = light blue by default; data-accent="orange" switches the
   app-wide accent to orange.
   Glass needs something colorful BEHIND it: use .vwi-backdrop / .vwi-bg.
   ===================================================================== */

/* ---------- Fonts ----------
   Body = iOS system font (San Francisco) via -apple-system.
   Headings = Bitter Bold (brand). Self-host: put Bitter-Bold.woff2 in /fonts/ (free, OFL). */
@font-face {
  font-family: 'Bitter';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('Bitter Bold'), local('Bitter-Bold'), url('../fonts/Bitter-Bold.woff2') format('woff2');
}

/* ---------- Static tokens ---------- */
:root {
  --vwi-dark-blue: #0F377F;
  --vwi-light-blue: #0098DB;
  --vwi-orange: #E98300;
  --vwi-gray: #818A8F;
  --vwi-green: #BEC800;
  --vwi-night: #07173D;            /* dark base, confirmed */
  --vwi-ink: #0B1B3F;              /* text on light glass (derived) */
  --vwi-orange-text: #9A4F00;      /* orange as TEXT on light surfaces, 5.7:1 (derived) */

  --font-heading: 'Bitter', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-large-title: 34px; --fs-title1: 28px; --fs-title2: 22px; --fs-title3: 20px;
  --fs-headline: 17px; --fs-body: 17px; --fs-callout: 16px; --fs-sub: 15px;
  --fs-footnote: 13px; --fs-caption: 12px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-xl: 36px; --r-pill: 999px;
  --tap: 44px;

  --glass-blur: 22px;
  --glass-saturate: 180%;
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- LIGHT theme (default) ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-image:
    radial-gradient(60% 40% at 10% 4%, rgba(0, 152, 219, .38) 0%, transparent 70%),
    radial-gradient(50% 36% at 100% 24%, rgba(233, 131, 0, .24) 0%, transparent 70%),
    radial-gradient(70% 45% at 0% 100%, rgba(0, 152, 219, .22) 0%, transparent 70%),
    linear-gradient(180deg, #F6F9FE 0%, #DDE9F7 100%);
  --glass-fill: rgba(255, 255, 255, .48);
  --glass-fill-clear: rgba(255, 255, 255, .26);
  --glass-fill-strong: rgba(255, 255, 255, .80);
  --glass-border: rgba(255, 255, 255, .80);
  --glass-edge-top: rgba(255, 255, 255, .95);
  --glass-edge-bottom: rgba(15, 55, 127, .08);
  --glass-shadow: 0 10px 30px rgba(15, 55, 127, .16), 0 2px 6px rgba(15, 55, 127, .08);
  --glass-sheen: rgba(255, 255, 255, .65);
  --glass-text: #0B1B3F;
  --glass-text-secondary: rgba(11, 27, 63, .66);
  --glass-hairline: rgba(15, 55, 127, .14);
  --pill-selected: rgba(15, 55, 127, .10);
  --seg-selected: rgba(255, 255, 255, .95);
  --switch-off: rgba(15, 55, 127, .20);
  --scrim: rgba(7, 23, 61, .30);
  --accent: #0098DB;               /* fills, switches, focus ring */
  --accent-ink: #0F377F;           /* accent as text/icon on surface */
  --btn-primary-bg: rgba(15, 55, 127, .90);
  --btn-primary-fg: #FFFFFF;
}

/* ---------- DARK theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-image:
    radial-gradient(60% 40% at 15% 6%, rgba(0, 152, 219, .80) 0%, transparent 70%),
    radial-gradient(55% 40% at 95% 28%, rgba(233, 131, 0, .50) 0%, transparent 70%),
    radial-gradient(70% 50% at 20% 98%, rgba(0, 152, 219, .50) 0%, transparent 70%),
    linear-gradient(170deg, #0F377F 0%, #0A2557 55%, #07173D 100%);
  --glass-fill: rgba(255, 255, 255, .14);
  --glass-fill-clear: rgba(255, 255, 255, .07);
  --glass-fill-strong: rgba(20, 38, 84, .66);
  --glass-border: rgba(255, 255, 255, .24);
  --glass-edge-top: rgba(255, 255, 255, .42);
  --glass-edge-bottom: rgba(255, 255, 255, .06);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
  --glass-sheen: rgba(255, 255, 255, .30);
  --glass-text: #FFFFFF;
  --glass-text-secondary: rgba(255, 255, 255, .74);
  --glass-hairline: rgba(255, 255, 255, .20);
  --pill-selected: rgba(255, 255, 255, .20);
  --seg-selected: rgba(255, 255, 255, .30);
  --switch-off: rgba(255, 255, 255, .28);
  --scrim: rgba(0, 0, 0, .45);
  --accent: #0098DB;
  --accent-ink: #5BC3F0;
  --btn-primary-bg: rgba(0, 152, 219, .75);
  --btn-primary-fg: #FFFFFF;
}
/* Follow system dark mode unless a theme is forced (same values as [data-theme="dark"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-image:
      radial-gradient(60% 40% at 15% 6%, rgba(0, 152, 219, .80) 0%, transparent 70%),
      radial-gradient(55% 40% at 95% 28%, rgba(233, 131, 0, .50) 0%, transparent 70%),
      radial-gradient(70% 50% at 20% 98%, rgba(0, 152, 219, .50) 0%, transparent 70%),
      linear-gradient(170deg, #0F377F 0%, #0A2557 55%, #07173D 100%);
    --glass-fill: rgba(255, 255, 255, .14);
    --glass-fill-clear: rgba(255, 255, 255, .07);
    --glass-fill-strong: rgba(20, 38, 84, .66);
    --glass-border: rgba(255, 255, 255, .24);
    --glass-edge-top: rgba(255, 255, 255, .42);
    --glass-edge-bottom: rgba(255, 255, 255, .06);
    --glass-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
    --glass-sheen: rgba(255, 255, 255, .30);
    --glass-text: #FFFFFF;
    --glass-text-secondary: rgba(255, 255, 255, .74);
    --glass-hairline: rgba(255, 255, 255, .20);
    --pill-selected: rgba(255, 255, 255, .20);
    --seg-selected: rgba(255, 255, 255, .30);
    --switch-off: rgba(255, 255, 255, .28);
    --scrim: rgba(0, 0, 0, .45);
    --accent-ink: #5BC3F0;
    --btn-primary-bg: rgba(0, 152, 219, .75);
  }
}

/* ---------- ACCENT: orange (app-wide). Light blue stays default. ----------
   Orange fill → dark text (#07173D). White on orange fails (2.7:1).
   Orange as text on light surfaces → #9A4F00. */
[data-accent="orange"] {
  --accent: #E98300;
  --accent-ink: #9A4F00;
  --btn-primary-bg: rgba(233, 131, 0, .92);
  --btn-primary-fg: #07173D;
}
[data-accent="orange"][data-theme="dark"] { --accent-ink: #F2A23A; }
@media (prefers-color-scheme: dark) {
  :root[data-accent="orange"]:not([data-theme="light"]) { --accent-ink: #F2A23A; }
}

/* ---------- PWA base ---------- */
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--glass-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}

/* Fixed backdrop: <div class="vwi-backdrop"></div> as first child of <body>.
   (background-attachment: fixed is unreliable on iOS Safari.) */
.vwi-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg-image); }
.vwi-bg { min-height: 100%; color: var(--glass-text); font-family: var(--font-body); background: var(--bg-image); }
/* App shell: respects notch / home indicator. Use 100dvh, not 100vh. */
.app-shell {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) max(var(--sp-4), env(safe-area-inset-right))
           calc(96px + env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left));
}

/* ---------- Base glass surface ---------- */
.glass {
  position: relative;
  isolation: isolate;
  color: var(--glass-text);
  background-color: var(--glass-fill);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .10) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-top),
    inset 0 -1px 0 var(--glass-edge-bottom),
    var(--glass-shadow);
  border-radius: var(--r-l);
}
.glass::before {                        /* specular highlight on top edge */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 20% -10%, var(--glass-sheen) 0%, transparent 55%);
  mix-blend-mode: soft-light;
}
.glass--clear   { background-color: var(--glass-fill-clear); --glass-blur: 12px; }
.glass--strong  { background-color: var(--glass-fill-strong); --glass-blur: 30px; }
.glass--blue    { background-color: rgba(0, 152, 219, .30); }
.glass--navy    { background-color: rgba(15, 55, 127, .72); color: #FFFFFF; --glass-text-secondary: rgba(255, 255, 255, .78); }
.glass--orange  { background-color: rgba(233, 131, 0, .60); color: #07173D; --glass-text-secondary: rgba(7, 23, 61, .75); }
.glass--on-media { background-color: rgba(7, 23, 61, .38); color: #FFFFFF; --glass-text-secondary: rgba(255, 255, 255, .80); }  /* glass over photos/gradients */
.on-orange      { color: #07173D; }
.glass--interactive { transition: transform .35s var(--ease-ios), background-color .25s ease; }
.glass--interactive:active { transform: scale(.97); }

/* ---------- Typography ---------- */
.t-large-title { font: 700 var(--fs-large-title)/1.15 var(--font-heading); letter-spacing: -.2px; }
.t-title1 { font: 700 var(--fs-title1)/1.2 var(--font-heading); }
.t-title2 { font: 700 var(--fs-title2)/1.25 var(--font-heading); }
.t-title3 { font: 700 var(--fs-title3)/1.3 var(--font-heading); }
.t-headline { font: 700 var(--fs-headline)/1.3 var(--font-heading); }
.t-body { font: 400 var(--fs-body)/1.4 var(--font-body); }
.t-sub { font: 400 var(--fs-sub)/1.35 var(--font-body); color: var(--glass-text-secondary); }
.t-footnote { font: 400 var(--fs-footnote)/1.3 var(--font-body); color: var(--glass-text-secondary); }
.t-caption { font: 400 var(--fs-caption)/1.25 var(--font-body); color: var(--glass-text-secondary); }
.text-accent { color: var(--accent-ink); }

/* ---------- Icons ---------- */
.ic { width: 24px; height: 24px; flex: none; }
.ic--s { width: 20px; height: 20px; }
.ic--l { width: 28px; height: 28px; }

/* ---------- Components ---------- */
.glass-card { padding: var(--sp-4); border-radius: var(--r-l); display: flex; flex-direction: column; gap: var(--sp-2); }

.glass-nav {
  position: sticky; top: calc(var(--sp-2) + env(safe-area-inset-top, 0px)); z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 4px var(--sp-2); min-height: 52px; border-radius: var(--r-pill);
}
.glass-nav__title { flex: 1; font: 700 var(--fs-headline)/1 var(--font-heading); }

.glass-icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%;
  display: inline-grid; place-items: center; padding: 0;
}

.glass-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--r-pill);
  font: 700 var(--fs-callout)/1 var(--font-heading); text-decoration: none;
}
.glass-btn--primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: rgba(255, 255, 255, .35); }
.glass-btn--accent  { background-color: rgba(233, 131, 0, .88); color: #07173D; }   /* orange highlight */
.glass-btn--block   { display: flex; width: 100%; }

.glass-tabbar {
  position: fixed; left: var(--sp-4); right: var(--sp-4);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  z-index: 30; display: flex; justify-content: space-around; align-items: center;
  height: 64px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
}
.glass-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--glass-text-secondary); text-decoration: none; font: 500 10px/1 var(--font-body);
  padding: 8px 0; border-radius: var(--r-pill);
}
.glass-tabbar a[aria-current="page"] { color: var(--accent-ink); background: var(--pill-selected); box-shadow: inset 0 1px 0 var(--glass-edge-top); }
.glass-tabbar .ic { width: 26px; height: 26px; }

.glass-segmented { display: inline-flex; padding: 3px; border-radius: var(--r-pill); gap: 2px; }
.glass-segmented button {
  border: 0; background: transparent; color: var(--glass-text-secondary);
  min-height: 34px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  font: 700 var(--fs-footnote)/1 var(--font-heading);
}
.glass-segmented button[aria-pressed="true"] { background: var(--seg-selected); color: var(--glass-text); box-shadow: 0 1px 4px rgba(7, 23, 61, .18); }

.glass-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); font: 400 var(--fs-footnote)/1 var(--font-body); white-space: nowrap;
}
.glass-chip[aria-pressed="true"] { background-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }

.glass-input { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-pill); }
.glass-input input { flex: 1; background: transparent; border: 0; outline: 0; font: 400 var(--fs-body)/1 var(--font-body); } /* ≥16px: prevents iOS zoom on focus */
.glass-input input::placeholder { color: var(--glass-text-secondary); }
.glass-input:focus-within { box-shadow: inset 0 1px 0 var(--glass-edge-top), 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), var(--glass-shadow); }

.glass-list { padding: 0; overflow: hidden; border-radius: var(--r-l); }
.glass-list__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-4); border-bottom: .5px solid var(--glass-hairline); }
.glass-list__row:last-child { border-bottom: 0; }
.glass-list__row .grow { flex: 1; }
.glass-list__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.glass-list__icon .ic { width: 20px; height: 20px; }

.glass-switch { position: relative; width: 51px; height: 31px; flex: none; }
.glass-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.glass-switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--switch-off); transition: background .25s ease; }
.glass-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--ease-ios); }
.glass-switch input:checked + span { background: var(--accent); }
.glass-switch input:checked + span::after { transform: translateX(20px); }

.glass-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
  display: flex; flex-direction: column;
}
.glass-sheet::after { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; margin: 0 auto var(--sp-4); background: var(--glass-text-secondary); opacity: .5; order: -1; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
.glass-group { display: flex; gap: var(--sp-2); }

/* Hover only where a real pointer exists (never on iPhone) */
@media (hover: hover) {
  .glass--interactive:hover { background-color: color-mix(in srgb, var(--glass-fill) 100%, white 12%); }
}

/* ---------- Fallbacks & accessibility ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background-color: var(--glass-fill-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--clear, .glass--blue, .glass--strong, .glass--on-media {
    -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; background-color: var(--glass-fill-strong);
  }
  .glass--navy { background-color: #12306F; }
  .glass--orange, .glass-btn--accent { background-color: var(--vwi-orange); }
  .glass-btn--primary { background-color: var(--btn-primary-bg); }
}
@media (prefers-contrast: more) {
  .glass { border-color: var(--glass-text); background-color: var(--glass-fill-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .glass--interactive, .glass-switch span, .glass-switch span::after { transition: none; }
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }