/* Asphalt page only. Shared look lives in ../assets/explainers.css. */

/* diagrams: keep text at a readable size on wide screens instead of blowing up */
.page-sec .fig > svg, .page-sec .fig .stage > svg { max-width: 520px; margin-left: auto; margin-right: auto; }
.pfwrap { max-width: 540px; }
.pfsvg .pl .sel { pointer-events: none; }

/* numbered key under a drawing */
ol.key { list-style: none; padding: 0; margin: 10px 0; counter-reset: k; }
ol.key li { counter-increment: k; position: relative; padding: 4px 0 8px 38px; }
ol.key li::before { content: counter(k); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border: 2px solid #000; border-radius: 50%; background: #ffff99; font: 900 14px/26px var(--sans); text-align: center; }

/* step-through diagrams */
.stepper .say { font-size: 17px; line-height: 1.4; min-height: 4.3em; margin: 10px 0 6px; }
.stepper .ctl, .stepctl { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.stepper .ctl .btn, .stepctl .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.stepper .ctl .n, .stepctl .n { font: bold 15px var(--ui); min-width: 3.2em; text-align: center; flex: 0 0 auto; }
.stepper .dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.stepper .dots .b95 { min-width: 44px; }
.stepper [data-on] { transition: opacity .35s; }
.arr.in { display: inline-block; width: .55em; height: .7em; }

/* picker buttons above a drawing */
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pick .b95 { flex: 1 1 auto; }

/* failures: groups + where it starts */
.failgroup { font: bold 14px var(--ui); margin: 14px 0 4px; }
.failgrid { margin-top: 4px; }
.fwhere { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; }
@media (min-width: 640px) { .fwhere { grid-template-columns: 1fr 1fr; align-items: start; } }

/* spec checklist */
.specrows { list-style: none; margin: 0; padding: 0; }
.specrows li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 8px; padding: 8px 0; border-bottom: 1px dotted #000; }
.specrows li:last-child { border-bottom: 0; }
.specrows input { width: 24px; height: 24px; margin: 2px 0 0; }
.specrows b { display: block; }
.specrows a { font-size: 13px; }
.specrows li.done > div { color: #555; }

/* long cite labels wrap inside tool output */
.steps-out .cite, #wx-out .cite, #treatdetail .cite, .specrows .cite { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .page-sec svg * { animation: none !important; transition: none !important; }
}

/* long step tracks (10 paving steps) wrap on wide screens instead of running off the page */
@media (min-width: 761px) {
  .steps .track { flex-wrap: wrap; row-gap: 16px; }
  .steps .node { width: 92px; }
  .steps .beam { min-width: 10px; }
}

/* the shared sheet sets svg text { fill: #000 }, which beats fill attributes; restore the colors drawn here */
svg text[fill="#fff"], svg [fill="#fff"] > text { fill: #fff; }
svg text[fill="#c00"], svg [fill="#c00"] > text { fill: #c00; }
svg text[fill="#1c5fa8"] { fill: #1c5fa8; }
svg text[fill="#333"], svg [fill="#333"] > text { fill: #333; }
svg text[fill="#ff4d4d"] { fill: #ff4d4d; }

/* porous asphalt: drops seep down through the open mix */
#porousfig .seep { animation: seep 2.6s linear infinite; }
#porousfig .seep.s2 { animation-delay: -.9s; }
#porousfig .seep.s3 { animation-delay: -1.7s; }
@keyframes seep { from { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
#rollfig .heat path { animation: heat 1.6s ease-in-out infinite alternate; }
@keyframes heat { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-4px); opacity: .4; } }

/* check yourself */
.checkwin .qcard { margin: 0 0 14px; }
.checkwin .opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.checkwin .opts .b95 { min-height: 44px; flex: 1 1 auto; }
.checkwin .why { margin: 4px 0 0; }
.checkscore { margin: 4px 0 0; font-size: 16px; }

/* side-by-side comparisons */
.two { margin: 12px 0; }
.two > .box { margin: 0; padding: 10px 12px; }
.two > .box > b:first-child { display: block; font: 900 17px var(--black); }
.two > .box p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 340px) { .two { grid-template-columns: 1fr; } }

/* folded detail */
details.more { margin: 14px 0; border: 2px solid #000; background: #fff; }
details.more > summary { display: block; padding: 10px 12px; min-height: 44px; box-sizing: border-box; font: bold 15px var(--ui); color: #000; text-decoration: none; background: #c0c0c0; box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ''; display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid #000; margin-right: 8px; vertical-align: 1px; transition: transform .15s; transform-origin: 3px 5px; }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more > summary:active { box-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #fff; transform: translateY(1px); }
details.more > :not(summary) { margin-left: 12px; margin-right: 12px; }
details.more > :last-child { margin-bottom: 12px; }