/* Acrylic pass — 2026-09-16.
   Micah, with screenshots of his own windows: "You see how those windows are
   transparent, how the taskbar is transparent? I want the site to have more
   features like that." The panels were only 42% tinted over a 9px blur, and the
   wallpaper was dimmed to near-black at the bottom, so nothing read as glass.
   This layer loads last and only changes surfaces: heavier blur, a lighter
   tint, real edge light, and the fine grain Windows acrylic has. No layout,
   spacing or colour of text changes here. */

:root{
  /* Windows acrylic is roughly a 30px blur with a saturation boost. More blur
     lets the tint go thinner without the text underneath turning into noise. */
  --glass-blur:blur(36px) saturate(185%);
  --panel:rgba(7,19,36,.27);
  --panel-hi:rgba(22,45,74,.44);
  --line:rgba(208,233,255,.36);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --glass:var(--grain),linear-gradient(140deg,rgba(216,240,255,.17),rgba(255,255,255,.02) 38%,rgba(6,24,46,.16)),var(--panel);
  --shadow:0 26px 60px rgba(2,8,20,.46),inset 0 1px 0 rgba(240,250,255,.5),inset 0 -1px 0 rgba(150,200,255,.16),0 0 34px rgba(120,180,255,.09);
}

/* Let the picture through. The old overlay ran to 55% black at the bottom, which
   is why panels over it read as solid: glass can only show what is behind it.
   Measured mean brightness of the six wallpapers on 2026-09-16: ops 47, callen
   47, micah 59, archive 62, rachel 63, renly 142 out of 255. One brightness
   value would either leave five of them murky or blow Renly's out, so each skin
   gets its own, aiming at roughly 75, and the brightest one carries a heavier
   dim so white text stays readable on it. */
:root{--wall-bright:1.5;--wall-dim:.28}
body[data-skin=micah]{--wall-bright:1.25;--wall-dim:.27}
body[data-skin=archive]{--wall-bright:1.2;--wall-dim:.27}
body[data-skin=rachel]{--wall-bright:1.2;--wall-dim:.27}
/* The bright wallpaper needs a thicker tint and slightly brighter small text, or
   the quiet grey lines under each card lose their contrast. */
body[data-skin=renly]{--wall-bright:.8;--wall-dim:.36;--panel:rgba(7,19,36,.40);--faint:#d2dfee;--muted:#dce6f4}
body .wall,body[data-skin] .wall{
  /* Soft colour behind the panels, so they read as glass even where the photo
     itself is nearly black. This is the aurora, not the photo. */
  background-image:
    radial-gradient(55% 45% at 16% 24%,rgba(80,165,255,.22),transparent 60%),
    radial-gradient(45% 38% at 84% 26%,rgba(255,196,126,.18),transparent 62%),
    radial-gradient(60% 45% at 52% 92%,rgba(120,150,255,.20),transparent 66%),
    linear-gradient(180deg,rgb(4 16 35 / .04),rgb(5 13 33 / .08) 55%,rgb(5 13 34 / var(--wall-dim))),
    var(--scene);
  filter:saturate(1.22) contrast(1.06) brightness(var(--wall-bright));
}

/* Every panel gets the same recipe, including the ones academy.css styles
   separately, so one surface never looks solid next to a transparent one. */
.card,.masthead,.rail,.mobile-nav,.deck-link,.mission-status,.arrival-path>div,.arrival-form,details.tip>div,.chat-panel,#assistant{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.card,.masthead,.rail,.mobile-nav{box-shadow:var(--shadow)}

/* Edge light: brighter on top, so a panel reads as a pane of glass with a lit
   rim rather than a flat rectangle. */
.card:before,.masthead:before,.rail:before,.deck-link:before,.arrival-path>div:before{
  background:linear-gradient(160deg,rgba(226,244,255,.62),rgba(190,225,255,.14) 36%,rgba(120,170,230,.10) 70%,rgba(226,244,255,.34));
}

/* Interactive surfaces brighten on hover, the way acrylic does under a cursor. */
.deck-link:hover,.card.actionable:hover{--panel:rgba(26,52,84,.42)}
.rail nav a{border-radius:12px;transition:background-color .15s ease}
.rail nav a:hover{background:rgba(190,225,255,.10)}
.rail nav a[aria-current=page]{background:rgba(190,225,255,.16);box-shadow:inset 0 1px 0 rgba(240,250,255,.32)}

/* Buttons are small panes of the same glass. */
.button,button.quiet{backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}

/* Nothing above may cost readability. These three fallbacks already existed for
   the old surfaces; they are repeated here because this file loads last. */
@media(prefers-contrast:more){
  :root{--panel:#08172b;--line:#afc7e7;--glass:none}
  .card,.masthead,.rail,.mobile-nav,.deck-link,.mission-status,.arrival-path>div,.arrival-form,.chat-panel,#assistant{
    background:#08172b;backdrop-filter:none;-webkit-backdrop-filter:none}
  body .wall,body[data-skin] .wall{opacity:.35}
}
@media(prefers-reduced-transparency:reduce){
  .card,.masthead,.rail,.mobile-nav,.deck-link,.mission-status,.arrival-path>div,.arrival-form,.chat-panel,#assistant{
    background:#0c1c32;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@supports not (backdrop-filter:blur(1px)){
  .card,.masthead,.rail,.mobile-nav,.deck-link,.mission-status,.arrival-path>div,.arrival-form,.chat-panel,#assistant{
    background:#0c1c32}
}