/*
 * Макеты телефона для лендинга: экраны продукта в web/home/screens/.
 *
 * Выделено из css/resident-ui.css, который остался за страницами ошибок
 * (components/errors/layout.blade.php) и правится отдельно. Здесь только
 * внутренности «телефона» — хром лендинга вокруг них рисует Tailwind,
 * поэтому body, .wrap, .masthead и .sect сюда намеренно не перенесены.
 */

:root{
  --pine-900:#0E1E19;
  --pine-850:#132A23;
  --pine-800:#17332B;
  --pine-700:#20463C;
  --pine-500:#4E7A6B;
  --paper:#FCFBF7;
  --paper-2:#F1EEE6;
  --paper-3:#E6E2D7;
  --ink:#1A1F1C;
  --ink-2:#5B655F;
  --ink-3:#8C948E;
  --moss:#2F6B4F;
  --moss-tint:#E3EEE7;
  --moss-ink:#1E4A36;
  --ember:#AE3B2A;
  --ember-tint:#F8E4E0;
  --amber:#9E620F;
  --amber-tint:#F6EAD6;

  /* Роли, которые в тёмной теме расходятся с базовыми токенами. */
  --btn-bg:#2F6B4F;
  --btn-fg:#FFFFFF;
  --field-bg:#FFFFFF;
  --qr-bg:#F1EEE6;
  --qr-ink:#1A1F1C;
  --island:#161616;
  --bezel-rim:#3A3A3A;

  --r-sm:8px;
  --r-md:12px;
  --r-phone:38px;
}

/*
 * ТЁМНАЯ ТЕМА ЭКРАНОВ — следует теме лендинга (кнопка в шапке или
 * система), контракт тот же: [data-theme='dark'] или системная тёмная
 * без явной светлой. Значения записаны ДВАЖДЫ, тест сверяет блоки.
 *
 * Не инверсия, а решения по ролям:
 * — ЗЕЛЁНЫЙ РАСХОДИТСЯ НА ДВА. Для текста и иконок светлый (#6CC59A,
 *   8.8 на экране): «Мастер приедет в этом окне» набрана 12px. Для
 *   заливки кнопки — глубокий (#2F7A55): белый текст на нём 5.2.
 * — QR ПРОПУСКА ОСТАЁТСЯ ЧЁРНЫМ НА БЕЛОМ. Сканер на КПП читает тёмный
 *   код на светлом поле; инвертированный код не прочтёт.
 * — SOS ОСТАЁТСЯ ТРЕВОЖНЫМ: тёмно-красная подложка и светло-красный
 *   текст (6.5), а не приглушённый серый.
 * — ЭКРАН НЕ ЧЁРНЫЙ, а графит с тенью хвои (#131513): на чистом чёрном
 *   плашки на ступень светлее читаются пятнами. Поле ввода — на ступень
 *   выше экрана, иначе не видно, куда печатать.
 */
:root[data-theme="dark"] .phone{
  --paper:#131513;
  --paper-2:#1D201D;
  --paper-3:#2B2F2B;
  --ink:#EDEFEA;
  --ink-2:#AEB5AF;
  --ink-3:#868E87;
  --moss:#6CC59A;
  --moss-tint:#1E3428;
  --moss-ink:#A6E3C4;
  --ember:#FF8A75;
  --ember-tint:#3B1F1A;
  --amber:#F0B45E;
  --amber-tint:#382B15;
  --btn-bg:#2F7A55;
  --btn-fg:#FFFFFF;
  --field-bg:#181B18;
  --qr-bg:#FFFFFF;
  --qr-ink:#111111;
  --island:#000000;
  --bezel-rim:#4A4A4A;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .phone{
    --paper:#131513;
    --paper-2:#1D201D;
    --paper-3:#2B2F2B;
    --ink:#EDEFEA;
    --ink-2:#AEB5AF;
    --ink-3:#868E87;
    --moss:#6CC59A;
    --moss-tint:#1E3428;
    --moss-ink:#A6E3C4;
    --ember:#FF8A75;
    --ember-tint:#3B1F1A;
    --amber:#F0B45E;
    --amber-tint:#382B15;
    --btn-bg:#2F7A55;
    --btn-fg:#FFFFFF;
    --field-bg:#181B18;
    --qr-bg:#FFFFFF;
    --qr-ink:#111111;
    --island:#000000;
    --bezel-rim:#4A4A4A;
  }
}

/*
 * На лендинге сетку под экраны строит Tailwind, поэтому .slot — обычный
 * блок, а не display:contents, как было внутри .row в resident-ui.css.
 */
.slot{display:flex;flex-direction:column;gap:14px}
.slot > .phone{width:100%}
.slot-cap{
  font-size:13px;color:var(--l-muted,#5C5C5A);letter-spacing:.01em;line-height:1.5
}
.slot-cap b{
  color:var(--l-fg,#141414);font-weight:500;display:block;font-size:14px;margin-bottom:2px
}

/*
 * Корпус устройства, как телефоны на кадрах эталона ShotScope: тёмная
 * рамка с тонким металлическим ободом и «островом» под камеру. Плоская
 * карточка вместо корпуса читалась схемой, а не продуктом.
 *
 * Шрифт внутри — Golos, как в самом приложении жителя: лендинг набран
 * другим гротеском, а экраны — это снимки продукта.
 */
.phone{
  position:relative;
  background:var(--paper);
  border-radius:var(--r-phone);
  border:7px solid #161616;
  box-shadow:
    0 0 0 1px var(--bezel-rim),
    0 40px 70px -40px rgba(0,0,0,.55);
  overflow:hidden;

  color:var(--ink);
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
}
.phone::before{
  content:"";position:absolute;z-index:1;top:8px;left:50%;
  width:68px;height:19px;transform:translateX(-50%);
  background:var(--island);border-radius:999px
}
.status{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 20px 4px;font-size:12px;color:var(--ink-3)
}
.status i{font-size:14px;margin-left:5px}

.bar{
  padding:12px 18px 14px;border-bottom:1px solid var(--paper-3);
  display:flex;align-items:center;gap:11px
}
.bar .back{font-size:19px;color:var(--ink-2)}
.bar h3{font-size:16px;font-weight:500;letter-spacing:-.01em}
.bar .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.bar .push{margin-left:auto}
.ava{
  width:36px;height:36px;border-radius:50%;background:var(--moss-tint);
  color:var(--moss-ink);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500
}
.body{padding:16px 18px 20px}

.tile{
  background:var(--paper-2);border-radius:var(--r-md);padding:15px 14px
}
.tile i{font-size:22px;color:var(--moss)}
.tile .t{font-size:15px;font-weight:500;margin-top:9px}
.tile .s{font-size:12px;color:var(--ink-2)}
.tile-sos{
  background:var(--ember-tint);border-radius:var(--r-md);
  width:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px
}
.tile-sos i{font-size:24px;color:var(--ember)}
.tile-sos span{font-size:15px;font-weight:500;color:var(--ember);letter-spacing:.04em}

.lbl{font-size:12px;color:var(--ink-3);margin-bottom:9px;letter-spacing:.01em}
.lbl.sp{margin-top:18px}

.item{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 13px;display:flex;align-items:center;gap:11px;margin-bottom:9px
}
.item i.lead{font-size:19px;color:var(--ink-2)}
.item .g{flex:1;min-width:0}
.item .g .a{font-size:14px}
.item .g .b{font-size:12px;color:var(--ink-3)}
.item i.tail{font-size:17px;color:var(--ink-3)}
.sq{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-2);flex:0 0 auto
}
.sq.moss{background:var(--moss-tint);color:var(--moss-ink);font-weight:500}
.sq.round{border-radius:50%}

.pill{font-size:11px;padding:3px 9px;border-radius:100px;white-space:nowrap}
.pill.ok{background:var(--moss-tint);color:var(--moss-ink)}
.pill.mute{background:var(--paper-2);color:var(--ink-2)}
.pill.warn{background:var(--amber-tint);color:var(--amber)}

.nav{
  border-top:1px solid var(--paper-3);margin-top:16px;padding-top:14px;
  display:grid;grid-template-columns:repeat(3,1fr);text-align:center
}
.nav i{font-size:21px;color:var(--ink-2)}
.nav span{display:block;font-size:12px;margin-top:4px}

.btn{
  display:block;width:100%;text-align:center;
  background:var(--btn-bg);color:var(--btn-fg);border:none;
  border-radius:var(--r-sm);padding:12px;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer
}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-3)}
.btn.half{width:auto;flex:1}
.btn-row{display:flex;gap:9px}

.field{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;margin-bottom:13px;background:var(--field-bg)
}
.field.ph{color:var(--ink-3)}
.field.area{height:64px}

.seg{display:flex;gap:7px;margin-bottom:16px}
.seg > div{
  flex:1;text-align:center;padding:9px 4px;border-radius:var(--r-sm);
  border:1px solid var(--paper-3);font-size:13px;color:var(--ink-2)
}
.seg > div i{display:block;font-size:19px;margin-bottom:3px}
.seg > div.on{background:var(--moss-tint);border-color:var(--moss-tint);color:var(--moss-ink)}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.opt{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 12px;font-size:13px;color:var(--ink-2)
}
.opt i{font-size:17px;margin-right:7px;vertical-align:-3px}
.opt.on{background:var(--moss-tint);border-color:var(--moss-tint);color:var(--moss-ink)}

.cat{
  background:var(--paper-2);border-radius:var(--r-md);
  padding:14px 6px;text-align:center
}
.cat i{font-size:23px;color:var(--moss)}
.cat span{display:block;font-size:12px;margin-top:6px}

.note{
  background:var(--paper-2);border-radius:var(--r-sm);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.55
}
.note.warn{background:var(--amber-tint);color:var(--amber)}

.sos-head{background:var(--ember-tint);padding:24px 18px;text-align:center}
.sos-head .k{font-size:13px;color:var(--ember)}
.sos-head .t{font-family:"Bitter",serif;font-size:38px;font-weight:500;color:var(--ember);line-height:1.1;margin:5px 0}
.sos-112{
  border:1px solid var(--ember);border-radius:var(--r-sm);
  padding:13px;text-align:center;color:var(--ember)
}
.sos-112 .a{font-size:15px;font-weight:500}
.sos-112 .b{font-size:12px;color:var(--ink-2);margin-top:3px}

.kv{font-size:13.5px;line-height:1.85}
.kv i{font-size:16px;color:var(--ink-2);width:20px;vertical-align:-2px}

.qr{
  width:142px;height:142px;margin:0 auto 15px;background:var(--qr-bg);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center
}
.qr i{font-size:84px;color:var(--qr-ink)}
.code{font-family:"Bitter",serif;font-size:26px;letter-spacing:7px;font-weight:500}

.step{display:flex;gap:13px}
.step .rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.step .rail i{font-size:19px;color:var(--moss)}
.step .rail i.now{color:var(--ink)}
.step .rail i.off{color:var(--paper-3)}
.step .rail .line{width:1px;flex:1;min-height:30px;background:var(--paper-3);margin:2px 0}
.step .c{padding-bottom:12px}
.step .c .a{font-size:14px}
.step .c .b{font-size:12px;color:var(--ink-3)}
.step .c .b.hi{color:var(--moss)}

.hero{
  border:2px solid var(--moss);border-radius:var(--r-md);padding:14px;margin-bottom:14px
}
.hero .top{display:flex;gap:11px;margin:11px 0}
.hero .desc{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;line-height:1.55}