/* Security by compartmentalization — Joanna Rutkowska's Qubes principle, made visible.
   You keep banking, work, browsing, and email on one machine. In a monolithic OS they
   share one trust boundary, so a single compromise can reach everything. Qubes isolates
   each domain in its own virtual machine (a qube), so a breach is sealed inside the one
   it landed in and the others -- which never shared a boundary with it -- stay safe.
   Toggle monolithic vs Qubes, trigger the compromise, and watch how far it spreads.
   Vanilla JS, no deps, no build.
   Palette shared with siblings: green = safe / contained (the win), violet = breached
   (distinct attention colour, deliberately NOT red), neutral = idle. */

#compartmentalize {
  --cz-safe: #30d158;
  --cz-breach: #b488ff;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.cz-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.cz-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.cz-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; }
.cz-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); }
.cz-mode { appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55)); padding: 7px 13px; border-radius: 7px; transition: color 0.18s, background 0.18s; }
.cz-mode:hover { color: #fff; }
.cz-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }
.cz-attack { appearance: none; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 650; border: 1px solid var(--cz-breach); background: transparent; color: var(--cz-breach); padding: 7px 12px; border-radius: 8px; }
.cz-attack:hover { background: var(--cz-breach); color: #140a22; }
.cz-reset { appearance: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--color-border, rgba(255,255,255,0.16)); background: transparent; color: var(--color-text-tertiary, rgba(255,255,255,0.6)); padding: 7px 11px; border-radius: 8px; }
.cz-reset:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

.cz-boundary-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin: 14px 0 7px; }
.cz-domains { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; border-radius: 12px; transition: padding 0.2s, border-color 0.2s; }
.cz-domains.shared { border: 2px solid rgba(255,255,255,0.22); padding: 10px; }
.cz-domains.isolated { border: 2px solid transparent; padding: 0; }
.cz-dom { border-radius: 10px; padding: 12px 6px; text-align: center; background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.12)); transition: border-color 0.25s, background 0.25s; }
.cz-domains.isolated .cz-dom { border-width: 2px; border-color: rgba(255,255,255,0.28); }
.cz-dom.safe { border-color: var(--cz-safe); background: rgba(48,209,88,0.09); }
.cz-dom.breached { border-color: var(--cz-breach); background: rgba(180,136,255,0.14); }
.cz-dom-name { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: #fff; line-height: 1.2; }
.cz-dom-state { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; color: var(--color-text-tertiary, rgba(255,255,255,0.5)); }
.cz-dom.safe .cz-dom-state { color: var(--cz-safe); font-weight: 700; }
.cz-dom.breached .cz-dom-state { color: var(--cz-breach); font-weight: 700; }

.cz-banner { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.cz-banner.idle { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1)); color: var(--color-text-secondary, rgba(255,255,255,0.7)); }
.cz-banner.safe { background: rgba(48,209,88,0.12); border: 1px solid var(--cz-safe); color: var(--cz-safe); }
.cz-banner.breach { background: rgba(180,136,255,0.12); border: 1px solid var(--cz-breach); color: var(--cz-breach); }

.cz-caption { margin-top: 12px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.cz-caption b { color: #fff; }
.cz-caption .cz-hl { color: var(--cz-safe); font-weight: 650; }
.cz-caption .cz-lo { color: var(--cz-breach); font-weight: 650; }
.cz-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }