/* ТехДело — табло линии и пост ОТК. Основа по принципам высокоэффективного HMI (ANSI/ISA-101.01):
   фон и площади — оттенки серого; статус — светофором (К46, сессия с экспертами 26.09): зелёный — с запасом (только
   знак и число, без заливки площадей), жёлтый — внимание (запас снижен, уход режима), оранжевый — нужно решение,
   красный — стоп и вне допуска; каждый статус — цвет + форма знака + подпись. Палитра статусов — открытая система статусов; текст, включая приглушённый
   (--muted, --faint), — с контрастом не ниже 4,5:1 (WCAG AA) на фонах панелей обеих тем.
   Светлая тема по умолчанию (защита, проектор); тёмная — [data-theme="dark"], меню роли или ?theme=dark. */

/* ---------- дизайн-токены (SPEC.md 6): имена постоянные, ими пользуются все потоки ----------
   Шрифт: на главных экранах (Линия, Приёмка ОТК, Деталь, панель карточки, Что остановили) нет текста меньше 14 px;
   --fs-minor (13 px) — только вторичные экраны (Средства измерений, Входной контроль, Прогон по истории, Журнал,
   справка) и деления осей графиков. Размер и межстрочный — парами: font: 400 var(--fs-body)/var(--lh-body) … */
:root {
  --fs-cap: 14px;   --lh-cap: 20px;    /* подписи: время, «кому», вторая строка тревоги, подписи шкал и фактов */
  --fs-body: 16px;  --lh-body: 24px;   /* основной текст, строки списков, кнопки, чек-лист, варианты решения */
  --fs-h: 20px;     --lh-h: 28px;      /* заголовок раздела, заголовок чек-листа, номер детали в сжатой шапке */
  --fs-num: 28px;   --lh-num: 34px;    /* номер детали в шапке, числа фактов, запас на плитке, число «Требует действия» */
  --fs-hero: 44px;  --lh-hero: 48px;   /* одно главное число экрана («Остановлено: 1») — не больше одного */
  --fs-minor: 13px; --lh-minor: 18px;  /* только вторичные экраны и деления осей */
  --fw-regular: 400; --fw-strong: 600;
  /* отступы: внутри панели 16, между панелями 16, между разделами объекта 24 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* высоты */
  --h-bar: 48px;    /* строка статуса */
  --h-row: 44px;    /* строка списка в одну строку, главная кнопка */
  --h-row2: 56px;   /* строка «Требует действия» в две строки */
  --h-btn: 36px;    /* вторичная кнопка */
  --h-foot: 64px;   /* нижняя панель детали */
  /* ширины: 1280 → 1920 */
  --w-left: 300px;  /* колонка «Требует действия», очередь «Приёмки ОТК» */
  --w-panel: 520px; /* панель карточки */
  --w-drawer: 420px; /* журнал — выдвижная панель */
  --bar-accent: 3px; /* черта активной вкладки */
  --bar-status: 4px; /* черта статуса слева у строки тревоги */
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 1700px) {
  :root { --w-left: 340px; --w-panel: 560px; }
}

:root, :root[data-theme="dark"] {
  --bg: #0f1216; --surface: #161a20; --surface-2: #1b2027; --surface-3: #232932; --line: #2a3039; --line-2: #3a414c;
  --text: #e6e9ed; --text-2: #b9c0ca; --muted: #8b94a1; --faint: #808894; --link: #9dbfdf; --focus: #9dbfdf;
  /* статусы: заливка и текст на нейтральном фоне */
  --st-ok: #3fb45f; --st-ok-ink: #5cc878; /* светофор: норма — спокойный зелёный знак и число */
  --st-critical: #ff3838; --st-critical-ink: #ff5a5a;
  --st-serious: #ff9a1a; --st-serious-ink: #ffa742; /* оранжевый — посередине между жёлтым и красным (ΔE ≈ 45 и 52) */
  --st-caution: #fce83a; --st-caution-ink: #efdc4a;
  --st-standby: #2dccff; --st-standby-ink: #45d0ff;
  --on-st: #0f1216;
  --accent: #4dacff; --on-accent: #0f1216; /* выбор, ссылка, активная вкладка, одна главная кнопка на экран */
  --radius: 6px; --gap: 10px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eceff2; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #e8ebef; --line: #d6dae0; --line-2: #c1c7cf;
  --text: #15191e; --text-2: #3b434d; --muted: #5a6370; --faint: #646b75; --link: #235e91; --focus: #235e91;
  /* на белом фоне статусные линии и рамки темнее: контраст не ниже 3:1 для графики и 4,5:1 для текста */
  --st-ok: #2e8540; --st-ok-ink: #1d6b2f;
  --st-critical: #ff2a04; --st-critical-ink: #b41b02;
  --st-serious: #dc7400; --st-serious-ink: #955000; /* ΔE до жёлтого и красного ≈ 39 и 40 */
  --st-caution: #9c8700; --st-caution-ink: #6b5d00;
  --st-standby: #1a9fcc; --st-standby-ink: #0a6a8a;
  --on-st: #15191e;
  --accent: #005fa3; --on-accent: #ffffff;
  color-scheme: light;
}

/* зона → статус светофором: рамки и площади нормы нейтральны, зелёный — только у знака и числа */
.z-with_margin { --z: var(--line-2); --z-ink: var(--st-ok-ink); }
.z-not_checked { --z: var(--faint); --z-ink: var(--faint); }
.z-margin_reduced { --z: var(--st-caution); --z-ink: var(--st-caution-ink); }
.z-near_limit { --z: var(--st-serious); --z-ink: var(--st-serious-ink); }
.z-beyond_limit { --z: var(--st-critical); --z-ink: var(--st-critical-ink); }
.z-not_assessable { --z: var(--st-standby); --z-ink: var(--st-standby-ink); }
.sev-critical, .tone-critical { --z: var(--st-critical); --z-ink: var(--st-critical-ink); }
.sev-serious, .tone-serious { --z: var(--st-serious); --z-ink: var(--st-serious-ink); }
.sev-caution, .tone-caution { --z: var(--st-caution); --z-ink: var(--st-caution-ink); }
.sev-advisory, .tone-none { --z: var(--line-2); --z-ink: var(--muted); }
.tone-ok { --z: var(--line-2); --z-ink: var(--st-ok-ink); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-cap)/1.4 var(--font);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-weight: 650; }
.muted { color: var(--muted); }
.cyc { color: var(--faint); font-size: var(--fs-cap); font-weight: 400; margin-left: 6px; white-space: nowrap; }
.faint { color: var(--faint); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-minor); overflow-wrap: anywhere; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--surface); padding: 6px 10px; }
.hint { color: var(--muted); font-size: var(--fs-cap); margin: 6px 0 0; }
[hidden] { display: none !important; }

/* ---------- строка статуса: одна строка 48 px (SPEC.md 2.3) ---------- */
.topbar { display: flex; align-items: center; gap: var(--sp-2); height: var(--h-bar); padding: 0 var(--sp-4); background: var(--surface);
  border-bottom: 1px solid var(--line); flex-wrap: nowrap; white-space: nowrap; min-width: 0; position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none !important; margin-right: var(--sp-2); flex: none; }
.logo { width: 22px; height: 22px; color: var(--muted); }
.brand-t { font-weight: 700; font-size: var(--fs-body); }
.tabs { display: flex; align-self: stretch; min-width: 0; }
.tabs > a, .tab-more { display: flex; align-items: center; gap: 4px; padding: 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-body);
  font-weight: var(--fw-regular); text-decoration: none; background: none; border: 0; border-top: var(--bar-accent) solid transparent;
  border-bottom: var(--bar-accent) solid transparent; cursor: pointer; white-space: nowrap; }
.tabs > a:hover, .tab-more:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.tabs > a.active, .tab-more.active { color: var(--text); font-weight: var(--fw-strong); border-bottom-color: var(--accent); }
.tab-more-box { position: relative; display: flex; }
.tabs-menu, .role-menu { position: absolute; top: calc(100% + 1px); z-index: 40; display: flex; flex-direction: column; padding: var(--sp-1) 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); }
.tabs-menu { left: 0; min-width: 240px; }
.role-menu { right: 0; width: 380px; max-width: calc(100vw - 32px); }
.menu-i { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); color: var(--text);
  background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.menu-i:hover, .menu-i:focus-visible { background: var(--surface-2); text-decoration: none; }
.tabs-menu .menu-i.active { font-weight: var(--fw-strong); box-shadow: inset var(--bar-accent) 0 0 var(--accent); }
.menu-sep { height: 1px; background: var(--line); margin: var(--sp-1) 0; }

/* три значка наблюдения: ноль — серый знак и серое «0»; больше нуля — цвет уровня */
.watch { display: flex; gap: var(--sp-1); flex: none; }
.w { display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn); padding: 0 var(--sp-2); border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--muted); font-size: var(--fs-cap); line-height: var(--lh-cap); }
.w:hover { background: var(--surface-2); }
.w .zic { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.w-n { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); min-width: 1ch; }
.w-on { color: var(--z-ink); border-color: var(--z); }
.w-on .zic { background: var(--z); color: var(--on-st); box-shadow: none; }
.w-on .w-n, .w-on .w-l { color: var(--z-ink); font-weight: var(--fw-strong); }
/* «! Данные: N» — только при настоящей тревоге по входным данным (К46): карантин, без подписи, замолчало оборудование */
.src-sign { flex: none; display: inline-flex; align-items: center; height: var(--h-btn); padding: 0 var(--sp-2); border-radius: 4px;
  border: 1px solid var(--st-serious); color: var(--st-serious-ink); font-size: var(--fs-cap); font-weight: var(--fw-strong); white-space: nowrap; }
.src-sign:hover { background: var(--surface-2); text-decoration: none; }
.w-on.sev-caution .zic { background: transparent; color: var(--z-ink); box-shadow: inset 0 0 0 1.5px var(--z); border-radius: 50%; }
.w-on.sev-critical .zic { border-radius: 2px; }
.spacer { flex: 1; min-width: 0; }
.conn { display: flex; align-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; flex: none; }
.conn .dot { display: none; }
.conn-live, .conn-demo { color: var(--text-2); }
.conn-lost { color: var(--st-critical-ink); font-weight: var(--fw-strong); }
.conn-pause { cursor: pointer; color: var(--accent); font-weight: var(--fw-strong); }
.clock { font-size: var(--fs-body); color: var(--text-2); flex: none; }
.role { position: relative; flex: none; }
.role-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn); padding: 0 var(--sp-3); border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: var(--fs-cap); }
.role-btn:hover, .role-btn[aria-expanded="true"] { background: var(--surface-2); }
.rl-name { font-weight: var(--fw-strong); }
.rl-line::before { content: "·"; margin: 0 6px 0 0; color: var(--muted); }
.rl-line { color: var(--text-2); }
.rl-caret { color: var(--muted); }
.role-list { list-style: none; margin: 0; padding: 0; max-height: 58vh; overflow: auto; }
.role-i { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-4); background: none;
  border: 0; cursor: pointer; color: var(--text); white-space: normal; }
.role-i:hover, .role-i:focus-visible { background: var(--surface-2); }
.role-i.on { background: var(--surface-2); box-shadow: inset var(--bar-accent) 0 0 var(--accent); }
.ri-t { font-size: var(--fs-body); line-height: var(--lh-body); }
.ri-t .rl-name { font-weight: var(--fw-strong); }
.ri-t .rl-line::before { margin-left: 6px; }
.ri-d { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--muted); }
.role-menu #token { margin: var(--sp-2) var(--sp-4); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 8px; }
.icon-btn { flex: none; width: var(--h-btn); height: var(--h-btn); border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer;
  color: var(--text-2); font-size: var(--fs-body); font-weight: 700; }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.democtl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--fs-cap); color: var(--muted);
  border-top: 1px solid var(--line); margin-top: var(--sp-1); }
.democtl button, .democtl select { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.demo-tag { font-weight: 600; padding: 0 4px 0 0; }
/* кабинетная роль: наблюдать на табло нечего — в строке статуса только имя, рабочее место и справка */
.is-cabinet .watch, .is-cabinet #journal { display: none; }
.is-cabinet .brand-t { display: inline; }
/* выбор линии «Показать: …» — над очередью «Приёмки ОТК» */
.linepick { display: flex; align-items: center; gap: 2px; }
.linepick .lp-l { color: var(--muted); font-size: var(--fs-cap); margin-right: var(--sp-2); }
.linepick button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; color: var(--text-2); font-size: var(--fs-cap);
  font-weight: 600; border: 1px solid transparent; background: none; cursor: pointer; }
.linepick button.on { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.linepick .lp-n { color: var(--muted); font-weight: 400; }
.otk-lines { margin: 0 0 var(--sp-2); }

/* ---------- основное поле ---------- */
.view { overflow: auto; padding: 10px 16px; min-height: 0; }
.view-line { overflow: hidden; display: flex; flex-direction: column; }
.placeholder { color: var(--muted); padding: 32px; text-align: center; }
.placeholder.big { font-size: var(--fs-h); padding-top: 18vh; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.panel-h { margin: 0 0 8px; font-size: var(--fs-cap); font-weight: 650; color: var(--text-2); display: flex; align-items: baseline; gap: 8px; }
.panel-h .count { color: var(--muted); font-weight: 500; }
.back { display: inline-block; font-size: var(--fs-cap); margin-bottom: 4px; }

/* ---------- статус: знак + подпись ---------- */
.zic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; font-size: var(--fs-cap); font-weight: 800; line-height: 1;
  background: var(--z); color: var(--on-st); flex: none; }
.z-with_margin > .zic, .zic.z-with_margin { background: transparent; color: var(--st-ok-ink); font-weight: 800; }
.z-margin_reduced > .zic, .zic.z-margin_reduced { background: transparent; color: var(--z-ink); box-shadow: inset 0 0 0 1.5px var(--z); border-radius: 50%; }
.z-not_checked > .zic, .zic.z-not_checked { background: transparent; color: var(--faint); box-shadow: none; border: 1.5px dashed var(--faint); border-radius: 50%; }
.z-beyond_limit > .zic, .zic.z-beyond_limit { border-radius: 2px; }
.zbadge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-cap); white-space: nowrap; color: var(--z-ink); font-weight: 600; }
.zbadge.z-with_margin, .zbadge.z-not_checked { font-weight: 500; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: var(--fs-cap); border: 1px solid var(--line-2); color: var(--text-2); }
.pill-hold { color: var(--st-serious-ink); border-color: var(--st-serious); }
.lvl { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-cap); font-weight: 700; color: var(--z-ink); white-space: nowrap; }
.lvl .zic { width: 15px; height: 15px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 600; color: var(--text); }
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-small { padding: 3px 9px; font-size: var(--fs-cap); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }

/* ---------- справка ---------- */
.help { width: min(720px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface); color: var(--text); }
.help::backdrop { background: rgb(0 0 0 / 55%); }
.help-in { padding: 14px 18px 18px; overflow: auto; max-height: calc(100vh - 66px); }
.help h2 { margin: 0 0 6px; font-size: var(--fs-h); }
.help h3 { margin: 14px 0 4px; font-size: var(--fs-body); }
.help p, .help li { font-size: var(--fs-cap); color: var(--text-2); }
.help ul { margin: 4px 0; padding-left: 18px; }
.help-close { float: right; }
.help-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); border-bottom: 1px solid var(--line); margin: 0 44px var(--sp-3) 0; }
.help-tabs button { padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: var(--bar-accent) solid transparent; background: none; cursor: pointer;
  font-size: var(--fs-cap); color: var(--text-2); }
.help-tabs button[aria-selected="true"] { color: var(--text); font-weight: var(--fw-strong); border-bottom-color: var(--accent); }
.help-body { min-height: 360px; } /* окно не прыгает по высоте при смене вкладки */
.help-lap { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-cap); margin-top: var(--sp-3); }
.help-st { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; align-items: center; margin: 6px 0; font-size: var(--fs-cap); }

/* ---------- сообщения ---------- */
.toasts { position: fixed; right: 16px; bottom: 48px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(440px, calc(100vw - 32px)); }
.toast { padding: 9px 12px; border-radius: var(--radius); background: var(--surface-3); border: 1px solid var(--line-2);
  animation: toastIn .25s ease; font-size: var(--fs-cap); }
.toast-error { border-color: var(--st-critical); }
.toast.out { opacity: 0; transition: .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- К35: плашка новых записей, «Основание», подробности записи ---------- */
.fresh-bar { display: block; width: 100%; margin: 0 0 4px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-cap); text-align: left; cursor: pointer; }
.fresh-bar[hidden] { display: none; }
.fresh-bar:hover { border-color: var(--muted); }
.basis { margin: 4px 0 0; font-size: var(--fs-cap); color: var(--muted); }
.basis summary { cursor: pointer; color: var(--link); width: max-content; }
.basis p { margin: 4px 0 0; overflow-wrap: anywhere; }
.tl-more { grid-column: 2 / -1; font-size: var(--fs-cap); color: var(--muted); }
.tl-more summary { cursor: pointer; }
.tl-more p { margin: 2px 0; }
.acc-stale[hidden] { display: none; }

/* 1366 и 1280: строка статуса по-прежнему одна — плотнее отступы; имя «ТехДело» уступает место только надписи паузы */
@media (max-width: 1400px) {
  .topbar { gap: var(--sp-1); padding: 0 var(--sp-3); }
  .is-paused .brand-t { display: none; }
  .tabs > a, .tab-more { padding: 0 var(--sp-2); }
  .w { padding: 0 6px; }
}
@media (max-width: 1100px) {
  .w-l, .rl-line, .brand-t { display: none; }
}
@media (max-width: 700px) {
  body { overflow: auto; height: auto; min-height: 100%; }
  .view { padding: 8px 12px; }
  .conn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- рабочее место в кабинете ролей (вместо ошибки 403, SPEC.md 3.12) ---------- */
.cabinet { max-width: 720px; margin: 12vh auto 0; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: flex-start; }
.cab-h { margin: 0; font-size: var(--fs-h); line-height: var(--lh-h); }
.cab-who { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.cabinet .muted { margin: 0 0 var(--sp-3); font-size: var(--fs-body); }
.cab-go { min-height: var(--h-row); padding: 0 var(--sp-5); font-size: var(--fs-body); }

/* ---------- «Приёмка ОТК»: группы очереди (разметка — otk.js К37, просьба в K37_REPORT) ---------- */
.q-group { margin-top: var(--sp-3); }
.q-group > summary { cursor: pointer; list-style-position: inside; }
.q-show { display: flex; flex-wrap: nowrap; gap: 2px; }
.q-show button { white-space: nowrap; }
.q-show .lp-n, .q-show b { font-weight: 700; }
.q-nav { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; margin-bottom: var(--sp-2); }

/* Публичное демо на телефоне: вкладки прокручиваются в своей полосе и не налезают на значки строки статуса */
@media (max-width: 1200px) {
  .tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1 1 auto; }
  .tabs::-webkit-scrollbar { display: none; }
  .watch, .conn, .clock, .role, .icon-btn { flex: none; }
}
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; height: auto; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .tabs { order: 10; flex-basis: 100%; height: 40px; }
  .clock, .conn-t { display: none; }
}