/* ─────────────────────────────────────────────────────────────
   Cotrugli — Pitch deck
   Deck-specific layout on top of the Cotrugli design system
   (tokens · base · components). Borders, not boxes. No shadows.
   Signal (chartreuse) stays reserved for agent moments only.
   ───────────────────────────────────────────────────────────── */

/* ── Deck shell ── */
html, body { height: 100%; }
body { overflow: hidden; }                 /* slides own the viewport */

.deck {
  position: fixed; inset: 0;
  overflow: hidden;
}

/* ── A slide — one full viewport. Only the active one is shown. ── */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(var(--sp-8), 6vw, var(--sp-24));
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--easing),
              transform var(--t-base) var(--easing),
              visibility 0s linear var(--t-base);
}
.slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-base) var(--easing),
              transform var(--t-base) var(--easing),
              visibility 0s;
}
/* Reduced-motion: cut the movement, keep the crossfade. */
@media (prefers-reduced-motion: reduce) {
  .slide { transform: none; transition: opacity var(--t-quick) var(--easing), visibility 0s linear var(--t-quick); }
}

.slide__inner { width: 100%; max-width: 1080px; margin: 0 auto; }
.slide--center .slide__inner { text-align: center; }
.slide--center .slide__inner > * { margin-left: auto; margin-right: auto; }

/* Signal tick — the small chartreuse square (agent context only).
   Lifted from the kit's marketing.css so this deck stays self-contained. */
.signal-tick { width: 6px; height: 6px; background: var(--signal); display: inline-block; flex-shrink: 0; }

/* Action row (used on the closing slide). */
.deck-actions { display: flex; gap: 12px; justify-content: center; margin-top: var(--sp-8); flex-wrap: wrap; }

/* ── Slide typography helpers ── */
/* Section eyebrows are NEUTRAL by design — chartreuse is reserved for agent
   moments only (The Signal Rule). The leading square is a quiet bullet, not
   the signal; it is neutralised below. */
.slide-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--sp-5);
  display: inline-flex; align-items: center; gap: 8px;
}
.slide-eyebrow .signal-tick,
.cover__kicker .signal-tick { background: var(--text-faint); }
.slide-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--sp-4);
}
.slide-title {
  font: var(--t-display); letter-spacing: var(--tr-display);
  font-size: clamp(28px, 4.4vw, 52px); color: var(--text); margin-bottom: var(--sp-5);
  max-width: 18ch;
}
.slide--center .slide-title { max-width: 22ch; }
.slide-lead {
  font: var(--t-body); font-size: clamp(15px, 1.6vw, 19px);
  color: var(--text-muted); max-width: 62ch; line-height: 1.6;
}
.slide-lead em { font-style: italic; color: var(--text); }

/* ── Cover ── */
.cover { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.cover .lockup { gap: 16px; }
.cover__kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.cover__title { font: var(--t-display); font-size: clamp(48px, 9vw, 108px); letter-spacing: var(--tr-display); line-height: 0.98; }
.cover__sub   { font: var(--t-body); font-size: clamp(16px, 2.1vw, 21px); color: var(--text-muted); max-width: 46ch; line-height: 1.55; }
.cover__rule  { width: 56px; height: 1px; background: var(--surface-rule); }
.cover__meta  { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-subtle); text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* ── Generic content grids used by slides ── */
.slide-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-10); }
.slide-grid--2 { grid-template-columns: repeat(2, 1fr); }
.slide-grid--3 { grid-template-columns: repeat(3, 1fr); }
.slide-grid--4 { grid-template-columns: repeat(4, 1fr); }

.tile { padding: var(--sp-6); }
.tile .stat__value { font-size: clamp(28px, 3.4vw, 40px); }

/* Ledger — key/value rows divided by rules (not cards). Asymmetric:
   a fixed mono label column, a fluid human-voice value column. */
.ledger { margin-top: var(--sp-10); border-top: 1px solid var(--surface-rule); max-width: 880px; }
.ledger__row {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6);
  align-items: baseline; padding: var(--sp-5) 0; border-bottom: 1px solid var(--surface-rule);
}
.ledger__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.ledger__v { font: var(--t-h3); letter-spacing: var(--tr-h3); color: var(--text); }
.ledger__v small { display: block; font: var(--t-body-sm); color: var(--text-muted); margin-top: 6px; }

/* Flow — one connected pipeline, divided by hairlines (not floating cards).
   The agent step is the only one that carries the signal. */
.flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-10); border: 1px solid var(--surface-rule); border-radius: var(--r-3);
  overflow: hidden;
}
.flow__step { padding: var(--sp-6); border-left: 1px solid var(--surface-rule); display: flex; flex-direction: column; gap: var(--sp-3); }
.flow__step:first-child { border-left: 0; }
.flow__step--agent { background: var(--surface-elev); }   /* lifted by surface, not a stripe */
.flow__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.flow__label { font: var(--t-h3); letter-spacing: var(--tr-h3); color: var(--text); }
.flow__desc { font: var(--t-body-sm); color: var(--text-muted); margin: 0; }

/* Numbers ledger — the signature data-table, given room on a slide. */
.numbers-table { margin-top: var(--sp-10); max-width: 880px; }

@media (max-width: 720px) {
  .ledger__row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .flow { grid-template-columns: 1fr; }
  .flow__step { border-left: 0; border-top: 1px solid var(--surface-rule); }
  .flow__step:first-child { border-top: 0; }
}

/* A simple bulleted point list with mono index */
.points { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); max-width: 64ch; }
.point { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-4); align-items: start; }
.point__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); padding-top: 3px; }
.point__t { font: var(--t-h3); letter-spacing: var(--tr-h3); color: var(--text); }
.point__d { font: var(--t-body-sm); color: var(--text-muted); margin-top: 4px; }

/* ── Deck chrome — top bar (brand + theme + counter) ── */
.deck-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) clamp(var(--sp-5), 4vw, var(--sp-10));
  pointer-events: none;                 /* let clicks fall through to nav zones */
}
.deck-bar > * { pointer-events: auto; } /* …except the controls themselves */
.deck-bar__spacer { flex: 1; }
.deck-counter { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.deck-counter b { color: var(--text); font-weight: 500; }

/* ── Deck chrome — bottom controls ── */
.deck-controls {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) clamp(var(--sp-5), 4vw, var(--sp-10));
}
.deck-controls__spacer { flex: 1; }

.deck-nav-btn {
  background: transparent; border: 1px solid var(--surface-rule); border-radius: var(--r-2);
  color: var(--text-muted); cursor: pointer; padding: 7px; line-height: 0;
  transition: border-color var(--t-base) var(--easing), color var(--t-base) var(--easing);
}
.deck-nav-btn:hover:not(:disabled) { border-color: var(--text-subtle); color: var(--text); }
.deck-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* Dots — current slide marker. Neutral; never the signal color. */
.deck-dots { display: flex; align-items: center; gap: 7px; }
.deck-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 1px solid var(--text-subtle);
  background: transparent; cursor: pointer; transition: background-color var(--t-base) var(--easing), border-color var(--t-base) var(--easing);
}
.deck-dot:hover { border-color: var(--text); }
.deck-dot.is-active { background: var(--text); border-color: var(--text); }

/* Progress hairline at the very top edge. */
.deck-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--text); z-index: 30; width: 0; transition: width var(--t-base) var(--easing); }

/* Click zones — invisible left/right halves for tap-to-advance. */
.deck-zone { position: fixed; top: 64px; bottom: 64px; width: 18vw; z-index: 10; cursor: pointer; }
.deck-zone--prev { left: 0; }
.deck-zone--next { right: 0; }

/* ── Mobile ── */
@media (max-width: 720px) {
  .slide-grid--2, .slide-grid--3, .slide-grid--4 { grid-template-columns: 1fr; }
  .deck-zone { display: none; }          /* swipe handles it; avoid mis-taps */
  .slide { padding: var(--sp-16) var(--sp-6); justify-content: flex-start; padding-top: 84px; overflow-y: auto; }
}

/* Hide chrome when printing / exporting to PDF (one slide per page is out of
   scope here, but keep the print surface clean). */
@media print {
  body { overflow: visible; }
  .deck-bar, .deck-controls, .deck-progress, .deck-zone { display: none; }
  .slide { position: static; opacity: 1; visibility: visible; transform: none; page-break-after: always; min-height: 100vh; }
}