/* =================================================================
   CASTLE GLASS — a bounded material, not a decoration
   -----------------------------------------------------------------
   Glassmorphism is banned as a default for good reason: blurred cards
   sprayed across a flat page are the loudest AI-design tell there is.
   The material is only honest when there is genuinely something
   moving behind the surface. So this file defines a small, closed set
   of roles, and the rule is simple:

     USE GLASS ONLY WHERE CONTENT PASSES UNDERNEATH.

   Allowed roles — this list is exhaustive, do not invent a seventh:
     .cc-glass--rail   fixed navigation; the page scrolls beneath it
     .cc-glass--dock   sticky action bar / sticky table header
     .cc-glass--hud    readout floating over a live chart plot
     .cc-glass--sheet  modal, drawer, popover over the page
     .cc-glass--well   panel sitting on the WebGL field (hero only)
     .cc-glass--tip    tooltip / context popover

   Banned: ordinary content cards, page sections, table rows, list
   items, footers, anything on a flat background. If you cannot name
   what is moving behind it, it is not glass — it is a card, and
   .content-section already styles cards correctly.

   THE OPTICS
   The tint is navy, not white. On a #1B2A41 -> #0f1a2a page a
   white-tinted panel reads as fog; a navy-tinted panel with raised
   luminance and boosted saturation reads as cold, thick, cast glass —
   which is the register this product is aiming at. Saturation is
   pushed past 100% deliberately: it is what makes content look like
   it is being seen THROUGH something rather than behind it.

   The "liquid" quality is specular, not blobby. Two layers:
     ::before  a 1px bevel highlight, brightest off-centre where a
               real chamfer would catch a light source
     ::after   a pointer-tracked sheen driven by --cc-mx/--cc-my,
               written by castle-glass.js
   Where the browser supports it, castle-glass.js also enables a real
   edge-refraction filter (feTurbulence + feDisplacementMap) on the
   rim, which is what actually bends the content underneath.

   DEGRADATION, in priority order:
     prefers-reduced-transparency  -> opaque, no blur
     no backdrop-filter support    -> opaque, no blur
     html.cc-no-glass (low-end)    -> opaque, no blur
     prefers-reduced-motion        -> material stays, sheen does not

   LOAD ORDER: after theme-unification.css.
   ================================================================= */

:root {
  /* Material */
  --cc-glass-blur: 18px;
  --cc-glass-sat: 132%;
  --cc-glass-tint: rgba(23, 36, 56, 0.62);
  --cc-glass-tint-deep: rgba(15, 26, 42, 0.78);
  --cc-glass-tint-light: rgba(27, 42, 65, 0.42);
  /* Per-role tints. Each role sits at a different depth, so each gets
     its own alpha rather than one tint stretched to cover all six. */
  --cc-glass-tint-rail: rgba(20, 32, 50, 0.72);
  --cc-glass-tint-rail-top: rgba(20, 32, 50, 0.42);
  --cc-glass-tint-dock: rgba(20, 32, 50, 0.82);
  --cc-glass-scrim-tint: rgba(9, 16, 26, 0.62);

  /* Edges. The bevel is white; the seam is gold at very low alpha so
     the material stays inside the brand without ever looking gilded. */
  --cc-glass-bevel: rgba(255, 255, 255, 0.22);
  --cc-glass-rim: rgba(255, 255, 255, 0.10);
  --cc-glass-seam: rgba(201, 167, 78, 0.16);

  /* Depth. Long, soft, low-opacity — an institutional shadow, not a
     drop-shadow-on-everything shadow. */
  --cc-glass-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.78);
  --cc-glass-shadow-deep: 0 32px 80px -32px rgba(0, 0, 0, 0.86);
  --cc-glass-shadow-rail: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 32px -28px rgba(0, 0, 0, 0.9);
  --cc-glass-shadow-dock: 0 8px 24px -20px rgba(0, 0, 0, 0.9);
  --cc-glass-shadow-hud: 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --cc-glass-shadow-tip: 0 8px 20px -14px rgba(0, 0, 0, 0.9);
  --cc-glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  /* Rim at rest, before the page has scrolled under the rail. */
  --cc-glass-rim-faint: rgba(255, 255, 255, 0.06);
  /* Sheen ramp — the pointer-tracked specular highlight. */
  --cc-glass-sheen-core: rgba(255, 255, 255, 0.10);
  --cc-glass-sheen-mid: rgba(255, 255, 255, 0.03);
  --cc-glass-bevel-tail: rgba(255, 255, 255, 0.07);

  /* Glass radius ramp. Sits between DESIGN.md's rounded.sm (8px) and
     rounded.lg (16px): a panel that floats reads heavier than a card,
     so its corners are slightly tighter than the card scale. */
  --cc-glass-radius-xs: 6px;
  --cc-glass-radius-sm: 8px;
  --cc-glass-radius: 14px;
  --cc-glass-radius-lg: 16px;
  --cc-glass-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */

  /* Opaque fallbacks — used verbatim whenever glass is switched off,
     so a no-blur browser gets a designed panel, not a broken one. */
  --cc-glass-solid: #1a2740;
  --cc-glass-solid-deep: #14202f;
}

/* ---------------------------------------------------------------
   BASE MATERIAL
   --------------------------------------------------------------- */
.cc-glass {
  position: relative;
  /* Own stacking context: the ::after sheen must never escape and
     paint over a dropdown or a chart tooltip. */
  isolation: isolate;
  background-color: var(--cc-glass-tint);
  -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat));
  backdrop-filter: blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat));
  border: 1px solid var(--cc-glass-rim);
  border-radius: var(--cc-glass-radius);
  box-shadow: var(--cc-glass-shadow), var(--cc-glass-inner);
}

/* The bevel. Asymmetric on purpose — a uniform 1px white line is a
   border; a gradient that peaks off-centre is a lit edge. */
.cc-glass::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cc-glass-bevel) 22%,
    var(--cc-glass-bevel-tail) 58%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* The sheen. Coordinates come from castle-glass.js; with no JS the
   custom properties never resolve to a hover position and the layer
   stays at opacity 0, so this costs nothing. */
.cc-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    160px circle at var(--cc-mx, 50%) var(--cc-my, 0%),
    var(--cc-glass-sheen-core),
    var(--cc-glass-sheen-mid) 42%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.26s var(--cc-glass-ease);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .cc-glass[data-glass-sheen]:hover::after { opacity: 1; }
}

/* Keep real content above both decorative layers. */
.cc-glass > * { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   ROLE: RAIL — fixed navigation. The canonical honest use: the whole
   application scrolls underneath it.
   --------------------------------------------------------------- */
.cc-glass--rail {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--cc-glass-seam);
  background-color: var(--cc-glass-tint-rail);
  box-shadow: var(--cc-glass-shadow-rail);
}
/* At the very top of the page there is nothing behind the bar yet, so
   the material has nothing to do. Fade it in on scroll — the bar
   becomes glass at the moment glass starts meaning something.
   castle-glass.js toggles .cc-scrolled on <html>. */
.cc-glass--rail {
  transition: background-color 0.24s var(--cc-glass-ease),
              border-color 0.24s var(--cc-glass-ease),
              box-shadow 0.24s var(--cc-glass-ease);
}
html:not(.cc-scrolled) .cc-glass--rail {
  background-color: var(--cc-glass-tint-rail-top);
  border-bottom-color: var(--cc-glass-rim-faint);
  box-shadow: none;
}

/* ---------------------------------------------------------------
   ROLE: DOCK — sticky action bars, sticky table headers.
   --------------------------------------------------------------- */
.cc-glass--dock {
  background-color: var(--cc-glass-tint-dock);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--cc-glass-rim);
  box-shadow: var(--cc-glass-shadow-dock);
  --cc-glass-blur: 14px;
}

/* ---------------------------------------------------------------
   ROLE: HUD — a readout floating over a live plot. Tighter radius and
   a denser tint, because it must stay legible over a bright data line.
   --------------------------------------------------------------- */
.cc-glass--hud {
  --cc-glass-blur: 12px;
  background-color: var(--cc-glass-tint-deep);
  border: 1px solid var(--cc-glass-seam);
  border-radius: var(--cc-glass-radius-sm);
  box-shadow: var(--cc-glass-shadow-hud);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------
   ROLE: SHEET — modal / drawer. Deeper blur, longer shadow: it is the
   furthest thing from the page.
   --------------------------------------------------------------- */
.cc-glass--sheet {
  --cc-glass-blur: 26px;
  background-color: var(--cc-glass-tint-deep);
  border: 1px solid var(--cc-glass-rim);
  border-radius: var(--cc-glass-radius-lg);
  box-shadow: var(--cc-glass-shadow-deep), var(--cc-glass-inner);
}
/* The backdrop behind a sheet is a scrim, not glass — blurring both
   layers doubles the cost and reads as mush. */
.cc-glass-scrim {
  position: fixed;
  inset: 0;
  background: var(--cc-glass-scrim-tint);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------
   ROLE: WELL — a panel sitting directly on the WebGL field. The field
   is worth seeing, so this is the most transparent role in the set.
   --------------------------------------------------------------- */
.cc-glass--well {
  --cc-glass-blur: 20px;
  background-color: var(--cc-glass-tint-light);
  border: 1px solid var(--cc-glass-rim);
  border-radius: var(--cc-glass-radius);
}

/* ---------------------------------------------------------------
   ROLE: TIP — small popovers and tooltips.
   --------------------------------------------------------------- */
.cc-glass--tip {
  --cc-glass-blur: 10px;
  background-color: var(--cc-glass-tint-deep);
  border: 1px solid var(--cc-glass-rim);
  border-radius: var(--cc-glass-radius-xs);
  box-shadow: var(--cc-glass-shadow-tip);
  padding: 0.375rem 0.5625rem;
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------
   EDGE REFRACTION — the part that actually bends light.
   castle-glass.js feature-tests `backdrop-filter: url()` against a
   live element and only then adds html.cc-refract and injects the
   SVG filter. Scoped to --liquid so the cost lands on a handful of
   surfaces, never on every glass panel at once.
   --------------------------------------------------------------- */
html.cc-refract .cc-glass--liquid {
  -webkit-backdrop-filter: url('#cc-refract') blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat));
  backdrop-filter: url('#cc-refract') blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat));
}

/* ---------------------------------------------------------------
   DEGRADATION
   Each of these must leave a designed opaque panel behind — never a
   transparent one, which would put text over live data.
   --------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-glass { background-color: var(--cc-glass-solid); }
  .cc-glass--rail, .cc-glass--dock { background-color: var(--cc-glass-solid); }
  .cc-glass--hud, .cc-glass--sheet, .cc-glass--tip { background-color: var(--cc-glass-solid-deep); }
  .cc-glass--well { background-color: var(--cc-glass-solid); }
  html:not(.cc-scrolled) .cc-glass--rail { background-color: var(--cc-glass-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  .cc-glass,
  .cc-glass--rail, .cc-glass--dock, .cc-glass--well {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--cc-glass-solid) !important;
  }
  .cc-glass--hud, .cc-glass--sheet, .cc-glass--tip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--cc-glass-solid-deep) !important;
  }
  .cc-glass::after { display: none; }
}

/* Low-end / Save-Data / small-memory devices; set by castle-glass.js. */
html.cc-no-glass .cc-glass,
html.cc-no-glass .cc-glass--rail,
html.cc-no-glass .cc-glass--dock,
html.cc-no-glass .cc-glass--well {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: var(--cc-glass-solid) !important;
}
html.cc-no-glass .cc-glass--hud,
html.cc-no-glass .cc-glass--sheet,
html.cc-no-glass .cc-glass--tip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: var(--cc-glass-solid-deep) !important;
}
html.cc-no-glass .cc-glass::after { display: none; }

/* The material is static; only the sheen is motion. Reduced motion
   keeps the glass and drops the tracking. */
@media (prefers-reduced-motion: reduce) {
  .cc-glass::after { display: none; }
  .cc-glass--rail { transition: none; }
}

/* Keyboard focus must never be softened by the material. */
.cc-glass :focus-visible {
  outline: 2px solid var(--cc-gold, #C9A74E);
  outline-offset: 2px;
}

/* =================================================================
   ADOPTION — wiring the material to the chrome that already exists
   -----------------------------------------------------------------
   These selectors are the three navigation families the app actually
   ships (theme-unification.css §7 documents why there are three), plus
   the sticky table header convention from §12. Doing it here, once,
   rather than adding a class to 40-odd templates, is the difference
   between a design system and a find-and-replace.

   !important is required and deliberate: theme-unification.css §7a
   sets the bar's background with !important, and this file loads
   after it. Equal specificity, equal importance, later file wins.

   Why this is an improvement and not a restyle: §7a already paid for
   `backdrop-filter: blur(20px)` on a background at 0.95 alpha. At 95%
   opacity nothing passes through, so the browser was compositing a
   blur that could not be seen — full cost, zero effect. Bringing the
   alpha down to 0.72 is what makes the existing blur mean something.
   ================================================================= */

.castle-navbar,
nav.navbar,
.admin-navbar {
  background: var(--cc-glass-tint-rail) !important;
  -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat)) !important;
  backdrop-filter: blur(var(--cc-glass-blur)) saturate(var(--cc-glass-sat)) !important;
  border-bottom: 1px solid var(--cc-glass-seam) !important;
  box-shadow: var(--cc-glass-shadow-rail) !important;
  transition: background-color 0.24s var(--cc-glass-ease),
              border-color 0.24s var(--cc-glass-ease),
              box-shadow 0.24s var(--cc-glass-ease);
}

/* The bevel: a lit top edge on the bar itself. All three families are
   already positioned (verified in-browser: castle-navbar and the
   marketing nav.navbar are fixed, admin-navbar is sticky), so the ::before has a
   containing block without this file forcing one — forcing it would
   risk re-laying-out a nav that was deliberately static. No
   `isolation` either: the user dropdown must still escape downward. */
.castle-navbar::before,
nav.navbar::before,
.admin-navbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cc-glass-bevel) 18%,
    var(--cc-glass-bevel-tail) 52%,
    transparent 100%
  );
  pointer-events: none;
}

/* At rest the bar is nearly flat. It gains the material — and the
   hairline, and the shadow — the moment the page scrolls under it. */
html:not(.cc-scrolled) .castle-navbar,
html:not(.cc-scrolled) nav.navbar,
html:not(.cc-scrolled) .admin-navbar {
  background: var(--cc-glass-tint-rail-top) !important;
  border-bottom-color: var(--cc-glass-rim-faint) !important;
  box-shadow: none !important;
}

/* Sticky table headers (theme-unification.css §12) join the same
   material. Retargeted at the tokens so the dock role and the sticky
   thead can never drift to two different navies again. */
.cc-table-sticky thead th {
  background: var(--cc-glass-tint-dock) !important;
  -webkit-backdrop-filter: blur(14px) saturate(var(--cc-glass-sat));
  backdrop-filter: blur(14px) saturate(var(--cc-glass-sat));
  box-shadow: 0 1px 0 var(--cc-glass-rim);
}

/* Degradation reaches the adopted chrome too — otherwise a no-blur
   browser would get a 72%-transparent nav with page text showing
   through the menu labels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .castle-navbar, nav.navbar, .admin-navbar,
  html:not(.cc-scrolled) .castle-navbar,
  html:not(.cc-scrolled) nav.navbar,
  html:not(.cc-scrolled) .admin-navbar {
    background: var(--cc-glass-solid) !important;
  }
  .cc-table-sticky thead th { background: var(--cc-glass-solid-deep) !important; }
}
html.cc-no-glass .castle-navbar,
html.cc-no-glass nav.navbar,
html.cc-no-glass .admin-navbar,
html.cc-no-glass:not(.cc-scrolled) .castle-navbar,
html.cc-no-glass:not(.cc-scrolled) nav.navbar,
html.cc-no-glass:not(.cc-scrolled) .admin-navbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--cc-glass-solid) !important;
}
html.cc-no-glass .cc-table-sticky thead th {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--cc-glass-solid-deep) !important;
}
@media (prefers-reduced-transparency: reduce) {
  .castle-navbar, nav.navbar, .admin-navbar,
  html:not(.cc-scrolled) .castle-navbar,
  html:not(.cc-scrolled) nav.navbar,
  html:not(.cc-scrolled) .admin-navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--cc-glass-solid) !important;
  }
  .cc-table-sticky thead th {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--cc-glass-solid-deep) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .castle-navbar, nav.navbar, .admin-navbar { transition: none; }
}

/* =================================================================
   CHART HUD INTERNALS — the readout built by castle-chart-glass.js
   -----------------------------------------------------------------
   One typeface, two registers. The label is muted, 500 weight, small;
   the figure is full-contrast, 600 weight, tabular. Same Montserrat —
   the separation comes from weight, colour and figure spacing, which
   is what makes a readout look engineered instead of printed.
   ================================================================= */
.cc-chart-hud {
  /* Overrides the shared HUD padding: rows carry their own rhythm. */
  padding: 0.5rem 0.625rem;
}
.cc-chart-hud__title {
  color: var(--cc-gold, #C9A74E);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.375rem;
  padding-bottom: 0.3125rem;
  border-bottom: 1px solid var(--cc-glass-rim);
  white-space: nowrap;
}
.cc-chart-hud__rows {
  display: grid;
  gap: 0.1875rem;
}
.cc-chart-hud__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}
/* A line the chart supplied as a sentence rather than a "label: value" pair
   (the allocation treemap's "$627 · 4.8% of portfolio"). It takes the full
   row and wraps; forcing nowrap on it is what pushed 263px of text out of a
   260px panel. */
.cc-chart-hud__row--full {
  display: block;
  white-space: normal;
}
/* inline, not block: a swatch (when the chart asks for one) then sits on the
   same line as the text it belongs to rather than stranded above it. */
.cc-chart-hud__row--full .cc-chart-hud__value {
  margin-left: 0;
  text-align: left;
  display: inline;
}
.cc-chart-hud__row--full .cc-chart-hud__swatch {
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: 0.05em;
}
/* .cc-delta is inline-flex for its direction glyph; inside a wrapping row it
   must not stretch to the full width or the glyph detaches from the number. */
.cc-chart-hud__row--full .cc-delta.cc-chart-hud__value {
  display: inline-flex;
  width: auto;
}
.cc-chart-hud__swatch {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: 0 0 auto;
  align-self: center;
}
.cc-chart-hud__label {
  font-family: var(--castle-font-primary, inherit);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  /* The label yields; the number is what the user came for. */
  margin-right: auto;
}
.cc-chart-hud__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  /* Figures are right-aligned to each other across rows even though
     the labels beside them are different lengths. */
  margin-left: auto;
  text-align: right;
}
.cc-chart-hud .cc-delta.cc-chart-hud__value { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cc-chart-hud { transition: none !important; }
}