/* panel.css — common/panel.js: the non-modal drill-down panel shared by every screen (district, tablo,
   mnemo, summary, dtek). Docked right by default, «⇅» flips to bottom, «⤢» goes full screen, the left/top
   edge is the drag handle. Below 760px it always renders as a full-width bottom sheet (mobile — W6 §2). */
.ab-panel-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.ab-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--ab-panel-size, 40) * 1%);
  min-width: 320px; max-width: 100vw; background: var(--panel); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; pointer-events: auto;
}
.ab-panel-root.bottom .ab-panel {
  top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: calc(var(--ab-panel-size, 40) * 1%);
  min-width: 0; min-height: 220px; border-left: 0; border-top: 1px solid var(--line-2);
}
.ab-panel-root.full .ab-panel { box-shadow: none; width: 100vw !important; height: 100vh !important; top: 0; left: 0; right: 0; bottom: 0; }

.ab-panel-drag { position: absolute; top: 0; left: -4px; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.ab-panel-drag::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.ab-panel-drag:hover::after { background: var(--line-2); }
.ab-panel-root.bottom .ab-panel-drag::after { top: 3px; left: 0; right: 0; bottom: auto; width: auto; height: 2px; }

/* Split (like the side pane of Claude Desktop): the screen gives the panel its share instead of being covered */
html.ab-split-right body { padding-right: max(320px, calc(var(--ab-split, 40) * 1vw)); box-sizing: border-box; }
html.ab-split-bottom body { padding-bottom: max(220px, calc(var(--ab-split, 40) * 1vh)); box-sizing: border-box; }
.ab-panel-root.bottom .ab-panel-drag { left: 0; right: 0; top: -4px; bottom: auto; width: auto; height: 8px; cursor: ns-resize; }
.ab-panel-root.full .ab-panel-drag { display: none; }

.ab-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.ab-panel-title { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-panel-count-sep, .ab-panel-count { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.ab-panel-back { padding: 6px 10px; min-height: 32px; font-size: 12.5px; }
.ab-panel-btn { padding: 6px 10px; min-height: 32px; font-size: 15px; line-height: 1; }

.ab-panel-search-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none; }
.ab-panel-search { flex: 1; }
.ab-panel-shown { font-size: 12px; white-space: nowrap; }

.ab-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }

.ab-panel-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.ab-panel-row:last-child { border-bottom: 0; }
.ab-panel-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ab-panel-row .addr { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-panel-row .ago { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-panel-row.sev-red .num { color: var(--red); }
.ab-panel-row.sev-amber .num { color: var(--amber); }
.ab-panel-row.sev-blue .num { color: var(--blue); }

.ab-panel-group { margin-bottom: 10px; }
.ab-panel-group-h {
  appearance: none; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 7px 10px; font: 600 13px/1.2 inherit; cursor: pointer; margin-bottom: 4px;
}

@media (max-width: 760px) {
  html.ab-split-right body, html.ab-split-bottom body { padding-right: 0; padding-bottom: 0; }
  .ab-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100% !important;
    height: 70vh !important; min-width: 0; border-left: 0; border-top: 1px solid var(--line-2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); border-radius: 14px 14px 0 0; }
  .ab-panel-drag { left: 0; right: 0; top: -4px; bottom: auto; width: auto; height: 8px; cursor: ns-resize; }
}