/* MainProjekt — system layer
 *
 * Operational rules that act on the tokens defined in tokens.css.
 * Three jobs:
 *   1. Global focus-visible — keyboard accessibility, every page
 *   2. Reduced-motion override — zeros the motion tokens
 *   3. Print stylesheet — activates light mode + strips chrome
 *
 * Load AFTER tokens.css. Safe to add to any page in this system.
 */

/* ─────────────────────────────────────────────────────────────
   FOCUS — keyboard accessibility
   Suppress the default browser ring on pointer focus, but keep
   a visible ring under keyboard focus (:focus-visible).
   ───────────────────────────────────────────────────────────── */

*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* CTAs already have padded backgrounds — give the ring more breathing room. */
.mp-cta-primary:focus-visible,
.mp-cta-secondary:focus-visible {
  outline-offset: 3px;
}

/* TOC links sit inside a sidebar — tighter offset reads cleaner. */
.fg-toc-item:focus-visible,
.fg-toc-mobile-list a:focus-visible {
  outline-offset: 1px;
}

/* Skip-link — invisible until focused. Add <a class="skip" href="#main">…</a>
   as the first interactive element on the page when you need to bypass nav. */
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease);
  z-index: 100;
}
.skip:focus { transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — token-level kill switch
   Zero the motion tokens; everything that uses var(--dur-*) goes
   instantaneous. Pages that hard-code durations should still
   honour prefers-reduced-motion locally.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PRINT — light mode + chrome stripped
   Designed for training-night handouts. Inverts the palette to
   ink-on-paper, hides interactive chrome, prevents row splits.
   ───────────────────────────────────────────────────────────── */

@media print {
  /* Stronger than light mode — pure black ink on white. */
  :root {
    --background:           #ffffff;
    --foreground:           #000000;
    --card:                 #ffffff;
    --card-foreground:      #000000;

    --primary:              #000000;
    --primary-foreground:   #ffffff;

    --accent:               #c0492f;   /* darker coral, prints cleaner */
    --secondary:            #2b3e58;

    --border:               rgba(0, 0, 0, 0.20);
    --border-soft:          rgba(0, 0, 0, 0.10);
    --border-hair:          rgba(0, 0, 0, 0.30);
    --muted:                rgba(0, 0, 0, 0.04);
    --muted-foreground:     rgba(0, 0, 0, 0.55);

    --fg-100:               #000000;
    --fg-90:                rgba(0, 0, 0, 0.92);
    --fg-70:                rgba(0, 0, 0, 0.74);
    --fg-50:                rgba(0, 0, 0, 0.58);
    --fg-40:                rgba(0, 0, 0, 0.48);
    --fg-30:                rgba(0, 0, 0, 0.36);
  }

  html, body { background: #ffffff; color: #000000; }

  /* Hide interactive chrome */
  .mp-nav,
  .fg-toc,
  .fg-toc-mobile,
  .mp-video-wrap,
  footer.mp-footer { display: none !important; }

  /* No animated entry — print should be immediate */
  body.js-reveal .reveal,
  body.js-reveal .reveal.in,
  body.js-reveal #section-a .mp-eyebrow,
  body.js-reveal .cover-headline,
  body.js-reveal .cover-lede,
  body.js-reveal .cover-ctas,
  body.js-reveal .cover-reassure {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Avoid awkward page breaks inside row-style components */
  .fg-section,
  .fg-numbered,
  .fg-list li,
  .arc-row,
  .fg-step,
  .fg-sched-row,
  .fg-frame-row,
  .fg-contact-row,
  .fg-scenario {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Force accordions open so all content prints */
  .fg-scenario[open],
  .fg-scenario {
    /* leave as-is — readers should manually expand before printing */
  }

  /* Tighten the title page so handouts don't waste paper */
  .fg-titlepage { padding: 48px 0 32px; }
  .fg-layout { padding-top: 24px; grid-template-columns: 1fr; }
  .fg-content { max-width: 640px; margin: 0 auto; }
  .fg-section { padding: 32px 0 28px; }

  /* Underline links so URLs are recoverable from paper */
  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: var(--fg-100) !important;
    border: 0 !important;
  }

  @page { margin: 16mm; }
}