/* ВРЕМЕННАЯ ВЕТКА: общая раскладка для всех стилей. Подключается последней, поэтому побеждает стили тем.
   Телефон: в легенде цифра, под ней цена и «от/до» — так влезают и широкие шрифты.
   Компьютер (≥900 px): своя раскладка, а не растянутый телефон — левая колонка с прибором,
   легенда списком, окна по центру экрана, подсветка строк под мышкой. */

/* широкий заголовок не должен раздвигать страницу шире экрана */
:root[data-style] .app { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 899px) {
  :root[data-style] .cat {
    grid-template-columns: minmax(0, 1fr); row-gap: 3px; align-items: start;
  }
  :root[data-style] .cat span,
  :root[data-style] .cat span + span {
    grid-column: 1; text-align: left; margin-top: 0; font-size: 12px; letter-spacing: -.01em;
  }
}

@media (min-width: 900px) {
  :root[data-style] .app { grid-template-columns: 420px minmax(0, 1fr); }

  /* левая колонка: шапка сверху, прибор и легенда — посередине высоты, без пустого низа */
  :root[data-style] .instr { display: flex; flex-direction: column; padding-bottom: 20px; }
  :root[data-style] .gauge-wrap { margin-top: auto; max-width: 380px; }
  :root[data-style] .cats { margin: 26px 0 auto; }

  /* легенда списком: цифра · от/до · цена, разделители только между строками */
  :root[data-style] .cat, :root[data-style] .cat:first-child {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "n r p";
    align-items: center; column-gap: 12px; row-gap: 0; padding: 12px 18px; text-align: left;
    border-left: 0; border-right: 0; transform: none;
  }
  :root[data-style] .cat b { grid-area: n; padding-top: 0; }
  :root[data-style] .cat span:first-of-type { grid-area: p; text-align: right; font-size: 15px; }
  :root[data-style] .cat span + span { grid-area: r; text-align: left; margin-top: 0; font-size: 15px; }

  /* окна — по центру экрана, а не выезжают снизу на всю ширину; полоска-«ручка» на компьютере не нужна */
  :root[data-style] .sheet {
    top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: min(560px, calc(100vw - 48px)); max-width: none;
    height: fit-content; max-height: min(84dvh, 820px); padding-bottom: 6px;
    border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.28);
  }
  :root[data-style] .sheet-grip { display: none; }
  :root[data-style] .sheet-head { padding-top: 14px; }
}

/* мышь: строки и кнопки откликаются на наведение (на телефоне этого нет) */
@media (hover: hover) and (min-width: 900px) {
  :root[data-style] .car:hover, :root[data-style] .cat:hover, :root[data-style] .bnd .lbl:hover {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ink) 6%, transparent);
  }
  :root[data-style] .act:hover, :root[data-style] .chip:hover, :root[data-style] .seg button:hover { filter: brightness(1.04); }
}