/* ── Font faces ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/alegreya-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Cascadia Mono';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(fonts/cascadia-mono.woff2) format('woff2');
}

/* ── Color system (warm light) ───────────────────────────────── */
:root {
  --surface-base: #f0ebe3;
  --surface-canvas: #e8e2d8;
  --surface-subtle: #e0d9ce;
  --surface-mid: #d6cfc3;
  --surface-strong: #ccc5b8;
  --border-subtle: #d6cfc3;
  --border-mid: #c4bcae;
  --text-primary: #2c2416;
  --text-secondary: #5a4f3e;
  --text-tertiary: #7d7262;
  --text-quaternary: #9a8f7f;
  --brand: #2d6a4f;
  --brand-light: #3a8a66;
  --brand-dark: #245740;

  --color-semantic-red-400: #c44040;
  --color-accent-amber: #b5651d;

  --font-size-s: 0.75rem;     /* 12px – mono code, tables, pills, captions */
  --font-size-base: 1rem;      /* 16px – body text, labels */
  --font-size-md: 1.25rem;     /* 20px – section headers, subheads */
  --font-size-lg: 1.5rem;      /* 24px – page titles */
  --font-size-xl: 3rem;        /* 48px – h1 */

  --border-radius-sm: 0.125rem;
  --border-radius-md: 0.25rem;
  --border-radius-lg: 0.5rem;
}

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

html {
  -webkit-font-smoothing: antialiased;
  font-family: "Alegreya", Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}

body {
  background: var(--surface-base);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ── Layout ───────────────────────────────────────────────────── */
.page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

header {
  margin-bottom: 4rem;
}

header h1 {
  font-family: "Alegreya", Georgia, serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 2.5rem;
}

header h1 a {
  color: var(--text-primary);
  text-decoration: none;
}

header h1 a:hover {
  color: var(--brand);
}

header p {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
  max-width: 46rem;
  margin: 0 auto;
}

/* ── Internal logo link ───────────────────────────────────────── */
.internal-logo {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  text-decoration: none;
}
.internal-logo img {
  width: 24px;
  height: 24px;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Alegreya", Georgia, serif;
  font-size: var(--font-size-base);
  color: var(--text-quaternary);
  margin-bottom: 1.5rem;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  color: var(--text-tertiary);
  text-decoration: none;
  line-height: 1.1;
}
.breadcrumb a:hover {
  color: var(--text-primary);
}
.breadcrumb img {
  display: block;
}
.breadcrumb-sep {
  color: var(--border-mid);
}

/* ── Section titles ───────────────────────────────────────────── */
.section-title {
  font-family: "Alegreya", Georgia, serif;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
  margin-bottom: 1.5rem;
}

/* ── Tags ──────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--border-radius-sm);
  background: var(--surface-mid);
  color: var(--text-quaternary);
  font-size: var(--font-size-base);
  font-family: "Cascadia Mono", monospace;
  letter-spacing: 0.02em;
}

/* ── Detail pairs ──────────────────────────────────────────────── */
.detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label {
  font-family: "Alegreya", Georgia, serif;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-quaternary);
}

.detail-value {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-family: "Cascadia Mono", monospace;
}

.detail-value.best {
  color: var(--brand);
}

.detail-value.no-data {
  color: var(--text-quaternary);
  font-family: inherit;
  font-style: italic;
}

/* ── Command blocks ───────────────────────────────────────────── */
.cmd {
  position: relative;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.cmd pre {
  padding: 1rem;
  overflow-x: auto;
  font-family: "Cascadia Mono", monospace;
  font-size: var(--font-size-s);
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre;
}

.cmd .comment { color: var(--text-quaternary); }
.cmd .flag { color: var(--brand); }
.cmd .value { color: var(--color-accent-amber); }

.copy-btn {
  position: absolute;
  bottom: 0.375rem;
  right: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--border-radius-md);
  color: var(--text-quaternary);
  font-family: "Cascadia Mono", monospace;
  font-size: var(--font-size-s);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.75rem;
  height: 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-quaternary);
}

.copy-btn .check-icon { display: none; }
.copy-btn.copied .copy-icon { display: none; }
.copy-btn.copied .check-icon { display: inline-block; }
.copy-btn.copied {
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Shared component styles ──────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--font-size-base); color: var(--text-tertiary);
  text-decoration: none; border-bottom: 1px solid currentColor;
  line-height: 1.1; margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--text-primary); }

.action-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--text-quaternary); background: none; border: 1px solid var(--border-mid);
  border-radius: var(--border-radius-md); padding: 0.375rem 0.75rem;
  font-family: "Cascadia Mono", monospace; font-size: var(--font-size-s); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  height: 2rem; box-sizing: border-box; text-decoration: none; white-space: nowrap;
}
.action-btn:hover { color: var(--text-secondary); border-color: var(--text-quaternary); }

.delta-positive { color: var(--brand); font-weight: 600; }
.delta-negative { color: var(--color-semantic-red-400); font-weight: 600; }

.progress-chart { padding: 0.5rem 0; }
.progress-chart svg { display: block; }

.exp-section {
  border-top: 1px solid var(--border-subtle); padding-top: 1rem; margin-top: 1.5rem;
}
.exp-section-title {
  font-family: "Alegreya", Georgia, serif;
  font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.metric-pill {
  position: relative; cursor: default;
}
.metric-pill .metric-popover {
  display: none; position: absolute; bottom: calc(100% + 0.5rem);
  left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 0.375rem 0.625rem; background: var(--text-primary);
  color: var(--surface-base); border-radius: var(--border-radius-md);
  font-family: Alegreya, Georgia, serif; font-size: var(--font-size-s);
  line-height: 1.4; z-index: 10; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.metric-pill .metric-popover::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: var(--text-primary);
}
.metric-pill:hover .metric-popover { display: block; }

/* ── Clone / Show popover ─────────────────────────────────────── */
.clone-wrap { position: relative; }
.clone-popover {
  display: none; position: absolute; top: calc(100% + 0.5rem); right: 0;
  z-index: 20;
}
.clone-popover.visible { display: block; }
.clone-pre {
  background: var(--surface-canvas); border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-md); padding: 0.75rem 5rem 0.75rem 1rem;
  font-family: "Cascadia Mono", monospace; font-size: var(--font-size-s);
  line-height: 1.6; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer; position: relative;
  transition: border-color 0.15s; margin: 0;
}
.clone-pre:hover { border-color: var(--text-quaternary); }
.clone-pre.copied { border-color: var(--brand); }
.clone-pre.copied::after {
  content: 'Copied!'; position: absolute; top: 50%; right: 0.75rem;
  transform: translateY(-50%); font-size: var(--font-size-s);
  color: var(--brand); font-weight: 600;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: 2rem 1rem; }
}