/* Lambda-Phi brand chrome on JobOps pages: the φ-with-tie mark inside the
   website's ring (website/brand/lambda-phi.css .lp-monogram), the company
   wordmark beside it on wide screens, the product wordmark always. The
   tokens are self-contained so every page links this file whatever its own
   token set says; light is the base, dark comes from the explicit theme or
   the system setting, exactly as theme.js stamps it. */
:root {
  --brand-ring: #C6C0AF;
  --brand-tint: rgba(46, 111, 224, .10);
  --brand-brass: #7A5F2C;
  --brand-wash: transparent;
  --brand-mark: url(brand-mark-light.png?v=1);
}
:root[data-theme="dark"] {
  --brand-ring: #33415C;
  --brand-tint: rgba(79, 141, 245, .14);
  --brand-brass: #C7A667;
  --brand-wash: rgba(79, 141, 245, .07);
  --brand-mark: url(brand-mark-dark.png?v=1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-ring: #33415C;
    --brand-tint: rgba(79, 141, 245, .14);
    --brand-brass: #C7A667;
    --brand-wash: rgba(79, 141, 245, .07);
    --brand-mark: url(brand-mark-dark.png?v=1);
  }
}

/* the mark: a ring, a faint tint high in the disc, the φ with its tie */
.monogram {
  --size: 42px;
  width: var(--size); height: var(--size);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--brand-ring);
  background-color: var(--brand-wash);
  background-image:
    var(--brand-mark),
    radial-gradient(circle at 50% 30%, var(--brand-tint), transparent 70%);
  background-size: 58% 58%, 100% 100%;
  background-position: 50% 55%, 0 0;
  background-repeat: no-repeat;
}

/* mark · LAMBDA-PHI · JOBOPS, one leading cluster in every top bar */
.brandmark {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  color: inherit; text-decoration: none;
}
/* LAMBDA-PHI and JOBOPS are one title: the same face, size, tracking and
   ink on every page (the sign-in page included), brass on OPS only */
.brandmark .company,
.brandmark .wordmark,
.brandmark h1 {
  margin: 0;
  font: 600 15px/1 'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}
.brandmark b { color: var(--brand-brass); font-weight: 600; }
/* narrow: the company name goes, the mark and the product stay, and the
   controls on the right keep their place in the viewport */
@media (max-width: 879px) {
  .brandmark .company { display: none; }
  .monogram { --size: 38px; }
}

/* the sign-in page carries the same title as a heading, then its subtitle */
main > .brandmark { margin-bottom: 2px; }