/* ==========================================================================
   LIQUID GLASS — the material, shared by every page except the home page.

   The home page has an animated field of glass behind it. These pages do NOT
   get that: they are documents, and a moving background behind eighty
   kilobytes of legal text is a thing to read past rather than a thing to
   enjoy. Each page keeps its own quiet backdrop.

   What they share with the home page is the MATERIAL. A pane here is built
   the same way as a pane there:

     · the fill is a gradient across the surface, not one flat alpha, because
       real glass is brighter where it faces the light and darker where it
       turns away
     · a lit hairline along the top edge, where light would catch a real pane
     · a bright inner line at the top and a dark one at the bottom, which is
       what reads as THICKNESS. Without that pair a blurred box looks painted
       on rather than sitting on top of something
     · a backdrop blur, so whatever is behind it is genuinely behind it

   Everything is expressed in the tokens each page already defines, so this
   follows both of their themes without knowing anything about either.

   Scoped to `screen`. These pages have print stylesheets — a printed policy
   should be black text on white paper, with no glass anywhere near it.
   ========================================================================== */

@media screen{

  :root{
    --g-fill-1:rgba(255,255,255,.055);
    --g-fill-2:rgba(255,255,255,.090);
    --g-edge:rgba(255,255,255,.26);
    --g-under:rgba(0,0,0,.18);
    --g-blur:blur(22px) saturate(1.6);
  }
  :root[data-theme="light"]{
    --g-fill-1:rgba(255,255,255,.60);
    --g-fill-2:rgba(255,255,255,.82);
    --g-edge:rgba(255,255,255,1);
    --g-under:rgba(30,22,70,.10);
  }
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]){
      --g-fill-1:rgba(255,255,255,.60);
      --g-fill-2:rgba(255,255,255,.82);
      --g-edge:rgba(255,255,255,1);
      --g-under:rgba(30,22,70,.10);
    }
  }

  /* ── panes ─────────────────────────────────────────────────────────────
     .panel is the legal document's section container; .hccard is a help
     centre entry. Both were a flat fill and a hairline. */
  .panel,
  .hccard{
    position:relative;
    background:linear-gradient(150deg,
      var(--g-fill-2) 0%, var(--g-fill-1) 42%, var(--g-fill-1) 100%);
    border:1px solid var(--hair);
    -webkit-backdrop-filter:var(--g-blur);
    backdrop-filter:var(--g-blur);
    box-shadow:
      var(--cast),
      inset 0 1px 0 0 var(--g-edge),
      inset 0 -1px 0 0 var(--g-under);
    overflow:hidden;
  }

  /* the lit top edge — inset from the corners, where a real pane catches light */
  .panel::before,
  .hccard::before{
    content:"";
    position:absolute; left:14%; right:14%; top:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--g-edge), transparent);
    pointer-events:none;
  }

  /* .hccard is a link and animates its own background on hover, which would
     drop the gradient. Keep the material and lift the pane instead. */
  .hccard:hover{
    background:linear-gradient(150deg,
      var(--g-fill-2) 0%, var(--g-fill-2) 42%, var(--g-fill-1) 100%);
    border-color:var(--hair-2);
  }

  /* ── the sticky header ─────────────────────────────────────────────────
     It already blurs once stuck; this gives it the same edge treatment as a
     pane so it belongs to the same material. */
  .hdr::before{
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:inset 0 -1px 0 0 var(--g-under);
  }

  /* ── the theme button ──────────────────────────────────────────────────
     A small pane rather than a filled circle. */
  .themebtn{
    background:linear-gradient(150deg, var(--g-fill-2), var(--g-fill-1));
    -webkit-backdrop-filter:var(--g-blur);
    backdrop-filter:var(--g-blur);
    box-shadow:inset 0 1px 0 0 var(--g-edge), inset 0 -1px 0 0 var(--g-under);
  }

  /* Glass is a surface, not a texture: anything that is already a solid card
     inside a pane stays solid, or the page turns to soup. */
  .panel .panel-body{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  @media (prefers-reduced-transparency:reduce){
    .panel, .hccard, .themebtn, .hdr::before{
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
  }
}