/* GrandPlan's colours, glass and light, shared by every page.
   Three choices, set on <html> by /look.js and saved per browser:
     data-mode     dark | light                          (Auto follows the computer)
     data-palette  aurora | ember | lagoon | graphite    (the light behind the glass)
     data-accent   gold | mint | sky | coral | lime | orchid  (the one highlight colour)
   The interface uses ink (three steps), one accent, and red or amber only for real warnings. */

:root{
  color-scheme:dark;
  --bg:#07090e;
  --solid:rgba(20,24,34,.92);           /* menus and dialogs, which must stay readable */
  --tx1:#eef1f6; --tx2:#aeb6c4; --tx3:#7f899b;   /* ink: primary, secondary, caption */
  --bdr:rgba(255,255,255,.075);         /* hairlines */
  --s2:rgba(255,255,255,.04); --s3:rgba(255,255,255,.08);   /* fills: rest, hover */
  --pane:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03) 320px,rgba(255,255,255,.022));
  --pane-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.035),0 60px 140px -60px rgba(0,0,0,.8);
  --glass:blur(32px) saturate(150%);
  --dots:rgba(255,255,255,.07);
  --zone:rgba(255,255,255,.022);       /* the faint tint on every other Mission zone and the Talk column */
  --red:#ff8f84; --amb:#f0c26e; --grn:#86d4ad;
  --icon:brightness(0) invert(1);
  /* palette: aurora, the light behind the glass */
  --p1:#3c56c9; --p2:#1f8f86; --p3:#6a4fb8; --pa:.55;
  /* accent: gold */
  --acc-d:#e9d08f; --acc-l:#7d6000;
  --acc:var(--acc-d);
}
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#e8ebf1;
  --solid:rgba(250,251,253,.94);
  --tx1:#0f141d; --tx2:#3e4757; --tx3:#5c6576;
  --bdr:rgba(15,20,29,.09);
  --s2:rgba(15,20,29,.035); --s3:rgba(15,20,29,.07);
  --pane:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55) 320px,rgba(255,255,255,.5));
  --pane-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 50px 120px -50px rgba(30,40,70,.35);
  --dots:rgba(15,20,29,.08);
  --zone:rgba(15,20,29,.025);
  --red:#b93a2c; --amb:#8f5a00; --grn:#1d7a4f;
  --icon:none;
  --p1:#8fa6ff; --p2:#7fd6c8; --p3:#c3b2f2; --pa:.6;
  --acc:var(--acc-l);
}
:root[data-palette="ember"]{--p1:#b0472c;--p2:#8f2f55;--p3:#b07a2a}
:root[data-palette="lagoon"]{--p1:#137d93;--p2:#1f8a5f;--p3:#2f5fb0}
:root[data-palette="graphite"]{--p1:#4a505c;--p2:#353a44;--p3:#5c6270;--pa:.7}
:root[data-mode="light"][data-palette="ember"]{--p1:#ffb59c;--p2:#f4a7c4;--p3:#ffd59a}
:root[data-mode="light"][data-palette="lagoon"]{--p1:#8fd8e8;--p2:#9be3c2;--p3:#a9c2ff}
:root[data-mode="light"][data-palette="graphite"]{--p1:#c9ced8;--p2:#dde1e8;--p3:#b8bec9}
:root[data-accent="mint"]{--acc-d:#93dcc0;--acc-l:#0d6e4a}
:root[data-accent="sky"]{--acc-d:#a3c6ff;--acc-l:#1d58b3}
:root[data-accent="coral"]{--acc-d:#f6ab9b;--acc-l:#a8432f}
:root[data-accent="lime"]{--acc-d:#cfe795;--acc-l:#4a6f00}
:root[data-accent="orchid"]{--acc-d:#d6bcf7;--acc-l:#7240a8}
:root{
  --adim:color-mix(in srgb,var(--acc) 14%,transparent);
  --rdim:color-mix(in srgb,var(--red) 14%,transparent);
  --amdm:color-mix(in srgb,var(--amb) 14%,transparent);
  /* the holographic detail: a pearly prismatic line, used only on edges and markers */
  --holo:linear-gradient(90deg,transparent,#9fe4ff 18%,#c9bdfd 38%,#ffc9e4 58%,#ffe7a6 78%,transparent);
}

/* The layers below the glass: slow soft light, faint rings and a dot field */
html{background:var(--bg);transition:background-color .3s}
body{background:transparent;color:var(--tx1)}
html::before,html::after,body::before{content:'';position:fixed;pointer-events:none;z-index:-1}
html::before{inset:-20%;opacity:var(--pa);filter:blur(90px);background:
  radial-gradient(34% 40% at 20% 18%,var(--p1),transparent 72%),
  radial-gradient(30% 34% at 82% 30%,var(--p3),transparent 72%),
  radial-gradient(40% 36% at 60% 92%,var(--p2),transparent 72%);
  animation:drift 60s ease-in-out infinite alternate}
html::after{inset:0;opacity:.6;background:
  radial-gradient(circle at 78% 22%,transparent 239px,var(--bdr) 240px,transparent 241px,transparent 379px,var(--bdr) 380px,transparent 381px,transparent 559px,var(--bdr) 560px,transparent 561px)}
body::before{inset:0;background:radial-gradient(var(--dots) 1px,transparent 1.5px) 0 0/24px 24px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%)}
@keyframes drift{50%{transform:translate3d(-4%,3%,0) scale(1.06)}to{transform:translate3d(3%,-3%,0) rotate(6deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){html::before{animation:none}}
option{background:var(--bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--acc) 35%,transparent)}

/* The glass: one flat pane with a holographic top edge */
.pane{position:relative;background:var(--pane);box-shadow:var(--pane-shadow);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.pane::before{content:'';position:absolute;top:0;left:48px;right:48px;height:1px;background:var(--holo);opacity:.55;pointer-events:none}