/* ============================================================================
   Ivy Tendril — deck theme
   Ported from the product's own design tokens so the slides read as the app.
   Source: Ivy-Tendril-V2/src/packages/components/src/styles/tokens.css (.dark)
   ========================================================================= */

@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("./fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("./fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("./fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

:root {
  /* --- generated ivy-design-system block, dark mode --- */
  --primary: #00cc92;
  --primary-foreground: #000000;
  --secondary: #26262b;
  --secondary-foreground: #f8f8f8;
  --destructive: #dd5860;
  --success: #86d26f;
  --warning: #deb145;
  --info: #4469c0;
  --background: #0a0a0a;
  --foreground: #f8f8f8;
  --border: #262626;
  --muted: #1a1a1a;
  --muted-foreground: #8f8f8f;
  --accent: #1a1a1a;
  --card: #171717;
  --card-foreground: #f8f8f8;
  /* --- named palette (dark) --- */
  --ivy-green: #00cc92;
  --teal: #2dd4bf;
  --sky: #38bdf8;
  --violet: #a78bfa;
  --amber: #fbbf24;
  --rose: #fb7185;
  --orange: #fb923c;

  --radius: 0.5rem;
  --radius-fields: 0.375rem;
  --radius-selectors: 0.25rem;

  --font-sans: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, monospace;

  /* Dark mode is FLAT in Tendril — the shadow ramp is `none`. Depth comes
     from background layering (--background < --card < --muted) and hairlines. */
  --hairline: 1px solid var(--border);

  --r-main-font: var(--font-sans);
  --r-heading-font: var(--font-sans);
}

/* ---------------------------------------------------------------- reveal base */

.reveal-viewport {
  background: var(--background);
  /* faint grid, like the app's canvas */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
}

.reveal {
  font-family: var(--font-sans);
  /* Deliberate headroom: text metrics differ between Chromium and WebKit, and a
     deck tuned to the last pixel in one clips in the other. The auto-fit script
     in index.html is the backstop. */
  font-size: 28px;
  font-weight: 400;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

.reveal .slides {
  text-align: left;
}

/* Reveal's own `.reveal .slides>section.present{display:block}` outranks a bare
   class, so the layout rules have to match that specificity or they lose. Only
   `.present` is targeted — the base rule must keep hiding the other slides. */
/* Plain block flow, deliberately. Every slide top-aligns from one shared origin,
   so headings never move between slides — which is all the old flex column was
   doing once statement-slide centring was dropped. Reveal toggles slides between
   `display:none` and a display value on every navigation, and a flex container
   being torn down and rebuilt that often is exactly where engines disagree; block
   layout is the path reveal itself is built on. Nothing here needs flex. */
.reveal .slides > section.present {
  height: var(--slide-height, 720px);
  box-sizing: border-box;
  padding: 1.05em 0 2.2em;
}

/* The eyebrow stays in normal flow, deliberately. An earlier version pinned it
   with `position:absolute` + `:has()`, which meant that if the selector ever
   failed to match, the eyebrow dropped back into the flow and shoved the whole
   slide down — a large mystery gap that only showed up in some browsers. In flow
   with a fixed margin it lands identically everywhere, with no `:has()` involved.
   Markdown wraps a lone `<span class="kicker">` in a `<p>`, so zero that wrapper
   and let the kicker itself own the spacing. */
.reveal .slides > section.present > p:first-child {
  margin: 0;
}

/* The title slide has no eyebrow, so pad it by the height that one would have
   occupied. Keeps the first heading on the same baseline as every other slide. */
.reveal .slides > section.present.title-slide {
  padding-top: 2.4em;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--font-sans);
  color: var(--foreground);
  text-transform: none;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.5em 0;
}

.reveal h1 { font-size: 2.4em; letter-spacing: -0.04em; }
.reveal h2 { font-size: 1.55em; }
.reveal h3 { font-size: 1.15em; }
.reveal h4 { font-size: 0.95em; font-weight: 500; color: var(--muted-foreground); }

.reveal p { line-height: 1.45; margin: 0 0 0.7em 0; }
.reveal strong { color: var(--foreground); font-weight: 600; }
.reveal em { color: var(--primary); font-style: normal; font-weight: 500; }
.reveal a { color: var(--primary); text-decoration: none; }

.reveal ul,
.reveal ol {
  display: block;
  margin: 0 0 0.6em 0;
  padding-left: 1.1em;
}
.reveal li { line-height: 1.4; margin-bottom: 0.38em; }
.reveal ul li::marker { color: var(--primary); }
.reveal ol li::marker { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.8em; }

.reveal code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--muted);
  border: var(--hairline);
  border-radius: var(--radius-selectors);
  padding: 0.08em 0.32em;
  color: var(--foreground);
}

.reveal pre {
  width: 100%;
  box-shadow: none;
  font-size: 0.5em;
  margin: 0.5em 0;
}
.reveal pre code {
  display: block;
  padding: 0.9em 1.1em;
  background: var(--card);
  border: var(--hairline);
  border-radius: var(--radius);
  max-height: none;
  line-height: 1.5;
  overflow: visible;
}

.reveal blockquote {
  width: 100%;
  background: none;
  box-shadow: none;
  border: none;
  border-left: 2px solid var(--primary);
  border-radius: 0;
  padding: 0.1em 0 0.1em 0.9em;
  margin: 0.6em 0;
  font-style: normal;
  color: var(--foreground);
}
.reveal blockquote p { margin: 0; }

.reveal table { border-collapse: collapse; width: 100%; font-size: 0.72em; }
.reveal table th {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  border-bottom: var(--hairline);
  padding: 0.5em 0.8em 0.5em 0;
  text-align: left;
}
.reveal table td {
  border-bottom: 1px solid rgba(38, 38, 38, 0.55);
  padding: 0.5em 0.8em 0.5em 0;
  vertical-align: top;
}
.reveal table tr:last-child td { border-bottom: none; }
.reveal table td:first-child { color: var(--muted-foreground); white-space: nowrap; }

/* progress + controls in ivy green */
.reveal .progress { color: var(--primary); height: 2px; background: rgba(255, 255, 255, 0.06); }
.reveal .controls { color: var(--muted-foreground); }
.reveal .slide-number {
  font-family: var(--font-mono);
  font-size: 13px;
  background: none;
  color: var(--muted-foreground);
  right: 28px;
  bottom: 20px;
}

/* ------------------------------------------------------------ slide furniture */

/* small uppercase mono eyebrow — the product's label idiom */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.46em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
  display: block;
  margin: 0 0 1.45em;
  white-space: nowrap;
}
.kicker .n { color: var(--primary); }

.dim { color: var(--muted-foreground); }
.hl { color: var(--primary); }
.strike { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: var(--destructive); }

/* card / panel — --card on --background with a hairline, no shadow */
.panel {
  background: var(--card);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 0.85em 1em;
}
.panel.tint-green { border-color: rgba(0, 204, 146, 0.35); }
.panel.tint-red { border-color: rgba(221, 88, 96, 0.35); }
.panel > h3 { font-size: 0.82em; margin-bottom: 0.45em; }
.panel > :last-child { margin-bottom: 0; }
.panel p, .panel li { font-size: 0.72em; }
/* `.panel p` outranks a bare size utility, so restate them at equal specificity */
.panel p.xs, .panel li.xs { font-size: 0.58em; }
.panel p.small, .panel li.small { font-size: 0.72em; }
.panel ul { padding-left: 1em; }

/* grids */
.grid { display: grid; gap: 0.7em; align-items: start; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-2-1 { grid-template-columns: 2fr 1fr; }

/* stat tile */
.stat { background: var(--card); border: var(--hairline); border-radius: var(--radius); padding: 0.7em 0.85em; }
.grid > .stat { align-self: stretch; }
.stat .v {
  font-family: var(--font-mono);
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--foreground);
  display: block;
}
.stat .v.green { color: var(--primary); }
.stat .v.red { color: var(--destructive); }
.stat .l {
  font-family: var(--font-mono);
  font-size: 0.42em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  display: block;
  margin-top: 0.7em;
}
.stat .s { font-size: 0.5em; color: var(--muted-foreground); display: block; margin-top: 0.35em; line-height: 1.35; }

/* status badge — mirrors the app's badge tinting */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.32em 0.62em;
  border-radius: var(--radius-selectors);
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.ok      { color: var(--success);     background: rgba(134, 210, 111, 0.12); border-color: rgba(134, 210, 111, 0.3); }
.badge.run     { color: var(--primary);     background: rgba(0, 204, 146, 0.12);   border-color: rgba(0, 204, 146, 0.32); }
.badge.fail    { color: var(--destructive); background: rgba(221, 88, 96, 0.12);   border-color: rgba(221, 88, 96, 0.3); }
.badge.warn    { color: var(--warning);     background: rgba(222, 177, 69, 0.12);  border-color: rgba(222, 177, 69, 0.3); }
.badge.info    { color: var(--sky);         background: rgba(56, 189, 248, 0.12);  border-color: rgba(56, 189, 248, 0.3); }
.badge.neutral { color: var(--muted-foreground); background: var(--muted); border-color: var(--border); }
.badge .dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }

/* terminal block — the app embeds a real terminal, so echo it */
.term {
  background: #000;
  border: var(--hairline);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.44em;
  line-height: 1.65;
  padding: 0.9em 1.1em;
  color: #d4d4d4;
  overflow: hidden;
}
.term .cmd::before { content: "$ "; color: var(--primary); }
.term .cmd { color: var(--foreground); }
.term .ok { color: var(--success); }
.term .err { color: var(--destructive); }
.term .mut { color: #6b6b6b; }
.term .warnc { color: var(--warning); }

/* horizontal stage rail (gen 1 → 2 → 3) */
.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0.4em 0 0.8em; }
.rail .step {
  border: var(--hairline);
  border-right: none;
  background: var(--card);
  padding: 0.7em 0.9em;
  position: relative;
}
.rail .step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.rail .step:last-child { border-right: var(--hairline); border-radius: 0 var(--radius) var(--radius) 0; }
.rail .step.on { background: rgba(0, 204, 146, 0.06); border-color: rgba(0, 204, 146, 0.35); }
.rail .step .g {
  font-family: var(--font-mono);
  font-size: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  display: block;
  margin-bottom: 0.5em;
}
.rail .step.on .g { color: var(--primary); }
.rail .step .t { font-size: 0.62em; font-weight: 600; display: block; line-height: 1.25; }
.rail .step .d { font-size: 0.46em; color: var(--muted-foreground); display: block; margin-top: 0.45em; line-height: 1.4; }

/* summary footer inside a before/after panel */
.rtot {
  font-family: var(--font-mono);
  font-size: 0.44em;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-top: 0.55em;
  padding-top: 0.5em;
  border-top: var(--hairline);
}
.rtot b { color: var(--foreground); font-weight: 500; }
.rtot.on b { color: var(--primary); }

/* commit histogram — bar geometry lifted from the dashboard's PR bars
   (12px radius, 6px min-height, one 5-step ramp mixed out of one colour) */
.hist { display: flex; align-items: flex-end; gap: 1.6em; height: 6.4em; margin: 0.5em 0 0.2em; max-width: 17em; }
.hist .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; }
.hist .col .n {
  font-family: var(--font-mono);
  font-size: 0.4em;
  color: var(--muted-foreground);
  margin-bottom: 0.4em;
  font-variant-numeric: tabular-nums;
}
.hist .col i {
  display: block;
  width: 100%;
  max-width: 78px;
  min-height: 4px;
  border-radius: 8px 8px 2px 2px;
  background: color-mix(in srgb, var(--primary) 32%, transparent);
}
.hist .col.peak i { background: var(--primary); }
.hist .col.peak .n { color: var(--primary); font-weight: 500; }
.hist .col .d {
  font-family: var(--font-mono);
  font-size: 0.34em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 0.55em;
  white-space: nowrap;
}
.hist .gapcol {
  flex: 1.1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.34em;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-left: 1px dashed var(--border);
  border-right: 1px dashed var(--border);
  margin-bottom: 1.5em;
}

/* agent swarm dots */
/* 10 per row, so 50 agents read as a block rather than a barcode */
.swarm { display: flex; flex-wrap: wrap; gap: 3px; margin: 0.4em 0; width: 143px; }
.swarm i {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: rgba(0, 204, 146, 0.16);
  border: 1px solid rgba(0, 204, 146, 0.4);
  display: block;
}
.swarm i.f { background: rgba(221, 88, 96, 0.16); border-color: rgba(221, 88, 96, 0.45); }
.swarm i.q { background: var(--muted); border-color: var(--border); }

/* before/after arrow row — needs its own breathing room, since it often follows
   a heading directly with no paragraph in between to space it */
.ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8em;
  align-items: center;
  /* Block flow means this collapses against the heading's margin-bottom rather
     than adding to it, so it has to be the larger of the two on its own. */
  margin: 1.5em 0 0.9em;
}
.ba .arrow { font-family: var(--font-mono); color: var(--primary); font-size: 0.8em; }

/* big centred statement slide */
.statement h2 { font-size: 2.1em; max-width: 24ch; }
.statement .sub { font-size: 0.8em; color: var(--muted-foreground); max-width: 44ch; }

/* title slide */
.title-slide h1 { margin-bottom: 0.3em; }
.title-slide .tagline { font-size: 0.82em; color: var(--muted-foreground); margin-bottom: 1.6em; }
.title-slide .meta {
  font-family: var(--font-mono);
  font-size: 0.44em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  border-top: var(--hairline);
  padding-top: 1em;
}


/* verification list — echoes SortableVerificationList: mono key, label, status */
.vlist { display: flex; flex-direction: column; }
.vlist .row {
  display: grid;
  grid-template-columns: 4.6em 1fr auto;
  gap: 0.6em;
  align-items: center;
  padding: 0.42em 0;
  border-bottom: 1px solid rgba(38, 38, 38, 0.7);
}
.vlist .row:last-child { border-bottom: none; }
.vlist .k {
  font-family: var(--font-mono);
  font-size: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-foreground);
}
.vlist .n { font-size: 0.5em; line-height: 1.3; }

/* worktree tree — mono, one row per agent, like the app's worktree pane */
.tree {
  font-family: var(--font-mono);
  font-size: 0.46em;
  line-height: 1.95;
  background: var(--card);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 0.9em 1.1em;
}
.tree .r { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 0.5em; }
.tree .b { color: #3f3f3f; }
.tree .p { color: var(--muted-foreground); }
.tree .main { color: var(--foreground); border-bottom: var(--hairline); padding-bottom: 0.4em; margin-bottom: 0.4em; }
.tree .main b { color: var(--primary); font-weight: 500; }
.tree .badge { font-size: 0.78em; }

/* QR block — white plate, because a QR needs light modules to scan */
.qr { display: flex; align-items: center; gap: 1em; }
.qr img {
  width: 168px;
  height: 168px;
  display: block;
  background: #fff;
  padding: 9px;
  border-radius: var(--radius);
  margin: 0;
}
.qr .qr-label { font-size: 0.6em; line-height: 1.45; }
.qr .qr-label .u {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--primary);
  display: block;
  margin-top: 0.4em;
  word-break: break-all;
}

/* screenshot / gif frame */
.shot { border: var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.shot img { display: block; width: 100%; margin: 0; }

/* tighter fragment styling */
.reveal .fragment.highlight-green.visible { color: var(--primary); }

/* utility */
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.small { font-size: 0.72em; }
.xs { font-size: 0.58em; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }