/**
 * Security Engineering on AWS — Mobile Responsive Layer
 * Include this stylesheet in all explainer pages for consistent mobile experience.
 * <link rel="stylesheet" href="mobile.css">
 */

/* ══════════════════════════════════════════════════════
   PROJECTION / READABILITY — Global Font Size Boost
   Applied at all screen sizes. Optimized for big-screen
   projection and comfortable classroom reading.
   ══════════════════════════════════════════════════════ */

/* Base body text */
body {
  font-size: 16px;
  line-height: 1.75;
}

/* Section headers & subtitles */
.sh { font-size: 26px !important; }
.ss { font-size: 15.5px !important; margin-bottom: 24px !important; }

/* Card content */
.card h2 { font-size: 20px !important; }
.card h3 { font-size: 18px !important; }
.card p, .card li, .card ul { font-size: 15px !important; line-height: 1.75 !important; }

/* Concept cards */
.cc h4 { font-size: 15px !important; }
.cc p { font-size: 14px !important; line-height: 1.7 !important; }

/* Callouts */
.callout { font-size: 15px !important; line-height: 1.7 !important; padding: 16px 20px !important; }

/* Tab nav */
.tab-nav button { font-size: 14px !important; padding: 10px 20px !important; }
.tab-nav button .tn { width: 20px !important; height: 20px !important; font-size: 10px !important; }

/* Badges & Pills */
.badge { font-size: 13px !important; padding: 6px 14px !important; }
.pill { font-size: 13px !important; padding: 4px 12px !important; }

/* Code blocks */
.code-block, .code { font-size: 14px !important; line-height: 1.8 !important; padding: 18px 22px !important; }

/* Result badges */
.result { font-size: 13px !important; padding: 5px 12px !important; }

/* Step items */
.step-body h4 { font-size: 16px !important; }
.step-body p { font-size: 15px !important; }
.step-num { width: 36px !important; height: 36px !important; font-size: 14px !important; }

/* Tables */
.perm-table { font-size: 14px !important; }
.perm-table th, .perm-table td { padding: 12px 16px !important; }

/* Index page cards */
.mod-card .card-title { font-size: 18px !important; }
.mod-card .card-desc { font-size: 14.5px !important; }
.mod-card .card-day { font-size: 12px !important; }
.mod-card .tag { font-size: 12px !important; }
.mod-card .card-status { font-size: 13px !important; }
.svc-card .svc-name { font-size: 15px !important; }
.svc-card .svc-cat { font-size: 13px !important; }
.lab-card .lab-title { font-size: 16px !important; }
.lab-card .lab-desc { font-size: 14px !important; }
.lab-card .lab-num { font-size: 12px !important; }
.lab-card .lab-svc { font-size: 12px !important; }
.day-badge { font-size: 13px !important; }
.day-header .day-title { font-size: 16px !important; }
.day-header .day-sub { font-size: 14px !important; }

/* Module page specific */
.new-badge { font-size: 11px !important; }
.narrator { font-size: 15px !important; }
.resp-layer { font-size: 15px !important; }
.resp-layer .rl-label { font-size: 15px !important; }
.resp-layer .rl-desc { font-size: 14px !important; }
.divider-bar { font-size: 13px !important; }
.threat-item .ti-name { font-size: 15px !important; }
.threat-item .ti-desc { font-size: 14px !important; }
.threat-item .ti-mit { font-size: 13px !important; }
.sc h4 { font-size: 15px !important; }
.sc p { font-size: 13.5px !important; }
.pt-card h4 { font-size: 15px !important; }
.pt-card p { font-size: 13.5px !important; }
.scenario-btn, .az-tab { font-size: 14px !important; }
.eval-num { font-size: 13px !important; }
.register-header { font-size: 14px !important; }
.reg-row { font-size: 14px !important; }
footer { font-size: 14px !important; }

/* Layer cards */
.layer-card h4 { font-size: 15px !important; }
.layer-card p { font-size: 14px !important; }

/* Detail panels */
.detail-panel { font-size: 15px !important; }
.detail-panel h3 { font-size: 17px !important; }

/* Hero — bigger subtitle */
.hero .subtitle, .hero p { font-size: 17px !important; }
.hero h1 { font-size: 44px !important; }

/* ══════════════════════════════════════════════════════
   TOUCH & INTERACTION OPTIMIZATIONS
   ══════════════════════════════════════════════════════ */

/* Ensure touch targets are at least 44px (WCAG 2.5.5) */
@media (pointer: coarse) {
  .tab-nav button {
    min-height: 44px;
    padding: 10px 16px;
  }
  .gnav-btn {
    width: 48px;
    height: 48px;
  }
  .badge, .pill, .tag, .lab-svc {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* Disable hover effects on touch devices to avoid sticky states */
@media (hover: none) {
  .card:hover,
  .cc:hover,
  .mod-card:hover,
  .svc-card:hover,
  .lab-card:hover {
    transform: none !important;
    box-shadow: inherit;
  }
}

/* ══════════════════════════════════════════════════════
   TABLET (max-width: 1024px)
   ══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Horizontal gutter comes from --gut / --pad-x (base.css) so the hero,
     tab bar and tab content keep ONE shared left edge. Only the vertical
     padding changes per breakpoint. */
  .tab-content {
    padding: 28px var(--gut) 60px;
  }
  .hero {
    padding: 48px var(--pad-x) 40px;
  }
  .module-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .cgrid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE (max-width: 768px)
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Tighter shared gutter — moves hero, tab bar and tab content together */
  :root { --gut: 16px; }

  /* Hero */
  .hero {
    padding: 36px var(--pad-x) 32px;
    text-align: center;
  }
  .hero h1 {
    font-size: 28px !important;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  .hero p,
  .hero .subtitle {
    font-size: 15px !important;
    margin-top: 8px;
  }
  .hero .brow {
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .hero-logo {
    font-size: 36px;
    margin-bottom: 12px;
  }

  /* Tab Navigation — horizontal scroll with momentum */
  .tab-nav {
    padding: 8px var(--pad-x);
    gap: 4px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tab-nav::-webkit-scrollbar {
    display: none;
  }
  .tab-nav button {
    padding: 9px 15px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }
  .tab-nav button .tn {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
  }

  /* Tab Content */
  .tab-content {
    padding: 24px var(--gut) 60px;
  }

  /* Section Headers */
  .sh {
    font-size: 22px !important;
  }
  .ss {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Module cards — single column */
  .module-grid,
  .lab-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Module card internals */
  .mod-card .card-header {
    padding: 18px 16px 12px;
    gap: 12px;
  }
  .mod-card .card-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 12px;
  }
  .mod-card .card-title {
    font-size: 16px !important;
  }
  .mod-card .card-desc {
    font-size: 13.5px !important;
  }
  .mod-card .card-footer {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mod-card .tag {
    font-size: 11px !important;
    padding: 2px 7px;
  }

  /* Service cards — 2 columns on mobile */
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .svc-card {
    padding: 14px 14px;
  }
  .svc-card .svc-icon {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .svc-card .svc-name {
    font-size: 13px !important;
  }
  .svc-card .svc-cat {
    font-size: 12px !important;
  }

  /* Lab cards */
  .lab-card {
    padding: 16px 16px;
  }
  .lab-card .lab-title {
    font-size: 14px !important;
  }
  .lab-card .lab-desc {
    font-size: 13px !important;
  }
  .lab-card .lab-services {
    gap: 4px;
  }
  .lab-card .lab-svc {
    font-size: 11px !important;
    padding: 2px 7px;
  }

  /* Day headers */
  .day-header {
    margin: 24px 0 14px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .day-badge {
    font-size: 12px !important;
    padding: 5px 12px;
  }
  .day-header .day-title {
    font-size: 14px !important;
  }
  .day-header .day-sub {
    font-size: 12px !important;
    margin-left: 0;
    width: 100%;
  }

  /* Glass cards (module pages) */
  .card {
    padding: 18px 16px;
    margin-bottom: 12px;
    border-radius: 16px;
  }
  .card h2 {
    font-size: 17px !important;
  }
  .card p {
    font-size: 14px !important;
  }

  /* Concept card grids */
  .cgrid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 12px 0;
  }
  .cc {
    padding: 16px;
  }
  .cc .ico {
    font-size: 22px;
  }
  .cc h4 {
    font-size: 14px !important;
  }
  .cc p {
    font-size: 13px !important;
  }

  /* Two-column layouts → single column */
  .two {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Three-column layouts → single or two columns */
  .cia-grid,
  .ds-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .stride-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cred-grid {
    grid-template-columns: 1fr;
  }

  /* SVG containers — make responsive */
  svg {
    max-width: 100%;
    height: auto;
  }
  .card svg,
  .tab-content svg {
    overflow: visible;
  }

  /* Callouts */
  .callout {
    padding: 12px 14px;
    font-size: 14px !important;
    margin: 10px 0;
  }

  /* Code blocks */
  .code-block, .code {
    font-size: 12.5px !important;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
  }

  /* Badges */
  .badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* Pills */
  .pill {
    font-size: 12px !important;
    padding: 2px 9px !important;
  }

  /* Tables — horizontal scroll wrapper */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .perm-table { font-size: 13px !important; }
  th, td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* Course map SVG — allow pinch zoom */
  .course-flow-svg {
    min-height: 200px;
    overflow: visible;
  }

  /* Footer */
  .footer, footer {
    padding: 28px 16px;
    font-size: 12px !important;
  }

  /* Reduce animation intensity on mobile (save battery) */
  .mod-card,
  .svc-card,
  .lab-card {
    animation-duration: 8s; /* slower = less GPU */
  }
  .mod-card::before,
  .svc-card::before,
  .lab-card::before {
    animation-duration: 6s;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   ══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Tightest shared gutter */
  :root { --gut: 14px; }

  .hero h1 {
    font-size: 24px !important;
  }
  .hero p,
  .hero .subtitle {
    font-size: 14px !important;
  }

  /* Service cards → single column */
  .svc-grid {
    grid-template-columns: 1fr;
  }

  /* STRIDE → single column */
  .stride-grid {
    grid-template-columns: 1fr;
  }

  /* Tab nav buttons — smaller */
  .tab-nav button {
    padding: 8px 13px !important;
    font-size: 12px !important;
  }

  /* Even smaller spacing */
  .tab-content {
    padding: 18px var(--gut) 48px;
  }

  /* Card content */
  .mod-card .card-header {
    padding: 14px 14px 10px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .mod-card .card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  /* Day header simplification */
  .day-header .day-sub {
    display: none;
  }

  /* Concept cards — even tighter */
  .cc {
    padding: 14px;
  }
  .card {
    padding: 14px 12px;
    border-radius: 14px;
  }

  /* Section headers */
  .sh {
    font-size: 20px !important;
  }
  .ss {
    font-size: 13px !important;
  }

  /* Reduce heavy CSS effects */
  .mod-card,
  .card,
  .cc {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preference
   ══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mod-card:hover,
  .card:hover,
  .cc:hover,
  .svc-card:hover,
  .lab-card:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   LANDSCAPE MOBILE (short viewports)
   ══════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 20px var(--pad-x) 16px;
  }
  .hero h1 {
    font-size: 22px;
  }
  .hero p,
  .hero .subtitle {
    font-size: 12px;
    margin-top: 4px;
  }
  .hero .brow {
    margin-top: 8px;
  }
  .hero-logo {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .tab-nav {
    padding: 6px var(--pad-x);
  }
  .tab-nav button {
    padding: 6px 12px;
    min-height: 36px;
  }
}

/* ══════════════════════════════════════════════════════
   SAFE AREA INSETS (notch / dynamic island)
   ══════════════════════════════════════════════════════ */

/* CAUTION: env() is supported by every modern DESKTOP browser too, where the
   insets all resolve to 0px. So a top-level @supports block like this one is
   NOT mobile-only — it applies everywhere. It previously carried the .hero /
   .tab-nav / .tab-content gutters, which silently beat base.css on desktop:
   the tab bar sat 12px from the viewport edge instead of on the content
   column, and every hero lost 20px of top padding. Anything that overrides a
   layout value now lives in the width-scoped block below; only genuinely
   inset-additive rules belong at top level. */
@supports (padding: env(safe-area-inset-top)) {
  .gnav-fab {
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
  }
  .footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 1024px) {
  @supports (padding: env(safe-area-inset-top)) {
    .hero {
      padding-top: calc(36px + env(safe-area-inset-top));
    }
    /* Add the inset ON TOP of the shared gutter rather than replacing it, so
       the hero / tab bar / tab content left edges stay locked together. */
    .tab-nav {
      padding-left: calc(var(--gut) + env(safe-area-inset-left));
      padding-right: calc(var(--gut) + env(safe-area-inset-right));
    }
    .tab-content {
      padding-left: calc(var(--gut) + env(safe-area-inset-left));
      padding-right: calc(var(--gut) + env(safe-area-inset-right));
    }
  }
}


/* ══════════════════════════════════════════════════════
   LIGHT THEME — Projection-Friendly Light Mode
   ══════════════════════════════════════════════════════
   Activated when <html data-theme="light">.
   Set by nav.js + an early inline script in <head> of each page
   (see SKILL: site-theme). Defaults to dark when unset.

   Strategy:
   - Override the same CSS custom properties used by all pages.
   - Adjust glass surfaces, ambient gradients, and shadows so the
     "AI Glass" aesthetic still works on a light background.
   - Slightly desaturate animated overlays so they don't bloom.
   ══════════════════════════════════════════════════════ */

html[data-theme="light"] {
  /* Page surfaces */
  --bg: #F5F5F7;
  --bg-hero: #ECECF1;

  /* Glass — switch to dark-tinted instead of white-tinted */
  --glass: rgba(15,15,25,.04);
  --gb: rgba(15,15,25,.10);
  --ghov: rgba(15,15,25,.07);
  --shine: rgba(123,47,190,.18);

  /* Brand accents — keep purple/cyan but darken purple a hair for contrast */
  --p: #6D28D9;
  --pl: #8B5CF6;
  --pb: #7C3AED;
  --pdim: rgba(109,40,217,.10);
  --pglow: rgba(109,40,217,.18);
  --cyan: #0891B2;
  --pink: #DB2777;
  --grn: #059669;
  --amb: #D97706;
  --red: #DC2626;

  /* Text — dark on light */
  --txt: #0F172A;
  --tb: #1E293B;
  --tm: #475569;
  --td: #94A3B8;

  /* Nav button vars (consumed by nav.js) */
  --gnav-btn-bg: rgba(255,255,255,.92);
  --gnav-btn-bg-hover: rgba(109,40,217,.10);
  --gnav-btn-bg-active: rgba(109,40,217,.18);
  --gnav-btn-border: rgba(15,15,25,.12);
  --gnav-btn-border-hover: rgba(109,40,217,.4);
  --gnav-btn-color: #0F172A;
  --gnav-panel-bg: rgba(248,248,252,.97);
  --gnav-panel-border: rgba(15,15,25,.10);
  --gnav-link-bg-hover: rgba(15,15,25,.04);
  --gnav-link-border-hover: rgba(15,15,25,.10);
  --gnav-link-bg-active: rgba(109,40,217,.10);
  --gnav-link-border-active: rgba(109,40,217,.30);
}

/* Light-theme body — softer ambient gradients, no near-black */
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--tb);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 55% 35% at 15% 0%, rgba(109,40,217,.06), transparent),
    radial-gradient(ellipse 40% 25% at 85% 5%,  rgba(8,145,178,.05),  transparent),
    radial-gradient(ellipse 30% 40% at 50% 100%, rgba(109,40,217,.04), transparent) !important;
}

/* Hero — light surface with subtle purple wash */
html[data-theme="light"] .hero {
  background: var(--bg-hero) !important;
  border-bottom: 1px solid rgba(15,15,25,.06);
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero .subtitle,
html[data-theme="light"] .sh,
html[data-theme="light"] .ss {
  color: var(--txt) !important;
}

/* Cards — translucent dark glass on light background */
html[data-theme="light"] .card,
html[data-theme="light"] .cc,
html[data-theme="light"] .mod-card,
html[data-theme="light"] .lab-card,
html[data-theme="light"] .svc-card,
html[data-theme="light"] .callout {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(15,15,25,.04), 0 4px 12px rgba(15,15,25,.04);
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .cc:hover,
html[data-theme="light"] .mod-card:hover,
html[data-theme="light"] .lab-card:hover,
html[data-theme="light"] .svc-card:hover {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(109,40,217,.30) !important;
  box-shadow: 0 0 28px rgba(109,40,217,.10),
              0 0 14px rgba(8,145,178,.06),
              0 12px 32px rgba(15,15,25,.10),
              inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* Card border-glow keyframes — re-pitched for light bg (lower opacity) */
html[data-theme="light"] .card,
html[data-theme="light"] .cc {
  animation: borderGlowLight 6s ease-in-out infinite !important;
}
@keyframes borderGlowLight {
  0%,100% { border-color: rgba(109,40,217,.18); box-shadow: 0 0 14px rgba(109,40,217,.05), 0 4px 12px rgba(15,15,25,.05) }
  33%     { border-color: rgba(8,145,178,.16);  box-shadow: 0 0 14px rgba(8,145,178,.05),  0 4px 12px rgba(15,15,25,.05) }
  66%     { border-color: rgba(219,39,119,.13); box-shadow: 0 0 14px rgba(219,39,119,.04), 0 4px 12px rgba(15,15,25,.05) }
}

/* Iridescent overlay (::after) — tone down for light mode */
html[data-theme="light"] .card::after,
html[data-theme="light"] .cc::after {
  background: linear-gradient(135deg,
    rgba(109,40,217,.04) 0%, rgba(8,145,178,.05) 30%,
    rgba(219,39,119,.04) 60%, rgba(5,150,105,.03) 100%) !important;
  opacity: .35 !important;
}
html[data-theme="light"] .card:hover::after,
html[data-theme="light"] .cc:hover::after { opacity: .8 !important; }

/* Top-edge shimmer — keep but soften */
html[data-theme="light"] .card::before,
html[data-theme="light"] .cc::before {
  background: linear-gradient(90deg,
    transparent 0%, rgba(124,58,237,0) 20%, rgba(124,58,237,.45) 50%,
    rgba(8,145,178,.35) 60%, rgba(124,58,237,0) 80%, transparent 100%) !important;
}

/* Tab nav — lighter sticky header */
html[data-theme="light"] .tab-nav {
  background: rgba(245,245,247,.92) !important;
  border-bottom: 1px solid rgba(15,15,25,.08) !important;
}
html[data-theme="light"] .tab-nav button { color: var(--tm) !important; }
html[data-theme="light"] .tab-nav button:hover {
  background: rgba(15,15,25,.05) !important;
  color: var(--txt) !important;
  border-color: rgba(15,15,25,.08) !important;
}
html[data-theme="light"] .tab-nav button.active {
  background: linear-gradient(135deg, var(--p), var(--pl)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(109,40,217,.30) !important;
}

/* Body & paragraph text */
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] .card p,
html[data-theme="light"] .card li,
html[data-theme="light"] .cc p { color: var(--tb) !important; }
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6 { color: var(--txt) !important; }

/* Code blocks — high-contrast light variant */
html[data-theme="light"] .code-block,
html[data-theme="light"] .code,
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: #0F172A !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(15,15,25,.20) !important;
}
html[data-theme="light"] .code-block .key,
html[data-theme="light"] .code .key { color: #C084FC !important; }
html[data-theme="light"] .code-block .str,
html[data-theme="light"] .code .str { color: #67E8F9 !important; }
html[data-theme="light"] .code-block .cmd,
html[data-theme="light"] .code .cmd { color: #F1F5F9 !important; }

/* Tables */
html[data-theme="light"] table,
html[data-theme="light"] .perm-table {
  background: rgba(255,255,255,.6) !important;
  color: var(--tb);
}
html[data-theme="light"] th { background: rgba(15,15,25,.06) !important; color: var(--txt) !important; }
html[data-theme="light"] td { border-color: rgba(15,15,25,.08) !important; }

/* Badges, pills, result tags */
html[data-theme="light"] .badge,
html[data-theme="light"] .pill {
  background: rgba(15,15,25,.06) !important;
  color: var(--tb) !important;
  border: 1px solid rgba(15,15,25,.08) !important;
}
html[data-theme="light"] .result-ok { background: rgba(5,150,105,.12) !important; color: #047857 !important; border-color: rgba(5,150,105,.30) !important; }
html[data-theme="light"] .result-fail { background: rgba(220,38,38,.10) !important; color: #B91C1C !important; border-color: rgba(220,38,38,.25) !important; }

/* SVG diagrams — lift stroke contrast on light bg */
html[data-theme="light"] svg text { fill: var(--txt); }
html[data-theme="light"] svg .muted { fill: var(--tm); }

/* Hero gradient text — DO NOT override `background` here.
   The page's inline <style> already declares the gradient + background-clip:text.
   Using `background: ... !important` would implicitly set
   `background-clip: border-box !important` on the longhand, which would beat the
   page's non-!important `background-clip: text` and paint the whole rectangle.
   Instead we just defensively re-assert the clip + transparent fill so any future
   shorthand `!important` override anywhere can't break the text-clipping.
   Brand accent colours (--pb, --cyan, --pink) are already overridden above. */
html[data-theme="light"] .hero h1 .acc,
html[data-theme="light"] footer span {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Reduced-motion: keep theme but kill the new animation */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .card,
  html[data-theme="light"] .cc { animation: none !important; }
}


/* ══════════════════════════════════════════════════════
   LIGHT THEME — Inline-style & SVG container fixes
   ══════════════════════════════════════════════════════
   The site has many surfaces with hardcoded colours in
   inline `style="..."` attributes, and SVG diagrams use
   `fill="rgba(...)"` and `stroke="rgba(...)"` directly.
   These can't be reached by CSS variables.

   We use CSS attribute selectors (`[style*="..."]`) to
   target the exact dark-theme colour strings and replace
   them with light-theme equivalents. The selectors are
   intentionally specific so they don't catch unrelated
   styles.

   Rule of thumb for new pages:
   - Prefer `var(--surface-1)`, `var(--surface-2)` etc.
     once those are added.
   - Avoid hardcoded `rgba()` in inline styles.
   - For SVG inline `fill`/`stroke` colours, see the
     `.svg-themed-bg` pattern documented in the
     site-theme SKILL.
   ══════════════════════════════════════════════════════ */

/* ─── Inline glass containers (SVG wrappers, panels, legends) ─── */
/* rgba(0,0,0,.2) / .3 / .4 → light-mode lifted surfaces */
html[data-theme="light"] [style*="background:rgba(0,0,0,.2)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,.2)"] {
  background: rgba(15,15,25,.04) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] [style*="background:rgba(0,0,0,.3)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,.3)"] {
  background: rgba(15,15,25,.05) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] [style*="background:rgba(0,0,0,.35)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,.35)"] {
  background: rgba(15,15,25,.06) !important;
  border-color: rgba(15,15,25,.10) !important;
}
/* rgba(0,0,0,.4) is mostly used for code blocks — those stay dark
   (handled separately above). Don't override it here. */

/* White-tint glass on inline panels — dim grey on light bg, fix it */
html[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,.04)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.025)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.03)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.05)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,.02)"] {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* Inline borders that are white-tint — they vanish on light bg */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.07)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.08)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.05)"] {
  border-color: rgba(15,15,25,.10) !important;
}

/* ─── Shared Responsibility layer rows (m01) ─── */
html[data-theme="light"] .resp-layer.customer {
  background: rgba(109,40,217,.12) !important;
  border-color: rgba(109,40,217,.30) !important;
}
html[data-theme="light"] .resp-layer.customer .rl-label { color: var(--p) !important; }
html[data-theme="light"] .resp-layer.aws {
  background: rgba(8,145,178,.10) !important;
  border-color: rgba(8,145,178,.30) !important;
}
html[data-theme="light"] .resp-layer.aws .rl-label { color: var(--cyan) !important; }
html[data-theme="light"] .resp-layer .rl-desc { color: var(--tb) !important; }

/* Boundary visualization wrapper — purple/cyan zones */
html[data-theme="light"] #boundary-svg {
  background: rgba(255,255,255,.6) !important;
}
html[data-theme="light"] #bz-customer { fill: rgba(109,40,217,.10) !important; }
html[data-theme="light"] #bz-aws { fill: rgba(8,145,178,.08) !important; }

/* Layer cards (m07 monitoring stack, etc.) */
html[data-theme="light"] .layer-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .layer-card.active {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(109,40,217,.40) !important;
  box-shadow: 0 0 28px rgba(109,40,217,.12) !important;
}
html[data-theme="light"] .detail-panel {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* ─── Punchier accent colour cards on light bg ─── */
/* Concept cards / callouts use rgba accents at .12-.18 alpha which
   are too pale on white. Bump them to ~.18-.25 for the same impact. */
html[data-theme="light"] [style*="background:rgba(123,47,190,.12)"] { background: rgba(109,40,217,.18) !important; }
html[data-theme="light"] [style*="background:rgba(192,132,252,.15)"] { background: rgba(124,58,237,.20) !important; }
html[data-theme="light"] [style*="background:rgba(34,211,238,.08)"] { background: rgba(8,145,178,.14) !important; }
html[data-theme="light"] [style*="background:rgba(34,211,238,.12)"] { background: rgba(8,145,178,.18) !important; }
html[data-theme="light"] [style*="background:rgba(52,211,153,.08)"] { background: rgba(5,150,105,.14) !important; }
html[data-theme="light"] [style*="background:rgba(52,211,153,.12)"] { background: rgba(5,150,105,.18) !important; }
html[data-theme="light"] [style*="background:rgba(52,211,153,.15)"] { background: rgba(5,150,105,.22) !important; }
html[data-theme="light"] [style*="background:rgba(248,113,113,.15)"] { background: rgba(220,38,38,.18) !important; }
html[data-theme="light"] [style*="background:rgba(251,191,36,.12)"] { background: rgba(217,119,6,.18) !important; }
html[data-theme="light"] [style*="background:rgba(251,191,36,.15)"] { background: rgba(217,119,6,.22) !important; }
html[data-theme="light"] [style*="background:rgba(244,114,182,.12)"] { background: rgba(219,39,119,.18) !important; }

/* Callouts / cards using var(--glass) base — already covered by .card override
   above, but the .callout border-color alpha needs a lift */
html[data-theme="light"] .callout {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .callout.pu { border-color: rgba(109,40,217,.35) !important; box-shadow: 0 0 24px rgba(109,40,217,.10) !important; }
html[data-theme="light"] .callout.cy { border-color: rgba(8,145,178,.30) !important; box-shadow: 0 0 24px rgba(8,145,178,.08) !important; }
html[data-theme="light"] .callout.gn { border-color: rgba(5,150,105,.30) !important; box-shadow: 0 0 24px rgba(5,150,105,.08) !important; }
html[data-theme="light"] .callout.rd { border-color: rgba(220,38,38,.30) !important; box-shadow: 0 0 24px rgba(220,38,38,.08) !important; }
html[data-theme="light"] .callout.ab { border-color: rgba(217,119,6,.32) !important; box-shadow: 0 0 24px rgba(217,119,6,.10) !important; }

/* Service tabs (M01 Tab 2) — active state */
html[data-theme="light"] .svc-tab {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.12) !important;
  color: var(--tm) !important;
}
html[data-theme="light"] .svc-tab.active {
  background: rgba(109,40,217,.14) !important;
  border-color: rgba(109,40,217,.45) !important;
  color: var(--p) !important;
  box-shadow: 0 4px 16px rgba(109,40,217,.18) !important;
}

/* ─── Narrator bar (used in labs) ─── */
html[data-theme="light"] .narrator-bar {
  background: rgba(109,40,217,.10) !important;
  border-color: rgba(109,40,217,.30) !important;
}
html[data-theme="light"] .narrator-bar .n-text { color: var(--tb) !important; }
html[data-theme="light"] .narrator-bar .n-text strong { color: var(--txt) !important; }

/* ─── Architecture SVG containers in labs ─── */
html[data-theme="light"] .arch-svg {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* ─── Result badges in labs ─── */
html[data-theme="light"] .result-badge.allow,
html[data-theme="light"] .result.result-ok {
  background: rgba(5,150,105,.18) !important;
  color: #047857 !important;
  border-color: rgba(5,150,105,.30) !important;
}
html[data-theme="light"] .result-badge.deny,
html[data-theme="light"] .result.result-fail {
  background: rgba(220,38,38,.15) !important;
  color: #B91C1C !important;
  border-color: rgba(220,38,38,.30) !important;
}

/* ─── Footer ─── */
html[data-theme="light"] footer {
  border-top-color: rgba(15,15,25,.08) !important;
  color: var(--tm) !important;
}


/* ──────────────────────────────────────────────────────
   LIGHT THEME — SVG node fills (theme-aware classes)
   ──────────────────────────────────────────────────────
   When inline SVGs use `fill="rgba(..)"` directly on
   <rect>, CSS attribute selectors can't reach them.
   The fix is to add a class to the <rect> and override
   fill/stroke from CSS. Pattern used:

     <rect class="day-node d1" fill="rgba(123,47,190,.12)" stroke="..."/>

   Then in light mode we re-fill with a stronger alpha
   that reads on white. Dark mode is unaffected because
   no override is written for it (SVG attribute provides
   the dark default).

   When adding new SVG diagrams, use these classes:
   - .day-node.d1 / .d2 / .d3   — Day badges (purple/cyan/green)
   - .svc-node.pu / .cy / .gn / .rd / .ab — service nodes
   ────────────────────────────────────────────────────── */

html[data-theme="light"] svg .day-node.d1 {
  fill: rgba(109,40,217,.18) !important;
  stroke: rgba(109,40,217,.55) !important;
}
html[data-theme="light"] svg .day-node.d2 {
  fill: rgba(8,145,178,.16) !important;
  stroke: rgba(8,145,178,.55) !important;
}
html[data-theme="light"] svg .day-node.d3 {
  fill: rgba(5,150,105,.16) !important;
  stroke: rgba(5,150,105,.55) !important;
}

/* Generic colour-coded SVG nodes — opt-in via these classes */
html[data-theme="light"] svg .svc-node.pu { fill: rgba(109,40,217,.16) !important; stroke: rgba(109,40,217,.55) !important; }
html[data-theme="light"] svg .svc-node.cy { fill: rgba(8,145,178,.16) !important; stroke: rgba(8,145,178,.55) !important; }
html[data-theme="light"] svg .svc-node.gn { fill: rgba(5,150,105,.16) !important; stroke: rgba(5,150,105,.55) !important; }
html[data-theme="light"] svg .svc-node.rd { fill: rgba(220,38,38,.16) !important; stroke: rgba(220,38,38,.55) !important; }
html[data-theme="light"] svg .svc-node.ab { fill: rgba(217,119,6,.16) !important; stroke: rgba(217,119,6,.55) !important; }

/* Connection lines/paths inside SVG diagrams — increase contrast */
html[data-theme="light"] svg path[stroke="rgba(192,132,252,.3)"] { stroke: rgba(109,40,217,.50) !important; }
html[data-theme="light"] svg path[stroke="rgba(34,211,238,.3)"] { stroke: rgba(8,145,178,.50) !important; }
html[data-theme="light"] svg path[stroke="rgba(52,211,153,.3)"] { stroke: rgba(5,150,105,.50) !important; }

/* Generic mid-tone text in SVG — body text should be dark on light */
html[data-theme="light"] svg text[fill="var(--tb)"] { fill: var(--tb) !important; }
html[data-theme="light"] svg text[fill="var(--tm)"] { fill: var(--tm) !important; }
html[data-theme="light"] svg text[fill="var(--txt)"] { fill: var(--txt) !important; }


/* Inner SVG background rect — light theme makes it transparent so the
   wrapper's themed background shows through cleanly */
html[data-theme="light"] svg .svg-bg {
  fill: transparent !important;
}


/* ══════════════════════════════════════════════════════
   LIGHT THEME — Module-specific architecture diagrams
   ══════════════════════════════════════════════════════
   Some modules define one-off namespace classes for their
   interactive architecture diagrams (e.g. m01's Threat
   Model Builder uses .tm-*). Generic attribute selectors
   can't reach these. We override per-namespace below.

   When adding a new namespace, follow the same pattern:
   1. Container/wrapper → light surface
   2. SVG nodes (rects/circles) → light fills + dark text
   3. SVG edges/connectors → bumped contrast strokes
   4. Detail panels / register tables → white card surfaces

   See site-theme SKILL "Theming bespoke namespaced
   diagrams" for the step-by-step.
   ══════════════════════════════════════════════════════ */

/* ─── M01: Threat Model Builder (.tm-*) ─── */
html[data-theme="light"] .tmap-wrap {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .tm-node rect {
  fill: rgba(255,255,255,.95) !important;
  stroke: rgba(15,15,25,.18) !important;
}
html[data-theme="light"] .tm-node:hover rect {
  fill: rgba(109,40,217,.10) !important;
  stroke: rgba(109,40,217,.55) !important;
}
html[data-theme="light"] .tm-node.active rect {
  fill: rgba(109,40,217,.16) !important;
  stroke: var(--p) !important;
  filter: drop-shadow(0 0 10px rgba(109,40,217,.30)) !important;
}
html[data-theme="light"] .tm-node text { fill: var(--txt) !important; }
html[data-theme="light"] .tm-node .sub { fill: var(--tm) !important; }
html[data-theme="light"] .tm-edge { stroke: rgba(15,15,25,.20) !important; }
html[data-theme="light"] .tm-particle {
  fill: var(--p) !important;
  filter: drop-shadow(0 0 4px rgba(109,40,217,.50)) !important;
}

/* Threat panel + items */
html[data-theme="light"] .threat-panel {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .threat-item {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .threat-item:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(109,40,217,.30) !important;
}
html[data-theme="light"] .threat-item .ti-name { color: var(--txt) !important; }
html[data-theme="light"] .threat-item .ti-desc { color: var(--tb) !important; }
html[data-theme="light"] .threat-item .ti-mit { color: var(--p) !important; }

/* Register table */
html[data-theme="light"] .register {
  border-color: rgba(15,15,25,.12) !important;
  background: rgba(255,255,255,.7) !important;
}
html[data-theme="light"] .register-header {
  background: rgba(109,40,217,.14) !important;
  color: var(--p) !important;
}
html[data-theme="light"] .reg-row {
  border-bottom-color: rgba(15,15,25,.08) !important;
}
html[data-theme="light"] .reg-row.rh {
  background: rgba(15,15,25,.04) !important;
  color: var(--tm) !important;
}
html[data-theme="light"] .reg-row:hover { background: rgba(109,40,217,.06) !important; }

/* Add-to-register button */
html[data-theme="light"] .add-btn {
  background: rgba(5,150,105,.12) !important;
  border-color: rgba(5,150,105,.40) !important;
  color: #047857 !important;
}
html[data-theme="light"] .add-btn:hover {
  background: rgba(5,150,105,.20) !important;
  border-color: #059669 !important;
}

/* ─── M01: STRIDE explorer (.sc / .stride-detail) ─── */
html[data-theme="light"] .sc {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .sc:hover { background: rgba(255,255,255,.92) !important; }
html[data-theme="light"] .sc h4 { color: var(--txt) !important; }
html[data-theme="light"] .sc p { color: var(--tb) !important; }
html[data-theme="light"] .stride-detail {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* ─── M01: CIA cards/detail (.cia-*) ─── */
html[data-theme="light"] .cia-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .cia-card:hover { background: rgba(255,255,255,.92) !important; }
html[data-theme="light"] .cia-detail {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* CIA SVG triangle nodes — flip fills/strokes for white bg */
html[data-theme="light"] #cia-n-c circle {
  fill: rgba(109,40,217,.18) !important;
  stroke: rgba(109,40,217,.55) !important;
}
html[data-theme="light"] #cia-n-i circle {
  fill: rgba(8,145,178,.16) !important;
  stroke: rgba(8,145,178,.55) !important;
}
html[data-theme="light"] #cia-n-a circle {
  fill: rgba(5,150,105,.16) !important;
  stroke: rgba(5,150,105,.55) !important;
}
/* Triangle outline + connector lines */
html[data-theme="light"] #cia-triangle polygon { stroke: rgba(15,15,25,.20) !important; }
html[data-theme="light"] #cia-triangle line[stroke="rgba(192,132,252,.2)"] { stroke: rgba(109,40,217,.45) !important; }
html[data-theme="light"] #cia-triangle line[stroke="rgba(34,211,238,.2)"] { stroke: rgba(8,145,178,.45) !important; }
html[data-theme="light"] #cia-triangle line[stroke="rgba(52,211,153,.2)"] { stroke: rgba(5,150,105,.45) !important; }
html[data-theme="light"] #cia-triangle text[fill*="rgba(255,255,255"] { fill: var(--tm) !important; }

/* ─── M01: Side labels in boundary SVG ─── */
html[data-theme="light"] #lbl-you-g rect {
  fill: rgba(109,40,217,.14) !important;
  stroke: rgba(109,40,217,.40) !important;
}
html[data-theme="light"] #lbl-aws-g rect {
  fill: rgba(8,145,178,.12) !important;
  stroke: rgba(8,145,178,.35) !important;
}

/* ─── Pills (used across modules) ─── */
html[data-theme="light"] .pill.pu { background: rgba(109,40,217,.18) !important; color: var(--p) !important; }
html[data-theme="light"] .pill.cy { background: rgba(8,145,178,.18) !important; color: var(--cyan) !important; }
html[data-theme="light"] .pill.gn { background: rgba(5,150,105,.18) !important; color: var(--grn) !important; }
html[data-theme="light"] .pill.ab { background: rgba(217,119,6,.20) !important; color: var(--amb) !important; }
html[data-theme="light"] .pill.pk { background: rgba(219,39,119,.18) !important; color: var(--pink) !important; }
html[data-theme="light"] .pill.rd { background: rgba(220,38,38,.16) !important; color: var(--red) !important; }

/* ─── Badges on hero (.badge.p/.c/.g) ─── */
html[data-theme="light"] .badge {
  background: rgba(255,255,255,.7) !important;
  color: var(--tb) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .badge.p { background: rgba(109,40,217,.18) !important; color: var(--p) !important; border-color: rgba(109,40,217,.35) !important; }
html[data-theme="light"] .badge.c { background: rgba(8,145,178,.16) !important; color: var(--cyan) !important; border-color: rgba(8,145,178,.30) !important; }
html[data-theme="light"] .badge.g { background: rgba(5,150,105,.16) !important; color: var(--grn) !important; border-color: rgba(5,150,105,.30) !important; }

/* ─── Concept-card variants (.cc.pu/.cy/.gn/.ab/.pk) ─── */
html[data-theme="light"] .cc {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .cc.pu { border-color: rgba(109,40,217,.25) !important; }
html[data-theme="light"] .cc.pu:hover { background: rgba(109,40,217,.08) !important; border-color: rgba(109,40,217,.45) !important; }
html[data-theme="light"] .cc.cy { border-color: rgba(8,145,178,.22) !important; }
html[data-theme="light"] .cc.cy:hover { background: rgba(8,145,178,.08) !important; border-color: rgba(8,145,178,.45) !important; }
html[data-theme="light"] .cc.gn { border-color: rgba(5,150,105,.22) !important; }
html[data-theme="light"] .cc.gn:hover { background: rgba(5,150,105,.08) !important; border-color: rgba(5,150,105,.45) !important; }
html[data-theme="light"] .cc.ab { border-color: rgba(217,119,6,.22) !important; }
html[data-theme="light"] .cc.ab:hover { background: rgba(217,119,6,.10) !important; border-color: rgba(217,119,6,.45) !important; }
html[data-theme="light"] .cc.pk { border-color: rgba(219,39,119,.22) !important; }
html[data-theme="light"] .cc.pk:hover { background: rgba(219,39,119,.08) !important; border-color: rgba(219,39,119,.45) !important; }
html[data-theme="light"] .cc h4 { color: var(--txt) !important; }
html[data-theme="light"] .cc p { color: var(--tb) !important; }

/* ─── Divider bar (m01 boundary, others) ─── */
html[data-theme="light"] .divider-bar {
  background: rgba(109,40,217,.14) !important;
  color: var(--p) !important;
  border-color: rgba(109,40,217,.30) !important;
}


/* ─── M03: OU Tree (.ou-*) ─── */
html[data-theme="light"] .ou-tree {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .ou-node rect[fill*="rgba(20"],
html[data-theme="light"] .ou-node rect[fill*="rgba(255,255,255"],
html[data-theme="light"] .ou-node rect[fill*="rgba(0,0,0"] {
  fill: rgba(255,255,255,.95) !important;
  stroke: rgba(15,15,25,.18) !important;
}
html[data-theme="light"] .ou-node text { fill: var(--txt) !important; }
html[data-theme="light"] .ou-node .sub { fill: var(--tm) !important; }

/* ─── M07/M06/M08: Layer cards + detail panels ─── */
html[data-theme="light"] .layer-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .layer-card.active {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(109,40,217,.45) !important;
  box-shadow: 0 0 28px rgba(109,40,217,.14) !important;
}
html[data-theme="light"] .layer-card h4 { color: var(--txt) !important; }
html[data-theme="light"] .layer-card p { color: var(--tb) !important; }

html[data-theme="light"] .detail-panel {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
  color: var(--tb) !important;
}
html[data-theme="light"] .detail-panel h3 { color: var(--txt) !important; }
html[data-theme="light"] .detail-panel code {
  background: rgba(109,40,217,.14) !important;
  color: var(--p) !important;
}

/* ─── M02: STS flow + Policy type pills ─── */
html[data-theme="light"] .sts-wrap {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .pt-pill {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.12) !important;
  color: var(--tm) !important;
}
html[data-theme="light"] .pt-pill:hover {
  background: rgba(109,40,217,.08) !important;
  border-color: rgba(109,40,217,.40) !important;
  color: var(--p) !important;
}

/* ─── M09: DAG nodes + spokes (.dag-* / .spoke-*) ─── */
html[data-theme="light"] .svg-wrap {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .dag-node rect {
  fill: rgba(255,255,255,.92) !important;
  stroke: rgba(15,15,25,.18) !important;
}
html[data-theme="light"] .dag-node text { fill: var(--txt) !important; }
html[data-theme="light"] .spoke-line { stroke: rgba(15,15,25,.20) !important; }

/* ─── M03: Directory service cards (.ds-*) ─── */
html[data-theme="light"] .ds-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}
html[data-theme="light"] .ds-card:hover { background: rgba(255,255,255,.92) !important; }
html[data-theme="light"] .ds-detail {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
}

/* ─── M08: Step lists (.step-item) ─── */
html[data-theme="light"] .step-item {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,15,25,.10) !important;
  color: var(--tb) !important;
}

/* ─── M09: Narrator (also on labs) ─── */
html[data-theme="light"] .narrator {
  background: rgba(109,40,217,.10) !important;
  border-color: rgba(109,40,217,.30) !important;
  color: var(--tb) !important;
}
html[data-theme="light"] .narrator strong { color: var(--txt) !important; }


/* ══════════════════════════════════════════════════════
   LIGHT THEME — SVG attribute strokes & fills
   ══════════════════════════════════════════════════════
   Inline SVG diagrams use `stroke="rgba(...)"` and
   `fill="rgba(...)"` with low alpha (.03–.30) tuned for
   the dark background. On white, these are washed out
   or invisible.

   CSS attribute selectors CAN match SVG presentation
   attributes (despite being a common myth that they
   can't). We replace each commonly-used dark-theme rgba
   string with a stronger light-theme equivalent.

   Strategy: keep the same hue family, ~3× the alpha,
   and bump stroke-width slightly via stroke matching.

   When you add a new diagram, REUSE existing rgba
   strings from this list. New alphas need a new entry.
   ══════════════════════════════════════════════════════ */

/* ─── SVG stroke colours — bumped for light bg ─── */

/* Purple family */
html[data-theme="light"] svg [stroke="rgba(123,47,190,.2)"]   { stroke: rgba(109,40,217,.50) !important; }
html[data-theme="light"] svg [stroke="rgba(123,47,190,.25)"]  { stroke: rgba(109,40,217,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(123,47,190,.3)"]   { stroke: rgba(109,40,217,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.2)"]  { stroke: rgba(109,40,217,.50) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.25)"] { stroke: rgba(109,40,217,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.3)"]  { stroke: rgba(109,40,217,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.35)"] { stroke: rgba(109,40,217,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.4)"]  { stroke: rgba(109,40,217,.65) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.45)"] { stroke: rgba(109,40,217,.70) !important; }
html[data-theme="light"] svg [stroke="rgba(192,132,252,.5)"]  { stroke: rgba(109,40,217,.75) !important; }

/* Cyan family */
html[data-theme="light"] svg [stroke="rgba(34,211,238,.2)"]  { stroke: rgba(8,145,178,.50) !important; }
html[data-theme="light"] svg [stroke="rgba(34,211,238,.25)"] { stroke: rgba(8,145,178,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(34,211,238,.3)"]  { stroke: rgba(8,145,178,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(34,211,238,.35)"] { stroke: rgba(8,145,178,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(34,211,238,.4)"]  { stroke: rgba(8,145,178,.65) !important; }
html[data-theme="light"] svg [stroke="rgba(56,189,248,.65)"] { stroke: rgba(8,145,178,.70) !important; }

/* Green family */
html[data-theme="light"] svg [stroke="rgba(52,211,153,.2)"]  { stroke: rgba(5,150,105,.50) !important; }
html[data-theme="light"] svg [stroke="rgba(52,211,153,.25)"] { stroke: rgba(5,150,105,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(52,211,153,.3)"]  { stroke: rgba(5,150,105,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(52,211,153,.35)"] { stroke: rgba(5,150,105,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(52,211,153,.4)"]  { stroke: rgba(5,150,105,.65) !important; }

/* Pink family */
html[data-theme="light"] svg [stroke="rgba(244,114,182,.2)"]  { stroke: rgba(219,39,119,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(244,114,182,.25)"] { stroke: rgba(219,39,119,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(244,114,182,.3)"]  { stroke: rgba(219,39,119,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(244,114,182,.35)"] { stroke: rgba(219,39,119,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(244,114,182,.4)"]  { stroke: rgba(219,39,119,.65) !important; }

/* Red family */
html[data-theme="light"] svg [stroke="rgba(248,113,113,.2)"]  { stroke: rgba(220,38,38,.50) !important; }
html[data-theme="light"] svg [stroke="rgba(248,113,113,.25)"] { stroke: rgba(220,38,38,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(248,113,113,.3)"]  { stroke: rgba(220,38,38,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(248,113,113,.35)"] { stroke: rgba(220,38,38,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(248,113,113,.4)"]  { stroke: rgba(220,38,38,.65) !important; }

/* Amber family */
html[data-theme="light"] svg [stroke="rgba(251,191,36,.2)"]  { stroke: rgba(217,119,6,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(251,191,36,.25)"] { stroke: rgba(217,119,6,.55) !important; }
html[data-theme="light"] svg [stroke="rgba(251,191,36,.3)"]  { stroke: rgba(217,119,6,.60) !important; }
html[data-theme="light"] svg [stroke="rgba(251,191,36,.35)"] { stroke: rgba(217,119,6,.65) !important; }
html[data-theme="light"] svg [stroke="rgba(251,191,36,.4)"]  { stroke: rgba(217,119,6,.70) !important; }

/* Neutral white-strokes (inside diagrams) — convert to dark */
html[data-theme="light"] svg [stroke="rgba(255,255,255,.06)"]  { stroke: rgba(15,15,25,.18) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.07)"]  { stroke: rgba(15,15,25,.20) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.08)"]  { stroke: rgba(15,15,25,.22) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.1)"]   { stroke: rgba(15,15,25,.25) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.12)"]  { stroke: rgba(15,15,25,.28) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.15)"]  { stroke: rgba(15,15,25,.30) !important; }
html[data-theme="light"] svg [stroke="rgba(255,255,255,.2)"]   { stroke: rgba(15,15,25,.35) !important; }

/* ─── SVG fill colours — bumped for light bg ─── */

/* Purple family */
html[data-theme="light"] svg [fill="rgba(123,47,190,.04)"] { fill: rgba(109,40,217,.10) !important; }
html[data-theme="light"] svg [fill="rgba(123,47,190,.05)"] { fill: rgba(109,40,217,.12) !important; }
html[data-theme="light"] svg [fill="rgba(123,47,190,.06)"] { fill: rgba(109,40,217,.13) !important; }
html[data-theme="light"] svg [fill="rgba(123,47,190,.08)"] { fill: rgba(109,40,217,.16) !important; }
html[data-theme="light"] svg [fill="rgba(123,47,190,.1)"]  { fill: rgba(109,40,217,.18) !important; }
html[data-theme="light"] svg [fill="rgba(123,47,190,.12)"] { fill: rgba(109,40,217,.20) !important; }
html[data-theme="light"] svg [fill="rgba(192,132,252,.08)"] { fill: rgba(109,40,217,.16) !important; }

/* Cyan family */
html[data-theme="light"] svg [fill="rgba(34,211,238,.03)"] { fill: rgba(8,145,178,.08) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.04)"] { fill: rgba(8,145,178,.10) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.05)"] { fill: rgba(8,145,178,.11) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.06)"] { fill: rgba(8,145,178,.12) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.08)"] { fill: rgba(8,145,178,.15) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.1)"]  { fill: rgba(8,145,178,.18) !important; }
html[data-theme="light"] svg [fill="rgba(34,211,238,.12)"] { fill: rgba(8,145,178,.20) !important; }

/* Green family */
html[data-theme="light"] svg [fill="rgba(52,211,153,.04)"] { fill: rgba(5,150,105,.10) !important; }
html[data-theme="light"] svg [fill="rgba(52,211,153,.05)"] { fill: rgba(5,150,105,.12) !important; }
html[data-theme="light"] svg [fill="rgba(52,211,153,.06)"] { fill: rgba(5,150,105,.13) !important; }
html[data-theme="light"] svg [fill="rgba(52,211,153,.08)"] { fill: rgba(5,150,105,.15) !important; }
html[data-theme="light"] svg [fill="rgba(52,211,153,.1)"]  { fill: rgba(5,150,105,.18) !important; }
html[data-theme="light"] svg [fill="rgba(52,211,153,.12)"] { fill: rgba(5,150,105,.20) !important; }

/* Pink family */
html[data-theme="light"] svg [fill="rgba(244,114,182,.03)"] { fill: rgba(219,39,119,.10) !important; }
html[data-theme="light"] svg [fill="rgba(244,114,182,.04)"] { fill: rgba(219,39,119,.10) !important; }
html[data-theme="light"] svg [fill="rgba(244,114,182,.06)"] { fill: rgba(219,39,119,.13) !important; }
html[data-theme="light"] svg [fill="rgba(244,114,182,.08)"] { fill: rgba(219,39,119,.15) !important; }

/* Red family */
html[data-theme="light"] svg [fill="rgba(248,113,113,.03)"] { fill: rgba(220,38,38,.08) !important; }
html[data-theme="light"] svg [fill="rgba(248,113,113,.04)"] { fill: rgba(220,38,38,.10) !important; }
html[data-theme="light"] svg [fill="rgba(248,113,113,.05)"] { fill: rgba(220,38,38,.11) !important; }
html[data-theme="light"] svg [fill="rgba(248,113,113,.06)"] { fill: rgba(220,38,38,.13) !important; }
html[data-theme="light"] svg [fill="rgba(248,113,113,.08)"] { fill: rgba(220,38,38,.15) !important; }

/* Amber family */
html[data-theme="light"] svg [fill="rgba(251,191,36,.03)"] { fill: rgba(217,119,6,.10) !important; }
html[data-theme="light"] svg [fill="rgba(251,191,36,.04)"] { fill: rgba(217,119,6,.12) !important; }
html[data-theme="light"] svg [fill="rgba(251,191,36,.06)"] { fill: rgba(217,119,6,.14) !important; }
html[data-theme="light"] svg [fill="rgba(251,191,36,.08)"] { fill: rgba(217,119,6,.16) !important; }
html[data-theme="light"] svg [fill="rgba(251,191,36,.1)"]  { fill: rgba(217,119,6,.18) !important; }

/* Neutral fills */
html[data-theme="light"] svg [fill="rgba(255,255,255,.02)"]  { fill: rgba(255,255,255,.7) !important; }
html[data-theme="light"] svg [fill="rgba(255,255,255,.04)"]  { fill: rgba(255,255,255,.85) !important; }
html[data-theme="light"] svg [fill="rgba(0,0,0,.1)"]   { fill: transparent !important; }
html[data-theme="light"] svg [fill="rgba(0,0,0,.2)"]   { fill: rgba(15,15,25,.04) !important; }
html[data-theme="light"] svg [fill="rgba(0,0,0,.3)"]   { fill: rgba(15,15,25,.05) !important; }

/* ─── M06: Defense-in-depth concentric layers (way too bright on light) ─── */
/* The tube/dashed concentric rings use red/pink/amber/cyan at .03 alpha.
   On white, they almost vanish but the colour cast is still aggressive.
   Use neutral grey concentric rings instead — let the labels carry the colour. */
html[data-theme="light"] #depthSvg rect[stroke-dasharray] {
  stroke: rgba(15,15,25,.18) !important;
  fill: transparent !important;
}
html[data-theme="light"] #depthSvg rect[stroke-dasharray="8 4"] { stroke: rgba(220,38,38,.45) !important; }
html[data-theme="light"] #depthSvg rect[stroke-dasharray="6 4"] { stroke: rgba(219,39,119,.40) !important; }
html[data-theme="light"] #depthSvg rect[stroke-dasharray="5 3"] { stroke: rgba(217,119,6,.45) !important; }
html[data-theme="light"] #depthSvg rect[stroke-dasharray="4 3"] { stroke: rgba(8,145,178,.50) !important; }
/* Innermost solid rect (security groups) */
html[data-theme="light"] #depthSvg rect:not([stroke-dasharray]) {
  fill: rgba(109,40,217,.10) !important;
  stroke: rgba(109,40,217,.50) !important;
}

/* Section labels inside the diagram */
html[data-theme="light"] #depthSvg text { opacity: 1 !important; }

/* ─── Generic darken for muted SVG section labels ─── */
/* Small <text> elements with #475569 (--td) or rgba whites need to be
   dark on light. Use opacity-bump and colour replace. */
html[data-theme="light"] svg text[fill="#475569"] { fill: #475569 !important; }
html[data-theme="light"] svg text[fill="rgba(255,255,255,.55)"],
html[data-theme="light"] svg text[fill="rgba(255,255,255,.6)"],
html[data-theme="light"] svg text[fill="rgba(255,255,255,.65)"] { fill: var(--tm) !important; }

/* ─── Stroke-width tweaks for thin connectors on light bg ─── */
/* Many diagrams use stroke-width="1" or "1.5" with low alpha — bump
   width slightly when the stroke is very pale */
html[data-theme="light"] svg path[stroke-width="1"][stroke-dasharray] { stroke-width: 1.5 !important; }
html[data-theme="light"] svg path[stroke-width="1.5"][stroke-dasharray] { stroke-width: 2 !important; }

/* ══════════════════════════════════════════════════════════════════════
   SISGOV ADDITIONS — light-theme coverage for the classes introduced in
   base.css that the original Security Engineering stylesheet never had.

   Principle throughout: STRONGER, NOT LIGHTER. Accent alphas go UP for
   light mode (border .30 -> .50, fill .10 -> .20) rather than being
   lightened, and text on coloured surfaces uses the darker brand variant.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Data tables (table.dt) ─── */
html[data-theme="light"] table.dt th {
  background: rgba(109,40,217,.10) !important;
  color: #6D28D9 !important;
  border-bottom: 1px solid rgba(109,40,217,.28) !important;
}
html[data-theme="light"] table.dt td {
  color: #334155 !important;
  border-bottom: 1px solid rgba(15,15,25,.08) !important;
}
html[data-theme="light"] table.dt td strong { color: #0F172A !important }
html[data-theme="light"] table.dt tbody tr:hover { background: rgba(109,40,217,.06) !important }

/* ─── Code block chrome ─── */
html[data-theme="light"] .code-head {
  background: rgba(109,40,217,.10) !important;
  border-color: rgba(109,40,217,.26) !important;
  color: #6D28D9 !important;
}
html[data-theme="light"] .copy-btn {
  background: rgba(109,40,217,.10) !important;
  border-color: rgba(109,40,217,.34) !important;
  color: #6D28D9 !important;
}
html[data-theme="light"] .copy-btn:hover {
  background: rgba(109,40,217,.18) !important;
  border-color: rgba(109,40,217,.55) !important;
}
html[data-theme="light"] .copy-btn.done {
  background: rgba(4,120,87,.14) !important;
  border-color: rgba(4,120,87,.45) !important;
  color: #047857 !important;
}
/* Syntax tokens need darker hues to read on the light code surface */
html[data-theme="light"] .tok-k { color: #7C3AED !important }
html[data-theme="light"] .tok-s { color: #047857 !important }
html[data-theme="light"] .tok-c { color: #64748B !important }
html[data-theme="light"] .tok-n { color: #0E7490 !important }

/* ─── Icon wells: keep the glyph dark for contrast on the pale tint ─── */
html[data-theme="light"] .cc .cc-ico,
html[data-theme="light"] .mod-card .mc-ico { color: #0F172A !important }
html[data-theme="light"] .cc.pu .cc-ico { background: rgba(109,40,217,.16) !important }
html[data-theme="light"] .cc.cy .cc-ico { background: rgba(8,145,178,.16)  !important }
html[data-theme="light"] .cc.pk .cc-ico { background: rgba(219,39,119,.14) !important }
html[data-theme="light"] .cc.gn .cc-ico { background: rgba(4,120,87,.14)   !important }
html[data-theme="light"] .cc.ab .cc-ico { background: rgba(180,83,9,.14)   !important }
html[data-theme="light"] .cc.rd .cc-ico { background: rgba(185,28,28,.13)  !important }
html[data-theme="light"] .mod-card .mc-ico { background: rgba(109,40,217,.16) !important }

/* ─── Bullet lists / key-value rows ─── */
html[data-theme="light"] .blist li { color: #334155 !important }
html[data-theme="light"] .blist li strong { color: #0F172A !important }
html[data-theme="light"] .blist li::before { background: #6D28D9 !important; opacity: .8 !important }
html[data-theme="light"] .kv-row { border-bottom-color: rgba(15,15,25,.08) !important }
html[data-theme="light"] .kv-row .k { color: #6D28D9 !important }
html[data-theme="light"] .kv-row .v { color: #334155 !important }

/* ─── Auto-play button ─── */
html[data-theme="light"] .autoplay-btn {
  background: rgba(109,40,217,.10) !important;
  border-color: rgba(109,40,217,.38) !important;
  color: #6D28D9 !important;
}
html[data-theme="light"] .autoplay-btn:hover {
  background: rgba(109,40,217,.18) !important;
  border-color: rgba(109,40,217,.6) !important;
}
html[data-theme="light"] .autoplay-btn.playing {
  background: linear-gradient(135deg,#6D28D9,#7C3AED) !important;
  color: #fff !important; border-color: transparent !important;
}

/* ─── SVG connector edge classes — boldened, not lightened ───
   These are the pre-themed connector strokes. They must stay clearly
   visible on white, so alpha goes UP and width goes UP slightly. */
html[data-theme="light"] .edge-p { stroke: rgba(109,40,217,.85) !important; stroke-width: 2.6 !important }
html[data-theme="light"] .edge-c { stroke: rgba(8,145,178,.85)  !important; stroke-width: 2.6 !important }
html[data-theme="light"] .edge-k { stroke: rgba(219,39,119,.85) !important; stroke-width: 2.6 !important }
html[data-theme="light"] .edge-g { stroke: rgba(4,120,87,.85)   !important; stroke-width: 2.6 !important }
html[data-theme="light"] .edge-r { stroke: rgba(185,28,28,.85)  !important; stroke-width: 2.6 !important }
/* Decorative strokes stay quiet — different alpha so the rules above miss them */
html[data-theme="light"] .edge-faint { stroke: rgba(15,15,25,.22) !important }

/* SVG text labels */
html[data-theme="light"] .node-label { fill: #0F172A !important }
html[data-theme="light"] .node-sub,
html[data-theme="light"] .flow-label { fill: #475569 !important }

/* ─── Vertical timeline ───
   Only the colour vars flip. The row body is a .card, already themed above,
   so deliberately nothing sets background/border here. */
html[data-theme="light"] .tl-body h4 { color: #0F172A !important }
html[data-theme="light"] .tl-body p  { color: #334155 !important }
html[data-theme="light"] .tl-time    { color: #64748B !important }
html[data-theme="light"] .tl-row.st-p { --dot:#6D28D9; --rail:rgba(109,40,217,.5); --dotring:rgba(109,40,217,.16) }
html[data-theme="light"] .tl-row.st-c { --dot:#0891B2; --rail:rgba(8,145,178,.5);  --dotring:rgba(8,145,178,.16) }
html[data-theme="light"] .tl-row.st-k { --dot:#DB2777; --rail:rgba(219,39,119,.5); --dotring:rgba(219,39,119,.14) }
html[data-theme="light"] .tl-row.st-g { --dot:#047857; --rail:rgba(4,120,87,.5);   --dotring:rgba(4,120,87,.14) }
html[data-theme="light"] .tl-row.st-a { --dot:#B45309; --rail:rgba(180,83,9,.5);   --dotring:rgba(180,83,9,.14) }
html[data-theme="light"] .tl-row.st-r { --dot:#B91C1C; --rail:rgba(185,28,28,.5);  --dotring:rgba(185,28,28,.14) }

/* ─── Section headings, hub card meta, footer ─── */
html[data-theme="light"] .sh-sm { color: #0F172A !important }
html[data-theme="light"] .mod-card h3 { color: #0F172A !important }
html[data-theme="light"] .mod-card p  { color: #475569 !important }
html[data-theme="light"] .mod-card .mc-id { color: #64748B !important }
html[data-theme="light"] .site-footer {
  border-top-color: rgba(15,15,25,.08) !important;
  color: #64748B !important;
}
html[data-theme="light"] .site-footer strong { color: #334155 !important }

/* ─── Hero eyebrow ─── */
html[data-theme="light"] .hero .eyebrow { color: #6D28D9 !important }

/* ─── Static card variant ─── */
html[data-theme="light"] .card.static { border-color: rgba(15,15,25,.12) !important }

/* ─── "What's new" announcement rows (.wn) ───
   The accent lives in two custom properties on the container, so light
   mode mostly just swaps them for the darker brand variants. Alphas go
   UP, per the stronger-not-lighter rule. */
html[data-theme="light"] .wn-list         { --wa: #6D28D9; --wa-r: 109,40,217 }
html[data-theme="light"] .wn-list.acc-cy  { --wa: #0891B2; --wa-r: 8,145,178 }
html[data-theme="light"] .wn-list.acc-pk  { --wa: #DB2777; --wa-r: 219,39,119 }
html[data-theme="light"] .wn-list.acc-gn  { --wa: #047857; --wa-r: 4,120,87 }

html[data-theme="light"] .wn {
  background: #fff !important;
  border-color: rgba(15,15,25,.12) !important;
  box-shadow: 0 1px 3px rgba(15,15,25,.05), 0 6px 16px rgba(15,15,25,.04) !important;
}
html[data-theme="light"] .wn:hover {
  background: rgba(var(--wa-r),.045) !important;
  border-color: rgba(var(--wa-r),.5) !important;
  box-shadow: 0 0 0 1px rgba(var(--wa-r),.12), 0 10px 26px rgba(15,15,25,.09) !important;
}
html[data-theme="light"] .wn::before { background: linear-gradient(90deg, transparent 0%, rgba(var(--wa-r),.45) 50%, transparent 100%) !important }
html[data-theme="light"] .wn h4 { color: #0F172A !important }
html[data-theme="light"] .wn p  { color: #334155 !important }
html[data-theme="light"] .wn-why { color: #475569 !important }
html[data-theme="light"] .wn-when {
  background: rgba(15,15,25,.04) !important;
  border-color: rgba(15,15,25,.14) !important;
  color: #64748B !important;
}
html[data-theme="light"] .wn-shift {
  background: rgba(180,83,9,.13) !important;
  border-color: rgba(180,83,9,.42) !important;
  color: #B45309 !important;
}
html[data-theme="light"] .wn-src a {
  background: rgba(var(--wa-r),.1) !important;
  border-color: rgba(var(--wa-r),.42) !important;
}
html[data-theme="light"] .wn-src a:hover {
  background: rgba(var(--wa-r),.2) !important;
  border-color: rgba(var(--wa-r),.68) !important;
}
html[data-theme="light"] .wn-asof {
  background: rgba(15,15,25,.03) !important;
  border-color: rgba(15,15,25,.12) !important;
  color: #475569 !important;
}
html[data-theme="light"] .wn-asof strong { color: #0F172A !important }