/* Lesson content inherits the shared public-site header, type and navigation. */
.guide-main {
  max-width: 850px;
  margin-inline: auto;
  padding: 34px 28px 68px;
}
.guide-main .crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
}
.guide-main .crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.guide-main .crumb a:hover { color: var(--green); text-decoration: underline; }
.guide-main h1 { max-width: 20ch; margin-bottom: 20px; font-size: 50px; line-height: 1.15; }
.guide-main .intro { max-width: 64ch; margin-bottom: 18px; font-size: 17px; line-height: 1.85; }
.guide-main .lesson-meta { margin-bottom: 23px; color: var(--muted); font-size: 12px; }
.guide-main article { max-width: 730px; margin-top: 43px; }
.guide-main article section { margin-bottom: 39px; }
.guide-main h2 { margin-bottom: 16px; font-size: 24px; line-height: 1.35; letter-spacing: -.025em; }
.guide-main p { margin-bottom: 17px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.guide-main pre { overflow-x: auto; margin: 23px 0 20px; padding: 17px 20px; border: 1px solid #d8e6d2; border-radius: 8px; color: #285b30; background: #f0f7ed; font: 13px/1.8 var(--mono); }
.guide-main code { font-family: var(--mono); font-size: 1em; }
.guide-main h3 { margin: 28px 0 14px; font-size: 18px; line-height: 1.5; }
.guide-main .array-source { margin-block: 16px; }
.guide-main .array-source summary { padding-block: 10px; color: var(--green); font-size: 14px; cursor: pointer; }
.guide-main .array-source dl { display: grid; grid-template-columns: 4rem minmax(0, 1fr); margin: 8px 0 20px; font-size: 13px; line-height: 1.7; }
.guide-main .array-source dt, .guide-main .array-source dd { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.guide-main .array-source dt { color: var(--forest); font-family: var(--mono); }
.guide-main .array-source dd { color: var(--muted); overflow-wrap: anywhere; }
.guide-main .spill-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 32px; border-radius: 4px; }
.guide-main .spill-scroll:focus-visible, .guide-main .array-source summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.guide-main table[data-spill-range] { width: 100%; border-collapse: collapse; color: var(--ink); background: #fff; font: 13px/1.65 var(--mono); font-variant-numeric: tabular-nums; }
.guide-main table[data-spill-range] caption { padding: 0 0 12px; color: var(--muted); font: 12px/1.6 var(--sans, inherit); text-align: left; }
.guide-main table[data-spill-range] td { min-width: 5.5rem; padding: 11px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-main table[data-spill-range] tr:nth-child(odd) { background: #f4f8f5; }

/* Worked-example data table: the same worksheet values the learner will meet in
   the workbook, so the guide and the exercise use identical numbers. Monospace
   and tabular figures because these are cell values, not prose. */
.guide-main table.guide-data { width: 100%; max-width: 30rem; border-collapse: collapse; margin: 4px 0 22px; color: var(--ink); background: #fff; font: 13px/1.65 var(--mono); font-variant-numeric: tabular-nums; }
.guide-main table.guide-data caption { padding: 0 0 10px; color: var(--muted); font: 12px/1.6 var(--sans, inherit); text-align: left; }
.guide-main table.guide-data th { padding: 9px 14px; border: 1px solid var(--line); background: #f4f8f5; font: 700 12px/1.5 var(--sans, inherit); text-align: left; }
.guide-main table.guide-data td { padding: 9px 14px; border: 1px solid var(--line); text-align: left; }
.guide-main table.guide-data td:first-child { width: 6rem; color: var(--muted); }
.guide-main li { margin-bottom: 13px; padding-left: 3px; color: var(--muted); font-size: 14px; }
.guide-main li b { color: var(--ink); }
.guide-main ul { padding-left: 22px; }
.guide-main .tasks { list-style: none; margin: 0; padding: 0; }
.guide-main .tasks li { margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.guide-main .tasks li:last-child { border-bottom: 1px solid var(--line); }
.guide-main .tasks b { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.guide-main .tasks p { margin: 0; font-size: 14px; }
.guide-main aside { margin: 34px 0; padding: 25px 28px; border: 1px solid var(--line); border-radius: 12px; background: #f4f8f5; }
.guide-main aside h2 { font-size: 19px; }
.guide-main aside p { margin-bottom: 12px; font-size: 13px; line-height: 1.8; }
.guide-main aside p:last-child { margin-bottom: 0; }
.guide-main .next { padding-top: 29px; border-top: 1px solid var(--line); }
.guide-main .practice-note { max-width: 64ch; margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.guide-main .related { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.guide-main .related a { display: block; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: #fff; font-size: 13px; font-weight: 750; text-decoration: none; }
.guide-main .related a:hover { border-color: var(--green); background: #f4f8f5; }
.guide-main .related span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 500; }
.guide-main .related b { color: var(--forest); font-size: 14px; }
.guide-main .lesson-index { list-style: none; margin: 32px 0; padding: 0; }
.guide-main .guide-search { margin-top: 28px; }
.guide-main .guide-search > label { display: block; margin-bottom: 8px; color: var(--forest); font-size: 13px; font-weight: 750; }
.guide-main .guide-search-field { display: flex; align-items: center; min-height: 50px; padding-inline: 14px; border: 1px solid #b9cdbf; border-radius: 8px; background: #fff; }
.guide-main .guide-search-field:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.guide-main .guide-search input { width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--forest); font: inherit; font-size: 16px; }
.guide-main .guide-search-field button { flex: none; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--green); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.guide-main .guide-search > p { margin: 9px 0 0; font-size: 12px; }
.guide-main .guide-search-empty { margin-top: 26px; padding-block: 20px; }
.guide-main .guide-search-empty h2 { font-size: 21px; }
.guide-main .guide-search-empty p { font-size: 14px; }
.guide-main [hidden] { display: none !important; }
.guide-main .lesson-index li { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.guide-main .lesson-index li:last-child { border-bottom: 1px solid var(--line); }
.guide-main .lesson-index a { display: flex; align-items: center; gap: 20px; min-height: 75px; padding: 15px 12px; color: var(--ink); text-decoration: none; }
.guide-main .lesson-index a:hover { background: #f4f8f5; }
.guide-main .lesson-number { flex: none; width: 21px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.guide-main .lesson-detail { min-width: 0; }
.guide-main .lesson-index b { display: block; font-size: 14px; font-weight: 750; }
.guide-main .lesson-index small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
@media (max-width: 767px) {
  .guide-main { padding: 22px 24px 52px; }
  .guide-main h1 { font-size: 39px; letter-spacing: -.035em; }
  .guide-main .intro { font-size: 16px; }
}
@media (max-width: 460px) {
  .guide-main { padding-inline: 22px; }
  .guide-main h1 { font-size: 35px; }
  .guide-main h2 { font-size: 22px; }
  .guide-main .crumb { gap: 9px; font-size: 11px; }
  .guide-main .related { grid-template-columns: 1fr; }
  .guide-main aside { padding: 22px; }
  .guide-main pre { padding: 14px; font-size: 11px; }
  .guide-main .lesson-index a { gap: 12px; padding-inline: 0; }
  .guide-main .lesson-index b { font-size: 13px; }
}

/* Teaching content surfaced from each exercise: the idea, then the task. */
.guide-main .guide-teach-list { list-style: none; margin: 0; padding: 0; }
.guide-main .guide-teach-list li { margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.guide-main .guide-teach-list li:last-child { border-bottom: 1px solid var(--line); }
.guide-main .guide-teach-list li > b { display: block; margin-bottom: 6px; font: 700 12px/1.4 var(--sans, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.guide-main .guide-teach-list p { margin: 0 0 8px; }
.guide-main .guide-teach-list p:last-child { margin-bottom: 0; }
.guide-main .guide-teach { color: var(--muted); }

/* Cross-links from a lesson guide to the applied guides that use the skill. */
.guide-main .guide-links { list-style: none; margin: 0; padding: 0; }
.guide-main .guide-links li { padding: 14px 0; border-top: 1px solid var(--line); }
.guide-main .guide-links li:last-child { border-bottom: 1px solid var(--line); }
.guide-main .guide-links p { margin: 4px 0 0; color: var(--muted); }

/* The /guides/ index. */
.guide-main .guide-index { list-style: none; margin: 0 0 28px; padding: 0; }
.guide-main .guide-index li { padding: 20px 0; border-top: 1px solid var(--line); }
.guide-main .guide-index li:last-child { border-bottom: 1px solid var(--line); }
.guide-main .guide-index p { margin: 6px 0 0; color: var(--muted); }
.guide-main .guide-index-lessons { font: 12px/1.6 var(--mono); }