/* A series page — the fit check.
   Three fields against the range and the supply this record states. The panel is
   the shared .form from style.css on a white ground, because the section behind
   it is pale; the answer is one sentence and two ways on.
   Every value comes from assets/css/tokens.css. */

.series-match__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.series-match__copy h2{margin:0}
.series-match__copy .section__sub{max-width:none;margin-top:18px}
.series-match__stated{margin:26px 0 0;padding:0}
.series-match__stated div{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--color-line)}
.series-match__stated dt{margin:0;font-size:13px;color:var(--color-muted)}
.series-match__stated dd{margin:0;font-weight:600;color:var(--color-heading)}
.series-match__form{background:var(--color-surface);margin-top:0}
.series-match__result{margin-top:22px;padding:22px;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-md)}
.series-match__result[hidden]{display:none}
.series-match__status{margin:0;font-size:15px;font-weight:600;color:var(--color-navy)}
.series-match__result .actions{margin-top:20px}
.series-match__result .btn{flex:1 1 auto;justify-content:center;text-align:center}

@media (max-width:900px){
  .series-match__grid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:640px){
  .series-match__stated div{grid-template-columns:1fr;gap:4px}
  .series-match__result .btn{flex:1 1 100%}
}