/*
 * The has wordmark (brand v1). Every value is in `em` of the mark's font-size,
 * so one rule holds from the 11px favicon floor to a 200px slide title, and the
 * mark needs no exported asset.
 *
 * `align-items: baseline` is what lands the dot ON the baseline. An empty flex
 * item synthesises its baseline from its bottom margin edge, so the disc's
 * bottom sits exactly on the text baseline: a full stop, which is how every has
 * sentence ends. Centring it instead would make it a separator ("more follows"),
 * and absolute-positioning it against the box bottom would drop it a descent
 * below the baseline.
 *
 * The margin-right is not decoration. CSS letter-spacing adds its value after
 * the last character too, so the letters box ends *inside* the `s` ink edge and
 * the trailing tracking eats the gap. Cancelling it with an equal right margin
 * is the handoff's central instruction; the value is derived from the tracking
 * token with calc() so the two can never drift apart.
 *
 * One correction to the handoff's reasoning, measured in-browser and recorded in
 * DESIGN_SYSTEM § 6: the box edge sits 0.0095em inside the ink edge, not 0.04em,
 * because Schibsted Grotesk ExtraBold's `s` carries a 0.0305em right side
 * bearing that absorbs most of the tracking. So the true ink-to-dot distance is
 * ~0.0855em rather than the 0.055em the handoff's prose claims. The numbers
 * below are the handoff's own CSS and px sizes table, which agree with each
 * other and which this build reproduces exactly; do not "fix" them against the
 * prose without asking the designer which one they meant.
 */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-ui);
  line-height: 1;
  user-select: none;
}

.wordmark__word {
  font-weight: 800;
  letter-spacing: var(--tracking-logo);
  margin-right: calc(var(--tracking-logo) * -1);
  color: var(--ink);
}

.wordmark__gap {
  flex: none;
  width: 0.055em;
}

.wordmark__dot {
  flex: none;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: var(--accent);
}

/* Under 18px the dot needs more mass and the gap more air to survive. */
.wordmark--sm .wordmark__word {
  letter-spacing: var(--tracking-tight);
  margin-right: calc(var(--tracking-tight) * -1);
}

.wordmark--sm .wordmark__gap {
  width: 0.07em;
}

.wordmark--sm .wordmark__dot {
  width: 0.26em;
  height: 0.26em;
}

/* Reversed, for ink surfaces: the letters go white and the dot lifts to the
 * brighter accent, which holds its chroma against --dark-card-bg. */
.wordmark--reversed .wordmark__word {
  color: var(--dark-card-emphasis);
}

.wordmark--reversed .wordmark__dot {
  background: var(--dark-accent);
}

/* Lockup 3, suffixed: mark, a hairline rule, then the surface's name. Replaces
 * the bare gap the admin sidebar used, which read as two unrelated labels.
 *
 * The gap and rule are in `em` of the mark, like the rest of this file, so the
 * furniture scales with it: the handoff's 10px and 17px are what these resolve
 * to at the canonical 22px mark, and a 26px setup header now gets a rule in
 * proportion rather than the same stub. The font-size they resolve against sits
 * on .wordmark-lockup itself (Wordmark.tsx puts it on the outermost element).
 *
 * The suffix label is the deliberate exception: it stays at the handoff's
 * absolute 11.5px, because a label has a legibility floor and is not part of
 * the mark's geometry. */
.wordmark-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  user-select: none;
}

.wordmark-lockup__rule {
  flex: none;
  width: 1px;
  height: 0.77em;
  background: var(--border);
}

.wordmark-lockup__suffix {
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}