/* Claude Opus 5.5 MAX design; integrated and checked by Codex. */
:root:not([data-theme="dark"]) {
  --bg: #faf4e6;
  --paper: #fffcf5;
  --wash: #e6eddf;
  --ink: #1c2a36;
  --muted: #51606a;
  --brand: #1f6f6b;
  --line: #d9cfb8;
  --gold: #a67a1f;
  --danger: #b23a2e;
}

:root[data-theme="dark"] {
  --bg: #121c24;
  --paper: #1a2731;
  --wash: #22342f;
  --ink: #f5eedd;
  --muted: #a9b6ae;
  --brand: #6fc2b8;
  --line: #33444e;
  --gold: #e3b95b;
  --danger: #f0877a;
}

body {
  font: 700 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.learning-header, .site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 4px 14px rgba(60, 40, 20, 0.05);
}
.brand:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand-name {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}
h1, h2, h3, h4 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6em;
}
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
}
h3 {
  font-size: 
1.2rem;
}
h4 {
  font-size: 1rem;
}
.card, .quiz-question-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 18px rgba(60, 40, 20, 0.06);
}
.quiz-question-card {
  border-left: 4px solid var(--gold);
  margin-bottom: 24px;
  scroll-margin-top: 96px;
}
.focus-grid:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.focus-grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 18px rgba(60, 40, 20, 0.06);
}
.focus-grid h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--brand);
}
.focus-grid p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}
.button, .btn, button {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 700 1rem/1.25 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
a.button:not([hidden]), a.btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button:hover, .btn:hover, button:hover {
  background: var(--wash);
  border-color: var(--brand);
}
.primary, .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.14);
}
.primary:hover, .btn-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  filter: brightness(1.08);
}
.button:focus-visible, .btn:focus-visible, button:focus-visible, .quiz-jumps a:focus-visible, .library-extras summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
button:disabled, .button[aria-disabled="true"], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.library-extras summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
  color: var(--ink);
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}
details.library-extras[open] > summary, .library-extras details[open] > summary {
  margin-bottom: 16px;
}
.quiz-jumps:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
  padding: 16px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.quiz-jumps a:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.quiz-jumps a:hover {
  border-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 900px) {
  .focus-grid:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .card, .quiz-question-card {
    padding: 20px;
  }
}
@media (max-width: 390px) {
  .learning-header, .site-header {
    padding: 12px 16px;
  }
  .focus-grid:not([hidden]) {
    gap: 12px;
  }
  .focus-grid article {
    padding: 16px;
  }
}
/* Readable, bold practice and physical-calculator instruction text. */
.focus-practice{margin-bottom:1.5rem}.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.focus-grid article{border:1px solid var(--line,#b4bcc5);border-radius:1rem;padding:1rem}.focus-grid h3{margin-top:0}.focus-grid .button{margin-bottom:.4rem}
.question-card,.answer-key,.calc-dock,.focus-practice,.quiz-hub,.reading,.worked{font-weight:700}.question-card *,.answer-key *,.calc-dock *,.focus-practice *,.quiz-hub *,.reading *,.worked *{font-weight:700}
.walk-tools{flex-wrap:wrap}.walk-tools select{min-height:44px}.menu-label{border-left:4px solid #468189;padding:.65rem}.button-label{margin-bottom:.35rem}.walk-steps li{margin-bottom:1rem}.screen-check{font-size:1rem}.key-sequence kbd{white-space:normal}
@media(max-width:850px){.focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.focus-grid{grid-template-columns:1fr}.walk-tools{align-items:stretch}.walk-navigation{flex-wrap:wrap}}

/* Coordinator acceptance fixes after the isolated frontend pass. */
.focus-practice h1{font-size:clamp(1.8rem,4vw,2.65rem);line-height:1.15;margin:.4rem 0 .8rem}
.calc-dock .model-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.calc-dock .model-picker label{display:flex;align-items:center;gap:.35rem;min-width:0;min-height:44px;padding:.4rem;font-size:.86rem;line-height:1.35}
.calc-dock .model-picker input{flex:0 0 auto}
.quiz-jumps a{min-height:44px;display:inline-flex;align-items:center;padding:.55rem .8rem}
@media(max-width:560px){.focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-grid article{padding:.85rem}.focus-grid h3{font-size:1.05rem;line-height:1.3}.focus-grid p{font-size:.9rem}.focus-grid .button{font-size:.85rem;padding:.55rem .6rem}.focus-grid a:not(.button){display:block;margin-top:.5rem;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Match the existing home and learning style-token contracts. */
:root{color-scheme:light;--surface:var(--paper);--surface-2:var(--wash);--surface2:var(--wash);--text:var(--ink);--text-muted:var(--muted);--accent:var(--brand);--accent-ink:var(--paper);--accent-soft:var(--wash);--serif:var(--sans)}
html[data-theme="dark"]{color-scheme:dark}
body :is(p,a,button,label,input,select,textarea,li,td,th,summary,small,span,h1,h2,h3,h4){font-weight:700}
.focus-grid article{display:flex;flex-direction:column;gap:.65rem}
.focus-grid article .button{margin-top:auto}
.brand span{font-size:.75rem}

/* Guidance integration: retain the existing responsive drawer behavior. */
#calc-dock.calc-dock{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow-wrap:anywhere}
.calc-head{border-bottom:1px solid var(--line);padding-bottom:.75rem;margin-bottom:.75rem}
.calc-dock .model-picker label{background:var(--wash);border:1px solid var(--line);border-radius:.7rem}
.calc-dock .model-picker label:has(input:checked){border:2px solid var(--brand)}
.walk-step{background:var(--paper);border:1px solid var(--line);border-radius:.8rem;padding:1rem}
.key-sequence kbd{background:var(--wash);color:var(--ink);border-color:var(--muted);border-radius:.35rem;font-weight:700}
.menu-label{border-color:var(--brand);background:var(--wash);color:var(--ink);border-radius:.35rem}
.screen-check{background:var(--wash);color:var(--ink);border-left:4px solid var(--gold);padding:.65rem;border-radius:.35rem}
input:not([type=radio]):not([type=checkbox]),select,textarea{background:var(--paper);color:var(--ink);border:1px solid var(--line);min-height:44px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.learning-header .brand,.brand-name{font-family:var(--sans);font-weight:700}
@media(max-width:560px){.focus-grid:not([hidden]){gap:.75rem;margin:1.5rem 0}.focus-grid article{padding:.85rem}.card,.quiz-question-card{padding:1rem}.walk-navigation{gap:.5rem}.walk-navigation button{flex:1}}
/* Primary-link contrast must beat the inherited navigation-link rule. */
body a.button.primary,body button.primary,body .btn.btn-primary{background:var(--brand);color:var(--paper);border-color:var(--brand)}
:root:not([data-theme="dark"]),:root[data-theme="dark"]{--surface:var(--paper);--surface-2:var(--wash);--surface2:var(--wash);--text:var(--ink);--text-muted:var(--muted);--accent:var(--brand);--accent-ink:var(--paper);--accent-soft:var(--wash);--copper:var(--brand);--brand-deep:var(--brand);--focus:var(--gold)}

/* Magic requested every word in the learning interface to be bold. */
body,body *{font-weight:700!important}

.quiz-jumps a[aria-current="page"]{background:var(--brand);color:var(--paper);border-color:var(--brand)}
.model-options{margin:.75rem 0}
.model-options>summary{padding:.65rem .8rem;background:var(--wash);border:1px solid var(--line);border-radius:.65rem;min-height:44px;cursor:pointer}
.model-options[open] .model-picker{margin-top:.75rem}

/* Focused five-question practice sessions (scoped). */
.practice-session{max-width:100%;overflow-wrap:anywhere}
.practice-session .session-head{margin-bottom:1rem}
.practice-session .session-nav,.session-summary .actions{flex-wrap:wrap}
.session-summary{max-width:100%;overflow-wrap:anywhere}
.session-summary .session-summary-list{margin:1rem 0;padding-left:1.25rem}
.session-summary .session-summary-list li{margin-bottom:.75rem}
.session-summary .session-summary-list .small{display:block}
@media(max-width:560px){.practice-session .session-nav button,.session-summary .actions button{flex:1 1 auto}}
