/*******************************************************************************
 * Site skins: original / kindle / terminal
 *
 * Plain CSS on purpose, and deliberately without Jekyll front matter: SCSS
 * would mean a `_sass/` directory, which `test/style_contract.js` forbids in
 * this repo, and front matter would make Prettier fail to parse the file.
 * Jekyll copies static assets through verbatim, so neither is needed.
 *
 * Loaded by `_plugins/skins.rb`, which injects the <link> immediately before
 * </head> so this file lands after `main.css` and wins on equal specificity.
 *
 * Each skin re-points the `--global-*` custom properties that al_folio_core
 * already uses, so most of the site re-skins itself without per-component
 * rules. The structural blocks that follow handle the parts the gem hardcodes
 * (border radii, box shadows, `.card-text`'s literal #747373, `.table`'s
 * #212529) and the parts that carry each skin's personality.
 *
 * `original` is the absence of a `data-skin` attribute, so it is a true no-op:
 * nothing in this file matches and the stock theme renders untouched.
 *
 * Specificity notes:
 *   html[data-skin="x"]                  (0,1,1) — ties main.css's :root and
 *                                        html[data-theme=dark]; later file wins
 *   html[data-skin="x"][data-theme=dark] (0,2,1) — beats both
 * Tailwind's own rules live in @layer base/components/utilities, and unlayered
 * declarations always beat layered ones, so nothing here needs !important.
 ******************************************************************************/

/* =============================================================================
 * KINDLE — palette lifted from kindlemodding.org's stylesheet
 * ========================================================================== */

html[data-skin="kindle"] {
  --skin-bg: #f5f5dc;
  --skin-surface: #e8e8d8;
  --skin-surface-2: #d0d0c0;
  --skin-border: #d0d0c0;
  --skin-text: #1a1a1a;
  --skin-muted: #4a4a4a;
  --skin-faint: #6a6a6a;
  /* kindlemodding.org is strictly monochrome — its link colour equals its text
     colour. Copied literally, every al-folio element that leans on the theme
     colour to stand out (CV date pills, location pins, the active TOC entry,
     venue badges) rendered in exactly the same black as body text, so nothing
     read as a highlight. This burnt-sienna ink keeps the paper feel while
     restoring that distinction: 7.4:1 on the cream ground, 7.4:1 with cream
     text on top for the filled pills. */
  --skin-accent: #8a3324;
  --skin-dot: rgba(60, 60, 60, 0.5);
  --skin-font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --skin-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --skin-font-mono: "Courier New", Courier, monospace;

  color-scheme: light;
  --global-bg-color: var(--skin-bg);
  --global-text-color: var(--skin-text);
  --global-text-color-light: var(--skin-muted);
  --global-theme-color: var(--skin-accent);
  --global-hover-color: var(--skin-text);
  --global-hover-text-color: var(--skin-bg);
  --global-card-bg-color: var(--skin-bg);
  --global-divider-color: var(--skin-border);
  --global-code-bg-color: var(--skin-surface);
  --global-highlight-color: #8a1c1c;
  --global-distill-app-color: var(--skin-muted);
  --global-back-to-top-bg-color: rgba(26, 26, 26, 0.75);
  --global-back-to-top-text-color: var(--skin-bg);
  --global-newsletter-bg-color: var(--skin-surface);
  --global-newsletter-text-color: var(--skin-text);
  /* al-folio inverts the footer by default (dark bar under a light page).
     Keeping it in-palette matters more here than the inversion does. */
  --global-footer-bg-color: var(--skin-surface);
  --global-footer-text-color: var(--skin-text);
  --global-footer-link-color: var(--skin-text);
}

html[data-skin="kindle"][data-theme="dark"] {
  --skin-bg: #1a1a1a;
  --skin-surface: #252525;
  --skin-surface-2: #333333;
  --skin-border: #333333;
  --skin-text: #ffffff;
  --skin-muted: #b0b0b0;
  --skin-faint: #888888;
  /* Dark-mode counterpart of the sienna above: 8.7:1 on the near-black ground,
     and 8.7:1 again with the dark text the filled pills put on top of it. */
  --skin-accent: #e8a892;
  --skin-dot: rgba(180, 180, 160, 0.4);

  color-scheme: dark;
  --global-hover-color: var(--skin-text);
  --global-hover-text-color: #1a1a1a;
  --global-highlight-color: #ff8a8a;
  --global-back-to-top-bg-color: rgba(255, 255, 255, 0.75);
  --global-back-to-top-text-color: #1a1a1a;
}

/* --- kindle structure: flat, square, dotted paper ------------------------- */

html[data-skin="kindle"] body {
  font-family: var(--skin-font-body);
  font-weight: 400;
  line-height: 1.6;
  /* The dot grid is the signature of the reference site. */
  background-image: radial-gradient(var(--skin-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}

html[data-skin="kindle"] h1,
html[data-skin="kindle"] h2,
html[data-skin="kindle"] h3,
html[data-skin="kindle"] h4,
html[data-skin="kindle"] h5,
html[data-skin="kindle"] h6,
html[data-skin="kindle"] .card-title,
html[data-skin="kindle"] .navbar-brand.title,
html[data-skin="kindle"] .post-title,
html[data-skin="kindle"] .profile .name {
  font-family: var(--skin-font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

html[data-skin="kindle"] code,
html[data-skin="kindle"] pre,
html[data-skin="kindle"] kbd,
html[data-skin="kindle"] samp {
  font-family: var(--skin-font-mono);
}

/* Square everything and drop every shadow — the two rules that do most of the
   work in turning al-folio's material-ish surfaces into flat paper. */
html[data-skin="kindle"] .card,
html[data-skin="kindle"] .card-img,
html[data-skin="kindle"] .card-img-top,
html[data-skin="kindle"] .btn,
html[data-skin="kindle"] .btn-sm,
html[data-skin="kindle"] .badge,
html[data-skin="kindle"] .dropdown-menu,
html[data-skin="kindle"] .dropdown-item,
html[data-skin="kindle"] .rounded,
html[data-skin="kindle"] .rounded-sm,
html[data-skin="kindle"] .rounded-lg,
html[data-skin="kindle"] .rounded-circle,
html[data-skin="kindle"] .profile img,
html[data-skin="kindle"] img,
html[data-skin="kindle"] figure img {
  border-radius: 0;
}

html[data-skin="kindle"] .card,
html[data-skin="kindle"] .z-depth-1,
html[data-skin="kindle"] .hoverable,
html[data-skin="kindle"] .hoverable:hover,
html[data-skin="kindle"] .dropdown-menu {
  box-shadow: none;
}

html[data-skin="kindle"] .card {
  border: 2px solid var(--skin-border);
  background: var(--skin-bg);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

html[data-skin="kindle"] .card.hoverable:hover {
  border-color: var(--skin-text);
  background: var(--skin-surface);
}

/* The gem hardcodes #747373 here, so a variable override cannot reach it. */
html[data-skin="kindle"] .card-text {
  color: var(--skin-muted);
}

html[data-skin="kindle"] .card-img-top {
  border-bottom: 2px solid var(--skin-border);
}

html[data-skin="kindle"] .navbar {
  background: var(--skin-bg);
  border-bottom: 2px solid var(--skin-border);
  backdrop-filter: none;
}

html[data-skin="kindle"] .btn,
html[data-skin="kindle"] .badge {
  border: 1px solid var(--skin-border);
  background: var(--skin-surface);
  color: var(--skin-text);
}

html[data-skin="kindle"] .btn:hover {
  background: var(--skin-text);
  color: var(--skin-bg);
  border-color: var(--skin-text);
}

/* Callouts and quotes: 4px left rule on a tinted ground, no radius. */
html[data-skin="kindle"] blockquote {
  background: rgba(100, 100, 100, 0.08);
  border-left: 4px solid var(--skin-muted);
  border-radius: 0;
  box-shadow: none;
  padding: 1.25em 1.5em;
}

html[data-skin="kindle"][data-theme="dark"] blockquote {
  background: rgba(200, 200, 200, 0.06);
}

html[data-skin="kindle"] pre,
html[data-skin="kindle"] pre.highlight,
html[data-skin="kindle"] div.highlighter-rouge {
  border: 1px solid var(--skin-border);
  border-radius: 0;
  background: var(--skin-surface);
}

html[data-skin="kindle"] .table {
  color: var(--skin-text);
}

html[data-skin="kindle"] .table th,
html[data-skin="kindle"] .table td {
  border-top-color: var(--skin-border);
}

/* Publications list */
/* Venue badges: only square the corners. The gem pins the label colour with
   `color: var(--global-card-bg-color) !important` and pairs it with a
   `--global-theme-color` background, so re-tinting the background here (and
   being unable to win the `!important` on the text) collapsed the label to
   ~1.1:1 contrast. Leaving the pair intact keeps it legible in every skin. */
html[data-skin="kindle"] .bibliography li .abbr abbr,
html[data-skin="kindle"] .bibliography li .abbr .badge {
  border-radius: 0;
}

html[data-skin="kindle"] .bibliography li .title {
  font-family: var(--skin-font-heading);
}

html[data-skin="kindle"] hr {
  border-top: 1px solid var(--skin-border);
}

/* =============================================================================
 * TERMINAL — Catppuccin Latte (light) / Mocha (dark)
 * ========================================================================== */

html[data-skin="terminal"] {
  /* Catppuccin Latte */
  --skin-bg: #eff1f5; /* base */
  --skin-mantle: #e6e9ef;
  --skin-crust: #dce0e8;
  --skin-surface: #ccd0da; /* surface0 */
  --skin-surface-2: #bcc0cc; /* surface1 */
  --skin-overlay: #9ca0b0; /* overlay0 */
  --skin-text: #4c4f69; /* text */
  --skin-subtext: #6c6f85; /* subtext0 */
  --skin-subtext-strong: #5c5f77; /* subtext1 — secondary text with AA headroom */
  --skin-border: #bcc0cc;
  --skin-mauve: #8839ef;
  --skin-blue: #1e66f5;
  --skin-green: #40a02b;
  --skin-yellow: #df8e1d;
  --skin-red: #d20f39;
  --skin-peach: #fe640b;
  --skin-teal: #179299;
  /* Also derived, so the scanlines stay in key across all four flavours. */
  --skin-scanline: rgba(76, 79, 105, 0.025);
  --skin-scanline: color-mix(in srgb, var(--skin-text) 3%, transparent);
  --skin-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light;
  --global-bg-color: var(--skin-bg);
  --global-text-color: var(--skin-text);
  --global-text-color-light: var(--skin-subtext);
  --global-theme-color: var(--skin-mauve);
  --global-hover-color: var(--skin-blue);
  --global-hover-text-color: var(--skin-bg);
  --global-card-bg-color: var(--skin-mantle);
  --global-divider-color: var(--skin-border);
  --global-code-bg-color: var(--skin-crust);
  --global-highlight-color: var(--skin-red);
  --global-distill-app-color: var(--skin-subtext);
  --global-back-to-top-bg-color: var(--skin-mauve);
  --global-back-to-top-text-color: var(--skin-bg);
  --global-newsletter-bg-color: var(--skin-mantle);
  --global-newsletter-text-color: var(--skin-text);
  --global-footer-bg-color: var(--skin-crust);
  --global-footer-text-color: var(--skin-text);
  --global-footer-link-color: var(--skin-mauve);

  /* Derived from the accent colours rather than written out per flavour, so
     Latte/Frappé/Macchiato/Mocha each get correctly tinted callouts from the
     one definition. The rgba fallbacks are the Latte values; browsers without
     color-mix keep those everywhere, which is duller than intended but never
     unreadable (the text and border colours carry the meaning). */
  --global-tip-block: var(--skin-green);
  --global-tip-block-bg: rgba(64, 160, 43, 0.12);
  --global-tip-block-bg: color-mix(in srgb, var(--skin-green) 14%, transparent);
  --global-tip-block-text: var(--skin-text);
  --global-tip-block-title: var(--skin-green);
  --global-warning-block: var(--skin-yellow);
  --global-warning-block-bg: rgba(223, 142, 29, 0.14);
  --global-warning-block-bg: color-mix(in srgb, var(--skin-yellow) 16%, transparent);
  --global-warning-block-text: var(--skin-text);
  --global-warning-block-title: var(--skin-yellow);
  --global-danger-block: var(--skin-red);
  --global-danger-block-bg: rgba(210, 15, 57, 0.12);
  --global-danger-block-bg: color-mix(in srgb, var(--skin-red) 14%, transparent);
  --global-danger-block-text: var(--skin-text);
  --global-danger-block-title: var(--skin-red);
}

/* --- Catppuccin dark flavours ---------------------------------------------
 *
 * Latte above is the palette's only light flavour, so it stays the light-mode
 * counterpart for all of these; Frappé, Macchiato and Mocha differ only in how
 * dark the ground is (Frappé lightest, Mocha darkest).
 *
 * Which one is used is a build-time choice — `skins.terminal_flavor` in
 * _config.yml — which `_plugins/skins.rb` stamps onto <html> as `data-flavor`.
 * Mocha is the default and is defined on the bare dark selector, so a missing
 * or unrecognised attribute still renders correctly. The two override blocks
 * carry one more attribute each, which is what lets them win.
 *
 * Values are from catppuccin/palette's palette.json, not transcribed by hand.
 * ------------------------------------------------------------------------- */

html[data-skin="terminal"][data-theme="dark"] {
  /* Catppuccin Mocha (default) */
  --skin-bg: #1e1e2e; /* base */
  --skin-mantle: #181825;
  --skin-crust: #11111b;
  --skin-surface: #313244; /* surface0 */
  --skin-surface-2: #45475a; /* surface1 */
  --skin-overlay: #6c7086; /* overlay0 */
  --skin-text: #cdd6f4; /* text */
  --skin-subtext: #a6adc8; /* subtext0 */
  --skin-subtext-strong: #bac2de; /* subtext1 */
  --skin-border: #45475a;
  --skin-mauve: #cba6f7;
  --skin-blue: #89b4fa;
  --skin-green: #a6e3a1;
  --skin-yellow: #f9e2af;
  --skin-red: #f38ba8;
  --skin-peach: #fab387;
  --skin-teal: #94e2d5;

  color-scheme: dark;
}

html[data-skin="terminal"][data-theme="dark"][data-flavor="macchiato"] {
  /* Catppuccin Macchiato */
  --skin-bg: #24273a; /* base */
  --skin-mantle: #1e2030;
  --skin-crust: #181926;
  --skin-surface: #363a4f; /* surface0 */
  --skin-surface-2: #494d64; /* surface1 */
  --skin-overlay: #6e738d; /* overlay0 */
  --skin-text: #cad3f5; /* text */
  --skin-subtext: #a5adcb; /* subtext0 */
  --skin-subtext-strong: #b8c0e0; /* subtext1 */
  --skin-border: #494d64;
  --skin-mauve: #c6a0f6;
  --skin-blue: #8aadf4;
  --skin-green: #a6da95;
  --skin-yellow: #eed49f;
  --skin-red: #ed8796;
  --skin-peach: #f5a97f;
  --skin-teal: #8bd5ca;
}

html[data-skin="terminal"][data-theme="dark"][data-flavor="frappe"] {
  /* Catppuccin Frappé */
  --skin-bg: #303446; /* base */
  --skin-mantle: #292c3c;
  --skin-crust: #232634;
  --skin-surface: #414559; /* surface0 */
  --skin-surface-2: #51576d; /* surface1 */
  --skin-overlay: #737994; /* overlay0 */
  --skin-text: #c6d0f5; /* text */
  --skin-subtext: #a5adce; /* subtext0 */
  --skin-subtext-strong: #b5bfe2; /* subtext1 */
  --skin-border: #51576d;
  --skin-mauve: #ca9ee6;
  --skin-blue: #8caaee;
  --skin-green: #a6d189;
  --skin-yellow: #e5c890;
  --skin-red: #e78284;
  --skin-peach: #ef9f76;
  --skin-teal: #81c8be;
}

/* --- terminal structure: monospace, square, TUI borders ------------------- */

html[data-skin="terminal"] body,
html[data-skin="terminal"] h1,
html[data-skin="terminal"] h2,
html[data-skin="terminal"] h3,
html[data-skin="terminal"] h4,
html[data-skin="terminal"] h5,
html[data-skin="terminal"] h6,
html[data-skin="terminal"] .card-title,
html[data-skin="terminal"] .navbar-brand.title,
html[data-skin="terminal"] .btn,
html[data-skin="terminal"] .badge {
  font-family: var(--skin-font-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* The home page's brand is a row of social icons (`.navbar-brand.social`), not
   text. It inherits the mono body font, and a monospace space character is much
   wider than a proportional one — which widened the brand by ~60px and pushed
   the whole navbar onto a second row. The icons draw from their own icon fonts,
   so only the whitespace between them is affected. */
html[data-skin="terminal"] .navbar-brand.social,
html[data-skin="kindle"] .navbar-brand.social {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  letter-spacing: normal;
}

html[data-skin="terminal"] body {
  line-height: 1.65;
  /* Faint scanlines. Static, so `prefers-reduced-motion` is not a concern. */
  background-image: repeating-linear-gradient(to bottom, var(--skin-scanline) 0 1px, transparent 1px 3px);
  background-attachment: fixed;
}

html[data-skin="terminal"] .card,
html[data-skin="terminal"] .card-img,
html[data-skin="terminal"] .card-img-top,
html[data-skin="terminal"] .btn,
html[data-skin="terminal"] .btn-sm,
html[data-skin="terminal"] .badge,
html[data-skin="terminal"] .dropdown-menu,
html[data-skin="terminal"] .dropdown-item,
html[data-skin="terminal"] .rounded,
html[data-skin="terminal"] .rounded-sm,
html[data-skin="terminal"] .rounded-lg,
html[data-skin="terminal"] .rounded-circle,
html[data-skin="terminal"] .profile img,
html[data-skin="terminal"] img,
html[data-skin="terminal"] figure img,
html[data-skin="terminal"] pre {
  border-radius: 0;
}

html[data-skin="terminal"] .card,
html[data-skin="terminal"] .z-depth-1,
html[data-skin="terminal"] .hoverable,
html[data-skin="terminal"] .hoverable:hover,
html[data-skin="terminal"] .dropdown-menu {
  box-shadow: none;
}

html[data-skin="terminal"] .card {
  border: 1px solid var(--skin-border);
  background: var(--skin-mantle);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

html[data-skin="terminal"] .card.hoverable:hover {
  border-color: var(--skin-mauve);
  background: var(--skin-surface);
}

html[data-skin="terminal"] .card-text {
  color: var(--skin-subtext);
}

html[data-skin="terminal"] .card-img-top {
  border-bottom: 1px solid var(--skin-border);
}

/* Prompt glyphs. `aria-hidden` is not available on a pseudo-element, so these
   are decorative-only text that screen readers do announce; keeping them to a
   single punctuation character keeps that noise negligible. */
html[data-skin="terminal"] .card-title::before,
html[data-skin="terminal"] .post-title::before {
  content: "$ ";
  color: var(--skin-green);
}

html[data-skin="terminal"] h2::before,
html[data-skin="terminal"] h3::before {
  content: "# ";
  color: var(--skin-overlay);
}

html[data-skin="terminal"] .navbar {
  background: var(--skin-mantle);
  border-bottom: 1px solid var(--skin-border);
  backdrop-filter: none;
}

/* JetBrains Mono runs noticeably wider than Roboto at the same size, which
   pushes the nav onto a second row at desktop widths. Pull the navbar back a
   step so the brand and the links stay on one line. */
html[data-skin="terminal"] .navbar-brand {
  font-size: 1.05rem;
}

html[data-skin="terminal"] .navbar .nav-link,
html[data-skin="terminal"] .navbar .navbar-nav {
  font-size: 0.85rem;
}

/* Both skin fonts are wider than Roboto, so the brand plus the link row runs
   over the container and Bootstrap wraps the collapse to a second line — at
   1280px the overflow was ~11px once a sixth page joined the navbar. Narrow the
   per-link padding (Bootstrap's default is 8px a side) and pull the kindle brand
   back the same step terminal already takes. That buys ~50px of headroom, so
   another page or two will not tip it over again. The navbar is
   `navbar-expand-sm`, so 576px — not the usual 992px — is where the links stop
   being a hamburger menu and start competing with the brand for one row. Below
   it they stack, and the full padding is what makes them comfortable taps. */
@media (min-width: 576px) {
  html[data-skin="kindle"] .navbar-brand {
    font-size: 1.05rem;
  }

  html[data-skin="kindle"] .navbar .nav-link,
  html[data-skin="terminal"] .navbar .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

/* Block cursor after the site title. Scoped to `.title` because the home page
   swaps the brand for a row of social icons (`.navbar-brand.social`), where a
   trailing cursor reads as a stray purple square rather than a prompt. */
html[data-skin="terminal"] .navbar-brand.title::after {
  content: "\2588";
  color: var(--skin-mauve);
  margin-left: 0.15em;
  opacity: 0.85;
}

html[data-skin="terminal"] .nav-link:hover,
html[data-skin="terminal"] .nav-item.active .nav-link {
  color: var(--skin-mauve);
}

html[data-skin="terminal"] .btn,
html[data-skin="terminal"] .badge {
  border: 1px solid var(--skin-border);
  background: var(--skin-surface);
  color: var(--skin-text);
}

html[data-skin="terminal"] .btn:hover {
  border-color: var(--skin-mauve);
  color: var(--skin-mauve);
  background: var(--skin-mantle);
}

html[data-skin="terminal"] blockquote {
  background: var(--skin-mantle);
  border-left: 4px solid var(--skin-mauve);
  border-radius: 0;
  box-shadow: none;
  padding: 1.1em 1.4em;
}

html[data-skin="terminal"] pre,
html[data-skin="terminal"] pre.highlight,
html[data-skin="terminal"] div.highlighter-rouge {
  border: 1px solid var(--skin-border);
  background: var(--skin-crust);
}

html[data-skin="terminal"] .table {
  color: var(--skin-text);
}

html[data-skin="terminal"] .table th,
html[data-skin="terminal"] .table td {
  border-top-color: var(--skin-border);
}

/* See the kindle note above: square the corners only, so the gem's
   theme-colour/card-colour pairing keeps the label readable. */
html[data-skin="terminal"] .bibliography li .abbr abbr,
html[data-skin="terminal"] .bibliography li .abbr .badge {
  border-radius: 0;
}

/* Every filled pill in the theme puts `--global-card-bg-color` text on a
   `--global-theme-color` ground. Against Latte's mauve that is 4.45:1 — just
   under WCAG AA for this small bold text. White clears it at 5.4:1. Matching
   `!important` because that is what the gem's own colour declaration uses.
   Mocha's lighter mauve already passes at 8.6:1, so this is light-only.
   Covers the publication venue badges and the CV date pills. */
html[data-skin="terminal"]:not([data-theme="dark"]) .bibliography li .abbr abbr,
html[data-skin="terminal"]:not([data-theme="dark"]) .bibliography li .abbr .badge,
html[data-skin="terminal"]:not([data-theme="dark"]) .date-column .badge,
html[data-skin="terminal"]:not([data-theme="dark"]) .badge-toc {
  color: #ffffff !important;
}

/* Catppuccin ships a designed secondary-text colour, so use it here instead of
   the generic blend in the CV block below. Latte's body text starts at only
   7.06:1, and blending it toward the page left just 0.04 of margin over WCAG
   AA; subtext1 sits at 5.5:1 with room to spare and is what the palette
   intends for exactly this role. */
html[data-skin="terminal"] .list-group-item h6[style*="italic"] {
  color: var(--skin-subtext-strong);
}

html[data-skin="terminal"] hr {
  border-top: 1px solid var(--skin-border);
}

html[data-skin="terminal"] ::selection {
  background: var(--skin-mauve);
  color: var(--skin-bg);
}

/* =============================================================================
 * Skin-independent fixes
 *
 * These two are stock al-folio behaviours, identical in the original skin — not
 * something the skins introduced. They are deliberately left unscoped so all
 * three skins get the fix; scope them under `html[data-skin]` if you would
 * rather the original stayed pixel-for-pixel stock.
 * ========================================================================== */

/* The back-to-top control is a 40x40 box holding a 24x24 SVG, laid out as a
   block. The SVG sits on a text baseline, so it landed flush with the bottom
   edge (16px of slack above it, 0 below) instead of centred. It also sat at
   `bottom: 30px`, which put it underneath the 35-37px fixed footer (53-57px
   once the footer wraps on narrow screens).

   The `:root` prefix matches the specificity of the gem's own `:root
   #back-to-top` rule so this wins on load order rather than on `!important`.
   The library toggles visibility with `opacity`, not `display`, so overriding
   `display` here does not pin the button open. */
:root #back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  bottom: 4.5rem;
}

/* vanilla-back-to-top hardcodes `margin: 16px 8px 0` on the icon to fake
   centring: 16px of top margin plus the 24px icon exactly fills the 40px box,
   so the arrow ends up flush with the bottom edge. A margin still applies on
   top of flex alignment, so the box above cannot centre the icon until this is
   cleared. */
:root #back-to-top > svg {
  margin: 0;
}

@media (max-width: 576px) {
  :root #back-to-top {
    bottom: 5.5rem;
  }
}

/* Tocbot ships `overflow: auto` on the sidebar. Its content measures a
   fractional pixel taller than its box (scrollHeight 158 vs clientHeight 157),
   which is enough for the browser to render a scrollbar that can never scroll
   anything. The sidebar is `position: sticky` and sized by its content, so it
   has no need to clip. */
#toc-sidebar {
  overflow: visible;
}

/* --- CV entry typography ---------------------------------------------------
 *
 * Every CV entry is three sibling <h6>s — role, organisation, description —
 * which stock al-folio separates by almost nothing: the role is bold, and the
 * other two are both 0.95rem in the same colour, differing only by italics.
 * That makes organisation and description read as one block.
 *
 * The three levels now differ on four axes at once — size, weight, colour and
 * slant — so the hierarchy survives even where one axis is hard to perceive.
 *
 * The organisation and description carry *inline* `style` attributes
 * (`font-size: 0.95rem`, plus `font-style: italic` on the description), which
 * is both why `!important` is needed to resize them and how they can be told
 * apart: the italic marker is what distinguishes description from
 * organisation. If a future al_folio_cv release stops emitting those inline
 * styles, these two rules stop matching and the entries fall back to stock
 * styling rather than breaking.
 */

.list-group-item h6.title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.1rem;
}

/* Organisation — roman, near body size, full-strength colour. */
.list-group-item h6[style*="0.95rem"]:not([style*="italic"]) {
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--global-text-color);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

/* Description — italic, smaller, and blended toward the background so it
   reads as secondary. The flat colour is a fallback: browsers without
   color-mix keep full-contrast body text, losing the tint but nothing else.
   Blending against the page rather than hard-coding a grey keeps this legible
   in all three skins and both themes without per-skin values.

   85% is the strongest blend that still clears WCAG AA everywhere. The binding
   case is terminal light: Catppuccin Latte's body text starts at only 7.06:1,
   so it loses the most headroom — a 78% blend dropped it to 3.86:1, while 85%
   holds 4.90:1. The other five combinations sit between 8:1 and 15:1. Most of
   the hierarchy is carried by size, weight and slant anyway; the tint is the
   fourth cue, not the load-bearing one. */
.list-group-item h6[style*="italic"] {
  font-size: 0.9rem !important;
  font-weight: 400;
  line-height: 1.55;
  margin-top: 0.15rem;
  color: var(--global-text-color);
  color: color-mix(in srgb, var(--global-text-color) 85%, var(--global-bg-color));
}

/* =============================================================================
 * Section jump bar — populated by assets/js/page-nav.js
 *
 * A horizontal strip rather than a sidebar TOC, so the publications list and
 * the projects grid keep their full content width. Skin-agnostic: it is built
 * entirely from the `--global-*` properties, so it re-skins for free.
 * ========================================================================== */

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--global-divider-color);
  position: sticky;
  top: 4rem;
  z-index: 5;
  background: var(--global-bg-color);
}

.page-nav:empty {
  display: none;
}

.page-nav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--global-text-color-light);
  margin-right: 0.25rem;
}

.page-nav a {
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--global-divider-color);
  border-radius: 0.125rem;
  color: var(--global-text-color);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.page-nav a:hover,
.page-nav a:focus-visible {
  color: var(--global-theme-color);
  border-color: var(--global-theme-color);
  text-decoration: none;
}

/* Set by page-nav.js as the reader scrolls. */
.page-nav a[aria-current="true"] {
  color: var(--global-hover-text-color);
  background: var(--global-theme-color);
  border-color: var(--global-theme-color);
}

/* Both bespoke skins are square-cornered. */
html[data-skin="kindle"] .page-nav a,
html[data-skin="terminal"] .page-nav a {
  border-radius: 0;
}

/* The jump targets sit under a fixed navbar and, on these pages, under the
   sticky bar itself — offset the anchor so headings are not hidden on landing. */
.page-nav-target {
  scroll-margin-top: 8rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-nav a {
    transition: none;
  }
}

/* =============================================================================
 * Skin switcher control — injected into the navbar by assets/js/skins.js
 * ========================================================================== */

#skin-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 0.6rem;
  color: inherit;
  font: inherit;
  line-height: 1;
}

#skin-toggle:hover {
  color: var(--global-hover-color);
}

#skin-toggle:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 2px;
}

/* Only the icon for the active skin is shown; the switcher cycles through. */
#skin-toggle .skin-icon {
  display: none;
}

html:not([data-skin]) #skin-toggle .skin-icon-original,
html[data-skin="kindle"] #skin-toggle .skin-icon-kindle,
html[data-skin="terminal"] #skin-toggle .skin-icon-terminal {
  display: inline-block;
}