/* Voting Starter Kit case styles.
   Dependencies: global.css, ux-case-study.css
   [MODIFIED M3 2026-07-15] Rebuilt onto the VTH v2 token pattern (E19) for
   the unified UX case build. See docs/specs/M3_VSK_WST_Migration_Spec.md.
   Palette approved by Cafe 2026-07-12 (strengthened dark-hero blooms):
   primary #FF6000 (orange), secondary #207DC6 (blue). Legacy flat-token
   CSS (--ux-soft/--ux-pale/--vsk-blue/--vsk-navy, the bespoke Solution
   gradient background) retired wholesale; this file follows the
   ash.css/std.css/nds.css/rkt.css token derivation exactly, with
   F6/F22/F29/F30 lessons applied from the outset. Page-unique layout
   classes (vsk-finding-grid, vsk-concept-stack, vsk-social-feature,
   vsk-ds-stack) are kept — they carry structure not worth generalising
   into ux-case-study.css. */

.ux-case-page--voting-starter-kit {
  --ux-primary: #FF6000;
  --ux-secondary: #207DC6;
  --ux-theme: var(--ux-primary);
  /* [MODIFIED M23 V1] Heading ink brightened from #A33E00 to Cafe's
     confirmed #EC5B00. The prior dark orange read dirty on large headline
     text; brighter reads cleaner even at a small contrast cost, accepted
     deliberately since these are large display headings, not small text. */
  --ux-dark: #EC5B00;
  --ux-primary-soft: #FF8E4D;
  --ux-primary-pale: #FFF2EA;
  /* --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, #FFE3D1, #FFEADB 58%, #FFF1E8);
  --ux-tone-p: linear-gradient(145deg, #FFF6F0, #FFD9BF 82%);
  --ux-emphasis: linear-gradient(135deg, #A33E00, #C24A00 60%, #AC4100);
  --ux-alert-ink: #4FA8F0;
  --ux-accent-ink: var(--ux-secondary);
  --ux-strong-ink: var(--ux-primary);
  --section-pad: 144px;
}

@media (max-width: 900px) {
  .ux-case-page--voting-starter-kit {
    --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--voting-starter-kit {
  --ux-accent-ink: color-mix(in srgb, var(--ux-secondary) 55%, white);
  --ux-strong-ink: color-mix(in srgb, var(--ux-primary) 62%, white);
  /* [MODIFIED M23 V1] --ux-dark falls back to the neutral --theme-text in
     dark mode (headings just read in the page's normal dark-mode text
     colour), unaffected by the light-mode brightening above. Left as-is. */
  --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--voting-starter-kit figcaption {
  color: color-mix(in srgb, var(--ux-theme) 70%, var(--theme-text-soft));
}

[data-theme=dark] .ux-case-page--voting-starter-kit 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).
   [F30 lesson applied] .ux-kicker--chapter listed here too. */
.ux-case-page--voting-starter-kit .ux-kicker,
.ux-case-page--voting-starter-kit .ux-intro p,
.ux-case-page--voting-starter-kit .ux-chapter-head .ux-kicker,
.ux-case-page--voting-starter-kit .ux-section-head .ux-kicker {
  color: var(--ux-accent-ink);
}

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

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

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

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

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

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

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

.ux-case-page--voting-starter-kit .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--voting-starter-kit .ux-tier-s .ux-card,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-l .ux-card,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-p .ux-card,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--voting-starter-kit .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--voting-starter-kit .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--voting-starter-kit .ux-tier-p .ux-influence {
  --card-border-hover: var(--ux-alert-ink);
}

.ux-case-page--voting-starter-kit .ux-influence {
  margin-top: 56px;
}

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

/* ═══════════════════════════════════════════════════════════════════════
   Hero — frosted dual-bloom (Master Spec 7.1), strengthened dark-hero
   (option A pattern, approved by Cafe 2026-07-12)
   ═══════════════════════════════════════════════════════════════════════ */

.vsk-hero {
  background-image: none;
  background: linear-gradient(140deg, #FFF1E8, #FFF9F5);
}

.vsk-hero::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 54% at 14% 16%, rgba(255, 96, 0, 0.34), transparent 74%),
    radial-gradient(ellipse 52% 46% at 90% 18%, rgba(32, 125, 198, 0.30), transparent 74%);
  filter: blur(34px);
}

[data-theme=dark] .vsk-hero {
  background: #0A0502;
}

[data-theme=dark] .vsk-hero::before {
  background:
    radial-gradient(ellipse 64% 60% at 15% 16%, rgba(255, 142, 77, 0.70), transparent 70%),
    radial-gradient(ellipse 58% 52% at 88% 20%, rgba(79, 168, 240, 0.54), transparent 70%);
  filter: blur(36px);
}

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

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

/* ═══════════════════════════════════════════════════════════════════════
   Problem — evidence chart alongside the HMW/note text
   ═══════════════════════════════════════════════════════════════════════ */

.vsk-problem-grid {
  grid-template-columns: minmax(0, .5fr) minmax(420px, .5fr);
}

.vsk-problem-chart img {
  box-shadow: var(--theme-shadow-card);
  background: var(--theme-surface);
}

/* [MODIFIED M23 V2] Plain variant: no card shadow/frame, no enlarge
   affordance, since the Problem image no longer opens the modal. */
.vsk-problem-chart--plain img {
  box-shadow: none;
  background: transparent;
  border-radius: var(--ux-radius);
}

/* ═══════════════════════════════════════════════════════════════════════
   Solution — three touchpoint cards
   [MODIFIED M23 Bug2 C4] This section is ux-tier-s (light background,
   set in Bug1 V3). These cards were never updated from their original
   dark-background styling — near-white text on a near-white translucent
   fill, so the label/title/body were almost invisible. Rewritten for a
   light surface: solid card fill, soft border, dark theme text.
   ═══════════════════════════════════════════════════════════════════════ */

.ux-touchpoint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.ux-touchpoint-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ux-theme) 20%, var(--theme-border-soft));
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ux-touchpoint-card:hover {
  border-color: color-mix(in srgb, var(--ux-theme) 34%, var(--theme-border));
}

.ux-touchpoint-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  display: block;
  border-radius: var(--ux-radius);
  background: var(--theme-surface-soft);
}

.ux-touchpoint-card span {
  display: block;
  margin-top: 18px;
  color: var(--ux-accent-ink, var(--ux-dark));
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ux-touchpoint-card h3 {
  margin-top: 8px;
  color: var(--theme-text);
  font-size: 1.1rem;
}

.ux-touchpoint-card p {
  margin-top: 10px;
  color: var(--theme-text-soft);
  font-size: .9rem;
  line-height: 1.55;
}

[data-theme=dark] .ux-touchpoint-card {
  background: color-mix(in srgb, var(--ux-primary-soft) 20%, var(--theme-surface));
  border-color: color-mix(in srgb, var(--ux-primary-soft) 22%, var(--theme-border));
}

/* Outcome video — source is 1920x1080, scoped to this project only */
.ux-video--outcome {
  aspect-ratio: 1920 / 1080;
}

/* ═══════════════════════════════════════════════════════════════════════
   Research (Scope and Findings) — findings grid
   ═══════════════════════════════════════════════════════════════════════ */

.vsk-finding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

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

.vsk-finding-grid span,
.vsk-finding-grid strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ux-accent-ink);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vsk-finding-grid h3 {
  margin-bottom: 12px;
  color: var(--theme-text);
  font-size: 1.08rem;
}

.vsk-finding-grid p {
  color: var(--theme-text-soft);
  font-size: .94rem;
  line-height: 1.58;
}

.vsk-finding-grid strong {
  margin-top: 20px;
  color: var(--ux-strong-ink);
}

/* [MODIFIED E19] border-color routed through --card-border instead of
   declared directly — same silent-override pattern already fixed on WST. */
[data-theme=dark] .vsk-finding-grid article {
  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));
}

/* [MODIFIED M23 V5] Implication row, paired underneath the Finding row,
   same pattern as RKT's rkt-finding--implication. */
.vsk-finding-grid--implication {
  margin-top: 14px;
}

.vsk-finding--implication {
  padding: 16px 24px;
  background: var(--ux-primary-pale);
  border-color: color-mix(in srgb, var(--ux-secondary) 30%, var(--theme-border-soft));
}

.vsk-finding--implication span {
  margin-bottom: 6px;
}

.vsk-finding--implication p {
  color: var(--ux-dark, var(--theme-text));
  font-weight: 600;
}

[data-theme=dark] .vsk-finding--implication {
  background: color-mix(in srgb, var(--ux-primary-soft) 24%, var(--theme-surface));
}

/* Principles — uses shared ux-icon-card from ux-case-study.css */
.ux-principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

/* [MODIFIED M23 V6, updated Bug2 A1, fixed Bug2-followup-2] Icon
   unframed and enlarged, same treatment as NDS N7, so the Research
   Synthesis and Principles cards match across pages. Markup switched
   from bespoke inline SVG to Tabler webfont icons (<i class="ti
   ti-name">) — this also fixes the black "Fit the medium" icon, which
   was a bare <rect> falling back to the SVG default fill because the
   shared stroke rule never covered rect.
   ROOT CAUSE of the size not applying: the global ".ux-card span" rule
   (ux-case-study.css) sets font-size: .72rem (~11px) on any bare <span>
   inside a .ux-card, ties in specificity with .ux-principle-grid
   .ux-icon-card__icon, and wins on source order (ux-case-study.css loads
   before vsk.css), so this 1.9rem never actually applied — same defect
   Cafe found on NDS via inspector. Fixed below with a selector routed
   through the actual .ux-card parent so it wins outright. */
.ux-principle-grid .ux-icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-bottom: 18px;
  background: none;
  border-radius: 0;
  color: var(--ux-strong-ink);
  font-size: 1.9rem;
  line-height: 1;
}

.ux-principle-grid .ux-card .ux-icon-card__icon {
  font-size: 1.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Validation (Concept Exploration and Testing, relabelled) — narrative
   style comparison stack
   ═══════════════════════════════════════════════════════════════════════ */

.vsk-concept-stack {
  display: grid;
  gap: 44px;
  margin-top: 44px;
}

.vsk-concept-stack article {
  display: grid;
  grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr);
  gap: 42px;
  align-items: center;
  padding-top: 34px;
}

.vsk-concept-stack span {
  display: block;
  margin-bottom: 10px;
  color: var(--theme-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vsk-concept-stack h3 {
  margin-bottom: 14px;
  color: var(--ux-dark, var(--theme-text));
  font-size: 1.35rem;
}

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

.vsk-concept-stack figure {
  margin: 0;
}

.vsk-concept-stack img {
  width: 100%;
  display: block;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.vsk-develop-influence {
  max-width: 920px;
  margin-top: 44px;
}

/* [MODIFIED M23 V7] Removes the 920px cap so Influence spans the full
   section width, matching Cafe's request. */
.vsk-influence--full {
  max-width: none;
}

/* [MODIFIED M23 V7] Hidden concept-style panel, same Read more pattern as
   rkt-develop-more. */
.vsk-concept-more[hidden] {
  display: none;
}

.vsk-concept-more .vsk-concept-stack {
  margin-top: 44px;
}

.vsk-concept-expand {
  margin-top: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Delivery — hidden Read more panel (V8)
   ═══════════════════════════════════════════════════════════════════════ */

#vsk-delivery-more[hidden] {
  display: none;
}

.vsk-delivery-expand {
  margin-top: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Delivery (Final Design Decisions) — social card feature + touchpoints
   ═══════════════════════════════════════════════════════════════════════ */

/* [MODIFIED M23 V8] Container box removed (padding/border/background) so
   this reads flush with the other Delivery sub-sections, matching how
   Folded Brochure and Responsive Website below it are presented. */
.vsk-social-feature {
  display: grid;
  grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr);
  gap: 42px;
  align-items: center;
  margin-bottom: 70px;
}

.vsk-social-feature h3 {
  color: var(--ux-dark, var(--theme-text));
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
}

.vsk-social-feature p:not(.ux-kicker) {
  margin-top: 22px;
  color: var(--theme-text-soft);
  line-height: 1.62;
}

/* [MODIFIED M23 Bug2 C3] This block sits inside the tier-d (dark orange)
   Delivery section, but its own h3/p rules above hard-code light-background
   colours (--ux-dark, --theme-text-soft) at higher specificity than the
   shared .ux-tier-d h3/p rule in ux-case-study.css, so the heading and
   description were low-contrast dark-on-dark. Scoped override restores
   readable light text to match every other element in this section. */
.ux-tier-d .vsk-social-feature h3 {
  color: #fff;
}

.ux-tier-d .vsk-social-feature p:not(.ux-kicker) {
  color: rgba(255, 255, 255, .82);
}

.vsk-social-feature figure {
  margin: 0;
}

.vsk-social-feature img {
  width: 100%;
  display: block;
  border-radius: var(--ux-radius);
  background: transparent;
}

.vsk-social-feature figcaption {
  margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Design (Visual System) — swatches + typography/icon/illustration stack
   ═══════════════════════════════════════════════════════════════════════ */

.ux-case-page--voting-starter-kit .ux-swatch-grid {
  margin-top: 42px;
  margin-bottom: 52px;
}

.ux-swatch--orange       { background: #FF6000; }
.ux-swatch--orange-light { background: #FFD0AA; color: #242947; }
.ux-swatch--orange-pale  { background: #FEF0E4; color: #242947; }
.ux-swatch--blue-soft    { background: #B6D3E7; color: #242947; }
.ux-swatch--blue         { background: #207DC6; }
.ux-swatch--navy         { background: #242947; }

.vsk-ds-stack {
  display: grid;
  gap: 58px;
}

.vsk-ds-stack article {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: 42px;
  align-items: center;
  padding-top: 42px;
}

.vsk-ds-stack article:nth-child(2) {
  grid-template-columns: minmax(0, .58fr) minmax(0, .42fr);
}

/* [MODIFIED M23 Bug2 A3/C2] Size reduced from clamp(1.4rem,2vw,2rem) to
   match RKT's rkt-ds-stack h3 — that size was tuned to sit under a kicker
   line; with the kicker removed the h3 is now the sub-block's only title
   and should read at the smaller VTH v2 scale. */
.vsk-ds-stack h3 {
  color: var(--ux-dark, var(--theme-text));
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  margin-bottom: 14px;
}

.vsk-ds-stack p:not(.ux-kicker) {
  color: var(--theme-text-soft);
  line-height: 1.62;
}

.vsk-ds-stack figure {
  margin: 0;
}

.vsk-ds-stack img {
  width: 100%;
  display: block;
  border-radius: var(--ux-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-card);
}

.vsk-ds-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.vsk-ds-gallery img {
  height: 100%;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

[data-theme=dark] .vsk-ds-stack img:not(.vsk-ds-gallery img) {
  background: var(--theme-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   Feedback — uses shared ux-feedback-grid/card/icon from ux-case-study.css
   ═══════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 1180px) {
  .vsk-problem-grid,
  .vsk-concept-stack article,
  .vsk-social-feature,
  .vsk-ds-stack article,
  .vsk-ds-stack article:nth-child(2) {
    grid-template-columns: 1fr;
  }
  .ux-touchpoint-grid,
  .vsk-finding-grid,
  .vsk-ds-gallery {
    grid-template-columns: 1fr;
  }
  .ux-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ux-principle-grid {
    grid-template-columns: 1fr;
  }
}