/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell chrome. Tokens only — no raw colour or spacing (ADR-0006). */

/*
  `flex-wrap: wrap` is the whole responsive story of the shell, and its absence was the defect: this
  was a no-wrap `space-between` row holding a brand, a theme toggle, up to eight navigation links, a
  notification bell, a name and a sign-out button. At 375px they did not wrap — they squashed, and the
  links at the end were pushed out of the viewport. UI-003 has been P0 throughout (roadmap row 28).
*/
.rl-shell__header[b-tihoq7xtkh] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--layout-gutter);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-raised);
}

.rl-shell__brand[b-tihoq7xtkh] {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.rl-shell__actions[b-tihoq7xtkh] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* A flex row of its own inside the actions row, rather than `display: contents`, so the landmark is a
   real box in both the layout and the accessibility tree. Both rows wrap, so nine links reflow onto as
   many lines as a phone needs. */
.rl-shell__nav[b-tihoq7xtkh] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.rl-shell__user[b-tihoq7xtkh],
.rl-shell__settings[b-tihoq7xtkh] {
  color: var(--ink);
  font-weight: 600;
}

/* The 60rem here was the last raw layout value in the shell; it is --layout-measure now, so the scale
   has one home. */
.rl-shell__main[b-tihoq7xtkh] {
  max-width: var(--layout-measure);
  margin: 0 auto;
  padding: var(--space-6) var(--layout-gutter);
}

/*
  --bp-lg (64rem). This query lives here rather than in app.css's breakpoint block, and that is not a
  style choice: `.rl-shell__main` is a scoped class, so CSS isolation rewrites it to
  `.rl-shell__main[b-xxxxxxxxxx]` and app.css's unscoped `.rl-shell__main` loses on specificity *and*
  on order. The rule was written there first and did nothing whatever — the design-system row shipping
  half its own scale inert, found by its spec audit.
*/
@media (min-width: 64rem) {
  .rl-shell__main[b-tihoq7xtkh] {
    padding-inline: var(--space-6);
  }
}

/* The skip link's target. `tabindex="-1"` is what lets it receive focus at all — without it the link
   moves the scroll position and leaves focus at the top of the shell, which is the bug that makes most
   skip links useless (SC 2.4.1). It must never draw a ring of its own: the reader asked to be *here*,
   not to be told about a region. */
.rl-shell__main:focus[b-tihoq7xtkh] {
  outline: none;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yocgg8fxct],
.components-reconnect-repeated-attempt-visible[b-yocgg8fxct],
.components-reconnect-failed-visible[b-yocgg8fxct],
.components-pause-visible[b-yocgg8fxct],
.components-resume-failed-visible[b-yocgg8fxct],
.components-rejoining-animation[b-yocgg8fxct] {
    display: none;
}

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


#components-reconnect-modal[b-yocgg8fxct] {
    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-yocgg8fxct 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-yocgg8fxct {
    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;
    }
}
/* /Features/Chat/Agent/ChatConsole.razor.rz.scp.css */
/* WF-005's console.

   **Responsive with no media query**, which is the point: UI-003 makes mobile a P0 and names chat, and
   tech-debt #22 records that this product has no breakpoints and that introducing them is roadmap row
   28's design-system pass. `auto-fit` with a `minmax` floor collapses to one column when two would not
   fit and spreads to two when they would -- so the requirement is met without pre-empting the decision
   about where this product's breakpoints go. */

/* `min(320px, 100%)`: a minmax minimum is a floor, so a bare 320px track kept this grid 320px wide on
   a 320px viewport and pushed the page 16px past it once the shell's gutter was added. Caught by
   roadmap row 28's reflow assertion, which measures at SC 1.4.10's own threshold. */
.rl-chat[b-doqtgodv1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-4);
    align-items: start;
}

.rl-chat__queue[b-doqtgodv1u],
.rl-chat__pane[b-doqtgodv1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

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

.rl-chat__waiting[b-doqtgodv1u] {
    display: grid;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.rl-chat__current[b-doqtgodv1u] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rl-chat__log[b-doqtgodv1u] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 50vh;
    overflow-y: auto;
}

.rl-chat__turn[b-doqtgodv1u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 85%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

/* The agent's own words on the right, the visitor's on the left -- with the author's name on every
   turn, so position and colour are reinforcement rather than the only signal. */
.rl-chat__turn--agent[b-doqtgodv1u] {
    align-self: flex-end;
    background: var(--accent-subtle);
}

.rl-chat__who[b-doqtgodv1u] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-chat__body[b-doqtgodv1u] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rl-chat__subject[b-doqtgodv1u] {
    color: var(--ink-muted);
}

.rl-chat__composer[b-doqtgodv1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* `app.css` styles `.rl-field input` and nothing else; this is the plain textarea an interactive
   component uses instead of `EditForm`'s. */
.rl-chat textarea[b-doqtgodv1u] {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--ink);
    font: inherit;
}

/* CH-008. The file sits inside the turn that announced it, as it does on the widget. */
.rl-chat__file[b-doqtgodv1u] {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.rl-chat__file--gone[b-doqtgodv1u] {
    color: var(--ink-muted);
    text-decoration: line-through;
}

/* CH-005's receipt, on the agent's last message only. */
.rl-chat__receipt[b-doqtgodv1u] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* CH-005's indicator, with its height reserved so appearing does not shift the log. */
.rl-chat__typing[b-doqtgodv1u] {
    min-height: 1.4em;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-chat__attach[b-doqtgodv1u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* AI-009's two verbs and the reason one of them needs, under AI-010's marker (roadmap row 25b). Wraps
   rather than shrinking the input, because the composer above it is already the narrow column. */
.rl-chat__verdict[b-doqtgodv1u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.rl-chat__verdict input[b-doqtgodv1u] {
    flex: 1 1 12rem;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--ink);
    font: inherit;
}

/* tech-debt #61's badge, beside the file it is about. */
.rl-chat__unscanned[b-doqtgodv1u] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
/* /Features/Chat/Agent/ChatMonitor.razor.rz.scp.css */
/* CH-007's watching page.

   **This file exists because the spec audit found §24's as-built claiming a grid that was not there.**
   Blazor's scoped CSS is per component, so the console's `auto-fit` grid in ChatConsole.razor.css does
   not reach this page — and it shipped with no stylesheet at all, rendering with default list markers
   under a section of the corpus saying it was responsive. The claim is now true rather than corrected
   away.

   Responsive with no media query, for the reason the console's own comment gives: UI-003 makes mobile a
   P0 and names chat, and tech-debt #22 records that this product has no breakpoints and that choosing
   them is roadmap row 28's. Every value is a semantic token (ADR-0006), so both themes work. */

.rl-chat__watch[b-tlhehe4crx] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.rl-chat__participants[b-tlhehe4crx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-chat__participants > li[b-tlhehe4crx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* The same shape the console's log has, deliberately: somebody watching and somebody answering are
   reading one conversation and should not have to re-learn how it is laid out. */
.rl-chat__watch .rl-chat__log[b-tlhehe4crx] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    max-block-size: 60vh;
    overflow-y: auto;
}

.rl-chat__watch .rl-chat__turn[b-tlhehe4crx] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.rl-chat__watch .rl-chat__turn--agent[b-tlhehe4crx] {
    background: var(--accent-subtle);
}

.rl-chat__watch .rl-chat__who[b-tlhehe4crx] {
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

/* CH-008, so a supervisor watching sees the files as well as the words. Mirrors the console's rules,
   which the two pages do not share because scoped CSS is per component (ADR-0006). */
.rl-chat__file[b-tlhehe4crx] {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.rl-chat__file--gone[b-tlhehe4crx] {
    color: var(--ink-muted);
    text-decoration: line-through;
}

.rl-chat__unscanned[b-tlhehe4crx] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
/* /Features/Chat/Transcript/ChatTranscriptPage.razor.rz.scp.css */
/* CH-009's transcript document.

   Like the monitor page's stylesheet, this exists because the spec audit found §24 describing styling
   that had never been written. A transcript is the one chat surface somebody may print or read at
   length, so it is a single column with a readable measure rather than the console's two-column grid —
   which is also why it needs no `auto-fit`: one column is already the mobile answer.

   Semantic tokens throughout (ADR-0006); both themes work because the tokens do. */

.rl-transcript[b-5vs9cg46l0] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.rl-transcript h2[b-5vs9cg46l0] {
    margin: 0;
}

.rl-transcript ul[b-5vs9cg46l0] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-transcript__log[b-5vs9cg46l0] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-transcript__log > li[b-5vs9cg46l0] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.rl-transcript__log .rl-chat__who[b-5vs9cg46l0] {
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.rl-transcript blockquote[b-5vs9cg46l0] {
    margin: 0;
    padding: var(--space-3);
    border-inline-start: 2px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--ink);
}

/* A transcript is the one page in this product somebody is likely to print: the chrome goes, the
   conversation stays. */
@media print {
    .rl-transcript[b-5vs9cg46l0] {
        border: 0;
        padding: 0;
        background: none;
    }
}
/* /Features/Chat/Widget/ChatWidget.razor.rz.scp.css */
/* The visitor's panel. Every colour, space and radius is a semantic token (ADR-0006); the only value
   an organization may replace is `--accent`, which the page sets inline from `chat_widgets`
   (tech-debt #31, decided for chat by roadmap row 17).

   One column, always. UI-003's mobile clause is met by construction here: the widget is a panel about
   as wide as a phone even on a desktop, so there is nothing to reflow and no breakpoint to introduce
   ahead of row 28's design-system pass (tech-debt #22). */

.rl-widget[b-uai4jdwkvr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 100vh;
    padding: var(--space-4);
    background: var(--surface);
    color: var(--ink);
}

.rl-widget__header[b-uai4jdwkvr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.rl-widget__logo[b-uai4jdwkvr] {
    max-height: 32px;
    width: auto;
}

.rl-widget__title[b-uai4jdwkvr] {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--accent);
}

.rl-widget__greeting[b-uai4jdwkvr] {
    margin: 0;
    color: var(--ink-muted);
}

.rl-widget__form[b-uai4jdwkvr],
.rl-widget__composer[b-uai4jdwkvr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* `app.css` styles `.rl-field input` and nothing else; these are the plain inputs an interactive
   component uses instead of `EditForm`'s, and a textarea is not an input. */
.rl-widget input[b-uai4jdwkvr],
.rl-widget textarea[b-uai4jdwkvr] {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--ink);
    font: inherit;
}

/* The transcript grows and scrolls; the composer stays put. `min-height: 0` is what lets a flex child
   scroll at all -- without it the list grows the panel instead and the composer walks off the bottom. */
.rl-widget__log[b-uai4jdwkvr] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rl-widget__turn[b-uai4jdwkvr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 85%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

/* The visitor's own words, aligned and tinted differently -- and labelled with the author's name
   above, so the distinction is never carried by colour alone (WCAG 2.2 AA, ADR-0006). */
.rl-widget__turn--mine[b-uai4jdwkvr] {
    align-self: flex-end;
    background: var(--accent-subtle);
}

.rl-widget__who[b-uai4jdwkvr] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-widget__body[b-uai4jdwkvr] {
    /* A chat turn is plain text somebody typed, newlines and all. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* CH-008. A shared file sits inside the turn that announced it, because that is what it is: the turn
   carries the sentence and the link, in that order. */
.rl-widget__file[b-uai4jdwkvr] {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* ATT-008 keeps a deleted row, so the log still says a file was shared and says it is gone. Not colour
   alone: the words "no longer available" carry it (WCAG 2.2 AA). */
.rl-widget__file--gone[b-uai4jdwkvr] {
    color: var(--ink-muted);
    text-decoration: line-through;
}

/* CH-005's receipt, against the visitor's last message only. */
.rl-widget__receipt[b-uai4jdwkvr] {
    align-self: flex-end;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* CH-005's indicator. Reserved height so its appearance does not shove the log up a line. */
.rl-widget__typing[b-uai4jdwkvr] {
    min-height: 1.4em;
    margin: 0;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* The upload control. The native file input is kept in the flow rather than hidden behind a styled
   label: a hidden input is a keyboard trap waiting to happen, and this page has no script of its own. */
.rl-widget__attach[b-uai4jdwkvr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* tech-debt #61's badge. Not colour alone: the words carry it (WCAG 2.2 AA). */
.rl-widget__unscanned[b-uai4jdwkvr] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* CAN-008's chat destination (roadmap row 18b). Set apart from the composer below it, because it is a
   question the agent asked rather than something the visitor started -- and separated by a rule rather
   than by colour alone, since the heading carries the form's own name (WCAG 2.2 AA). */
/* --text-md does not exist and never did — the scale is sm / base / lg / xl — so this declaration was
   dropped and the heading has rendered at the inherited size since it shipped. The third instance of
   the same silent failure roadmap row 28 swept (--radius-2 was the second): an undefined custom
   property is legal CSS that no build, formatter or console says a word about. Found by that row's
   pre-merge review, on one of the three surfaces its axe gate does not reach (tech-debt #254). */
.rl-widget__form-title[b-uai4jdwkvr] {
    margin: 0;
    font-size: var(--text-lg);
}

.rl-widget__ask[b-uai4jdwkvr] {
    padding: var(--space-3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* /Features/Chat/Widget/ChatWidgetLayout.razor.rz.scp.css */
/* The widget fills its iframe and nothing else. No max width, no centring, no page margins: the frame
   the customer's site draws is the layout. */
.rl-widget-shell[b-crjgom4smg] {
    display: block;
    min-height: 100vh;
    background: var(--surface);
    color: var(--ink);
}
/* /Features/Csat/SurveyLayout.razor.rz.scp.css */
/* One narrow column, centred, on the page's own background. Tokens only — this page is rendered on a
   customer's device in whichever theme their system asks for, and ADR-0006's light and dark both have to
   work on it as much as on any internal screen. */
.rl-survey-shell[b-breugz56gw] {
    display: block;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
    background: var(--surface);
    color: var(--ink);
}
/* /Features/Identity/SignIn/Login.razor.rz.scp.css */
/* Sign-in card. Tokens only (ADR-0006). */

.login[b-1cidbjg76c] {
  max-width: 26rem;
  margin: var(--space-7) auto;
  padding: var(--space-6);
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.login__lede[b-1cidbjg76c] {
  color: var(--ink-muted);
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-5);
}

.login__submit[b-1cidbjg76c] {
  width: 100%;
}
/* /Features/KnowledgeBase/HelpCentre/PortalLayout.razor.rz.scp.css */
/* One readable column on the page's own background. Tokens only — this page is rendered on a customer's
   device in whichever theme their system asks for, and ADR-0006's light and dark both have to work on it
   as much as on any internal screen. The survey shell's rules, widened because this one is browsed
   rather than answered. */
.rl-help-shell[b-bfjm08awfu] {
    display: block;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
    background: var(--surface);
    color: var(--ink);
}

[b-bfjm08awfu] .rl-help {
    max-width: 46rem;
    margin: 0 auto;
}

[b-bfjm08awfu] .rl-help__search {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    margin-block: var(--space-5);
}

[b-bfjm08awfu] .rl-help__search input {
    flex: 1 1 auto;
}

[b-bfjm08awfu] .rl-help__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-bfjm08awfu] .rl-help__list li {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border);
}

[b-bfjm08awfu] .rl-help__summary {
    margin: var(--space-1) 0 0;
    color: var(--ink-muted);
}

[b-bfjm08awfu] .rl-help__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--ink-muted);
}
/* /Features/Reporting/Builder/ReportChart.razor.rz.scp.css */
/*
    §29.10's Visuals row, as chrome.

    Every colour here is a semantic token, with one deliberate exception the markup carries rather than
    this file: a series' own fill and a legend swatch are literal hex, because the same chart is drawn
    into a PDF and a PDF has no theme (ADR-0020 decision 5, and the exception is written into
    .claude/rules/blazor.md). Everything that is not a series is a token, so both themes work with no
    branch here — the axis, the gridline, the tick labels, the slice separators and the donut's hole.

    Nothing on the chart is the only carrier of anything: the legend names every series and the report's
    own table beside it holds the same figures with their drill-down links.
*/

.rl-chart[b-0uwzl6wfa9] {
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rl-chart__caption[b-0uwzl6wfa9] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-chart__canvas[b-0uwzl6wfa9] {
    width: 100%;
    max-height: 20rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.rl-chart__canvas--round[b-0uwzl6wfa9] {
    max-width: 16rem;
    align-self: center;
    background: none;
    border: none;
}

.rl-chart__axis[b-0uwzl6wfa9] {
    stroke: var(--border);
    stroke-width: 1;
}

.rl-chart__grid[b-0uwzl6wfa9] {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.rl-chart__tick[b-0uwzl6wfa9] {
    fill: var(--ink-muted);
    font-size: 9px;
}

.rl-chart__line[b-0uwzl6wfa9] {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
    The separator, and it is load-bearing rather than decorative. The palette's six hues are chosen for
    contrast against the *background*, not against each other, so two adjacent slices can be close
    enough to read as one shape. A stroke in the page's own colour keeps them apart in both themes.
*/
.rl-chart__slice[b-0uwzl6wfa9] {
    stroke: var(--surface-raised);
    stroke-width: 2;
}

.rl-chart__hole[b-0uwzl6wfa9] {
    fill: var(--surface-raised);
}

.rl-chart__legend[b-0uwzl6wfa9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-chart__key[b-0uwzl6wfa9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rl-chart__swatch[b-0uwzl6wfa9] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
/* /Features/Reporting/Dashboards/DashboardBreakdownPanel.razor.rz.scp.css */
/* The proportional bar beside a breakdown's figure. One accent colour, because this product has no
   categorical palette and roadmap row 28 owns that decision. It repeats the number rather than
   replacing it, so it can be hidden from assistive technology without losing anything. */

.breakdown__bar-cell[b-c543j1lb8k] {
    width: 40%;
    min-width: 4rem;
}

.breakdown__bar[b-c543j1lb8k] {
    height: 0.5rem;
    min-width: 2px;
    background: var(--accent);
    border-radius: var(--radius-pill);
}
/* /Features/Reporting/Dashboards/DashboardLayout.razor.rz.scp.css */
/* The header and tab strip every dashboard shares. Scoped: only this component draws them. */

.dashboard__header[b-gq1943kf2x] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.dashboard__titles h1[b-gq1943kf2x] {
    margin: 0;
}

.dashboard__scope[b-gq1943kf2x],
.dashboard__freshness[b-gq1943kf2x] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.dashboard__tabs[b-gq1943kf2x] {
    margin: var(--space-3) 0 var(--space-4);
    border-bottom: 1px solid var(--border);
}

.dashboard__tabs ul[b-gq1943kf2x] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dashboard__tabs a[b-gq1943kf2x] {
    display: inline-block;
    padding: var(--space-2) 0;
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.dashboard__tabs a:hover[b-gq1943kf2x] {
    color: var(--ink);
}

/* The current tab is marked by weight and a rule as well as by colour, because colour alone is not a
   distinction every reader can use (UI-010). aria-current carries it for a screen reader. */
.dashboard__tabs a[aria-current="page"][b-gq1943kf2x] {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.dashboard__tabs a:focus-visible[b-gq1943kf2x] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* /Features/Reporting/Dashboards/DashboardTile.razor.rz.scp.css */
/*
    One figure on a dashboard. Scoped rather than added to the global sheet: these classes are this
    component's own, and app.css is the shared BEM layer for things several unrelated pages use.

    Every colour, space and size is a semantic token. Both themes remap the same names, so nothing here
    needs a dark-mode branch (ADR-0006, docs/design/design-language.md).
*/

.tile[b-mkg5d73znn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.tile__label[b-mkg5d73znn] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* A metric the dictionary marks narrowed or unmeasured says so beside its own name, so a reader never
   has to know to go and look it up. Not colour alone: it is a word. */
.tile__caveat[b-mkg5d73znn] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-1);
}

.tile__figure[b-mkg5d73znn] {
    font-size: var(--text-xl);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.2;
}

a.tile__figure:hover[b-mkg5d73znn],
a.tile__figure:focus-visible[b-mkg5d73znn] {
    color: var(--accent-strong);
    text-decoration: underline;
}

a.tile__figure:focus-visible[b-mkg5d73znn] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.tile__note[b-mkg5d73znn] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
/* /Features/Reporting/Dashboards/TrendBars.razor.rz.scp.css */
/*
    The one chart in the product. Every colour is a semantic token, so both themes work with no branch
    here, and the two series are told apart by opacity over the same accent rather than by two hues —
    there is no categorical palette in this product yet and inventing one is roadmap row 28's decision.

    Nothing on this chart is the only carrier of anything: the table below it holds the same figures.
*/

.trend[b-5jzgnvva6z] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.trend__caption[b-5jzgnvva6z] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.trend__chart[b-5jzgnvva6z] {
    width: 100%;
    height: 6rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.trend__bar--primary[b-5jzgnvva6z] {
    fill: var(--accent);
}

.trend__bar--secondary[b-5jzgnvva6z] {
    fill: var(--accent-strong);
}

.trend__empty[b-5jzgnvva6z] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.trend__figures > summary[b-5jzgnvva6z] {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    cursor: pointer;
}

.trend__figures > summary:focus-visible[b-5jzgnvva6z] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* /Features/Telephony/Agent/CallConsole.razor.rz.scp.css */
/* The call console's first stylesheet (roadmap row 43): the live panel that carries WF-006's inbound
   call popup. Tokens only (.claude/rules/blazor.md), so both themes work with no branch here. */

.rl-live[b-34fa3i6hlb] {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.rl-live__card[b-34fa3i6hlb] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-inline-start-width: var(--space-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}

/* The state is carried by the words on the card; the accent only repeats it. */
.rl-live__card--ringing[b-34fa3i6hlb] {
    border-inline-start-color: var(--accent);
    animation: rl-live-ring-b-34fa3i6hlb 1.6s ease-in-out infinite;
}

.rl-live__card--in-call[b-34fa3i6hlb] {
    border-inline-start-color: var(--success);
}

.rl-live__state[b-34fa3i6hlb] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-muted);
}

.rl-live__who[b-34fa3i6hlb] {
    margin: 0;
    font-size: var(--text-lg);
}

.rl-live__meta[b-34fa3i6hlb],
.rl-live__reason[b-34fa3i6hlb] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.rl-live__controls[b-34fa3i6hlb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@keyframes rl-live-ring-b-34fa3i6hlb {
    0%, 100% {
        box-shadow: var(--shadow-raised);
    }

    50% {
        box-shadow: 0 0 0 var(--focus-ring-width) var(--accent-subtle);
    }
}

/* SC 2.3.3: a ringing card that pulses is decoration, and it stops for anybody who has asked. */
@media (prefers-reduced-motion: reduce) {
    .rl-live__card--ringing[b-34fa3i6hlb] {
        animation: none;
    }
}