/* -------------------------------------------------------------------------------------------------
   claude-multisession documentation site.

   One hand-written stylesheet, no theme CSS, no web fonts, no CDN. Light and dark are both real:
   the palette lives in custom properties and prefers-color-scheme swaps it.

   NO PAGE RUNS SCRIPT. This comment has now been true, then false, then true again: the interactive
   standards selector was the single exception, and it left with the standards in the split. The
   narrow-screen nav below still refuses a script on purpose -- see the note at the media query.
   Each time this claim changed it was corrected in the same commit, because a false comment about a
   control is precisely the defect these documents are about.

   The documents this styles carry long PowerShell command lines and wide tables, so the layout is
   built so that WIDE CONTENT SCROLLS ITSELF rather than widening the page. That is why the content
   grid track is minmax(0, 1fr) and not 1fr -- a bare 1fr track takes its minimum size from its
   content, so one long <pre> would push the whole document sideways on a phone. Nothing here uses
   overflow-x: hidden on the body to paper over that: hiding the symptom would also hide the next
   element that overflows.
   ------------------------------------------------------------------------------------------------- */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-code: #f4f5f7;
  --fg: #1f2328;
  --fg-muted: #596069;
  --border: #d7dce1;
  --border-strong: #b9c0c8;
  --accent: #0b5fa5;
  --accent-soft: #eaf1f8;
  --focus: #0b5fa5;

  --code-comment: #6a737d;
  --code-string: #0a6640;
  --code-keyword: #8a3b0b;
  --code-literal: #0b5fa5;

  /* MEASURED, NOT CHOSEN BY EYE, and `ch` is why the old value read wider than it looked. `ch` is
     the advance width of "0", which in this stack is wider than the average lowercase letter, so
     78ch rendered as 85 average characters on a 1280px viewport -- ten above the 75 that typographic
     guidance treats as the top of the comfortable range. 66ch measures at roughly 72. Re-measure
     against a real paragraph rather than trusting the unit: append a hidden nowrap span of a-z to a
     paragraph, divide its width by 26, and divide the paragraph width by that. */
  --measure: 66ch;
  --content-max: 62rem;
  --sidebar-width: 15rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --bg-soft: #1b1f25;
    --bg-code: #1b1f25;
    --fg: #d6dbe1;
    --fg-muted: #98a1ab;
    --border: #2b313a;
    --border-strong: #3b434e;
    --accent: #82b6e8;
    --accent-soft: #1d2733;
    --focus: #82b6e8;

    --code-comment: #8a939d;
    --code-string: #8fd0a8;
    --code-keyword: #e0a878;
    --code-literal: #9ec9ef;
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Focus is always visible, and never removed. Keyboard navigation of a 14-document sidebar is the
   normal case here, not an accessibility afterthought. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.site-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-repo-link {
  font-size: 0.875rem;
}

/* ---------- layout ---------- */

.layout {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* ---------- sidebar ---------- */

.site-nav {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.75rem 0 2rem;
  font-size: 0.9rem;
  border-right: 1px solid var(--border);
  padding-right: 1rem;
}

.nav-heading {
  margin: 1.5rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0;
}

.nav-link {
  display: block;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.4;
}

.nav-link:hover {
  background: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The current page is marked by weight, colour AND a rule, so it survives a greyscale screen and a
   colour-blind reader. No glyph is used as the marker. */
.nav-link.is-current {
  font-weight: 600;
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.nav-link.is-external {
  color: var(--fg-muted);
}

.nav-link.is-external:hover {
  color: var(--accent);
}

/* ---------- content ---------- */

.page {
  min-width: 0;
  padding: 1.75rem 0 4rem;
}

.page-content {
  max-width: var(--content-max);
  overflow-wrap: break-word;
}

/* Prose gets a comfortable measure; code blocks and tables are allowed the full column, because
   squeezing a wide table to 78ch only means scrolling it further. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > dl,
.page-content > blockquote,
.page-content > h1,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > h5,
.page-content > h6 {
  max-width: var(--measure);
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  line-height: 1.25;
  overflow-wrap: break-word;
  scroll-margin-top: 1rem;
}

.page-content h1 {
  margin: 0 0 1.25rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page-content h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.page-content h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 650;
}

.page-content h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.page-content h5,
.page-content h6 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.page-content p {
  margin: 0 0 1rem;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.page-content li {
  margin: 0.25rem 0;
}

.page-content li > ul,
.page-content li > ol {
  margin: 0.25rem 0;
}

.page-content blockquote {
  margin: 1.25rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
}

.page-content blockquote > :last-child {
  margin-bottom: 0;
}

.page-content hr {
  height: 0;
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content strong {
  font-weight: 650;
}

/* ---------- code ---------- */

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

.page-content code {
  font-size: 0.875em;
  overflow-wrap: break-word;
}

/* Inline code only. The :not() keeps this off the <code> inside a highlighted block, which would
   otherwise get a second background and a second border. */
.page-content :not(pre) > code {
  padding: 0.12em 0.35em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: break-spaces;
}

.page-content pre {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  max-width: 100%;
  overflow-x: auto;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 4;
}

.page-content pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
  white-space: pre;
}

/* Rouge wraps each block in .highlighter-rouge > .highlight > pre. Cap the wrapper so a long
   command line cannot widen the column. */
.page-content .highlighter-rouge,
.page-content .highlight {
  max-width: 100%;
}

.page-content .highlight {
  background: none;
}

.page-content .highlight pre {
  margin: 0;
}

.page-content div.highlighter-rouge {
  margin: 0 0 1.25rem;
}

.page-content div.highlighter-rouge > .highlight > pre {
  margin: 0;
}

/* A restrained Rouge palette. Deliberately few classes: the point is to make comments recede and
   strings readable, not to repaint the code. */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs,
.highlight .cd,
.highlight .cp {
  color: var(--code-comment);
  font-style: italic;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr {
  color: var(--code-string);
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .kv {
  color: var(--code-keyword);
}

.highlight .nb,
.highlight .nt,
.highlight .nv,
.highlight .na,
.highlight .vg,
.highlight .vi,
.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo {
  color: var(--code-literal);
}

/* Rouge marks anything its lexer cannot place as .err, and the stock themes give that a red
   background. These documents are full of shell fragments that lex imperfectly, so a wall of red
   would be noise about the highlighter rather than information about the code. */
.highlight .err {
  color: inherit;
  background: none;
}

/* ---------- tables ---------- */

/* kramdown emits a bare <table> with no wrapper element, and nothing wraps one after the fact, so
   the table itself is made the scroll container. width: max-content lets it size to its content and
   max-width caps it at the column, which is what makes it scroll instead of the page.

   The justification has survived a reversal worth recording. It rested on nothing running a script;
   that became false when the standards selector shipped, and true again when the standards left. The
   rule does not depend on it either way: a table has to scroll on its own because kramdown wraps
   none of them, and wrapping them from script would make every page's layout depend on a script the
   page does not otherwise need. */
.page-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.page-content th,
.page-content td {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.page-content th {
  background: var(--bg-soft);
  font-weight: 650;
}

.page-content tbody tr:nth-child(even) td {
  background: var(--bg-soft);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.site-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.footer-line {
  margin: 0;
}

/* ---------- on-this-page contents ---------- */

/* Built at build time by _layouts/default.html, not by a script, for the reason stated at the narrow
   screens comment below: the list has to be complete in the served HTML.

   It is deliberately quiet. This block sits between a reader and the document they asked for, so it
   is set at the small size, without the accent, and reads as apparatus rather than as content. The
   left rule is the only thing marking it, matching the sidebar's current-page treatment. */
.page-toc {
  margin: 1.75rem 0 2.5rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
  max-width: var(--measure);
}

.page-toc-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Two columns on a wide viewport: a fourteen-heading list is otherwise a screen of its own, which
     is the scrolling problem this block exists to shorten. `columns` is used rather than a grid
     because the items are a single flow whose order stays top-to-bottom within each column, and it
     collapses to one column on its own when the width is not there. */
  columns: 2;
  column-gap: 2rem;
}

.page-toc-list li {
  margin: 0 0 0.3rem;
  /* Keeps a wrapped two-line entry from being split across the column break. */
  break-inside: avoid;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.page-toc-list a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-toc-list a:hover,
.page-toc-list a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- narrow screens ---------- */

/* Under roughly 900px the sidebar stops being a sidebar and becomes a top nav: one column, groups
   laid out as wrapped rows above the content. No script here, no toggle -- a collapsed menu that
   needs JavaScript is one more thing that can be wired and inert.

   That refusal still stands, and the standards selector was never an exception to it -- it left in
   the split, and no page on this site runs a script now. The nav was refused because script would
   have been THE ONLY WAY TO REACH THE LINKS. The selector was allowed because the answer it
   filtered was complete before any script ran. If a future feature cannot say that second sentence
   about itself, it does not get a script either. */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 1rem;
  }

  .site-nav {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 1rem 0 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .nav-heading {
    margin: 1rem 0 0.3rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }

  .nav-link {
    margin-left: 0;
    padding: 0.2rem 0.5rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-soft);
  }

  .nav-link.is-current {
    border-left: 0;
    border-bottom-color: var(--accent);
  }

  .page {
    padding: 1.5rem 0 3rem;
  }

  .page-content h1 {
    font-size: 1.6rem;
  }

  .page-content h2 {
    font-size: 1.25rem;
    margin-top: 2.25rem;
  }

  /* One column on a phone. Two columns of jump links at this width produce entries two or three
     words wide, and this is the viewport where the contents block earns the most: the longest
     document is 37 screens here against 26 on a desktop. */
  .page-toc-list {
    columns: 1;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .page-content pre {
    font-size: 0.8rem;
    padding: 0.7rem 0.75rem;
  }
}

/* ---------- print ---------- */

@media print {
  .site-nav,
  .site-header,
  .site-footer,
  .skip-link {
    display: none;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .page-content {
    max-width: none;
  }

  .page-content pre {
    white-space: pre-wrap;
    word-break: break-word;
  }

  a {
    color: inherit;
  }
}