/* ── Zerion Brand — shared styles ── */

@font-face {
  font-family: 'Aeonik Pro';
  src: url('fonts/AeonikPro-Regular.4a470b7f.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Aeonik Pro';
  src: url('fonts/AeonikPro-Medium.26bcacbf.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: block;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  --sidebar-w: 300px;
  --header-h:  108px;

  /* ── Brand palette ── */
  --navy:     #06003C;
  --original: #3232DC;
  --digital:  #2461ED;
  --blue:     #56ACFF;
  --mint:     #3FFDEE;
  --peach:    #FF7583;
  --pink:     #FFBDFF;
  --grey:     #F0F0F0;

  /* ── Neutral scale (light) ── */
  --neutral-100: #f5f5f7;   /* Surface background */
  --neutral-200: #f0f0f2;   /* Component bg / input */
  --neutral-300: #e6e7e9;   /* Dividers, surface borders */
  --neutral-400: #cdced3;   /* Secondary element borders */
  --neutral-500: #9c9fa8;   /* UI secondary text & icons */
  --neutral-600: #81848e;   /* Secondary text & descriptions */
  --neutral-700: #71727d;   /* Placeholders, labels */
  --neutral-800: #44444e;   /* Navigation menu labels */

  /* ── Semantic — light ── */
  --surface:          #ffffff;
  --surface-hi:       var(--neutral-100);
  --surface-lo:       #2a2a3e; /* toggle active — unused in light */
  --text:             #16161a;              /* on-surface/regular  */
  --text-2:           var(--neutral-600);   /* on-surface/secondary */
  --text-3:           var(--neutral-500);
  --border:           var(--neutral-300);
  --divider:          var(--neutral-200);
  --negative-500:     #ff4a4a;              /* matches Figma Negative/500 */

  --font: 'Aeonik Pro', -apple-system, sans-serif;
}

html.dark {
  /* ── Neutral scale (dark) ── */
  --neutral-100: #1d1d21;   /* Surface background */
  --neutral-200: #29292c;   /* Component bg / input */
  --neutral-300: #2d2d32;   /* Dividers, surface borders */
  --neutral-400: #45464a;   /* Secondary element borders */
  --neutral-500: #70737b;   /* UI secondary text & icons */
  --neutral-600: #868990;   /* Secondary text & descriptions */
  --neutral-700: #9da0a6;   /* Placeholders, labels */
  --neutral-800: #cecfd1;   /* Navigation menu labels */

  --surface:    #16161a;    /* surface/regular */
  --surface-hi: var(--neutral-100);
  --surface-lo: #2a2a3e;
  --text:       #ececed;    /* on-surface/regular */
  --text-2:     var(--neutral-600);
  --text-3:     var(--neutral-500);
  --border:     var(--neutral-300);
  --divider:    var(--neutral-200);
  --negative-500: #ff5a5a;
}

/* ── Typography utility classes ──
   1:1 mapping to the Figma text styles. Use these on any element that
   should match a token (page headers, section descriptions, captions,
   labels). Color is set separately by a c-* utility or the element's
   own rule so the typography classes stay color-agnostic and reusable. */
.t-promo { font: 500 60px/72px var(--font); letter-spacing: -0.5px; }
.t-hero  { font: 500 40px/48px var(--font); letter-spacing: -0.5px; }
.t-h1    { font: 500 32px/36px var(--font); letter-spacing: -0.25px; }
.t-h2    { font: 500 24px/28px var(--font); }
.t-h3    { font: 500 20px/24px var(--font); }
.t-body  { font: 500 16px/24px var(--font); letter-spacing: 0.25px; }
.t-small { font: 500 14px/20px var(--font); letter-spacing: 0.3px; }

/* Color utilities — pair with t-* classes for full text styling. */
.c-text    { color: var(--text); }
.c-muted   { color: var(--text-2); }    /* Neutral/600 #81848e */
.c-soft    { color: var(--text-3); }    /* Neutral/500 #9c9fa8 */
.c-on-dark { color: #fff; }             /* white text on dark surfaces */
.c-navy    { color: var(--navy); }
.c-neg     { color: var(--negative-500); }

/* ── Accessibility primitives ──
   :focus-visible draws a keyboard-only focus ring on any interactive
   element that doesn't already define one. The 2px outline uses the
   brand blue so it reads as intentional, and the offset keeps it clear
   of inner shadows / strokes. */
*:focus-visible {
  outline: 2px solid var(--original);
  outline-offset: 2px;
  border-radius: 4px;
}

/* prefers-reduced-motion: shorten / disable the heavier animations for
   users who request reduced motion (system setting). The welcome fly-in
   on design.html and the cross-document view transitions are the main
   offenders. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* ── Base ── */
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  display: flex; flex-direction: column;
  z-index: 10;
}
.sidebar-logo {
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-nav { border-right: 1px solid var(--border); }
.z-logo { display: flex; align-items: center; text-decoration: none; }
.z-logo-light    { display: block; }
.z-logo-dark     { display: none; }
html.dark .z-logo-light { display: none; }
html.dark .z-logo-dark  { display: block; }

.sidebar-nav { padding: 32px; flex: 1; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; gap: 8px; }
.nav-section-label {
  font-size: 16px; font-weight: 500; line-height: 24px;
  letter-spacing: 0.25px; color: var(--text); text-decoration: none;
}
.nav-section-label.inactive { color: var(--text-2); }
.nav-sub { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }
/* Mobile-only nav links (Design Foundations / Milestones in drawer) */
.mobile-only-link { display: none; }
@media (max-width: 767px) {
  .mobile-only-link { display: block; }
}
.nav-item {
  display: block; font-size: 16px; font-weight: 400; line-height: 24px;
  letter-spacing: 0.1px; color: var(--text-2); text-decoration: none;
  transition: color 0.15s;
}
.nav-item:hover  { color: var(--text); }
.nav-item.active { color: var(--text); font-weight: 500; }
.nav-item.disabled { pointer-events: none; opacity: 0.4; cursor: default; }
.nav-soon {
  font-size: 11px; font-weight: 400;
  color: #b0b3bb; letter-spacing: 0.1px; margin-left: 4px;
}

/* ── Layout ── */
.main    { margin-left: var(--sidebar-w); }
.top-bar {
  position: sticky; top: 0; z-index: 5;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 48px;
}
.top-bar-logo { display: none; align-items: center; text-decoration: none; }
.top-bar-logo .z-logo-light { display: block; }
.top-bar-logo .z-logo-dark { display: none; }
html.dark .top-bar-logo .z-logo-light { display: none; }
html.dark .top-bar-logo .z-logo-dark { display: block; }
.content { padding: 32px 32px 80px; max-width: 1200px; margin: 0 auto; }

/* ── Theme toggle — single icon ── */
.theme-toggle {
  display: flex; background: var(--border);
  border-radius: 10px; padding: 3px;
}
.theme-btn {
  width: 36px; height: 32px; border-radius: 7px; border: none;
  cursor: pointer; background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: opacity 0.15s;
}
.theme-btn:hover { opacity: 0.75; }
.theme-btn svg { width: 16px; height: 16px; }
/* Light mode → show moon only (covers the in-top-bar toggle's ids and
   the floating toggle's -floating-suffixed ids both). */
#theme-light, #theme-light-floating { display: none; }
#theme-dark,  #theme-dark-floating  { display: flex; }
/* Dark mode → show sun only */
html.dark #theme-light, html.dark #theme-light-floating { display: flex; }
html.dark #theme-dark,  html.dark #theme-dark-floating  { display: none; }

/* Test-area variant — used on pages where the top bar is hidden.
   Defaults to top-right (used on test.html welcome page). When the
   sidebar is present (body.foundation-card), an override below pins
   the toggle to the bottom-left of the sidebar / grey panel instead.
   Renders as a bare sun/moon icon — no pill background, no border,
   no shadow, no inner button chrome. */
.floating-theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 50;
  background: transparent;
  padding: 0;
}
.floating-theme-toggle .theme-btn {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 6px;
  color: var(--text-2);
}
.floating-theme-toggle .theme-btn:hover {
  opacity: 1;
  color: var(--text);
}
/* On foundation-card pages the sidebar is always visible at viewport-left.
   Anchor the toggle to the bottom-left of the sidebar (sticky to viewport)
   so it reads as a sidebar footer rather than a floating control. */
/* Desktop foundation-card: pin to bottom-left of the sidebar/grey panel. */
body.foundation-card .floating-theme-toggle {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 16px;
  left: 16px;
}

/* Mobile foundation-card: the in-top-bar toggle (added inside .top-bar
   as a flex sibling of the burger) takes over. Hide this floating
   one so it doesn't duplicate. The top-bar's flex order keeps the
   toggle (order 2) between the logo (order 1) and burger (order 3). */
@media (max-width: 767px) {
  body.foundation-card .floating-theme-toggle {
    display: none;
  }
  /* Don't make the top-bar (with the burger + toggle inside) sticky —
     it should scroll with the content like any other top-of-page row. */
  body.foundation-card .top-bar {
    position: static;
  }
}

/* ── Top nav links (Design Foundations / Milestones) ── */
.top-nav-links {
  display: flex; gap: 32px; align-items: center;
  margin-right: 32px;
}
.top-nav-link {
  font-size: 16px; font-weight: 500; line-height: 24px;
  letter-spacing: 0.25px; color: var(--text-2);
  text-decoration: none; transition: color 0.15s; white-space: nowrap;
}
.top-nav-link:hover { color: var(--text); }
.top-nav-link.active { color: var(--text); }

/* ── Page header ── */
.page-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; margin-bottom: 32px;
}
.page-title { font-size: 60px; font-weight: 500; line-height: 72px; letter-spacing: -0.5px; }
.page-desc  { font-size: 20px; font-weight: 500; line-height: 24px; padding-top: 8px; }

/* ── Section ── */
.divider { height: 1px; background: var(--divider); margin: 48px 0 32px; }
.section-header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 32px; }
.section-title { font-size: 40px; font-weight: 500; line-height: 48px; letter-spacing: -0.5px; }
.section-desc  { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.25px; }

/* ── Hero ── */
.hero {
  width: 100%; height: 400px; border-radius: 16px;
  margin-bottom: 32px; overflow: hidden;
}
.hero video,
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dl-tooltip {
  position: fixed; display: none;
  background: rgba(236,236,240,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text); padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.1px;
  pointer-events: none; z-index: 9999; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
html.dark .dl-tooltip { background: rgba(29,29,33,0.92); color: var(--text); }

/* ── Large screen centering (sidebar 300 + content 1200 = 1500px total) ── */
@media (min-width: 1540px) {
  .sidebar { left: calc((100vw - 1500px) / 2); }
  .main {
    margin-left: calc((100vw - 1500px) / 2 + var(--sidebar-w));
    margin-right: calc((100vw - 1500px) / 2);
  }
  /* Replace individual header borders with a single full-viewport-width line */
  .sidebar-logo { border-bottom: none; }
  .top-bar      { border-bottom: none; }
  .sidebar-logo::after {
    content: '';
    position: fixed;
    top: calc(var(--header-h) - 1px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
    z-index: 5;
  }
}

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */

/* Hamburger button — desktop: hidden */
.menu-btn {
  display: none;
  width: 36px; height: 36px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-2);
  align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.15s; flex-shrink: 0;
}
.menu-btn:hover { color: var(--text); }
.menu-btn svg { width: 20px; height: 20px; }

/* Sidebar overlay backdrop */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* ── Tablet ≤ 1023px ── */
@media (max-width: 1023px) {
  :root { --sidebar-w: 220px; }
  .sidebar-logo { padding: 0 20px; }
  .sidebar-nav { padding: 24px 20px; }
  .top-bar { padding: 0 24px; }
  .content { padding: 24px 24px 60px; }
  .page-title { font-size: 48px; line-height: 56px; }
  .section-title { font-size: 32px; line-height: 40px; }
  .page-header { gap: 24px; margin-bottom: 32px; }
  .section-header { gap: 24px; }
  .hero { height: 320px; }
}

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.25, 0, 0, 1);
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }

  .main { margin-left: 0; }
  .menu-btn { display: flex; }

  /* Hide only inside .top-bar (inner pages have a hamburger to open sidebar) */
  .top-bar .top-nav-links { display: none; }

  /* Mobile top-bar layout for inner pages: logo (left) — theme — burger (right) */
  .top-bar-logo { display: flex; order: 1; margin-right: auto; }
  .top-bar .theme-toggle { order: 2; }
  .top-bar .menu-btn { order: 3; }

  .top-bar {
    padding: 0 20px;
    justify-content: space-between;
  }

  .content { padding: 20px 20px 60px; }

  .page-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .page-title { font-size: 36px; line-height: 44px; }
  .page-desc { font-size: 16px; line-height: 22px; }

  .section-header { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
  .section-title { font-size: 28px; line-height: 36px; }

  .hero { height: 220px; border-radius: 12px; margin-bottom: 32px; }
  .divider { margin: 28px 0 20px; }
}

/* ── Special text — scramble + reveal ── */
.special-text {
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
}


/* ──────────────────────────────────────────
   FOUNDATION CARD LAYOUT
   Opt-in via body.foundation-card. Gives the page a grey wash and
   floats the .main as a rounded card. Sidebar shows small triangle
   markers next to each section name.
────────────────────────────────────────── */
body.foundation-card {
  /* Slightly darker page wash (Neutral/200 = #f0f0f2) so the white card
     reads with a touch more contrast against the surround — matches the
     Figma foundations_showcase frame. */
  background: var(--neutral-200);
}
body.foundation-card .sidebar,
body.foundation-card .sidebar-logo,
body.foundation-card .sidebar-nav {
  background: transparent;
  border-right: none;
}
/* Match Figma 743:10712: logo at (24, 68), first nav item at y≈121.57.
   That's 68px above the logo, 32px below it before the first item.
   The global `.sidebar-logo { height: 108px }` rule would create a much
   larger gap, so we override it for foundation-card pages. */
body.foundation-card .sidebar-logo {
  border-bottom: none;
  height: auto;
  padding: 68px 24px 0;
}
body.foundation-card .sidebar-nav {
  padding: 32px 24px;
}
body.foundation-card .main {
  background: var(--surface);
  border-radius: 24px;
  /* 16px gap on top/right/bottom (was 12) — matches the Figma's roomier
     card framing. Card stays flush against the sidebar on the left. */
  margin: 16px 16px 16px var(--sidebar-w);
  overflow: hidden;
  /* Soften the instant swap between section contents on sidebar-hops:
     the SPA replaces this element entirely, and CSS animations on
     freshly-inserted elements fire automatically, so each new content
     fades in over 200ms. The outgoing content disappears in the same
     paint frame (instant) — fast and responsive but not jarring. */
  animation: spa-main-in 200ms ease-out;
}
@keyframes spa-main-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero on test-area pages: size to the media's natural aspect — no fixed
   height, no aspect-ratio enforcement. That removes the grey letterbox
   bars above/below the animation and lets the video/image fill its slot
   at native quality. Corner radius is bumped from the global 16 to 20
   to match the test-area visual-block scale. */
body.foundation-card .hero {
  height: auto;
  border-radius: 20px;
}
body.foundation-card .hero video,
body.foundation-card .hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}
/* Content fills the full width of the card; no max-width clamp. Even
   32px padding all around so the card hugs its content evenly. */
body.foundation-card .content {
  padding-top: 32px;
  padding-bottom: 32px;
  max-width: none;
}

/* Page/section headers on test-area pages stack VERTICALLY (single column)
   with the description spanning the full card width — Design Foundations
   uses a two-column "title left, description right" grid, but the
   foundations_showcase Figma stacks them and uses a smaller, lighter
   description style. Scoped so Design Foundations layout is unchanged. */
body.foundation-card .page-header,
body.foundation-card .section-header {
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Page description = Headline/H1 (32/36/-0.25), section description =
   Headline/H3 (20/24/0). Both Aeonik Medium, Neutral/500 (#9c9fa8) —
   updated to match the latest foundations_showcase Figma tokens. */
body.foundation-card .page-desc {
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.25px;
  color: var(--text-3);
  padding-top: 0;
}
body.foundation-card .section-desc {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--text-3);
}
body.foundation-card .page-title,
body.foundation-card .section-title {
  color: var(--text);
}
/* Hide the top-bar entirely on foundation-card pages — the Figma design
   has no top bar; content begins right at the top of the card with the
   page header. The mobile drawer still works via the sidebar overlay. */
body.foundation-card .top-bar {
  display: none;
}
@media (max-width: 767px) {
  /* On mobile we need the menu button back. Show only that part. */
  body.foundation-card .top-bar {
    display: flex;
    background: transparent;
    border-bottom: 1px solid var(--border);
  }
}
@media (min-width: 1540px) {
  body.foundation-card .main {
    margin: 16px calc((100vw - 1500px) / 2) 16px calc((100vw - 1500px) / 2 + var(--sidebar-w));
  }
  body.foundation-card .sidebar-logo::after { display: none; }
}
@media (max-width: 767px) {
  body.foundation-card .main {
    margin: 0;
    border-radius: 0;
  }
  /* On mobile the sidebar slides in over the page content as a drawer.
     The foundation-card transparent treatment (which makes the sidebar
     blend into the page grey on desktop) would leave the drawer almost
     invisible — restore the surface fill so the menu reads as a solid
     panel above the content. */
  body.foundation-card .sidebar,
  body.foundation-card .sidebar-logo,
  body.foundation-card .sidebar-nav {
    background: var(--surface);
  }
  /* Mobile drawer spacing: a bit of room above the logo + a clean
     breathing gap between the logo and the first menu item. */
  body.foundation-card .sidebar-logo {
    padding: 32px 24px 0;
    border-bottom: none;
  }
  body.foundation-card .sidebar-nav {
    padding: 32px 24px;
  }
}

/* ──────────────────────────────────────────
   CROSS-DOCUMENT VIEW TRANSITIONS
   Shared between design.html and every <section>.html page so the
   morph between the big triangles and the small sidebar markers feels
   continuous. Scoped to the Design area only — moved out of each
   page's inline <style> to keep them as the single source of truth.
   The page must also opt in with `@view-transition { navigation: auto; }`
   in its own <head> (cannot live in an external stylesheet per spec).
────────────────────────────────────────── */
::view-transition-group(*) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1);
}
::view-transition-old(*) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
::view-transition-new(*) {
  animation-duration: 320ms;
  animation-delay: 220ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Improve image rendering on the view-transition snapshots so the big
   triangle PNGs don't pixelate while scaling down into the small
   sidebar marker. The snapshot is captured at rendered (large) size,
   so the browser-default nearest-neighbour scaling during the morph
   shows aliasing. `image-rendering: auto` (or `optimizeQuality` for
   older syntax) keeps bilinear/Lanczos filtering active throughout. */
::view-transition-old(tri-color),
::view-transition-old(tri-illustrations),
::view-transition-old(tri-in-use),
::view-transition-old(tri-logo),
::view-transition-old(tri-motion),
::view-transition-old(tri-typography),
::view-transition-old(tri-visual-language),
::view-transition-new(tri-color),
::view-transition-new(tri-illustrations),
::view-transition-new(tri-in-use),
::view-transition-new(tri-logo),
::view-transition-new(tri-motion),
::view-transition-new(tri-typography),
::view-transition-new(tri-visual-language) {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* Per-triangle stagger — REVERSE direction default (right-to-left,
   visual-language leads at 0ms, color trails at 144ms). This is the
   wave that plays when navigating BACK to design.html (markers grow
   into triangles). The SPA injects a FORWARD stagger (color first)
   right before clicking from design.html → a section, so the two
   directions read as mirror opposites. */
::view-transition-group(tri-visual-language) { animation-delay: 0ms; }
::view-transition-group(tri-typography)      { animation-delay: 24ms; }
::view-transition-group(tri-motion)          { animation-delay: 48ms; }
::view-transition-group(tri-logo)            { animation-delay: 72ms; }
::view-transition-group(tri-in-use)          { animation-delay: 96ms; }
::view-transition-group(tri-illustrations)   { animation-delay: 120ms; }
::view-transition-group(tri-color)           { animation-delay: 144ms; }
::view-transition-old(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in;
}
/* Mobile: skip the morph entirely. On mobile the design.html triangles
   live in a 2-col grid that has no spatial relationship to the sidebar
   markers on the destination — the morph would fly them to mismatched
   targets and look broken. Short-circuit all VT animations so mobile
   navigations are an instant crossfade. */
@media (max-width: 767px) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* Sidebar nav with triangle markers */
.nav-item-with-tri {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Body/Accent 16/24/0.25 — Aeonik Medium. Inactive items use Neutral/500
     so they read as muted next to the active black label. */
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.25px;
  color: var(--text-3);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
}
.nav-item-with-tri:hover { color: var(--text); }
.nav-item-with-tri.active {
  color: var(--text);
}
.nav-item-with-tri.disabled { pointer-events: none; opacity: 0.5; }

.nav-tri {
  /* Small sidebar triangle marker — matches Figma node 736:10518 (13×17,
     pointing right toward the menu label, Neutral/400 inactive). */
  width: 13px;
  height: 17px;
  flex-shrink: 0;
  color: var(--neutral-400);   /* #cdced3 light / #45464a dark */
  transition: color 0.2s;
}
.nav-item-with-tri:hover .nav-tri { color: var(--text-2); }
.nav-item-with-tri.active .nav-tri { color: var(--text); }
.nav-tri svg { display: block; width: 100%; height: 100%; }

/* View transition rules are NOT global — they live only in the Test area
   pages so Design Foundations navigation is unaffected. See test.html and
   test_logo.html for those. */