:root {
  /* base */
  --bg-deep: #0E061E;
  --bg-mid: #160B2C;
  --ink: #F2EFE5;
  --ink-muted: #B89FC9;
  --ink-faint: #6E5A87;

  /* purple structure */
  --p1: #2A0F47;
  --p2: #4B1E73;
  --p3: #6E2EA8;
  --p-glow: #8B3FCC;

  /* accents */
  --gold-1: #D4A84B;
  --gold-2: #F0C36A;
  --gold-deep: #8A6620;
  --neon-green: #2EE689;
  --hot-pink: #FF4D9E;

  /* edges (translucent in use) */
  --edge-read: #5B9EE7;
  --edge-write: #E7384C;

  /* tier ramp (cool → hot) */
  --t0: #5B6378;
  --t1: #4A6FB8;
  --t2: #D4A84B;
  --t3: #C04D8F;
  --t4: #E7384C;

  /* dims */
  --env-card-w: 1180px;
  --env-card-h: 660px;
  --env-stack-offset: 18px;

  --font-disp: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 10%, #221345 0%, var(--bg-deep) 60%, #07030E 100%);
  color: var(--ink);
  font-family: var(--font-disp);
  font-size: 14px;
  overflow: hidden;
  letter-spacing: 0.01em;
}

/* HEADER */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 84px;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(20,8,42,0.95), rgba(20,8,42,0.6));
  border-bottom: 1px solid rgba(139, 63, 204, 0.3);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 16pt;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--gold-1), var(--neon-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-1);
}
.title .sub {
  display: block;
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  -webkit-text-fill-color: var(--ink-muted);
  margin-top: 1px;
  font-weight: 500;
}
.env-filter {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(20, 8, 42, 0.6);
  border: 1px solid rgba(139, 63, 204, 0.25);
  border-radius: 6px;
}
.env-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10pt;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 4px;
  transition: all 180ms ease;
}
.env-btn:hover {
  color: var(--ink);
  background: rgba(110, 46, 168, 0.2);
}
.env-btn.active {
  color: var(--gold-1);
  background: rgba(212, 168, 75, 0.12);
  text-shadow: 0 0 8px rgba(212, 168, 75, 0.4);
}
.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-size: 9pt;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.legend .swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.legend-tier-strip {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tier-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.legend-tier-label {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
  text-align: right;
  line-height: 1.2;
  max-width: 70px;
}
.tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 7, 31, 0.5);
  border: 1px solid rgba(139, 63, 204, 0.25);
  padding: 3px 7px 3px 4px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 180ms ease;
  text-transform: uppercase;
}
.tier-pill:hover {
  border-color: var(--gold-2);
  color: var(--ink);
  background: rgba(212, 168, 75, 0.1);
  transform: translateY(-1px);
}
.tier-pill .tier-pill-num {
  display: inline-block;
  font-weight: 700;
  font-size: 7pt;
  padding: 1px 4px;
  border-radius: 3px;
  color: #0E061E;
}
.tier-pill[data-tier="0"] .tier-pill-num { background: var(--t0); }
.tier-pill[data-tier="1"] .tier-pill-num { background: var(--t1); color: #FFF; }
.tier-pill[data-tier="2"] .tier-pill-num { background: var(--t2); }
.tier-pill[data-tier="3"] .tier-pill-num { background: var(--t3); color: #FFF; }
.tier-pill[data-tier="4"] .tier-pill-num { background: var(--t4); color: #FFF; }

.legend-edge-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.legend-edge-row .legend-edge-item {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.header-action-btn {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(15, 7, 31, 0.6);
  color: var(--gold-2);
  border: 1px solid rgba(212, 168, 75, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 180ms ease;
}
.header-action-btn:hover {
  background: rgba(212, 168, 75, 0.12);
  border-color: var(--gold-1);
  color: #FFF1CB;
  box-shadow: 0 0 12px rgba(212, 168, 75, 0.25);
}

/* STAGE */
#stage {
  position: fixed;
  top: 84px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#env-stack {
  position: relative;
  width: var(--env-card-w);
  height: var(--env-card-h);
  transform-style: preserve-3d;
}

/* ENVIRONMENT CARD */
.env-card {
  position: absolute;
  width: var(--env-card-w);
  height: var(--env-card-h);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(110, 46, 168, 0.18), rgba(43, 16, 71, 0.6) 60%),
    linear-gradient(180deg, var(--p1), var(--bg-mid));
  border: 1px solid rgba(139, 63, 204, 0.35);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 28px;
  transition: transform 700ms cubic-bezier(0.6, 0, 0.2, 1),
              opacity 700ms ease,
              box-shadow 700ms ease,
              filter 700ms ease;
  cursor: pointer;
  overflow: hidden;
}
.env-card.position-back-2 {
  transform: translateY(calc(var(--env-stack-offset) * 2)) scale(0.97);
  filter: brightness(0.55) saturate(0.85);
  z-index: 1;
}
.env-card.position-back-1 {
  transform: translateY(var(--env-stack-offset)) scale(0.985);
  filter: brightness(0.75) saturate(0.92);
  z-index: 2;
}
.env-card.position-front {
  transform: translateY(0) scale(1);
  filter: brightness(1);
  z-index: 3;
  cursor: default;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(212, 168, 75, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.env-card.position-front .env-label {
  color: var(--gold-1);
  text-shadow: 0 0 14px rgba(212, 168, 75, 0.5);
}
.env-card.zoomed-domain {
  /* placeholder for future */
}

.env-label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10pt;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
  font-weight: 600;
  transition: color 400ms ease;
}
.env-card.position-front .env-meta {
  opacity: 1;
}
.env-card .env-meta {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 400ms ease;
}

/* DOMAIN COLUMNS */
.domains {
  position: absolute;
  inset: 50px 28px 50px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  pointer-events: none;
}
.env-card.position-front .domains { pointer-events: auto; }

.domain-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 28px;
  padding-bottom: 28px;
  transition: transform 500ms cubic-bezier(0.6, 0, 0.2, 1),
              opacity 500ms ease;
}
.domain-label-top {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.3em;
  color: var(--neon-green);
  font-weight: 600;
  margin-bottom: 14px;
  cursor: pointer;
  padding: 5px 14px;
  border: 1px solid rgba(46, 230, 137, 0.3);
  border-radius: 999px;
  transition: all 200ms ease;
  background: rgba(46, 230, 137, 0.06);
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.4);
  user-select: none;
}
.domain-label-top:hover {
  background: rgba(46, 230, 137, 0.15);
  border-color: var(--neon-green);
  transform: scale(1.04);
}

/* MEDALLION STACK (within a domain) */
.medallion-stack {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 360px;
}
.med-card {
  position: absolute;
  left: 0;
  right: 0;
  height: 130px;
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(155deg, rgba(75, 30, 115, 0.85), rgba(43, 16, 71, 0.95));
  border: 1px solid rgba(139, 63, 204, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 600ms cubic-bezier(0.6, 0, 0.2, 1),
              opacity 600ms ease,
              box-shadow 250ms ease,
              border-color 250ms ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.med-card:hover {
  border-color: var(--gold-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 168, 75, 0.3);
}
/* default (collapsed) vertical stack positions: source bottom, trusted middle, semantic top */
.med-card.medallion-source   { top: 100px; z-index: 1; }
.med-card.medallion-trusted  { top: 50px;  z-index: 2; }
.med-card.medallion-semantic { top: 0;    z-index: 3; }

/* spread state — triangle, NO overlap.
   Semantic stays put at top center; trusted/source drop down and far enough to either side that
   their bounding boxes do not intersect with semantic OR each other. */
.domain-col.is-spread .med-card.medallion-semantic { transform: translate(0, 0); }
.domain-col.is-spread .med-card.medallion-trusted  { transform: translate(-115%, 175px) scale(0.92); top: 0; }
.domain-col.is-spread .med-card.medallion-source   { transform: translate(115%, 175px) scale(0.92); top: 0; }
.domain-col.is-spread { z-index: 6; }

/* When a domain is spread, fade the env-card backdrop, hide other domain columns, hide non-relevant roles */
.env-card.has-spread::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 3, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  animation: fadeIn 350ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.env-card.has-spread .domain-col:not(.is-spread) {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 250ms ease, transform 500ms ease;
}
.env-card.has-spread .domain-col.is-spread {
  z-index: 10;
  position: relative;
  transform-origin: top center;
  transform: scale(1.04);
}
/* Roles fade when not relevant; cross-cutting always visible above the spread */
.env-card.has-spread .role-chip {
  z-index: 11;
}
.role-chip.role-dim {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.med-name {
  font-family: var(--font-mono);
  font-size: 10pt;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.med-tier-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  cursor: pointer;
  padding: 2px 0;
}
.med-tier-text {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.med-tier-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(212, 168, 75, 0.18);
  border: 1px solid rgba(212, 168, 75, 0.4);
  color: var(--gold-2);
  font-size: 7pt;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 180ms ease;
}
.med-tier-info:hover {
  background: rgba(212, 168, 75, 0.35);
  border-color: var(--gold-1);
  box-shadow: 0 0 8px rgba(212, 168, 75, 0.4);
}

/* MEDALLION BADGE — bronze / silver / gold, dark surface, light text colored as metal */
.med-badge {
  align-self: flex-end;
  display: inline-block;
  padding: 3px 11px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(15, 7, 31, 0.95), rgba(7, 3, 14, 0.98));
  font-family: var(--font-mono);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.02);
}
.med-badge.medallion-source   { color: #D9A075; border: 1px solid #8B5A2B; text-shadow: 0 0 4px rgba(217, 160, 117, 0.25); }
.med-badge.medallion-trusted  { color: #DDE2E7; border: 1px solid #8A93A0; text-shadow: 0 0 4px rgba(221, 226, 231, 0.25); }
.med-badge.medallion-semantic { color: #F5D478; border: 1px solid #B58637; text-shadow: 0 0 6px rgba(245, 212, 120, 0.3); }
.med-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tag-chip {
  font-family: var(--font-mono);
  font-size: 7pt;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.1em;
}
.tag-t0 { background: rgba(91, 99, 120, 0.25);  color: #B5BBC9; }
.tag-t1 { background: rgba(74, 111, 184, 0.25); color: #9BB7E8; }
.tag-t2 { background: rgba(212, 168, 75, 0.25); color: var(--gold-2); }
.tag-t3 { background: rgba(192, 77, 143, 0.3);  color: #FF95C7; }
.tag-t4 { background: rgba(231, 56, 76, 0.32);  color: #FF8E97; }
/* Derived tags use a dashed border to distinguish them from inherited (source) tags */
.tag-chip.tag-derived { border: 1px dashed currentColor; padding: 0px 6px; }
.tag-chip.tag-source  { border: 1px solid transparent; padding: 1px 7px; }
.tag-chip.tag-more {
  background: rgba(43, 16, 71, 0.6);
  color: var(--ink-muted);
  border: 1px dotted rgba(184, 159, 201, 0.4);
  cursor: pointer;
}
.tag-chip { cursor: pointer; }

/* tier-driven glow on the medallion card border */
.med-card.tier-t0 { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(91, 99, 120, 0.12); }
.med-card.tier-t1 { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 18px rgba(74, 111, 184, 0.18); }
.med-card.tier-t2 { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 168, 75, 0.2); }
.med-card.tier-t3 { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 28px rgba(192, 77, 143, 0.28); }
.med-card.tier-t4 { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 36px rgba(231, 56, 76, 0.36); }

/* ACCOUNT-LEVEL COMPOSITE ROLES (around the domains) */
.account-roles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.role-chip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 8.5pt;
  letter-spacing: 0.15em;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 7, 31, 0.85);
  border: 1px solid rgba(212, 168, 75, 0.4);
  color: var(--gold-2);
  pointer-events: auto;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(212, 168, 75, 0.3);
}
.role-chip:hover {
  background: rgba(212, 168, 75, 0.15);
  border-color: var(--gold-2);
  color: #FFF1CB;
  transform: scale(1.04);
  box-shadow: 0 0 16px rgba(212, 168, 75, 0.4);
}
.role-chip.cross-cutting {
  border-color: rgba(46, 230, 137, 0.5);
  color: var(--neon-green);
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.4);
}
.role-chip.cross-cutting:hover {
  background: rgba(46, 230, 137, 0.13);
  border-color: var(--neon-green);
  box-shadow: 0 0 16px rgba(46, 230, 137, 0.4);
  color: #C5FFE2;
}

/* SVG edge overlay */
#edge-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.edge {
  fill: none;
  stroke-width: 1.4px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.edge.visible { opacity: 0.7; }
.edge.read { stroke: var(--edge-read); }
.edge.write { stroke: var(--edge-write); filter: drop-shadow(0 0 4px rgba(231, 56, 76, 0.35)); }

/* EXPANDED DATABASE VIEW */
#db-overlay {
  position: fixed;
  inset: 84px 0 0 0;
  background: rgba(7, 3, 14, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 28px;
}
#db-overlay.open { display: flex; }
.db-stage {
  position: relative;
  width: min(1200px, 100%);
  height: min(80vh, 720px);
}
.db-card-back-2, .db-card-back-1 {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--p1), var(--bg-mid));
  border: 1px solid rgba(139, 63, 204, 0.25);
  transform: translateY(16px) scale(0.985);
  filter: brightness(0.6);
}
.db-card-back-2 { transform: translateY(32px) scale(0.97); filter: brightness(0.45); }

.db-card-front {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 24px 28px;
  background:
    linear-gradient(135deg, rgba(110, 46, 168, 0.2), rgba(43, 16, 71, 0.85)),
    linear-gradient(180deg, var(--p1), var(--bg-mid));
  border: 1px solid rgba(212, 168, 75, 0.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.db-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.db-name {
  font-family: var(--font-mono);
  font-size: 18pt;
  color: var(--gold-1);
  letter-spacing: 0.05em;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(212, 168, 75, 0.3);
}
.db-meta {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.db-close {
  background: transparent;
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--ink-muted);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.15em;
  border-radius: 4px;
  cursor: pointer;
  transition: all 180ms ease;
}
.db-close:hover {
  color: var(--gold-1);
  border-color: var(--gold-1);
  background: rgba(212, 168, 75, 0.1);
}

.db-roles-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(15, 7, 31, 0.55);
  border: 1px solid rgba(139, 63, 204, 0.25);
  border-radius: 10px;
}
.db-roles-label {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  align-self: center;
  margin-right: 4px;
}
.db-role-chip {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 63, 204, 0.4);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 200ms ease;
  background: rgba(43, 16, 71, 0.4);
}
.db-role-chip[data-grant="read"]:hover, .db-role-chip[data-grant="read"].active {
  border-color: var(--edge-read);
  color: var(--edge-read);
  box-shadow: 0 0 16px rgba(91, 158, 231, 0.4);
  background: rgba(91, 158, 231, 0.1);
}
.db-role-chip[data-grant="write"]:hover, .db-role-chip[data-grant="write"].active {
  border-color: var(--edge-write);
  color: var(--edge-write);
  box-shadow: 0 0 16px rgba(231, 56, 76, 0.4);
  background: rgba(231, 56, 76, 0.1);
}

.db-schemas-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  overflow-y: auto;
  position: relative;
}
.schema-card {
  position: relative;
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 63, 204, 0.35);
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}
.schema-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-2);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(212, 168, 75, 0.18);
}

/* SCHEMA / TABLE / COLUMN DRILLDOWN */
.schema-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}
.schema-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 63, 204, 0.25);
}
.schema-detail-title {
  font-family: var(--font-mono);
  font-size: 11pt;
  color: var(--gold-2);
  letter-spacing: 0.06em;
  font-weight: 700;
}
.schema-detail-sub {
  font-size: 9pt;
  color: var(--ink-muted);
  margin-top: 3px;
}
.schema-back-btn {
  background: transparent;
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--ink-muted);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 8.5pt;
  letter-spacing: 0.15em;
  border-radius: 4px;
  cursor: pointer;
  transition: all 180ms ease;
}
.schema-back-btn:hover {
  color: var(--gold-1);
  border-color: var(--gold-1);
  background: rgba(212, 168, 75, 0.1);
}

.table-block {
  border: 1px solid rgba(139, 63, 204, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(15, 7, 31, 0.4);
}
.table-block-name {
  font-family: var(--font-mono);
  font-size: 10pt;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.column-row {
  display: grid;
  grid-template-columns: 200px 90px 1fr auto;
  gap: 12px;
  padding: 4px 0;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 8.5pt;
  border-bottom: 1px dashed rgba(139, 63, 204, 0.15);
}
.column-row:last-child { border-bottom: none; }
.column-name { color: var(--ink); letter-spacing: 0.04em; }
.column-tag {
  font-size: 7.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
}
.column-tag.tier-t0 { background: rgba(91,99,120,0.22); color: #B5BBC9; }
.column-tag.tier-t1 { background: rgba(74,111,184,0.22); color: #9BB7E8; }
.column-tag.tier-t2 { background: rgba(212,168,75,0.22); color: var(--gold-2); }
.column-tag.tier-t3 { background: rgba(192,77,143,0.3);  color: #FF95C7; }
.column-tag.tier-t4 { background: rgba(231,56,76,0.32);  color: #FF8E97; }
.column-tier-badge {
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  border-radius: 3px;
  text-align: center;
}
.column-tier-badge.tier-t0 { background: var(--t0); color: #0E061E; }
.column-tier-badge.tier-t1 { background: var(--t1); color: #FFF; }
.column-tier-badge.tier-t2 { background: var(--t2); color: #0E061E; }
.column-tier-badge.tier-t3 { background: var(--t3); color: #FFF; }
.column-tier-badge.tier-t4 { background: var(--t4); color: #FFF; }
.column-pii-btn {
  background: rgba(231, 56, 76, 0.12);
  border: 1px solid rgba(231, 56, 76, 0.45);
  color: #FF8E97;
  font-family: var(--font-mono);
  font-size: 7pt;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 180ms ease;
}
.column-pii-btn:hover {
  background: rgba(231, 56, 76, 0.28);
  color: #FFF;
  box-shadow: 0 0 12px rgba(231, 56, 76, 0.4);
}
.column-non-pii-marker {
  font-size: 7pt;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* POLICY EFFECT MODAL */
#policy-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 3, 14, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 320;
  display: none;
  align-items: center;
  justify-content: center;
}
#policy-modal-backdrop.open { display: flex; }
.policy-modal {
  background: linear-gradient(180deg, rgba(43, 16, 71, 0.98), rgba(20, 8, 42, 0.99));
  border: 1px solid rgba(231, 56, 76, 0.4);
  border-radius: 12px;
  padding: 26px 30px;
  max-width: 760px;
  width: 92%;
  box-shadow: 0 30px 90px rgba(0,0,0,0.75), 0 0 32px rgba(231, 56, 76, 0.18);
  position: relative;
  max-height: 86vh;
  overflow-y: auto;
}
.policy-modal-title {
  font-family: var(--font-disp);
  font-size: 13pt;
  font-weight: 700;
  color: #FF8E97;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(231, 56, 76, 0.35);
}
.policy-modal-sub {
  font-size: 9pt;
  color: var(--ink-muted);
  margin-bottom: 18px;
  line-height: 1.45;
}
.policy-section-label {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.22em;
  color: var(--neon-green);
  text-transform: uppercase;
  margin: 14px 0 8px;
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.3);
}
.policy-sql {
  background: rgba(7, 3, 14, 0.7);
  border: 1px solid rgba(139, 63, 204, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 8pt;
  color: var(--ink-muted);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
}
.policy-disclaimer {
  background: rgba(231, 56, 76, 0.08);
  border: 1px solid rgba(231, 56, 76, 0.3);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 6px 0 8px;
  font-size: 8pt;
  color: #FF95A0;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.policy-sql .kw { color: var(--gold-2); }
.policy-effect-row {
  display: grid;
  grid-template-columns: 200px 1fr 110px;
  gap: 12px;
  padding: 7px 10px;
  align-items: center;
  border-radius: 6px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 9pt;
  border: 1px solid rgba(139, 63, 204, 0.18);
}
.policy-effect-row.kind-cleartext { background: rgba(212, 168, 75, 0.08); border-color: rgba(212, 168, 75, 0.25); }
.policy-effect-row.kind-masked    { background: rgba(212, 168, 75, 0.04); border-color: rgba(192, 77, 143, 0.25); }
.policy-effect-row.kind-denied    { background: rgba(231, 56, 76, 0.06);  border-color: rgba(231, 56, 76, 0.3); }
.policy-effect-role {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.policy-effect-row.kind-cleartext .policy-effect-value { color: var(--gold-2); }
.policy-effect-row.kind-masked    .policy-effect-value { color: #FF95C7; }
.policy-effect-row.kind-denied    .policy-effect-value { color: #FF8E97; }
.policy-effect-value { font-size: 9.5pt; }
.policy-effect-why {
  font-size: 7.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-faint);
}
.schema-name {
  font-family: var(--font-mono);
  font-size: 10pt;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.schema-purpose {
  font-size: 9pt;
  color: var(--ink-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.schema-tables {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.schema-table {
  font-family: var(--font-mono);
  font-size: 8pt;
  color: var(--ink-muted);
  padding: 2px 0;
  letter-spacing: 0.04em;
}
.schema-table::before { content: "› "; color: var(--gold-2); }

/* Tier-glow on schema cards */
.schema-card.tier-t0 { background: linear-gradient(180deg, rgba(91, 99, 120, 0.16), rgba(91, 99, 120, 0.04)); box-shadow: 0 0 24px rgba(91, 99, 120, 0.18); }
.schema-card.tier-t1 { background: linear-gradient(180deg, rgba(74, 111, 184, 0.18), rgba(74, 111, 184, 0.04)); box-shadow: 0 0 26px rgba(74, 111, 184, 0.22); }
.schema-card.tier-t2 { background: linear-gradient(180deg, rgba(212, 168, 75, 0.18), rgba(212, 168, 75, 0.04)); box-shadow: 0 0 28px rgba(212, 168, 75, 0.22); }
.schema-card.tier-t3 { background: linear-gradient(180deg, rgba(192, 77, 143, 0.22), rgba(192, 77, 143, 0.05)); box-shadow: 0 0 32px rgba(192, 77, 143, 0.28); }
.schema-card.tier-t4 { background: linear-gradient(180deg, rgba(231, 56, 76, 0.24), rgba(231, 56, 76, 0.05)); box-shadow: 0 0 36px rgba(231, 56, 76, 0.32); }

.schema-tier-badge {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 1px 6px;
  border-radius: 3px;
}
.schema-tier-badge.tier-t0 { background: var(--t0); color: #0E061E; }
.schema-tier-badge.tier-t1 { background: var(--t1); color: #0E061E; }
.schema-tier-badge.tier-t2 { background: var(--t2); color: #0E061E; }
.schema-tier-badge.tier-t3 { background: var(--t3); color: #FFF; }
.schema-tier-badge.tier-t4 { background: var(--t4); color: #FFF; }

/* SVG overlay for db role hover edges */
#db-edge-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

/* TOOLTIP */
.tooltip {
  position: absolute;
  background: rgba(7, 3, 14, 0.95);
  border: 1px solid rgba(212, 168, 75, 0.35);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 9pt;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 200;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.tooltip.visible { opacity: 1; }
.tooltip .tt-title {
  font-family: var(--font-mono);
  font-size: 9pt;
  color: var(--gold-2);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

/* TIER DEFINITION MODAL */
#tier-modal-backdrop, #ref-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 3, 14, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}
#tier-modal-backdrop.open, #ref-modal-backdrop.open { display: flex; }

/* References list */
.ref-section {
  margin-top: 16px;
}
.ref-section h4 {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.25em;
  color: var(--neon-green);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.3);
}
.ref-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ref-section li {
  padding: 4px 0 4px 12px;
  position: relative;
  font-size: 9pt;
  color: var(--ink-muted);
  line-height: 1.45;
}
.ref-section li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--gold-2);
  font-weight: 700;
}
.ref-section a {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 168, 75, 0.3);
  transition: all 180ms ease;
}
.ref-section a:hover {
  color: #FFF1CB;
  border-bottom-color: var(--gold-1);
  text-shadow: 0 0 4px rgba(212, 168, 75, 0.4);
}
.tier-modal {
  background: linear-gradient(180deg, rgba(43, 16, 71, 0.98), rgba(20, 8, 42, 0.99));
  border: 1px solid rgba(212, 168, 75, 0.45);
  border-radius: 12px;
  padding: 26px 30px;
  max-width: 620px;
  width: 92%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 168, 75, 0.18);
  position: relative;
}
.tier-modal-title {
  font-family: var(--font-disp);
  font-size: 14pt;
  font-weight: 700;
  color: var(--gold-1);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(212, 168, 75, 0.35);
}
.tier-modal-sub {
  font-size: 9pt;
  color: var(--ink-muted);
  margin-bottom: 18px;
  line-height: 1.45;
}
.tier-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 8.5pt;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: all 180ms ease;
}
.tier-modal-close:hover { color: var(--gold-1); border-color: var(--gold-1); background: rgba(212, 168, 75, 0.12); }

.tier-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(139, 63, 204, 0.18);
  align-items: flex-start;
}
.tier-row:last-child { border-bottom: none; }
.tier-badge-lg {
  font-family: var(--font-mono);
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 0;
  border-radius: 4px;
  text-align: center;
}
.tier-badge-lg.tier-t0 { background: var(--t0); color: #0E061E; }
.tier-badge-lg.tier-t1 { background: var(--t1); color: #FFF; }
.tier-badge-lg.tier-t2 { background: var(--t2); color: #0E061E; }
.tier-badge-lg.tier-t3 { background: var(--t3); color: #FFF; }
.tier-badge-lg.tier-t4 { background: var(--t4); color: #FFF; }
.tier-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 10pt;
  margin-bottom: 3px;
  letter-spacing: 0.02em;
}
.tier-body {
  font-size: 9pt;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* COMPUTE + NETWORK modals share the tier-modal backdrop styles via #tier-modal-backdrop
   pattern; we add their own ids and inherit. */
#compute-modal-backdrop, #network-modal-backdrop, #flow-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 3, 14, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 310;
  display: none;
  align-items: center;
  justify-content: center;
}
#compute-modal-backdrop.open, #network-modal-backdrop.open, #flow-modal-backdrop.open { display: flex; }

/* COMPUTE — warehouse cards */
.compute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.warehouse-card {
  border: 1px solid rgba(139, 63, 204, 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(15, 7, 31, 0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.warehouse-card.workload-platform   { border-left: 3px solid var(--gold-1); }
.warehouse-card.workload-etl        { border-left: 3px solid var(--p3); }
.warehouse-card.workload-interactive{ border-left: 3px solid var(--neon-green); }
.warehouse-card.workload-audit      { border-left: 3px solid var(--edge-read); }
.warehouse-card.workload-ai         { border-left: 3px solid var(--hot-pink); }
.warehouse-card.workload-streaming  { border-left: 3px solid var(--neon-cyan, #4DE8E1); }
.wh-name {
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: 0.04em;
}
.wh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wh-meta-chip {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(43, 16, 71, 0.5);
  border: 1px solid rgba(139, 63, 204, 0.3);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.wh-meta-chip.size      { color: var(--ink); }
.wh-meta-chip.cost      { color: var(--gold-2); }
.wh-meta-chip.cap       { color: var(--neon-green); }
.wh-meta-chip.workload  { color: var(--ink-muted); }
.wh-purpose {
  font-size: 8.5pt;
  color: var(--ink-muted);
  line-height: 1.45;
}
.wh-roles-label {
  font-family: var(--font-mono);
  font-size: 7pt;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 4px;
}
.wh-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wh-role-chip {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(212, 168, 75, 0.12);
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--gold-2);
  cursor: pointer;
  transition: all 160ms ease;
}
.wh-role-chip.cross-cutting {
  background: rgba(46, 230, 137, 0.1);
  border-color: rgba(46, 230, 137, 0.4);
  color: var(--neon-green);
}
.wh-role-chip:hover {
  background: rgba(212, 168, 75, 0.22);
  color: #FFF1CB;
  transform: translateY(-1px);
}

/* NETWORK — perimeter cards by category */
.network-section {
  margin-top: 14px;
}
.network-section h4 {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.25em;
  color: var(--neon-green);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.3);
}
.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 10px;
}
.network-entity {
  border: 1px solid rgba(139, 63, 204, 0.3);
  border-left: 3px solid var(--neon-green);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(15, 7, 31, 0.55);
}
.network-entity.blocked {
  border-left-color: var(--edge-write);
  background: rgba(231, 56, 76, 0.06);
}
.network-entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.network-entity-name {
  font-family: var(--font-mono);
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.network-entity-status {
  font-family: var(--font-mono);
  font-size: 7pt;
  letter-spacing: 0.2em;
  padding: 2px 7px;
  border-radius: 3px;
}
.network-entity-status.allowed { background: rgba(46, 230, 137, 0.2); color: var(--neon-green); }
.network-entity-status.blocked { background: rgba(231, 56, 76, 0.25);  color: #FF8E97; }
.network-entity-reaches {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.06em;
  color: var(--gold-2);
  margin-bottom: 4px;
}
.network-entity-detail {
  font-size: 8.5pt;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* LINEAGE — warehouse strip inside the role lineage modal */
.lineage-wh-strip {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(15, 7, 31, 0.4);
  border: 1px solid rgba(139, 63, 204, 0.2);
  border-radius: 8px;
}
.lineage-wh-label {
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.22em;
  color: var(--neon-green);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lineage-wh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lineage-wh-chip {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(43, 16, 71, 0.6);
  border: 1px solid rgba(212, 168, 75, 0.35);
  color: var(--gold-2);
}

/* ROLE LINEAGE MODAL — full graph of a role's connected lineage */
#lineage-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 3, 14, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 340;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
#lineage-modal-backdrop.open { display: flex; }
.lineage-modal {
  background: linear-gradient(180deg, rgba(43, 16, 71, 0.98), rgba(20, 8, 42, 0.99));
  border: 1px solid rgba(212, 168, 75, 0.45);
  border-radius: 14px;
  padding: 26px 30px;
  width: min(1200px, 100%);
  height: 100%;
  max-height: 92vh;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 40px rgba(212, 168, 75, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
}
.lineage-modal-title {
  font-family: var(--font-mono);
  font-size: 15pt;
  font-weight: 700;
  color: var(--gold-1);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(212, 168, 75, 0.4);
}
.lineage-modal-sub {
  font-size: 9pt;
  color: var(--ink-muted);
  margin-bottom: 8px;
  line-height: 1.45;
}
.lineage-summary {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.16em;
  color: var(--neon-green);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(46, 230, 137, 0.3);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(139, 63, 204, 0.25);
}
#lineage-modal-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  align-content: start;
}
.lineage-db {
  border: 1px solid rgba(139, 63, 204, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(15, 7, 31, 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lineage-db.kind-read  { border-left: 3px solid var(--edge-read); }
.lineage-db.kind-write { border-left: 3px solid var(--edge-write); }
.lineage-db-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(139, 63, 204, 0.2);
}
.lineage-db-name {
  font-family: var(--font-mono);
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  flex: 1;
}
.lineage-db-grant {
  font-family: var(--font-mono);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 3px;
}
.lineage-db-grant.kind-read  { background: rgba(91, 158, 231, 0.25); color: var(--edge-read); }
.lineage-db-grant.kind-write { background: rgba(231, 56, 76, 0.28);  color: var(--edge-write); }
.lineage-db-tier {
  font-family: var(--font-mono);
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  border-radius: 3px;
}
.lineage-db-tier.tier-t0 { background: var(--t0); color: #0E061E; }
.lineage-db-tier.tier-t1 { background: var(--t1); color: #FFF; }
.lineage-db-tier.tier-t2 { background: var(--t2); color: #0E061E; }
.lineage-db-tier.tier-t3 { background: var(--t3); color: #FFF; }
.lineage-db-tier.tier-t4 { background: var(--t4); color: #FFF; }
.lineage-schemas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lineage-schema {
  border-left: 2px solid rgba(139, 63, 204, 0.4);
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.lineage-schema-name {
  font-family: var(--font-mono);
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.lineage-schema-name.tier-t0 { color: #B5BBC9; }
.lineage-schema-name.tier-t1 { color: #9BB7E8; }
.lineage-schema-name.tier-t2 { color: var(--gold-2); }
.lineage-schema-name.tier-t3 { color: #FF95C7; }
.lineage-schema-name.tier-t4 { color: #FF8E97; }
.lineage-tables {
  list-style: none;
  padding-left: 8px;
  font-family: var(--font-mono);
  font-size: 8pt;
}
.lineage-table {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  gap: 8px;
  align-items: center;
}
.lineage-table-name {
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.lineage-table-name::before { content: "·"; color: var(--gold-2); margin-right: 6px; }
.lineage-col-summary {
  font-size: 7.5pt;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}
.lineage-col-cleartext { color: var(--gold-2); }
.lineage-col-masked    { color: #FF95C7; }
.lineage-col-denied    { color: #FF8E97; }

/* FOOTER */
.footer {
  position: fixed;
  bottom: 12px;
  left: 28px;
  font-family: var(--font-mono);
  font-size: 7.5pt;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ========================================================================= */
/* v0.7 — LINEAGE MODAL TABS                                                 */
/* ========================================================================= */
.lineage-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--p2);
  padding: 0 4px;
}
.lineage-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  padding: 10px 18px;
  font-family: var(--font-disp);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.lineage-tab:hover {
  color: var(--ink);
  background: rgba(139, 63, 204, 0.08);
}
.lineage-tab.active {
  color: var(--gold-2);
  border-bottom-color: var(--gold-1);
}
.lineage-tab-pane {
  display: none;
  margin-top: 14px;
}
.lineage-tab-pane.active {
  display: block;
}

/* When the columns tab can't show a role-specific summary (db-role subject), */
/* the table row gets a muted placeholder.                                     */
.col-summary-faint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ========================================================================= */
/* v0.7 — ROLE HIERARCHY GRAPH                                                */
/* ========================================================================= */
.lineage-hier-legend {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
  background: rgba(46, 15, 71, 0.4);
  border: 1px solid var(--p2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.hier-key {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 2px;
  vertical-align: 1px;
}
.hier-key.acct   { background: rgba(139, 63, 204, 0.35); color: var(--p-glow); border: 1px solid var(--p3); }
.hier-key.db-role { background: rgba(91, 158, 231, 0.18); color: var(--edge-read); border: 1px solid rgba(91, 158, 231, 0.35); }
.hier-key.obj    { background: rgba(212, 168, 75, 0.18); color: var(--gold-2); border: 1px solid var(--gold-deep); }

#lineage-hier-canvas {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin-bottom: 12px;
  border: 1px solid var(--p2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 10, 40, 0.6), rgba(14, 6, 30, 0.85));
  overflow: hidden;
}
#lineage-hier-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
#lineage-hier-nodes {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hier-col-header {
  position: absolute;
  top: 6px;
  /* width is set inline so it tracks the dynamic node width */
  text-align: center;
  font-family: var(--font-disp);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}
.hier-node {
  position: absolute;
  /* width is set inline by renderHierarchyGraph based on canvas width */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(14, 6, 30, 0.95);
  border: 1px solid var(--p2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hier-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 63, 204, 0.35);
}
.hier-node.is-subject {
  border-width: 2px;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.18), 0 4px 14px rgba(212, 168, 75, 0.35);
  transform: scale(1.02);
}
.hier-node-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hier-node-tier {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}

/* Layer-specific accents */
.hier-node.layer-acct {
  border-color: var(--p3);
  background: linear-gradient(180deg, rgba(74, 30, 115, 0.65), rgba(20, 10, 40, 0.95));
}
.hier-node.layer-acct.cross-cutting {
  border-color: var(--gold-1);
}
.hier-node.layer-dr.grant-read {
  border-color: rgba(91, 158, 231, 0.5);
  background: linear-gradient(180deg, rgba(91, 158, 231, 0.18), rgba(20, 10, 40, 0.95));
}
.hier-node.layer-dr.grant-write {
  border-color: rgba(231, 56, 76, 0.5);
  background: linear-gradient(180deg, rgba(231, 56, 76, 0.18), rgba(20, 10, 40, 0.95));
}
.hier-node.layer-db {
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.15), rgba(20, 10, 40, 0.95));
}

/* Tier color override — applies to the left-edge stripe via box-shadow inset.   */
/* This keeps tier signaling visible on db-role and db nodes regardless of grant. */
.hier-node.tier-t1 { box-shadow: inset 4px 0 0 var(--t1), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.tier-t2 { box-shadow: inset 4px 0 0 var(--t2), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.tier-t3 { box-shadow: inset 4px 0 0 var(--t3), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.tier-t4 { box-shadow: inset 4px 0 0 var(--t4), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.is-subject.tier-t1 { box-shadow: inset 4px 0 0 var(--t1), 0 0 0 3px rgba(212, 168, 75, 0.18), 0 4px 14px rgba(212, 168, 75, 0.35); }
.hier-node.is-subject.tier-t2 { box-shadow: inset 4px 0 0 var(--t2), 0 0 0 3px rgba(212, 168, 75, 0.18), 0 4px 14px rgba(212, 168, 75, 0.35); }
.hier-node.is-subject.tier-t3 { box-shadow: inset 4px 0 0 var(--t3), 0 0 0 3px rgba(212, 168, 75, 0.18), 0 4px 14px rgba(212, 168, 75, 0.35); }
.hier-node.is-subject.tier-t4 { box-shadow: inset 4px 0 0 var(--t4), 0 0 0 3px rgba(212, 168, 75, 0.18), 0 4px 14px rgba(212, 168, 75, 0.35); }

/* Edges between layers */
.hier-edge {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.75;
}
.hier-edge.read  { stroke: var(--edge-read); }
.hier-edge.write { stroke: var(--edge-write); }

/* ========================================================================= */
/* v0.7 — DATA FLOW MODAL                                                     */
/* ========================================================================= */
.flow-tier-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  margin: 0 1px;
}
.flow-tier-pill.bronze { background: rgba(176, 99, 38, 0.18); color: #C47A3D; border: 1px solid #8A5424; }
.flow-tier-pill.silver { background: rgba(170, 180, 200, 0.18); color: #B6C0D0; border: 1px solid #6E7A8E; }
.flow-tier-pill.gold   { background: rgba(212, 168, 75, 0.18); color: var(--gold-2); border: 1px solid var(--gold-deep); }

.flow-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.flow-col {
  background: rgba(22, 11, 44, 0.55);
  border: 1px solid var(--p2);
  border-radius: 10px;
  padding: 12px 12px 14px;
  min-height: 200px;
}
.flow-col-head {
  font-family: var(--font-disp);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--p2);
}
.flow-col-head.ingress   { color: var(--neon-green); }
.flow-col-head.transform { color: var(--gold-2); }
.flow-col-head.egress    { color: var(--hot-pink); }
.flow-col-sub {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 6px 0 12px;
}

.flow-card {
  background: rgba(14, 6, 30, 0.85);
  border: 1px solid var(--p2);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  position: relative;
  font-size: 11px;
}
.flow-card.tier-t1 { border-left-color: var(--t1); }
.flow-card.tier-t2 { border-left-color: var(--t2); }
.flow-card.tier-t3 { border-left-color: var(--t3); }
.flow-card.tier-t4 { border-left-color: var(--t4); }
.flow-card.ingress { background: linear-gradient(90deg, rgba(46, 230, 137, 0.08), rgba(14, 6, 30, 0.85) 40%); }
.flow-card.egress  { background: linear-gradient(270deg, rgba(255, 77, 158, 0.08), rgba(14, 6, 30, 0.85) 40%); }

.flow-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.flow-external {
  font-family: var(--font-disp);
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}
.flow-tier {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.flow-tier.tier-t1 { background: rgba(74, 111, 184, 0.2);  color: var(--t1); }
.flow-tier.tier-t2 { background: rgba(212, 168, 75, 0.2);  color: var(--t2); }
.flow-tier.tier-t3 { background: rgba(192, 77, 143, 0.2);  color: var(--t3); }
.flow-tier.tier-t4 { background: rgba(231, 56, 76, 0.2);   color: var(--t4); }
.flow-method {
  font-size: 10px;
  color: var(--ink-muted);
  margin-bottom: 3px;
  line-height: 1.4;
}
.flow-target {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
  margin: 4px 0;
  letter-spacing: 0.02em;
}
.flow-arrow {
  color: var(--neon-green);
  margin-right: 4px;
  font-size: 10px;
}
.flow-card.egress .flow-arrow { color: var(--hot-pink); }
.flow-role {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.flow-role-name {
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.flow-direction {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.flow-direction.dir-governed       { background: rgba(46, 230, 137, 0.15); color: var(--neon-green); }
.flow-direction.dir-in-tenant      { background: rgba(91, 158, 231, 0.15); color: var(--edge-read); }
.flow-direction.dir-gated-external { background: rgba(255, 77, 158, 0.15); color: var(--hot-pink); }

.flow-transform {
  background: rgba(14, 6, 30, 0.85);
  border: 1px solid var(--gold-deep);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.flow-transform-label {
  font-family: var(--font-disp);
  font-weight: 600;
  color: var(--gold-2);
  font-size: 12px;
  margin-bottom: 4px;
}
.flow-transform-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.flow-transform-roles {
  font-size: 10px;
  color: var(--ink-faint);
}
.flow-role-chip {
  display: inline-block;
  padding: 2px 7px;
  margin: 0 3px 3px 0;
  border-radius: 4px;
  background: rgba(139, 63, 204, 0.2);
  border: 1px solid var(--p3);
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.flow-role-chip:hover {
  background: rgba(139, 63, 204, 0.45);
  transform: translateY(-1px);
}

/* ========================================================================= */
/* v0.8 — ENV-AWARE STATES                                                    */
/* ========================================================================= */

/* Env-origin pill on the front env card (live / masked / synthetic) */
.env-origin {
  position: absolute;
  top: 22px;
  right: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(7, 3, 14, 0.6);
  border: 1px solid var(--p2);
  font-family: var(--font-disp);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 6;
  cursor: help;
}
.env-origin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.env-origin-label { color: var(--ink); }

.swatch-live      .env-origin-dot, .swatch-live      .med-state-badge::before { background: var(--neon-green); }
.swatch-masked    .env-origin-dot, .swatch-masked    .med-state-badge::before { background: var(--gold-2); }
.swatch-synthetic .env-origin-dot, .swatch-synthetic .med-state-badge::before { background: var(--hot-pink); }
.env-origin.swatch-live      { border-color: rgba(46, 230, 137, 0.45); }
.env-origin.swatch-masked    { border-color: rgba(240, 195, 106, 0.45); }
.env-origin.swatch-synthetic { border-color: rgba(255, 77, 158, 0.45); }
.env-origin.swatch-live      .env-origin-label { color: var(--neon-green); }
.env-origin.swatch-masked    .env-origin-label { color: var(--gold-2); }
.env-origin.swatch-synthetic .env-origin-label { color: var(--hot-pink); }

/* Hide the origin pill on back env cards — only the active env shows it */
.env-card:not(.position-front) .env-origin { display: none; }

/* Per-medallion state badge (LIVE / MASKED / SYNTHETIC / DERIVED·SYN)        */
.med-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-disp);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 5px;
  background: rgba(7, 3, 14, 0.55);
  border: 1px solid var(--p2);
  color: var(--ink-muted);
}
.med-state-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.med-state-badge.swatch-live      { color: var(--neon-green); border-color: rgba(46, 230, 137, 0.4); }
.med-state-badge.swatch-masked    { color: var(--gold-2);    border-color: rgba(240, 195, 106, 0.4); }
.med-state-badge.swatch-synthetic { color: var(--hot-pink);  border-color: rgba(255, 77, 158, 0.4); }

/* Soften medallions whose data is synthetic — the structure is still there  */
/* but the user should see at a glance that this isn't real data.            */
.med-card.med-state-synthetic { opacity: 0.78; }
.med-card.med-state-synthetic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    rgba(255, 77, 158, 0.04) 6px 8px
  );
  pointer-events: none;
  border-radius: inherit;
}
.med-card.med-state-derived-synthetic { opacity: 0.92; }

/* Flow & network env banner */
.flow-env-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 4px 0 14px;
  background: linear-gradient(90deg, rgba(110, 46, 168, 0.25), rgba(46, 15, 71, 0.4) 60%);
  border: 1px solid var(--p3);
}
.flow-env-banner.env-staging { background: linear-gradient(90deg, rgba(212, 168, 75, 0.18), rgba(46, 15, 71, 0.4) 60%); border-color: var(--gold-deep); }
.flow-env-banner.env-dev     { background: linear-gradient(90deg, rgba(255, 77, 158, 0.15), rgba(46, 15, 71, 0.4) 60%); border-color: var(--hot-pink); }
.flow-env-banner-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(7, 3, 14, 0.6);
  color: var(--gold-2);
  border: 1px solid var(--p2);
  flex-shrink: 0;
}
.flow-env-banner.env-staging .flow-env-banner-label { color: var(--gold-2); }
.flow-env-banner.env-dev     .flow-env-banner-label { color: var(--hot-pink); }
.flow-env-banner-text {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.flow-hidden-note {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  background: rgba(14, 6, 30, 0.6);
  border: 1px dashed var(--p2);
  border-radius: 6px;
  font-style: italic;
}
.flow-empty {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  background: rgba(14, 6, 30, 0.45);
  border: 1px dashed var(--p2);
  border-radius: 8px;
}
.flow-transform-env-note {
  font-size: 10px;
  color: var(--gold-2);
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 168, 75, 0.25);
}

/* Network category disabled state */
.network-section-disabled { opacity: 0.55; }
.network-section-disabled .network-entity { filter: grayscale(0.5); }
.network-cat-state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--hot-pink);
  margin-left: 8px;
}
.network-cat-state.state-partial { color: var(--gold-2); }
.network-cat-note {
  margin: 4px 0 8px;
  font-size: 10.5px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Hierarchy node — un-truncate the label now that node widths fit names.    */
.hier-node-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* ========================================================================= */
/* v0.9 — MODE TOGGLE                                                         */
/* ========================================================================= */
.mode-toggle {
  display: inline-flex;
  background: rgba(7, 3, 14, 0.55);
  border: 1px solid var(--p2);
  border-radius: 999px;
  padding: 3px;
  margin-right: 8px;
}
.mode-toggle-btn {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-disp);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.1s;
}
.mode-toggle-btn:hover { color: var(--ink); }
.mode-toggle-btn.active {
  background: linear-gradient(180deg, var(--p3), var(--p2));
  color: var(--gold-1);
  box-shadow: 0 1px 4px rgba(139, 63, 204, 0.5);
}

/* ========================================================================= */
/* v0.9 — FLOW MODE: externals, arrows, mode hint                             */
/* ========================================================================= */

/* In flow mode, narrow the medallion area to make room for left/right
   external columns and a top external row. Also hide the per-medallion
   tier rows and tag chips so the focus is on relationships. */
#env-stack.mode-flow .env-card.position-front .domains {
  inset: 130px 200px 60px 200px;
}
/* The cascade flows down: source on top, semantic at bottom. We use the
   medallion data attribute set by JS to control order via flex order. */
.medallion-stack.mode-flow { gap: 12px; }

/* Tier badge text removed from medallion in flow mode (set by JS); but if
   any tier-styled border colors are still present, soften them. */
.med-card.mode-flow .med-tier-row,
.med-card.mode-flow .med-tags { display: none; }
.med-card.mode-flow {
  border-color: rgba(139, 63, 204, 0.35);
}
.med-card.mode-flow .med-name {
  font-size: 11pt;
  letter-spacing: 0.04em;
}

/* In flow mode, env-meta moves to make room and env-origin too */
#env-stack.mode-flow .env-card.position-front .env-origin {
  top: 22px;
  right: 30px;
}

/* External columns / rows */
.flow-ext-col {
  position: absolute;
  top: 130px;
  bottom: 80px;
  width: 175px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
}
.flow-ext-left  { left: 16px; }
.flow-ext-right { right: 16px; }
.flow-ext-row {
  position: absolute;
  top: 64px;
  left: 220px;
  right: 220px;
  height: 56px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* Individual external node */
.flow-ext {
  background: linear-gradient(180deg, rgba(43, 16, 71, 0.95), rgba(20, 8, 42, 0.95));
  border: 1px solid var(--p2);
  border-left-width: 3px;
  border-radius: 7px;
  padding: 7px 9px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: help;
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.flow-ext:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 63, 204, 0.35);
}
.flow-ext.tier-t1 { border-left-color: var(--t1); }
.flow-ext.tier-t2 { border-left-color: var(--t2); }
.flow-ext.tier-t3 { border-left-color: var(--t3); }
.flow-ext.tier-t4 { border-left-color: var(--t4); }

.flow-ext-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.flow-ext-brand {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.flow-ext-tier {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
}
.flow-ext-tier.tier-t1 { background: rgba(74, 111, 184, 0.22);  color: var(--t1); }
.flow-ext-tier.tier-t2 { background: rgba(212, 168, 75, 0.22);  color: var(--t2); }
.flow-ext-tier.tier-t3 { background: rgba(192, 77, 143, 0.22);  color: var(--t3); }
.flow-ext-tier.tier-t4 { background: rgba(231, 56, 76, 0.22);   color: var(--t4); }
.flow-ext-vendor {
  font-size: 9px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 4px;
}
.flow-ext-sp-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.flow-ext-sp {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: rgba(7, 3, 14, 0.55);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(139, 63, 204, 0.25);
}
.flow-ext-sp-divider { color: var(--gold-2); font-size: 10px; }

/* Round-trippers (top row) — show two principal pills inline */
.flow-ext.roundtripper {
  background: linear-gradient(135deg, rgba(212, 168, 75, 0.12), rgba(20, 8, 42, 0.95) 60%);
  border-color: var(--gold-deep);
  width: 220px;
}
.flow-ext.roundtripper::after {
  content: 'ROUND-TRIP';
  position: absolute;
  top: -7px;
  right: 8px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 1px 5px;
  background: var(--gold-deep);
  color: var(--bg-deep);
  border-radius: 3px;
}

/* Flow arrows (SVG paths) */
.flow-arrow {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s;
}
.flow-arrow-write { stroke: var(--edge-write); }
.flow-arrow-read  { stroke: var(--edge-read); }
#env-stack.mode-flow .env-card .flow-arrow { stroke-dasharray: none; }

/* Flow mode hint banner (bottom of env card, above env-label) */
.flow-mode-hint {
  position: absolute;
  bottom: 44px;
  left: 24px;
  right: 24px;
  font-size: 10.5px;
  color: var(--ink-muted);
  background: rgba(7, 3, 14, 0.55);
  border: 1px solid var(--p2);
  border-left: 3px solid var(--p3);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.4;
  z-index: 4;
}
.flow-mode-hint-label {
  font-weight: 700;
  color: var(--gold-2);
  margin-right: 8px;
  letter-spacing: 0.12em;
}

/* Empty externals state (DEV) */
.flow-no-externals {
  position: absolute;
  top: 130px;
  left: 16px;
  right: 16px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(14, 6, 30, 0.4);
  border: 1px dashed rgba(255, 77, 158, 0.4);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}
.flow-no-ext-icon {
  font-size: 64pt;
  color: rgba(255, 77, 158, 0.45);
  line-height: 1;
  margin-bottom: 16px;
}
.flow-no-ext-title {
  font-family: var(--font-disp);
  font-size: 14pt;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.flow-no-ext-sub {
  font-size: 10.5pt;
  color: var(--ink-muted);
  max-width: 480px;
  line-height: 1.5;
}
/* The medallion stack stays visible behind the empty-state overlay so the
   user can still see the structure they have available in DEV. */
#env-stack.mode-flow .env-card.position-front .domains { z-index: 3; }
.flow-no-externals { z-index: 2; }

/* In flow mode, also hide the account-roles container (it isn't rendered
   in flow mode, but the .account-roles selector is targeted by other CSS) */
#env-stack.mode-flow .account-roles { display: none; }

/* ========================================================================= */
/* v0.9 — HIERARCHY GRAPH: warehouses column                                  */
/* ========================================================================= */
.hier-node-cap {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0;
  background: rgba(7, 3, 14, 0.6);
  color: var(--gold-2);
  border: 1px solid var(--gold-deep);
}
/* Distinguish $ levels by stroke + intensity */
.hier-node-cap.cap-1 { opacity: 0.55; }
.hier-node-cap.cap-2 { opacity: 0.75; }
.hier-node-cap.cap-3 { opacity: 0.9; }
.hier-node-cap.cap-4 { color: var(--hot-pink); border-color: rgba(255, 77, 158, 0.55); opacity: 1; }

.hier-node.layer-wh {
  background: linear-gradient(180deg, rgba(46, 230, 137, 0.10), rgba(20, 10, 40, 0.95));
  border-color: rgba(46, 230, 137, 0.4);
}
.hier-node.layer-wh.workload-platform   { box-shadow: inset 4px 0 0 var(--p-glow),   0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-gaming     { box-shadow: inset 4px 0 0 var(--t4),       0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-marketing  { box-shadow: inset 4px 0 0 var(--hot-pink), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-hospitality{ box-shadow: inset 4px 0 0 var(--gold-1),   0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-analyst    { box-shadow: inset 4px 0 0 var(--edge-read), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-compliance { box-shadow: inset 4px 0 0 var(--t3),       0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-ai         { box-shadow: inset 4px 0 0 var(--neon-green), 0 2px 6px rgba(0, 0, 0, 0.5); }
.hier-node.layer-wh.workload-streaming  { box-shadow: inset 4px 0 0 var(--gold-2),   0 2px 6px rgba(0, 0, 0, 0.5); }

/* Edge kind: usage (acct→warehouse) — distinct color */
.hier-edge.usage { stroke: var(--neon-green); }

/* Warehouse strip $-ordinal accent */
.lineage-wh-cap {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-2);
  margin-left: 4px;
  letter-spacing: 0;
}

/* Mobile domain tab strip — hidden on desktop, shown only at mobile breakpoint */
#mobile-domain-tabs { display: none; }

/* ==========================================================================
   RESPONSIVE — full range: mobile → TV
   ========================================================================== */

/* ---- TV (≥1600px): use the extra real estate ----------------------------- */
@media (min-width: 1600px) {
  #env-stack { zoom: 1.18; }
}

/* ---- Laptop / small desktop (900–1199px): scale to fit, enable scroll ---- */
@media (max-width: 1199px) {
  #stage {
    overflow: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }
  #env-stack { zoom: 0.82; }
}

/* ---- Large tablet (700–899px): compact header + more zoom ---------------- */
@media (max-width: 899px) {
  header {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 14px 8px;
    gap: 6px;
    row-gap: 6px;
  }
  header > div:first-child { flex: 1; min-width: 0; }
  .title { font-size: 13pt; }
  .title .sub { display: none; }
  .legend-tier-strip { display: none; }
  .legend {
    order: 3;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 8pt;
  }
  .legend-edge-row { flex-wrap: wrap; gap: 8px; }
  #stage {
    top: 122px;
    overflow: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
  }
  #env-stack { zoom: 0.63; }
  .footer { padding: 6px 16px; font-size: 7pt; }
}

/* ---- Small tablet (500–699px): more squeeze ------------------------------ */
@media (max-width: 699px) {
  #env-stack { zoom: 0.47; }
}

/* ---- Phone (<500px): full document reflow -------------------------------- */
@media (max-width: 499px) {
  /* Page scrolls vertically like a normal document */
  html, body {
    overflow-y: auto !important;
    height: auto !important;
  }

  /* Header: sticky at top, wraps to two rows */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 8px 12px 6px !important;
    gap: 4px !important;
    row-gap: 4px !important;
  }
  .title { font-size: 11pt !important; }
  .title .sub { display: none !important; }
  .legend-tier-strip { display: none !important; }
  .legend-edge-row .legend-edge-item { display: none !important; }
  .legend { order: 3; width: 100%; }
  .env-filter { flex: 1; justify-content: flex-end; }
  .env-btn { padding: 5px 10px !important; font-size: 9pt !important; }

  /* Stage: leave fixed-position mode, become a normal block */
  #stage {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    overflow: visible !important;
    padding: 12px !important;
    height: auto !important;
  }

  /* Canvas: abandon fixed 1180×660 box */
  #env-stack {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    zoom: 1 !important;
    transform: none !important;
  }

  /* Only show the front card; stacked back cards are invisible anyway */
  .env-card.position-back-2,
  .env-card.position-back-1 {
    display: none !important;
  }

  /* Front card: become a normal block element */
  .env-card.position-front {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Flow-external side/top panels: absolutely positioned, skip on mobile */
  .flow-ext-col,
  .flow-ext-row {
    display: none !important;
  }

  /* Mobile domain tab strip */
  #mobile-domain-tabs {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--bg);
    border-bottom: 1px solid rgba(139, 63, 204, 0.3);
    margin-bottom: 12px;
  }
  .mobile-domain-tab {
    flex: 1;
    padding: 10px 6px;
    font-family: var(--font-mono);
    font-size: 8pt;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: color 200ms, border-color 200ms;
    white-space: nowrap;
  }
  .mobile-domain-tab.active {
    color: var(--neon-green);
    border-bottom-color: var(--neon-green);
    background: rgba(46, 230, 137, 0.05);
  }

  /* Domains: was absolute 3-col grid; now a single-domain viewer */
  .domains {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding: 0 !important;
    width: auto !important;
    pointer-events: auto !important;
  }

  /* All domain columns hidden by default; tab selection reveals one */
  .domain-col {
    display: none !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Show whichever domain matches the tab — JS sets data-mobile-domain on #env-stack */
  #env-stack[data-mobile-domain="marketing"]   .domain-col[data-domain-id="marketing"]   { display: flex !important; }
  #env-stack[data-mobile-domain="hospitality"] .domain-col[data-domain-id="hospitality"] { display: flex !important; }
  #env-stack[data-mobile-domain="gaming"]      .domain-col[data-domain-id="gaming"]      { display: flex !important; }

  /* Spread overlay: not meaningful in reflow layout */
  .env-card.has-spread::before { display: none !important; }
  .env-card.has-spread .domain-col:not(.is-spread) {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Medallion stack: vertical stack, each card full width */
  .medallion-stack {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Each med-card: full-width block, no absolute coordinates */
  .med-card {
    position: relative !important;
    width: 100% !important;
    flex: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 16px !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* Cancel spread transforms */
  .domain-col.is-spread .med-card.medallion-trusted,
  .domain-col.is-spread .med-card.medallion-source,
  .domain-col.is-spread .med-card.medallion-semantic {
    transform: none !important;
    top: auto !important;
  }

  /* Role chips: JS-positioned with % anchors — not meaningful in reflow */
  [id^="account-roles-"] { display: none !important; }

  /* SVG edge overlays: coordinates reference the old fixed canvas */
  [id^="edge-overlay-"] { display: none !important; }

  /* Modals: full-width */
  .tier-modal,
  .policy-modal,
  .lineage-modal {
    width: 96% !important;
    max-width: none !important;
    left: 2% !important;
    right: 2% !important;
    transform: none !important;
    padding: 18px 16px !important;
    max-height: 90vh !important;
  }
  .db-stage {
    width: 96vw !important;
    height: 80vh !important;
  }

  /* Footer: no longer fixed, flow with content */
  .footer {
    position: relative !important;
    padding: 8px 16px !important;
    font-size: 7pt !important;
  }
}