/* ═══════════════════════════════════════════════════════════════════════════
   OASIS GLASS — material layer

   THIS FILE HOLDS NO DESIGN VALUES. Every colour, length, radius, duration and
   typeface lives in tokens.css, which is the design system. What lives here is
   the handful of things a custom property cannot express on its own:

     - backdrop-filter, which has to be declared on a real selector
     - which surfaces are translucent at all
     - the hover geometry of a lifted card
     - accessibility fallbacks for the material

   So: to restyle the product, edit tokens.css. Touch this file only when a
   NEW component needs the glass material, in which case add its selector to
   the lists below. Every rule here reads its values from tokens.

   Loaded last so its plain class selectors beat the zero-specificity :where()
   masters in components.css. It never sets a colour literal.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · Which surfaces are glass ────────────────────────────────────────────
   Add a selector here when a new surface should refract what is behind it. */
.ob-card,.component-card,.widget,.fc-cardmsg,.public-product,
.oasis-panel,.signup-panel,.public-panel,.proof-panel,
.modal-card,.fc-sheet,.sheet,.board-menu,.fc-menu,.popover,
.public-card,.public-tile,.stat-card,.ledger-panel,
.price-card,.table-shell,.pricing-terms,.pricing-region-panel,
.pricing-capacity-boundary,.hero-ledger,.vote-summary,
.legal-control-grid,.risk-note,.leaderboard-ledger,
.community-post,.community-end,.group-card,.group-stat-grid,.trend-card,
.atm-card,.atm-stat-grid,.atm-filter-content,
.exp2-source-card,.exp2-step,.exp2-vs-card,
.account-control-boundary,.account-control-panel,.account-control-rail,
.account-control-summary,.account-guest-panel,.billing-toggle,
.community-rail section,.content-toolbar,.copytrade-filter-panel,
.copytrade-table-panel,.detail-aside,.detail-main,.evidence-status,
.legal-content,.legal-toc,.ranking-boundary,.ranking-panel,.ranking-rail,
.site-dialog{
  -webkit-backdrop-filter:var(--glass-material);
          backdrop-filter:var(--glass-material);
}

/* Sticky chrome sits over moving content, so it takes the thick grade. */
.site-header,.public-header,.board-header{
  background:var(--surface);
  border-block-end:var(--hairline) solid var(--border);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(1.4);
          backdrop-filter:blur(var(--blur-lg)) saturate(1.4);
}
.landing-layout .site-header{background:var(--surface)}

/* Chips and filters take the thin grade. */
.oasis-filter,.filter-chip,.chip,.tag,.pill,
.btn.ghost,.public-button-secondary,.fc-btn-ghost,.button.ghost{
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.3);
          backdrop-filter:blur(var(--blur-sm)) saturate(1.3);
}

/* The scrim blurs the page rather than merely dimming it. */
.scrim,.modal-scrim,.fc-scrim,.overlay-scrim{
  background:var(--scrim);
  -webkit-backdrop-filter:var(--filter-scrim);
          backdrop-filter:var(--filter-scrim);
}


/* ── 2 · Let the mesh through ────────────────────────────────────────────────
   A translucent panel over an opaque section is just a flat panel: the blur has
   nothing to work on. So the mesh has to survive all the way down the cascade.

   Two things fought the mesh as a body background-image. order-book-page.css
   re-declares `background:` on body as a SHORTHAND, which resets
   background-image to none; and body is itself the scroll container here
   (overflow:auto), so a background-attachment:fixed layer on it does not paint
   the way it would on the canvas. Cranking the orb alpha to .85 proved it: the
   page stayed white.

   So the mesh is its own fixed layer, exactly as the design system draws it.
   ::before rather than ::after, because ::after is the (now inert) grain hook. */
body{background-color:var(--bg)}
/* The reference's mesh is a BAND, not a page wash: fixed to the top, 600px tall,
   masked so it fades out at 52% of its own height. Below it the page is plain
   --paper. Painting the orbs across the whole viewport - which is what this used
   to do - put a grey-blue tint under every surface on every page and was why a
   near-white table still read as grey. */
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:var(--mesh-height);
  z-index:var(--z-grain);
  pointer-events:none;
  overflow:hidden;
  filter:saturate(1.05);
  background-image:var(--mesh);
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--mesh-fade),transparent);
          mask-image:linear-gradient(180deg,#000 var(--mesh-fade),transparent);
}
[data-theme="dark"] body::before{filter:saturate(1) brightness(.7)}

/* Page-level bands carry no fill of their own so the mesh reads behind them. */
/* .table-shell was in this list, which is why a data table had no background at
   all: the shell asks for --table-surface and this rule, loading later with a
   plain selector, cleared it to transparent. A page BAND should let the mesh
   through - that is what this list is for - but a table is a surface that holds
   figures, and it needs a ground of its own. */
.public-section,.public-band,.page-atmosphere,.oasis-hero,.public-hero,
.site-section,.pricing-grid,
main > section,.ob-workspace{
  background-color:transparent;
}


/* ── 3 · Lift ────────────────────────────────────────────────────────────────
   Motion is the only thing that reads as "this card is a physical sheet". */
.ob-card,.component-card,.widget,.public-product{
  transition:transform var(--dur-slow) var(--ease-enter),
             box-shadow var(--dur-slow) var(--ease-enter);
}
.ob-card:hover,.component-card:hover,.widget:hover,.public-product:hover{
  transform:translateY(var(--card-hover-lift));
  box-shadow:var(--shadow-hover);
}


/* ── 4 · Accessibility fallbacks ─────────────────────────────────────────────
   tokens.css already swaps the surfaces to opaque under reduced-transparency;
   the filters have to be switched off here, on the same selectors. */
@media (prefers-reduced-transparency:reduce){
  .ob-card,.component-card,.widget,.fc-cardmsg,.public-product,
  .oasis-panel,.signup-panel,.public-panel,.proof-panel,
  .modal-card,.fc-sheet,.sheet,.board-menu,.fc-menu,.popover,
  .public-card,.public-tile,.stat-card,.ledger-panel,
  .price-card,.table-shell,.pricing-terms,.pricing-region-panel,
  .pricing-capacity-boundary,.hero-ledger,.vote-summary,
  .legal-control-grid,.risk-note,.leaderboard-ledger,
  .community-post,.community-end,.group-card,.group-stat-grid,.trend-card,
  .atm-card,.atm-stat-grid,.atm-filter-content,
  .exp2-source-card,.exp2-step,.exp2-vs-card,
  .account-control-boundary,.account-control-panel,.account-control-rail,
  .account-control-summary,.account-guest-panel,.billing-toggle,
  .community-rail section,.content-toolbar,.copytrade-filter-panel,
  .copytrade-table-panel,.detail-aside,.detail-main,.evidence-status,
  .legal-content,.legal-toc,.ranking-boundary,.ranking-panel,.ranking-rail,
  .site-dialog,
  .site-header,.public-header,.board-header,
  .oasis-filter,.filter-chip,.chip,.tag,.pill,
  .scrim,.modal-scrim,.fc-scrim,.overlay-scrim,
  .btn.ghost,.public-button-secondary,.fc-btn-ghost,.button.ghost{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .ob-card:hover,.component-card:hover,.widget:hover,.public-product:hover{
    transform:none;
  }
}

@media (forced-colors:active){
  .ob-card,.component-card,.widget,.oasis-panel,.modal-card,
  .site-header,.public-header{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    border:1px solid CanvasText;
  }
}