/* ============================================================
   notes.shvbsle.in: shared design system
   Warm paper, serif prose, live ink. Light + dark.
   No framework: plain CSS custom properties + media queries.
   ============================================================ */

:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --hairline: rgba(11, 11, 11, 0.10);

  --scrub: #006300;
  --scrub-bg: rgba(0, 99, 0, 0.07);
  --derived: #1c5cab;
  --derived-bg: rgba(28, 92, 171, 0.07);
  --good: #0ca30c;
  --bad: #d03b3b;

  --serif: "Charter", "Iowan Old Style", "Palatino", "Georgia", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --measure: 43rem;
  --breakout: 66rem;
  --note-hl: rgba(230, 161, 0, 0.20);
  --header-h: 2.75rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1b1b1d;
  --page: #161617;
  --ink: #ececea;
  --ink-2: #b6b4ae;
  --muted: #8b8a84;
  --grid: #2d2d2e;
  --axis: #45444a;
  --hairline: rgba(255, 255, 255, 0.10);

  --scrub: #5fd15f;
  --scrub-bg: rgba(95, 209, 95, 0.10);
  --derived: #7ab2f5;
  --derived-bg: rgba(122, 178, 245, 0.10);
  --good: #5fd15f;
  --bad: #ef6a6a;
  --note-hl: rgba(255, 196, 64, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1b1b1d;
    --page: #161617;
    --ink: #ececea;
    --ink-2: #b6b4ae;
    --muted: #8b8a84;
    --grid: #2d2d2e;
    --axis: #45444a;
    --hairline: rgba(255, 255, 255, 0.10);

    --scrub: #5fd15f;
    --scrub-bg: rgba(95, 209, 95, 0.10);
    --derived: #7ab2f5;
    --derived-bg: rgba(122, 178, 245, 0.10);
    --good: #5fd15f;
    --bad: #ef6a6a;
    --note-hl: rgba(255, 196, 64, 0.22);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background 0.15s ease, color 0.15s ease;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: 2.3rem; margin: 1.2rem 0 0.4rem; letter-spacing: -0.01em; }
h2 { font-size: 1.65rem; margin: 3.2rem 0 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--grid); scroll-margin-top: calc(var(--header-h) + 1rem); }
h3 { font-size: 1.25rem; margin: 2.2rem 0 0.6rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
/* the h2 divider treatment is for headings BETWEEN sections; the article's
   very first heading sits right under the post-header, so its big top margin
   and rule-line would just be dead space with nothing above to divide from */
.layout-content > section:first-of-type > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
p { margin: 0 0 1.05em; }
a { color: var(--derived); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
strong { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--grid); margin: 2.5rem 0; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--surface); border: 1px solid var(--grid); padding: 0.05em 0.35em; border-radius: 4px; }

.byline { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 0.2rem; font-family: var(--sans); }
.byline a { color: inherit; }
.dek { font-size: 1.12rem; color: var(--ink-2); font-style: italic; margin: 0.6rem 0 1.4rem; }

/* ---------- site chrome ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grid);
  font-family: var(--sans);
}
.site-header nav { display: flex; align-items: center; gap: 0.9rem; font-size: 0.8rem; }
.site-header nav a { color: var(--ink-2); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--grid);
  border-radius: 6px;
  background: var(--page);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--axis); }
.theme-toggle svg { width: 13px; height: 13px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.site-footer {
  max-width: var(--measure);
  margin: 4rem auto 3rem;
  padding: 1.5rem 1.25rem 0;
  border-top: 1px solid var(--grid);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.site-footer a { color: var(--muted); }

/* ---------- home page / blog-roll ----------
   The home page uses the same .layout grid as posts (empty toc rail on the
   left, annotations on the right) so its dek can carry margin notes. Its h1
   sits directly inside .layout-content, hence the first-child spacing here. */

.layout-content > h1:first-child { margin-top: 2.2rem; }

.blogroll { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.blogroll li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--grid);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.blogroll li:last-child { border-bottom: 1px solid var(--grid); }
.blogroll .post-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.blogroll .post-title:hover { color: var(--derived); }
.blogroll .post-meta { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.blogroll .post-desc { color: var(--ink-2); font-size: 0.97rem; margin-top: 0.15rem; }
.blogroll .post-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--scrub);
  background: var(--scrub-bg);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin-right: 0.4em;
}

/* ---------- post header ----------
   Deliberately NOT a grid item: a post's <header class="post-header"> sits
   above .layout as an ordinary centered block, the same way the reference
   site's header sits above its notes-positioning container. Making it part
   of the three-column grid is what caused it to render invisibly (grid
   auto-placement for an item with one axis fixed and one auto is fragile
   and put it underneath the article instead of above it). Do not move it
   back inside .layout. */

.post-header {
  max-width: var(--measure);
  margin: 2.2rem auto 2.4rem;
  padding: 0 1.25rem;
}

/* ---------- post layout: toc | content | notes ---------- */

.layout {
  display: grid;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
  gap: 0 2.2rem;
  grid-template-columns: 210px minmax(0, var(--measure)) 210px;
  grid-template-areas: "toc content notes";
  justify-content: center;
  /* stretch (the default), NOT start: .layout-toc must be as tall as
     .layout-content for its sticky nav to have room to stay pinned while
     you scroll the article. A short container gives position:sticky
     nowhere to stick past, and the nav just scrolls away with the page. */
  align-items: stretch;
}

.layout-content { grid-area: content; min-width: 0; }
.layout-notes { grid-area: notes; position: relative; }
.layout-toc { grid-area: toc; }

.layout-toc nav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  font-family: var(--sans);
  font-size: 0.83rem;
}
.layout-toc .toc-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.layout-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--grid); }
.layout-toc li { margin: 0; }
.layout-toc a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.35;
}
.layout-toc li.sub a { padding-left: 1.5rem; font-size: 0.94em; }
.layout-toc a:hover { color: var(--ink); }
.layout-toc a.active { color: var(--derived); border-left-color: var(--derived); font-weight: 600; }

/* mobile/tablet collapsible TOC (same <nav>, CSS repositions it) */
.toc-details { display: none; }
.toc-details summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--grid);
  border-radius: 8px;
  background: var(--surface);
  list-style: none;
}
.toc-details summary::-webkit-details-marker { display: none; }
.toc-details[open] summary { border-radius: 8px 8px 0 0; border-bottom: none; }
.toc-details .toc-inner {
  border: 1px solid var(--grid);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.4rem 0.9rem 0.7rem;
  background: var(--surface);
}
.toc-details .toc-inner nav { position: static; }
.toc-details .toc-inner ul { border-left: none; }
.toc-details .toc-inner a { padding-left: 0.4rem; }
.toc-details .toc-inner li.sub a { padding-left: 1.1rem; }

/* ---------- sidenotes / annotations ----------
   Markup: <span class="sn"><span class="sn-anchor">annotated text</span
           ><button class="sn-ref"></button><span class="sn-body">note…</span></span>
   The marker glyph shown in .sn-ref defaults to ✦ and is set by sidenotes.js
   from `data-sn-marker` on <body> (see CLAUDE.md; configurable per page).
   Hovering the anchor text, the marker, or the margin note highlights all
   three together via the shared .sn-hot class; nothing is highlighted at rest. */

.sn-anchor {
  border-radius: 2px;
  transition: background-color 0.12s ease;
}
.sn-anchor.sn-hot { background: var(--note-hl); }

.sn-ref {
  font-family: var(--sans);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: var(--scrub);
  background: none;
  border: none;
  padding: 0 1px;
  cursor: pointer;
  font-weight: 700;
}
.sn-ref.sn-hot { color: var(--ink); }

.sn-body {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.sn-tag {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--scrub);
  margin-right: 0.4em;
}

/* inline (mobile/tablet) sidenote presentation: hidden until toggled */
.sn-body.inline {
  display: none;
  margin: 0.5rem 0 0.9rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--grid);
  border-radius: 6px;
}
.sn-body.inline.open { display: block; }

/* margin (desktop) sidenote presentation: absolutely placed clones */
.margin-note {
  position: absolute;
  left: 0;
  width: 100%;
  padding-right: 0.5rem;
  border-left: 2px solid var(--grid);
  padding-left: 0.8rem;
  cursor: default;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.margin-note.sn-hot {
  border-left-color: var(--scrub);
  background: var(--note-hl);
}

@media (max-width: 1099px) {
  .layout {
    grid-template-columns: 190px minmax(0, var(--measure));
    grid-template-areas: "toc content";
  }
  .layout-notes { display: none; }
}

@media (max-width: 800px) {
  .layout {
    display: block;
    max-width: var(--measure);
    padding: 0 1.1rem 4rem;
  }
  .layout-toc { display: none; }
  .toc-details { display: block; margin: 1.4rem 0 2rem; }
}

/* ---------- explorable widgets (t-var / t-out) ---------- */

.t-var {
  display: inline-block;
  color: var(--scrub);
  background: var(--scrub-bg);
  border-bottom: 1px dashed var(--scrub);
  border-radius: 3px 3px 0 0;
  padding: 0 0.25em;
  font-family: var(--sans);
  font-weight: 600;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.t-var:focus-visible { outline: 2px solid var(--scrub); outline-offset: 1px; }
.t-var input {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--scrub);
  border-radius: 3px;
  width: 6.5em;
  padding: 0 0.2em;
}

.t-out {
  color: var(--derived);
  background: var(--derived-bg);
  border-radius: 3px;
  padding: 0 0.25em;
  font-family: var(--sans);
  font-weight: 600;
  cursor: help;
}

.widget {
  margin: 1.6rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--grid);
  border-radius: 10px;
  font-family: var(--sans);
}
.widget .widget-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: baseline; font-size: 0.95rem; }
.widget .widget-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }

.try {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-2);
  background: var(--surface);
  border-left: 3px solid var(--scrub);
  padding: 0.5rem 0.8rem;
  margin: 1.2rem 0;
  border-radius: 0 6px 6px 0;
}

.takeaway {
  background: var(--derived-bg);
  border-left: 3px solid var(--derived);
  padding: 0.7rem 0.9rem;
  border-radius: 0 6px 6px 0;
  margin: 1.4rem 0;
}
.takeaway strong { color: var(--derived); }

/* ---------- planes diagram (.pw): control vs data plane ---------- */

.pw { font-family: var(--sans); font-size: 0.88rem; }

.pw-plane {
  border: 1px solid var(--axis);
  border-radius: 10px;
  padding: 0.7rem 0.9rem 0.9rem;
}
.pw-control { background: var(--derived-bg); }
.pw-data { background: var(--scrub-bg); }

.pw-plane-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
  margin-bottom: 0.55rem;
}
.pw-control .pw-plane-label { color: var(--derived); }
.pw-data .pw-plane-label { color: var(--scrub); }

.pw-boxes { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.pw-box {
  flex: 1 1 8rem;
  min-width: 7rem;
  background: var(--surface);
  border: 1px solid var(--axis);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
}
.pw-box-title { font-weight: 700; color: var(--ink); }
.pw-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }

.pw-divider {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.55rem 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pw-divider::before, .pw-divider::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--axis);
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.35rem; }
}