/* selfievo-ui · brand/brand.css — the brand's own components.

   Two lockups and the handful of element defaults the design system states
   at brand level. Everything here reads tokens from brand/tokens.css and
   owns class names under `.brand-`, so it never collides with app.css or
   the per-surface sheets.

   Markup lives in `templates/partials/_brand.html`. */

/* ============================================================
   Brand-level element defaults
   ============================================================ */

/* Straight from the design system's tokens/base.css. Selecting text is the
   one place the orange appears without being asked for, and charcoal-on-
   orange-200 is the pairing the system specifies. */
::selection {
  background: var(--jb-orange-200);
  color: var(--jb-charcoal);
}

/* A dense console scrolls constantly, so the bar is furniture: thin, on the
   neutral ramp, no track. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* On `html`, not on `*`: both properties inherit, and applying them through
   a universal selector makes the engine re-evaluate scrollbars on every
   element on the page. */
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ============================================================
   PRODUCT lockup — the orange mark plus the product name
   ============================================================ */

.brand-product {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--r-xs);
}

/* The design system sets the mark's minimum at 24px and requires clear
   space of at least its own head height around it — the gap above and the
   flex gap beside it are that clear space, so do not tighten either. */
.brand-mark {
  width: 26px;
  height: 26px;
  display: block;
  flex: none;
}

.brand-product-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

a.brand-product:hover .brand-product-name { color: var(--accent); }

a.brand-product:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

/* The full wordmark, for the sign-in page. It is official outlined artwork:
   never re-set it from a font, never recolour it off-brand, never split the
   symbol and the word into two colours. */
.brand-wordmark {
  display: block;
  width: auto;
}

/* ============================================================
   CUSTOMER lockup — whose data am I looking at
   ============================================================ */

.brand-customer {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  border-radius: var(--r-xs);
}

/* No border. The tint hairline framed every logo in a coloured rectangle and
   the frame competed with the mark inside it — the eye read the box before
   the brand. The customer's colour is still spent, but on the monogram
   fallback only, where there is no mark to compete with. The product accent
   is not up for grabs either way: the design system gives the orange 100 %
   of the brand energy, so a tenant that repainted it would leave the product
   with no voice. */
/* A WIDE slot, not a square. Almost every client mark is a wordmark, and
   `contain` inside a square shrank the whole word to fit the height —
   legible as a shape, unreadable as a name. 132x48 is close to the 2.75:1
   aspect a horizontal lockup wants, and it fills the row it sits in rather
   than floating in it. A square mark simply centres and loses nothing. */
.brand-customer-logo {
  position: relative;
  width: 132px;
  height: 48px;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

/* The monogram is the fallback, and it is a real one: a tenant with no block
   in brand/customers.css still reads as its initials rather than as a broken
   image. It sits UNDER the art layer. */
.brand-customer-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-alt);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--brand-customer-tint);
}

/* The art layer. `--brand-customer-logo` defaults to `none`, so with no
   block this paints nothing at all and the monogram below shows through.
   With a block it carries `var(--brand-tile)`, whose opaque colour covers
   the monogram — which is why a logo with a transparent background never
   shows two identities at once.
   `background-origin` comes AFTER the shorthand on purpose: the shorthand
   resets every background longhand, so setting it first would be undone. */
.brand-customer-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 6px 9px;
  box-sizing: border-box;
  background: var(--brand-customer-logo);
  background-origin: content-box;
}

.brand-customer-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brand-customer-name code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.brand-customer:hover .brand-customer-name code { color: var(--accent); }

a.brand-customer:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

/* The design system's recurring eyebrow: small, tracked-out caps above a
   name. It is the one typographic mannerism worth carrying from the
   marketing layer into the product, because a dense page needs a way to
   label a value without spending a whole line on prose. */
.brand-eyebrow {
  font-family: var(--font-alt);
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ============================================================
   The one glow
   ============================================================ */

/* The signature orange bloom. The design system's own product kit draws it
   zero times — it is section decoration for a marketing page, and a console
   has no sections. Sign-in is the exception: it is the one screen in this
   product that is nothing but identity, so it gets the brand moment and no
   other screen does. */
/* It is a BACKGROUND, so it has to behave like one, and it did not:

   `z-index: 0` on a fixed element puts it above every STATIC element in the
   same stacking context — and `.login-card` was static — so the glow painted
   over the card and washed its lower half brown. `z-index: -1` is NOT the
   fix: `html` and `body` both carry `background: var(--bg)`, so html's
   propagates to the canvas and body keeps its own, which then paints over
   anything negative. The card is raised out of the way instead (see the
   surfaces section below).

   `inset: auto 0 0 0; height: 46vh` made the element shorter than the
   gradient it carried (414px box, 828px gradient), and a background is
   clipped by its own element — which is where the hard horizontal seam
   across the viewport came from. It spans the viewport now and the gradient
   is anchored to the bottom, so nothing cuts it. */
.brand-bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--glow-bloom);
  background-size: min(140vmin, 170vw) min(92vmin, 62vh);
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .brand-bloom { opacity: 0.35; }
}

/* ============================================================
   Where the lockups meet the surfaces
   ============================================================ */

/* These few rules live with the brand rather than with the surface CSS on
   purpose: they exist only to host a `.brand-*` component, so someone
   changing a lockup finds everything it touches in one file. */

/* Customer picker: the tile is the row's subject, so the row loses its own
   text padding on the left and lets the lockup set the rhythm. */
.customer-btn-lockup {
  padding: 10px 14px;
}

/* Customer hub: the tenant IS the page title. The lockup replaces a bare
   <code> slug, so the heading drops its own type — the lockup owns it. */
.hub-title {
  margin-bottom: 1.25rem;
}

.hub-title .brand-customer-logo {
  width: 190px;
  height: 68px;
  border-radius: var(--r-md);
}

.hub-title .brand-customer-name code {
  font-size: 1.15rem;
  font-weight: var(--fw-semibold);
}

.hub-title .brand-customer-monogram { font-size: 1.35rem; }

/* Session header: the smallest identity slot in the product. The dot was
   already there — it just pointed at the product accent, so every tenant
   looked the same in the one place an operator switches between them. */
.customer-badge::before {
  background: var(--brand-customer-tint);
  box-shadow: 0 0 8px color-mix(in oklch, var(--brand-customer-tint) 45%, transparent);
}

/* The sign-in card has to out-stack the glow behind it. A static element
   loses to any positioned one, whatever its z-index, so the card takes a
   position of its own rather than the glow taking a negative index it
   cannot win from. */
.login-card {
  position: relative;
  z-index: 1;
}

/* PBX diagram: the product lockup leads the top bar, then the back-link.
   The bar is a flex row whose `.signed-in` child takes the free space, so
   the two only need a gap between them. */
.pbx-topbar .brand-product { margin-right: 0.35rem; }