/* Торус завода (ТЗ №32). Геометрия и раскладка взяты из прототипа
   `feat/factory-torus-frontend`; цветовая модель прототипа не взята —
   состояния сегментов красятся классами `.seg-*` из общего style.css,
   то есть тем же единственным источником, что и кольцо соты на поле. */

#torus-container {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Ширина ограничена и высотой кадра: пропорции кадра 720×640 (1,125), и без
   этого предела торус вырастает выше окна — приходится листать страницу,
   чтобы увидеть нижний ряд ячеек. */
#torus-root {
    position: relative;
    width: min(100%, 1100px, calc((100vh - 120px) * 1.125));
    color: var(--ink);
}

#torus-root svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    cursor: grab;
    touch-action: none;
}

#torus-root svg:active { cursor: grabbing; }
#torus-root path { vector-effect: non-scaling-stroke; }

.torus-rim {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.1;
    opacity: 0.22;
}

.torus-grid-cell {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    opacity: 0.16;
}

/* Верх ячейки нейтрален намеренно: сводного цвета у группы нет (ТЗ №20),
   состояние живёт на периметре — в кольце контуров. */
.torus-cell-top {
    fill: color-mix(in srgb, var(--ink-2) 32%, var(--ground));
    stroke: var(--line);
    stroke-width: 0.8;
}

.torus-cell-selected { fill: color-mix(in srgb, var(--accent) 28%, var(--ground)); }
.torus-cell-side { fill: color-mix(in srgb, var(--ink-2) 18%, var(--ground)); stroke: var(--line); stroke-width: 0.6; }
.torus-cell-dimmed { opacity: 0.45; }

/* Сегмент кольца: цвет и штрих — из общего style.css (.seg-*), здесь только
   толщина и стыки. */
.torus-seg {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
}

.torus-seg-quiet { opacity: 0.35; }

.torus-label {
    fill: var(--ink);
    font-size: 11px;
    font-weight: 500;
    text-anchor: middle;
    pointer-events: none;
}

.torus-label-lead { font-size: 12px; }

#torus-tooltip {
    position: absolute;
    z-index: 4;
    max-width: 260px;
    padding: 6px 8px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    pointer-events: none;
}

#torus-summary {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
}

.torus-note {
    position: absolute;
    top: 40px;
    left: 8px;
    z-index: 2;
    max-width: min(420px, calc(100% - 16px));
    padding: 6px 8px;
    background: var(--panel);
    color: var(--ink-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    font-size: 12px;
}

.torus-panel {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: min(300px, 42%);
    max-height: calc(100% - 60px);
    overflow-y: auto;
    padding: 8px 10px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
}

.torus-panel h2 {
    margin: 0 0 6px;
    font-size: 13px;
}

.torus-panel dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    margin: 4px 0 0;
}

.torus-panel dt { color: var(--ink-2); }
.torus-panel dd { margin: 0; }

.torus-contour {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.torus-state-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 6px;
    align-items: center;
}

.torus-state-swatch {
    display: block;
    width: 12px;
    height: 4px;
    border-top: 4px solid var(--seg-not-observable);
}

.torus-state-swatch.seg-no_open_issue { border-top-color: var(--ok); }
.torus-state-swatch.seg-attention_required { border-top-color: var(--warn); }
.torus-state-swatch.seg-critical { border-top-color: var(--critical); }
.torus-state-swatch.seg-not_observable { border-top-color: var(--seg-not-observable); }

/* Акт раскрытия зоны (ТЗ №46): поля пустые, подсказок нет — экран не
   предлагает названий и не угадывает их за человека. */
.torus-act {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.torus-act input[type="text"],
.torus-act select {
    width: 100%;
}

.torus-panel-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

#torus-nav {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 2px;
}

#torus-nav div { display: flex; gap: 2px; }

#torus-nav button {
    min-width: 28px;
    min-height: 26px;
    padding: 2px 5px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 3px;
}

.torus-menu {
    position: absolute;
    right: 46px;
    bottom: 40px;
    z-index: 4;
    display: grid;
    gap: 2px;
    padding: 4px;
    width: min(320px, 60%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.torus-menu[hidden] { display: none; }

.torus-menu button {
    display: grid;
    gap: 1px;
    padding: 5px 7px;
    text-align: left;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.torus-menu button.is-current { background: var(--accent); color: var(--panel); }
.torus-menu button[disabled] { cursor: not-allowed; color: var(--ink-2); }

/* Причина недоступности пункта — не всплывающая подсказка, а видимая строка:
   пункт без данных обязан объяснять себя так же, как серый контур. */
.torus-menu-reason {
    font-size: 11px;
    color: var(--ink-2);
}

/* Фокус клавиатуры на грани ячейки. Обводка SVG-контура вместо системной
   рамки: рамка рисуется по прямоугольнику узла и на повёрнутом шестиугольнике
   стоит мимо ячейки. */
.torus-cell-top:focus-visible {
    outline: none;
    stroke: var(--accent);
    stroke-width: 2.5;
}

.torus-cell-top:hover { stroke: var(--accent); }