/* talktalk site stylesheet: bands layout.
   Full-bleed section bands double as a sticky section nav;
   darker strips mark actions/results inside code blocks. */

/* ============================ shared core ============================ */

@font-face {
  font-family: "Bitstream Vera Sans Mono";
  src: url("/fonts/VeraMono.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bitstream Vera Sans Mono";
  src: url("/fonts/VeraMoBd.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg: #060707;
  --color-tin-1: rgb(9.71% 9.82% 12.9%);
  --color-tin-2: rgb(26% 24% 31%);
  --color-tin-3: rgb(29.5% 29.8% 40.8%);
  --color-tin-4: rgb(19.9% 31.3% 43.2%);
  --ink: oklch(96.816% 0.00355 220.931);
  --ink-dim: oklch(62% 0.02 250);
  --accent: oklch(88.4% 0.31 220);
}

html {
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Bitstream Vera Sans Mono", monospace;
  font-weight: 400;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

pre,
code,
.code-editable {
  font-family: "Bitstream Vera Sans Mono", monospace;
  font-weight: 200;
  font-style: normal;
  color: var(--ink);
}

code .keyword, pre .keyword,
code .modifier, pre .modifier { color: oklch(77% 0.156 12.4); }
code .number, pre .number { color: oklch(95% 0.217 48.1); }
code .comment, pre .comment { color: oklch(61.539% 0.03627 241.494); }
code .string, pre .string { color: oklch(88.4% 0.31 220); }
code .self, pre .self,
code .type, pre .type { color: oklch(91.1% 0.267 260); }
code .parameter, pre .parameter { color: oklch(65.217% 0.17683 257.397); }
code .decorator, pre .decorator { color: oklch(90.983% 0.13819 182.575); }
code .effect, pre .effect { color: oklch(78.916% 0.13222 230.749); }
code .enum_member, pre .enum_member,
code .method, pre .method,
code .function, pre .function { color: oklch(83.491% 0.14808 330.328); }

pre,
.code-editable {
  padding: 1rem;
  margin: 0;
  tab-size: 2;
}

a { color: oklch(91.1% 0.267 260); }

/* runnable mechanics (do not change: page.js depends on this layering) */

.runnable,
.no-run {
  background: var(--color-tin-1);
  position: relative;
}

.runnable .code-block { position: relative; }

.runnable .code-highlight,
.runnable .code-editable {
  box-sizing: border-box;
  display: block;
  line-height: 1.5;
  white-space: pre;
  width: 100%;
}

.runnable .code-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.runnable .code-diagnostics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.runnable .diag-underline {
  position: absolute;
  height: 2px;
  background: oklch(70% 0.22 20);
}

.runnable .diag-underline[data-severity="warning"] { background: oklch(82% 0.18 80); }
.runnable .diag-underline[data-severity="info"] { background: oklch(78% 0.12 250); }

.runnable .code-editable {
  position: relative;
  color: transparent;
  background: transparent;
  border: none;
  caret-color: var(--ink);
  z-index: 1;
  outline: none;
  overflow-x: auto;
  overflow-y: hidden;
  resize: none;
}

.runnable .code-editable::selection {
  background: rgba(255, 255, 255, 0.2);
  color: transparent;
}

.runnable .diagnostics-list {
  padding: 0 1rem 0.5rem;
  font-size: small;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.runnable .diagnostic-message { color: oklch(85% 0.2 20); font-weight: 400; }
.runnable .diagnostic-item[data-severity="warning"] .diagnostic-message { color: oklch(90% 0.18 80); }
.runnable .diagnostic-item[data-severity="info"] .diagnostic-message { color: oklch(88% 0.12 250); }

.runnable .value .arrow { color: rgb(87, 84, 101); }
.runnable .ir { font-size: 10px; overflow-x: auto; }

.code-hover-popover {
  position: fixed;
  z-index: 9999;
  background: rgb(30, 28, 36);
  color: var(--ink);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  max-width: min(60ch, 90vw);
  pointer-events: none;
}

.intro-txt span[data-displayed="true"],
.intro-text span[data-displayed="true"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============================ layout ============================ */

.global-nav {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0 max(1rem, calc((100vw - 61rem) / 2));
  background: rgba(6, 7, 7, 0.96);
  border-bottom: 1px solid var(--color-tin-3);
  backdrop-filter: blur(12px);
}

.global-nav a {
  box-sizing: border-box;
  text-decoration: none;
}

.global-nav-brand,
.global-nav-context,
.global-nav-links a {
  display: flex;
  align-items: center;
}

.global-nav-brand {
  color: #fff;
  font-weight: 700;
}

.global-nav-brand::before {
  color: var(--accent);
  content: "> ";
  white-space: pre;
}

.global-nav-context {
  justify-content: center;
  padding: 0 1.5rem;
  color: var(--ink-dim);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-nav-links {
  display: flex;
  justify-content: flex-end;
}

.global-nav-links a {
  padding: 0 0.75rem;
  color: var(--ink-dim);
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
}

.global-nav-links a:hover,
.global-nav-links a:focus-visible {
  color: #fff;
  background: var(--color-tin-1);
  border-bottom-color: var(--accent);
}

.global-nav-links a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--accent);
}

main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 7rem;
}

.page-header {
  display: flex;
  align-items: flex-end;
  min-height: 8rem;
}

.page-header-content {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
}

.page-header .page-kicker {
  display: block;
  margin-bottom: 1rem;
  color: var(--ink-dim);
  font-size: 0.75rem;
}

.page-header-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.page-header h1 {
  margin-bottom: 0;
}

.page-content {
  padding-top: 3rem;
}

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

.page-content h2,
.page-content h3 {
  position: static;
  margin: 3rem 0 1rem;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font-size: 1.15rem;
}

.page-content h4:first-child {
  margin-top: 0;
}

.page-content .anchor {
  scroll-margin-top: 5rem;
}

.page-content pre:has(> code.language-sh) {
  margin: 1.5rem 0 2rem;
  padding: 0;
  overflow-x: auto;
  background: var(--color-tin-1);
  border: 1px solid var(--color-tin-3);
}

.page-content code.language-sh {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 1rem;
  color: var(--ink);
  line-height: 1.6;
}

.page-content code.language-sh::before {
  color: var(--ink-dim);
  content: "$ ";
}

.manual-page {
  max-width: 92rem;
}

.manual-layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, 56rem) 12rem;
  justify-content: center;
  gap: 1.5rem;
}

.manual-document {
  min-width: 0;
}

.manual-outline {
  min-width: 0;
  padding-top: 3rem;
}

.manual-outline nav {
  position: sticky;
  top: 4.75rem;
  max-height: calc(100vh - 6.25rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.manual-outline-title {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--ink-dim);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manual-outline ol {
  margin: 0;
  padding: 0 0 0 0.75rem;
  border-left: 1px solid var(--color-tin-3);
  list-style: none;
}

.manual-outline li {
  margin: 0;
}

.manual-outline .manual-outline-sections {
  margin: 0.15rem 0 0.4rem;
  padding: 0 0 0 0.75rem;
  border-left: 0;
}

.manual-outline .manual-outline-sections a {
  padding-block: 0.25rem;
  font-size: 0.66rem;
}

.manual-outline a {
  display: block;
  padding: 0.35rem 0.5rem;
  color: var(--ink-dim);
  font-size: 0.72rem;
  line-height: 1.35;
  text-decoration: none;
}

.manual-outline a:hover,
.manual-outline a:focus-visible {
  color: #fff;
}

.manual-outline a[aria-current="page"] {
  margin-left: -0.8rem;
  padding-left: 1.25rem;
  color: var(--accent);
  border-left: 2px solid var(--accent);
}

.manual-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-tin-3);
  border-bottom: 1px solid var(--color-tin-3);
  font-size: 0.8rem;
}

.manual-pagination-top {
  margin-top: 3rem;
}

.manual-pagination a {
  color: var(--ink-dim);
  text-decoration: none;
}

.manual-pagination a:hover,
.manual-pagination a:focus-visible {
  color: #fff;
}

.manual-contents {
  justify-self: center;
}

.manual-previous,
.manual-next {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manual-next {
  justify-self: end;
  text-align: right;
}

/* full-bleed bands: element stretches to the viewport edges,
   its content stays in the column */

header,
main h2,
main > h1 {
  margin-inline: calc((100vw - 100%) / -2);
  padding-inline: calc((100vw - 100%) / 2);
}

header {
  background: #000;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

header + p {
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: none;
}

header h1 {
  font-weight: 700;
  margin: 0 0 2.5rem;
	font-size: 3rem;
}

header h1 span {
	letter-spacing: -0.2rem;
}

.intro {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.intro-txt,
.intro-code {
  flex: 1 1 0;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

.intro-txt {
  background: none;
  padding: 0.5rem 0;
}

.intro-code {
  background: var(--color-tin-1);
  padding: 1.5rem;
  display: flex;
  align-items: center;
}

.intro-code pre {
  padding: 0;
  width: 100%;
}

p {
  margin: 0 0 0.9rem;
}

ul, ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

main li p { margin: 0; }

/* section bands stick to the top while their section scrolls */

main h2 {
  position: sticky;
  top: 3.25rem;
  z-index: 50;
  background: var(--color-tin-1);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  margin-top: 4rem;
  margin-bottom: 2.25rem;
}

/* the band lists every section; its own is highlighted */

.band-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.band-nav a {
  color: var(--ink-dim);
  text-decoration: none;
}

.band-nav a:hover {
  color: #fff;
}

.band-nav a[aria-current="true"] {
  color: var(--accent);
}

/* the first band sits closer to the intro than bands sit to each other */

main > section:first-of-type > h2 {
  margin-top: 0;
}

main > h1 {
  background: var(--color-tin-1);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  margin-top: 5rem;
  margin-bottom: 2rem;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 2.5rem 0 0.6rem;
}

h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}

p code, li code, h4 code, h5 code {
  background: var(--color-tin-1);
  padding: 0.1em 0.35em;
}

/* static blocks scroll sideways when a line is too long */

.no-run .code-highlight {
  overflow-x: auto;
}

.runnable,
.no-run {
  margin: 0 0 1rem;
}

/* actions: a darker strip across the bottom of the block */

.runnable .actions {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
}

.runnable button {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

.runnable button:hover { color: #fff; }
.runnable button:active { background: rgba(255, 255, 255, 0.05); }
.runnable button:disabled { cursor: wait; }

.action-control {
  display: inline-flex;
  position: relative;
}

.action-control[data-tooltip]::after {
  position: absolute;
  left: 0.5rem;
  bottom: calc(100% + 0.4rem);
  z-index: 60;
  display: none;
  width: max-content;
  max-width: 16rem;
  padding: 0.4rem 0.6rem;
  background: rgb(30, 28, 36);
  color: var(--ink);
  content: attr(data-tooltip);
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
}

.action-control[data-tooltip]:hover::after,
.action-control[data-tooltip]:focus::after {
  display: block;
}

.runnable button.run {
  background: var(--color-tin-2);
  color: #fff;
}

.runnable button.run:hover { background: var(--color-tin-3); }

/* result: another darker strip, separated by a seam of block bg */

.runnable .result:not(:empty) {
  background: rgba(0, 0, 0, 0.4);
  margin-top: 2px;
  padding: 0.9rem 1.1rem;
}

.runnable .output,
.runnable .value,
.runnable .ir {
  padding: 0;
  margin: 0;
}

.runnable .output + .value { margin-top: 0.4rem; }

hr {
  border: none;
  height: 0;
  margin: 3.5rem 0;
}

.footnotes {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-top: 4rem;
}

@media (max-width: 1100px) {
  .manual-layout {
    grid-template-columns: 12rem minmax(0, 56rem);
  }

  .manual-rail {
    display: none;
  }
}

@media (max-width: 850px) {
  .manual-layout {
    display: block;
  }

  .manual-outline,
  .manual-rail {
    display: none;
  }
}

@media (min-width: 701px) {
  .band-nav {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .band-nav::-webkit-scrollbar { display: none; }

  .band-nav a {
    flex: 0 0 auto;
  }
}

@media (max-width: 700px) {
  .global-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .global-nav-brand {
    min-height: 2.5rem;
    padding: 0 1rem;
  }

  .global-nav-context {
    display: none;
  }

  .global-nav-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .global-nav-links a {
    justify-content: center;
    min-width: 0;
    padding-inline: 0.2rem;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .page-header-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .manual-pagination {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .manual-contents {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .manual-previous,
  .manual-next {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .manual-previous {
    grid-column: 1;
  }

  .manual-next {
    grid-column: 2;
  }

  header {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  header h1 { letter-spacing: -0.04em; }
  .intro {
    flex-direction: column;
    align-items: stretch;
  }
  .intro-txt { padding: 0; }
  .intro-code { padding: 1rem; }

  /* the band becomes a single row that scrolls sideways */

  main h2 {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .band-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .band-nav::-webkit-scrollbar { display: none; }

  .band-nav a {
    flex: 0 0 auto;
    padding: 0.35rem 0;
  }
}