/* ════════════════════════════════════════════════════════════════
 * NIOCCS case study — stylesheet entry point.
 *
 * The NIOCCS page reuses ODH's editorial design system wholesale
 * (sections, typography, cards, callouts, persona switcher). Those
 * partials live under assets/css/odh/ today; this file imports them
 * directly so both pages stay visually identical and in sync.
 * NIOCCS-specific additions are limited to: scaffold placeholders,
 * a tag-pill component, and a 3-group extension of the persona
 * switcher.  (See: shared editorial CSS could later move to a
 * neutral assets/css/shared/ folder — out of scope for scaffolding.)
 * ════════════════════════════════════════════════════════════════ */

@import url('../odh/_base.css');        /* type foundations, hero glow, body */
@import url('../nav.css');              /* shared nav: structure + light theme */
@import url('../odh/_nav.css');         /* dark-theme nav colour overrides */
@import url('../odh/_eu-system.css?v=20260516-7');   /* sections, headings, paper, callouts */
@import url('../odh/_goal-cards.css');  /* light + dark card grids */
@import url('../odh/_roles.css');       /* role / principle icon cards */
@import url('../odh/_comic.css');       /* comic figures + zoom lightbox */
@import url('../odh/_persona.css');     /* persona / user-group switcher */
@import url('../odh/_responsive.css');  /* shared responsive tiers */
@import url('./_placeholders.css');     /* NIOCCS scaffold placeholders */
@import url('../odh/_case-study.css?v=20260519-2');  /* shared NIOCCS + ODH case-study styles */

/* ─── User-group switcher ────────────────────────────────────────
   The persona component ships with patient/vendor states for ODH.
   NIOCCS has three user groups, so extend the show/active rules to
   newer / advanced / qa. Pure additive CSS — no ODH rule is changed. */
.persona-switcher[data-persona="newer"] .persona-card[data-persona="newer"],
.persona-switcher[data-persona="advanced"] .persona-card[data-persona="advanced"],
.persona-switcher[data-persona="qa"] .persona-card[data-persona="qa"] {
  display: grid;
}
.persona-switcher[data-persona="newer"] .persona-tab[data-persona="newer"],
.persona-switcher[data-persona="advanced"] .persona-tab[data-persona="advanced"],
.persona-switcher[data-persona="qa"] .persona-tab[data-persona="qa"] {
  color: #ffffff;
  border-color: rgba(20, 184, 166, 0.95);
  background: rgba(20, 184, 166, 0.12);
}

/* ─── Tag pills ──────────────────────────────────────────────────
   Short skill / principle labels. Same outlined-pill vocabulary as
   .eu-eyebrow, laid out as a wrapping row. Used for the My Role
   "Responsibilities" set and the "Guiding Principles" set. */
.eu-tag-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.eu-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(60, 64, 67, 0.26);
  color: rgba(60, 64, 67, 0.85);
}
.eu-section-dark .eu-tag {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82);
}

/* Center the tag row when its section is centered */
.eu-section--centered .eu-tag-list {
  justify-content: center;
}

/* ─── Card alignment ─────────────────────────────────────────────
   The shared dark card vertically-centers its content. In a row of
   equal-height cards whose subtitles wrap to different line counts,
   that pushes the shorter card's icon + title out of line. Top-align
   instead so every card's icon and title sit on the same baseline. */
.eu-goal-item-dark {
  justify-content: flex-start;
}

/* ─── Synthesis line ─────────────────────────────────────────────
   A mid-weight statement that sits between body copy and the large
   pullquote callout. Quieter than .eu-paper.is-insight, louder than
   a plain .eu-p. */
.eu-synthesis {
  font-family: 'Cal Sans', sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(60, 64, 67, 0.95);
  max-width: 820px;
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 4px solid rgba(20, 184, 166, 0.95);
}
.eu-section-dark .eu-synthesis {
  color: rgba(255, 255, 255, 0.92);
}

/* An .eu-eyebrow used as a mid-section label above an .eu-h2 (e.g. the
   "The Insight" eyebrow). The h2 normally carries a 96px top margin —
   pull it in tight so the eyebrow + heading read as one unit, and give
   the eyebrow its own room below the preceding divider. */
.eu-divider-dark + .eu-eyebrow {
  margin-top: 64px;
}
.eu-eyebrow + .eu-h2 {
  margin-top: 16px;
}

/* ════════════════════════════════════════════════════════════════
 * NIOCCS THEME — Teal
 *
 * Each case study carries its own accent identity (ODH = blue/indigo;
 * NIOCCS = teal). The shared ODH partials hardcode a cyan accent
 * (rgba(0,174,255)); the rules below re-skin every accent that shows
 * on the NIOCCS page to teal. They sit after the @imports, so they
 * win on source order — ODH itself is untouched.
 *
 * Teal scale:  400 #2DD4BF · 500 #14B8A6 · 600 #0D9488 · 700 #0F766E
 * Failure red (Main Failures badges, system-fail callout) is left
 * intentionally red — it signals problems, not the project accent.
 * ════════════════════════════════════════════════════════════════ */

/* Per-page accent token. .eu-emphasis (in the shared _eu-system.css)
   reads --eu-accent; ODH leaves it unset and falls back to blue. */
:root {
  --eu-accent: rgba(20, 184, 166, 0.95);
}

/* Hero radial glow — teal on the dark base */
.hero-glow::before {
  background: radial-gradient(ellipse 80% 70% at 50% 25%,
      rgba(45, 212, 191, 0.40) 0%,
      rgba(20, 184, 166, 0.32) 20%,
      rgba(13, 148, 136, 0.22) 40%,
      rgba(15, 118, 110, 0.12) 65%,
      rgba(4, 47, 46, 0) 90%);
}

/* Brighter glow variant used by .eu-section-glow (Redesign Strategy) */
.eu-section-glow .hero-glow::before {
  background: radial-gradient(ellipse 45% 60% at 50% 16%,
      rgba(45, 212, 191, 0.35) 0%,
      rgba(20, 184, 166, 0.29) 20%,
      rgba(13, 148, 136, 0.20) 40%,
      rgba(15, 118, 110, 0.11) 65%,
      rgba(4, 47, 46, 0) 90%);
}

/* Primary card badges — Phase 1 / Phase 2 / User-Research icons */
.eu-goal-badge-dark.is-primary {
  background: rgba(20, 184, 166, 0.15);
  color: rgba(45, 212, 191, 0.95);
}
.eu-goal-badge.is-primary {
  background: rgba(20, 184, 166, 0.12);
  color: rgba(13, 148, 136, 0.95);
}

/* Guiding-Principles role-card badges — _roles.css hardcodes ODH cyan;
   re-skin to teal so the principle icons match the NIOCCS accent. */
.role-badge {
  background: rgba(20, 184, 166, 0.15);
  color: rgba(45, 212, 191, 0.95);
}

/* Persona "AI-rendered" chip — _persona.css hardcodes ODH cyan border;
   re-tone the border to teal so the pill reads as part of the NIOCCS
   accent palette rather than the ODH one. Hover state matches. */
.persona-video-tag {
  border-color: rgba(20, 184, 166, 0.75);
}
.persona-video:hover .persona-video-tag {
  border-color: rgba(45, 212, 191, 0.95);
}

/* Phase eyebrow — "Phase 1" / "Phase 2" rendered as an upscaled,
   higher-contrast variant of the standard .eu-eyebrow pill. Bigger
   text + thicker border + heavier weight than the baseline eyebrow,
   so each phase gets a strong "this is a new chapter" marker without
   competing with the h2 itself. Centered to sit above the phase
   heading. Color is driven by .is-phase-1 / .is-phase-2 modifiers. */
.phase-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 8px 20px;
}

/* Pull the h2 tight against the phase eyebrow — the default .eu-h2
   margin-top is 96px, which is meant for stand-alone section heads;
   when the h2 follows a phase eyebrow they read as one unit. */
.phase-eyebrow + .eu-h2 {
  margin-top: 18px;
}

/* Phase 1 — teal-400. The page's default accent, used for the eyebrow
   pill (border + text via currentColor), the phase heading, and the
   strategy-card icon badges. Listing the badge rule explicitly even
   though it currently matches the default keeps Phase 1 stable if the
   default eu-goal-badge-dark.is-primary teal is ever retuned. */
.phase-eyebrow.is-phase-1 {
  color: rgba(45, 212, 191, 0.95);
}
.eu-section-dark .eu-h2.is-phase-1 {
  color: rgba(45, 212, 191, 0.95);
  text-shadow:
    0 2px 0 rgba(15, 118, 110, 0.40),
    0 4px 14px rgba(4, 47, 46, 0.38);
}
.is-phase-1 .eu-goal-badge-dark.is-primary {
  background: rgba(20, 184, 166, 0.15);
  color: rgba(45, 212, 191, 0.95);
}

/* Phase 2 — complementary shift to amber (#FBBF24, amber-400). Teal
   is cool blue-green; amber sits on the warm/complementary side of
   the wheel, giving Phase 2 a sharply distinct identity. Yellow-
   leaning rather than red so it does NOT collide with the page's
   red-for-failure semantics. This is the Phase 2 brand color and
   should be reused anywhere else Phase 2 is referenced down-page.
   Applied to the eyebrow pill, the phase heading, AND the card
   icon badges. */
.phase-eyebrow.is-phase-2 {
  color: rgba(251, 191, 36, 0.95);
}
.eu-section-dark .eu-h2.is-phase-2 {
  color: rgba(251, 191, 36, 0.95);
  text-shadow:
    0 2px 0 rgba(180, 83, 9, 0.40),
    0 4px 14px rgba(69, 26, 3, 0.38);
}
.is-phase-2 .eu-goal-badge-dark.is-primary {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.95);
}

/* Persona "Needs" accent bar (the "Challenges" bar stays red) */
.persona-label::before {
  background: rgba(45, 212, 191, 0.95);
}

/* Placeholder "PLACEHOLDER" kicker */
.ph-kicker {
  color: rgba(20, 184, 166, 0.95);
}

/* Editorial accent token — h1 accent span (eu-emphasis is themed via
   the --eu-accent variable declared on :root above). */
.eu-h1-accent {
  color: rgba(45, 212, 191, 1);
}

/* Zoomable comic on dark sections — swap ODH's blue ambient glow for
   teal so the figure matches the NIOCCS accent. */
.comic-zoomable.is-elevated-dark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.80),
    0 16px 48px rgba(0, 0, 0, 0.60),
    0 0 60px rgba(20, 184, 166, 0.15);
}
.comic-zoomable.is-elevated-dark:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.20),
    0 12px 32px rgba(0, 0, 0, 0.90),
    0 24px 64px rgba(0, 0, 0, 0.70),
    0 0 80px rgba(20, 184, 166, 0.30);
}

/* ─── Research focus checklist ───────────────────────────────────
   A two-column check-list under the "Research Approach" intro. Kept
   visually distinct from the icon-card grid lower in the section so
   the two don't read as the same component. */
.research-focus {
  max-width: 960px;
  margin: 56px auto 0;
}
.research-focus-label {
  font-family: 'Cal Sans', sans-serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 0 0 36px;
}
/* Columns size to their content and the pair is centered as a unit, so
   the empty space splits evenly on both sides. Equal 1fr columns left
   the text mass leaning left inside oversized cells. */
.research-focus-list {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  gap: 28px 88px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.research-focus-list li {
  position: relative;
  padding-left: 44px;
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.90);
}
/* Check badge — a teal-tinted circle */
.research-focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.16);
  border: 1.5px solid rgba(20, 184, 166, 0.55);
}
/* Check mark — rotated box drawing the tick inside the badge */
.research-focus-list li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 8px;
  height: 15px;
  border: solid var(--eu-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* Two content-width columns + an 88px gap need ~890px of room; below
   that the wrapper can't hold them, so collapse to a single column. */
@media (max-width: 1024px) {
  .research-focus-list {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* ════════════════════════════════════════════════════════════════
 * WIDE-SCREEN (>2047px) — grow the content column
 *
 * Below 2048px NIOCCS matches ODH exactly (editorial column 1368px,
 * hero 1024px). Above it, those fixed caps leave the content marooned
 * as a narrow "frame" on ultra-wide monitors. Here the column scales
 * with the viewport instead — capped at 1800px so paragraph lines
 * stay readable (over-long measure hurts reading). 70vw ≈ 1368px at
 * the 2048 breakpoint, so there is no jump as the tier changes.
 *
 * NOTE: ODH still uses the fixed caps at this tier. Applying this same
 * rule to the shared _eu-system.css / _base.css would fix ODH too and
 * keep the two pages matched — offered separately.
 * ════════════════════════════════════════════════════════════════ */
@media (min-width: 2048px) {
  .eu-wrapper,
  .hero-section .container {
    max-width: min(70vw, 1800px);
  }
}

/* ════════════════════════════════════════════════════════════════
 * BRAND MARK — NIOCCS page uses the teal accent for the header
 *   logo so the mark reflects the project mood (cyan = ODH,
 *   teal = NIOCCS). Overrides nav.css default (#00AEFF).
 * ════════════════════════════════════════════════════════════════ */
.brand-badge svg { color: rgba(20, 184, 166, 0.95); }