/* ============================================================================
   Liquid Glass — material layer
   Apple WWDC'25 tokens: blur 10–25px, tint 5–12%, inner top specular white@30%,
   generous continuous corners, refraction displacement ≤20 for controls.
   Refraction (feDisplacementMap) is Chromium-only; fallbacks below are mandatory.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Canvas */
  --bg-0: #05070e;
  --bg-1: #0a1020;
  --bg-2: #0d1526;

  /* Accents — one per team role, kept desaturated so glass stays glass */
  --hue-producer: 265;
  --hue-audio: 190;
  --hue-dev: 145;
  --hue-qa: 40;
  --hue-px: 330;
  --hue-client: 10;

  --accent: hsl(200 90% 62%);
  --accent-soft: hsl(200 90% 62% / 0.16);
  --ok: hsl(150 70% 52%);
  --warn: hsl(38 95% 60%);
  --crit: hsl(354 85% 64%);

  /* Text */
  --ink: hsl(210 30% 96%);
  --ink-2: hsl(210 18% 78%);
  --ink-3: hsl(210 14% 58%);

  /* Glass tokens */
  --glass-tint: 0.075;
  --glass-blur: 18px;
  --glass-sat: 150%;
  --glass-radius: 22px;
  --glass-border: rgba(255, 255, 255, 0.16);
  --spec-top: rgba(255, 255, 255, 0.30);
  --spec-bottom: rgba(0, 0, 0, 0.14);
  --drop: 0 10px 34px rgba(0, 0, 0, 0.34);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- backdrop */

body {
  background: var(--bg-0);
  color: var(--ink);
  font: 400 15px/1.55 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Colour field behind the glass. Painted as gradients rather than blurred
   shapes: a gradient is soft for free, whereas `filter: blur()` on a container
   this size forces a full re-rasterisation of the subtree every single frame.
   Only `transform` animates here, and nothing in this subtree has a filter, so
   the whole thing stays on the compositor. */
.aurora {
  position: fixed;
  inset: -25vmax;
  z-index: 0;
  pointer-events: none;
  opacity: 0.62;
  contain: strict;
}
.aurora i {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
  animation: drift var(--dur, 60s) var(--ease-soft) infinite alternate;
}
.aurora i:nth-child(1) {
  --dur: 52s;
  background: radial-gradient(38% 38% at 22% 20%, hsl(215 92% 44% / 0.55), transparent 70%);
}
.aurora i:nth-child(2) {
  --dur: 67s; animation-direction: alternate-reverse;
  background: radial-gradient(34% 34% at 78% 26%, hsl(272 82% 46% / 0.38), transparent 70%);
}
.aurora i:nth-child(3) {
  --dur: 78s;
  background: radial-gradient(42% 42% at 36% 84%, hsl(190 88% 38% / 0.32), transparent 70%);
}
.aurora i:nth-child(4) {
  --dur: 61s; animation-direction: alternate-reverse;
  background: radial-gradient(26% 26% at 82% 78%, hsl(325 78% 48% / 0.24), transparent 70%);
}

/* Scrim between the colour field and the glass, so the colour stays a hint. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% -10%, rgba(6, 10, 22, 0.10), rgba(4, 6, 14, 0.70) 72%),
    linear-gradient(180deg, rgba(4, 6, 14, 0.28), rgba(3, 5, 12, 0.56));
}

@keyframes drift {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1.04); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.12); }
}

/* Fine grain — stops large blurred areas from banding. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- material */

.glass {
  position: relative;
  border-radius: var(--glass-radius);
  /* A dark base under the white tint: in dark mode Apple's material darkens what
     is behind it, then adds the highlight — white-only tint washes text out. */
  background:
    linear-gradient(rgba(255, 255, 255, var(--glass-tint)), rgba(255, 255, 255, var(--glass-tint))),
    rgba(9, 13, 26, 0.40);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--spec-top),
    inset 0 -1px 0 var(--spec-bottom),
    var(--drop);
  isolation: isolate;
}

/* An inner edge ring stands in for refraction at the rim — the part of the
   effect the eye actually reads — at zero rendering cost. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 12px rgba(255, 255, 255, 0.05);
}

/* Static top highlight instead of a pointer-tracked sweep — the sweep repainted
   a large gradient on every pointer move for no real gain in the material read. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 42%);
}

.glass-thin { --glass-tint: 0.05; --glass-blur: 12px; }
.glass-solid { --glass-tint: 0.11; --glass-blur: 24px; }

/* Edge light — a hairline that brightens on hover, like a lit bezel. */
.lift {
  transition: transform 0.42s var(--ease), box-shadow 0.42s var(--ease), border-color 0.42s var(--ease);
}
.lift:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 var(--spec-bottom),
    0 18px 48px rgba(0, 0, 0, 0.42);
}
.lift:active { transform: translateY(0) scale(0.995); }

/* ---------------------------------------------------------------- controls */

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
  --glass-radius: 13px;
  --glass-tint: 0.09;
  --glass-blur: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--glass-radius);
  background: rgba(255, 255, 255, var(--glass-tint));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, hsl(200 92% 60% / 0.9), hsl(212 92% 50% / 0.85));
  border-color: hsl(200 92% 72% / 0.5);
  color: #fff;
}
.btn.primary:hover { background: linear-gradient(180deg, hsl(200 96% 66% / 0.95), hsl(212 94% 54% / 0.9)); }
.btn.danger { background: hsl(354 80% 56% / 0.24); border-color: hsl(354 80% 66% / 0.42); }
.btn.ghost { background: transparent; box-shadow: none; border-color: rgba(255, 255, 255, 0.12); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; --glass-radius: 10px; }
.btn.icon { padding: 8px; width: 34px; justify-content: center; }

.field {
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  outline: none;
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
}
.field:focus {
  border-color: hsl(200 90% 66% / 0.62);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px hsl(200 90% 60% / 0.16);
}
.field::placeholder { color: var(--ink-3); }
textarea.field { resize: vertical; min-height: 76px; line-height: 1.5; }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
select.field option { background: #10182b; color: var(--ink); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.02em;
  background: hsl(var(--h, 200) 80% 60% / 0.16);
  border: 1px solid hsl(var(--h, 200) 80% 66% / 0.34);
  color: hsl(var(--h, 200) 90% 82%);
  white-space: nowrap;
}
.pill.solid { background: hsl(var(--h, 200) 80% 56% / 0.3); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------------------------------------------------------------- fallbacks */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn, .field { background: rgba(20, 26, 42, 0.9); }
  .glass::before { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(16, 22, 38, 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::before, .glass::after { display: none; }
  .btn { background: rgba(30, 38, 58, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .aurora { display: none; }
  body { background: #0b1020; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  * { transition-duration: 0.01ms !important; }
}