.method-intro { border-bottom: 1px solid var(--line-strong); padding-bottom: 24px; margin-bottom: 32px; }
/* Learner explanations and history can contain long evidence URLs. */
main :is(p, blockquote) { overflow-wrap: anywhere; }
.method-intro h1 { max-width: 24ch; }
.goal { max-width: 65ch; margin-bottom: 28px; font-weight: var(--weight-medium); }
.method-map { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.method-map li { margin: 0; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); }
.method-map li + li::before { content: '→ '; color: var(--ink-2); }
.lab-ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; list-style: none; }
.lab-ledger > li { min-width: 0; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); background: var(--surface); padding: 16px; margin: 0; }
.lab-ledger > li[data-result="rejected"] { border-left: 4px dashed var(--fail); }
.lab-ledger > li[data-result="selected"] { border: 2px solid var(--ink); border-left-width: 6px; }
.lab-ledger .tag { margin-top: 8px; }
.lab-ledger p { margin: 6px 0 0; }
.lab-ledger strong { display: block; }
.lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lab-metrics > div { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); padding: 12px; font-size: var(--text-sm); }
.lab-metrics strong { display: block; font: var(--text-lg)/var(--lh-lg) var(--font-mono); }
.icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 8px; border: 1px solid var(--ink); border-radius: var(--r-2); color: var(--ink); font: var(--weight-medium) var(--text-xs)/var(--lh-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.tag:empty { display: none; }
.choices { display: grid; gap: 8px; margin-block: 20px; padding: 0; border: 0; }
.choices legend { margin-bottom: 8px; padding: 0; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); cursor: pointer; line-height: 24px; }
.choice:has(input:checked) { padding: 12px 14px; border: 2px solid var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--live); outline-offset: 3px; }
.choice input:focus-visible { outline: none; }
.choice input { margin-top: 3px; }
.choice .tag { grid-column: 2; }
.choice[data-state="recorded"] .tag { color: var(--surface); background: var(--ink); }
.choice[data-state="draft"] .tag { border-style: dashed; }
.paper > button + .note { margin-top: 12px; }
.method-feedback { margin-block: 20px; padding: 16px; border: 1px solid var(--line-strong); border-left: 6px solid var(--ink); background: var(--ground); }
.method-feedback[data-verdict="reconsider"] { border-left: 6px dashed var(--live); background: var(--live-soft); }
.method-feedback h3 { margin-bottom: 12px; }
.method-feedback h3:focus-visible, #search-result h3:focus-visible, .notice:focus-visible { outline: 2px solid var(--live); outline-offset: 4px; }
.method-feedback .verdict { padding: 4px 10px; font-size: var(--text-sm); }
.method-feedback[data-verdict="supported"] .verdict { color: var(--surface); background: var(--ink); }
.method-feedback .eyebrow { margin-bottom: 4px; }
.method-feedback .recorded { padding-left: 12px; border-left: 2px solid var(--ink); }
.supported-answer { padding-left: 12px; border-left: 2px solid var(--ink); font-weight: var(--weight-medium); }
.fresh-case { margin-block: 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.fresh-case h3:focus-visible { outline: 2px solid var(--live); outline-offset: 4px; }
.returning { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.returning p { margin: 0; }
.returning .status { flex-basis: 100%; color: var(--ink); }
.sources-list a { overflow-wrap: anywhere; }
.record-strip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-bottom: 24px; }
.record-strip li { display: grid; gap: 4px; min-width: 95px; max-width: 160px; margin: 0; padding: 10px; border: 1px solid var(--line-strong); background: var(--ground); font: var(--text-xs)/var(--lh-sm) var(--font-mono); overflow-wrap: anywhere; }
.record-strip li[data-match="false"] { border: 2px dashed var(--fail); }
.record-strip strong { font-size: var(--text-md); }
.record-strip small { color: var(--fail); font: var(--text-xs)/var(--lh-sm) var(--font-text); }
.project-link { max-width: 68ch; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); font-size: var(--text-sm); line-height: var(--lh-sm); }
.project-link a { font-weight: var(--weight-medium); white-space: nowrap; }
.rail-bottom #progress { margin-top: 12px; }
/* The rail has to show both project links inside a 900px-high window. */
@media (min-width: 761px) {
  /* Keep the full unit titles and status legible when system-font metrics wrap more widely. */
  .studio-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .studio-shell > aside { padding-block: 24px 16px; }
  .rail-title { margin-bottom: 16px; }
  nav button { min-height: 40px; padding-block: 8px; }
  .rail-bottom { padding-top: 16px; }
  .rail-bottom a { padding-block: 6px; }
  .rail-bottom p:last-child { margin-bottom: 0; }
}
@media (max-width: 600px) { .lab-metrics { grid-template-columns: 1fr; } .brand span { max-width: 130px; white-space: normal; } }
@media (max-width: 760px) {
  nav button:not([aria-current]):not([aria-pressed="true"]) { font-size: var(--text-sm); }
  .rail-bottom a { display: block; padding-block: 6px; }
}
/* Round 2: headed sections with an item each, the unit check and the figures (M2, M7, M13, M31). */
.unit-section { margin-block: 32px 8px; }
.unit-section > h2 { margin-bottom: 12px; }
.check-item { margin-block: 20px 28px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.check-item .check-item { margin-block: 16px 0; background: var(--ground); }
.check-item .stem { max-width: 65ch; font-weight: var(--weight-medium); }
.check-item .eyebrow { margin-bottom: 6px; }
.method-feedback[data-verdict="recorded"] { border-left-style: double; }
.case-card { max-width: 65ch; margin-block: 12px; padding: 12px 16px; border-left: 3px solid var(--ink-2); background: var(--surface); }
.case-card h3 { margin-bottom: 4px; }
.case-card p { margin: 0; }
.resolution { max-width: 65ch; margin-block: 16px; padding: 12px 16px; border: 1px dashed var(--ink-2); border-radius: var(--r-2); }
.resolution p:last-child { margin-bottom: 0; }
.completion ol { max-width: 65ch; padding-left: 24px; }
.completion li { margin-block: 6px; }
.completion li.blank { font-style: italic; }
.completion li.filled { font-weight: var(--weight-medium); }
.pipeline { margin: 16px 0; }
.pipeline-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pipeline-step { min-width: 120px; border: 1px solid var(--ink-2); background: var(--ground); }
.pipeline-step[aria-pressed="true"] { border: 3px solid var(--ink); font-weight: var(--weight-medium); }
.pipeline-step[aria-pressed="true"]::after { content: ' · chosen'; font-size: var(--text-sm); }
.pipeline-arrow { color: var(--ink-2); font-size: var(--text-lg); }
.pipeline figcaption { margin-top: 8px; color: var(--ink-2); font-size: var(--text-sm); }
.unit-check { margin-block: 40px 24px; padding-top: 24px; border-top: 2px solid var(--ink); }
.unit-status { font-weight: var(--weight-medium); }
.check-overview { margin-block: 20px; }
.check-overview ul { padding-left: 20px; }
.skip-route { margin-block: 8px 20px; }
.recommendation { max-width: 65ch; margin-block: 12px; padding: 12px 16px; border-left: 3px solid var(--ink); background: var(--surface); }
@media (max-width: 600px) { .pipeline-steps { flex-direction: column; align-items: stretch; } .pipeline-arrow { transform: rotate(90deg); align-self: center; } }
/* M30: lab figures. */
.lab-figure { margin: 20px 0; }
/* Finding 11: each SVG sets min-width to its viewBox width inline, so its text renders at 12 px or more, and the
   region around it scrolls sideways and takes keyboard focus on a narrow screen. */
.lab-scroll { overflow-x: auto; }
.lab-scroll:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
.lab-figure svg { display: block; width: 100%; height: auto; }
.lab-figure figcaption { margin-top: 8px; color: var(--ink-2); font-size: var(--text-sm); max-width: 65ch; }
.lab-box { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.lab-box.ledger { stroke-dasharray: 5 4; }
.lab-box-title { font: var(--weight-medium) 15px var(--font-text); fill: var(--ink); }
.lab-box-note { font: 12px var(--font-mono); fill: var(--ink-2); }
.lab-edge, .lab-axis { stroke: var(--ink-2); stroke-width: 1.5; }
.lab-edge.dashed { stroke-dasharray: 4 3; }
.lab-arrowhead { fill: var(--ink-2); }
.lab-point.accepted { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.lab-point.rejected { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.lab-ring { fill: none; stroke: var(--live-ink); stroke-width: 3; }
.guided-search { margin-block: 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.project-check { margin-block: 20px; }
.project-results { padding-left: 0; list-style: none; }
.project-results li { margin-block: 6px; max-width: 70ch; }
.project-results li[data-found="false"] { padding-left: 10px; border-left: 2px dashed var(--ink-2); }
.effort-bar { fill: var(--ink); }
.responsive-figure svg { max-width: 100% !important; }
.lab-guide { stroke: var(--line); stroke-width: 1; }
.lab-operation { stroke: var(--ink); stroke-width: 4; }
.lab-operation.rejected { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 4 4; }
.lab-score { font: 500 16px var(--font-mono); fill: var(--ink); }
.lab-status { font: 12px var(--font-text); fill: var(--ink-2); }
.lab-status.selected { font-weight: 600; fill: var(--live-ink); }
.lab-missing { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.effort-unfound { fill: var(--sunk); stroke: var(--ink-2); stroke-width: 1; }
.lab-box.verifier { fill: var(--live-soft); stroke: var(--live-ink); stroke-width: 2; }
.lab-arrow-label { fill: var(--ink-2); font: 19px var(--font-text); }
.lab-confirmation { fill: var(--ink); font: 600 12px var(--font-text); }
.lab-confirmation.failed { fill: var(--fail); }
/* The two views use the same submitted edges: counts beside reachability. */
.network-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-block: 20px; }
.network-views table { border-collapse: collapse; width: 100%; max-width: 22rem; }
.network-views caption { text-align: left; font-size: var(--text-sm); margin-bottom: 8px; }
.network-views th, .network-views td { text-align: left; border-bottom: 1px solid var(--line); padding: 4px 10px; }
#discovery-practice pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#discovery-practice .short-field { min-height: 3rem; height: 3rem; }
@media (max-width: 600px) { .network-views { grid-template-columns: 1fr; } }