/* ══════════════════════════════════════════════════════════════════════════
   ICE GLASS — the mesh canvas and the frosted surfaces
   Doc of record: docs/04 §8.

   First written 2026-09-03 at 08:00 from a text brief, then REWRITTEN later the
   same day against the owner's own reference file,
   `Documents/Edusanjal Profile Redesign/NCE Profile v2.dc.html`, which did not
   exist on this machine when the first version was written (it arrived at
   10:33). Every value below is measured off that file, and the EduLibrary
   profile page (ice-edulibrary.css, ice-college-profile.css) carries the same
   numbers.

   Scope: the answer library (`.page-profile`: /answers, /answers/[slug],
   /answers/category/[id]), the guides (`.page-blog`, `.page-guide`) and the
   college pages that still render on BaseLayout (`.page-college`: /colleges
   and the 51 record pages outside PROFILE_SLUGS).

   ── What the reference does, measured off the file ─────────────────────────
   mesh        four blurred blobs (blur 44–54px), rose / peach / lavender / navy,
               52vw / 48vw / 66vw / 44vw, on 28s / 34s / 40s / 46s ease loops
   rail card   rgba(255,255,255,.62), backdrop-filter blur(26px) saturate(1.6),
               1px rgba(255,255,255,.78), radius 22px, padding 20px,
               shadow 0 14px 34px -20px rgba(4,9,36,.4)
   sticky bar  rgba(255,255,255,.6), the same blur, 1px rgba(255,255,255,.75),
               shadow 0 12px 30px rgba(4,9,36,.1)
   feed post   #FFFFFF, OPAQUE, 1px rgba(4,9,36,.06), radius 24px,
               shadow 0 14px 34px -22px rgba(4,9,36,.35)
   inner card  transparent, 1px rgba(4,9,36,.08), radius 18px,
               hover translateY(-2px) + 0 16px 28px -22px rgba(4,9,36,.5)

   So the reference itself keeps running prose on an opaque white post, and
   puts the glass on the rail, the sticky bar and the pills. That split is kept
   here because it is the reference's own, not as a performance guess.

   ── Why the first version did not look like the reference ─────────────────
   Its mesh was four radial gradients at 5–9% alpha, static, which renders as
   plain cream. Its panels were 86–90% white with no backdrop-filter. The rail
   cards were never in the sheet, so they stayed opaque white. Probed on the
   built page before this rewrite: `.pf-railcard` computed to rgb(255,255,255)
   and `.pf-panel` to 86% white, and no element in scope carried a blur.

   ── Paint cost, stated rather than assumed ─────────────────────────────────
   backdrop-filter is on the rail cards and the sticky tab bar only: at most
   four elements on /answers/[slug] and five on /answers. The 89 answer cards
   and 9 category tiles are transparent over an opaque post, as the reference's
   programme cards are, so they cost nothing. The mesh is four fixed,
   transform-animated layers, which is what the accepted profile page already
   runs. ⚠️ Still NOT measured on a phone. docs/04 §8.4 keeps that open.

   ── The mesh without markup ────────────────────────────────────────────────
   Four blobs need four boxes. Adding markup to the six route files re-dates
   every one of those pages in the sitemap, because the sitemap hashes the
   HTML, so the boxes are `body::before`, `body::after`, `main::before` and
   `main::after`, all `position:fixed; z-index:-1`. That works because `html`
   has no background of its own: `body`'s canvas colour propagates to the root
   and is painted beneath z-index:-1. ⚠️ If `html` ever gets a background, or
   `main` gets a transform, the mesh disappears or scrolls with the page.
   `node outputs/probe.mjs <url> -- "body::before" "main::before"` shows both.

   ── Guards ─────────────────────────────────────────────────────────────────
   prefers-reduced-motion stops the drift. prefers-reduced-transparency and
   prefers-contrast:more return solid surfaces and a flat canvas. Print drops
   all of it. backdrop-filter sits inside its own @supports, so a browser
   without it still gets the translucent card over the mesh.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* the glass: rail cards and the sticky bar */
  --ice-glass:rgb(255 255 255 / 62%);
  --ice-glass-edge:rgb(255 255 255 / 78%);
  --ice-glass-shadow:0 14px 34px -20px rgb(4 9 36 / 40%);
  --ice-glass-bar:rgb(255 255 255 / 60%);
  --ice-glass-bar-edge:rgb(255 255 255 / 75%);
  --ice-glass-bar-shadow:0 12px 30px rgb(4 9 36 / 10%);
  --ice-glass-blur:blur(26px) saturate(1.6);

  /* the posts: opaque, and the prose sits on them */
  --ice-post:var(--card,#fff);
  --ice-post-edge:rgb(4 9 36 / 6%);
  --ice-post-shadow:0 14px 34px -22px rgb(4 9 36 / 35%);
  --ice-post-lift:0 18px 44px -20px rgb(4 9 36 / 30%);

  /* the cards inside a post */
  --ice-inner-edge:rgb(4 9 36 / 8%);
  --ice-inner-hover:0 16px 28px -22px rgb(4 9 36 / 50%);

  /* the mesh. ⚠️ `--bg` is this design system's canvas token; `--canvas` does
     not exist here, and color-mix() with an unresolvable colour drops the
     whole declaration silently. */
  --ice-mesh-base:var(--bg,#FAF7F2);
  --ice-mesh-a:rgb(247 154 170 / 70%);
  --ice-mesh-b:rgb(240 169 122 / 62%);
  --ice-mesh-c:rgb(232 234 242 / 95%);
  --ice-mesh-d:rgb(26 43 82 / 24%);
  --ice-mesh-ease:cubic-bezier(.2,.7,.2,1);
}

html[data-theme="dark"]{
  /* Graphite, not navy (docs/04, the 2026-08-03 move). Same values the
     EduLibrary profile page uses in the dark theme. */
  --ice-glass:rgb(30 31 34 / 66%);
  --ice-glass-edge:rgb(255 255 255 / 12%);
  --ice-glass-shadow:0 14px 34px -20px rgb(0 0 0 / 55%);
  --ice-glass-bar:rgb(30 31 34 / 66%);
  --ice-glass-bar-edge:rgb(255 255 255 / 12%);
  --ice-glass-bar-shadow:0 12px 30px rgb(0 0 0 / 35%);

  --ice-post-edge:rgb(255 255 255 / 8%);
  --ice-post-shadow:0 14px 34px -22px rgb(0 0 0 / 60%);
  --ice-post-lift:0 18px 44px -20px rgb(0 0 0 / 55%);

  --ice-inner-edge:rgb(255 255 255 / 10%);
  --ice-inner-hover:0 16px 28px -22px rgb(0 0 0 / 70%);

  --ice-mesh-base:var(--bg,#16181d);
  --ice-mesh-a:rgb(120 60 80 / 42%);
  --ice-mesh-b:rgb(140 90 55 / 38%);
  --ice-mesh-c:rgb(48 52 66 / 70%);
  --ice-mesh-d:rgb(30 48 92 / 46%);
}

/* ── the mesh ────────────────────────────────────────────────────────────── */

:is(.page-profile,.page-guide,.page-blog,.page-college){ position:relative; }

:is(.page-profile,.page-guide,.page-blog,.page-college)::before,
:is(.page-profile,.page-guide,.page-blog,.page-college)::after,
:is(.page-profile,.page-guide,.page-blog,.page-college) main::before,
:is(.page-profile,.page-guide,.page-blog,.page-college) main::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(44px);
}

/* blob A — rose, top left */
:is(.page-profile,.page-guide,.page-blog,.page-college)::before{
  width:52vw;height:52vw;left:-14vw;top:-16vw;
  background:radial-gradient(circle at 50% 50%,var(--ice-mesh-a),transparent 68%);
  animation:iceMeshA 28s var(--ice-mesh-ease) infinite;
}
/* blob B — peach, top right */
:is(.page-profile,.page-guide,.page-blog,.page-college)::after{
  width:48vw;height:48vw;right:-12vw;top:-8vw;
  background:radial-gradient(circle at 50% 50%,var(--ice-mesh-b),transparent 68%);
  animation:iceMeshB 34s var(--ice-mesh-ease) infinite;
}
/* blob C — lavender, the big one in the middle */
:is(.page-profile,.page-guide,.page-blog,.page-college) main::before{
  width:66vw;height:66vw;left:12vw;top:42vh;
  filter:blur(54px);
  background:radial-gradient(circle at 50% 50%,var(--ice-mesh-c),transparent 70%);
  animation:iceMeshC 40s var(--ice-mesh-ease) infinite;
}
/* blob D — navy, bottom right */
:is(.page-profile,.page-guide,.page-blog,.page-college) main::after{
  width:44vw;height:44vw;right:-8vw;bottom:-14vw;
  filter:blur(48px);
  background:radial-gradient(circle at 50% 50%,var(--ice-mesh-d),transparent 70%);
  animation:iceMeshA 46s var(--ice-mesh-ease) infinite;
}

@keyframes iceMeshA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5vw,4vh,0) scale(1.16)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes iceMeshB{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  50%{transform:translate3d(-6vw,5vh,0) scale(1)}
  100%{transform:translate3d(0,0,0) scale(1.1)}
}
@keyframes iceMeshC{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,-4vh,0) scale(1.2)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* ── the posts: the answer, the header card, the guide cards ─────────────
   Opaque, as the reference's feed posts are. The running prose sits here. */

.page-profile .pf-panel,
.page-profile .pf-id,
.page-profile .pf-guide{
  background:var(--ice-post);
  border-color:var(--ice-post-edge);
  border-radius:24px;
  box-shadow:var(--ice-post-shadow);
}
.page-profile .pf-id{ box-shadow:var(--ice-post-lift); }

/* A panel that paints its own field colour keeps it. It carries inverted
   text, and dissolving its background dissolves that contrast. The live
   border keeps its crimson. */
.page-profile .pf-panel--navy{ background:var(--pf-field); border-color:var(--pf-field); }
.page-profile .pf-panel--live{ border-color:color-mix(in srgb,var(--crimson) 34%,transparent); }

/* ── the cards inside a post ───────────────────────────────────────────────
   Transparent over the opaque post, hairline edge, and the reference's hover
   lift. No paint cost: there are 89 of these on /answers. */

.page-profile .ans-card,
.page-profile .ans-cat{
  background:transparent;
  border-color:var(--ice-inner-edge);
  border-radius:18px;
  transition:transform 200ms var(--ice-mesh-ease),box-shadow 200ms var(--ice-mesh-ease);
}
.page-profile .ans-card:hover,
.page-profile .ans-cat:hover{
  background:transparent;
  transform:translateY(-2px);
  box-shadow:var(--ice-inner-hover);
}

/* ── the rail: glass ─────────────────────────────────────────────────────── */

.page-profile .pf-railcard{
  border-radius:22px;
  box-shadow:var(--ice-glass-shadow);
}
.page-profile .pf-railcard:not(.pf-railcard--navy){
  background:var(--ice-glass);
  border-color:var(--ice-glass-edge);
}
.page-profile .pf-railcard:not(.pf-railcard--navy):not(.pf-railcard--flush){ padding:20px; }

/* ── the sticky tab bar: glass ───────────────────────────────────────────── */

.page-profile .pf-tabs{
  background:var(--ice-glass-bar);
  border-bottom-color:var(--ice-glass-bar-edge);
  box-shadow:var(--ice-glass-bar-shadow);
}

/* ── the college pages still on BaseLayout ────────────────────────────────
   Same split: the fact table, the sources and the disclosure are posts; the
   rail card is glass. */

.page-college :is(.col-facts,.col-sources,.col-disclosure){
  background:var(--ice-post);
  border-color:var(--ice-post-edge);
  border-radius:24px;
  box-shadow:var(--ice-post-shadow);
}
.page-college .col-railcard{
  background:var(--ice-glass);
  border-color:var(--ice-glass-edge);
  border-radius:22px;
  box-shadow:var(--ice-glass-shadow);
}

/* ── the blur, where the reference has it ───────────────────────────────── */

@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .page-profile .pf-railcard:not(.pf-railcard--navy),
  .page-profile .pf-tabs,
  .page-college .col-railcard{
    -webkit-backdrop-filter:var(--ice-glass-blur);
    backdrop-filter:var(--ice-glass-blur);
  }
}

/* ── the opt-outs ─────────────────────────────────────────────────────────
   Each returns the page to the solid surfaces it had before this file, rather
   than to a half-glass state. */

@media (prefers-reduced-motion:reduce){
  :is(.page-profile,.page-guide,.page-blog,.page-college)::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college)::after,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::after{ animation:none; }

  .page-profile .ans-card,
  .page-profile .ans-cat{ transition:none; }
}

@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :is(.page-profile,.page-guide,.page-blog,.page-college)::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college)::after,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::after{ display:none; }

  .page-profile .pf-railcard:not(.pf-railcard--navy){
    background:var(--pf-surface);
    border-color:var(--pf-line);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .page-profile .pf-tabs{
    background:var(--bg);
    border-bottom-color:var(--pf-line);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .page-profile .pf-panel,
  .page-profile .pf-id,
  .page-profile .pf-guide,
  .page-profile .pf-railcard{ box-shadow:none; }
  .page-profile .ans-card,
  .page-profile .ans-cat{ border-color:var(--pf-line); }

  .page-college .col-railcard{
    background:var(--card);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .page-college :is(.col-facts,.col-sources,.col-disclosure,.col-railcard){ box-shadow:none; }
}

@media print{
  :is(.page-profile,.page-guide,.page-blog,.page-college)::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college)::after,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::before,
  :is(.page-profile,.page-guide,.page-blog,.page-college) main::after{ display:none; }

  .page-profile .pf-panel,
  .page-profile .pf-id,
  .page-profile .pf-guide,
  .page-profile .pf-railcard,
  .page-profile .pf-tabs,
  .page-profile .ans-card,
  .page-profile .ans-cat,
  .page-college :is(.col-facts,.col-sources,.col-disclosure,.col-railcard){
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }
}