/* =============================================================================
   enterprise.css — VerifAIer Sentinel v1.34.0 · Enterprise Governance UI
   Phase 8A: Enterprise AI Governance Operating Console components.
   No external dependencies. No CDN. Localhost only.
   ============================================================================= */

/* ── Enterprise Layout ──────────────────────────────────────────────────────── */

.ent-page {
  min-height: 100vh;
  background: var(--bg-base);
}

.ent-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.ent-section {
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ent-section:last-child {
  border-bottom: none;
}

.ent-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ent-section__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.ent-section__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── Console Hero (Dashboard Header) ───────────────────────────────────────── */

.ent-hero {
  padding: var(--s-8) 0 var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(0,229,160,0.04) 0%, transparent 100%);
}

.ent-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-6);
}

.ent-hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ent-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
}

.ent-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 6px var(--color-green-glow);
  flex-shrink: 0;
}

.ent-hero__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text-primary);
}

.ent-hero__title em {
  font-style: normal;
  color: var(--color-green);
}

.ent-hero__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 500px;
  line-height: var(--lh-relaxed);
}

.ent-hero__right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* ── Posture Badge ──────────────────────────────────────────────────────────── */

.posture-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-xl);
  border: 1px solid;
  min-width: 120px;
  text-align: center;
}

.posture-badge--READY {
  border-color: var(--border-green);
  background: var(--color-green-bg);
  box-shadow: var(--shadow-green);
}
.posture-badge--PARTIAL {
  border-color: var(--border-yellow);
  background: var(--color-yellow-bg);
}
.posture-badge--DEGRADED {
  border-color: var(--border-yellow);
  background: var(--color-yellow-bg);
}
.posture-badge--BLOCKED {
  border-color: var(--border-red);
  background: var(--color-red-bg);
}
.posture-badge--QUARANTINE_ADVISED {
  border-color: var(--border-red);
  background: var(--color-red-bg);
  box-shadow: var(--shadow-red);
}

.posture-badge__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.posture-badge__state {
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.posture-badge--READY .posture-badge__state { color: var(--color-green); }
.posture-badge--PARTIAL .posture-badge__state { color: var(--color-yellow); }
.posture-badge--DEGRADED .posture-badge__state { color: var(--color-yellow); }
.posture-badge--BLOCKED .posture-badge__state { color: var(--color-red); }
.posture-badge--QUARANTINE_ADVISED .posture-badge__state { color: var(--color-red); }

.posture-badge__score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.6;
}

/* ── KPI Strip ──────────────────────────────────────────────────────────────── */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: border-color var(--t-base);
}

.kpi-card:hover {
  border-color: var(--border-strong);
}

.kpi-card--green { border-left: 3px solid var(--color-green); }
.kpi-card--yellow { border-left: 3px solid var(--color-yellow); }
.kpi-card--blue { border-left: 3px solid var(--color-blue); }
.kpi-card--purple { border-left: 3px solid var(--color-purple); }
.kpi-card--slate { border-left: 3px solid var(--color-slate); }

.kpi-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}

.kpi-card__sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── Subsystem Grid ─────────────────────────────────────────────────────────── */

.subsystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}

.subsystem-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  transition: border-color var(--t-base), background var(--t-base);
}

.subsystem-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.subsystem-card--absent {
  opacity: 0.45;
  border-style: dashed;
}

.subsystem-card__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.subsystem-card__indicator--present { background: var(--color-green); box-shadow: 0 0 4px var(--color-green-glow); }
.subsystem-card__indicator--absent  { background: var(--text-muted); }
.subsystem-card__indicator--core    { background: var(--color-green); box-shadow: 0 0 8px var(--color-green-glow); }

.subsystem-card__body {
  flex: 1;
  min-width: 0;
}

.subsystem-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

.subsystem-card__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subsystem-card__phase {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.subsystem-card__path {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subsystem-card__badges {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

/* ── Tier Badge ─────────────────────────────────────────────────────────────── */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid;
}

.tier-badge--full     { color: var(--color-green);  border-color: var(--border-green);  background: var(--color-green-bg); }
.tier-badge--partial  { color: var(--color-yellow); border-color: var(--border-yellow); background: var(--color-yellow-bg); }
.tier-badge--minimal  { color: var(--color-yellow); border-color: var(--border-yellow); background: var(--color-yellow-bg); }
.tier-badge--none     { color: var(--color-red);    border-color: var(--border-red);    background: var(--color-red-bg); }

/* ── Topology Badge ─────────────────────────────────────────────────────────── */

.topo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-default);
  background: var(--bg-overlay);
  color: var(--text-secondary);
}

.topo-badge--primary {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: var(--color-blue-bg);
}

/* ── TVAM Chain Visualization ───────────────────────────────────────────────── */

.tvam-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tvam-node {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
}

.tvam-node__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.tvam-node__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
  margin-top: 14px;
}

.tvam-node__dot--present { border-color: var(--color-green); background: var(--color-green); box-shadow: 0 0 6px var(--color-green-glow); }
.tvam-node__dot--absent  { border-color: var(--text-muted);  background: transparent; }

.tvam-node__line {
  flex: 1;
  width: 1px;
  background: var(--border-default);
  margin: 2px 0;
}

.tvam-node:last-child .tvam-node__line {
  display: none;
}

.tvam-node__content {
  flex: 1;
  padding: var(--s-3) 0 var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.tvam-node:last-child .tvam-node__content {
  border-bottom: none;
}

.tvam-node__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tvam-node__phase {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.tvam-node__hash {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Governance Chain Cards ─────────────────────────────────────────────────── */

.gov-chain {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
}

.gov-chain-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.gov-chain-node__box {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  text-align: center;
  min-width: 100px;
  transition: border-color var(--t-base);
}

.gov-chain-node__box--present { border-color: var(--border-green); }
.gov-chain-node__box--absent  { border-color: var(--border-red); opacity: 0.5; }

.gov-chain-node__phase {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-green);
  letter-spacing: 0.08em;
}

.gov-chain-node__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--s-1);
  white-space: nowrap;
}

.gov-chain-arrow {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 18px;
  padding-top: 24px;
  flex-shrink: 0;
}

/* ── Workspace Hash Block ───────────────────────────────────────────────────── */

.hash-block {
  background: var(--bg-input);
  border: 1px solid var(--border-green);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.hash-block__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
  opacity: 0.7;
}

.hash-block__value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-green);
  word-break: break-all;
  letter-spacing: 0.04em;
}

.hash-block__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ── Score Bar ──────────────────────────────────────────────────────────────── */

.score-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.score-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.score-bar__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.score-bar__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.score-bar__track {
  height: 4px;
  background: var(--bg-overlay);
  border-radius: var(--r-full);
  overflow: hidden;
}

.score-bar__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--color-green);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-bar__fill--yellow { background: var(--color-yellow); }
.score-bar__fill--red    { background: var(--color-red); }

/* ── Bundle Cards ───────────────────────────────────────────────────────────── */

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}

.bundle-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.bundle-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.bundle-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.bundle-card__audience {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.bundle-card__type {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.bundle-card__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.bundle-card__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.bundle-section-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text-muted);
}

/* ── Posture Dimensions Table ───────────────────────────────────────────────── */

.dimension-table {
  width: 100%;
  border-collapse: collapse;
}

.dimension-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.dimension-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  vertical-align: middle;
}

.dimension-table tr:last-child td {
  border-bottom: none;
}

.dimension-table .dim-name {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.dimension-table .dim-val {
  color: var(--text-secondary);
}

.dimension-table .dim-score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
  white-space: nowrap;
}

.dimension-table .dim-bar {
  width: 100px;
}

/* ── Invariant Strip ────────────────────────────────────────────────────────── */

.invariant-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-green);
  background: var(--color-green-bg);
  color: var(--color-green);
}

.inv-pill::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}

/* ── Advisory Banner ────────────────────────────────────────────────────────── */

.advisory-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-yellow);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.advisory-banner__icon {
  color: var(--color-yellow);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  background: var(--color-yellow-bg);
  border: 1px solid var(--border-yellow);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* ── Feature Grid ───────────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-base);
}

.feature-card:hover { border-color: var(--border-strong); }

.feature-card__icon {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-black);
  color: var(--color-green);
  letter-spacing: -0.05em;
}

.feature-card__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.feature-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ── Info Row ───────────────────────────────────────────────────────────────── */

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.info-row:last-child { border-bottom: none; }

.info-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-row__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-align: right;
}

.info-row__value--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-green);
  letter-spacing: 0.04em;
}

/* ── Two-column layout ─────────────────────────────────────────────────────── */

.ent-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

.ent-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 900px) {
  .ent-two-col   { grid-template-columns: 1fr; }
  .ent-three-col { grid-template-columns: 1fr; }
}

/* ── Card ───────────────────────────────────────────────────────────────────── */

.ent-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}

.ent-card__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Contact / CTA ─────────────────────────────────────────────────────────── */

.ent-cta {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border-green);
  border-radius: var(--r-2xl);
  padding: var(--s-12) var(--s-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.ent-cta__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
}

.ent-cta__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.ent-cta__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 480px;
  line-height: var(--lh-relaxed);
}

.ent-cta__email {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-green);
  text-decoration: none;
  border-bottom: 1px solid var(--border-green);
  padding-bottom: 2px;
  transition: color var(--t-base), border-color var(--t-base);
}

.ent-cta__email:hover {
  color: var(--color-green-dim);
  border-color: var(--color-green-dim);
}

/* ── Responsive adjustments ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ent-hero__inner { flex-direction: column; align-items: flex-start; }
  .ent-hero__right { flex-direction: row; width: 100%; }
  .kpi-strip       { grid-template-columns: repeat(2, 1fr); }
  .gov-chain       { flex-direction: column; }
  .gov-chain-arrow { transform: rotate(90deg); align-self: center; }
  .bundle-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .subsystem-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Phase 8D — Strategic Partner & Enterprise Demonstration Layer
   ============================================================================= */

/* ── Mode Badge (MSSP / Regulator / AppSec / Developer) ────────────────────── */

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid;
}

.mode-badge--mssp      { color: #7c3aed; background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.3); }
.mode-badge--regulator { color: #d97706; background: rgba(217,119,6,0.08);  border-color: rgba(217,119,6,0.3);  }
.mode-badge--appsec    { color: var(--color-green); background: var(--color-green-bg); border-color: var(--border-green); }
.mode-badge--developer { color: #3b82f6; background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); }
.mode-badge--sovereign { color: #e11d48; background: rgba(225,29,72,0.08);  border-color: rgba(225,29,72,0.3);  }

/* ── Legacy surface banner (extension-era pages) ───────────────────────────── */

.legacy-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}
.legacy-banner__icon { color: #d97706; flex-shrink: 0; font-size: var(--text-sm); margin-top: 1px; }
.legacy-banner strong { color: #d97706; font-weight: var(--fw-semibold); }
.legacy-banner a { color: var(--color-green); }

/* ── Mode Card Grid (Partner Overview 2x2) ──────────────────────────────────── */

.mode-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.mode-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2xl);
  padding: 3rem 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  text-decoration: none;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: pointer;
}

.mode-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.mode-card--mssp:hover      { border-color: rgba(124,58,237,0.4); }
.mode-card--regulator:hover { border-color: rgba(217,119,6,0.4); }
.mode-card--appsec:hover    { border-color: var(--border-green); }
.mode-card--developer:hover { border-color: rgba(59,130,246,0.4); }
.mode-card--sovereign:hover { border-color: rgba(225,29,72,0.4); }

.mode-card__icon {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  line-height: 1;
}

.mode-card__icon--mssp      { color: #7c3aed; }
.mode-card__icon--regulator { color: #d97706; }
.mode-card__icon--appsec    { color: var(--color-green); }
.mode-card__icon--developer { color: #3b82f6; }
.mode-card__icon--sovereign { color: #e11d48; }

.mode-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.mode-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.mode-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
}

/* ── Incident Card (SOC / AppSec Queue) ─────────────────────────────────────── */

.incident-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.incident-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--t-base);
}

.incident-card--block  { border-left-color: var(--color-red); }
.incident-card--high   { border-left-color: var(--color-yellow); }
.incident-card--medium { border-left-color: #d97706; }

.incident-card__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.incident-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  flex: 1;
}

.incident-card__meta {
  display: flex;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.incident-card__snippet {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  color: var(--color-red);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Severity Badge ─────────────────────────────────────────────────────────── */

.sev-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  border: 1px solid;
}

.sev-badge--block  { color: var(--color-red);    background: var(--color-red-bg);    border-color: var(--border-red);    }
.sev-badge--high   { color: var(--color-yellow);  background: var(--color-yellow-bg); border-color: var(--border-yellow); }
.sev-badge--medium { color: #d97706;              background: rgba(217,119,6,0.08);   border-color: rgba(217,119,6,0.3);  }
.sev-badge--low    { color: var(--text-muted);    background: var(--bg-overlay);      border-color: var(--border-subtle); }

/* ── Client Row (MSSP multi-tenant table) ───────────────────────────────────── */

.client-table {
  width: 100%;
  border-collapse: collapse;
}

.client-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-default);
}

.client-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.client-table tr:last-child td { border-bottom: none; }
.client-table tr:hover td { background: var(--bg-overlay); }

.client-name {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.client-sector {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Workflow Step (guided flows) ───────────────────────────────────────────── */

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.workflow-step {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.workflow-step:last-child { border-bottom: none; }

.workflow-step__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-green-bg);
  border: 1px solid var(--border-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-green);
}

.workflow-step__body { flex: 1; }

.workflow-step__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--s-1);
}

.workflow-step__cmd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-green);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  margin: var(--s-1) 0;
  overflow-x: auto;
}

.workflow-step__note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--s-1);
}

/* ── Deployment Model Card ──────────────────────────────────────────────────── */

.deployment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
}

.deployment-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.deployment-card--active {
  border-color: var(--border-green);
  background: linear-gradient(135deg, var(--bg-surface), rgba(0,229,160,0.03));
}

.deployment-card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
}

.deployment-card__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.deployment-card__desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ── Not-List (what VerifAIer is NOT) ───────────────────────────────────────── */

.not-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.not-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.not-list li::before {
  content: 'x';
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-red);
  background: var(--color-red-bg);
  border: 1px solid var(--border-red);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Taint Chain Visual ─────────────────────────────────────────────────────── */

.taint-chain-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-x: auto;
  padding: var(--s-2) 0;
}

.taint-source {
  background: var(--color-yellow-bg);
  border: 1px solid var(--border-yellow);
  border-radius: var(--r-md);
  padding: 2px 8px;
  color: var(--color-yellow);
  white-space: nowrap;
}

.taint-sink {
  background: var(--color-red-bg);
  border: 1px solid var(--border-red);
  border-radius: var(--r-md);
  padding: 2px 8px;
  color: var(--color-red);
  white-space: nowrap;
}

.taint-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Gate Status Row ────────────────────────────────────────────────────────── */

.gate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.gate-row + .gate-row { margin-top: var(--s-2); }

.gate-row--block { border-color: var(--border-red);    background: linear-gradient(90deg, rgba(239,68,68,0.04), var(--bg-surface)); }
.gate-row--pass  { border-color: var(--border-green);  background: linear-gradient(90deg, rgba(0,229,160,0.04), var(--bg-surface)); }
.gate-row--warn  { border-color: var(--border-yellow); background: linear-gradient(90deg, rgba(234,179,8,0.04), var(--bg-surface)); }

.gate-row__ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
}

.gate-row__team {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.gate-row__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* ── 8D responsive ──────────────────────────────────────────────────────────── */

/* 3-column grid variant (partner_overview) with proper desktop → tablet → mobile */
.mode-card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
  .mode-card-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .mode-card-grid--3col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .mode-card-grid { grid-template-columns: 1fr; }
  .deployment-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .deployment-grid { grid-template-columns: 1fr; }
  .taint-chain-row { flex-direction: column; align-items: flex-start; }
}