/* Общая оболочка обеих страниц дашборда.
 *
 * Язык оформления перенесён из старой панели (PANEL-HANDOVER.md, раздел 7):
 * палитра, три состояния темы, шрифты и карточки взяты как есть, потому что
 * они уже проверены в работе. Заново ничего не придумывалось.
 *
 * Пара акцентов проверена на цветовую слепоту: разделение по deutan и protan
 * проходит с запасом, контраст к фону выше 3:1.
 */

:root{
  --bg:#F2F4F6;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --line:#DDE3E8;
  --line-soft:#E9EDF1;
  --ink:#0F1720;
  --ink-2:#3D4C5A;
  --ink-3:#6B7B8A;
  --accent:#0093AB;
  --accent-soft:rgba(0,147,171,.12);
  --accent-ink:#046374;
  --signal:#B3184C;
  --signal-soft:rgba(179,24,76,.10);
  --good:#2E7D4F;
  --good-soft:rgba(46,125,79,.12);
  --warn:#9A6206;
  --warn-soft:rgba(154,98,6,.13);
  --shadow:0 1px 2px rgba(15,23,32,.05), 0 8px 24px -12px rgba(15,23,32,.14);
  --radius:14px;
  /* Цель для пальца. Ниже 44px начинаются промахи, поэтому это пол,
   * а не пожелание: все нажимаемые элементы считают высоту отсюда. */
  --tap:44px;
}

/* Тёмная тема трижды: голый :root светлый, системная под защитой
 * :not([data-theme="light"]) и ручной переключатель. Так системная тема
 * и ручной выбор не спорят. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1319; --surface:#161C24; --surface-2:#1B222B;
    --line:#2A343F; --line-soft:#232C36;
    --ink:#E9EEF3; --ink-2:#B3C0CC; --ink-3:#7F8E9C;
    --accent:#1E9DB5; --accent-soft:rgba(30,157,181,.16); --accent-ink:#5EC4D8;
    --signal:#D94A72; --signal-soft:rgba(217,74,114,.16);
    --good:#5CB27C; --good-soft:rgba(92,178,124,.15);
    --warn:#D19A3C; --warn-soft:rgba(209,154,60,.15);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1319; --surface:#161C24; --surface-2:#1B222B;
  --line:#2A343F; --line-soft:#232C36;
  --ink:#E9EEF3; --ink-2:#B3C0CC; --ink-3:#7F8E9C;
  --accent:#1E9DB5; --accent-soft:rgba(30,157,181,.16); --accent-ink:#5EC4D8;
  --signal:#D94A72; --signal-soft:rgba(217,74,114,.16);
  --good:#5CB27C; --good-soft:rgba(92,178,124,.15);
  --warn:#D19A3C; --warn-soft:rgba(209,154,60,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}

/* Атрибут hidden должен побеждать любой наш display.
 * Без этого правила .editor{display:flex} перебивает [hidden]{display:none}
 * из таблицы браузера: специфичность равная, а авторский стиль старше.
 * Поймано на живой странице: редактор висел поверх формы входа. */
[hidden]{display:none !important}

html{
  /* Текст не должен раздуваться сам: iOS Safari умеет увеличивать шрифт
   * в блоках по своему усмотрению, и вместе с ним уезжает ширина. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* clip, а не hidden: hidden делает элемент контейнером прокрутки,
   * и на iOS это сбивает расчёт слоя просмотра, отчего страница
   * открывается увеличенной и её приходится отщипывать пальцами.
   * clip просто обрезает и контейнером прокрутки не становится.
   * scrollbar-gutter отсюда убран по той же причине. */
  overflow-x:clip;
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Golos Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Ширину задаёт экран, а не содержимое. Вместе с overflow-x:clip
   * на html это и держит страницу в границах телефона. */
  width:100%;
  max-width:100%;
  overflow-x:clip;
  /* Вырез и скруглённые углы: отступы берутся у самого устройства. */
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap{
  max-width:1560px; margin:0 auto;
  padding:20px clamp(12px,2.2vw,22px) 56px;
}

/* ---------- шапка ---------- */
.top{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:8px 16px; margin-bottom:18px;
}
.top h1{
  font-family:"Unbounded","Golos Text",sans-serif;
  font-weight:800; font-size:clamp(17px,2vw,20px); letter-spacing:-.015em;
  margin:0; text-wrap:balance; min-width:0;
}
.top .now{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.spacer{margin-left:auto}

.feed{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; padding:3px 8px 3px 6px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3);
  white-space:nowrap;
}
.feed .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.feed[data-s="live"]{color:var(--good); border-color:color-mix(in srgb,var(--good) 34%, var(--line))}
.feed[data-s="live"] .dot{background:var(--good)}
.feed[data-s="wait"]{color:var(--warn)}
.feed[data-s="wait"] .dot{background:var(--warn); animation:pulse 1.4s ease-in-out infinite}
.feed[data-s="err"]{color:var(--signal); border-color:color-mix(in srgb,var(--signal) 34%, var(--line))}
.feed[data-s="err"] .dot{background:var(--signal)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .feed .dot{animation:none !important}
  *{transition:none !important}
}

/* ---------- сетка карточек ----------
 * auto-fit вместо жёстких колонок: на 2560x1080 карточки сами встают
 * в три-четыре колонки, на 1280x1024 в две, на телефоне в одну.
 * minmax(0,...) обязателен, иначе длинное содержимое раздувает колонку
 * и появляется та самая горизонтальная прокрутка.
 */
.grid{
  display:grid; gap:16px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.grid > .wide{grid-column:1 / -1;}

/* ---------- карточка ----------
 * Фиксированной высоты нет нигде: карточка ровно такая, каким вышло
 * содержимое. Иначе на узком экране текст обрезается, а на широком
 * остаётся пустота.
 */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; min-width:0;
}
.phead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line-soft);
}
.phead h2{
  font-family:"Unbounded","Golos Text",sans-serif;
  font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  margin:0; color:var(--ink); min-width:0;
}
.phead .sub{font-size:11.5px; color:var(--ink-3); margin-left:auto; text-align:right; min-width:0;}
.pbody{padding:16px; min-width:0;}

/* ---------- числа ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:12px 16px;}
.fact dt{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 3px;}
.fact dd{
  margin:0; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:16px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;
}
.fact dd small{font-family:"Golos Text",sans-serif; font-size:11px; color:var(--ink-3); font-weight:400;}
.big{
  font-family:"Unbounded","Golos Text",sans-serif; font-weight:800;
  font-size:clamp(30px,4.4vw,46px); line-height:.95; letter-spacing:-.03em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}

/* ---------- графики ----------
 * SVG без фиксированных width и height: только viewBox плюс aspect-ratio.
 * Так график тянется по ширине карточки и никогда не создаёт прокрутки.
 */
.chart{margin:0; min-width:0;}
.chart svg{display:block; width:100%; height:auto; aspect-ratio:var(--ar,16/7);}
.gridline{stroke:var(--line-soft); stroke-width:1;}
.axtext{fill:var(--ink-3); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;}
.vlabel{fill:var(--ink); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:700;}
.klabel{fill:var(--accent-ink); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; font-weight:700;}

/* ---------- строки списка ----------
 * Три колонки: когда, что, сколько. auto у последней, чтобы число
 * не отрывалось от строки, и minmax(0,...) у средней, иначе длинный
 * текст распирает карточку.
 */
.rows{display:flex; flex-direction:column;}
.row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px; align-items:baseline;
  padding:8px 0; border-top:1px solid var(--line-soft);
}
.row:first-child{border-top:0;}
.row .when{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.row .what{min-width:0;}
.row .what b{font-weight:600; font-size:13px; color:var(--ink); display:block;}
.row .what span{font-size:11.5px; color:var(--ink-3); display:block; margin-top:1px;}
.row .mono{font-size:12.5px; white-space:nowrap; color:var(--ink-2);}

/* ---------- кнопки и поля ---------- */
button, .btn{
  font:inherit; font-weight:600; min-height:var(--tap);
  padding:10px 16px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
button.ghost{background:transparent; border-color:transparent; color:var(--ink-3);}
button:disabled{opacity:.5; cursor:default;}
input[type=text], input[type=password]{
  font:inherit; min-height:var(--tap); width:100%; min-width:0;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
input:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- вход ---------- */
.gate{max-width:22rem; margin:14vh auto 0;}
.gate form{display:flex; gap:8px; margin-top:14px;}
.gate .err{color:var(--signal); font-size:12.5px; margin-top:10px; min-height:1.2em;}

.muted{color:var(--ink-3)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.star{color:var(--warn); font-weight:700}

/* ---------- типы отображения ---------- */
.mcap{margin-top:6px; font-size:12.5px}
.big + .facts, .facts + .rows, .mcap + .facts{margin-top:14px}
.note{font-size:11.5px; margin-top:8px; line-height:1.45}
.tone-warn{color:var(--warn)}
.tone-signal{color:var(--signal)}
.tone-good{color:var(--good)}
.tone-muted{color:var(--ink-3)}
.unit{font-size:11px; margin-top:6px}

/* kv: подпись слева, значение справа */
.kv{display:flex; flex-direction:column}
.kvrow{
  display:flex; align-items:baseline; gap:12px; justify-content:space-between;
  padding:9px 0; border-top:1px solid var(--line-soft);
}
.kv .kvrow:first-child{border-top:0}
.kvlab{font-size:13px; min-width:0}
.kvval{display:flex; flex-direction:column; align-items:flex-end; min-width:0}
.kvval b{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:15px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kvsub{font-size:11px; margin-top:1px; white-space:nowrap}

.phead .sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.submuted{color:var(--ink-3); font-size:11.5px}
.gtitle{font-family:"Unbounded","Golos Text",sans-serif; font-size:20px; margin:0}
button.edit-list{margin-top:14px}