/* software-lifecycle site. No JS, no external requests, system fonts. */
:root {
  color-scheme: light dark;
  --bg:#fbfaf7; --surface:#f1efe8; --text:#1d2127; --muted:#4a525c;
  --link:#1a4f8b; --visited:#5b3a8c; --accent:#1f5f5b; --on-accent:#fff;
  --border:#80868b; --rule:#d9d5ca; --focus:#0b57d0; --code-bg:#eeece4;
  --note-bg:#fdf3d7; --note-ink:#4a3500; --note-edge:#8a6100;
  --info-bg:#e6eef7; --info-ink:#14304f; --info-edge:#3a6aa0;

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.5rem;
  --step-3:clamp(1.75rem,1.4rem + 1.6vw,2.25rem);
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem;
  --r-1:4px; --r-2:6px;
  --measure:68ch; --gutter:1rem; --wide:60rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14171a; --surface:#1d2227; --text:#e8e6e1; --muted:#aeb5bc;
    --link:#8fb8ee; --visited:#c4a8ee; --accent:#7cc4bd; --on-accent:#0b1a19;
    --border:#6b737b; --rule:#2d343a; --focus:#8ab4f8; --code-bg:#101316;
    --note-bg:#2b2410; --note-ink:#f1dfae; --note-edge:#c9a23a;
    --info-bg:#17263a; --info-ink:#cfe0f5; --info-edge:#5f8fc7;
  }
}
@media (min-width:48em){ :root{ --gutter:1.5rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:var(--step-0)/1.6 var(--font);
  overflow-wrap:break-word; min-width:0;
}
img,svg{ max-width:100%; height:auto; }

/* Links and focus */
a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
a:visited{ color:var(--visited); }
a:hover{ text-decoration-thickness:2px; }
main:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:2px; }

/* Skip link */
.skip{
  position:absolute; left:var(--gutter); top:-4rem; z-index:10;
  background:var(--accent); color:var(--on-accent)!important;
  padding:.75rem 1rem; min-height:44px; border-radius:var(--r-1);
  font-weight:650; text-decoration:none;
}
.skip:focus{ top:var(--s-2); }

/* Containers */
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); }
main{ padding-block:var(--s-6) var(--s-8); }
.prose{ max-width:var(--measure); }

/* Header and nav (no JS: links wrap) */
.site-header{ border-bottom:1px solid var(--rule); }
.site-header .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-5); padding-block:var(--s-3); }
.brand{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  font:650 var(--step-1)/1.2 var(--mono); color:var(--text); text-decoration:none;
}
.brand:visited{ color:var(--text); }
.mark{ color:var(--accent); flex:none; }
.site-nav ul{ display:flex; flex-wrap:wrap; gap:0 var(--s-4); margin:0; padding:0; list-style:none; }
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text); text-decoration:none; border-bottom:2px solid transparent;
}
.site-nav a:visited{ color:var(--text); }
.site-nav a:hover{ border-bottom-color:var(--border); }
.site-nav a[aria-current="page"]{ font-weight:650; border-bottom-color:var(--accent); }
@media (min-width:48em){ .site-header .wrap{ justify-content:space-between; } }

/* Status strip (the honest line, on every page) */
.status{ background:var(--surface); color:var(--muted); font-size:var(--step--1); border-bottom:1px solid var(--rule); }
.status .wrap{ padding-block:var(--s-2); }

/* Headings and prose */
h1,h2,h3{ line-height:1.25; margin:var(--s-7) 0 var(--s-3); text-wrap:balance; }
h1{ font-size:var(--step-3); margin-top:0; font-weight:650; }
h2{ font-size:var(--step-2); font-weight:650; padding-top:var(--s-4); border-top:1px solid var(--rule); }
h3{ font-size:var(--step-1); font-weight:650; }
h1+h2,.hero+h2{ border-top:0; }
p,ul,ol,dl,figure,.note,.define,.table-scroll{ margin:0 0 var(--s-4); }
:is(p,ul,ol,dl){ max-width:var(--measure); }
li+li{ margin-top:var(--s-1); }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--text); }
small,.small{ font-size:var(--step--1); color:var(--muted); }

/* Hero */
.hero{ padding-block:var(--s-4) var(--s-5); }
.links{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); max-width:none; padding:0; list-style:none; }
.links li{ margin:0; }
.links a{ display:inline-flex; align-items:center; min-height:44px; font-weight:650; }

/* Note (hedges) and definition boxes */
.note,.define{
  max-width:var(--measure); padding:var(--s-3) var(--s-4);
  border:1px solid var(--note-edge); border-left-width:4px; border-radius:var(--r-2);
  background:var(--note-bg); color:var(--note-ink);
}
.note>:last-child,.define>:last-child{ margin-bottom:0; }
.note a,.define a{ color:inherit; }
.note a:visited,.define a:visited{ color:inherit; }
.note .label,.define .label{ display:block; font-weight:650; margin-bottom:var(--s-1); }
.define{ border-color:var(--info-edge); background:var(--info-bg); color:var(--info-ink); }
.define h2,.define h3{ margin:0 0 var(--s-2); padding:0; border:0; font-size:var(--step-1); }

/* Code */
code,kbd,samp{ font-family:var(--mono); font-size:.9em; }
:not(pre)>code{ background:var(--code-bg); padding:.1em .35em; border-radius:var(--r-1); overflow-wrap:anywhere; }
.code{ max-width:100%; }
.code figcaption{ font-size:var(--step--1); color:var(--muted); margin-bottom:var(--s-1); }
.code pre{
  margin:0; padding:var(--s-3) var(--s-4); overflow-x:auto;
  background:var(--code-bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-1);
  font:var(--step--1)/1.55 var(--mono); white-space:pre; tab-size:2;
}
.code pre code{ font:inherit; background:none; padding:0; }
.code--oneline pre{ user-select:all; }

/* Report screenshots: dark images, so a visible border keeps them framed on the light theme */
.shot{ max-width:100%; margin:0 0 var(--s-5); }
.shot img{ display:block; max-width:100%; height:auto; border:2px solid var(--border); border-radius:var(--r-2); background:#0d1117; }
.shot figcaption{ font-size:var(--step--1); color:var(--muted); margin-top:var(--s-2); max-width:var(--measure); }

/* Tables: scroll inside a box on phones */
.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-1); max-width:100%; }
table{ border-collapse:collapse; width:100%; min-width:32rem; font-size:var(--step--1); line-height:1.5; }
caption{ text-align:left; padding:var(--s-2) var(--s-3); color:var(--muted); font-size:var(--step--1); }
th,td{ text-align:left; vertical-align:top; padding:var(--s-2) var(--s-3); border-bottom:1px solid var(--rule); }
thead th{ background:var(--surface); font-weight:650; border-bottom:1px solid var(--border); }
tbody tr:last-child :is(th,td){ border-bottom:0; }

/* Numbered steps */
.steps{ padding-left:1.5rem; }
.steps li{ padding-left:var(--s-1); }

/* Footer */
.site-footer{ background:var(--surface); border-top:1px solid var(--rule); font-size:var(--step--1); color:var(--muted); }
.site-footer .wrap{ padding-block:var(--s-5); }
.site-footer p{ margin-bottom:var(--s-2); }
.site-footer a{ color:var(--link); }

/* Forced colours: keep box edges */
@media (forced-colors:active){
  .note,.define{ border:1px solid CanvasText; border-left-width:4px; }
  .skip:focus{ outline:2px solid Highlight; }
  .site-nav a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.3em; border-bottom-color:Highlight; }
  summary:focus-visible,a:focus-visible,pre:focus-visible,.table-scroll:focus-visible,main:focus-visible{ outline:3px solid Highlight; }
}

/* Print */
@media print{
  :root{ --bg:#fff; --surface:#fff; --text:#000; --muted:#333; --link:#000; --visited:#000;
         --border:#555; --rule:#999; --code-bg:#fff; --note-bg:#fff; --note-ink:#000; --note-edge:#000;
         --info-bg:#fff; --info-ink:#000; --info-edge:#000; }
  body{ font-size:11pt; }
  .skip,.site-nav{ display:none; }
  .site-header,.status,.site-footer{ background:none; }
  a{ text-decoration:underline; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.85em; overflow-wrap:anywhere; }
  .code pre{ white-space:pre-wrap; overflow:visible; }
  .table-scroll{ overflow:visible; }
  table{ min-width:0; }
  :is(.code,.note,.define,.table-scroll,tr,figure){ break-inside:avoid; }
  h1,h2,h3{ break-after:avoid; }
}

/* Extras: disclosure, cards, callout */
details{ max-width:var(--measure); margin:0 0 var(--s-3); border:1px solid var(--border); border-radius:var(--r-2); background:var(--surface); }
summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2) var(--s-4); font-weight:650; border-radius:var(--r-2); }
summary::-webkit-details-marker{ display:none; }
summary::before{
  content:""; flex:none; width:.5rem; height:.5rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
details[open]>summary::before{ transform:rotate(45deg); }
summary:hover{ background:var(--code-bg); }
summary:focus-visible{ outline-offset:-3px; }
details[open]>summary{ border-bottom:1px solid var(--rule); }
details>*:not(summary){ margin-inline:var(--s-4); }
details>*:not(summary):first-of-type{ margin-top:var(--s-3); }
details>*:last-child{ margin-bottom:var(--s-4); }
.cards{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); padding:0; list-style:none; max-width:none; margin:0 0 var(--s-4); }
.cards li{ margin:0; padding:var(--s-4); border:1px solid var(--border); border-radius:var(--r-2); background:var(--surface); }
.cards h3{ margin:0 0 var(--s-2); font-size:var(--step-1); }
.cards p{ margin-bottom:var(--s-2); }
.cards li>:last-child{ margin-bottom:0; }
dl.lists dt{ font-weight:650; margin-top:var(--s-3); }
dl.lists dd{ margin:0 0 var(--s-2); }
.site-footer ul{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-5); list-style:none; padding:0; margin:0 0 var(--s-3); max-width:none; }
.site-footer li{ margin:0; }
.site-footer a{ display:inline-flex; align-items:center; min-height:44px; }