/* =====================================================================
   dfec-reveal.css — the ECE 495 deck theme
   ---------------------------------------------------------------------
   One stylesheet for every lesson deck in the course. Pairs with
   dfec-deck.js. Load AFTER reveal/reset.css + reveal/reveal.css and
   after reveal/plugin/chalkboard.css.

   Authored against a 1920x1080 slide. All sizes are absolute px in that
   coordinate space; reveal scales the whole thing to the display.

   Palette and component vocabulary track the Jupyter Book (custom.css)
   so the deck and the site read as one system:
     navy  #00205B   headings, bands, card titles      (.bt-kind / hero)
     blue  #1f6098   accents, kickers, bullets
     card  #eef3fb bg + #b8c9e8 border                 (.key-concept)
     zebra #f0f7ff                                     (.sched tables)
   ===================================================================== */

:root {
  --navy:      #00205B;
  --navy-deep: #001640;
  --blue:      #1f6098;
  --blue-lift: #4a8fce;
  --ink:       #1c2530;
  --grey:      #526072;
  --rule:      #d8e2ec;
  --soft:      #f6f8fa;
  --card-bg:   #eef3fb;
  --card-edge: #b8c9e8;
  --zebra:     #f0f7ff;
  --kill:      #c0392b;
  --band-h:    92px;
}

html, body { background: #fff; }

.reveal {
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 38px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
}
.reveal .slides { text-align: left; }

/* ---------------------------------------------------------------------
   SLIDE SKELETON
   Reveal writes an INLINE `display: block` onto every section — past,
   present and future alike — and then drives visibility with
   opacity/visibility, not display. So a plain stylesheet rule can never
   win here; !important is required.

   It is gated on `.reveal.ready` (the class reveal adds after init) for
   two reasons: before init, reveal.css's `display:none` must still hold
   or every slide flashes stacked; and applying it to ALL sections rather
   than just `.present` keeps the layout identical on the outgoing slide,
   so a fade does not re-flow mid-transition.
   --------------------------------------------------------------------- */
.reveal .slides > section {
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}
.reveal.ready .slides > section {
  display: flex !important;
  flex-direction: column;
}

/* The zone is everything under the title: it takes all leftover height
   and distributes its children down the full slide. That is the whole
   answer to "slides look short" — content is spread, not stacked at the
   top with 300px of dead white underneath. */
.zone {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
/* .top — packed from the top instead of spread. For code-heavy slides
   where even spacing would float the code block away from its lead-in. */
.top .zone {
  justify-content: flex-start;
  gap: 40px;
}
.zone > * { margin-top: 0; margin-bottom: 0; }
/* A lone child (or a grid that owns the slide) absorbs the slack instead of
   floating in the middle with a fat gap above and below — this is what keeps
   the sparse slides at >=85% fill. */
.zone > :only-child,
.zone > .two-col,
.zone > .flow.grow { flex: 1 1 auto; }
.zone > .flow.grow { align-items: center; }

/* ---------------------------------------------------------------------
   HEADER BAND  (filled by dfec-deck.js, empty in the deck markup)
   --------------------------------------------------------------------- */
.band {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 24px;
  height: var(--band-h);
  border-bottom: 4px solid var(--navy);
  margin-bottom: 18px;
}
.band img { height: 64px; width: auto; display: block; }
.band img.dfec { height: 58px; }
.band .band-txt {
  flex: 1; text-align: center;
  font-size: 21px; font-weight: 500; color: var(--grey);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   KICKER — the deck's answer to .bt-kind / .hero-eyebrow in the book
   --------------------------------------------------------------------- */
.kicker {
  flex: 0 0 auto;
  font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--blue);
  margin: 0 0 8px;
}
.kicker .sep { color: var(--card-edge); margin: 0 10px; }

/* ---------------------------------------------------------------------
   HEADINGS + TEXT
   --------------------------------------------------------------------- */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: inherit;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.12;
  font-weight: 700;
  text-shadow: none;
}
.reveal h2 { flex: 0 0 auto; font-size: 58px; margin-bottom: 8px; }
.reveal h3 { font-size: 38px; }
.reveal p  { margin: 0 0 14px; line-height: 1.5; }
.reveal p:last-child { margin-bottom: 0; }
.reveal strong { color: var(--navy); font-weight: 700; }
.reveal a { color: var(--blue); }

.lede  { font-size: 40px; line-height: 1.4; }
.note  { font-size: 31px; color: var(--grey); line-height: 1.45; }
.fineprint {
  text-align: center; font-size: 25px; font-style: italic;
  color: var(--grey);
}

/* ---------------------------------------------------------------------
   LISTS — generous vertical rhythm is the point
   --------------------------------------------------------------------- */
.reveal ul { list-style: none; margin: 0; padding: 0; }
.reveal ul li {
  position: relative;
  padding-left: 32px;
  margin: 0.55em 0;
  line-height: 1.42;
}
.reveal ul li:first-child { margin-top: 0; }
.reveal ul li:last-child  { margin-bottom: 0; }
.reveal ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 12px; height: 12px; border-radius: 50%; background: var(--blue);
}
/* .tight — compact list for slides that already carry a diagram */
.reveal ul.tight li { margin: 0.28em 0; font-size: 0.86em; }

.reveal ul ul { margin: 0.4em 0 0.2em 4px; }
.reveal ul ul li {
  font-size: 0.82em; color: var(--grey);
  margin: 0.42em 0; padding-left: 28px;
}
.reveal ul ul li::before {
  width: 12px; height: 3px; border-radius: 0; background: #9aa6b4; top: 0.72em;
}

/* ---------------------------------------------------------------------
   TWO-COLUMN
   --------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
}
.two-col.wide { grid-template-columns: 3fr 2fr; }
.two-col.narrow { grid-template-columns: 2fr 3fr; }
.two-col > * { min-width: 0; }

/* ---------------------------------------------------------------------
   CARDS — the book's .key-concept treatment
   --------------------------------------------------------------------- */
.card {
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card-bg);
  overflow: hidden;
}
.card > .card-title {
  background: var(--navy); color: #fff;
  font-weight: 700; font-size: 24px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 22px;
  display: flex; align-items: center; gap: 14px;
}
.card > .card-title .ico { width: 30px; height: 30px; flex: 0 0 auto; }
.card > .card-body { padding: 17px 26px; font-size: 29px; line-height: 1.38; }
.card > .card-body p:last-child { margin-bottom: 0; }
.card > .card-body ul li { margin: 0.4em 0; font-size: 28px; }

/* Left-accent callout for asides — the book's border-left rule, no title */
.callout {
  border-left: 8px solid var(--blue);
  background: var(--soft);
  border-radius: 0 8px 8px 0;
  padding: 16px 28px;
  font-size: 29px; line-height: 1.4; color: var(--grey);
}
.callout strong { color: var(--navy); }

/* ---------------------------------------------------------------------
   BUMPER — a statement across the slide, not a floating bar
   --------------------------------------------------------------------- */
.bumper {
  flex: 0 0 auto;
  background: var(--navy); color: #fff;
  border-radius: 12px;
  padding: 20px 40px;
  font-weight: 600; line-height: 1.2;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.bumper.r-fit-text { padding: 22px 40px; }

/* ---------------------------------------------------------------------
   FLOW DIAGRAMS (roadmap blocks, kill-chain links)
   --------------------------------------------------------------------- */
.flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; width: 100%;
}
.flow .node {
  background: var(--navy); color: #fff; border-radius: 10px;
  padding: 20px 16px; text-align: center;
  font-weight: 700; line-height: 1.2;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.flow .node.kill { background: var(--kill); }
.flow .node small {
  display: block; font-weight: 500; font-size: 0.62em;
  opacity: .85; margin-top: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.flow .arrow {
  align-self: center; color: var(--navy);
  font-weight: 700; font-size: 44px; padding: 0 20px;
}
.flow.blocks .node { width: 330px; min-height: 142px; font-size: 30px; }
.flow.chain  .node { width: 248px; min-height: 100px; font-size: 33px; }

/* Compact variant — the "before" half of the roadmap auto-animate pair */
.flow.compact .node   { width: 214px; min-height: 92px; font-size: 26px; }
.flow.compact .arrow  { font-size: 30px; padding: 0 10px; }

/* Red attack annotations that morph in over the kill chain */
.attack {
  color: var(--kill); font-weight: 700; font-size: 23px;
  text-align: center; line-height: 1.3;
  letter-spacing: .02em;
}
.attack .ico { width: 26px; height: 26px; display: block; margin: 0 auto 6px; }
.chain-attacks {
  display: flex; justify-content: center; width: 100%;
}
.chain-attacks .slot { width: 248px; padding: 0 6px; box-sizing: border-box; }
.chain-attacks .gap  { width: 82px; }

/* ---------------------------------------------------------------------
   GRADE TABLE — the book's .sched card frame
   --------------------------------------------------------------------- */
table.grades {
  border-collapse: separate; border-spacing: 0;
  width: 100%;
  font-size: 29px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  overflow: hidden;
}
table.grades thead th {
  background: var(--navy); color: #fff;
  font-size: 21px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 13px 26px; text-align: left;
}
table.grades td { padding: 13px 26px; border-top: 1px solid var(--rule); }
table.grades tbody tr:first-child td { border-top: none; }
table.grades tbody tr:nth-child(even) { background: var(--zebra); }
table.grades .w { text-align: right; width: 220px; }
table.grades tbody tr.total td {
  background: var(--card-bg);
  border-top: 2px solid var(--navy);
  font-weight: 700; color: var(--navy);
}

/* ---------------------------------------------------------------------
   CODE — JetBrains Mono, the book's code-highlight look
   --------------------------------------------------------------------- */
.reveal pre {
  display: block; width: 100%; box-shadow: none; margin: 0;
  background: var(--soft);
  border: 1px solid var(--card-edge);
  border-left: 6px solid var(--blue);
  border-radius: 8px;
  padding: 22px 30px;
  font-size: 28px; line-height: 1.45;
  box-sizing: border-box;
}
.reveal pre code {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', 'SFMono-Regular', monospace;
  display: block; overflow: visible; padding: 0; background: none;
  color: var(--ink); white-space: pre; max-height: none;
  font-variant-ligatures: none;
}
.reveal code { font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 0.92em; }

/* ---------------------------------------------------------------------
   ICONS — 2px stroke, navy or mid-blue, no icon font anywhere
   --------------------------------------------------------------------- */
.ico {
  width: 44px; height: 44px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.ico-lg { width: 112px; height: 112px; }
.ico-navy { color: var(--navy); }
.ico-blue { color: var(--blue); }
.ico-kill { color: var(--kill); }

/* ---------------------------------------------------------------------
   DIVIDER SLIDES — full-bleed navy, big white type
   --------------------------------------------------------------------- */
.reveal.ready .slides > section.divider { justify-content: center; }
section.divider {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* the navy bleeds past the slide edge, so the copy needs its own inset or
     it reads as jammed against the colour */
  padding: 0 72px !important;
}
/* Reveal paints the slide inside the padded .slides box; push the navy to
   the true slide edges so the divider is genuinely full-bleed. */
section.divider::before {
  content: ""; position: absolute;
  top: -6%; left: -6%; right: -6%; bottom: -6%;
  background: var(--navy); z-index: 0;
}
section.divider > *:not(.sweep) { position: relative; z-index: 2; }
section.divider .sweep { z-index: 1; }
section.divider h2 {
  color: #fff; font-size: 100px; letter-spacing: -0.02em; margin: 0;
}
section.divider .kicker { color: var(--blue-lift); opacity: .95; }
section.divider .divider-sub {
  color: rgba(255, 255, 255, .78);
  font-size: 35px; margin-top: 20px; max-width: 1220px; line-height: 1.4;
}
section.divider .ico { color: var(--blue-lift); opacity: .9; }

/* ---------------------------------------------------------------------
   RADAR SWEEP MOTIF (title + dividers)
   --------------------------------------------------------------------- */
.sweep {
  position: absolute;
  pointer-events: none;
  opacity: .5;
}
.sweep .ring { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .38; }
.sweep .spoke { stroke: currentColor; stroke-width: 1; opacity: .22; }
/* transform-box: view-box makes the percentage origin resolve against the
   viewBox (100,100 = dish centre) rather than the wedge's own bounding box. */
.sweep .wedge, .sweep .ping { transform-box: view-box; transform-origin: 50% 50%; }
.sweep.title-sweep .wedge { fill: url(#sweepgradA); }
.sweep.div-sweep   .wedge { fill: url(#sweepgradB); }
.sweep.title-sweep { right: -180px; top: 50%; transform: translateY(-50%); width: 1100px; height: 1100px; color: var(--blue); opacity: .30; }
.sweep.div-sweep   { right: -120px; bottom: -260px; width: 820px; height: 820px; color: var(--blue-lift); opacity: .34; }

@media (prefers-reduced-motion: no-preference) {
  .sweep .wedge { animation: dfec-sweep 7s linear infinite; }
  .sweep .ping  { animation: dfec-ping 7s ease-out infinite; transform-origin: 50% 50%; }
  @keyframes dfec-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes dfec-ping {
    0%, 72%  { opacity: 0; }
    76%      { opacity: .85; }
    100%     { opacity: 0; }
  }
}

/* ---------------------------------------------------------------------
   TITLE SLIDE
   --------------------------------------------------------------------- */
section.title-slide { position: relative; overflow: hidden; }
.reveal.ready .slides > section.title-slide { justify-content: center; }
section.title-slide > *:not(.sweep) { position: relative; z-index: 2; }
section.title-slide .sweep { z-index: 1; }
.title-slide .logos { display: flex; align-items: center; gap: 40px; margin-bottom: 26px; }
.title-slide .logos img { height: 96px; width: auto; }
.title-slide .logos img.dfec { height: 84px; }
.title-slide h1 { font-size: 78px; line-height: 1.1; max-width: 1250px; }
.title-slide .rule {
  height: 8px; background: var(--blue); border-radius: 4px;
  width: 300px; margin: 30px 0 30px;
}
.title-slide .sub { font-size: 42px; color: var(--blue); font-weight: 600; line-height: 1.35; }
.title-slide .who { font-size: 30px; color: var(--grey); margin-top: 40px; line-height: 1.55; }
.title-slide .keys { margin-top: 46px; font-size: 22px; color: var(--grey); opacity: .85; }
.title-slide .keys kbd {
  font-family: inherit; font-weight: 600; color: var(--navy);
  background: var(--soft); border: 1.5px solid var(--rule);
  border-radius: 6px; padding: 1px 9px; margin: 0 2px;
}

/* ---------------------------------------------------------------------
   LIVE DEMO SLIDE — full-bleed iframe with a compact top strip
   --------------------------------------------------------------------- */
section.demo-slide .demo-strip {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: 28px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 3px solid var(--navy);
}
section.demo-slide .demo-strip h2 { font-size: 42px; margin: 0; flex: 0 0 auto; }
section.demo-slide .demo-strip .companion {
  margin-left: auto; font-size: 24px; color: var(--grey); text-align: right;
}
section.demo-slide .demo-strip .companion code { color: var(--navy); font-weight: 600; }
.demo-frame {
  flex: 1 1 auto; min-height: 0;
  border: 1px solid var(--card-edge); border-radius: 10px;
  overflow: hidden; background: #fff;
}
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Print gets a card instead of a live frame */
.demo-print {
  display: none;
  flex: 1 1 auto;
  border: 2px dashed var(--card-edge); border-radius: 12px;
  background: var(--card-bg);
  align-items: center; justify-content: center; text-align: center;
}
.demo-print .dp-inner { max-width: 1100px; }
.demo-print .dp-kind {
  font-size: 24px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.demo-print h3 { font-size: 54px; margin-bottom: 16px; }
.demo-print .dp-url { font-size: 30px; color: var(--grey); }

/* ---------------------------------------------------------------------
   FRAGMENTS — stepped lists dim as they go by
   --------------------------------------------------------------------- */
.reveal .fragment.dim-past.visible:not(.current-fragment) { opacity: .38; }
.reveal .fragment.dim-past { transition: opacity .25s ease; }

/* ---------------------------------------------------------------------
   DECK CHROME (control bar + nav, injected by dfec-deck.js)
   --------------------------------------------------------------------- */
.reveal .slide-number {
  background: none; color: var(--grey); font-size: 15px;
  font-family: inherit; right: 14px; bottom: 46px;
}
.reveal .progress { color: var(--blue); height: 3px; }

.deck-tools, .deck-nav {
  position: fixed; bottom: 10px; z-index: 40;
  display: flex; align-items: center; gap: 6px;
}
.deck-tools { left: 12px; }
.deck-nav   { right: 12px; }
.deck-tools button, .deck-nav button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; padding: 0;
  background: #fff; color: var(--navy);
  border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; transition: background .12s, border-color .12s;
  font: inherit;
}
.deck-tools button:hover, .deck-nav button:hover {
  background: var(--soft); border-color: var(--blue);
}
.deck-tools button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.deck-tools button svg, .deck-nav button svg { width: 17px; height: 17px; display: block; }
.deck-tools .sep { width: 1px; height: 20px; background: var(--rule); margin: 0 3px; }

/* chalkboard palette / board handle, repainted navy */
div.palette, div.boardhandle {
  background: var(--navy);
  border-top-color: var(--navy);
  border-right-color: var(--navy);
  border-bottom-color: var(--navy);
  box-shadow: 0 3px 15px rgba(0, 32, 91, .25);
}

/* ---------------------------------------------------------------------
   BUG FIX 1 — the .overlay collision.
   reveal 5 styles `.reveal > .overlay` as its frosted modal (dark wash +
   backdrop-filter: blur(6px)), and the chalkboard plugin reuses that same
   class name for its two full-screen canvas containers. Result: every
   slide sat under a permanent 6px gaussian blur. Neutralize here, and
   again inline on ready() in dfec-deck.js in case a plugin update
   rebuilds the containers after this sheet parses.
   --------------------------------------------------------------------- */
.reveal > #notescanvas.overlay,
.reveal > #chalkboard.overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* We only ever use 2D transitions, so drop the 3D compositing reveal sets
   up for convex/concave/zoom. A preserve-3d layer rasterizes once and then
   GPU-scales, which softens text at any scale != 1; flat lets the browser
   re-rasterize at the true scale. */
.reveal .slides,
.reveal .slides section { transform-style: flat !important; }

/* ---------------------------------------------------------------------
   PRINT / ?print-pdf
   reveal 5 stamps BOTH `reveal-print` and `print-pdf` on <html>.
   --------------------------------------------------------------------- */
@media print {
  .deck-tools, .deck-nav { display: none !important; }
}
.print-pdf .deck-tools, .print-pdf .deck-nav,
.reveal-print .deck-tools, .reveal-print .deck-nav { display: none !important; }

/* In print each section is wrapped in a `.pdf-page` div, so `.slides >
   section` (child combinator) stops matching and the flex column has to be
   re-declared. It must ALSO out-weigh reveal's own
   `html.reveal-print .reveal .slides section { display: block !important }` —
   that selector is (0,3,2) because of the `html`, so ours has to carry the
   `html` too or it loses on specificity even with !important. */
html.reveal-print .reveal .slides section,
html.print-pdf .reveal .slides section {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
html.reveal-print .reveal .slides section.divider,
html.print-pdf .reveal .slides section.divider { justify-content: center; }
html.reveal-print .reveal .slides section.title-slide,
html.print-pdf .reveal .slides section.title-slide { justify-content: center; }
/* the divider bleed is clipped by the page, not allowed to grow it */
.reveal-print .pdf-page, .print-pdf .pdf-page { overflow: hidden; }

/* Live iframes do not print; swap in the placeholder card. */
.reveal-print .demo-frame, .print-pdf .demo-frame { display: none !important; }
.reveal-print .demo-print, .print-pdf .demo-print { display: flex !important; }

/* Ambient motion is meaningless on paper. */
.reveal-print .sweep .wedge, .print-pdf .sweep .wedge,
.reveal-print .sweep .ping,  .print-pdf .sweep .ping { animation: none !important; }

/* ---------- print-view banner (screen only; never printed) ---------- */
.print-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #00205B; color: #fff;
  font: 500 15px/1.4 'Inter', sans-serif;
  padding: 10px 16px; text-align: center;
}
.print-banner button {
  margin-left: 12px; padding: 4px 14px; border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px; background: transparent; color: #fff; font: inherit; cursor: pointer;
}
.print-banner button:hover { background: rgba(255,255,255,.12); }
@media print { .print-banner { display: none !important; } }

/* ---------- chrome strip ----------
   The toolbar/nav live in a reserved 56px band at the viewport bottom.
   Shrinking .reveal makes reveal lay slides out ABOVE the band, so no
   slide content (bumpers, last bullets) can ever sit under the controls.
   The print view keeps the full page. */
html:not(.reveal-print):not(.print-pdf) .reveal { height: calc(100% - 56px) !important; }
html:not(.reveal-print):not(.print-pdf) .reveal .slide-number { bottom: 8px; }

/* ---------- toolbar swatches (visible only while inking) ---------- */
.deck-tools .swatches {
  display: none; align-items: center; gap: 6px; margin: 0 2px;
}
.deck-tools.ink-on .swatches { display: inline-flex; }
.deck-tools .swatch {
  width: 22px; height: 22px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  outline: 1px solid var(--rule, #d8e2ec);
  cursor: pointer;
}
.deck-tools .swatch.on { outline: 2px solid #00205B; }
.deck-tools .swatch-eraser {
  background: #fff; color: #00205B; border-radius: 6px;
  width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center;
}
.deck-tools .swatch-eraser svg { width: 15px; height: 15px; }

/* our swatches replace the plugin's half-offscreen palette, and the board
   prev/next buttons replace its edge handle (whose font-awesome chevrons
   were never loaded — it rendered as an empty navy tab) */
div.palette, div.boardhandle { display: none !important; }

.deck-tools .boardnav { display: none; }
.deck-tools.board-on .boardnav {
  display: inline-flex; width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: #fff; color: #00205B;
  border: 1px solid var(--rule, #d8e2ec); border-radius: 6px;
  cursor: pointer; padding: 0;
}
.deck-tools .boardnav svg { width: 15px; height: 15px; }