/* base.css — baseline styles consuming the nonlinear theme (--nl-*).
   The theme maps the MUI/Material substrate (see nonlinear-theme.css).
   TODO(component): align baseline to canonical components → pattern-library component:* */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--nl-font);
  background: var(--nl-color-bg);
  color: var(--nl-color-fg);
  line-height: var(--md-sys-typescale-line-height);
  -webkit-font-smoothing: antialiased;
}

header, main, footer {
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  max-width: var(--nl-measure);
  margin: 0 auto;
}

header { padding-top: var(--md-sys-spacing-6); border-bottom: 1px solid var(--nl-color-line); }

nav { display: flex; gap: var(--md-sys-spacing-3); flex-wrap: wrap; align-items: baseline; }
nav a { color: var(--nl-color-fg-muted); text-decoration: none; font-size: var(--md-sys-typescale-sm); }
nav a:hover { color: var(--nl-color-fg-strong); }
nav a[aria-current="page"] { color: var(--nl-color-primary); }

main { padding-top: var(--md-sys-spacing-6); padding-bottom: var(--md-sys-spacing-6); }

h1 { font-size: clamp(var(--md-sys-typescale-xl), 5vw, var(--md-sys-typescale-3xl)); font-weight: var(--md-sys-typescale-weight-light); letter-spacing: -0.02em; line-height: var(--md-sys-typescale-line-height-tight); }
h2 { font-size: var(--md-sys-typescale-lg); font-weight: var(--md-sys-typescale-weight-regular); color: var(--nl-color-fg-strong); margin-top: var(--md-sys-spacing-6); }
h3 { font-size: var(--md-sys-typescale-md); font-weight: var(--md-sys-typescale-weight-medium); color: var(--nl-color-fg); margin-top: var(--md-sys-spacing-4); }
h4, h5, h6 { color: var(--nl-color-fg); margin-top: var(--md-sys-spacing-3); }

p { margin-top: var(--md-sys-spacing-2); }
a { color: var(--nl-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin-top: var(--md-sys-spacing-2); padding-left: var(--md-sys-spacing-3); }
li { margin-bottom: var(--md-sys-spacing-1); }

blockquote {
  margin-top: var(--md-sys-spacing-3); padding-left: var(--md-sys-spacing-3);
  border-left: 2px solid var(--nl-color-primary-dim); color: var(--nl-color-fg-muted);
  font-style: italic;
}

code { font-family: var(--nl-font-mono); font-size: 0.9em; background: var(--nl-color-surface); padding: 0.1em 0.35em; border-radius: var(--md-sys-shape-radius-sm); }
pre { margin-top: var(--md-sys-spacing-3); padding: var(--md-sys-spacing-3); background: var(--nl-color-surface); border: 1px solid var(--nl-color-line); border-radius: var(--md-sys-shape-radius-md); overflow-x: auto; }
pre code { background: none; padding: 0; }

table { margin-top: var(--md-sys-spacing-3); border-collapse: collapse; width: 100%; font-size: var(--md-sys-typescale-sm); }
th, td { text-align: left; padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2); border-bottom: 1px solid var(--nl-color-line); }
th { color: var(--nl-color-fg-strong); }

hr { margin: var(--md-sys-spacing-6) 0; border: 0; border-top: 1px solid var(--nl-color-line); }

img { max-width: 100%; height: auto; }
figure { margin-top: var(--md-sys-spacing-3); }
figcaption { font-size: var(--md-sys-typescale-sm); color: var(--nl-color-fg-muted); margin-top: var(--md-sys-spacing-1); }

.eyebrow { font-size: var(--md-sys-typescale-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--nl-color-fg-muted); }
.lede { font-size: var(--md-sys-typescale-md); color: var(--nl-color-fg-muted); max-width: 36rem; }
.muted { color: var(--nl-color-fg-muted); }
.tagline { font-style: italic; color: var(--nl-color-fg-muted); }

.grid { display: grid; gap: var(--md-sys-spacing-3); margin-top: var(--md-sys-spacing-4); }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  border: 1px solid var(--nl-color-line);
  border-radius: var(--md-sys-shape-radius-md);
  padding: var(--md-sys-spacing-3);
  display: block;
  color: inherit;
}
.card:hover { border-color: var(--nl-color-primary-dim); text-decoration: none; }
.card h3 { margin-top: 0; }
.card p { margin-top: var(--md-sys-spacing-1); color: var(--nl-color-fg-muted); font-size: var(--md-sys-typescale-sm); }

.pill {
  display: inline-block; font-size: var(--md-sys-typescale-xs);
  padding: 0.15em 0.6em; border-radius: var(--md-sys-shape-radius-full);
  border: 1px solid var(--nl-color-line); color: var(--nl-color-fg-muted);
}
.pill.active { color: var(--nl-color-primary); border-color: var(--nl-color-primary-dim); }

footer { margin-top: var(--md-sys-spacing-8); border-top: 1px solid var(--nl-color-line); color: var(--nl-color-fg-muted); font-size: var(--md-sys-typescale-xs); }

.ph-img {
  aspect-ratio: 16 / 9; width: 100%;
  border: 1px dashed var(--nl-color-line); border-radius: var(--md-sys-shape-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--nl-color-fg-muted); font-size: var(--md-sys-typescale-sm); background: var(--nl-color-surface);
  margin-top: var(--md-sys-spacing-3);
}
.ph-mermaid {
  border: 1px dashed var(--nl-color-primary-dim); border-radius: var(--md-sys-shape-radius-md);
  padding: var(--md-sys-spacing-3); background: var(--nl-color-surface); margin-top: var(--md-sys-spacing-3);
  font-family: var(--nl-font-mono); font-size: var(--md-sys-typescale-xs); color: var(--nl-color-fg-muted);
  white-space: pre-wrap;
}

/* gallery — image grid (shortcode: gallery.html) */
.gallery { display: grid; gap: var(--md-sys-spacing-3); margin-top: var(--md-sys-spacing-4); }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border-radius: var(--md-sys-shape-radius-md); }

/* blockquote — book citation (attribution line) */
blockquote p:last-child em:only-child { display: block; font-style: normal; font-size: var(--md-sys-typescale-sm); color: var(--nl-color-fg-muted); margin-top: var(--md-sys-spacing-2); }