/* Learn-code: code with explanations revealed inline — "quiet editorial" style.
   Notes are margin annotations (slim accent rule + barely-there neutral
   surface), NOT alert boxes; saturated blue is reserved for the interactive
   toggles only. Everything is namespaced under .learn-code so no other code
   blocks (this post or any other) are touched. */

.learn-code {
  --lc-accent: #3182ce;          /* interactive affordances (toggles) only */
  --lc-accent-dark: #2b6cb0;
  --lc-accent-soft: #eef8ff;
  --lc-accent-line: #cfe0f0;
  --lc-rule: #4d6b94;            /* dark dashed left rule on notes */
  --lc-note-tint: #f6f8fb;       /* barely-there neutral note surface */
  --lc-note-ink: #3d4654;        /* note text */
  --lc-section-ink: #3f6ea3;     /* section header text (muted accent) */
  --lc-note-font: 'Space Mono', 'JetBrains Mono', monospace;
  margin: 1.5rem 0;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  overflow: hidden;              /* clip children to the card's rounded corners */
  background: #f1f5f9;           /* = the code surface, so no white shows at the card edges */
}

/* App-bar header — window dots + filename + our icon controls. */
.learn-code .lc-appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  /* Soft top-to-bottom sheen (lit from above), same blue family as the chips —
     small lightness travel, hue nudge interpolated in OKLCH. */
  background: linear-gradient(180deg, #f4f7fc, #e5ebf5);
  background: linear-gradient(180deg, oklch(0.97 0.012 258), oklch(0.93 0.022 264));
  border-bottom: 1px solid #e1e7f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.learn-code .lc-dots {
  display: inline-flex;
  gap: 7px;
  flex: 0 0 auto;
}

.learn-code .lc-dots i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.learn-code .lc-dots i:nth-child(1) { background: #ec6a5e; }
.learn-code .lc-dots i:nth-child(2) { background: #f4be4f; }
.learn-code .lc-dots i:nth-child(3) { background: #61c554; }

.learn-code .lc-filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #5a6675;
}

.learn-code .lc-appbar__spacer {
  flex: 1 1 auto;
}

/* Subtext hint line under the app bar. */
.learn-code .lc-hint {
  padding: 8px 14px;
  background: #f6f8fb;
  border-bottom: 1px solid #eaeef4;
  font-family: var(--lc-note-font);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: #6b7480;
}

.learn-code .lc-hint code {
  font-style: normal;
}

.learn-code .lc-hint strong {
  font-weight: 700;
  font-style: normal;
  color: var(--lc-section-ink);
}

.learn-code .lc-hint .lc-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  background: var(--lc-accent);
  border-radius: 50%;
  vertical-align: middle;
}

.learn-code .lc-hint .lc-all-link {
  font: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--lc-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Section group — a header + the lines it covers. Used only for spacing; the
   grouping is signalled by the gradient header bar, not a left rail. */
.learn-code .lc-sgroup {
  display: block;
  margin: 14px 0 0;
}

.learn-code .lc-sgroup:first-child {
  margin-top: 0;
}

.learn-code .lc-sgroup .lc-section {
  margin-top: 0;   /* the group already spaces sections apart */
}

.learn-code.is-codeonly .lc-sgroup {
  margin: 0;
}

.learn-code .lc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  color: #27408b;
  background: linear-gradient(180deg, #eef3fc, #dbe6fa);
  background: linear-gradient(180deg, oklch(0.95 0.04 250), oklch(0.88 0.07 270));
  border: 1px solid #c5d4f0;
  border: 1px solid oklch(0.82 0.08 268);
  border-radius: 7px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.learn-code .lc-icon i {
  font-size: 15px;
  line-height: 1;
}

.learn-code .lc-icon:hover,
.learn-code .lc-icon:focus {
  border-color: #b3c6ec;
  border-color: oklch(0.78 0.09 265);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.08);
}

.learn-code .lc-icon[aria-expanded="true"],
.learn-code .lc-icon[aria-pressed="true"] {
  color: var(--lc-accent-dark);
  background: linear-gradient(180deg, #e4ecfb, #c9d8f6);
  background: linear-gradient(180deg, oklch(0.94 0.05 245), oklch(0.85 0.10 250));
  border-color: #9fb6e8;
  border-color: oklch(0.74 0.12 250);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.12);
}

/* "Code only" mode — hide every annotation, leaving pure highlighted code. */
.learn-code.is-codeonly .lc-section,
.learn-code.is-codeonly .lc-toggle,
.learn-code.is-codeonly .lc-note {
  display: none !important;
}

.learn-code.is-codeonly .lc-all {
  display: none;   /* nothing to reveal while in code-only mode */
}

/* Code surface — reuses the site's .highlight palette/font. Square top: the
   card's rounded corners are clipped by .learn-code's overflow:hidden. */
.learn-code__code.highlight {
  border-radius: 0;
  overflow-x: auto;
  margin: 0;   /* no trailing margin → no gap above the card's bottom edge */
}

.learn-code .lc-pre {
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;   /* override Bulma's default pre rounding — flush in the card */
}

.learn-code .lc-pre code {
  background: transparent;
  padding: 0;
  border: 0;
  font-family: inherit;
}

.learn-code .lc-line {
  display: block;
  white-space: pre;
}

.learn-code .lc-line:empty::after {
  content: "\00a0";
}

/* ── Diff annotations: added / removed / modified lines (git-style) ────────── */
.learn-code .lc-line--added,
.learn-code .lc-line--removed,
.learn-code .lc-line--modified {
  position: relative;
  margin: 0 -16px;     /* bleed the tint into .lc-pre's 16px side padding (full row) */
  padding: 0 16px;     /* keep code aligned with un-marked lines */
}

.learn-code .lc-line--added    { background: rgba(46, 160, 67, 0.11); box-shadow: inset 3px 0 0 #2ea043; }
.learn-code .lc-line--modified { background: rgba(252, 228, 120, 0.53); box-shadow: inset 3px 0 0 #d99e00; }
.learn-code .lc-line--removed  {
  background: rgba(248, 81, 73, 0.10);
  box-shadow: inset 3px 0 0 #f85149;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 81, 73, 0.55);
  opacity: 0.72;       /* removed code reads as on its way out */
}

/* Gutter glyph sits in the left padding — not selectable, never copied. */
.learn-code .lc-line--added::before,
.learn-code .lc-line--removed::before,
.learn-code .lc-line--modified::before {
  position: absolute;
  left: 4px;
  font-weight: 700;
  text-decoration: none;   /* don't strike the glyph on removed rows */
  -webkit-user-select: none;
  user-select: none;
}
.learn-code .lc-line--added::before    { content: "+";      color: #2ea043; }
.learn-code .lc-line--removed::before  { content: "\2212";  color: #f85149; }  /* − */
.learn-code .lc-line--modified::before { content: "~";      color: #8a6a00; }

/* Code-only mode: drop the marks, and drop removed lines entirely, so what's
   left is exactly the final file. */
.learn-code.is-codeonly .lc-line--removed { display: none; }
.learn-code.is-codeonly .lc-line--added,
.learn-code.is-codeonly .lc-line--modified {
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.learn-code.is-codeonly .lc-line--added::before,
.learn-code.is-codeonly .lc-line--modified::before { content: none; }

/* The `+` affordance at the end of an annotated line — a small bead that shares
   the section chip's lit-from-above gradient, deepening when its note opens. */
.learn-code .lc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 10px;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #27408b;
  background: linear-gradient(180deg, #eef3fc, #dbe6fa);
  background: linear-gradient(180deg, oklch(0.95 0.04 250), oklch(0.88 0.07 270));
  border: 1px solid #c5d4f0;
  border: 1px solid oklch(0.82 0.08 268);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.learn-code .lc-toggle:hover,
.learn-code .lc-toggle:focus {
  border-color: #b3c6ec;
  border-color: oklch(0.78 0.09 265);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.08);
}

.learn-code .lc-toggle[aria-expanded="true"] {
  color: var(--lc-accent-dark);
  background: linear-gradient(180deg, #e4ecfb, #c9d8f6);
  background: linear-gradient(180deg, oklch(0.94 0.05 245), oklch(0.85 0.10 250));
  border-color: #9fb6e8;
  border-color: oklch(0.74 0.12 250);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.12);
}

/* Section headers — flat and minimal at rest (icon + label + chevron in a
   muted accent), with only a faint hover wash. No box, no border. */
.learn-code .lc-section {
  display: block;
  white-space: normal;
  margin: 16px 0 4px;
}

.learn-code .lc-section:first-child {
  margin-top: 0;
}

.learn-code .lc-section__tab,
.learn-code .lc-section__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lc-note-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #27408b;                       /* dark end of the same hue, so the label belongs to the chip */
  /* Small chip → small lightness travel (~8%), top-to-bottom, lit from above.
     Hue nudges blue → periwinkle as it darkens; interpolated in OKLCH to avoid
     sRGB's muddy midtone. sRGB hex first as the ~5% fallback. */
  background: linear-gradient(180deg, #eef3fc, #dbe6fa);
  background: linear-gradient(180deg, oklch(0.95 0.04 250), oklch(0.88 0.07 270));
  border: 1px solid #c5d4f0;            /* a touch darker than the bottom stop */
  border: 1px solid oklch(0.82 0.08 268);
  border-radius: 6px;
  padding: 4px 12px;                    /* trimmed 1px to offset the new border */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);  /* hairline top highlight crisps the edge */
}

.learn-code .lc-section__tab {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.learn-code .lc-section__tab:hover,
.learn-code .lc-section__tab:focus {
  border-color: #b3c6ec;
  border-color: oklch(0.78 0.09 265);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.08);
}

/* Open/active (C): same hue, more saturation + a slightly darker border and a
   faint lift — differentiated by depth, not a new color. */
.learn-code .lc-section__tab[aria-expanded="true"] {
  color: var(--lc-accent-dark);
  background: linear-gradient(180deg, #e4ecfb, #c9d8f6);
  background: linear-gradient(180deg, oklch(0.94 0.05 245), oklch(0.85 0.10 250));
  border-color: #9fb6e8;
  border-color: oklch(0.74 0.12 250);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(29, 58, 138, 0.12);
}

/* Chevron after the label — darker than the label so it's a clear, visible
   disclosure cue; rotates down when open. */
.learn-code .lc-section__caret {
  font-size: 13px;
  line-height: 1;
  color: var(--lc-accent-dark);
  opacity: 1;
  transition: transform 0.15s ease;
}

.learn-code .lc-section__tab[aria-expanded="true"] .lc-section__caret {
  transform: rotate(90deg);
}

/* The explanation, revealed inline — a quiet margin note: proportional prose
   with a slim accent rule on the left, no fill or box. It reads as commentary
   woven into the code rather than an alert. */
.learn-code .lc-note {
  display: block;
  white-space: normal;            /* override the <pre> mono wrapping */
  font-family: var(--lc-note-font);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lc-note-ink);
  background: transparent;
  border-left: 2px dashed var(--lc-rule);
  margin: 5px 0 9px;
  padding: 1px 0 1px 13px;
  font-weight: 400;
  font-style: italic;   /* explanation prose reads as commentary */
}

/* Line notes hang slightly in from the margin, so they read as attached to the
   line they explain. Section notes head a whole section and stay flush-left. */
.learn-code .lc-note:not(.lc-section__note) {
  margin-left: 26px;
}

.learn-code .lc-note[hidden] {
  display: none;
}

/* Beat syntax.css's `.highlight { font-weight: normal !important }`. */
.learn-code .lc-note strong {
  font-weight: 700;
}

.learn-code .lc-note em {
  font-style: italic;
}

.learn-code .lc-note code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  font-style: normal;   /* keep code upright even though the note is italic */
  background: rgba(20, 30, 50, 0.06);   /* neutral, not blue */
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Dark mode ──────────────────────────────────────────────────────────────
   The site rule `html.night-shift .highlight *` forces transparent backgrounds
   with !important inside .highlight; these higher-specificity overrides restore
   the quiet annotation styling in dark. */
:root.night-shift .learn-code .lc-note,
html.night-shift .learn-code .lc-note {
  background: transparent !important;
  border-left-color: #5f7fa3 !important;
  color: #c7cfdb !important;
}

:root.night-shift .learn-code .lc-note code,
html.night-shift .learn-code .lc-note code {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #dfe6f0 !important;
}

/* Dark mode: rebuild the chip relationship rather than darken the light recipe.
   Fill sits a clear step ABOVE the editor bg (with real blue chroma so it still
   reads as the "blue tab"); the border is LIGHTER than the fill so the edge
   catches light; the top highlight drops to ~8%; labels are light periwinkle. */
:root.night-shift .learn-code .lc-toggle,
html.night-shift .learn-code .lc-toggle {
  background: linear-gradient(180deg, #33406a, #2a355a) !important;
  background: linear-gradient(180deg, oklch(0.42 0.07 265), oklch(0.36 0.07 265)) !important;
  border-color: #56689c !important;                 /* lighter than the fill */
  border-color: oklch(0.55 0.09 262) !important;
  color: #bcc8f2 !important;                         /* light periwinkle, in the chip's hue family */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

:root.night-shift .learn-code .lc-toggle:hover,
:root.night-shift .learn-code .lc-toggle:focus,
html.night-shift .learn-code .lc-toggle:hover,
html.night-shift .learn-code .lc-toggle:focus {
  border-color: #6478b6 !important;
  border-color: oklch(0.60 0.09 262) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

:root.night-shift .learn-code .lc-toggle[aria-expanded="true"],
html.night-shift .learn-code .lc-toggle[aria-expanded="true"] {
  background: linear-gradient(180deg, #3f4f86, #36447a) !important;
  background: linear-gradient(180deg, oklch(0.48 0.09 262), oklch(0.42 0.09 262)) !important;
  border-color: #6f83c4 !important;
  border-color: oklch(0.62 0.10 262) !important;
  color: #d4ddff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(90, 120, 210, 0.18) !important;
}

:root.night-shift .learn-code .lc-section__tab,
:root.night-shift .learn-code .lc-section__label,
html.night-shift .learn-code .lc-section__tab,
html.night-shift .learn-code .lc-section__label {
  background: linear-gradient(180deg, #33406a, #2a355a) !important;
  background: linear-gradient(180deg, oklch(0.42 0.07 265), oklch(0.36 0.07 265)) !important;
  border-color: #56689c !important;                 /* lighter than the fill */
  border-color: oklch(0.55 0.09 262) !important;
  color: #bcc8f2 !important;                         /* light periwinkle, in the chip's hue family */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

:root.night-shift .learn-code .lc-section__tab:hover,
:root.night-shift .learn-code .lc-section__tab:focus,
html.night-shift .learn-code .lc-section__tab:hover,
html.night-shift .learn-code .lc-section__tab:focus {
  border-color: #6478b6 !important;
  border-color: oklch(0.60 0.09 262) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

:root.night-shift .learn-code .lc-section__tab[aria-expanded="true"],
html.night-shift .learn-code .lc-section__tab[aria-expanded="true"] {
  background: linear-gradient(180deg, #3f4f86, #36447a) !important;
  background: linear-gradient(180deg, oklch(0.48 0.09 262), oklch(0.42 0.09 262)) !important;
  border-color: #6f83c4 !important;
  border-color: oklch(0.62 0.10 262) !important;
  color: #d4ddff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(90, 120, 210, 0.18) !important;
}

:root.night-shift .learn-code .lc-section__caret,
html.night-shift .learn-code .lc-section__caret {
  color: #cfe0f5 !important;  /* visible chevron on dark */
}

/* Diff lines in dark mode. `!important` on background beats the night-shift
   `.highlight * { background: transparent !important }` reset. */
:root.night-shift .learn-code .lc-line--added,
html.night-shift .learn-code .lc-line--added    { background: rgba(46, 160, 67, 0.18) !important;  box-shadow: inset 3px 0 0 #3fb950; }
:root.night-shift .learn-code .lc-line--modified,
html.night-shift .learn-code .lc-line--modified {
  background: #fce478 !important;     /* same yellow as light (rgb 252,228,120), opaque so it stays readable on dark */
  box-shadow: inset 3px 0 0 #a87c00;
  color: #2a2410 !important;          /* dark text so the code reads on the yellow */
}
/* Force the (light/orange) syntax tokens dark on this row so every glyph reads. */
:root.night-shift .learn-code .lc-line--modified span,
html.night-shift .learn-code .lc-line--modified span { color: #2a2410 !important; }
:root.night-shift .learn-code .lc-line--removed,
html.night-shift .learn-code .lc-line--removed  {
  background: rgba(248, 81, 73, 0.16) !important;
  box-shadow: inset 3px 0 0 #ff7b72;
  text-decoration-color: rgba(255, 123, 114, 0.6);
}
:root.night-shift .learn-code .lc-line--added::before,
html.night-shift .learn-code .lc-line--added::before    { color: #3fb950; }
:root.night-shift .learn-code .lc-line--removed::before,
html.night-shift .learn-code .lc-line--removed::before  { color: #ff7b72; }
:root.night-shift .learn-code .lc-line--modified::before,
html.night-shift .learn-code .lc-line--modified::before { color: #6b5400; }


:root.night-shift .learn-code .lc-icon,
html.night-shift .learn-code .lc-icon {
  background: linear-gradient(180deg, #33406a, #2a355a);
  background: linear-gradient(180deg, oklch(0.42 0.07 265), oklch(0.36 0.07 265));
  border-color: #56689c;
  border-color: oklch(0.55 0.09 262);
  color: #bcc8f2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root.night-shift .learn-code .lc-icon:hover,
:root.night-shift .learn-code .lc-icon:focus,
html.night-shift .learn-code .lc-icon:hover,
html.night-shift .learn-code .lc-icon:focus {
  border-color: #6478b6;
  border-color: oklch(0.60 0.09 262);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

:root.night-shift .learn-code .lc-icon[aria-expanded="true"],
:root.night-shift .learn-code .lc-icon[aria-pressed="true"],
html.night-shift .learn-code .lc-icon[aria-expanded="true"],
html.night-shift .learn-code .lc-icon[aria-pressed="true"] {
  background: linear-gradient(180deg, #3f4f86, #36447a);
  background: linear-gradient(180deg, oklch(0.48 0.09 262), oklch(0.42 0.09 262));
  border-color: #6f83c4;
  border-color: oklch(0.62 0.10 262);
  color: #d4ddff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(90, 120, 210, 0.18);
}

/* App bar + hint in dark mode. */
:root.night-shift .learn-code,
html.night-shift .learn-code {
  background: #1e1e2e;                  /* = dark code surface; stops the light card bg peeking at the rounded edges */
  border-color: rgba(0, 0, 0, 0.35);   /* dark edge — no light/white outline on the card */
}

:root.night-shift .learn-code .lc-appbar,
html.night-shift .learn-code .lc-appbar {
  background: linear-gradient(180deg, #242c3c, #1a202d);
  background: linear-gradient(180deg, oklch(0.30 0.018 262), oklch(0.25 0.02 264));
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;   /* cancel the base light-mode top highlight (it draws a white line on dark) */
}

:root.night-shift .learn-code .lc-filename,
html.night-shift .learn-code .lc-filename {
  color: #9aa6b6;
}

:root.night-shift .learn-code .lc-hint,
html.night-shift .learn-code .lc-hint {
  background: #191f2b;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #9aa6b6;
}

:root.night-shift .learn-code .lc-hint strong,
html.night-shift .learn-code .lc-hint strong {
  color: #a8c7ea;
}