/*
    THE BRAND VOCABULARY'S OWN STYLESHEET.

    A team's own logo where the product's mark would stand, and the two previews of the file it was
    uploaded from. Components/Shared/BrandMark.razor draws the first on report sheets and proposals,
    and /app/team/branding draws the other two, so this is the document's stylesheet rather than
    either one's.

    THE MARK ITSELF CARRIES NO PLATE. No border, no background: a logo drawn for white paper sits on
    the sheet exactly as its owner drew it, and its height comes from the component so one number
    governs the logo and the fallback mark. The preview and the thumbnail are the opposite case -
    they are pictures OF a file, so they get a plate to be seen against.
*/

.sv-brand-preview {
  display: block;
  margin-top: var(--sv-space-3);
  max-width: 220px;
  max-height: 90px;
  object-fit: contain;
  background: var(--sv-bg-sunken);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-card);
  padding: var(--sv-space-2);
}

/* THE BANNER'S PREVIEW SHOWS THE CROP, NOT THE FILE. The logo preview is `contain`, because what a
   firm is checking there is the artwork whole; a banner is drawn edge to edge at a fixed height and
   what they are checking is what SURVIVES that - so this one is `cover` at the same aspect the
   shared page uses. Shown `contain`, a panorama would look complete here and arrive on the page
   with its ends cut off, which is a surprise found by the client rather than by the firm. */
.sv-brand-preview--banner {
  max-width: 520px;
  width: 100%;
  height: 96px;
  max-height: none;
  object-fit: cover;
  padding: 0;
}

.sv-brand-thumb {
  width: 44px;
  height: 28px;
  object-fit: contain;
  background: var(--sv-bg-sunken);
  border: 1px solid var(--sv-border-subtle);
  border-radius: 2px;
}

/* A team's own logo standing where the product's mark stands, in a document header. No border,
   no plate and no background: this is the mark itself, not a preview of an uploaded file, and a
   logo drawn for white paper must sit on the sheet exactly as its owner drew it. The height comes
   from the component so one number governs the logo and the fallback mark. */
.sv-brand-mark {
  display: block;
  width: auto;
  object-fit: contain;
  /* A very wide mark shrinks rather than pushing the report title off the sheet. */
  flex-shrink: 1;
}

/* THE BRAND LOCKUP, and all three shells wear it: the application sidebar, the public nav and the
   panel beside a sign-in form. Named for what it is rather than for the shell it appears in, so no
   one of the three reads as its owner. */
.sv-brand-link {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-1) var(--sv-space-2);
  color: var(--sv-text);
  font: 400 16px/1 var(--sv-font-sans);
  letter-spacing: -0.035em;
  min-width: 0;
}

.sv-brand-link:hover {
  text-decoration: none;
  color: var(--sv-text);
}

/* THE NAME IS SET IN TWO WEIGHTS, AND THAT IS THE BRAND rather than a flourish - the lockup on the
   pack is Array at 400 and Trace at 600, tracked -0.035em, with no space between the words. The
   tracking is on the link above so the mark and the word keep one measure.

   TWO ELEMENTS RATHER THAN A FONT TRICK. There is no way to weight half a text node, and a
   `font-synthesis` fake bold would be a fifth weight IBM Plex Sans already ships properly.

   The break is where the name's own second capital is, not a character count - see BrandWordmark,
   which is the one place that decides it. A one-word name simply draws at 400 and is not forced
   into a split it does not have. */
/* Nowrap and nothing else. The rail hides the word with `.sv-app--rail .sv-brand-link span`, which
   still reaches this element and the two inside it; giving it a display of its own would only be
   something that rule has to out-specify. */
.sv-wordmark {
  white-space: nowrap;
}

.sv-wordmark__lead {
  font-weight: 400;
}

.sv-wordmark__tail {
  font-weight: 600;
}