/* 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; }

/* 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 */
  .nav-button ~ .header-nav { display: none; }
}

@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 { 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; }
}