/* Geometry and spacing. Text and paint live in their own sheets. */
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; }
[hidden] { display: none !important; }
main, header, footer, nav { display: block; }
button, select, textarea { max-width: 100%; }
a, button, select, textarea { touch-action: manipulation; }
a { min-height: 44px; min-width: 44px; }
button, select { min-height: 52px; }
p { margin: 0 0 1.15rem; max-width: 68ch; }
h1, h2, h3 { margin: 0; }
ul { margin: 1rem 0 1.3rem; padding-left: 1.5rem; }
li { margin: .7rem 0; padding-left: .15rem; max-width: 65ch; }
.notebook-top, .breadcrumb, main, .notebook-footer {
  width: min(100% - 3rem, 1184px);
  margin-inline: auto;
}
.notebook-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.65rem 1.35rem;
}
.notebook-top p { margin: 0; }
.breadcrumb { padding-block: .4rem 1.2rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { margin: 0; padding: 0; }
.breadcrumb a { display: inline-flex; align-items: center; padding-block: .5rem; }
.breadcrumb-mark { padding-inline: .3rem; }
.notebook-cover { padding-block: 3.5rem 3rem; }
.opening-page .notebook-cover {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 3.5rem;
}
.page-label { margin-bottom: 1.75rem; display: inline-block; padding: .35rem .7rem; }
.cover-lead { margin: 1.8rem 0 0; max-width: 48ch; }
h1 span { display: block; margin-top: .15em; }
.notebook-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
.notebook-art span { position: absolute; display: block; }
.paint-disc { width: 73%; aspect-ratio: 1; left: 6%; top: 6%; }
.paint-window { width: 60%; height: 61%; left: 30%; top: 29%; }
.paint-slash { width: 96%; height: 13%; top: 45%; left: 0; }
.paint-dot { width: 14%; aspect-ratio: 1; top: 78%; left: 10%; }
.paint-ticks { width: 20%; height: 19%; top: 4%; left: 78%; }
.notebook-pages { padding-bottom: 4rem; }
.notebook-section, .opening-answer, .worksheet-section {
  padding-block: 2.5rem;
  max-width: 100%;
}
.notebook-section > h2, .opening-answer > h2, .worksheet-section > h2 {
  margin-bottom: 1.4rem;
}
.reading-page .notebook-pages { max-width: 1000px; }
.reading-page .notebook-section > p { max-width: 66ch; }
.opening-answer { padding: 2rem 2.25rem; margin-block: .5rem 1.5rem; }
.evidence-card { padding: 1.4rem 1.65rem 1.1rem; margin-block: 1.5rem .4rem; max-width: 790px; }
.evidence-card h3 { margin-bottom: .8rem; }
.evidence-card p:last-of-type { margin-bottom: .7rem; }
.evidence-card .source-label { margin-bottom: .6rem; }
.source-links { display: flex; flex-wrap: wrap; gap: .2rem 1.7rem; margin-top: .7rem; }
.source-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .5rem; }
.source-link span { flex-shrink: 0; }
.route-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block: 1.5rem; }
.care-route, .cost-route { padding: 1.75rem; min-width: 0; }
.care-route h2, .cost-route h2 { margin-bottom: 1rem; }
.care-route p, .cost-route p { max-width: 42ch; }
.question-list { margin-bottom: 0; }
.notebook-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.75rem 0; }
.notebook-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 1.4rem 1.5rem; align-content: start; }
.entry-title { grid-column: 1; }
.entry-description { grid-column: 1; margin-top: .7rem; max-width: 43ch; }
.entry-arrow { grid-column: 2; grid-row: 1 / 3; }
.next-note { margin-block: 1.5rem 0; }
.notebook-link, button { display: inline-flex; align-items: center; justify-content: center; gap: 1.3rem; padding: .8rem 1.2rem; }
.notebook-link { justify-content: space-between; max-width: 100%; }
.notebook-link span { flex-shrink: 0; }
.notebook-footer { padding-block: 1.8rem 2.5rem; }
.notebook-footer p { margin: 0; max-width: 68ch; }
.cost-worksheet { padding: 1.8rem; margin-top: 1rem; }
.worksheet-intro { max-width: 60ch; }
.worksheet-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.65rem; margin-block: 1.5rem 2rem; }
.worksheet-question { display: flex; flex-direction: column; min-width: 0; }
label { display: block; margin-bottom: .6rem; max-width: 46ch; }
select { width: 100%; padding: .65rem 2.15rem .65rem .7rem; }
.worksheet-question select { margin-top: auto; }
textarea { display: block; width: 100%; padding: 1rem; resize: vertical; min-height: 140px; }
.worksheet-result { padding-top: 2rem; }
.worksheet-result h3 { margin-bottom: .8rem; }
.worksheet-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 5; padding: .8rem 1.2rem; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 760px) {
  .notebook-top, .breadcrumb, main, .notebook-footer { width: min(100% - 2rem, 650px); }
  .notebook-top { gap: .7rem; padding-block: 1.3rem 1rem; align-items: start; }
  .notebook-purpose { max-width: 11ch; text-align: right; }
  .notebook-cover { padding-block: 2rem 2.25rem; }
  .opening-page .notebook-cover { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 1.5rem; }
  .notebook-art { width: min(76%, 310px); margin: 0 auto; }
  .page-label { margin-bottom: 1.4rem; }
  .cover-lead { margin-top: 1.4rem; }
  .notebook-section, .worksheet-section { padding-block: 2rem; }
  .opening-answer { padding: 1.5rem 1.25rem; }
  .route-comparison, .notebook-entries, .worksheet-fields { grid-template-columns: 1fr; }
  .evidence-card { padding: 1.2rem 1.1rem; }
  .care-route, .cost-route { padding: 1.4rem; }
  .notebook-entry { padding: 1.2rem; }
  .cost-worksheet { padding: 1.2rem; }
  .worksheet-fields { gap: 1.5rem; }
  .source-link { min-height: 48px; }
  .notebook-footer { padding-block: 1.7rem 2rem; }
}
@media print {
  @page { margin: 1.5cm; }
  .skip-link, .notebook-art, .worksheet-actions, .breadcrumb, .notebook-purpose { display: none !important; }
  .notebook-top, main, .notebook-footer { width: 100%; }
  .notebook-cover, .opening-page .notebook-cover { display: block; padding-block: 1.2rem; }
  .notebook-section, .worksheet-section { padding-block: 1rem; }
  .evidence-card, .care-route, .cost-route, .worksheet-question, .worksheet-result { break-inside: avoid; }
  .worksheet-fields { gap: 1rem; }
  .cost-worksheet { padding: 1rem; }
  textarea { field-sizing: content; height: auto; min-height: 100px; }
  .notebook-pages { padding-bottom: 0; }
}