/* ==========================================================================
   idiomatic C# — the reader's stylesheet.
   Hand-written, served from public/style.css; the build never touches it.
   Page: https://idiomatic-csharp.<account>.workers.dev
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  /* Surfaces: near-black with a cold cast, panels one step up. */
  --bg: #0f1114;
  --panel: #14171b;
  --panel-2: #191d22;
  --panel-3: #1f242a;

  /* Ink */
  --ink: #e7eaee;
  --ink-2: #a9b1bb;
  --ink-3: #737d89;
  --ink-4: #4d555e;

  /* Lines */
  --line: #21262c;
  --line-2: #2c333a;
  --line-3: #3a434c;

  /* Accents. The corpus is Microsoft's, so the family colour is the violet
     .NET leans on, lifted until it reads on a black surface. */
  --accent: #a78bfa;
  --accent-dim: #7c62d6;
  --accent-wash: rgba(167, 139, 250, 0.12);

  --error: #f2777a;
  --warn: #e0a458;
  --info: #6fb3e0;
  --ok: #7fcf9a;

  --callout-note: #6fb3e0;
  --callout-tip: #7fcf9a;
  --callout-important: #a78bfa;
  --callout-warning: #e0a458;
  --callout-caution: #f2777a;

  /* Type */
  --display: 'Anybody', system-ui, sans-serif;
  --prose: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Iosevka Nerd Font Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Metrics */
  --row: 44px; /* the top bar */
  --tree: 252px;
  --rail: 252px;
  --map: 18px;
  --measure: 74ch;
  --pad: 2.5rem;

  --radius: 6px;
  --radius-s: 4px;
}

/* Any area can tint its own furniture. Kept subtle: the marker dot, the area
   link, the rule card spine. */
[data-area='language'] { --tint: #6fb3e0; }
[data-area='code-analysis'] { --tint: #e0a458; }
[data-area='core-library'] { --tint: #7fcf9a; }
[data-area='async-and-concurrency'] { --tint: #a78bfa; }
[data-area='advanced'] { --tint: #f2777a; }
[data-area='linq'] { --tint: #58c7c0; }
[data-area='dotnet-releases'] { --tint: #cfa0e8; }
:root { --tint: var(--accent); }

*, *::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(--ink);
  font: 400 16px/1.6 var(--prose);
  font-feature-settings: 'ss01' 1, 'cv05' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-wash); color: #fff; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

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

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 60;
  background: var(--panel-3);
  border: 1px solid var(--line-3);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.5rem 1rem;
  font: 500 13px/1 var(--prose);
}
.skip:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--row);
  padding: 0 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.tree__toggle {
  display: none;
  align-items: center;
  gap: 0.375rem;
  height: 28px;
  padding: 0 0.625rem;
  background: var(--panel-2);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  font: 500 12px/1 var(--prose);
  cursor: pointer;
}
.tree__toggle[aria-expanded='true'] { color: var(--ink); border-color: var(--line-3); }

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-family: var(--display);
  font-variation-settings: 'wght' 600, 'wdth' 92;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  font: 600 12px/1 var(--mono);
}
.brand__mark i { color: var(--accent); font-style: normal; }
.brand__word b { color: var(--ink-2); font-weight: 500; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font: 400 12.5px/1 var(--prose);
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--ink-4); }
.crumbs__here {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumbs__here + .crumbs__here { border-left: 1px solid var(--line-2); padding-left: 0.5rem; }

/* ---------------------------------------------------------------- search */

.find {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  width: min(340px, 38vw);
  min-width: 0;
  height: 30px;
  padding: 0 0.5rem 0 0.625rem;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
}
.find:focus-within { border-color: var(--accent-dim); background: var(--panel-2); }
.find__icon { display: grid; place-items: center; color: var(--ink-4); flex: none; }
.find__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: 400 13px/1 var(--prose);
}
.find__input::placeholder { color: var(--ink-4); }
.find__input:focus { outline: none; }
.find__input::-webkit-search-cancel-button { display: none; }
.find__key {
  flex: none;
  padding: 2px 5px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
}
.find:focus-within .find__key { opacity: 0; }

.palette {
  position: fixed;
  top: calc(var(--row) + 6px);
  right: 1rem;
  z-index: 50;
  width: min(560px, calc(100vw - 2rem));
  max-height: min(64vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}
.palette[hidden] { display: none; }
.palette__k {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.palette__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.palette__item:last-child { border-bottom: 0; }
.palette__item[aria-selected='true'] { background: var(--panel-3); }
.palette__item:hover { background: var(--panel-2); }
.palette__title { font-size: 13.5px; color: var(--ink); }
.palette__title mark { background: none; color: var(--accent); font-weight: 600; }
.palette__path {
  grid-column: 2;
  font: 400 11px/1.4 var(--mono);
  color: var(--ink-4);
  text-align: right;
  overflow-wrap: anywhere;
}
.palette__path--rule { color: var(--accent); }
.palette__where {
  grid-column: 1;
  font: 400 11.5px/1.4 var(--prose);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette__empty {
  margin: 0;
  padding: 1.25rem 0.75rem;
  color: var(--ink-3);
  font-size: 13px;
}

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

.shell {
  display: grid;
  grid-template-columns: var(--tree) minmax(0, 1fr) var(--rail) var(--map);
  align-items: start;
  min-height: calc(100vh - var(--row));
}

/* ------------------------------------------------------------------ tree */

.tree {
  position: sticky;
  top: var(--row);
  height: calc(100vh - var(--row));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem 0.75rem 3rem 1rem;
  border-right: 1px solid var(--line);
  font-size: 13px;
}
.tree__k {
  margin: 0 0 0.75rem;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tree__area { border-top: 1px solid var(--line); }
.tree__area:last-of-type { border-bottom: 1px solid var(--line); }
.tree__sum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.tree__sum::-webkit-details-marker { display: none; }
.tree__sum:hover { color: var(--ink); }
.tree__area[open] > .tree__sum { color: var(--ink); }
.tree__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tint, var(--ink-4));
  opacity: 0.85;
}
.tree__name { flex: 1; }
.tree__count {
  color: var(--ink-4);
  font: 400 11px/1 var(--mono);
}
.tree__list { margin: 0 0 0.75rem; padding: 0; list-style: none; }
/* The filter sits above a 1118 row list, so it stays put while the list moves. */
.tree__filter {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: 400 12px/1.4 var(--mono);
}
.tree__filter::placeholder { color: var(--ink-4); }
.tree__filter:focus { outline: none; border-color: var(--accent-dim); background: var(--panel-3); }
.tree__hits {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--ink-4);
  font: 400 10.5px/1 var(--mono);
}
.tree__hits:empty { display: none; }
/* A folder inside a folder: the indent is the only thing that says so. */
.tree__list--sub { margin: 0 0 0.25rem 0.7rem; }
.tree__group { margin: 0.05rem 0; }
.tree__gsum {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  border-left: 1px solid var(--line-2);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.tree__gsum::-webkit-details-marker { display: none; }
.tree__gsum:hover { color: var(--ink); border-left-color: var(--accent-dim); }
.tree__group[open] > .tree__gsum { color: var(--ink-2); }
/* Folders read as paths, so they are set in the mono face the paths are. */
.tree__gname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: -0.01em;
}
.tree__gsum > .tree__count { flex: none; font-size: 10.5px; }
.tree__gsum::before {
  content: '';
  flex: none;
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  opacity: 0.55;
  transition: transform 0.12s ease;
}
.tree__group[open] > .tree__gsum::before { transform: rotate(90deg); }
.tree__page {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border-left: 1px solid var(--line-2);
  color: var(--ink-2);
}
.tree__page:hover { background: var(--panel-2); color: var(--ink); border-left-color: var(--accent-dim); }
.tree__page[aria-current='page'] {
  background: var(--panel-2);
  color: var(--ink);
  border-left-color: var(--accent);
}
.tree__t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree__m {
  flex: none;
  color: var(--ink-4);
  font: 400 10.5px/1.4 var(--mono);
}
.tree__page[aria-current='page'] .tree__m { color: var(--tint); }

/* ------------------------------------------------------------- doc column */

/* The column is sized for code, not prose: 63rem of content sets 155
   characters at 13px Iosevka Nerd Font Mono (0.5em advance), and only 1% of
   the code lines in the corpus are longer than 101 characters. Prose keeps its
   own narrower measure inside the column, so lines stay readable while a code
   block gets every pixel the window allows. */
.doc {
  min-width: 0;
  max-width: min(100%, 68rem);
  padding: 0 var(--pad) 5rem;
  justify-self: center;
  width: 100%;
}

/* A long URL or a deep file path is content, not a layout decision: it breaks
   rather than pushing the whole page sideways. Prose may break anywhere; a link
   in a table cell only breaks when it would overflow, so an identifier like
   `dotnet/docs` keeps its shape and the column sizes to it. */
.doc a, .doc code, .rail a, .sample__path { overflow-wrap: break-word; }
.doc p a, .doc li a, .doc p code, .doc li code { overflow-wrap: anywhere; }
/* The home page is a spread, not a column: the hero and the report need room. */
html[data-wide] .doc { max-width: 1100px; }

.tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 calc(var(--pad) * -1);
  padding: 0.625rem var(--pad) 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.75rem 0.625rem;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.tab__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tint);
  opacity: 0.75;
}
.tab__name { font: 400 12.5px/1 var(--mono); color: var(--ink-2); }
.tab__area {
  font: 400 10.5px/1 var(--mono);
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc__head { padding: 2.75rem 0 2.25rem; }
.doc__area {
  margin: 0 0 0.75rem;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.doc__area a { color: var(--tint); }
.doc__area a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.doc__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wght' 580, 'wdth' 96;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc__lede {
  margin: 1rem 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- facts */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-2);
}
.facts b {
  margin-right: 0.4rem;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ rule card */

.rule {
  margin: 1.75rem 0 0;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--tint);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
}
.rule__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--line);
}
.rule__id {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.rule__sev {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--ink-2);
  font: 500 11px/1 var(--prose);
}
.rule__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 0.875rem;
  font-size: 12.5px;
  color: var(--ink-2);
}
.rule__meta b {
  margin-right: 0.4rem;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sev--error { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--line-2)); }
.sev--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line-2)); }
.sev--info { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--line-2)); }
.sev--hidden { color: var(--ink-3); }
.sev--error i, .sev--warn i, .sev--info i, .sev--hidden i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rule__sev i { display: none; }
.rule__sev.sev--error i, .rule__sev.sev--warn i, .rule__sev.sev--info i, .rule__sev.sev--hidden i { display: block; }

/* --------------------------------------------------------------- prose */

.prose {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.15em; }
.prose p { margin: 0; max-width: var(--measure); }

.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  position: relative;
  margin: 2.75rem 0 0;
  font-family: var(--display);
  font-variation-settings: 'wght' 560, 'wdth' 100;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.prose h2 {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.45rem;
}
.prose h3 { font-size: 1.2rem; }
.prose h4 { font-size: 1.0625rem; font-variation-settings: 'wght' 600, 'wdth' 100; }
.prose h5 {
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--prose);
  font-weight: 600;
}
.prose h2 + *, .prose h3 + *, .prose h4 + *, .prose h5 + * { margin-top: 0.85rem; }

.anchor {
  position: absolute;
  left: -1.25em;
  width: 1.25em;
  color: var(--ink-4);
  opacity: 0;
  font: 400 0.85em/1.68 var(--mono);
  transition: opacity 0.12s ease;
}
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.prose h4:hover .anchor,
.prose h5:hover .anchor,
.anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--accent); }

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent-dim); }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose del { color: var(--ink-3); }

.prose ul, .prose ol { margin: 0; padding-left: 1.35em; max-width: var(--measure); }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--ink-4); }
.prose li > ul, .prose li > ol { margin-top: 0.4rem; }

.prose :not(pre) > code,
.prose kbd {
  padding: 0.12em 0.36em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font: 400 0.86em/1.5 var(--mono);
  white-space: nowrap;
}
.prose kbd { border-bottom-width: 2px; color: var(--ink-2); }

.prose blockquote {
  margin: 1.5rem 0 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 2px solid var(--line-3);
  color: var(--ink-2);
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

/* tables: the wrap is added by the build, the table keeps its own rhythm */
.table-wrap { margin-top: 1.5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9063rem; }
.prose thead th {
  padding: 0.6rem 0.75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.prose tbody td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.prose tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.012); }
.prose tbody tr:hover { background: var(--panel); }
.prose td code { white-space: nowrap; }

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

.code {
  position: relative;
  margin: 1.5rem 0 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.code__lang {
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.code__copy {
  padding: 0.25rem 0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.code:hover .code__copy, .code__copy:focus-visible, .code__copy[data-copied] { opacity: 1; }
.code__copy:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel-3); }
.code__copy[data-copied] { color: var(--ok); }
.code__wrap[aria-pressed='true'] { color: var(--accent); opacity: 1; }
/* Wrapping is a reading choice, not a layout one: the block keeps its frame
   and the lines fold instead of running off the right edge. */
.code.is-wrapped pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }

.code pre {
  margin: 0;
  padding: 0.875rem 1rem 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.code code {
  font: 400 13px/1.65 var(--mono);
  color: var(--ink);
  font-variant-ligatures: contextual;
  tab-size: 4;
}
.code[data-lang=''] .code__bar { display: none; }

/* Prism, tuned to the surfaces above. Only the tokens the bundle emits. */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--ink-4); font-style: italic; }
.token.punctuation { color: #8b95a1; }
.token.keyword, .token.atrule, .token.rule { color: #c4a2ff; }
.token.string, .token.char, .token.attr-value { color: #9ed49a; }
.token.number, .token.boolean, .token.constant, .token.symbol { color: #e7b46b; }
.token.class-name, .token.namespace, .token.type { color: #6fd0c8; }
.token.function, .token.method { color: #8fb8f5; }
.token.property, .token.attr-name, .token.variable { color: #d8dee6; }
.token.operator, .token.entity, .token.url { color: #a9b1bb; }
.token.tag, .token.selector { color: #f2777a; }
.token.regex { color: #e7b46b; }
.token.important, .token.bold { font-weight: 600; }
.token.italic { font-style: italic; }

/* --------------------------------------------------------- sample refs */

.sample {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--line-3);
  background: var(--panel);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font: 400 12px/1.5 var(--mono);
}
.sample__k {
  flex: none;
  color: var(--ink-4);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sample__path {
  min-width: 0;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.sample__path:hover { color: var(--accent); }
.sample__id { color: var(--ink-4); }

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

.rail {
  position: sticky;
  top: var(--row);
  max-height: calc(100vh - var(--row));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1rem 3rem 1.25rem;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
}
.rail__group + .rail__group { margin-top: 1.75rem; }
.rail__label {
  margin: 0 0 0.625rem;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rail__meta { display: block; }
.rail__meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3125rem 0;
  border-bottom: 1px dotted var(--line);
}
.rail__meta > div:last-child { border-bottom: 0; }
.rail__meta span { color: var(--ink-4); }
.rail__meta b {
  color: var(--ink-2);
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.rail__note { margin: 0; color: var(--ink-3); line-height: 1.55; }
.rail__note a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.2em; }
.rail__note a:hover { color: var(--accent); }

.onpage { margin: 0; padding: 0; list-style: none; }
.onpage__link {
  display: block;
  padding: 0.25rem 0;
  color: var(--ink-3);
  line-height: 1.4;
  border-left: 1px solid transparent;
}
.onpage__link:hover { color: var(--ink); }
.onpage__item--3 .onpage__link { padding-left: 0.875rem; }
.onpage__item--4 .onpage__link, .onpage__item--5 .onpage__link { padding-left: 1.6rem; }
.onpage__item.is-current > .onpage__link {
  color: var(--ink);
  border-left-color: var(--accent);
  padding-left: 0.5rem;
}
.onpage__item--3.is-current > .onpage__link { padding-left: 1.375rem; }
.onpage__item--4.is-current > .onpage__link, .onpage__item--5.is-current > .onpage__link { padding-left: 2.1rem; }

/* ------------------------------------------------------------ minimap */

.map {
  position: sticky;
  top: var(--row);
  height: calc(100vh - var(--row));
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}
.map__bar {
  position: absolute;
  left: 4px;
  width: 9px;
  border-radius: 1px;
  background: var(--ink-4);
  opacity: 0.55;
}
.map__bar--h { background: var(--tint); opacity: 0.85; }
.map__bar--c { background: #6fd0c8; opacity: 0.6; }
.map__bar--t { background: var(--warn); opacity: 0.5; }
.map__bar--n { background: var(--info); opacity: 0.6; }
.map__view {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  background: rgba(167, 139, 250, 0.08);
  pointer-events: none;
}

/* ------------------------------------------------------------ status bar */

.status {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  font: 400 11px/1 var(--mono);
  color: var(--ink-3);
}
.status__spacer { flex: 1; }
.status__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status__item--dim { color: var(--ink-4); }

/* ================================================================== home */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 2.5rem;
  align-items: center;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid var(--line);
}
.hero__eyebrow {
  margin: 0 0 1.25rem;
  font: 400 11.5px/1.6 var(--mono);
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.hero__eyebrow b { color: var(--tint); font-weight: 400; }
.hero__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wght' 600, 'wdth' 94;
  font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__lede {
  margin: 1.25rem 0 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.hero__find { margin: 1.75rem 0 0; width: 100%; height: 38px; }
.hero__hint { margin: 0.75rem 0 0; color: var(--ink-4); font-size: 12.5px; }
.hero__hint code {
  padding: 0.1em 0.35em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  font: 400 0.9em/1.4 var(--mono);
  color: var(--ink-3);
}

/* the hero diagnostic: a real rule, at the size it deserves */
.diag {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.diag__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.diag__dots { display: flex; gap: 4px; flex: none; }
.diag__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.diag__dots i:first-child { background: color-mix(in srgb, var(--error) 55%, var(--line-3)); }
.diag__dots i:nth-child(2) { background: color-mix(in srgb, var(--warn) 55%, var(--line-3)); }
.diag__file {
  font: 400 11.5px/1 var(--mono);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag__body .code { margin: 0; border: 0; border-radius: 0; background: transparent; }
.diag__body .code__bar { background: transparent; border-bottom-style: dashed; }
.diag__body .code pre { padding: 1rem 1.125rem 1.25rem; }
.diag__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 12px;
  color: var(--ink-3);
}
.diag__foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.2em; }
.diag__foot a:hover { color: var(--accent); }
.diag__sev {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font: 500 11px/1.3 var(--prose);
}
.diag__sev i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.diag__sev.sev--warn { color: var(--warn); }
.diag__sev.sev--error { color: var(--error); }
.diag__sev.sev--info { color: var(--info); }

/* the report: every area, its weight, and what it holds */
.report { display: block; border-bottom: 1px solid var(--line); }
.report__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 72px 88px;
  gap: 1rem;
  align-items: baseline;
  padding: 0.875rem 0.5rem 0.875rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.report__row:last-child { border-bottom: 0; }
.report__row:hover { background: var(--panel); color: var(--ink); }
.report__name {
  font-family: var(--display);
  font-variation-settings: 'wght' 560, 'wdth' 98;
  font-size: 1.0625rem;
  color: var(--ink);
}
.report__row:hover .report__name { color: var(--accent); }
.report__what { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.report__count, .report__size {
  font: 400 12px/1.4 var(--mono);
  color: var(--ink-3);
  text-align: right;
}

.entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}
.entry__k {
  margin: 0 0 0.875rem;
  color: var(--ink-4);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.entry__list { margin: 0; padding: 0; list-style: none; }
.entry__list li { padding: 0.4375rem 0; border-bottom: 1px dotted var(--line); }
.entry__list li:last-child { border-bottom: 0; }
.entry__list a { color: var(--ink); font-size: 14.5px; }
.entry__list a:hover { color: var(--accent); }
.entry__list span {
  display: block;
  margin-top: 0.125rem;
  color: var(--ink-4);
  font: 400 10.5px/1.5 var(--mono);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- index pages */

.index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 96px 132px;
  gap: 1rem;
  align-items: baseline;
  padding: 0.4375rem 0.5rem 0.4375rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.index__row:hover { background: var(--panel); }
.index__title { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.index__row:hover .index__title { color: var(--accent); }
.index__id, .index__date, .index__langs {
  font: 400 11.5px/1.5 var(--mono);
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index__id { color: var(--tint); }
.index__date { text-align: right; }
.index__langs { text-align: right; }

/* ------------------------------------------------------------------- 404 */

.nf { padding: 5rem 0; }
.nf__label {
  margin: 0 0 1rem;
  color: var(--ink-4);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ responsive */

/* The side columns give way to the reading column before the window does.
   1440 is the common laptop width, and code is the widest thing on the page:
   at 13px the code face sets 6.5px to the character, so every pixel the side
   columns give up is another character of an example shown without scrolling. */
@media (max-width: 1700px) {
  :root { --tree: 208px; --rail: 208px; }
}
@media (max-width: 1400px) {
  :root { --tree: 200px; --rail: 200px; }
}
@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--tree) minmax(0, 1fr) var(--rail); }
  .map { display: none; }
}
@media (max-width: 1000px) {
  :root { --pad: 1.75rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .tree {
    display: none;
    position: fixed;
    top: var(--row);
    left: 0;
    z-index: 45;
    width: min(320px, 86vw);
    height: calc(100vh - var(--row));
    background: var(--bg);
    border-right: 1px solid var(--line-3);
  }
  body[data-tree='open'] .tree { display: block; }
  .tree__toggle { display: inline-flex; }
  .rail {
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 0;
    margin-top: 2rem;
  }
  .doc { padding-bottom: 3rem; }
}
@media (max-width: 760px) {
  :root { --pad: 1.25rem; --row: 52px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 3rem 0 2.5rem; }
  .crumbs__here { display: none; }
  .find { width: auto; flex: 1; }
  .find__key { display: none; }
  .report__row { grid-template-columns: minmax(0, 1fr) 56px 68px; gap: 0.75rem; }
  .report__what { display: none; }
  .index__row { grid-template-columns: minmax(0, 1fr) 64px 0; }
  .index__date { display: none; }
  .prose h2 { font-size: 1.3rem; }
  .anchor { left: -1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- idioms */

/* A topic page is a list of calls: what to do, what it replaces, and the page
   that says so. The separator is what keeps 12 of them readable. */
.idiom__intro {
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  color: var(--ink-2);
  font: 400 15px/1.6 var(--prose);
}
.idiom {
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 4.5rem;
}
.idiom__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}
.idiom__rule {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-s);
  color: var(--accent);
  font: 500 10.5px/1.35 var(--mono);
  letter-spacing: 0.04em;
}
.idiom__body { margin: 0.35rem 0 0.9rem; color: var(--ink-2); }
.idiom__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin: 0 0 0.9rem; }
.idiom__case { min-width: 0; }
/* The label above is the separation; the code frame does not add its own. */
.idiom__case .code { margin-top: 0; }
/* A snippet too wide for half the column stacks the pair: app.js measures the
   laid out text and sets the attribute, so the comparison is never split by a
   scrollbar. */
.idiom__pair[data-stack] { grid-template-columns: 1fr; }
/* One snippet is not a comparison: it gets the whole measure. */
.idiom__case:only-child { grid-column: 1 / -1; }
/* The label is what separates the pair from the prose, so it carries the space
   above itself, and the code frame drops the top margin it has elsewhere. The
   selector matches the prose rule that zeroes paragraph margins in the body. */
.prose .idiom__label {
  margin: 1.5rem 0 0.2rem;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.idiom__label--good { color: var(--ok); }
.idiom__label--bad { color: var(--error); }
.idiom__cite {
  margin: 0;
  color: var(--ink-4);
  font: 400 12px/1.5 var(--prose);
}
.idiom__cite a { color: var(--ink-3); text-decoration-color: var(--line-3); }
.idiom__cite a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .idiom__pair { grid-template-columns: 1fr; }
}

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

/* The page is what gets printed, not the furniture around it: no tree, no
   rail, no tabs, no status bar. Code wraps on paper, where there is no
   scrolling and no second column to hide behind. */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --panel: #fff;
    --panel-2: #fff;
    --panel-3: #f6f6f6;
    --ink: #111;
    --ink-2: #333;
    --ink-3: #555;
    --ink-4: #777;
    --line: #d8d8d8;
    --line-2: #ccc;
    --line-3: #bbb;
    --accent: #5b3fd6;
    --accent-dim: #5b3fd6;
  }
  body { background: #fff; }
  .top, .tree, .rail, .map, .status, .tabs, .palette, .skip, .anchor, .code__bar { display: none !important; }
  .shell { display: block; min-height: 0; }
  .doc { max-width: none; padding: 0; }
  .prose p, .prose ul, .prose ol { max-width: none; }
  .doc__head { border-bottom: 1px solid var(--line); }
  .code { border-color: var(--line); break-inside: avoid; }
  .idiom__pair { grid-template-columns: 1fr; }
  .idiom { break-inside: avoid; }
  .code pre { white-space: pre-wrap; overflow: visible; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose a { text-decoration: none; color: inherit; }
}