/* /Components/AdminContext/AdminContextActingAs.razor.rz.scp.css */
/* AdminContextActingAs - Context-layer slot for AdminContextBanner (Phase U42 Sub-Phase I).
   Preserves the slim 32px bar visual style from the legacy CompactAdminOverrideBanner. */

.admin-context-acting-as[b-thin8hnxsw] {
    background-color: var(--closina-info-light, rgba(33,150,243,0.08));
    border-radius: var(--closina-radius-sm, 8px);
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--closina-transition-fast, 0.1s ease);
}

.admin-context-acting-as:hover[b-thin8hnxsw] {
    background-color: var(--closina-info-light, rgba(33,150,243,0.12));
}

.admin-context-acting-as-row[b-thin8hnxsw] {
    display: flex;
    align-items: center;
    min-height: 24px;
    gap: 8px;
}

.admin-context-acting-as-icon[b-thin8hnxsw] {
    flex-shrink: 0;
    font-size: var(--closina-icon-inline); /* U68 Sub-E: 16px — inline icon in slim 32px banner row */
}

.admin-context-acting-as-text[b-thin8hnxsw] {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--closina-text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-context-acting-as-action[b-thin8hnxsw] {
    /* WCAG 1.4.3 (Cat 22): on the --closina-info-light tint, --closina-text-secondary is
       only 4.45:1. The -text variant is the AA token for colored text on a light/info
       surface (≈4.95:1 here; redefined per theme for dark mode). */
    color: var(--closina-info-text);
    margin-left: 4px;
}

/* Mobile/foldable (Xs ≤599px): allow the acting-as text to WRAP instead of
   hard-clipping the "{Action} {Entity}" context label. The slim single-line
   ellipsis bar is a desktop affordance; on narrow viewports the full
   "Acting as: {Member} — {Action} {Entity}" wins (was: scrollWidth 461px vs
   clientWidth 339px → "…Viewing Calendar Integ…" clipped). F27-FU6 a4b finding. */
@media (max-width: 599px) {
    .admin-context-acting-as-text[b-thin8hnxsw] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .admin-context-acting-as-row[b-thin8hnxsw] {
        align-items: flex-start;
    }
}

.admin-context-acting-as-toggle[b-thin8hnxsw] {
    flex-shrink: 0;
}

.admin-context-acting-as-details[b-thin8hnxsw] {
    padding: 2px 0 4px 32px;
}

/* Dark mode */
[data-theme="dark"] .admin-context-acting-as[b-thin8hnxsw] {
    background-color: var(--closina-info-light, rgba(66,165,245,0.12));
}

[data-theme="dark"] .admin-context-acting-as-text[b-thin8hnxsw] {
    color: var(--closina-text-primary, #f1f5f9);
}

[data-theme="dark"] .admin-context-acting-as-action[b-thin8hnxsw] {
    color: var(--closina-text-secondary, #94a3b8);
}
/* /Components/AdminOverrideMemberSelector.razor.rz.scp.css */
[b-mxvg129dzc] .mud-list-item {
    min-height: 56px !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

[b-mxvg129dzc] .mud-list-item-text {
    overflow: visible !important;
}
/* /Components/AdminPageHeader.razor.rz.scp.css */
/* AdminPageHeader.razor.css — Phase U85 Sub-Phase A title-row compaction
   + Phase U80 Sub-Phase F baseline list-shell chrome compaction.

   --- U85 Sub-Phase A (title-row nowrap) ---
   Defaults (mobile-first, Xs <768px): outer flex wraps when ChildContent /
   BackUrl / TitleContent is present, so the right-side action group falls
   below the title group on narrow viewports for breathing room.

   At ≥768px (Md+) the wrap is suppressed so the title group and right-side
   ChildContent share a single row — this is the U85 Sub-Phase A fix:
   without nowrap, /a/m/contacts at 768×1024 measured 23.6% chrome density
   (UX-R20 List-tier ERROR threshold 22.5%) per the U79 a4b artifact at
   docs/features/U79-admin-chrome-reduction/test-runs/20260518_2030_ux-auditor/.
   The 16px gap remains in both states.

   --- U80 Sub-Phase F (baseline list-shell compaction) ---
   L1 (root margin mb-4 -> mb-2) is applied in the .razor markup directly.
   L2 (icon Size Large -> Medium) is a markup change in the .razor.
   L3/L5 below: a desktop-gated title font-size trim + a tight line-height.
     - The MudText carries Typo.h4 + HtmlTag="h1" (PRESERVED for Cat 56
       HeadingHierarchyConvention_Tests) — we do NOT swap the Typo. Instead the
       closina-page-header-title class trims the *visual* font-size on desktop
       only, so the semantic h1 and the .mud-typography-h4 selectors used
       elsewhere are untouched. ::deep is required because the MudText is a
       child component of this header.
     - The font-size trim is gated @media (min-width: 960px): below 960px the
       title keeps its full size (the HOUSE ≥44px touch floor — platform
       convention, not WCAG; re-cited Phase Z39 — and the Xs
       compaction already handled by responsive.css remain in force; we do not
       shrink text on touch viewports).
   L4: closina-page-header-subtitle-compact — set by the CompactSubtitle
     parameter on List-tier pages. Hides the descriptive subtitle prose at
     ≤1024px (today responsive.css only hides it ≤599px). Scoped to the marker
     class so Detail / Settings / Dashboard pages (which never set
     CompactSubtitle) keep their subtitle at 600-1024px. */

.closina-page-header-row-responsive[b-chwfifketr] {
    flex-wrap: wrap;
    gap: 16px;
}

@media (min-width: 768px) {
    .closina-page-header-row-responsive[b-chwfifketr] {
        flex-wrap: nowrap;
    }
}

/* U80 Sub-Phase F L5 — tight title line-height on all breakpoints (1.2 is
   safe; a single-line page title never needs leading). */
.closina-page-header-compact[b-chwfifketr]  .closina-page-header-title {
    line-height: var(--closina-leading-tight);
}

/* U80 Sub-Phase F L3 — desktop-gated title font-size trim. Typo.h4 renders
   ~2.125rem (~34px); 1.7rem (~27px) reclaims ~6-8px of header row height on
   desktop while staying clearly the page's primary heading. Gated ≥960px so
   touch viewports keep the full size. */
@media (min-width: 960px) {
    .closina-page-header-compact[b-chwfifketr]  .closina-page-header-title {
        font-size: 1.7rem;
    }
}

/* U80 Sub-Phase F L4 — List-tier subtitle hide ≤1024px. Only applies when the
   page opted in via CompactSubtitle (marker class on the subtitle MudText).
   ::deep penetrates to the child MudText. */
@media (max-width: 1024px) {
    .closina-page-header-compact[b-chwfifketr]  .closina-page-header-subtitle-compact {
        display: none;
    }
}

/* F16 (feedback 3a215f74) — title clip / wrap fix at narrow desktop viewports.
   Mirror of MemberPageHeader.razor.css fix (Cat 12 single-source). The title's
   flex-column container had no min-width, so right-hand ChildContent
   (ConnectionStatusIndicator + RefreshButtonWithBadge) competing for space
   caused the title to wrap to a second line which the parent overflow then
   clipped. min-width: 0 lets the column shrink below content width; ellipsis
   rules render a clipped preview instead of a hard wrap. Full title still
   reachable by screen readers via HtmlTag="h1". */
.closina-page-header-compact[b-chwfifketr]  .closina-page-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.closina-page-header-compact .page-header-group > div.d-flex.flex-column[b-chwfifketr] {
    min-width: 0;
    flex: 1 1 auto;
}

/* ============================================================
   U92 Sub-A — Conversation-Inbox header-band compaction.
   Opt-in via the CompactBand parameter (root class
   closina-page-header-band-compact). Default-off → NONE of these
   rules fire for the ~50 other AdminPageHeader consumers.
   Mirror of MemberPageHeader.razor.css (Cat 12 single-source).
   ============================================================ */

/* U92 Sub-A (a) — hide the subtitle band (the always-on KPI/subtitle strip
   the conversation inboxes render via SubtitleContent) at ≤1024px, one of the
   two UX-R20 problem viewports. The band wrapper is native markup of this
   component (no ::deep needed); display:none cascades to hide the caller's KPI
   strip regardless of its own scope. */
@media (max-width: 1024px) {
    .closina-page-header-band-compact .closina-page-header-band-subtitle[b-chwfifketr] {
        display: none;
    }
}

/* U92 Sub-A (b) — keep the right-hand action cluster on a SINGLE row across the
   tablet band (≤959px). responsive.css otherwise flex-wraps
   .closina-page-header-actions to 2-3 rows here (Fix-8 / X03), which re-inflates
   the header height and cancels the U80 desktop font compaction. Higher
   specificity + !important beats the responsive.css rule. overflow-x:auto lets a
   genuinely-too-wide cluster scroll horizontally rather than wrap or clip
   (the content scroller is overflow-x:clip); overflow-y:hidden + a little
   vertical padding keeps the RefreshButton badge from being clipped. */
@media (max-width: 959px) {
    .closina-page-header-band-compact .closina-page-header-actions[b-chwfifketr] {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* The MudToggleGroup view-toggle (admin ConversationViewToggle) is
       display:grid — it must NOT shrink (shrinking collapses its tracks →
       segment overlap). Keep its natural width. Mirrors the responsive.css
       Fix-8 guard. */
    .closina-page-header-band-compact .closina-page-header-actions .mud-toggle-group[b-chwfifketr] {
        flex-shrink: 0 !important;
    }
}
/* /Components/CallAnalysis/CallTranscriptTab.razor.rz.scp.css */
.transcript-container[b-72r02cn40i] {
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transcript-segment[b-72r02cn40i] {
    padding: 12px;
    border-radius: var(--closina-radius-sm);
    border: 1px solid var(--closina-border);
}

.transcript-positive[b-72r02cn40i] {
    background-color: var(--closina-status-success-bg);
}

.transcript-negative[b-72r02cn40i] {
    background-color: var(--closina-error-light);
}

.transcript-neutral[b-72r02cn40i] {
    background-color: var(--closina-surface);
}
/* /Components/CallAnalysis/SentimentArcChart.razor.rz.scp.css */
.sentiment-arc-container[b-1lcuik1jf6] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    min-height: 120px;
}

.sentiment-arc-chart[b-1lcuik1jf6] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
    height: 120px;
    border-bottom: 1px solid var(--closina-border);
    position: relative;
}

.sentiment-arc-chart[b-1lcuik1jf6]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed var(--closina-border);
}

.sentiment-bar-wrapper[b-1lcuik1jf6] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 4px;
    max-width: 12px;
}

.sentiment-bar[b-1lcuik1jf6] {
    width: 100%;
    min-height: 2px;
    border-radius: var(--closina-radius-sm) var(--closina-radius-sm) 0 0;
    transition: height var(--closina-transition);
}

.sentiment-very-positive[b-1lcuik1jf6] {
    background-color: var(--closina-primary);
}

.sentiment-positive[b-1lcuik1jf6] {
    background-color: var(--closina-success);
}

.sentiment-neutral[b-1lcuik1jf6] {
    background-color: var(--closina-border-strong);
}

.sentiment-negative[b-1lcuik1jf6] {
    background-color: var(--closina-warning);
}

.sentiment-very-negative[b-1lcuik1jf6] {
    background-color: var(--closina-error);
}

.sentiment-arc-labels[b-1lcuik1jf6] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    min-width: 56px;
}
/* /Components/Filtering/ScopeFilterControl.razor.rz.scp.css */
/* ScopeFilterControl — Phase U80 Sub-Phase C (δ toolbar-filter pattern).
   Scoped styles for the compact scope-filter popover + chip row.
   All values resolve to --closina-* tokens (Cat 22). */

.closina-scope-filter[b-xj0piuy273] {
    display: inline-flex;
    align-items: center;
}

/* The anchored popover panel — sized for a small set of scope inputs. */
[b-xj0piuy273] .closina-scope-filter-popover {
    border-radius: var(--closina-radius-md);
    border: 1px solid var(--closina-border);
    background: var(--closina-surface);
    z-index: var(--closina-z-dropdown);
}

[b-xj0piuy273] .closina-scope-filter-popover-body {
    min-width: 280px;
    max-width: 360px;
}

/* The applied-filter chip row — only renders when filters are active, so it
   adds zero chrome in the steady (unfiltered) state. */
.closina-scope-filter-chips[b-xj0piuy273] {
    margin-top: 8px;
}

/* Foldable / very narrow viewports: let the popover body shrink within the
   available width rather than overflowing the viewport. */
@media (max-width: 399px) {
    [b-xj0piuy273] .closina-scope-filter-popover-body {
        min-width: 240px;
        max-width: calc(100vw - 32px);
    }
}
/* /Components/Forms/FeatureStateControl.razor.rz.scp.css */
/* Phase F44-FU1 a4b fix (mobile overflow): the segmented radiogroup is `d-inline-flex`
   (shrink-to-fit), so with a long option label (e.g. "Draft for approval") its intrinsic
   width can exceed a narrow viewport and clip the last segment — the /a/settings/support-ai
   375px "Auto-act" clip found by ux-auditor. Cap the control at its container width and let
   the fixed-width segments wrap to a second row on narrow screens (gap-2 supplies the 8px
   row gap). No wide-viewport change: flex items only wrap when they would otherwise overflow,
   so desktop/tablet stay a single row. Shared component -> hardens all four consumers
   (feature-management, import rows, voicemail-action, support-ai autonomy). */
.closina-feature-state-segmented[b-6sz5cmpznc] {
    max-width: 100%;
    flex-wrap: wrap;
}
/* /Components/Grid/FilterColumnHeader.razor.rz.scp.css */
/* FilterColumnHeader scoped styles (Phase Z15).
   Moved from inline <style> block inside FilterColumnHeader.razor template — the inline
   declaration was being duplicated into every Syncfusion column header cell's DOM and
   polluting headerCell.innerText with the CSS rule strings (latent screen-reader +
   column-width auto-fit issue). Blazor CSS isolation bundles these rules once into
   Closina.Blazor.Client.styles.css with a [b-xxxxxxxx] scope attribute. */

.filter-column-header[b-kyjrjg39de] {
    min-height: 24px;
}

.filter-column-filter-icon:hover[b-kyjrjg39de] {
    opacity: 1 !important;
}

/* ::deep — .mud-icon-root is rendered by the child <MudIcon> Blazor component which does
   not carry this component's scope attribute. Without ::deep the rewritten selector
   .filter-column-filter-icon[b-xxx] .mud-icon-root[b-xxx] would not match. */
.filter-column-filter-icon[b-kyjrjg39de]  .mud-icon-root {
    font-size: 20px !important;
}

.filter-column-filter-icon[b-kyjrjg39de] {
    min-width: 24px;
    min-height: 24px;
}

.filter-column-sort-icon[b-kyjrjg39de] {
    min-width: 24px;
    min-height: 24px;
}

.filter-active-dot[b-kyjrjg39de] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--closina-primary);
}

/* Enlarge touch targets to the house 44px floor on mobile/tablet — platform convention
   (Apple HIG 44pt / Material 48dp), NOT WCAG 2.5.5, which is 44x44 at Level AAA and is
   not claimed. The WCAG bar is 2.5.8 Target Size (Minimum), AA, 24x24, at all pointer
   inputs including mouse. Re-cited Phase Z39; the desktop size of this control is a
   Z39 Sub-Phase D measurement candidate. */
@media (max-width: 959px) {
    .filter-column-label[b-kyjrjg39de] {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
    }

    .filter-column-sort-icon[b-kyjrjg39de],
    .filter-column-filter-icon[b-kyjrjg39de] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .filter-column-header[b-kyjrjg39de] {
        min-height: 44px;
        gap: 0 !important;
    }
}
/* /Components/Help/HelpPanel.razor.rz.scp.css */
/* Help Panel Drawer Styles - Phase U08 */
/* All colors use --closina-* CSS variable tokens */

[b-v1b9g7zo73] .help-panel-drawer {
    z-index: var(--closina-z-maximum);
}

/* Fix R09: Help panel header vertical alignment jitter (UX Audit 2026-03-08)
   The flex container children (icon buttons, text, inner divs) have
   different intrinsic heights causing up to 8px vertical misalignment.
   Enforce center alignment on all direct children. */
[b-v1b9g7zo73] .help-panel-header {
    align-items: center !important;
}

[b-v1b9g7zo73] .help-panel-header > * {
    align-self: center;
}

[b-v1b9g7zo73] .help-panel-content {
    background-color: var(--closina-background, #f8f8f6);
}

[b-v1b9g7zo73] .help-panel-article-content {
    line-height: 1.7;
    color: var(--closina-text-primary, #1a1a1a);
    font-size: 0.925rem;
}

[b-v1b9g7zo73] .help-panel-article-content h3,
[b-v1b9g7zo73] .help-panel-article-content h4,
[b-v1b9g7zo73] .help-panel-article-content h5 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--closina-text-primary, #1a1a1a);
}

[b-v1b9g7zo73] .help-panel-article-content code {
    background-color: var(--closina-code-bg, #f5f5f5);
    color: var(--closina-code-text, #1a1a1a);
    font-family: var(--closina-font-mono, 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace);
    padding: 0.15rem 0.4rem;
    border-radius: var(--closina-radius-sm, 8px);
    font-size: 0.85em;
}

[b-v1b9g7zo73] .help-panel-article-content ul {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

[b-v1b9g7zo73] .help-panel-article-content li {
    margin-bottom: 0.35rem;
}

[b-v1b9g7zo73] .help-panel-article-content a {
    color: var(--closina-link, #047857);
    text-decoration: none;
    transition: color var(--closina-transition-fast, 0.1s ease);
}

[b-v1b9g7zo73] .help-panel-article-content a:hover {
    text-decoration: underline;
}

[b-v1b9g7zo73] .help-panel-article-content p {
    margin-bottom: 0.75rem;
}

/* Dark mode overrides */
[data-theme="dark"][b-v1b9g7zo73]  .help-panel-content {
    background-color: var(--closina-background, #020617);
}

[data-theme="dark"][b-v1b9g7zo73]  .help-panel-article-content a {
    color: var(--closina-link, #34d399);
}

/* Help Panel: Ensure card shadows don't cause bounding-box overlap with adjacent elements */
[b-v1b9g7zo73] .help-panel-content .article-card,
[b-v1b9g7zo73] .help-panel-content .search-result-card {
    position: relative;
    z-index: 0;
}

/* Help Panel Drawer Header: Touch spacing between icon buttons.
   House UX-S05 adjacency convention (>=8px) — NOT WCAG 2.5.8, which is the 24x24 size
   minimum and contains no 8px figure at all. Re-cited Phase Z39. */
@media (max-width: 959px) {
    [b-v1b9g7zo73] .help-panel-drawer .help-panel-header .mud-icon-button + .mud-icon-button {
        margin-left: 8px;
    }

    /* U68 Sub-E: pin help-panel header icon glyphs to the nav-context size (20px)
       so the close + collapse affordances render at a consistent visual weight. */
    [b-v1b9g7zo73] .help-panel-drawer .help-panel-header .mud-icon-button .mud-icon-root {
        font-size: var(--closina-icon-nav);
    }

    /* Increase card spacing on mobile for touch target separation */
    [b-v1b9g7zo73] .help-panel-content .article-card,
    [b-v1b9g7zo73] .help-panel-content .search-result-card {
        margin-bottom: 16px !important;
    }
}
/* /Components/KpiCell.razor.rz.scp.css */
/* KpiCell scoped styles — owns only the decorative "·" cell separator.
   This rule MUST live in KpiCell.razor.css (not KpiStrip.razor.css): the
   .kpi-cell <span> is rendered by KpiCell.razor, so only KpiCell's scope id is
   stamped on it. A copy of this rule under KpiStrip's scope matches nothing.
   The strip's flex layout (d-flex align-center flex-wrap gap-2) comes from
   utility classes on KpiStrip's <MudText>, not scoped CSS. */

/* Decorative "·" between visible cells. Rendered as a ::before pseudo-element
   so conditionally-rendered (@if) cells never leave a dangling separator and
   it is ignored by screen readers (presentational content). */
.kpi-cell:not(:first-child)[b-tz5el6s7gt]::before {
    content: "\00b7"; /* middot */
    margin: 0 0.25rem;
    opacity: 0.6;
}
/* /Components/MemberFilterSelect.razor.rz.scp.css */
/* MemberFilterSelect.razor.css — scoped overrides for the typeahead popover.
   WCAG 1.4.3 fix (Phase U70-B-hotfix /a4b accessibility-auditor finding): when
   the autocomplete popover renders an option in selected / hover state, MudBlazor
   paints the row background with Color.Primary (brand green). The ItemTemplate's
   caption line ("Org · Email") is set Color="MudBlazor.Color.Secondary" so it
   keeps a slate-700 fill regardless of background, dropping contrast to 1.89:1
   on the selected row. Override to inherit currentColor (white) inside
   selected/hover so contrast climbs to AAA. */
[b-u2bhkyi0ob] .mud-selected-item .mud-typography-caption,
[b-u2bhkyi0ob] .mud-list-item-clickable:hover .mud-typography-caption {
    color: inherit;
}
/* /Components/MemberPageHeader.razor.rz.scp.css */
/* MemberPageHeader.razor.css — Phase U85 Sub-Phase A title-row compaction
   + Phase U80 Sub-Phase F baseline list-shell chrome compaction.

   Mirror of AdminPageHeader.razor.css (Cat 12 single-source). See that file
   for the full rationale of each rule.

   --- U85 Sub-Phase A (title-row nowrap) ---
   --- U80 Sub-Phase F (baseline list-shell compaction) ---
   L1 (mb-4 -> mb-2) + L2 (icon Large -> Medium) are markup changes in the
   .razor. L3/L5 (desktop-gated title font-size trim + tight line-height) and
   L4 (List-tier subtitle hide ≤1024px) are the scoped rules below. */

.closina-page-header-row-responsive[b-es1nlhzo7r] {
    flex-wrap: wrap;
    gap: 16px;
}

@media (min-width: 768px) {
    .closina-page-header-row-responsive[b-es1nlhzo7r] {
        flex-wrap: nowrap;
    }
}

/* U80 Sub-Phase F L5 — tight title line-height on all breakpoints. */
.closina-page-header-compact[b-es1nlhzo7r]  .closina-page-header-title {
    line-height: var(--closina-leading-tight);
}

/* U80 Sub-Phase F L3 — desktop-gated title font-size trim (≥960px only). */
@media (min-width: 960px) {
    .closina-page-header-compact[b-es1nlhzo7r]  .closina-page-header-title {
        font-size: 1.7rem;
    }
}

/* U80 Sub-Phase F L4 — List-tier subtitle hide ≤1024px (CompactSubtitle opt-in). */
@media (max-width: 1024px) {
    .closina-page-header-compact[b-es1nlhzo7r]  .closina-page-header-subtitle-compact {
        display: none;
    }
}

/* F16/F17 (feedback 3a215f74) — title clip / wrap fix at narrow desktop viewports.
   Reyes reported a partial title render ("Call" visible, "History" cut off) at
   1536x695. Root cause: the title's flex-column container had no min-width, so
   when the right-hand ChildContent (ConnectionStatusIndicator + RefreshButton)
   competed for horizontal space, the title column shrank below its content
   width and MudText's default white-space: normal wrapped the title to a
   second line which was then clipped by the parent's overflow.

   Fix: ellipsize the title rather than wrap. min-width: 0 lets the flex column
   shrink below content width; the title's white-space + overflow rules then
   render an ellipsis instead of a hard wrap. Title still readable on hover via
   the heading text itself (HtmlTag="h1" so screen readers get the full string;
   visual users get ellipsis preview). */
.closina-page-header-compact[b-es1nlhzo7r]  .closina-page-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.closina-page-header-compact .page-header-group > div.d-flex.flex-column[b-es1nlhzo7r] {
    min-width: 0;
    flex: 1 1 auto;
}

/* ============================================================
   U92 Sub-A — Conversation-Inbox header-band compaction.
   Opt-in via the CompactBand parameter (root class
   closina-page-header-band-compact). Default-off → NONE of these
   rules fire for the ~50 other MemberPageHeader consumers.
   Mirror of AdminPageHeader.razor.css (Cat 12 single-source).
   ============================================================ */

/* U92 Sub-A (a) — hide the subtitle band (the always-on KPI/subtitle strip
   the conversation inboxes render via SubtitleContent) at ≤1024px, one of the
   two UX-R20 problem viewports. The band wrapper is native markup of this
   component (no ::deep needed); display:none cascades to hide the caller's KPI
   strip regardless of its own scope. */
@media (max-width: 1024px) {
    .closina-page-header-band-compact .closina-page-header-band-subtitle[b-es1nlhzo7r] {
        display: none;
    }
}

/* U92 Sub-A (b) — keep the right-hand action cluster on a SINGLE row across the
   tablet band (≤959px). responsive.css otherwise flex-wraps
   .closina-page-header-actions to 2-3 rows here (Fix-8 / X03), which re-inflates
   the header height and cancels the U80 desktop font compaction. Higher
   specificity + !important beats the responsive.css rule. overflow-x:auto lets a
   genuinely-too-wide cluster scroll horizontally rather than wrap or clip
   (the content scroller is overflow-x:clip); overflow-y:hidden + a little
   vertical padding keeps the RefreshButton badge from being clipped. */
@media (max-width: 959px) {
    .closina-page-header-band-compact .closina-page-header-actions[b-es1nlhzo7r] {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* The MudToggleGroup view-toggle (admin ConversationViewToggle) is
       display:grid — it must NOT shrink (shrinking collapses its tracks →
       segment overlap). Keep its natural width. Mirrors the responsive.css
       Fix-8 guard. */
    .closina-page-header-band-compact .closina-page-header-actions .mud-toggle-group[b-es1nlhzo7r] {
        flex-shrink: 0 !important;
    }
}
/* /Components/Navigation/SiblingSubNavShell.razor.rz.scp.css */
/* SiblingSubNavShell — Phase U75 Sub-Phase A.
   Tri-mode reusable sub-navigation shell (Xs dropdown / Sm+ tabs / Sm+ rail).
   All colors / shadows / radii / transitions via --closina-* tokens (Cat 22).
   Anchor-tab styles extracted from MonitoringNavTabs.razor.css. */

/* ═══════════════════════════════════════════════════════════════════════════
   Common wrapper
   ═══════════════════════════════════════════════════════════════════════════ */
.sibling-sub-nav-shell[b-hsdqzux6x7] {
    display: block;
    margin: 0 0 16px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Xs dropdown branch
   ═══════════════════════════════════════════════════════════════════════════ */
.sibling-sub-nav-shell-dropdown[b-hsdqzux6x7] {
    width: 100%;
    padding: 0;
}

.sibling-sub-nav-shell-dropdown-item[b-hsdqzux6x7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sm+ tabs branch — modeled on MonitoringNavTabs.razor.css
   ═══════════════════════════════════════════════════════════════════════════ */
.sibling-sub-nav-shell-tabs[b-hsdqzux6x7] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--closina-border);
    /* Hide horizontal scrollbar in Chromium while still allowing scroll-x. */
    scrollbar-width: thin;
}

.sibling-sub-nav-shell-tab[b-hsdqzux6x7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px; /* House touch floor (platform convention), not WCAG 2.5.5 — that
                         is AAA and not claimed; the AA bar is 2.5.8's 24x24. Z39. */
    padding: 8px 16px;
    /* Phase Z13 Sub-Phase A: dedicated tab-label token (≥5:1 contrast vs page surface).
       Was --closina-text-secondary (4.55:1 AA-narrow); --closina-text-tab-label is
       5.76:1 light / 7.87:1 dark — clears WCAG 1.4.3 AA with comfortable margin. */
    color: var(--closina-text-tab-label);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color var(--closina-transition-fast),
                border-color var(--closina-transition-fast),
                background-color var(--closina-transition-fast);
    white-space: nowrap;
}

.sibling-sub-nav-shell-tab:hover[b-hsdqzux6x7] {
    color: var(--closina-text-primary);
    background-color: var(--closina-surface-hover);
    text-decoration: none;
}

/* :focus-visible intentionally NOT overridden — universal rule in
   closina-theme.css applies WCAG 1.4.11-compliant focus ring to every
   interactive element (FocusVisibleContrastConvention_Tests). */

.sibling-sub-nav-shell-tab.active[b-hsdqzux6x7] {
    color: var(--closina-primary);
    border-bottom-color: var(--closina-primary);
    background-color: transparent;
}

.sibling-sub-nav-shell-tab.active:hover[b-hsdqzux6x7] {
    background-color: var(--closina-surface-hover);
}

.sibling-sub-nav-shell-tab-icon[b-hsdqzux6x7] {
    flex-shrink: 0;
}

.sibling-sub-nav-shell-tab-label[b-hsdqzux6x7] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sm+ rail branch — modeled on SettingsHubShell.razor non-drawer path
   ═══════════════════════════════════════════════════════════════════════════ */
.sibling-sub-nav-shell-rail[b-hsdqzux6x7] {
    min-width: 240px;
    max-width: 280px;
    background: transparent;
    border-right: 1px solid var(--closina-border);
}

.sibling-sub-nav-shell-rail-item[b-hsdqzux6x7] {
    border-radius: var(--closina-radius-sm);
}

.sibling-sub-nav-shell-rail-item.active[b-hsdqzux6x7] {
    color: var(--closina-primary);
    background-color: var(--closina-surface-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Foldable / mobile responsive tightening on tabs
   (Xs branch is dropdown so most foldable cases skip these — the rules below
   only apply when a Sm+ render context dips into Xs territory due to e.g.
   container queries or reduced parent width.)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    .sibling-sub-nav-shell-tabs[b-hsdqzux6x7] {
        gap: 2px;
        margin-bottom: 8px;
    }

    .sibling-sub-nav-shell-tab[b-hsdqzux6x7] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .sibling-sub-nav-shell-tab-label[b-hsdqzux6x7] {
        max-width: 120px;
    }
}

@media (max-width: 399px) {
    .sibling-sub-nav-shell-tab[b-hsdqzux6x7] {
        padding: 8px 10px;
    }

    .sibling-sub-nav-shell-tab-label[b-hsdqzux6x7] {
        max-width: 80px;
    }
}
/* /Components/Priorities/PrioritiesWidget.razor.rz.scp.css */
[b-m52d2haxjh] .priority-item:hover {
    background-color: var(--closina-hover-faint);
    cursor: pointer;
}

/* U68 Sub-E: priority-item leading icons render at the inline-context size (16px)
   so they sit cleanly in the row without crowding the title text. */
[b-m52d2haxjh] .priority-item .mud-icon-root {
    font-size: var(--closina-icon-inline);
}
/* /Components/SmartLoadingWrapper.razor.rz.scp.css */
/* SmartLoadingWrapper Styles */

.smart-loading-wrapper[b-6bka7szh0x] {
    position: relative;
    min-height: 200px;
}

.content-container[b-6bka7szh0x] {
    position: relative;
}

/* Refresh overlay - semi-transparent over existing content */
.refresh-overlay[b-6bka7szh0x] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--closina-surface-overlay, rgba(255, 255, 255, 0.85));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--closina-z-sticky);
    border-radius: var(--closina-radius-md);
}

/* Dark mode support via theme toggle (Phase U01 Sub-Phase 5) */
:global([data-theme="dark"]) .refresh-overlay[b-6bka7szh0x] {
    background-color: var(--closina-surface-overlay-dark, rgba(15, 23, 42, 0.85));
}

/* U68 Sub-E: refresh-overlay's optional inline status icon renders at touch
   size (24px) so it stays legible behind the spinner + status caption. */
.refresh-overlay .refresh-overlay-icon[b-6bka7szh0x] {
    font-size: var(--closina-icon-touch);
}

/* Phase U99 Sub-Phase C: while the greyed "Refreshing…" overlay is up
   (.is-refreshing), suppress a server-paged Syncfusion grid's native spinner so a
   manual refresh shows exactly ONE indicator (the overlay) instead of a double
   spinner. `::deep` reaches the grid's `.e-spinner-pane` rendered inside
   ChildContent. Scoped to the overlay window only — sort/filter/page operations
   don't toggle the page IsLoading, so they keep the native grid spinner. */
.content-container.is-refreshing[b-6bka7szh0x]  .e-spinner-pane {
    display: none;
}
/* /Components/Wizard/WizardProgressIndicator.razor.rz.scp.css */
/* UX-R04: the Stepper-mode progress chips form a single flex row. On narrow viewports
   (e.g. 375px the 6-chip Outreach create wizard) the row is wider than the viewport and
   was overflowing the page content scroller (~126px horizontal scroll). Scope the overflow
   to THIS row so it scrolls within itself instead of pushing the whole page wide. */
.wizard-stepper[b-pfizpg0x2c] {
    overflow-x: auto;
    /* Allow the row to begin at the start when it overflows so the first step is reachable. */
    scrollbar-width: thin;
}

/* When the chips fit, keep them centered (MudStack Justify.Center); when they overflow and
   the container scrolls, flex-start ensures step 1 is the scroll origin rather than clipped. */
.wizard-stepper > .mud-stack[b-pfizpg0x2c] {
    justify-content: safe center;
}
/* /Pages/Booking/PublicBookingTypePage.razor.rz.scp.css */
/* Booking Step Dots - Phase U14f: Lightweight step indicator for public booking context */
.booking-steps[b-5tsk05qpaj] {
    text-align: center;
}

.booking-steps-list[b-5tsk05qpaj] {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
}

.booking-step[b-5tsk05qpaj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* Connector lines between steps */
.booking-step:not(:last-child)[b-5tsk05qpaj]::after {
    content: '';
    position: absolute;
    top: 8px;
    left: calc(50% + 12px);
    width: calc(2rem - 4px);
    height: 2px;
    background-color: var(--closina-border);
    transition: background-color var(--closina-transition);
}

.booking-step--complete:not(:last-child)[b-5tsk05qpaj]::after {
    background-color: var(--closina-primary);
}

.booking-step-dot[b-5tsk05qpaj] {
    width: 16px;
    height: 16px;
    border-radius: var(--closina-radius-full);
    border: 2px solid var(--closina-border);
    background-color: var(--closina-surface);
    transition: all var(--closina-transition);
}

.booking-step--active .booking-step-dot[b-5tsk05qpaj] {
    border-color: var(--closina-primary);
    background-color: var(--closina-primary);
    box-shadow: 0 0 0 4px var(--closina-primary-light, rgba(4, 120, 87, 0.15));
}

.booking-step--complete .booking-step-dot[b-5tsk05qpaj] {
    border-color: var(--closina-primary);
    background-color: var(--closina-primary);
}

/* U68 Sub-E: when a booking step replaces its dot with a checkmark/icon glyph,
   render at inline-context size (16px) so it fits inside the 16px dot bounds. */
.booking-step-dot .mud-icon-root[b-5tsk05qpaj] {
    font-size: var(--closina-icon-inline);
    color: var(--closina-primary-text);
}

.booking-step-label[b-5tsk05qpaj] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--closina-text-muted);
    transition: color var(--closina-transition);
}

.booking-step--active .booking-step-label[b-5tsk05qpaj] {
    color: var(--closina-primary);
    font-weight: 600;
}

.booking-step--complete .booking-step-label[b-5tsk05qpaj] {
    color: var(--closina-text-secondary);
}

/* Responsive: stack labels below dots on small screens */
@media (max-width: 399px) {
    .booking-steps-list[b-5tsk05qpaj] {
        gap: 1rem;
    }

    .booking-step-label[b-5tsk05qpaj] {
        font-size: 0.65rem;
    }

    .booking-step:not(:last-child)[b-5tsk05qpaj]::after {
        width: calc(1rem - 4px);
    }
}
/* /Pages/DashboardRouter.razor.rz.scp.css */
/* Dashboard Styles */
.dashboard-container[b-j2u9xu9tlq] {
    padding: 2rem 0;
    background-color: var(--closina-background);
    min-height: calc(100dvh - 56px);
}

/* Stats Cards */
.stats-card[b-j2u9xu9tlq] {
    transition: transform var(--closina-transition);
}

.stats-card:hover[b-j2u9xu9tlq] {
    transform: translateY(-2px);
}

.stats-icon[b-j2u9xu9tlq] {
    width: 48px;
    height: 48px;
    border-radius: var(--closina-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--closina-icon-nav); /* U68 Sub-E: 20px (was 1.25rem hardcode) */
}

/* Color utilities */
.bg-primary-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-primary-light);
}

.bg-success-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-success-bg);
}

.bg-warning-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-warning-bg);
}

.bg-info-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-info-bg);
}

.text-primary[b-j2u9xu9tlq] {
    color: var(--closina-primary) !important;
}

.text-success[b-j2u9xu9tlq] {
    color: var(--closina-success-text) !important;
}

.text-warning[b-j2u9xu9tlq] {
    color: var(--closina-warning-text) !important;
}

.text-info[b-j2u9xu9tlq] {
    color: var(--closina-info-text) !important;
}

:global([data-theme="dark"]) .bg-success-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-success-bg);
}

:global([data-theme="dark"]) .bg-warning-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-warning-bg);
}

:global([data-theme="dark"]) .bg-info-soft[b-j2u9xu9tlq] {
    background-color: var(--closina-status-info-bg);
}

/* Activity List */
.activity-list[b-j2u9xu9tlq] {
    max-height: 300px;
    overflow-y: auto;
}

.activity-item[b-j2u9xu9tlq] {
    display: flex;
    align-items: start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--closina-border);
}

.activity-item:last-child[b-j2u9xu9tlq] {
    border-bottom: none;
}

.activity-icon[b-j2u9xu9tlq] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.activity-content[b-j2u9xu9tlq] {
    flex: 1;
}

/* Card Overrides */
.card[b-j2u9xu9tlq] {
    border-radius: var(--closina-radius-md);
}

.card-header[b-j2u9xu9tlq] {
    border-bottom: 1px solid var(--closina-border);
    padding: 1.25rem;
}

/* Button Overrides */
.btn-primary[b-j2u9xu9tlq] {
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
}

.btn-primary:hover[b-j2u9xu9tlq] {
    background-color: var(--closina-primary-hover);
    border-color: var(--closina-primary-hover);
}

.btn-outline-primary[b-j2u9xu9tlq] {
    color: var(--closina-primary);
    border-color: var(--closina-primary);
}

.btn-outline-primary:hover[b-j2u9xu9tlq] {
    background-color: var(--closina-primary);
    border-color: var(--closina-primary);
}
/* /Pages/Index.razor.rz.scp.css */
/* Landing Page Styles - Phase U08 Updated */
.landing-page[b-awhnjwt388] {
    margin-top: -1rem; /* Offset any default padding */
}

/* Header Section */
.header-section[b-awhnjwt388] {
    background: linear-gradient(135deg, var(--closina-primary-hover) 0%, var(--closina-primary) 100%);
    position: relative;
    overflow: hidden;
}

.header-section[b-awhnjwt388]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--closina-surface-overlay-light, rgba(255,255,255,0.05)) 0%, transparent 70%);
    transform: rotate(45deg);
}

.header-section .container[b-awhnjwt388] {
    position: relative;
    z-index: var(--closina-z-base);
}

.tagline[b-awhnjwt388] {
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.95;
}

/* Features Section */
.features-section[b-awhnjwt388] {
    background-color: var(--closina-background);
    color: var(--closina-text-primary);
}

/* Landing Feature Card */
[b-awhnjwt388] .landing-feature-card {
    padding: 1.25rem;
    height: 100%;
    border-radius: var(--closina-radius-md);
    background-color: var(--closina-surface);
    border: 1px solid var(--closina-border);
    transition: transform var(--closina-transition), box-shadow var(--closina-transition);
}

[b-awhnjwt388] .landing-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--closina-shadow-md);
}

[b-awhnjwt388] .landing-feature-icon-wrapper {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    background: var(--closina-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--closina-transition);
}

[b-awhnjwt388] .landing-feature-card:hover .landing-feature-icon-wrapper {
    background: var(--closina-primary);
}

[b-awhnjwt388] .landing-feature-icon {
    font-size: var(--closina-icon-header); /* U68 Sub-E: 28px */
    color: var(--closina-primary);
    transition: color var(--closina-transition);
}

[b-awhnjwt388] .landing-feature-card:hover .landing-feature-icon {
    color: white;
}

[b-awhnjwt388] .landing-feature-description {
    font-size: 0.85rem;
    color: var(--closina-text-secondary);
    line-height: 1.4;
    margin-bottom: 0;
}

/* Landing Feature Section */
[b-awhnjwt388] .landing-feature-section {
    padding-bottom: 1rem;
}

[b-awhnjwt388] .landing-section-icon {
    font-size: 2rem;
    color: var(--closina-primary);
}

.landing-section-subtitle[b-awhnjwt388],
[b-awhnjwt388] .landing-section-subtitle {
    color: var(--closina-text-secondary);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Social Proof Section */
.social-proof-section[b-awhnjwt388] {
    background-color: var(--closina-surface);
    border-top: 1px solid var(--closina-border);
    border-bottom: 1px solid var(--closina-border);
}

.social-proof-stat[b-awhnjwt388] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.social-proof-number[b-awhnjwt388] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--closina-primary);
    line-height: 1.1;
}

.social-proof-label[b-awhnjwt388] {
    font-size: 0.9rem;
    color: var(--closina-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* CTA Section */
.cta-section[b-awhnjwt388] {
    background-color: var(--closina-primary-hover);
    background-image: linear-gradient(135deg, var(--closina-primary-hover) 0%, var(--closina-primary) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section[b-awhnjwt388]::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--closina-surface-overlay-light, rgba(255,255,255,0.05)) 0%, transparent 70%);
    transform: rotate(-45deg);
}

.cta-section .container[b-awhnjwt388] {
    position: relative;
    z-index: var(--closina-z-base);
}

/* Footer */
[b-awhnjwt388] .landing-footer {
    background-color: var(--closina-surface);
    border-top: 1px solid var(--closina-border);
    padding: 3rem 0 1.5rem;
    color: var(--closina-text-primary);
}

[b-awhnjwt388] .landing-footer-heading {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: var(--closina-text-primary);
}

[b-awhnjwt388] .landing-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-awhnjwt388] .landing-footer-links li {
    margin-bottom: 0.5rem;
}

[b-awhnjwt388] .landing-footer-links a {
    color: var(--closina-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--closina-transition-fast);
}

[b-awhnjwt388] .landing-footer-links a:hover {
    color: var(--closina-primary);
}

[b-awhnjwt388] .landing-footer-divider {
    border-color: var(--closina-border);
    margin: 2rem 0 1rem;
}

[b-awhnjwt388] .landing-footer-copyright {
    color: var(--closina-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

[b-awhnjwt388] .landing-footer-version {
    color: var(--closina-text-muted);
    font-size: 0.75rem;
    font-family: var(--closina-font-mono);
    margin: 0.25rem 0 0;
    opacity: 0.7;
}

/* Button Overrides */
.btn-light[b-awhnjwt388] {
    background-color: white;
    border-color: white;
    color: var(--closina-primary);
    font-weight: 600;
    border-radius: var(--closina-radius-full);
}

.btn-light:hover[b-awhnjwt388] {
    background-color: var(--closina-surface-hover);
    border-color: var(--closina-surface-hover);
    color: var(--closina-primary-hover);
}

.btn-outline-light[b-awhnjwt388] {
    color: white;
    border-color: white;
    font-weight: 600;
    border-radius: var(--closina-radius-full);
}

.btn-outline-light:hover[b-awhnjwt388] {
    background-color: white;
    color: var(--closina-primary);
}

/* Hero + CTA buttons — match the visual heft of the login/register submit
   button (abp-button size="Large" inside .d-grid). Bootstrap's default
   .btn-lg is too compact relative to the full-width pill on the auth pages. */
.header-section .btn-lg[b-awhnjwt388],
.cta-section .btn-lg[b-awhnjwt388] {
    padding: 0.875rem 2.25rem;
    font-size: 1.0625rem;
    min-height: 52px;
    min-width: 200px;
    border-width: 2px;
}

/* Responsive adjustments — 959px covers all touch devices per project convention */
@media (max-width: 959px) {
    .header-section[b-awhnjwt388] {
        padding: 3rem 0;
    }

    .display-4[b-awhnjwt388] {
        font-size: 2.5rem;
    }

    .display-6[b-awhnjwt388] {
        font-size: 1.75rem;
    }

    [b-awhnjwt388] .landing-feature-card {
        padding: 1rem;
    }

    [b-awhnjwt388] .landing-feature-icon-wrapper {
        width: 44px;
        height: 44px;
    }

    [b-awhnjwt388] .landing-feature-icon {
        font-size: var(--closina-icon-touch); /* U68 Sub-E: 24px (was 22px hardcode; closest token within +2px) */
    }

    .social-proof-number[b-awhnjwt388] {
        font-size: 2rem;
    }

    .social-proof-label[b-awhnjwt388] {
        font-size: 0.75rem;
    }

    /* Stack CTA buttons vertically on mobile (UX audit: prevent 99px stretch) */
    .cta-section .d-flex.gap-3[b-awhnjwt388] {
        flex-direction: column;
        align-items: center;
    }

    .cta-section .btn-lg[b-awhnjwt388] {
        width: 100%;
        max-width: 280px;
    }

    /* Relax the desktop min-width on touch devices so hero buttons don't
       overflow when they remain side-by-side at narrow widths. */
    .header-section .btn-lg[b-awhnjwt388],
    .cta-section .btn-lg[b-awhnjwt388] {
        min-width: 0;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    /* Increase footer link touch targets on touch devices to the house ≥44px floor
       (platform convention — NOT WCAG 2.5.5, which is AAA and not claimed; the AA bar
       is 2.5.8's 24x24, and inline links may anyway qualify for its Inline
       exception). Re-cited Phase Z39. */
    [b-awhnjwt388] .landing-footer-links a {
        display: inline-block;
        padding: 12px 0; /* 12px + ~22px text + 12px = 46px > 44px minimum */
    }
}

/* Dark mode overrides */
[data-theme="dark"][b-awhnjwt388]  .landing-feature-card {
    background-color: var(--closina-surface);
    border-color: var(--closina-border);
}

[data-theme="dark"] .social-proof-section[b-awhnjwt388] {
    background-color: var(--closina-surface);
}

[data-theme="dark"][b-awhnjwt388]  .landing-footer {
    background-color: var(--closina-surface);
}

/* Loading state for navigation buttons (Login / Start Free Trial) */
.landing-nav-btn.landing-nav-loading[b-awhnjwt388] {
    pointer-events: none;
    opacity: 0.75;
}
/* /Pages/Legal/Components/ScrollableAgreementContent.razor.rz.scp.css */
/* ScrollableAgreementContent styles (Phase 15) */

.scrollable-agreement-container[b-dy4lyagegv] {
    margin-bottom: 1rem;
}

.scrollable-agreement-content[b-dy4lyagegv] {
    /* Smooth scrolling for better UX */
    scroll-behavior: smooth;

    /* Focus styling for keyboard navigation */
    &:focus {
        outline: 2px solid var(--closina-primary);
        outline-offset: 2px;
    }

    /* Mobile-friendly touch scrolling */
    -webkit-overflow-scrolling: touch;[b-dy4lyagegv]
}

.agreement-markdown-content[b-dy4lyagegv] {
    /* Standard markdown rendering styles */
    line-height: 1.6;

    h1, h2, h3, h4, h5, h6 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

    h1[b-dy4lyagegv] { font-size: 1.5rem; }
    h2[b-dy4lyagegv] { font-size: 1.25rem; }
    h3[b-dy4lyagegv] { font-size: 1.1rem; }

    p[b-dy4lyagegv] {
        margin-bottom: 1rem;
    }

    ul[b-dy4lyagegv], ol[b-dy4lyagegv] {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    li[b-dy4lyagegv] {
        margin-bottom: 0.25rem;
    }

    a[b-dy4lyagegv] {
        color: var(--closina-primary);
        text-decoration: underline;
    }

    blockquote[b-dy4lyagegv] {
        border-left: 4px solid var(--closina-border);
        padding-left: 1rem;
        margin: 1rem 0;
        color: var(--closina-text-secondary);
    }

    code[b-dy4lyagegv] {
        background-color: var(--closina-surface);
        padding: 0.125rem 0.25rem;
        border-radius: var(--closina-radius-sm);
        font-family: var(--closina-font-mono);
        font-size: 0.9em;
    }

    pre[b-dy4lyagegv] {
        background-color: var(--closina-surface);
        padding: 1rem;
        border-radius: var(--closina-radius-sm);
        overflow-x: auto;
    }

    table[b-dy4lyagegv] {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
    }

    th[b-dy4lyagegv], td[b-dy4lyagegv] {
        border: 1px solid var(--closina-border);
        padding: 0.5rem;
        text-align: left;
    }

    th[b-dy4lyagegv] {
        background-color: var(--closina-surface);
        font-weight: 600;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    .scrollable-agreement-content[b-dy4lyagegv] {
        max-height: 300px !important;
    }

    .agreement-markdown-content[b-dy4lyagegv] {
        font-size: 0.9rem;

        h1 { font-size: 1.25rem; }
        h2[b-dy4lyagegv] { font-size: 1.1rem; }
        h3[b-dy4lyagegv] { font-size: 1rem; }
    }
}
/* /Pages/Onboarding/MemberOnboardingWizardPage.razor.rz.scp.css */
.onboarding-container[b-xaisww6uaf] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 8px;
}

@media (min-width: 600px) {
    .onboarding-container[b-xaisww6uaf] {
        padding: 0 16px;
    }
}

@media (min-width: 960px) {
    .onboarding-container[b-xaisww6uaf] {
        padding: 0 24px;
    }
}

[b-xaisww6uaf] .onboarding-voice-card {
    cursor: pointer;
    transition: border-color var(--closina-transition-fast);
}

[b-xaisww6uaf] .onboarding-voice-card.selected {
    border: 2px solid var(--closina-primary);
}
/* /Themes/ClosinaTheme/Components/Layout/TabletPaneLayout.razor.rz.scp.css */
/* Phase U15d: TabletPaneLayout — responsive two-pane component.
   Scoped CSS for the list/detail split layout. */

.tablet-pane-layout[b-sintkqv1lu] {
    width: 100%;
    height: 100%;
}

.pane-container[b-sintkqv1lu] {
    width: 100%;
}

.pane-back-nav[b-sintkqv1lu] {
    display: flex;
    align-items: center;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--closina-border, rgba(0, 0, 0, 0.06));
    margin-bottom: 8px;
}

.pane-list-full[b-sintkqv1lu],
.pane-detail-full[b-sintkqv1lu] {
    width: 100%;
}

.pane-split[b-sintkqv1lu] {
    display: flex;
    width: 100%;
    gap: 16px;
}

.pane-list[b-sintkqv1lu],
.pane-detail[b-sintkqv1lu] {
    min-width: 0;
    overflow: auto;
}

/* Desktop/tablet detail-pane close affordance — top-right, unobtrusive.
   Mirrors the mobile pane-back-nav so split-pane consumers can deselect
   (staging feedback 3a2216a9). */
.pane-detail[b-sintkqv1lu] {
    position: relative;
}

.pane-detail-close[b-sintkqv1lu] {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    z-index: var(--closina-z-base, 1);
}

.pane-empty-detail[b-sintkqv1lu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    border: 1px dashed var(--closina-border-strong, rgba(0, 0, 0, 0.12));
    border-radius: var(--closina-radius-md, 12px);
}

/* U68 Sub-E: pane-empty-detail hero icon — empty-state context. */
.pane-empty-detail .pane-empty-detail-icon[b-sintkqv1lu] {
    font-size: var(--closina-icon-empty-state);
    color: var(--closina-text-muted, #6e6e6e);
}

/* Dark mode */
[data-theme="dark"] .pane-back-nav[b-sintkqv1lu] {
    border-bottom-color: var(--closina-border, rgba(255, 255, 255, 0.06));
}

[data-theme="dark"] .pane-empty-detail[b-sintkqv1lu] {
    border-color: var(--closina-border-strong, rgba(255, 255, 255, 0.12));
}