/* Minimal styling for Quarto components that normally rely on Bootstrap
   (callouts, listings), adapted to the classless Pico dark theme used by the
   solar-powered-quarto template. */

/* Quarto emits this class on echo:false code cells and other elements it
   expects to stay hidden; the rule itself normally ships in Bootstrap's
   utility CSS, which theme:none drops entirely. */
.hidden {
  display: none !important;
}

/* ---------- Callouts ---------- */
/* Quarto's callout filter only emits classed `.callout`/`.callout-note`
   divs when Bootstrap is active (gated on hasBootstrap() in its Lua
   filter); under theme:none it silently falls back to a bare
   `<div><blockquote>`, title as the first bold paragraph, with no class
   marking the callout type at all — so there's nothing left to key
   per-type colours off. Style that actual pattern instead, with the one
   accent colour the rest of the site already uses (--pico-primary).
   Scoped to div > blockquote so a genuine markdown quote (which pandoc
   emits as a bare <blockquote>, no wrapping div) keeps its plain look. */
div > blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-left: 4px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
  background: color-mix(in srgb, var(--pico-primary) 6%, transparent);
}
div > blockquote > :first-child {
  margin-top: 0;
}
div > blockquote > :last-child {
  margin-bottom: 0;
}
/* The callout title renders as a lone bold paragraph; give it a bit more
   presence since there's no separate header area to shade. */
div > blockquote > p:first-child:has(> strong:only-child) {
  font-size: 1.05em;
  margin-bottom: 0.5rem;
}

/* ---------- Homepage-only solar footer ---------- */
.solar-footer {
  border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
  padding-top: var(--pico-spacing);
}

/* ---------- Blog listing ---------- */
/* Quarto injects listing markup (blog index, table-of-posts listings) after
   all include-after-body content, later than where <main> ends up closed —
   it lands as a body-level sibling after </main>, missing Pico's
   `body > main` container width/centering. Give it the same treatment
   directly instead of relying on DOM nesting. */
body > .quarto-listing {
  width: 70%;
  margin: 0 auto;
  text-align: left;
}

.quarto-listing-category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.85rem;
}
.quarto-listing-category .category {
  cursor: pointer;
  color: var(--pico-muted-color);
}
.quarto-listing-category .category.active {
  color: var(--pico-primary);
}
.quarto-listing-category-title {
  font-weight: 600;
  margin-right: 0.4rem;
}

.quarto-post {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}
.quarto-post .thumbnail {
  flex: 0 0 auto;
}
.quarto-post .thumbnail img {
  max-width: 140px;
  height: auto;
  border-radius: var(--pico-border-radius);
}
/* Empty image placeholders shouldn't reserve space */
.quarto-post .listing-item-img-placeholder {
  display: none;
}
.quarto-post .body {
  flex: 1 1 auto;
  min-width: 0;
}
.quarto-post .body h3,
.quarto-post .listing-title {
  margin: 0 0 0.25rem;
}
.quarto-post .listing-subtitle {
  color: var(--pico-muted-color);
  margin-bottom: 0.35rem;
}
.quarto-post .metadata {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}
.listing-date,
.listing-author {
  margin-right: 0.6rem;
}

/* ---------- Panel tabsets ---------- */
/* Quarto's JS tab library (tabby.js) is disabled under minimal:true, so the
   markup it leaves behind — a <ul> of anchor links to each panel's id, plus
   a .tab-content div holding all panels — just rendered as a plain list
   followed by every panel stacked open. Restyle it as CSS-only tabs: real
   links, panels shown/hidden via :target, first panel open by default. */
.panel-tabset .panel-tabset-tabby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.panel-tabset .panel-tabset-tabby li {
  margin: 0;
}
.panel-tabset .panel-tabset-tabby a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-bottom: none;
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
  color: var(--pico-muted-color);
  text-decoration: none;
}
.panel-tabset .panel-tabset-tabby a:hover {
  color: var(--pico-primary);
}
.panel-tabset .tab-content {
  border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
  padding-top: 1rem;
}
.panel-tabset .tab-content > div {
  display: none;
}
.panel-tabset .tab-content:not(:has(> div:target)) > div:first-child,
.panel-tabset .tab-content > div:target {
  display: block;
}

/* ---------- Syntax highlighting ---------- */
/* Quarto's syntax-highlighting CSS generation (resolveQuartoSyntaxHighlighting
   in its bundled JS) bails out unconditionally for minimal:true website
   projects and then force-sets highlight-style to "none" for HTML output —
   pandoc still tags every token with its standard span classes, there's just
   no colour rule left for any of them. Hand-picked, deliberately small
   palette (a handful of hues, not pandoc's ~20-colour default) to match the
   site's minimal aesthetic and its one amber accent colour. */
code span.co, code span.an, code span.cv, code span.do,
code span.in, code span.wa {
  color: var(--pico-muted-color);
  font-style: italic;
}
code span.st, code span.ss, code span.vs, code span.sc, code span.ch {
  color: #9ccc65;
}
code span.kw, code span.cf, code span.im, code span.ot, code span.pp {
  color: var(--pico-primary);
  font-weight: 600;
}
code span.fu, code span.bu {
  color: #61afef;
}
code span.dv, code span.fl, code span.bn, code span.cn, code span.dt {
  color: #56b6c2;
}
code span.er, code span.al {
  color: #e06c75;
  font-weight: 600;
}

/* ---------- Code annotations ---------- */
/* The numbered markers (a code line's `# <1>` comment) and their matching
   description list render as bare, unstyled markup: Quarto's interactive
   hover/click behaviour for them is JS (disabled under minimal:true, like
   the tabset library above), but the static HTML — an anchor badge inline
   before its target line, plus a <dl> of descriptions below — still ships.
   Float the badges into the pre's left padding so they read as margin
   markers instead of pushing the code text sideways (no JS available to
   position them precisely against their line, as Quarto normally does). */
pre.code-annotated {
  padding-left: 2rem;
}
.code-annotation-anchor {
  float: left;
  margin-left: -2rem;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
/* JS-positioned decorations for the interactive hover/click behaviour we
   don't have under minimal:true — nothing draws into them without it. */
.code-annotation-gutter,
.code-annotation-gutter-bg {
  display: none;
}
dl.code-annotation-container-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.6rem;
  align-items: start;
  margin: 0.5rem 0 1.5rem;
}
dl.code-annotation-container-grid dt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  font-size: 0.7rem;
  font-weight: 700;
}
dl.code-annotation-container-grid dd {
  margin: 0;
}

/* ---------- Responsiveness ---------- */
/* solarpowered.pico.css (not stock Pico — a stripped-down custom build)
   hardcodes a flat `width: 70%` for nav/header/main/footer with no
   breakpoints at all. That 70% is exactly what makes desktop look right
   (matches the rest of the classless Pico layout), so keep it as the
   default — only override it below, for narrow viewports where 70% of
   ~390px is an unusably narrow ~270px column. body > .quarto-listing needs
   the same treatment (see the Blog listing section above) but Pico's rule
   doesn't cover it since it isn't one of Pico's own elements. */
body > .quarto-listing {
  width: 70%;
  margin: 0 auto;
}

/* No JS means no hamburger/collapse for the nav — let items wrap onto
   further lines instead of overflowing off-screen on narrow viewports. */
nav,
nav ul {
  flex-wrap: wrap;
}

/* Pico's defaults (--pico-nav-element-spacing-vertical: 1rem plus another
   1rem of padding on the <ul> itself) are sized for a nav that never wraps.
   Once it wraps (mobile, or a desktop window too narrow to fit every item
   on one line) that stacks into a large gap between the site title and the
   nav links below it. Tighten unconditionally, not just under the mobile
   breakpoint. */
nav ul {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
nav li {
  padding: 0.6rem 1rem;
}

@media (max-width: 768px) {
  nav,
  body > header,
  body > main,
  body > footer,
  body > .quarto-listing {
    width: 92%;
  }
  nav ul:first-of-type,
  nav ul:last-of-type {
    margin-left: 0;
    margin-right: 0;
  }
  /* Blog listing cards: thumbnail/title/date in one flex row only works
     with room to breathe; stack them on narrow screens instead. */
  .quarto-post {
    flex-direction: column;
  }
  .quarto-post .thumbnail img {
    max-width: 100%;
  }
  /* format.html.code-overflow:wrap is a Bootstrap-gated Quarto option too —
     Pandoc's own always-included base CSS sets `white-space: pre` on
     sourceCode blocks regardless, so long lines silently scroll instead of
     wrapping. Scroll is fine on desktop; wrap on phones so content isn't
     hidden off-screen behind a swipe. */
  pre > code.sourceCode {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* ---------- Homepage intro: image + bio side by side ---------- */
/* Stacked (plain document flow, image above text) below the mobile
   breakpoint; two columns above it. */
@media (min-width: 769px) {
  .home-intro {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
  }
  .home-intro-image img {
    margin: 0;
    max-width: 100%;
  }
}

/* ---------- Nav site title ---------- */
/* Match page titles (h1 { color: orange; } in solarpowered.pico.css). */
nav .site-title {
  color: orange;
}

/* ---------- Links ---------- */
/* Pico's own link colour rule (:where(a:not([role="button"]))) has zero
   specificity by design, so this plain `a` selector always wins regardless
   of load order — deliberately teal rather than the amber accent used
   elsewhere (headings, nav title, callouts, code highlighting). */
a {
  color: #abd1cc;
}