/* rota site: standalone styles, shares nothing with volkerotto.net */

:root {
  --paper: #F7F8FA;
  --paper-2: #EEF0F3;
  --ink: #1F2328;
  --rule: #D0D7DE;
  --muted: #59636E;
  --duty: #3348D6;
  --duty-wash: #E4E8FB;
  --merged: #1A7F37;
  --merged-wash: #DCF2E2;
  --ask: #9A6700;
  --ask-wash: #FBF0D4;
  --danger: #CF222E;

  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  --measure: 72ch;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 3px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1117;
    --paper-2: #161B22;
    --ink: #F0F6FC;
    --rule: #30363D;
    --muted: #9198A1;
    --duty: #7C8CFF;
    --duty-wash: #1B2148;
    --merged: #3FB950;
    --merged-wash: #12301C;
    --ask: #D29922;
    --ask-wash: #33270C;
    --danger: #FF7B72;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0D1117;
  --paper-2: #161B22;
  --ink: #F0F6FC;
  --rule: #30363D;
  --muted: #9198A1;
  --duty: #7C8CFF;
  --duty-wash: #1B2148;
  --merged: #3FB950;
  --merged-wash: #12301C;
  --ask: #D29922;
  --ask-wash: #33270C;
  --danger: #FF7B72;
  color-scheme: dark;
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast-h, 3.3rem) + var(--toggle-h, 0px) + 1rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  text-rendering: optimizeLegibility;
}

a { color: var(--duty); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

code, pre, kbd { font-family: var(--mono); font-size: 0.76em; font-stretch: 75%; }

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

.skip {
  position: absolute; left: -999px; top: 0.5rem; z-index: 20;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.75rem;
}
.skip:focus { left: 0.5rem; }

/* ---- masthead ---- */

.masthead {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.brand { color: var(--ink); display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand .icon { width: 32px; height: 32px; flex: none; }
.brand .wordmark { font: 700 1.05rem/1 var(--mono); letter-spacing: -0.01em; }

.topnav { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 1.75rem); font: 500 0.8rem/1 var(--mono); }
.topnav a { color: var(--ink); text-decoration: none; padding: 0.4rem 0; }
.topnav a:hover, .topnav a[aria-current] { color: var(--duty); }
.topnav a[aria-current] { box-shadow: inset 0 -2px 0 var(--duty); }

.theme-toggle {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); }

/* ---- buttons, inline code ---- */

.btn {
  display: inline-block; padding: 0.7rem 1.1rem;
  font: 600 0.8rem/1 var(--mono);
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); border-radius: var(--radius);
}
.btn:hover { background: var(--paper-2); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--duty); border-color: var(--duty); }

:not(pre) > code {
  padding: 0.08em 0.3em;
  background: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  border-radius: var(--radius);
  white-space: nowrap;
}

pre {
  position: relative;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  line-height: 1.55;
  font-size: 0.8rem;
}
pre code { font-size: inherit; }

.copy {
  position: absolute; top: 0.45rem; right: 0.45rem;
  padding: 0.3rem 0.5rem;
  font: 500 0.68rem/1 var(--mono);
  color: var(--muted); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; opacity: 0;
}
pre:hover .copy, .copy:focus-visible, .copy[data-done] { opacity: 1; }
.copy[data-done] { color: var(--merged); border-color: var(--merged); }
@media (hover: none) { .copy { opacity: 1; } }

/* ---- landing ---- */

.is-landing main { padding: 0 var(--gutter); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero h1 {
  margin: 0 0 1.25rem;
  font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.18 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede { margin: 0 0 1.75rem; max-width: 52ch; color: var(--muted); font-size: 1.125rem; }
.lede code { color: var(--ink); }

.install pre { margin: 0; padding-right: 4.5rem; font-size: 0.85rem; }
.install pre::before { content: "$ "; color: var(--muted); }
.install p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--muted); }
.install .install-label { margin: 0 0 0.4rem; font: 500 0.75rem/1.3 var(--mono); color: var(--muted); }
.install .prompt { margin: 0; }
.install p code { font-size: 0.8rem; }
.prompt code::before { content: "\203A  "; color: var(--duty); font-weight: 700; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.compare { margin: 1.25rem 0 0; max-width: 52ch; font-size: 0.9rem; color: var(--muted); }

/* the roster: the one loud thing on the page */

.roster { margin: 0; }

.roster-grid {
  --cols: 6;
  --who: 7.5rem;
  display: grid;
  grid-template-columns: var(--who) repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: auto repeat(4, minmax(2.6rem, auto)) minmax(2.8rem, auto);
  row-gap: 0.4rem;
  padding: 0.9rem 0.9rem 0.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--mono);
  font-stretch: 81%;
  font-size: 0.72rem;
}

/* each hour heads a column whose left rule runs down the whole roster */
.r-head {
  grid-row: 1 / -1; grid-column: var(--c);
  padding: 0 0.4rem 0.5rem;
  border-left: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.66rem;
}
.r-head.r-who { grid-column: 1; border-left: 0; padding-left: 0; font-weight: 700; color: var(--ink); }

.r-who {
  grid-row: var(--r); grid-column: 1;
  align-self: center;
  font-weight: 700;
  font-size: 0.78rem;
}
.r-who i { display: block; font-style: normal; font-weight: 400; color: var(--muted); font-size: 0.64rem; }

.shift {
  position: relative;
  grid-row: var(--r);
  grid-column: var(--s) / var(--e);
  margin: 0 0.2rem;
  padding: 0.45rem 0.5rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: var(--radius);
  border-left: 3px solid currentColor;
  animation: shift-in 0.5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--d) * 140ms + 150ms);
}
.shift b { font-weight: 700; margin-right: 0.3em; }
.shift.done { color: var(--merged); background: var(--merged-wash); }
.shift.live {
  color: var(--duty);
  background: repeating-linear-gradient(-45deg, var(--duty-wash) 0 6px, transparent 6px 12px), var(--paper-2);
}
.shift.ask { color: var(--ask); background: var(--ask-wash); }
.shift.done::after { content: " PR"; opacity: 0.7; }

/* the gate row: one dashed line into main, a tick where each PR lands */
.roster-grid::after {
  content: ""; grid-row: 6; grid-column: 1 / -1;
  border-top: 1px dashed var(--ink);
}
.r-gate { align-self: center; padding-top: 0.4rem; }
.merge {
  position: relative;
  grid-row: 6; grid-column: var(--c);
  align-self: center;
  padding: 0.4rem 0.4rem 0;
  color: var(--merged); font-weight: 700;
  white-space: nowrap;
  animation: merge-in 0.35s ease-out both;
  animation-delay: calc(var(--d) * 140ms + 300ms);
}
.merge::before { content: "✓ "; }

@keyframes shift-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes merge-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.roster figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.85rem; max-width: 64ch; }

/* landing bands */

.band {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--rule);
}
.band > * { max-width: var(--measure); }
.band > .loop, .band > .roles, .band > .demo, .band > .table-wrap, .band > .works, .band > .fixes { max-width: none; }

.band h2, .split h2 {
  margin: 0 0 0.75rem;
  font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.25 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.015em;
}
.band-intro { margin: 0 0 2rem; color: var(--muted); font-size: 1.1rem; }

.loop {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0 0 2rem; padding: 0;
  border: 1px solid var(--ink); border-radius: var(--radius);
}
.loop li { counter-increment: step; padding: 1.25rem 1.25rem 1.5rem; }
.loop li + li { border-left: 1px solid var(--rule); }
.loop li::before {
  content: counter(step);
  display: block; margin-bottom: 1rem;
  font: 700 2.25rem/1 var(--mono); font-stretch: 112.5%;
  color: var(--duty);
}
.loop h3 { margin: 0.75rem 0 0.35rem; font-size: 1.05rem; }
.loop p { margin: 0; color: var(--muted); }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0 0 2.5rem; }
.roles dt { font: 700 0.9rem/1.3 var(--mono); padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.6rem; }
.roles dd { margin: 0; color: var(--muted); }

.demo { margin: 0 0 2rem; }
.demo img { display: block; border: 1px solid var(--rule); border-radius: var(--radius); }
.demo figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; }

.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem);
}
.split > * { max-width: none; }

.ticks { list-style: none; margin: 1rem 0; padding: 0; }
.ticks li { position: relative; padding: 0.55rem 0 0.55rem 1.5rem; border-top: 1px solid var(--rule); }
.ticks li::before { content: "▸"; position: absolute; left: 0.1rem; color: var(--duty); font-family: var(--mono); }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
th { font: 600 0.75rem/1.3 var(--mono); color: var(--muted); border-bottom-color: var(--ink); }
td code { white-space: nowrap; }

.fixes td:first-child { width: 45%; }
.skills td:first-child { color: var(--muted); white-space: nowrap; }
.skills td:nth-child(2) { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }

.tree { border-left-color: var(--duty); font-size: 0.82rem; }
.tree span { color: var(--muted); }

.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; }
.works dt { font: 700 0.8rem/1.3 var(--mono); margin-bottom: 0.4rem; }
.works dd { margin: 0; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem;
  color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 0.85rem; line-height: 1.2;
}
.chip-icon { width: 1rem; height: 1rem; flex: none; fill: currentColor; color: var(--muted); }
.chip code { font-size: 0.78rem; background: none; border: 0; padding: 0; }
.works-note { margin: 0.5rem 0 0; font-size: 0.8rem; }

.closing pre { max-width: 44ch; font-size: 0.74rem; }
.closing > p { max-width: var(--measure); }
.prompt {
  position: relative; max-width: 60ch; margin: 1.25rem 0 0.5rem;
  padding: 1rem 1.1rem; background: var(--paper-2);
  border: 1px solid var(--rule); border-left: 3px solid var(--duty); border-radius: var(--radius);
}
.prompt code { display: block; white-space: normal; background: none; border: 0; padding: 0; font-size: 0.85rem; line-height: 1.55; overflow-wrap: anywhere; user-select: all; }
.prompt-copy {
  margin-top: 0.75rem; padding: 0.4rem 0.7rem;
  font: 500 0.72rem/1 var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.prompt-copy:hover { border-color: var(--duty); }
.prompt-copy[data-done] { color: var(--merged); border-color: var(--merged); }

/* ---- docs ---- */

.docs {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr) 13rem;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav-toggle { display: none; }

.docnav {
  position: sticky; top: var(--mast-h, 3.3rem);
  align-self: start;
  max-height: calc(100vh - var(--mast-h, 3.3rem));
  overflow-y: auto;
  padding: 2rem 0.5rem 3rem 0;
  font-size: 0.9rem;
  scrollbar-width: thin;
}
.docnav section + section { margin-top: 1.4rem; }
.docnav h2 { margin: 0 0 0.4rem; font: 700 0.72rem/1.3 var(--mono); color: var(--ink); }
.docnav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.docnav a {
  display: block; padding: 0.22rem 0 0.22rem 0.8rem; margin-left: -1px;
  color: var(--muted); text-decoration: none; line-height: 1.35;
  border-left: 2px solid transparent;
}
.docnav a:hover { color: var(--ink); }
.docnav a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--duty); }
.docnav code { font-size: 0.8em; padding: 0 0.2em; white-space: normal; }

.article { min-width: 0; padding: 2.25rem 0 4rem; }

.toc {
  position: sticky; top: var(--mast-h, 3.3rem);
  align-self: start;
  max-height: calc(100vh - var(--mast-h, 3.3rem));
  overflow-y: auto;
  padding: 2.4rem 0 2rem;
  font-size: 0.82rem;
}
.toc h2 { margin: 0 0 0.5rem; font: 700 0.72rem/1.3 var(--mono); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li.l3 { padding-left: 0.8rem; }
.toc a { display: block; padding: 0.18rem 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a[aria-current] { color: var(--duty); }
.toc code { white-space: normal; font-size: 0.85em; padding: 0 0.15em; }

/* prose */

.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose h1 {
  margin: 0 0 1.5rem;
  font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.prose h2, .prose h3, .prose h4 { font-family: var(--mono); font-stretch: 87.5%; letter-spacing: -0.01em; line-height: 1.3; }
.prose h2 { margin: 2.75rem 0 0.9rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1.25rem; }
.prose h3 { margin: 2rem 0 0.6rem; font-size: 1.02rem; }
.prose h4 { margin: 1.5rem 0 0.5rem; font-size: 0.92rem; }
.prose h2 code, .prose h3 code, .prose h4 code { font-size: 0.92em; white-space: normal; }
.prose .anchor { margin-left: 0.4rem; color: var(--rule); text-decoration: none; opacity: 0; }
.prose :is(h2, h3, h4):hover .anchor, .prose .anchor:focus-visible { opacity: 1; color: var(--muted); }

.prose p, .prose ul, .prose ol, .prose dl { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: 0.25rem 0; }
.prose li > ul, .prose li > ol { margin: 0.25rem 0 0; }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }

.prose blockquote {
  margin: 1.25rem 0; padding: 0.75rem 1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
.prose blockquote > :last-child { margin-bottom: 0; }

.prose .callout { color: var(--ink); background: var(--paper-2); border-left-color: var(--duty); border-radius: 0 var(--radius) var(--radius) 0; }
.prose .callout::before {
  display: block; margin-bottom: 0.35rem;
  font: 700 0.72rem/1.3 var(--mono);
  color: var(--duty);
}
.prose .callout-note::before { content: "Note"; }
.prose .callout-tip::before { content: "Tip"; color: var(--merged); }
.prose .callout-tip { border-left-color: var(--merged); }
.prose .callout-important::before { content: "Important"; }
.prose .callout-warning::before { content: "Warning"; color: var(--ask); }
.prose .callout-warning { border-left-color: var(--ask); }
.prose .callout-caution::before { content: "Caution"; color: var(--danger); }
.prose .callout-caution { border-left-color: var(--danger); }

.prose table { display: block; overflow-x: auto; margin: 1.25rem 0; font-size: 0.9rem; }
.prose td code { white-space: nowrap; }
.prose img { border: 1px solid var(--rule); border-radius: var(--radius); }
.prose details { margin: 1rem 0; padding: 0.6rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); }
.prose summary { cursor: pointer; font-weight: 600; }

.prose .mermaid { margin: 1.5rem 0; overflow-x: auto; }
.prose .mermaid svg { max-width: 100%; height: auto; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: var(--measure); margin-top: 3.5rem; }
.pager a {
  display: block; padding: 0.8rem 1rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; line-height: 1.35;
}
.pager a:hover { border-color: var(--duty); }
.pager span { display: block; margin-bottom: 0.25rem; font: 500 0.7rem/1 var(--mono); color: var(--muted); }
.pager .next { grid-column: 2; text-align: right; }
.pager code { white-space: normal; }

.edit { max-width: var(--measure); margin-top: 1.5rem; font-size: 0.85rem; }
.edit a { color: var(--muted); }

/* rouge */

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .ch { color: var(--muted); font-style: italic; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .se, .highlight .sh { color: var(--merged); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .nb, .highlight .kc { color: var(--duty); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .nv, .highlight .na, .highlight .nt { color: var(--ask); }
.highlight .err { color: inherit; background: none; }
div.highlighter-rouge { margin: 1.25rem 0; }
div.highlighter-rouge pre, div.highlight pre { margin: 0; }

/* ---- terminal ---- */

.term {
  margin: 1.5rem 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font: 600 0.7rem/1.2 var(--mono);
  background: var(--paper-2);
}
.term-bar em { font-style: normal; font-weight: 400; color: var(--muted); }
.term-replay {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  font: 500 0.68rem/1 var(--mono);
  color: var(--muted); background: none;
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.term-replay:hover { color: var(--ink); border-color: var(--ink); }
.term-body { padding: 0.85rem 1rem 1rem; font-family: var(--mono); font-stretch: 81%; font-size: 0.76rem; line-height: 1.6; overflow-x: auto; min-height: 9.5rem; }
.t-you { color: var(--ink); font-weight: 700; white-space: pre-wrap; }
.t-you::before { content: "> "; color: var(--duty); }
.t-you + .t-you { margin-top: 0.15rem; }
.term .t-agent {
  margin: 0.4rem 0 0.7rem; padding: 0 0 0 0.9rem;
  background: none; border: 0; border-left: 2px solid var(--rule); border-radius: 0;
  color: var(--muted); font-size: inherit; line-height: inherit; white-space: pre;
}
.term .t-agent:last-child { margin-bottom: 0; }
.term .t-agent .copy { display: none; }
[data-term][data-ready] .t-line, [data-term][data-ready] .t-you { visibility: hidden; }
[data-term][data-ready] .t-line.on, [data-term][data-ready] .t-you.on { visibility: visible; }
.term figcaption { padding: 0.75rem 1rem 0.9rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.term figcaption strong { font: 700 0.72rem/1.3 var(--mono); }
.term figcaption ul { margin: 0.35rem 0 0.5rem; padding-left: 1.2rem; color: var(--muted); }
.term figcaption a { font-size: 0.85rem; }

/* ---- skill card (docs) ---- */

.skill-card { margin: 0 0 2.5rem; }
.skill-summary { font-size: 1.2rem; line-height: 1.45; margin: 0 0 1rem; }
.skill-flag { display: inline-block; margin: 0 0 1.25rem; padding: 0.3rem 0.6rem; font: 600 0.72rem/1.3 var(--mono); color: var(--ask); background: var(--ask-wash); border-radius: var(--radius); }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.skill-grid > :only-child { grid-column: 1 / -1; }
.prose .skill-card h2, .prose .skill-h {
  margin: 0 0 0.5rem; padding: 0 0 0.4rem; border-top: 0;
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
}
.prose .skill-h { margin-top: 1.75rem; }
.skill-grid p, .skill-grid ul { margin: 0; font-size: 0.95rem; }
.skill-grid ul { padding-left: 1.1rem; }

.chain-strip {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--rule); border-radius: var(--radius);
}
.chain-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chain-side:last-child { justify-content: flex-end; }
.chain-side span { width: 100%; font: 600 0.66rem/1.3 var(--mono); color: var(--muted); }
.chain-side:last-child span { text-align: right; }
.chain-side em { color: var(--muted); font-size: 0.85rem; }
.chain-side a { text-decoration: none; }
.chain-self code { display: block; padding: 0.5rem 0.75rem; font-weight: 700; color: var(--paper); background: var(--ink); border-color: var(--ink); }
.chain-self { position: relative; }
.chain-self::before, .chain-self::after { content: "→"; position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--mono); }
.chain-self::before { left: -0.75rem; transform: translate(-50%, -50%); }
.chain-self::after { right: -0.75rem; transform: translate(50%, -50%); }

.flags { margin: 0; }
.flags > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.flags dd { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- explorer (landing) ---- */

.band.explorer > .ex, .band.explorer > .lanes { max-width: none; }
.ex { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
.ex-tabs { display: flex; flex-direction: column; border-left: 1px solid var(--rule); }
.ex:not(.js) .ex-tabs { display: none; }
.ex:not(.js) { grid-template-columns: minmax(0, 1fr); }
.ex-tabs button {
  margin-left: -1px; padding: 0.6rem 0.9rem;
  text-align: left; font: 500 0.95rem/1.35 var(--sans);
  color: var(--muted); background: none;
  border: 0; border-left: 2px solid transparent;
  cursor: pointer;
}
.ex-tabs button:hover { color: var(--ink); }
.ex-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--duty); background: var(--paper-2); }
.ex:not(.js) .ex-panel + .ex-panel { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.ex-when { margin: 0 0 1rem; font-size: 1.05rem; }
.ex-steps { list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.25rem; padding: 0; }
.ex-steps li { counter-increment: s; display: flex; align-items: center; }
.ex-steps li + li::before { content: ""; width: 1.25rem; height: 1px; background: var(--ink); }
.ex-steps button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  cursor: pointer;
}
.ex-steps button::before { content: counter(s); font: 700 0.72rem/1 var(--mono); color: var(--muted); }
.ex-steps button code { padding: 0; border: 0; background: none; font-size: 0.72rem; }
.ex-steps .past button { background: var(--merged-wash); border-color: var(--merged); }
.ex-steps .past button::before { content: "✓"; color: var(--merged); }
.ex-steps button[aria-current="step"] { background: var(--ink); color: var(--paper); }
.ex-steps button[aria-current="step"]::before { color: var(--paper); }
.ex:not(.js) .ex-steps { display: none; }
.ex-step + .ex-step { margin-top: 2rem; }
.ex.js .ex-step + .ex-step { margin-top: 0; }
.ex-why { margin: 0; font-size: 1rem; }
.ex-n { display: block; margin-bottom: 0.2rem; font: 600 0.7rem/1.3 var(--mono); color: var(--muted); }
.ex .term { margin: 0.9rem 0; }
.ex-more { margin: 0; color: var(--muted); font-size: 0.92rem; }
.ex-more a { display: inline-block; margin-left: 0.25rem; }
.ex-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.ex-nav a { margin-left: auto; font-size: 0.92rem; }
.ex-nav .btn:disabled { opacity: 0.35; cursor: default; }
.ex:not(.js) .ex-nav .btn { display: none; }

.lanes-h { margin: 3.5rem 0 1rem; font: 700 1rem/1.3 var(--mono); }
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.lanes dt { font: 700 0.75rem/1.3 var(--mono); padding-bottom: 0.4rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.5rem; }
.lanes dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lanes a { text-decoration: none; }
.lanes a:hover code { border-color: var(--duty); color: var(--duty); }

@media (max-width: 820px) {
  .ex { grid-template-columns: minmax(0, 1fr); }
  .ex-tabs { border-left: 0; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; }
  .ex-tabs button { border-left: 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
  .ex-tabs button:last-child { border-bottom: 0; }
  .ex-tabs button[aria-selected="true"] { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--duty); }
  .examples .term-body { overflow-x: visible; }
  .examples .term .t-agent, .examples .t-you { white-space: pre-wrap; overflow-wrap: anywhere; }
  .skill-grid { grid-template-columns: minmax(0, 1fr); }
  .chain-strip { grid-template-columns: minmax(0, 1fr); }
  .chain-side:last-child { justify-content: flex-start; }
  .chain-side:last-child span { text-align: left; }
  .chain-self::before, .chain-self::after { display: none; }
  .flags > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

.band-more { margin: 2rem 0 0; font: 600 0.9rem/1.4 var(--mono); }
.band-more a { text-decoration: none; }
.band-more a:hover { color: var(--duty); }

/* ---- examples page ---- */

.eg-head, .eg { max-width: 1240px; margin: 0 auto; }
.eg-head { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.eg-head h1 { margin: 0 0 0.75rem; font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.18 var(--mono); font-stretch: 81%; letter-spacing: -0.02em; }
.eg-head .band-intro { margin-bottom: 1.5rem; max-width: var(--measure); }
.eg-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.eg-jump a {
  display: block; padding: 0.4rem 0.7rem;
  font: 500 0.8rem/1.3 var(--mono); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.eg-jump a:hover { color: var(--duty); border-color: var(--duty); }
.eg { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--rule); scroll-margin-top: var(--mast-h, 3.5rem); }
.eg h2 { margin: 0 0 0.75rem; font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.25 var(--mono); font-stretch: 81%; letter-spacing: -0.015em; }
.eg-when { margin: 0 0 1.75rem; max-width: var(--measure); font-size: 1.05rem; }
.eg-steps { list-style: none; counter-reset: eg; margin: 0; padding: 0; max-width: 56rem; }
.eg-steps > li { counter-increment: eg; position: relative; min-width: 0; padding: 0 0 1.75rem 2.75rem; }
.eg-steps > li::before {
  content: counter(eg); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  font: 700 0.75rem/1 var(--mono); color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 50%;
}
.eg-steps > li::after { content: ""; position: absolute; left: calc(0.875rem - 0.5px); top: 1.75rem; bottom: 0; width: 1px; background: var(--rule); }
.eg-steps > li:last-child { padding-bottom: 0; }
.eg-steps > li:last-child::after { display: none; }
.eg-why { margin: 0.2rem 0 0; }
.eg-steps .term { margin: 0.75rem 0 0; }
.eg-more { margin: 1.75rem 0 0; font-size: 0.95rem; }
.eg-more a { text-decoration: none; font-weight: 600; }
@media (max-width: 820px) {
  .eg-steps > li { padding-left: 2.25rem; }
}

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

.colophon { border-top: 1px solid var(--rule); background: var(--paper-2); }
.colophon-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  max-width: 1400px; margin: 0 auto; padding: 1.75rem var(--gutter);
  font-size: 0.88rem; color: var(--muted);
}
.colophon p { margin: 0; }
.colophon p + p { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.colophon a { color: var(--muted); }
.colophon a:hover { color: var(--ink); }

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

@media (max-width: 1180px) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle {
    display: block; position: sticky; top: var(--mast-h, 3.3rem); z-index: 6;
    margin: 0 calc(var(--gutter) * -1); padding: 0.7rem var(--gutter);
    width: calc(100% + var(--gutter) * 2);
    text-align: left; font: 600 0.78rem/1 var(--mono);
    color: var(--ink); background: var(--paper-2);
    border: 0; border-bottom: 1px solid var(--rule); cursor: pointer;
  }
  .nav-toggle::after { content: " +"; color: var(--muted); }
  .nav-toggle[aria-expanded="true"]::after { content: " −"; }
  /* the open menu overlays the page right under the toggle, wherever you have scrolled to */
  .docnav { display: none; }
  .docnav.open {
    display: block; position: fixed; z-index: 5;
    top: calc(var(--mast-h, 3.3rem) + var(--toggle-h, 2.5rem)); left: 0; right: 0; bottom: 0;
    max-height: none; overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem var(--gutter) 2rem;
    background: var(--paper);
  }
  .article { padding-top: 1.5rem; }
  .loop, .roles, .split { grid-template-columns: minmax(0, 1fr); }
  .loop li + li { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .brand .icon { width: 28px; height: 28px; }
  .topnav { gap: 0.6rem; font-size: 0.72rem; }
  .masthead { gap: 0.5rem; }
  .roster-grid { --who: 3.6rem; font-size: 0.62rem; padding: 0.6rem 0.5rem 0.4rem; }
  .r-who i { font-size: 0.56rem; }
  .r-head { padding: 0 0.15rem 0.4rem; font-size: 0.56rem; }
  .shift { padding: 0.4rem 0.3rem; margin: 0 0.1rem; }
  .works { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; }
  .skills td:first-child { white-space: normal; }
}

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

@media (max-width: 374px) {
  .topnav a[href="/rota/docs/install/"] { display: none; }
}