/* Museo CPI Portal foundation. Event defines its own tokens and asset entry point. */
.cpi-context-portal {
  --cpi-bg:#07131d;
  --cpi-surface:#0a1924;
  --cpi-surface-raised:#122331;
  --cpi-text:#f6f8fb;
  --cpi-muted:#c4d0dc;
  --cpi-border:#304654;
  --cpi-accent:#ff9d00;
  --cpi-accent-text:#14212a;
  --cpi-success:#38b9ac;
  --cpi-warning:#ffbd59;
  --cpi-error:#ff8787;
  --cpi-focus:#6ddcd0;
  --cpi-space-1:.25rem;
  --cpi-space-2:.5rem;
  --cpi-space-3:.75rem;
  --cpi-space-4:1rem;
  --cpi-space-6:1.5rem;
  --cpi-space-8:2rem;
  --cpi-radius-sm:8px;
  --cpi-radius-md:12px;
  --cpi-radius-lg:23px;
  --cpi-radius-pill:999px;
  --cpi-shadow-card:0 20px 55px #0003;
  --cpi-shadow-soft:0 3px 12px #0002;
  --cpi-font:Arial,Helvetica,sans-serif;
  --cpi-text-base:17px;
  --cpi-heading:clamp(1.7rem,2.65vw,2.5rem);
  --cpi-line-height:1.5;
  --cpi-container:1448px;
  --cpi-duration-fast:180ms;
  --cpi-duration-enter:240ms;
  --cpi-ease:cubic-bezier(.2,.8,.2,1);
  /* Compatibility aliases: existing components migrate without visual churn. */
  --navy:var(--cpi-bg); --panel:var(--cpi-surface); --line:var(--cpi-border);
  --muted:var(--cpi-muted); --orange:var(--cpi-accent); --teal:var(--cpi-success);
}
.cpi-context-portal .cpi-container { width:100%; max-width:var(--cpi-container); margin-inline:auto; padding-inline:var(--cpi-space-4); }
.cpi-context-portal .cpi-card { min-width:0; padding:var(--cpi-space-6); border:1px solid var(--cpi-border); border-radius:var(--cpi-radius-md); background:var(--cpi-surface); box-shadow:var(--cpi-shadow-soft); }
.cpi-context-portal .cpi-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--cpi-space-2); min-height:44px; padding:var(--cpi-space-3) var(--cpi-space-4); border:1px solid var(--cpi-border); border-radius:var(--cpi-radius-sm); background:var(--cpi-surface-raised); color:var(--cpi-text); font:inherit; text-decoration:none; cursor:pointer; }
.cpi-context-portal .cpi-button--primary { background:var(--cpi-accent); color:var(--cpi-accent-text); }
.cpi-context-portal .cpi-badge { display:inline-flex; gap:var(--cpi-space-1); padding:var(--cpi-space-1) var(--cpi-space-2); border:1px solid currentColor; border-radius:var(--cpi-radius-pill); font-size:.8rem; line-height:1.4; }
.cpi-context-portal .cpi-badge--demo { color:var(--cpi-warning); }
.cpi-context-portal .cpi-heading { font-size:var(--cpi-heading); line-height:1.2; overflow-wrap:anywhere; }
.cpi-context-portal .cpi-media { margin:0; overflow:hidden; border-radius:var(--cpi-radius-md); background:var(--cpi-surface-raised); }
.cpi-context-portal .cpi-media img { display:block; max-width:100%; height:auto; }
.cpi-context-portal .cpi-empty { padding:var(--cpi-space-8); color:var(--cpi-muted); text-align:center; overflow-wrap:anywhere; }
.cpi-context-portal .cpi-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cpi-context-portal .cpi-button:focus-visible { outline:3px solid var(--cpi-focus); outline-offset:4px; }
.cpi-context-portal .brand { color:var(--cpi-text); text-decoration:none; line-height:1.1; }
.cpi-context-portal .brand-title { display:block; font-size:20px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.cpi-context-portal .brand-credit { display:block; margin-top:6px; font-size:11px; color:var(--cpi-muted); }
@media (prefers-reduced-motion:reduce) {
  .cpi-context-portal { --cpi-duration-fast:0ms; --cpi-duration-enter:0ms; }
}