@brandlab-digital/site-next 3.8.0 → 3.10.0

package/dist/ui-kit/structure.css

@@ -120,4 +120,795 @@
     }
   }
 
+  /* 10-header.css */
+  /*
+   * F2 header and F3 panels: sticky and solid, modes by the header's own width, panels always in the HTML. The drawer's
+   * dialog sits inside the header's actions, so header rules reach their parts by structure, never by a bare slot name.
+   */
+
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(ul) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(p) {
+    margin: 0;
+  }
+  :where([data-bl='header'], [data-bl='drawer'], [data-bl='utility']) :where(a) {
+    color: inherit;
+  }
+  :where([data-bl='header'], [data-bl='drawer']) :where(button),
+  :where([data-bl='back-to-top']) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  /* F12: the skip link is the first focusable element, visible on focus. */
+  [data-bl='skip'] {
+    position: absolute;
+    inset-inline-start: 1rem;
+    top: 0.75rem;
+    z-index: 100;
+    translate: 0 -200%;
+    padding: 0.75rem 1rem;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='skip']:focus {
+    translate: 0 0;
+  }
+
+  /* The header never hides on scroll; its background is solid (a skin sets the colour, never transparency). */
+  [data-bl='header'] {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    container: bl-header / inline-size;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    max-width: var(--bl-container, 80rem);
+    min-height: var(--bl-header-bar-phone, 4rem);
+    margin-inline: auto;
+    padding-inline: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] :is(img, svg) {
+    display: block;
+    width: auto;
+    height: var(--bl-logo-h-phone, 40px);
+  }
+
+  /* The menu: hidden below 1280 px (the drawer takes over). */
+  [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
+    display: none;
+    flex: 1;
+    min-width: 0;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] > [data-slot='list'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+  }
+  [data-bl='header'][data-nav-align='end'] [data-slot='inner'] > [data-slot='nav'] > [data-slot='list'] {
+    justify-content: flex-end;
+  }
+  [data-bl='header'] [data-slot='item'] {
+    position: relative;
+  }
+  [data-bl='header'] [data-slot='itemRow'] {
+    display: flex;
+    align-items: center;
+  }
+  [data-bl='header'] [data-slot='item'] [data-slot='link'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 40px;
+  }
+  [data-bl='header'] [data-slot='trigger'] svg {
+    width: 1rem;
+    height: 1rem;
+    transition: rotate 150ms ease;
+  }
+  [data-bl='header'] [data-slot='trigger'][aria-expanded='true'] svg {
+    rotate: 180deg;
+  }
+
+  /*
+   * F3 panels: always in the server HTML. Closed panels are visibility: hidden (and inert once scripts run); before
+   * hydration, :hover and :focus-within open them. The offset gap is padding inside the panel's hover box, never a
+   * margin, so the pointer never crosses a dead gap. The 150 ms fade never decides hoverability: visibility flips at once.
+   */
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'] {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    z-index: 50;
+    translate: -50% 0;
+    padding-top: var(--bl-panel-gap, 0.75rem);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-state='open'],
+  [data-bl='header']:not([data-hydrated='true']) [data-slot='item']:is(:hover, :focus-within) > [data-slot='panel'] {
+    visibility: visible;
+    opacity: 1;
+  }
+  [data-bl='header'] [data-slot='panelBody'] {
+    width: 22rem;
+    max-width: calc(100vw - 2 * var(--bl-gutter, 1.25rem));
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  [data-bl='header'] [data-slot='panelLink'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.15rem 0.75rem;
+    min-height: 40px;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='panelLink'] svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  [data-bl='header'] [data-slot='panelText'] {
+    flex-basis: 100%;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'] [data-slot='panelBody'] {
+    display: grid;
+    grid-template-columns: repeat(var(--bl-panel-columns, 2), minmax(0, 1fr));
+    gap: 0 1.5rem;
+    width: 34rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'][data-columns='3'] [data-slot='panelBody'] {
+    --bl-panel-columns: 3;
+    width: 46rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns'] [data-slot='panelBody'] > [data-slot='panelList']:first-child {
+    grid-column: 1 / -1;
+  }
+  /* A columns panel without groups balances its one list. */
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns']:not([data-columns]) [data-slot='panelList'] {
+    columns: 2;
+    column-gap: 1.5rem;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='columns']:not([data-columns]) [data-slot='panelList'] > li {
+    break-inside: avoid;
+  }
+  [data-bl='header'] [data-slot='item'] > [data-slot='panel'][data-variant='featured'] [data-slot='panelBody'] {
+    display: grid;
+    grid-template-columns: 15rem minmax(0, 1fr);
+    gap: 1.25rem;
+    width: 38rem;
+  }
+  [data-bl='header'] [data-slot='featured'] {
+    display: grid;
+    align-content: start;
+    gap: 0.4rem;
+    text-decoration: none;
+  }
+  [data-bl='header'] [data-slot='featuredMedia'] {
+    display: block;
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+  }
+  [data-bl='header'] [data-slot='featuredMedia'] img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Actions: phone (icon left, its label above the number), quote, Menu. Below 1024 px a 44 px call button and Menu. */
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-inline-start: auto;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] {
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  [data-bl='header'][data-variant='standard'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='label'],
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] [data-slot='menuLabel'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='quote-button'] {
+    display: none;
+    white-space: nowrap;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    min-width: 44px;
+    min-height: 44px;
+  }
+  [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > :is([data-bl='phone-link'], [data-bl='quote-button'], [data-slot='menuButton']) svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* 1024 to 1279 px: the compact band. Logo, phone with its number, quote and Menu. */
+  @container bl-header (min-width: 1024px) {
+    [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
+      min-height: var(--bl-header-bar, 5rem);
+      gap: 1rem;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='logo'] :is(img, svg) {
+      height: var(--bl-logo-h, 52px);
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] {
+      display: inline-grid;
+      grid-template-columns: auto auto;
+      column-gap: 0.6rem;
+      align-items: center;
+      justify-content: start;
+      text-align: start;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='icon'] {
+      grid-row: span 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+    [data-bl='header'][data-variant='standard'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] :is([data-slot='label'], [data-slot='number']),
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] [data-slot='menuLabel'] {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      clip-path: none;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='label'] {
+      grid-column: 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='phone-link'] [data-slot='number'] {
+      grid-column: 2;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-bl='quote-button'] {
+      display: inline-flex;
+    }
+  }
+
+  /* 1280 px and up: the full menu. */
+  @container bl-header (min-width: 1280px) {
+    [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
+      display: block;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] {
+      margin-inline-start: 0;
+    }
+    [data-bl='header'] [data-slot='inner'] > [data-slot='actions'] > [data-slot='menuButton'] {
+      display: none;
+    }
+  }
+
+  /* 11-utility.css */
+  /* F5 utility bar: optional, above the header, scrolls away with the page; hidden below 768 px of its own width. */
+
+  [data-bl='utility'] {
+    container: bl-utility / inline-size;
+  }
+  [data-bl='utility'] > [data-slot='inner'] {
+    display: none;
+  }
+  @container bl-utility (min-width: 768px) {
+    [data-bl='utility'] > [data-slot='inner'] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1.5rem;
+      max-width: var(--bl-container, 80rem);
+      min-height: 2.25rem;
+      margin-inline: auto;
+      padding-inline: var(--bl-gutter, 1.25rem);
+    }
+  }
+  [data-bl='utility'][data-reverse='true'] > [data-slot='inner'] {
+    flex-direction: row-reverse;
+  }
+  [data-bl='utility'] [data-slot='left'],
+  [data-bl='utility'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 1.25rem;
+  }
+  [data-bl='utility'] :is([data-slot='rating'], [data-slot='licence']) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 24px;
+    text-decoration: none;
+  }
+  [data-bl='utility'] [data-slot='social'] {
+    gap: 0.25rem;
+  }
+  [data-bl='utility'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+  }
+  [data-bl='utility'] [data-slot='social'] svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* 12-drawer.css */
+  /*
+   * F4 drawer: a modal dialog of min(100%, 420px) from the end side (or full screen), its own scroll container. The page
+   * behind it is inert (native modal) and doesn't scroll while it is open.
+   */
+
+  /* The gutter stays when the scrollbar goes, so the header's width (and its mode) never changes as the drawer opens. */
+  :root:has(dialog[data-bl='drawer'][open]) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+
+  dialog[data-bl='drawer'] {
+    inset-block: 0;
+    width: min(100%, 420px);
+    max-width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+  }
+  dialog[data-bl='drawer'][data-side='start'] {
+    margin-inline: 0 auto;
+  }
+  dialog[data-bl='drawer'][data-variant='full'] {
+    width: 100%;
+    margin-inline: 0;
+  }
+  dialog[data-bl='drawer'] > [data-slot='panel'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  dialog[data-bl='drawer'][open] > [data-slot='panel'] {
+    animation: bl-drawer-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  dialog[data-bl='drawer'][data-side='start'][open] > [data-slot='panel'] {
+    animation-name: bl-drawer-in-start;
+  }
+  @keyframes bl-drawer-in {
+    from {
+      translate: 2rem 0;
+      opacity: 0;
+    }
+  }
+  @keyframes bl-drawer-in-start {
+    from {
+      translate: -2rem 0;
+      opacity: 0;
+    }
+  }
+
+  /* The close button comes first in the DOM and focus order; the row shows it at the end. */
+  dialog[data-bl='drawer'] [data-slot='top'] {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem var(--bl-gutter, 1.25rem);
+  }
+  dialog[data-bl='drawer'] [data-slot='close'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  dialog[data-bl='drawer'] [data-slot='close'] svg {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='title'] {
+    margin-inline-end: auto;
+  }
+  dialog[data-bl='drawer'] [data-slot='top'] > [data-slot='logo'] :is(img, svg) {
+    display: block;
+    width: auto;
+    height: 36px;
+  }
+  dialog[data-bl='drawer'] [data-slot='nav'] {
+    padding: 0.5rem var(--bl-gutter, 1.25rem) 1rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: 52px;
+    list-style: none;
+    cursor: pointer;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger']::-webkit-details-marker {
+    display: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='groupTrigger'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    transition: rotate 150ms ease;
+  }
+  dialog[data-bl='drawer'] [data-slot='group'][open] > [data-slot='groupTrigger'] svg {
+    rotate: 180deg;
+  }
+  dialog[data-bl='drawer'] :is([data-slot='link'], [data-slot='groupLink']) {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    text-decoration: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] {
+    display: grid;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding: 0.5rem var(--bl-gutter, 1.25rem) 1.25rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    display: flex;
+    justify-content: center;
+    min-height: 52px;
+    text-decoration: none;
+  }
+  dialog[data-bl='drawer'] [data-slot='actions'] svg {
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+  dialog[data-bl='drawer'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0 var(--bl-gutter, 1.25rem);
+  }
+  dialog[data-bl='drawer'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  dialog[data-bl='drawer'] [data-slot='social'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  /* 13-callbar.css */
+  /*
+   * F6 call bar: below 1024 px only, fixed to the bottom above the safe area. Hidden until the hero's call paths have
+   * scrolled out; the component sets --bl-callbar-height while it shows (scroll padding and back-to-top use it).
+   */
+
+  [data-bl='callbar'] {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 30;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem var(--bl-gutter, 1.25rem) max(0.5rem, env(safe-area-inset-bottom));
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    transition: translate 200ms ease, visibility 0s;
+  }
+  [data-bl='callbar'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: 1 1 0;
+    justify-content: center;
+    min-width: 0;
+    min-height: 48px;
+    text-decoration: none;
+  }
+  [data-bl='callbar'][data-variant='float'] {
+    inset-inline: auto 0;
+    justify-content: flex-end;
+    background: none;
+  }
+  [data-bl='callbar'][data-variant='float'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: none;
+  }
+  [data-bl='callbar'][data-state='hidden'] {
+    visibility: hidden;
+    translate: 0 100%;
+    transition: translate 200ms ease, visibility 0s linear 200ms;
+  }
+  @media (min-width: 1024px) {
+    [data-bl='callbar'] {
+      display: none;
+    }
+  }
+
+  /* 14-back-to-top.css */
+  /* F7 back-to-top: a 44 px button in a bottom corner, above the call bar while it shows. */
+
+  [data-bl='back-to-top'] {
+    --bl-back-to-top-offset: 1.25rem;
+    position: fixed;
+    inset-inline-end: var(--bl-back-to-top-offset);
+    bottom: max(
+      calc(var(--bl-callbar-height, 0px) + var(--bl-back-to-top-offset)),
+      calc(env(safe-area-inset-bottom) + var(--bl-back-to-top-offset))
+    );
+    z-index: 30;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    background: var(--bl-color-canvas, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    transition: opacity 150ms ease, bottom 200ms ease, visibility 0s;
+  }
+  [data-bl='back-to-top'][data-corner='start'] {
+    inset-inline: var(--bl-back-to-top-offset) auto;
+  }
+  [data-bl='back-to-top'][data-offset='small'] {
+    --bl-back-to-top-offset: 0.75rem;
+  }
+  [data-bl='back-to-top'][data-offset='large'] {
+    --bl-back-to-top-offset: 2rem;
+  }
+  [data-bl='back-to-top'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease, bottom 200ms ease, visibility 0s linear 150ms;
+  }
+  [data-bl='back-to-top'] svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* The skip-link and back-to-top target takes focus without a ring: it is a landmark, not a control. */
+  #main[tabindex='-1']:focus {
+    outline: none;
+  }
+
+  /* 20-form.css */
+  /* Quote form, photo upload and fields: layout and behaviour only. Labels sit above fields; one column below 640 px. */
+
+  /* A size container can't take its width from its content, so it fills its parent even inside a shrink-to-fit box. */
+  [data-bl='quote-form'] {
+    display: grid;
+    gap: 1.25rem;
+    inline-size: 100%;
+    container-type: inline-size;
+  }
+  [data-bl='quote-form'][data-density='compact'] {
+    gap: 0.875rem;
+  }
+  [data-bl='quote-form'] [data-slot='row'] {
+    display: grid;
+    gap: inherit;
+    grid-template-columns: minmax(0, 1fr);
+  }
+  @media (min-width: 640px) {
+    @container (min-width: 28rem) {
+      [data-bl='quote-form'] [data-slot='row'] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+  }
+
+  :where([data-bl='quote-form'], [data-bl='field'], [data-bl='photo-upload']) {
+    min-width: 0;
+  }
+  [data-bl='field'],
+  [data-bl='photo-upload'] {
+    display: grid;
+    gap: 0.375rem;
+    align-content: start;
+  }
+  :where([data-bl='quote-form'], [data-bl='field']) :where(input:not([type='file']), textarea, select) {
+    width: 100%;
+    min-height: 44px;
+    font: inherit;
+  }
+  :where([data-bl='quote-form'], [data-bl='field']) textarea {
+    resize: vertical;
+  }
+
+  /* The drop box: the label covers the whole box, so a tap anywhere opens the picker; the hidden input keeps focus. */
+  [data-bl='photo-upload'] [data-slot='drop'] {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+    border: 1px dashed var(--bl-color-line, currentColor);
+    border-radius: var(--bl-radius-control, 0);
+    cursor: pointer;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'][data-disabled='true'] {
+    cursor: not-allowed;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'][data-state='busy'] {
+    cursor: progress;
+  }
+  [data-bl='photo-upload'] [data-slot='drop']:has(input:focus-visible) {
+    outline: 2px solid var(--bl-color-focus, currentColor);
+    outline-offset: 3px;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'] [data-slot='label'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: inherit;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'] [data-slot='label']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  [data-bl='photo-upload'] [data-slot='dropIcon'] svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+  [data-bl='photo-upload'] [data-slot='photos'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='photo-upload'] [data-slot='photo'] {
+    position: relative;
+  }
+  [data-bl='photo-upload'] [data-slot='thumb'] {
+    display: block;
+    width: 4rem;
+    height: 4rem;
+    object-fit: cover;
+    border-radius: var(--bl-radius-control, 0);
+  }
+  [data-bl='photo-upload'] [data-slot='remove'] {
+    position: absolute;
+    inset-block-start: -0.75rem;
+    inset-inline-end: -0.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  [data-bl='photo-upload'] [data-slot='remove'] svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  [data-bl='quote-form'] [data-slot='submit'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 44px;
+    justify-self: start;
+  }
+  [data-bl='quote-form'][data-variant='card'] [data-slot='submit'],
+  [data-bl='quote-form'][data-variant='inline'] [data-slot='submit'] {
+    justify-self: stretch;
+  }
+  [data-bl='quote-form'] [data-slot='submit'][data-state='busy'] {
+    cursor: progress;
+  }
+  [data-bl='quote-form'] :where([data-slot='consent'], [data-slot='status']) {
+    margin: 0;
+  }
+  /* Empty, the status region stays in the accessibility tree (visually hidden), so its next message is announced. */
+  [data-bl='quote-form'] [data-slot='status']:empty {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 21-dialog.css */
+  /* Dialog: a native modal. The page behind doesn't scroll; the body scrolls inside the panel on short screens. */
+
+  [data-bl='dialog'] {
+    width: min(40rem, calc(100% - 2 * var(--bl-gutter, 1rem)));
+    max-height: calc(100dvh - 2rem);
+    padding: 0;
+    border: 0;
+    overflow: auto;
+    background: var(--bl-color-surface, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    border-radius: var(--bl-radius-card, 0);
+    box-shadow: var(--bl-shadow-overlay, none);
+  }
+  :root:has([data-bl='dialog'][open]) {
+    overflow: hidden;
+  }
+  [data-bl='dialog'] [data-slot='header'] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem var(--bl-gutter, 1.25rem) 0;
+  }
+  [data-bl='dialog'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl='dialog'] [data-slot='close'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  [data-bl='dialog'] [data-slot='close'] svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  [data-bl='dialog'] [data-slot='body'] {
+    padding: 1rem var(--bl-gutter, 1.25rem) var(--bl-gutter, 1.25rem);
+  }
+
 }