/*
V7-HEADER
Title:     Viridians Trigger Detail — Page Styles
Filename:  viridians-trigger-detail.css
Path:      /assets/css/viridians/viridians-trigger-detail.css
Version:   v1.0.11
Issued:    2026-04-08
Author:    Buktika Webdesk (Binka)
Purpose:   Page-level styles for viridians-trigger-detail.html (Viridians Page 3).
           Declares all page CSS custom properties. Sets the body background.
           Section surfaces, padding, shadow, border-radius: global.css only.
           Card surfaces, grid, hover: global.css .card / .cards only.
           Buttons: global.css .sdx-btn-primary / .sdx-btn-secondary only.
           This file only adds: per-pillar border-left overrides, per-pillar
           button gradient overrides, card-top icon row, identity reveal bleed,
           video wrapper, and proof-pill transcript preview.
           No vtr-* classes exist in this file or in the HTML.
Body class: page-viridians-trigger-detail
License:   © Buktika, 2026. All rights reserved.
Changelog:
  v1.0.11 (2026-06-23): Added margin-top to .video-wrapper (Executive Briefing)
           so the video block no longer sits flush against the section-title
           underline (the h2 has margin:0).
  v1.0.10 (2026-06-23): FIXED identity-reveal not scaling on mobile. The
           max-width:48rem block kept .identity-reveal-frames as a flex row
           (image 42.5% + text 42.5%), so the text column was too narrow — the
           "You are a Viridian" title overflowed and the image ate half the
           width. Now stacks vertically: edges hidden, image a full-width 15rem
           banner, text full width.
  v1.0.8 (2026-05-21): Added actual Viridians briefing thumbnail/player state
           for trigger-detail video modules once media sources are resolved.
  v1.0.7 (2026-04-08): REMOVED .card-failure CSS block entirely. It applied amber
           border-color (all four sides, overriding the page-wide purple border-left)
           and amber background tint — invented behaviour with no spec basis. Cards
           are uniform: purple border-left, var(--card) background, global.css only.
           page-primary (purple-deep) for all cards on this page.
           FIXED .identity-reveal background: was var(--page-dark-base) = #0f0d14
           near-black (reads as footer). Changed to var(--page-primary) =
           var(--sdx-color-purple-deep) = #4b2a56 — Deep Viridian per BKT 56080 §5.4.
  v1.0.5 (2026-04-08): Full rebuild — zero vtr-* selectors. All section structure,
           card surfaces, grids, and buttons use only global.css canonical classes.
           Page CSS reduced to: token binding, page surface, per-pillar overrides,
           identity reveal bleed, video wrapper, and dark mode adjustments.
  v1.0.4 (2026-04-08): Identity reveal moved outside .container (owner instruction).
           Removed breakout margin/width hack. Rebuilt pillar cards to audience-card
           pattern. Removed sdx-card-section > h2 workaround.
  v1.0.3 (2026-04-08): Removed all vtr-* section-level selectors. sdx-card-section
           now provides all section padding via global.css. Font-size tokens applied.
  v1.0.2 (2026-04-08): FIXED identity-reveal-ceremony — Deep Viridian background,
           CSS breakout pattern, white text, dark mode override.
*/

/* 0) Header and dependency notes */

/*
  Depends on: /assets/css/global.css, /assets/css/themes.css.
  Load order: this file before viridians-trigger-detail-hero.css so all
  --page-* and --hero-* tokens are available to the hero partial CSS.
  This file owns all base surface rules for .page-viridians-trigger-detail.
*/

/* 1) Page variable binding */

.page-viridians-trigger-detail {
  --page-bg:            var(--sdx-color-viridians-bg);
  --page-primary:       var(--sdx-color-purple-deep);
  --page-secondary:     var(--sdx-color-teal-deep);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-viridians-dark-base);
  --page-dark-surface:  var(--sdx-color-viridians-dark-surface);
  --hero-surface:       var(--sdx-color-viridians-dark-base);
  --hero-card-border:   color-mix(
                          in srgb,
                          var(--sdx-color-livingtower-warm-sand) 38%,
                          transparent
                        );
  --hero-card-text:     var(--sdx-color-white);
  --hero-image:         url('/assets/images/viridians/viridian-map-galaxy.webp');
  --hero-vignette-from: color-mix(in srgb, var(--page-primary) 28%, transparent);
  --hero-vignette-to:   color-mix(in srgb, var(--page-secondary) 10%, transparent);

  /* SDXJurisdictionDisplay tokens */
  --sdx-jd-eco-color:          var(--sdx-color-green-deep);
  --sdx-jd-human-color:        var(--sdx-color-mama-violet);
  --sdx-jd-fill-eco-color:     color-mix(in srgb, var(--sdx-color-green-deep) 72%, white);
  --sdx-jd-fill-human-color:   color-mix(in srgb, var(--sdx-color-mama-violet) 78%, white);
  --sdx-jd-border-eco-color:   color-mix(in srgb, var(--sdx-color-green-deep) 82%, white);
  --sdx-jd-border-human-color: color-mix(in srgb, var(--sdx-color-mama-violet) 86%, white);
  --sdx-jd-keyline-color:      color-mix(
                                  in srgb,
                                  var(--sdx-color-white) 86%,
                                  var(--page-primary) 14%
                                );
  --sdx-jd-fill-opacity:       0.26;
  --sdx-jd-border-width:       2px;
  --sdx-jd-keyline-width:      1.1px;
}

/* 2) Base page surfaces */

.page-viridians-trigger-detail {
  background-color: var(--page-bg);
  color: var(--fg);
}

/* 3) Hero */

/* none — owned by viridians-trigger-detail-hero.css */

/* 4) Typography overrides */

/* none */

/* 5) Sections and alternation */

/* none — sdx-card-section padding, background, shadow, and border-radius
   are owned entirely by global.css. No section-level overrides. */

/* 6) Cards and tiles */

/* Override global .card border-left from var(--page-accent) (amber) to
   page-primary (purple-deep) for all cards on this page. */
.page-viridians-trigger-detail .card {
  border-left-color: var(--page-primary);
}

.page-viridians-trigger-detail #conflict .cards {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: start;
  gap: 4rem;
}

.page-viridians-trigger-detail #conflict {
  position: relative;
  z-index: 0;
  width: min(100vw - 3rem, 88rem);
  max-width: none;
  margin: 0 auto 2rem;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  background: var(--card);
}

.page-viridians-trigger-detail #conflict::before {
  content: "";
  position: absolute;
  top: -15rem;
  right: -12rem;
  width: 54rem;
  height: 42rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 70% 10%,
      color-mix(in srgb, var(--page-accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--page-accent) 8%, transparent) 14%,
      transparent 40%
    ),
    radial-gradient(ellipse at 64% 20%,
      color-mix(in srgb, var(--page-primary) 8%, transparent) 0%,
      transparent 34%
    ),
    radial-gradient(ellipse at 60% 34%,
      color-mix(in srgb, var(--page-accent) 8%, transparent) 0%,
      transparent 38%
    ),
    linear-gradient(195deg,
      color-mix(in srgb, var(--page-accent) 8%, transparent) 8%,
      color-mix(in srgb, var(--page-primary) 6%, transparent) 28%,
      transparent 62%
    );
  filter: blur(4.5rem);
  opacity: 0.44;
  pointer-events: none;
  z-index: -1;
}

.page-viridians-trigger-detail #conflict::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8rem;
  bottom: 0;
  width: 62%;
  background:
    radial-gradient(ellipse at 32% 6%,
      color-mix(in srgb, var(--page-accent) 9%, transparent) 0%,
      color-mix(in srgb, var(--page-accent) 5%, transparent) 24%,
      transparent 58%
    ),
    radial-gradient(ellipse at 58% 20%,
      color-mix(in srgb, var(--page-primary) 4%, transparent) 0%,
      transparent 56%
    );
  filter: blur(1.4rem);
  pointer-events: none;
  z-index: 0;
}

.page-viridians-trigger-detail #conflict .card-failure {
  position: relative;
  border: none;
  border-left: none;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--page-primary) 30%, var(--page-dark-base) 70%) 0%,
      color-mix(in srgb, var(--page-accent) 12%, var(--page-dark-base) 88%) 52%,
      color-mix(in srgb, var(--page-dark-base) 16%, var(--card) 84%) 100%
    );
  box-shadow:
    0 1.5rem 2.6rem color-mix(in srgb, var(--page-dark-base) 16%, transparent),
    inset 0 0.0625rem 0 color-mix(in srgb, var(--page-dark-base) 28%, transparent),
    inset 0 0.75rem 1.5rem color-mix(in srgb, var(--page-dark-base) 10%, transparent),
    inset 0 -1rem 2rem color-mix(in srgb, var(--page-dark-base) 7%, transparent);
  z-index: 1;
}

.page-viridians-trigger-detail #conflict .card-shield {
  position: relative;
  border: none;
  border-left: none;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 1.25rem 2.4rem color-mix(in srgb, var(--page-dark-base) 10%, transparent),
    inset 0 0.0625rem 0 color-mix(in srgb, var(--page-accent) 12%, transparent);
  background: color-mix(in srgb, var(--page-accent) 4%, var(--card) 96%);
  z-index: 1;
}

.page-viridians-trigger-detail #conflict .conflict-card-image {
  background: transparent;
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-card-image {
  min-height: 0;
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-card-image img {
  box-shadow: inset 0 -2rem 2.4rem color-mix(in srgb, var(--page-dark-base) 28%, transparent);
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-image {
  min-height: 0;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-image img {
  box-shadow: inset 0 -2.25rem 2.8rem color-mix(in srgb, var(--page-dark-base) 28%, transparent);
}

.page-viridians-trigger-detail #conflict .conflict-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy {
  padding: 2.25rem 2rem 2.5rem;
  background: var(--card);
}

.page-viridians-trigger-detail #conflict .conflict-card-copy--failure {
  padding: 3.15rem 2.75rem 3.1rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-dark-base) 22%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 14%, transparent) 12%,
      color-mix(in srgb, var(--page-dark-base) 52%, transparent) 36%,
      color-mix(in srgb, var(--page-dark-base) 58%, transparent) 100%
    ),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-dark-base) 24%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 10%, transparent) 22%,
      color-mix(in srgb, var(--page-dark-base) 18%, transparent) 100%
    ),
    radial-gradient(circle at 18% 22%,
      color-mix(in srgb, var(--page-accent) 4%, transparent) 0%,
      transparent 20%
    ),
    radial-gradient(circle at 82% 78%,
      color-mix(in srgb, var(--page-primary) 5%, transparent) 0%,
      transparent 24%
    ),
    linear-gradient(115deg,
      transparent 0%,
      color-mix(in srgb, var(--page-accent) 4%, transparent) 16%,
      transparent 31%,
      color-mix(in srgb, var(--page-primary) 5%, transparent) 48%,
      transparent 64%,
      color-mix(in srgb, var(--page-dark-base) 5%, transparent) 100%
    ),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-dark-base) 10%, transparent) 0%,
      transparent 14%
    ),
    url('/assets/images/viridians/viridians-trigger-detail-conflict-left-bg.webp'),
    color-mix(in srgb, var(--page-primary) 8%, var(--card) 92%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in srgb, var(--page-dark-base) 10%, transparent),
    inset 0 1rem 1.25rem color-mix(in srgb, var(--page-dark-base) 5%, transparent),
    inset 0 0.75rem 1rem color-mix(in srgb, var(--page-dark-base) 12%, transparent);
}

.page-viridians-trigger-detail #conflict .conflict-card-copy--shield {
  position: relative;
  margin-top: -1.6rem;
  padding: 3.3rem 2.4rem 2.6rem;
  background:
    radial-gradient(ellipse at 28% 22%,
      color-mix(in srgb, var(--sdx-color-white) 12%, transparent) 0%,
      color-mix(in srgb, var(--page-accent) 14%, transparent) 16%,
      color-mix(in srgb, var(--page-accent) 8%, transparent) 30%,
      transparent 52%
    ),
    linear-gradient(90deg,
      color-mix(in srgb, var(--page-dark-base) 54%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 36%, transparent) 38%,
      color-mix(in srgb, var(--page-dark-base) 22%, transparent) 68%,
      color-mix(in srgb, var(--page-dark-base) 34%, transparent) 100%
    ),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-dark-base) 22%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 12%, transparent) 16%,
      color-mix(in srgb, var(--page-dark-base) 34%, transparent) 100%
    ),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-accent) 12%, transparent) 0%,
      transparent 20%
    ),
    radial-gradient(circle at 42% 18%,
      color-mix(in srgb, var(--page-accent) 14%, transparent) 0%,
      transparent 24%
    ),
    url('/assets/images/viridians/viridians-trigger-detail-conflict-right-bg.webp'),
    color-mix(in srgb, var(--page-accent) 4%, var(--card) 96%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    0 -1rem 1.75rem color-mix(in srgb, var(--page-dark-base) 16%, transparent),
    inset 0 1.75rem 2.1rem color-mix(in srgb, var(--page-dark-base) 12%, transparent),
    inset 0 0.0625rem 0 color-mix(in srgb, var(--page-accent) 12%, transparent);
}

.page-viridians-trigger-detail #conflict .conflict-card-copy--shield::before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 1.6rem;
  width: 70%;
  height: 58%;
  background:
    radial-gradient(ellipse at 24% 20%,
      color-mix(in srgb, var(--sdx-color-white) 10%, transparent) 0%,
      color-mix(in srgb, var(--page-accent) 9%, transparent) 22%,
      transparent 62%
    );
  filter: blur(1.1rem);
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy--shield::after {
  content: "";
  position: absolute;
  top: -1.8rem;
  left: 0;
  right: 0;
  height: 3.2rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-accent) 16%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 18%, transparent) 42%,
      transparent 100%
    );
  filter: blur(0.9rem);
  pointer-events: none;
  z-index: 0;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-image {
  position: relative;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 4rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-accent) 10%, transparent) 0%,
      color-mix(in srgb, var(--page-dark-base) 16%, transparent) 45%,
      transparent 100%
    );
  filter: blur(0.85rem);
  pointer-events: none;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy h3 {
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--fg);
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-card-copy h3 {
  margin-bottom: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sdx-color-white);
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-copy h3 {
  position: relative;
  margin-bottom: 1.4rem;
  font-size: 2.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--sdx-color-white);
  text-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--page-dark-base) 36%, transparent);
  z-index: 1;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy p {
  max-width: 44rem;
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  color: var(--fg);
  line-height: 1.72;
  text-align: left;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy p:last-child {
  margin-bottom: 0;
}

.page-viridians-trigger-detail #conflict .conflict-punch {
  font-weight: 600;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-copy p {
  position: relative;
  max-width: 20rem;
  color: color-mix(in srgb, var(--sdx-color-white) 94%, var(--page-accent) 6%);
  line-height: 1.78;
  margin-bottom: 1.6rem;
  text-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--page-dark-base) 26%, transparent);
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-copy h3 {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}

.page-viridians-trigger-detail #conflict .card-shield .conflict-card-copy p:first-of-type {
  font-weight: 600;
}

.page-viridians-trigger-detail #conflict .conflict-card-copy--shield {
  padding-left: 3rem;
  padding-right: 3rem;
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-card-copy p {
  max-width: 34rem;
  color: var(--sdx-color-white);
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-punch {
  margin-top: 1.35rem;
  margin-bottom: 1.75rem;
  font-size: 1.125rem;
  line-height: 1.88;
  text-wrap: balance;
}

.page-viridians-trigger-detail #conflict .card-failure .conflict-punch:last-child {
  margin-bottom: 0;
}

/* Foundation pillar cards: flex column so sdx-btn-primary pins to bottom */
.page-viridians-trigger-detail #foundation .card {
  display: flex;
  flex-direction: column;
}

.page-viridians-trigger-detail #foundation .card p {
  flex: 1;
  margin-bottom: 1.5rem;
}

/* Icon + heading row inside foundation cards */
.page-viridians-trigger-detail .card-top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

/* Icon: 4.6875rem canonical per contact.css / reporters.css */
.page-viridians-trigger-detail .card-icon {
  width: 4.6875rem;
  height: 4.6875rem;
  flex-shrink: 0;
}

/* Per-pillar border-left overrides — navigational colour coding per _support-template §7 */
.page-viridians-trigger-detail .card-eco  { border-left-color: var(--sdx-color-green-deep); }
.page-viridians-trigger-detail .card-mama { border-left-color: var(--sdx-color-purple-deep); }
.page-viridians-trigger-detail .card-edu  { border-left-color: var(--sdx-color-teal-deep); }

/* 7) Buttons and CTAs */

/* Per-pillar sdx-btn-primary gradient overrides.
   Base .sdx-btn-primary geometry (padding, radius, font, transition) from global.css.
   DOC-03 §5.1: dark stop present on all three — white text mandatory. */
.page-viridians-trigger-detail .btn-eco {
  background: linear-gradient(135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-stem-olive) 100%);
  color: var(--sdx-color-white);
}

.page-viridians-trigger-detail .btn-mama {
  background: linear-gradient(145deg, var(--sdx-color-purple-deep) 0%, var(--sdx-color-teal-deep) 100%);
  color: var(--sdx-color-white);
}

.page-viridians-trigger-detail .btn-edu {
  background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--sdx-color-stem-olive) 100%);
  color: var(--sdx-color-white);
}

/* 8) Page modules */

/* Video stage wrapper */
.page-viridians-trigger-detail .video-wrapper {
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--page-primary) 8%, var(--card));
  border: 1.5px dashed color-mix(in srgb, var(--page-primary) 38%, var(--border) 62%);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Breathing room below the section-title underline (h2 has margin:0) */
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.page-viridians-trigger-detail .video-wrapper.is-video-ready {
  background: var(--sdx-color-black);
  border-style: solid;
  border-color: color-mix(in srgb, var(--page-primary) 26%, var(--border) 74%);
}

.page-viridians-trigger-detail #briefing-player,
.page-viridians-trigger-detail #vtr-briefing-player {
  width: 100%;
  height: 100%;
}

.page-viridians-trigger-detail .vtr-video-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
  background: var(--sdx-color-black);
}

.page-viridians-trigger-detail .vtr-video-thumb-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.page-viridians-trigger-detail .vtr-video-thumb-overlay {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: calc(var(--radius) * 0.75);
  background: color-mix(in srgb, var(--sdx-color-black) 74%, transparent);
  color: var(--sdx-color-white);
}

.page-viridians-trigger-detail .vtr-video-thumb-label {
  font-size: var(--small);
  font-weight: 700;
  line-height: 1.35;
}

.page-viridians-trigger-detail .vtr-video-thumb-play {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 999rem;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--page-primary) 72%, var(--sdx-color-black) 28%);
  font-size: 1.2rem;
}

.page-viridians-trigger-detail .vtr-video-placeholder-inner {
  max-width: 42rem;
  padding: 1.5rem;
}

/* Transcript preview — proof pill per DOC-03 §16 light surface spec */
.page-viridians-trigger-detail .video-transcript-preview {
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: rgba(120, 113, 108, 0.08);
  border: 1px solid rgba(120, 113, 108, 0.18);
}

.page-viridians-trigger-detail .video-transcript-preview p {
  margin: 0;
}

.page-viridians-trigger-detail .video-transcript-preview p + p,
.page-viridians-trigger-detail .video-transcript-preview ul + p {
  margin-top: 0.75rem;
}

.page-viridians-trigger-detail .video-transcript-preview ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.page-viridians-trigger-detail .video-transcript-preview li + li {
  margin-top: 0.5rem;
}

.page-viridians-trigger-detail .video-summary-heading,
.page-viridians-trigger-detail .video-summary-closing {
  color: var(--fg);
}

/* Identity reveal — BKT 56080:2026 §5.4 / §7.5
   Full-width Deep Viridian bleed. Outside .container per owner instruction.
   SPEC AMENDMENT PENDING — www-A §4.7 to list .identity-reveal as a
   permitted full-bleed class (section element, direct child of <main>,
   outside .container, Viridians trigger-detail page only). */
.page-viridians-trigger-detail .identity-reveal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--page-dark-base);
  width: 100%;
  padding: 0;
  box-shadow:
    0 0.5rem 1.125rem rgba(0, 0, 0, 0.55),
    0 1.125rem 3rem rgba(0, 0, 0, 0.38),
    0 0.125rem 0.25rem rgba(0, 0, 0, 0.7);
}

.page-viridians-trigger-detail .identity-reveal-rail {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--page-dark-base) 98%, var(--page-primary) 2%);
  padding: 0.4rem 0 0;
  overflow: hidden;
}

.page-viridians-trigger-detail .identity-reveal-sprockets {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.8rem;
  overflow: hidden;
  height: 3.8rem;
}

.page-viridians-trigger-detail .identity-reveal-sprocket {
  flex-shrink: 0;
  width: 2.2rem;
  height: 3.2rem;
  border-radius: 0.35rem;
  background: rgba(255, 238, 233, 0.63);
  border: 0.09375rem solid color-mix(in srgb, var(--page-accent) 18%, var(--page-dark-base) 82%);
  box-shadow:
    inset 0 0.375rem 0.25rem rgba(0, 0, 0, 0.9),
    inset 0 0.25rem 1.25rem rgba(0, 0, 0, 0.7),
    0 0 0 0.125rem color-mix(in srgb, var(--page-dark-base) 94%, transparent);
  margin: 0 1.55rem;
}

.page-viridians-trigger-detail .identity-reveal-rail-text {
  height: 1.1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 1rem;
}

.page-viridians-trigger-detail .identity-reveal-rail-text span {
  display: block;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: rgba(245, 176, 20, 0.6);
  user-select: none;
  pointer-events: none;
}

.page-viridians-trigger-detail .identity-reveal-rail--bottom .identity-reveal-rail-text span {
  color: rgba(245, 176, 20, 0.45);
}

.page-viridians-trigger-detail .identity-reveal-frames {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3rem;
  background: transparent;
}

.page-viridians-trigger-detail .identity-reveal-frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.page-viridians-trigger-detail .identity-reveal-frame--edge-lh {
  flex: 0 0 7%;
  background:
    linear-gradient(to left, rgba(12, 9, 5, 0) 0%, rgba(12, 9, 5, 0.92) 100%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--page-accent) 42%, var(--page-dark-base) 58%) 0%,
      color-mix(in srgb, var(--page-primary) 30%, var(--page-dark-base) 70%) 50%,
      var(--page-dark-base) 100%
    );
}

.page-viridians-trigger-detail .identity-reveal-frame--edge-rh {
  flex: 0 0 7%;
  background:
    linear-gradient(to right, rgba(12, 9, 5, 0) 0%, rgba(12, 9, 5, 0.92) 100%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--page-secondary) 28%, var(--page-dark-base) 72%) 0%,
      color-mix(in srgb, var(--page-primary) 24%, var(--page-dark-base) 76%) 50%,
      var(--page-dark-base) 100%
    );
}

.page-viridians-trigger-detail .identity-reveal-frame--image {
  flex: 0 0 39.5%;
  min-height: 43rem;
  margin: 0;
}

.page-viridians-trigger-detail .identity-reveal-frame--image img {
  width: 100%;
  height: 100%;
  min-height: 43rem;
  display: block;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02) brightness(0.9);
}

.page-viridians-trigger-detail .identity-reveal-frame--text {
  flex: 0 0 39.5%;
  min-height: 43rem;
  background:
    radial-gradient(circle at top left,
      color-mix(in srgb, var(--page-accent) 24%, transparent) 0%,
      color-mix(in srgb, var(--page-accent) 10%, transparent) 18%,
      transparent 38%
    ),
    radial-gradient(circle at bottom right,
      color-mix(in srgb, var(--page-secondary) 10%, transparent) 0%,
      transparent 28%
    ),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0) 16%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.015) 0,
      rgba(255, 255, 255, 0.015) 0.125rem,
      rgba(0, 0, 0, 0.015) 0.125rem,
      rgba(0, 0, 0, 0.015) 0.25rem
    ),
    linear-gradient(145deg,
      color-mix(in srgb, var(--page-accent) 14%, var(--page-dark-base) 86%) 0%,
      color-mix(in srgb, var(--page-primary) 40%, var(--page-dark-base) 60%) 38%,
      color-mix(in srgb, var(--page-dark-base) 88%, var(--page-primary) 12%) 100%
    );
  display: flex;
  align-items: center;
}

.page-viridians-trigger-detail .identity-reveal-copy {
  padding: 3rem 3rem 3rem 0rem;
  max-width: 42rem;
  margin-left: auto;
}

.page-viridians-trigger-detail .identity-reveal-title {
  margin: 0 0 2rem;
  color: color-mix(in srgb, var(--sdx-color-white) 88%, var(--page-accent) 12%);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-viridians-trigger-detail .identity-reveal-copy p {
  margin: 0;
  font-size: var(--lead);
  line-height: 1.65;
  /* White text on Deep Viridian surface — permanent exception per DOC-02 */
  color: color-mix(in srgb, var(--sdx-color-white) 94%, var(--page-accent) 6%);
}

.page-viridians-trigger-detail .identity-reveal-copy p + p {
  margin-top: 1.25rem;
}

.page-viridians-trigger-detail .identity-reveal-highlight {
  font-size: 1.35rem;
  line-height: 1.5;
  margin: 2rem 0;
}

.page-viridians-trigger-detail .identity-reveal-copy strong {
  color: var(--page-accent); /* Amber on deep Viridian surface */
  font-weight: 700;
}

.page-viridians-trigger-detail .sdx-cta-band {
  margin-top: 4rem;
}

/* 9) Media queries */

@media (max-width: 48rem) {
  .page-viridians-trigger-detail #conflict {
    width: auto;
    max-width: 100%;
    margin: 0 auto 1.25rem;
    left: auto;
    transform: none;
    background: var(--card);
  }

  .page-viridians-trigger-detail #conflict::before {
    top: -6rem;
    right: -4rem;
    width: 19rem;
    height: 16rem;
    opacity: 0.28;
    filter: blur(1.75rem);
  }

  .page-viridians-trigger-detail #conflict::after {
    right: -2rem;
    width: 66%;
  }

  .page-viridians-trigger-detail #conflict .cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-copy--shield {
    margin-top: 0;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-image {
    min-height: 0;
  }

  .page-viridians-trigger-detail #conflict .card-shield .conflict-card-image {
    min-height: 0;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-copy {
    padding: 1.75rem 1.5rem 2rem;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-copy--failure,
  .page-viridians-trigger-detail #conflict .conflict-card-copy--shield {
    padding: 1.75rem 1.5rem 2rem;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-copy h3 {
    font-size: 1.625rem;
  }

  .page-viridians-trigger-detail #conflict .conflict-card-copy p {
    font-size: 1rem;
    line-height: 1.65;
  }

  .page-viridians-trigger-detail #foundation .cards {
    grid-template-columns: 1fr;
  }

  .page-viridians-trigger-detail .identity-reveal {
    padding: 0;
  }

  .page-viridians-trigger-detail .identity-reveal-sprockets {
    padding: 0 0.75rem;
    height: 2.6rem;
  }

  .page-viridians-trigger-detail .identity-reveal-sprocket {
    width: 1.6rem;
    height: 2.2rem;
    margin: 0 0.9rem;
  }

  /* Stack the film-strip frames vertically; the row layout left the text
     column too narrow (title overflow, image eating half the width). */
  .page-viridians-trigger-detail .identity-reveal-frames {
    flex-direction: column;
    gap: 0;
  }

  /* Decorative left/right film edges are noise on narrow screens */
  .page-viridians-trigger-detail .identity-reveal-frame--edge-lh,
  .page-viridians-trigger-detail .identity-reveal-frame--edge-rh {
    display: none;
  }

  /* Image (banner) over text, each full width */
  .page-viridians-trigger-detail .identity-reveal-frame--image,
  .page-viridians-trigger-detail .identity-reveal-frame--text {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

  .page-viridians-trigger-detail .identity-reveal-frame--image img {
    height: 15rem;
    min-height: 0;
    max-height: none;
  }

  .page-viridians-trigger-detail .identity-reveal-copy {
    padding: 2rem 1.5rem;
    max-width: none;
    margin: 0;
  }

  .page-viridians-trigger-detail .identity-reveal-title {
    font-size: 2.1rem;
    margin-bottom: 1.25rem;
  }

  .page-viridians-trigger-detail .sdx-cta-band {
    margin-top: 2rem;
  }
}

/* 10) Dark mode */

/* Dark mode — MamaDEX pillar card.
   Purple-deep reads softly against warm dark card surface at 4px.
   Strengthen LH frame per reporters.css dark-viridians pattern. */
[data-theme="dark"] .page-viridians-trigger-detail .card-mama {
  border-left-width: 0.3125rem;
  box-shadow:
    inset 0.0625rem 0 0 rgba(from var(--sdx-color-purple-deep) r g b / 0.35),
    var(--card-shadow);
}

/* Dark mode — transcript proof pill per DOC-03 §16 dark surface spec */
[data-theme="dark"] .page-viridians-trigger-detail .video-transcript-preview {
  background: rgba(245, 176, 20, 0.07);
  border-color: rgba(245, 176, 20, 0.18);
}

/* ==========================================================================
   Legal basis panel — "Your obligation", rendered before solution content.
   Injected by viridians-trigger-detail.js renderLegalBasis() for triggers
   carrying a verified legal_basis[] (e.g. Singapore vtr-sg-01/02).
   ========================================================================== */
.vtr-legal-basis {
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.vtr-legal-basis-inner {
  max-width: 56rem;
}
.vtr-legal-basis-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-primary);
}
.vtr-legal-basis-heading {
  margin: 0 0 0.65rem;
  line-height: 1.15;
}
.vtr-legal-basis-lead {
  margin: 0 0 1.75rem;
  max-width: 48rem;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.vtr-legal-basis-list {
  list-style: none;
  counter-reset: vtr-legal;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.vtr-legal-basis-item {
  counter-increment: vtr-legal;
  position: relative;
  background: var(--card);
  border: 0.0625rem solid color-mix(in srgb, var(--page-primary) 18%, transparent);
  border-left: 0.25rem solid var(--page-primary);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem 1.2rem;
}
.vtr-legal-basis-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}
.vtr-legal-basis-instrument {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.vtr-legal-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.vtr-legal-status--binding_law,
.vtr-legal-status--binding,
.vtr-legal-status--binding_listing_rule {
  color: #fff;
  background: var(--page-primary);
}
.vtr-legal-status--regulatory_guidance {
  color: color-mix(in srgb, var(--page-accent) 35%, #000 65%);
  background: color-mix(in srgb, var(--page-accent) 30%, transparent);
}
.vtr-legal-status--self_regulatory {
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
.vtr-legal-basis-citation {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}
.vtr-legal-basis-obligation {
  margin: 0 0 0.75rem;
}
.vtr-legal-basis-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.85rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}
.vtr-legal-basis-meta dt {
  font-weight: 700;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
}
.vtr-legal-basis-meta dd {
  margin: 0;
}
.vtr-legal-basis-source {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--page-primary);
}
.vtr-legal-basis-bridge {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--page-primary) 8%, transparent);
  border: 0.0625rem dashed color-mix(in srgb, var(--page-primary) 32%, transparent);
}
.vtr-legal-basis-bridge-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-primary);
  margin-bottom: 0.35rem;
}
.vtr-legal-basis-bridge-text {
  margin: 0;
}
@media (max-width: 32rem) {
  .vtr-legal-basis-meta { grid-template-columns: 1fr; gap: 0.1rem; }
  .vtr-legal-basis-meta dd { margin-bottom: 0.35rem; }
}