/* assets/css/appsec/appsec_shell.css — the MyCSO shell (MYC-88).
 *
 * Linked only from the MyCSO index.html and login.html that
 * demo/verticals/appsec/web/build_index.py generates; the public demo never
 * loads it.
 *
 * PALETTE: a deep navy with a teal accent, in the direction of State Street's
 * identity. These are NOT their published brand values - we have not been
 * given their guidelines, and inventing exact hex codes and presenting them as
 * the brand would be worse than an honest approximation. Swapping in the real
 * values is these few variables.
 */

body.mycso {
  /* --primary-color and --secondary-color are deliberately NOT overridden.
   * The app's dark theme uses them as TEXT colours - page titles, chart
   * titles, table headers - and the first version set them to a deep navy,
   * which put every title on every page in navy on a near-black ground. The
   * identity comes from the lockup and the teal accent instead. */
  --accent-color: #00a3ad;
  --as-accent: #00a3ad;
  --as-chip-bg: rgba(0, 163, 173, 0.14);
  /* Room for the demonstration bar, so it never sits over content. */
  padding-bottom: 30px;
}

/* ── The demonstration bar ──────────────────────────────────────────────
 * Permanent and not dismissible (MYC-88, decision D3). Fixed to the viewport
 * rather than placed in the flow, so it is in every screenshot of every page,
 * whatever that page's own layout does - including one forwarded without
 * context. Bottom rather than top because the app shell pins its sidebar and
 * header to the top edge, and a top bar would have to fight both. */
.mycso-demo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: #0b1f3a;
  color: #ffffff;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 8px 12px;
  pointer-events: none; /* never intercepts a click meant for the page */
}

/* ── Brand lockup: typeset, not artwork ─────────────────────────────── */
.mycso-lockup {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
  color: inherit;
}
.mycso-client {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mycso-product {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-top: 3px;
}

/* ── Persona switcher ───────────────────────────────────────────────── */
.mycso-persona {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 16px;
  font-size: 0.85rem;
}
.mycso-persona[hidden] { display: none; }
.mycso-persona label { opacity: 0.7; white-space: nowrap; }
.mycso-persona select {
  font: inherit;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.4);
  background: transparent;
  color: inherit;
}
.mycso-persona-scope { opacity: 0.7; font-size: 0.78rem; white-space: nowrap; }

@media (max-width: 900px) {
  .mycso-persona-scope { display: none; }
}
@media (max-width: 600px) {
  .mycso-persona label { display: none; }
  .mycso-demo-bar { font-size: 0.66rem; }
}

/* The fixed demonstration bar sits over the bottom of the page; give the
 * footer room so its text is never hidden underneath it. */
body.mycso footer { padding-bottom: 40px; }