/* =====================================================================
   css/brandv2.app.css -- BRAND SYSTEM V2: app chrome + HOME restyle.
   Wave 1, flag-gated. Loaded AFTER css/premium.css so equal-or-higher
   specificity rules win by cascade order.

   LAW
   - EVERY selector is scoped under html.brand-v2 -- zero rules match
     when the flag is off.
   - Tokens only (public names: --surface/--line/--accent/...). Raw hex
     is BANNED here; rgba() appears exclusively for shadow/scrim/glass
     alpha values (spec section 5 elevation recipe uses rgba(6,42,44)).
   - CSS only: restyles EXISTING markup (js/home.js .uh-* family, the
     app.html .bnav/.fab/.modal shell). No renamed ids/classes assumed.
     The shared asset card (balenHome.assetCardHtml) also renders inside
     the org asset selector (app.js renderAssetPicker) -- every asset-card
     rule below works on both surfaces because both use .uh-asset-grid.
   - Photography: the MY ASSETS media overlay is a LOCALIZED bottom band
     (behind the serif name only) -- the image itself is NEVER filtered
     or darkened as a whole. Workspace-hero overlay math stays owned by
     balenAssetHero.heroCssVars (not this file).
   - Motion: 160ms micro / 240ms sheets, cubic-bezier(.2,.7,.3,1);
     every transition is disabled under prefers-reduced-motion.
   - Balo: the Home greeting strip (.bv2-balo-strip) is the ONE Balo
     presence on Home; the legacy v1 cartoon inside .uh-balo-fab is
     hidden under the flag (v1 art is off-brand for V2 per spec 1).
   ===================================================================== */

/* ---- 1. HOME header: Newsreader greeting + calmer command bar ------- */

html.brand-v2 .uh-greet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
}
html.brand-v2 .uh-name {
  font-family: var(--font-serif);
  font-weight: 550;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
@media (min-width: 1024px) {
  html.brand-v2 .uh-name { font-size: 34px; }
}
html.brand-v2 .uh-date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

/* Official tile mark chip (28px, spec 7 HOME). Markup is the
   integrator's flag-gated home.js branch; class reserved here. */
html.brand-v2 .bv2-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
}

/* Command bar: quiet ghost controls -- chrome recedes, content leads. */
html.brand-v2 .uh-cmdbar .uh-cmd,
html.brand-v2 .uh-bell {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-secondary);
  transition: background-color 160ms cubic-bezier(.2, .7, .3, 1),
              transform 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .uh-cmdbar .uh-cmd:hover,
  html.brand-v2 .uh-bell:hover { background: var(--surface-2); }
}
html.brand-v2 .uh-cmdbar .uh-cmd:active,
html.brand-v2 .uh-bell:active { transform: scale(.94); }
html.brand-v2 .uh-qa-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
}
@media (hover: hover) {
  html.brand-v2 .uh-qa-btn:hover { background: var(--surface-2); }
}
html.brand-v2 .uh-avatar {
  border: 1px solid var(--line);
  background: var(--accent-tint);
}
html.brand-v2 .uh-avatar-ini { color: var(--accent-text, var(--accent)); }
html.brand-v2 .uh-ctx-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ---- 2. Balo greeting strip (.bv2-balo-strip) ------------------------
   One quiet line under the header: 32px circular avatar chip from
   /assets/balo/v2/, one deterministic sentence, chevron. Surface-2,
   never a card centerpiece. Markup: integrator branch in home.js. */

html.brand-v2 .bv2-balo-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(.2, .7, .3, 1),
              border-color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .bv2-balo-strip:hover {
    background: var(--accent-tint);
    border-color: var(--line);
  }
}
html.brand-v2 .bv2-balo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
  filter: none; /* Balo law: no CSS filters, no recolor */
}
html.brand-v2 .bv2-balo-line {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text-secondary);
  /* Balo's sentence is the point of the strip: let it wrap to two calm
     lines instead of truncating mid-thought. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}
html.brand-v2 .bv2-balo-chev {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 16px;
}

/* ---- 3. Section headers: 13px caps, +0.08em, tertiary --------------- */

html.brand-v2 .uh-sec,
html.brand-v2 .uh-x-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
@media (min-width: 1024px) {
  html.brand-v2 .uh-sec { font-size: 13px; }
}

/* ---- 4. TODAY tiles: premium cards ----------------------------------
   16px radius, spec elevation, 20/24 padding, mono money. */

html.brand-v2 .uh-tile {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
  padding: 20px;
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 160ms cubic-bezier(.2, .7, .3, 1),
              border-color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (min-width: 1024px) {
  html.brand-v2 .uh-tile { padding: 24px; }
}
@media (hover: hover) {
  html.brand-v2 .uh-tile.uh-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(6, 42, 44, .06), 0 14px 32px rgba(6, 42, 44, .10);
  }
}
html.brand-v2 .uh-chip { border-radius: 10px; }
html.brand-v2 .uh-tile-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
/* Money law: mono + bold + tabular-nums; per-currency lines stay
   one-per-line (the builder emits them as separate blocks). */
html.brand-v2 .uh-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
html.brand-v2 .uh-mini-when {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
html.brand-v2 .uh-mini-row { border-top: 1px solid var(--line); }
html.brand-v2 .uh-tile-link {
  font-weight: 600;
  color: var(--accent-text, var(--accent));
}
html.brand-v2 .uh-view-all {
  font-weight: 600;
  color: var(--accent-text, var(--accent));
}
html.brand-v2 .uh-skel { background: var(--surface-2); }
html.brand-v2 .uh-other-orgs {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* ---- 5. WHAT'S HAPPENING card ---------------------------------------- */

html.brand-v2 .uh-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
}
html.brand-v2 .uh-hap-chip { border-radius: 10px; }

/* ---- 6. MY ASSETS: photography-hero cards -----------------------------
   The shared card (Home + org asset selector) becomes media-first:
   full-width 16:10 uh-thumb on top, serif asset name overlaid on a
   LOCALIZED bottom gradient band (behind text only -- the photo is never
   darkened as a whole), meta text below on the card surface.
   Existing DOM order (thumb, main, right) maps onto a 2-column grid.
   The name is lifted onto the media with container-query units:
   media bottom sits at 62.5cqw (16:10 => height = width * 0.625). */

html.brand-v2 .uh-asset-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
  container-type: inline-size;
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 160ms cubic-bezier(.2, .7, .3, 1),
              border-color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .uh-asset-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(6, 42, 44, .06), 0 14px 32px rgba(6, 42, 44, .10);
  }
}
html.brand-v2 .uh-asset-row:active { transform: translateY(0) scale(.99); }
html.brand-v2 .uh-asset-grid { gap: 16px; }
@media (min-width: 1024px) {
  html.brand-v2 .uh-asset-grid { gap: 20px; }
}

/* Media: full-bleed 16:10 hero. Async photo fills (resolveThumbs)
   replace innerHTML only, so the band pseudo-element survives. */
html.brand-v2 .uh-asset-row .uh-thumb {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--surface-2);
}
/* Localized bottom gradient band -- behind the overlay text ONLY,
   bottom-anchored, never a full-image darken (photography law). */
html.brand-v2 .uh-asset-row .uh-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(6, 42, 44, .68) 0%,
    rgba(6, 42, 44, .30) 55%,
    rgba(6, 42, 44, 0) 100%);
}
html.brand-v2 .uh-asset-row .uh-thumb-glyph svg { width: 44px; height: 44px; }

/* Serif name overlay: absolutely anchored to the media bottom edge
   (top = media height in cqw), translated up by its own height so
   multi-line names grow upward over the band. White over the scrim in
   BOTH themes (the scrim is theme-invariant dark teal). */
html.brand-v2 .uh-asset-row .uh-asset-name {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  top: 62.5cqw;
  transform: translateY(calc(-100% - 12px));
  font-family: var(--font-serif);
  font-weight: 550;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .98);
  text-shadow: 0 1px 2px rgba(6, 42, 44, .35);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 1024px) {
  html.brand-v2 .uh-asset-row .uh-asset-name { font-size: 24px; }
}

/* Glass live chip riding on the overlay (inside .uh-asset-name). */
html.brand-v2 .uh-asset-row .uh-live-chip {
  vertical-align: 4px;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-shadow: none;
}
html.brand-v2 .uh-asset-row .uh-x-chip {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .98);
}

/* Meta block below the media, on the card surface. */
html.brand-v2 .uh-asset-row .uh-asset-main {
  min-width: 0;
  padding: 14px 18px 16px;
}
html.brand-v2 .uh-asset-row .uh-asset-sub {
  margin-top: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
html.brand-v2 .uh-asset-row .uh-asset-next {
  font-size: 13px;
  margin-top: 4px;
  color: var(--text-tertiary);
}
html.brand-v2 .uh-asset-row .uh-asset-right {
  padding: 14px 18px 16px 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
html.brand-v2 .uh-asset-row .uh-chev { color: var(--text-tertiary); }

/* Org group header + summary line under the new section rhythm. */
html.brand-v2 .uh-org-name {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
html.brand-v2 .uh-org-sum { color: var(--text-tertiary); }

/* ---- 7. Bottom nav ------------------------------------------------------
   The LIVE bar is the app.html "BOTTOM BAR -- locked spec" block
   (~app.html:2048): every property is pinned with !important on
   --bz-* aliases, and the legacy floating .fab is display:none
   !important (app.html:2202) -- the real FAB is the in-bar .bnav-fab.
   Overrides below therefore need !important + the scope class to win;
   z-index/stacking (bar 50, quickadd-open frame 170) is untouched. */

html.brand-v2 .bnav {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -8px 24px rgba(6, 42, 44, .06) !important;
}
html.brand-v2 .bnav-tab {
  color: var(--text-tertiary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}
html.brand-v2 .bnav-tab-icon { color: var(--text-tertiary) !important; }
html.brand-v2 .bnav-tab.on {
  color: var(--accent-text, var(--accent)) !important;
  font-weight: 600 !important;
}
html.brand-v2 .bnav-tab.on .bnav-tab-icon {
  color: var(--accent-text, var(--accent)) !important;
}

/* ---- 8. FAB (in-bar center .bnav-fab) -----------------------------------
   Brand accent fill; --accent-on is the one token guaranteed to
   contrast on an accent fill in both themes (app.html contract). */

html.brand-v2 .bnav-fab {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  box-shadow: 0 2px 4px rgba(6, 42, 44, .12), 0 14px 32px rgba(6, 42, 44, .22) !important;
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 160ms cubic-bezier(.2, .7, .3, 1) !important;
}
html.brand-v2 .bnav-fab:active {
  transform: scale(.95) !important;
  background: var(--accent-press) !important;
}

/* Quick-add sheet: 24px top radius, token surfaces. */
html.brand-v2 .fab-sheet {
  background: var(--surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -12px 48px rgba(6, 42, 44, .16);
}
html.brand-v2 .fab-sheet::before { background: var(--line); }
html.brand-v2 .fab-sheet-row {
  color: var(--text-primary);
  border-radius: 12px;
  transition: background-color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .fab-sheet-row:hover { background: var(--surface-2); }
}
html.brand-v2 .fab-sheet-row-icon {
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-text, var(--accent));
}
html.brand-v2 .fab-sheet-row-title { color: var(--text-primary); }
html.brand-v2 .fab-sheet-row-sub { color: var(--text-tertiary); }
html.brand-v2 .fab-sheet-header { border-bottom: 1px solid var(--line); }
html.brand-v2 .fab-sheet-title { color: var(--text-primary); }
html.brand-v2 .fab-sheet-sub { color: var(--text-tertiary); }
html.brand-v2 .fab-sheet-row-cancel { color: var(--text-tertiary); }
html.brand-v2 .fab-sheet-overlay { background: rgba(6, 20, 21, .40); }

/* ---- 9. Modal shell: 24px top radius, token surfaces ------------------ */

html.brand-v2 .modal-overlay { background: rgba(6, 20, 21, .50); }
html.brand-v2 .modal {
  background: var(--surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -12px 48px rgba(6, 42, 44, .18);
}
html.brand-v2 .modal::before { background: var(--line); }
html.brand-v2 .modal-title { color: var(--text-primary); }
html.brand-v2 .modal-close { color: var(--text-tertiary); }
@media (hover: hover) {
  html.brand-v2 .modal-close:hover {
    background: var(--surface-2);
    color: var(--text-primary);
  }
}
@media (min-width: 600px) {
  html.brand-v2 .modal { border-radius: 24px; }
}

/* ---- 10. Home Balo FAB + sheet ----------------------------------------
   Balo law: the greeting strip is the ONE Balo presence on Home, and
   the v1 cartoon art is off-brand for V2 -- hide the legacy img (inline
   style needs !important) and show a quiet spark glyph instead. The
   button stays the Ask Balo entry seam (_openBalo). z-index untouched. */

html.brand-v2 .uh-balo-fab {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .08), 0 10px 28px rgba(6, 42, 44, .16);
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 160ms cubic-bezier(.2, .7, .3, 1);
}
html.brand-v2 .uh-balo-fab:active { transform: scale(.94); }
html.brand-v2 .uh-balo-fab img { display: none !important; }
html.brand-v2 .uh-balo-fab::after {
  content: "\2731";
  font-size: 19px;
  line-height: 1;
  color: var(--accent-text, var(--accent));
}
html.brand-v2 .uh-balo-overlay { background: rgba(6, 20, 21, .50); }
html.brand-v2 .uh-balo-sheet {
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 -12px 48px rgba(6, 42, 44, .18);
}
html.brand-v2 .uh-balo-close {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* ---- 11. Focus rings (AA both themes) --------------------------------- */

html.brand-v2 .uh-clickable:focus-visible,
html.brand-v2 .uh-asset-row:focus-visible,
html.brand-v2 .uh-cmdbar .uh-cmd:focus-visible,
html.brand-v2 .uh-bell:focus-visible,
html.brand-v2 .uh-avatar:focus-visible,
html.brand-v2 .uh-qa-btn:focus-visible,
html.brand-v2 .bnav-tab:focus-visible,
html.brand-v2 .bnav-fab:focus-visible,
html.brand-v2 .fab-sheet-row:focus-visible,
html.brand-v2 .modal-close:focus-visible,
html.brand-v2 .uh-balo-fab:focus-visible,
html.brand-v2 .uh-balo-close:focus-visible,
html.brand-v2 .bv2-balo-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 12. Dark theme: shadows become lines + lighter surfaces ---------- */

html.brand-v2[data-theme="dark"] .uh-tile,
html.brand-v2[data-theme="dark"] .uh-card,
html.brand-v2[data-theme="dark"] .uh-asset-row,
html.brand-v2[data-theme="dark"] .uh-other-orgs {
  box-shadow: none;
  border-color: var(--line);
}
@media (hover: hover) {
  html.brand-v2[data-theme="dark"] .uh-tile.uh-clickable:hover,
  html.brand-v2[data-theme="dark"] .uh-asset-row:hover {
    box-shadow: none;
    background: var(--surface-2);
  }
}
html.brand-v2[data-theme="dark"] .bnav { box-shadow: none !important; }
html.brand-v2[data-theme="dark"] .bnav-fab {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important;
}
html.brand-v2[data-theme="dark"] .fab-sheet,
html.brand-v2[data-theme="dark"] .modal,
html.brand-v2[data-theme="dark"] .uh-balo-sheet {
  box-shadow: 0 -12px 48px rgba(0, 0, 0, .55);
  border-top: 1px solid var(--line);
}
html.brand-v2[data-theme="dark"] .uh-balo-fab {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
html.brand-v2[data-theme="dark"] .modal-overlay,
html.brand-v2[data-theme="dark"] .fab-sheet-overlay,
html.brand-v2[data-theme="dark"] .uh-balo-overlay {
  background: rgba(0, 0, 0, .60);
}
/* The media overlay band + white serif name are theme-invariant (dark
   teal scrim under white text clears AA in both themes) -- no dark
   variant needed for .uh-thumb::after / .uh-asset-name. */

/* ---- 13. Reduced motion: kill every transition/transform we author --- */

@media (prefers-reduced-motion: reduce) {
  html.brand-v2 .uh-tile,
  html.brand-v2 .uh-asset-row,
  html.brand-v2 .uh-cmdbar .uh-cmd,
  html.brand-v2 .uh-bell,
  html.brand-v2 .bnav-tab,
  html.brand-v2 .fab-sheet-row,
  html.brand-v2 .uh-balo-fab,
  html.brand-v2 .bv2-balo-strip {
    transition: none;
  }
  html.brand-v2 .bnav-fab { transition: none !important; }
  html.brand-v2 .uh-tile.uh-clickable:hover,
  html.brand-v2 .uh-asset-row:hover,
  html.brand-v2 .uh-tile.uh-clickable:active,
  html.brand-v2 .uh-asset-row:active,
  html.brand-v2 .uh-cmdbar .uh-cmd:active,
  html.brand-v2 .uh-bell:active,
  html.brand-v2 .uh-balo-fab:active {
    transform: none;
  }
  html.brand-v2 .bnav-fab:active { transform: none !important; }
}

/* ---- 12. Ask Balo sheet (.bv2-ask-*) ----------------------------------
   The flagship conversational-card surface (js/brand-v2-ask-balo.js),
   rendered inside the existing .uh-balo-sheet. Cards, not chat bubbles.
   One Balo avatar (greeting) only; answer cards carry no mascot. */

html.brand-v2 .uh-balo-sheet {
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px 20px 28px;
}
html.brand-v2 .bv2-ask {
  display: block;
  font-family: var(--font-sans);
  color: var(--text-primary);
}
html.brand-v2 .bv2-ask-greeting {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 2px 36px 16px 0; /* right gap clears the sheet close button */
}
html.brand-v2 .bv2-ask-avatar { flex: 0 0 auto; }
html.brand-v2 .bv2-ask-avatar img {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-tint);
}
html.brand-v2 .bv2-ask-greeting-main { flex: 1; min-width: 0; }
html.brand-v2 .bv2-ask-headline {
  font-family: var(--font-serif) !important;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-optical-sizing: auto;
}
html.brand-v2 .bv2-ask-greet-line {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}
html.brand-v2 .bv2-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
html.brand-v2 .bv2-ask-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  max-width: 100%;
  transition: background-color 160ms cubic-bezier(.2, .7, .3, 1),
              border-color 160ms cubic-bezier(.2, .7, .3, 1),
              color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .bv2-ask-chip:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
  }
}
html.brand-v2 .bv2-ask-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
html.brand-v2 .bv2-ask-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html.brand-v2 .bv2-ask-answer { min-height: 8px; }
html.brand-v2 .bv2-ask-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
  padding: 18px 18px 14px;
  margin: 0 0 10px;
}
html.brand-v2 .bv2-ask-card-title {
  font-family: var(--font-serif) !important;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 10px;
  font-optical-sizing: auto;
}
html.brand-v2 .bv2-ask-section { margin: 0 0 12px; }
html.brand-v2 .bv2-ask-section:last-of-type { margin-bottom: 4px; }
html.brand-v2 .bv2-ask-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 5px;
}
html.brand-v2 .bv2-ask-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
html.brand-v2 .bv2-ask-row-main {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-primary);
}
html.brand-v2 .bv2-ask-row-meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}
html.brand-v2 .bv2-ask-money-line {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  padding: 1px 0;
}
html.brand-v2 .bv2-ask-prov {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-tertiary);
}
html.brand-v2 .bv2-ask-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
html.brand-v2 .bv2-ask-thinking-dots { display: inline-flex; gap: 4px; }
html.brand-v2 .bv2-ask-thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .35;
  animation: bv2-ask-dot 900ms cubic-bezier(.2, .7, .3, 1) infinite;
}
html.brand-v2 .bv2-ask-thinking-dots span:nth-child(2) { animation-delay: 150ms; }
html.brand-v2 .bv2-ask-thinking-dots span:nth-child(3) { animation-delay: 300ms; }
@keyframes bv2-ask-dot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Dark theme: Ask Balo materials. */
html.brand-v2[data-theme="dark"] .bv2-ask-card {
  box-shadow: none;
  border-color: var(--line);
  background: var(--surface-2);
}
html.brand-v2[data-theme="dark"] .bv2-ask-chip {
  background: var(--surface-2);
}
html.brand-v2[data-theme="dark"] .bv2-ask-avatar img {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-tint);
}

/* Reduced motion: the thinking dots hold still. */
@media (prefers-reduced-motion: reduce) {
  html.brand-v2 .bv2-ask-thinking-dots span { animation: none; opacity: .7; }
}

/* ---- 14. Critique round 1 fixes (panel consensus) --------------------- */

/* P1 (Apple/Stripe/Linear/Porsche/Pixar): dark-theme SELECTED chip was
   dark ink on a dark pill (the later dark chip rule overrode the fill
   but not the label). Solid accent fill + dark ink, clearly heavier
   than idle chips. Dark accent #4FB3AC vs --accent-on #06282A = 7.0:1. */
html.brand-v2[data-theme="dark"] .bv2-ask-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

/* P1 (Linear/Pixar) + P2 (Porsche): photo-LESS asset cards rendered a
   ~400px empty gradient void with one small glyph, inflating Home by
   ~44% and washing white names over a pale band (SUNSHINE 2.5:1).
   Cards without a real photograph collapse to a compact 120px band
   with a deeper, flatter localized band behind the name (white name
   on rgba(6,42,44,.78) clears AA large-text in both themes).
   Photo cards and the pinned overlay geometry are untouched -- the
   selector excludes any thumb containing an <img>. */
html.brand-v2 .uh-asset-row:not(:has(.uh-thumb img)) .uh-thumb {
  aspect-ratio: auto;
  height: 120px;
}
html.brand-v2 .uh-asset-row:not(:has(.uh-thumb img)) .uh-thumb::after {
  height: 70%;
  background: linear-gradient(to top,
    rgba(6, 42, 44, .78) 0%,
    rgba(6, 42, 44, .44) 60%,
    rgba(6, 42, 44, .08) 100%);
}
html.brand-v2 .uh-asset-row:not(:has(.uh-thumb img)) .uh-asset-name {
  top: 120px;
}

/* P2 (Pixar): desktop full-width photo cards had no height clamp (a
   single-asset card rendered a ~1400px hero). Clamp the media and keep
   the name anchored to the real media bottom edge. */
html.brand-v2 .uh-asset-row .uh-thumb { overflow: hidden; }
html.brand-v2 .uh-asset-row .uh-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  html.brand-v2 .uh-asset-row .uh-thumb { max-height: 420px; }
  html.brand-v2 .uh-asset-row .uh-asset-name { top: min(62.5cqw, 420px); }
}

/* ---- 15. Correction mission: one brand hierarchy ----------------------- */

/* Home: the greeting strip IS the Balo entry -- the redundant FAB (same
   sheet, second Balo presence) is retired under V2. */
html.brand-v2 .uh-balo-fab { display: none !important; }

/* The strip graduates from notification-bar to intentional insight card:
   surface card, overline identity, larger avatar, primary-ink insight. */
html.brand-v2 .bv2-balo-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  margin: 14px 0 0;
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
}
html.brand-v2 .bv2-balo-avatar { width: 36px; height: 36px; }
html.brand-v2 .bv2-balo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
html.brand-v2 .bv2-balo-overline {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
}
html.brand-v2 .bv2-balo-line {
  font-size: 14.5px;
  color: var(--text-primary);
}
html.brand-v2[data-theme="dark"] .bv2-balo-strip { box-shadow: none; background: var(--surface-2); }

/* Wordmark typography aligned to the approved board (BALEN, tracked caps).
   Glyphs unchanged; treatment only. Applies wherever the wordmark renders
   next to the mark (global header + auth hero). */
html.brand-v2 .hero-brand-wordmark,
html.brand-v2 .auth-hero-wordmark {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
html.brand-v2 .balen-wordmark-tld { opacity: .55; }

/* Auth: the official tile needs no white plate behind it -- the tile IS
   the container. Plate becomes a neutral holder. */
html.brand-v2 .auth-hero-logo-plate {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* Auth Balo welcome (BALO_SYSTEM 'Welcome'): one calm circular portrait
   chip + one line. Photography-real, never cartoon. */
html.brand-v2 .bv2-auth-guide {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
html.brand-v2 .bv2-auth-balo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px rgba(4, 18, 18, .35);
}
html.brand-v2 .bv2-auth-balo-line {
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 34ch;
}

/* Shared Balo state figure (BALO_SYSTEM): empty/calm/welcome pattern. */
html.brand-v2 .bv2-balo-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
}
html.brand-v2 .bv2-balo-state-line {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
html.brand-v2 .bv2-balo-state-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
html.brand-v2[data-theme="dark"] .bv2-balo-state { box-shadow: none; background: var(--surface-2); }

/* Ask Balo gentle guidance hint (photo prompts etc.) */
html.brand-v2 .bv2-ask-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* ---- 16. Assets page (portfolio) V2 card grid -------------------------- */

/* The org section hosts the SAME shared visual card Home uses; the grid
   is responsive: 1-col mobile, 2-col >=720px, 3-col >=1200px. */
html.brand-v2 .bv2-pf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 4px 14px 14px;
}
@media (min-width: 720px) {
  html.brand-v2 .bv2-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  html.brand-v2 .bv2-pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html.brand-v2 .bv2-pf-cell { min-width: 0; }
/* Card fills its cell; the shared media-first treatment (section 6)
   applies unchanged. Filtered-out cells hide via [data-pf-row]. */
html.brand-v2 .bv2-pf-cell > .uh-asset-row { height: 100%; }
/* Inside an org card the grid cards sit on the card surface: give them
   a hairline so they read as objects on both themes. */
html.brand-v2 .bv2-pf-cell > .uh-asset-row {
  border: 1px solid var(--line);
}

/* ---- 17. Brand Book lockup law (identity migration) ------------------- */

/* The official wordmark is BALEN -- tracked caps, no product-domain
   suffix in the lockup. The ".app" tld is Classic-only. */
html.brand-v2 .balen-wordmark-tld { display: none; }
html.brand-v2 .hero-brand-wordmark,
html.brand-v2 .auth-hero-wordmark {
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 500;
}
/* Clear space: the gap between mark and wordmark is ~half the mark
   width (Brand Book proportion), and the mark never renders below
   20px. Sizing classes stay owned by app.html (.balen-logo-md etc). */
html.brand-v2 .hero-brand { gap: 14px; align-items: center; }
html.brand-v2 .hero-brand .balen-logo { min-width: 20px; min-height: 20px; }

/* Auth lockup: mark | BALEN over tagline (Brand Book lockup shape). */
html.brand-v2 .auth-hero-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
}
html.brand-v2 .auth-hero-brand .auth-hero-logo-plate { grid-row: 1 / span 2; }
html.brand-v2 .bv2-tagline {
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 251, 251, .72);
  white-space: nowrap;
}

/* ---- 18. Hero header (approved concept) + Balo attention center -------- */

/* BELL REMOVAL (decision 2026-07-27): Balo is the single attention
   authority. Home command-bar bell + the hero/workspace nav bells are
   retired under V2; no placeholder space remains (flex gaps collapse). */
html.brand-v2 .uh-bell { display: none !important; }
html.brand-v2 .hero-icon-btn[aria-label="Notifications"] { display: none !important; }

/* The context strip's data now lives in the metric cards. */
html.brand-v2 .uh-ctx { display: none !important; }

/* Header grid: desktop 3 zones (brand | personal | operating), the
   metric row under the operating zone; purpose-built mobile stack. */
html.brand-v2 .uh-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand personal actions"
    "brand personal metrics";
  align-items: start;
  column-gap: 28px;
  row-gap: 10px;
  padding-top: 8px;
}
html.brand-v2 .bv2-brand-zone { grid-area: brand; }
html.brand-v2 .uh-avatar { grid-area: personal; }
html.brand-v2 .uh-head-main { grid-area: personal; margin-left: 64px; }
html.brand-v2 .uh-head-right { grid-area: actions; justify-self: end; }
html.brand-v2 .bv2-metrics { grid-area: metrics; justify-self: end; }

/* Brand zone: official assets only. Mark ~72px desktop; wordmark image
   below; approved descriptor under it. Theme variants toggle by class. */
html.brand-v2 .bv2-brand-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 150px;
}
html.brand-v2 .bv2-bz-mark { width: 72px; height: 72px; object-fit: contain; display: block; }
html.brand-v2 .bv2-bz-word { width: 132px; height: auto; display: block; }
html.brand-v2 .bv2-bz-tagline {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  white-space: nowrap;
}
html.brand-v2 .bv2-on-dark { display: none; }
html.brand-v2[data-theme="dark"] .bv2-on-light { display: none; }
html.brand-v2[data-theme="dark"] .bv2-on-dark { display: block; }

/* Metric cards: real data, quiet chrome, obvious click affordance. */
html.brand-v2 .bv2-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, auto));
  gap: 10px;
}
html.brand-v2 .bv2-m-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 42, 44, .05), 0 8px 24px rgba(6, 42, 44, .07);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 160ms cubic-bezier(.2, .7, .3, 1);
}
html.brand-v2 .bv2-m-card.is-static { cursor: default; }
@media (hover: hover) {
  html.brand-v2 .bv2-m-card:not(.is-static):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(6, 42, 44, .06), 0 14px 32px rgba(6, 42, 44, .10);
  }
}
html.brand-v2 .bv2-m-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-primary);
}
html.brand-v2 .bv2-m-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
html.brand-v2 .bv2-m-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
}
html.brand-v2 .bv2-m-card.is-attn .bv2-m-num { color: var(--accent-text, var(--accent)); }
html.brand-v2 .bv2-m-card.is-ok .bv2-m-num { color: var(--pos-text, var(--accent-text)); }
html.brand-v2[data-theme="dark"] .bv2-m-card { box-shadow: none; background: var(--surface-2); }

/* Balo strip CTA */
html.brand-v2 .bv2-balo-cta {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attention center rows (inside the Ask Balo sheet). */
html.brand-v2 .bv2-att-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
html.brand-v2 .bv2-att-row:first-of-type { border-top: 0; }
html.brand-v2 .bv2-att-main { flex: 1; min-width: 0; }
html.brand-v2 .bv2-att-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
html.brand-v2 .bv2-att-explain {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 1px;
}
html.brand-v2 .bv2-att-ctx {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
html.brand-v2 .bv2-att-act {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) {
  html.brand-v2 .bv2-att-act:hover { background: var(--accent-press); }
}
html.brand-v2 .bv2-att-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
}
html.brand-v2 .bv2-att-empty-line {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Atmospheric header background: ivory -> cool teal wash + one soft
   contour; pure CSS gradients (no rasters, no motion). Text sits on
   the page tokens above it -- contrast unchanged. */
html.brand-v2 .uh-root {
  position: relative;
}
html.brand-v2 .uh-root::before {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: -18px;
  height: 320px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(27, 107, 109, .07) 0%, rgba(27, 107, 109, 0) 55%),
    radial-gradient(90% 70% at 90% 10%, rgba(62, 155, 150, .06) 0%, rgba(62, 155, 150, 0) 60%),
    linear-gradient(180deg, rgba(238, 246, 245, .85) 0%, rgba(238, 246, 245, 0) 100%);
}
html.brand-v2[data-theme="dark"] .uh-root::before {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(79, 179, 172, .06) 0%, rgba(79, 179, 172, 0) 55%),
    linear-gradient(180deg, rgba(16, 25, 27, .8) 0%, rgba(16, 25, 27, 0) 100%);
}

/* Mobile: purpose-built stack (not a shrunken desktop hero). */
@media (max-width: 819px) {
  html.brand-v2 .uh-head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "personal personal"
      "metrics metrics";
    column-gap: 12px;
  }
  html.brand-v2 .bv2-brand-zone { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
  html.brand-v2 .bv2-bz-mark { width: 34px; height: 34px; }
  html.brand-v2 .bv2-bz-word { width: 86px; }
  html.brand-v2 .bv2-bz-tagline { display: none; }
  html.brand-v2 .uh-head-main { margin-left: 64px; }
  html.brand-v2 .bv2-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    width: 100%;
  }
  html.brand-v2 .bv2-m-card { width: 100%; }
}
@media (min-width: 820px) and (max-width: 1119px) {
  html.brand-v2 .bv2-metrics { grid-template-columns: repeat(2, minmax(96px, auto)); }
}

/* ---- 19. Curated asset-hero placeholders (display priority tier 3) ---- */

/* Branded atmospheric artwork per type -- SWAPPABLE files awaiting final
   designer / AI-hero art. Photo cards are untouched (an <img> always
   wins the priority chain in JS). */
html.brand-v2 .bv2-thumb-art {
  background-size: cover;
  background-position: center;
  position: relative;
}
html.brand-v2 .bv2-art-aircraft  { background-image: url(/assets/brand/v2/asset-heroes/aircraft.jpg); }
html.brand-v2 .bv2-art-boat      { background-image: url(/assets/brand/v2/asset-heroes/boat.jpg); }
html.brand-v2 .bv2-art-property  { background-image: url(/assets/brand/v2/asset-heroes/property.jpg); }
html.brand-v2 .bv2-art-vehicle   { background-image: url(/assets/brand/v2/asset-heroes/vehicle.jpg); }
html.brand-v2 .bv2-art-equipment { background-image: url(/assets/brand/v2/asset-heroes/equipment.jpg); }
html.brand-v2 .bv2-art-other     { background-image: url(/assets/brand/v2/asset-heroes/other.jpg); }

/* Artwork cards get a mid-height presentation: taller than the retired
   empty-gradient compact band, shorter than a real photo hero. The name
   anchor follows. */
html.brand-v2 .uh-asset-row:not(:has(.uh-thumb img)) .uh-thumb.bv2-thumb-art {
  height: 160px;
}
html.brand-v2 .uh-asset-row:has(.bv2-thumb-art) .uh-asset-name {
  top: 160px;
}

/* Elegant Add-photo affordance: glass pill, bottom-right, admin-only
   (markup-gated), opens Asset Settings directly. */
html.brand-v2 .bv2-addphoto {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 20, 20, .38);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) {
  html.brand-v2 .bv2-addphoto:hover { background: rgba(6, 20, 20, .55); }
}
html.brand-v2 .bv2-addphoto:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}