/* RGS Monitor — production-клиент Mini App, оформление v5.1.
 *
 * Палитра, шкала отступов, радиусы и моторика перенесены из
 * утверждённого эталона design/rgs-monitor-v5.html без изменений.
 * Стенд сценариев эталона (#stand) сюда НЕ переносится: он существует
 * только чтобы показать состояния рядом, а в production состояние ровно
 * одно — настоящее.
 *
 * v5.1 намеренно расходится с эталоном по итогам реальной приёмки
 * владельцем: убран блок оповещений, убраны внутренние идентификаторы,
 * контур наблюдения развёрнут в полноширинные строки (в две узкие
 * колонки время обрезалось до «23:…»), добавлены пояснения по тапу.
 * Основание и перечень расхождений — в APPLY.md §20.
 *
 * Состояния различаются не только цветом: у каждого своя высота и своя
 * заливка. Экран должен читаться при дальтонизме и в чёрно-белой печати.
 */

:root{
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --m:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bg:#EEF0F3;--surface:#FFFFFF;--surface2:#F6F7F9;
  --ink:#0F141A;--ink2:#4A5462;--ink3:#7A8494;
  --line:rgba(15,20,26,.10);--line2:rgba(15,20,26,.06);
  --up:#12805A;--upS:#E4F2EB;
  --degraded:#9A6B08;--degradedS:#FBF0DA;
  --down:#C8402C;--downS:#FBE9E5;
  --ind:#5B4CA8;--indS:#ECE9F7;
  --nodata:#9AA3AF;--nodataS:#EDEFF2;
  --none:#C9CFD7;
  --accent:#2C6BB3;--skel:#E7EAEE;
  --ease:cubic-bezier(.2,.8,.2,1);--t1:180ms;--t2:200ms;--t3:220ms;
}
html[data-theme="dark"]{
  --bg:#0B0E12;--surface:#14181E;--surface2:#1A1F26;
  --ink:#E9EDF2;--ink2:#9AA5B3;--ink3:#6C7787;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.06);
  --up:#3FBE86;--upS:rgba(63,190,134,.16);
  --degraded:#E3A33C;--degradedS:rgba(227,163,60,.16);
  --down:#FF7059;--downS:rgba(255,112,89,.16);
  --ind:#A99BE8;--indS:rgba(169,155,232,.16);
  --nodata:#6C7787;--nodataS:rgba(108,119,135,.16);
  --none:#2A313A;
  --accent:#63A4EA;--skel:#20262E;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  -webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;color:inherit}

/* Правило с !important обязательно.
 *
 * Браузерное `[hidden]{display:none}` имеет нулевую специфичность, и
 * ЛЮБОЙ собственный `display` его перекрывает. Заслонка, лист инцидента
 * и плашка устаревания объявлены как flex — без этой строки они
 * остаются видимыми, хотя DOM честно сообщает `hidden === true`. */
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--m)}
.pretty{text-wrap:pretty}
.brk{overflow-wrap:anywhere;word-break:break-word}
.nw{white-space:nowrap}

/* ---------- каркас ---------- */
#app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
  overflow:hidden;padding-top:var(--safe-top,0px)}

.hdr{flex:none;position:relative;z-index:12;display:flex;align-items:center;gap:8px;
  min-height:54px;padding:0 12px 0 14px;background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:min-height var(--t2) var(--ease)}
/* Свёрнутая шапка. Экран — отдельный контейнер прокрутки, поэтому
 * изменение высоты шапки не сдвигает уже прочитанный текст: scrollTop
 * остаётся тем же числом, просто видно становится больше. */
.hdr.compact{min-height:38px}
.hdr.compact .id span{display:none}
.hdr.compact .id b{font-size:12.5px}
.hdr .id{flex:1;min-width:0}
.hdr .id b{display:block;font:600 13.5px/1.25 var(--f);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Подпись — метка, а не значение, поэтому пропорциональный шрифт:
 * моноширинный шире на пятую часть и не помещался на 320 px. */
.hdr .id span{display:block;margin-top:2px;font:400 11px/1.25 var(--f);color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .ago{flex:none;white-space:nowrap;text-align:right;font:400 11px/1.3 var(--m);
  color:var(--ink3)}
.hdr .rf{flex:none;width:36px;height:36px;margin-left:2px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--t1) var(--ease)}
.hdr .rf:active{background:var(--line2)}
.hdr .rf svg{width:17px;height:17px;color:var(--ink2)}
.hdr .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--st,var(--nodata))}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;
  background:transparent}
.prog i{display:block;width:38%;height:100%;background:var(--accent);
  animation:slide 1100ms var(--ease) infinite}
.spin{animation:spin 900ms linear infinite}

.body{position:relative;flex:1;min-height:0;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity var(--t1) var(--ease),transform var(--t3) var(--ease)}
.screen.behind{transform:translateX(-14px)}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.col{display:flex;flex-direction:column;gap:10px;padding:12px 14px 24px;min-height:100%}
.push{margin-top:auto}

.card{border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.pad{padding:12px}

/* Плашка «данные не обновлены». Прежние данные остаются на экране
 * ТОЛЬКО вместе с ней и временем последнего успешного получения. */
.stalebar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--degradedS);color:var(--degraded);border-bottom:1px solid var(--line);
  font:500 11.5px/1.4 var(--f)}
.stalebar svg{width:15px;height:15px;flex:none}

/* ---------- заголовки разделов ---------- */
.pg{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 0}
.pg h1{margin:0;font:700 19px/1.2 var(--f);letter-spacing:-.02em}
.pg span{white-space:nowrap;font:400 11.5px/1.3 var(--m);color:var(--ink3)}
.lb{white-space:nowrap;font:500 10.5px/1.3 var(--m);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3)}

/* ---------- состояние ---------- */
.st-up{--st:var(--up);--stS:var(--upS)}
.st-degraded{--st:var(--degraded);--stS:var(--degradedS)}
.st-down{--st:var(--down);--stS:var(--downS)}
.st-indeterminate{--st:var(--ind);--stS:var(--indS)}
.st-no_data{--st:var(--nodata);--stS:var(--nodataS)}
.st-no_observation{--st:var(--ink3);--stS:var(--surface2)}

.status{overflow:hidden;border-left:3px solid var(--st,var(--ink3))}
.status .top{display:flex;gap:12px;padding:14px 14px 12px}
.status .glyph{width:38px;height:38px;flex:none;border-radius:12px;background:var(--stS);
  color:var(--st);display:flex;align-items:center;justify-content:center}
.status .glyph svg{width:20px;height:20px}
.status .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status h2{margin:0;font:700 20px/1.2 var(--f);letter-spacing:-.02em;color:var(--st)}
.status .sub{margin-top:5px;font:400 13px/1.45 var(--f);color:var(--ink2)}
.status .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px;
  padding:8px 14px;border-top:1px solid var(--line2);background:var(--surface2);
  font:400 11.5px/1.4 var(--m);color:var(--ink2)}
.status .foot .sp{flex:1;min-width:0}

/* ---------- контур наблюдения ---------- */
.health{display:flex;flex-direction:column;padding:0}
.health .hhead{padding:11px 12px 0}
.health .h{display:flex;align-items:flex-start;gap:8px;padding:9px 12px}
.health .h+.h{border-top:1px solid var(--line2)}
.health .k{margin-top:4px}
.health .k{width:8px;height:8px;flex:none;border-radius:50%;background:var(--up)}
.health .k.bad{background:var(--degraded)}
.health .t{min-width:0;overflow:hidden}
.health .t b{display:block;font:500 12.5px/1.3 var(--f);white-space:nowrap;
  overflow-wrap:anywhere}
/* Ключевые время и состояние НЕ обрезаются многоточием: «23:…» вместо
 * «23:40 МСК» — это потерянный факт, а не экономия места. */
.health .t span{display:block;margin-top:3px;font:400 11.5px/1.4 var(--f);
  color:var(--ink2);white-space:normal;overflow-wrap:anywhere}

/* ---------- измерительная поверхность ---------- */
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface2);
  border:1px solid var(--line2)}
.seg button{flex:1;min-width:0;min-height:40px;border:none;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--ink3);font:600 13.5px/1.2 var(--f);
  transition:background var(--t2) var(--ease),color var(--t2) var(--ease)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.07)}

.meas{padding:12px 12px 14px;display:flex;flex-direction:column;gap:12px}
.headline{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.headline .lb{white-space:normal;text-transform:none;letter-spacing:0;
  font:400 12.5px/1.4 var(--f);color:var(--ink2)}
.headline .big{font:600 30px/1 var(--m);letter-spacing:-.03em}
.headline .big.good{color:var(--up)}
.headline .big.warn{color:var(--degraded)}
.headline .big.bad{color:var(--down)}
.headline .big.unknown{font-size:17px;line-height:1.15;color:var(--ink2);letter-spacing:-.01em}
.why{font:400 12px/1.5 var(--f);color:var(--ink2)}

.tl{position:relative;display:block;width:100%;padding:0;border:none;background:none;
  cursor:crosshair;touch-action:pan-y}
.bars{display:flex;align-items:flex-end;gap:0;height:54px;width:100%}
.bars i{flex:1 1 0;min-width:0;border-radius:1px;transform-origin:bottom;position:relative}
.bars i.up{height:38%;background:var(--up)}
.bars i.degraded{height:64%;background:var(--degraded)}
.bars i.down{height:100%;background:var(--down)}
.bars i.indeterminate{height:76%;
  background:repeating-linear-gradient(45deg,var(--ind) 0 2px,transparent 2px 4px);
  outline:.5px solid var(--ind)}
.bars i.no_data{height:16%;
  background:repeating-linear-gradient(135deg,var(--nodata) 0 1.5px,transparent 1.5px 3.2px);
  outline:.5px solid var(--nodata)}
.bars i.no_observation{height:3px;background:var(--none)}
.bars i.mix{height:100%;background:none;display:flex;flex-direction:column-reverse}
.bars i.mix>b{display:block;width:100%}
.bars i.mix>b.up{background:var(--up)}
.bars i.mix>b.degraded{background:var(--degraded)}
.bars i.mix>b.down{background:var(--down)}
.bars i.mix>b.indeterminate{background:var(--ind)}
.bars i.mix>b.no_data{background:var(--nodata);opacity:.5}
.bars i.mix>b.no_observation{background:var(--none)}
.cursor{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);
  border-radius:1px;pointer-events:none;opacity:.85}
.cursor.hover{background:var(--ink3);opacity:.55}
.axis{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin-top:6px;
  font:400 10.5px/1 var(--m);color:var(--ink3)}
.axis>span{white-space:nowrap}
.hint{font:400 11px/1.4 var(--f);color:var(--ink3)}

.point{border-radius:12px;border:1px solid var(--line);background:var(--surface2);padding:10px 11px;
  display:flex;flex-direction:column;gap:8px;animation:pop var(--t1) var(--ease) both}
.point.preview{border-style:dashed;background:transparent}
.point .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.point .r1 .t{flex:1;min-width:0;font:500 12px/1.35 var(--m);color:var(--ink)}
.point .x{width:26px;height:26px;flex:none;margin:-4px -4px -4px 0;border:none;background:none;
  border-radius:8px;color:var(--ink3);display:flex;align-items:center;justify-content:center;
  cursor:pointer}
.point .x svg{width:13px;height:13px}
.point .note{font:400 11.5px/1.45 var(--f);color:var(--ink2)}
.point .note b{color:var(--ink);font-weight:600}

.legend{display:flex;flex-wrap:wrap;gap:6px 12px;padding-top:10px;border-top:1px solid var(--line2)}
.legend div{display:flex;align-items:center;gap:5px;font:400 11px/1.3 var(--f);color:var(--ink2)}
.legend .k{width:4px;border-radius:1px;flex:none}
.legend .k.up{height:7px;background:var(--up)}
.legend .k.degraded{height:10px;background:var(--degraded)}
.legend .k.down{height:13px;background:var(--down)}
.legend .k.indeterminate{height:11px;
  background:repeating-linear-gradient(45deg,var(--ind) 0 2px,transparent 2px 4px);
  outline:1px solid var(--ind)}
.legend .k.no_data{height:5px;
  background:repeating-linear-gradient(135deg,var(--nodata) 0 1.5px,transparent 1.5px 3px);
  outline:1px solid var(--nodata)}
.legend .k.no_observation{width:9px;height:2px;background:var(--none)}

/* ---------- инцидент ---------- */
.inc{border-left:3px solid var(--st,var(--ink3));overflow:hidden}
.inc .ih{display:flex;align-items:center;gap:8px;padding:11px 13px;background:var(--stS)}
.inc .ih b{white-space:nowrap;font:600 11.5px/1.3 var(--m);letter-spacing:.07em;
  text-transform:uppercase;color:var(--st)}
.inc .ih .id{margin-left:auto;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font:400 10.5px/1.3 var(--m);color:var(--ink3)}
.inc .ib{padding:12px 13px;display:flex;flex-direction:column;gap:12px}
.inc .big{font:600 27px/1 var(--m);letter-spacing:-.03em;color:var(--st)}

.acts{display:flex;gap:8px;flex-wrap:wrap}
.btn{flex:1 1 auto;min-height:46px;min-width:96px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink);
  font:600 14px/1.2 var(--f);cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:7px;
  transition:background var(--t1) var(--ease),opacity var(--t1) var(--ease)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:default}

/* ---------- строки фактов ---------- */
.facts{border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.facts>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px}
.facts>div+div{border-top:1px solid var(--line2)}
.facts .k{flex:1;min-width:0;font:400 12.5px/1.4 var(--f);color:var(--ink2)}
.facts .v{flex:none;max-width:52%;text-align:right;white-space:pre-line;
  font:500 12.5px/1.4 var(--m);overflow-wrap:anywhere}
.facts .v.muted{color:var(--ink3)}
.facts .v.bad{color:var(--down)}
.facts .v.ind{color:var(--ind)}
.facts .v.good{color:var(--up)}

/* Ниже 350 px строка факта переносится, а НЕ сжимается: сжатие
 * превращает «не менее 2 ч 40 мин» в нечитаемый столбик по букве. */
@media (max-width:349px){
  .facts>div{flex-direction:column;gap:3px}
  .facts .v{max-width:100%;text-align:left}
  .health{flex-direction:column}
  .health .h+.h{border-left:none;border-top:1px solid var(--line2)}
      .cert .rows>div{flex-direction:column;gap:3px}
  .cert .rows .v{max-width:100%;text-align:left}
}

.note{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line)}
.note.warn{border-left:3px solid var(--degraded)}
.note.ind{border-left:3px solid var(--ind)}
.note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ink3)}
.note.warn svg{color:var(--degraded)}
.note.ind svg{color:var(--ind)}
.note .b{flex:1;min-width:0}
.note h4{margin:0;font:600 12.5px/1.35 var(--f)}
.note p{margin:4px 0 0;font:400 11.5px/1.5 var(--f);color:var(--ink2)}

/* ---------- сертификат ---------- */
.cert .ch{display:flex;align-items:center;gap:10px;padding:12px 13px}
.cert .ch .ic{width:34px;height:34px;flex:none;border-radius:11px;background:var(--stS);
  color:var(--st);display:flex;align-items:center;justify-content:center}
.cert .ch .ic svg{width:17px;height:17px}
.cert .ch .t{flex:1;min-width:0}
.cert .ch .t b{display:block;font:600 14px/1.3 var(--f);color:var(--st)}
.cert .ch .t span{display:block;margin-top:2px;font:400 11px/1.35 var(--m);color:var(--ink3)}
.cert .rows{border-top:1px solid var(--line2)}
.cert .rows>div{display:flex;justify-content:space-between;gap:12px;padding:9px 13px}
.cert .rows>div+div{border-top:1px solid var(--line2)}
.cert .rows .k{flex:1;min-width:0;font:400 12px/1.4 var(--f);color:var(--ink2)}
.cert .rows .v{flex:none;max-width:56%;text-align:right;font:500 12px/1.4 var(--m);
  overflow-wrap:anywhere}
.cert .rows .v.bad{color:var(--down)}
.disc{width:100%;min-height:42px;display:flex;align-items:center;gap:8px;padding:0 13px;
  border:none;border-top:1px solid var(--line2);background:var(--surface2);cursor:pointer;
  font:500 12px/1.3 var(--f);color:var(--ink2)}
.disc svg{width:14px;height:14px;color:var(--ink3);transition:transform var(--t2) var(--ease)}
.disc[aria-expanded="true"] svg{transform:rotate(90deg)}
.tech{padding:10px 13px 12px;border-top:1px solid var(--line2);background:var(--surface2);
  display:flex;flex-direction:column;gap:8px}
.tech>div{display:flex;flex-direction:column;gap:2px}
.tech .k{font:400 10.5px/1.3 var(--f);color:var(--ink3)}
.tech .v{font:400 11.5px/1.5 var(--m);color:var(--ink);overflow-wrap:anywhere;
  word-break:break-word}

/* ---------- инциденты, список ---------- */
.ilist{display:flex;flex-direction:column;gap:8px}
.icard{display:flex;width:100%;text-align:left;padding:0;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);overflow:hidden;cursor:pointer;
  transition:border-color var(--t1) var(--ease)}
.icard .stripe{width:3px;flex:none;background:var(--st,var(--ink3))}
.icard .in{flex:1;min-width:0;padding:11px 12px}
.icard .r1{display:flex;align-items:center;gap:8px}
.icard .r1 .id{margin-left:auto;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font:400 10px/1.3 var(--m);color:var(--ink3)}
.icard .rg{margin-top:7px;font:500 13px/1.4 var(--m);overflow-wrap:anywhere}
.icard .mrow{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;
  font:400 11.5px/1.45 var(--f);color:var(--ink2)}
.icard .mrow span{white-space:nowrap}
.icard .mrow .d{color:var(--ink3)}

.empty{padding:22px 10px 24px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:0}
.empty .ic{width:40px;height:40px;border-radius:13px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink3);margin-bottom:12px}
.empty .ic svg{width:19px;height:19px}
.empty h4{margin:0;font:600 15px/1.35 var(--f)}
.empty p{margin:7px 0 0;max-width:290px;font:400 12.5px/1.55 var(--f);color:var(--ink2)}

/* ---------- отчёты ---------- */
.prg{display:flex;flex-direction:column;gap:10px}
.prg .row{display:flex;flex-direction:column;gap:5px}
.prg .top{display:flex;align-items:baseline;gap:8px}
.prg .top b{white-space:nowrap;font:500 12.5px/1.3 var(--f)}
.prg .top span{margin-left:auto;white-space:nowrap;font:500 11.5px/1.3 var(--m);color:var(--ink3)}
.prg .bar{height:6px;border-radius:3px;background:var(--surface2);border:1px solid var(--line2);
  overflow:hidden}
.prg .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;
  transition:width var(--t3) var(--ease)}
.prg .bar i.full{background:var(--up)}
.willbe{display:flex;flex-direction:column;gap:6px}
.willbe>div{display:flex;gap:8px;font:400 12px/1.45 var(--f);color:var(--ink2)}
.willbe>div i{flex:none;width:5px;height:5px;margin-top:6px;border-radius:50%;background:var(--none)}

.pfoot{margin-top:auto;padding:10px 2px 0;display:flex;flex-direction:column;gap:5px}
.pfoot div{font:400 11px/1.5 var(--f);color:var(--ink3)}

/* ---------- лист инцидента ---------- */
.scrim{position:absolute;inset:0;z-index:18;background:rgba(6,9,13,.4);opacity:0;
  transition:opacity var(--t3) var(--ease)}
.scrim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:19;height:92%;
  border-radius:18px 18px 0 0;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(0,0,0,.16);display:flex;flex-direction:column;
  transform:translateY(104%);transition:transform var(--t3) var(--ease)}
.sheet.on{transform:none}
.sheet .grab{padding:8px 0 0;display:flex;justify-content:center}
.sheet .grab i{width:34px;height:4px;border-radius:2px;background:var(--line)}
.sheet .shd{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;
  border-bottom:1px solid var(--line2)}
.sheet .shd .x{width:38px;height:38px;flex:none;border:none;background:none;border-radius:12px;
  color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sheet .shd .x svg{width:15px;height:15px}
.sheet .shd .t{flex:1;min-width:0}
.sheet .shd .t h3{margin:0;font:600 15px/1.25 var(--f)}
.sheet .shd .t span{display:block;margin-top:2px;font:400 10.5px/1.35 var(--m);color:var(--ink3)}
.sheet .sb{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 26px;
  display:flex;flex-direction:column;gap:10px}
.sheet .sb>*{flex:none}
.sheet .sb .big{font:600 28px/1 var(--m);letter-spacing:-.03em;color:var(--st,var(--ink))}

/* ---------- нижняя навигация ---------- */
.nav{flex:none;position:relative;z-index:16;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:max(env(safe-area-inset-bottom),var(--safe-bottom,0px))}
.nav button{position:relative;min-height:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;border:none;background:none;cursor:pointer;
  color:var(--ink3);font:500 11px/1.2 var(--f);transition:color var(--t1) var(--ease);
  min-width:44px}
.nav button svg{width:21px;height:21px}
.nav button[aria-current="page"]{color:var(--accent);font-weight:600}
.nav button[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;
  width:26px;height:2px;margin-left:-13px;border-radius:0 0 2px 2px;background:var(--accent)}

/* ---------- заслонка ---------- */
.gate{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:24px 20px;background:var(--bg)}
.gate .box{max-width:330px;text-align:center}
.gate .ic{width:44px;height:44px;margin:0 auto 14px;border-radius:14px;
  border:1.5px dashed var(--ink3);color:var(--ink3);
  display:flex;align-items:center;justify-content:center}
.gate .ic.bad{border-style:solid;border-color:var(--down);color:var(--down)}
.gate .ic svg{width:21px;height:21px}
.gate h1{margin:0;font:600 17px/1.3 var(--f)}
.gate p{margin:9px 0 0;font:400 13px/1.55 var(--f);color:var(--ink2)}
.gate .code{margin-top:9px;font:400 11px/1.4 var(--m);color:var(--ink3)}
.gate .btn{margin-top:16px;width:100%}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes pop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* =====================================================================
   Компоненты v5.1
   ===================================================================== */

/* Кнопка «i». Рядом с текстом, а не вместо него: пояснение добавляет
 * подробность, но основной текст обязан читаться и без него. */
.ib{flex:none;width:28px;height:28px;margin:-4px -4px -4px 0;border:none;background:none;
  border-radius:9px;color:var(--ink3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--t1) var(--ease)}
.ib:active{background:var(--line2)}
.ib svg{width:16px;height:16px}

/* Строка «текст + пояснение». Текст переносится, кнопка не сжимается. */
.twi{display:flex;align-items:flex-start;gap:6px}
.twi .t{flex:1;min-width:0;font:400 12.5px/1.5 var(--f);color:var(--ink2);
  text-wrap:pretty;overflow-wrap:anywhere}
.twi.enough .t{color:var(--ink2)}
.health .hhead .t{font:500 12.5px/1.4 var(--f);color:var(--ink)}

/* Панель пояснения. Снизу, на всю ширину — на 320 px это единственная
 * форма, которая не выходит за экран. */
.infosheet{position:absolute;left:0;right:0;bottom:0;z-index:24;max-height:80%;
  border-radius:18px 18px 0 0;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(0,0,0,.16);display:flex;flex-direction:column;
  transform:translateY(104%);transition:transform var(--t3) var(--ease)}
.infosheet.on{transform:none}
#infoscrim{z-index:23}
.infosheet .ihd{display:flex;align-items:flex-start;gap:8px;padding:14px 12px 8px 16px;
  border-bottom:1px solid var(--line2)}
.infosheet .ihd .t{flex:1;min-width:0}
.infosheet .ititle{margin:0;font:600 15px/1.3 var(--f);overflow-wrap:anywhere}
.infosheet .x{width:38px;height:38px;flex:none;margin-top:-6px;border:none;background:none;
  border-radius:12px;color:var(--ink2);display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.infosheet .x svg{width:15px;height:15px}
.infosheet .ibody{overflow-y:auto;padding:12px 16px calc(22px + var(--safe-bottom,0px))}
.infosheet .ibody p{margin:0 0 10px;font:400 13.5px/1.6 var(--f);color:var(--ink2);
  overflow-wrap:anywhere}
.infosheet .ibody p:last-child{margin-bottom:0}

/* Технический код ошибки — компактной меткой, не в основном тексте. */
.codechip{display:inline-flex;align-items:center;margin-top:8px;padding:2px 7px;
  border-radius:6px;font:500 11px/1.35 var(--m);color:var(--ink3);
  background:var(--surface2);border:1px solid var(--line)}

/* Заголовок выбранной точки. */
.point .stitle{font:600 14px/1.35 var(--f);color:var(--st,var(--ink))}
.point .r1 .t{font:500 12.5px/1.35 var(--f);color:var(--ink3)}

.btn.small{flex:0 0 auto;min-height:38px;min-width:0;padding:0 12px;
  font:600 12.5px/1.2 var(--f);align-self:flex-start;margin-top:2px}

/* Заголовок сбоя без внутреннего идентификатора: справа его больше нет,
   поэтому строка не растягивается. */
.inc .ih b{white-space:normal}
.icard .r1{font:500 11px/1.3 var(--m);letter-spacing:.06em;text-transform:uppercase;
  color:var(--st,var(--ink3))}
.icard .rg{font:500 12.5px/1.4 var(--f)}

.young .big{margin-bottom:2px}
.young .prg{margin-top:12px}
.young .willbe{margin-top:8px}
.young .lb{margin-top:14px;display:block;white-space:normal}