/* ==========================================================================
   Liquid glass — applied ONLY to the account panel.
   
   Glass is used here because it earns it: the panel floats above the exam
   surface as a temporary layer, so letting that surface show through carries
   real depth information (you can see what you will return to). It is not
   applied to cards or the rail, where there is nothing behind them and blur
   would be pure decoration.

   Critical constraint discovered by rendering it: the panel sits over the dark
   empty right margin, so there was literally nothing behind it to refract and
   the effect collapsed into a flat grey card. Glass needs something to bend.
   The fix is a light source of its own — a soft coloured aurora painted behind
   the panel — so the blur has real gradient to distort. Without that, no amount
   of blur radius reads as glass.

   Built from five stacked effects rather than one blur:
     1. an aurora field behind it  — the thing the glass refracts
     2. saturated backdrop blur    — the refraction itself
     3. layered inner highlights   — a lit glass edge, top brighter than bottom
     4. a specular sheen sweep     — light catching a curved surface
     5. a soft outer shadow        — separation from the page
   ========================================================================== */

/* The light behind the glass. Sits under the panel, blurred by it, and is what
   makes the refraction visible at all over an otherwise empty dark margin.

   Kept to ONE hue (the product's indigo) in two intensities rather than the four
   colours this started with. A multi-hue aurora reads as a decorative gradient
   blob — the rainbow-palette tell — and this is an exam product for civil-service
   candidates, not a crypto wallet. One hue still gives the blur something real
   to bend without turning the panel into a light show. */
.sheet-aurora {
  position: fixed;
  z-index: 60;
  top: 24px; right: -20px;
  width: 380px; height: 400px;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 34% 26%, rgba(99, 102, 241, 0.30), transparent 74%),
    radial-gradient(closest-side at 70% 68%, rgba(79, 70, 229, 0.18), transparent 76%);
  filter: blur(40px) saturate(120%);
  opacity: 0;
  transition: opacity .3s ease;
}
.sheet-aurora:not([hidden]) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sheet-aurora { transition: none; }
}


.sheet {
  /* Thinner than a normal panel so the aurora behind genuinely shows through —
     at 0.80 alpha the refraction was invisible and it read as a solid card. */
  background: linear-gradient(
    160deg,
    rgba(30, 33, 42, 0.52) 0%,
    rgba(20, 22, 29, 0.60) 46%,
    rgba(13, 14, 19, 0.68) 100%
  );
  -webkit-backdrop-filter: blur(30px) saturate(210%) brightness(1.10);
  backdrop-filter: blur(30px) saturate(210%) brightness(1.10);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;

  /* Outer separation + a lit top edge and a faint bottom bounce inside. */
  box-shadow:
    0 24px 56px -16px rgba(0, 0, 0, 0.72),
    0 2px 10px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.07);

  position: fixed;
  overflow: hidden;   /* keeps the sheen inside the rounded corners */
  isolation: isolate;
}

/* The specular highlight: a wide, very soft diagonal band across the top third,
   the way light lands on a curved glass slab. Deliberately subtle — this is the
   difference between "glass" and "shiny plastic". */
.sheet::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 78%;
  background: radial-gradient(
    120% 100% at 22% 0%,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0) 72%
  );
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

/* A cool tint bleeding up from the bottom edge, so the glass reads as having
   thickness rather than being a flat translucent rectangle. */
.sheet::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(
    to top,
    rgba(94, 106, 210, 0.10) 0%,
    rgba(94, 106, 210, 0.03) 44%,
    rgba(94, 106, 210, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Content must sit above both pseudo-element layers. */
.sheet > * { position: relative; z-index: 1; }

/* Entry: a short rise + settle. Glass should feel like it has mass. */
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px) scale(.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sheet:not([hidden]) {
  animation: sheet-in .22s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- glass-native controls inside the panel ---------- */

/* Dividers become light seams rather than dark lines: on glass, a separation
   reads as a lit edge, not a drawn border. */
.sheet-rule {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.10) 18%,
    rgba(255, 255, 255, 0.10) 82%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Rows lift toward the light on hover instead of just changing colour. */
.sheet-row {
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sheet-row:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10);
}

/* Inputs read as wells cut into the glass: a dark recess with a hard shadow on
   the inner top lip and a lit bottom lip, which is what sells depth.
   The side/top borders stay dark for the recess, but a visible rim is needed too
   — a first pass had borders so dark that an unfocused field's boundary was
   invisible against the panel. */
.sheet .text-input {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 2px 4px 0 rgba(0, 0, 0, 0.50),
    inset 0 1px 1px 0 rgba(0, 0, 0, 0.40),
    0 1px 0 0 rgba(255, 255, 255, 0.06);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.sheet .text-input:hover { border-color: rgba(255, 255, 255, 0.20); }
.sheet .text-input::placeholder { color: rgba(255, 255, 255, 0.30); }
.sheet .text-input:focus {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(129, 140, 248, 0.60);
  box-shadow:
    inset 0 2px 4px 0 rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(99, 102, 241, 0.24);
  outline: none;
}

/* The avatar becomes a small glass bead. */
.sheet-id .acct-avatar,
.acct-chip .acct-avatar {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.acct-chip.is-paid .acct-avatar {
  background: linear-gradient(155deg,
    rgba(16, 185, 129, 0.34) 0%,
    rgba(16, 185, 129, 0.14) 100%);
}

/* Status pill: a thin lit capsule, matching the panel's own edge treatment. */
.sheet-plan-state {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10);
}

/* The inline confirm block is glass-on-glass: darker, not lighter, so it reads
   as set into the panel rather than floating on top of it. */
.sheet-confirm {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

.sheet-msg {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sheet-msg.is-ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.26);
}

/* ---------- the chip that opens it ---------- */

.acct-chip {
  background: rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}
.acct-chip:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}
.acct-chip[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- fallbacks and accessibility ---------- */

/* Without backdrop-filter the glass would be a washed-out translucent box that
   makes text unreadable, so fall back to a solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet {
    background: #14161b;
    border-color: rgba(255, 255, 255, 0.14);
  }
  .sheet::before, .sheet::after { display: none; }
  .acct-chip { background: rgba(255, 255, 255, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .sheet:not([hidden]) { animation: none; }
  .sheet-row { transition: none; }
}

/* Blur is expensive on small devices, and at this width the panel covers most of
   the screen anyway — there is little behind it left to refract. */
@media (max-width: 560px) {
  .sheet {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    background: linear-gradient(
      175deg,
      rgba(24, 26, 32, 0.90) 0%,
      rgba(13, 14, 18, 0.94) 100%
    );
    border-radius: 18px 18px 0 0;
  }
}