/* ═══════════════════════════════════════════════════════════════════════
   Helios VMS — brand lockup (2026-09-23)

   ONE mark, ONE wordmark; only the ink changes between themes.  The mark
   is the orbit (an open orbit arc, a closed inner ring, the orange core),
   inlined by partials/helios_lockup.html — the rings are currentColor, so
   a theme switch swaps no file.  The wordmark is live text: "Helios" in
   IBM Plex Sans 600 (the face is declared once, in tokens.css, as
   --font-brand) and the smaller, tracked "VMS" in the solid muted ink.
   IBM Plex Sans is the wordmark's face ONLY — UI type stays Geist.

   Served at /static/css/brand.css (Flask's built-in static route reads
   server/static/ — a file under web/src/static 404s, see CLAUDE.md).
   Loaded by partials/_head.html on every page.

   THE INKS ARE TOKENS (web/src/styles/tokens.css, --lockup-*), keyed on
   <html data-theme> like every other token — this sheet carries rules,
   never a colour.  Never key the lockup on prefers-color-scheme: in the
   app, absent data-theme means dark even on a light OS.

   Geometry is the brand file's own (server/static/brand/helios-lockup.svg,
   a 60px mark beside 42px "Helios"): for a mark of size m the wordmark
   sets at 0.70m, the gap is 0.267m, "VMS" is 0.30m tracked 0.139em and
   sits 0.556em after "Helios".  RULE (decision 7): under a 32px mark the
   macro omits "VMS" — it would set under 10px — so the rail reads
   "Helios".

   Clear space: 14% of the mark width on all four sides is PADDING on the
   component — nothing else may sit in that band, so the component owns it
   (the login, welcome and rail cancel it with a -.14n margin where the mark
   must align to an edge).

   Constraints carried here: no shadow, glow, gradient or bevel on the
   mark; the rings are never re-weighted, recoloured apart from each other,
   rotated, outlined or stretched; the core is always the brand orange; the
   wordmark is never another font, never all-caps "HELIOS", never wrapped.
   ═══════════════════════════════════════════════════════════════════════ */

.helios-lockup {
  /* --lockup-n is the mark size as a NUMBER (px), set inline by the macro;
     a consumer that must resize responsively passes a var() reference
     instead and defines that var in its own media queries. */
  --lockup-n: 26;
  --_n: max(16, var(--lockup-n));                 /* 16px minimum */
  --_size: calc(var(--_n) * 1px);
  --_clear: calc(var(--_size) * .14);             /* clear-space band */
  --_text: max(12px, calc(var(--_size) * .70));   /* "Helios" */
  --_gap: calc(var(--_size) * .2667);

  display: inline-flex;
  align-items: center;                           /* centre, not baseline */
  gap: var(--_gap);
  padding: var(--_clear);
  box-sizing: content-box;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.helios-lockup--stacked {
  flex-direction: column;
  --_text: max(12px, calc(var(--_size) * .333));
  --_gap: calc(var(--_size) * .22);
}
/* inherit (default): the rings are currentColor from the SURROUNDING
   element; the wordmark reads the theme tokens.  Consumers that want the
   rings to match "Helios" set color: var(--lockup-ink) on their wrapper. */
.helios-lockup-mark {
  display: block;
  width: var(--_size);
  height: var(--_size);                          /* always square */
  flex: none;
  color: inherit;
  overflow: visible;
}
.helios-lockup-core { fill: var(--lockup-dot); }

.helios-lockup-wordmark {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--_text);
  letter-spacing: 0;
  line-height: 1;
  color: var(--lockup-ink);
  white-space: nowrap;                          /* one line, never wrapped */
  text-transform: none;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* "VMS" — an INLINE run inside the nowrap wordmark: 0.30m against the
   0.70m "Helios" (.4286em), tracked, the SOLID muted ink. */
.helios-lockup-vms {
  display: inline;
  margin-left: .556em;
  font-size: .4286em;
  letter-spacing: .139em;
  color: var(--lockup-muted);
}

/* forced variants: theme="dark" | "light" pins that theme's inks
   regardless of the page theme (a dark stage in a light app, print, a
   photo ground). */
.helios-lockup--dark {
  --lockup-ink:   var(--lockup-ink-dark);
  --lockup-muted: var(--lockup-muted-dark);
  color: var(--lockup-ink);
}
.helios-lockup--light {
  --lockup-ink:   var(--lockup-ink-light);
  --lockup-muted: var(--lockup-muted-light);
  color: var(--lockup-ink);
}