/* ЕДИНАЯ РАМКА ЭКРАНОВ (2026-09-24). Владелец: «форматы экранов отличаются… где машины — экран от
   края до края, а в «Сегодня» плашками; нужно, чтобы всё было в одном стиле и стандарте» и «на
   широком формате в телефоне вообще бесполезно работать». Решено: ВСЁ — плашками, как «Сегодня»;
   телефон в повороте остаётся телефоном.

   Почему отдельный файл и почему последним. Сами плашки на всех экранах уже одинаковые (замер
   2026-09-24: фон --card, скругление 12, рамка --sep, тень — совпадают на всех пяти экранах).
   Расходилась только РАМКА вокруг них, и её держали правила, наслоенные в app.css/head.css за три
   недели («панель списка», «колонка ленты», «плашка шапки “Сегодня”»). Этот файл подключён ПОСЛЕ
   них и задаёт рамку одним местом: здесь видно весь стандарт сразу, и откат — одна строка в
   index.html. Структуру экранов (колонки, их порядок и прокрутку) он не меняет — только подачу.

   Стандарт:
   • фон экрана один, панелей во всю высоту нет — содержимое лежит плашками на фоне;
   • шапка экрана — заголовок на фоне, без подложки, на одной высоте на всех экранах;
   • поля 32 px на широком экране — от рейки, между колонками и у правого края;
   • первая плашка под шапкой стоит на одной линии во всех колонках. */

/* ───────────── Широкий экран: «Машины» и карточка — плашками, как «Сегодня» ───────────── */
@media (min-width:1100px){
  /* Поле слева от рейки — то же 32 px, что у остальных экранов (.screen в app.css); между
     колонками поля держат сами колонки: карточка — своими 32 px с обеих сторон. */
  .screen#vehicles.on{padding-left:var(--sp-8)}
  /* Панель списка → прозрачная колонка. Прокрутка колонки своя, как и была. */
  .screen#vehicles>.inner{background:transparent;box-shadow:none;border:0;border-radius:0;
    margin:0;height:100svh;padding:0 0 var(--sp-8)}
  /* Список и лента — обычные плашки (тот же набор, что у .group в tokens.css + app.css). */
  .screen#vehicles .group{background:var(--card);border:1px solid var(--sep);
    border-radius:var(--r-m);box-shadow:var(--shadow);overflow:hidden}
  /* Номерной знак внутри плашки — прежний тон поля, как в списке на телефоне. */
  .screen#vehicles .vrow .plate{background:var(--fill2)}
  /* Шапка списка — как у всех экранов: на фоне экрана, та же высота сверху; полоса при прокрутке —
     цветом фона экрана, а не панели, которой больше нет. */
  .screen#vehicles>.inner>.topbar.material{margin-top:var(--sp-3);padding-top:0}
  .screen#vehicles>.inner>.topbar.material::before{left:0;right:0;background:var(--bg);border-radius:0}
  .screen#vehicles>.inner>.topbar.material::after{left:0;right:0;
    background:linear-gradient(to bottom,var(--bg),var(--bg-0))}
  .screen#vehicles>.inner>.topbar.material+*{margin-top:var(--sp-3)}
  /* Шапка карточки — на той же высоте, что шапка списка: 12 px сверху, высота 44. Тогда шапка
     карточки (.vhead), поиск списка и плашка ленты начинаются на одной линии. */
  .screen#vehicles .card-col{padding-top:var(--sp-3)}
  .screen#vehicles .card-col>.dhead{min-height:44px;padding-top:0;padding-bottom:0}
}
@media (min-width:1400px){
  /* Лента — не колонка от верха до низа с линией, а плашка в своей колонке. Ширина прибавила
     правое поле (32 px), чтобы сама плашка осталась прежних 320 px. */
  .screen#vehicles.on{grid-template-columns:360px minmax(0,1fr) calc(320px + max(var(--sp-8),var(--safe-r)))}
  .feed-col{width:auto;border-left:0;padding:0 max(var(--sp-8),var(--safe-r)) var(--sp-8) 0;
    /* 12 (поле) + 44 (шапка) + 12 = 68 — верх первой плашки; минус заголовок раздела (22 + 6). */
    padding-top:calc(var(--sp-3) + 44px + var(--sp-3) - 28px)}
  /* Заголовки разделов ленты («Нужно сделать», «История») — без верхнего поля: первый встаёт на
     линию шапки; второй отделён шагом раздела, только если первый виден. */
  .feed-col .sec{margin:0 0 6px}
  .feed-col .feed-blk:not([hidden]) + .feed-blk{margin-top:var(--sp-4)}
  .feed-col .group{margin:0}
}
/* На 1400–1599 новые поля (по 32 px) отняли у карточки 64 px, и пилюли статуса в её шапке ушли во
   второй ряд (замер на 1440: шапка 78 → 106 px). Лента здесь на 24 px уже — пилюли снова в ряд. */
@media (min-width:1400px) and (max-width:1599px){
  .screen#vehicles.on{grid-template-columns:360px minmax(0,1fr) calc(296px + max(var(--sp-8),var(--safe-r)))}
}

/* ───────────── Широкий экран: шапка «Сегодня» — как у всех, без подложки ───────────── */
@media (min-width:1100px){
  .screen#today{padding-top:0}
  /* space-between: переключатели темы/единиц/языка — у правого края шапки, как на «Машинах» и
     на телефоне (прежняя плашка ставила их вплотную к заголовку: flex-start в app.css). */
  .screen#today > .inner > .topbar{background:transparent;box-shadow:none;border-radius:0;
    margin:var(--sp-3) 0 0;padding:0 var(--sp-4);justify-content:space-between}
  /* Первая плашка под шапкой — на той же линии, что у остальных экранов (12 px под шапкой). */
  .screen#today > .inner{row-gap:var(--sp-3)}
}

/* ───────────── Планшет и телефон в повороте ───────────── */
@media (min-width:700px){
  /* Растворение над таббаром-островом. Таббар от 700 px заменяется рейкой (app.css), а
     растворение пряталось только от 1100 — и в повороте телефона (844×390) тёмная полоса в 96 px
     съедала четверть экрана над несуществующей панелью. */
  .tabbar-fade{display:none}
}
/* Телефон в повороте: низкий экран с пальцем. Окно ввода (чат, формы) на ≥700 px — модальное
   окно в 80% высоты, то есть ~310 px из 390: в чате оставалось три строки переписки. В повороте
   окно почти во всю высоту. */
@media (orientation:landscape) and (max-height:500px) and (any-pointer:coarse){
  .scrim > .sheet{max-height:calc(100svh - 16px);width:min(560px,calc(100vw - 48px))}
  /* Шапка экрана ближе к краю: каждые 8 px здесь — 2% высоты. */
  .topbar.material{margin-top:var(--sp-1)}
  /* «Сегодня» — те же две зоны, что на десктопе (today.js::layoutZones собирает их и здесь):
     слева счётчики и «Требует действия», справа консьерж и контекст. Доли 3:2, а не 2:1 — правой
     колонке нужно минимум ~260 px, чтобы кнопка «Спросить консьержа» не ломалась в две строки. */
  .screen#today > .inner{display:flex;flex-wrap:wrap;column-gap:var(--sp-4);row-gap:var(--sp-3);align-items:flex-start}
  .screen#today > .inner > .topbar{flex:1 1 100%}
  .screen#today > .inner > .tmain{flex:3 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:0}
  .screen#today > .inner > .taside{flex:2 1 0;min-width:260px;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:0}
  .screen#today > .inner > .tmain > .today-card,
  .screen#today > .inner > .taside > .today-card{margin:0}
  /* Узкий поворот (iPhone SE/8: 667×375) не дотягивает до 700 px, где рейка включается сама, и
     получал нижний таббар высотой 74 px из 375 — плюс плавающая кнопка над ним наезжала на
     содержимое. В повороте навигация всегда сбоку: те же правила рейки, что в app.css от 700 px. */
  #app{grid-template-columns:calc(76px + var(--safe-l)) 1fr;--pad-l:var(--sp-4)}
  .side{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;
    padding-left:calc(8px + var(--safe-l));border-right:1px solid var(--sep);position:sticky;top:0;height:100svh}
  .side .brand{width:36px;height:36px;border-radius:10px;background:var(--label);color:var(--bg);
    display:grid;place-items:center;font:800 15px/1 var(--font);margin-bottom:12px}
  .side .tab{min-width:56px;font-size:10px}
  .side .lbl{display:none}
  .tabbar,.tabbar-fade{display:none}
  .screen{padding-bottom:var(--sp-8)}
  .fab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ───────────── Телефон: строка «Требует действия» в два яруса, а не в три ───────────── */
/* Было (head.css): строка переносилась — текст, под ним кнопки «В ремонт / Позже», под ними
   одинокая стрелка «›», и каждый ярус отделён зазором 12 px; кнопки на пальцевом экране
   раздувались до 44 px общим правилом .btn. Итог — 144 px на пункт при 40 px текста. Теперь сетка:
   полоса статуса слева напротив текста, текст и под ним кнопки в одной колонке, стрелка справа по
   центру. Кнопки видимо 30 px, зона нажатия — 44 невидимым полем (правило пальца не нарушено). */
/* Второе условие — узкий поворот телефона (667 px): там список дел стоит в колонке шириной
   ~280 px, и в одну строку с кнопками название машины резалось до «MAZDA Mazda6 …». */
@media (max-width:520px), (orientation:landscape) and (max-height:500px) and (any-pointer:coarse) and (max-width:759px){
  .row:has(.act-fixes){display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:var(--sp-3);row-gap:2px;align-items:center;padding-top:8px;padding-bottom:6px}
  /* Полоса статуса — прежние 36 px напротив текста, как во всех списках (Машины, Журнал), а не во
     всю высоту пункта: высокая полоса выбивалась бы из общего стандарта строк. */
  .row:has(.act-fixes)>.st{grid-column:1;grid-row:1}
  .row:has(.act-fixes)>.grow{grid-column:2;grid-row:1}
  .row:has(.act-fixes)>.act-fixes{grid-column:2;grid-row:2;width:auto;margin:0 0 0 -10px}
  .row:has(.act-fixes)>.chev{grid-column:3;grid-row:1 / span 2}
  /* Вес селектора выше, чем у .group .row .btn из head.css (правило пальца 44 px для кнопок в
     строках), — иначе кнопки снова раздуваются до 44 и строка вырастает на 14 px. Палец при
     этом не страдает: зона нажатия 44 держится невидимым полем ::after. */
  .group .row .act-fixes .act-fix{height:30px;min-height:30px;position:relative}
  .group .row .act-fixes .act-fix::after{content:"";position:absolute;inset:-7px 0}
}

/* Затухание у нижней кромки (app.css, «намёк, что ниже есть ещё») на «Машинах» выключали из-за
   белой панели списка во всю высоту — на ней оно рисовало полосу. Панели больше нет, колонки
   лежат на общем фоне — затухание работает так же, как на остальных экранах. */
@media (min-width:1100px){#app:has(.screen#vehicles.on)::after{display:block}}

/* ───────────── Содержимое — у левого края на всех ширинах ─────────────
   Владелец, 2026-09-24: «экран “Сегодня” съехал посередине, а должен быть слева». Центровали два
   правила: head.css на ≥1500 px (пара колонок «Сегодня» 1340 px по центру — на 1920 отступ слева
   258 px, на 2560 — 578, при том что «Журнал» и «Ещё» стоят у рейки) и app.css на 700–1099 px
   (.screen шириной 760 с margin:auto — планшет и узкое окно браузера). Ограничение ширины
   остаётся (строка не тянется через весь монитор), меняется только выравнивание: начало
   содержимого — всегда в 32 px от рейки (16 px на планшете), как у остальных экранов. */
@media (min-width:700px){.screen{margin-left:0;margin-right:0}}
@media (min-width:1500px){.screen#today > .inner{margin-left:0;margin-right:0}}