/* ==========================================================================
   depth.css -- light, material and motion layer. Loaded last on every page.

   1. Lit surfaces: cards that used to carry a colored left bar now take their
      state color as light. Set --lit on the element; this file draws a 1px
      rim along the top edge (bright at the left, fading out) and a soft glow
      falling from the top-left corner. Nothing else on the card changes.
   2. Material: a faint brushed grain over the page, and a top-edge highlight
      plus contact shadow on panels so they sit above the page.
   3. Motion (subtle): interactive cards lift on hover and press on click, a
      light spot follows the pointer (depth.js adds .sf-glint), and pages
      cross-fade between navigations. All motion is off under
      prefers-reduced-motion.
   4. Section banners, nav icons and dial seals.
   ========================================================================== */

:root {
  --lit-rim: 72%;          /* strength of the top rim at its bright end */
  --lit-glow: 11%;         /* strength of the corner glow */
  --grain-opacity: .045;
  --edge-hi: rgba(255, 255, 255, .045);
  --lift-shadow: 0 10px 28px -8px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .35);
  --rest-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  --ico-line: #ffffff;
  --ico-hole: var(--panel);
}
:root[data-theme="light"] {
  --lit-rim: 80%;
  --lit-glow: 9%;
  --grain-opacity: .03;
  --edge-hi: rgba(255, 255, 255, .9);
  --lift-shadow: 0 12px 26px -10px rgba(20, 30, 45, .28), 0 2px 6px rgba(20, 30, 45, .08);
  --rest-shadow: 0 1px 2px rgba(20, 30, 45, .06);
  --ico-line: #1a2028;
}

/* ---- 1. Lit surfaces ---------------------------------------------------- */
:is(
.regime-badge,
.regime-dissent,
.regime-tooltip .rt-mech,
.rp-rec,
.tile-tooltip,
.tile-tooltip .tt-context,
.tr-cards-col .tr-regime-block,
.tr-regime-block,
.sbc-note,
.tr-summary,
.sbc-takeaway,
.ai-stub-meta,
.ai-hub-card-pillar,
.ai-hub-card-name,
.ai-takeaway,
.ai-chart-action,
.sf-menu-link,
.sf-search-hit,
.sf-dial,
.rp-noedge,
.cs-score-dial,
.cycle-section-synthesis,
.cycle-tile,
.cycle-tile-ok,
.cycle-tile-caution,
.cycle-tile-warn,
.cycle-note-ok,
.cycle-note-caution,
.cycle-note-warn,
.cycle-synthesis-para,
.card[data-cat="growth"],
.card[data-cat="inflation"],
.card[data-cat="consumer"],
.card[data-cat="housing"],
.gauge-tier,
.signal-tile,
.method-caveat,
.metric-tooltip .mt-section.mt-sowhat,
.md-notes,
.scenario-bar,
.thesis,
.thesis-box,
[data-theme="light"] .thesis-box,
.sec-banner,
.subject-rationale,
.meth-pt,
.stale-note,
.opt-card,
.doe-cell,
.note,
.composite-strip,
.composite-strip .why,
.download-zone .hero,
.cal-strip,
.watch-band,
.watch-card.watch-risk,
.watch-card.watch-opportunity,
.watch-card.watch-watch,
.env-action,
.env-action-oppty,
.insight-card.insight-risk,
.insight-card.insight-opportunity,
.insight-card.insight-watch,
.drill-insight.insight-risk,
.drill-insight.insight-opportunity,
.drill-insight.insight-watch,
.data-health-warn,
.pe-card,
.tri-card
) {
  background-image:
    linear-gradient(90deg, color-mix(in oklab, var(--lit, transparent) var(--lit-rim), transparent), transparent 72%),
    radial-gradient(130% 110% at 0 0, color-mix(in oklab, var(--lit, transparent) var(--lit-glow), transparent), transparent 58%) !important;
  background-size: 100% 1px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 0 0 !important;
}
.pe-card, .tri-card { border-left-width: 1px; }
/* Nested blocks without a frame of their own: corner glow only, no rim. */
:is(.cs-score-dial, .cycle-synthesis-para, .composite-strip .why, .tile-tooltip .tt-context,
    .regime-tooltip .rt-mech, .metric-tooltip .mt-section.mt-sowhat, .sf-menu-link, .sf-search-hit) {
  background-size: 0 0, 100% 100% !important;
}

/* ---- 2. Material ------------------------------------------------------ */
html::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  background: url("/lib/img/grain.webp") repeat;
  background-size: 128px 128px;
  opacity: var(--grain-opacity);
}
:is(.sf-card, .sf-dial, .card, .panel, section.panel, .cycle-tile, .tile, .kpi, .opt-card, .watch-card, .insight-card, .pe-card, .tri-card, .signal-tile, .gauge-tier, .thesis-box) {
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--rest-shadow);
}

/* ---- 3. Motion -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :is(a.sf-dial, a.sf-card, a.card, a[class*="-card"], a[class*="card-"], a[class*="-tile"], .sf-hub a, .home-btn) {
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color var(--t-fast);
    will-change: transform;
  }
  :is(a.sf-dial, a.sf-card, a.card, a[class*="-card"], a[class*="card-"], a[class*="-tile"]):hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--edge-hi), var(--lift-shadow);
  }
  :is(a.sf-dial, a.sf-card, a.card, a[class*="-card"], a[class*="card-"], a[class*="-tile"], .home-btn):active {
    transform: translateY(0) scale(.992);
    box-shadow: inset 0 1px 0 var(--edge-hi), var(--rest-shadow);
    transition-duration: .06s;
  }
  .home-btn:hover { transform: translateY(-1px); }

  /* pointer light (element injected by depth.js) */
  .sf-glint {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 65%);
    opacity: 0;
    transition: opacity .25s var(--ease-out);
    z-index: 0;
  }
  :root[data-theme="light"] .sf-glint { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), transparent 65%); mix-blend-mode: soft-light; }
  .sf-glint-on > .sf-glint { opacity: 1; }

  /* cross-document page transitions (Chrome/Edge 126+, Safari 18.2+; others ignore) */
  @view-transition { navigation: auto; }
  .sf-top { view-transition-name: sf-top; }
  .sf-nav { view-transition-name: sf-nav; }
  ::view-transition-old(root) { animation: sf-out .12s ease-in both; }
  ::view-transition-new(root) { animation: sf-in .26s var(--ease-out) both; }
  @keyframes sf-out { to { opacity: 0; } }
  @keyframes sf-in { from { opacity: 0; transform: translateY(6px); } }

  .sf-banner { animation: sf-banner-in .9s var(--ease-out) both; }
  @keyframes sf-banner-in { from { opacity: 0; transform: translateX(12px); } }
}

/* ---- 4a. Section banners ------------------------------------------------ */
main.sf-banner-host { position: relative; isolation: isolate; }
.sf-banner {
  position: absolute;
  right: 24px;
  height: 176px; width: auto;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
          mask-image: linear-gradient(to left, #000 55%, transparent);
}
:root[data-theme="light"] .sf-banner { opacity: .92; }
@media (max-width: 1180px) { .sf-banner { display: none; } }

/* ---- 4c. Icons ---------------------------------------------------------- */
.sf-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; --ico-fill: var(--muted); --ico-w: 1.3; flex: none; }
.sf-nav-tab.active .sf-ico, .sf-nav-tab:hover .sf-ico { --ico-fill: var(--accent); }
.sf-dial-top { align-items: center; }
.sf-dial-tr { display: inline-flex; align-items: center; gap: 8px; }
.sf-seal { width: 22px; height: 22px; flex: none; --ico-fill: var(--dial, var(--muted)); --ico-w: 1.15; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }