/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
   SZ-102 — layout styling moved to the Tailwind design system (utility classes in
   MainLayout.razor, backed by the design tokens in Styles/app.tailwind.css).

   SZ-774 — authenticated mobile chrome that utilities cannot express: the ≤768 px / ≥769 px
   split (Tailwind's `md` is min-width 768 px, which would treat 768 as desktop; the legacy
   private layout and this ticket both treat ≤768 as mobile), the CSS-only checkbox flyout,
   and the fixed header/rail offsets. Colours, radii and shadows are design-system tokens.
   Heights (56 / 74 / 300) are the ticket-authoritative canvas values.
*/

.sz-icon-open[b-02rqz322yo] {
    display: none;
}

.sz-account-backdrop[b-02rqz322yo] {
    display: none;
}

.sz-sr-only[b-02rqz322yo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
   SZ-859 — skip link. Parked above the viewport (not clip:rect(0,0,0,0)): Chromium's
   sequential-focus heuristic skips a 1px clipped box, so the sz-sr-only clip technique
   would fail the first-Tab contract. Focused stacking is above .sz-header-private
   (z-index 1003 at ≤768 px). Tailwind focus:not-sr-only is absent from committed app.css.
*/
.sz-skip-link[b-02rqz322yo] {
    position: absolute;
    top: 0;
    left: 0.5rem;
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem 1rem;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    border-radius: var(--radius-control);
    background-color: var(--color-surface-0);
    color: var(--color-brand-700);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transform: translateY(-150%);
}

.sz-skip-link:focus[b-02rqz322yo],
.sz-skip-link:focus-visible[b-02rqz322yo] {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1010;
    transform: none;
    min-width: 44px;
    min-height: 44px;
    overflow: visible;
    box-shadow: var(--shadow-card);
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

.sz-account-toggle[b-02rqz322yo] {
    position: relative;
    z-index: 1004;
}

.sz-account-toggle-input:focus-visible ~ .sz-account-toggle[b-02rqz322yo] {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 2px;
}

.sz-account-panel[b-02rqz322yo] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--color-surface-0);
    box-shadow: var(--shadow-overlay);
}

.sz-account-toggle-input:checked ~ .sz-account-backdrop[b-02rqz322yo] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1001;
    cursor: pointer;
    background-color: var(--color-surface-900);
    opacity: 0.4;
}

.sz-account-toggle-input:checked ~ .sz-account-panel[b-02rqz322yo] {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.sz-account-toggle-input:checked ~ .sz-account-toggle .sz-icon-closed[b-02rqz322yo] {
    display: none;
}

.sz-account-toggle-input:checked ~ .sz-account-toggle .sz-icon-open[b-02rqz322yo] {
    display: block;
}

/* Phone-first: authenticated header is a 56 px bar; bottom rail is a 74 px tab bar. */
.sz-desktop-cluster[b-02rqz322yo] {
    display: none;
}

.sz-mobile-actions[b-02rqz322yo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sz-header-private[b-02rqz322yo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1003;
}

.sz-header-private .sz-header-inner[b-02rqz322yo] {
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.sz-header-spacer[b-02rqz322yo] {
    height: 56px;
}

.sz-mobile-rail[b-02rqz322yo] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    height: 74px;
    align-items: stretch;
    border-top: 1px solid var(--color-surface-200);
    background-color: var(--color-surface-0);
    box-shadow: var(--shadow-card);
}

.sz-rail-spacer[b-02rqz322yo] {
    height: 74px;
}

@media (min-width: 769px) {
    .sz-desktop-cluster[b-02rqz322yo] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .sz-mobile-actions[b-02rqz322yo] {
        display: none;
    }

    .sz-header-private[b-02rqz322yo] {
        position: relative;
        height: auto;
        z-index: auto;
    }

    .sz-header-private .sz-header-inner[b-02rqz322yo] {
        height: auto;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .sz-header-spacer[b-02rqz322yo],
    .sz-rail-spacer[b-02rqz322yo],
    .sz-mobile-rail[b-02rqz322yo] {
        display: none;
        height: 0;
    }
}

/* SZ-892 — mobile-rail Profile avatar (26 px) and (i) badge (16 px). Canvas sizes, same
   file that already owns the 56 / 74 / 300 chrome measurements. Tokens only for colour,
   radius and the border. Desktop never sees these: .sz-mobile-rail is display:none ≥769 px. */
.sz892-rail-avatar[b-02rqz322yo] {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-surface-200);
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.sz892-rail-badge[b-02rqz322yo] {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface-0);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-600);
    color: var(--color-surface-0);
}
/* /Components/Pages/People/ServiceBrowse/ProviderServiceDetails.razor.rz.scp.css */
/*
   SZ-718-001 — phone Share button vs desktop profile rail. Matches MainLayout's 769 px split
   (Tailwind md is 768 px and would treat 768 as desktop). Tokens only.
*/
.sz718-share-desktop[b-6gz044a6hs] {
    display: none;
}

@media (min-width: 769px) {
    .sz718-provider-detail[b-6gz044a6hs] {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
    }

    .sz718-provider-detail-main[b-6gz044a6hs] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sz718-share-phone[b-6gz044a6hs] {
        display: none;
    }

    .sz718-share-desktop[b-6gz044a6hs] {
        display: block;
        width: 22.5rem;
        flex-shrink: 0;
    }
}

/*
   SZ-896 — the WORK strip.

   Snap so a flick lands on a tile rather than half of one, and the page gutter is carried as bleed
   padding so the first and last tile clear the page edge while the row still scrolls inside its own
   container (design-system hard rule 5). Tokens only.

   The bleed is 24px because that is what the layout gutter measures: MainLayout's <main> is
   `px-6`, i.e. 24px. The ticket's §3.1 said 20px, which under-shoots by 4px and stops the last tile
   short of the edge instead of bleeding to it.
*/
.sz896-strip[b-6gz044a6hs] {
    scroll-snap-type: x proximity;
    padding-right: 24px;
    margin-right: -24px;
}

.sz896-strip > .sz896-tile[b-6gz044a6hs] {
    scroll-snap-align: start;
}

/*
   A photo whose signed URL has expired renders as a browser-broken image today. The failure state
   is CSS-driven off an attribute the inline onerror sets, so it does not wait on sz896-album.js.
   The tile stays in the strip: the count the viewer quotes never lies.
*/
.sz896-tile-broken[b-6gz044a6hs] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--color-surface-100);
    color: var(--color-surface-500);
}

.sz896-tile[data-sz896-failed] > img[b-6gz044a6hs] {
    display: none;
}

.sz896-tile[data-sz896-failed] > .sz896-tile-broken[b-6gz044a6hs] {
    display: flex;
}
/* /Components/Pages/People/ServiceBrowse/ReportPhotoPanel.razor.rz.scp.css */
/*
   SZ-896 — the report sheet, artboard 3 (the confirm sheet) and artboard 4 (the two gates and the
   confirmation). It renders inside PhotoViewer's <dialog>, over the dark ground, so it is drawn as
   a bottom sheet rather than the card this panel used to be under the strip.

   Tokens only; the 12px top radius is --radius-card, the sheet is --color-surface-0.
*/

.sz896-sheet[b-mwgkijptuw] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface-0);
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    color: var(--color-surface-900);
}

.sz896-sheet-head[b-mwgkijptuw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sz896-sheet-head-row[b-mwgkijptuw] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.sz896-sheet-head-text[b-mwgkijptuw] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.sz896-sheet-thumb[b-mwgkijptuw] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-control);
    object-fit: cover;
}

.sz896-sheet-title[b-mwgkijptuw] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.sz896-sheet-sub[b-mwgkijptuw] {
    overflow: hidden;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-surface-500);
}

.sz896-sheet-body[b-mwgkijptuw] {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-surface-700);
}

.sz896-sheet-actions[b-mwgkijptuw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sz896-sheet-primary[b-mwgkijptuw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-brand-600);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-surface-0);
    text-decoration: none;
    cursor: pointer;
}

.sz896-sheet-primary:hover[b-mwgkijptuw] {
    background: var(--color-brand-700);
}

.sz896-sheet-primary[disabled][b-mwgkijptuw] {
    opacity: 0.5;
    cursor: default;
}

.sz896-sheet-secondary[b-mwgkijptuw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-surface-500);
    cursor: pointer;
}

.sz896-sheet-primary:focus-visible[b-mwgkijptuw],
.sz896-sheet-secondary:focus-visible[b-mwgkijptuw] {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

/* Artboard 4, "Reported": a small confirmation over the photo, not a new screen. */
.sz896-toast[b-mwgkijptuw] {
    position: fixed;
    right: 20px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 20px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius-control);
    background: var(--color-surface-0);
    box-shadow: var(--shadow-overlay);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-surface-700);
}

.sz896-toast svg[b-mwgkijptuw] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-brand-700);
}
/* /Components/Pages/Secure/Me/Me.razor.rz.scp.css */
/*
   SZ-892 — page top padding is 16 px on ≤768 px. MainLayout's <main> is py-8 (32 px);
   this pulls the page up by 16 px at the SZ-774 phone breakpoint. Desktop keeps 32 px.
*/
@media (max-width: 768px) {
    .sz892-compact-top[b-6xgmpf8v6r] {
        margin-top: -1rem;
    }
}

/*
   SZ-806-010 — full-screen location picker. A native <dialog> so it sits in the top layer
   above MainLayout's header (z-index 1003) and bottom rail (z-index 1000). UA dialog chrome
   is reset the same way PhotoViewer resets it; the pin is a DOM overlay, not a map marker.
*/
.sz806-010-picker[b-6xgmpf8v6r] {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border: 0;
    overflow: hidden;
}

/* Display lives here, not as Tailwind flex on the element: an author `display:flex`
   beats the UA `dialog:not([open]){display:none}` and paints the overlay closed. */
.sz806-010-picker:not([open])[b-6xgmpf8v6r] {
    display: none;
}

.sz806-010-picker[open][b-6xgmpf8v6r] {
    display: flex;
    flex-direction: column;
}

.sz806-010-picker[b-6xgmpf8v6r]::backdrop {
    background-color: var(--color-surface-0);
}

.sz806-010-map-wrap[b-6xgmpf8v6r] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.sz806-010-map[b-6xgmpf8v6r] {
    position: absolute;
    inset: 0;
}

.sz806-010-pin[b-6xgmpf8v6r] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 1;
}

/*
   SZ-1051 — the Photos grid's viewer footer: who made this photo, and the way to them.

   It is rendered into PhotoViewer's FooterSlot, which lands INSIDE the <dialog> (content outside it
   never reaches the top layer and would be painted behind the photo), so it has to place itself the
   way the viewer's own chrome does — absolutely, over the photo, above the safe area.

   The 64px offset clears PhotoViewer's own footer band, whose height is stated in
   Components/Shared/PhotoViewer.razor.css: a 36px dot row plus that band's 28px bottom padding.
   With ShowReport="false" the report row is not there, so 64px is the whole of it. The same file
   already hard-codes this stack arithmetic on .sz896-slide (its 110px), so the number is the house
   pattern rather than a magic constant — if that band changes, both move together.

   The scrim is why the band may sit over the photo at all: object-fit is contain, the photo is
   centred, and a legible plate is what every lightbox puts under one. Without it the provider's
   name would sit on whatever colour the photograph happens to be.
*/
.sz1051-viewer-foot[b-6xgmpf8v6r] {
    position: absolute;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding: 16px 12px 12px;
    /* AC-11 "tokens only": the scrim is the viewer's OWN surface faded in, not a raw black — the
       dialog behind it paints --color-surface-900 (PhotoViewer.razor.css .sz896-viewer), so the band
       now dissolves into the surface it sits on instead of into a slightly different dark. */
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-surface-900) 72%, transparent),
        transparent);
    color: var(--color-surface-0);
}

.sz1051-viewer-name[b-6xgmpf8v6r] {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sz1051-viewer-services[b-6xgmpf8v6r] {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    /* The secondary line on the scrim: the same token as the name above it, held back so the name
       stays first. */
    color: color-mix(in srgb, var(--color-surface-0) 75%, transparent);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/PhotoViewer.razor.rz.scp.css */
/*
   SZ-896 — the work-album viewer. Values are the build sheet's (docs/design/album-lightbox-canvas,
   artboard 7); every colour, radius and shadow is a token from Styles/app.tailwind.css.

   This is scoped CSS rather than utilities because the viewer is the one full-bleed surface in the
   product: a native <dialog> in the top layer, a scroll-snap track, and env(safe-area-inset-*).
   None of that is expressible as Tailwind utilities in this project's curated scale.

   Breakpoint is 769px, the same split ProviderServiceDetails.razor.css and MainLayout already use
   (Tailwind's md is 768px and would call a 768px viewport desktop).
*/

.sz896-viewer[b-15w9mawcuq] {
    /* The desktop picture frame the chevrons are placed against — see .sz896-prev / .sz896-next. */
    --sz896-frame: min(42vw, 720px);
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--color-surface-900);
    color: var(--color-surface-0);
}

.sz896-viewer[b-15w9mawcuq]::backdrop {
    background: var(--color-surface-900);
}

/* ---- top bar ------------------------------------------------------------------------------ */

.sz896-topbar[b-15w9mawcuq] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
}

.sz896-topbar-text[b-15w9mawcuq] {
    min-width: 0;
    flex: 1 1 auto;
}

.sz896-counter[b-15w9mawcuq] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: var(--color-surface-0);
}

.sz896-provider[b-15w9mawcuq] {
    overflow: hidden;
    margin: 0;
    font-size: 12px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(255 255 255 / 0.6);
}

/* Arrow keys are a desktop affordance; the hint is too. */
.sz896-keyhint[b-15w9mawcuq] {
    display: none;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: rgb(255 255 255 / 0.5);
}

/* ---- chrome buttons ----------------------------------------------------------------------- */

.sz896-chrome[b-15w9mawcuq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.12);
    color: var(--color-surface-0);
    cursor: pointer;
}

.sz896-chrome:focus-visible[b-15w9mawcuq] {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

/* Prev/next are the desktop fallback for the swipe. Below 769px they are not rendered on screen at
   all — the gesture is the interaction and a chevron over the photo is just something in the way. */
.sz896-prev[b-15w9mawcuq],
.sz896-next[b-15w9mawcuq] {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

/* Artboard 6 is a centred row — chevron, photo, chevron — with a 28px gap, so the controls sit
   against the picture and not in the corners of a wide screen. object-fit: contain means CSS cannot
   know a photo's rendered width, so what gets bounded is the FRAME: --sz896-frame caps the picture
   and the chevrons sit 28px outside that cap. (The canvas draws a 420px frame on an 1100px board;
   42vw is that ratio, held to 720px so the frame stops growing on a very wide monitor.) The token
   itself is declared on .sz896-viewer at the top of this file. */
.sz896-prev[b-15w9mawcuq] { left: calc(50% - (var(--sz896-frame) / 2) - 28px - 44px); }
.sz896-next[b-15w9mawcuq] { right: calc(50% - (var(--sz896-frame) / 2) - 28px - 44px); }

.sz896-chrome[disabled][b-15w9mawcuq] {
    opacity: 0.35;
    cursor: default;
}

/* ---- the slides --------------------------------------------------------------------------- */

.sz896-track[b-15w9mawcuq] {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sz896-track[b-15w9mawcuq]::-webkit-scrollbar {
    display: none;
}

.sz896-slide[b-15w9mawcuq] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    /* Clears the 56px top bar and the stacked footer band below (36px dots + 2px gap + 44px report
       + 28px bottom padding = 110px), so the photo is never drawn under either. */
    padding: calc(56px + env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
    scroll-snap-align: center;
}

.sz896-photo[b-15w9mawcuq] {
    max-width: 100%;
    max-height: 100%;
    /* The whole photo, never cropped: dark bands where it does not fill. */
    object-fit: contain;
}

.sz896-broken[b-15w9mawcuq] {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    text-align: center;
    color: rgb(255 255 255 / 0.55);
}

.sz896-broken-text[b-15w9mawcuq] {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
}

.sz896-slide[data-sz896-failed] .sz896-photo[b-15w9mawcuq] {
    display: none;
}

.sz896-slide[data-sz896-failed] .sz896-broken[b-15w9mawcuq] {
    display: flex;
}

/* ---- footer: report + dots ------------------------------------------------------------------ */

/* Two bands stacked, as artboards 2 and 6 draw them: dots, then the report control beneath.
   align-items: flex-start keeps the button the width of its own label rather than a full-bleed
   strip; the dot row stretches back out so it can centre itself under the photo. The 12px page
   padding plus the button's own 8px lands the label's text on the canvas's 20px gutter. */
.sz896-footer[b-15w9mawcuq] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    box-sizing: border-box;
    padding: 0 12px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.sz896-report[b-15w9mawcuq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: rgb(255 255 255 / 0.75);
    cursor: pointer;
}

.sz896-report[disabled][b-15w9mawcuq] {
    opacity: 0.5;
    cursor: default;
}

.sz896-report:focus-visible[b-15w9mawcuq] {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-control);
}

.sz896-dots[b-15w9mawcuq] {
    /* Its own band above the report row, centred under the photo whether or not there is a report
       control below it at all. */
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
}

.sz896-dot[b-15w9mawcuq] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.35);
}

.sz896-dot[data-sz896-current][b-15w9mawcuq] {
    width: 22px;
    background: var(--color-surface-0);
}

/* ---- desktop, 769px and up ------------------------------------------------------------------ */

@media (min-width: 769px) {
    .sz896-keyhint[b-15w9mawcuq] {
        display: block;
    }

    .sz896-prev[b-15w9mawcuq],
    .sz896-next[b-15w9mawcuq] {
        display: inline-flex;
    }

    /* Artboard 6 centres the whole footer stack under the picture. */
    .sz896-footer[b-15w9mawcuq] {
        align-items: center;
    }

    .sz896-photo[b-15w9mawcuq] {
        max-width: var(--sz896-frame);
    }
}

/* ---- reduced motion -------------------------------------------------------------------------
   The open fade and the snap animation drop to instant. scroll-behavior is the one that matters:
   the arrow keys and the chevrons scroll the track, and a person who has asked for no motion
   should get the next photo, not a slide across. */

@media (prefers-reduced-motion: reduce) {
    .sz896-track[b-15w9mawcuq] {
        scroll-behavior: auto;
    }

    .sz896-viewer[b-15w9mawcuq],
    .sz896-viewer[b-15w9mawcuq]::backdrop {
        animation: none;
        transition: none;
    }
}
/* /Components/Shared/ProviderSharePanel.razor.rz.scp.css */
/*
   SZ-718-001 — Copy fallback for the visitor Share button when navigator.share is absent.
   Hidden by default; sz718-001-share.js adds .is-visible. Scoped CSS hashes the class, so
   the JS selector uses the stable data attribute's sibling class in the markup's host...
   Blazor scoped CSS rewrites .sz718-copy-fallback to include the scope attribute. The JS
   toggles .is-visible on the same element; both rules are scoped together.
*/
.sz718-copy-fallback[b-42m5hgnvdr] {
    display: none;
}

.sz718-copy-fallback.is-visible[b-42m5hgnvdr] {
    display: inline-flex;
}

/* Beats the button's .inline-flex (same specificity trap as Tailwind .hidden in app.css). */
.sz718-share-hidden[b-42m5hgnvdr] {
    display: none;
}