/* ============================================================
   wordmark.css — MaxCV wordmark "Option B" (docs/design/paper-ink/SPEC.md → Shell).
   Geist "Max" + Instrument Serif italic "CV" in brand green + small muted
   ".ai", baseline-aligned. The spans are decorative (aria-hidden); the
   enclosing link carries aria-label="MaxCV.ai". One size knob
   (--mx-wm-size = the "Max" size); modifiers rescale it. Colours read the
   ui-tokens.css tokens (load after ui-tokens.css); .mx-wordmark--on-dark is
   for ink-band grounds (dark in both themes).
   ============================================================ */
.mx-wordmark {
  --mx-wm-size: 21px;
  --mx-wm-ink: var(--ui-ink);
  --mx-wm-cv: var(--ui-accent);
  --mx-wm-muted: var(--ui-ink-3);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  color: var(--mx-wm-ink);
}
.mx-wm-max {
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--mx-wm-size);
  letter-spacing: -0.025em;
  color: var(--mx-wm-ink);
}
.mx-wm-cv {
  margin-left: 1px;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--mx-wm-size) * 1.24);
  letter-spacing: -0.01em;
  color: var(--mx-wm-cv);
}
.mx-wm-ai {
  margin-left: 1.5px;
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--mx-wm-size) * 0.67);
  letter-spacing: 0;
  color: var(--mx-wm-muted);
}
.mx-wordmark--sm { --mx-wm-size: 18px; }
.mx-wordmark--lg { --mx-wm-size: 26px; }
.mx-wordmark--on-dark {
  --mx-wm-ink: var(--ui-band-text);
  --mx-wm-cv: #5BC08A;
  --mx-wm-muted: var(--ui-band-muted);
}
/* Dark theme: the light brand green is too dim on dark paper — lift it. */
:root[data-theme="dark"] .mx-wordmark:not(.mx-wordmark--on-dark) { --mx-wm-cv: #5BC08A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mx-wordmark:not(.mx-wordmark--on-dark) { --mx-wm-cv: #5BC08A; }
}

/* Next to the header/footer icon (.ui-logo, ui-base.css): 9px gap at 28px. */
.ui-logo { gap: 9px; }
@media (max-width: 600px) {
  .ui-logo { gap: 8px; }
  .ui-logo .mx-wordmark { --mx-wm-size: 19px; }
}

/* Brand block = logo + the shared coderai.dev Apps button (<coderai-apps>,
   partials.js appsHTML / siteShell.ts). The SDK renders in Shadow DOM and
   reads these custom properties: Paper & Ink secondary-button look, dark
   values follow the ui-tokens.css dark tokens automatically. */
.ui-brand-apps { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; min-width: 0; }
coderai-apps {
  --coderai-apps-button-height: 36px;
  --coderai-apps-button-radius: var(--ui-radius-control, 10px);
  --coderai-apps-button-padding: 0 12px;
  --coderai-apps-button-font-size: 13px;
  --coderai-apps-mobile-button-size: 36px;
  --coderai-apps-font: var(--ui-sans, 'Geist', system-ui, sans-serif);
  --coderai-apps-bg: var(--ui-surface);
  --coderai-apps-text: var(--ui-ink);
  --coderai-apps-muted: var(--ui-ink-3);
  --coderai-apps-border: var(--ui-line-strong);
  --coderai-apps-hover: var(--ui-sunken);
  --coderai-apps-active: var(--ui-accent-soft);
  --coderai-apps-focus: var(--ui-accent);
  display: inline-flex;
  flex-shrink: 0;
}
/* Fallback link (SDK not loaded / blocked): same button look. */
coderai-apps > a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control, 10px);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: 500 13px var(--ui-sans, 'Geist', system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
}
coderai-apps > a:hover { background: var(--ui-sunken); color: var(--ui-ink); }
@media (max-width: 600px) {
  .ui-brand-apps { gap: 10px; }
  coderai-apps > a { padding: 0 10px; }
}
/* Narrow desktop (inline marketing nav, 1024–1119px): the five nav links plus
   the brand block do not fit — icon-only Apps button and a tighter nav. */
@media (min-width: 1024px) and (max-width: 1119px) {
  coderai-apps::part(label) { display: none; }
  coderai-apps::part(button) { width: 36px; padding: 0; }
  .ui-header[data-mode] .ui-nav { gap: 22px; }
}