/*
 * Shared slide theme for Max Inden's network-protocol talks.
 * Layered on top of reveal.js's reset.css + reveal.css.
 * Palette is Firefox/Photon-inspired and deliberately restrained so that
 * the graphs (not the chrome) carry the visual weight.
 */

:root {
  /* Ink + surface */
  --ink:        #1c1b22; /* Photon ink 80 */
  --ink-muted:  #5b5b66;
  --ink-faint:  #8f8f9d;
  --surface:    #ffffff;
  --surface-2:  #f5f5f7;
  --hairline:   #d7d7db;

  /* Brand + categorical accents (used across all decks for consistency) */
  --accent:     #e66000; /* Firefox orange */
  --accent-2:   #0060df; /* Photon blue 60 */
  --accent-3:   #20123a; /* deep purple */
  --accent-4:   #008787; /* teal */
  --accent-5:   #d70022; /* red, use sparingly */
  --good:       #017a3d;
  --warn:       #a47f00;

  /* Categorical series palette for charts. These are the dataviz skill's
   * validated, CVD-safe hues (light surface). Order is the CVD-optimized order,
   * do not reshuffle. Firefox orange lives in --accent (chrome only), kept out
   * of data encoding on purpose. Sub-3:1 hues rely on direct series labels. */
  --c1: #2a78d6; /* blue   */
  --c2: #eb6834; /* orange */
  --c3: #1baf7a; /* aqua   */
  --c4: #4a3aa7; /* violet */
  --c5: #e34948; /* red    */
  --c6: #008300; /* green  */
  --c7: #e87ba4; /* magenta */
  --c-other: #8f8f9d; /* neutral, "Other" only, always with a label */

  --font-sans: "Inter", "Helvetica Neue", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

.reveal {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em 0;
  text-transform: none;
  text-shadow: none;
}
.reveal h1 { font-size: 1.9em; }
.reveal h2 { font-size: 1.35em; }
.reveal h3 { font-size: 1.05em; color: var(--ink-muted); }

.reveal p { line-height: 1.35; margin: 0 0 0.6em 0; }
.reveal a { color: var(--accent-2); text-decoration: none; }
.reveal strong { color: var(--accent); font-weight: 700; }
.reveal em { font-style: normal; color: var(--accent-2); }

.reveal ul, .reveal ol { display: block; margin: 0 0 0 1em; }
.reveal li { line-height: 1.4; margin: 0.28em 0; }
.reveal li::marker { color: var(--accent); }

.reveal code { font-family: var(--font-mono); font-size: 0.85em; }
.reveal pre { font-size: 0.6em; box-shadow: none; }
.reveal pre code {
  border-radius: 8px;
  padding: 0.8em 1em;
  max-height: 100%;
}

/* Light syntax theme: overrides the vendored dark monokai so code blocks
   sit on the light slides. theme.css loads after monokai.css, and these
   selectors are more specific, so they win. */
.reveal pre code.hljs {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.reveal .hljs-comment, .reveal .hljs-quote { color: var(--ink-faint); font-style: italic; }
.reveal .hljs-keyword, .reveal .hljs-selector-tag, .reveal .hljs-meta-keyword { color: #a626a4; }
.reveal .hljs-title, .reveal .hljs-title.function_, .reveal .hljs-section { color: #2a78d6; }
.reveal .hljs-string, .reveal .hljs-regexp, .reveal .hljs-symbol { color: #1baf7a; }
.reveal .hljs-number, .reveal .hljs-literal, .reveal .hljs-bullet { color: #eb6834; }
.reveal .hljs-type, .reveal .hljs-built_in, .reveal .hljs-class .hljs-title { color: #e34948; }
.reveal .hljs-attr, .reveal .hljs-attribute, .reveal .hljs-variable, .reveal .hljs-template-variable { color: #4a3aa7; }
.reveal .hljs-meta, .reveal .hljs-punctuation, .reveal .hljs-operator { color: var(--ink-muted); }
.reveal .hljs-emphasis { font-style: italic; }
.reveal .hljs-strong { font-weight: 700; }

/* A thin brand rule top-left as a quiet identity marker */
.reveal .slides section::before {
  content: "";
  position: absolute;
  top: -6%;
  left: 0;
  width: 64px;
  height: 5px;
  background: var(--accent);
  border-radius: 3px;
}
/* ...but not on the cover or section dividers */
.reveal .slides section.cover::before,
.reveal .slides section.divider::before { content: none; }

/* Slide footer with running title + page context */
.reveal .slide-number {
  color: var(--ink-faint);
  background: transparent;
  font-size: 15px;
  font-family: var(--font-sans);
}

/* ---- Cover slide ---- */
.reveal section.cover { display: flex; flex-direction: column; justify-content: center; }
.reveal section.cover h1 { font-size: 2.1em; margin-bottom: 0.15em; }
.reveal section.cover .subtitle { font-size: 1.1em; color: var(--ink-muted); font-weight: 500; }
.reveal section.cover .venue {
  margin-top: 1.2em; font-size: 0.7em; color: var(--ink-faint);
  border-top: 2px solid var(--accent); padding-top: 0.6em; display: inline-block;
}
.reveal section.cover .cover-accent {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(230,96,0,0.10), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(0,96,223,0.08), transparent 60%);
}

/* ---- Section divider ---- */
.reveal section.divider { display: flex; flex-direction: column; justify-content: center; }
.reveal section.divider h2 { font-size: 2.2em; color: var(--accent-3); }
.reveal section.divider .kicker {
  font-size: 0.6em; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 0.4em;
}

/* ---- Utility layout ---- */
.reveal .cols { display: flex; gap: 1.2em; align-items: flex-start; }
.reveal .cols > * { flex: 1; min-width: 0; }
.reveal .col-40 { flex: 0 0 40%; }
.reveal .col-60 { flex: 0 0 56%; }
.reveal .center { text-align: center; }
.reveal .muted { color: var(--ink-muted); }
.reveal .small { font-size: 0.7em; }
.reveal .tiny { font-size: 0.55em; color: var(--ink-faint); }
.reveal .fill { width: 100%; height: auto; }

/* Figure caption / data provenance line under a chart */
.reveal figure { margin: 0; }
.reveal figcaption { font-size: 0.5em; color: var(--ink-faint); margin-top: 0.4em; }

/* Big number / stat callout */
.reveal .stat { display: flex; flex-direction: column; align-items: center; }
.reveal .stat .num { font-size: 2.4em; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
.reveal .stat .lbl { font-size: 0.6em; color: var(--ink-muted); margin-top: 0.3em; text-align: center; }

/* Pill / tag */
.reveal .pill {
  display: inline-block; font-size: 0.55em; font-weight: 600;
  padding: 0.15em 0.6em; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--hairline);
}
.reveal .pill.on { background: rgba(1,122,61,0.12); color: var(--good); border-color: rgba(1,122,61,0.25); }

/* Bordered card (used for the resolution move-on conditions) */
.reveal .card {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 0.7em 0.9em;
}
.reveal .card .tag {
  display: inline-block; font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.3em;
}
.reveal .card ul { margin: 0; }

/* Placeholder box for pending assets (e.g. a flamegraph screenshot) */
.reveal .placeholder {
  border: 2px dashed var(--hairline); border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, transparent 10px, transparent 20px);
  min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1em; gap: 0.3em;
}
.reveal .placeholder p { margin: 0; color: var(--ink-muted); font-size: 0.72em; line-height: 1.35; }
.reveal .placeholder .ph-tag {
  font-size: 0.6em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.2em 0.7em; margin-bottom: 0.4em;
}
.reveal .placeholder .ph-sub { color: var(--ink-faint); font-size: 0.62em; font-style: italic; }

/* Decorative flamegraph strip along the bottom of a cover slide.
   Fades out upward so it never competes with the title. */
.reveal .cover { position: relative; }
.reveal .flamebg {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 150px; z-index: 0; pointer-events: none; opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 100%);
  mask-image: linear-gradient(to top, #000 15%, transparent 100%);
}
.reveal .cover h1, .reveal .cover .subtitle, .reveal .cover .venue { position: relative; z-index: 1; }

/* Chart shared type/colors (SVG inherits these via classes) */
.reveal svg { max-width: 100%; height: auto; }
.reveal svg text { font-family: var(--font-sans); fill: var(--ink); }
.reveal .axis text { fill: var(--ink-faint); font-size: 13px; }
.reveal .axis line, .reveal .axis path { stroke: var(--hairline); stroke-width: 1; }
.reveal .grid line { stroke: var(--hairline); stroke-dasharray: 2 4; }
.reveal .lbl-series { font-size: 13px; font-weight: 600; }

/* ---- Protocol-stack diagram (the "thin waist" visual) ----
 * A vertical stack of labeled layers. Columns within a layer split it
 * horizontally (e.g. TCP | QUIC). Build with:
 *   <div class="stack"> <div class="layer accent">HTTP semantics</div> ... </div>
 */
.reveal .stack { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.reveal .stack .layer {
  display: flex; gap: 4px; align-items: stretch;
}
.reveal .stack .box {
  flex: 1; text-align: center; padding: 0.32em 0.5em; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: 0.62em; font-weight: 600; line-height: 1.15;
  display: flex; align-items: center; justify-content: center;
}
.reveal .stack .box.wide { flex: 2; }
.reveal .stack .box.accent  { background: rgba(230,96,0,0.10);  border-color: rgba(230,96,0,0.35);  color: #a5430b; }
.reveal .stack .box.accent2 { background: rgba(0,96,223,0.10);  border-color: rgba(0,96,223,0.30);  color: #0a4aa0; }
.reveal .stack .box.accent3 { background: rgba(0,131,135,0.10); border-color: rgba(0,131,135,0.30); color: #026266; }
.reveal .stack .box.on      { background: rgba(1,122,61,0.12);  border-color: rgba(1,122,61,0.28);  color: var(--good); }
.reveal .stack .box.ghost   { background: transparent; border-style: dashed; color: var(--ink-faint); }
.reveal .stack .box.tall    { padding: 0.9em 0.5em; }

/* ---- Thin-waist hourglass: many apps + many transports funnel through one
 * narrow protocol (HTTP). Two clip-path trapezoids form the pinch. */
.reveal .hourglass { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 4px; }
.reveal .hourglass .tier { display: flex; gap: 4px; justify-content: center; width: 100%; }
.reveal .hourglass .box {
  flex: 1; text-align: center; padding: 0.36em 0.4em; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: 0.58em; font-weight: 600; line-height: 1.1;
  display: flex; align-items: center; justify-content: center;
}
.reveal .hourglass .box.accent3 { background: rgba(0,131,135,0.10); border-color: rgba(0,131,135,0.30); color: #026266; }
.reveal .hourglass .funnel { width: 100%; height: 26px; }
.reveal .hourglass .funnel.down {
  background: linear-gradient(180deg, rgba(230,96,0,0.05), rgba(230,96,0,0.18));
  clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
}
.reveal .hourglass .funnel.up {
  background: linear-gradient(180deg, rgba(230,96,0,0.18), rgba(230,96,0,0.05));
  clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
}
.reveal .hourglass .waist {
  flex: none; width: 26%; align-self: center;
  background: rgba(230,96,0,0.16); border: 1.5px solid rgba(230,96,0,0.55); color: #a5430b;
  font-size: 0.9em; font-weight: 800; padding: 0.42em;
}
.reveal .hourglass .caplbl {
  font-size: 0.46em; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: 0.09em; width: 100%; text-align: center; margin: 2px 0;
}

/* ---- Canonical HTTP protocol stack (the Wikipedia-style diagram) ----
 * Three equal-height pillars (HTTP/1.1, HTTP/2, HTTP/3) on a CSS grid, so the
 * columns always align row-by-row and HTTP/3 is NEVER taller than the others.
 * HTTP/3 stays three boxes because QUIC bundles TLS 1.3: HTTP/3 / QUIC.TLS 1.3 / UDP.
 *
 *   <div class="protostack">
 *     <div class="box span">HTTP semantics</div>   <- optional top band
 *     <div class="box">HTTP/1.1</div> <div class="box">HTTP/2</div> <div class="box accent">HTTP/3</div>
 *     ... two more rows of three ...
 *     <div class="box span">IPv4 / IPv6</div>       <- optional base band
 *   </div>
 */
.reveal .protostack {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  grid-auto-rows: 1fr; font-size: 0.58em; font-weight: 600;
}
.reveal .protostack .box {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0.5em 0.4em; border-radius: 7px; min-height: 1.5em; line-height: 1.15;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-muted);
}
.reveal .protostack .box.span   { grid-column: 1 / -1; }
.reveal .protostack .box.accent  { background: rgba(230,96,0,0.10);  border-color: rgba(230,96,0,0.38);  color: #a5430b; }
.reveal .protostack .box.accent2 { background: rgba(0,96,223,0.10);  border-color: rgba(0,96,223,0.32);  color: #0a4aa0; }
.reveal .protostack .box.accent3 { background: rgba(0,131,135,0.10); border-color: rgba(0,131,135,0.30); color: #026266; }
.reveal .protostack .box.faint   { opacity: 0.38; }

/* ---- QUIC handshake sequence diagram ----
 * Three panels (TCP+TLS 2-RTT, QUIC 1-RTT, QUIC 0-RTT). Client messages sit
 * left, server messages right, read top to bottom.
 */
.reveal .handshake { display: flex; gap: 16px; align-items: stretch; }
.reveal .handshake .panel {
  flex: 1; background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 14px 14px 16px; display: flex; flex-direction: column;
}
.reveal .handshake .phead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.reveal .handshake .phead .name { font-weight: 700; font-size: 0.6em; }
.reveal .handshake .phead .rtt { font-weight: 800; font-size: 0.58em; color: var(--accent); }
.reveal .handshake .lanes { display: flex; justify-content: space-between; font-size: 0.42em; color: var(--ink-faint); margin-bottom: 8px; }
.reveal .handshake .seq { display: flex; flex-direction: column; gap: 4px; }
.reveal .handshake .msg { font-size: 0.46em; line-height: 1.15; padding: 0.34em 0.6em; border-radius: 6px; max-width: 88%; }
.reveal .handshake .msg.c2s { align-self: flex-start; background: rgba(0,96,223,0.10); border: 1px solid rgba(0,96,223,0.28); color: #0a4aa0; }
.reveal .handshake .msg.s2c { align-self: flex-end; text-align: right; background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-muted); }
.reveal .handshake .msg.get { background: rgba(230,96,0,0.12); border-color: rgba(230,96,0,0.38); color: #a5430b; font-weight: 700; }

/* ---- Attempt timeline: dots on an axis with time + attempt labels ---- */
.reveal .timeline { position: relative; height: 82px; margin: 1.1em 0 0.3em; }
.reveal .timeline .base { position: absolute; left: 1%; right: 1%; top: 44px; height: 2px; background: var(--hairline); }
.reveal .timeline .m { position: absolute; top: 37px; transform: translateX(-50%); text-align: center; }
.reveal .timeline .m .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); margin: 0 auto; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(230,96,0,0.4); }
.reveal .timeline .m .t { font-size: 0.42em; color: var(--ink-muted); margin-top: 8px; white-space: nowrap; }
.reveal .timeline .m .a { font-size: 0.42em; font-weight: 700; color: var(--accent); white-space: nowrap; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); }

/* ---- Proxy hop chain: annotated nodes with "who sees what" ---- */
.reveal .hops { display: flex; flex-direction: column; gap: 30px; margin-top: 0.5em; }
.reveal .hops .hlabel { font-size: 0.52em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 12px; }
.reveal .hops .chain { display: flex; align-items: center; }
.reveal .hops .node { border: 1.5px solid var(--hairline); border-radius: 11px; padding: 12px 16px; text-align: center; background: var(--surface); min-width: 104px; }
.reveal .hops .node .name { font-weight: 700; font-size: 0.58em; color: var(--ink); }
.reveal .hops .node .sees { font-size: 0.44em; line-height: 1.3; margin-top: 6px; color: var(--ink-muted); }
.reveal .hops .node.both { background: rgba(230,96,0,0.09); border-color: rgba(230,96,0,0.42); }
.reveal .hops .node.both .sees { color: #a5430b; }
.reveal .hops .node.src { background: rgba(0,96,223,0.08); border-color: rgba(0,96,223,0.35); }
.reveal .hops .node.src .sees { color: #0a4aa0; }
.reveal .hops .node.dst { background: rgba(0,131,135,0.09); border-color: rgba(0,131,135,0.34); }
.reveal .hops .node.dst .sees { color: #026266; }
.reveal .hops .link { flex: 1; height: 2px; background: var(--hairline); position: relative; min-width: 40px; }
.reveal .hops .link::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--hairline); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ---- Syscall pipeline: user space -> (syscall) -> kernel/NIC -> wire ---- */
.reveal .pipe { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.reveal .pipe .stage {
  border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px;
  min-width: 92px; text-align: center; background: var(--surface-2);
}
.reveal .pipe .stage .t { font-size: 0.44em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 8px; }
.reveal .pipe .pkts { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 34px; }
.reveal .pipe .pkt { width: 12px; height: 20px; border-radius: 2px; background: var(--accent-2); }
.reveal .pipe .pkt.big { height: 34px; background: var(--accent); }
.reveal .pipe .arr { display: flex; flex-direction: column; align-items: center; color: var(--ink-faint); font-size: 0.46em; font-weight: 700; gap: 2px; }
.reveal .pipe .arr .g { font-size: 1.7em; line-height: 0.7; color: var(--ink-faint); }
.reveal .pipe .arr.syscall { color: var(--accent); }
.reveal .pipe .arr.syscall .g { color: var(--accent); }

/* ---- Datagram flow (App -> OS -> NIC -> Internet) for the UDP I/O deck ---- */
.reveal .flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reveal .flow .node {
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 0.5em 0.8em; font-size: 0.58em; font-weight: 600; color: var(--ink-muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px;
}
.reveal .flow .arrow { color: var(--ink-faint); font-size: 0.8em; }
.reveal .flow .pkts { display: flex; gap: 3px; height: 16px; align-items: center; }
.reveal .flow .pkt { width: 9px; height: 14px; border-radius: 2px; background: var(--accent-2); }
.reveal .flow .pkt.big { width: 9px; height: 30px; background: var(--accent); }
.reveal .flow-row { display: flex; align-items: center; gap: 14px; margin: 0.5em 0; }
.reveal .flow-row .tag { font-size: 0.6em; font-weight: 700; color: var(--ink); width: 130px; }

/* Fills a slide's chart area at the deck's intrinsic size */
.reveal .chart { width: 100%; height: 560px; }
.reveal .chart.tall { height: 620px; }
.reveal .chart.short { height: 440px; }

@media print {
  .reveal section.cover .cover-accent { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reveal .stack .box.accent, .reveal .stack .box.accent2, .reveal .stack .box.accent3,
  .reveal .stack .box.on { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}