/* SSM.orchi — the brand mark and the one global loading overlay.
 *
 * Shape, colours and timing are the approved "Option B — Adaptive Flow"
 * identity from the design handoff. The silhouette morph itself lives in
 * ssm_orchi_loader.js (SMIL keyframes ported verbatim from the handoff);
 * everything presentational is here.
 *
 * Loaded on every page from base.html. Deliberately scoped under .ssm-orchi
 * and .ssm-loader so it cannot restyle any existing module screen.
 */

/* ---------------------------------------------------------------------------
 * The mark: a morphing silhouette with a still wordmark at its centre.
 * Size is driven by one custom property so the wordmark can scale with it
 * (the design spec puts the type at 11.5% of the container).
 * ------------------------------------------------------------------------ */

.ssm-orchi {
  position: relative;
  display: block;
  width: var(--ssm-orchi-size, 120px);
  height: var(--ssm-orchi-size, 120px);
  line-height: 0;
}

.ssm-orchi__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Soft radial highlight behind the type so the wordmark reads as embedded in
 * the shape rather than pasted on top. The blur is constant — only transform
 * and opacity animate, both of which composite cheaply. */
.ssm-orchi__nucleus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(circle, #eafaf6 0%, rgba(234, 250, 246, 0) 72%);
  filter: blur(5px);
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0.3;
  pointer-events: none;
}

/* The wordmark never moves with the shape — that contrast (stable structure
 * inside adaptive movement) is the whole point of the identity. */
.ssm-orchi__wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-brand, "Plus Jakarta Sans", system-ui, sans-serif);
  font-weight: 700;
  font-size: calc(var(--ssm-orchi-size, 120px) * 0.115);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f7f9fc;
  text-shadow: 0 2px 10px rgba(6, 10, 20, 0.5);
  white-space: nowrap;
}

.ssm-orchi__wordmark i {
  font-style: normal;
  font-weight: 400;
  color: #bfe3da;
}

/* Motion is opt-in: under `prefers-reduced-motion: reduce` the nucleus simply
 * never animates, with no JavaScript involved. The silhouette morph is held
 * back by the controller in the same condition. */
@media (prefers-reduced-motion: no-preference) {
  .ssm-orchi__nucleus {
    animation: ssmOrchiNucleus 3.2s ease-in-out infinite;
    will-change: transform, opacity;
  }
}

@keyframes ssmOrchiNucleus {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 0.55;
  }
}

/* ---------------------------------------------------------------------------
 * The global overlay.
 * ------------------------------------------------------------------------ */

.ssm-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  background: rgba(238, 244, 252, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Above the evidence lightbox (1080) and Bootstrap modals (1055). A native
   * <dialog> opened with showModal() lives in the browser top layer and cannot
   * be out-stacked by any z-index — the controller closes such a dialog before
   * showing the overlay instead. */
  z-index: 20000;
}

/* Must follow the display rule above, otherwise `hidden` loses to `display:flex`. */
.ssm-loader[hidden] {
  display: none;
}

.ssm-loader__message {
  font-family: var(--font-brand, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 18px;
  line-height: 1.35;
  color: #0e1a26;
  max-width: 30ch;
}

.ssm-loader__sub {
  font-size: 13px;
  line-height: 1.5;
  color: #5b6b7a;
  max-width: 42ch;
  margin-top: -10px;
}

.ssm-loader__message[hidden],
.ssm-loader__sub[hidden] {
  display: none;
}

/* Fast page transitions get the same mark, smaller, over a lighter wash and
 * with no message — it must never make a quick app feel slow. */
.ssm-loader--light {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ssm-loader--light .ssm-orchi {
  --ssm-orchi-size: 64px;
}

/* ---------------------------------------------------------------------------
 * Shell + login placements of the static mark.
 * ------------------------------------------------------------------------ */

.ledger-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Sized to sit inside the existing 58px header without growing it. */
.ledger-brand-mark {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 28px;
}

.ledger-brand .ledger-brand-name i {
  font-style: normal;
  color: #bfe3da;
}

.ssm-login-mark-image {
  width: 44px;
  height: 44px;
  display: block;
}

@media (max-width: 520px) {
  .ledger-brand-mark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
}