@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ==========================================================================
   TADA-Wiki — theme
   The palette is defined once here as custom properties, so that a change of
   colour is a change of token value rather than a change to the rules.
   The light theme is the default; the dark theme (bottom of the file)
   redefines the same tokens under html[data-theme="dark"].
   ========================================================================== */

:root {
  --tada-t: #C1442E;   /* Transferable */
  --tada-a1: #1F6B3B;  /* Available    */
  --tada-d: #6A3D9A;   /* Documented   */
  --tada-a2: #1D5FA8;  /* Annotated    */

  --tada-ink: #1E2A32;
  --tada-ink-soft: #4A5A66;
  --tada-line: #E3E8EC;
  --tada-surface: #F6F8F9;
  --tada-surface-2: #EDF2F4;
  --tada-accent: #0F6E7B;
  --tada-accent-soft: #E6F2F3;

  --tada-good: #1F6B3B;
  --tada-good-bg: #EEF6F0;
  --tada-bad: #B3301C;
  --tada-bad-bg: #FCEFEC;
  --tada-warn: #8A5708;   /* 5.4:1 on --tada-warn-bg; the label is small caps */
  --tada-warn-bg: #FDF4E3;

  /* Surfaces that were hard-coded white, and the tints that sit on them. */
  --tada-page: #FFFFFF;
  --tada-card: #FFFFFF;
  --tada-code-ink: #0B4F58;
  --tada-t-bg: #FBEEEC;
  --tada-a1-bg: #EAF5EE;
  --tada-d-bg: #F3EEF8;
  --tada-a2-bg: #EAF1F9;
  --tada-key-bg: #F5F0FB;
  --tada-wiki: #3A57A6;
  --tada-wiki-bg: #EEF1FA;

  --tada-radius: 12px;
  --tada-shadow: 0 1px 2px rgba(19, 41, 51, .06), 0 6px 20px rgba(19, 41, 51, .06);
}

html body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tada-ink);
  font-size: 1.02rem;
  line-height: 1.62;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Scoped to main so the display sizes do not leak into bs4_book's sidebar. */
main h1 { font-size: 2.2rem; line-height: 1.2; }
main h2 { font-size: 1.55rem; margin-top: 2.4rem; }
main h3 { font-size: 1.2rem; margin-top: 1.8rem; }

code, pre, kbd, .sourceCode {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

/* Inline code reads as a token, not as body text. */
:not(pre) > code {
  background: var(--tada-surface-2);
  border-radius: 5px;
  padding: 0.12em 0.35em;
  color: var(--tada-code-ink);
}

div.sourceCode, pre {
  border: 1px solid var(--tada-line);
  border-radius: var(--tada-radius);
  background: var(--tada-surface);
}

/* --------------------------------------------------------------------------
   Hero panel (front page)
   -------------------------------------------------------------------------- */

.tada-hero {
  border: 1px solid var(--tada-line);
  border-radius: 18px;
  padding: 2rem 2rem 1.6rem;
  background: var(--tada-card);
  box-shadow: var(--tada-shadow);
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.tada-hero-text { flex: 1 1 320px; min-width: 0; }

.tada-hero-figure {
  flex: 0 0 auto;
  margin: 0 auto;
}

.tada-hero-figure img {
  display: block;
  width: 200px;
  height: auto;
}

/* Pandoc wraps a paragraph containing a single image in an implicit
   "figure" div; bs4_book's own stylesheet styles that wrapper
   (.inline-figure) with a site-wide 2px light-grey border and bottom
   margin meant for content screenshots/diagrams. Our mascot art (the
   hero wizard, and the standalone "what happens next" dog) lands in
   that same wrapper, which is what reads as a faint border around
   them. Strip it here rather than globally, so real content figures
   keep their border. */
.tada-hero-figure .inline-figure,
.tada-dog-float--standalone .inline-figure {
  border: none;
  margin-bottom: 0;
  width: auto;
  overflow: visible;
}

@media (max-width: 620px) {
  .tada-hero { flex-direction: column-reverse; }
  .tada-hero-figure img { width: 148px; }
}

.tada-hero .tada-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--tada-accent);
  margin: 0 0 .5rem;
}

.tada-hero h2 {
  font-size: 1.9rem;
  margin: 0 0 .6rem;
}

.tada-hero p { margin-bottom: .6rem; }
.tada-hero p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Letter cards — the four TADA principles
   -------------------------------------------------------------------------- */

/* 230px keeps four cards as a tidy 2x2 in bs4_book's main column rather than
   3 + 1 orphan; it drops to a single column on narrow screens. */
.tada-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 1.6rem 0 2rem;
}

.tada-card {
  border: 1px solid var(--tada-line);
  border-top: 4px solid var(--tada-accent);
  border-radius: var(--tada-radius);
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--tada-card);
  box-shadow: var(--tada-shadow);
}

/* Each card takes a faint tint of its own letter's colour, so the 2x2 grid
   reads as four distinct principles rather than four identical white boxes. */

.tada-card p { margin-bottom: .4rem; }
.tada-card p:last-child { margin-bottom: 0; }

.tada-card .tada-letter {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: .35rem;
}

.tada-card .tada-word {
  font-weight: 600;
  font-size: 1.02rem;
  display: block;
  margin-bottom: .3rem;
}

.tada-card .tada-gloss {
  color: var(--tada-ink-soft);
  font-size: .93rem;
}

.tada-card.t  { border-top-color: var(--tada-t); background: var(--tada-t-bg); }
.tada-card.t  .tada-letter { color: var(--tada-t); }
.tada-card.a1 { border-top-color: var(--tada-a1); background: var(--tada-a1-bg); }
.tada-card.a1 .tada-letter { color: var(--tada-a1); }
.tada-card.d  { border-top-color: var(--tada-d); background: var(--tada-d-bg); }
.tada-card.d  .tada-letter { color: var(--tada-d); }
.tada-card.a2 { border-top-color: var(--tada-a2); background: var(--tada-a2-bg); }
.tada-card.a2 .tada-letter { color: var(--tada-a2); }

/* For card grids that reuse this component for non-TADA content (e.g. the
   three goals of archiving, the "Four Rs" of code review) -- neutral, so it
   doesn't borrow a colour that means something specific elsewhere. */
.tada-card.neutral { border-top-color: var(--tada-accent); background: var(--tada-surface); }
.tada-card.neutral .tada-letter { color: var(--tada-accent); }

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.tada-tip, .tada-warn, .tada-note, .tada-key, .tada-wiki {
  border: 1px solid var(--tada-line);
  border-left: 4px solid var(--tada-accent);
  border-radius: 10px;
  padding: .9rem 1.05rem;
  margin: 1.4rem 0;
  background: var(--tada-accent-soft);
}

.tada-tip > :last-child,
.tada-warn > :last-child,
.tada-note > :last-child,
.tada-key > :last-child,
.tada-wiki > :last-child { margin-bottom: 0; }

.tada-tip::before, .tada-warn::before, .tada-note::before, .tada-key::before, .tada-wiki::before {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.tada-tip::before  { content: "Try this"; color: var(--tada-good); }
.tada-tip  { border-left-color: var(--tada-good); background: var(--tada-good-bg); }

.tada-warn::before { content: "Watch out"; color: var(--tada-warn); }
.tada-warn { border-left-color: var(--tada-warn); background: var(--tada-warn-bg); }

.tada-note::before { content: "Note"; color: var(--tada-accent); }

.tada-key::before  { content: "The short version"; color: var(--tada-d); }
.tada-key  { border-left-color: var(--tada-d); background: var(--tada-key-bg); }

.tada-wiki::before { content: "Wiki Tip"; color: var(--tada-wiki); }
.tada-wiki { border-left-color: var(--tada-wiki); background: var(--tada-wiki-bg); }

/* Terms on this page (sidebar, built by assets/tada-glossary.js) */
.tada-terms { margin-top: 1.5rem; }
.tada-terms > summary.tada-terms-head {
  cursor: pointer;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tada-ink);
  padding: .1rem 0 .35rem;
}
.tada-terms > summary.tada-terms-head:hover { color: var(--tada-accent); }
.tada-terms ul { list-style: none; padding: 0; margin: 0; }
.tada-terms li { margin: 0 0 .1rem; }
.tada-terms li summary {
  cursor: pointer;
  font-size: .875rem;
  padding: .15rem 0;
  color: var(--tada-ink-soft);
}
.tada-terms li summary:hover,
.tada-terms li details[open] > summary { color: var(--tada-accent); }
.tada-term-def {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--tada-ink);
  margin: .25rem 0 .55rem;
  padding: .45rem .6rem;
  border-left: 2px solid var(--tada-accent);
  background: var(--tada-accent-soft);
  border-radius: 0 6px 6px 0;
}
.tada-term-def code { font-size: .78rem; }
.tada-term-more { display: block; margin-top: .35rem; font-weight: 600; }
.tada-terms-all { display: inline-block; margin-top: .6rem; font-size: .8125rem; }

/* Glossary */
.tada-glossary dl { margin: 1.2rem 0; }
.tada-glossary dt { font-weight: 700; margin-top: 1.1rem; scroll-margin-top: 1rem; }
.tada-glossary dd {
  margin: .25rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--tada-line);
}
.tada-glossary dd > p { margin-bottom: .4rem; }
.tada-gloss-tag {
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: .15em;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  color: var(--tada-accent);
  background: var(--tada-accent-soft);
  border: 1px solid var(--tada-line);
}

/* --------------------------------------------------------------------------
   Before / after code comparison
   -------------------------------------------------------------------------- */

.tada-compare {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 1.4rem 0;
}

.tada-before, .tada-after {
  border: 1px solid var(--tada-line);
  border-radius: var(--tada-radius);
  padding: .85rem 1rem 1rem;
  background: var(--tada-card);
}

.tada-before { border-top: 4px solid var(--tada-bad); background: var(--tada-bad-bg); }
.tada-after  { border-top: 4px solid var(--tada-good); background: var(--tada-good-bg); }

.tada-before > p:first-child, .tada-after > p:first-child {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.tada-before > p:first-child { color: var(--tada-bad); }
.tada-after  > p:first-child { color: var(--tada-good); }

.tada-compare div.sourceCode, .tada-compare pre {
  background: var(--tada-card);
  margin-bottom: .6rem;
}

.tada-compare > div > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tabs — built from Pandoc `.tabset` sections by assets/tada.js
   -------------------------------------------------------------------------- */

.tada-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  border-bottom: 2px solid var(--tada-line);
  margin: 1.2rem 0 1.2rem;
  padding: 0;
}

.tada-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  color: var(--tada-ink-soft);
  padding: .5rem .85rem;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tada-tab:hover { background: var(--tada-surface); color: var(--tada-ink); }

.tada-tab.is-active {
  color: var(--tada-accent);
  border-bottom-color: var(--tada-accent);
  font-weight: 600;
}

.tada-tab:focus-visible {
  outline: 2px solid var(--tada-accent);
  outline-offset: 2px;
}

.tada-pane { display: none; }
.tada-pane.is-active { display: block; }
.tada-pane > h2:first-child,
.tada-pane > h3:first-child,
.tada-pane > h4:first-child { display: none; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: .94rem;
  display: block;
  overflow-x: auto;
  table-layout: fixed;
}

/* Bootstrap fixes .table text at #343F46, which is unreadable on the dark
   theme; use the theme's ink colour in both themes instead. */
main table,
main .table { color: var(--tada-ink); }

/* Bootstrap's .text-muted grey (the sidebar subtitle) is just under 4.5:1 on
   white; use the theme's soft ink, as dark mode already does. */
.text-muted { color: var(--tada-ink-soft) !important; }

main table th {
  text-align: left;
  background: var(--tada-surface-2);
  font-weight: 600;
  border-bottom: 2px solid var(--tada-line);
}

main table th, main table td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--tada-line);
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

main table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Checklists — `- [ ]` task lists get a real box
   -------------------------------------------------------------------------- */

/* Pandoc renders task lists as ul.task-list > li > label > input. Remove the
   disc bullet (old selectors assumed li > input and never matched) and hang the
   box in the left padding. The label is NOT flexed: flex would turn inline
   <code> chips and <strong> into separate items and scramble the line. */
main ul.task-list {
  list-style: none;
  padding-left: 1.7em;
  margin: 1rem 0 1.4rem;
}

main ul.task-list > li {
  position: relative;
  margin: .4rem 0;
}

main ul.task-list > li > label { cursor: pointer; }

/* Box hangs in the padding, aligned to the first line; text flows normally. */
main ul.task-list input[type="checkbox"] {
  position: absolute;
  left: -1.6em;
  top: .3em;
  width: 1.05em;
  height: 1.05em;
  margin: 0;
  accent-color: var(--tada-accent);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

blockquote {
  border-left: 3px solid var(--tada-line);
  color: var(--tada-ink-soft);
  padding-left: 1rem;
  margin-left: 0;
}

/* Sidebar / chapter nav polish. bs4_book renders the book title as
   header.sidebar > div > h1 > a, so target the sidebar rather than gitbook's
   .book-title, which this theme never emits. */
.sidebar h1, .sidebar h1 a { font-family: "Fraunces", Georgia, serif; }

/* Wizard mark next to the book title, inserted by assets/tada-mascot.js.
   Without JavaScript there is no logo and the title keeps bs4_book's own
   layout. With it, the heading becomes a two-column grid: the logo on the
   left, centred against the title and subtitle stacked on the right, so the
   two lines start at the same edge instead of wrapping round a float. */
.tada-logo {
  width: 34px;
  height: auto;
}

.sidebar h1.tada-has-logo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: .2rem;
  align-items: start;
}

.sidebar h1.tada-has-logo .tada-logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

.sidebar h1.tada-has-logo > a,
.sidebar h1.tada-has-logo > small {
  grid-column: 2;
}

.sidebar h1.tada-has-logo > small {
  display: block;
  line-height: 1.35;
}

/* The four letter colours, for use inline. */
.k-t  { color: var(--tada-t);  font-weight: 600; }
.k-a1 { color: var(--tada-a1); font-weight: 600; }
.k-d  { color: var(--tada-d);  font-weight: 600; }
.k-a2 { color: var(--tada-a2); font-weight: 600; }

@media print {
  .tada-pane { display: block !important; }
  .tada-pane > h2:first-child,
  .tada-pane > h3:first-child,
  .tada-pane > h4:first-child { display: block !important; }
  .tada-tablist { display: none; }
}

/* --------------------------------------------------------------------------
   Citation hover cards — built from `[text]{.tada-cite key="..."}` spans by
   assets/tada-cite.js, using the data in assets/tada-citations.js.

   Degrades safely: with JavaScript off, or for a key missing from the
   database, the span is still plain inline text and no content is lost.
   -------------------------------------------------------------------------- */

.tada-cite {
  /* Most citations render as a real <a href="…DOI…">: keep the same subtle
     dotted-underline look as plain text rather than a default blue link, and
     use a pointer cursor since a click now navigates to the source. A
     citation backed by several papers at once has no single link and stays
     a <span>; cursor: help there signals "hover for info" instead. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--tada-ink-soft);
  text-underline-offset: 2px;
}

span.tada-cite { cursor: help; }

.tada-cite:visited {
  color: inherit;
}

.tada-cite:hover,
.tada-cite:focus-visible {
  border-bottom-color: var(--tada-accent);
  color: var(--tada-accent);
}

.tada-cite:focus-visible {
  outline: 2px solid var(--tada-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.tada-cite-card {
  position: absolute;
  z-index: 60;
  width: min(340px, calc(100vw - 2rem));
  border: 1px solid var(--tada-line);
  border-radius: var(--tada-radius);
  background: var(--tada-card);
  box-shadow: var(--tada-shadow);
  padding: .85rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tada-ink);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

.tada-cite-card.is-above { transform: translateY(-4px); }

.tada-cite-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tada-cite-card .tada-cite-authors {
  font-weight: 600;
  display: block;
  margin-bottom: .15rem;
}

.tada-cite-card .tada-cite-title {
  font-style: italic;
  display: block;
  margin-bottom: .2rem;
}

.tada-cite-card .tada-cite-venue {
  color: var(--tada-ink-soft);
  display: block;
}

.tada-cite-card .tada-cite-note {
  color: var(--tada-ink-soft);
  display: block;
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--tada-line);
}

.tada-cite-card .tada-cite-link {
  display: inline-block;
  margin-top: .4rem;
  color: var(--tada-accent);
  font-weight: 500;
  font-size: .85rem;
  word-break: break-all;
}

/* A claim backed by several papers at once (data-key="a,b,c") stacks their
   entries in one card, each after the first separated by a rule. */
.tada-cite-card .tada-cite-multi {
  display: block;
}

.tada-cite-card .tada-cite-multi-sep {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--tada-line);
}

@media print {
  .tada-cite { border-bottom: none; }
  .tada-cite-card { display: none !important; }
}


/* --------------------------------------------------------------------------
   Manuscript figures — reused, with permission, from the TADA paper
   (Ivimey-Cook et al., EcoEvoRxiv). See each figure's caption for the source.
   -------------------------------------------------------------------------- */

.tada-figure {
  border: 1px solid var(--tada-line);
  border-radius: var(--tada-radius);
  background: var(--tada-card);
  box-shadow: var(--tada-shadow);
  padding: 1.3rem 1.3rem 1rem;
  margin: 1.8rem 0;
  text-align: center;
}

.tada-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.tada-figure-caption {
  margin: .8rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tada-ink-soft);
  text-align: left;
}

.tada-figure-caption strong { color: var(--tada-ink); }

/* --------------------------------------------------------------------------
   Yes / No badges, for table cells such as the repository comparison table
   in Available. Use as [Yes]{.tada-yes} / [No]{.tada-no} in the markdown.
   -------------------------------------------------------------------------- */

.tada-yes, .tada-no {
  display: inline-block;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.5;
  padding: .05rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tada-yes { color: var(--tada-good); background: var(--tada-good-bg); }
.tada-no  { color: var(--tada-bad); background: var(--tada-bad-bg); }


/* --------------------------------------------------------------------------
   Footer — a scatter of small stars over the solid teal bar, echoing the
   stars on the wizard's hat rather than leaving it a flat block of colour.
   -------------------------------------------------------------------------- */

footer.bg-primary {
  position: relative;
  /* Was too small/faint to read at normal viewing size (1.3-1.9px dots at
     .35-.55 opacity); sized and lightened up so the scatter actually
     registers as a callback to the stars on the wizard's hat, rather
     than a flat teal bar. */
  background-image:
    radial-gradient(3.2px 3.2px at 6% 30%,  rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 14% 70%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(3.4px 3.4px at 24% 18%, rgba(255,255,255,.8)  50%, transparent 52%),
    radial-gradient(2.8px 2.8px at 35% 55%, rgba(255,255,255,.6)  50%, transparent 52%),
    radial-gradient(3.2px 3.2px at 47% 82%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 58% 25%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(3.6px 3.6px at 68% 62%, rgba(255,255,255,.8)  50%, transparent 52%),
    radial-gradient(2.8px 2.8px at 78% 15%, rgba(255,255,255,.6)  50%, transparent 52%),
    radial-gradient(3.2px 3.2px at 88% 48%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 95% 78%, rgba(255,255,255,.65) 50%, transparent 52%);
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Sad / happy dog — the before/after motif from Figure 2 of the TADA paper.
   Floated beside a heading so the surrounding text wraps around it.
   -------------------------------------------------------------------------- */

.tada-dog-float {
  position: relative;
  width: 104px;
  aspect-ratio: 494 / 747;
  flex: 0 0 auto;
}

.tada-dog-float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}

/* The sad dog is the resting state, shown whenever .is-happy is not set. */
.tada-dog-float img.tada-dog-sad { opacity: 1; }

.tada-dog-float.is-happy img.tada-dog-sad { opacity: 0; }
.tada-dog-float.is-happy img.tada-dog-happy { opacity: 1; }

@media (max-width: 560px) {
  .tada-dog-float { width: 76px; }
}

/* Standalone usage beside running text (e.g. "What happens next"): float it,
   same as any other inline figure -- no list follows it, so a float is safe. */
.tada-dog-float--standalone {
  float: right;
  margin: .15rem 0 1rem 1.3rem;
}

/* --------------------------------------------------------------------------
   Checklist head -- the dog and its hint sit in a flex row beside the
   "## Checklist" heading. NOT a float: a floated dog was wrapping the task
   list's first few items around it, which does not combine safely with the
   task list's own absolutely positioned checkbox (see ul.task-list below) --
   it was pushing checkbox label text far down, disconnected from its box.
   A flex row has a definite height and the list simply starts after it, so
   there is nothing to clip and nothing to leave a gap.
   -------------------------------------------------------------------------- */

.tada-checklist-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: .9rem 0 1.2rem;
}

.tada-checklist-head .tada-dog-float {
  width: 88px;
}

.tada-dog-hint {
  flex: 1 1 auto;
  color: var(--tada-ink-soft);
  font-size: .93rem;
  font-style: italic;
  margin: 0;
}

@media (max-width: 560px) {
  .tada-checklist-head { gap: .8rem; }
  .tada-checklist-head .tada-dog-float { width: 64px; }
}

/* --------------------------------------------------------------------------
   Theme toggle -- the sun/moon button beside the book title, inserted by
   assets/tada-theme.js. margin-left: auto pushes it to the right of the title
   row, next to bs4_book's mobile menu button.
   -------------------------------------------------------------------------- */

.tada-theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin: 1.5rem 0 0 auto;   /* same top margin as bs4_book's sidebar h1 */
  padding: 0;
  border: 1px solid var(--tada-line);
  border-radius: 999px;
  background: var(--tada-card);
  color: var(--tada-ink-soft);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.tada-theme-toggle:hover { color: var(--tada-accent); border-color: var(--tada-accent); }

.tada-theme-toggle:focus-visible {
  outline: 2px solid var(--tada-accent);
  outline-offset: 2px;
}

.tada-theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Show the moon in light mode ("switch to dark") and the sun in dark mode. */
.tada-theme-toggle .tada-icon-sun { display: none; }
html[data-theme="dark"] .tada-theme-toggle .tada-icon-sun { display: block; }
html[data-theme="dark"] .tada-theme-toggle .tada-icon-moon { display: none; }

@media (max-width: 991.98px) {
  .tada-theme-toggle { margin-top: .25rem; }
}

@media print {
  .tada-theme-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   Switched on by data-theme="dark" on <html>. An inline script in
   assets/head.html sets that attribute before the page paints, from the
   reader's saved choice or, failing that, their system setting; the toggle in
   assets/tada-theme.js changes and saves it. Without JavaScript the site stays
   light.

   Two layers. The tokens repaint every wiki component above. The overrides
   after them repaint bs4_book's and Bootstrap's own chrome (page background,
   sidebar, search, chapter nav, code blocks, syntax colours, footer), which
   bslib compiles to fixed light values, so a token change alone would leave
   them light.

   Everything sits inside @media screen, so printing always uses the light
   theme. Text and accent colours below keep at least 4.5:1 contrast against
   the surfaces they sit on.
   -------------------------------------------------------------------------- */

@media screen {

  :root[data-theme="dark"] {
    color-scheme: dark;

    --tada-t: #F08A75;
    --tada-a1: #6FCF8E;
    --tada-d: #B99CE3;
    --tada-a2: #7AAEF0;

    --tada-ink: #E2E8EC;
    --tada-ink-soft: #A3B1BA;
    --tada-line: #2C3A43;
    --tada-surface: #172127;
    --tada-surface-2: #1F2B32;
    --tada-accent: #52C2CE;
    --tada-accent-soft: #11282D;

    --tada-good: #6FCF8E;
    --tada-good-bg: #12241A;
    --tada-bad: #F08A75;
    --tada-bad-bg: #2B1916;
    --tada-warn: #E9B866;
    --tada-warn-bg: #2A2113;

    --tada-page: #0F161A;
    --tada-card: #141D22;
    --tada-code-ink: #8FD7DF;
    --tada-t-bg: #261815;
    --tada-a1-bg: #12231A;
    --tada-d-bg: #1F1929;
    --tada-a2-bg: #13202F;
    --tada-key-bg: #1C1826;
    --tada-wiki: #93A9EA;
    --tada-wiki-bg: #171C2E;

    --tada-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
  }

  /* Page, text and links */
  html[data-theme="dark"] body {
    background-color: var(--tada-page);
    color: var(--tada-ink);
  }
  html[data-theme="dark"] a { color: var(--tada-accent); }
  html[data-theme="dark"] a:hover { color: #7FD6DF; }
  html[data-theme="dark"] .text-muted { color: var(--tada-ink-soft) !important; }
  html[data-theme="dark"] .header-section-number { color: var(--tada-ink-soft); }
  html[data-theme="dark"] hr { border-top-color: var(--tada-line); }
  html[data-theme="dark"] mark {
    color: var(--tada-ink);
    background: rgba(233, 184, 102, .35);
  }

  /* Sidebars and navigation */
  html[data-theme="dark"] .book-extra { border-top-color: var(--tada-line); }
  html[data-theme="dark"] nav[data-toggle="toc"] .nav a.nav-link.active,
  html[data-theme="dark"] nav[data-toggle="toc"] .nav .nav-link.active > li > a {
    background-color: var(--tada-surface-2);
  }
  /* The sidebars need a real background: they are sticky, so each is its own
     stacking context, and without a backdrop the logo's screen blend (below)
     has nothing to blend with and shows as a black square. */
  html[data-theme="dark"] .sidebar { background-color: var(--tada-page); }
  /* Below the lg breakpoint bs4_book turns the contents into a drop-down panel. */
  @media (max-width: 991.98px) {
    html[data-theme="dark"] .collapse-lg {
      background: var(--tada-surface);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
    }
  }
  html[data-theme="dark"] .btn-outline-primary {
    color: var(--tada-accent);
    border-color: var(--tada-accent);
  }
  html[data-theme="dark"] .btn-outline-primary:hover,
  html[data-theme="dark"] .btn-outline-primary:not(:disabled):active {
    color: var(--tada-page);
    background-color: var(--tada-accent);
  }
  html[data-theme="dark"] .chapter-nav .prev,
  html[data-theme="dark"] .chapter-nav .next {
    border-color: var(--tada-line);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
  }
  html[data-theme="dark"] .chapter-nav .empty { box-shadow: none; }

  /* Search box and its results dropdown */
  html[data-theme="dark"] .form-control {
    background-color: var(--tada-surface);
    border-color: var(--tada-line);
    color: var(--tada-ink);
  }
  html[data-theme="dark"] .form-control::placeholder { color: var(--tada-ink-soft); }
  html[data-theme="dark"] .form-control:focus {
    border-color: var(--tada-accent);
    box-shadow: 0 0 0 .2rem rgba(82, 194, 206, .25);
  }
  html[data-theme="dark"] .algolia-autocomplete .aa-dropdown-menu {
    background-color: var(--tada-surface);
    border-color: var(--tada-line);
  }
  html[data-theme="dark"] .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
    color: var(--tada-ink);
    border-bottom-color: var(--tada-line);
  }
  html[data-theme="dark"] .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: var(--tada-surface-2);
  }
  html[data-theme="dark"] .algolia-autocomplete .aa-hint { color: var(--tada-ink-soft); }

  /* Footnote popovers */
  html[data-theme="dark"] .popover {
    background-color: var(--tada-card);
    border-color: var(--tada-line);
  }
  html[data-theme="dark"] .popover-body { color: var(--tada-ink); }
  html[data-theme="dark"] .bs-popover-top > .arrow::after,
  html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--tada-card); }
  html[data-theme="dark"] .bs-popover-bottom > .arrow::after,
  html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--tada-card); }

  /* Figures and captions from bs4_book itself */
  html[data-theme="dark"] .inline-figure,
  html[data-theme="dark"] .figure { border-color: var(--tada-line); }
  html[data-theme="dark"] caption,
  html[data-theme="dark"] p.caption { color: var(--tada-ink-soft); }

  /* Code blocks: bs4_book paints a light gradient and dark text */
  html[data-theme="dark"] pre {
    background-image: none;
    border-color: var(--tada-line);
  }
  html[data-theme="dark"] pre,
  html[data-theme="dark"] code { color: var(--tada-ink); }
  html[data-theme="dark"] code { background-color: var(--tada-surface-2); }
  html[data-theme="dark"] pre code { background-color: transparent; }
  html[data-theme="dark"] :not(pre) > code { color: var(--tada-code-ink); }
  html[data-theme="dark"] code a:any-link { text-decoration-color: var(--tada-ink-soft); }
  /* The copy button's icon is a black SVG data URL that ignores currentColor. */
  html[data-theme="dark"] div.sourceCode > button > i.bi::before { filter: invert(1); }

  /* Syntax highlighting: the same token roles as bs4_book's light palette,
     lightened for a dark background. */
  html[data-theme="dark"] code span.kw,
  html[data-theme="dark"] code span.cf,
  html[data-theme="dark"] code span.bu,
  html[data-theme="dark"] code span.ot { color: #6CC6EC; }
  html[data-theme="dark"] code span.im { color: #6CC6EC; font-weight: bold; }
  html[data-theme="dark"] code span.fu { color: #A3B6FF; }
  html[data-theme="dark"] code span.st,
  html[data-theme="dark"] code span.vs,
  html[data-theme="dark"] code span.ch,
  html[data-theme="dark"] code span.sc { color: #8FD38B; }
  html[data-theme="dark"] code span.dv,
  html[data-theme="dark"] code span.bn,
  html[data-theme="dark"] code span.fl { color: #F2A0C4; }
  html[data-theme="dark"] code span.va { color: #C7B8FF; }
  html[data-theme="dark"] code span.co,
  html[data-theme="dark"] code span.an,
  html[data-theme="dark"] code span.in { color: #93A1AB; }
  html[data-theme="dark"] code span.cv,
  html[data-theme="dark"] code span.wa { color: #93A1AB; font-style: italic; }
  html[data-theme="dark"] code span.do { color: #F08A75; font-style: italic; }
  html[data-theme="dark"] code span.op { color: #B5BEC5; }
  html[data-theme="dark"] code span.dt,
  html[data-theme="dark"] code span.pp { color: #E9B866; }
  html[data-theme="dark"] code span.at { color: #BFD474; }
  html[data-theme="dark"] code span.ss { color: #E9A8CA; }
  html[data-theme="dark"] code span.cn { color: #FF8F84; }
  html[data-theme="dark"] code span.er,
  html[data-theme="dark"] code span.al { color: #FF7070; }

  /* Footer: a deeper teal so the bar does not glare against the dark page. */
  html[data-theme="dark"] footer.bg-primary { background-color: #0B4F58 !important; }

  /* Mascots (wizard, dogs, sidebar logo) are black line art on white with no
     transparency. Inverting turns them into light line art on black, and the
     screen blend then drops the black, so they sit directly on the page. */
  html[data-theme="dark"] .tada-hero-figure img,
  html[data-theme="dark"] .tada-logo,
  html[data-theme="dark"] .tada-dog-float img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }

  /* The paper's figures keep their white backgrounds, toned down slightly. */
  html[data-theme="dark"] .tada-figure img { filter: brightness(.92); }
}