/* ------------------------------------------------------------------
   The vendor lockup.

   Loaded on every surface that shows the mark. Deliberately separate from
   panel.css: an instance re-skins its own palette, and none of this moves
   when it does. The mark keeps its colours and its dark ground.
   ------------------------------------------------------------------ */

.ebs-lockup {
  display: inline-block;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .06em;
  color: var(--mark-head, #EDF3F7);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.ebs-lockup em {
  font-style: normal;
  font-weight: 400;
  color: var(--mark-ice, #22D3EE);
  margin-left: 6px;
}
/* height 1.2em on the baseline, so the foundation course locks to the
   letters' baseline and the stack rises above the caps. */
.ebs-emark {
  height: 1.2em;
  width: auto;
  margin-right: .1em;
  vertical-align: baseline;
  display: inline;
}
.ebs-spine { fill: var(--mark-spine, #4F8EF7); }
.ebs-s1,
.ebs-s3    { fill: var(--mark-ice, #22D3EE); }
.ebs-s2    { fill: var(--mark-ice-hi, #7DD3FC); }

.ebs-lockup.lg { font-size: 22px; }
.ebs-lockup.sm { font-size: 13px; }

/* A plinth for the lockup wherever the surface behind it is light. The mark
   is specified for dark grounds only, so it brings its own. */
.ebs-plinth {
  display: inline-block;
  background: var(--ramp-0, #0A101A);
  padding: 10px 16px;
  border-radius: 10px;
  line-height: 1;
}

/* ---- demonstration banner ---------------------------------------
   A demo is a live system full of invented people. It says so, on every
   page, rather than relying on the visitor to infer it. */
.demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #131F30;
  color: #C6CFD8;
  border-bottom: 1px solid rgba(125, 211, 252, .28);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 7px 16px;
}
.demo-banner b {
  color: #7DD3FC;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.demo-banner .sep { color: #46535F; }
.demo-banner a { color: #7DD3FC; }

@media (max-width: 640px) {
  .demo-banner { font-size: 10.5px; padding: 6px 12px; }
  .ebs-lockup  { font-size: 13.5px; }
}

/* The lockup as it sits in the panel sidebar: the sidebar is already the dark
   ramp, so the mark needs no plinth of its own there. */
.sidebar-lockup { display: block; padding: 2px 0 4px; }
.sidebar-lockup .ebs-lockup { font-size: 14px; }

/* Mobile top bar carries the mark alone — there is no room for the wordmark,
   and the mark is the identifier. */
.mobile-topbar .ebs-emark-solo { display: block; height: 24px; width: auto; }

/* Sign-in: a demo is useless if you cannot get into it, so the accounts are
   on the door. Presented as sample data, not as a security lapse. */
.demo-signin {
  margin: 4px 0 20px;
  padding: 12px 14px;
  background: #F1F5FC;
  border: 1px solid #CBD9F3;
  border-radius: 8px;
  text-align: center;
}
.demo-signin-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #46535F;
}
.demo-signin-creds {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 8px 0;
}
.demo-signin-creds span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid #CBD9F3;
  border-radius: 5px;
  padding: 3px 7px;
  color: #1E4FA8;
}
.demo-signin code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; border: 1px solid #CBD9F3; border-radius: 4px;
  padding: 1px 5px; color: #1E4FA8;
}