/* cycles.css — styling specific to the EPA drive cycle page; style.css carries the skins */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border-radius: 0; background: transparent; color: var(--ink); padding: 7px 14px; font-weight: 600;
  border-right: 1px solid var(--line); box-shadow: none !important; }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--amber); color: var(--btn-ink, #fff); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.chk input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--amber); }
.stats { margin-bottom: 18px; }
.stat.warn .v { color: var(--accent-red); }
.stat .v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.tableCard { margin-bottom: 18px; }
.tableCard h2 { margin: 0 0 8px; font-size: 16px; font-family: var(--font-label); letter-spacing: .5px; }
.tableWrap { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; font-size: 14px; }
table.cmp th, table.cmp td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; }
table.cmp thead th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.cmp td.sel { background: color-mix(in srgb, var(--amber) 18%, transparent); font-weight: 700; }
table.cmp tr.sel th, table.cmp tr.sel td { background: color-mix(in srgb, var(--amber) 18%, transparent); font-weight: 700; }
table.cmp .d { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }
table.cmp .na { color: var(--muted); font-style: italic; font-weight: 400; }
table.cmp .mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
table.cmp th small { font-weight: 400; color: var(--muted); }
.plot.tall { height: 520px; }
.explain { font-size: 14px; line-height: 1.5; }
.explain h2 { margin: 0 0 8px; font-size: 16px; font-family: var(--font-label); letter-spacing: .5px; }
.explain p { margin: 0 0 10px; }
@media (max-width: 760px) {
  .plot.tall { height: 420px; }
  .seg button { padding: 7px 10px; font-size: 13px; }
}

/* only phones need the hint: the tables fit on wider screens */
.scrollHint { display: none; font-size: 12px; color: var(--muted); margin: 0 0 6px; font-style: italic; }
@media (max-width: 760px) { .scrollHint { display: block; } }
/* every-vehicle table: long EPA names wrap instead of pushing the numbers off the right edge */
#allTable tbody th { white-space: normal; min-width: 160px; max-width: 340px; line-height: 1.3; }
#allTable thead th { white-space: normal; }
@media (max-width: 760px) { #allTable tbody th { min-width: 130px; max-width: 170px; } #allTable th, #allTable td { padding: 6px 8px; } }