/* Shared stylesheet for all Karpeles Publishing book companions.
   Styles only the shell (header, navigation, footer) and the home page.
   Every selector is prefixed cmp- so chapter demonstration styles are untouched.
   Book-specific colour: override --cmp-accent (and --cmp-accent-soft) on :root. */

:root {
  --cmp-bg: #f7f6f2;
  --cmp-surface: #ffffff;
  --cmp-ink: #1a2128;
  --cmp-muted: #5d6670;
  --cmp-line: #e2dfd7;
  --cmp-accent: #0f6b70;
  --cmp-accent-soft: #e4efee;
  --cmp-max: 1000px;
  --cmp-max-home: 1120px;
  --cmp-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --cmp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cmp-bg: #10161c;
    --cmp-surface: #161f27;
    --cmp-ink: #e4e9ec;
    --cmp-muted: #9aa6ae;
    --cmp-line: #26333d;
    --cmp-accent: #5cbab6;
    --cmp-accent-soft: #173130;
  }
}

/* Page base for pages that use the shell */
html.cmp-page { -webkit-text-size-adjust: 100%; }
html.cmp-page body { background: var(--cmp-bg); color: var(--cmp-ink); }
.cmp-page *, .cmp-page *::before, .cmp-page *::after { box-sizing: border-box; }

/* Header */
header.cmp-header { max-width: none; margin: 0; padding: 0; }
.cmp-header { background: var(--cmp-bg); color: var(--cmp-ink); font-family: var(--cmp-sans); border-bottom: 1px solid var(--cmp-line); }
.cmp-topbar { max-width: var(--cmp-max); margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cmp-home .cmp-topbar, .cmp-home .cmp-wrap { max-width: var(--cmp-max-home); }
.cmp-book { font: 600 16px/1.3 var(--cmp-serif); color: var(--cmp-ink); text-decoration: none; }
.cmp-book:hover { color: var(--cmp-accent); }
.cmp-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; line-height: 1.5; }
.cmp-nav a, .cmp-nav span { color: var(--cmp-muted); text-decoration: none; white-space: nowrap; }
.cmp-nav a:hover { color: var(--cmp-accent); text-decoration: underline; text-underline-offset: 3px; }
.cmp-nav [aria-disabled="true"] { opacity: .45; }
.cmp-nav a[aria-current="page"] { color: var(--cmp-ink); font-weight: 600; }

.cmp-title { max-width: var(--cmp-max); margin: 0 auto; padding: 36px 32px 34px; border-top: 1px solid var(--cmp-line); }
.cmp-eyebrow { margin: 0 0 10px; font: 600 12px/1.4 var(--cmp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-accent); }
.cmp-header h1 { margin: 0 0 10px; font: 500 clamp(32px, 5vw, 48px)/1.08 var(--cmp-serif); letter-spacing: -.01em; color: var(--cmp-ink); }
.cmp-lead { margin: 0 0 12px; max-width: 46em; font: 400 clamp(18px, 2.2vw, 21px)/1.4 var(--cmp-serif); color: var(--cmp-ink); }
.cmp-summary { margin: 0; max-width: 46em; font-size: 15.5px; line-height: 1.6; color: var(--cmp-muted); }

/* Footer */
footer.cmp-footer { max-width: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--cmp-line); background: var(--cmp-bg); font: 14px/1.6 var(--cmp-sans); color: var(--cmp-muted); }
.cmp-footer-inner { max-width: var(--cmp-max); margin: 0 auto; padding: 26px 32px 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.cmp-home .cmp-footer-inner { max-width: var(--cmp-max-home); }
.cmp-footer p { margin: 0; }
.cmp-footer-title { font-family: var(--cmp-serif); font-size: 15px; color: var(--cmp-ink); }
.cmp-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cmp-footer a { color: var(--cmp-accent); text-decoration: none; }
.cmp-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Home page */
.cmp-home body { margin: 0; font: 16px/1.6 var(--cmp-sans); -webkit-font-smoothing: antialiased; }
.cmp-wrap { max-width: var(--cmp-max); margin: 0 auto; padding: 0 32px; }
.cmp-masthead { padding: 56px 0 40px; border-bottom: 1px solid var(--cmp-line); }
.cmp-masthead h1 { margin: 0 0 8px; font: 500 clamp(36px, 6vw, 60px)/1.05 var(--cmp-serif); letter-spacing: -.015em; }
.cmp-byline { margin: 0 0 22px; font: italic 400 19px/1.4 var(--cmp-serif); color: var(--cmp-muted); }
.cmp-intro { margin: 0 0 26px; max-width: 40em; font-size: 17px; }
.cmp-stats { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; padding: 0; list-style: none; }
.cmp-stats li { font-size: 14px; color: var(--cmp-muted); }
.cmp-stats b { display: block; font: 500 30px/1.1 var(--cmp-serif); color: var(--cmp-ink); font-variant-numeric: tabular-nums; }

.cmp-part { padding-top: 44px; }
.cmp-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--cmp-line); }
.cmp-part-head p { margin: 0; font: 600 12px/1.4 var(--cmp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-accent); }
.cmp-part-head h2 { margin: 0; font: 500 24px/1.2 var(--cmp-serif); }

.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cmp-card { display: flex; flex-direction: column; background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: 12px; padding: 20px 20px 18px; }
.cmp-card:hover { border-color: color-mix(in srgb, var(--cmp-accent) 45%, var(--cmp-line)); }
.cmp-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cmp-num { font: 500 26px/1 var(--cmp-serif); color: var(--cmp-accent); font-variant-numeric: tabular-nums; }
.cmp-count { font-size: 12.5px; color: var(--cmp-muted); }
.cmp-card h3 { margin: 0 0 4px; font: 600 20px/1.25 var(--cmp-serif); }
.cmp-card h3 a { color: var(--cmp-ink); text-decoration: none; }
.cmp-card h3 a:hover { color: var(--cmp-accent); }
.cmp-card-summary { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--cmp-muted); flex: 1; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; }
.cmp-actions a { color: var(--cmp-accent); text-decoration: none; }
.cmp-actions a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cmp-github { margin-top: 52px; padding: 24px 26px; background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: 12px; }
.cmp-github h2 { margin: 0 0 8px; font: 500 22px/1.25 var(--cmp-serif); }
.cmp-github p { margin: 0 0 10px; max-width: 46em; }
.cmp-github p:last-child { margin-bottom: 0; }
.cmp-github a { color: var(--cmp-accent); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .cmp-topbar, .cmp-title, .cmp-footer-inner, .cmp-wrap { padding-left: 16px; padding-right: 16px; }
  .cmp-title { padding-top: 26px; padding-bottom: 24px; }
  .cmp-masthead { padding: 36px 0 30px; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-nav { gap: 4px 14px; }
}
@media print {
  .cmp-nav, .cmp-footer-links { display: none; }
}

/* Chapter text pages: keep wide figures, tables and equations inside the column */
.cmp-text main img { max-width: 100%; height: auto; }
.cmp-text main table { display: block; max-width: 100%; overflow-x: auto; }
.cmp-text main math[display="block"], .cmp-text main .math.display, .cmp-text main pre { display: block; max-width: 100%; overflow-x: auto; }
.cmp-text main p:has(math), .cmp-text main li:has(math) { overflow-x: auto; }

/* Pages whose own stylesheet sizes bare header elements: let the shell header span the page */
header.cmp-header { max-width: none; margin: 0; padding: 0; }

/* Shell isolation: keep page-level header/nav rules from resizing the shell */
header.cmp-header { max-width: none; margin: 0; padding: 0; }
.cmp-nav { font-family: var(--cmp-sans); margin: 0; }
.cmp-footer-note { flex-basis: 100%; max-width: 52em; font-size: 13px; }

/* Home page: secondary materials list */
.cmp-more { margin-top: 52px; }
.cmp-more h2 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--cmp-line); font: 500 24px/1.2 var(--cmp-serif); }
.cmp-more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.cmp-more li p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cmp-muted); }
.cmp-more li p.cmp-more-title { margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--cmp-ink); }
.cmp-more a { color: var(--cmp-accent); text-decoration: none; }
.cmp-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .cmp-more ul { grid-template-columns: 1fr; } }

/* Plain document pages wrapped in main.cmp-doc: break long unspaced strings on phones */
.cmp-doc { overflow-wrap: anywhere; }