/* The shared .if wrapper sets overflow: hidden; on a body-level document
   surface that disables page scrolling, so the quality page (the only
   .if element that is the body itself) must restore vertical scrolling.
   overflow-x: clip is used so no new scroll container is created. */
body.quality { margin: 0; line-height: 1.65; overflow-x: clip; overflow-y: auto; }
.quality .if-nav-link { display: inline-flex; align-items: center; min-height: 44px; }
.quality [aria-current="page"] { color: var(--if-green); text-decoration: underline; text-underline-offset: 6px; }
.quality-skip { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--if-bg); z-index: 40; }
.quality-skip:focus { top: 12px; }
.quality-hero { padding-block: clamp(64px, 9vw, 112px) 56px; text-align: center; }
.quality h1 { max-width: 1000px; font-size: clamp(38px, 6.5vw, 72px); line-height: 1.08; }
.quality .if-intro { max-width: 750px; margin-bottom: 22px; }
.quality .if-intro strong { color: var(--if-text); }
.quality-note { color: var(--if-muted); font-size: 12px; }
.quality-results { padding-bottom: 24px; }
.quality-panel { border: 2px solid var(--if-green); border-radius: 4px; background: #060c07; padding: clamp(22px, 4vw, 48px); box-shadow: 0 0 0 5px #70db790a; }
.quality-panel-head p:not(.if-label) { color: var(--if-copy); font-size: 14px; }
.quality h2 { line-height: 1.12; }
.quality-score { margin-top: 30px; }
.quality-score-label { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.quality-score h3 { margin: 0 0 12px; font-size: clamp(16px, 2.6vw, 22px); }
.quality-score small { display: block; color: var(--if-copy); font-size: 12px; font-weight: normal; }
.quality-score-label p { margin: 0 0 12px; text-align: right; flex-shrink: 0; }
.quality-score-label strong { display: block; color: var(--if-green); font-size: 36px; line-height: 1.2; }
.quality-score-label span { color: var(--if-copy); font-size: 12px; }
.quality-score.sol strong { color: var(--if-amber); }
.quality-track { height: 18px; background: var(--if-panel-2); }
.quality-bar { height: 100%; }
.quality-bar-amber { width: 88%; background: var(--if-green); }
.quality-bar-sol { width: 86%; background: var(--if-amber); }
.quality-scale { display: flex; justify-content: space-between; margin-top: 12px; color: var(--if-muted); font-size: 11px; }
.quality-takeaway { border-top: 1px solid var(--if-line); margin: 28px 0 0; padding-top: 22px; color: var(--if-text); font-size: 14px; }
.quality-method { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.quality-spec { margin: 0; font-size: 14px; }
.quality-spec div { padding: 20px 0; border-top: 1px solid var(--if-line); }
.quality-spec dt { color: var(--if-green); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.quality-spec dd { margin: 0; color: var(--if-copy); }
.quality code { overflow-wrap: anywhere; font-family: inherit; }
.quality-limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.quality-limit-grid h3, .quality-sources h3 { font-size: 17px; color: var(--if-text); margin: 0 0 12px; }
.quality-limit-grid p, .quality-sources p, .quality-sources li { color: var(--if-copy); font-size: 14px; }
.quality-sources { margin-top: 40px; padding: 28px; border: 1px solid var(--if-line); background: var(--if-panel); }
.quality-sources ul { margin-bottom: 0; padding-left: 20px; }
.quality-sources a { display: inline-block; padding-block: 10px; text-underline-offset: 4px; }
.quality a:hover { color: var(--if-amber); }
.quality .if-footer { color: var(--if-muted); }
.quality .if-footer a { display: inline-block; padding-block: 12px; }
@media (max-width: 760px) {
  .quality-method, .quality-limit-grid { grid-template-columns: 1fr; gap: 24px; }
  .quality .if-nav { gap: 16px; }
  .quality .if-nav-link { font-size: 11px; }
  .quality .if-grid { grid-template-columns: 1fr; }
  .quality .if-card + .if-card { border-left: 0; border-top: 1px solid var(--if-line); }
  .quality .if-card { min-height: auto; }
  .quality .if-card-index { margin-bottom: 24px; }
  .quality .if-section-head { margin-bottom: 24px; }
  .quality-score-label strong { font-size: 30px; }
}