/* ============================================================================
   Tech Tutorials — main stylesheet
   ----------------------------------------------------------------------------
   Design notes
   • Inter, very thin weights (200/300) for a calm, library-like feel.
   • Body: weight 300, line-height 1.75. Headings: weight 400 or 500.
   • Color: soft dark #3a3f4b on warm white (#ffffff) — never pure black.
   • Pastel theme system: each theme exposes --pastel-bg (card body) and
     --pastel-bar (title bar, white text on top).
   • Mobile responsive: two-column grid collapses below 900px.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* User-controlled font scale, persisted to localStorage by settings.js */
  --user-font-scale: 1.15;

  /* Typography ----------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --fw-thin:    200;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  --fs-base:   calc(16px * var(--user-font-scale));
  --lh-body:   1.75;
  --lh-tight:  1.4;

  /* Color palette -------------------------------------------------------- */
  --c-bg:        #ffffff;
  --c-surface:   #ffffff;
  --c-bg-soft:   #fafafa;
  --c-text:      #3a3f4b;       /* primary body color — soft dark slate */
  --c-text-soft: #6b7280;       /* muted/meta text */
  --c-text-strong:#2d3142;
  --c-border:    #e7e8ea;
  --c-border-strong:#cfd2d8;
  --c-accent:    #5b6cff;       /* link & primary button */
  --c-accent-ink:#ffffff;
  --c-accent-soft:#eef0ff;
  --c-code-bg:   #f6f7f9;

  /* Layout --------------------------------------------------------------- */
  --container:    1180px;
  --content-max:  720px;
  --sidebar-w:    300px;
  --gap:          2.25rem;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 2px rgba(45, 49, 66, 0.04),
                  0 0 0 1px rgba(45, 49, 66, 0.04);
  --shadow-md:    0 6px 24px rgba(45, 49, 66, 0.06);

  /* Pastel theme defaults — overridden by the theme-* classes below. */
  --pastel-bg:  #eaf2ff;
  --pastel-bar: #6aa9ff;
  --pastel-ink: #ffffff;

  /* Syntax Highlighting (Light) ------------------------------------------ */
  --chroma-c: #6a737d; /* Comment */
  --chroma-k: #d73a49; /* Keyword */
  --chroma-s: #032f62; /* String */
  --chroma-m: #005cc5; /* Number */
  --chroma-n: #6f42c1; /* Name (Function/Class) */
  --chroma-o: #005cc5; /* Operator/Punctuation */
}

html[data-theme="dark"] {
  --c-bg:          #0f1420;
  --c-surface:     #161d2a;
  --c-bg-soft:     #1b2433;
  --c-text:        #d5dbea;
  --c-text-soft:   #9aa6bf;
  --c-text-strong: #eef2fb;
  --c-border:      #2a354a;
  --c-border-strong:#3a4863;
  --c-accent:      #8ea2ff;
  --c-accent-ink:  #0f1420;
  --c-accent-soft: rgba(142, 162, 255, 0.18);
  --c-code-bg:     #111827;
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(148, 163, 184, 0.06);
  --shadow-md:     0 12px 28px rgba(0, 0, 0, 0.35);

  /* Syntax Highlighting (Dark) ------------------------------------------- */
  --chroma-c: #8b949e;
  --chroma-k: #ff7b72;
  --chroma-s: #a5d6ff;
  --chroma-m: #d2a8ff;
  --chroma-n: #d2a8ff;
  --chroma-o: #79c0ff;
}

/* ---------- 2. Pastel themes -------------------------------------------- */

.theme-orange   { --pastel-bg:#FFE5CC; --pastel-bar:#FFB36B; --pastel-ink:#fff; }
.theme-lime     { --pastel-bg:#E7F5C9; --pastel-bar:#B4D26A; --pastel-ink:#fff; }
.theme-sky      { --pastel-bg:#DCEEFB; --pastel-bar:#7BB6E3; --pastel-ink:#fff; }
.theme-lavender { --pastel-bg:#E7E2F4; --pastel-bar:#9F8FCB; --pastel-ink:#fff; }
.theme-peach    { --pastel-bg:#FFE0D6; --pastel-bar:#F5A48A; --pastel-ink:#fff; }
.theme-mint     { --pastel-bg:#D6F1E2; --pastel-bar:#7AC9A1; --pastel-ink:#fff; }
.theme-rose     { --pastel-bg:#FBE0EA; --pastel-bar:#E89AB3; --pastel-ink:#fff; }
.theme-coral    { --pastel-bg:#FFD9D2; --pastel-bar:#F08A7A; --pastel-ink:#fff; }
.theme-butter   { --pastel-bg:#FFF1C2; --pastel-bar:#E3C56B; --pastel-ink:#fff; }
.theme-sand     { --pastel-bg:#F1E7D6; --pastel-bar:#C9B187; --pastel-ink:#fff; }
.theme-neutral  { --pastel-bg:var(--c-bg-soft); --pastel-bar:var(--c-border-strong); --pastel-ink:var(--c-text-strong); }

html[data-theme="dark"] .theme-orange   { --pastel-bg:#312316; --pastel-bar:#c57a39; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-lime     { --pastel-bg:#26311b; --pastel-bar:#7f9f3d; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-sky      { --pastel-bg:#1f2f3d; --pastel-bar:#4f86b2; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-lavender { --pastel-bg:#2a2438; --pastel-bar:#7f6aa9; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-peach    { --pastel-bg:#36231d; --pastel-bar:#b96c54; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-mint     { --pastel-bg:#1d3028; --pastel-bar:#4e9b76; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-rose     { --pastel-bg:#352230; --pastel-bar:#b46a88; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-coral    { --pastel-bg:#37221e; --pastel-bar:#b95f53; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-butter   { --pastel-bg:#332d1c; --pastel-bar:#a68a3a; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-sand     { --pastel-bg:#312a1f; --pastel-bar:#988060; --pastel-ink:#f8fafc; }
html[data-theme="dark"] .theme-neutral  { --pastel-bg:#1a2231; --pastel-bar:#34445f; --pastel-ink:#eaf0ff; }

/* ---------- 3. Reset & base --------------------------------------------- */

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

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

p { margin: 0 0 1.1em; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--c-text-strong);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: 2.1rem; font-weight: var(--fw-light); }
h2 { font-size: 1.55rem; font-weight: var(--fw-medium); }
h3 { font-size: 1.2rem;  font-weight: var(--fw-medium); }
h4 { font-size: 1rem;    font-weight: var(--fw-medium); }
h5, h6 { font-size: .95rem; font-weight: var(--fw-medium); }

small, .small { font-size: 0.85rem; }
.muted { color: var(--c-text-soft); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--c-text-soft);
  margin: 0 0 .4rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 2rem 0;
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .95em; }
code { background: var(--c-code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre {
  background: var(--c-code-bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: transparent; padding: 0; }

.code-block-wrap {
  position: relative;
  margin: 1.25rem 0;
}
.code-block-wrap pre {
  margin: 0;
  padding-top: 2.2rem;
}

.code-copy-btn {
  position: absolute;
  top: .55rem;
  right: .6rem;
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  color: var(--c-text-strong);
  border-radius: 999px;
  font: inherit;
  font-size: .76rem;
  line-height: 1;
  padding: .35rem .7rem;
  cursor: pointer;
  z-index: 5;
}
.code-copy-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.code-copy-btn[data-copied="true"] {
  color: #4caf83;
  border-color: #4caf83;
}

html[data-theme="dark"] .code-copy-btn {
  background: #252b39;
  border-color: #3b4357;
  color: #e5eaf6;
}


/* Hugo Chroma Styling */
.highlight {
  overflow-x: auto;
  background: var(--c-code-bg);
  border-radius: var(--radius-sm);
}

.highlight table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Ensures the table respects container width */
}

.highlight td {
  padding: 0;
  border: 0;
}

.highlight pre {
  margin: 0;
  background: transparent;
  overflow-x: auto; /* Internal scroll safety */
  
}

/* Pin the line numbers <td> to the left */
.chroma .lntd:first-child {
  padding-right: 1.25rem;
  user-select: none;
  width: 1%;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: inherit; /* Matches the code background */
  z-index: 2;
}

/* Allow the code <td> to expand/scroll */
.chroma .lntd:last-child {
  width: 100%;
  padding: 1rem 1.5rem 1rem 1.1rem;
}

.chroma .lntd:last-child pre {
  padding-left: 1.25rem;
  /* padding-right: 1.25rem; */
}

.chroma .lnt { color: var(--c-text-soft); }

/* Chroma Syntax Color Variables */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch, .chroma .cs, .chroma .cpf { color: var(--chroma-c); font-style: italic; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt, .chroma .ow { color: var(--chroma-k); font-weight: bold; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx, .chroma .dl { color: var(--chroma-s); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il { color: var(--chroma-m); }
.chroma .na, .chroma .nb, .chroma .nc, .chroma .nd, .chroma .ne, .chroma .nf, .chroma .fm, .chroma .nn, .chroma .nx, .chroma .py, .chroma .nt, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: var(--chroma-n); }
.chroma .o, .chroma .p { color: var(--chroma-o); }

blockquote {
  border-left: 3px solid var(--c-border-strong);
  margin: 1.4rem 0;
  padding: 0.2rem 1rem;
  color: var(--c-text-soft);
  font-style: italic;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: .95rem;
}
th, td {
  text-align: left;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--c-border);
}
th { font-weight: var(--fw-medium); background: var(--c-bg-soft); }

ul, ol { padding-left: 1.4rem; }
li { margin: .25em 0; }

/* Accessible skip link & visually-hidden helper */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--c-text-strong);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 6px;
  transition: top .2s;
  z-index: 1000;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- 4. Layout primitives --------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.container.narrow { max-width: 760px; }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--gap);
  align-items: start;
  margin: 2.5rem auto 4rem;
}
.two-col > .content {
  max-width: var(--content-max);
  width: 100%;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ---------- 5. Header & nav -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
html[data-theme="dark"] .site-header {
  background: rgba(15, 20, 32, 0.88);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}
.header-menu-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-text-strong);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}
.brand:hover { text-decoration: none; color: var(--c-accent); }
.brand-mark { color: var(--c-accent); font-weight: var(--fw-medium); }

.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.theme-toggle:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--c-border);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--c-text-strong);
  margin: 4px auto;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  display: flex;
  align-items: center;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .25rem;
}
.menu-l1 .menu-item { position: relative; }
.menu-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .55rem .85rem;
  color: var(--c-text);
  border-radius: 8px;
  font-weight: var(--fw-light);
  font-size: .95rem;
}
.menu-link:hover { background: var(--c-accent-soft); color: var(--c-accent); text-decoration: none; }
.menu-l1 > .menu-item.has-children > .menu-link .caret { font-size: .7em; opacity: .6; }

/* Dropdown */
.menu-l2 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .35rem;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu-l1 > .menu-item.has-children:hover > .menu-l2,
.menu-l1 > .menu-item.has-children:focus-within > .menu-l2,
.menu-l1 > .menu-item.has-children.is-open > .menu-l2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-l2 .menu-link { width: 100%; padding: .55rem .75rem; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 1rem 1.25rem;
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .menu-l1 { flex-direction: column; gap: .15rem; }
  .menu-l2 {
    position: static;
    box-shadow: none;
    border: 0;
    padding-left: 1rem;
    padding-right: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .menu-l1 > .menu-item.has-children.is-open > .menu-l2 { display: flex; }
}

/* ---------- 6. Hero ---------------------------------------------------- */

.hero {
  padding: 5rem 0 3.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(91, 108, 255, 0.06), transparent 60%),
    linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);
  border-bottom: 1px solid var(--c-border);
}
html[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse at top, rgba(142, 162, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #121927 0%, #0f1420 100%);
}
html[data-theme="dark"] .hero-title { color: #f4f7ff; }
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .hero-eyebrow { color: #b6c1d9; }
.hero-inner { max-width: 720px; }
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--c-text-soft);
  margin: 0 0 1rem;
}
.hero-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--fw-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--c-text-soft);
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

/* ---------- 7. Buttons ------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-strong);
  font: inherit;
  font-weight: var(--fw-medium);
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.button:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button-primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}
.button-primary:hover { background: #4858e6; color: #fff; }
.button-ghost {
  background: transparent;
  border-color: var(--c-border);
}
.button-block { width: 100%; }

/* ---------- 8. Sections / page header --------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2.5rem 0 1.25rem;
  gap: 1rem;
}
.section-title {
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  margin: 0;
}
.section-more {
  color: var(--c-text-soft);
  font-size: .9rem;
}
.section-more:hover { color: var(--c-accent); }

.page-header {
  margin-bottom: 2rem;
}
.page-title {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.015em;
  margin: 0 0 .6rem;
}
.page-summary { color: var(--c-text-soft); font-size: 1.05rem; max-width: 60ch; }
.page-meta { color: var(--c-text-soft); font-size: .85rem; }

.featured { padding: 1.5rem 0; }

/* ---------- 9. Cards & grids ------------------------------------------- */

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--pastel-bg);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  color: var(--c-text-strong);
}
.card-link:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-title-bar {
  padding: 1rem 1.1rem;
  background: var(--pastel-bar);
  color: var(--pastel-ink);
}
.card-title {
  margin: 0;
  color: inherit;
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
}
.card-body { padding: 1rem 1.1rem 1.2rem; }
.card-summary { margin: 0 0 .8rem; font-size: .95rem; color: var(--c-text); }
.card-meta { margin: 0; font-size: .8rem; color: var(--c-text-soft); }

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
}
.feature-card h3 { margin-top: 0; font-size: 1.05rem; }

/* ---------- 10. Sidebar ------------------------------------------------ */

.sidebar { width: 100%; }
.sidebar-sticky {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sidebar-block {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.sidebar-title {
  font-size: .9rem;
  font-weight: var(--fw-medium);
  margin: 0 0 .6rem;
  color: var(--c-text-strong);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.recently-viewed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.recently-viewed-list a {
  display: block;
  font-size: .9rem;
  color: var(--c-text);
  padding: .25rem 0;
}
.recently-viewed-list a:hover { color: var(--c-accent); }

.sidebar-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.sidebar-link-list a {
  display: block;
  padding: .3rem .45rem;
  border-radius: 6px;
  color: var(--c-text);
  font-size: .9rem;
}
.sidebar-link-list a:hover {
  text-decoration: none;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.sidebar-link-list a.is-current {
  background: var(--c-accent-soft);
  color: var(--c-text-strong);
  font-weight: var(--fw-medium);
}

@media (max-width: 900px) {
  .sidebar-sticky { position: static; }
}

/* ---------- 11. Ad slot ------------------------------------------------ */

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft);
  color: var(--c-text-soft);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 1.5rem 0;
}
.ad-slot__label { padding: 1rem; }
.ad-slot--responsive { min-height: 96px; }
.ad-slot--300x250    { width: 100%; max-width: 300px; height: 250px; margin-left:auto; margin-right:auto; }
.ad-slot--300x600    { width: 100%; max-width: 300px; height: 600px; margin-left:auto; margin-right:auto; }
.ad-slot--728x90     { width: 100%; max-width: 728px; height: 90px;  margin-left:auto; margin-right:auto; }

@media (max-width: 900px) {
  .ad-slot--300x600 { height: 250px; }
}

/* ---------- 12. Prose (chapter body) ----------------------------------- */

.prose { font-size: 1rem; }
.prose-body { }
.prose-body img { border-radius: var(--radius-sm); margin: 1.4rem 0; }
.prose-body h2 { margin-top: 2rem; }
.prose-body h3 { margin-top: 1.5rem; }
.prose-body :where(ul, ol) { padding-left: 1.4rem; }

.breadcrumbs {
  font-size: .85rem;
  color: var(--c-text-soft);
  margin: 0 0 1rem;
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs span[aria-current] { color: var(--c-text-strong); }

/* ... around line 818 ... */
.chapter-complete-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 1.1rem 1.2rem;
  margin: 2rem 0 1rem;
  background: var(--pastel-bg, var(--c-bg-soft));
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.chapter-complete-cta.is-complete .button-primary {
  background: #4caf83;
  border-color: #4caf83;
}

html[data-theme="dark"] .chapter-complete-cta {
  background: var(--c-surface);
  border-color: var(--c-border);
}
html[data-theme="dark"] .chapter-complete-cta .muted {
  color: var(--c-text-soft);
}

.chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.chapter-nav a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
}
.chapter-nav a:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.chapter-nav-next { text-align: right; }
.chapter-nav-title { font-weight: var(--fw-medium); color: var(--c-text-strong); }

.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.25rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-strong);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 8rem);
}
.celebration-toast {
  position: relative;
  min-width: 220px;
  max-width: min(92vw, 420px);
  background: var(--c-surface);
  color: var(--c-text-strong);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .8rem 1rem;
  text-align: center;
  animation: celebration-pop 2.6s ease forwards;
}
.celebration-text {
  margin: 0;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.celebration-particles {
  position: absolute;
  inset: -10px 0 auto;
  height: 80px;
  overflow: visible;
}
.celebration-particle {
  position: absolute;
  left: calc(var(--i) * 6.25%);
  top: 35px;
  width: 7px;
  height: 14px;
  border-radius: 10px;
  background: hsl(calc(var(--i) * 28), 85%, 68%);
  opacity: 0;
  transform: translateY(0) rotate(0deg);
  animation: confetti-fall 900ms ease-out forwards;
  animation-delay: calc(var(--i) * 45ms);
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translateY(-12px) rotate(0deg) scale(.8); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(62px) rotate(220deg) scale(1); }
}

@keyframes celebration-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.96); }
  10%, 85% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* ---------- 13. Chapter list (course page) ----------------------------- */

.chapter-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  counter-reset: ch;
}
.chapter-list-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  transition: transform .15s, border-color .15s;
}
.chapter-list-item:hover { transform: translateX(2px); border-color: var(--pastel-bar); }
.chapter-list-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  color: var(--c-text);
}
.chapter-list-link:hover { text-decoration: none; }
.chapter-num {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--pastel-bar);
  font-weight: var(--fw-medium);
}
.chapter-meta { display: flex; flex-direction: column; gap: .15rem; }
.chapter-title { font-weight: var(--fw-medium); color: var(--c-text-strong); }
.chapter-status {
  font-size: 1.1rem;
  color: var(--c-text-soft);
  width: 1.5em;
  text-align: center;
}
.chapter-status.is-complete { color: #4caf83; }

.prereqs {
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
}
.prereqs h3 { margin-top: 0; }
.prereqs ul { margin-bottom: 0; }

/* ---------- 14. Search page ------------------------------------------- */

.search-form {
  margin: 1rem 0 1.5rem;
}
.search-form input[type="search"] {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--c-text-strong);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-form input[type="search"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.search-status { margin-top: .5rem; }

#search-results .card { background: var(--c-bg-soft); }
#search-results .card-title-bar { background: var(--pastel-bar, var(--c-accent)); }

mark { background: #fff4b3; color: inherit; padding: 0 .15em; border-radius: 2px; }

/* ---------- 15. Settings page ----------------------------------------- */

.settings-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.settings-heading { font-size: 1.1rem; margin-bottom: .25rem; }
.settings-presets {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}
.settings-presets .button[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}
.settings-slider { display: block; margin: 1rem 0 1.25rem; }
.settings-slider span { display: block; margin-bottom: .35rem; color: var(--c-text-soft); font-size: .9rem; }
.settings-slider input[type="range"] { width: 100%; max-width: 360px; }
.settings-preview {
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}
.settings-actions { margin-top: 1rem; }

/* ---------- 16. Profile / progress page ------------------------------- */

.profile-name-card {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.profile-name-input {
  width: 10.5rem;
  max-width: 50vw;
  border: 0;
  border-bottom: 1px dashed var(--c-border-strong);
  background: transparent;
  color: var(--c-text-strong);
  font: inherit;
  text-align: center;
  padding: .05rem .25rem;
}
.profile-name-input:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--c-accent);
  outline: none;
}

.profile-track {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--pastel-bg, var(--c-bg-soft));
}
.profile-track-title {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
}
.profile-track-title a { color: var(--c-text-strong); }
.profile-course-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.profile-course {
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  border: 1px solid var(--c-border);
}
.profile-course-link h3 {
  margin: 0 0 .6rem;
  font-size: 1.02rem;
}
.profile-course-link h3 a, .profile-course-link { color: var(--c-text-strong); }
.profile-chapter-details {
  margin-top: .75rem;
}
.profile-chapter-details summary { cursor: pointer; }
.profile-chapter-list {
  list-style: none;
  padding: .5rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.profile-chapter-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
}
.profile-actions { margin-top: 1rem; }

/* ---------- 17. Progress bar ------------------------------------------ */

.progress {
  margin: .6rem 0;
}
.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .35rem;
  font-size: .85rem;
  color: var(--c-text-soft);
}
.progress-label { font-weight: var(--fw-medium); color: var(--c-text-strong); }
.progress-track {
  height: 8px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--pastel-bar, var(--c-accent));
  border-radius: 999px;
  transition: width .35s ease;
}

/* ---------- 18. Footer ------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  padding: 2.5rem 0 2rem;
  margin-top: 5rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.brand-name-footer {
  font-weight: var(--fw-medium);
  color: var(--c-text-strong);
  margin: 0 0 .3rem;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  justify-content: flex-end;
}
.footer-nav a { color: var(--c-text); }
.footer-nav a:hover { color: var(--c-accent); }
.footer-meta { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--c-border); margin-top: 1rem; }

@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav ul { justify-content: flex-start; }
}

/* ---------- 19. Print -------------------------------------------------- */

@media print {
  .site-header, .site-footer, .sidebar, .ad-slot, .nav-toggle, .chapter-complete-cta, .chapter-nav { display: none !important; }
  .two-col { grid-template-columns: 1fr; }
  body { color: #000; background: #fff; }
  a { color: inherit; text-decoration: underline; }
}

/* ---------- 20. Reduced motion / focus -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========================================================================
   Brand Logo Styling
   ======================================================================== */
/* ========================================================================
   Brand SVG Logo (retraini_brand_v3)
   ======================================================================== */

.brand-logo-svg {
  display: block;
  height: 32px;
  width: auto;
  overflow: visible;
  flex-shrink: 0;
}

/* Light mode — rising bars */
.brand-logo-svg .bar-1 { fill: #9FE1CB; }
.brand-logo-svg .bar-2 { fill: #5DCAA5; }
.brand-logo-svg .bar-3 { fill: #1D9E75; }

/* Light mode — wordmark */
.brand-logo-svg .logo-re     { fill: #1D9E75; }
.brand-logo-svg .logo-traini { fill: #2C2C2A; }

/* Dark mode — rising bars */
html[data-theme="dark"] .brand-logo-svg .bar-1 { fill: #085041; }
html[data-theme="dark"] .brand-logo-svg .bar-2 { fill: #0F6E56; }
html[data-theme="dark"] .brand-logo-svg .bar-3 { fill: #5DCAA5; }

/* Dark mode — wordmark */
html[data-theme="dark"] .brand-logo-svg .logo-re     { fill: #5DCAA5; }
html[data-theme="dark"] .brand-logo-svg .logo-traini { fill: #EFEFEC; }

/* Hover effect */
.brand:hover .brand-logo-svg { opacity: 0.85; }

@media (max-width: 768px) {
  .brand-logo-svg { height: 28px; }
}

@media (max-width: 480px) {
  .brand-logo-svg { height: 24px; }
}