/* The BuildComplete identity, in the three places it is the first
   thing read: the owner's sidebar, the designer portal's topbar, and
   the designer sign-in card.

   ONE treatment, three sizes. Everything here is scoped to the .bc-brand
   classes, which nothing else in this app uses, so loading this sheet
   cannot move a layout, a control or a colour that was already there.

   THE ASSETS ARE USED AS DRAWN. There are two real lockups in
   web/static, and which one is correct depends entirely on what is
   behind it:

     logo_buildcomplete_light.png   navy and blue ink, transparent --
                                    for a LIGHT surface.
     logo_app_transparent.png       white and blue ink, transparent --
                                    for a DARK surface.

   That second file was checked pixel by pixel rather than by its name,
   because it LOOKS like a navy tile in a file browser: 695,302 of its
   886,555 pixels are fully transparent and it carries no bKGD or tRNS
   chunk, but the RGB stored underneath the transparent pixels is a
   near-black navy, so any viewer that drops the alpha channel paints
   that navy in. Composited over white, the lockup's "Build" and its
   roof vanish and no navy rectangle appears -- it is genuinely
   transparent, and a dark preview window is what makes it look
   otherwise. Two consequences, both deliberate: it is only ever placed
   on a dark surface, and the surface behind it is the bar's own
   colour, so if anything downstream ever does flatten the alpha the
   navy it reveals sits against navy rather than against white.

   So the theme chooses the FILE, and no filter, inversion or
   hue-rotate touches either one. The old sidebar rule inverted the
   logo for system-dark, which bent the brand blue into whatever
   hue-rotate produced; with both lockups on disk there was never a
   reason to.

   The byline is set as text, deliberately. It reads exactly "Built by
   J2 Construction" everywhere, it stays crisp at any size and in any
   theme, and it is the company's name rather than a second logo
   competing with the first. */

/* ------------------------------------------------------------------ *
 * Shared
 * ------------------------------------------------------------------ */
.bc-brand,
.bc-brand-stack {
  display: block;
  text-decoration: none;
}

.bc-brand-mark {
  display: block;
  height: auto;
  /* The lockup is drawn to the edge of its own bounding box, so it
     needs the whitespace around it rather than inside it. */
  image-rendering: auto;
}

.bc-brand-byline {
  display: block;
  /* Readable, not a watermark. Small caps at 11.5px with this much
     tracking is about the floor for a line somebody is meant to
     actually read. */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  /* It WRAPS. At 320 CSS px the white auth card is about 272px of
     content and this line sets about 196px, which fits -- but the
     reviewer's narrow-viewport capture came out at 235 CSS px, where
     nowrap pushed it past the card's right edge. Wrapping to two
     centred lines keeps every word and the full 11.5px size; nowrap
     bought nothing and could only ever clip. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* The light lockup is the default; the dark one is swapped in by the
   theme, never by a filter. */
.bc-brand-mark-dark { display: none; }

/* ------------------------------------------------------------------ *
 * The owner's sidebar
 * ------------------------------------------------------------------ */
.bc-brand {
  padding: 2px 4px 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--th-line, #E2E6EC);
  color: var(--th-ink-3, #7A8696);
}

.bc-brand .bc-brand-mark {
  width: 100%;
  max-width: 168px;
}

.bc-brand .bc-brand-byline {
  margin-top: 11px;
  color: var(--th-ink-3, #7A8696);
}

.bc-brand:focus-visible {
  outline: 3px solid var(--th-brand, #2F6FE4);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Dark, and System when the machine is dark. Both lockups are in the
   document; this decides which one is drawn. */
:root[data-theme="dark"] .bc-brand-mark-light,
:root[data-theme="dark"] .bc-brand-mark-top-light { display: none; }
:root[data-theme="dark"] .bc-brand-mark-dark,
:root[data-theme="dark"] .bc-brand-mark-top-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .bc-brand-mark-light,
  :root[data-theme="system"] .bc-brand-mark-top-light { display: none; }
  :root[data-theme="system"] .bc-brand-mark-dark,
  :root[data-theme="system"] .bc-brand-mark-top-dark { display: block; }
}

/* The sidebar turns into a horizontal strip, and then into a column
   again on a phone -- the same two breakpoints style.css already
   uses for the rail (1100px, then 700px/short-landscape). In the strip, height is the scarce dimension, so the lockup is
   sized by height and the byline steps aside. */
@media (max-width: 1100px) {
  .bc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 8px 0 0;
    margin: 0 14px 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--th-line, #E2E6EC);
  }
  /* Sized by width. At 30px of height this lockup is 67px wide and
     the wordmark under the roof stops being a word; the strip gives up
     the height instead. */
  .bc-brand .bc-brand-mark { width: 150px; height: auto; max-width: none; }
  .bc-brand .bc-brand-byline { margin-top: 0; }
}

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .bc-brand {
    display: block;
    padding: 2px 0 12px;
    margin: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--th-line, #E2E6EC);
    text-align: center;
  }
  .bc-brand .bc-brand-mark {
    width: 150px;
    height: auto;
    margin: 0 auto;
  }
  .bc-brand .bc-brand-byline { margin-top: 9px; }
}

/* ------------------------------------------------------------------ *
 * The designer portal's topbar (a dark navy bar)
 * ------------------------------------------------------------------ */
.bc-brand-top {
  display: flex;
  align-items: center;
  gap: 14px;
  /* min-content, not 0: the block may give up the byline's second line
     and the hairline, but never the lockup's width. */
  min-width: min-content;
}

/* Sized by WIDTH. This is a stacked lockup -- roof over wordmark over
   tagline, about 2.2:1 -- so setting a comfortable bar height sets a
   useless wordmark: 30px tall is 67px wide and "BuildComplete" becomes
   a grey line. 150px wide is the smallest it stays a name at, and the
   bar takes the height that costs. The translucent plate the old
   markup needed is gone -- the dark lockup belongs on this colour. */
.portal-topbar .bc-brand-mark-top {
  display: block;
  width: 150px;
  height: auto;
}

/* The bar's own padding comes back a little to pay for that height,
   and the bar is allowed to become TWO rows. Without the wrap, a long
   name in the user row has only one way to make room -- squeeze the
   thing next to it -- and portal.css's narrow-screen
   `img { max-width: 100% }` means what gets squeezed is the lockup:
   at 319 CSS px with "Alexandra Montgomery Design Studio" signed in it
   came out about 90px wide and flush against the avatar. Wrapping puts
   the user row on its own line instead, which costs one bar-height and
   keeps the identity, the gap and Sign Out all intact. */
.portal-topbar {
  padding-top: 12px;
  padding-bottom: 12px;
  column-gap: 16px;
}

/* The wrap is for narrow screens only, and 700px is portal.css's own
   narrow breakpoint -- the one that introduces the image rule this is
   answering. Flex decides to wrap from an item's UNSHRUNK width, so
   switching it on everywhere sent the user row to a second line on a
   768px tablet that had room to spare. Above this width the row stays
   one line and the byline gives up its own width instead. */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .portal-topbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* The lockup is the one thing in the bar that may not be shrunk. It is
   a flex item, so flex-shrink:0 stops the row from taking width off it,
   and max-width:none opts it out of the narrow-screen image rule that
   was doing the shrinking. Below the width set here it stops being a
   readable name, and a name nobody can read is not identity. */
.portal-topbar .bc-brand-mark-top {
  flex: none;
  max-width: none;
}

/* Everything else in the bar yields first. */
.portal-topbar .portal-topbar-user {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.bc-brand-rule {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, .22);
  flex: none;
}

.bc-brand-top .bc-brand-byline {
  color: #AFC0D6;
  margin: 0;
  /* A flex item defaults to min-width:auto and so refuses to shrink
     below its own text; with the byline wrappable that default is what
     would push a long crew name off the right of the bar. */
  min-width: 0;
}

/* On a phone the byline STACKS under the lockup rather than going
   away: it is the line Jordan asked for by name, and a byline that
   only exists on a desktop is not a byline. Only the hairline between
   them -- which is decoration -- is dropped. */
@media (max-width: 560px) {
  .bc-brand-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .portal-topbar .bc-brand-mark-top { width: 132px; }
  .bc-brand-top .bc-brand-rule { display: none; }
  .portal-topbar { padding: 10px 16px; }
}

/* ------------------------------------------------------------------ *
 * The designer sign-in card (a white card on a navy page)
 * ------------------------------------------------------------------ */
.bc-brand-stack {
  text-align: center;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid #E6EAF0;
}

.bc-brand-stack .bc-brand-mark {
  width: 182px;
  max-width: 100%;
  margin: 0 auto;
}

.bc-brand-stack .bc-brand-byline {
  margin-top: 12px;
  color: #6B7A8D;
}

/* ------------------------------------------------------------------ *
 * The same card on a DARK page (the owner's sign-in screens)
 * ------------------------------------------------------------------ *
 * style.css has no light mode and no theme attribute: its :root sets
 * --bg to #0A0E14 and the owner auth pages load nothing else, so those
 * four screens are dark whatever the machine's preference is. They get
 * the white-ink lockup and ink that is legible on near-black -- the
 * same component, a different surface. Checked by reading the rendered
 * background, not the file name. */
.bc-brand-stack-dark {
  border-bottom-color: rgba(255, 255, 255, .14);
}

.bc-brand-stack-dark .bc-brand-byline {
  /* 4.9:1 on #0A0E14. The light card's #6B7A8D would be 3.1:1. */
  color: #9FB0C6;
}