/* ── RIQEN logo ──
   One component (js/render/components/riqen-logo.js), three variants:
   full (symbol + RIQEN + AUDIT INTELLIGENCE), navigation (symbol + RIQEN),
   symbol (gold cube and ring).

   Size is controlled by a single custom property, --riqen-logo-h, which is the
   height of the artwork (the ring's full height). Contexts set it locally, e.g.
   `.sidebar-brand .riqen-logo { --riqen-logo-h: 32px; }`, and never restyle the
   artwork itself. Phones fall back to a smaller variant when the caller asks
   for one (data-narrow / data-tiny) instead of squeezing the descriptor. */

.riqen-logo {
  --riqen-logo-h: 36px;
  --riqen-logo-ring: #e9bc70;
  --riqen-logo-cube-top: #f6d499;
  --riqen-logo-cube-left: #e8bb70;
  --riqen-logo-cube-right: #b48b52;
  --riqen-logo-wordmark: #f5f2eb;
  --riqen-logo-descriptor: #e6bc76;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
  color: inherit;
  animation: none;
  filter: none;
}

.riqen-logo--full { --riqen-logo-h: 72px; }
.riqen-logo--navigation { --riqen-logo-h: 36px; }
.riqen-logo--symbol { --riqen-logo-h: 28px; }

.riqen-logo__art {
  display: none;
  width: auto;
  height: var(--riqen-logo-h);
  max-width: 100%;
  overflow: visible;
  flex: 0 0 auto;
}

.riqen-logo__art--primary { display: block; }
.riqen-logo__art--narrow { height: var(--riqen-logo-h-narrow, var(--riqen-logo-h)); }
.riqen-logo__art--tiny { height: var(--riqen-logo-h-tiny, var(--riqen-logo-h-narrow, var(--riqen-logo-h))); }

.riqen-logo__ring { fill: var(--riqen-logo-ring); }
.riqen-logo__cube-top { fill: var(--riqen-logo-cube-top); }
.riqen-logo__cube-left { fill: var(--riqen-logo-cube-left); }
.riqen-logo__cube-right { fill: var(--riqen-logo-cube-right); }
.riqen-logo__wordmark { fill: var(--riqen-logo-wordmark); }
.riqen-logo__descriptor { fill: var(--riqen-logo-descriptor); }

/* Tone "auto": the wordmark follows the app theme. Light surfaces get ink for the
   lettering and a deeper bronze descriptor so both stay legible; the symbol keeps
   the approved gold. */
.riqen-logo[data-tone="auto"] {
  --riqen-logo-wordmark: #12151a;
  --riqen-logo-descriptor: #8a541f;
}

.theme-dark .riqen-logo[data-tone="auto"] {
  --riqen-logo-wordmark: #f5f2eb;
  --riqen-logo-descriptor: #e6bc76;
}

/* Narrow (phone) screens: swap to the smaller variant rather than shrinking the
   full logo until the descriptor is unreadable. */
@media (max-width: 640px) {
  .riqen-logo[data-narrow] .riqen-logo__art--primary { display: none; }
  .riqen-logo[data-narrow] .riqen-logo__art--narrow { display: block; }
}

@media (max-width: 360px) {
  .riqen-logo[data-tiny] .riqen-logo__art--primary,
  .riqen-logo[data-tiny] .riqen-logo__art--narrow { display: none; }
  .riqen-logo[data-tiny] .riqen-logo__art--tiny { display: block; }
}

@media print {
  .riqen-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Placements ──
   Only the artwork height is set here; variant, tone and mobile fallback are
   chosen by the caller of renderRiqenLogo(). */

/* Landing header (riqen-homepage): the full logo while the header is tall enough
   for the descriptor to stay legible, otherwise the navigation logo (phones, and
   short desktop windows where the header shrinks to 64-68px). */
.riqen-nav-brand .riqen-logo {
  --riqen-logo-h: calc(var(--riqen-header-h, 78px) - 8px);
  --riqen-logo-h-narrow: 36px;
}

@media (min-width: 1280px) and (max-height: 799px) {
  .riqen-nav-brand .riqen-logo { --riqen-logo-h-narrow: calc(var(--riqen-header-h, 64px) - 20px); }
  .riqen-nav-brand .riqen-logo[data-narrow] .riqen-logo__art--primary { display: none; }
  .riqen-nav-brand .riqen-logo[data-narrow] .riqen-logo__art--narrow { display: block; }
}

/* Marketing sub-page header and footer. */
.mkt-nav-brand .riqen-logo { --riqen-logo-h: 40px; }
.mkt-footer-logo { --riqen-logo-h: 76px; --riqen-logo-h-narrow: 40px; }

/* Sign-in and briefing dialogs. */
.riqen-login-logo { --riqen-logo-h: 80px; --riqen-logo-h-narrow: 40px; }
.login-card-brand .riqen-logo { --riqen-logo-h: 68px; --riqen-logo-h-narrow: 38px; }

/* Application sidebar. */
.sidebar-brand .riqen-logo { --riqen-logo-h: 34px; }

/* Compact "RIQEN | Workspace" header inside the landing illustration. */
.riqen-ws-logo { --riqen-logo-h: 26px; }

/* Collapsed sidebar: the symbol sits inside the expand control. */
.sidebar-expand-btn .riqen-logo { --riqen-logo-h: 19px; }