/* ============================================================
   КАРТА: сетка отряда, карты Зоны, панель сектора
   ============================================================ */

/* ---------- Карта ---------- */
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--text-dim); font-family: var(--mono); }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-fog { background: #141a14; border: 1px solid #222c22; }
.lg-open { background: #243424; border: 1px solid #4a6a3a; }
.lg-note { background: #243424; border: 1px solid #4a6a3a; box-shadow: inset 0 0 0 3px #141a14; position: relative; }
.lg-note::after { content: ""; position: absolute; right: 1px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--hazard); }

.map-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: nowrap; }
.map-scroll { overflow-x: auto; flex: 1 1 auto; min-width: 0; padding-bottom: 6px; }

.sector-panel {
    flex: 0 0 340px; width: 340px; max-width: 340px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    animation: pageIn .2s ease both;
}
.sector-panel h3 {
    font-family: var(--mono); color: var(--hazard); letter-spacing: 1px;
    margin-bottom: 12px; font-size: .95rem;
}
.sector-panel label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-dim); margin-bottom: 10px; cursor: pointer; }
.sector-panel input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.sector-panel textarea { width: 100%; margin-bottom: 12px; font-size: .88rem; }
.sector-note-view {
    white-space: pre-wrap; font-size: .88rem; color: var(--text);
    background: var(--bg-2); border: 1px solid var(--border-dim);
    border-radius: 8px; padding: 12px; min-height: 80px;
}

/* ---------- панель сектора: оформление «как в образце» (v7.1) ---------- */
.sector-panel { max-width: 400px; }
.sec-code {
    font-family: var(--mono); font-size: 20px; font-weight: 700;
    color: var(--accent); letter-spacing: 1px; margin-bottom: 4px;
}
.sector-panel h3 { font-size: 21px; font-weight: 700; color: #efeff1; margin: 0 0 12px; }
.sec-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-chips span {
    font-size: 11px; color: #b1b1b8;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 5px 10px;
}
.sec-desc { color: #9a9aa0; font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.sec-rows { border-top: 1px solid var(--border-dim); margin-bottom: 14px; }
.sec-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 11px 2px; border-bottom: 1px solid var(--border-dim); font-size: 12px;
}
.sec-row span { color: #96969d; }
.sec-row b { color: #efeff1; font-weight: 500; text-align: right; }
.sec-log-link {
    background: none; border: 1px solid rgba(183, 255, 44, .4);
    color: var(--accent); border-radius: var(--radius);
    font-size: 11px; font-weight: 600; font-family: var(--sans);
    padding: 9px 13px; cursor: pointer; margin-bottom: 14px;
    transition: background .15s;
}
.sec-log-link:hover { background: rgba(183, 255, 44, .1); }

/* ---------- метки-локации на карте (v10m) ---------- */
.mk-pin {
    position: absolute; left: 2px; bottom: 2px;
    width: 14px; height: 14px; display: inline-flex;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9));
    pointer-events: none;
}
.mk-pin svg { width: 100%; height: 100%; }
.mk-count {
    position: absolute; right: 1px; bottom: 1px;
    font: 700 8px/1 var(--mono); color: var(--text);
    background: rgba(0, 0, 0, .75); border-radius: 6px; padding: 1px 3px;
    pointer-events: none;
}
.zcell { justify-content: flex-end; }

/* блок меток в панели сектора */
.sec-marks { margin-top: 14px; border-top: 1px solid var(--border-dim); padding-top: 12px; }
.sec-marks-head {
    font: 600 .68rem var(--mono); letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 10px;
}
.mk-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mk-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2); border: 1px solid var(--border-dim);
    border-radius: 8px; padding: 6px 8px; font-size: .82rem;
}
.mk-ico { width: 18px; height: 18px; flex: none; display: inline-flex; }
.mk-ico svg { width: 100%; height: 100%; }
.mk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-by { font: .68rem var(--mono); color: var(--text-dim); }
.mk-del {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: .8rem; padding: 2px 4px;
}
.mk-del:hover { color: var(--danger); }
.mk-empty { font-size: .78rem; color: var(--text-dim); margin: 0 0 10px; }
.mk-add { margin-bottom: 0; }

/* выбор иконки метки */
.mk-picker { margin-top: 10px; }
.mk-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.mk-ic {
    background: var(--bg-2); border: 1px solid var(--border-dim); border-radius: 8px;
    height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s; touch-action: manipulation;
}
.mk-ic svg { width: 22px; height: 22px; }
.mk-ic:hover { border-color: var(--accent-dim); }
.mk-ic.sel { border-color: currentColor; background: rgba(183, 255, 44, .08); box-shadow: 0 0 8px rgba(183, 255, 44, .15); }
.mk-caption { width: 100%; margin-bottom: 8px; font-size: .85rem; }
.mk-picker-actions { display: flex; gap: 8px; }

/* ---------- «горячие места» ---------- */
.hotspots {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 10px 12px;
    background: var(--bg-2); border: 1px solid var(--border-dim); border-radius: 10px;
}
.hs-title {
    font: 600 .68rem var(--mono); letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); margin-right: 4px;
}
.hs-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 18px; color: var(--text);
    padding: 5px 12px 5px 8px; font-size: .78rem; font-family: var(--sans);
    cursor: pointer; transition: border-color .15s, background .15s;
    touch-action: manipulation;
}
.hs-chip:hover { border-color: var(--accent-dim); background: rgba(183, 255, 44, .07); }
.hs-chip .mk-ico { width: 16px; height: 16px; }
.hs-map { font: .66rem var(--mono); color: var(--text-dim); }

/* переименование сектора (мастер) */
#zsec-name {
    width: 100%; margin-bottom: 12px; font-size: .88rem;
    border-color: var(--accent-dim);
}

/* ---------- v10q: название сектора (все) и записи экспедиции ---------- */
.sec-name-input {
    width: 100%; margin: 2px 0 10px; padding: 8px 10px;
    font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
    letter-spacing: 1px; color: var(--hazard);
    background: transparent; border: 1px dashed var(--border);
    border-radius: 8px;
}
.sec-name-input::placeholder { color: var(--muted); font-weight: 400; }
.sec-name-input:hover { border-color: var(--accent-dim); }
.sec-name-input:focus { border-style: solid; border-color: var(--accent); outline: none; background: var(--surface); }

.sec-recs { margin-top: 14px; border-top: 1px dashed var(--border-dim); padding-top: 12px; }
.rec-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rec-row {
    background: var(--bg-2); border: 1px solid var(--border-dim);
    border-radius: 8px; padding: 8px 10px;
}
.rec-text { font-size: .84rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.rec-meta { margin-top: 4px; font-size: .68rem; color: var(--muted); font-family: var(--mono); display: flex; gap: 6px; align-items: center; }
.rec-del {
    margin-left: auto; background: none; border: 0; color: var(--muted);
    cursor: pointer; font-size: .75rem; padding: 2px 4px; border-radius: 4px;
}
.rec-del:hover { color: var(--danger); background: var(--danger-dim); }
.rec-add { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rec-add textarea { width: 100%; font-size: .84rem; }
.rec-add .btn { align-self: flex-end; }
.rec-sh-head { margin-top: 12px; color: #c9a2f7; }
.rec-sh-list .rec-row { border-color: rgba(163, 113, 247, .3); background: rgba(163, 113, 247, .06); }
.rec-sh-add textarea { border-color: rgba(163, 113, 247, .35); }

/* пульсация сектора после перехода по горячей метке */
.zcell.mk-pulse { animation: mkPulse .85s ease 3; z-index: 5; }
@keyframes mkPulse {
    0%, 100% { box-shadow: none; }
    50% {
        box-shadow: inset 0 0 0 3px var(--accent), 0 0 20px 3px rgba(183,255,44,.75);
        background: rgba(183,255,44,.28);
    }
}

/* ---------- редактор сектора мастера — блок под картой (v10y) ---------- */
.sector-editor {
    margin-top: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    animation: pageIn .2s ease both;
}
.sector-editor textarea { width: 100%; margin-top: 12px; font-size: .86rem; }
.sector-editor .sec-marks { margin-top: 14px; }

/* верхняя панель действий: генерация + уровень угрозы + ночь — одной строкой */
.zsec-toolbar {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
.zsec-toolbar .btn { padding: 9px 18px; font-size: .88rem; }
.zsec-gen { font-weight: 700; letter-spacing: .02em; }

/* группа «уровень угрозы»: шаговые кнопки ± + ночной чип */
.zsec-tl-box {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 6px 10px;
}
.zsec-tl-label {
    font-size: .72rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .07em;
}
.zsec-step { display: flex; align-items: stretch; }
.zsec-step input {
    width: 52px; text-align: center; font-family: var(--mono);
    font-size: 1rem; font-weight: 700; color: var(--accent);
    background: var(--bg); border: 1px solid var(--border);
    border-left: none; border-right: none; padding: 7px 4px;
    -moz-appearance: textfield; appearance: textfield;
}
.zsec-step input::-webkit-outer-spin-button,
.zsec-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zsec-step-btn {
    width: 38px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 1.15rem; font-weight: 700; line-height: 1;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.zsec-step-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.zsec-step-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.zsec-step-btn:hover { background: var(--accent); color: #0b0d08; border-color: var(--accent); }
.zsec-step-btn:active { transform: translateY(1px); }
.zsec-night {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--text-dim); font-size: .84rem; padding: 7px 14px; cursor: pointer;
    transition: all .15s;
}
.zsec-night b { font-family: var(--mono); }
.zsec-night:hover { border-color: var(--accent); color: var(--text); }
.zsec-night.on {
    background: rgba(120, 144, 180, .18); border-color: #7890b4; color: #cfe0f5;
    box-shadow: inset 0 0 10px rgba(120, 144, 180, .25);
}

/* переключатели видимости — компактной строкой */
.zsec-flags { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 4px; }
.zsec-flags label {
    display: flex; align-items: center; gap: 7px;
    font-size: .84rem; color: var(--text-dim); cursor: pointer;
}
.zsec-flags input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* кнопки внизу: сохранить слева, остальные прижаты вправо */
.zsec-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.zsec-actions .btn { padding: 9px 16px; font-size: .86rem; }
.zsec-actions #zsec-hide { margin-left: auto; }

@media (max-width: 720px) {
    .zsec-actions #zsec-hide { margin-left: 0; }
}

/* ---------- v10z: видимость меток мастера ---------- */
.mk-pub {
    display: flex; align-items: center; gap: 7px;
    font-size: .82rem; color: var(--text-dim);
    margin: 8px 0 2px; cursor: pointer;
}
.mk-pub input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.mk-eye { font-size: .78rem; opacity: .85; }

/* переключатель видимости метки (мастер) */
button.mk-eye {
    background: none; border: 0; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; line-height: 1;
}
button.mk-eye:hover { background: var(--bg-2); }

/* ---------- v10za: справка по итогам сектора ---------- */
.sec-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px;
    border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-2); color: var(--text-dim);
    font: 700 .68rem var(--mono); cursor: pointer;
    vertical-align: middle; line-height: 1; padding: 0;
    transition: border-color .15s, color .15s;
}
.sec-info:hover { border-color: var(--accent-dim); color: var(--accent); }

.si-box { max-width: 520px; }
.si-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.si-head h3 { margin: 0; font-size: 1.02rem; color: #efeff1; }
.si-close {
    background: none; border: 0; color: var(--muted); cursor: pointer;
    font-size: 1rem; padding: 2px 6px; border-radius: 6px;
}
.si-close:hover { color: var(--danger); background: var(--danger-dim); }
.si-row { padding: 10px 0; border-top: 1px solid var(--border-dim); }
.si-row span {
    display: block; font: 600 .66rem var(--mono); letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px;
}
.si-row p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text); }