/* Стили вкладок «Карта» и «Граф» проекта и общего движка отрисовки.
 *
 * Всё — только на переменных темы кабинета (--card, --border, --muted, --text,
 * --hover, --accent, --radius и родственных): тёмная и светлая схемы работают
 * сами, хардкод-цветов и белых фонов здесь нет. Оттенки типов узлов получаются
 * смешением тех же переменных (color-mix), а не набором «своих» цветов.
 *
 * Префиксы: pwc- — движок (SVG, узлы, рёбра, панель зума); pwm- — «Карта»;
 * pwg- — «Граф». Стили панели подробностей у вкладок общие по форме.
 */

/* ── холст движка ────────────────────────────────────────────────────── */
.pwc-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.pwc-svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.pwc-svg:active { cursor: grabbing; }
.pwc-svg:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

.pwc-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}
.pwc-zbtn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.pwc-zbtn:hover { background: var(--hover); border-color: var(--accent); }

.pwc-none {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
    text-align: center;
    padding: 0 20px;
}

/* ── оттенки типов узлов: одна переменная на тип ─────────────────────── */
.pwc-t-project { --pwc-tone: var(--accent); }
.pwc-t-machine { --pwc-tone: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.pwc-t-repository { --pwc-tone: color-mix(in srgb, var(--accent) 30%, var(--muted)); }
.pwc-t-module { --pwc-tone: var(--muted); }
.pwc-t-technology { --pwc-tone: color-mix(in srgb, var(--danger) 45%, var(--muted)); }
.pwc-t-entrypoint { --pwc-tone: color-mix(in srgb, var(--accent) 78%, var(--text)); }
.pwc-t-idea { --pwc-tone: color-mix(in srgb, var(--accent) 42%, var(--muted)); }
.pwc-t-decision { --pwc-tone: color-mix(in srgb, var(--accent) 22%, var(--muted)); }
.pwc-t-question { --pwc-tone: color-mix(in srgb, var(--danger) 25%, var(--muted)); }
.pwc-t-issue { --pwc-tone: var(--danger); }
.pwc-t-task { --pwc-tone: color-mix(in srgb, var(--accent) 64%, var(--muted)); }
.pwc-t-evidence { --pwc-tone: color-mix(in srgb, var(--accent) 45%, var(--muted)); }
.pwc-t-actor { --pwc-tone: var(--muted2); }
.pwc-t-other { --pwc-tone: var(--muted2); }

/* ── узлы ────────────────────────────────────────────────────────────── */
.pwc-node { cursor: pointer; }
.pwc-node .pwc-disc {
    fill: var(--card);
    stroke: var(--pwc-tone, var(--muted2));
    stroke-width: 1.6;
    transition: opacity .12s ease;
}
/* Узел, выведенный эвристикой, а не взятый из БД: пунктирный контур. */
.pwc-node.is-derived .pwc-disc { stroke-dasharray: 4 3; opacity: .9; }
.pwc-node .pwc-lbl {
    fill: var(--text);
    font-size: 12px;
    font-family: inherit;
    pointer-events: none;
}
.pwc-node .pwc-st { stroke: var(--card); stroke-width: 1.4; fill: var(--muted); }
.pwc-node .pwc-st[data-st="active"],
.pwc-node .pwc-st[data-st="done"],
.pwc-node .pwc-st[data-st="resolved"],
.pwc-node .pwc-st[data-st="accepted"],
.pwc-node .pwc-st[data-st="implemented"],
.pwc-node .pwc-st[data-st="verified"],
.pwc-node .pwc-st[data-st="fixed"],
.pwc-node .pwc-st[data-st="SUCCEEDED"] { fill: var(--accent); }
.pwc-node .pwc-st[data-st="error"],
.pwc-node .pwc-st[data-st="FAILED"],
.pwc-node .pwc-st[data-st="rejected"],
.pwc-node .pwc-st[data-st="open"] { fill: var(--danger); }
.pwc-node .pwc-st[data-st="running"],
.pwc-node .pwc-st[data-st="in_progress"],
.pwc-node .pwc-st[data-st="evaluating"],
.pwc-node .pwc-st[data-st="investigating"] { fill: var(--muted2); }

.pwc-node:hover .pwc-disc { stroke-width: 2.4; }
.pwc-node.is-nb .pwc-disc { stroke: var(--accent); stroke-width: 2.2; }
.pwc-node.is-sel .pwc-disc {
    stroke: var(--accent);
    stroke-width: 3;
    fill: var(--hover);
}
.pwc-node.is-sel .pwc-lbl { font-weight: 600; }
.pwc-node.is-dim { opacity: .26; }
.pwc-node.is-dim .pwc-disc { stroke-width: 1.2; }

/* ── рёбра ───────────────────────────────────────────────────────────── */
.pwc-edge {
    stroke: var(--muted2);
    stroke-width: 1.3;
    opacity: .8;
}
/* Пунктир — связь выведена сервисом, а не записана явной ссылкой. */
.pwc-edge.is-derived { stroke-dasharray: 6 5; opacity: .62; }
.pwc-edge.is-hl {
    stroke: var(--accent);
    stroke-width: 2.1;
    opacity: 1;
}
.pwc-edge.is-hl.is-derived { stroke-dasharray: 8 5; }
.pwc-edge.is-dim { opacity: .1; }

.pwc-ar path { fill: var(--muted2); }
.pwc-ar-d path { opacity: .75; }
.pwc-ar-hl path { fill: var(--accent); }

/* Скрытие — фильтрами; раскладка при этом не пересчитывается. */
.pwc-hide { display: none; }

/* ── общая форма вкладки ─────────────────────────────────────────────── */
.pwm,
.pwg { display: flex; flex-direction: column; gap: 8px; }

.pwm-bar,
.pwg-bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.pwm-counts,
.pwg-counts {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.pwm-chips,
.pwg-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pwm-chips-lbl,
.pwg-chips-lbl { color: var(--muted); font-size: 12px; }

.pwm-chip,
.pwg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}
.pwm-chip:hover,
.pwg-chip:hover { background: var(--hover); border-color: var(--accent); }
.pwm-chip.is-off,
.pwg-chip.is-off { opacity: .45; }
.pwm-chip.is-off .pwm-chip-dot { opacity: .4; }
.pwm-chip-n,
.pwg-chip-n { color: var(--muted); font-size: 11px; }
.pwm-chip-dot,
.pwg-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pwc-tone, var(--muted2));
    flex: 0 0 auto;
}

.pwm-filters,
.pwg-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ── легенда «подтверждено / предположение» ──────────────────────────── */
.pwm-key,
.pwg-key {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 11.5px;
}
.pwm-key-i,
.pwg-key-i { display: inline-flex; align-items: center; gap: 6px; }
.pwm-key-line,
.pwg-key-line {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 2px solid var(--muted2);
}
.pwm-key-line.is-derived,
.pwg-key-line.is-derived { border-top-style: dashed; }

/* ── предупреждения и пояснения ──────────────────────────────────────── */
.pwm-notice,
.pwg-warn {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 11px;
    background: var(--hover);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 12.5px;
    color: var(--text);
}
.pwm-notice-t { font-weight: 600; }
.pwm-notice-d { flex: 1 1 260px; min-width: 0; color: var(--muted); }
.pwm-notice-a { flex: 0 0 auto; margin-left: auto; }
.pwg-warn { border-left-color: var(--danger); color: var(--muted); }

/* ── тело вкладки: холст слева, панель справа ────────────────────────── */
.pwm-body,
.pwg-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pwm-main,
.pwg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.pwm-stage,
.pwg-stage {
    position: relative;
    height: min(66vh, 640px);
    min-height: 340px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pwm-error,
.pwg-error { padding: 20px; color: var(--muted); font-size: 13px; }

/* ── пустые состояния ────────────────────────────────────────────────── */
.pwm-empty-state,
.pwg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.pwm-empty-t,
.pwg-empty-t { font-size: 14px; font-weight: 600; color: var(--text); }
.pwm-empty-d,
.pwg-empty-d { max-width: 640px; color: var(--muted); font-size: 12.5px; }
.pwm-empty-a { margin-top: 4px; }

/* ── списки «не связано» / «без связей» ─────────────────────────────── */
.pwm-unlinked,
.pwg-unlinked {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pwm-block-head,
.pwg-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pwg-block-n {
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0;
}
.pwg-block-hint { text-transform: none; letter-spacing: 0; color: var(--muted); }
.pwm-unl-list,
.pwg-unl-list { list-style: none; margin: 0; padding: 0; }

.pwm-unl {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.pwm-unl:last-child { border-bottom: 0; }
.pwm-unl-k,
.pwg-unl-t { color: var(--pwc-tone, var(--muted2)); flex: 0 0 auto; }
.pwm-unl-l { color: var(--text); overflow-wrap: anywhere; }
.pwm-unl-r { margin-left: auto; color: var(--muted); font-size: 11.5px; text-align: right; }

.pwg-unl { border-bottom: 1px solid var(--border); }
.pwg-unl:last-child { border-bottom: 0; }
.pwg-unl-b {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.pwg-unl-b:hover { background: var(--hover); }
.pwg-unl-l { color: var(--text); overflow-wrap: anywhere; }
.pwg-unl-s { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.pwg-unl-more { padding: 6px 10px; color: var(--muted); font-size: 11.5px; }

/* ── панель подробностей узла ────────────────────────────────────────── */
.pwm-drawer,
.pwg-drawer {
    flex: 0 0 372px;
    display: flex;
    flex-direction: column;
    max-height: min(66vh, 640px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pwm-drawer[hidden],
.pwg-drawer[hidden] { display: none; }

.pwm-dw-head,
.pwg-dw-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--border);
}
.pwm-dw-titles,
.pwg-dw-titles { flex: 1 1 auto; min-width: 0; }
.pwm-dw-title,
.pwg-dw-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}
.pwm-dw-sub,
.pwg-dw-sub { margin-top: 2px; font-size: 11px; color: var(--muted); }
.pwm-x,
.pwg-x {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.pwm-x:hover,
.pwg-x:hover { background: var(--hover); color: var(--text); }

.pwm-dw-body,
.pwg-dw-body { padding: 9px 11px; overflow: auto; }

.pwm-dw-basis,
.pwg-dw-basis {
    margin-bottom: 8px;
    padding: 7px 9px;
    background: var(--hover);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--muted);
    font-size: 12px;
}
.pwm-dw-lbl,
.pwg-dw-lbl {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pwg-dw-id {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}
.pwg-dw-act { margin-bottom: 8px; }

.pwm-meta,
.pwg-meta {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 12px;
}
.pwm-meta th,
.pwg-meta th {
    width: 42%;
    padding: 4px 8px 4px 0;
    text-align: left;
    vertical-align: top;
    color: var(--muted);
    font-weight: 500;
}
.pwm-meta td,
.pwg-meta td {
    padding: 4px 0;
    color: var(--text);
    overflow-wrap: anywhere;
}
.pwm-meta tr + tr th,
.pwm-meta tr + tr td,
.pwg-meta tr + tr th,
.pwg-meta tr + tr td { border-top: 1px solid var(--border); }

.pwm-rels,
.pwg-rels { list-style: none; margin: 0; padding: 0; }
.pwm-rel,
.pwg-rel {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}
.pwm-rel-dir,
.pwg-rel-dir { color: var(--muted); flex: 0 0 auto; }
.pwm-rel-t,
.pwg-rel-t { color: var(--muted); flex: 0 0 auto; }
.pwm-rel-l,
.pwg-rel-l { color: var(--text); overflow-wrap: anywhere; }
.pwm-rel-x { margin-left: auto; color: var(--muted); flex: 0 0 auto; }
.pwm-rel.is-derived .pwm-rel-t,
.pwg-rel.is-derived .pwg-rel-t { border-bottom: 1px dashed var(--border); }
.pwg-src {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pwg-src.is-derived { font-family: inherit; }
.pwm-dw-empty,
.pwg-dw-empty { color: var(--muted); font-size: 12.5px; padding: 4px 0; }

/* ── узкие экраны: панель уходит в оверлей справа ────────────────────── */
@media (max-width: 1100px) {
    .pwm-body,
    .pwg-body { display: block; }
    .pwm-drawer,
    .pwg-drawer {
        position: fixed;
        top: var(--header-h, 44px);
        right: 0;
        bottom: 0;
        z-index: 60;
        width: min(420px, 96vw);
        max-height: none;
        border-radius: 0;
        border-right: 0;
    }
}
@media (max-width: 720px) {
    .pwm-stage,
    .pwg-stage { height: min(56vh, 480px); }
    .pwm-unl-r { display: none; }
    .pwm-counts,
    .pwg-counts { margin-left: 0; }
}