/* demo-shared.css — CSS foundation for all T3 step demos
   Used by: demo-travelagent.html, demo-patientrecords.html,
            demo-kyc.html, demo-crossagency.html              */

/* ── ROOT TOKENS ──────────────────────────────────────────── */
:root {
  /* Carbon White Theme */
  --cds-background: #ffffff;
  --cds-background-hover: #e8e8e8;
  --cds-background-active: #c6c6c6;
  --cds-background-inverse: #393939;
  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #ffffff;
  --cds-layer-hover-01: #e8e8e8;
  --cds-layer-active-01: #c6c6c6;
  --cds-layer-selected-01: #e0e0e0;
  --cds-border-subtle-00: #e0e0e0;
  --cds-border-subtle-01: #c6c6c6;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-interactive: #0f62fe;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-text-disabled: #c6c6c6;
  --cds-interactive: #0f62fe;
  --cds-focus: #0f62fe;
  --cds-support-error: #da1e28;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-caution-major: #ff832b;
  --cds-support-caution-minor: #f1c21b;
  --cds-notification-background-warning: #fdf6dd;
  --cds-notification-background-info: #edf5ff;
  --cds-notification-background-error: #fff1f1;
  --cds-button-primary: #0f62fe;
  --cds-button-primary-hover: #0050e6;
  --cds-button-secondary: #393939;
  --cds-button-secondary-hover: #474747;
  --cds-button-disabled: #c6c6c6;
  --cds-header-background: #161616;
  --cds-header-text: #f4f4f4;
  --cds-header-hover: #2c2c2c;
  --cds-header-active: #393939;
  --cds-size-sm: 32px;
  --cds-size-md: 40px;
  --cds-size-lg: 48px;
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 12px;
  --cds-spacing-05: 16px;
  --cds-spacing-06: 24px;
  --cds-spacing-07: 32px;
  /* T3 Brand */
  --t3-accent: #2B5F4A;
  --t3-accent-soft: #DCE8E0;
  --t3-green: #4A8B6E;
  --t3-green-deep: #1F4A38;
  --t3-amber: #B87A2A;
  --t3-red: #B53C2B;
  /* T3N Dark */
  --dark-bg: #0A0E16;
  --dark-bg-2: #121826;
  --dark-paper: #1A2236;
  --dark-text: #E6E4DC;
  --dark-text-2: #8E94A8;
  --dark-border: #2A3550;
  --tee-glow: rgba(74, 139, 110, 0.55);
  --tee-glow-soft: rgba(74, 139, 110, 0.18);
  --code-green: #7EC894;
  --code-cyan: #6BC0D9;
  --code-amber: #E6B16B;
  --code-purple: #B49BD9;
  --code-dim: #6A7591;
  /* iOS system tokens (used by travel demo phone frame) */
  --ios-bg: #F2F2F7;
  --ios-card: #FFFFFF;
  --ios-label: #000000;
  --ios-label-2: #3C3C43;
  --ios-label-3: #8E8E93;
  --ios-separator: rgba(60, 60, 67, 0.18);
  --ios-fill: rgba(120, 120, 128, 0.12);
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  --ios-orange: #FF9500;
  --ios-red: #FF3B30;
  --ios-phone-body: #1C1C1E;
  --t3-tint: #2B5F4A;
}

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; height: 100%; }
body {
  height: 100%;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0rem;
  line-height: 1.42857;
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-rows: var(--cds-size-lg) auto 1fr 76px;
  height: 100vh;
}

/* ── CARBON HEADER ────────────────────────────────────────── */
.cds--header {
  display: flex; align-items: center;
  height: var(--cds-size-lg);
  background: var(--cds-header-background);
  border-bottom: 1px solid #393939; z-index: 20;
}
.cds--header__name {
  display: flex; align-items: center; height: 100%;
  padding: 0 var(--cds-spacing-05);
  color: var(--cds-header-text);
  font-size: 1.2rem; font-weight: 600;
  text-decoration: none;
  border-left: 1px solid #393939; flex-shrink: 0;
}
.cds--header__name .sep { font-weight: 300; color: #8d8d8d; margin: 0 var(--cds-spacing-02); }
.cds--header__name .sub { font-weight: 300; color: white; }
.header-center {
  display: flex; align-items: center; gap: 14px;
  flex: 1; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem; color: #8d8d8d; letter-spacing: 0.05em;
}
.header-center .step-dots { display: flex; gap: 6px; }
.header-center .step-dot {
  width: 22px; height: 4px; background: #393939;
  border-radius: 0; transition: background 0.3s;
}
.header-center .step-dot.done { background: var(--t3-accent); }
.header-center .step-dot.active { background: var(--cds-header-text); }
.cds--header__global { display: flex; align-items: center; height: 100%; }
.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 var(--cds-spacing-05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #8d8d8d; border-left: 1px solid #393939; white-space: nowrap;
}
.mode-pill .dot { width: 6px; height: 6px; background: var(--t3-green); }
.mode-pill.t3n { color: #B5E2C7; }
.mode-pill.t3n .dot { background: #7EC894; box-shadow: 0 0 8px #7EC894; }

/* ── BANNER ───────────────────────────────────────────────── */
.illustration-banner {
  display: flex; align-items: flex-start; gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-03) var(--cds-spacing-07);
  background: var(--cds-notification-background-warning);
  border-bottom: 1px solid var(--cds-support-caution-minor);
  border-left: 3px solid var(--cds-support-caution-minor);
  font-size: 1.0rem; color: var(--cds-text-secondary); line-height: 1.42857; z-index: 19;
}
.illustration-banner .icon { flex-shrink: 0; font-size: 1.0rem; color: #5d4a00; margin-top: 1px; font-weight: 700; }
.illustration-banner strong { color: var(--cds-text-primary); font-weight: 600; }

/* ── STAGE ────────────────────────────────────────────────── */
.stage { position: relative; overflow: hidden; }
.agent-view {
  display: grid;
  grid-template-columns: minmax(300px, 26%) minmax(300px, 26%) 1fr;
  gap: 16px; padding: 18px; height: 100%;
  background: var(--cds-layer-01);
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.agent-view.dimmed { opacity: 0; filter: blur(8px); pointer-events: none; }

/* ── AGENT PANELS ─────────────────────────────────────────── */
.agent-panel {
  background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-00);
  padding: var(--cds-spacing-05);
  display: flex; flex-direction: column; gap: var(--cds-spacing-04);
  overflow-y: auto;
}
.agent-header { display: flex; align-items: center; gap: 14px; }
.agent-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #2B5F4A, #4A8B6E);
  display: grid; place-items: center;
  color: white; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
}
.agent-name { font-weight: 600; font-size: 1.1rem; }
.agent-did { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; color: var(--cds-text-helper); margin-top: 2px; }
.panel-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.panel-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cds-text-helper); font-weight: 500; padding-bottom: 4px;
  border-bottom: 1px solid var(--cds-border-subtle-00);
}

/* ── VC CARD ──────────────────────────────────────────────── */
.vc-card {
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-00);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
}
.vc-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, var(--t3-accent-soft), transparent 70%);
}
.vc-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.0rem; }
.vc-key { color: var(--cds-text-secondary); }
.vc-val { font-weight: 500; font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; }
.vc-role-chip {
  display: inline-flex; align-items: center; padding: 4px 10px;
  background: var(--t3-green-deep); color: white; font-size: 1.0rem; font-weight: 500;
}
.vc-foot {
  border-top: 1px dashed var(--cds-border-strong-01); padding-top: 8px;
  font-size: 0.9rem; color: var(--cds-text-helper);
}

/* ── CURRENT ACTION ───────────────────────────────────────── */
.current-action {
  background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-00);
  border-left: 4px solid var(--t3-accent);
  padding: 12px 14px; font-size: 1.0rem; font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 52px; line-height: 1.45;
}
.current-action .pulse {
  width: 8px; height: 8px; background: var(--t3-accent);
  border-radius: 50%; margin-top: 4px;
  animation: pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}
.current-action.idle .pulse { background: var(--cds-text-helper); animation: none; }
.current-action.done .pulse { background: var(--cds-support-success); animation: none; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }

/* ── AUDIT LOG ────────────────────────────────────────────── */
.audit-log { display: flex; flex-direction: column; gap: 4px; }
.audit-entry {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.0rem; color: var(--cds-text-secondary); padding: 4px 0;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.4s, transform 0.4s; line-height: 1.4;
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.audit-entry:last-child { border-bottom: none; }
.audit-entry.visible { opacity: 1; transform: translateX(0); }
.audit-check {
  width: 16px; height: 16px; background: var(--t3-accent-soft);
  color: var(--t3-accent); display: grid; place-items: center;
  font-size: 0.9rem; font-weight: 700; flex-shrink: 0;
}
.audit-time {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem;
  color: var(--cds-text-helper); margin-left: auto; flex-shrink: 0;
}

/* ── T3N RECEIPT ──────────────────────────────────────────── */
.receipt-card {
  background: var(--dark-bg); padding: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  color: var(--dark-text); line-height: 1.75;
  opacity: 0; max-height: 0;
  transition: opacity 0.5s, max-height 0.5s; overflow: hidden; white-space: pre-wrap;
}
.receipt-card.visible { opacity: 1; max-height: 260px; }
.receipt-card .k { color: var(--code-cyan); }
.receipt-card .s { color: var(--code-amber); }
.receipt-card .n { color: var(--code-purple); }
.receipt-card .ok { color: var(--code-green); }
.receipt-card .flag { color: #ff6b6b; }

/* ── EXCHANGE CARDS ───────────────────────────────────────── */
.exchange-card {
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-00);
  border-left: 3px solid var(--cds-border-strong-01); padding: 10px 12px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.4s, transform 0.4s, border-color 0.4s;
}
.exchange-card.visible { opacity: 1; transform: translateX(0); }
.exchange-card.status-encrypted { border-left-color: var(--cds-interactive); }
.exchange-card.status-verified  { border-left-color: var(--cds-support-success); }
.exchange-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.exchange-card-name { font-size: 0.9rem; font-weight: 600; }
.exchange-card-status {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px;
}
.status-pill-pending { background: var(--cds-layer-01); color: var(--cds-text-helper); border: 1px solid var(--cds-border-subtle-01); }
.status-pill-enc { background: #d0e2ff; color: #0043ce; }
.status-pill-ok  { background: #a7f0ba; color: #0e6027; }
.exchange-fields {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  color: var(--cds-text-helper); line-height: 1.6;
}
.exchange-fields .ph { color: #FFB36A; background-color: white; }

/* ── ARCH PANEL ───────────────────────────────────────────── */
.arch-panel { padding: 8px; background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-00); }
.arch-app-stack { display: flex; flex-direction: column; gap: 6px; }
.arch-layer {
  padding: 8px 12px; background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-00);
  transition: all 0.4s ease; opacity: 0.5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.arch-layer.active {
  opacity: 1; background: linear-gradient(180deg, #FAFEFC, var(--cds-background));
  border-color: var(--t3-accent); box-shadow: 0 1px 6px rgba(43,95,74,0.18);
}
.arch-name { font-size: 1.0rem; font-weight: 600; color: var(--cds-text-secondary); }
.arch-layer.active .arch-name { color: var(--t3-accent); }
.arch-tag { font-size: 1.0rem; font-family: 'IBM Plex Mono', monospace; color: var(--cds-text-helper); text-transform: uppercase; letter-spacing: 0.06em; }
.arch-runs-on {
  font-size: 0.8rem; font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--cds-text-helper); text-align: center; padding: 2px 0;
  position: relative; margin: 4px 0;
}
.arch-runs-on::before,.arch-runs-on::after { content:''; position:absolute; top:50%; width:28%; height:1px; background:var(--cds-border-subtle-00); }
.arch-runs-on::before{left:8px} .arch-runs-on::after{right:8px}
.arch-foundation { background: var(--dark-bg); border-color: var(--dark-border); }
.arch-foundation .arch-name { color: var(--dark-text); }
.arch-foundation .arch-tag { color: var(--code-cyan); opacity: 0.65; }
.arch-foundation.active { border-color: var(--code-green); box-shadow: 0 1px 6px rgba(126,200,148,0.3); }
.arch-foundation.active .arch-name { color: var(--code-green); }
.arch-foundation.active .arch-tag { opacity: 1; }

/* ── PLATFORM (right-panel browser chrome) ────────────────── */
.platform {
  background: var(--cds-background); border: 1px solid var(--cds-border-subtle-00);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.platform-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01); flex-shrink: 0;
}
.chrome-dots { display: flex; gap: 6px; }
.chrome-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cds-border-strong-01); }
.chrome-url {
  flex: 1; background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-00); border-radius: 999px;
  padding: 3px 12px; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; color: var(--cds-text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.chrome-url::before { content: '⌂'; color: var(--t3-accent); }

/* EMR / data-platform shell */
.emr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--cds-border-subtle-00); flex-shrink: 0;
}
.emr-brand { font-size: 1.0rem; font-weight: 700; color: var(--cds-text-primary); letter-spacing: -0.02em; }
.emr-brand .accent { color: var(--t3-accent); }
.emr-tabs { display: flex; gap: 0; }
.emr-tab {
  padding: 6px 14px; font-size: 1.0rem; color: var(--cds-text-secondary);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.emr-tab.active { color: var(--t3-accent); border-bottom-color: var(--t3-accent); font-weight: 500; }
.emr-body { flex: 1; overflow-y: auto; position: relative; }

/* Scenes */
.scene { display: none; height: 100%; flex-direction: column; min-height: 0; }
.scene.active { display: flex; animation: fadeUp 0.5s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Splash scene */
.emr-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; padding: 40px; gap: 16px;
}
.emr-splash-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--t3-green-deep), var(--t3-green));
  display: grid; place-items: center; color: white; font-size: 0.9rem; margin-bottom: 4px;
}
.emr-splash-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--t3-accent);
}
.emr-splash-title { font-size: 1.2rem; font-weight: 600; color: var(--cds-text-primary); max-width: 440px; }
.emr-splash-sub { font-size: 1.0rem; color: var(--cds-text-secondary); max-width: 75%; line-height: 1.5; }
.emr-splash-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.emr-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  padding: 3px 10px; background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-helper);
}

/* ── PROVIDER CARDS (shared base) ─────────────────────────── */
.provider-grid { display: grid; gap: 12px; padding: 16px 20px; flex-shrink: 0; }
.source-grid   { display: grid; gap: 12px; padding: 16px 20px; flex-shrink: 0; }
.provider-card { border: 1px solid var(--cds-border-subtle-00); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; }
.prov-head {
  padding: 8px 10px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.prov-name { font-size: 0.9rem; font-weight: 600; }
.prov-badge { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; font-weight: 700; color: white; padding: 2px 6px; }
.prov-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.prov-field {
  font-size: 1.0rem; color: var(--cds-text-secondary);
  display: flex; align-items: center; gap: 6px; line-height: 1.4;
}
.prov-field::before { content: '·'; color: var(--cds-text-helper); font-weight: 700; flex-shrink: 0; }
.prov-status {
  padding: 6px 10px; border-top: 1px solid var(--cds-border-subtle-00);
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  color: var(--cds-text-helper); display: flex; align-items: center; gap: 6px;
}
.prov-status .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--cds-border-strong-01); flex-shrink: 0; }
.prov-status.querying .pdot { background: var(--t3-amber); animation: pulse 1.2s infinite; }
.prov-status.received .pdot { background: var(--cds-interactive); animation: none; }
.prov-status.received { color: var(--cds-interactive); }
.prov-status.verified .pdot { background: var(--cds-support-success); animation: none; }
.prov-status.verified { color: var(--cds-support-success); }

/* ── CONSENT SCENE ────────────────────────────────────────── */
.consent-view { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.consent-heading { font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; }
.consent-sub { font-size: 1.0rem; color: var(--cds-text-secondary); line-height: 1.5; }
.consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
  opacity: 0; transform: translateY(4px); transition: all 0.4s;
}
.consent-row.visible { opacity: 1; transform: translateY(0); }
.consent-check {
  width: 20px; height: 20px; background: var(--cds-support-success);
  color: white; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.consent-prov { font-size: 1.0rem; font-weight: 600; }
.consent-meta { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; color: var(--cds-text-helper); margin-top: 2px; }
.consent-scope { font-size: 1.0rem; color: var(--cds-text-secondary); margin-top: 3px; }
.consent-all-clear {
  padding: 10px 12px; background: #defbe6; border: 1px solid var(--cds-support-success);
  display: flex; align-items: center; gap: 10px;
  font-size: 1.0rem; font-weight: 500; color: #0e6027;
  opacity: 0; transition: opacity 0.5s;
}
.consent-all-clear.visible { opacity: 1; }
.consent-all-clear::before { content: '✓'; font-size: 0.8rem; font-weight: 700; }

/* ── TEE PROCESSING ───────────────────────────────────────── */
.tee-processing {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px; gap: 16px;
}
.tee-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--t3-accent-soft);
  border-top-color: var(--t3-accent);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tee-proc-title { font-size: 1.2rem; font-weight: 600; }
.tee-proc-sub { font-size: 1.0rem; color: var(--cds-text-secondary); max-width: 75%; line-height: 1.5; }
.tee-proc-chips { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 75%; }
.tee-proc-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; color: var(--cds-text-helper);
}
.tee-proc-chip .badge { background: var(--dark-bg); color: var(--code-green); padding: 2px 6px; font-size: 0.9rem; }

/* ── RISK / FLAG / CLEARED (shared base) ──────────────────── */
.risk-section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--cds-text-helper);
  padding-bottom: 4px; border-bottom: 1px solid var(--cds-border-subtle-00);
}
.flag-item {
  padding: 10px 12px; border: 1px solid var(--cds-border-subtle-00);
  border-left: 3px solid var(--cds-border-strong-01);
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.flag-severity {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 6px;
}
.flag-desc { font-size: 1.0rem; color: var(--cds-text-primary); line-height: 1.4; }
.flag-note { font-size: 1.0rem; color: var(--cds-text-secondary); font-style: italic; }
.cleared-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-layer-01);
}
.cleared-check { color: var(--cds-support-success); font-size: 0.8rem; font-weight: 700; margin-top: 1px; flex-shrink: 0; }
.cleared-text { font-size: 1.0rem; color: var(--cds-text-secondary); }

/* ── SEALED SCENE ─────────────────────────────────────────── */
.sealed-view {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px; gap: 16px;
}
.sealed-check {
  width: 56px; height: 56px; background: var(--t3-accent);
  color: white; display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(43,95,74,0.3);
  animation: pop 0.6s ease;
}
@keyframes pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.sealed-title { font-size: 1.2rem; font-weight: 600; }
.sealed-sub { font-size: 1.0rem; color: var(--cds-text-secondary); max-width: 75%; line-height: 1.5; }
.sealed-hash {
  padding: 10px 16px; background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-00);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem;
  color: var(--cds-text-secondary); text-align: left; width: 100%; max-width: 75%;
}
.sealed-hash .k { color: var(--cds-text-helper); display: block; margin-bottom: 2px; font-size: 1.0rem; text-transform: uppercase; letter-spacing: 0.1em; }
.sealed-hash .v { color: var(--cds-text-primary); }

/* ── T3N TAKEOVER ─────────────────────────────────────────── */
.t3n-stage {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, #131830, var(--dark-bg) 70%);
  color: var(--dark-text); display: none; opacity: 0;
  transition: opacity 0.7s ease; overflow: hidden;
}
.t3n-stage.active { display: block; }
.t3n-stage.visible { opacity: 1; }
.t3n-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,139,110,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,139,110,0.06) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
.t3n-content {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 24px 32px;
}
.t3n-header { display: flex; justify-content: space-between; align-items: flex-start; }
.t3n-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 2.0rem; font-weight: 500; }
.t3n-title .accent { color: var(--code-green); }
.t3n-sub { font-size: 1.2rem; color: var(--dark-text-2); margin-top: 4px; max-width: 520px; line-height: 1.5; }
.t3n-attest {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--code-green);
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  border: 1px solid rgba(126,200,148,0.3); border-radius: 999px;
  background: rgba(126,200,148,0.06);
}
.t3n-attest .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--code-green);
  box-shadow: 0 0 10px var(--code-green); animation: pulse 1.6s ease-in-out infinite;
}
.t3n-main {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 20px; align-items: center; padding: 16px 0;
}
.t3n-incoming {
  padding: 14px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--dark-border); border-radius: 8px;
}
.t3n-section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--dark-text-2); margin-bottom: 8px;
}
.t3n-pkt {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  line-height: 1.7; color: var(--dark-text); white-space: pre-wrap;
}
.t3n-pkt .ph { color: #FFB36A; }
.t3n-pkt .k  { color: var(--code-cyan); }
.t3n-pkt .s  { color: var(--code-amber); }
.enclave-wrap { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.enclave {
  height: 340px; border-radius: 20px;
  background: radial-gradient(circle at center, rgba(74,139,110,0.18), rgba(31,74,56,0.05));
  border: 1.5px solid rgba(126,200,148,0.35);
  display: flex; flex-direction: column; padding: 18px; position: relative;
  box-shadow: 0 0 60px var(--tee-glow-soft), inset 0 0 40px rgba(126,200,148,0.04);
  overflow: hidden;
}
.enclave::before {
  content: ''; position: absolute; inset: 8px; border-radius: 14px;
  border: 1px dashed rgba(126,200,148,0.18); pointer-events: none;
}
.enclave-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--code-green);
}
.enclave-label .seal { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--dark-text-2); }
.enclave-seal-dot { width: 6px; height: 6px; background: var(--code-green); border-radius: 50%; box-shadow: 0 0 8px var(--code-green); }
.wasm-runtime {
  flex: 1; margin-top: 12px; background: rgba(0,0,0,0.3); border-radius: 8px;
  padding: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  line-height: 1.8; overflow: hidden; position: relative;
}
.wasm-runtime .ts { color: var(--code-dim); margin-right: 8px; }
.wasm-line { opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.wasm-line.visible { opacity: 1; transform: translateY(0); }
.wasm-line .k  { color: var(--code-cyan); }
.wasm-line .f  { color: var(--code-green); }
.wasm-line .s  { color: var(--code-amber); }
.wasm-line .ok { color: var(--code-green); }
.wasm-line .redact {
  background: rgba(180,155,217,0.18); border: 1px dashed rgba(180,155,217,0.5);
  padding: 0 4px; border-radius: 3px; color: var(--code-purple);
}
.wasm-line .warn { color: #ff6b6b; }
.t3n-outputs { display: flex; flex-direction: column; gap: 10px; }
.output-card {
  padding: 12px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--dark-border); border-radius: 8px;
  opacity: 0.3; transition: opacity 0.5s, border-color 0.5s;
}
.output-card.active { opacity: 1; border-color: rgba(126,200,148,0.3); }
.output-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.output-card .name { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--code-green); }
.output-card .body { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; color: var(--dark-text); line-height: 1.6; }
.output-card .body .k  { color: var(--code-cyan); }
.output-card .body .s  { color: var(--code-amber); }
.output-card .body .ok { color: var(--code-green); }
.output-card .body .warn { color: #ff6b6b; }
.output-card .hash { font-size: 1.0rem; color: var(--dark-text-2); word-break: break-all; }
.t3n-flow { position: absolute; top: 50%; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 0; }
.flow-line {
  position: absolute; height: 1px;
  background: linear-gradient(90deg, transparent, var(--code-green), transparent);
  opacity: 0; transition: opacity 0.5s;
}
.flow-line.visible { opacity: 0.5; }
.t3n-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem;
  color: var(--dark-text-2); text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── COMPLETE SUMMARY ─────────────────────────────────────── */
.complete {
  height: 100%; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 40px; gap: 20px;
}
.complete-check {
  width: 56px; height: 56px; background: var(--t3-accent); color: white;
  display: grid; place-items: center; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(43,95,74,0.3); animation: pop 0.6s ease;
}
.complete h2 { font-size: 1.0rem; font-weight: 600; }
.complete p { font-size: 0.9rem; color: var(--cds-text-secondary); max-width: 500px; line-height: 1.5; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%; max-width: 820px; text-align: left; }
.summary-block { padding: 14px; border: 1px solid var(--cds-border-subtle-00); background: var(--cds-background); }
.summary-block.contrast { background: var(--t3-accent-soft); border-color: var(--t3-accent); }
.summary-block.t3n { background: var(--dark-bg); border-color: var(--dark-border); }
.summary-block h4 { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cds-text-helper); margin-bottom: 8px; }
.summary-block.contrast h4 { color: var(--t3-accent); }
.summary-block.t3n h4 { color: var(--code-green); }
.summary-block ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.summary-block li { font-size: 0.8rem; color: var(--cds-text-secondary); display: flex; align-items: flex-start; gap: 6px; }
.summary-block li::before { content: '·'; font-weight: 700; color: var(--t3-accent); }
.summary-block.t3n li { color: var(--dark-text-2); }
.summary-block.t3n li::before { content: '◇'; color: var(--code-green); }

/* ── CONTROLS ─────────────────────────────────────────────── */
.controls {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: stretch; border-top: 1px solid var(--cds-border-subtle-00);
  background: var(--cds-background); z-index: 20;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cds-spacing-03); height: 76px; padding: 0 var(--cds-spacing-06);
  border: none; background: var(--cds-background);
  font-size: 1.0rem; font-family: inherit; color: var(--cds-text-primary);
  cursor: pointer; transition: background 0.1s; font-weight: 400;
  letter-spacing: 0.16px; white-space: nowrap; min-width: 120px;
}
.btn:first-child { border-right: 1px solid var(--cds-border-subtle-00); }
.btn:hover:not(:disabled) { background: var(--cds-layer-hover-01); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: var(--cds-button-primary); color: var(--cds-text-on-color);
  border-left: 1px solid var(--cds-border-subtle-00);
}
.btn.primary:hover:not(:disabled) { background: var(--cds-button-primary-hover); }
.caption {
  display: flex; flex-direction: column; gap: 3px;
  text-align: center; margin: 0 auto;
  padding: 12px var(--cds-spacing-05); justify-content: center;
}
.caption-step { font-family: 'IBM Plex Mono', monospace; font-size: 1.0rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cds-text-helper); }
.caption-text { font-size: 1.2rem; color: var(--cds-text-primary); line-height: 1.45; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cds-layer-01); }
::-webkit-scrollbar-thumb { background: var(--cds-border-strong-01); }
::-webkit-scrollbar-thumb:hover { background: #525252; }

/* ── MOBILE TAB BAR ───────────────────────────────────────── */
.mobile-tab-bar {
  display: none;
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle-00);
  flex-shrink: 0;
}
.mob-tab {
  flex: 1; height: 44px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.8rem; font-weight: 500;
  color: var(--cds-text-secondary);
  cursor: pointer; transition: color 0.1s, border-color 0.1s;
  letter-spacing: 0.16px;
}
.mob-tab.active { color: var(--cds-interactive); border-bottom-color: var(--cds-interactive); font-weight: 600; }
.mob-tab:hover:not(.active) { background: var(--cds-layer-hover-01); }

/* ── MOBILE: 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 13px; }
  body { overflow: auto; }

  .app {
    grid-template-rows: var(--cds-size-lg) auto auto 1fr auto;
    height: auto; min-height: 100vh;
  }

  .mobile-tab-bar { display: flex; order: 3; }
  .stage { order: 4; overflow: visible; height: auto; min-height: 0; }

  .agent-view {
    display: block !important;
    padding: 12px; height: auto !important; min-height: 60vh;
  }

  /* Hide all panels by default */
  .agent-view > #panel1,
  .agent-view > #panel2,
  .agent-view > .phone-stage,
  .agent-view > .platform {
    display: none !important;
  }

  /* Show panel based on data-panel attribute */
  .agent-view[data-panel="agent"]    > #panel1      { display: flex !important; }
  .agent-view[data-panel="actions"]  > #panel2      { display: flex !important; }
  .agent-view[data-panel="phone"]    > .phone-stage { display: flex !important; }
  .agent-view[data-panel="platform"] > .platform    { display: flex !important; }

  /* Default: show agent panel */
  .agent-view:not([data-panel]) > #panel1 { display: flex !important; }

  #panel1, #panel2 { width: 100% !important; min-height: 60vh; overflow-y: auto; }

  .phone-stage { width: 100% !important; padding: 12px 0; min-height: 60vh; }

  /* Platform panel on mobile */
  .platform { min-height: 60vh; }

  /* T3N overlay */
  .t3n-stage { position: fixed; z-index: 100; }
  .t3n-main { grid-template-columns: 1fr; gap: 16px; }
  .t3n-incoming, .t3n-outputs { display: none; }
  .enclave-wrap { height: auto; }
  .enclave { height: 280px; }
  .t3n-content { padding: 16px 20px; }
  .t3n-title { font-size: 1.4rem; }
  .t3n-sub { font-size: 0.9rem; }

  /* Controls */
  .controls { order: 5; flex-shrink: 0; position: sticky; bottom: 0; z-index: 50; }
  .btn { height: 60px; font-size: 0.9rem; padding: 0 var(--cds-spacing-04); }
  .caption-text { font-size: 0.85rem; }
  .caption-step { font-size: 0.75rem; }

  /* Header */
  .cds--header__name { font-size: 0.9rem; }
  .header-center { display: none; }
  .mode-pill { font-size: 0.75rem; padding: 0 var(--cds-spacing-03); }

  /* Banner */
  .illustration-banner { padding: var(--cds-spacing-02) var(--cds-spacing-04); font-size: 0.8rem; }

  /* Summary grid */
  .summary-grid { grid-template-columns: 1fr; }

  /* Arch panel */
  .arch-panel { display: none; }
}

/* ── MOBILE: 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 12px; }
  .btn { height: 56px; }
}