/* ==========================================================================
   Bot Defense on BIG-IP -- a field guide
   One stylesheet, no build step, no web fonts, no external requests.

   The palette lives in :root and nowhere else. Every colour below -- including
   every fill and stroke in the inline SVG diagrams -- is a var() reference, so
   rebranding is an edit to this block and not a search across index.html.
   ========================================================================== */

:root {
  /* F5 red. The public sources disagree and F5's own logo-guidelines PDF is
     image-only, so no authoritative value is extractable from it. Pantone 185 C
     is the widely cited one and is what ships; swap the line below for
     #E21D38 (PMS 179 C) if your brand kit says otherwise. */
  --f5-red:        #E4002B;
  /* --f5-red:     #E21D38; */
  --f5-red-dark:   #B00021;
  --f5-red-wash:   #fdeceb;

  --charcoal:      #1A1A1A;
  --slate:         #5b6770;   /* matches blog/diagrams/*.mmd */
  --slate-light:   #8b959c;
  --green:         #3aa864;   /* traffic that reaches the application */
  --green-wash:    #eef8f2;
  --panel:         #f4f6f7;
  --rule:          #e3e7e9;
  --white:         #ffffff;
  --ink:           #23282c;
  --ink-soft:      #5b6770;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --pad: clamp(28px, 4.2vw, 76px);
  --slide-max: 1240px;
  --shadow: 0 1px 2px rgba(26,26,26,.05), 0 8px 28px rgba(26,26,26,.07);
}

/* --------------------------------------------------------------- reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* the deck pages, it does not scroll */
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* IP addresses line up */
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.018em; }
p  { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 .85em; padding-left: 1.25em; }
li { margin-bottom: .38em; }
li:last-child { margin-bottom: 0; }
b, strong { font-weight: 650; color: var(--charcoal); }
code, kbd, .mono {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .08em .34em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- deck ---- */

.deck { position: relative; height: 100%; width: 100%; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--pad) * .8) var(--pad) calc(var(--pad) * 1.5);
  overflow-y: auto;                 /* safety net on very short viewports */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .26s ease, transform .26s ease;
  pointer-events: none;
}
.slide[hidden] { display: none; }
.slide.is-current { opacity: 1; transform: none; pointer-events: auto; }

.slide > .inner {
  width: 100%;
  max-width: var(--slide-max);
  margin: 0 auto;
}

/* Reduced motion: no slide-in, just a cut. */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; transform: none; }
}

/* ------------------------------------------------------------- headings --- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--f5-red);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.slide h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.slide h3 {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--charcoal);
  margin-bottom: 6px;
}

.deck-in {                          /* the sentence under an h2 */
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--ink-soft);
  max-width: 76ch;
  margin-bottom: 26px;
}
.deck-in strong { color: var(--charcoal); }

/* --------------------------------------------------------------- cover ---- */

.cover { justify-content: center; }
.cover .inner { max-width: 940px; }
.cover .mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
/* The official mark. assets/logo.png is the supplied file cropped to the mark's
   own bounds -- it arrived as 3000x2000 with 785px of empty margin on each side,
   which would have made this box mostly transparency and left the logo visually
   indented against the h1 below it. Height in px, not em: it sits beside 13px
   uppercase text and has to line up with that, not scale with the headline. */
.cover .mark .logo {
  display: block;
  height: 46px;
  width: auto;
}
.cover .mark .who {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.cover h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.cover h1 em { font-style: normal; color: var(--f5-red); }
.cover .lede {
  font-size: clamp(17px, 1.7vw, 22px);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 34px;
}
.cover .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--slate);
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.cover .meta b { color: var(--charcoal); font-weight: 650; }

kbd {
  background: var(--white);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .1em .45em;
  font-size: .82em;
  font-weight: 600;
  color: var(--charcoal);
}

/* ------------------------------------------------------------- divider ---- */

.slide.divider {
  background: var(--charcoal);
  color: var(--white);
  justify-content: center;
}
.divider .inner { max-width: 900px; }
.divider .act-no {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f5-red);
  margin-bottom: 14px;
}
.divider h2 {
  color: var(--white);
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.04;
  margin-bottom: 18px;
}
.divider p {
  color: #b9c1c6;
  font-size: clamp(16px, 1.6vw, 21px);
  max-width: 60ch;
}
.divider .bar {
  width: 62px;
  height: 4px;
  background: var(--f5-red);
  border-radius: 2px;
  margin-top: 30px;
}

/* --------------------------------------------------------------- cards ---- */

.grid { display: grid; gap: 18px; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card.flat { box-shadow: none; background: var(--panel); }
.card .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--f5-red);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.card h3 { margin-bottom: 8px; }
.card p, .card ul { font-size: 15px; color: var(--ink-soft); }
.card.accent { border-left: 3px solid var(--f5-red); }
.card.good  { border-left: 3px solid var(--green); }
.card.muted { background: var(--panel); box-shadow: none; color: var(--ink-soft); }

.note {
  border-left: 3px solid var(--f5-red);
  background: var(--f5-red-wash);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--ink);
  margin-top: 20px;
}
.note.calm { border-left-color: var(--slate); background: var(--panel); }
.note.good { border-left-color: var(--green); background: var(--green-wash); }
.note b { color: var(--charcoal); }

/* --------------------------------------------------------------- links ---- */
/* These are the only outbound references in the deck, and they are anchors --
   not resources. Nothing is fetched to render a slide, so the deck still opens
   with the network off; a link only costs anything when somebody clicks it.
   Wrapped in .lnk-row so the pill starts on its own line under the prose. */

.lnk-row { margin-top: 14px; }

a.lnk {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.lnk .u {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
}
a.lnk::after { content: "\2197"; font-weight: 500; color: var(--slate-light); }

a.lnk:hover { border-color: var(--f5-red); background: var(--f5-red-wash); }
a.lnk:hover, a.lnk:hover .u, a.lnk:hover::after { color: var(--f5-red); }
a.lnk:focus-visible { outline: 2px solid var(--f5-red); outline-offset: 2px; }

.caption {
  font-size: 13.5px;
  color: var(--slate);
  margin-top: 12px;
  line-height: 1.5;
}
.caption em { color: var(--charcoal); font-style: normal; font-weight: 600; }

/* --------------------------------------------------------------- table ---- */

.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tbl th {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  border-bottom-color: var(--slate-light);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td:first-child {
  font-weight: 650;
  color: var(--charcoal);
  white-space: nowrap;
  width: 1%;
}
.tbl td.wrap { white-space: normal; }
.tbl tbody tr:hover { background: var(--panel); }

/* ----------------------------------------------------------- questions ---- */

.qcard {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--f5-red);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qcard .q {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--charcoal);
  line-height: 1.35;
}
.qcard .a { font-size: 13.5px; color: var(--ink-soft); }
/* The card is a flex column, so an inline-block pill would stretch the full
   width of it. Keep the number badge the size of the number. */
.qcard .pill { align-self: flex-start; }

/* -------------------------------------------------------------- figure ---- */

figure { margin: 0; }
.shot {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.shot img { display: block; width: 100%; height: auto; }

/* The captures are ~3176px-wide retina window shots and they ship exactly as
   taken -- uncropped. At slide scale that puts a TMUI table below reading size,
   so each shot is clickable: deck.js opens it over the deck at full resolution.
   Cheaper than cropping, and nothing is hidden. The href stays a real link, so
   with scripting off -- and on a cmd-click -- it still opens the file. */
.shot a { display: block; position: relative; cursor: zoom-in; }
.shot a::after {
  content: "full size";
  position: absolute;
  right: 9px;
  bottom: 9px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(26, 26, 26, .7);
  color: var(--white);
}
.shot a:hover::after { background: var(--f5-red); }

.shot-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.shot-side { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }

/* ------------------------------------------------------------ lightbox ---- */
/* Built by deck.js on first use, so there is no dead markup in index.html and
   nothing here matters when scripting is off. Two states: fit the window, and
   full resolution with the overlay scrolling. */

.lb {
  position: fixed;
  inset: 0;
  z-index: 90;             /* over the nav chrome, which sits at 40 */
  overflow: auto;
  background: rgba(26, 26, 26, .93);
}
.lb[hidden] { display: none; }
body.lb-on { overflow: hidden; }

/* Fixed, not sticky: at full resolution the overlay scrolls, and Close has to
   stay reachable without scrolling back to the top of a 3000px image. */
.lb-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: linear-gradient(rgba(26, 26, 26, .9), rgba(26, 26, 26, 0));
}
.lb-hint { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.lb-x {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
}
.lb-x:hover { background: var(--f5-red); border-color: var(--f5-red); }
.lb-x:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.lb-stage {
  display: flex;
  min-height: 100%;
  padding: 58px 24px 26px;
  box-sizing: border-box;
}

/* margin:auto, not justify-content: when the image is wider than the viewport,
   centring it with the container's own alignment pushes its left edge past
   scroll origin, where no scrollbar can reach it. margin:auto centres without
   that. */
.lb-stage img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: calc(100vh - 84px);
  height: auto;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  cursor: zoom-in;
}
.lb-stage img.is-full {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.callouts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.callouts li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}
.callouts .k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}
.callouts .k.red { background: var(--f5-red); }
.callouts b { display: block; color: var(--charcoal); }

/* ---------------------------------------------------------------- svg ----- */

.fig { width: 100%; height: auto; display: block; }
.fig text { font-family: var(--font); }

/* Shared SVG classes, so the diagrams inherit the palette. */
.fig .box      { fill: var(--white); stroke: var(--slate-light); stroke-width: 1.5; }
.fig .box-p    { fill: var(--panel);  stroke: var(--slate-light); stroke-width: 1.5; }
.fig .box-r    { fill: var(--f5-red-wash); stroke: var(--f5-red); stroke-width: 1.5; }
.fig .box-g    { fill: var(--green-wash);  stroke: var(--green);  stroke-width: 1.5; }
.fig .box-d    { fill: var(--charcoal); stroke: var(--charcoal); }
.fig .dash     { fill: none; stroke: var(--slate-light); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fig .stop     { fill: var(--white); stroke: var(--f5-red); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Arrowheads live in one shared <defs> outside any .fig, so these are not
   scoped -- a marker is rendered where it is defined, not where it is used. */
.ah   { fill: var(--slate); }
.ah-l { fill: var(--slate-light); }
.ah-g { fill: var(--green); }
.ah-r { fill: var(--f5-red); }
.fig .t        { fill: var(--charcoal); font-size: 13px; font-weight: 650; }
.fig .t-s      { fill: var(--ink-soft); font-size: 11.5px; font-weight: 500; }
.fig .t-xs     { fill: var(--slate); font-size: 10.5px; font-weight: 500; }
.fig .t-w      { fill: var(--white); font-size: 13px; font-weight: 650; }
.fig .t-ws     { fill: #b9c1c6; font-size: 11px; font-weight: 500; }
.fig .t-r      { fill: var(--f5-red); font-size: 11.5px; font-weight: 700; }
.fig .t-g      { fill: var(--green); font-size: 11.5px; font-weight: 700; }
.fig .hd       { fill: var(--charcoal); font-size: 12px; font-weight: 700;
                 letter-spacing: .09em; text-transform: uppercase; }
.fig .flow     { fill: none; stroke: var(--slate); stroke-width: 1.8; }
.fig .flow-g   { fill: none; stroke: var(--green); stroke-width: 2.4; }
.fig .flow-r   { fill: none; stroke: var(--f5-red); stroke-width: 1.8; }
.fig .mono-t   { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); }

/* ------------------------------------------------------------ compare ----- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.compare > div { min-width: 0; }
.compare .head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--charcoal);
  color: var(--charcoal);
}
.compare .head.red { border-bottom-color: var(--f5-red); color: var(--f5-red); }
.compare .head.green { border-bottom-color: var(--green); color: var(--green); }

.stack { display: grid; gap: 10px; }
.blk {
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--white);
  padding: 12px 15px;
}
.blk .bt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 7px;
}
.blk .bt .cnt {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}
.blk ul { margin: 0; padding-left: 1.05em; font-size: 13px; color: var(--ink-soft); }
.blk li { margin-bottom: .2em; }
.blk.dense { background: var(--panel); }
.blk.gui { border-color: var(--green); background: var(--green-wash); }

.policy-rows { font-family: var(--mono); font-size: 12.5px; }
.policy-rows div {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
  color: var(--ink-soft);
}
.policy-rows div:last-child { border-bottom: none; }
.policy-rows .ord { color: var(--f5-red); font-weight: 700; }
.policy-rows .to { color: var(--charcoal); font-weight: 600; }

/* --------------------------------------------------------------- misc ----- */

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--slate);
  border: 1px solid var(--rule);
}
.pill.red   { background: var(--f5-red-wash); color: var(--f5-red-dark); border-color: #f6c9c4; }
.pill.green { background: var(--green-wash);  color: #237a45;            border-color: #bfe4cd; }

.headers-panel {
  background: var(--charcoal);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: #cfd6da;
}
.headers-panel .hk { color: #7fd1a0; }
.headers-panel .hv { color: var(--white); }
.headers-panel .top {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 10px;
}

details.reveal {
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
details.reveal > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 650;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 9px;
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 4px;
  background: var(--f5-red);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
details.reveal[open] > summary::before { content: "\2212"; }
details.reveal .body { padding: 0 16px 16px; }

.cmd {
  background: var(--charcoal);
  color: #e6ebee;
  border-radius: 9px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.cmd .p { color: var(--slate-light); }
.cmd .f { color: #7fd1a0; }

/* --------------------------------------------------------------- chrome --- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--f5-red);
  width: 0;
  transition: width .26s ease;
  z-index: 40;
}

.rail {
  position: fixed;
  left: var(--pad);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 40;
}
.rail .gap { width: 11px; }
.rail button {
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.rail button:hover { background: var(--slate-light); transform: scale(1.25); }
.rail button[aria-current="true"] { background: var(--f5-red); transform: scale(1.3); }
.divider ~ .rail button { background: #3d4348; }

.nav {
  position: fixed;
  right: var(--pad);
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 40;
}
.nav .count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  margin-right: 4px;
}
.nav button {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--charcoal);
  padding: 9px 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.nav button:hover:not(:disabled) { border-color: var(--slate-light); background: var(--panel); }
.nav button:disabled { opacity: .38; cursor: default; }
.nav button.primary {
  background: var(--f5-red);
  border-color: var(--f5-red);
  color: var(--white);
}
.nav button.primary:hover:not(:disabled) { background: var(--f5-red-dark); border-color: var(--f5-red-dark); }

:focus-visible { outline: 2px solid var(--f5-red); outline-offset: 2px; }

/* On a divider slide the fixed chrome sits on charcoal -- lighten it. */
body.on-dark .nav .count { color: var(--slate-light); }
body.on-dark .nav button:not(.primary) {
  background: transparent;
  border-color: #3d4348;
  color: #e6ebee;
}
body.on-dark .nav button:not(.primary):hover:not(:disabled) { background: #2a2f33; }
body.on-dark .rail button { background: #3d4348; }
body.on-dark .rail button[aria-current="true"] { background: var(--f5-red); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
  .grid.g4, .grid.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-side { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid.g2, .grid.g3, .grid.g4, .grid.g5,
  .compare, .shot-row { grid-template-columns: 1fr; }
  .rail { display: none; }
}
@media (max-height: 700px) {
  body { font-size: 15.5px; }
  .card { padding: 14px 16px; }
  .deck-in { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------- print --- */
/* A paged PDF is not a goal, but Cmd-P should not produce one blank page and
   twenty invisible ones. */
@media print {
  html, body { height: auto; overflow: visible; }
  .progress, .rail, .nav { display: none !important; }
  .deck { height: auto; }
  .slide {
    position: static;
    display: flex !important;
    opacity: 1;
    transform: none;
    min-height: 100vh;
    page-break-after: always;
    break-after: page;
  }
  .slide[hidden] { display: flex !important; }
  .slide.divider { background: var(--charcoal) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  details.reveal[open] .body, details.reveal .body { display: block; }
  .shot a::after { display: none; }   /* nothing to click on paper */
  .lb { display: none !important; }
}