.cmp { height: 100%; display: flex; flex-direction: column; background: var(--paper); }
.cmp-head { flex: none; height: var(--docbar-h); border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 5; }
.cmp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr) 372px; transition: grid-template-columns var(--t-med) var(--ease); }
.cmp.focus .cmp-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.cmp.focus .cmp-map, .cmp.focus .cmp-ctx { opacity: 0; pointer-events: none; }
.cmp-map { border-right: 1px solid var(--line); min-height: 0; overflow: hidden; transition: opacity var(--t-med); }
.cmp-canvas { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--surface); }
.cmp-ctx { border-left: 1px solid var(--line); background: var(--surface); min-height: 0; overflow: hidden; transition: opacity var(--t-med); }

/* doc header */
.dh { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 12px 0 8px; }
.dh-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dh-titles { min-width: 0; gap: 2px; }
.dh-title { border: 0; background: transparent; font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); padding: 1px 4px; border-radius: 4px; width: 100%; min-width: 120px; text-overflow: ellipsis; }
.dh-title:hover { background: var(--paper-2); }
.dh-title:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.dh-meta { padding-left: 4px; min-width: 0; }
.dh-meta .chip { height: 22px; }
.dh-brief { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--ink-3); max-width: 280px; min-width: 0; }
.dh-brief:hover { color: var(--ink); }
.dh-views { justify-self: center; }
.dh-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.dh-ready { padding: 6px 6px; border-radius: var(--r-sm); display: inline-flex; }
.dh-ready:hover { background: var(--paper-2); }

/* playbook / classification popovers */
.pbp, .clp { padding: 14px; }
.pbp-cascade { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.pbp-cascade::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.pbp-layer { display: flex; gap: 10px; position: relative; }
.pbp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-4); margin-top: 5px; flex: none; position: relative; z-index: 1; }
.pbp-dot.on { border-color: var(--accent); background: var(--accent); }
.clp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: var(--r-sm); text-align: left; }
.clp-row:hover { background: var(--paper); }
.clp-row.on { background: var(--accent-soft); }

/* map */
.map { height: 100%; display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px 16px; }
.map-scroll { flex: 1; overflow: auto; padding: 0 8px 16px; }
.map-list { display: flex; flex-direction: column; gap: 1px; }
.map-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 6px 0 2px;
  border-radius: 9px;
  font-size: var(--fs-13);
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.map-row:hover { background: var(--paper-2); }
.map-row.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.map-row.dragging { opacity: 0.4; }
.map-row.drafting .map-title { color: var(--ai); }
.map-grip { color: var(--ink-4); opacity: 0; cursor: grab; display: inline-flex; width: 12px; }
.map-row:hover .map-grip { opacity: 1; }
.map-num { font-size: 11px; font-weight: 500; color: var(--ink-3); background: var(--paper-3); width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex: none; }
.map-title { flex: 1; min-width: 0; font-weight: 500; }
.map-meta { display: inline-flex; align-items: center; gap: 4px; }
.map-ev { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; padding: 1px 4px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.map-ev.ok { color: var(--ok); background: var(--ok-soft); }
.map-ev.warn { color: var(--warn); background: var(--warn-soft); }
.map-ev.bad { color: var(--bad); background: var(--bad-soft); }
.map-pp { color: var(--ai); display: inline-flex; }
.map-pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 4px 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--ai-soft); }
.map-pending .icon { color: var(--ai); }
.map-ready { margin-top: 18px; padding: 12px 4px 0; border-top: 1px solid var(--line); }
.map-ready .label { padding-left: 8px; }