/* Branded keyboard focus ring (keyboard only; follows each element's shape, and
   adapts to light/dark via --accent). Applies in both modes. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Close-button hover (applies in both modes; most case studies don't define one).
   The icon turns the accent colour — burnt orange in light, terracotta in dark.
   At the bottom of the page the button is already accent-filled, so there the
   icon turns black for contrast instead. */
.nav-close { transition: color 0.2s ease, border-color 0.2s ease; }
.nav-close:hover { color: var(--accent, #bd4228); }
.nav-close.is-complete:hover { color: #000; }

/* Instant theme switch: transitions are suppressed for the toggle flip so the
   whole page repaints in the new theme in one frame instead of cross-fading. */
html.theme-instant, html.theme-instant *, html.theme-instant *::before, html.theme-instant *::after { transition: none !important; }

/* Directional page transition for prev/next project navigation (cross-document
   View Transitions). Only the pager slides; every other navigation falls back to
   an instant (no-animation) transition. Unsupported browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
/* Circular theme reveal (toggle): when shrinking back to light, keep the old
   (dark) snapshot on top so it can contract over the new light page. */
html.theme-vt-out::view-transition-old(root) { z-index: 2147483647; }
html.theme-vt-out::view-transition-new(root) { z-index: 1; }
@keyframes cs-slide-out-left  { to   { transform: translateX(-100%); } }
@keyframes cs-slide-in-right  { from { transform: translateX(100%);  } }
@keyframes cs-slide-out-right { to   { transform: translateX(100%);  } }
@keyframes cs-slide-in-left   { from { transform: translateX(-100%); } }
:root:active-view-transition-type(cs-forward)::view-transition-old(root) { animation: cs-slide-out-left  0.45s cubic-bezier(.4,0,.2,1) both; }
:root:active-view-transition-type(cs-forward)::view-transition-new(root) { animation: cs-slide-in-right  0.45s cubic-bezier(.4,0,.2,1) both; }
:root:active-view-transition-type(cs-back)::view-transition-old(root)    { animation: cs-slide-out-right 0.45s cubic-bezier(.4,0,.2,1) both; }
:root:active-view-transition-type(cs-back)::view-transition-new(root)    { animation: cs-slide-in-left   0.45s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  :root:active-view-transition-type(cs-forward)::view-transition-old(root),
  :root:active-view-transition-type(cs-forward)::view-transition-new(root),
  :root:active-view-transition-type(cs-back)::view-transition-old(root),
  :root:active-view-transition-type(cs-back)::view-transition-new(root) { animation: none; }
}

/* Dark mode for case-study + vibe-coding pages (shared via <link>, loaded AFTER
   each page's inline <style> — the html[...] selector also outranks :root so the
   token overrides win regardless of source order).

   Dark mode is DESKTOP-ONLY: on mobile (<=768px) the page stays light and the
   toggle is hidden, so every dark override lives inside @media (min-width: 769px).
   A dim, warm palette, not pitch black. */
@media (min-width: 769px) {
  html[data-theme="dark"] {
    --cream:        #14161a;
    --white:        #1e2127;
    --ink:          #eceef2;
    --ink-soft:     #cdd1d9;
    --ink-muted:    #9298a4;
    --ink-faint:    #646a76;
    --rule:         #2c3038;
    --accent:       #cf6a4d;
    --accent-light: #232730;
  }

  /* Hardcoded light surfaces that ignore the tokens — force dark equivalents. */
  html[data-theme="dark"] blockquote { background: var(--accent-light); }
  html[data-theme="dark"] .nav-close { background: rgba(30,33,39,0.9) !important; }
  /* ...but at the bottom of the page the close button flips to its complete state.
     Use the dark terracotta accent (not light mode's #BD4228) so it matches the
     rest of the dark palette. The plain .nav-close override above outranks
     .nav-close.is-complete, so the complete state must be restated here to win. */
  html[data-theme="dark"] .nav-close.is-complete { background: var(--accent) !important; color: #fff; }
  /* The dark complete state sets the icon white at higher specificity than the
     shared .is-complete:hover rule, so restate the black hover to outrank it. */
  html[data-theme="dark"] .nav-close.is-complete:hover { color: #000; }

  /* Bottom-of-page prev/next pager: light mode is a near-black button with a white
     chevron; invert it for dark mode so it reads against the dark page. */
  html[data-theme="dark"] .cs-pager-btn { background: #fff; color: #1a1814; }
  html[data-theme="dark"] .cs-pager-btn:hover { color: var(--accent); }

  /* Hardcoded colors inside inline SVG diagrams (e.g. ford-ivi screen-size map):
     flip dark ink fills/strokes to light so they read on dark. */
  html[data-theme="dark"] [fill="#1a1814"], html[data-theme="dark"] [fill="#1A1814"] { fill: var(--ink); }
  html[data-theme="dark"] [stroke="#1a1814"], html[data-theme="dark"] [stroke="#1A1814"] { stroke: var(--ink); }
  html[data-theme="dark"] [fill="#716d67"], html[data-theme="dark"] [fill="#716D67"] { fill: var(--ink-muted); }
  html[data-theme="dark"] [stroke="#ddd9d2"], html[data-theme="dark"] [stroke="#DDD9D2"] { stroke: var(--rule); }
  /* ...but the ford-ivi "waterfall" flow cards stay cream in dark mode, so the
     SVG text inside them must keep its dark colours (the flips above would turn
     it light-on-cream and unreadable). */
  html[data-theme="dark"] .waterfall-flow [fill="#1a1814"], html[data-theme="dark"] .waterfall-flow [fill="#1A1814"] { fill: #1A1814; }
  html[data-theme="dark"] .waterfall-flow [fill="#716d67"], html[data-theme="dark"] .waterfall-flow [fill="#716D67"] { fill: #716D67; }

  /* Colored / multiply-blended spot illustrations that vanish on dark — disable
     multiply (overriding the inline style) and put them on a light card. */
  html[data-theme="dark"] img[src*="Uhoh"],
  html[data-theme="dark"] img[src*="q2b-case-study-img-1"],
  html[data-theme="dark"] img[src*="novo-app-score-legend"] {
    mix-blend-mode: normal !important;
    background: #f4efe6;
    padding: 1rem;
    border-radius: 8px;
  }

  /* Theme toggle: a circular button matching the close button at the next-page
     button's size (56px), in the slot directly below the close button. Shows at
     the top and slides away the moment you scroll down. */
  .theme-toggle {
    position: fixed;
    top: calc(2.5rem + 72px + 0.6rem);
    right: calc(2.5rem + 8px);
    z-index: 199;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(249,244,236,0.9);
    border: 1px solid var(--rule);
    padding: 0; cursor: pointer;
    color: var(--ink);
    transition: color 0.2s, background-color 0.25s ease, border-color 0.25s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  .theme-toggle:hover { color: var(--accent); }
  html[data-theme="dark"] .theme-toggle { background: rgba(30,33,39,0.9); }
  .theme-toggle.is-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  /* Icons stack and cross-fade + rotate between sun and moon on toggle. */
  .theme-toggle svg { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1); }
  .theme-toggle .ic-moon { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
  .theme-toggle .ic-sun  { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg) scale(0.4); }
  html[data-theme="dark"] .theme-toggle .ic-moon { opacity: 0; transform: translate(-50%,-50%) rotate(90deg) scale(0.4); }
  html[data-theme="dark"] .theme-toggle .ic-sun  { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
  html.theme-instant .theme-toggle svg { transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1) !important; }
  @media (prefers-reduced-motion: reduce) { .theme-toggle svg, html.theme-instant .theme-toggle svg { transition: none !important; } }
}

/* Mobile: light only, never show the toggle (the button exists in the DOM, so
   hide it explicitly since its styling lives in the desktop media query). */
@media (max-width: 768px) {
  .theme-toggle { display: none !important; }
}