/*
 * Components and helpers used by the slides. The look (palette, type, panels,
 * motif) is in theme.css; nothing here sets a brand colour directly.
 */

.hidden {
  display: none;
}

/* ---- text -------------------------------------------------------------------- */

/* A quiet aside under the main point. */
.reveal .note {
  font-style: italic;
  font-size: 75%;
  color: var(--muted);
}

/* Image and quote credits:  <!-- .element: class="attribution" -->  */
.reveal .attribution {
  font-size: 45%;
  font-style: italic;
  color: var(--muted);
}

/* One big statement on an otherwise empty slide. */
.reveal .big {
  font-size: 1.9em;
  font-weight: 300;
  line-height: 1.25;
  color: var(--ink-strong);
}

/* ---- layout ------------------------------------------------------------------ */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 1em;
}

/* Two equal columns:  <div class="cols"><div>…</div><div>…</div></div>  */
.cols {
  display: flex;
  gap: 1.2em;
  align-items: center;
  text-align: left;
}

.cols > * {
  flex: 1 1 0;
  min-width: 0;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.no-border {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.reveal img.blur-edges {
  border-radius: 12px;
  box-shadow: 0 0 25px 8px rgba(20, 30, 60, 0.2);
}

.reveal table.borders td,
.reveal table.borders th {
  border: 1px solid var(--rule);
}

/* ---- boxes: small labelled cards, e.g. one per AS or per community ----------- */

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 70%;
  margin: 0.6em 0;
}

.boxes > div {
  padding: 0.35em 0.8em;
  margin: 0.3em 0.5em;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ground);
  line-height: 1.35;
}

.boxes > div.us {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
  color: var(--ink-strong);
}

.boxes > div.ok {
  border-color: #1a8a4f;
}

.boxes > div.bad {
  border-color: #d64545;
}

/* ---- BGP bytes, matching the four groups of the /statusz bytes view ---------- */

.reveal pre.bytes {
  font-size: 0.5em;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--code-ground);
  border-radius: 6px;
  padding: 15px 20px;
  box-sizing: border-box;
  color: var(--code-ink);
}

.bytes span,
.legend span {
  border-radius: 3px;
  padding: 1px 3px;
  color: var(--code-ink); /* the fills are dark on any ground */
}

.bytes .hh,
.legend .hh { background: #34406e; }
.bytes .hl,
.legend .hl { background: #6e3440; }
.bytes .ha,
.legend .ha { background: #245c3a; }
.bytes .ha2 { background: #2f7a4b; }
.bytes .hn,
.legend .hn { background: #6b5a1f; }

.legend {
  font-size: 50%;
  font-family: var(--r-code-font);
}

.legend span {
  padding: 1px 0.6em;
  margin: 0 0.2em;
}

/* ---- live DNS and RIPE database lookups ------------------------------------ */

.reveal form.dns-lookup,
.reveal form.ripe-lookup {
  margin: 0.4em auto 0;
  max-width: 34em;
  text-align: left;
  font-family: var(--r-code-font);
}

.reveal .dns-lookup input,
.reveal .ripe-lookup input {
  width: 62%;
  padding: 0.3em 0.5em;
  font: inherit;
  font-size: 0.8em;
  color: var(--r-main-color);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  outline: none;
}

.reveal .dns-lookup input:focus,
.reveal .ripe-lookup input:focus {
  border-color: var(--accent);
}

.reveal .dns-lookup button,
.reveal .ripe-lookup button {
  margin-left: 0.4em;
  padding: 0.3em 0.9em;
  font: inherit;
  font-size: 0.8em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.reveal .dns-result {
  min-height: 3.2em;
  max-height: 13em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  margin-top: 0.5em;
  padding: 0.5em 0.7em;
  font-size: 0.7em;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.reveal .dns-result .ttl,
.reveal .dns-result .type,
.reveal .dns-result .dim { color: var(--muted); }
.reveal .dns-result .addr { color: var(--accent); font-weight: 500; }
.reveal .dns-result .bad { color: #c62828; }

/* RIPE database objects, laid out like apps.db.ripe.net: a light page with
   one card per object, one row per attribute, references in blue, rows the
   RIPE NCC manages shaded. */
.reveal .ripe-result {
  /* A fixed height, not a maximum: the box must not grow when the answer
     arrives, or the slide overflows (reveal centres a slide only when it
     is shown). */
  height: 13.5em;
  margin-top: 0.5em;
  padding: 0.5em;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 0.62em;
  text-align: left;
  background: #f4f5f7;
  border-radius: 6px;
}

.reveal .ripe-card {
  margin-bottom: 0.7em;
  padding: 0.2em 0.5em;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.reveal .ripe-card:last-child { margin-bottom: 0; }

.reveal .ripe-card table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--r-code-font);
  font-size: inherit;
  color: #1c1c28;
}

.reveal .ripe-card th,
.reveal .ripe-card td {
  padding: 0.28em 0.6em;
  border: 0;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  background: transparent;
  line-height: 1.4;
}

.reveal .ripe-card table th {
  width: 8.5em;
  color: #1c1c28;
  white-space: nowrap;
  text-decoration: underline dotted #9a9aa6;
  text-underline-offset: 0.2em;
}

.reveal .ripe-card td { word-break: break-all; }
.reveal .ripe-card tr.managed th,
.reveal .ripe-card tr.managed td { background: #dde5f0; }
.reveal .ripe-card .ref { color: #2f6fe4; }
.reveal .ripe-card .comment { margin-left: 0.4em; color: #6b6b78; }

.reveal .ripe-msg {
  padding: 0.6em;
  font-family: var(--r-code-font);
  color: #1c1c28;
}

/* A framed live page on a slide. */
.reveal iframe.live {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
}

/* ---- bytes with one part in focus: everything not .on is dimmed --------------- */

.bytes.focus span:not(.on) {
  opacity: 0.22;
}

.bytes.focus span.on {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.9);
}

/* Packet layouts: field boxes in the colours of the bytes view. */
.diagram .pkt rect { stroke: none; }
.diagram .pkt.hh rect { fill: #34406e; }
.diagram .pkt.hl rect { fill: #6e3440; }
.diagram .pkt.ha rect { fill: #245c3a; }
.diagram .pkt.ha2 rect { fill: #2f7a4b; }
.diagram .pkt.hn rect { fill: #6b5a1f; }
.diagram text.pkt-name { font-size: 18px; font-weight: 500; fill: #fff; }
.diagram text.pkt-size { font-size: 13px; font-family: "IBM Plex Mono", monospace; fill: #fff; opacity: 0.8; }
.diagram text.pkt-title { paint-order: stroke; stroke: var(--panel); stroke-width: 8px; stroke-linejoin: round; }
.diagram .pkt-expand { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }

/* ---- byte walk: a hex dump and one row per field, in step on hover --------- */

.reveal .bytewalk { text-align: left; }
.reveal .bytewalk .bw-dump { margin-bottom: 8px; }
/* The lit bytes invert: a white block on the dark dump, visible from the back row. */
.reveal .bw-dump span.on { background: #fff; color: var(--code-ground); box-shadow: 0 0 0 3px var(--accent); }

.reveal .bw-rows {
  position: relative; /* rows measure their offsetTop against the box */
  height: 19em;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 46%;
  line-height: 1.45;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.04);
}

.reveal .bw-group {
  padding: 0.45em 0.8em 0.2em;
  color: var(--accent);
  font-weight: 700;
}

.reveal .bw-row {
  display: grid;
  grid-template-columns: 11em 12em 1fr;
  gap: 0 1em;
  padding: 0.18em 0.8em;
  cursor: default;
  outline: none;
}

.reveal .bw-row:hover,
.reveal .bw-row:focus,
.reveal .bw-row.on { background: rgba(var(--accent-rgb), 0.14); }
.reveal .bw-dump span[data-i] { cursor: pointer; }
.reveal .bw-row code.hh { background: rgba(52, 64, 110, 0.16); }
.reveal .bw-row code.hl { background: rgba(110, 52, 64, 0.16); }
.reveal .bw-row code.ha { background: rgba(36, 92, 58, 0.16); }
.reveal .bw-row code.ha2 { background: rgba(47, 122, 75, 0.16); }
.reveal .bw-row code.hn { background: rgba(107, 90, 31, 0.16); }
.reveal .bw-row code { display: block; color: var(--ink-strong); min-width: 0; max-width: 100%; justify-self: start; align-self: start; font-family: var(--r-code-font); border-radius: 3px; padding: 0 4px; white-space: normal; word-break: normal; }
.reveal .bw-row b { color: var(--ink-strong); font-weight: 500; }
.reveal .bw-row span { color: var(--ink); }

/* Small two-column explanation under a bytes block. */
.reveal table.decode {
  font-size: 58%;
  margin-top: 10px;
}

.reveal table.decode td:first-child {
  font-family: var(--r-code-font);
  color: var(--accent-soft);
  white-space: nowrap;
}

/* ---- prefix explorer: type a prefix, see its range ------------------------ */

.reveal form.prefix-explorer {
  margin: 0 auto;
  max-width: 36em;
  text-align: center;
}

.reveal .prefix-explorer input[name="prefix"] {
  width: 15em;
  padding: 0.25em 0.5em;
  font: inherit;
  font-family: var(--r-code-font);
  font-size: 0.8em;
  color: var(--r-main-color);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  outline: none;
  text-align: center;
}

.reveal .prefix-explorer input[name="prefix"]:focus { border-color: var(--accent); }

.reveal .prefix-explorer input[name="len"] {
  width: 12em;
  margin-left: 1em;
  vertical-align: middle;
  accent-color: var(--accent);
}

.reveal .prefix-explorer .px-bits { margin: 0.5em 0 0.4em; min-height: 1.6em; white-space: nowrap; }
.reveal .prefix-explorer .px-bad { color: #c62828; font-size: 70%; }

.reveal .px-range { font-family: var(--r-code-font); font-size: 50%; min-height: 10.5em; }

.reveal .px-levels { text-align: left; margin-bottom: 1em; }
.reveal .px-levels-title { color: var(--muted); margin-bottom: 0.35em; }
.reveal .px-level { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.3em; }
.reveal .px-level-name { width: 13em; text-align: right; color: var(--accent-soft); white-space: nowrap; }
.reveal .px-level-count { width: 8em; color: var(--muted); white-space: nowrap; }
.reveal .px-track { flex: 1; position: relative; height: 0.9em; background: var(--ground); border: 1px solid var(--rule); border-radius: 2px; }
.reveal .px-track i { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--accent); }

.reveal .px-bar {
  position: relative;
  height: 2.6em;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-rgb), 0.12));
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.reveal .px-bar .px-mid {
  position: absolute; left: 0; right: 0; top: 0.6em;
  text-align: center; color: var(--ink-strong); font-weight: 500;
}
.reveal .px-bar .px-end { position: absolute; top: 3em; color: var(--accent-soft); }
.reveal .px-bar .px-first { left: 0; }
.reveal .px-bar .px-last { right: 0; }

.reveal .prefix-explorer .px-facts { margin-top: 2.6em; }

/* ---- bits of an address: fixed part vs. free part ------------------------------ */

.bits {
  font-family: var(--r-code-font);
  font-size: 80%;
  letter-spacing: 0.02em;
}

.bits .fixed {
  color: #fff;
  background: var(--accent);
  border-radius: 4px 0 0 4px;
  padding: 2px 6px;
}

.bits .part {
  color: var(--accent-soft);
  background: var(--ground);
  border: 1px solid var(--accent);
  padding: 1px 4px;
  margin: 0 2px;
  font-size: 85%;
  letter-spacing: 0.12em;
}

.bits .part::before { content: "₂"; color: var(--muted); letter-spacing: 0; margin-right: 2px; }

.bits .part i { font-style: normal; color: var(--muted); }

.bits .free {
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 1px 6px;
}

/* ---- diagrams: inline SVG drawn with the theme's colours ------------------------ */

.reveal svg.diagram {
  width: 100%;
  height: auto;
  max-height: 470px;
  display: block;
  margin: 0 auto;
}

.diagram rect,
.diagram ellipse {
  fill: var(--ground);
  stroke: var(--rule);
  stroke-width: 2;
}

.diagram .hot rect {
  stroke: var(--accent);
}

.diagram .fabric rect {
  fill: rgba(var(--accent-rgb), 0.18);
  stroke: var(--accent);
}

.diagram text {
  fill: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 19px;
  text-anchor: middle;
}

.diagram text.small {
  font-size: 14px;
  fill: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

.diagram text.accent {
  fill: var(--accent);
}

.diagram .link {
  stroke: var(--muted);
  stroke-width: 2.5;
  fill: none;
}

.diagram .bgp {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
  fill: none;
}

/* Nested address ranges: each level a little brighter than the one around it. */
.diagram .nest rect {
  stroke: var(--accent);
  rx: 14;
}
.diagram .nest.l0 rect { fill: rgba(var(--accent-rgb), 0.04); stroke-opacity: 0.35; }
.diagram .nest.l1 rect { fill: rgba(var(--accent-rgb), 0.09); stroke-opacity: 0.55; }
.diagram .nest.l2 rect { fill: rgba(var(--accent-rgb), 0.16); stroke-opacity: 0.8; }
.diagram .nest.l3 rect { fill: rgba(var(--accent-rgb), 0.28); stroke-opacity: 1; }
.diagram text.left { text-anchor: start; }
.diagram text.mono { font-family: "IBM Plex Mono", monospace; }
.diagram .nest-label { font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 500; }
.diagram .nest-desc { font-size: 17px; fill: var(--ink); opacity: 0.85; }
.diagram text.host-addr { font-size: 15px; fill: var(--accent-soft); font-family: "IBM Plex Mono", monospace; }
.diagram .host { fill: var(--accent-soft); stroke: none; }

.diagram .traffic {
  stroke: #1a8a4f;
  stroke-width: 4;
  fill: none;
}