/* rainglass.css — the liquid-glass layer for the rainfund dashboard, the
 * weather board and the login page.
 *
 * Ported from the market viewer's glass.css so the three pages and /market/
 * are visibly one product. The port is not a copy: those pages already speak a
 * token vocabulary (--card-bg, --card-border, --background, --text-white,
 * --text-secondary, --profit, --loss), and roughly a thousand existing rules
 * read it. So the layer REDEFINES that vocabulary in terms of the glass tokens
 * rather than restating every rule. Change the tokens, the whole page follows;
 * only the container classes need naming explicitly, to get the pane recipe.
 *
 * Load order matters: this file must come after the page's inline <style>, or
 * the page's own :root wins the custom properties.
 *
 * As in the viewer, NO backdrop-filter on panes -- it makes a containing block
 * for fixed descendants and would trap any modal under a card. Only the bar
 * blurs. */

:root {
  color-scheme: light;

  /* the P&L colours as raw triples so gradients set their own alpha;
     rainglass.js overwrites --pl-1/--pl-2 from the day's number. */
  --pl-1: 69,188,226;           /* neutral before a number exists: blu cepheus */
  --pl-2: 138,160,196;

  --field: #f2f1ef;
  --ink: #12161c;
  --ink-dim: #5d6470;
  --ink-faint: #8c94a1;

  --hair: rgba(18,24,38,.10);
  --hair-soft: rgba(18,24,38,.06);

  --pane-bg:
    linear-gradient(135deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.34) 36%, rgba(255,255,255,.37) 64%, rgba(255,255,255,.48) 100%),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34));
  --pane-edge:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(18,24,38,.11),
    inset -1px 0 0 rgba(18,24,38,.06),
    0 12px 32px -12px rgba(20,35,42,.16),
    0 1px 3px rgba(20,35,42,.05);
  --pane-shine:
    radial-gradient(75% 60% at 16% -4%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%),
    linear-gradient(118deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(255,255,255,.14) 100%);
  --pane-sheen: linear-gradient(104deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.44) 50%, rgba(255,255,255,.20) 53%, rgba(255,255,255,0) 60%);

  --chip-bg: rgba(255,255,255,.46);
  --input-bg: rgba(255,255,255,.78);

  --bloom-opacity: .10;
  --bloom-blur: 58px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ── the remap ──────────────────────────────────────────────────────────
     Everything below this line is the pages' own vocabulary, re-pointed. */
  --background: transparent;
  --card-bg: transparent;
  --card-border: var(--hair);
  --text-white: var(--ink);
  --text-secondary: var(--ink-dim);

  /* the greens and reds are darkened for the light field -- #00d4a1 on near
     white is about 1.9:1, which is a colour but not readable text. */
  --profit: #00916f;
  --profit-glow: rgba(0,145,111,.28);
  --profit-bg: rgba(0,145,111,.10);
  --loss: #d92020;
  --loss-glow: rgba(217,32,32,.24);
  --loss-bg: rgba(217,32,32,.09);
  --warning: #b26a00;
  --accent: #2563eb;
  --neutral: var(--ink-dim);
}

[data-theme="dark"] {
  color-scheme: dark;

  --field: #0d1117;
  --ink: #eef1f5;
  --ink-dim: #98a1af;
  --ink-faint: #6b7480;

  --hair: rgba(255,255,255,.10);
  --hair-soft: rgba(255,255,255,.06);

  /* In the dark a pane is a thin film of light, not a film of white: lower
     alpha, and the top hairline does the work the surface does in the light. */
  --pane-bg:
    linear-gradient(135deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.040) 36%, rgba(255,255,255,.050) 64%, rgba(255,255,255,.075) 100%),
    linear-gradient(rgba(13,17,23,.46), rgba(13,17,23,.46));
  --pane-edge:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.34),
    inset -1px 0 0 rgba(0,0,0,.20),
    0 16px 40px -14px rgba(0,0,0,.66),
    0 1px 3px rgba(0,0,0,.30);
  --pane-shine:
    radial-gradient(75% 60% at 16% -4%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(255,255,255,.05) 100%);
  --pane-sheen: linear-gradient(104deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.06) 47%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 53%, rgba(255,255,255,0) 60%);

  --chip-bg: rgba(255,255,255,.07);
  --input-bg: rgba(255,255,255,.06);

  --bloom-opacity: .12;
  --bloom-blur: 64px;

  --profit: #00d4a1;
  --profit-glow: rgba(0,212,161,.34);
  --profit-bg: rgba(0,212,161,.12);
  --loss: #ff4444;
  --loss-glow: rgba(255,68,68,.30);
  --loss-bg: rgba(255,68,68,.12);
  --warning: #f59e0b;
  --accent: #45BCE2;
}

/* ── the field ─────────────────────────────────────────────────────────────
   html carries the flat base so there is no white flash before paint; the
   bloom, fixed beneath everything, carries the colour and drifts on a slow
   figure. Transform only -- one composited layer, nothing per frame. */
html { background: var(--field); }
body { background: transparent !important; color: var(--ink); }

body::before {
  content: '';
  position: fixed; inset: -14%;
  z-index: -1; pointer-events: none;
  opacity: var(--bloom-opacity);
  filter: blur(var(--bloom-blur)) saturate(1.5) contrast(.96);
  background:
    radial-gradient(56% 52% at 14% 18%, rgba(var(--pl-1), .62) 0%, rgba(var(--pl-1), 0) 70%),
    radial-gradient(48% 46% at 86% 24%, rgba(var(--pl-2), .52) 0%, rgba(var(--pl-2), 0) 70%),
    radial-gradient(58% 58% at 74% 88%, rgba(var(--pl-1), .46) 0%, rgba(var(--pl-1), 0) 70%),
    radial-gradient(44% 44% at 20% 84%, rgba(var(--pl-2), .44) 0%, rgba(var(--pl-2), 0) 70%),
    radial-gradient(36% 40% at 4% 54%, rgba(var(--pl-1), .38) 0%, rgba(var(--pl-1), 0) 70%),
    radial-gradient(34% 38% at 44% 6%, rgba(var(--pl-2), .34) 0%, rgba(var(--pl-2), 0) 70%),
    radial-gradient(34% 34% at 96% 60%, rgba(var(--pl-1), .32) 0%, rgba(var(--pl-1), 0) 70%),
    var(--field);
  will-change: transform;
  transform: translate3d(0,0,0) scale(1.03);
  animation: bloom-drift 78s ease-in-out infinite alternate;
  transition: opacity .5s ease;
}
@keyframes bloom-drift {
  0%   { transform: translate3d(0%, 0%, 0) scale(1.03); }
  33%  { transform: translate3d(3.0%, -2.4%, 0) scale(1.05); }
  66%  { transform: translate3d(-2.6%, 2.0%, 0) scale(1.02); }
  100% { transform: translate3d(1.8%, 2.8%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ── the panes ─────────────────────────────────────────────────────────────
   One recipe, then the container class list of all three pages pointed at it.
   Four background layers front to back: the sheen (parked off-canvas until the
   pane is lit), the two reflections, then the pane. --gx/--gy slide the
   reflection under the pointer; rainglass.js writes them. */
.pane,
.portfolio-card, .strategy-card, .section, .paper-card,       /* dashboard  */
.city-card, .hfmetar-chart-wrap, .brackets-section,           /* weather    */
.login-box {                                                  /* login      */
  position: relative;
  border: 0 !important;
  border-radius: 14px;
  background:
    var(--pane-sheen) 0% 0 / 300% 100% no-repeat,
    var(--pane-shine),
    var(--pane-bg) !important;
  background-position: 0% 0, calc(50% + var(--gx, 0px)) calc(50% + var(--gy, 0px)), 0 0, 0 0 !important;
  background-size: 300% 100%, 124% 124%, 100% 100%, 100% 100% !important;
  box-shadow: var(--pane-edge) !important;
  transition: box-shadow .3s var(--ease), background-position .12s linear;
}
.city-card, .portfolio-card, .strategy-card, .login-box { border-radius: 16px; }

/* the sheen crosses once, when the pane first comes into view */
[data-glass-lit] { animation: pane-sheen 1.15s var(--ease) 1; }
@keyframes pane-sheen {
  from { background-position: -60% 0, calc(50% + var(--gx, 0px)) calc(50% + var(--gy, 0px)), 0 0, 0 0; }
  to   { background-position: 160% 0, calc(50% + var(--gx, 0px)) calc(50% + var(--gy, 0px)), 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { [data-glass-lit] { animation: none; } }

/* Nested panes read as a stack of slabs, so the inner ones drop to a hairline
   inset instead of carrying their own shadow and reflection. */
.section .paper-card,
.city-card .hfmetar-chart-wrap {
  background: var(--chip-bg) !important;
  box-shadow: inset 0 0 0 1px var(--hair-soft) !important;
}

/* ── chips, pills and controls ─────────────────────────────────────────────
   Small surfaces get the film without the shadow -- a pill with a drop shadow
   under it looks like a button that fell off. */
.system-pill, .period-btn, .logout-btn, .icao-badge, .hfmetar-badge,
.hfasos-badge, .empty-state, .stat-item, .forecast-block, .chart-legend {
  background: var(--chip-bg) !important;
  border: 1px solid var(--hair-soft) !important;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* The cells in a stats row are boxes now, so they need the breathing room the
   pages never gave them -- they were bare text before. Not .empty-state: it
   sets its own 30px and is a whole panel, not a cell. */
.stat-item, .forecast-block { padding: 10px 8px; }
/* Badges are too small for a 10px corner; it eats the glyphs. */
.icao-badge, .hfmetar-badge, .hfasos-badge { border-radius: 6px; }
.period-btn.active, .period-btn:hover, .logout-btn:hover, .system-pill:hover {
  background: var(--input-bg) !important;
}
.market-btn {
  background: var(--profit-bg) !important;
  border: 1px solid color-mix(in srgb, var(--profit) 42%, transparent) !important;
  color: var(--profit) !important;
}
.market-btn:hover { background: color-mix(in srgb, var(--profit) 20%, transparent) !important; }

.input-group input, input, select, textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--hair) !important;
  color: var(--ink) !important;
}
.input-group input:focus, input:focus, select:focus {
  border-color: var(--profit) !important;
  box-shadow: 0 0 0 3px var(--profit-glow) !important;
}

/* ── the theme toggle ──────────────────────────────────────────────────────
   Injected by rainglass.js into whatever header the page has; on login, which
   has no header, it parks in the corner. */
.glass-theme-btn {
  background: var(--chip-bg);
  border: 1px solid var(--hair-soft);
  color: var(--ink-dim);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 14px; line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.glass-theme-btn:hover { color: var(--ink); background: var(--input-bg); }
.glass-theme-btn.floating { position: fixed; top: 16px; right: 16px; z-index: 50; }

/* ── odds and ends ─────────────────────────────────────────────────────────
   Hairlines and separators the pages draw with a hard colour, and the two
   scrollbar surfaces, which otherwise stay black in the light theme. */
hr, .divider, table td, table th { border-color: var(--hair) !important; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
* { scrollbar-color: var(--ink-faint) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }