/* copied verbatim from ~/course-design/site/page/course/style.css: tokens, base, reply card, file card */
:root {
  color-scheme: light dark;

  --gray-100: #fcfcfc;
  --gray-200: #f7f7f5;
  --gray-300: #f0f0ee;
  --gray-400: #e6e6e3;
  --gray-1000: #70706c; /* 4.85:1 on gray-100 — passes AA at 12–13px */
  --gray-1100: #62625f; /* 5.96:1 */
  --gray-1200: #1c1c1a;

  --surface: #fff;        /* cards, popovers, tips */
  --on-ink: #fff;         /* text on a gray-1200 fill */
  --ink-hover: #000;      /* gray-1200 fill on hover */
  --shadow: 0 0 0;        /* rgb triplet for shadows and rings */
  --bar-2: #8a8a86; --bar-3: #b9b9b5; --bar-4: #dcdcd8; /* chart greys, darkest first */
  /* file-card kinds: the margin-note hues (assets/neat-annotations.css) */
  --kind-prose: #b8751a;
  --kind-config: #3b72c4;
  --kind-script: #2f8f5b;

  --font: Inter, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-normal: 400;
  --weight-medium: 500;

  /* type scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-ui: 14px;
  --text-body: 16px;
  --text-h2: 20px;
  --text-h1: 24px;

  --leading-body: 1.6;
  --leading-heading: 1.25;

  /* spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  --radius: 8px;
  --measure: 55ch; /* Inter renders ~1.35 chars per ch; 55ch ≈ 72–75 characters */

  --border-hairline: 1px;

  --elevation-raised:
    0 0 0 1px rgb(var(--shadow) / 0.05),
    0 1px 3px rgb(var(--shadow) / 0.05),
    0 4px 10px -4px rgb(var(--shadow) / 0.05);
  --elevation-raised-hover:
    0 0 0 1px rgb(var(--shadow) / 0.07),
    0 1px 3px rgb(var(--shadow) / 0.07),
    0 4px 10px -4px rgb(var(--shadow) / 0.08);
}

/* Follows the system setting. Same scale, inverted: 100 is the page, 1200 is the ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --gray-100: #121212;
    --gray-200: #181817;
    --gray-300: #222220;
    --gray-400: #2e2e2b;
    --gray-1000: #8f8f8a; /* 5.3:1 on gray-100 */
    --gray-1100: #a8a8a3; /* 7.1:1 */
    --gray-1200: #ededea;

    --surface: #1c1c1b;
    --on-ink: #121212;
    --ink-hover: #fff;
    --shadow: 255 255 255;
    --bar-2: #8e8e89; --bar-3: #5c5c58; --bar-4: #3a3a37;
    --kind-prose: #d39a4a;
    --kind-config: #7ea3e0;
    --kind-script: #6cb890;
  }
}

@media (min-resolution: 2dppx) {
  :root { --border-hairline: 0.5px; }
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body {
  margin: 0;
  background: var(--gray-100);
  color: var(--gray-1200);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-normal);
}
/* reply card: what the agent said back. white page against the grey prompt,
   proportional type because the agent writes prose. a reply right after its
   prompt tucks up under it, so the pair reads as one exchange */
.reply {
  position: relative;
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08);
  font-size: var(--text-sm);
  line-height: 24px;
  color: var(--gray-1100);
}
@media (min-width: 1024px) { .reply { margin-inline: -32px; padding-inline-start: 32px; } }
.prompt + .reply, .ann:has(> .prompt) + .reply, .prompt + .ann:has(> .reply), .ann:has(> .prompt) + .ann:has(> .reply) { margin-top: calc(-1 * var(--s-2)); }
.reply > :first-child { margin-top: 0; }
.reply > :last-child { margin-bottom: 0; }
.reply p { margin: var(--s-2) 0; }
.reply ul, .reply ol { margin: var(--s-2) 0; padding-inline-start: var(--s-5); }
.reply li { margin: 2px 0; }
.reply strong { font-weight: var(--weight-medium); color: var(--gray-1200); }
.reply code { font-family: var(--mono); font-size: 0.92em; }
.reply a { text-decoration: underline; text-underline-position: from-font; }
/* file card: an excerpt from a real file. same page as the reply card, with
   the file's path in a thin header, like the doc viewer in Talking to agents */
.file {
  position: relative;
  margin: var(--s-4) 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08);
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 24px;
  color: var(--gray-1100);
}
@media (min-width: 1024px) { .file { margin-inline: -32px; } }
.file-head {
  display: flex; align-items: center;
  padding: 7px var(--s-4);
  background: var(--gray-200);
  border-bottom: 1px solid var(--gray-300);
}
@media (min-width: 1024px) { .file-head, .file-body { padding-inline-start: 32px; } }
.file-head { gap: var(--s-2); }
.file-name { font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-1000); overflow-wrap: anywhere; }
/* the kind of file, read from its extension: the icon is the only colour the
   card adds. same hues as the margin notes */
.file-kind { display: grid; place-items: center; flex: none; color: var(--gray-1000); }
.file[data-file-kind="prose"] .file-kind { color: var(--kind-prose); }
.file[data-file-kind="config"] .file-kind { color: var(--kind-config); }
.file[data-file-kind="script"] .file-kind { color: var(--kind-script); }
/* key -> value rows (a toml, a json, a frontmatter). one grid for the list,
   so the key column lines up on the longest key */
.file-kv {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: var(--s-4);
  margin: var(--s-2) 0;
  padding: 0;
}
.file-kv-row { display: contents; }
.file-kv dt, .file-kv dd {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--gray-300);
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 20px;
  overflow-wrap: anywhere;
}
.file-kv-row:last-child > * { border-bottom: 0; }
.file-kv dt { color: var(--gray-1000); }
.file-kv dd { color: var(--gray-1200); }
/* a long string is prose: proportional, wrapped, paragraph breaks kept */
.file-kv dd.is-prose {
  font-family: var(--font);
  font-size: var(--text-sm);
  line-height: 22px;
  color: var(--gray-1100);
  white-space: pre-line;
  text-wrap: pretty;
}
.file-muted { color: var(--gray-1000); }
@media (max-width: 560px) {
  .file-kv { grid-template-columns: 1fr; }
  .file-kv dt { padding-bottom: 0; border-bottom: 0; }
  .file-kv dd { padding-top: 0; }
}
/* frontmatter rows sit above the document they head */
.file-kv + * { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--gray-300); }
.file-tree { grid-template-columns: max-content minmax(0, 1fr); }
.file-tree dt, .file-tree dd { padding: 1px 0; border-bottom: 0; }
.file-tree .is-branch dt { color: var(--gray-1200); }
.file-tree-child {
  grid-column: 1 / -1;
  margin-inline-start: 3px;
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--gray-300);
}
/* a script's comments, read as prose between the code */
.file-prose { margin: var(--s-2) 0; text-wrap: pretty; }
.file-body { padding: var(--s-3) var(--s-4); }
.file-body > :first-child { margin-top: 0; }
.file-body > :last-child { margin-bottom: 0; }
.file-body p { margin: var(--s-2) 0; }
.file-body ul, .file-body ol { margin: var(--s-2) 0; padding-inline-start: var(--s-5); }
.file-body li { margin: 2px 0; }
.file-body strong { font-weight: var(--weight-medium); color: var(--gray-1200); }
.file-body code { font-family: var(--mono); font-size: 0.92em; }
/* fenced block inside a reply or file card: a file tree or a file's own text.
   plain mono, no pill, the card is already the frame */
.reply pre, .file-body pre {
  margin: var(--s-2) 0;
  padding: 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 20px;
  color: var(--gray-1200);
}