/* Two static views of one table edge; the existing entrance handles reveal. */
.chapter-accuracy { padding-block: 36px 104px; background: #08182d; }
.chapter-accuracy .chapter-kicker { padding-top: 36px; border-top: 1px solid #aac4e030; margin-bottom: 52px; }
.av-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 9%; }
.av-heading h2 { max-width: 17ch; }
.av-result { border-left: 1px solid #aac4e030; padding-left: 40px; }
.av-result-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #b2c9e5; }
.av-result-value { margin-top: 15px; color: #edf5ff; font-size: clamp(78px, 8vw, 118px); line-height: 1.05; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.av-result-value span { font-size: .55em; letter-spacing: -.04em; color: #86b7ff; }
.av-result-context { margin-top: 13px; color: #c4d7ed; font-size: 16px; line-height: 1.6; }
.av-result-scope { max-width: 38ch; margin-top: 13px; color: #a2b9d6; font-size: 12px; line-height: 1.6; }
.av-explanation { display: grid; grid-template-columns: minmax(0,1fr); gap: 35px; margin-top: 56px; }
.av-point-example { padding: 26px; border: 1px solid #aac4e030; border-radius: 22px; background: #10243c; }
.av-figure-label { color: #b8cee8; font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.av-comparison { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.av-panel { min-width: 0; padding: 25px 22px 22px; border-radius: 15px; background: #0b1c31; border: 1px solid #aac4e026; }
.av-panel h3 { color: #edf5ff; font-size: clamp(23px,2.2vw,30px); letter-spacing: -.035em; }
.av-point-example svg { width: 100%; height: auto; overflow: visible; margin-top: 12px; }
.av-table-shadow { fill: #040f20; opacity: .55; }
.av-leg-back { fill: #355572; stroke: #577697; stroke-width: 1; }
.av-leg-front { fill: #527493; stroke: #85a6c7; stroke-width: 1; }
.av-table-top { stroke: #b4cde6; stroke-width: 1.2; stroke-linejoin: round; }
.av-table-side { fill: #496985; stroke: #7898b9; stroke-width: 1; stroke-linejoin: round; }
.av-table-front { fill: #6487a8; stroke: #9bb9d5; stroke-width: 1; stroke-linejoin: round; }
.av-table-grain { fill: none; stroke: #d6e6f3; stroke-width: .8; opacity: .18; }
.av-reference-edge { fill: none; stroke: #f1f7ff; stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .75; }
.av-measure-line { fill: none; stroke: #63a3ff; stroke-width: 2.5; }
.av-endpoint { fill: #63a3ff; stroke: #edf5ff; stroke-width: 2; }
.av-endpoint-halo { fill: #63a3ff; fill-opacity: .13; stroke: #63a3ff; stroke-opacity: .3; stroke-width: 1; }
.av-point-guide { fill: none; stroke: #63a3ff; stroke-width: 1.3; opacity: .7; }
.av-target-point { fill: #10243c; stroke: #f1f7ff; stroke-width: 1.5; stroke-dasharray: 2 2; }
.av-distance-offset { fill: none; stroke: #ffc281; stroke-width: 5; }
.av-offset-guide { fill: none; stroke: #ffc281; stroke-width: 2; }
.av-soft-contour { fill: none; stroke: #8eb0d4; stroke-linecap: round; stroke-linejoin: round; }
.av-soft-contour-wide { stroke-width: 25; opacity: .045; }
.av-soft-contour-middle { stroke-width: 13; opacity: .085; }
.av-soft-contour-inner { stroke-width: 6; opacity: .12; }
.av-panel-result { display: flex; align-items: center; justify-content: center; gap: 10px; color: #bfd8f6; font-size: 15px; line-height: 1.6; }
.av-panel-result-offset { color: #ffd3a4; }
.av-point-symbol { width: 9px; height: 9px; border-radius: 50%; background: #63a3ff; outline: 1px solid #edf5ff; outline-offset: 2px; flex: 0 0 auto; }
.av-offset-symbol { font-size: 26px; line-height: 1; }
.av-comparison-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin-top: 24px; color: #b1c7e2; font-size: 12px; line-height: 1.6; }
.av-comparison-legend > span { display: flex; align-items: center; gap: 8px; }
.av-legend-edge { width: 19px; border-top: 2px dashed #f1f7ff; }
.av-legend-point { width: 8px; height: 8px; border-radius: 50%; background: #63a3ff; border: 1px solid #edf5ff; }
.av-point-example figcaption { max-width: 45ch; margin: 23px auto 0; color: #dceaff; font-size: 17px; line-height: 1.65; text-align: center; text-wrap: balance; }
.av-copy { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5%; }
.av-copy p { max-width: 45ch; font-size: 16px; line-height: 1.8; color: #afc3dc; }
.av-copy strong { color: #edf5ff; font-weight: 550; }
.av-copy .av-next { border-left: 1px solid #aac4e030; padding-left: 26px; }
@media (max-width: 800px) {
  .chapter-accuracy { padding-bottom: 80px; }
  .av-heading { gap: 7%; }
  .av-result { padding-left: 26px; }
  .av-result-value { font-size: 78px; }
  .av-explanation { gap: 32px; margin-top: 42px; }
  .av-point-example { padding: 22px; }
  .av-panel { padding-inline: 16px; }
  .av-copy { grid-template-columns: 1fr; gap: 21px; }
  .av-copy p { max-width: 61ch; }
  .av-copy .av-next { border-left: 0; padding-left: 0; border-top: 1px solid #aac4e030; padding-top: 21px; }
}
@media (max-width: 620px) { .av-comparison { grid-template-columns: 1fr; gap: 15px; } .av-panel { padding: 22px 20px 18px; } .av-panel h3 { font-size: 27px; } .av-point-example svg { max-width: 390px; margin-inline: auto; } }
@media (max-width: 560px) {
  .chapter-accuracy { padding-block: 16px 64px; }
  .chapter-accuracy .chapter-kicker { margin-bottom: 37px; }
  .av-heading { grid-template-columns: 1fr; gap: 32px; }
  .av-result { padding: 24px 0 0; border-left: 0; border-top: 1px solid #aac4e030; }
  .av-result-value { font-size: 90px; margin-top: 10px; }
  .av-result-context { font-size: 15px; }
  .av-result-scope { max-width: none; }
  .av-explanation { margin-top: 32px; gap: 27px; }
  .av-point-example { padding: 20px 14px 23px; }
  .av-figure-label { margin-bottom: 19px; font-size: 12px; }
  .av-panel-result { font-size: 14px; }
  .av-comparison-legend { justify-content: flex-start; gap: 10px 19px; font-size: 11px; }
  .av-point-example figcaption { font-size: 16px; }
  .av-copy { gap: 18px; }
  .av-copy p { font-size: 15px; }
  .av-copy .av-next { padding-top: 18px; }
}
