/*
 * SILONIN content surface policy v1.0
 * - Content and media surfaces use the header's compact 4px radius.
 * - Light and dark surfaces use one restrained matte material.
 * - Buttons, fields, filters, tabs, selectors and circular diagrams are excluded.
 */

:root {
  --surface-radius: 4px;
  --surface-panel-blur: 24px;
  --surface-panel-light:
    linear-gradient(135deg, rgba(255, 253, 248, .70), rgba(239, 231, 218, .40));
  --surface-panel-dark:
    linear-gradient(135deg, rgba(34, 30, 24, .74), rgba(13, 11, 9, .50));
  --surface-panel-gold:
    linear-gradient(135deg, rgba(244, 208, 63, .86), rgba(190, 137, 13, .72));
  --surface-panel-line-light: rgba(255, 255, 255, .72);
  --surface-panel-line-dark: rgba(255, 255, 255, .22);
  --surface-panel-line-gold: rgba(255, 245, 188, .70);
  --surface-panel-shadow-light:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -1px 0 rgba(27, 24, 20, .05),
    0 18px 46px rgba(27, 24, 20, .10);
  --surface-panel-shadow-dark:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 18px 46px rgba(0, 0, 0, .16);
  --v4-content-radius: var(--surface-radius);
  --v4-glass-blur: var(--surface-panel-blur);
}

/* All informational surfaces. Interactive controls are intentionally absent. */
:is(
  .v4-task__result,
  .v4-glass-card,
  .v4-metric,
  .v4-route,
  .v4-fractional,
  .v4-form,
  .form-notification,
  .av4-hero__portrait figcaption,
  .av4-dark-card,
  .av4-story__media-count,
  .av4-system,
  .av4-system div,
  .av4-delivery__path article,
  .av4-principles article,
  .av4-next__card,
  .casev3-proof,
  .casev3-overview__summary,
  .casev3-quote,
  .casev3-mechanics,
  .casev3-mechanics__flow li,
  .casev3-mechanics__handoff,
  .casev3-results article,
  .cv4-case,
  .cv4-case__facts span,
  .cv4-evidence__note,
  .cv4-direct a,
  .cv4-channel,
  .cv4-route,
  .dv4-card,
  .dv4-card__meta span,
  .dv4-spotlight__body,
  .dv4-fractional__number,
  .dv4-hero__meta,
  .dv4-entry,
  .dv4-human-visual__caption,
  .sv4-solution,
  .sv4-empty,
  .sv4-deployment__start,
  .sv4-deployment__routes article,
  .sv4-deployment__systems span,
  .sv4-readiness li,
  .ev4-direction,
  .ev4-system-map__side,
  .ev4-system-map__bridge,
  .ev4-maturity__facts li,
  .ev4-maturity__workspace,
  .ev4-profile,
  .ev4-gap,
  .ev4-result__pains li,
  .ev4-level-guide,
  .legal-v4-page .toc,
  .legal-v4-page .doc .operator-card,
  .pv4-hero .dv4-hero__copy,
  .pv4-architecture__workspace,
  .pv4-system-map,
  .pv4-system-map__sources span,
  .pv4-system-map__controls span,
  .pv4-layer-detail,
  .pv4-deploy,
  .productv4-hero__chips span,
  .productv4-hero__system,
  .productv4-hero__system li,
  .productv4-format span,
  .productv4-delivery article,
  .productv4-case
) {
  border-radius:2px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Light material. */
:is(
  .v4-glass-card,
  .v4-fractional,
  .av4-delivery__path article,
  .av4-next__card,
  .casev3-overview__summary,
  .casev3-quote,
  .casev3-mechanics,
  .casev3-mechanics__flow li,
  .casev3-mechanics__handoff,
  .casev3-results article,
  .cv4-case,
  .cv4-case__facts span,
  .cv4-channel,
  .dv4-card,
  .dv4-entry,
  .sv4-solution,
  .sv4-empty,
  .sv4-deployment__routes article,
  .sv4-deployment__systems span,
  .ev4-direction,
  .ev4-maturity__facts li,
  .ev4-maturity__workspace,
  .ev4-gap,
  .ev4-result__pains li,
  .ev4-level-guide,
  .pv4-deploy,
  .productv4-format span,
  .productv4-case
) {
  border-color: var(--surface-panel-line-light);
  background: var(--surface-panel-light);
  box-shadow:none;
}

.legal-v4-page :is(.toc, .doc .operator-card) {
  border-color: var(--surface-panel-line-light);
  background: var(--surface-panel-light);
  box-shadow:none;
}

/* Dark material. */
:is(
  .v4-task__result,
  .v4-metric,
  .v4-route,
  .v4-form,
  .av4-hero__portrait figcaption,
  .av4-dark-card,
  .av4-story__media-count,
  .av4-system,
  .av4-system div,
  .av4-principles article,
  .casev3-proof,
  .cv4-direct a,
  .cv4-evidence__note,
  .cv4-route,
  .dv4-spotlight__body,
  .dv4-fractional__number,
  .dv4-hero__meta,
  .dv4-human-visual__caption,
  .sv4-deployment__start,
  .sv4-readiness li,
  .ev4-system-map__side,
  .ev4-profile,
  .pv4-hero .dv4-hero__copy,
  .pv4-architecture__workspace,
  .pv4-system-map,
  .pv4-system-map__sources span,
  .pv4-system-map__controls span,
  .pv4-layer-detail,
  .pv4-deployment .pv4-deploy,
  .productv4-hero__chips span,
  .productv4-hero__system,
  .productv4-hero__system li,
  .productv4-delivery article
) {
  border-color: var(--surface-panel-line-dark);
  background: var(--surface-panel-dark);
  box-shadow:none;
}

/* The consultation-route cards are a deliberate light matte variant. */
.v4-routes .v4-route {
  color: #1f1b16;
  border-color: rgba(255, 255, 255, .78);
  background: none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/*
 * Semantic variants must come after the broad material groups.
 * Their explicit selectors preserve the original text theme and prevent
 * a light/dark inversion when a base card also has a modifier class.
 */
.ev4-direction.ev4-direction--dark,
.cv4-evidence__note {
  border-color: var(--surface-panel-line-dark);
  background: var(--surface-panel-dark);
  box-shadow:none;
}

.ev4-system-map__bridge {
  border-color: var(--surface-panel-line-gold);
  background: var(--surface-panel-gold);
  box-shadow:none;
}

.pv4-operation--light .dv4-spotlight__body {
  border-color: var(--surface-panel-line-light);
  background: var(--surface-panel-light);
  box-shadow:none;
}

.pv4-final--light .v4-form {
  border-color: var(--surface-panel-line-light);
  background: var(--surface-panel-light);
  box-shadow:none;
}

/* Gold remains an accent on light glass, but small labels need a darker tone. */
:is(
  .av4-next__card,
  .casev3-overview__summary,
  .legal-v4-page .toc
) :is(.v4-kicker, .n),
.av4-next__card > span,
.ev4-maturity__workspace > .ev4-quiz .v4-kicker,
.sv4-deployment__route-head > b {
  color: #805b00;
}

.ev4-profile {
  border-radius:2px;
}

/* Media surfaces get compact geometry and a subtle glass edge treatment. */
:is(
  .v4-case-media,
  .av4-story__media,
  .av4-story__media figure,
  .dv4-human-visual
) {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .60);
  border-radius:2px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.v4-case-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius:2px;
  background: none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ev4-profile {
    border-radius:2px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(
    .v4-glass-card,
    .v4-fractional,
    .av4-delivery__path article,
    .av4-next__card,
    .casev3-overview__summary,
    .casev3-quote,
    .casev3-mechanics,
    .casev3-results article,
    .cv4-case,
    .cv4-channel,
    .dv4-card,
    .dv4-entry,
    .sv4-solution,
    .ev4-direction,
    .ev4-maturity__workspace,
    .pv4-deploy,
    .productv4-case
  ) {
    background: rgba(247, 242, 234, .96);
  }

  .legal-v4-page :is(.toc, .doc .operator-card) {
    background: rgba(247, 242, 234, .96);
  }

  :is(
    .v4-task__result,
    .v4-metric,
    .v4-route,
    .v4-form,
    .av4-dark-card,
    .av4-system,
    .casev3-proof,
    .cv4-direct a,
    .cv4-evidence__note,
    .cv4-route,
    .dv4-spotlight__body,
    .dv4-hero__meta,
    .sv4-deployment__start,
    .sv4-readiness li,
    .ev4-system-map__side,
    .ev4-direction.ev4-direction--dark,
    .ev4-profile,
    .pv4-hero .dv4-hero__copy,
    .pv4-architecture__workspace,
    .pv4-system-map,
    .pv4-layer-detail,
    .pv4-deployment .pv4-deploy,
    .productv4-hero__system,
    .productv4-delivery article
  ) {
    background: rgba(20, 17, 13, .95);
  }

  .ev4-system-map__bridge {
    background: rgb(218, 165, 32);
  }

  .pv4-final--light .v4-form {
    background: rgba(247, 242, 234, .96);
  }
}