/*
 * Cheatsheets v2 — design system match for the LearnThatStack redesign.
 * Two surfaces:
 *   .cs   — library / catalog listing (/cheatsheets, /cheatsheets/category/*)
 *   .cd   — single cheatsheet detail viewer (/cheatsheets/:cat/:topic)
 *
 * Both scope all of their styles under a body class so they coexist with the
 * legacy CSS without bleeding. Tokens mirror the shared v2 palette already
 * used by Refreshers and Interview Questions v2.
 */

/* ── Shared tokens (scoped on both surfaces so the page can be either) ──── */
.cs, .cd {
   --paper:    #E9E8E3;
   --paper2:   #DFDDD7;
   --card:     #F8F7F4;
   --cardEdge: #D6D4CD;
   --rule:     #D6D4CD;
   --rule2:    #C9C7C0;
   --divider:  #DFDDD7;
   --ink:      #232320;
   --ink2:     #45443E;
   --ink3:     #67665F;
   --ink4:     #94938B;
   --ink5:     #B5B4AC;
   --orange:   #E55A12;
   --orangeD:  #C24A0B;
   --orangeS:  #F3E2D2;
   --orangeE:  #E5C4A4;
   --green:    #256E4C;
   --greenS:   #E0EAE2;
   --greenE:   #BFD8C4;
   --greenDot: #2E9E6B;
   --dark:     #232320;
   --darkD:    #1B1B18;

   font-family: 'Instrument Sans', system-ui, sans-serif;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
}
.cs ::selection, .cd ::selection { background: var(--orangeS); color: var(--orangeD); }
.cs *:focus-visible, .cd *:focus-visible {
   outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px;
}
.cs [x-cloak], .cd [x-cloak] { display: none !important; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  LISTING (.cs)                                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── Category strip — sticky pill row under the header ───────────────── */
.cs-strip {
   border-bottom: 1px solid var(--rule);
   background: rgba(233,232,227, 0.92);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   padding: 14px 0;
   position: sticky;
   top: 64px;   /* sits below the .lts-header (~64px sticky) */
   z-index: 20;
}
@media (max-width: 760px) { .cs-strip { padding: 12px 0; top: 56px; } }

.cs-strip__inner {
   position: relative; max-width: 1280px; margin: 0 auto;
}
.cs-strip__fade {
   position: absolute; top: 0; right: 0; bottom: 0;
   width: 40px; pointer-events: none; z-index: 2;
   background: linear-gradient(to right, transparent, var(--paper));
}
.cs-strip__row {
   display: flex; align-items: center; gap: 7px;
   overflow-x: auto; overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding: 0 28px 0 28px;
   padding-right: 56px;
}
.cs-strip__row::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
   .cs-strip__row { padding: 0 16px; padding-right: 40px; }
}
.cs-strip__label {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--ink4);
   padding-right: 6px; flex-shrink: 0;
}

.cs-pill {
   all: unset; cursor: pointer; text-decoration: none;
   display: inline-flex; align-items: center; gap: 8px;
   padding: 7px 12px 7px 7px; border-radius: 999px;
   font-size: 14px; font-weight: 500;
   color: var(--ink2);
   background: var(--card);
   border: 1px solid var(--cardEdge);
   flex-shrink: 0; white-space: nowrap;
   transition: background-color .12s, color .12s, border-color .12s;
}
.cs-pill:hover { border-color: var(--rule2); }
.cs-pill[aria-current="page"] {
   background: linear-gradient(180deg, #FFFFFF, #F2F1EE); color: var(--ink);
   border-color: transparent; font-weight: 600;
   box-shadow: 0 1px 3px rgba(35,35,32,.2), 0 1px 0 rgba(255,255,255,.9) inset; /* raised knob */
}
.cs-pill__chip {
   width: 22px; height: 22px; border-radius: 6px;
   color: #F8F7F4; display: grid; place-items: center;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10.5px; font-weight: 400; flex-shrink: 0;
}
.cs-pill__chip svg { width: 15px; height: 15px; display: block; }
.cs-pill[aria-current="page"] .cs-pill__chip { /* keeps its category color on the light knob */ }
.cs-pill__count {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; color: var(--ink4);
}
.cs-pill[aria-current="page"] .cs-pill__count { color: var(--ink3); opacity: 1; }

/* ── Page-width main container ───────────────────────────────────────── */
.cs-main {
   max-width: 1280px; margin: 0 auto;
   padding: 0 28px 48px;
}
@media (max-width: 760px) { .cs-main { padding: 0 16px 32px; } }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.cs-breadcrumb {
   display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 13px; color: var(--ink3); letter-spacing: 0.01em;
   padding: 22px 0 6px;
}
@media (max-width: 760px) { .cs-breadcrumb { padding: 16px 0 4px; } }
.cs-breadcrumb a, .cs-breadcrumb span { color: var(--ink3); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--ink); }
.cs-breadcrumb__sep { color: var(--ink5); }
.cs-breadcrumb__current { color: var(--ink); font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.cs-hero { padding: 28px 0 36px; }
@media (max-width: 760px) { .cs-hero { padding: 20px 0 24px; } }
.cs-hero__row {
   display: flex; align-items: flex-end; justify-content: space-between;
   gap: 28px; flex-wrap: wrap;
}
.cs-hero__lead { flex: 1; min-width: 280px; }
.cs-hero__eyebrow {
   display: inline-flex; align-items: center; gap: 7px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em;
   text-transform: uppercase; color: var(--orangeD);
   padding: 5px 11px; background: var(--orangeS);
   border: 1px solid var(--orangeE); border-radius: 999px;
   margin-bottom: 16px;
}
.cs-hero h1 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 64px; font-weight: 700;
   letter-spacing: -0.045em; color: var(--ink); line-height: 0.98;
   max-width: 820px;
}
@media (max-width: 760px) { .cs-hero h1 { font-size: 40px; } }
.cs-hero h1 .num {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-weight: 400; color: var(--orange); letter-spacing: -0.02em;
}
.cs-hero h1 .italic {
   font-style: italic; font-weight: 600; color: var(--ink4);
}
.cs-hero__sub {
   margin: 20px 0 0; font-size: 18px; color: var(--ink3);
   line-height: 1.55; max-width: 560px;
}
@media (max-width: 760px) { .cs-hero__sub { font-size: 16.5px; } }

/* Sprite host: present in the layout, never painted. Not display:none - that
   stops Safari resolving <use> references into it. */
.cs-sprite {
   position: absolute; width: 0; height: 0;
   overflow: hidden; pointer-events: none;
}

/* ── Toolbar — search + free toggle + sort ──────────────────────────── */
.cs-toolbar { padding: 24px 0 18px; }
@media (max-width: 760px) { .cs-toolbar { padding: 18px 0 14px; } }
.cs-toolbar__row {
   display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cs-toolbar__search {
   flex: 1 1 280px; min-width: 220px; max-width: 520px;
}
.cs-toolbar__search-inner {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 13px;
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 10px;
   transition: border-color .12s;
}
.cs-toolbar__search-inner:focus-within { border-color: var(--rule2); }
.cs-toolbar__search-inner svg { color: var(--ink3); flex-shrink: 0; }
.cs-toolbar__search input {
   all: unset; flex: 1; min-width: 0;
   font-size: 14.5px; color: var(--ink);
   font-family: 'Instrument Sans', sans-serif;
}
.cs-toolbar__search input::placeholder { color: var(--ink4); }
.cs-toolbar__clear {
   all: unset; cursor: pointer; color: var(--ink4);
   display: grid; place-items: center;
}
.cs-toolbar__clear:hover { color: var(--ink2); }
.cs-toolbar__spacer { flex: 1; min-width: 0; }

.cs-toolbar__toggle {
   all: unset; cursor: pointer;
   display: inline-flex; align-items: center; gap: 8px;
   padding: 8px 12px; border-radius: 9px;
   background: var(--card); border: 1px solid var(--cardEdge);
   color: var(--ink2);
   font-size: 13.5px; font-weight: 600;
}
.cs-toolbar__toggle[aria-pressed="true"] {
   background: var(--greenS); border-color: var(--greenE); color: var(--green);
}
.cs-toolbar__box {
   width: 14px; height: 14px; border-radius: 4px;
   border: 1.5px solid var(--rule2);
   display: grid; place-items: center; color: #F8F7F4;
   background: transparent;
}
.cs-toolbar__toggle[aria-pressed="true"] .cs-toolbar__box {
   background: var(--green); border-color: var(--green);
}

.cs-toolbar__sort {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 0 4px 0 12px; border-radius: 9px;
   background: var(--card); border: 1px solid var(--cardEdge);
}
.cs-toolbar__sort-label {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; font-weight: 400; letter-spacing: 0.08em;
   text-transform: uppercase; color: var(--ink4);
}
.cs-toolbar__sort select {
   all: unset; cursor: pointer;
   padding: 8px 8px 8px 4px;
   font-size: 14px; font-weight: 600; color: var(--ink);
   font-family: 'Instrument Sans', sans-serif;
}

/* ── Results header ──────────────────────────────────────────────────── */
.cs-results-header {
   display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
   padding-bottom: 14px; border-bottom: 1px solid var(--rule);
   margin-bottom: 22px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; font-weight: 400; color: var(--ink3);
   letter-spacing: 0.04em;
}
@media (max-width: 760px) { .cs-results-header { margin-bottom: 16px; } }
.cs-results-header b { color: var(--ink); font-weight: 700; }
.cs-results-header .free { color: var(--green); font-weight: 700; }

/* ── Catalog grid + book-cover card ──────────────────────────────────── */
.cs-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 12px;
}
@media (max-width: 760px) {
   .cs-grid { grid-template-columns: 1fr; }
}

/* Each card is a miniature of the sheet itself: category dot + name, the
   title, then the sheet's real first section titles as a hairline mini-TOC,
   and a stat footer with true numbers. Category color appears only in the
   7px dot (and tints the TOC numbers on hover) — the card earns its look
   from content, not chrome. */
.cs-card {
   text-decoration: none; color: inherit;
   display: flex; flex-direction: column;
   padding: 18px 20px 13px;
   background: var(--card);
   border: 1px solid var(--cardEdge);
   border-radius: 12px;
   transition: transform .16s ease, border-color .16s ease,
               box-shadow .16s ease, background-color .16s ease;
}
.cs-card:hover {
   transform: translateY(-2px);
   background: #FFFFFF;
   border-color: var(--ink5);
   box-shadow: 0 14px 28px -18px rgba(35,35,32,.28);
}
@media (prefers-reduced-motion: reduce) {
   .cs-card, .cs-card:hover { transform: none; }
}
.cs-card__top {
   display: flex; align-items: center; gap: 8px; margin-bottom: 13px;
}
.cs-card__dot {
   width: 7px; height: 7px; border-radius: 50%; flex: none;
   background: var(--_catColor, var(--ink5));
}
/* Topic mark. Sits in quiet ink so 30 cards do not turn into a colour chart;
   the category colour arrives on hover, at the same moment the TOC numbers
   take it. */
.cs-card__glyph {
   display: grid; place-items: center;
   width: 20px; height: 20px; flex: none;
   margin-left: -1px;
   color: var(--ink3);
   transition: color .16s ease;
}
.cs-card__glyph svg { display: block; }
.cs-card:hover .cs-card__glyph { color: var(--_catColor, var(--ink2)); }
.cs-card__cat {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10.5px; font-weight: 400;
   letter-spacing: 0.12em; text-transform: uppercase;
   color: var(--ink3);
}
.cs-card__new {
   margin-left: auto;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10px; font-weight: 400;
   letter-spacing: 0.12em; text-transform: uppercase;
   color: var(--orangeD);
}
.cs-card h3 {
   margin: 0 0 14px; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 21px; font-weight: 600;
   letter-spacing: -0.035em; color: var(--ink);
   line-height: 1.18;
}
.cs-card__toc {
   list-style: none; margin: 0 0 12px; padding: 0;
   flex: 1;
   border-top: 1px solid var(--divider);
}
.cs-card__toc li {
   display: flex; align-items: baseline; gap: 10px;
   padding: 7px 0;
   border-bottom: 1px solid var(--divider);
}
.cs-card__toc li:last-child { border-bottom: 0; }
.cs-card__toc-n {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10px; font-weight: 400;
   color: var(--ink5); flex: none; min-width: 16px;
   transition: color .16s ease;
}
.cs-card:hover .cs-card__toc-n { color: var(--_catColor, var(--ink4)); }
.cs-card__toc-t {
   font-size: 12.5px; font-weight: 500; color: var(--ink3);
   line-height: 1.35; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-card__toc-rest .cs-card__toc-t {
   font-weight: 400; color: var(--ink4);
}
.cs-card__foot {
   margin-top: auto; padding-top: 11px;
   border-top: 1px solid var(--divider);
   display: flex; align-items: center; gap: 8px;
   min-height: 30px;
}
.cs-card__foot .cs-badge { margin-left: auto; }

/* ── Badges (Free / Pro) ─────────────────────────────────────────────── */
.cs-badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 3px 9px; border-radius: 999px;
   font-size: 11.5px; font-weight: 700;
   letter-spacing: 0.08em; text-transform: uppercase;
   font-family: 'Instrument Sans', sans-serif;
}
.cs-badge--sm { padding: 2px 7px; font-size: 10.5px; }
.cs-badge--free {
   color: var(--green); background: var(--greenS);
   border: 1px solid var(--greenE);
}
.cs-badge--free::before {
   content: ''; width: 5px; height: 5px; border-radius: 5px;
   background: var(--greenDot);
}
.cs-badge--pro {
   color: var(--orangeD); background: var(--orangeS);
   border: 1px solid var(--orangeE);
}
.cs-badge--pro svg { display: block; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.cs-empty {
   padding: 48px 24px; text-align: center;
   background: var(--card); border: 1px dashed var(--rule2);
   border-radius: 14px;
   color: var(--ink3);
}
.cs-empty__icon {
   width: 40px; height: 40px; margin: 0 auto 12px;
   border-radius: 10px; background: var(--paper2);
   display: grid; place-items: center; color: var(--ink3);
}
.cs-empty h4 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 20px; font-weight: 600; color: var(--ink);
   letter-spacing: -0.035em;
}
.cs-empty p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink3); }

/* ── Pro CTA card ────────────────────────────────────────────────────── */
.cs-pro {
   margin-top: 48px; padding: 36px 40px;
   border-radius: 16px;
   background: linear-gradient(180deg, #2E2E2A, var(--dark)); color: var(--paper); border: 1px solid var(--darkD); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -22px rgba(35,35,32,.7);
   position: relative; overflow: hidden;
}
@media (max-width: 760px) { .cs-pro { margin-top: 32px; padding: 28px 24px; } }
.cs-pro::before {
   content: ''; position: absolute;
   right: 28px; top: 26px; width: 110px; height: 18px; border-radius: 3px;
   background: repeating-linear-gradient(90deg, #3A3A34 0 2px, transparent 2px 7px);
   pointer-events: none;
}
.cs-pro__row {
   display: flex; align-items: flex-end; gap: 28px;
   flex-wrap: wrap; position: relative;
}
.cs-pro__lead { flex: 1; min-width: 280px; }
.cs-pro__eyebrow {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
   text-transform: uppercase; color: var(--orange);
   padding: 4px 10px; background: rgba(229,90,18,.14);
   border-radius: 999px; margin-bottom: 14px;
}
.cs-pro h3 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 36px; font-weight: 700; letter-spacing: -0.035em;
   line-height: 1.05; color: var(--paper);
}
@media (max-width: 760px) { .cs-pro h3 { font-size: 28px; } }
.cs-pro h3 .num {
   color: var(--orange);
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-weight: 400;
}
.cs-pro__sub {
   margin: 14px 0 0; font-size: 15.5px; color: #B5B4AC;
   line-height: 1.55; max-width: 540px;
}
.cs-pro__bullets {
   display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap;
   font-size: 13.5px; color: #B5B4AC;
}
.cs-pro__bullet {
   display: inline-flex; align-items: center; gap: 6px;
}
.cs-pro__bullet svg { color: var(--orange); flex-shrink: 0; }
.cs-pro__actions { display: flex; flex-direction: column; gap: 8px; }
.cs-pro__cta {
   cursor: pointer; padding: 12px 22px; border-radius: 10px;
   background: linear-gradient(180deg, #F06A24, var(--orange)); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px -1px rgba(194,74,11,.6);
   font-size: 15.5px; font-weight: 600;
   display: inline-flex; align-items: center; gap: 8px;
   justify-content: center; text-decoration: none;
}
.cs-pro__cta:hover { background: var(--orangeD); color: #F8F7F4; }
.cs-pro__alt {
   font-size: 13px; color: #94938B; text-align: center;
   text-decoration: none;
}
.cs-pro__alt:hover { color: var(--paper); }

/* ── Contribute footer block ─────────────────────────────────────────── */
.cs-contrib {
   margin-top: 48px; padding-top: 32px;
   border-top: 1px solid var(--rule);
}
@media (max-width: 760px) {
   .cs-contrib { margin-top: 32px; padding-top: 24px; }
}
.cs-contrib__kicker {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--ink3); margin-bottom: 12px;
}
.cs-contrib h3 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 26px; font-weight: 600;
   letter-spacing: -0.035em; color: var(--ink); line-height: 1.2;
}
@media (max-width: 760px) { .cs-contrib h3 { font-size: 22px; } }
.cs-contrib p {
   margin: 10px 0 14px; font-size: 15px;
   color: var(--ink3); line-height: 1.55; max-width: 460px;
}
.cs-contrib__btn {
   all: unset; cursor: pointer;
   display: inline-flex; align-items: center; gap: 7px;
   padding: 9px 16px; border-radius: 9px;
   background: var(--card); color: var(--ink);
   border: 1px solid var(--rule2);
   font-size: 14px; font-weight: 600;
   text-decoration: none;
}
.cs-contrib__btn:hover { border-color: var(--ink4); }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  DETAIL (.cd)                                                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.cd-main {
   max-width: 1280px; margin: 0 auto;
   padding: 0 28px 48px;
}
@media (max-width: 900px) { .cd-main { padding: 0 16px 32px; } }

/* Reuse the breadcrumb visual (same as listing) — only slightly bigger pad. */
.cd-breadcrumb {
   display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 13px; color: var(--ink3); letter-spacing: 0.01em;
   padding: 22px 0 10px;
}
@media (max-width: 900px) { .cd-breadcrumb { padding: 16px 0 8px; } }
.cd-breadcrumb a, .cd-breadcrumb span { color: var(--ink3); text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--ink); }
.cd-breadcrumb__sep { color: var(--ink5); }
.cd-breadcrumb__current { color: var(--ink); font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.cd-hero {
   padding: 14px 0 22px;
   border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) { .cd-hero { padding: 8px 0 20px; } }
.cd-hero__row {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: 40px; flex-wrap: wrap;
}
.cd-hero__lead { flex: 1; min-width: 280px; }
.cd-hero__crumb {
   display: inline-flex; align-items: center; gap: 10px;
   margin-bottom: 16px; flex-wrap: wrap;
}
.cd-hero__cat {
   display: inline-flex; align-items: center; gap: 8px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12.5px; font-weight: 400; color: var(--ink2);
   letter-spacing: 0.04em;
   text-decoration: none;
}
.cd-hero__chip {
   width: 24px; height: 24px; border-radius: 6px;
   background: var(--_catColor, var(--rule2));
   color: #F8F7F4; display: grid; place-items: center;
   font-size: 11px; font-weight: 700;
}
.cd-hero__glyph {
   display: grid; place-items: center;
   width: 24px; height: 24px; flex: none;
   color: var(--ink2);
}
.cd-hero__glyph svg { display: block; }
.cd-hero__cat:hover .cd-hero__glyph { color: var(--_catColor, var(--ink)); }
.cd-hero__crumb-sep { color: var(--ink5); }
.cd-hero h1 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 60px; font-weight: 700;
   letter-spacing: -0.045em; color: var(--ink); line-height: 0.98;
}
@media (max-width: 900px) { .cd-hero h1 { font-size: 40px; } }
.cd-hero h1 .dot { color: var(--orange); }
.cd-hero h1 .italic { font-style: italic; font-weight: 600; color: var(--ink4); }
.cd-hero__sub {
   margin: 20px 0 0; font-size: 18px; color: var(--ink3);
   line-height: 1.55; max-width: 620px;
}
@media (max-width: 900px) { .cd-hero__sub { font-size: 16.5px; } }
.cd-hero__tags {
   display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px;
}
.cd-hero__tag {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; color: var(--ink3); font-weight: 400;
   padding: 4px 10px; border-radius: 999px;
   background: var(--paper2); border: 1px solid var(--rule);
}
/* At-a-glance quick-jump panel (hero right column) */
.cd-hero__glance {
   width: 300px; flex: none; box-sizing: border-box;
   background: var(--card); border: 1px solid var(--cardEdge);
   border-radius: 12px; box-shadow: inset 0 2px 4px rgba(35,35,32,.06);
   padding: 13px 15px; margin-top: 4px;
}
.cd-hero__glance-h {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
   color: var(--ink4); margin-bottom: 6px;
}
.cd-hero__glance-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }
.cd-hero__glance-row {
   all: unset; cursor: pointer; box-sizing: border-box;
   display: flex; align-items: center; gap: 10px; width: 100%;
   padding: 6px 4px; border-bottom: 1px solid var(--divider);
}
.cd-hero__glance-row:last-child { border-bottom: 0; }
.cd-hero__glance-row .n {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10px; color: var(--orange); width: 18px; flex: none;
}
.cd-hero__glance-row .t { font-size: 15px; font-weight: 500; color: var(--ink2); line-height: 1.3; }
.cd-hero__glance-row:hover .t { color: var(--ink); }
@media (max-width: 900px) { .cd-hero__glance { width: 100%; margin-top: 14px; } }

/* ── Two-column layout (TOC + content) ───────────────────────────────── */
.cd-layout {
   display: grid;
   grid-template-columns: 240px 1fr;
   gap: 48px;
   margin-top: 32px;
   align-items: flex-start;
}
@media (max-width: 900px) {
   .cd-layout { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
}

/* ── TOC sidebar (desktop) ───────────────────────────────────────────── */
.cd-toc {
   position: sticky; top: 80px;
   max-height: calc(100vh - 110px);
   overflow-y: auto;
   padding-right: 8px;
}
@media (max-width: 900px) { .cd-toc { position: static; max-height: none; padding-right: 0; } }
.cd-toc__head {
   display: flex; align-items: baseline; gap: 8px;
   padding: 0 0 12px;
}
.cd-toc__label {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--ink4);
}
.cd-toc__progress {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; color: var(--ink3); margin-left: auto;
}
/* Station-dot rail — matches the study-guide reader chassis (.sgd-rail):
   a vertical connector line with a numbered "station" disc per section. */
.cd-toc__list {
   position: relative;
   display: flex; flex-direction: column;
   padding-left: 6px;
}
.cd-toc__list::before {
   content: ""; position: absolute; left: 17px; top: 14px; bottom: 14px;
   width: 2px; background: var(--cardEdge);
}
.cd-toc__item {
   all: unset; cursor: pointer;
   position: relative;
   display: flex; align-items: center; gap: 12px;
   padding: 8px 0;
}
.cd-toc__item:hover .cd-toc__title { color: var(--ink); }
.cd-toc__num {
   position: relative; z-index: 1; flex: none;
   width: 24px; height: 24px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10px; color: var(--ink4);
   background: var(--card); border: 2px solid var(--cardEdge);
   box-shadow: inset 0 1px 2px rgba(35,35,32,.08);
}
.cd-toc__item[aria-current="true"] .cd-toc__num {
   background: #fff; border-color: var(--orange); color: var(--orange);
   box-shadow: 0 0 0 4px rgba(229,90,18,.12);
}
.cd-toc__item.is-done .cd-toc__num {
   background: var(--greenS); border-color: #8FBBA2; color: var(--green);
}
/* Same 19px as .cd-prose, matching the study-guide rail (.sgd-st__lab). The
   weight comes DOWN to 500 as the size goes up: at 19px, semibold reads heavier
   than the body text it indexes, which is backwards for a progress rail. */
.cd-toc__title {
   font-size: 19px; line-height: 1.25;
   font-weight: 500; color: var(--ink3);
}
.cd-toc__item[aria-current="true"] .cd-toc__title { color: var(--ink); }
.cd-toc__item.is-done .cd-toc__title { color: var(--ink2); }
.cd-toc__hint {
   margin-top: 16px; padding-top: 14px;
   border-top: 1px solid var(--divider);
   display: flex; align-items: center; gap: 6px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; color: var(--ink4);
}

/* Mobile TOC — sticky accordion */
.cd-toc--mobile {
   position: sticky; top: 56px; z-index: 15;
   background: rgba(233,232,227,.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--rule);
   margin: 0 -16px 18px;
   padding: 10px 16px;
}
.cd-toc--mobile__btn {
   all: unset; cursor: pointer;
   display: flex; align-items: center; gap: 8px; width: 100%;
   padding: 8px 0;
}
.cd-toc--mobile__pos {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; font-weight: 400; color: var(--orange);
}
.cd-toc--mobile__title {
   font-size: 15.5px; font-weight: 600; color: var(--ink); flex: 1;
   line-height: 1.2;
}
.cd-toc--mobile__chev {
   color: var(--ink3); transition: transform .15s;
   display: grid; place-items: center;
}
.cd-toc--mobile[data-open="true"] .cd-toc--mobile__chev { transform: rotate(180deg); }
.cd-toc--mobile__list {
   padding-bottom: 6px;
}
.cd-toc--mobile__row {
   all: unset; cursor: pointer;
   display: flex; align-items: center; gap: 10px;
   padding: 8px 4px; width: 100%; box-sizing: border-box;
}
.cd-toc--mobile__row-n {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400;
   color: var(--ink4); min-width: 22px;
}
.cd-toc--mobile__row[aria-current="true"] .cd-toc--mobile__row-n { color: var(--orange); }
.cd-toc--mobile__row.is-done .cd-toc--mobile__row-n { color: var(--green); }
.cd-toc--mobile__row-title {
   font-size: 15px; line-height: 1.3;
   font-weight: 500; color: var(--ink2);
}
.cd-toc--mobile__row[aria-current="true"] .cd-toc--mobile__row-title {
   color: var(--ink); font-weight: 600;
}

/* ── Content viewer ─────────────────────────────────────────────────── */
/* min-width: 0 is load-bearing, not tidying. This is the `1fr` track of
   .cd-layout, and a grid item defaults to min-width: auto — so the track cannot
   shrink below the min-content width of its widest child. The widest child is a
   <pre> (max-width: 820px, white-space: pre), which pinned the column at 820px
   and pushed the whole PAGE into horizontal scroll below ~1050px. With this, the
   column shrinks and the <pre> scrolls inside its own overflow-x: auto instead.
   .sgd-content carries the same line for the same reason. */
.cd-content {
   padding: 8px 0 48px;
   min-height: 600px;
   min-width: 0;
}
@media (max-width: 900px) { .cd-content { padding: 0 0 32px; } }
.cd-progress {
   position: sticky; top: 60px; z-index: 5;
   height: 3px; border-radius: 2px;
   background: var(--paper2); margin-bottom: 12px; overflow: hidden;
   box-shadow: inset 0 1px 2px rgba(35,35,32,.08);
}
.cd-progress__bar {
   position: absolute; left: 0; top: 0; bottom: 0;
   background: linear-gradient(90deg, #F06A24, var(--orange));
   transition: width .25s ease;
}

/* Stacked section (continuous scroll + scroll-spy) */
.cd-sec {
   padding: 16px 0 30px;
   border-bottom: 1px solid var(--rule);
   scroll-margin-top: 78px;
}
.cd-sec:last-child { border-bottom: 0; padding-bottom: 8px; }
.cd-content__meta {
   display: flex; align-items: center; gap: 10px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12.5px; color: var(--ink3); margin-bottom: 14px;
   flex-wrap: wrap;
}
.cd-content__meta .num { color: var(--orange); }
.cd-content__meta .sep { color: var(--ink5); }
.cd-content__meta .kicker {
   text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink3);
}
.cd-content h2.cd-content__title {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 30px; font-weight: 700;
   letter-spacing: -0.03em; color: var(--ink); line-height: 1.15;
}
@media (max-width: 900px) { .cd-content h2.cd-content__title { font-size: 26px; } }
.cd-content__summary {
   margin: 12px 0 20px; font-size: 17px;
   color: var(--ink2); line-height: 1.5;
   max-width: 720px;
}
@media (max-width: 900px) { .cd-content__summary { font-size: 16px; } }

/* Body — markdown-rendered prose, scoped so it doesn't conflict with the
   legacy cheatsheet.css typography on other pages. */
/* ONE size, set on the container so every child inherits it — same shape as
   .sgd-prose in study-guide-reader.css. Repeating the size on p and ul/ol was
   how blockquote silently fell back to the 17px root. */
.cd-prose {
   max-width: none; color: var(--ink2);
   font-size: 19px; line-height: 1.72;
}
/* Reference tuning: prose text keeps a readable measure, but tables & code use
   the full content column so dense comparison tables have room to breathe.
   760px at 19px is ~78 characters — don't widen it with the type. */
.cd-prose > p, .cd-prose > ul, .cd-prose > ol,
.cd-prose > h3, .cd-prose > h4, .cd-prose > blockquote {
   max-width: 760px;
}
.cd-prose p {
   color: var(--ink2);
   margin: 0 0 16px;
}
.cd-prose strong { color: var(--ink); font-weight: 600; }
.cd-prose em { font-style: italic; }
.cd-prose a {
   color: var(--orangeD); text-decoration: underline;
   text-underline-offset: 2px;
}
.cd-prose a:hover { color: var(--orange); }
.cd-prose ul, .cd-prose ol {
   margin: 0 0 16px; padding-left: 22px;
}
.cd-prose li { margin-bottom: 8px; }
.cd-prose code {
   background: var(--paper);
   border: 1px solid var(--rule);
   padding: 1px 6px; border-radius: 5px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 0.86em; color: var(--ink);
}
/* Match Prism's specificity so the okaidia theme doesn't override our
   warm-dark background. We keep Prism's token colors for syntax highlights,
   but the surrounding <pre> wrapper styling is ours. */
.cd-prose pre,
.cd-prose pre[class*="language-"] {
   background: #2A2A26; color: #E6E5E0;
   padding: 16px 18px; border-radius: 10px;
   overflow-x: auto; margin: 0 0 18px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 15px; line-height: 1.7;
   max-width: 820px;
   text-shadow: none;
}
.cd-prose pre code,
.cd-prose pre[class*="language-"] code,
.cd-prose code[class*="language-"] {
   background: transparent; border: 0; padding: 0;
   color: inherit; font-size: inherit;
   text-shadow: none;
}
/* Weight 700, not 600: the body under these is 19px, so a semibold heading
   stops out-ranking the text it introduces. */
.cd-prose h3, .cd-prose h4 {
   margin: 28px 0 10px; font-family: 'Instrument Sans', system-ui, sans-serif;
   color: var(--ink); font-weight: 700;
   letter-spacing: -0.035em;
}
.cd-prose h3 { font-size: 22px; line-height: 1.3; }
.cd-prose h4 { font-size: 19px; }
.cd-prose blockquote {
   margin: 14px 0; padding: 10px 16px;
   border-left: 3px solid var(--orangeE);
   background: var(--paper); color: var(--ink2);
   border-radius: 0 8px 8px 0;
}
.cd-prose blockquote p:last-child { margin-bottom: 0; }
.cd-prose table.markdown-table, .cd-prose table {
   width: 100%; border-collapse: collapse;
   margin: 4px 0 18px; font-size: 15.5px;
}
.cd-prose th, .cd-prose td {
   padding: 8px 12px; text-align: left; vertical-align: top;
   line-height: 1.55; border-bottom: 1px solid var(--rule);
}
.cd-prose thead th {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
   font-weight: 400; color: var(--ink4);
   background: none; border-bottom: 2px solid var(--rule2);
}
.cd-prose tbody td strong { color: var(--ink); }
.cd-prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
   .cd-prose table.markdown-table, .cd-prose table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
}
.cd-prose img { max-width: 100%; border-radius: 8px; }
.cd-prose hr {
   border: 0; border-top: 1px solid var(--rule); margin: 22px 0;
}
/* Phone step-down — same numbers as study-guide-reader.css. 19px in a ~330px
   column is too tight a measure; code stays 15px (.cd-prose pre out-specifies
   the 13px rule in code-blocks.css), which is how the study guide behaves too. */
@media (max-width: 640px) {
   .cd-prose { font-size: 17px; }
   .cd-prose h3 { font-size: 20px; }
   .cd-prose h4 { font-size: 16.5px; }
}

/* ── Per-heading AI trigger + hover tray ─────────────────────────────── */
/* Every h3/h4 gets ONE compact spark button (.cs-ai__trigger); the
   Re-explain / Visualize pills live in a tray that slides out on hover or
   focus (desktop), on trigger tap (touch → .is-open), and stays out while a
   pill is loading or its panel is open (the :has() rules). */
.cs-ai {
   display: inline-flex; align-items: center; gap: 7px;
   vertical-align: middle;
   margin-left: 10px;
}
.cs-ai__trigger {
   all: unset;
   box-sizing: border-box;
   display: inline-flex; align-items: center; justify-content: center;
   width: 26px; height: 26px;
   border: 1px solid var(--rule2);
   border-radius: 999px;
   background: var(--card);
   color: var(--ink4);
   cursor: pointer;
   transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cs-ai__trigger svg { display: block; }
.cs-ai__trigger:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Cached content behind this heading — opening it is instant + free. */
.cs-ai__trigger.is-ready { color: var(--orange); border-color: var(--orange); }
.cs-ai:hover .cs-ai__trigger,
.cs-ai:focus-within .cs-ai__trigger,
.cs-ai.is-open .cs-ai__trigger {
   color: var(--orangeD); border-color: var(--orange); background: var(--orangeS);
}
.cs-ai__tray {
   display: inline-flex; align-items: center; gap: 6px;
   max-width: 0; opacity: 0; overflow: hidden;
   transition: max-width .2s ease, opacity .15s ease;
}
.cs-ai:hover .cs-ai__tray,
.cs-ai:focus-within .cs-ai__tray,
.cs-ai.is-open .cs-ai__tray,
.cs-ai:has(.is-loading) .cs-ai__tray,
.cs-ai:has(.cs-reexplain[aria-expanded="true"]) .cs-ai__tray,
.cs-ai:has(.cs-visualize[aria-expanded="true"]) .cs-ai__tray {
   max-width: 340px; opacity: 1; overflow: visible;
}

/* ── "Re-explain" pill (inside the tray) + inline AI panel ───────────── */
.cs-reexplain {
   all: unset;
   box-sizing: border-box;
   display: inline-flex; align-items: center; gap: 7px;
   vertical-align: middle;
   padding: 4px 9px 4px 8px;
   border: 1px solid var(--rule2);
   border-radius: 999px;
   background: var(--card);
   color: var(--ink2);
   cursor: pointer;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400;
   letter-spacing: 0.06em; text-transform: uppercase;
   line-height: 1; white-space: nowrap;
   -webkit-user-select: none; user-select: none;
   transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cs-reexplain:hover { border-color: var(--orange); background: var(--orangeS); color: var(--orangeD); }
.cs-reexplain:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cs-reexplain__spark { display: inline-flex; color: var(--orange); }
.cs-reexplain__spark svg { display: block; }
/* Already-cached subheadings open instantly and free — a faint accent tint
   signals "ready" now that the pills carry no cost chip. */
.cs-reexplain.is-cached { border-color: var(--orange); background: var(--orangeS); }
.cs-reexplain.is-loading { opacity: .7; pointer-events: none; }
.cs-reexplain.is-loading .cs-reexplain__spark { animation: csSpin .8s linear infinite; }
@keyframes csSpin { to { transform: rotate(360deg); } }

.cs-explain-panel {
   margin: 14px 0 22px;
   padding: 16px 18px;
   border: 1px solid var(--cardEdge);
   border-radius: 12px;
   background: var(--card);
   box-shadow: 0 1px 2px rgba(35,35,32, .04);
}
.cs-explain-panel[hidden] { display: none; }
.cs-explain-panel__head {
   display: flex; align-items: center; justify-content: space-between;
   gap: 12px; margin-bottom: 12px;
   padding-bottom: 10px; border-bottom: 1px solid var(--divider);
}
.cs-explain-panel__eyebrow {
   display: inline-flex; align-items: center; gap: 6px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--ink3);
}
.cs-explain-panel__eyebrow svg { color: var(--orange); }
.cs-explain-panel__close {
   all: unset; cursor: pointer;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--ink4);
   padding: 3px 7px; border-radius: 6px;
}
.cs-explain-panel__close:hover { color: var(--ink2); background: var(--paper); }
.cs-explain-panel__loading {
   display: flex; align-items: center; gap: 10px;
   padding: 6px 0; color: var(--ink3); font-size: 15px;
}
.cs-explain-panel__loading[hidden] { display: none; }
.cs-explain-spinner {
   width: 16px; height: 16px; border-radius: 50%;
   border: 2px solid var(--rule2); border-top-color: var(--orange);
   animation: csSpin .8s linear infinite;
}
.cs-explain-panel__error {
   padding: 10px 12px; border-radius: 8px;
   background: #FBEAE7; color: #B23A2E; font-size: 14.5px;
}
.cs-explain-panel__error[hidden] { display: none; }
.cs-explain-panel__body > :first-child { margin-top: 0; }
.cs-explain-panel__body > :last-child { margin-bottom: 0; }
/* Primary CTA inside the panels — the signed-out sign-in nudge (an <a>) and
   the pre-charge "Generate · N credits" confirm step (a <button>). Compact
   cousin of .cd-locked__cta so it matches the paywall's design language. */
.cs-explain-panel__cta {
   display: inline-flex; align-items: center; gap: 7px;
   margin-top: 4px;
   padding: 9px 16px; border: 0; border-radius: 8px;
   background: linear-gradient(180deg, #F06A24, var(--orange)); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px -1px rgba(194,74,11,.6);
   font-family: inherit; font-size: 14px; font-weight: 600;
   text-decoration: none; cursor: pointer;
}
.cs-explain-panel__cta:hover { background: var(--orangeD); color: #F8F7F4; }
.cs-explain-panel__cta:disabled { opacity: .6; pointer-events: none; }
/* Quiet "Not now" escape next to the confirm CTA. */
.cs-explain-panel__dismiss {
   all: unset; cursor: pointer;
   margin: 4px 0 0 12px; padding: 3px 7px; border-radius: 6px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--ink4);
}
.cs-explain-panel__dismiss:hover { color: var(--ink2); background: var(--paper); }
.cs-explain-panel__foot {
   margin-top: 12px; padding-top: 10px;
   border-top: 1px solid var(--divider);
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; letter-spacing: 0.03em; color: var(--ink4);
}
.cs-explain-panel__foot[hidden] { display: none; }

/* ── "Visualize" pill (inside the tray) + inline figure-plate panel ──── */
/* Sits after the Re-explain pill in the shared tray. Green accent
   distinguishes it from the orange re-explain pill; clicking reveals an AI
   figure plate (styles in interview-questions-v2.css) rendered into the
   panel below the block. */
.cs-visualize {
   all: unset;
   box-sizing: border-box;
   display: inline-flex; align-items: center; gap: 7px;
   vertical-align: middle;
   padding: 4px 9px 4px 8px;
   border: 1px solid var(--rule2);
   border-radius: 999px;
   background: var(--card);
   color: var(--ink2);
   cursor: pointer;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400;
   letter-spacing: 0.06em; text-transform: uppercase;
   line-height: 1; white-space: nowrap;
   -webkit-user-select: none; user-select: none;
   transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cs-visualize:hover { border-color: var(--green); background: var(--greenS); color: var(--green); }
.cs-visualize:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cs-visualize__spark { display: inline-flex; color: var(--green); }
.cs-visualize__spark svg { display: block; }
/* Already-cached subheadings open instantly and free — "ready" tint. */
.cs-visualize.is-cached { border-color: var(--green); background: var(--greenS); }
.cs-visualize.is-loading { opacity: .7; pointer-events: none; }
.cs-visualize.is-loading .cs-visualize__spark { animation: csSpin .8s linear infinite; }

.cs-viz-panel {
   margin: 14px 0 22px;
   padding: 16px 18px;
   border: 1px solid var(--cardEdge);
   border-radius: 12px;
   background: var(--card);
   box-shadow: 0 1px 2px rgba(35,35,32, .04);
}
.cs-viz-panel[hidden] { display: none; }
.cs-viz-panel__head {
   display: flex; align-items: center; justify-content: space-between;
   gap: 12px; margin-bottom: 12px;
   padding-bottom: 10px; border-bottom: 1px solid var(--divider);
}
.cs-viz-panel__eyebrow {
   display: inline-flex; align-items: center; gap: 6px;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--ink3);
}
.cs-viz-panel__eyebrow svg { color: var(--green); }
.cs-viz-panel__close {
   all: unset; cursor: pointer;
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em;
   text-transform: uppercase; color: var(--ink4);
   padding: 3px 7px; border-radius: 6px;
}
.cs-viz-panel__close:hover { color: var(--ink2); background: var(--paper); }
.cs-viz-panel__loading {
   display: flex; align-items: center; gap: 10px;
   padding: 6px 0; color: var(--ink3); font-size: 15px;
}
.cs-viz-panel__loading[hidden] { display: none; }
.cs-viz-panel__error {
   padding: 10px 12px; border-radius: 8px;
   background: #FBEAE7; color: #B23A2E; font-size: 14.5px;
}
.cs-viz-panel__error[hidden] { display: none; }
.cs-viz-panel__note {
   padding: 10px 12px; border-radius: 8px;
   background: var(--paper2); color: var(--ink3); font-size: 14.5px;
}
.cs-viz-panel__note[hidden] { display: none; }
/* The rendered plate can be wider than the panel on narrow screens — let it
   scroll inside its own box rather than stretching the page. */
.cs-viz-panel__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-viz-panel__foot {
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
   flex-wrap: wrap;
   margin-top: 12px; padding-top: 10px;
   border-top: 1px solid var(--divider);
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; letter-spacing: 0.03em; color: var(--ink4);
}
.cs-viz-panel__foot[hidden] { display: none; }
.cs-viz-regen {
   all: unset; cursor: pointer;
   padding: 5px 11px; border-radius: 999px;
   border: 1px solid var(--rule2);
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11.5px; font-weight: 400; letter-spacing: 0.05em;
   text-transform: uppercase; color: var(--ink3);
}
.cs-viz-regen:hover { border-color: var(--green); background: var(--greenS); color: var(--green); }

/* Narrow screens: shrink the trigger and pills so a long heading + open
   tray wraps gracefully instead of dominating the line. */
@media (max-width: 760px) {
   .cs-ai { margin-left: 8px; }
   .cs-ai__trigger { width: 24px; height: 24px; }
   .cs-reexplain, .cs-visualize {
      font-size: 10.5px;
      padding: 3px 8px;
      gap: 5px;
   }
}

/* ── Section footer nav (prev / next) ────────────────────────────────── */
.cd-nav {
   margin-top: 36px; padding-top: 22px;
   border-top: 1px solid var(--rule);
   display: flex; align-items: center; gap: 10px;
   flex-wrap: wrap;
}
.cd-nav__btn {
   all: unset; cursor: pointer;
   display: inline-flex; align-items: center; gap: 10px;
   padding: 11px 16px; border-radius: 10px;
   background: var(--card); border: 1px solid var(--cardEdge);
   color: var(--ink2);
   text-decoration: none;
}
.cd-nav__btn:hover { border-color: var(--rule2); }
.cd-nav__btn--next {
   background: linear-gradient(180deg, #2E2E2A, var(--dark)); color: var(--paper); border: 1px solid var(--darkD); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -22px rgba(35,35,32,.7);
   border-color: var(--dark); padding: 11px 18px;
}
.cd-nav__btn--next:hover { background: #1B1B18; color: var(--paper); }
.cd-nav__spacer { flex: 1; }
.cd-nav__col { display: flex; flex-direction: column; }
.cd-nav__col--end { align-items: flex-end; }
.cd-nav__kicker {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 11px; font-weight: 400; color: var(--ink4);
   letter-spacing: 0.08em; text-transform: uppercase;
}
.cd-nav__btn--next .cd-nav__kicker { color: var(--orange); }
.cd-nav__title {
   font-size: 14.5px; font-weight: 600; color: var(--ink);
   line-height: 1.2; margin-top: 2px;
}
.cd-nav__btn--next .cd-nav__title { color: var(--paper); }

/* ── Related cheatsheets ─────────────────────────────────────────────── */
.cd-related {
   margin-top: 56px; padding-top: 36px;
   border-top: 1px solid var(--rule);
}
@media (max-width: 900px) { .cd-related { margin-top: 36px; padding-top: 28px; } }
.cd-related__head {
   display: flex; align-items: baseline; gap: 12px;
   margin-bottom: 18px; flex-wrap: wrap;
}
.cd-related__kicker {
   font-family: 'Fragment Mono', ui-monospace, monospace;
   font-size: 12px; font-weight: 400; letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--orange);
}
.cd-related h3 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 24px; font-weight: 600;
   letter-spacing: -0.035em; color: var(--ink); line-height: 1.2;
}
@media (max-width: 900px) { .cd-related h3 { font-size: 20px; } }
.cd-related__browse {
   margin-left: auto;
   font-size: 13.5px; color: var(--ink2); font-weight: 600;
   text-decoration: none;
   display: inline-flex; align-items: center; gap: 4px;
}
.cd-related__browse:hover { color: var(--ink); }
.cd-related__grid {
   display: grid;
   grid-template-columns: repeat(var(--_cols, 4), 1fr);
   gap: 10px;
}
@media (max-width: 900px) { .cd-related__grid { grid-template-columns: 1fr; } }

.cd-rel-card {
   text-decoration: none; color: inherit;
   position: relative; display: flex; flex-direction: column;
   padding: 16px 16px 16px 20px;
   background: var(--card); border: 1px solid var(--cardEdge);
   border-radius: 11px; min-height: 140px;
   transition: border-color .12s, transform .12s;
}
.cd-rel-card:hover {
   border-color: var(--_catColor, var(--rule2));
   transform: translateY(-2px);
}
.cd-rel-card__spine {
   position: absolute; left: 0; top: 0; bottom: 0;
   width: 3px; background: var(--_catColor, var(--rule2));
   border-radius: 11px 0 0 11px;
}
.cd-rel-card__top {
   display: flex; align-items: center; margin-bottom: 12px;
   min-height: 19px;
}
.cd-rel-card__top > .cs-badge { margin-left: auto; }
.cd-rel-card__glyph {
   display: grid; place-items: center;
   width: 19px; height: 19px; flex: none;
   color: var(--ink3);
   transition: color .12s ease;
}
.cd-rel-card__glyph svg { display: block; }
.cd-rel-card:hover .cd-rel-card__glyph { color: var(--_catColor, var(--ink2)); }
.cd-rel-card h4 {
   margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 17px; font-weight: 600; letter-spacing: -0.035em;
   color: var(--ink); line-height: 1.2; flex: 1;
}
.cd-rel-card__foot {
   margin-top: 12px; display: flex; align-items: center;
   font-size: 12.5px; color: var(--ink3);
}
.cd-rel-card__foot svg { margin-left: auto; }

/* ── Premium-locked content notice on detail body ────────────────────── */
.cd-locked {
   padding: 36px 32px; border-radius: 14px;
   background: var(--card); border: 1px dashed var(--orangeE);
   text-align: center; max-width: 720px;
}
.cd-locked__icon {
   width: 48px; height: 48px; margin: 0 auto 16px;
   border-radius: 12px; background: var(--orange);
   color: #F8F7F4; display: grid; place-items: center;
}
.cd-locked h3 {
   margin: 0 0 8px; font-family: 'Instrument Sans', system-ui, sans-serif;
   font-size: 26px; font-weight: 600; letter-spacing: -0.035em;
   color: var(--ink);
}
.cd-locked p {
   margin: 0 0 18px; font-size: 15.5px; color: var(--ink3);
   line-height: 1.55;
}
.cd-locked__cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 11px 20px; border-radius: 9px;
   background: linear-gradient(180deg, #F06A24, var(--orange)); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px -1px rgba(194,74,11,.6);
   font-size: 14.5px; font-weight: 600;
   text-decoration: none;
}
.cd-locked__cta:hover { background: var(--orangeD); color: #F8F7F4; }

/* ── SSR catalog index — crawler/screen-reader layer under the Alpine grid.
      Clip-based hiding (not display:none) so the links stay in the
      accessibility tree and are followed by crawlers. */
.cs-ssr-index {
   position: absolute;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}