/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* ==========================================================================
   AuthLayout — hosts archetype E pages. No sidebar; the card centres on the
   page ground. Spec: docs/features/62-ui-ux-design-system.md §5.E.
   ========================================================================== */

.auth-shell[b-0otmt0ttlk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-4);
    background: var(--bg-page);
}

@media (min-width: 900px) {
    .auth-shell[b-0otmt0ttlk] { padding: var(--space-6); }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-35dm146wl5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-35dm146wl5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
/* Scoped to the portal shell. The staff stylesheet is not reused wholesale on purpose: a customer
   sees one company's records, not an operator's workspace, and sharing the chrome would make every
   later staff-side style change a change to what customers see. */

.portal[b-yd9pitq7sy] {
    min-height: 100vh;
    background: var(--surface-sunken, #f6f7f9);
    color: var(--text-primary, #1a1d21);
}

.portal__bar[b-yd9pitq7sy] {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e3e6ea);
    flex-wrap: wrap;
}

.portal__brand[b-yd9pitq7sy] {
    font-weight: 600;
    font-size: var(--t-title-size, 1.05rem);
    color: inherit;
    text-decoration: none;
}

.portal__nav[b-yd9pitq7sy] {
    display: flex;
    gap: var(--space-4, 1rem);
}

.portal__nav a[b-yd9pitq7sy] {
    color: var(--text-secondary, #5b6470);
    text-decoration: none;
    padding: var(--space-1, 0.25rem) 0;
}

.portal__nav a:hover[b-yd9pitq7sy],
.portal__nav a:focus-visible[b-yd9pitq7sy] {
    color: var(--text-primary, #1a1d21);
}

.portal__who[b-yd9pitq7sy] {
    color: var(--text-secondary, #5b6470);
    font-size: var(--t-small-size, 0.875rem);
}

.portal__signout[b-yd9pitq7sy] {
    color: var(--text-secondary, #5b6470);
    font-size: var(--t-small-size, 0.875rem);
}

.portal__main[b-yd9pitq7sy] {
    /* Capped rather than full-bleed: these are documents, and a line of invoice description
       stretched across a 32-inch monitor is unreadable. */
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-5, 1.5rem);
}

.portal-tiles[b-yd9pitq7sy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.5rem);
}

.portal-tile[b-yd9pitq7sy] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6ea);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4, 1rem);
}

.portal-tile__value[b-yd9pitq7sy] {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
}

.portal-tile__label[b-yd9pitq7sy] {
    color: var(--text-secondary, #5b6470);
    font-size: var(--t-small-size, 0.875rem);
}

.portal-panel[b-yd9pitq7sy] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6ea);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.portal-table[b-yd9pitq7sy] {
    width: 100%;
    border-collapse: collapse;
}

.portal-table th[b-yd9pitq7sy],
.portal-table td[b-yd9pitq7sy] {
    text-align: left;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--border, #e3e6ea);
}

.portal-table td.is-numeric[b-yd9pitq7sy],
.portal-table th.is-numeric[b-yd9pitq7sy] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The table scrolls inside its own box rather than widening the page. */
.portal-scroll[b-yd9pitq7sy] {
    overflow-x: auto;
}
/* /Components/Layout/PublicFormLayout.razor.rz.scp.css */
/* Public form shell.

   Mobile-first: most visitors arrive on a phone, often from an in-app browser, so the shell
   respects the notch/home-indicator insets and uses dynamic viewport height so the card is not
   clipped by a collapsing address bar. `.public-form` inside supplies the padding and card. */

.public-shell[b-fd413i4wxx] {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0ist0fiizc],
.components-reconnect-repeated-attempt-visible[b-0ist0fiizc],
.components-reconnect-failed-visible[b-0ist0fiizc],
.components-pause-visible[b-0ist0fiizc],
.components-resume-failed-visible[b-0ist0fiizc],
.components-rejoining-animation[b-0ist0fiizc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-retrying[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-failed[b-0ist0fiizc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0ist0fiizc] {
    display: block;
}


#components-reconnect-modal[b-0ist0fiizc] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0ist0fiizc 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0ist0fiizc 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0ist0fiizc 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0ist0fiizc]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0ist0fiizc 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0ist0fiizc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0ist0fiizc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0ist0fiizc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0ist0fiizc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0ist0fiizc] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0ist0fiizc] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0ist0fiizc] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0ist0fiizc] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0ist0fiizc] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0ist0fiizc] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0ist0fiizc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0ist0fiizc] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0ist0fiizc {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Login-specific row: "Keep me logged in" left, "Forgot password?" right. */

.auth-row[b-cnoplluil5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.auth-row .checkbox[b-cnoplluil5] {
    font-size: var(--t-label-size);
    line-height: var(--t-label-lh);
    color: var(--text-secondary);
}

.auth-row__link[b-cnoplluil5] {
    font-size: var(--t-label-size);
    line-height: var(--t-label-lh);
    font-weight: var(--t-label-weight);
    color: var(--accent-link);
}

/* Development-only sign-in shortcut. Visually separated from the real form and deliberately
   understated — it must read as scaffolding, not as a supported way in. */
.auth-dev[b-cnoplluil5] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-dev__label[b-cnoplluil5] {
    font-size: var(--t-meta-size);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
/* /Components/Pages/Calendar/CalendarPage.razor.rz.scp.css */
/* Calendar — CSS isolation (§7.1). Layout only: chips, buttons, fields, callouts and the empty
   state all come from the shared sheets. Tokens only, no literal colours (§2).

   NOT reusing the global .calendar__* block. Those classes belong to the DatePicker popover — 268px
   wide, 32px round day cells — so a full-page month grid built on them inherits a fixed width and
   collapses to a quarter of the screen. Same idea, different component; different names. */

/* --------------------------------------------------------------------------
   Month navigation and the view switch, inside the shared .toolbar
   -------------------------------------------------------------------------- */

.cal-nav[b-26q2u9201z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* A fixed measure so the grid below does not shift sideways as the month name changes length —
   "May 2026" and "September 2026" differ by enough to move the arrows under the cursor. */
.cal-nav__title[b-26q2u9201z] {
    min-width: 11ch;
    text-align: center;
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    color: var(--text-primary);
}

.cal-views[b-26q2u9201z],
.cal-sources[b-26q2u9201z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Month grid
   -------------------------------------------------------------------------- */

.cal-month[b-26q2u9201z] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 var(--space-6) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}

.cal-month__head[b-26q2u9201z],
.cal-month__grid[b-26q2u9201z] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-month__head[b-26q2u9201z] {
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}

.cal-month__dow[b-26q2u9201z] {
    padding: var(--space-2);
    text-align: center;
    font-size: var(--t-meta-size);
    font-weight: var(--t-meta-weight);
    color: var(--text-tertiary);
}

/* Six equal rows, always. The row count is fixed in MonthGrid for the same reason the height is
   fixed here: a grid that changes shape month to month makes the whole page jump when paging. */
.cal-month__grid[b-26q2u9201z] {
    flex: 1;
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.cal-month__cell[b-26q2u9201z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: var(--space-1);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* The last column and the last row have the card's own border beside them already. */
.cal-month__cell:nth-child(7n)[b-26q2u9201z] { border-right: none; }
.cal-month__cell:nth-last-child(-n + 7)[b-26q2u9201z] { border-bottom: none; }

/* Muted, not hidden. A blank cell reads as "nothing happens then"; these days belong to the
   neighbouring month and their contents are real. */
.cal-month__cell--muted[b-26q2u9201z] { background: var(--bg-subtle); }
.cal-month__cell--muted .cal-month__num[b-26q2u9201z] { color: var(--text-tertiary); }

.cal-month__cell--today[b-26q2u9201z] { background: var(--bg-muted); }

.cal-month__num[b-26q2u9201z] {
    font-size: var(--t-meta-size);
    font-weight: var(--t-label-weight);
    color: var(--text-secondary);
    padding: 0 var(--space-1);
}

.cal-month__cell--today .cal-month__num[b-26q2u9201z] { color: var(--action-primary); }

.cal-month__more[b-26q2u9201z] {
    align-self: flex-start;
    padding: 0 var(--space-1);
    background: none;
    border: none;
    font-size: var(--t-meta-size);
    color: var(--accent-link);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Entry pill

   The colour arrives as --cal-accent on the element's own style attribute, set from the entry's
   colour or its source's default. It is a custom property rather than a background so the border
   and the text can be derived from the same value in one place.
   -------------------------------------------------------------------------- */

.cal-pill[b-26q2u9201z] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    width: 100%;
    padding: 1px var(--space-1);
    border: none;
    border-left: 3px solid var(--cal-accent, var(--action-primary));
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-size: var(--t-meta-size);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.cal-pill:hover[b-26q2u9201z] { background: var(--bg-muted); }

.cal-pill__time[b-26q2u9201z] {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.cal-pill__title[b-26q2u9201z] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Agenda
   -------------------------------------------------------------------------- */

.cal-agenda[b-26q2u9201z] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-6) var(--space-6);
}

.cal-agenda__day + .cal-agenda__day[b-26q2u9201z] { margin-top: var(--space-4); }

.cal-agenda__date[b-26q2u9201z] {
    margin: 0 0 var(--space-2);
    font-size: var(--t-label-size);
    font-weight: var(--t-section-weight);
    color: var(--text-secondary);
}

.cal-agenda__date--today[b-26q2u9201z] { color: var(--action-primary); }

.cal-agenda__list[b-26q2u9201z] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}

.cal-agenda__item[b-26q2u9201z] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-height: var(--row-height);
}

.cal-agenda__item + .cal-agenda__item[b-26q2u9201z] { border-top: 1px solid var(--border); }

.cal-agenda__time[b-26q2u9201z] {
    flex-shrink: 0;
    min-width: 6ch;
    font-size: var(--t-label-size);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cal-agenda__title[b-26q2u9201z] {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--t-body-size);
    color: var(--text-primary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-agenda__title:hover[b-26q2u9201z] { color: var(--accent-link); }

.cal-dot[b-26q2u9201z] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--cal-accent, var(--action-primary));
}

/* --------------------------------------------------------------------------
   Colour swatches in the editor
   -------------------------------------------------------------------------- */

.cal-swatches[b-26q2u9201z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.cal-swatch[b-26q2u9201z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-tertiary);
    cursor: pointer;
}

/* A ring, not a colour change — the swatch IS a colour, so selection cannot be signalled with one.
   aria-pressed carries the same state for anyone who cannot see the ring. */
.cal-swatch--on[b-26q2u9201z] {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Callout row, which the shared sheet styles but does not lay out inline
   -------------------------------------------------------------------------- */

.callout[b-26q2u9201z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-6) var(--space-3);
}
/* /Components/Pages/Calendar/TodosPage.razor.rz.scp.css */
/* To-dos — CSS isolation (§7.1). Layout only: the checkbox, fields, buttons and empty state come
   from the shared sheets. Tokens only, no literal colours (§2). */

.todos[b-z2mut8g0fb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--space-5);
    padding: 0 var(--space-6) var(--space-6);

    /* A checklist is read top to bottom, so it wants a measure rather than the full width of a
       widescreen monitor — a line of text three feet long is one the eye loses its place in. */
    max-width: 760px;
}

.todos__add[b-z2mut8g0fb] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.todos__add-field[b-z2mut8g0fb] { flex: 1; }

.todos__section[b-z2mut8g0fb] {
    display: grid;
    gap: var(--space-2);
}

.todos__heading[b-z2mut8g0fb] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    color: var(--text-secondary);
}

.todos__list[b-z2mut8g0fb] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}

.todos__item[b-z2mut8g0fb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: var(--row-height);
}

.todos__item + .todos__item[b-z2mut8g0fb] { border-top: 1px solid var(--border); }

.todos__check[b-z2mut8g0fb] { margin: 0; }

.todos__text[b-z2mut8g0fb] {
    min-width: 0;
    font-size: var(--t-body-size);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.todos__edit[b-z2mut8g0fb] { flex: 1; }

/* Struck through AND dimmed. Strike-through alone disappears at small sizes and on a monochrome
   display; the checkbox state carries it for assistive technology either way. */
.todos__item--done .todos__text[b-z2mut8g0fb] {
    text-decoration: line-through;
    color: var(--text-tertiary);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard — CSS isolation (§7.1). Layout only: the tiles, cards, grid and timeline all come
   from the shared sheets. Tokens only, no literal colours (§2). */

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

/* The shell clips its frame, so the scroll has to live here — the page header stays put while
   the widgets scroll under it. */
.dash[b-7b34edey4t] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--bg-inset);
}

/* --------------------------------------------------------------------------
   KPI row — 4 across, 2, then 1 (§7.5)
   -------------------------------------------------------------------------- */

.dash__kpis[b-7b34edey4t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Charts beside the side column
   -------------------------------------------------------------------------- */

.dash__main[b-7b34edey4t] {
    display: grid;
    /* 5:2 rather than 2:1 — two charts share the left cell and each needs room for its axis
       labels; the lists on the right stay readable at a narrower measure. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
}

/* Stretch, not start: two chart cards of unequal natural height read as a mistake when they sit
   side by side, and the shorter one has room to spare anyway. */
.dash__charts[b-7b34edey4t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

.dash__side[b-7b34edey4t] {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

/* Title over subtitle inside a card header that is otherwise a single row. */
.dash__heading[b-7b34edey4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash__funnel[b-7b34edey4t] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.dash__donut[b-7b34edey4t] {
    flex: 0 0 100px;
    max-width: 100px;
}

.dash__funnel-bars[b-7b34edey4t] {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Contacts list
   -------------------------------------------------------------------------- */

.dash__list[b-7b34edey4t] {
    display: flex;
    flex-direction: column;
}

.dash__row[b-7b34edey4t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

/* Separators between rows only — a trailing rule would double the card's own bottom border. */
.dash__row + .dash__row[b-7b34edey4t] {
    border-top: 1px solid var(--border);
}

.dash__row-text[b-7b34edey4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dash__row-name[b-7b34edey4t] {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.dash__row-link[b-7b34edey4t],
.dash__see-all[b-7b34edey4t] {
    flex-shrink: 0;
    font-size: var(--t-label-size);
}

/* --------------------------------------------------------------------------
   Activity — bullet tones come from TimelineItem.razor.css; only the trailing
   spacer needs adjusting for a card that ends on the feed
   -------------------------------------------------------------------------- */

/* The last entry's rail is already suppressed; drop its spacer so the card closes evenly. */
.dash__side[b-7b34edey4t]  .timeline__item:last-child {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Deals preview
   -------------------------------------------------------------------------- */

/* The table's own corners are square; the card has to do the clipping. */
.dash__deals[b-7b34edey4t] {
    overflow: hidden;
}

.dash__deals .card__header[b-7b34edey4t] {
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

.dash__deals-search[b-7b34edey4t] {
    flex: 0 1 240px;
    min-width: 160px;
}

/* --------------------------------------------------------------------------
   Responsive (§7.5)
   -------------------------------------------------------------------------- */

/* Two charts side by side stop being readable before the side column does. */
@media (max-width: 1439px) {
    .dash__charts[b-7b34edey4t] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1279px) {
    .dash__kpis[b-7b34edey4t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .dash[b-7b34edey4t] {
        padding: var(--space-4);
    }

    .dash__main[b-7b34edey4t] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .dash__kpis[b-7b34edey4t] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash__funnel[b-7b34edey4t] {
        flex-direction: column;
        align-items: stretch;
    }

    .dash__donut[b-7b34edey4t] {
        align-self: center;
    }

    .dash__deals-search[b-7b34edey4t] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/LeadForms/AppearanceSettings.razor.rz.scp.css */
/* Template-specific appearance settings, in the builder's right-hand column.

   The column is narrow (300px, less on smaller screens), so everything here stacks rather than
   sitting in rows that would wrap unpredictably. */

.appearance-pages[b-di2c4sixw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.appearance-pages__label[b-di2c4sixw9] {
    font-size: var(--t-label-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Per-step image list
   -------------------------------------------------------------------------- */

.appearance-pages[b-di2c4sixw9] {
    padding: var(--space-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
/* /Components/Pages/LeadForms/BuilderCanvas.razor.rz.scp.css */
/* Canvas glue. forms.css owns .builder__*; everything here is what a canvas needs on top of it. */

.builder__canvas[b-npi62z7a7t] { display: flex; flex-direction: column; gap: var(--space-4); }

/* Inline page title/description: an author renames a step far more often than anything else, so it
   edits in place. Chromeless until pointed at, so the canvas still reads as a form preview. */
.page-title-input[b-npi62z7a7t],
.page-description-input[b-npi62z7a7t] {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
}

.page-description-input[b-npi62z7a7t] {
    width: 100%;
    margin-bottom: var(--space-3);
    font-size: var(--t-body-size);
    font-weight: 400;
    color: var(--text-secondary);
}

.page-title-input:hover[b-npi62z7a7t],
.page-description-input:hover[b-npi62z7a7t] { border-color: var(--border); }

.page-title-input:focus[b-npi62z7a7t],
.page-description-input:focus[b-npi62z7a7t] { border-color: var(--border-strong); background: var(--bg-surface); }

.page-title-input[b-npi62z7a7t]::placeholder,
.page-description-input[b-npi62z7a7t]::placeholder { color: var(--text-tertiary); }

/* Full-bleed selection target sitting over the disabled preview. Transparent on purpose — the
   .builder__field wrapper already shows hover and selected state. */
.canvas-select[b-npi62z7a7t] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* The row actions are opacity:0 until hover, which would strand a keyboard user on an invisible
   button. Focus inside the field counts as pointing at it. */
.builder__field:focus-within .builder__field-actions[b-npi62z7a7t] { opacity: 1; }

.canvas-hidden[b-npi62z7a7t] { display: flex; align-items: center; gap: var(--space-2); }

.canvas-page-footer[b-npi62z7a7t] { margin-top: var(--space-3); }

.canvas-add-page[b-npi62z7a7t] { padding-bottom: var(--space-6); }
/* /Components/Pages/LeadForms/ColourSetting.razor.rz.scp.css */
/* A colour, editable from a swatch or by typing it. Lives in the builder's right-hand column,
   which is narrow, so the row is swatch + field + clear and nothing else. */

.colour-setting[b-f45iyvu7h4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.colour-setting__label[b-f45iyvu7h4] {
    font-size: var(--t-label-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.colour-setting__row[b-f45iyvu7h4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* The native colour input is styled down to a plain square. Its default chrome is a browser-shaped
   button that sits badly beside the product's own inputs, and the parts that differ per browser are
   exactly the parts that would look broken here. */
.colour-setting__swatch[b-f45iyvu7h4] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
}

.colour-setting__swatch[b-f45iyvu7h4]::-webkit-color-swatch-wrapper { padding: 2px; }

.colour-setting__swatch[b-f45iyvu7h4]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
}

.colour-setting__swatch[b-f45iyvu7h4]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
}

.colour-setting__row[b-f45iyvu7h4]  .colour-setting__text {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/LeadForms/FieldPalette.razor.rz.scp.css */
/* Palette bits forms.css does not own. Layout only — colours stay on tokens. */

.palette-target[b-ltcr245zdn] {
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--t-label-size);
    font-weight: var(--t-body-medium-weight);
}

/* The palette items are click-to-add, not drag handles — forms.css sets `cursor: grab`, which
   promises a drag this build does not implement. */
.builder__palette-item[b-ltcr245zdn] { cursor: pointer; }
/* /Components/Pages/LeadForms/FormBuilder.razor.rz.scp.css */
/* Builder shell. forms.css owns the three-column grid; this is what the page around it needs. */

/* forms.css sizes .builder at height:100%, which needs a definite parent. Inside the shell's flex
   column it takes the leftover space instead, so palette, canvas and settings each scroll alone. */
.builder--fill[b-i5bhri0rek] {
    height: auto;
    flex: 1;
    min-height: 0;
}

/* Preview is an anchor so it can open in a second tab; strip the global link underline. */
.preview-link[b-i5bhri0rek],
.preview-link:hover[b-i5bhri0rek] { text-decoration: none; }

/* ::deep — the settings panels are separate components, but this is one column visually and the
   rhythm has to match across both of them. */
.builder[b-i5bhri0rek]  .settings-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.builder[b-i5bhri0rek]  .settings-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.builder[b-i5bhri0rek]  .settings-heading {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--t-meta-size);
    font-weight: 500;
    color: var(--text-tertiary);
}

.builder[b-i5bhri0rek]  .settings-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Template row — the way into the catalogue
   -------------------------------------------------------------------------- */

.builder[b-i5bhri0rek]  .setting-template {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.builder[b-i5bhri0rek]  .setting-template__label {
    font-size: var(--t-label-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

/* Shows the current template as a picture rather than a word: the name alone is what made the
   old dropdown unusable, since it never revealed what was being chosen. */
.builder[b-i5bhri0rek]  .setting-template__current {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    text-align: left;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

.builder[b-i5bhri0rek]  .setting-template__current:hover {
    border-color: var(--text-tertiary);
    background: var(--bg-subtle);
}

.builder[b-i5bhri0rek]  .setting-template__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.builder[b-i5bhri0rek]  .setting-template__name {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.builder[b-i5bhri0rek]  .setting-template__hint {
    font-size: var(--t-meta-size);
    color: var(--text-tertiary);
}

.template-picker__note[b-i5bhri0rek] { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   Settings that are stored but not yet acted on
   Marked rather than hidden: the author's intent is worth keeping, and a control that silently
   does nothing is worse than one that says so.
   -------------------------------------------------------------------------- */

.builder[b-i5bhri0rek]  .setting-inert {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.builder[b-i5bhri0rek]  .setting-inert > .field { width: 100%; }
/* /Components/Pages/LeadForms/ImageSetting.razor.rz.scp.css */
/* An image address with a thumbnail of what it resolves to. */

.image-setting[b-g1hxrv8vkb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.image-setting--compact[b-g1hxrv8vkb] { gap: var(--space-1); }

/* Capped rather than sized: the author's image can be any shape, and letting it set its own height
   would make the settings column jump every time one is entered. contain, not cover, because the
   point of the thumbnail is to confirm WHICH image this is — cropping it defeats that. */
.image-setting__preview[b-g1hxrv8vkb] {
    align-self: flex-start;
    max-width: 100%;
    max-height: 88px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
}

.image-setting--compact .image-setting__preview[b-g1hxrv8vkb] { max-height: 56px; }
/* /Components/Pages/LeadForms/TemplateGallery.razor.rz.scp.css */
/* The built-in template catalogue, as selectable cards. */

.tpl-gallery[b-7s164msuv4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.tpl-card[b-7s164msuv4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    text-align: left;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast),
                background-color var(--motion-fast);
}

.tpl-card:hover:not(:disabled)[b-7s164msuv4] {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.tpl-card:disabled[b-7s164msuv4] {
    opacity: .6;
    cursor: not-allowed;
}

/* Selection is carried by the ring AND the tick beside the name, never by colour alone — the
   difference between a hovered card and the chosen one has to survive a monochrome display. */
.tpl-card--selected[b-7s164msuv4] {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 1px var(--action-primary);
}

.tpl-card__preview[b-7s164msuv4] { display: block; }

.tpl-card__body[b-7s164msuv4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.tpl-card__name[b-7s164msuv4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.tpl-card__check[b-7s164msuv4] {
    display: inline-flex;
    color: var(--action-primary);
}

.tpl-card__description[b-7s164msuv4] {
    font-size: var(--t-meta-size);
    line-height: var(--t-body-lh);
    color: var(--text-secondary);
}

.tpl-card__meta[b-7s164msuv4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
/* /Components/Pages/LeadForms/TemplateThumbnail.razor.rz.scp.css */
/* Miniatures of the built-in templates.

   Drawn rather than screenshotted so they cannot go stale, and built from the same tokens the real
   templates use so a theme change moves both together. Everything here is decorative — the markup
   is aria-hidden and every name beside it is real text. */

.tpl-thumb[b-q5hjlbxaf8] {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);

    /* The miniature is laid out in the same proportions as the real template, so it scales as one
       piece instead of reflowing into a different design at small sizes. */
    container-type: inline-size;
    font-size: 6px;
}

/* --------------------------------------------------------------------------
   Classic — the product's own styling
   -------------------------------------------------------------------------- */

.tpl-thumb__classic[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 8px;
}

.tpl-thumb__classic-title[b-q5hjlbxaf8] {
    width: 46%;
    height: 5px;
    border-radius: 2px;
    background: var(--text-primary);
}

.tpl-thumb__classic-grid[b-q5hjlbxaf8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.tpl-thumb__classic-grid > span[b-q5hjlbxaf8] {
    height: 9px;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    background: var(--bg-subtle);
}

.tpl-thumb__classic-wide[b-q5hjlbxaf8] { grid-column: span 2; }

.tpl-thumb__classic-btn[b-q5hjlbxaf8] {
    width: 34%;
    height: 8px;
    margin-top: auto;
    border-radius: 2px;
    background: var(--action-primary);
}

/* --------------------------------------------------------------------------
   Quote request — formal, black on white, serif display
   -------------------------------------------------------------------------- */

.tpl-thumb__quote[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    padding: 9px 10px;
    background: var(--bg-surface);
}

.tpl-thumb__quote-head[b-q5hjlbxaf8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tpl-thumb__quote-mark[b-q5hjlbxaf8] {
    width: 22%;
    height: 4px;
    border-radius: 1px;
    background: var(--text-primary);
}

/* The step fraction is the template's signature, so it is drawn as real glyphs rather than
   suggested with a block — it is the fastest way to recognise this one in the gallery. */
.tpl-thumb__quote-count[b-q5hjlbxaf8] {
    font-family: ui-serif, "Iowan Old Style", Palatino, "Times New Roman", serif;
    font-size: 11px;
    line-height: 1;
    color: var(--text-primary);
}

.tpl-thumb__quote-count span[b-q5hjlbxaf8] {
    font-size: 7px;
    color: var(--text-tertiary);
}

.tpl-thumb__quote-rule[b-q5hjlbxaf8] {
    height: 1px;
    background: var(--border);
}

.tpl-thumb__quote-rule span[b-q5hjlbxaf8] {
    display: block;
    width: 35%;
    height: 100%;
    background: var(--text-primary);
}

.tpl-thumb__quote-title[b-q5hjlbxaf8] {
    width: 62%;
    height: 6px;
    margin-top: 2px;
    border-radius: 1px;
    background: var(--text-primary);
}

.tpl-thumb__quote-line[b-q5hjlbxaf8] {
    height: 8px;
    border-bottom: 1px solid var(--border-strong);
}

.tpl-thumb__quote-line--short[b-q5hjlbxaf8] { width: 60%; }

.tpl-thumb__quote-nav[b-q5hjlbxaf8] {
    display: flex;
    gap: 4px;
    margin-top: auto;
}

.tpl-thumb__quote-btn[b-q5hjlbxaf8] {
    width: 26px;
    height: 8px;
    border: 1px solid var(--text-primary);
    border-radius: 1px;
}

.tpl-thumb__quote-btn--solid[b-q5hjlbxaf8] { background: var(--text-primary); }

/* --------------------------------------------------------------------------
   Client onboarding — deep-blue step rail beside a white pane
   -------------------------------------------------------------------------- */

.tpl-thumb__onb[b-q5hjlbxaf8] {
    display: grid;
    grid-template-columns: 34% 1fr;
    height: 100%;
}

.tpl-thumb__onb-rail[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 6px;
    background: linear-gradient(160deg, #14306b, #1c4a9c);
}

.tpl-thumb__onb-mark[b-q5hjlbxaf8] {
    width: 11px;
    height: 11px;
    margin-bottom: 3px;
    border-radius: 3px;
    background: #ffffff;
}

.tpl-thumb__onb-step[b-q5hjlbxaf8] {
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .22);
}

.tpl-thumb__onb-step--done[b-q5hjlbxaf8] { background: rgba(34, 197, 94, .85); }
.tpl-thumb__onb-step--current[b-q5hjlbxaf8] { background: #ffffff; }

.tpl-thumb__onb-pane[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: var(--bg-surface);
}

.tpl-thumb__onb-head[b-q5hjlbxaf8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.tpl-thumb__onb-title[b-q5hjlbxaf8] {
    width: 54%;
    height: 6px;
    border-radius: 2px;
    background: var(--text-primary);
}

/* The progress ring, which is the fastest way to tell this template from the others at 180px. */
.tpl-thumb__onb-ring[b-q5hjlbxaf8] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(#2563eb 35%, var(--bg-muted) 0);
}

.tpl-thumb__onb-bar[b-q5hjlbxaf8] {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 35%, var(--bg-muted) 35%);
}

.tpl-thumb__onb-grid[b-q5hjlbxaf8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.tpl-thumb__onb-grid > span[b-q5hjlbxaf8] {
    height: 11px;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    background: var(--bg-subtle);
}

/* --------------------------------------------------------------------------
   Quiz — one bold question per screen, lettered options, hero band
   -------------------------------------------------------------------------- */

.tpl-thumb__quiz[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-surface);
}

.tpl-thumb__quiz-hero[b-q5hjlbxaf8] {
    height: 26%;
    flex-shrink: 0;
    background: linear-gradient(120deg, var(--action-primary), var(--text-primary));
}

.tpl-thumb__quiz-body[b-q5hjlbxaf8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px 8px;
}

.tpl-thumb__quiz-pill[b-q5hjlbxaf8] {
    align-self: flex-start;
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 5px;
    font-weight: 600;
    line-height: 1.4;
}

.tpl-thumb__quiz-question[b-q5hjlbxaf8] {
    width: 78%;
    height: 7px;
    margin-bottom: 2px;
    border-radius: 1px;
    background: var(--text-primary);
}

.tpl-thumb__quiz-option[b-q5hjlbxaf8] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
}

.tpl-thumb__quiz-letter[b-q5hjlbxaf8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 5px;
    font-weight: 700;
    line-height: 1;
}

.tpl-thumb__quiz-text[b-q5hjlbxaf8] {
    height: 3px;
    flex: 1;
    border-radius: 1px;
    background: var(--bg-muted);
}
/* /Components/Pages/Leads/LeadBoard.razor.rz.scp.css */
/* Leads board — the parts KanbanBoard cannot style.
   Column headers and card bodies are rendered from this page's fragments, so they carry this
   page's scope; the board's own sheet cannot reach them. Tokens only. */

.board__status[b-oclxsdr7qs] {
    padding: var(--space-6) 0;
}

/* ---- Column header ---- */

.board__stage[b-oclxsdr7qs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.board__stage-name[b-oclxsdr7qs] {
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    line-height: var(--t-section-lh);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__stage-count[b-oclxsdr7qs] {
    font-size: var(--t-meta-size);
    font-weight: var(--t-label-weight);
    color: var(--text-secondary);
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
    flex-shrink: 0;
}

/* The stage total sits under the count on a narrow column rather than truncating: a pipeline
   figure that reads "€1,2..." is worse than no figure. */
.board__stage-value[b-oclxsdr7qs] {
    flex-basis: 100%;
    text-align: right;
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ---- Card ---- */

.board__card-link[b-oclxsdr7qs] {
    display: block;
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    line-height: var(--t-body-lh);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__card-link:hover[b-oclxsdr7qs],
.board__card-link:focus-visible[b-oclxsdr7qs] {
    color: var(--accent-link);
    text-decoration: underline;
}

.board__card-company[b-oclxsdr7qs] {
    margin-top: 2px;
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__card-meta[b-oclxsdr7qs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.board__card-value[b-oclxsdr7qs] {
    font-size: var(--t-label-size);
    font-weight: var(--t-label-weight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.board__card-footer[b-oclxsdr7qs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.board__card-assignee[b-oclxsdr7qs] {
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__card-assignee--none[b-oclxsdr7qs] {
    color: var(--text-tertiary);
    font-style: italic;
}
/* /Components/Pages/Leads/LeadDetail.razor.rz.scp.css */
/* Lead detail. The shell owns the two-column frame and components.css owns every surface inside;
   what is left here is the identity column's density and the terminal-state banner. Tokens only. */

.lead-loading[b-hzse8bfpkd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
}

.lead-loading__title[b-hzse8bfpkd] { height: 28px; width: 240px; }
.lead-loading__line[b-hzse8bfpkd] { height: 16px; width: 100%; max-width: 520px; }

/* ---- Identity column ----------------------------------------------------- */

.lead-tags[b-hzse8bfpkd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lead-facts[b-hzse8bfpkd],
.lead-sections dl[b-hzse8bfpkd] {
    width: 100%;
    margin: 0;
}

/* dd carries a 40px inline start margin by default, which would push every value out of its
   grid cell. app.css resets ul/ol but has no reason to know about dl. */
.lead-facts dd[b-hzse8bfpkd],
.lead-sections dd[b-hzse8bfpkd],
.lead-facts dt[b-hzse8bfpkd],
.lead-sections dt[b-hzse8bfpkd] {
    margin: 0;
}

/* .kv is authored for a full-width panel: a 160px key column inside a 340px identity column
   leaves an email address about twelve characters. Same rhythm, narrower key. */
.lead-facts .kv[b-hzse8bfpkd],
.lead-sections .kv[b-hzse8bfpkd] {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-2);
}

.lead-facts .kv__value[b-hzse8bfpkd],
.lead-sections .kv__value[b-hzse8bfpkd] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lead-facts__owner[b-hzse8bfpkd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.lead-origin__inline[b-hzse8bfpkd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.lead-sections[b-hzse8bfpkd] {
    display: flex;
    flex-direction: column;
}

/* ::deep — the custom-field grid is the panel's own markup. Twelve columns inside a 292px column
   gives a "half width" field about 140px, so the identity column takes one field per row.
   Three class selectors beat the panel's own .cf-col--n, which is what makes the reset stick. */
.lead-custom[b-hzse8bfpkd]  .cf-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.lead-custom[b-hzse8bfpkd]  .cf-grid__item {
    grid-column-start: auto;
    grid-column-end: span 1;
}

/* ---- Terminal-state banner ---------------------------------------------- */

.lead-banner[b-hzse8bfpkd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border-left: 3px solid;
}

.lead-banner__icon[b-hzse8bfpkd] { display: inline-flex; flex-shrink: 0; }

.lead-banner__text[b-hzse8bfpkd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.lead-banner__title[b-hzse8bfpkd] {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
}

.lead-banner__body[b-hzse8bfpkd] {
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
}

/* Tone pairs come straight from the tag tokens, so a lost banner and a Lost tag are the same red. */
.lead-banner--danger[b-hzse8bfpkd] {
    background: var(--tag-danger-bg);
    border-left-color: var(--tag-danger-dot);
    color: var(--tag-danger-fg);
}

.lead-banner--warning[b-hzse8bfpkd] {
    background: var(--tag-warning-bg);
    border-left-color: var(--tag-warning-dot);
    color: var(--tag-warning-fg);
}

.lead-banner--success[b-hzse8bfpkd] {
    background: var(--tag-success-bg);
    border-left-color: var(--tag-success-dot);
    color: var(--tag-success-fg);
}

.lead-banner--info[b-hzse8bfpkd] {
    background: var(--tag-info-bg);
    border-left-color: var(--tag-info-dot);
    color: var(--tag-info-fg);
}

.lead-banner--neutral[b-hzse8bfpkd],
.lead-banner--rose[b-hzse8bfpkd],
.lead-banner--violet[b-hzse8bfpkd] {
    background: var(--tag-neutral-bg);
    border-left-color: var(--tag-neutral-dot);
    color: var(--tag-neutral-fg);
}

/* ---- Header controls ----------------------------------------------------- */

/* The two pickers are the header's working controls, not fields on a form; a fixed width keeps
   the action cluster from reflowing every time a longer status name is chosen. */
.lead-header__select[b-hzse8bfpkd] { width: 200px; }

/* Stands in for the stage picker on a terminal lead. Same width, so the action cluster does not
   jump when a lead is marked lost. */
.lead-header__locked[b-hzse8bfpkd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    color: var(--text-tertiary);
}

/* ---- Activity tab -------------------------------------------------------- */

.lead-activity[b-hzse8bfpkd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.lead-log .card__body[b-hzse8bfpkd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lead-log__row[b-hzse8bfpkd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* /Components/Pages/Leads/LeadsList.razor.rz.scp.css */
/* Leads list — only the two cells whose content is specific to this screen. Everything else is a
   shared class from data.css / shell.css, and nothing here introduces a colour of its own. */

/* The Status cell can hold two tags at once — the pipeline stage plus a terminal flag, because the
   Lost and Junk views return terminal leads alongside open ones. nowrap keeps the pair on one line;
   letting them stack would make those rows taller than their neighbours and break the scan down the
   column. */
.lead-status[b-py2d1pwwj7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.lead-source[b-py2d1pwwj7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Recessed so the glyph reads as an annotation on the source rather than part of its name. */
.lead-source__origin[b-py2d1pwwj7] {
    display: inline-flex;
    color: var(--text-tertiary);
}
/* /Components/Pages/Newsfeed/NewsfeedPostCard.razor.rz.scp.css */
/* Newsfeed post card. Spec: docs/features/46-newsfeed-announcements.md §1.

   The body rule is load-bearing, not cosmetic. Post and comment text is stored as PLAIN TEXT with
   its line breaks intact, so the breaks have to be honoured by CSS. The alternative — converting
   them to <br> on save, which is what legacy's nl2br() does — means the column holds markup, and a
   column that holds markup is one refactor away from being rendered as markup. */

/* The card root. It carries .card for the surface, so this rule owns only what .card cannot know:
   a flex child defaults to min-width:auto and refuses to shrink below its content, so one pasted
   URL with no spaces in it widens the whole feed column and puts a horizontal scrollbar on the
   page. min-width:0 is what lets the overflow-wrap below actually take effect.

   This class is also how the render tests select one post (NewsfeedRenderTests). Renaming it
   silently reduces those tests to asserting nothing found nothing, so rename both together. */
.newsfeed-post[b-9p3nwbho9l] {
    min-width: 0;
}

.newsfeed-post__body[b-9p3nwbho9l] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.newsfeed-post__actions[b-9p3nwbho9l] {
    margin-top: var(--space-3);
}

.newsfeed-post__thread[b-9p3nwbho9l] {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.newsfeed-post__reply[b-9p3nwbho9l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}
/* /Components/Pages/Newsfeed/NewsfeedWall.razor.rz.scp.css */
/* Newsfeed wall. Spec: docs/features/46-newsfeed-announcements.md §1.

   A single column: the wall is read top to bottom, and a grid would put a post beside an unrelated
   post as though the two were a pair. */

.newsfeed[b-i32807vny7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.newsfeed__composer[b-i32807vny7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}
/* /Components/Pages/PublicForm/PublicFormField.razor.rz.scp.css */
/* Focus states for the controls whose real <input> is visually hidden inside its label.
   The global :focus-visible ring lands on a 1px off-screen box and shows nothing, so the ring is
   moved onto the thing the visitor can actually see. Keyboard operation of a choice card or a
   rating star is otherwise invisible. */

.choice-card:focus-within[b-jkc1rjvsm8] {
    border-color: var(--action-primary);
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}

.form-field__star:focus-within[b-jkc1rjvsm8] {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* The card is a <label> here rather than a <button>, so it needs the pointer affordance the
   shared .choice-card rule attaches to the button. */
.choice-card[b-jkc1rjvsm8] { cursor: pointer; }
/* /Components/Pages/PublicForm/PublicFormPage.razor.rz.scp.css */
/* Layout-only additions for the public form page. Everything visual comes from forms.css. */

/* Single-page mode stacks every page as a section; they need air between them and above the grid.
   forms.css owns the grid itself, so only the rhythm lives here. */
.public-form__section + .public-form__section[b-te39h6iqna] { margin-top: var(--space-6); }

.public-form__section > .form-grid[b-te39h6iqna] { margin-top: var(--space-4); }

/* Honeypot.

   Off-screen rather than display:none or hidden — the bots worth catching skip anything the CSS
   removes outright, and an input the browser never lays out is one it never offers to autofill.
   Paired with tabindex="-1" and aria-hidden on the wrapper so no keyboard or screen-reader user
   can reach it either. */
.public-form__trap[b-te39h6iqna] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The card clips its children, so an absolutely positioned trap needs a positioned ancestor that
   is not the viewport — otherwise it can drag the page's horizontal scroll on mobile. */
.public-form__body[b-te39h6iqna] { position: relative; }
/* /Components/Pages/PublicForm/Templates/OnboardingTemplate.razor.rz.scp.css */
/* ==========================================================================
   "Client onboarding" template
   Ported from LeadFlow: docs/reference/leadmanager-onboarding-wizard.html

   A deep-blue sidebar carrying the step list against a white content pane, inside one rounded card
   floating on a pale blue page. Two-column fields, card choices, Back / Continue at the foot.

   The reference's palette is reproduced as literals rather than sourced from tokens.css, and that is
   deliberate: the sidebar must stay deep blue and the pane must stay white in EVERY theme. Taking
   them from tokens would invert both under dark mode and destroy the contrast the design is built
   on. The accent is the one colour an author controls, and it is used only where a mis-chosen colour
   cannot make text unreadable.
   ========================================================================== */

.tpl-onb[b-m15hjcbg7u] {
    --onb-accent: #2563eb;

    /* Derived from the accent rather than fixed. It was a hardcoded blue while the accent was
       author-settable, so choosing a purple accent left the button gradient ending in blue and the
       lettermark blue — the setting appeared to half-work. Darkening the accent keeps the gradient
       reading as one colour whatever is chosen, and an author who wants a specific deep tone can
       still set it outright. */
    --onb-accent-dark: color-mix(in srgb, #000000 32%, var(--onb-accent));
    --onb-accent-soft: color-mix(in srgb, var(--onb-accent) 12%, #ffffff);

    /* Marks a completed step. Its own colour, not the accent: a step is not "branded" when it is
       finished, and a wizard whose done and current steps look alike has no progress indicator. */
    --onb-done: rgba(34, 197, 94, .9);

    --onb-page: #eef3f9;
    --onb-surface: #ffffff;
    --onb-surface-soft: #f8fafc;
    --onb-text: #14213d;
    --onb-muted: #64748b;
    --onb-line: #dbe4ef;

    /* The sidebar gradient's base, and an author setting. The reference's own deep blue. */
    --onb-panel: #12326f;
    --onb-sidebar-ink: #ffffff;
    --onb-sidebar-ink-soft: rgba(255, 255, 255, .72);
    --onb-sidebar-ink-faint: rgba(255, 255, 255, .48);
    --onb-sidebar-line: rgba(255, 255, 255, .18);

    --onb-radius: 24px;

    display: block;
    min-height: 100%;
    padding: 28px;
    background: var(--onb-page);
    color: var(--onb-text);
    font-family: var(--font-sans);
}

/* The host may still wrap this in its own card; two nested cards read as a mistake. */
.public-form__card .tpl-onb[b-m15hjcbg7u] { padding: 0; }

/* Wider than the reference's 1120px. That figure came from a marketing page with one column of
   copy; this form puts two columns of fields beside a step rail, and at 1120 the fields were
   working in a ~700px pane on a screen with 1900 to give. The cap stays because a text input that
   runs the full width of a large monitor is harder to scan, not easier. */
.tpl-onb__shell[b-m15hjcbg7u] {
    width: min(1560px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 22%) minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--onb-radius);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
}

@media (max-width: 860px) {
    .tpl-onb[b-m15hjcbg7u] { padding: 0; }
    .tpl-onb__shell[b-m15hjcbg7u] {
        grid-template-columns: 1fr;
        min-height: 100vh;
        border-radius: 0;
    }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.tpl-onb__sidebar[b-m15hjcbg7u] {
    padding: 34px 28px;
    color: var(--onb-sidebar-ink);
    /* Built from the author's panel colour: their colour at the far corner, a darkened version of
       the same at the near one. Darkening rather than mixing in a second hue keeps the gradient
       reading as one colour, and guarantees the top of the pane is never lighter than the bottom —
       which is what the white text and the translucent step chrome are laid out against. */
    background:
        linear-gradient(160deg,
            color-mix(in srgb, #000000 30%, var(--onb-panel)),
            var(--onb-panel));
}

.tpl-onb__brand[b-m15hjcbg7u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 38px;
}

.tpl-onb__mark[b-m15hjcbg7u] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #dbeafe);
    color: var(--onb-accent-dark);
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.tpl-onb__brand-copy[b-m15hjcbg7u] { min-width: 0; }

.tpl-onb__brand-name[b-m15hjcbg7u] {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    color: var(--onb-sidebar-ink);
}

.tpl-onb__brand-note[b-m15hjcbg7u] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #bfdbfe;
}

.tpl-onb__logo[b-m15hjcbg7u] {
    display: block;
    max-height: 44px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}

/* ---- Step list ---- */

.tpl-onb__steps[b-m15hjcbg7u] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tpl-onb__step[b-m15hjcbg7u] {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    color: var(--onb-sidebar-ink-soft);
    transition: background-color var(--motion-fast), color var(--motion-fast);
}

.tpl-onb__step--current[b-m15hjcbg7u] {
    color: var(--onb-sidebar-ink);
    background: rgba(255, 255, 255, .10);
}

.tpl-onb__step--done[b-m15hjcbg7u] { color: #dbeafe; }

.tpl-onb__step-number[b-m15hjcbg7u] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--onb-sidebar-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tpl-onb__step--current .tpl-onb__step-number[b-m15hjcbg7u] {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--onb-accent-dark);
}

/* Done is a tick, not only a colour — the one state cue that survives greyscale and forced
   colours. */
.tpl-onb__step--done .tpl-onb__step-number[b-m15hjcbg7u] {
    background: var(--onb-done);
    border-color: var(--onb-done);
    color: #ffffff;
}

.tpl-onb__step-label[b-m15hjcbg7u] {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.tpl-onb__aside-note[b-m15hjcbg7u] {
    margin-top: 34px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
    /* The author's intro may contain the newlines the Quote template turns into bullets. Here they
       stay newlines rather than being silently joined into one run-on paragraph. */
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Content pane
   -------------------------------------------------------------------------- */

.tpl-onb__content[b-m15hjcbg7u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 34px 40px 30px;
    background: var(--onb-surface);
}

@media (max-width: 640px) {
    .tpl-onb__content[b-m15hjcbg7u] { padding: 26px 20px 24px; }
    .tpl-onb__sidebar[b-m15hjcbg7u] { padding: 22px; }
    .tpl-onb__brand[b-m15hjcbg7u] { margin-bottom: 20px; }
}

.tpl-onb__topbar[b-m15hjcbg7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.tpl-onb__topbar-copy[b-m15hjcbg7u] { min-width: 0; }

.tpl-onb__eyebrow[b-m15hjcbg7u] {
    margin: 0 0 6px;
    color: var(--onb-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.tpl-onb__title[b-m15hjcbg7u] {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--onb-text);
}

/* The percentage drives a conic-gradient stop, which is why it arrives as a bare number in a custom
   property rather than as a class — there is no finite set of classes that covers every step count. */
.tpl-onb__ring[b-m15hjcbg7u] {
    --onb-progress: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--onb-accent) calc(var(--onb-progress) * 1%), #e7edf5 0);
}

.tpl-onb__ring[b-m15hjcbg7u]::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: var(--onb-surface);
}

.tpl-onb__ring span[b-m15hjcbg7u] {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--onb-text);
}

@media (max-width: 640px) {
    .tpl-onb__ring[b-m15hjcbg7u] { display: none; }
}

.tpl-onb__bar[b-m15hjcbg7u] {
    height: 6px;
    margin-bottom: 28px;
    border-radius: var(--radius-full);
    background: #e8eef5;
    overflow: hidden;
}

.tpl-onb__bar-fill[b-m15hjcbg7u] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--onb-accent), color-mix(in srgb, var(--onb-accent) 40%, #38bdf8));
    transition: width var(--motion-base);
}

.tpl-onb__step-body[b-m15hjcbg7u] { flex: 1; }

.tpl-onb__alert[b-m15hjcbg7u] { margin-bottom: var(--space-5); }

.tpl-onb__grid[b-m15hjcbg7u] { row-gap: 18px; }

/* --------------------------------------------------------------------------
   Controls — ::deep, because they come from PublicFormField. This template restyles them without
   owning them, which is what keeps one field renderer serving every template.
   -------------------------------------------------------------------------- */

.tpl-onb__grid[b-m15hjcbg7u]  .field__label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.tpl-onb__grid[b-m15hjcbg7u]  .input {
    height: auto;
    padding: 4px 14px;
    border: 1px solid var(--onb-line);
    border-radius: 13px;
    background: var(--onb-surface);
}

.tpl-onb__grid[b-m15hjcbg7u]  .input__control { min-height: 42px; }

.tpl-onb__grid[b-m15hjcbg7u]  .input:focus-within {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .11);
}

.tpl-onb__grid[b-m15hjcbg7u]  .textarea .input__control { min-height: 112px; line-height: 1.55; }

/* ---- Card choices ---- */

.tpl-onb__grid[b-m15hjcbg7u]  .choice-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 14px;
}

.tpl-onb__grid[b-m15hjcbg7u]  .choice-card {
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--onb-line);
    border-radius: 16px;
    background: var(--onb-surface-soft);
}

.tpl-onb__grid[b-m15hjcbg7u]  .choice-card:hover:not(:disabled) {
    border-color: #9dbcf8;
    background: var(--onb-surface-soft);
    box-shadow: 0 13px 30px rgba(37, 99, 235, .09);
}

.tpl-onb__grid[b-m15hjcbg7u]  .choice-card--selected,
.tpl-onb__grid[b-m15hjcbg7u]  .choice-card:has(input:checked) {
    border-color: var(--onb-accent);
    background: var(--onb-accent-soft);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.tpl-onb__grid[b-m15hjcbg7u]  .choice-card__title { font-size: 15px; font-weight: 700; }

.tpl-onb__grid[b-m15hjcbg7u]  .choice-card__description {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--onb-muted);
}

/* ---- Content block and consent ---- */

.tpl-onb__grid[b-m15hjcbg7u]  .form-field__content {
    padding: 18px;
    border: 1px solid var(--onb-line);
    border-radius: 16px;
    background: var(--onb-surface-soft);
    /* The pricing block's copy is written as one line per point; collapsing the newlines would run
       five separate claims into a single paragraph. */
    white-space: pre-line;
}

.tpl-onb__grid[b-m15hjcbg7u]  .form-field__content-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--onb-accent-dark);
}

.tpl-onb__grid[b-m15hjcbg7u]  .form-field__consent {
    padding: 16px 18px;
    border: 1px solid var(--onb-line);
    border-radius: 16px;
    background: var(--onb-surface-soft);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.tpl-onb__actions[b-m15hjcbg7u] { margin-top: auto; }

/* The fragment brings its own footer with the buttons and a spacer already inside it; only the
   frame is this template's business. */
.tpl-onb__actions[b-m15hjcbg7u]  .public-form__footer {
    padding: 30px 0 0;
    border-top: none;
}

.tpl-onb__actions[b-m15hjcbg7u]  .btn {
    min-width: 126px;
    justify-content: center;
    border-radius: 13px;
    padding: 13px 19px;
    font-weight: 800;
}

.tpl-onb__actions[b-m15hjcbg7u]  .btn--primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--onb-accent), var(--onb-accent-dark));
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .25);
}

.tpl-onb__actions[b-m15hjcbg7u]  .btn--secondary {
    border-color: transparent;
    background: #edf2f7;
    color: #334155;
}

/* The reference lifts its buttons on hover. Kept, but not for anyone who has asked the system to
   stop moving things. */
@media (prefers-reduced-motion: no-preference) {
    .tpl-onb__actions[b-m15hjcbg7u]  .btn { transition: transform var(--motion-fast); }
    .tpl-onb__actions[b-m15hjcbg7u]  .btn:hover { transform: translateY(-2px); }
}
/* /Components/Pages/PublicForm/Templates/QuizTemplate.razor.rz.scp.css */
/* ==========================================================================
   Quiz template  —  bold, one question per screen.

   SCOPED TWICE, ON PURPOSE.
   Blazor CSS isolation stamps every selector below with this component's scope id, and every
   class is additionally namespaced `tpl-quiz*` under the single `.tpl-quiz` root. Either would
   do on its own; together they make it impossible for this sheet to reach a sibling template,
   the admin application, or the shared design system — a public form's styling must never
   become a global. The `::deep` rules are the only ones that cross a component boundary, and
   each is anchored to a `tpl-quiz__` container so it cannot travel further than this card.

   Living here rather than in wwwroot/css means nothing has to be wired into App.razor: the
   isolation bundle (Crm.Web.styles.css) is already linked on every page.

   COLOURS COME FROM THE PALETTE BLOCK, not from literals scattered through the rules — so
   `Theme.AccentColor` has exactly one variable to override.

   Four literals are the exception, and they are deliberate. This template is a dark half against a
   pale half, and both halves must hold that relationship in EVERY theme: sourcing them from
   tokens.css would flip the dark pane to near-white in dark mode and collapse the split that is
   the whole design. So the dark ground, white, and the near-black used on filled pills are fixed
   here, and the accent is mixed toward white before anything dark sits on it — which is what keeps
   that text legible whatever colour an author chooses. Anywhere else, use the palette.
   ========================================================================== */

.tpl-quiz[b-tvs0g5e3bt] {
    /* ---- Palette ---- */
    --q-surface: var(--bg-surface);
    --q-surface-sunken: var(--bg-subtle);
    --q-ink: var(--text-primary);
    --q-ink-muted: var(--text-secondary);
    --q-ink-faint: var(--text-tertiary);
    --q-ink-inverse: var(--text-inverse);
    --q-line: var(--border);
    --q-line-strong: var(--border-strong);
    --q-accent: var(--action-primary);
    --q-danger: var(--tag-danger-fg);
    --q-danger-line: var(--tag-danger-dot);
    --q-danger-bg: var(--tag-danger-bg);
    --q-focus: var(--focus-ring);

    /* ---- Type ----
       The question is the hero element of this template, so it gets a fluid size of its own.
       tokens.css tops out at 24px, which is a stat, not a headline — borrowing it would make
       this template read exactly like Classic, which is the one thing it must not do. */
    --q-question-size: clamp(26px, 7vw, 44px);
    --q-body-size: clamp(15px, 3.4vw, 17px);

    /* ---- The split ----
       Reference: https://jthemes.net/themes/html/quizo/version-1/ — a dark half carrying the
       question and a pale half carrying the answers, artwork across the join.

       The dark ground is near-neutral with a trace of the accent in it, so an author's colour
       reaches the whole design rather than only the highlights. The pale half and every filled
       pill are mixed toward white, which is what keeps dark text legible on them WHATEVER accent
       is chosen — the reason the pills below never simply take the raw accent as a background. */
    --q-dark: color-mix(in srgb, var(--q-accent) 8%, #222a35);
    --q-dark-ink: #ffffff;
    --q-dark-ink-muted: color-mix(in srgb, #ffffff 70%, var(--q-dark));
    --q-dark-ink-faint: color-mix(in srgb, #ffffff 52%, var(--q-dark));
    --q-dark-line: color-mix(in srgb, #ffffff 22%, var(--q-dark));

    --q-wash: color-mix(in srgb, var(--q-accent) 14%, #ffffff);
    --q-pill: color-mix(in srgb, var(--q-accent) 26%, #ffffff);
    --q-pill-on: color-mix(in srgb, var(--q-accent) 62%, #ffffff);

    display: block;
    min-height: 100%;
    background: var(--q-wash);
    /* An option title long enough not to break — a pasted URL, say — would otherwise drag the whole
       page's horizontal scroll on a phone. */
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--q-ink);
}

/* The template is the page, not a card on one. It used to be a centred card, which is why it read
   as "the product with a big heading" rather than as the reference's full-bleed split. */
.public-form__card .tpl-quiz[b-tvs0g5e3bt],
.public-form .tpl-quiz[b-tvs0g5e3bt] {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   The two panes
   -------------------------------------------------------------------------- */

.tpl-quiz__body[b-tvs0g5e3bt] { position: relative; }

/* Stacked until there is room for two columns. Below this the question would be squeezed into a
   strip beside the answers, and both halves need their full measure to read. */
@media (min-width: 900px) {
    .tpl-quiz__body[b-tvs0g5e3bt] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: calc(100vh - 120px);
    }
}

/* The dark half re-points the palette rather than restating it. Every rule below — the question,
   the pills, the eyebrow, the support text — is written against --q-ink and friends, so the whole
   ask inverts from these six lines and cannot drift out of step with the light half. */
.tpl-quiz__ask[b-tvs0g5e3bt] {
    --q-surface: var(--q-dark);
    --q-ink: var(--q-dark-ink);
    --q-ink-muted: var(--q-dark-ink-muted);
    --q-ink-faint: var(--q-dark-ink-faint);
    --q-ink-inverse: var(--q-dark);
    --q-line: var(--q-dark-line);
    --q-line-strong: var(--q-dark-line);

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background: var(--q-dark);
    color: var(--q-dark-ink);
}

.tpl-quiz__answer[b-tvs0g5e3bt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background: var(--q-wash);
}

@media (min-width: 900px) {
    /* Room in the middle for the artwork that straddles the join, so a long option row never runs
       underneath it. */
    .tpl-quiz--illustrated .tpl-quiz__ask[b-tvs0g5e3bt] { padding-right: clamp(var(--space-10), 13vw, 190px); }
    .tpl-quiz--illustrated .tpl-quiz__answer[b-tvs0g5e3bt] { padding-left: clamp(var(--space-10), 13vw, 190px); }
}

/* --------------------------------------------------------------------------
   Step artwork
   -------------------------------------------------------------------------- */

/* A fixed frame the picture is cropped into rather than whatever proportions it happens to have.
   Each step may carry different artwork, and a portrait on one question followed by a letterbox on
   the next would move every option row out from under the visitor's thumb as they advance. */
/* Stacked layout: an ordinary band between the question and the answers. */
.tpl-quiz__figure[b-tvs0g5e3bt] {
    aspect-ratio: 16 / 10;
    /* Capped so the picture cannot swallow a phone screen on the way to the options. Every handset
       is narrower than this, so the cap is inert where it would hurt. */
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Wide layout: centred on the join between the panes, which is the reference's arrangement — the
   artwork belongs to both halves rather than decorating one of them.

   Pointer events pass through: it is decorative, and a picture sitting over the seam must not be
   able to swallow a click meant for the option row behind its transparent corners. */
@media (min-width: 900px) {
    .tpl-quiz__figure[b-tvs0g5e3bt] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: clamp(220px, 26vw, 380px);
        max-width: none;
        aspect-ratio: 1;
        margin: 0;
        pointer-events: none;
    }
}

.tpl-quiz__figure-img[b-tvs0g5e3bt] {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover: this artwork is usually a cut-out illustration meant to read whole, and
       cropping the top off a figure is worse than leaving space around it. */
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Brand line
   -------------------------------------------------------------------------- */

.tpl-quiz__brand[b-tvs0g5e3bt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* Bounded in both axes: the logo is author-supplied and may be any size at all. */
.tpl-quiz__logo[b-tvs0g5e3bt] {
    max-height: 32px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tpl-quiz__eyebrow[b-tvs0g5e3bt] {
    margin: 0;
    font-size: var(--t-meta-size);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--q-ink-faint);
}

.tpl-quiz__intro[b-tvs0g5e3bt] {
    margin: 0 0 var(--space-5);
    max-width: 60ch;
    font-size: var(--t-body-size);
    line-height: 1.6;
    color: var(--q-ink-muted);
}

/* --------------------------------------------------------------------------
   Step pills
   -------------------------------------------------------------------------- */

.tpl-quiz__steps[b-tvs0g5e3bt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.tpl-quiz__step[b-tvs0g5e3bt] {
    display: block;
}

.tpl-quiz__pill[b-tvs0g5e3bt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--q-line-strong);
    border-radius: var(--radius-full);
    background: var(--q-surface);
    color: var(--q-ink-faint);
    font-size: var(--t-label-size);
    font-weight: 600;
    /* Digits keep their column as the step advances, so the row does not shuffle. */
    font-variant-numeric: tabular-nums;
    transition: transform var(--motion-fast), border-color var(--motion-fast),
                background-color var(--motion-fast), color var(--motion-fast);
}

.tpl-quiz__pill[b-tvs0g5e3bt]  .icon {
    display: block;
}

/* Done: the number is replaced by a tick, so "already answered" survives greyscale, colour
   blindness and forced-colours mode — none of which a colour change survives. */
.tpl-quiz__step--done .tpl-quiz__pill[b-tvs0g5e3bt] {
    border-color: var(--q-ink);
    color: var(--q-ink);
}

/* Current: filled with ink, never with the author's accent. AccentColor can be any colour the
   author likes, and text sitting on top of it would be unreadable at some of them. The accent
   appears as the ring instead, where legibility does not depend on it. */
.tpl-quiz__step--current .tpl-quiz__pill[b-tvs0g5e3bt] {
    background: var(--q-ink);
    border-color: var(--q-ink);
    color: var(--q-ink-inverse);
    box-shadow: 0 0 0 2px var(--q-surface), 0 0 0 5px var(--q-accent);
    transform: scale(1.06);
}

/* Counter shown instead of pills past MaxPills steps. */
.tpl-quiz__counter[b-tvs0g5e3bt] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0 0 var(--space-6);
    font-variant-numeric: tabular-nums;
}

.tpl-quiz__counter-current[b-tvs0g5e3bt] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--q-ink);
}

.tpl-quiz__counter-total[b-tvs0g5e3bt] {
    font-size: var(--t-panel-title-size);
    font-weight: 600;
    color: var(--q-ink-faint);
}

/* --------------------------------------------------------------------------
   The question
   -------------------------------------------------------------------------- */

.tpl-quiz__question[b-tvs0g5e3bt] {
    margin: 0;
    font-size: var(--q-question-size);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--q-ink);
    /* Stops a two-line question breaking after one orphaned word, which undercuts the whole
       "the question is the hero" idea. */
    text-wrap: balance;
}

/* The one place the accent appears at size. It carries no information, so any colour is safe. */
.tpl-quiz__question[b-tvs0g5e3bt]::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--q-accent);
}

.tpl-quiz__support[b-tvs0g5e3bt] {
    margin: var(--space-4) 0 0;
    max-width: 60ch;
    font-size: var(--q-body-size);
    line-height: 1.55;
    color: var(--q-ink-muted);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

/* A stack, never the 12-column grid: this template shows one thing at a time, so a field's
   ColSpan is intentionally not honoured here. The inline grid-column PublicFormField emits is
   simply inert in a flex column. */
.tpl-quiz__fields[b-tvs0g5e3bt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.tpl-quiz__group[b-tvs0g5e3bt] {
    /* Fieldsets default to min-width: min-content, which stops long option text from wrapping. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tpl-quiz__group-label[b-tvs0g5e3bt] {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-3);
    font-size: var(--t-section-size);
    font-weight: 600;
    color: var(--q-ink);
}

.tpl-quiz__required[b-tvs0g5e3bt] {
    color: var(--q-danger-line);
}

.tpl-quiz__group-help[b-tvs0g5e3bt] {
    margin: 0 0 var(--space-3);
    font-size: var(--t-meta-size);
    line-height: var(--t-body-lh);
    color: var(--q-ink-muted);
}

.tpl-quiz__group-error[b-tvs0g5e3bt] {
    margin: var(--space-3) 0 0;
    font-size: var(--t-label-size);
    font-weight: 500;
    color: var(--q-danger);
}

/* Tint the whole option block rather than every row: a wall of red borders reads as "everything
   is wrong" when the real message is "you have not answered yet". */
.tpl-quiz__group--invalid .tpl-quiz__options[b-tvs0g5e3bt] {
    padding: var(--space-3);
    margin: calc(var(--space-3) * -1);
    border-radius: var(--radius-lg);
    background: var(--q-danger-bg);
}

/* --------------------------------------------------------------------------
   A / B / C / D options
   -------------------------------------------------------------------------- */

.tpl-quiz__options[b-tvs0g5e3bt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tpl-quiz__option[b-tvs0g5e3bt] {
    position: relative;
    display: block;
    cursor: pointer;
}

/* The real radio / checkbox. Hidden with opacity and a 1px box rather than display:none or
   visibility:hidden — both of those remove it from the tab order, and this page has no script
   to put the focus back. It stays in the form data set either way; that is the whole point. */
.tpl-quiz__control[b-tvs0g5e3bt] {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tpl-quiz__option-inner[b-tvs0g5e3bt] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* Well clear of the 44px tap-target floor, with room for a two-line option on a phone. */
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    background: var(--q-surface);
    border: 2px solid var(--q-line);
    border-radius: var(--radius-lg);
    transition: border-color var(--motion-fast), background-color var(--motion-fast),
                transform var(--motion-fast);
}

.tpl-quiz__letter[b-tvs0g5e3bt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--q-line);
    border-radius: var(--radius-md);
    background: var(--q-surface-sunken);
    color: var(--q-ink-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.tpl-quiz__option-text[b-tvs0g5e3bt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tpl-quiz__option-title[b-tvs0g5e3bt] {
    font-size: var(--q-body-size);
    font-weight: 600;
    line-height: 1.3;
    color: var(--q-ink);
}

.tpl-quiz__option-note[b-tvs0g5e3bt] {
    font-size: var(--t-meta-size);
    line-height: var(--t-body-lh);
    color: var(--q-ink-muted);
}

/* Always present, only faded: revealing it by opacity keeps the row from resizing the moment
   an answer is picked, which on a phone would shift everything below the thumb. */
.tpl-quiz__tick[b-tvs0g5e3bt] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--q-ink);
    opacity: 0;
    transition: opacity var(--motion-fast);
}

.tpl-quiz__tick[b-tvs0g5e3bt]  .icon {
    display: block;
}

@media (hover: hover) {
    .tpl-quiz__option:hover .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        border-color: var(--q-line-strong);
        background: var(--q-surface-sunken);
    }

    .tpl-quiz__option:hover .tpl-quiz__letter[b-tvs0g5e3bt] {
        border-color: var(--q-line-strong);
        color: var(--q-ink);
    }
}

.tpl-quiz__option:active .tpl-quiz__option-inner[b-tvs0g5e3bt] {
    transform: scale(.995);
}

/* Sibling combinator from the control, not :has() on the label. The checked and focus states of
   an invisible input are the only thing a keyboard user has to go on, so they must not depend on
   a selector some browser in the wild may not have. */
.tpl-quiz__control:checked ~ .tpl-quiz__option-inner[b-tvs0g5e3bt] {
    border-color: var(--q-accent);
    /* Plain fallback first for engines without color-mix; the mix keeps the tint light whatever
       the author's accent turns out to be, so the option text stays legible on top of it. */
    background: var(--q-surface-sunken);
    background: color-mix(in srgb, var(--q-accent) 8%, var(--q-surface));
}

.tpl-quiz__control:checked ~ .tpl-quiz__option-inner .tpl-quiz__letter[b-tvs0g5e3bt] {
    border-color: var(--q-ink);
    background: var(--q-ink);
    color: var(--q-ink-inverse);
}

.tpl-quiz__control:checked ~ .tpl-quiz__option-inner .tpl-quiz__tick[b-tvs0g5e3bt] {
    opacity: 1;
}

.tpl-quiz__control:focus-visible ~ .tpl-quiz__option-inner[b-tvs0g5e3bt] {
    border-color: var(--q-ink);
    outline: 3px solid var(--q-ink);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Host-supplied content: PublicFormField, the error summary, the buttons.
   `::deep` is the only way to reach markup another component rendered; each rule is anchored to
   a tpl-quiz container so it stops at the edge of this card.
   -------------------------------------------------------------------------- */

.tpl-quiz__fields[b-tvs0g5e3bt]  .field__label {
    font-size: var(--t-body-size);
    font-weight: 600;
    color: var(--q-ink);
}

/* Matched to the option rows: same 2px frame, same radius, same generous height, so a text
   question and a lettered question do not look like two different products. */
.tpl-quiz__fields[b-tvs0g5e3bt]  .input {
    height: 52px;
    padding: 0 var(--space-4);
    border-width: 2px;
    border-color: var(--q-line);
    border-radius: var(--radius-lg);
}

.tpl-quiz__fields[b-tvs0g5e3bt]  .input:focus-within {
    border-color: var(--q-ink);
    box-shadow: 0 0 0 3px var(--q-focus);
}

.tpl-quiz__fields[b-tvs0g5e3bt]  .input--invalid {
    border-color: var(--q-danger-line);
}

.tpl-quiz__fields[b-tvs0g5e3bt]  .input__control {
    font-size: var(--q-body-size);
}

.tpl-quiz__fields[b-tvs0g5e3bt]  .textarea {
    height: auto;
    padding: var(--space-3) var(--space-4);
}

.tpl-quiz__errors[b-tvs0g5e3bt] {
    margin-top: var(--space-6);
}

.tpl-quiz__nav[b-tvs0g5e3bt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--q-line);
}

/* Deliberately NOT recoloured to the accent. The primary button's label is --text-inverse; on a
   pale author accent it would vanish. Near-black is also the more confident answer here. */
.tpl-quiz__nav[b-tvs0g5e3bt]  .btn {
    height: auto;
    min-height: 52px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Wide cards — artwork beside the question

   Keyed to this card's own width rather than the viewport's. The same component renders inside the
   builder's preview pane, which is a narrow column on a wide screen; a viewport query would split
   the layout there and overflow it. Where container queries are unavailable the block is skipped
   whole and the artwork stays stacked under the question, which is the phone layout and is right
   on its own — nothing here is load-bearing for reading or answering the form.
   -------------------------------------------------------------------------- */

@container quiz (min-width: 880px) {
    /* The lane is reserved for the form, never decided per step. Pages carrying no image of their
       own fall back to the theme's hero; the ones left with neither show an empty lane rather than
       snapping the question and every option row to a new width as the visitor moves on. */
    .tpl-quiz--illustrated .tpl-quiz__body[b-tvs0g5e3bt] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 360px);
        grid-template-areas:
            "brand    brand"
            "intro    intro"
            "steps    steps"
            "question media"
            "support  media"
            "fields   media"
            "errors   media"
            "nav      nav";
        column-gap: var(--space-8);

        /* Re-keyed to the card. 7vw measures a viewport that says nothing about how wide the column
           beside the picture ended up, and at 44px in that column a question breaks every few
           words. */
        --q-question-size: clamp(26px, 4.4cqi, 40px);
    }

    .tpl-quiz--illustrated .tpl-quiz__brand[b-tvs0g5e3bt] { grid-area: brand; }
    .tpl-quiz--illustrated .tpl-quiz__intro[b-tvs0g5e3bt] { grid-area: intro; }
    .tpl-quiz--illustrated .tpl-quiz__steps[b-tvs0g5e3bt],
    .tpl-quiz--illustrated .tpl-quiz__counter[b-tvs0g5e3bt] { grid-area: steps; }
    .tpl-quiz--illustrated .tpl-quiz__question[b-tvs0g5e3bt] { grid-area: question; }
    .tpl-quiz--illustrated .tpl-quiz__support[b-tvs0g5e3bt] { grid-area: support; }
    .tpl-quiz--illustrated .tpl-quiz__fields[b-tvs0g5e3bt] { grid-area: fields; }
    .tpl-quiz--illustrated .tpl-quiz__errors[b-tvs0g5e3bt] { grid-area: errors; }
    .tpl-quiz--illustrated .tpl-quiz__nav[b-tvs0g5e3bt] { grid-area: nav; }

    .tpl-quiz--illustrated .tpl-quiz__figure[b-tvs0g5e3bt] {
        grid-area: media;
        /* Level with the top of the question, not stretched down the lane: a step with a dozen
           options would otherwise crop the picture to a sliver of itself. */
        align-self: start;
        margin-top: 0;
        max-width: none;
        /* Upright beside a column of text, where a letterbox reads as a stray banner. */
        aspect-ratio: 4 / 5;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .tpl-quiz__letter[b-tvs0g5e3bt] {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        gap: var(--space-3);
    }

    /* Full-width stacked buttons: a phone thumb wants a target it cannot miss, and the host's
       flexible spacer between Back and Next has nothing left to push apart once they stack. */
    .tpl-quiz__nav[b-tvs0g5e3bt]  .btn {
        flex: 1 1 100%;
    }

    .tpl-quiz__nav[b-tvs0g5e3bt]  .u-spacer {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tpl-quiz__pill[b-tvs0g5e3bt],
    .tpl-quiz__option-inner[b-tvs0g5e3bt],
    .tpl-quiz__tick[b-tvs0g5e3bt] {
        transition: none;
    }

    .tpl-quiz__step--current .tpl-quiz__pill[b-tvs0g5e3bt],
    .tpl-quiz__option:active .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        transform: none;
    }
}

/* Forced colours replaces our borders and tints with system colours, so the selected state would
   otherwise be conveyed by nothing at all. The tick is what carries it through. */
@media (forced-colors: active) {
    .tpl-quiz__control:checked ~ .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        border-color: Highlight;
    }

    .tpl-quiz__control:focus-visible ~ .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        outline-color: Highlight;
    }

    .tpl-quiz__step--current .tpl-quiz__pill[b-tvs0g5e3bt] {
        box-shadow: none;
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* ==========================================================================
   Reference shapes
   The blocks above give the template its behaviour and its accessible states; these give it the
   reference's silhouette — connected step pills, answers as a letter pill beside a text pill, and
   a dark lozenge for the button. Kept apart so the two concerns can be read separately: everything
   here is shape, and nothing here is the only thing carrying a state.
   ========================================================================== */

/* ---- Connected step pills ---- */

.tpl-quiz__steps[b-tvs0g5e3bt] { gap: 0; }

.tpl-quiz__step[b-tvs0g5e3bt] { display: flex; align-items: center; }

/* The rule between two pills. Decorative, and generated content, so it is never announced. */
.tpl-quiz__step + .tpl-quiz__step[b-tvs0g5e3bt]::before {
    content: "";
    width: 18px;
    height: 2px;
    margin: 0 var(--space-1);
    background: var(--q-line);
    flex: 0 0 auto;
}

.tpl-quiz__pill[b-tvs0g5e3bt] {
    min-width: 34px;
    height: 34px;
    background: transparent;
}

/* Filled with a mix pushed toward white rather than the raw accent, so the dark text on top stays
   legible whatever colour the author picked — the same reasoning as the answer pills below. */
.tpl-quiz__ask .tpl-quiz__step--current .tpl-quiz__pill[b-tvs0g5e3bt] {
    background: var(--q-pill-on);
    border-color: var(--q-pill-on);
    color: #1b2029;
    box-shadow: none;
    transform: none;
}

.tpl-quiz__ask .tpl-quiz__step--done .tpl-quiz__pill[b-tvs0g5e3bt] {
    border-color: var(--q-dark-line);
    color: var(--q-dark-ink-muted);
}

/* ---- The question ---- */

.tpl-quiz__question[b-tvs0g5e3bt] {
    font-size: clamp(30px, 4.6vw, 56px);
    line-height: 1.06;
}

/* The reference carries the question on type alone. The accent already owns the current step pill
   and every answer pill, and a third claim on it under the heading only crowds the pane. */
.tpl-quiz__question[b-tvs0g5e3bt]::after { display: none; }

/* ---- Answers as pill pairs ---- */

.tpl-quiz__options[b-tvs0g5e3bt] { gap: var(--space-3); }

/* The row frame moves off the label and onto the two pills inside it. */
.tpl-quiz__option-inner[b-tvs0g5e3bt] {
    gap: var(--space-3);
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.tpl-quiz__letter[b-tvs0g5e3bt],
.tpl-quiz__option-text[b-tvs0g5e3bt] {
    background: var(--q-pill);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    color: #1b2029;
    transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.tpl-quiz__letter[b-tvs0g5e3bt] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}

.tpl-quiz__option-text[b-tvs0g5e3bt] {
    flex: 1;
    min-height: 46px;
    padding: var(--space-2) var(--space-5);
    justify-content: center;
    align-items: flex-start;
    /* Centred like the reference, but only while the option is a single short line. A two-line
       option with a note under it reads as a paragraph, and centred paragraphs are hard work. */
    text-align: left;
}

.tpl-quiz__option-title[b-tvs0g5e3bt] { font-weight: 600; color: #1b2029; }

.tpl-quiz__option-note[b-tvs0g5e3bt] { color: #414b5a; }

@media (hover: hover) {
    .tpl-quiz__option:hover .tpl-quiz__option-inner[b-tvs0g5e3bt] {
        background: transparent;
        border-color: transparent;
    }

    .tpl-quiz__option:hover .tpl-quiz__letter[b-tvs0g5e3bt],
    .tpl-quiz__option:hover .tpl-quiz__option-text[b-tvs0g5e3bt] {
        border-color: var(--q-pill-on);
    }
}

/* Selected: both pills fill. The tick alongside is what survives greyscale and forced colours,
   so the fill is never the only signal. */
.tpl-quiz__control:checked ~ .tpl-quiz__option-inner[b-tvs0g5e3bt] {
    background: transparent;
    border-color: transparent;
}

.tpl-quiz__control:checked ~ .tpl-quiz__option-inner .tpl-quiz__letter[b-tvs0g5e3bt],
.tpl-quiz__control:checked ~ .tpl-quiz__option-inner .tpl-quiz__option-text[b-tvs0g5e3bt] {
    background: var(--q-pill-on);
    border-color: var(--q-pill-on);
}

.tpl-quiz__control:focus-visible ~ .tpl-quiz__option-inner .tpl-quiz__letter[b-tvs0g5e3bt],
.tpl-quiz__control:focus-visible ~ .tpl-quiz__option-inner .tpl-quiz__option-text[b-tvs0g5e3bt] {
    outline: 3px solid var(--q-focus);
    outline-offset: 2px;
}

.tpl-quiz__tick[b-tvs0g5e3bt] { color: #1b2029; }

/* ---- Button bar ---- */

.tpl-quiz__nav[b-tvs0g5e3bt] {
    position: relative;
    z-index: 2;
    background: var(--q-wash);
}

/* The fragment brings its own footer with the buttons and a spacer already inside it; only the
   frame is this template's business. Centred rather than pushed right, because the button sits
   under the seam between the two panes. */
.tpl-quiz__nav[b-tvs0g5e3bt]  .public-form__footer {
    justify-content: center;
    padding: var(--space-6);
    border-top: none;
}

.tpl-quiz__nav[b-tvs0g5e3bt]  .u-spacer { display: none; }

/* A dark lozenge on the pale ground, matching the reference's own button. */
.tpl-quiz__nav[b-tvs0g5e3bt]  .btn--primary {
    background: var(--q-dark);
    border-color: var(--q-dark);
    color: var(--q-dark-ink);
    border-radius: var(--radius-full);
    padding-inline: var(--space-6);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}

.tpl-quiz__nav[b-tvs0g5e3bt]  .btn--secondary {
    background: transparent;
    border-radius: var(--radius-full);
    padding-inline: var(--space-5);
}
/* /Components/Pages/PublicForm/Templates/QuoteTemplate.razor.rz.scp.css */
/* ==========================================================================
   "Quote request" template
   Reference: https://www.ansonika.com/quote/index_5.html

   Slim logo bar, a full-width illustration band on a warm tint, then two columns — a pitch on the
   left, the question on the right under a labelled progress bar. Answers are full-width numbered
   rows with the control on the trailing edge. A grey footer bar carries Forward on the right.

   Sans throughout, from the product's own stack. No webfont: a public form that fetches type from a
   third party hands that third party the IP address of every visitor sent the link.
   ========================================================================== */

.tpl-quote[b-dxog9d12pp] {
    /* Amber by default, which is the reference's own accent, overridden inline by the author's
       AccentColor. It tints the progress bar, the ticks and the counter — never the primary button,
       which stays the product's action colour exactly as the reference keeps its button blue. */
    --tpl-accent: #f0a92e;

    --tpl-paper: var(--bg-surface);
    --tpl-ink: var(--text-primary);
    --tpl-ink-soft: var(--text-secondary);
    --tpl-ink-faint: var(--text-tertiary);
    --tpl-rule: var(--border);
    /* The near-white ground the reference uses, NOT --bg-page. That token is the application's
       lavender-grey shell; behind a form whose accent is anything but blue it reads as a colour
       clash, and it left white answer rows sitting on a tinted field instead of a neutral one. */
    --tpl-field: var(--bg-subtle);

    /* The band and the page sit on a tint of the accent rather than a fixed cream, so an author who
       sets their own colour gets a band that belongs to it — and so the whole thing still works on
       a dark surface, which a hardcoded cream would not. */
    --tpl-wash: color-mix(in srgb, var(--tpl-accent) 12%, var(--tpl-paper));

    --tpl-measure: 44rem;
    --tpl-motion: var(--motion-fast);

    min-height: 100%;
    background: var(--tpl-field);
    color: var(--tpl-ink);
    font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   Logo bar
   -------------------------------------------------------------------------- */

.tpl-quote__bar[b-dxog9d12pp] {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--tpl-paper);
    border-bottom: 1px solid var(--tpl-rule);
}

.tpl-quote__mark[b-dxog9d12pp] {
    margin: 0;
    font-size: var(--t-section-size);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
}

.tpl-quote__mark--word[b-dxog9d12pp] { text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }

.tpl-quote__logo[b-dxog9d12pp] { display: block; max-height: 36px; width: auto; }

/* --------------------------------------------------------------------------
   Illustration band
   -------------------------------------------------------------------------- */

/* The tint stays on the container, not as a margin around the artwork: it is what a transparent
   illustration sits on, and what fills the gap while a slow image loads. */
.tpl-quote__hero[b-dxog9d12pp] { background: var(--tpl-wash); }

/* Full-bleed: the image spans the whole width and is cropped to a band, rather than being letterboxed
   inside a tinted frame. cover, so the band is always exactly the height below whatever the author
   uploads — a portrait photo and a wide illustration both produce the same banner instead of one of
   them setting its own height and shifting everything under it.

   The trade is that the edges of a tall image are cropped, which is what a banner means. Artwork
   with content near its edges wants the letterboxed treatment instead. */
.tpl-quote__hero-img[b-dxog9d12pp] {
    display: block;
    width: 100%;
    height: clamp(140px, 18vw, 235px);
    object-fit: cover;
    /* Bias the crop upward: when something has to go, the bottom of an illustration is more often
       empty ground than the top is. */
    object-position: center 40%;
}

/* --------------------------------------------------------------------------
   Two columns
   -------------------------------------------------------------------------- */

.tpl-quote__main[b-dxog9d12pp] {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Single column until there is room for both. Below this the pitch would squeeze the question into
   a strip, and the question is the reason the visitor is here. */
@media (min-width: 980px) {
    .tpl-quote--split .tpl-quote__main[b-dxog9d12pp] {
        display: grid;
        grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
        gap: var(--space-10);
        align-items: start;
    }
}

.tpl-quote__pitch[b-dxog9d12pp] { margin-bottom: var(--space-8); }

@media (min-width: 980px) {
    .tpl-quote__pitch[b-dxog9d12pp] {
        margin-bottom: 0;
        /* The rule between the columns belongs to the gap, so it does not move when the pitch is
           shorter than the question — which it usually is by the third step. */
        padding-right: var(--space-10);
        border-right: 1px solid var(--tpl-rule);
        margin-right: calc(var(--space-10) * -1);
    }
}

.tpl-quote__headline[b-dxog9d12pp] {
    margin: 0 0 var(--space-3);
    font-size: clamp(24px, 3.4vw, 31px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--tpl-ink);
}

.tpl-quote__intro[b-dxog9d12pp] {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tpl-ink-soft);
}

.tpl-quote__points[b-dxog9d12pp] {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tpl-quote__point[b-dxog9d12pp] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    font-size: var(--t-body-size);
    line-height: 1.55;
    color: var(--tpl-ink-soft);
}

.tpl-quote__tick[b-dxog9d12pp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--radius-full);
    border: 1px solid var(--tpl-accent);
    color: var(--tpl-accent);
}

/* --------------------------------------------------------------------------
   Question column
   -------------------------------------------------------------------------- */

/* Flat, on the page ground — NOT a card. The reference's answers are white rows floating on grey;
   putting them inside a white panel makes both disappear, which is exactly how this read before:
   a flat field of white with hairlines on it. The only division between the columns is the rule in
   the gap. */
.tpl-quote__step[b-dxog9d12pp] {
    min-width: 0;
    max-width: var(--tpl-measure);
    padding: 0;
}

@media (min-width: 980px) {
    .tpl-quote--split .tpl-quote__step[b-dxog9d12pp] { max-width: none; }
}

/* The rule under the bar is the reference's, and it earns its place: without it the progress
   indicator and the question run together as one block of small grey text. */
.tpl-quote__meter[b-dxog9d12pp] {
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--tpl-rule);
}

.tpl-quote__meter-label[b-dxog9d12pp] {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tpl-ink-faint);
}

.tpl-quote__rule[b-dxog9d12pp] {
    display: block;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    overflow: hidden;
}

.tpl-quote__rule-fill[b-dxog9d12pp] {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--tpl-accent);
    transition: width var(--motion-base);
}

.tpl-quote__counter[b-dxog9d12pp] {
    margin: 0 0 var(--space-2);
    font-size: var(--t-meta-size);
    color: var(--tpl-ink-faint);
}

.tpl-quote__counter-now[b-dxog9d12pp] { color: var(--tpl-ink-soft); font-weight: 600; }

.tpl-quote__step-title[b-dxog9d12pp] {
    margin: 0 0 var(--space-5);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--tpl-ink);
}

.tpl-quote__step-note[b-dxog9d12pp] {
    margin: calc(var(--space-5) * -1) 0 var(--space-5);
    font-size: var(--t-body-size);
    line-height: 1.6;
    color: var(--tpl-ink-soft);
}

.tpl-quote__grid[b-dxog9d12pp] { row-gap: var(--space-5); }

/* The step heading already asks the question on a one-question step, so the field's own label would
   print the same words again. Hidden, not removed: it is what names the control for a screen
   reader, and the heading above it is not attached to the input. */
.tpl-quote__grid--unlabelled[b-dxog9d12pp]  .field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tpl-quote__alert[b-dxog9d12pp] { margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   Answers — full-width numbered rows, control on the trailing edge
   ::deep because the controls come from PublicFormField; this template restyles them without
   owning them, which is what keeps one field renderer serving every template.
   -------------------------------------------------------------------------- */

.tpl-quote__grid[b-dxog9d12pp]  .choice-list {
    counter-reset: tpl-quote-option;
    gap: var(--space-3);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-list .checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--tpl-paper);
    border: 1px solid var(--tpl-rule);
    border-radius: var(--radius-md);
    color: var(--tpl-ink-soft);
    font-size: var(--t-body-size);
    cursor: pointer;
    transition: border-color var(--tpl-motion), background-color var(--tpl-motion);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-list .checkbox:hover {
    border-color: var(--tpl-accent);
    background: var(--tpl-wash);
}

/* Numbering is the reference's, and it is decorative: the option's text is the accessible name, and
   a counter generated in CSS is not announced. */
.tpl-quote__grid[b-dxog9d12pp]  .choice-list .checkbox::before {
    counter-increment: tpl-quote-option;
    content: counter(tpl-quote-option) ".";
    font-variant-numeric: tabular-nums;
    color: var(--tpl-ink-faint);
}

/* Source order is input then text; the reference puts the control last. */
.tpl-quote__grid[b-dxog9d12pp]  .choice-list .checkbox__box { order: 3; }
.tpl-quote__grid[b-dxog9d12pp]  .choice-list .checkbox > span { order: 2; }

/* CARD-MODE CHOICES ARE FLATTENED INTO THE SAME ROWS.
   Presentation (list vs cards) is an author's setting on the field, but how a choice LOOKS is the
   template's business — that is what attaching a template means. Left alone, a form built with card
   choices rendered as a two-up grid of tiles here, which is a different design from the reference
   sitting inside the same page. One shape, whichever way the field was configured. */
.tpl-quote__grid[b-dxog9d12pp]  .choice-cards {
    counter-reset: tpl-quote-card;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--tpl-paper);
    border: 1px solid var(--tpl-rule);
    border-radius: var(--radius-md);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card::before {
    counter-increment: tpl-quote-card;
    content: counter(tpl-quote-card) ".";
    grid-column: 1;
    grid-row: 1 / span 2;
    font-variant-numeric: tabular-nums;
    color: var(--tpl-ink-faint);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card__title { grid-column: 2; grid-row: 1; font-weight: 500; }
.tpl-quote__grid[b-dxog9d12pp]  .choice-card__description { grid-column: 2; grid-row: 2; }

/* The real input is off-screen for a card choice, so the reference's trailing radio is drawn.
   Decorative only — the control it stands for is what actually carries the state. */
.tpl-quote__grid[b-dxog9d12pp]  .choice-card::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card:hover:not(:disabled) {
    border-color: var(--tpl-accent);
    background: var(--tpl-wash);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card--selected,
.tpl-quote__grid[b-dxog9d12pp]  .choice-card:has(input:checked) {
    border-color: var(--tpl-accent);
    box-shadow: 0 0 0 1px var(--tpl-accent);
}

.tpl-quote__grid[b-dxog9d12pp]  .choice-card--selected::after {
    border-width: 5px;
    border-color: var(--tpl-accent);
}

.tpl-quote__grid[b-dxog9d12pp]  .input {
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Footer bar
   -------------------------------------------------------------------------- */

.tpl-quote__nav[b-dxog9d12pp] {
    background: var(--tpl-paper);
    border-top: 1px solid var(--tpl-rule);
}

/* The fragment brings its own .public-form__footer with the buttons and a spacer already inside it.
   Only the frame is this template's business — the buttons are submit controls driving the host's
   wizard state machine and are not ours to restructure. */
.tpl-quote__nav[b-dxog9d12pp]  .public-form__footer {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    border-top: none;
}
/* /Components/Pages/Roles.razor.rz.scp.css */
/* Roles screen — CSS isolation.
   Only what the shared sheets genuinely do not cover: the permission-matrix layout and the
   grant-proportion cell. Everything else reuses .checkbox__box, .field__helper, .card__title,
   .note-card and the u-* utilities. Tokens only — no literal colours (§2). */

/* --------------------------------------------------------------------------
   Grid cell — "42 of 92" plus a proportion bar
   -------------------------------------------------------------------------- */

.grant-cell[b-24ttmackk0] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.grant-cell__count[b-24ttmackk0] {
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    color: var(--text-primary);
    white-space: nowrap;
}

.grant-cell__meter[b-24ttmackk0] {
    display: block;
    width: 96px;
    max-width: 100%;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    overflow: hidden;
}

.grant-cell__fill[b-24ttmackk0] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--action-primary);
}

/* --------------------------------------------------------------------------
   Editor — running total
   Sticky: the panel holds ~22 feature groups, and the count is the only thing that tells an
   administrator how far a change has reached. It must not scroll away.
   -------------------------------------------------------------------------- */

.matrix-summary[b-24ttmackk0] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Editor — one feature group
   -------------------------------------------------------------------------- */

.matrix-feature[b-24ttmackk0] {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.matrix-feature__header[b-24ttmackk0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Two columns at 720px. One column per capability would make a nine-capability feature
   (tasks) unreadable; three would leave no room for the help text. */
.matrix-feature__caps[b-24ttmackk0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-3);
}

/* --------------------------------------------------------------------------
   Editor — one capability
   -------------------------------------------------------------------------- */

.matrix-cap[b-24ttmackk0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.matrix-cap__text[b-24ttmackk0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.matrix-cap__label[b-24ttmackk0] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    /* 16px line box so the first text line sits level with the 16px checkbox. */
    font-size: var(--t-body-size);
    line-height: 16px;
    color: var(--text-primary);
    cursor: pointer;
}

/* .field__helper is inline-flex globally; block lets long help text wrap in a narrow column. */
.matrix-cap__text .field__helper[b-24ttmackk0] {
    display: block;
    color: var(--text-secondary);
}

/* Derived-from-assignment: not a grant, and must never read as "switched off".
   Dashed border + inset fill + muted label separate it from a capability the administrator
   simply chose to leave unticked. */
.matrix-cap--derived[b-24ttmackk0] {
    background: var(--bg-inset);
    border-color: var(--border-strong);
    border-style: dashed;
}

.matrix-cap--derived .matrix-cap__label[b-24ttmackk0] {
    color: var(--text-tertiary);
    cursor: default;
}

.matrix-cap--derived .checkbox__box[b-24ttmackk0] {
    opacity: .45;
    cursor: not-allowed;
}

.matrix-cap--derived .field__helper[b-24ttmackk0] {
    color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   Responsive (§7.5) — the slide-over becomes a full-screen sheet under 768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .matrix-feature__caps[b-24ttmackk0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/StaffPermissions.razor.rz.scp.css */
/* Per-staff permission overrides.

   The matrix-* rules live in Roles.razor.css, which is SCOPED — Blazor CSS isolation means they
   apply only to that component, so this screen carries its own copy rather than inheriting
   anything. Sharing them would mean moving both into a global sheet. */

.matrix-summary[b-xzsunxlshp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.matrix-feature[b-xzsunxlshp] {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.matrix-feature__header[b-xzsunxlshp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Wider than the role editor's 260px: each row carries a three-button control as well as the
   label, so a narrower column wraps the buttons under the text and the grouping stops reading. */
.matrix-feature__caps[b-xzsunxlshp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-3);
}

.matrix-cap[b-xzsunxlshp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.matrix-cap__text[b-xzsunxlshp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.matrix-cap__label[b-xzsunxlshp] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--t-body-size);
    line-height: 16px;
    color: var(--text-primary);
}

/* .field__helper is inline-flex globally; block lets long help text wrap in a narrow column. */
.matrix-cap__text .field__helper[b-xzsunxlshp] {
    display: block;
    color: var(--text-secondary);
}

.segmented[b-xzsunxlshp] {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
}
/* /Components/Shared/Charts/BarChart.razor.rz.scp.css */
/* BarChart — CSS isolation. Tokens only; the chart palette is --chart-* (§2, §4.5). */

.chart[b-hxyu27g7sl] {
    margin: 0;
}

/* Responsive by construction: the viewBox owns the coordinate system, the container owns the
   width. No pixel width is ever set, so the same chart works in a 320px card and a 900px one. */
.chart__svg[b-hxyu27g7sl] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart__track[b-hxyu27g7sl] {
    fill: var(--chart-1-faint);
}

.chart__bar[b-hxyu27g7sl] {
    fill: var(--chart-1);
}

/* Text wears text tokens, never the series colour — --chart-1 is too light to read as type.
   ::deep because <SvgText> builds the element outside this component's markup, so it carries no
   isolation scope of its own (see SvgText.cs). */
.chart__svg[b-hxyu27g7sl]  .chart__value {
    fill: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
}

.chart__svg[b-hxyu27g7sl]  .chart__cat {
    fill: var(--text-secondary);
    font-size: 12px;
    text-anchor: middle;
}

.chart__axis[b-hxyu27g7sl] {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

/* The shared .empty-state pads for a full page; inside a chart card it only needs to fill the
   space the plot would have taken. */
.chart[b-hxyu27g7sl]  .empty-state {
    padding: var(--space-8) var(--space-4);
}
/* /Components/Shared/Charts/Donut.razor.rz.scp.css */
/* Donut — CSS isolation. Tokens only (§2, §4.5). */

.donut[b-aqffepofhv] {
    margin: 0;
}

.donut__svg[b-aqffepofhv] {
    display: block;
    width: 100%;
    height: auto;
}

/* Track and value are two steps of the same ramp, so the state reads across the whole ring
   rather than as two competing categories. */
.donut__track[b-aqffepofhv] {
    fill: none;
    stroke: var(--chart-1-faint);
    stroke-width: 12;
}

.donut__value[b-aqffepofhv] {
    fill: none;
    stroke: var(--chart-1);
    stroke-width: 12;
    stroke-linecap: round;
}

/* ::deep because <SvgText> builds the element outside this component's markup, so it carries no
   isolation scope of its own (see SvgText.cs). */
.donut__svg[b-aqffepofhv]  .donut__figure {
    fill: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    text-anchor: middle;
}

.donut__svg[b-aqffepofhv]  .donut__label {
    fill: var(--text-secondary);
    font-size: 11px;
    text-anchor: middle;
}
/* /Components/Shared/Charts/LineChart.razor.rz.scp.css */
/* LineChart — CSS isolation. Tokens only (§2, §4.5). */

.chart[b-nhv8t6hzy8] {
    margin: 0;
}

/* The tooltip is positioned against this box, so it must be the positioned ancestor. */
.chart__plot[b-nhv8t6hzy8] {
    position: relative;
}

.chart__svg[b-nhv8t6hzy8] {
    display: block;
    width: 100%;
    height: auto;
}

/* Highlight band — the faintest step of the series hue, so it reads as ground, not as data. */
.chart__band[b-nhv8t6hzy8] {
    fill: var(--chart-1-faint);
}

/* Gridlines are solid and hairline: a dashed grid competes with the dashed threshold, which is
   the one line in the chart that has to be read as "different in kind". */
.chart__grid[b-nhv8t6hzy8] {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

.chart__threshold[b-nhv8t6hzy8] {
    stroke: var(--chart-2);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linecap: round;
}

.chart__crosshair[b-nhv8t6hzy8] {
    stroke: var(--border-strong);
    stroke-width: 1;
}

.chart__line[b-nhv8t6hzy8] {
    fill: none;
    stroke: var(--chart-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* The surface-coloured ring keeps a dot legible where it sits on the line it belongs to. */
.chart__dot[b-nhv8t6hzy8] {
    fill: var(--chart-1);
    stroke: var(--bg-surface);
    stroke-width: 2;
}

.chart__dot--active[b-nhv8t6hzy8] {
    stroke-width: 3;
}

.chart__hit[b-nhv8t6hzy8] {
    fill: transparent;
}

/* ::deep because <SvgText> builds the element outside this component's markup, so it carries no
   isolation scope of its own (see SvgText.cs). */
.chart__svg[b-nhv8t6hzy8]  .chart__tick {
    fill: var(--text-tertiary);
    font-size: 11px;
    text-anchor: end;
}

.chart__svg[b-nhv8t6hzy8]  .chart__cat {
    fill: var(--text-secondary);
    font-size: 12px;
    text-anchor: middle;
}

/* --------------------------------------------------------------------------
   Tooltip — a small white card (§4.5), never the dark icon-hint tooltip
   -------------------------------------------------------------------------- */

.chart__tip[b-nhv8t6hzy8] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    /* Lifted clear of the point and inert, so it can never sit under the cursor and flicker. */
    transform: translate(-50%, calc(-100% - 12px));
    pointer-events: none;
}

.chart__tip-label[b-nhv8t6hzy8] {
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}

.chart__tip-value[b-nhv8t6hzy8] {
    font-size: var(--t-label-size);
    font-weight: 600;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.chart__legend[b-nhv8t6hzy8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0;
    padding: 0;
}

.chart__legend-item[b-nhv8t6hzy8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}

.chart__key[b-nhv8t6hzy8] {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 2px;
    border-radius: var(--radius-full);
}

.chart__key--line[b-nhv8t6hzy8] {
    background: var(--chart-1);
}

/* Mirrors the plotted dash pattern so the key is recognisable as the same line. */
.chart__key--dash[b-nhv8t6hzy8] {
    background: repeating-linear-gradient(
        to right,
        var(--chart-2) 0 5px,
        transparent 5px 9px);
}

.chart__key--band[b-nhv8t6hzy8] {
    height: 12px;
    background: var(--chart-1-faint);
    border-radius: var(--radius-sm);
}

.chart[b-nhv8t6hzy8]  .empty-state {
    padding: var(--space-8) var(--space-4);
}
/* /Components/Shared/Collaboration/AttachmentsPanel.razor.rz.scp.css */
/* Attachments panel — tokens only, no literal colours. */

.files-panel[b-ryx2ao7txv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.files-panel__actions[b-ryx2ao7txv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The <label> carries the button look; the real <input type=file> sits invisibly on top of it so
   it keeps its native keyboard behaviour and its accessible name. */
.files-panel__upload[b-ryx2ao7txv] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.files-panel__upload[b-ryx2ao7txv]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.files-panel__link-form[b-ryx2ao7txv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.files-panel__link-actions[b-ryx2ao7txv] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.files-panel__list[b-ryx2ao7txv] {
    display: flex;
    flex-direction: column;
}

.files-panel__item[b-ryx2ao7txv] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.files-panel__item:last-child[b-ryx2ao7txv] { border-bottom: 0; }

.files-panel__icon[b-ryx2ao7txv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-secondary);
}

.files-panel__detail[b-ryx2ao7txv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.files-panel__name-row[b-ryx2ao7txv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.files-panel__name[b-ryx2ao7txv] {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

a.files-panel__name[b-ryx2ao7txv] { color: var(--accent-link); }

.files-panel__meta[b-ryx2ao7txv] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.files-panel__row-actions[b-ryx2ao7txv] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
}

.files-panel__skeleton[b-ryx2ao7txv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.files-panel__skeleton .skeleton[b-ryx2ao7txv] { height: 56px; border-radius: var(--radius-md); }
/* /Components/Shared/Collaboration/NotesPanel.razor.rz.scp.css */
/* Notes panel — tokens only, no literal colours. */

.notes-panel[b-sv19yq59w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.notes-panel__compose[b-sv19yq59w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.notes-panel__compose-row[b-sv19yq59w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The picker is a full-width Field by default; a date needs far less than that, and the
   Add button belongs on the same line as the thing it commits. */
.notes-panel__date[b-sv19yq59w2] { width: 200px; }

.notes-panel__list[b-sv19yq59w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.notes-panel__item[b-sv19yq59w2] {
    display: flex;
    gap: var(--space-3);
}

.notes-panel__body[b-sv19yq59w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.notes-panel__head[b-sv19yq59w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
}

.notes-panel__author[b-sv19yq59w2] {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.notes-panel__contacted[b-sv19yq59w2] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.notes-panel__contacted-value[b-sv19yq59w2] { color: var(--text-primary); }

.notes-panel__skeleton[b-sv19yq59w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.notes-panel__skeleton .skeleton[b-sv19yq59w2] { height: 72px; border-radius: var(--radius-lg); }
/* /Components/Shared/Collaboration/RemindersPanel.razor.rz.scp.css */
/* Reminders on a record. Same rhythm as the notes and attachments panels beside it. */

.reminders[b-dn5u773tsv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.reminders__empty[b-dn5u773tsv] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--t-body-size);
}

.reminders__list[b-dn5u773tsv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.reminders__item[b-dn5u773tsv] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Kept visible once sent rather than removed: "did that reminder go out?" is a real question, and a
   record that quietly loses its history cannot answer it. Muted so the pending ones read first. */
.reminders__item--done[b-dn5u773tsv] { background: var(--bg-subtle); }
.reminders__item--done .reminders__text[b-dn5u773tsv] { color: var(--text-secondary); }

.reminders__when-icon[b-dn5u773tsv] {
    display: inline-flex;
    margin-top: 2px;
    color: var(--text-tertiary);
}

.reminders__item--done .reminders__when-icon[b-dn5u773tsv] { color: var(--tag-success-dot); }

.reminders__body[b-dn5u773tsv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reminders__text[b-dn5u773tsv] {
    font-size: var(--t-body-size);
    line-height: 1.4;
    color: var(--text-primary);
}

.reminders__meta[b-dn5u773tsv] {
    font-size: var(--t-meta-size);
    color: var(--text-tertiary);
}

.reminders__form[b-dn5u773tsv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.reminders__row[b-dn5u773tsv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* Below tablet the two controls stack — a datetime input and a select side by side at 320px leaves
   neither readable. */
@media (max-width: 767px) {
    .reminders__row[b-dn5u773tsv] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Collaboration/TagInput.razor.rz.scp.css */
/* Tag input — spec §4.1 "MultiSelect: wrapped removable tags inside the frame".
   Only tokens from tokens.css; no literal colours. */

.tag-input__anchor[b-cxmryfo808] {
    /* .dropdown is inline-flex and would shrink-wrap the field, so the popover anchor is
       declared here instead of reusing that class. */
    position: relative;
    display: block;
}

.tag-input[b-cxmryfo808] {
    /* The shared .input frame is a fixed-height single row; a chip row has to grow. */
    height: auto;
    min-height: var(--control-height);
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-1) var(--space-3);
    cursor: text;
}

.tag-input__field[b-cxmryfo808] {
    flex: 1 1 120px;
    min-width: 120px;
    height: 28px;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--t-body-size);
    color: var(--text-primary);
}

.tag-input__field[b-cxmryfo808]::placeholder { color: var(--text-tertiary); }

.tag-input__chip-text[b-cxmryfo808] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-input__remove[b-cxmryfo808] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: calc(var(--space-1) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    /* Chips are dense; the × stays quiet until the chip is pointed at. */
    opacity: .6;
    cursor: pointer;
    transition: opacity var(--motion-fast), background-color var(--motion-fast);
}

.tag-input__remove:hover[b-cxmryfo808],
.tag-input__remove:focus-visible[b-cxmryfo808] {
    opacity: 1;
    background: var(--bg-surface);
}

.tag-input__menu[b-cxmryfo808] {
    /* .dropdown__menu positions against .dropdown; this anchor is a plain block. */
    top: calc(100% + var(--space-1));
}
/* /Components/Shared/CustomFields/CustomFieldMultiSelect.razor.rz.scp.css */
/* Custom field multi-select — CSS isolation.
   The shared .input frame is fixed-height and single-line; a tag list is neither, so these rules
   relax exactly those two properties and nothing else. Tokens only — no literal colours (§2). */

.input.cf-ms__frame[b-5sysbtd0kf] {
    height: auto;
    min-height: var(--control-height);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

/* Overrides .input--trigger .input__value, which is deliberately nowrap for single-value selects. */
.cf-ms__frame .cf-ms__values[b-5sysbtd0kf] {
    flex-wrap: wrap;
    gap: var(--space-1);
    overflow: visible;
    white-space: normal;
    padding: var(--space-1) 0;
}

.cf-ms__tag[b-5sysbtd0kf] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.cf-ms__remove[b-5sysbtd0kf] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: .6;
    transition: opacity var(--motion-fast);
}

.cf-ms__remove:hover[b-5sysbtd0kf] {
    opacity: 1;
}

.dropdown__item.cf-ms__option[b-5sysbtd0kf] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Reserved whether or not the tick is showing, so the labels do not shift as options are toggled. */
.cf-ms__check[b-5sysbtd0kf] {
    display: inline-flex;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
}
/* /Components/Shared/CustomFields/CustomFieldRenderer.razor.rz.scp.css */
/* Custom field renderer — CSS isolation.
   Only the two arrangements the shared sheets have no component for: the date+time pair and the
   read-only link. Tokens only — no literal colours (§2). */

/* --------------------------------------------------------------------------
   date_picker_time — one field, two controls
   -------------------------------------------------------------------------- */

.cf-datetime[b-8e3166nzye] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* ::deep — the element belongs to DatePicker's markup, not this component's. */
.cf-datetime[b-8e3166nzye]  .datepicker {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-datetime__time[b-8e3166nzye] {
    /* Wide enough for "12:00 AM" plus the browser's own clock affix, which Chrome and Firefox
       size differently; a percentage width clips one of them. */
    flex: 0 0 132px;
}

/* --------------------------------------------------------------------------
   Read-only link / hyperlink
   -------------------------------------------------------------------------- */

.cf-link[b-8e3166nzye] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-body-size);
    line-height: var(--control-height);
}

/* --------------------------------------------------------------------------
   Checkbox — the label sits beside the box, so the row replaces <Field>'s stack
   -------------------------------------------------------------------------- */

.cf-check[b-8e3166nzye] {
    /* Aligns the box with the controls beside it, which start below their own labels. */
    padding-top: var(--space-6);
}
/* /Components/Shared/CustomFields/CustomFieldsPanel.razor.rz.scp.css */
/* Custom fields panel — CSS isolation.
   Layout only. Every control inside comes from the shared primitives, so nothing here restyles a
   control; this file exists because the 12-column form grid the legacy `bs_column` needs has no
   equivalent in the shared sheets. Tokens only — no literal colours (§2). */

.cf-panel[b-m51hdxmvg7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cf-panel__title[b-m51hdxmvg7] {
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    line-height: var(--t-section-lh);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Twelve columns, mapping one-for-one onto the legacy bs_column values
   -------------------------------------------------------------------------- */

.cf-grid[b-m51hdxmvg7] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    align-items: start;
}

.cf-grid__item[b-m51hdxmvg7] {
    min-width: 0;
}

/* Width is set through grid-column-END, never the grid-column shorthand: the shorthand also writes
   the start line, which would then fight the block modifier below and silently drop the span. */
.cf-col--1[b-m51hdxmvg7]  { grid-column-end: span 1; }
.cf-col--2[b-m51hdxmvg7]  { grid-column-end: span 2; }
.cf-col--3[b-m51hdxmvg7]  { grid-column-end: span 3; }
.cf-col--4[b-m51hdxmvg7]  { grid-column-end: span 4; }
.cf-col--5[b-m51hdxmvg7]  { grid-column-end: span 5; }
.cf-col--6[b-m51hdxmvg7]  { grid-column-end: span 6; }
.cf-col--7[b-m51hdxmvg7]  { grid-column-end: span 7; }
.cf-col--8[b-m51hdxmvg7]  { grid-column-end: span 8; }
.cf-col--9[b-m51hdxmvg7]  { grid-column-end: span 9; }
.cf-col--10[b-m51hdxmvg7] { grid-column-end: span 10; }
.cf-col--11[b-m51hdxmvg7] { grid-column-end: span 11; }
.cf-col--12[b-m51hdxmvg7] { grid-column-end: span 12; }

/* display_inline = 0: start a new row, but keep the configured width. */
.cf-grid__item--block[b-m51hdxmvg7] {
    grid-column-start: 1;
}

.cf-skeleton[b-m51hdxmvg7] {
    height: var(--control-height);
    border-radius: var(--radius-md);
}

/* A twelfth of a slide-over is four pixels wide. Below the breakpoint every field takes the full
   row — the spans must be reset explicitly, or a span of 6 in a one-column grid would generate
   five implicit columns and push the form off-screen.
   Last in the file on purpose: these rules tie on specificity with the .cf-col--* set above. */
@media (max-width: 720px) {
    .cf-grid[b-m51hdxmvg7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cf-grid__item[b-m51hdxmvg7] {
        grid-column-start: auto;
        grid-column-end: span 1;
    }
}
/* /Components/Shared/Kanban/KanbanBoard.razor.rz.scp.css */
/* Reusable Kanban board — chrome only.
   Card interiors are rendered by the host, so they carry the host's scope and are styled in the
   host's own isolated sheet. Everything here is tokens; --kanban-accent is set per column from
   whatever colour the host supplies (see KanbanColor.SafeColor). */

.kanban[b-vxtoarv5c9] {
    --kanban-accent: var(--border-strong);
    --kanban-column-width: 300px;

    /* Leaves room for the shell chrome above. Exposed as a custom property so a host that puts the
       board somewhere taller or shorter can retune it without forking this sheet. */
    --kanban-column-max-height: calc(100vh - 260px);

    display: flex;
    align-items: flex-start;
    gap: var(--space-4);

    /* The board scrolls sideways rather than squeezing columns, because a pipeline with nine
       stages is normal and a 90px column shows nothing useful. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4) 0 var(--space-6);
    scroll-snap-type: x proximity;
}

.kanban__column[b-vxtoarv5c9] {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--kanban-column-width);
    max-height: var(--kanban-column-max-height);

    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
    transition: border-color var(--motion-fast), background var(--motion-fast);
}

.kanban__column.is-drop-target[b-vxtoarv5c9] {
    border-color: var(--border-strong);
    background: var(--bg-muted);
}

.kanban__head[b-vxtoarv5c9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);

    /* The stage colour reads as a rule under the header rather than as a filled bar: a saturated
       block behind text has no contrast guarantee once an administrator picks the colour. */
    box-shadow: inset 0 3px 0 0 var(--kanban-accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kanban__head-title[b-vxtoarv5c9] {
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    line-height: var(--t-section-lh);
    color: var(--text-primary);
}

.kanban__head-count[b-vxtoarv5c9] {
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
}

.kanban__cards[b-vxtoarv5c9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    overflow-y: auto;

    /* Keeps an empty column a valid drop target — a zero-height list cannot receive a drop. */
    min-height: 96px;
}

.kanban__foot[b-vxtoarv5c9] {
    padding: 0 var(--space-3) var(--space-3);
}

.kanban__card[b-vxtoarv5c9] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);

    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--kanban-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow var(--motion-fast), opacity var(--motion-fast);
}

.kanban__card:hover[b-vxtoarv5c9] {
    box-shadow: var(--shadow-md);
}

/* Cards are focusable so the board works from the keyboard; the ring has to be visible. */
.kanban__card:focus-visible[b-vxtoarv5c9] {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}

.kanban__card.is-dragging[b-vxtoarv5c9] {
    opacity: .45;
    cursor: grabbing;
}

/* Where the card would land. Drawn as an inset line rather than a moved placeholder so the
   surrounding cards do not jump while the pointer is still moving. */
.kanban__card.is-insert-before[b-vxtoarv5c9]::before {
    content: "";
    position: absolute;
    inset: -6px 0 auto 0;
    height: 2px;
    background: var(--action-primary);
    border-radius: var(--radius-full);
}

.kanban__card-body[b-vxtoarv5c9] {
    flex: 1;
    min-width: 0;
    padding: var(--space-3);
}

.kanban__card-menu[b-vxtoarv5c9] {
    padding: var(--space-2) var(--space-2) 0 0;
    flex-shrink: 0;
}

.kanban__menu-label[b-vxtoarv5c9] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--t-meta-size);
    font-weight: var(--t-label-weight);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kanban__empty[b-vxtoarv5c9] {
    margin: 0;
    padding: var(--space-4) var(--space-2);
    text-align: center;
    font-size: var(--t-meta-size);
    color: var(--text-tertiary);
}
/* /Components/Shared/Notifications/AnnouncementBanner.razor.rz.scp.css */
/* Announcement banner. Spec: docs/features/46-newsfeed-announcements.md §2.

   Sits on .callout, which is already a flex row with an icon slot — these rules only add the stack
   inside it and give consecutive banners room. */

.announcement-banner + .announcement-banner[b-dgp4ikp5ey] {
    margin-top: var(--space-2);
}

.announcement-banner__content[b-dgp4ikp5ey] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.announcement-banner__title[b-dgp4ikp5ey] {
    font-weight: 600;
    margin: 0;
}

/* The one authored-HTML surface in this feature. Long words and pasted URLs must not push the
   banner wider than the page. */
.announcement-banner__message[b-dgp4ikp5ey] {
    overflow-wrap: anywhere;
}

/* ::deep is required here and nowhere else in this file.

   THE RULE IS AUTHORSHIP, NOT TREE POSITION. A scoped rule reaches markup authored in its own
   .razor file wherever that markup is rendered — including content this component passes INTO a
   child. It does not reach markup authored anywhere else.

   Scoped CSS stamps the scope attribute onto the last compound selector, so
   ".announcement-banner__message :last-child" compiles to ":last-child[b-xxxxx]" — and the <p>/<ul>
   it targets come from a MarkupString rendered at runtime, which carries no scope attribute at all.
   Such a rule compiles, appears in the bundle, greps as defined, and can never match. ::deep moves
   the attribute onto the ancestor, which this file did author.

   So: ::deep for a MarkupString, or for a child component's OWN template. NOT for content passed
   into a child — that is still this file's markup and keeps this file's scope.
   NewsfeedPostCard.razor.css depends on exactly that, and adding ::deep there would break it by
   also matching whatever a future child renders inside. AuthPanel.razor.css:160 documents the same
   boundary from the other side: content a page hands to AuthPanel is foreign to AuthPanel's
   stylesheet and native to the page's. The same element can need ::deep from one file and not
   another. */
.announcement-banner__message[b-dgp4ikp5ey]  *:last-child {
    margin-bottom: 0;
}
/* /Components/Shared/Notifications/NotificationBell.razor.rz.scp.css */
/* The header bell and its inbox. */

.notif__trigger[b-rq0d8dzdpc] { position: relative; }

/* Sits on the bell's upper-right. Absolute so the badge cannot change the button's size — a header
   whose icons shift sideways when a notification arrives is worse than no badge. */
.notif__count[b-rq0d8dzdpc] {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    /* Danger, not the accent: this is the one badge in the shell that is asking for attention, and
       it has to win against whatever the accent is doing elsewhere on the page. */
    background: var(--tag-danger-dot);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.notif__head[b-rq0d8dzdpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.notif__title[b-rq0d8dzdpc] {
    font-size: var(--t-label-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}

.notif__mark[b-rq0d8dzdpc] {
    padding: 0;
    border: none;
    background: none;
    color: var(--action-primary);
    font-size: var(--t-meta-size);
    cursor: pointer;
}

.notif__mark:hover[b-rq0d8dzdpc] { text-decoration: underline; }

.notif__empty[b-rq0d8dzdpc] {
    margin: 0;
    padding: var(--space-5) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--t-meta-size);
    text-align: center;
}

.notif__list[b-rq0d8dzdpc] {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Capped so a busy inbox cannot grow a menu taller than the viewport, which would put its last
       rows somewhere no scroll can reach. */
    max-height: 380px;
    overflow-y: auto;
}

.notif__item[b-rq0d8dzdpc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.notif__item:hover[b-rq0d8dzdpc] { background: var(--bg-subtle); }

.notif__item--unread[b-rq0d8dzdpc] { background: var(--bg-subtle); }

/* Reserved on every row, filled only when unread — so a row does not change width as it is read,
   which would make the whole list twitch on click. */
.notif__dot[b-rq0d8dzdpc] {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--radius-full);
    background: transparent;
}

.notif__item--unread .notif__dot[b-rq0d8dzdpc] { background: var(--action-primary); }

.notif__body[b-rq0d8dzdpc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif__text[b-rq0d8dzdpc] {
    font-size: var(--t-body-size);
    line-height: 1.4;
    color: var(--text-primary);
}

.notif__item--unread .notif__text[b-rq0d8dzdpc] { font-weight: var(--t-body-medium-weight); }

.notif__when[b-rq0d8dzdpc] {
    font-size: var(--t-meta-size);
    color: var(--text-tertiary);
}
/* /Components/Shared/Overlays/DatePicker.razor.rz.scp.css */
/* Scoped only. The shared .dropdown__menu is tuned for text menus — 8px radius, shadow-md
   and a 320px scroll cap. Spec §4.1/§4.4 asks for a popover here (12px radius, shadow-lg)
   and the six-week grid is a fixed ~300px block that must never grow its own scrollbar.
   Overriding from this side keeps overlays.css and Dropdown.razor untouched. */

.datepicker[b-fe8cx99hgt]  .dropdown,
.datepicker[b-fe8cx99hgt]  .dropdown > div:first-child {
    display: block;
}

.datepicker[b-fe8cx99hgt]  .dropdown__menu {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: none;
    overflow: visible;
}

/* .input is authored for a <div>; as a <button> it needs the block sizing and the
   left alignment back. */
.datepicker__trigger[b-fe8cx99hgt] {
    width: 100%;
    text-align: left;
    color: inherit;
}

.datepicker__trigger:disabled[b-fe8cx99hgt] {
    cursor: not-allowed;
}
/* /Components/Shared/Patterns/AuthPanel.razor.rz.scp.css */
/* ==========================================================================
   AuthPanel — screen archetype E (split auth card).
   Spec: docs/features/62-ui-ux-design-system.md §5.E, tokens §2.
   Mobile-first: single column by default, split at >=900px.
   Elements rendered by child components (Button, Icon, Avatar, TextField)
   do not carry this component's scope, so they are reached with ::deep.
   ========================================================================== */

.auth-card[b-xpkxzhe7za] {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 1120px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-shell);
    overflow: hidden;
}

/* --------------------------------------------------------------- form half */

.auth-form[b-xpkxzhe7za] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
    padding: var(--space-6);
    background: var(--bg-surface);
}

.auth-form__top[b-xpkxzhe7za] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.auth-wordmark[b-xpkxzhe7za] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-panel-title-size);
    font-weight: var(--t-panel-title-weight);
    line-height: var(--t-panel-title-lh);
    color: var(--text-primary);
    text-decoration: none;
}
.auth-wordmark:hover[b-xpkxzhe7za] { color: var(--text-primary); text-decoration: none; }

.auth-wordmark__mark[b-xpkxzhe7za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--action-primary);
    color: var(--text-inverse);
    font-size: var(--t-label-size);
    font-weight: 600;
    line-height: 1;
}

.auth-alt[b-xpkxzhe7za] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
}

.auth-alt__link[b-xpkxzhe7za] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    font-size: var(--t-meta-size);
    font-weight: var(--t-label-weight);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.auth-alt__link:hover[b-xpkxzhe7za] {
    background: var(--bg-subtle);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

.auth-form__body[b-xpkxzhe7za] {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
    width: 100%;
    max-width: 384px;
    margin: 0 auto;
    padding: var(--space-4) 0;
}

.auth-form__intro[b-xpkxzhe7za] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
}

.auth-form__title[b-xpkxzhe7za] {
    font-size: var(--t-record-title-size);
    font-weight: var(--t-record-title-weight);
    line-height: var(--t-record-title-lh);
    color: var(--text-primary);
}

.auth-form__subtitle[b-xpkxzhe7za] {
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    color: var(--text-secondary);
}

/* Three equal-width outlined social buttons */
.auth-social[b-xpkxzhe7za] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.auth-social[b-xpkxzhe7za]  .auth-social__btn {
    padding: 0;
    color: var(--text-primary);
}

.auth-social__glyph[b-xpkxzhe7za] { display: block; }

.auth-divider[b-xpkxzhe7za] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--t-meta-size);
    font-weight: var(--t-label-weight);
    letter-spacing: .04em;
    color: var(--text-tertiary);
}
.auth-divider[b-xpkxzhe7za]::before,
.auth-divider[b-xpkxzhe7za]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---- Form content supplied by the page -----------------------------------
   The page's markup carries the page's scope, not ours, hence ::deep. */

.auth-form__content[b-xpkxzhe7za]  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-form__content[b-xpkxzhe7za]  .auth-submit {
    margin-top: var(--space-1);
}

.auth-form__content[b-xpkxzhe7za]  .auth-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
}

/* ---- Footer ---- */

.auth-form__footer[b-xpkxzhe7za] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
}

.auth-lang[b-xpkxzhe7za] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
}

.auth-lang__globe[b-xpkxzhe7za] { flex-shrink: 0; }

.auth-lang__select[b-xpkxzhe7za] {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-1) 0 var(--space-1) var(--space-1);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
    cursor: pointer;
}
.auth-lang__select:hover[b-xpkxzhe7za] { color: var(--text-primary); }

/* -------------------------------------------------------------- brand half */

.auth-brand[b-xpkxzhe7za] {
    position: relative;
    display: none;              /* mobile-first: hidden until the split kicks in */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-8);
    background: var(--bg-inset);
    overflow: hidden;
    text-align: center;
}

.auth-brand__rings[b-xpkxzhe7za] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: auto;
    transform: translate(-50%, -50%);
    color: var(--border-strong);
    stroke-width: 1;
    opacity: .55;
    pointer-events: none;
}

.auth-brand__inner[b-xpkxzhe7za] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 380px;
    margin: 0;
}

.auth-brand__inner[b-xpkxzhe7za]  .avatar {
    box-shadow: 0 0 0 4px var(--bg-surface), var(--shadow-sm);
}

.auth-quote[b-xpkxzhe7za] {
    margin: 0;
    font-size: var(--t-record-title-size);
    font-weight: var(--t-body-medium-weight);
    line-height: var(--t-record-title-lh);
    color: var(--text-primary);
    text-wrap: balance;
}

.auth-attrib[b-xpkxzhe7za] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.auth-attrib__name[b-xpkxzhe7za] {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    line-height: var(--t-body-lh);
    color: var(--text-primary);
}
.auth-attrib__role[b-xpkxzhe7za] {
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
}

.auth-dots[b-xpkxzhe7za] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.auth-dots span[b-xpkxzhe7za] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    transition: width var(--motion-base), background-color var(--motion-base);
}
.auth-dots span.is-active[b-xpkxzhe7za] {
    width: 20px;
    background: var(--action-primary);
}

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 900px) {
    .auth-card[b-xpkxzhe7za] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 660px;
    }

    .auth-form[b-xpkxzhe7za] { padding: var(--space-8); }

    .auth-brand[b-xpkxzhe7za] {
        display: flex;
        border-left: 1px solid var(--border);
    }
}
/* /Components/Shared/Patterns/RecordDetailShell.razor.rz.scp.css */
/* Archetype C layout (doc 62 §5.C): fixed identity column, tabbed workspace.
   Only the two-column frame and the tab strip live here — every surface inside is a shared
   class from components.css, so a record screen cannot drift from the rest of the app. */

.record-detail[b-ybop32824d] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.record-detail__banner[b-ybop32824d] {
    padding: var(--space-4) var(--space-6) 0;
    flex-shrink: 0;
}

/* Empty when the host's fragment renders nothing; the padding would otherwise leave a gap that
   looks like a missing element. */
.record-detail__banner:empty[b-ybop32824d] {
    display: none;
}

.record-detail__body[b-ybop32824d] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* The two columns scroll independently: the identity column is reference material the user
   keeps looking back at while working down a long activity timeline. */
.record-detail__aside[b-ybop32824d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 340px;
    flex-shrink: 0;
    padding: var(--space-6);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.record-detail__identity[b-ybop32824d] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.record-detail__title[b-ybop32824d] {
    font-size: var(--t-record-title-size);
    font-weight: var(--t-record-title-weight);
    line-height: var(--t-record-title-lh);
}

.record-detail__subtitle[b-ybop32824d] {
    font-size: var(--t-body-size);
    color: var(--text-secondary);
}

/* Six actions do not fit 340px on one line at every zoom level; wrapping beats a clipped row. */
.record-detail__action-row[b-ybop32824d] {
    flex-wrap: wrap;
}

.record-detail__sections[b-ybop32824d] {
    display: flex;
    flex-direction: column;
}

/* ::deep — the collapsible blocks are the host's markup. The last one's rule would otherwise
   draw a line across the bottom of the column with nothing under it. */
.record-detail__sections[b-ybop32824d]  .section:last-child {
    border-bottom: none;
}

/* ---- Workspace ---------------------------------------------------------- */

.record-detail__main[b-ybop32824d] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.record-detail__tabs[b-ybop32824d] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

/* Matches .view-tabs__tab: a record's tabs and a list's saved views are the same affordance,
   and reading as two different controls would be the bug. */
.record-detail__tab[b-ybop32824d] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--t-body-size);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-fast), border-color var(--motion-fast);
}

.record-detail__tab:hover[b-ybop32824d] { color: var(--text-primary); }

.record-detail__tab--active[b-ybop32824d] {
    color: var(--text-primary);
    font-weight: var(--t-body-medium-weight);
    border-bottom-color: var(--action-primary);
}

.record-detail__badge[b-ybop32824d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.record-detail__tab--active .record-detail__badge[b-ybop32824d] {
    color: var(--text-primary);
}

.record-detail__panel[b-ybop32824d] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-6);
}

/* The panel is focusable so keyboard users land in the content after the tab strip; the outline
   on a scroll container is noise, and :focus-visible still shows it for keyboard entry. */
.record-detail__panel:focus[b-ybop32824d] { outline: none; }

/* ---- Responsive (§7.5) --------------------------------------------------- */

@media (max-width: 1023px) {
    .record-detail__body[b-ybop32824d] {
        flex-direction: column;
        overflow-y: auto;
    }

    .record-detail__aside[b-ybop32824d] {
        width: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .record-detail__panel[b-ybop32824d] { overflow-y: visible; }
}
/* /Components/Shared/Primitives/TimelineItem.razor.rz.scp.css */
/* Tone tints for the 28px timeline bullet (§4.3 "circular coloured icon").
   components.css ships only the neutral base and that sheet is shared, so the
   variants live here — scoped rules outrank the base by one attribute selector,
   which is why no !important is needed. Colours come from the tag token pairs
   so a rebrand still only touches tokens.css (§7.1). */

.timeline__icon--info[b-jwd9j2nk8y] {
    background: var(--tag-info-bg);
    color: var(--tag-info-fg);
}

.timeline__icon--success[b-jwd9j2nk8y] {
    background: var(--tag-success-bg);
    color: var(--tag-success-fg);
}

.timeline__icon--warning[b-jwd9j2nk8y] {
    background: var(--tag-warning-bg);
    color: var(--tag-warning-fg);
}

.timeline__icon--danger[b-jwd9j2nk8y] {
    background: var(--tag-danger-bg);
    color: var(--tag-danger-fg);
}

.timeline__icon--rose[b-jwd9j2nk8y] {
    background: var(--tag-rose-bg);
    color: var(--tag-rose-fg);
}

/* AI-generated entries only (§2.2). */
.timeline__icon--violet[b-jwd9j2nk8y] {
    background: var(--tag-violet-bg);
    color: var(--tag-violet-fg);
}