/* ============================================================
   The Laundering — Case Maps (shared)
   Palette is driven by --cm-* custom properties, which case-maps.js
   sets on the .case-maps root per environment (reading vs LCARS console).
   ============================================================ */
.case-maps { margin: 48px 0; background: var(--cm-bg-2); border: 1px solid var(--cm-rule); padding: 28px 28px 32px; }
.case-maps .cm-head { font-family: var(--cm-mono); font-size: 11px; color: var(--cm-accent-2); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.case-maps .cm-sub { font-family: var(--cm-serif); font-style: italic; font-size: 14px; color: var(--cm-ink-3); margin-bottom: 20px; line-height: 1.5; max-width: 40rem; }
.case-maps .cm-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--cm-rule); padding-bottom: 16px; margin-bottom: 18px; }
.case-maps .cm-tab {
  font-family: var(--cm-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cm-ink-3); background: var(--cm-bg); border: 1px solid var(--cm-rule);
  padding: 8px 14px; cursor: pointer; border-radius: var(--cm-radius); transition: color .15s, border-color .15s, background .15s;
}
.case-maps .cm-tab:hover { color: var(--cm-ink-2); border-color: var(--cm-accent); }
.case-maps .cm-tab[aria-selected="true"] { color: var(--cm-on-accent); border-color: var(--cm-accent); background: var(--cm-accent); }
.case-maps .cm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.case-maps .cm-tool {
  font-family: var(--cm-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cm-ink-3); background: transparent; border: 1px solid var(--cm-rule);
  padding: 7px 12px; cursor: pointer; border-radius: var(--cm-radius); transition: color .15s, border-color .15s;
}
.case-maps .cm-tool:hover { color: var(--cm-accent); border-color: var(--cm-accent); }
.case-maps .cm-panel { display: none; }
.case-maps .cm-panel.is-active { display: block; }
.case-maps .cm-stage { width: 100%; overflow-x: auto; }
.case-maps svg { display: block; width: 100%; height: auto; min-width: 600px; }
.case-maps .cm-caption { font-family: var(--cm-serif); font-style: italic; font-size: 13px; color: var(--cm-ink-3); margin-top: 16px; line-height: 1.5; max-width: 40rem; }

/* SVG shape + text language */
.case-maps svg text { fill: var(--cm-ink); }
.case-maps .cm-t-title { font-family: var(--cm-serif); font-weight: 600; }
.case-maps .cm-t-tag { font-family: var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
.case-maps .cm-t-tag.accent { fill: var(--cm-accent); }
.case-maps .cm-t-body { font-family: var(--cm-serif); fill: var(--cm-ink-2); }
.case-maps .cm-t-edge { font-family: var(--cm-mono); letter-spacing: .06em; fill: var(--cm-ink-3); }
.case-maps .cm-rect { fill: var(--cm-bg-3); stroke: var(--cm-rule); }
.case-maps .cm-rect.accent { stroke: var(--cm-accent); fill: var(--cm-accent-dim); }
.case-maps .cm-rect.soft { fill: var(--cm-bg); stroke: var(--cm-rule); }
.case-maps .cm-edge { stroke: var(--cm-ink-4); fill: none; }
.case-maps .cm-edge.accent { stroke: var(--cm-accent-2); }
.case-maps .cm-edge.dash { stroke-dasharray: 4 4; }
.case-maps .cm-axis { stroke: var(--cm-ink-4); }
.case-maps .cm-dot { fill: var(--cm-bg-3); stroke: var(--cm-ink-3); }
.case-maps .cm-dot.fill { fill: var(--cm-accent); stroke: var(--cm-accent); }
.case-maps .cm-bar { fill: var(--cm-accent-dim); stroke: var(--cm-accent-2); }

/* fullscreen zoom overlay */
.cm-zoom { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.94); display: flex; flex-direction: column; }
.cm-zoom-bar { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--cm-rule); background: #000; }
.cm-zoom-bar .cm-zoom-name { font-family: var(--cm-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-accent-2); margin-right: auto; padding-left: 8px; }
.cm-zoom-bar button { font-family: var(--cm-mono); font-size: 12px; color: var(--cm-ink); background: var(--cm-bg-2); border: 1px solid var(--cm-rule); padding: 8px 15px; cursor: pointer; border-radius: var(--cm-radius); }
.cm-zoom-bar button:hover { color: var(--cm-on-accent); background: var(--cm-accent); border-color: var(--cm-accent); }
.cm-zoom-stage { flex: 1; overflow: auto; padding: 24px; }
.cm-zoom-stage svg { display: block; margin: 0 auto; height: auto; }

/* toast */
.cm-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 100001;
  background: var(--cm-bg-2); color: var(--cm-ink); border: 1px solid var(--cm-accent);
  font-family: var(--cm-mono); font-size: 12px; letter-spacing: .03em; padding: 12px 18px;
  max-width: 90vw; text-align: center; opacity: 0; transition: opacity .3s, transform .3s;
}
.cm-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) { .case-maps { padding: 20px 16px 24px; } }