/* =====================================================================
   XCache talk theme -- XRootD & FTS Workshop, Lyon, September 2026
   A reveal.js theme, written from scratch rather than derived from one
   of the bundled ones. Keeps the information density of the earlier
   Google Slides decks, but gives it a real colour system, full-bleed
   section dividers, and room for figures.
   ===================================================================== */

@import url('../vendor/fonts/fonts.css');

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/*                                                                     */
/* Two palettes, one active mapping. Values live exactly once, as      */
/* --lt-* and --dk-*; the block below picks which set the semantic     */
/* names point at. Nothing outside this section may name a colour.     */
/* ------------------------------------------------------------------ */
:root {
  /* ---- light palette: the projected default ---- */
  --lt-ink:            #14263a;   /* body text: deep navy, softer than black */
  --lt-ink-strong:     #071624;   /* headings                                */
  --lt-ink-muted:      #5d7185;   /* second-level bullets, captions          */
  --lt-ink-faint:      #93a3b3;   /* footer, slide numbers                   */
  --lt-ground:         #ffffff;   /* the slide sheet                         */
  --lt-ground-alt:     #f4f6f8;   /* code blocks, tables                     */
  --lt-rule:           #dbe2e8;
  --lt-viewport:       #e9edf1;   /* the surround outside the slide          */

  --lt-deep:           #f5f7f9;   /* section-divider ground: a pale plate,   */
  --lt-deep-alt:       #e8edf1;   /* not a slab of ink                       */
  --lt-deep-ink:       #14263a;
  --lt-deep-ink-muted: #5d7185;
  --lt-deep-title:     #071624;
  --lt-deep-accent:    #1b8fa8;
  --lt-deep-code-bg:   rgba(16, 38, 61, 0.07);
  --lt-deep-code-ink:  #14263a;

  --lt-accent:         #1b8fa8;   /* structure: rules, links, markers        */
  --lt-accent-dim:     #dceef2;
  --lt-good:           #2e8b6b;   /* done / shipped                          */
  --lt-good-dim:       #dff0e9;
  --lt-warn:           #c9821f;   /* proposal / needs discussion / job ad    */
  --lt-warn-dim:       #faeed8;
  --lt-risk:           #b84a45;   /* problem / motivation / breaking change  */
  --lt-risk-dim:       #f7e3e1;
  --lt-crux:           #a12d52;   /* the crucial point, text only             */
  
  --lt-code-keyword:   #8250a8;
  --lt-code-type:      #0f6f8a;

  /* ---- dark palette: for reading the published copy at night ----
     The divider ground is a shade off the slide ground in both themes --
     lighter here, darker in light mode. A divider is a pause, marked by
     the accent rule under its title and by having nothing else on it;
     it does not need a full-bleed colour field to be read as one. */
  --dk-ink:            #d8e2ea;
  --dk-ink-strong:     #f2f7fa;
  --dk-ink-muted:      #9aabb9;
  --dk-ink-faint:      #6b7c8a;
  --dk-ground:         #141b23;
  --dk-ground-alt:     #1c242e;
  --dk-rule:           #2c3742;
  --dk-viewport:       #0b1116;

  --dk-deep:           #1c3348;
  --dk-deep-alt:       #244059;
  --dk-deep-ink:       #eef4f8;
  --dk-deep-ink-muted: #b7cbd9;
  --dk-deep-title:     #ffffff;
  --dk-deep-accent:    #6fc6d8;
  --dk-deep-code-bg:   rgba(255, 255, 255, 0.10);
  --dk-deep-code-ink:  #dbeaf2;

  --dk-accent:         #4fc3dd;
  --dk-accent-dim:     #15323d;
  --dk-good:           #55c99b;
  --dk-good-dim:       #14302a;
  --dk-warn:           #e5a94a;
  --dk-warn-dim:       #332715;
  --dk-risk:           #e07a72;
  --dk-risk-dim:       #33201f;
  --dk-crux:           #df7798;

  --dk-code-keyword:   #c39ae0;
  --dk-code-type:      #6fc6d8;

  /* ---- active mapping: light ---- */
  --ink:            var(--lt-ink);
  --ink-strong:     var(--lt-ink-strong);
  --ink-muted:      var(--lt-ink-muted);
  --ink-faint:      var(--lt-ink-faint);
  --ground:         var(--lt-ground);
  --ground-alt:     var(--lt-ground-alt);
  --rule:           var(--lt-rule);
  --viewport:       var(--lt-viewport);
  --deep:           var(--lt-deep);
  --deep-alt:       var(--lt-deep-alt);
  --deep-ink:       var(--lt-deep-ink);
  --deep-ink-muted: var(--lt-deep-ink-muted);
  --deep-title:     var(--lt-deep-title);
  --deep-accent:    var(--lt-deep-accent);
  --deep-code-bg:   var(--lt-deep-code-bg);
  --deep-code-ink:  var(--lt-deep-code-ink);
  --accent:         var(--lt-accent);
  --accent-dim:     var(--lt-accent-dim);
  --good:           var(--lt-good);
  --good-dim:       var(--lt-good-dim);
  --warn:           var(--lt-warn);
  --warn-dim:       var(--lt-warn-dim);
  --risk:           var(--lt-risk);
  --risk-dim:       var(--lt-risk-dim);
  --crux:           var(--lt-crux);
  --code-keyword:   var(--lt-code-keyword);
  --code-type:      var(--lt-code-type);

  /* ---- theme-independent ----
     The JSROOT panels are their own documents and stay white, so their
     frame stays light in both themes: a lit instrument on a dark wall,
     rather than a white rectangle that looks like a rendering bug. */
  --panel-ground:    #ffffff;
  --panel-head-bg:   #f4f6f8;
  --panel-head-ink:  #5d7185;
  --panel-border:    #c3ced8;
  --panel-live:      #2e8b6b;

  /* reveal styles a few things with its own --r-* theme tokens, which live in
     its bundled themes, not in reveal.css. A theme written from scratch leaves
     them undefined and those rules degrade silently. The one that matters:
     the overview outlines the current slide with --r-link-color, so without
     this the Esc grid shows every slide except which one you are on. */
  --r-link-color: var(--accent);

  --sans: 'Inter', 'Noto Sans', 'Liberation Sans', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'DejaVu Sans Mono', 'Adwaita Mono', monospace;

  /* Slide geometry. reveal scales this whole box to the viewport, so
     these are "design pixels" -- 1280x720 at 16:9. */
  --pad-x: 64px;
  --pad-top: 30px;
  --pad-bottom: 52px;
}

/* ---- active mapping: dark ----
   Wrapped in `not print` so the PDF is always light, whatever the deck
   was last toggled to. Paper and projectors want ink on white. */
@media not print {
  html[data-theme="dark"] {
    --ink:            var(--dk-ink);
    --ink-strong:     var(--dk-ink-strong);
    --ink-muted:      var(--dk-ink-muted);
    --ink-faint:      var(--dk-ink-faint);
    --ground:         var(--dk-ground);
    --ground-alt:     var(--dk-ground-alt);
    --rule:           var(--dk-rule);
    --viewport:       var(--dk-viewport);
    --deep:           var(--dk-deep);
    --deep-alt:       var(--dk-deep-alt);
    --deep-ink:       var(--dk-deep-ink);
    --deep-ink-muted: var(--dk-deep-ink-muted);
    --deep-title:     var(--dk-deep-title);
    --deep-accent:    var(--dk-deep-accent);
    --deep-code-bg:   var(--dk-deep-code-bg);
    --deep-code-ink:  var(--dk-deep-code-ink);
    --accent:         var(--dk-accent);
    --accent-dim:     var(--dk-accent-dim);
    --good:           var(--dk-good);
    --good-dim:       var(--dk-good-dim);
    --warn:           var(--dk-warn);
    --warn-dim:       var(--dk-warn-dim);
    --risk:           var(--dk-risk);
    --risk-dim:       var(--dk-risk-dim);
    --crux:           var(--dk-crux);
    --code-keyword:   var(--dk-code-keyword);
    --code-type:      var(--dk-code-type);
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */
.reveal-viewport { background: var(--viewport); }

.reveal {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}

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

.reveal .slides > section,
.reveal .slides > section > section {
  /* The white "sheet" each slide is drawn on. */
  background: var(--ground);
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom) var(--pad-x);
  height: 720px;          /* the design box; reveal scales it to the screen */
  box-sizing: border-box;
}

.reveal a { color: var(--accent); text-decoration: none;
            border-bottom: 1px solid var(--accent-dim); }
.reveal a:hover { border-bottom-color: var(--accent); }

.reveal strong, .reveal b { font-weight: 600; color: var(--ink-strong); }
.reveal em, .reveal i { font-style: italic; }

/* ------------------------------------------------------------------ */
/* Slide furniture: eyebrow, title, footer                            */
/* ------------------------------------------------------------------ */

/* The eyebrow is the section name, so the audience always knows which
   of the four topics they are in. Set by data-eyebrow on the section. */
.reveal section[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35em;
}

.reveal h2 {
  font-size: 1.32em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-strong);
  margin: 0 0 0.15em 0;
  text-transform: none;
  letter-spacing: -0.02em;
}

/* Thin accent rule under the slide title -- replaces the old ruled box. */
.reveal h2::after {
  content: '';
  display: block;
  width: 2.2em;
  height: 3px;
  background: var(--accent);
  margin-top: 0.42em;
  margin-bottom: 0.62em;
}

/* The bold lead-in the old decks used: Definition / Motivation / Status.
   Written in Markdown as  ### Definition

   Set at body size, not below it: it governs the bullets underneath, and a
   heading smaller than its own body text inverts the hierarchy. Weight and
   colour carry the distinction instead, with space above to group it with
   what it introduces. */
.reveal h3 {
  font-size: 1em;
  font-weight: 600;
  color: var(--ink-strong);
  margin: 0 0 0.35em 0;
  text-transform: none;
  letter-spacing: -0.01em;
  /* An h3 that carries a trailing clause wraps to two or three lines, and
     reveal's heading leading is far too tight for that. */
  line-height: 1.4;
}
/* :first-of-type never fires when a slide has only one h3, so a lone "What it
   needs" sat flush against the list above it. Any h3 that is not the slide's
   opening element gets the gap. */
.reveal h3:not(:first-child) { margin-top: 1.1em; }

/* Footer: attribution left, slide number right, hairline above. */
.reveal .slides > section:not(.section):not(.title)::after,
.reveal .slides > section > section:not(.section):not(.title)::after {
  content: attr(data-footer);
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 20px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 0.44em;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.reveal .slide-number {
  background: none;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 15px;
  right: 64px;
  bottom: 22px;
}

/* Per-slide number, added as a real element in index.html. Sits at the right
   end of the footer rule, where the old Google Slides decks put it. */
.reveal .slide-badge {
  position: absolute;
  right: var(--pad-x);
  bottom: 20px;
  padding-top: 9px;
  font-size: 0.44em;
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  z-index: 5;
  pointer-events: none;
}
/* The full-bleed slides have no footer rule and a dark ground. */
.reveal section.section .slide-badge { color: var(--deep-ink-muted); right: 76px; }
.reveal section.title .slide-badge   { right: 76px; }

/* In the overview every slide is scaled down until unreadable, so the number
   becomes the label. Plate it, because it lands on both light and dark
   slides. */
.reveal.overview .slide-badge {
  bottom: auto;
  left: auto;
  top: 14px;
  right: 18px;      /* our titles are top-left, so the number goes top-right */
  padding: 3px 12px;
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
  background: var(--panel-ground);
  border-radius: 5px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.reveal.overview .slide-badge .of { display: none; }

/* ------------------------------------------------------------------ */
/* Lists -- the workhorse. Custom markers, not the old bullet glyphs.  */
/* ------------------------------------------------------------------ */
.reveal ul { list-style: none; margin: 0; padding: 0; }

.reveal ul > li {
  position: relative;
  padding-left: 1.05em;
  margin: 0 0 0.42em 0;
  line-height: 1.34;
}

/* First level: a small solid accent square. */
.reveal ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

/* Sub-line inside a table cell: the qualification that would bloat a slide
   above if it were spelled out there. Deliberately quiet. */
.reveal .dim {
  font-size: 0.88em;
  color: var(--ink-muted);
  font-weight: 400;
}

/* Second level: smaller, muted, an en-dash. This is where the old decks
   crammed the detail, so it needs to stay readable but clearly recede. */
.reveal ul ul {
  margin-top: 0.34em;
  margin-bottom: 0.5em;
}
.reveal ul ul > li {
  font-size: 0.83em;
  color: var(--ink-muted);
  margin-bottom: 0.28em;
  padding-left: 1em;
}
.reveal ul ul > li::before {
  content: '\2013';
  background: none;
  color: var(--ink-faint);
  top: 0;
  width: auto;
  height: auto;
  font-weight: 400;
}

/* Third level, if it is ever really needed. */
.reveal ul ul ul > li { font-size: 0.94em; }
.reveal ul ul ul > li::before { content: '\00b7'; }

.reveal ol { margin: 0 0 0 1.2em; padding: 0; }
.reveal ol > li { margin-bottom: 0.42em; line-height: 1.34; }

/* Fragments: dim rather than hide, so you can see what is coming. */
.reveal .slides section .fragment.semi-fade-out.visible { opacity: 0.35; }

/* ------------------------------------------------------------------ */
/* Code and configuration snippets                                     */
/* ------------------------------------------------------------------ */
.reveal code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--ground-alt);
  padding: 0.08em 0.3em;
  border-radius: 3px;
  color: var(--ink-strong);
}

.reveal pre {
  display: block;
  width: 100%;
  margin: 0.6em 0 0.7em 0;
  font-size: 0.62em;
  line-height: 1.42;
  box-shadow: none;
  background: var(--ground-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
/* Three short listings side by side, for a value traced through the stack.
   Each stays its own box; the row scrolls rather than the slide, and the
   whole thing stacks if it will not fit. */
.reveal .codecols { display: flex; gap: 0.9em; align-items: stretch;
  flex-wrap: wrap; margin: 0.6em 0 0.7em 0; }
.reveal .codecols > pre { flex: 1 1 15em; min-width: 0; width: auto;
  margin: 0; }
.reveal .codecols > pre code { overflow-x: auto; }
.reveal pre code {
  /* Without display:block the padding lands at the start of the text rather
     than on the box, so only the first line is indented. */
  display: block;
  font-family: var(--mono);
  background: none;
  padding: 0.85em 1em;
  border-radius: 0;
  max-height: none;
  overflow: visible;
  white-space: pre;
  tab-size: 3;
}

/* A configuration directive quoted inline in prose, e.g. pfc.dirstats */
.reveal .directive {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  background: none;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/* Title slide                                                         */
/* ------------------------------------------------------------------ */
.reveal section.title {
  background: var(--ground);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-top) 76px var(--pad-bottom) 76px;
}
.reveal section.title h1 {
  font-size: 2.0em;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 0 0 0.2em 0;
  text-transform: none;
}
.reveal section.title h1 .brand { color: var(--accent); }
.reveal section.title .subtitle {
  font-size: 0.86em;
  color: var(--ink-muted);
  margin: 0;
}
.reveal section.title .byline {
  margin-top: 1.5em;
  padding-top: 0.9em;
  border-top: 2px solid var(--accent);
  font-size: 0.62em;
  color: var(--ink-muted);
  display: flex;
  gap: 1.6em;
  flex-wrap: wrap;
}
.reveal section.title .byline b { color: var(--ink-strong); font-weight: 600; }

/* Institutional logos are dark ink drawn for a white field -- several have
   white *inside* them (CERN's lettering, the CMS box). Keying that white out
   hollows them, and on a dark slide CMS all but vanishes. So the artwork keeps
   its white background and the row sits on a light plaque, which is invisible
   on the white title slide and reads as a deliberate partner strip on dark. */
.reveal .logos {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 30px;
  margin-bottom: 2.1em;
  padding: 13px 20px;
  background: var(--panel-ground);
  border-radius: 5px;
}
.reveal .logos img { height: 46px; width: auto; }

html[data-theme="dark"] .reveal .logos {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------ */
/* Section dividers -- a full-bleed plate, the structural beat of talk  */
/* ------------------------------------------------------------------ */
.reveal section.section {
  background: var(--deep);
  background-image:
    linear-gradient(135deg, var(--deep) 0%, var(--deep-alt) 100%);
  color: var(--deep-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-top) 76px var(--pad-bottom) 76px;
}
.reveal section.section .kicker {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-accent);
  margin-bottom: 0.7em;
}
.reveal section.section h2 {
  font-size: 1.9em;
  font-weight: 700;
  color: var(--deep-title);
  letter-spacing: -0.028em;
  margin: 0;
}
.reveal section.section h2::after {
  width: 3em;
  height: 4px;
  background: var(--deep-accent);
  margin-top: 0.5em;
  margin-bottom: 0;
}
.reveal section.section .standfirst {
  margin-top: 0.9em;
  font-size: 0.76em;
  color: var(--deep-ink-muted);
  max-width: 36em;
  line-height: 1.4;
}
/* A second standfirst paragraph is a separate beat, not a continuation. */
.reveal section.section .standfirst + .standfirst { margin-top: 1.3em; }
.reveal section.section ul > li::before { background: var(--deep-accent); }
.reveal section.section code { background: var(--deep-code-bg); color: var(--deep-code-ink); }

/* Bold on a divider takes the title colour, a step above the --deep-ink
   body text around it, rather than the --ink-strong of ordinary slides. */
.reveal section.section strong,
.reveal section.section b { color: var(--deep-title); }

/* ------------------------------------------------------------------ */
/* Callouts -- one per semantic role, matching the accent tokens        */
/* ------------------------------------------------------------------ */
.reveal .callout {
  margin: 0.7em 0;
  padding: 0.6em 0.85em;
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  font-size: 0.82em;
  line-height: 1.34;
}
.reveal .callout .label {
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2em;
}
.reveal .callout.good { border-color: var(--good); background: var(--good-dim); }
.reveal .callout.good .label { color: var(--good); }
.reveal .callout.warn { border-color: var(--warn); background: var(--warn-dim); }
.reveal .callout.warn .label { color: var(--warn); }
.reveal .callout.risk { border-color: var(--risk); background: var(--risk-dim); }
.reveal .callout.risk .label { color: var(--risk); }

/* Inline code inside a callout must not paint its own ground: --ground-alt
   is a cool grey against the callout's amber or red wash, and reads as a
   scatter of blue blocks. The mono face carries it on its own. */
.reveal .callout code { background: transparent; padding: 0; }
/* A second beat inside a callout, set off rather than run on. */
.reveal .callout p { margin: 0.55em 0 0; }

/* Status chips, for "shipped in 5.8" / "proposal" markers on a title. */
.reveal .chip {
  display: inline-block;
  vertical-align: 0.32em;
  margin-left: 0.55em;
  padding: 0.2em 0.55em;
  border-radius: 100px;
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent);
}
.reveal .chip.good { background: var(--good-dim); color: var(--good); }
.reveal .chip.warn { background: var(--warn-dim); color: var(--warn); }
.reveal .chip.risk { background: var(--risk-dim); color: var(--risk); }

/* The crucial point. A colour used for nothing else in the deck, so it
   stays worth noticing -- spend it two or three times, not everywhere.
   The dark value is the same hue lifted to match the light one's contrast
   against its own ground: hsl(341, 56%, 40%) -> hsl(341, 62%, 67%). */
.reveal .crux { color: var(--crux); font-weight: 600; }
.reveal .crux.under { text-decoration: underline;
  text-decoration-thickness: 0.055em; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------------ */
/* Layout helpers -- figures need room, so give them real columns       */
/* ------------------------------------------------------------------ */
.reveal .cols { display: flex; gap: 1.5em; align-items: flex-start; }
.reveal .cols > * { flex: 1 1 0; min-width: 0; }
.reveal .cols.wide-left  > *:first-child { flex: 1.55 1 0; }
.reveal .cols.wide-right > *:last-child  { flex: 1.55 1 0; }
.reveal .cols.narrow-left > *:first-child { flex: 0.62 1 0; }

.reveal figure { margin: 0; }

/* A line diagram that inherits the slide's ink via currentColor, so it works
   in both themes without a second asset. */
.reveal figure.diag { margin: 0.75em 0 0; }
.reveal figure.diag img,
.reveal figure.diag svg { width: 95%; max-width: 780px; display: block; margin: 0 auto; }
.reveal figure img { display: block; max-width: 100%; height: auto; }
.reveal figcaption {
  margin-top: 0.4em;
  font-size: 0.56em;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* A framed panel for an embedded live view (JSROOT, JSON tree, ...).
   Deliberately light in both themes: JSROOT draws its own document inside
   the iframe and is not themed with the deck, so the frame stays light and
   the panel reads as a lit instrument rather than a rendering fault. */
.reveal .panel {
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: var(--panel-ground);
  overflow: hidden;
}
.reveal .panel > iframe { display: block; width: 100%; border: 0; }
.reveal .panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.32em 0.6em;
  background: var(--panel-head-bg);
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.44em;
  color: var(--panel-head-ink);
}
.reveal .panel-head .live {
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--panel-live);
}

/* On a dark slide a hard white edge glares; lift the panel off the ground
   with a soft shadow instead of a brighter border. */
html[data-theme="dark"] .reveal .panel {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Narrow a panel within its column, when the chart is simple enough that full
   width just stretches three bars across the slide. `right` then pushes it to
   the outer edge, so the width it gives up goes to the text column. */
.reveal .panel.w80 { width: 80%; }
.reveal .panel.w90 { width: 90%; }
.reveal .panel.right { margin-left: auto; }

/* A quiet caption above a code block or figure, when the thing below it needs
   naming but not a heading. */
.reveal .cap {
  font-size: 0.5em;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4em;
}

/* Sentence-length caption under a table or figure. Same quiet role, but a
   whole sentence in small caps is unreadable. */
/* A caption that is the point, not a footnote: double size, full ink. */
.reveal .cap.sentence.lead {
  font-size: 1em;
  color: var(--ink);
  line-height: 1.4;
  margin: 0.8em 0;
}
.reveal .cap.sentence {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.56em;
  margin: -0.2em 0 0.7em;
}

/* Wide slides: let a figure or panel break the text margins. */
.reveal .bleed { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); }


/* The cost table: sparse rows, and a visible hierarchy so the kXR_pgreadv
   breakdown reads as sub-items of its total rather than as five more asks. */
.reveal .cost table { font-size: 0.73em; }
.reveal .cost table td { padding-top: 0.4em; padding-bottom: 0.4em; }
/* The five pgreadv breakdown rows are read as a group, not one at a time,
   so they can sit much closer than the three headline rows. */
.reveal .cost table tr:has(.sub) td { padding-top: 0.22em; padding-bottom: 0.22em; }
.reveal .cost table td.sub,
.reveal .cost .sub { padding-left: 1.6em; opacity: 0.78; }
.reveal .cost tr.total td { border-bottom: none; }
/* text-decoration, not border-bottom: a border sits under the whole inline
   box, so it thickened under bold and skipped under the code spans. This
   renders one hairline at a constant weight, tinted with the accent. */
/* A row whose title starts with a code span was indented against the others
   by that span's 0.3em left padding. Pull it back so every title starts on
   the same vertical. */
.reveal .cost td > a > code:first-child,
.reveal .cost td > a > strong:first-child > code:first-child,
.reveal .cost td > code:first-child { margin-left: -0.3em; }

.reveal .cost a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}


/* The two issue rows on the resource-monitor bug slide: they are the subject,
   not a reference table, so they carry more weight and stand clear of what
   follows. */
.reveal .issues { margin-bottom: 1.5em; }
.reveal .issues table { font-size: 0.86em; }
.reveal .issues table td { padding-top: 0.45em; padding-bottom: 0.45em; }
/* and let the closing callout stand off the list above it */
.reveal .issues ~ .callout { margin-top: 1.4em; }


/* A conclusion that spans a two-column block: it is not another list item, so
   it takes space and no marker. */
/* Spanning paragraphs are read, not scanned, so they carry looser leading than
   the bullet lists above them -- and the same leading as each other. */
.reveal p.spanning { margin: 1.1em 0 0; line-height: 1.6; }
/* Closing paragraphs that have to share the last slide with a table. */
.reveal p.spanning.tail { margin-top: 0.8em; line-height: 1.5; }
/* and a callout closing such a block stands off it too */
.reveal p.spanning + .callout { margin-top: 1.1em; }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.reveal table { border-collapse: collapse; width: 100%; font-size: 0.68em; margin: 0.5em 0; }
.reveal table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-strong);
  border-bottom: 2px solid var(--ink-strong);
  padding: 0.34em 0.6em 0.34em 0;
}
.reveal table td {
  border-bottom: 1px solid var(--rule);
  padding: 0.34em 0.6em 0.34em 0;
  vertical-align: top;
}
.reveal table tr:last-child td { border-bottom: none; }
.reveal table td { line-height: 1.35; }
.reveal table td code { font-size: 0.9em; }

/* ------------------------------------------------------------------ */
/* Print / PDF                                                         */
/* ------------------------------------------------------------------ */
@media print {
  .reveal .panel-head .live { color: var(--ink-muted); }
  .reveal section.section { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ */
/* Syntax highlighting -- a light token set in the deck palette.       */
/* reveal ships only monokai and zenburn, both dark, which would fight */
/* the white code blocks above.                                        */
/* ------------------------------------------------------------------ */
.reveal .hljs { background: none; color: var(--ink); }
.reveal .hljs-comment,
.reveal .hljs-quote          { color: var(--ink-faint); font-style: italic; }
.reveal .hljs-keyword,
.reveal .hljs-selector-tag,
.reveal .hljs-built_in       { color: var(--code-keyword); font-weight: 600; }
.reveal .hljs-string,
.reveal .hljs-attr,
.reveal .hljs-attribute      { color: var(--good); }
.reveal .hljs-number,
.reveal .hljs-literal        { color: var(--warn); }
.reveal .hljs-title,
.reveal .hljs-section,
.reveal .hljs-name           { color: var(--accent); font-weight: 600; }
.reveal .hljs-type,
.reveal .hljs-class .hljs-title { color: var(--code-type); }
.reveal .hljs-meta,
.reveal .hljs-doctag         { color: var(--risk); }
.reveal .hljs-deletion       { background: var(--risk-dim); }
.reveal .hljs-addition       { background: var(--good-dim); }
.reveal .hljs-emphasis       { font-style: italic; }
.reveal .hljs-strong         { font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Vertical centring for the full-bleed slides.                        */
/* reveal 6 writes  style="display: block"  inline on every section, so */
/* no selector can outrank it -- an !important author rule can. Scoped  */
/* to .present so reveal keeps its own display:none on far-off slides.  */
/* ------------------------------------------------------------------ */
.reveal .slides > section.present.title,
.reveal .slides > section.present.section {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* The print/PDF pass lays every slide out at once, with no .present --
   and the print-pdf class sits on <html>, not on .reveal. */
html.print-pdf .reveal .slides section.title,
html.print-pdf .reveal .slides section.section,
html.reveal-print .reveal .slides section.title,
html.reveal-print .reveal .slides section.section {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* PDF export (?print-pdf), for the Indico attachment.                 */
/* reveal's print stylesheet flattens every slide with                 */
/*   padding: 0 !important; min-height: 1px                            */
/* so the design box and its margins have to be restated here. The     */
/* JSROOT panels come through as SVG and print correctly, so no static */
/* fallback images are needed.                                         */
/* ------------------------------------------------------------------ */
html.print-pdf .reveal .slides section,
html.reveal-print .reveal .slides section {
  height: 720px !important;
  box-sizing: border-box !important;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom) var(--pad-x) !important;
  overflow: hidden !important;
}
html.print-pdf .reveal .slides section.title,
html.print-pdf .reveal .slides section.section,
html.reveal-print .reveal .slides section.title,
html.reveal-print .reveal .slides section.section {
  padding-left: 76px !important;
  padding-right: 76px !important;
}