/* uPrime — "Liquid Glass" look over an aurora background, in light and dark.
   js/theme.js sets html.glass plus .glass-light or .glass-dark (the user's choice, or the device setting on "auto").
   Real glass needs something to refract: soft aurora bands drift slowly behind thin, see-through panels with a
   diagonal sheen and a rim that catches the light. Blur is skipped where the browser lacks it or the user asks for
   reduced transparency (solid panels instead). Without JavaScript the plain style.css look is used. */

/* ── Tokens */
html.glass-light {
  color-scheme: light;
  /* iOS-style clear glass: a livelier background so the panels have something to bend, and panels that are mostly
     see-through, with a bright specular edge on top and a soft inner glow instead of a white fill. */
  --page: #DDE4F6; --aurora-h: 100vh;
  --sky-1: rgba(56, 189, 248, .30); --sky-2: rgba(129, 140, 248, .32); --sky-3: rgba(244, 114, 182, .30); --sky-4: rgba(45, 212, 191, .26);
  --aurora: linear-gradient(100deg, transparent 12%, rgba(45, 212, 191, .38) 30%, rgba(99, 102, 241, .34) 50%, rgba(168, 85, 247, .30) 68%, transparent 88%);
  --bg: rgba(255, 255, 255, .30);
  --surface: rgba(255, 255, 255, .18);
  --surface-strong: rgba(255, 255, 255, .34);
  --ink: #0E1222; --muted: #4E5672; --faint: #646C8A;
  --line: rgba(14, 18, 34, .08);
  --accent: #3B5BDB; --accent-ink: #FFFFFF; --accent-soft: rgba(76, 110, 245, .12);
  --warn-soft: rgba(255, 196, 92, .22); --ok: #15803D;
  --ev-approved: #166534; --ev-regional: #155E75; --ev-clinical: #92400E; --ev-preclinical: #6D28D9;
  --title-a: #0E1222; --title-b: #3B5BDB;
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .16) 100%);
  --rim: linear-gradient(150deg, #FFFFFF, rgba(255, 255, 255, .55) 25%, rgba(255, 255, 255, .15) 55%, rgba(255, 255, 255, .7) 100%);
  --glass-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .45), inset 0 0 24px rgba(255, 255, 255, .28), 0 10px 34px -14px rgba(36, 48, 110, .30);
  --well: rgba(255, 255, 255, .34); --well-edge: rgba(255, 255, 255, .6);
  --input: rgba(255, 255, 255, .55); --input-edge: rgba(14, 18, 34, .08);
  --text-lift: none;
}
html.glass-dark {
  color-scheme: dark;
  --page: #05070F;
  --sky-1: rgba(56, 189, 248, .18); --sky-2: rgba(129, 140, 248, .22); --sky-3: transparent; --sky-4: transparent;
  --aurora: linear-gradient(100deg, transparent 15%, rgba(45, 212, 191, .16) 32%, rgba(99, 102, 241, .22) 50%, rgba(168, 85, 247, .16) 68%, transparent 85%);
  --bg: rgba(255, 255, 255, .05);
  --surface: rgba(16, 22, 46, .34);
  --surface-strong: rgba(18, 24, 52, .48);
  --ink: #EEF1FF; --muted: #AAB3D4; --faint: #8F98BC;
  --line: rgba(255, 255, 255, .10);
  --accent: #8EA2FF; --accent-ink: #0B0E1C; --accent-soft: rgba(142, 162, 255, .16);
  --warn-soft: rgba(251, 191, 36, .14); --ok: #4ADE80;
  --ev-approved: #4ADE80; --ev-regional: #22D3EE; --ev-clinical: #FBBF24; --ev-preclinical: #C4B5FD;
  --title-a: #FFFFFF; --title-b: #A9B8FF;
  --sheen: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 60%, rgba(140, 160, 255, .08) 100%);
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .04) 60%, rgba(150, 170, 255, .45));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 50px -18px rgba(0, 0, 0, .8);
  --well: rgba(255, 255, 255, .06); --well-edge: rgba(255, 255, 255, .08);
  --input: rgba(8, 12, 30, .45); --input-edge: rgba(255, 255, 255, .12);
  --text-lift: 0 1px 2px rgba(0, 0, 0, .35);
}
html.glass { --radius: 22px; --radius-sm: 14px; --blur: blur(20px) saturate(180%); }
html.glass-light { --blur: blur(26px) saturate(210%) brightness(1.04); }

/* ── Aurora background */
html.glass body { background: var(--page); position: relative; padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { html.glass body { padding-bottom: 0; } }
html.glass body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120vw 70vh at 50% -15%, var(--sky-1), transparent 60%),
    radial-gradient(90vw 60vh at 15% 5%, var(--sky-2), transparent 65%),
    radial-gradient(80vw 50vh at 90% 100%, var(--sky-3), transparent 70%),
    radial-gradient(70vw 45vh at 0% 70%, var(--sky-4), transparent 70%),
    var(--page);
}
html.glass body::after {
  content: ""; position: fixed; inset: -10vh -50vw auto -50vw; height: var(--aurora-h, 70vh); z-index: -1; pointer-events: none;
  background: var(--aurora); filter: blur(40px);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(-12vw, 0, 0) skewY(-6deg); }
  100% { transform: translate3d(12vw, 4vh, 0) skewY(4deg); }
}
@media (prefers-reduced-motion: reduce) { html.glass body::after { animation: none; } }
html.glass .section + .section { border-top: 0; }

/* ── Glass panels: thin, sheened, with a light-catching rim (a 1px gradient border drawn with a mask) */
html.glass .card, html.glass .calc-out, html.glass .bodies, html.glass .faq, html.glass .dialog, html.glass .stats div,
html.glass .pcard, html.glass .opt:not(.single), html.glass .dose, html.glass .site-header .header-row, html.glass .tabbar,
html.glass .btn:not(.btn-primary), html.glass .chip:not([aria-pressed="true"]), html.glass .theme-toggle {
  position: relative; isolation: isolate; border: 0;
  background: var(--sheen), var(--surface);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow);
}
html.glass .calc-out, html.glass .dialog, html.glass .site-header .header-row, html.glass .tabbar { background: var(--sheen), var(--surface-strong); }
html.glass .card::after, html.glass .calc-out::after, html.glass .bodies::after, html.glass .faq::after, html.glass .dialog::after,
html.glass .stats div::after, html.glass .pcard::after, html.glass .opt:not(.single)::after, html.glass .dose::after,
html.glass .site-header .header-row::after, html.glass .tabbar::after, html.glass .btn:not(.btn-primary)::after,
html.glass .chip:not([aria-pressed="true"])::after, html.glass .theme-toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.glass .card, html.glass .pcard, html.glass .calc-out, html.glass .stats div { text-shadow: var(--text-lift); }
html.glass .pcard { transition: transform .18s ease; }
html.glass .pcard:hover { transform: translateY(-2px); }
html.glass .dialog::backdrop { background: rgba(8, 10, 24, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Insets inside panels read as frosted wells; inputs as recessed glass. */
html.glass .tile, html.glass .out-meta div, html.glass .field-fixed, html.glass .cal-cell, html.glass .note, html.glass .hint {
  background: var(--well); box-shadow: inset 0 1px 0 var(--well-edge), inset 0 0 0 1px var(--well-edge);
}
html.glass .field select, html.glass .field input, html.glass .field textarea, html.glass #lib-search, html.glass .lang-switch select {
  background: var(--input); border: 0; border-radius: 14px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--input-edge);
}
html.glass .input-unit input { border-radius: 14px 0 0 14px; }
html.glass .input-unit select, html.glass .input-unit .unit { border: 0; border-radius: 0 14px 14px 0; background: var(--well); box-shadow: inset 0 0 0 1px var(--input-edge); }

/* ── Header: floating glass bar; static on phones (the tab bar navigates), sticky on desktop */
html.glass .site-header { position: static; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.glass .site-header .header-row { width: auto; margin: 10px 12px 0; padding: 0 10px 0 14px; border-radius: 22px; min-height: 56px; gap: 10px; }
@media (min-width: 640px) { html.glass .site-header .header-row { margin: 12px 24px 0; } }
@media (min-width: 1168px) { html.glass .site-header .header-row { margin: 12px auto 0; max-width: 1120px; } }
@media (min-width: 900px) {
  html.glass .site-header { position: sticky; top: 0; z-index: 50; }
  html.glass .site-nav a:hover, html.glass .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
}
html.glass .notice { padding: 8px 4px 0; }
html.glass .brand img { border-radius: 9px; }
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 2; }

/* ── Tab bar: floating pill, iOS style */
html.glass .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 62px; padding: 0 6px; border-radius: 26px; }
html.glass .tabbar a { position: relative; z-index: 2; }
html.glass .tabbar a[aria-current="page"]::before { content: ""; position: absolute; inset: 8px 4px; border-radius: 18px; background: var(--accent-soft); z-index: -1; }

/* ── Buttons and chips */
html.glass .btn, html.glass .chip { border-radius: 999px; }
html.glass .btn:hover, html.glass .chip:hover { filter: brightness(1.06); }
html.glass .btn-primary, html.glass .chip[aria-pressed="true"] {
  border: 0; background: linear-gradient(135deg, #5B7BFF, #3B5BDB 55%, #6D4AE8); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -8px rgba(59, 91, 219, .65);
}
html.glass .btn-primary:hover { opacity: 1; }
html.glass .badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent); }

/* ── Hero and page heads */
html.glass .hero h1, html.glass .page-head h1 {
  letter-spacing: -0.045em;
  background: linear-gradient(120deg, var(--title-a) 35%, var(--title-b)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.glass .hero h1 { font-size: clamp(2.2rem, 9vw, 4rem); max-width: 14ch; }
html.glass .inject-only { background: var(--accent-soft); }
html.glass .stats dt { font-size: 1.8rem; color: var(--accent); }

/* ── Calculator result and product facts */
html.glass .draw strong { font-size: clamp(2.8rem, 13vw, 4rem); color: var(--accent); }
html.glass .pp-head h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-family: var(--mono); }
html.glass .pp-facts dd { font-size: 1.02rem; font-weight: 600; }
html.glass .site-footer { border-top: 0; }

/* ── Fallbacks: no blur support or reduced transparency → solid panels, no moving lights */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.glass-light { --surface: #FFFFFF; --surface-strong: #FFFFFF; }
  html.glass-dark { --surface: #151B33; --surface-strong: #18203B; }
}
@media (prefers-reduced-transparency: reduce) {
  html.glass-light { --surface: #FFFFFF; --surface-strong: #FFFFFF; }
  html.glass-dark { --surface: #151B33; --surface-strong: #18203B; }
  html.glass body::after { display: none; }
}