/* Thunk — glass, for the server-rendered pages (capture and unlock).
 *
 * The same material as the Mac notch and the React dashboard (2026-09-23):
 * a blurred field of cool light behind everything, black over it, and
 * controls as faint white lenses with a rim of light. Loaded after
 * theme.css and overrides its tokens unconditionally, so these pages are dark
 * whatever the device prefers — the light scheme was retired with the glass.
 *
 * CSS only. The capture page works with JavaScript off and must keep doing
 * so; nothing here depends on script. The dashboard's wallpaper lives in its
 * own browser storage and is deliberately not read here.
 *
 * theme.css itself keeps both schemes for the legacy Jinja dashboard
 * (LEGACY_DASHBOARD=true), which this file does not touch.
 */

/* Dark goes further here than on the dashboard: capture is the screen opened
   half-asleep in a dark room, so the ground drops lower and the ink comes off
   full contrast. The backdrop is dimmed harder for the same reason: --fg-dim
   clears 4.7:1 over its brightest pool of colour. The teal stays, as in the
   notch. */
:root {
  color-scheme: dark;
  --bg:            #06080c;
  --surface:       rgba(255, 255, 255, 0.05);
  --raised:        rgba(255, 255, 255, 0.09);
  --rule:          rgba(255, 255, 255, 0.10);
  /* The control edge is deliberately stronger than the hairline rule here: a
     bar of buttons with no readable edge looks like it is fading out rather
     than waiting for input. */
  --border:        rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --fg:            #c9ccd3;
  --fg-muted:      #8d929c;
  --fg-dim:        #7d828c;
  --accent:        #29b3bb;
  --accent-fill:   #00a2ac;
  --accent-ink:    #06090f;
  --accent-wash:   rgba(41, 179, 187, 0.10);
  --ok:            #6bd586;
  --warn:          #f3b94c;
  --err:           #fd736d;
  --info:          #71bfff;

  /* The glass recipe, the same as web/src/design/tokens.css. */
  --glass-body: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-rim:  inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  --pill:       999px;
}

/* The backdrop, in CSS alone so the page still owes nothing to JavaScript: a
   blurred field of cool light, and the black over it. No wallpaper here —
   that lives in the dashboard's browser storage and this page reads none of
   it. Fixed and behind everything, so typing never repaints it. */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: -10%;
  background:
    radial-gradient(42% 52% at 10% 6%,  #1f7d8f 0%, transparent 70%),
    radial-gradient(48% 58% at 94% 18%, #3b3f8f 0%, transparent 72%),
    radial-gradient(52% 48% at 72% 98%, #1a6a78 0%, transparent 70%),
    #0a0d12;
  filter: blur(40px);
}
body::after { inset: 0; background: var(--bg); opacity: 0.8; }

/* Controls shared by both pages: pills of glass, the teal under glass. */
input:not([type="hidden"]) {
  border-radius: var(--pill);
  padding: 0 0.9rem;
  background: var(--glass-body);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-rim);
}
input:focus { border-color: var(--accent); }
button { border-radius: var(--pill); background: var(--glass-body); border-color: var(--glass-edge); box-shadow: var(--glass-rim); }
button.primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12),
              0 2px 12px rgba(41, 179, 187, 0.25);
}