/* Оформление монитора хозяйства - ОДНО МЕСТО НА ВСЕ РАЗДЕЛЫ (T-050).

   ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ. Раньше цвета жили внутри index.html и были ещё раз
   переписаны в vhod.html и smena.html - три копии одной палитры. С приходом четырёх
   разделов копий стало бы шесть, и «поправить цвет аварии» означало бы шесть правок,
   из которых пятую забудут. Теперь палитра, размеры и вид типовых кусков лежат здесь,
   а разделы их только используют.

   ПРАВИЛО РАЗМЕРА. Всё, что нажимается, - не ниже 44 точек. Монитор смотрят на ходу,
   и промах по кнопке в 32 точки стоит открывания заново.

   ПРАВИЛО ЦВЕТА. Состояний ровно четыре, они же приезжают с сервера словами
   ok / vnimanie / avariya / ne_proverili. Свой цвет мимо этого набора не заводить:
   пятый цвет на странице означает пятое состояние, которого в контракте нет. */

:root {
  --fon: #f4f6f8;
  --karta: #ffffff;
  --tekst: #1b2733;
  --seryy: #667585;
  --ramka: #dfe5ea;
  --shapka: #ffffff;
  --akcent: #1b5e9e;

  --ok: #2e7d32;
  --vnimanie: #b26a00;
  --avariya: #c62828;
  --ne-proverili: #5c6bc0;

  /* мягкие подложки: тот же цвет, но им можно залить блок и не ослепнуть */
  --ok-myagko: rgba(46, 125, 50, .10);
  --vnimanie-myagko: rgba(178, 106, 0, .12);
  --avariya-myagko: rgba(198, 40, 40, .12);
  --ne-proverili-myagko: rgba(92, 107, 192, .12);

  --skruglenie: 12px;
  --skruglenie-krupnoe: 16px;
  --predel-shiriny: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fon: #101418;
    --karta: #181d23;
    --tekst: #e6ebf0;
    --seryy: #95a3b3;
    --ramka: #2a333d;
    /* Тёмно-синий, чуть светлее основного фона - решение владельца 23.08.2026 по
       снимку сравнения: прежний #12263a был заметно ярче остальной страницы и тянул
       взгляд на себя. Светлее фона он остаётся нарочно: полоса должна читаться как
       отдельная, иначе непонятно, где заголовок, а где содержимое. */
    --shapka: #161e2b;
    --akcent: #5aa9e6;

    --ok: #66bb6a;
    --vnimanie: #ffb74d;
    --avariya: #ef5350;
    --ne-proverili: #9fa8da;

    --ok-myagko: rgba(102, 187, 106, .14);
    --vnimanie-myagko: rgba(255, 183, 77, .16);
    --avariya-myagko: rgba(239, 83, 80, .16);
    --ne-proverili-myagko: rgba(159, 168, 218, .16);
  }
}

* { box-sizing: border-box; }

/* Спрятанное обязано быть спрятанным. Ниже у панелей стоит display:flex, а он
   сильнее скрытия по атрибуту hidden: без этой строки стрелки «соседний раздел»
   видны на главной, где переключать нечего. Поймано снимком экрана 20.08.2026. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--akcent); }
a:hover { color: var(--tekst); }

button { font: inherit; color: inherit; }

/* Раскладка приложения: шапка и низ не уезжают, прокручивается только середина.
   Отступы «чёлки» и полосы жестов берутся у телефона, а не подбираются на глаз. */
body.prilozhenie {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shapka {
  flex: none;
  background: var(--shapka);
  border-bottom: 1px solid var(--ramka);
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
}
/* Шапка в одну строку: надстрочная надпись «монитор хозяйства» убрана по решению
   владельца 20.08.2026 - в шапке остаётся одно слово. Поэтому выравнивание по центру,
   а не по низу: выравнивать по низу было нужно двухстрочной шапке. */
.shapka > .vnutri {
  max-width: var(--predel-shiriny);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.shapka h1 {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}
/* Строка свежести обязана СЖИМАТЬСЯ. С `flex: none` длинное «обновлено только что»
   растягивало шапку шире экрана, и вся страница уезжала вправо - на телефоне это
   выглядит как обрезанный текст у правого края. */
.shapka .svezhest {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--seryy);
  height: 44px;
}
.shapka .svezhest span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shapka .svezhest .ogonyok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ok);
}

main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 20px;
}
main > .vnutri { max-width: var(--predel-shiriny); margin: 0 auto; }

/* --- главный экран: четыре плитки-ответа (направление Б) -------------------- */

.plitki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.plitka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 132px;
  padding: 15px 14px 14px;
  border-radius: var(--skruglenie-krupnoe);
  border: 1px solid var(--ramka);
  background: var(--karta);
  cursor: pointer;
}
.plitka .znachok { color: var(--seryy); }
.plitka .razdel {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--seryy);
  margin-top: 8px;
}
.plitka .chislo { font-size: 27px; font-weight: 700; line-height: 1.05; }
.plitka .otvet { font-size: 13px; line-height: 1.3; }
.plitka .pripiska { font-size: 12px; color: var(--seryy); margin-top: auto; }

.plitka.ok { background: var(--ok-myagko); border-color: var(--ok); }
.plitka.ok .chislo, .plitka.ok .znachok { color: var(--ok); }
.plitka.vnimanie { background: var(--vnimanie-myagko); border-color: var(--vnimanie); }
.plitka.vnimanie .chislo, .plitka.vnimanie .znachok { color: var(--vnimanie); }
.plitka.avariya { background: var(--avariya-myagko); border-color: var(--avariya); }
.plitka.avariya .chislo, .plitka.avariya .znachok { color: var(--avariya); }
.plitka.ne_proverili { background: var(--ne-proverili-myagko); border-color: var(--ne-proverili); }
.plitka.ne_proverili .chislo, .plitka.ne_proverili .znachok { color: var(--ne-proverili); }
/* Плитка раздела, который ещё не наполнен: приглушена, но нажимается - за ней
   лежит честная заглушка, а не пустота. */
.plitka.gotovitsya .chislo { font-size: 19px; color: var(--seryy); }

/* --- цветная плашка-итог ---------------------------------------------------- */

.svodka {
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  color: #ffffff;
  background: var(--ok);
}
.svodka b { font-size: 20px; display: block; }
.svodka span { font-size: 13px; opacity: .93; }
.svodka.vnimanie { background: var(--vnimanie); }
.svodka.avariya { background: var(--avariya); }
.svodka.ne_proverili { background: var(--ne-proverili); }

h2.zagolovok {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--seryy);
  margin: 0 0 8px;
}
/* Заголовок «Требует внимания» красится по ХУДШЕМУ, что там лежит: молчащий сторож -
   это синее «не проверено», а не красная авария. Красный заголовок над синими
   карточками означал бы поломку, которой нет. */
h2.zagolovok.trevoga { color: var(--avariya); }
h2.zagolovok.trevoga.vnimanie { color: var(--vnimanie); }
h2.zagolovok.trevoga.ne_proverili { color: var(--ne-proverili); }

/* --- карточка наблюдаемой вещи ---------------------------------------------- */

.vesch {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-left: 6px solid var(--seryy);
  border-radius: var(--skruglenie);
  padding: 14px;
  margin-bottom: 10px;
}
.vesch.ok { border-left-color: var(--ok); }
.vesch.vnimanie { border-left-color: var(--vnimanie); }
.vesch.avariya { border-left-color: var(--avariya); }
.vesch.ne_proverili { border-left-color: var(--ne-proverili); }

.vesch .verh {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.vesch .nazvanie { font-weight: 600; }
.vesch .yarlyk {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}
.vesch.ok .yarlyk, .vesch.ok .znachok { color: var(--ok); }
.vesch.vnimanie .yarlyk, .vesch.vnimanie .znachok { color: var(--vnimanie); }
.vesch.avariya .yarlyk, .vesch.avariya .znachok { color: var(--avariya); }
.vesch.ne_proverili .yarlyk, .vesch.ne_proverili .znachok { color: var(--ne-proverili); }

.vesch .kratko { margin: 8px 0 0; }
.vesch .kratko.svyornuta { color: var(--seryy); font-size: 14px; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
.vesch .stroka { font-size: 13px; color: var(--seryy); margin-top: 6px; }
.vesch .spisok { margin: 6px 0 0 18px; padding: 0; }
.vesch .delat {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--seryy);
}
.vesch.ok .delat { display: none; }
.vesch.vnimanie .delat { background: var(--vnimanie-myagko); }
.vesch.avariya .delat { background: var(--avariya-myagko); }
.vesch.ne_proverili .delat { background: var(--ne-proverili-myagko); }
.vesch .podrobno { margin-top: 10px; border-top: 1px solid var(--ramka); padding-top: 10px; }
.vesch .podrobno p { margin: 0 0 8px; font-size: 14px; color: var(--seryy); }
.vesch .proverka {
  display: flex;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ramka);
}
.vesch .proverka .chto { flex: 1; color: var(--seryy); }
.vesch .proverka .itog { flex: none; max-width: 46%; text-align: right; }

/* --- раздел «Проекты» (T-051) ----------------------------------------------- */

/* Текст «Сейчас» из STATUS.md - три-четыре предложения. В свёрнутом виде показываем
   три строки: одной строки с многоточием мало, чтобы понять, чем занято окно, а
   полный текст у восемнадцати проектов превращает раздел в простыню. */
.vesch .seychas { margin: 8px 0 0; font-size: 14px; }
.vesch .seychas.svyornut {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vesch .seychas.nechego { color: var(--seryy); font-style: italic; }
.vesch .spisok.riski { list-style: none; margin-left: 0; }
.vesch .spisok.riski li::before { content: "• "; }
.vesch .spisok li.vnimanie { color: var(--vnimanie); }
.vesch .spisok li.avariya { color: var(--avariya); }
.spisok.riski.obshchie { margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; }
.spisok.riski.obshchie li.vnimanie { color: var(--vnimanie); }
.spisok.riski.obshchie li.avariya { color: var(--avariya); }

/* Возраст сводки. Пока свежая - неприметная серая строка; устарела - плашка, которую
   нельзя не заметить: раздел с позавчерашними данными выглядит точно так же, как
   с сегодняшними, и это единственное, что их различает. */
.vozrast { font-size: 13px; color: var(--seryy); margin: -6px 0 12px; }
.vozrast.vnimanie, .vozrast.avariya, .vozrast.ne_proverili {
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 0;
}
.poyasnenie { font-size: 12px; color: var(--seryy); margin: 6px 0 12px; }
.vozrast.vnimanie { color: var(--vnimanie); background: var(--vnimanie-myagko); }
.vozrast.avariya { color: var(--avariya); background: var(--avariya-myagko); }
.vozrast.ne_proverili { color: var(--ne-proverili); background: var(--ne-proverili-myagko); }

/* --- заголовок группы ------------------------------------------------------- */

.gruppa { margin-bottom: 12px; }
.zagolovok-gruppy {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  min-height: 52px;
  padding: 14px;
  border: 1px solid var(--ramka);
  border-radius: var(--skruglenie);
  background: var(--karta);
  cursor: pointer;
}
.zagolovok-gruppy .imya { flex: 1; font-weight: 600; }
.zagolovok-gruppy .schet { font-size: 13px; color: var(--seryy); }
.zagolovok-gruppy .strelka { flex: none; color: var(--seryy); display: flex; }
.tochka { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--seryy); }
.gruppa.ok .tochka { background: var(--ok); }
.gruppa.vnimanie .tochka { background: var(--vnimanie); }
.gruppa.avariya .tochka { background: var(--avariya); }
.gruppa.ne_proverili .tochka { background: var(--ne-proverili); }
.gruppa .telo { padding-top: 10px; }

/* Место под систему без сторожей (T-054): рамка пунктиром - тот же язык, которым
   в сервисе говорят все ненаполненные места, и точка серая, а не зелёная. */
.zagolovok-gruppy.pustoy { cursor: default; border-style: dashed; background: none; }
/* У пустого блока нет стрелки, и подпись «сторожей пока нет» встаёт у самого края.
   Без этих двух правил длинное название выдавливает её за границу и она обрезается -
   пустой блок молчит именно о том, ради чего он на странице стоит. */
.gruppa.pusto .imya { color: var(--seryy); font-weight: 500; min-width: 0; }
.gruppa.pusto .schet { flex: none; white-space: nowrap; }
/* Приписка блока: почему он пуст (место под систему) или почему строка в нём
   лежит (имя не по соглашению). Видна и у свёрнутого блока - иначе объяснение
   пряталось бы ровно от того, кому оно адресовано. */
.pripiska-bloka { font-size: 13px; color: var(--seryy); padding: 8px 14px 0; }

/* --- заглушка ненаполненного раздела ---------------------------------------- */

/* Пустой экран и сломанный экран с телефона неотличимы, поэтому пустых экранов
   в сервисе нет вовсе: раздел без данных говорит, что он существует, пуст
   намеренно, и когда наполнится. */
.zaglushka {
  border: 1px dashed var(--ramka);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  color: var(--seryy);
}
.zaglushka .znachok { color: var(--seryy); }
.zaglushka b { display: block; color: var(--tekst); margin-top: 10px; }
.zaglushka p { margin: 6px auto 0; font-size: 14px; max-width: 330px; }
.zaglushka .tiket { font-size: 13px; margin-top: 10px; }

/* --- экран настроек уведомлений (T-055) ------------------------------------- */

/* У тревоги сторожа переключателя НЕТ вовсе, а не «есть, но не нажимается»:
   недоступная кнопка читается как поломка, а слово «всегда» - как решение. */
.nastroyki {
  margin: 14px 0 4px;
  border: 1px solid var(--ramka);
  border-radius: var(--skruglenie);
  background: var(--karta);
  overflow: hidden;
}
.zagolovok-nastroek {
  padding: 13px 14px 9px;
  font-weight: 600;
}
.vid-uvedomleniya {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--ramka);
}
.vid-uvedomleniya .imya { font-weight: 500; }
.vid-uvedomleniya .chto { font-size: 13px; color: var(--seryy); margin-top: 2px; }
.vid-uvedomleniya .vsegda { flex: none; font-size: 13px; color: var(--seryy); }
.perekl {
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ramka);
  background: var(--fon);
  padding: 2px;
  cursor: pointer;
  transition: background .15s;
}
.perekl span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--seryy);
  transition: transform .15s, background .15s;
}
.perekl.vklyuchen { background: var(--ok); border-color: var(--ok); }
.perekl.vklyuchen span { transform: translateX(20px); background: #ffffff; }

/* --- кнопки ----------------------------------------------------------------- */

button.knopka {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid var(--ramka);
  background: var(--karta);
  cursor: pointer;
}
button.knopka.glavnaya { background: var(--akcent); border-color: var(--akcent); color: #ffffff; }
/* --- нижняя панель управления (направление Б) ------------------------------- */

/* Низ, а не верх: большим пальцем достаётся именно он. На главной здесь подсказка,
   в разделе - возврат домой и переход к соседнему разделу. */
.niz {
  flex: none;
  background: var(--shapka);
  border-top: 1px solid var(--ramka);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}
.niz > .vnutri {
  max-width: var(--predel-shiriny);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.niz .domoy {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--ramka);
  background: var(--karta);
  cursor: pointer;
  font-size: 14px;
}
.niz .sosedi { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }
.niz .sosedi button {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--ramka);
  background: var(--karta);
  cursor: pointer;
}
.niz .podskazka {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  color: var(--seryy);
}

.soobshchenie { font-size: 13px; color: var(--seryy); margin: 10px 0 0; }
.podpis { font-size: 12px; color: var(--seryy); margin: 6px 0 0; }
.knopki { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* «Займи, сколько дадут, но не распирай родителя» - без min-width:0 длинное
   название в гибкой строке растягивает её шире экрана. */
.rastyanut { flex: 1; min-width: 0; }

/* --- страницы входа и смены пароля ------------------------------------------ */

body.odno-okno {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
.okno {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
}
.okno h1 { font-size: 20px; margin: 0 0 4px; }
.okno p.podskazka { font-size: 14px; color: var(--seryy); margin: 0 0 16px; }
.okno label { display: block; font-size: 13px; color: var(--seryy); margin: 12px 0 4px; }
.okno input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  font: inherit;
  color: var(--tekst);
  background: var(--fon);
  border: 1px solid var(--ramka);
  border-radius: 9px;
}
.okno button { width: 100%; margin-top: 16px; }
.okno .oshibka { color: var(--avariya); font-size: 14px; margin-top: 12px; min-height: 20px; }
.okno .znak { display: block; margin: 0 auto 12px; width: 56px; height: 56px; border-radius: 12px; }
.okno .vnizu {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--seryy);
  min-height: 44px;
  line-height: 44px;
}
.okno .otvet { font-size: 14px; margin-top: 12px; min-height: 20px; }
.okno .otvet.ploho { color: var(--avariya); }
.okno .otvet.horosho { color: var(--ok); }

/* --- раздел «План работ» (T-052) -------------------------------------------- */

/* Очередь «Ждут вас» - карточка той же породы, что и наблюдаемая вещь: одинаковые
   вещи на экране обязаны выглядеть одинаково, иначе каждый новый раздел учат читать
   заново. Отличия только там, где отличается смысл. */
.vesch .delaet { font-weight: 600; color: var(--tekst); margin-top: 10px; }
.pochemu { color: var(--seryy); font-size: 12px; }
.vesch .stroka.nechego { font-style: italic; }

/* «Появится позже» спрятано за нажатием: в очередь попадает только то, что можно
   сделать сегодня (правило владельца 03.08.2026), иначе ближайшее тонет в далёком.
   Но выбросить его нельзя - тогда пропадает ответ «а что дальше». */
.vesch .stroka.pozzhe {
  margin-top: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--akcent);
  cursor: pointer;
}
.vesch .pozdnee { border-top: 1px solid var(--ramka); padding-top: 6px; }

/* Кнопка карты - ссылка, а не кнопка: карта открывается своим адресом /plan/karta,
   и по ней должны работать «открыть в новой вкладке» и «поделиться». */
.karta-svyazey { margin: 14px 0 18px; }
a.knopka {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid var(--akcent);
  background: var(--akcent);
  color: #ffffff;
  text-decoration: none;
}
.karta-svyazey .stroka { font-size: 13px; color: var(--seryy); margin-top: 8px; }
.karta-svyazey .stroka.nechego { font-style: italic; }

/* Строка тикета. Ниже сводок и намеренно суше их: это справка «что вообще в работе»,
   а не то, ради чего владелец открыл раздел. */
.zapis-tiketa {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-left: 6px solid var(--seryy);
  border-radius: var(--skruglenie);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.zapis-tiketa.ok { border-left-color: var(--ok); }
.zapis-tiketa.vnimanie { border-left-color: var(--vnimanie); }
.zapis-tiketa.ne_proverili { border-left-color: var(--ne-proverili); }
.zapis-tiketa .nazvanie { font-weight: 600; margin-top: 2px; }
.zapis-tiketa .stroka { font-size: 13px; color: var(--seryy); margin-top: 6px; }
.zapis-tiketa .stroka.nomer { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.zapis-tiketa .sostoyanie { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.zapis-tiketa .sostoyanie.ok { color: var(--ok); }
.zapis-tiketa .sostoyanie.vnimanie { color: var(--vnimanie); }
.zapis-tiketa .sostoyanie.ne_proverili { color: var(--ne-proverili); }
.zapis-tiketa .pometka {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ne-proverili-myagko);
  color: var(--ne-proverili);
}

/* --- раздел «Машины и диски» (T-053) ---------------------------------------- */

/* Полоска места. Число «свободно 720 ГБ» само по себе ничего не говорит - глазу
   нужна доля: полоска отвечает на «много или мало» до всякого чтения цифр. */
.mesto { margin-top: 10px; }
.mesto .nazvanie-mesta { color: var(--tekst); font-weight: 600; margin-top: 0; }
.polosa {
  height: 10px;
  border-radius: 6px;
  background: var(--ramka);
  overflow: hidden;
  margin: 6px 0 4px;
}
.polosa .zapolneno { height: 100%; background: var(--ok); }
.mesto.vnimanie .zapolneno { background: var(--vnimanie); }
.mesto.avariya .zapolneno { background: var(--avariya); }
.mesto.ne_proverili .zapolneno { background: var(--ne-proverili); }

/* Машина внутри узла - показывается по нажатию на карточку: на телефоне важнее
   сперва ответить «где кончается место», а состав машин смотрят реже. */
.mashina { padding: 8px 0; border-top: 1px solid var(--ramka); }
.mashina:first-child { border-top: 0; }
.mashina.vyklyuchena { opacity: .65; }
.mashina .pometka {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ne-proverili-myagko);
  color: var(--ne-proverili);
}