/* Дашборды (контракт v1.4, раздел 7). Подключён после app.css; цвета и размеры - только токены app.css. */

/* ---------- кнопка в кластере */
.dash-btn { gap: 6px; padding: 0 8px; }
.dash-btn .dash-lbl { font-size: var(--fs-s); font-weight: 500; white-space: nowrap; }
.dash-btn.on { color: var(--accent-text); background-color: var(--accent-bg); }

/* ---------- док справа (от 900 px); положение задаёт JS через --dash-r и --dash-b, чтобы не закрывать кнопки карты, легенду и шкалу времени */
#dash-dock { position: absolute; z-index: 28; top: calc(var(--g) * 2 + var(--cap)); right: var(--dash-r, calc(var(--g) + 52px)); bottom: var(--dash-b, var(--g)); width: min(360px, calc(100% - var(--g) * 2)); display: flex; flex-direction: column; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--glass-hi); animation: pop-in var(--dur) var(--ease); }
#dash-dock[hidden] { display: none; }
.dk-grab { display: none; }
.dk-h { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--divider); }
.dk-h h2 { margin: 0; font-size: var(--fs-l); font-weight: 500; letter-spacing: -0.01em; }
.dk-ser { margin-left: 8px; font-size: var(--fs-s); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-mb { gap: 6px; }
.dk-mb .dk-lbl { font-size: var(--fs-s); }
.dk-ctl { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 16px; border-bottom: 1px solid var(--divider); }
.dk-ctl .seg button { height: calc(var(--h-s) - 4px); padding: 0 10px; font-size: var(--fs-b); }
.dk-menu { flex: none; padding: 6px 16px 10px; border-bottom: 1px solid var(--divider); }
.dk-mh { margin: 6px 0 2px; font-size: var(--fs-b); font-weight: 500; color: var(--t2); }
.dk-mi { align-items: flex-start; padding: 6px 0; }
.dk-mi > span { line-height: 1.35; }
.dk-mp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.dk-mp .btn { height: var(--h-s); }
.dk-arch { flex: none; padding: 6px 16px; background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-b); font-weight: 500; }
.dk-arch.neutral { background: transparent; border-bottom: 1px solid var(--divider); color: var(--t2); font-weight: 400; }
.dk-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; scrollbar-width: thin; }
.dk-f { flex: none; padding: 8px 16px; border-top: 1px solid var(--divider); font-size: var(--fs-s); line-height: 1.4; color: var(--t2); text-wrap: pretty; }
.dk-empty { padding: 16px; margin: 0; }

/* ---------- карточка виджета: линии вместо коробок */
.dw { padding: 0 16px; border-top: 1px solid var(--divider); }
.dw:first-child { border-top: 0; }
.dw-h { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.dw-t { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--t1); text-align: left; font-size: var(--fs-m); }
.dw-t .t { flex: none; font-weight: 500; }
.dw-t .ln { flex: 1 1 auto; min-width: 0; display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-b); color: var(--t2); font-variant-numeric: tabular-nums; }
.dw.folded .dw-t .ln { display: block; }
.dw-t .chev { width: 14px; height: 14px; margin-left: auto; color: var(--t2); transition: transform var(--dur) var(--ease); }
.dw.folded .dw-t .chev { transform: rotate(-90deg); }
.dw-i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--t2); font: 500 var(--fs-s)/1 var(--font); }
.dw-i:hover, .dw-i[aria-expanded="true"] { background-color: var(--hover); color: var(--t1); }
.dw-info { margin: 0 0 6px; padding: 6px 0 2px; font-size: var(--fs-b); line-height: 1.45; color: var(--t1); text-wrap: pretty; }
.dw-info p { margin: 6px 0; }
.dw-b { padding: 2px 0 4px; font-size: var(--fs-m); }
.dw-b p { margin: 6px 0; }
.dw-f { margin: 4px 0 12px; font-size: var(--fs-s); line-height: 1.4; color: var(--t2); text-wrap: pretty; }

/* ---------- общие элементы */
#dash-dock b, #dash-dock strong { font-weight: 500; }
.dkey { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.big { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dsub { font-size: var(--fs-b); line-height: 1.4; color: var(--t2); text-wrap: pretty; }
.dmute { font-size: var(--fs-b); line-height: 1.4; color: var(--t2); }
.dchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: var(--fs-b); color: var(--t1); font-variant-numeric: tabular-nums; }
.dar { flex: none; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dar.up { color: var(--accent-text); }
.dar.down, .dar.flat { color: var(--t2); }
.eq { font-size: var(--fs-b); color: var(--t2); }
.dwarn { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 5px 10px; border-radius: var(--r-s); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-b); font-weight: 500; }
.dwarn::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.dleg { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; font-size: var(--fs-b); }
.dleg li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.dleg li b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.dleg li.j { padding-top: 4px; border-top: 1px solid var(--divider); }
.dleg2 { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0; font-size: var(--fs-b); color: var(--t2); }
.dleg2 .sw { margin-right: 6px; }

/* ---------- мини-графики */
.dsp { display: block; width: 100%; height: auto; overflow: visible; }
.dsp path { vector-effect: non-scaling-stroke; }
.dsp-ln { fill: none; stroke: var(--t1); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.dsp-ma { fill: none; stroke: var(--accent-text); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dsp-tk { fill: none; stroke: var(--t3); stroke-width: 1; }
.dsp-pt { fill: var(--t1); }
.dsp-sel { fill: var(--accent); stroke: var(--bg2); stroke-width: 1.5; }
.dsp.mini { width: 56px; height: 16px; flex: none; }
.dch { margin-top: 6px; cursor: crosshair; touch-action: pan-y; }
.dch.s .dsp { max-height: 44px; }
.dax { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: var(--fs-s); color: var(--t2); font-variant-numeric: tabular-nums; }
.dax .dread { flex: 1 1 auto; text-align: center; color: var(--t1); }

/* ---------- столбики */
.dbar { display: flex; flex: 1 1 auto; min-width: 0; height: 8px; margin: 8px 0; border-radius: 4px; overflow: hidden; background: var(--surface); }
.drow .dbar { margin: 0; }
.drow { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: var(--fs-b); }
.drow .dl { flex: none; width: 52px; color: var(--t2); font-variant-numeric: tabular-nums; }
.drow .dv { flex: none; width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.dcls { margin-top: 10px; }

/* ---------- Сутки: мини-карта и сдвиг */
.dmm { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.dmm-c { flex: none; width: 124px; height: 120px; border-radius: var(--r-s); background: var(--surface); }
.dshift { list-style: none; margin: 6px 0; padding: 0; font-size: var(--fs-b); line-height: 1.4; }
.dshift li { padding: 2px 0; }
.dlink { padding: 4px 0; border: 0; background: transparent; color: var(--t1); font: inherit; text-align: left; text-wrap: pretty; }
.dlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.dphrase { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--divider); }
.dtxt { margin: 0 0 8px; font-size: var(--fs-m); line-height: 1.45; text-wrap: pretty; }
.dcopy { height: var(--h-s); }

/* ---------- Подзоны, Мои точки, Дальность: строки */
.dz-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 6px; }
.dz-top .seg button { height: calc(var(--h-s) - 4px); padding: 0 10px; font-size: var(--fs-b); }
.dz { margin: 4px 0; }
.dz-r { display: block; width: 100%; min-height: 48px; padding: 8px 0; border: 0; border-top: 1px solid var(--divider); background: transparent; color: var(--t1); text-align: left; }
.dz-r:first-child { border-top: 0; }
.dz-r:hover { background-color: var(--hover); }
.dz-r .r1 { display: flex; align-items: baseline; gap: 8px; }
.dz-r .rk { flex: none; display: inline-flex; align-items: center; gap: 3px; width: 34px; font-size: var(--fs-s); color: var(--t2); font-variant-numeric: tabular-nums; }
.nm { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.dz-r .r2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 0 42px; }
.dz-r .r2 .dsub { flex: 1 1 auto; }
.dz-r.none .nm, .dz-r.none .v { color: var(--t2); font-weight: 400; }
.dz-refs { margin-top: 4px; border-top: 1px solid var(--divider); }
.dz-ref { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: var(--fs-b); color: var(--t2); }
.dz-ref .nm { font-weight: 400; }
.dz-ref .v { font-weight: 400; }
.dzh { margin: 10px 0 2px; }
.dage { margin: 4px 0; }
.dov { margin: 10px 0 4px; width: 100%; box-shadow: inset 0 0 0 1px var(--border); }
.dov.on { color: var(--accent-text); background-color: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.dpts { margin: 4px 0; }
.dpt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--divider); }
.dpt:first-child { border-top: 0; }
.dpt .r2 { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.dpt .dsp { grid-column: 2; grid-row: 1 / span 2; width: 96px; height: auto; }
.dpt.me .nm { color: var(--accent-text); }

/* ---------- плашка слоя на карте */
.dash-plate { position: absolute; z-index: 27; left: var(--pl, var(--g)); bottom: calc(var(--g) + var(--tl-h) + 58px); display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: var(--r); font-size: var(--fs-s); }
.dash-plate[hidden] { display: none; }
.dash-plate .pl-sw { display: inline-flex; gap: 2px; }
.dash-plate .pl-sw i { width: 14px; height: 10px; border-radius: 2px; }
.dash-plate .btn { height: var(--h-s); }
body.dash-ov .gf-index, body.dash-ov .gf-index canvas { opacity: 0.4 !important; }

/* ---------- касание: цели не меньше 44-48 px */
@media (pointer: coarse) {
  .dw-i { width: 44px; height: 44px; }
  .dk-ctl .seg button, .dz-top .seg button { height: 44px; padding: 0 14px; }
  .dlink { min-height: 44px; }
  .dk-mp .btn, .dcopy { height: 44px; }
  .dk-grab { height: 32px; }
  .dk-ctl .seg button, .dz-top .seg button { padding: 0 12px; }
}

/* ---------- ниже 900 px: собственный нижний лист поверх карты, 70% высоты, ручка и закрытие */
@media (max-width: 899px) {
  #dash-dock { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 70vh; height: 70dvh; z-index: 40; border-width: 1px 0 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.3); padding-bottom: env(safe-area-inset-bottom); animation: dash-up 0.2s var(--ease); }
  .dk-grab { display: flex; align-items: center; justify-content: center; flex: none; width: 100%; height: 22px; padding: 0; border: 0; background: transparent; }
  .dk-grab i { width: 36px; height: 4px; border-radius: 2px; background: var(--raised); }
  .dk-h { height: 48px; }
  .dash-btn .dash-lbl { display: none; }
  .dash-btn { padding: 0 6px; }
  .dash-plate { left: var(--g); bottom: calc(var(--g) * 2 + var(--tl-h) + 52px); }
  .dmm-c { width: 112px; height: 108px; }
}
@keyframes dash-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }