/* site.css — mc documentation site
   No frameworks, no build step, no JavaScript required to read a page.
   Sections: 1 tokens · 2 base · 3 chrome · 4 layout · 5 nav · 6 prose
             7 code · 8 outline · 9 pager · 10 home · 11 states · 12 media */

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

:root {
  color-scheme: light dark;

  /* spacing: one module = 4px, the size of an AArch64 instruction word */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* type scale: 1.2 (minor third), rounded to whole pixels at a 16px root */
  --fs-micro: 0.75rem;   /* 12px */
  --fs-small: 0.8125rem; /* 13px */
  --fs-ui:    0.875rem;  /* 14px */
  --fs-body:  1rem;      /* 16px */
  --fs-lead:  1.125rem;  /* 18px */
  --fs-h3:    1.25rem;   /* 20px */
  --fs-h2:    1.5rem;    /* 24px */
  --fs-h1:    2rem;      /* 32px */
  --fs-display: 2.5rem;  /* 40px */

  --lh-tight: 1.25;
  --lh-body: 1.65;
  --lh-code: 1.55;

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

  --radius: 6px;
  --radius-lg: 10px;
  --header-h: 3.5rem;
  --measure: 72ch;
  --sidebar-w: 15rem;
  --outline-w: 14rem;

  /* colour — light */
  --bg:            #fbfaf8;
  --bg-elev:       #f2eee8;
  --code-bg:       #f4f1eb;
  --text:          #191817;
  --text-muted:    #5c564e;
  --border:        #ddd7ce;
  --border-strong: #918878;
  --accent:        #8f3d0d;
  --accent-hover:  #6f2f09;
  --accent-soft:   #f4e6da;
  --focus:         #0a5fbd;
  --shadow: 0 1px 2px rgb(25 24 23 / 6%), 0 4px 12px rgb(25 24 23 / 5%);

  /* colour — code tokens (measured against --code-bg) */
  --tok-keyword: #8c2461;
  --tok-taught:  #8f3d0d;
  --tok-dir:     #1a5482;
  --tok-str:     #256128;
  --tok-num:     #0a615f;
  --tok-hole:    #6a34a3;
  --tok-ident:   #191817;
  --tok-op:      #5c564e;
  --tok-comment: #67615a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #131211;
    --bg-elev:       #1e1c1a;
    --code-bg:       #1a1917;
    --text:          #ece8e2;
    --text-muted:    #a49d94;
    --border:        #302d2a;
    --border-strong: #716b62;
    --accent:        #f0a568;
    --accent-hover:  #f8c093;
    --accent-soft:   #2b2018;
    --focus:         #7cb7f5;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 35%);

    --tok-keyword: #ee8dc0;
    --tok-taught:  #f0a568;
    --tok-dir:     #82b9ec;
    --tok-str:     #8ecb8a;
    --tok-num:     #55c9c1;
    --tok-hole:    #c3a4f2;
    --tok-ident:   #ece8e2;
    --tok-op:      #b0a99f;
    --tok-comment: #9a938a;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-mono); font-weight: 600; }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

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

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

::selection { background: var(--accent-soft); color: var(--text); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s4); top: var(--s2);
  z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- 3 chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: var(--header-h);
  padding: 0 var(--s5);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand .mark { width: 1.5rem; height: 1.5rem; color: var(--accent); flex: none; }
.brand:hover { color: var(--accent); }

.header-nav {
  display: flex;
  gap: var(--s5);
  margin-inline-start: auto;
  font-size: var(--fs-ui);
}
.header-nav a { color: var(--text-muted); text-decoration: none; }
.header-nav a:hover,
.header-nav a[aria-current] { color: var(--accent); text-decoration: underline; }

/* Search ({{search}} in base.html). The form is written with the `hidden`
   attribute and its script removes it, so a reader without JavaScript never
   sees an input that cannot search. The results hang off the header, which is
   the sticky element, and the whole thing disappears when search is off in
   site.toml — the placeholder is then empty and none of this matches. */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-ui);
}
.site-search input {
  width: 12ch;
  padding: var(--s1) var(--s3);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: width 120ms ease;
}
.site-search input::placeholder { color: var(--text-muted); }
.site-search input:focus { width: 22ch; }

.search-results {
  position: absolute;
  top: calc(100% + var(--s2));
  inset-inline-end: 0;
  z-index: 60;
  width: min(30rem, 82vw);
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.search-results li { margin: 0; }
.search-results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.search-results a:hover { background: var(--bg-elev); color: var(--accent); }
.search-section { flex: none; color: var(--text-muted); font-size: var(--fs-small); }

/* CSS-only sidebar toggle: the checkbox lives at the top of <body> so that it
   is a sibling of .layout; above 900px both it and its label are display:none,
   which also removes the phantom tab stop. */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  clip-path: inset(50%);
}
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.nav-button:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle:focus-visible ~ .site-header .nav-button {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.nav-button .bars { width: 1rem; height: 1rem; flex: none; }

.site-footer {
  margin-top: var(--s9);
  border-top: 1px solid var(--border);
  padding: var(--s6) var(--s5);
  color: var(--text-muted);
  font-size: var(--fs-ui);
}
.site-footer .inner {
  max-width: 90rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: baseline;
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .spacer { margin-inline-start: auto; }

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

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--s6) var(--s5) 0;
}

.content {
  min-width: 0;
  max-width: var(--measure);
}
.content--wide { max-width: none; }

/* ------------------------------------------------------------------- 5 nav */

.site-nav {
  display: none;
  font-size: var(--fs-ui);
}
.nav-toggle:checked ~ .layout .site-nav { display: block; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li { margin-bottom: var(--s5); }

.site-nav .nav-section-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--s1) var(--s3);
  margin-bottom: var(--s1);
}

.site-nav a {
  display: block;
  padding: var(--s1) var(--s3);
  border-inline-start: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav a:hover { background: var(--bg-elev); color: var(--text); }
.site-nav a[aria-current="page"] {
  background: var(--accent-soft);
  border-inline-start-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.site-nav ul ul a { padding-inline-start: var(--s5); }

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

.content > *:first-child { margin-top: 0; }

.content h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s4);
  letter-spacing: -0.01em;
}
.content h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: var(--s8) 0 var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.content h3 { font-size: var(--fs-h3); margin: var(--s7) 0 var(--s3); }
.content h4 { font-size: var(--fs-body); margin: var(--s6) 0 var(--s3); }

.content h2, .content h3, .content h4 {
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}

.content p { margin: 0 0 var(--s5); }
.content ul, .content ol { margin: 0 0 var(--s5); padding-inline-start: var(--s6); }
.content li { margin-bottom: var(--s2); }
.content li > ul, .content li > ol { margin-top: var(--s2); margin-bottom: 0; }

.content blockquote {
  margin: 0 0 var(--s5);
  padding: var(--s2) var(--s5);
  border-inline-start: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.lead { font-size: var(--fs-lead); color: var(--text-muted); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
  font-size: var(--fs-ui);
  color: var(--text-muted);
}

/* headings carry an id; the anchor is revealed on hover and on focus */
.anchor {
  margin-inline-start: var(--s2);
  color: var(--border-strong);
  text-decoration: none;
  opacity: 0;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor,
.anchor:focus-visible { opacity: 1; }

.table-wrap { overflow-x: auto; margin: 0 0 var(--s5); }
.content table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-ui);
}
.content th, .content td {
  text-align: start;
  vertical-align: top;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}
.content th {
  font-family: var(--font-mono);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
}
.content tbody tr:hover { background: var(--bg-elev); }

.page-edit {
  margin-top: var(--s5);
  font-size: var(--fs-ui);
}
.page-edit a { color: var(--text-muted); }
.page-edit a:hover { color: var(--accent); }

.home-extra { max-width: var(--measure); }

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

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

:not(pre) > code {
  background: var(--bg-elev);
  border-radius: 4px;
  padding: 0.12em 0.36em;
  font-size: 0.9em;
  word-break: break-word;
}
.card :not(pre) > code,
.outline :not(pre) > code { background: var(--code-bg); }

pre.code {
  position: relative;
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: var(--fs-ui);
  line-height: var(--lh-code);
  tab-size: 4;
}
pre.code code {
  display: block;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}
/* the block scrolls, so it is a focusable region for keyboard users */
pre.code:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* optional, progressive: the generator may add a copy button and a tiny
   inline script. The page is complete and readable without either. */
.code-copy {
  position: absolute;
  top: var(--s2);
  inset-inline-end: var(--s2);
  padding: var(--s1) var(--s2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  cursor: pointer;
  opacity: 0;
}
pre.code:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--accent); border-color: var(--accent); }

/* token classes emitted by the bundled mc lexer */
.tok-keyword { color: var(--tok-keyword); font-weight: 600; }
.tok-taught  { color: var(--tok-taught); font-weight: 600;
               text-decoration: underline dotted;
               text-decoration-thickness: 1px;
               text-underline-offset: 0.22em; }
.tok-op      { color: var(--tok-op); }
.tok-ident   { color: var(--tok-ident); }
.tok-num     { color: var(--tok-num); }
.tok-str     { color: var(--tok-str); }
.tok-dir     { color: var(--tok-dir); font-weight: 600; }
.tok-hole    { color: var(--tok-hole); font-style: italic; }
.tok-comment { color: var(--tok-comment); font-style: italic; }

/* a legend used on the home page and in the reference */
.tok-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: 0 0 var(--s5); padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------- 8 outline */

.outline {
  /* a wide-screen affordance: below 1200px it would land after the content,
     where a page outline is of no use to anyone. See site/DESIGN.md. */
  display: none;
  font-size: var(--fs-small);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s3) var(--s4);
}
.outline h2 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.outline ul { list-style: none; margin: 0; padding: 0; }
.outline li { margin: 0; }
.outline a {
  display: block;
  padding: var(--s1) 0;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
}
.outline a:hover { color: var(--accent); text-decoration: underline; }
.outline ul ul a { padding-inline-start: var(--s3); }

/* ----------------------------------------------------------------- 9 pager */

.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
/* both neighbours dropped by <!--if-->: hide the rule instead of a stray line.
   Purely cosmetic, so browsers without :has() lose nothing but a border. */
.pager:not(:has(a)) { display: none; }
.pager a {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
}
.pager a:hover { border-color: var(--accent); }
.pager .dir {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.pager .pager-next { text-align: end; }

/* ------------------------------------------------------------------ 10 home */

.home {
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--s8) var(--s5) 0;
}

.hero {
  display: grid;
  gap: var(--s7);
  align-items: start;
  margin-bottom: var(--s9);
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
}
.hero .pitch {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 var(--s6);
}
.hero .mark-xl { width: 6rem; height: 6rem; color: var(--accent); }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s5);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }
.button--ghost { background: none; color: var(--accent); border-color: var(--border-strong); }
.button--ghost:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s5);
  margin: 0 0 var(--s9);
  padding: 0;
  list-style: none;
}
.card {
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.card h2 {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}
.card p { margin: 0 0 var(--s3); color: var(--text-muted); }
.card p:last-child { margin-bottom: 0; }
.card .fact {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text);
}

.showcase { margin-bottom: var(--s9); }
.showcase h2 { font-size: var(--fs-h2); margin: 0 0 var(--s3); }
.showcase > p { color: var(--text-muted); max-width: 60ch; }
.showcase pre.code { max-width: 78ch; }

/* ---------------------------------------------------------------- 11 states */

.notfound {
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--s9) var(--s5) 0;
  text-align: center;
}
.notfound .code-404 {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  color: var(--accent);
  margin: 0 0 var(--s4);
}
.notfound .cta { justify-content: center; }

/* ----------------------------------------------------------------- 12 media */

@media (min-width: 900px) {
  .nav-toggle, .nav-button { display: none; }
  .site-nav { display: block; position: sticky; align-self: start;
              top: calc(var(--header-h) + var(--s5));
              max-height: calc(100vh - var(--header-h) - var(--s7));
              overflow-y: auto;
              padding-inline-end: var(--s2); }
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .hero { grid-template-columns: 1fr auto; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .pager-next { grid-column: 2; }
}

@media (min-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--outline-w); }
  .outline {
    display: block;
    position: sticky;
    align-self: start;
    top: calc(var(--header-h) + var(--s5));
    max-height: calc(100vh - var(--header-h) - var(--s7));
    overflow-y: auto;
    border: 0;
    border-inline-start: 1px solid var(--border);
    border-radius: 0;
    padding: 0 0 0 var(--s4);
  }
}

@media (max-width: 699px) {
  /* the header must stay one line: when the sidebar toggle is present the same
     sections are reachable inside it, so the header links stand down. Search
     stays: it is the one thing the sidebar does not offer. */
  .nav-button ~ .header-nav { display: none; }
  .site-search { margin-inline-start: auto; }
  .site-search input { width: 9ch; }
  .site-search input:focus { width: 14ch; }
}

@media (max-width: 899px) {
  .site-header { padding-inline: var(--s4); }
  .layout, .home, .notfound { padding-inline: var(--s4); }
  .header-nav { gap: var(--s4); }
  .hero h1 { font-size: var(--fs-h1); }
}

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

@media (forced-colors: active) {
  .site-nav a[aria-current="page"] { border-inline-start-color: Highlight; }
  .button { border: 1px solid ButtonText; }
}

@media print {
  .site-header, .site-nav, .outline, .pager, .code-copy, .skip-link,
  .site-search { display: none; }
  .layout { display: block; padding: 0; }
  .content { max-width: none; }
  body { background: #fff; color: #000; }
  pre.code { border: 1px solid #999; white-space: pre-wrap; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}