/* Who's Singing OuTūīside? case styles.
   Dependencies: global.css, ux-case-study.css
   [MODIFIED M4 2026-07-16] Rebuilt from scratch onto the VTH v2 token
   pattern (E19) for the unified UX case build, per
   docs/specs/M4_WSO_Migration_Spec.md. See docs/audits/Case_Unification_Audit.md
   §3 for the 7-step migration checklist this follows.
   Palette approved by Cafe 2026-07-12: inverted pair, ink-green primary
   #16402E (candidate A) leading, orange #FF7701 secondary accenting. This
   REPLACES the old sitewide primary (#30352E dark olive neutral) — every
   reference to the old pair is retired from this file, which is a full
   rewrite (the old 864-line file, 31% dead code per Audit 2's S1 finding,
   is not carried forward). Token derivation follows ash.css/std.css/
   nds.css/rkt.css/vsk.css/wst.css exactly, with the F6/F22/F29/F30/W5
   lessons (see the .wso-principle-icon note below) applied from the
   outset. Card icons use Tabler webfont from the start (Bug2 A1 lesson),
   not hand-drawn inline SVG. */

.ux-case-page--wso {
  --ux-primary: #16402E;
  --ux-secondary: #FF7701;
  --ux-theme: var(--ux-primary);
  --ux-dark: #0E2A1E;
  --ux-primary-soft: #4B8A6A;
  --ux-primary-pale: #EDF5F0;
  /* --ux-primary-dark — the deep-primary base the dark-mode --ux-emphasis
     mixes into (Master Spec 2.4). Mandatory for mid-tone primaries. */
  --ux-primary-dark: color-mix(in srgb, var(--ux-primary) 55%, black);
  --ux-tone-s: linear-gradient(150deg, #D6EAE0, #E4F1EA 58%, #E9F4EE);
  --ux-tone-p: linear-gradient(145deg, #F1F9F5, #CDE7DA 82%);
  --ux-emphasis: linear-gradient(135deg, #1C4A36, #25593F 60%, #1F4E38);
  /* alert-ink is the vivid secondary (orange) — no olive-desaturation
     problem here, unlike the old #30352E primary. */
  --ux-alert-ink: #FF9A4D;
  --ux-accent-ink: var(--ux-secondary);
  --ux-strong-ink: var(--ux-primary);
  --section-pad: 144px;
}

@media (max-width: 900px) {
  .ux-case-page--wso {
    --section-pad: 80px;
  }
}

/* Dark-mode block redefines ALL of --ux-primary-pale / --ux-tone-s /
   --ux-tone-p / --ux-emphasis (Master Spec 13.8 item 1), and
   --ux-emphasis mixes into --ux-primary-dark, not the raw mid-tone
   primary (item 2). Applied from the outset per the F6 lesson. */
[data-theme=dark] .ux-case-page--wso {
  --ux-accent-ink: color-mix(in srgb, var(--ux-secondary) 55%, white);
  --ux-strong-ink: color-mix(in srgb, var(--ux-primary-soft) 62%, white);
  --ux-dark: var(--theme-text);
  --ux-primary-pale: color-mix(in srgb, var(--ux-primary-soft) 46%, var(--theme-bg));
  --ux-tone-s: linear-gradient(150deg, color-mix(in srgb, var(--ux-primary-soft) 28%, var(--theme-bg)), color-mix(in srgb, var(--ux-primary-soft) 16%, var(--theme-bg)) 72%);
  --ux-tone-p: linear-gradient(145deg, var(--theme-bg), color-mix(in srgb, var(--ux-primary-soft) 30%, var(--theme-bg)) 82%);
  --ux-emphasis: linear-gradient(135deg,
    color-mix(in srgb, var(--ux-primary-soft) 22%, var(--ux-primary-dark)),
    color-mix(in srgb, var(--ux-primary-soft) 34%, var(--ux-primary-dark)) 60%,
    color-mix(in srgb, var(--ux-primary-soft) 20%, var(--ux-primary-dark)));
}

.ux-case-page--wso figcaption {
  color: color-mix(in srgb, var(--ux-theme) 70%, var(--theme-text-soft));
}

[data-theme=dark] .ux-case-page--wso figcaption {
  color: color-mix(in srgb, var(--ux-primary-soft) 70%, var(--theme-text-soft));
}

/* Kickers and ink-token routing (Master Spec 6.1/10.4). */
.ux-case-page--wso .ux-kicker,
.ux-case-page--wso .ux-intro p,
.ux-case-page--wso .ux-chapter-head .ux-kicker,
.ux-case-page--wso .ux-section-head .ux-kicker {
  color: var(--ux-accent-ink);
}

.ux-case-page--wso .ux-related .ux-kicker {
  color: var(--theme-muted);
}

.ux-case-page--wso .ux-meta span,
.ux-case-page--wso .ux-skills > span {
  color: var(--ux-accent-ink);
}

.ux-case-page--wso .ux-skills em {
  border-color: var(--ux-strong-ink);
  color: var(--ux-strong-ink);
}

.ux-case-page--wso .ux-lens span {
  color: var(--ux-accent-ink);
}

.ux-case-page--wso .ux-lens a {
  color: var(--ux-strong-ink);
}

.ux-case-page--wso .ux-recipe-primary span {
  color: var(--ux-accent-ink);
}

/* Tier-d kicker override (matches vth-v2.css Section 2 pattern) */
.ux-case-page--wso .ux-tier-d .ux-kicker {
  color: var(--ux-alert-ink) !important;
}

.ux-case-page--wso .ux-tier-d .ux-influence strong {
  color: var(--ux-alert-ink);
}

/* Dark-mode card lift across S/L/P tiers (vth-v2.css C4/E1 pattern) */
[data-theme=dark] .ux-case-page--wso .ux-tier-s .ux-card,
[data-theme=dark] .ux-case-page--wso .ux-tier-l .ux-card,
[data-theme=dark] .ux-case-page--wso .ux-tier-p .ux-card,
[data-theme=dark] .ux-case-page--wso .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--wso .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--wso .ux-tier-p .ux-influence {
  background: color-mix(in srgb, var(--ux-primary-soft) 26%, var(--theme-surface));
  --card-border: color-mix(in srgb, var(--ux-primary-soft) 24%, var(--theme-border));
  --card-border-hover: var(--ux-strong-ink);
}

[data-theme=dark] .ux-case-page--wso .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--wso .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--wso .ux-tier-p .ux-influence {
  --card-border-hover: var(--ux-alert-ink);
}

.ux-case-page--wso .ux-influence {
  margin-top: 56px;
}

.ux-case-page--wso .ux-influence strong {
  color: var(--ux-strong-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero — frosted dual-bloom (Master Spec 7.1), enlarged ellipses
   (strengthened, approved by Cafe 2026-07-12): green-soft @0.68 /
   orange-bright @0.50 in dark mode
   ═══════════════════════════════════════════════════════════════════════ */

.wso-hero {
  background-image: none;
  background: linear-gradient(140deg, #ECF4F0, #F7FBF9);
}

.wso-hero::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 54% at 14% 16%, rgba(22, 64, 46, 0.40), transparent 74%),
    radial-gradient(ellipse 52% 46% at 90% 18%, rgba(255, 119, 1, 0.30), transparent 74%);
  filter: blur(34px);
}

[data-theme=dark] .wso-hero {
  background: #020805;
}

[data-theme=dark] .wso-hero::before {
  background:
    radial-gradient(ellipse 64% 60% at 15% 16%, rgba(75, 138, 106, 0.68), transparent 70%),
    radial-gradient(ellipse 58% 52% at 88% 20%, rgba(255, 154, 77, 0.50), transparent 70%);
  filter: blur(36px);
}

[data-theme=dark] .wso-hero .ux-hero__copy h1 {
  color: #fff;
}

[data-theme=dark] .wso-hero .ux-hero__copy p {
  color: rgba(255, 255, 255, .82);
}

/* ═══════════════════════════════════════════════════════════════════════
   Problem — HMW statement colouring. [MODIFIED M4-followup] Both the
   "How might we" lead-in and the "short, story-led, interactive learning
   journey" phrase now share the orange accent (Cafe's request); the
   trailing "without feeling overwhelmed?" phrase no longer carries its
   own colour and reads in the h2's plain text colour instead. The Problem
   note paragraph below (per Cafe's item 2) was removed from the markup.
   ═══════════════════════════════════════════════════════════════════════ */

.ux-case-page--wso .ux-problem h2 strong,
.ux-case-page--wso .ux-problem h2 em {
  color: var(--ux-secondary);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   Solution — [TRIAL M4-followup] solution.png as the section's background
   image, with the text column sitting in a solid-colour panel on top so
   it stays readable over the photo. Text styling itself (h2/p rules)
   is untouched — only the panel backing and section background are new.
   ROLLBACK: delete this block plus the wso-solution/wso-solution-panel
   classes on the section and .ux-copy in the HTML to return to the plain
   ux-tier-s section.
   ═══════════════════════════════════════════════════════════════════════ */

.wso-solution {
  position: relative;
  background-image: url("https://pub-1cd8987f6bec4bed9e8f92d877e3e854.r2.dev/projects/wso/solution.png");
  background-size: cover;
  background-position: center;
}

.wso-solution-panel {
  padding: 36px 40px;
  border-radius: var(--ux-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-card);
}

[data-theme=dark] .wso-solution-panel {
  background: color-mix(in srgb, var(--ux-primary-soft) 30%, var(--theme-surface));
}

/* ═══════════════════════════════════════════════════════════════════════
   Outcome — absorbs the former "Video placeholder" section, real video
   ═══════════════════════════════════════════════════════════════════════ */

.wso-video {
  display: block;
  width: 100%;
  aspect-ratio: 1660 / 1080;
  border-radius: var(--ux-radius);
  margin-top: 32px;
  background: #000;
  box-shadow: var(--theme-shadow-card);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   Feedback — uses shared ux-feedback-* from ux-case-study.css.
   Override to the secondary orange accent, same fix pattern as WST.
   ═══════════════════════════════════════════════════════════════════════ */

/* [MODIFIED E19] Both border-color declarations routed through the
   contract variables instead of declared directly. */
.ux-case-page--wso .ux-feedback-card {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--ux-secondary) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--ux-secondary) 10%, var(--theme-surface));
  --card-border: color-mix(in srgb, var(--ux-secondary) 22%, var(--theme-border-soft));
  --card-border-hover: color-mix(in srgb, var(--ux-secondary) 34%, var(--theme-border));
}

.ux-case-page--wso .ux-feedback-icon {
  background: color-mix(in srgb, var(--ux-secondary) 16%, var(--theme-surface));
  color: var(--ux-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Research (Discover minus the promoted Background content) — primary
   and secondary research card pairs
   ═══════════════════════════════════════════════════════════════════════ */

.wso-sub-heading {
  margin: var(--space-xl) 0 24px;
  color: var(--ux-dark, var(--theme-text));
  font-size: 1.05rem;
  font-weight: 800;
}

.wso-research-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* [MODIFIED E19] Light-mode border: shorthand routed through --card-border. */
.wso-research-card {
  padding: 28px;
  --card-border: color-mix(in srgb, var(--ux-theme) 18%, var(--theme-border-soft));
  border-radius: var(--ux-radius);
  background: var(--theme-surface);
}

.wso-research-card h4 {
  margin-bottom: 10px;
  color: var(--theme-text);
  font-size: 1.05rem;
}

.wso-research-card p {
  margin-bottom: 16px;
  color: var(--theme-text-soft);
  font-size: .92rem;
  line-height: 1.6;
}

.wso-research-card figure {
  margin: 0;
}

.wso-research-card img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
}

.wso-research-card__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wso-research-card__images--stack {
  grid-template-columns: 1fr;
}

.wso-research-card__images img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
}

.wso-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wso-info-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wso-info-grid img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
}

/* [MODIFIED E19] border-color routed through --card-border. */
[data-theme=dark] .wso-research-card {
  background: color-mix(in srgb, var(--ux-primary-soft) 26%, var(--theme-surface));
  --card-border: color-mix(in srgb, var(--ux-primary-soft) 24%, var(--theme-border));
}

/* ═══════════════════════════════════════════════════════════════════════
   Design (Define principles + Develop's design half + Design System
   folded in). Principle cards use Tabler icons from the outset.

   [W5 lesson applied] The global ".ux-card span" rule (ux-case-study.css)
   sets font-size .72rem on any bare <span> inside .ux-card, outranking a
   single-class icon selector. Routed through the .ux-card parent from the
   start so the icon size wins outright, avoiding the bug WST's
   .wst-principle-icon silently had for two fix rounds.
   ═══════════════════════════════════════════════════════════════════════ */

.wso-principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 28px;
  margin-top: 44px;
}

.wso-principle-card {
  min-height: 190px;
  padding: 32px;
}

.ux-card.wso-principle-card .wso-principle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-bottom: 22px;
  border-radius: 0;
  color: var(--ux-strong-ink);
  background: none;
  font-size: 2.75rem;
  line-height: 1;
}

.wso-principle-card h3 {
  margin-bottom: 10px;
}

.wso-principle-card p {
  line-height: 1.6;
}

.ux-case-page--wso .wso-principle-grid + .ux-influence {
  margin-top: 36px;
}

/* Ideation sketches — 2-up (Bug1-era "Fix 6" content decision retained:
   only 2 sketches, not 3) */
.wso-sketch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}

.wso-sketch-grid figure {
  margin: 0;
}

.wso-sketch-grid img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
}

.wso-sketch-grid figcaption {
  margin-top: 10px;
  font-size: .85rem;
}

/* Low-fidelity prototypes — full-width stack, first visible, rest behind
   Read more (same pattern as wst-develop-more / vsk-concept-more) */
.wso-lofi-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 44px;
}

.wso-lofi-item {
  margin: 0;
}

.wso-lofi-item img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
}

.wso-lofi-item figcaption {
  margin-top: 10px;
  font-size: .85rem;
}

#wso-lofi-more[hidden] {
  display: none;
}

.wso-lofi-expand {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Design System sub-blocks — plain title + description, alternating
   text/media, same structural family as wst-ds-stack / rkt-ds-stack */
.wso-ds-stack {
  display: grid;
  gap: 56px;
  margin-top: 44px;
}

.wso-ds-stack h3 {
  margin-bottom: 14px;
  color: var(--ux-dark, var(--theme-text));
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

.wso-ds-stack p {
  color: var(--theme-text-soft);
  line-height: 1.62;
}

.wso-ds-block {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: 48px;
  align-items: center;
}

.wso-ds-block--reverse {
  grid-template-columns: minmax(0, .66fr) minmax(0, .34fr);
}

.wso-ds-block--reverse .wso-ds-block__text {
  order: 1;
}

.wso-ds-block--reverse .wso-ds-block__figure {
  order: -1;
}

.wso-ds-block__figure {
  margin: 0;
}

.wso-ds-block__figure img {
  width: 100%;
  display: block;
  border-radius: var(--ux-radius);
}

.wso-ds-block__figure--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Validation — extracted from Define's usability-test mention (mapping
   §7/rule 2). [MODIFIED M4-followup] Rewritten from a plain summary
   paragraph to 3 test cards (one per lo-fi prototype), using wso.pdf's
   real UF/UI findings. .ux-test-row/.ux-test-card are page-scoped in
   wst.css, not shared — WSO defines its own copy here rather than
   reaching across pages.
   ═══════════════════════════════════════════════════════════════════════ */

.ux-test-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

/* [MODIFIED E19] Light-mode border: shorthand routed through --card-border. */
.ux-test-card {
  padding: 26px;
  --card-border: color-mix(in srgb, var(--ux-theme) 18%, var(--theme-border-soft));
  border-radius: var(--ux-radius);
  background: var(--theme-surface);
}

.ux-test-card h3 {
  margin-bottom: 10px;
  color: var(--ux-dark, var(--theme-text));
  font-size: 1.05rem;
}

.ux-test-card p {
  color: var(--theme-text-soft);
  font-size: .92rem;
  line-height: 1.6;
}

/* [MODIFIED E19] border-color routed through --card-border. */
[data-theme=dark] .ux-test-card {
  background: color-mix(in srgb, var(--ux-primary-soft) 26%, var(--theme-surface));
  --card-border: color-mix(in srgb, var(--ux-primary-soft) 24%, var(--theme-border));
}

@media (max-width: 1180px) {
  .ux-test-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Delivery — absorbs Final Design's scene-by-scene walkthrough, first 3
   scenes visible, remaining 7 behind Read more
   ═══════════════════════════════════════════════════════════════════════ */

.wso-final-scene {
  display: grid;
  grid-template-columns: minmax(0, .56fr) minmax(0, .44fr);
  gap: 42px;
  align-items: center;
  padding: 32px 0;
}

.wso-final-scene--reverse .wso-final-scene__figure {
  order: -1;
}

.wso-final-scene__figure {
  margin: 0;
}

.wso-final-scene__figure img {
  width: 100%;
  display: block;
  border-radius: var(--ux-radius);
  box-shadow: var(--theme-shadow-card);
}

.wso-final-scene__text h3 {
  margin-bottom: 10px;
  color: var(--theme-text);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.wso-final-scene__text p {
  color: var(--theme-text-soft);
  line-height: 1.65;
}

#wso-final-more[hidden] {
  display: none;
}

.wso-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 40px;
  margin-top: 16px;
}

[data-theme=dark] .ux-case-page--wso .ux-evidence img,
.ux-case-page--wso .wso-final-scene img {
  background: transparent;
}

/* Section rhythm: extra breathing room between major blocks inside a
   section that stacks multiple .container rows */
.ux-case-page--wso .ux-section > .container + .container {
  margin-top: 48px;
}

.ux-case-page--wso .ux-two-col + .container {
  margin-top: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .wso-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wso-ds-block,
  .wso-ds-block--reverse {
    grid-template-columns: 1fr;
  }
  .wso-ds-block--reverse .wso-ds-block__text {
    order: 0;
  }
  .wso-ds-block--reverse .wso-ds-block__figure {
    order: 0;
  }
  .wso-final-scene {
    grid-template-columns: 1fr;
  }
  .wso-final-scene--reverse .wso-final-scene__figure {
    order: 0;
  }
}

@media (max-width: 900px) {
  .wso-research-pair {
    grid-template-columns: 1fr;
  }
  .wso-sketch-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wso-principle-grid {
    grid-template-columns: 1fr;
  }
  .wso-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wso-ds-block__figure--pair {
    grid-template-columns: 1fr;
  }
}