/* Палитра: значения из валидированного набора (dataviz), проверены
   validate_palette.js на обеих поверхностях — тёмной #1a1a19 и светлой
   #fcfcfb. Светлая тема не «инверсия» тёмной, а отдельный набор шагов.
   Шрифт моноширинный намеренно: это терминальный вид, а не системный sans. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #0d0d0d;   /* фон страницы */
  --surface:      #1a1a19;   /* панели и поверхность графиков */
  --surface-fade: rgba(26, 26, 25, 0);
  --surface-2:    #1f1f1e;   /* приподнятое: плитки, карточки */
  --control:      #232322;   /* поля ввода, наведение */
  --row-hover:    #201f1e;
  --mine:         #17202b;   /* строка своей ноды */
  --mine-hover:   #1c2836;
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --muted:        #898781;
  --grid:         #2c2c2a;
  --axis:         #383835;
  --border:       rgba(255, 255, 255, 0.10);
  --shadow:       rgba(0, 0, 0, .5);
  --on-accent:    #ffffff;

  --series-1:     #3987e5;   /* категориальный слот 1 */
  --series-2:     #d95926;   /* слот 2 */
  --series-3:     #199e70;   /* слот 3 */
  --series-4:     #c98500;   /* слот 4 */
  --series-5:     #d55181;   /* слот 5 */
  --meter-track:  #184f95;   /* тёмный шаг того же синего */

  --good:         #0ca30c;
  --warning:      #fab219;
  --serious:      #ec835a;
  --critical:     #d03b3b;
  --good-text:    #0ca30c;
  --warn-text:    #fab219;
  --down:         rgba(208, 59, 59, .13);
  --down-hover:   rgba(208, 59, 59, .2);
  --danger-wash:  rgba(208, 59, 59, .15);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-fade: rgba(252, 252, 251, 0);
  --surface-2:    #f2f2ef;
  --control:      #ffffff;
  --row-hover:    #f0efec;
  --mine:         #eaf1fb;
  --mine-hover:   #dde8f7;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  /* Каноничный muted #898781 на светлом фоне даёт 3.5:1 — для подписей
     размером 10–11px мало. Берём темнее, 6:1, иерархия сохраняется:
     ink темнее ink-2, ink-2 темнее muted. */
  --muted:        #63625e;
  --grid:         #e1e0d9;
  --axis:         #c3c2b7;
  --border:       rgba(11, 11, 11, 0.10);
  --shadow:       rgba(11, 11, 11, .18);
  --on-accent:    #ffffff;

  --series-1:     #2a78d6;
  --series-2:     #eb6834;
  --series-3:     #1baf7a;   /* слот 3 */
  --series-4:     #eda100;   /* слот 4 */
  --series-5:     #e87ba4;   /* слот 5 */
  --meter-track:  #cde2fb;   /* светлый шаг того же синего */

  --good:         #0ca30c;
  --warning:      #fab219;
  --serious:      #ec835a;
  --critical:     #d03b3b;
  /* Статусный текст на светлом фоне берём темнее: жёлтый #fab219 даёт
     контраст 1.79 и как надпись нечитаем. Точка рядом остаётся канонического
     статусного цвета, так что смысл не держится на одном оттенке. */
  --good-text:    #006300;
  --warn-text:    #8a5a00;
  --down:         rgba(208, 59, 59, .10);
  --down-hover:   rgba(208, 59, 59, .16);
  --danger-wash:  rgba(208, 59, 59, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 13px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Шапка с вкладками ─────────────────────────────────────────────── */
header.tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header.tabs > .bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 1980px; margin: 0 auto;
  padding: 10px 16px;
}
header.tabs .nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
                   justify-content: center; }
header.tabs .side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
header.tabs .side.right { justify-content: flex-end; }
header.tabs a.tab {
  color: var(--ink-2); padding: 6px 14px; border-radius: 4px;
  letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
}
header.tabs a.tab:hover { background: var(--control); text-decoration: none; }
header.tabs a.tab.active { color: var(--ink); background: var(--control); }
header.tabs .sep { color: var(--axis); }
header.tabs .clock { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 1980 — чтобы таблица своих нод с полным именем оператора влезала целиком:
   при трёх нодах она 1904px, плюс поля панели. На экранах уже 1950px она
   всё равно прокручивается — столько столбцов туда физически не помещается. */
main { padding: 16px; max-width: 1980px; margin: 0 auto; }

/* ── Панели ────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
/* Прокручивается только таблица. Если повесить overflow-x на саму панель,
   выпадающие списки внутри неё будут обрезаться: не-visible по одной оси
   делает не-visible и другую. */
.table-scroll { overflow-x: auto; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--axis); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
/* Горизонтальный скролл у широких таблиц: без подсказки не видно, что
   справа есть ещё колонки. Тень у правого края появляется только при скролле. */
.table-scroll.scrollable {
  background:
    linear-gradient(to right, var(--surface) 30%, var(--surface-fade)),
    linear-gradient(to right, var(--surface-fade), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--shadow), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, var(--shadow), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}


/* Заголовок панели, в том числе вложенный в строку с элементами управления:
   без второго селектора он терял стиль и вылезал крупным чёрным текстом. */
.panel > h2, .panel-head > h2 {
  margin: 0 0 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.summary { white-space: pre; color: var(--ink-2); line-height: 1.7; }
.summary b { color: var(--ink); font-weight: 600; }

/* Полоса прогресса эпохи: ordinal-шкала одного тона, не радуга. */
.progress {
  height: 4px; background: var(--grid); border-radius: 2px;
  overflow: hidden; margin: 8px 0 2px; max-width: 640px;
}
.progress > span { display: block; height: 100%; background: var(--series-1); }


/* ── Шапка кластера: meter + KPI-ряд ───────────────────────────────── */
.cluster-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2);
}
.cluster-head .spacer { flex: 1; }
.cluster-name {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}

/* Meter прогресса эпохи: заливка акцентом, трек — тёмный шаг того же синего
   (blue-on-blue), чтобы состояние читалось по всей полосе. */
.meter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: 12px; color: var(--ink-2);
}
.meter {
  flex: 1 1 260px; min-width: 200px; height: 8px; border-radius: 4px;
  background: var(--meter-track); overflow: hidden;
}
.meter > span { display: block; height: 100%; background: var(--series-1); }
.meter-value { font-weight: 600; color: var(--ink); min-width: 4.5em; }
.meter-note { color: var(--muted); }
.meter-note b { color: var(--ink-2); font-weight: 600; }

.tiles {
  display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.tile {
  border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px;
  background: var(--surface-2); position: relative;
}
.tile-label {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
/* Значение — проприорциональные цифры: tabular-nums делает крупное число
   разреженным, он нужен только в колонках таблиц. */
.tile-value {
  font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: normal; display: flex; align-items: center; gap: 6px;
}
.tile-value .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tile-value .dot.ok   { background: var(--good); }
.tile-value .dot.warn { background: var(--warning); }
.tile-value .dot.bad  { background: var(--critical); }
.tile-value.st-bad  { color: var(--critical); }
.tile-value.st-warn { color: var(--warn-text); }
.tile-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
svg.spark { position: absolute; right: 10px; bottom: 8px; opacity: .9; }

details.raw > summary {
  cursor: pointer; list-style: none; color: var(--muted); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 0;
}
details.raw > summary::-webkit-details-marker { display: none; }
details.raw > summary::before { content: "▸ "; color: var(--series-1); }
details.raw[open] > summary::before { content: "▾ "; }
details.raw > summary:hover { color: var(--ink-2); }
details.raw .summary { margin-top: 8px; }

/* ── Кольцевая диаграмма версий ────────────────────────────────────── */
.versions-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.versions-layout > .table-scroll { flex: 1 1 380px; }
.donut { margin: 0; flex: 0 0 auto; }
.donut svg { display: block; }
/* Разрыв между долями — цветом поверхности, чтобы соседние не сливались. */
.donut circle { stroke-linecap: butt; }
.donut-value { fill: var(--ink); font-size: 19px; font-weight: 600; }
.donut-label { fill: var(--muted); font-size: 10.5px; }
.donut-legend {
  display: grid; gap: 3px; margin-top: 12px; font-size: 11.5px; color: var(--ink-2);
  max-width: 210px;
}
.donut-legend span { display: flex; align-items: center; gap: 7px; }
.donut-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ── Выбор колонок ─────────────────────────────────────────────────── */
/* Заголовок панели с инструментом справа. */
.panel > h2.with-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.panel > h2.with-tools > span { display: inline-flex; align-items: center; gap: 8px; }

.table-tools { display: flex; justify-content: flex-end; margin: 12px 0 6px; }

/* Заголовок панели и относящиеся к ней элементы управления в одной строке.
   На узком экране переносятся, поэтому wrap, а не фиксированные колонки. */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.panel-head > h2 { margin: 0; }
.panel-head > .filter-row { margin: 0; }

.colpicker { position: relative; display: inline-block; text-transform: none;
             letter-spacing: normal; }
/* Список у правого края не должен уезжать за границу панели. */
.colpicker.right .colpicker-body { left: auto; right: 0; }
.colpicker > summary {
  cursor: pointer; list-style: none; color: var(--ink-2); font-size: 12px;
  padding: 4px 9px; border: 1px solid var(--axis); border-radius: 4px;
  background: var(--control); user-select: none;
}
.colpicker > summary::-webkit-details-marker { display: none; }
.colpicker > summary::before { content: "▸ "; color: var(--series-1); }
.colpicker[open] > summary::before { content: "▾ "; }
.colpicker > summary:hover { color: var(--ink); }
.colpicker-count { color: var(--muted); font-size: 11px; margin-left: 6px; }
.colpicker-body {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; min-width: 210px; overflow-y: auto;
  /* 60vh хватало, чтобы список одного кластера накрыл кнопку другого,
     и клик по ней попадал в чужой чекбокс. */
  max-height: min(45vh, 300px);
  display: grid; gap: 2px;
  box-shadow: 0 6px 20px var(--shadow);
}
.colpicker-body label {
  display: flex; align-items: center; gap: 7px; padding: 3px 6px;
  border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--ink-2);
}
.colpicker-body label:hover { background: var(--control); color: var(--ink); }
.colpicker-body input { accent-color: var(--series-1); }
.colpicker-body label.locked { color: var(--muted); cursor: default; }
.colpicker-body label.locked:hover { background: none; color: var(--muted); }
.colpicker-reset {
  margin-top: 6px; padding: 5px; background: var(--control); color: var(--ink-2);
  border: 1px solid var(--axis); border-radius: 4px; font: inherit;
  font-size: 11.5px; cursor: pointer;
}
.colpicker-reset:hover { color: var(--ink); border-color: var(--series-1); }

/* ── Поиск по таблице ──────────────────────────────────────────────── */
.filter-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.filter-row > input[type="search"] {
  background: var(--control); color: var(--ink); border: 1px solid var(--axis);
  border-radius: 4px; padding: 5px 9px; font: inherit; min-width: 320px; max-width: 100%;
}
.filter-row > input[type="search"]:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
/* Кнопка выбора колонок прижата к правому краю строки; список раскрывается
   влево от неё, иначе уезжает за границу экрана. */
.filter-row > .colpicker { margin-left: auto; }
.filter-row > .colpicker .colpicker-body { left: auto; right: 0; }
.filter-row .muted { font-size: 11.5px; }

/* ── Таблицы ───────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: auto; font-size: 12.5px; }
th, td { padding: 5px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child,
th.left, td.left { text-align: left; }
thead th {
  color: var(--muted); font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: .06em;
  border-bottom: 1px solid var(--axis);
  cursor: pointer; user-select: none; position: sticky; top: 0;
  background: var(--surface);
}
thead th:hover { color: var(--ink-2); }
thead th::after { content: "  "; color: var(--muted); }
thead th[data-dir="asc"]::after  { content: " ▲"; color: var(--series-1); }
thead th[data-dir="desc"]::after { content: " ▼"; color: var(--series-1); }
tbody tr { border-bottom: 1px solid var(--grid); }
tbody tr:hover { background: var(--row-hover); }
tbody tr.mine { background: var(--mine); }
tbody tr.mine:hover { background: var(--mine-hover); }
/* Упавшая нода: колонка «состояние» стоит последней и на узком экране
   уезжает за край, поэтому тревога дублируется подсветкой всей строки. */
tbody tr.down { background: var(--down); box-shadow: inset 3px 0 0 var(--critical); }
tbody tr.down:hover { background: var(--down-hover); }

td.mono-key { color: var(--ink-2); }

/* Имя валидатора и оператора бывает длиной в предложение — обрезаем, иначе
   одна такая строка растягивает колонку во всей таблице. Полное — в подсказке.
   Самый длинный ASN в сети: «AS396356 Saveincloud Hospedagem na Internet Ltda
   (ipcompany.com.br)» — 524px на колонку из-за одной ноды. */
.name-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             max-width: 24ch; }
.name-cell a { display: inline-block; max-width: 100%; overflow: hidden;
               text-overflow: ellipsis; vertical-align: bottom; }

/* ── Копирование по клику ──────────────────────────────────────────── */
.copyable {
  cursor: pointer; color: var(--ink-2); border-bottom: 1px dotted var(--axis);
  position: relative; white-space: nowrap;
}
.copyable:hover { color: var(--ink); border-bottom-color: var(--series-1); }
/* Значение с подсказкой при наведении: пунктир говорит, что там есть что читать. */
.hint { border-bottom: 1px dotted var(--axis); cursor: help; }

/* Было → стало: прежнее значение приглушено и зачёркнуто, стрелка акцентом. */
.was { color: var(--muted); text-decoration: line-through;
       text-decoration-color: var(--axis); }
.arrow { color: var(--series-1); margin: 0 6px; }
/* У плитки подчёркивать нечего — подсказку обозначает курсор. */
.tile.hint { border-bottom: 1px solid var(--border); cursor: help; }

.copyable:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.copyable[data-copied]::after {
  content: "скопировано"; position: absolute; left: 0; bottom: 130%;
  background: var(--control); border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 7px; font-size: 10.5px; white-space: nowrap; z-index: 20;
  color: var(--good-text);
}
.copyable[data-copied="fail"]::after { content: "не удалось"; color: var(--critical); }
.muted { color: var(--muted); }
.dim   { color: var(--ink-2); }

/* Статус: всегда значок + подпись, никогда один только цвет. */
.status { display: inline-flex; align-items: center; gap: 5px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.ok       .dot { background: var(--good); }
.status.warn     .dot { background: var(--warning); }
.status.bad      .dot { background: var(--critical); }
.status.muted-st .dot { background: var(--muted); }
.status.ok       { color: var(--good-text); }
.status.warn     { color: var(--warn-text); }
.status.bad      { color: var(--critical); }
.status.muted-st { color: var(--muted); }

.tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  border: 1px solid var(--axis); color: var(--ink-2); font-size: 11px;
}

/* ── Графики ───────────────────────────────────────────────────────── */
.charts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
.chart-title { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; }
.chart-sub   { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.chart-wrap  { position: relative; }
svg.chart { display: block; width: 100%; height: 190px; overflow: visible; }
svg.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
svg.chart .tick { fill: var(--muted); font-size: 10px; }
svg.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .crosshair { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart .marker { stroke: var(--surface); stroke-width: 2; }
/* Прячем именно видимостью: увезённый за край элемент при
   overflow:visible вылезает на соседний график. */
svg.chart .hidden { visibility: hidden; }

.tooltip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--control); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 9px; font-size: 11.5px; color: var(--ink);
  white-space: pre; transition: opacity .08s; z-index: 5;
}

.legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle;
            margin-right: 5px; }

/* ── Правка нод ────────────────────────────────────────────────────── */
.notice {
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px;
  margin-bottom: 16px; font-size: 12.5px;
}
.notice.ok   { border-color: var(--good);     color: var(--good-text); }
.notice.bad  { border-color: var(--critical); color: var(--critical); }
.notice.warn { border-color: var(--warning);  color: var(--warn-text); }
.notice code { color: var(--ink); }

.node-edit {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2);
}
.node-edit-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12px; color: var(--ink-2);
}
.node-edit-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.node-edit label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.node-edit label.wide { flex: 1 1 380px; }
.node-edit label.checkbox {
  flex-direction: row; align-items: center; gap: 6px; text-transform: none;
  letter-spacing: normal; font-size: 12px; padding-bottom: 7px;
}
.node-edit input[type="text"], .node-edit input:not([type]), .node-edit select {
  background: var(--control); color: var(--ink); border: 1px solid var(--axis);
  border-radius: 4px; padding: 5px 8px; font: inherit; font-size: 12.5px;
  text-transform: none; letter-spacing: normal;
}
.node-edit label.wide input { width: 100%; }
.node-edit input:focus, .node-edit select:focus {
  outline: 2px solid var(--series-1); outline-offset: 1px;
}
.node-edit input:disabled, .node-edit select:disabled { opacity: .5; cursor: not-allowed; }
.node-edit input[type="checkbox"] { accent-color: var(--series-1); }
.node-edit-actions { display: flex; gap: 8px; padding-bottom: 1px; }

/* Ручка перетаскивания. Курсор grab, а не pointer: это перемещение, а не
   нажатие, и вид курсора здесь единственная подсказка до первого захвата. */
.grip {
  cursor: grab; color: var(--muted); user-select: none; line-height: 1;
  padding: 2px 4px; border-radius: 4px; font-size: 14px;
}
.grip:hover { color: var(--ink-2); background: var(--control); }
.grip:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.node-edit.dragging { opacity: .45; cursor: grabbing; }
.node-edit.drop-target { border-color: var(--series-1); }
.node-edit button {
  background: var(--series-1); color: var(--on-accent); border: 0; border-radius: 4px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.node-edit button:hover { filter: brightness(1.1); }
.node-edit button.danger { background: none; border: 1px solid var(--critical);
                           color: var(--critical); }
.node-edit button.danger:hover { background: var(--danger-wash); }
.node-edit button:disabled { opacity: .5; cursor: not-allowed; }
.hidden-form { display: none; }

/* ── Логин ─────────────────────────────────────────────────────────── */
/* ── Свёрнутые блоки ───────────────────────────────────────────────── */
details.fold { margin-bottom: 16px; }
details.fold > summary {
  cursor: pointer; list-style: none; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸ "; color: var(--series-1); }
details.fold[open] > summary::before { content: "▾ "; }
details.fold > summary:hover { color: var(--ink-2); }
details.fold[open] > summary { border-radius: 6px 6px 0 0; border-bottom: 0; }
details.fold > .panel { border-radius: 0 0 6px 6px; margin-bottom: 0; }
/* Заголовок свёртки может нести управление (выбор сети). Треугольник —
   ::before, то есть первый flex-элемент, поэтому инструмент прижимаем
   отдельно, а не через space-between: иначе заголовок уедет в середину. */
details.fold > summary.with-tools { display: flex; align-items: center; gap: 10px; }
details.fold > summary.with-tools > form,
details.fold > summary.with-tools > .colpicker {
  margin-left: auto; text-transform: none; letter-spacing: normal;
}

/* ── Переключатель темы ────────────────────────────────────────────── */
.themetoggle {
  display: inline-flex; align-items: center; background: none; border: 0;
  padding: 4px 6px; border-radius: 5px; color: var(--muted); cursor: pointer;
  line-height: 1;
}
.themetoggle:hover { background: var(--control); color: var(--ink-2); }
.themetoggle:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.themetoggle svg { display: block; fill: none; stroke: currentColor;
                   stroke-width: 1.8; stroke-linecap: round; }
.themetoggle .moon { fill: currentColor; stroke: none; }
/* Показываем то, на что переключимся: в тёмной теме — солнце. */
.themetoggle .sun { display: none; }
:root[data-theme="light"] .themetoggle .sun { display: block; }
:root[data-theme="light"] .themetoggle .moon { display: none; }

/* ── Автообновление: кольцо вместо цифр ────────────────────────────── */
/* Кольцо убывает по кругу до следующего обновления. Тот же blue-on-blue,
   что у полосы прогресса эпохи: один смысл — один приём. */
.autoring {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 3px 8px; border-radius: 5px;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; line-height: 1;
}
.autoring:hover { background: var(--control); color: var(--ink-2); }
.autoring:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.autoring svg { display: block; }
.autoring circle { fill: none; stroke-width: 2.5; }
.autoring .track { stroke: var(--meter-track); }
.autoring .prog {
  stroke: var(--series-1); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .95s linear;
}
/* Выключено — кольцо гаснет, остаётся тусклый трек. */
.autoring[aria-pressed="false"] .track { stroke: var(--axis); }
.autoring[aria-pressed="false"] .prog  { opacity: 0; }
.autoring[aria-pressed="true"]  { color: var(--ink-2); }

.refresh { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.refresh input { accent-color: var(--series-1); }

footer.foot {
  color: var(--muted); font-size: 11px;
  border-top: 1px solid var(--grid); margin-top: 8px;
}
footer.foot > div { max-width: 1980px; margin: 0 auto; padding: 14px 16px 28px; }

/* Карточка по центру экрана, а не на отступе сверху: на ноутбуке форма
   висела в верхней трети и смотрелась обрезанной. */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: 24px; }
.login { width: 100%; max-width: 330px; margin: 0; padding: 22px; }
.login .field { display: block; margin-bottom: 13px; }
.login .field > span {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
/* Только текстовые поля: width 100% на всех input растянул бы и флажок. */
.login input[type="text"], .login input[type="password"] {
  width: 100%; padding: 9px 11px; background: var(--control); color: var(--ink);
  border: 1px solid var(--axis); border-radius: 4px; font: inherit;
}
.login input[type="text"]:focus, .login input[type="password"]:focus {
  outline: 2px solid var(--series-1); outline-offset: 1px; border-color: transparent;
}
/* Прижат к правому краю карточки: слева поля, справа переключатель —
   иначе флажок висит под полем ввода и читается как его часть. */
.login .remember {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  margin: 16px 0 14px; color: var(--ink-2); font-size: 12.5px; cursor: pointer;
}
.login .remember input { accent-color: var(--series-1); margin: 0; }
.login button {
  width: 100%; padding: 10px; background: var(--series-1); color: var(--on-accent);
  border: 0; border-radius: 4px; font: inherit; cursor: pointer; font-weight: 600;
}
.login button:hover { filter: brightness(1.08); }
.login button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.login .notice { margin-bottom: 14px; }

/* ── Выбор эпохи ───────────────────────────────────────────────────── */
.epoch-picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 12px; color: var(--ink-2);
}
/* Вариант для шапки: без отступов и покомпактнее. */
.epoch-picker.compact { margin: 0; gap: 6px; font-size: 11.5px; color: var(--muted); }
.epoch-picker.compact select { padding: 3px 6px; font-size: 11.5px; }
.epoch-picker select {
  background: var(--control); color: var(--ink); border: 1px solid var(--axis);
  border-radius: 4px; padding: 4px 8px; font: inherit;
}
.epoch-picker select:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.ok-text { color: var(--good-text); }


/* ── Мобильный вид ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { font-size: 12.5px; }
  main { padding: 10px; }
  header.tabs > .bar {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px 10px; gap: 6px;
  }
  /* При переносе вкладок на вторую строку разделители повисают в конце строки. */
  header.tabs .sep { display: none; }
  header.tabs .nav { gap: 2px 8px; }
  header.tabs .side.right { justify-content: center; }
  header.tabs a.tab { padding: 5px 9px; font-size: 11px; }
  header.tabs .clock { font-size: 11px; }
  .panel { padding: 10px; }
  .summary { white-space: pre-wrap; font-size: 11.5px; line-height: 1.6; }

  /* Таблицы, помеченные как cards, разворачиваются в карточки. */
  table.cards { width: 100%; }
  table.cards thead { display: none; }
  table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 10px; margin-bottom: 10px; background: var(--surface-2);
  }
  table.cards tr.mine { background: var(--mine); }
  table.cards td {
    text-align: right; padding: 3px 0;
    display: flex; justify-content: space-between; gap: 12px; white-space: normal;
  }
  table.cards td::before {
    content: attr(data-label); color: var(--muted); text-transform: uppercase;
    font-size: 10.5px; letter-spacing: .06em; text-align: left; flex: none;
  }
  table.cards td:empty { display: none; }
  /* В карточке места хватает — обрезаем только в таблице. */
  .name-cell, .name-cell a { max-width: none; white-space: normal; }


  /* На узком экране список раскрывается обычным блоком, а не всплывает.
     Всплывающий привязан к краю кнопки, а кнопку в разных местах прижимает
     то влево, то вправо — и он уезжает за границу экрана то в одну, то в
     другую сторону. Блоку в потоке уехать некуда. */
  .colpicker { width: 100%; }
  .colpicker-body {
    position: static; width: auto; min-width: 0;
    margin-top: 6px; box-shadow: none; max-height: none;
  }

  .filter-row > input[type="search"] { min-width: 0; flex: 1; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .tile-value { font-size: 15px; }
  svg.spark { display: none; }
  .meter-row { gap: 8px; }
  .meter { flex-basis: 100%; }

  /* Остальные широкие таблицы просто скроллятся вбок. */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .charts { grid-template-columns: 1fr; }
}