/* Shared visual contract. Route-specific sheets may add layout, but should
   use these primitives for presentation and interaction. */
:root {
  --font: 'Segoe UI', Arial, sans-serif;
  --bg: #f7f6f2;
  --paper: #fff;
  --ink: #202824;
  --muted: #56645e;
  --line: #d8ded8;
  --teal: #17665d;
  --lime: #e6eddf;
  --ui-canvas: #f7f6f2;
  --ui-paper: #fff;
  --ui-ink: #17201c;
  --ui-muted: #617069;
  --ui-line: #d9e2dd;
  --ui-teal: #167c75;
  --ui-teal-dark: #0e625d;
  --ui-soft-teal: #e5f2ef;
  --ui-soft-warm: #fff5ed;
  --ui-radius: 8px;
  --ui-shadow: 0 1px 2px rgb(20 35 28 / .04), 0 10px 28px rgb(20 35 28 / .045);
}


body { background: var(--ui-canvas); color: var(--ui-ink); font-family: var(--font); }
h1, h2, h3, .brand { font-family: var(--font); }
h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.035em; font-weight: 700; }
h2 { letter-spacing: -.02em; font-weight: 650; }
.primary { background: var(--teal); border: 1px solid var(--teal); box-shadow: none; }
.primary:hover { background: #104f48; }
.sidebar { overflow-y: auto; }
.sidebar .brand { font-size: 21px; letter-spacing: -.025em; }
.content { max-width: 1320px; padding: 40px; }
.heading p { font-size: 15px; line-height: 1.65; }
.focus-band { background: #e8eee6; border: 1px solid var(--line); border-radius: 6px; }
.chapter, .course-card, .badge-tile { box-shadow: none; border-radius: 6px; }
.chapter p, .course-card p, .badge-tile p { font-size: 14px; }
.chapter-foot, .source, .footer-note { font-size: 12px; }
.section-label { gap: 16px; flex-wrap: wrap; }
.answer-field input:is([type=radio],[type=checkbox]) { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: 0 0 18px; margin: 0; }
@media (max-width: 650px) { .content { padding: 24px 16px 90px; } }
.ui-page-header { margin: 0 0 24px; }
.ui-eyebrow { color: var(--ui-teal-dark); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ui-page-header-row { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.ui-page-header h1 { color: var(--ui-ink); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.025em; line-height: 1.1; margin: 5px 0 8px; text-wrap: balance; }
.ui-page-header p { color: var(--ui-muted); font-size: 14px; line-height: 1.6; max-width: 680px; }
.ui-page-meta { color: var(--ui-muted); font-size: 12px; margin-top: 12px; }
.ui-page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.ui-breadcrumb { align-items: center; color: var(--ui-muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px; margin: 0 0 18px; }
.ui-breadcrumb a { color: var(--ui-teal-dark); text-decoration: none; }
.ui-breadcrumb a:hover { text-decoration: underline; }
.ui-surface { background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); min-width: 0; }
.ui-button { align-items: center; border-radius: 6px; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; justify-content: center; min-height: 42px; padding: 9px 14px; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.ui-button:active { transform: translateY(1px); }
.ui-button-primary { background: var(--ui-teal); border: 1px solid var(--ui-teal); color: #fff; }
.ui-button-primary:hover { background: var(--ui-teal-dark); border-color: var(--ui-teal-dark); }
.ui-button-secondary { background: var(--ui-paper); border: 1px solid var(--ui-line); color: var(--ui-ink); }
.ui-button-secondary:hover { background: var(--ui-soft-teal); border-color: #b9d8d1; }
.ui-button-text { background: transparent; border: 1px solid transparent; color: var(--ui-teal-dark); padding-left: 4px; padding-right: 4px; }
.ui-button-text:hover { background: var(--ui-soft-teal); }
.ui-button svg { height: 16px; width: 16px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #4aa39b; outline-offset: 2px; }
table { max-width: 100%; }
.table-wrap { border: 1px solid var(--ui-line); border-radius: 6px; overflow-x: auto; }
input, select, textarea { border-color: var(--ui-line); border-radius: 6px; }
@media (max-width: 650px) {
  .ui-page-header-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .ui-page-actions { width: 100%; }
  .ui-page-actions .ui-button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ui-button { transition: none; } }