/* PedalScope User Guide — one shared stylesheet (§B.3), matched to the
   app's dark theme (Theme.swift) with a light variant via
   prefers-color-scheme. No JavaScript lives here; keep it that way. */

:root {
  color-scheme: light dark;
  /* Dark values mirror App/PedalScope/Theme.swift. */
  --page: #0d0d0d;
  --surface: #1a1a19;
  --border: #2c2c2a;
  --ink: #ffffff;
  --ink-secondary: #c3c2b7;
  --ink-muted: #898781;
  --blue: #3987e5;
  --blue-link: #6fa9ec;
  --orange: #d95926;
  --aqua: #199e70;
  --warning-bg: #2a1c12;
  --warning-border: #d95926;
  --aside-bg: #16201c;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f6f5f2;
    --surface: #ffffff;
    --border: #d8d6cf;
    --ink: #1a1a19;
    --ink-secondary: #4a4944;
    --ink-muted: #7b7a73;
    --blue: #1d6ed0;
    --blue-link: #1d6ed0;
    --orange: #b4431a;
    --aqua: #10805a;
    --warning-bg: #fdeee4;
    --warning-border: #b4431a;
    --aside-bg: #ecf3ef;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 2rem;
}

.page-header {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.2rem 1.5rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.page-header a.site-home {
  color: var(--ink-secondary);
  font-weight: 600;
}

.page-footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.25;
  font-weight: 650;
}

h1 { font-size: 1.7rem; margin: 0.6rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; }

a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--ink); font-weight: 620; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  overflow-x: auto;
}

pre code { background: none; border: none; padding: 0; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.92em;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { color: var(--ink); font-weight: 620; }

ul, ol { padding-left: 1.4rem; }
li { margin: 0.25rem 0; }

blockquote {
  margin: 1rem 0;
  padding: 0.1rem 1rem;
  border-left: 3px solid var(--border);
  color: var(--ink-muted);
}

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

/* {{warning}} — safety callouts (§B.3). Deliberately loud in both themes. */
.warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 1.2rem 0;
  color: var(--ink);
}

/* {{aside:}} — "For the curious" collapsible math/method detail. */
details.aside {
  background: var(--aside-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 1.2rem 0;
}

details.aside summary {
  cursor: pointer;
  color: var(--aqua);
  font-weight: 620;
}

details.aside .aside-body { margin-top: 0.5rem; }

/* {{figure:}} and {{audio:}} */
figure {
  margin: 1.4rem 0;
  padding: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

figure img { max-width: 100%; height: auto; border-radius: 6px; display: block; }

figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.figure-source { display: block; font-size: 0.78rem; margin-top: 0.15rem; }

figure.audio audio { width: 100%; }

.listen-for {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

/* {{illustrate:}} / {{sim:}} deep-link buttons. */
.try-it { margin: 1rem 0; }

a.deep-link {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--aqua);
  border-radius: 8px;
  color: var(--aqua);
  padding: 0.45rem 0.9rem;
  font-weight: 600;
}

a.deep-link:hover { text-decoration: none; filter: brightness(1.2); }