/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* #blazor-error-ui styling lives in wwwroot/app.css (global, token-driven) — Task C8 dedupe.
   MainLayout.razor.css is scoped to this component's markup and had a drifted copy of the same
   rule; app.css is the one kept because #blazor-error-ui needs to render correctly regardless of
   which layout is active (e.g. LoginLayout), not just MainLayout.

   Task 5 (2026-09-10): the sidebar console chrome (.app / .sidebar / .brand / .nav-* /
   .sidebar-foot / .org-chip / .foot-row / .op-badge / .pagehead / .content) and its responsive
   breakpoint all live in wwwroot/app.css, NOT here. Two reasons: (1) the .pagehead band is authored
   inside pages (@Body), which CSS isolation cannot reach; (2) the nav items are <NavLink> — a
   component whose rendered <a> does not carry MainLayout's isolation scope, so any rule that must
   match .nav-item (including the mobile reflow) has to be global. What stays here is the skip-link
   and the ONE thing that genuinely needs ::deep — the ThemeToggle island's foot-row styling. */

/* Task C1: skip-to-content link — the first focusable element on the page. Off-screen until
   focused (rather than .visually-hidden's permanent clip), so a keyboard user tabbing in
   sees it appear at the top-left; a mouse/touch user never sees it at all. */
.skip-link[b-csfcrdjgrn] {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1100;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus[b-csfcrdjgrn] {
    top: 0;
    box-shadow: var(--focus-ring);
}

/* Task 5: the theme toggle moved from the (now-removed) Settings ▾ dropdown into the sidebar foot.
   <ThemeToggle> is a child component (interactive island), so its <button class="theme-toggle">
   gets ITS OWN isolation scope, not MainLayout's — ::deep, anchored on the .sidebar-foot element
   authored here, is how a scoped rule reaches it (same mechanism NavMenu.razor.css used while the
   toggle lived in its panel). Restyle it from the round-pill topbar look it no longer has into a
   full-width foot row matching .foot-row (app.css). AA: uses --nav-fg (not --nav-fg-muted), since
   this is an actionable control, not a muted label. */
.sidebar-foot[b-csfcrdjgrn]  .theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--nav-fg);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.sidebar-foot[b-csfcrdjgrn]  .theme-toggle:hover {
    background: var(--nav-active);
    color: #fff;
}

.sidebar-foot[b-csfcrdjgrn]  .theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sidebar-foot[b-csfcrdjgrn]  .theme-toggle-icon {
    width: 1.1em;
    text-align: center;
    flex: 0 0 auto;
}

/* Mobile: the foot reflows into an inline row (see the .sidebar top-strip breakpoint in app.css),
   so the toggle sheds its full width to sit alongside the other foot rows. */
@media (max-width: 900px) {
    .sidebar-foot[b-csfcrdjgrn]  .theme-toggle {
        width: auto;
    }
}
/* /Components/Pages/DeviceRecoveryPanel.razor.rz.scp.css */
/* A superseded seal is an older password the device has since replaced: muted, but still revealable. */
.rec-superseded td[b-xpk4owb4wv] { opacity: .6; }
.rec-secondary[b-xpk4owb4wv] { font-weight: 400; }

/* Step pills live here, not in Modal.razor.css: they are authored in this component, so this scope owns them. */
.rec-pill[b-xpk4owb4wv] { padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: var(--fs-xs); color: var(--text-muted); }
.rec-pill-current[b-xpk4owb4wv] { background: var(--warning-tint); border-color: var(--warning); color: var(--text); font-weight: 600; }
.rec-pill-done[b-xpk4owb4wv] { color: var(--text); }

/* The global .secret-box is shared by other pages, so the warning tint is applied only here. */
.rec-secret-box[b-xpk4owb4wv] { background: var(--warning-tint); border-color: var(--warning); border-style: solid; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Stage chips (D112): a single-select filter, so the selected chip must read as selected at a glance in
   both themes. It fills with --accent-dark, not --accent: --text-on-accent (white) on --accent is ~3.7:1 in
   the light theme, below AA for text, while on --accent-dark it is ~5:1; in the dark theme --text-on-accent
   flips to near-black and clears ~7.7:1 on --accent-dark. aria-pressed carries the state for assistive
   tech, so the style keys off it too and the two can never disagree. */
.stage-chips[b-tzzl8j8n1a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.stage-chip[b-tzzl8j8n1a] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    cursor: pointer;
    transition: background .13s, border-color .13s;
}

.stage-chip:not([aria-pressed="true"]):hover[b-tzzl8j8n1a] { background: var(--surface-alt); border-color: var(--text-faint); }
.stage-chip:focus-visible[b-tzzl8j8n1a] { outline: none; box-shadow: var(--focus-ring); }

.stage-chip[aria-pressed="true"][b-tzzl8j8n1a] {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--text-on-accent);
}

.chip-count[b-tzzl8j8n1a] { color: var(--text-muted); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.stage-chip[aria-pressed="true"] .chip-count[b-tzzl8j8n1a] { color: inherit; }

/* A halted row can carry four actions at once (Create job…, Recovery, details, Recover…): wrap them inside
   the cell rather than widening the whole table. The result line sits on its own row under the buttons. */
.row-actions[b-tzzl8j8n1a] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-1) var(--space-2);
}

.recover-msg[b-tzzl8j8n1a] { flex-basis: 100%; }
/* /Components/Shared/Callout.razor.rz.scp.css */
.callout-box[b-qfenefxtgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3) var(--space-3) 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    border-left: 3px solid var(--border);
}

.callout-body[b-qfenefxtgt] {
    overflow-wrap: anywhere;
}

.callout-error[b-qfenefxtgt] {
    border-left-color: var(--blocking);
    background: var(--blocking-tint);
}

.callout-degraded[b-qfenefxtgt] {
    border-left-color: var(--warning);
    background: var(--warning-tint);
}

.callout-success[b-qfenefxtgt] {
    border-left-color: var(--ready);
    background: var(--ready-tint);
}

.callout-info[b-qfenefxtgt] {
    border-left-color: var(--info);
    background: var(--info-tint);
}

.callout-empty[b-qfenefxtgt] {
    border-left-color: var(--neutral);
    background: var(--surface);
    color: var(--text-muted);
}

.callout-loading[b-qfenefxtgt] {
    border-left-color: var(--neutral);
    background: var(--surface);
    color: var(--text-muted);
    animation: callout-pulse-b-qfenefxtgt 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .callout-loading[b-qfenefxtgt] {
        animation: none;
    }
}

@keyframes callout-pulse-b-qfenefxtgt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.callout-details[b-qfenefxtgt] {
    margin-top: var(--space-2);
}

.callout-details pre[b-qfenefxtgt] {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-dialog[b-5oda88hq3l] {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Mirrors today's .danger-zone (app.css:401) -- the accent that says "this is the irreversible one". */
.confirm-dialog.danger[b-5oda88hq3l] {
    border-color: var(--blocking);
    background: var(--blocking-tint);
}

.confirm-context[b-5oda88hq3l] {
    overflow-wrap: anywhere;
}

.confirm-label[b-5oda88hq3l] {
    font-size: var(--fs-xs);
}

.confirm-input[b-5oda88hq3l] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.confirm-input:focus-visible[b-5oda88hq3l] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.confirm-actions[b-5oda88hq3l] {
    display: flex;
    gap: var(--space-2);
}

/* Buttons carry the global .btn/.btn-primary/.btn-danger/.btn-secondary vocabulary (Task 2) now,
   in place of the old bespoke confirm-button/confirm-arm-button/confirm-cancel-button rules.
   Redeclaring the handful of properties .btn needs here (rather than just relying on app.css's
   own .btn rule) matters because callers sometimes nest this component inside an `.op-actions`
   wrapper (e.g. GroupList.razor's danger-zone delete row): `.op-actions button` (app.css) is a
   plain element-descendant selector with HIGHER specificity than a lone global class, so it would
   silently win the cascade and repaint every button back to the op-actions default look. Blazor's
   CSS isolation compiles a bare `.btn` selector here to `.btn[b-xxx]` (an attribute selector on
   THIS component's own -- not slotted -- button markup), which outranks `.op-actions button`
   without touching app.css's op-actions redirect (out of scope; other pages still depend on it
   until they migrate off it). */
.btn[b-5oda88hq3l] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}

.btn:active[b-5oda88hq3l] {
    transform: translateY(1px);
}

.btn:focus-visible[b-5oda88hq3l] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled[b-5oda88hq3l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-5oda88hq3l] {
    background: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-5oda88hq3l] {
    background: var(--accent-dark);
}

.btn-secondary[b-5oda88hq3l] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-secondary:hover[b-5oda88hq3l] {
    background: var(--surface-alt);
    border-color: var(--text-faint);
}

.btn-danger[b-5oda88hq3l] {
    background: var(--blocking);
    color: #fff;
}

.btn-danger:hover[b-5oda88hq3l] {
    filter: brightness(.93);
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
/* Scroll lives on the container, not the page body (roadmap 3.2). */
.table-scroll[b-45vyz90ptd] {
    overflow-x: auto;
}

.data-table[b-45vyz90ptd] {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: var(--fs-sm);
}

/* ::deep: the actual <th>/<td>/<tr> markup is authored in the PARENT page's
   HeaderContent/BodyContent render fragments, so it carries the parent's scope
   (or none) rather than DataTable's own. Anchoring on .data-table (which DOES
   carry DataTable's scope attribute) and piercing with ::deep emits a plain
   descendant selector, so these rules match the slotted cells regardless of
   whose scope they carry. DO NOT convert these to bare th/td/tr — that would
   silently stop matching the slotted markup (ADR-0041). */
.data-table[b-45vyz90ptd]  th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.data-table[b-45vyz90ptd]  td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table[b-45vyz90ptd]  tbody tr:hover {
    background: var(--surface-alt);
}

.data-table.kv[b-45vyz90ptd]  th {
    width: 30%;
}

/* Convention for numeric cells: pages add class="num" to a <td> (or the <th>
   above it) to right-align digits on a fixed-width grid instead of proportional
   spacing — e.g. step counts ("18 / 23"), finding counts. Anchored the same way
   as th/td above since it targets the same slotted markup. */
.data-table[b-45vyz90ptd]  td.num,
.data-table[b-45vyz90ptd]  th.num {
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Icon.razor.rz.scp.css */
.icon[b-4ty2vlab7w] { display: inline-block; vertical-align: middle; }
/* /Components/Shared/Modal.razor.rz.scp.css */
/* Above the nav dropdown (1050) and skip-link (1100): nothing may sit over a secret being shown. */
.modal-backdrop[b-06tk9dzhl7] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-6, 32px) 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, .55);
}

.modal-panel[b-06tk9dzhl7] {
    width: calc(100% - 32px);
    max-width: 640px;
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    border-top: 1px solid var(--border-strong);
    padding: var(--space-4, 20px) var(--space-5, 24px);
    outline: none;
}

.modal-warning[b-06tk9dzhl7] { border-top: 5px solid var(--warning); }

.modal-title[b-06tk9dzhl7] { margin: 0; font-size: 1.15rem; }
.modal-subtitle[b-06tk9dzhl7] { margin: var(--space-1, 4px) 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.modal-steps[b-06tk9dzhl7] { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.modal-body[b-06tk9dzhl7] { margin-top: var(--space-4, 20px); display: flex; flex-direction: column; gap: var(--space-3, 12px); }
/* /Components/Shared/NavMenu.razor.rz.scp.css */
/* Task 8 (agency onboarding 2.8a): Migrate/Settings top-nav dropdowns.

   The <details> element itself needs `position: relative` so the panel (position: absolute)
   anchors under the summary rather than the page. The summary is styled like a .topnav link
   (app.css:257) -- same opaque --topbar-fg-on-opacity treatment, since it sits on the dark
   topbar in both themes -- but the panel is its own popover surface floating OVER the page, so
   its content uses --text/--surface/--border like any other card (ConfirmDialog.razor.css is
   the model), NOT the topbar tokens. */

.nav-menu[b-h5vbubi8vw] {
    position: relative;
    display: inline-block;
}

.nav-menu-summary[b-h5vbubi8vw] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--topbar-fg);
    opacity: 0.8;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Hide the browser's default disclosure triangle -- the "▾" in the label already signals a
   dropdown, so the native marker would just double it up (and its shape/position isn't
   token-driven, unlike everything else on this bar). */
.nav-menu-summary[b-h5vbubi8vw]::marker,
.nav-menu-summary[b-h5vbubi8vw]::-webkit-details-marker {
    display: none;
}

.nav-menu-summary:hover[b-h5vbubi8vw] {
    opacity: 1;
    text-decoration: underline;
}

.nav-menu-summary:focus-visible[b-h5vbubi8vw] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.nav-menu-panel[b-h5vbubi8vw] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 11rem;
    padding: var(--space-2);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

/* ChildContent is slotted, not authored in this component's own markup, so scoped CSS needs
   ::deep to reach the <a> tags the caller passes in (MainLayout.razor's Blazor CSS isolation
   otherwise stamps a different scope attribute on them). Panel links read --text -- this is a
   light/dark surface floating over the page, not the always-dark topbar, so the topbar tokens
   (--topbar-fg) would be the wrong contrast pairing here. */
.nav-menu-panel[b-h5vbubi8vw]  a {
    display: block;
    padding: var(--space-1) var(--space-2);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.nav-menu-panel[b-h5vbubi8vw]  a:hover {
    background: var(--surface-alt);
    text-decoration: none;
}

.nav-menu-panel[b-h5vbubi8vw]  a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Task 5 (2026-09-10): the light/dark toggle used to be slotted into this panel and was styled
   here via ::deep. It has since moved into the sidebar foot (MainLayout.razor), and MainLayout no
   longer renders any <NavMenu> at all (the topbar dropdowns were flattened into sidebar groups).
   The toggle's foot-row treatment now lives in MainLayout.razor.css; the .theme-toggle ::deep rules
   that were here are removed rather than left as dead CSS. NavMenu itself is retained for reuse. */
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
.status-badge[b-5rj6rq2qn1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Leading status dot — tint variant only. The solid variant is already a saturated fill,
   so a same-color dot on it would be invisible; it relies on the fill itself to read as "status". */
.tint[b-5rj6rq2qn1]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.tint.sev-blocking[b-5rj6rq2qn1] { background: var(--blocking-tint); color: var(--blocking); }
.tint.sev-warning[b-5rj6rq2qn1]  { background: var(--warning-tint);  color: var(--warning); }
.tint.sev-info[b-5rj6rq2qn1]     { background: var(--info-tint);     color: var(--info); }
.tint.sev-ready[b-5rj6rq2qn1]    { background: var(--ready-tint);    color: var(--ready); }
.tint.sev-err[b-5rj6rq2qn1]      { background: var(--err-tint);      color: var(--err); }
.tint.sev-scenario[b-5rj6rq2qn1] { background: var(--scenario-tint); color: var(--scenario); }
.tint.sev-sid[b-5rj6rq2qn1]      { background: var(--sid-tint);      color: var(--sid); }
.tint.sev-neutral[b-5rj6rq2qn1]  { background: var(--neutral-tint);  color: var(--neutral); }
.tint.sev-accent[b-5rj6rq2qn1]   { background: var(--accent-tint);   color: var(--accent-dark); }

.solid.sev-blocking[b-5rj6rq2qn1] { background: var(--blocking); color: var(--text-on-accent); }
.solid.sev-warning[b-5rj6rq2qn1]  { background: var(--warning);  color: var(--text-on-accent); }
.solid.sev-info[b-5rj6rq2qn1]     { background: var(--info);     color: var(--text-on-accent); }
.solid.sev-ready[b-5rj6rq2qn1]    { background: var(--ready);    color: var(--text-on-accent); }
.solid.sev-err[b-5rj6rq2qn1]      { background: var(--err);      color: var(--text-on-accent); }
.solid.sev-scenario[b-5rj6rq2qn1] { background: var(--scenario); color: var(--text-on-accent); }
.solid.sev-sid[b-5rj6rq2qn1]      { background: var(--sid);      color: var(--text-on-accent); }
.solid.sev-neutral[b-5rj6rq2qn1]  { background: var(--neutral);  color: var(--text-on-accent); }
.solid.sev-accent[b-5rj6rq2qn1]   { background: var(--accent);   color: var(--text-on-accent); }
/* /Components/Shared/StepTimeline.razor.rz.scp.css */
.step-timeline[b-cjahlp5flx] {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* The rail is the entry's own left border, so it runs continuously from one
   dot to the next without a separate absolutely-positioned line element. */
.timeline-entry[b-cjahlp5flx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-left: 2px solid var(--border-strong);
    padding-left: var(--space-3);
}

.timeline-entry:first-child[b-cjahlp5flx] {
    padding-top: 0;
}

.timeline-entry:last-child[b-cjahlp5flx] {
    padding-bottom: 0;
}

.tl-marker[b-cjahlp5flx] {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-top: 3px;
    /* Pulls the dot left off the flex content box so it sits centered on the
       rail (the entry's border-left) rather than beside it. */
    margin-left: -19px;
    border-radius: 50%;
    background: var(--neutral);
    /* A ring in the dot's own color, not the surrounding surface's, so it
       reads correctly whether the row behind it is --surface or the
       --surface-alt hover/DataTable-zebra tint. */
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
    color: var(--neutral);
}

/* `color` is set alongside `background` on every variant (not just background)
   because the ring above reads `currentColor` -- without it every colored dot
   would still ring in --neutral (the base rule's color), not its own hue. */
.tl-marker.sev-blocking[b-cjahlp5flx] { background: var(--blocking); color: var(--blocking); }
.tl-marker.sev-warning[b-cjahlp5flx]  { background: var(--warning);  color: var(--warning); }
.tl-marker.sev-info[b-cjahlp5flx]     { background: var(--info);     color: var(--info); }
.tl-marker.sev-ready[b-cjahlp5flx]    { background: var(--ready);    color: var(--ready); }
.tl-marker.sev-err[b-cjahlp5flx]      { background: var(--err);      color: var(--err); }
.tl-marker.sev-scenario[b-cjahlp5flx] { background: var(--scenario); color: var(--scenario); }
.tl-marker.sev-sid[b-cjahlp5flx]      { background: var(--sid);      color: var(--sid); }
.tl-marker.sev-neutral[b-cjahlp5flx]  { background: var(--neutral);  color: var(--neutral); }
.tl-marker.sev-accent[b-cjahlp5flx]   { background: var(--accent);   color: var(--accent); }

.tl-content[b-cjahlp5flx] {
    flex: 1 1 auto;
    min-width: 0;
}

.tl-head[b-cjahlp5flx] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.tl-step[b-cjahlp5flx] {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

.tl-time[b-cjahlp5flx],
.tl-counts[b-cjahlp5flx] {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.tl-detail[b-cjahlp5flx] {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: normal;
    word-break: break-word;
}
/* /Components/Shared/StepUpDialog.razor.rz.scp.css */
/* This component had no scoped stylesheet before Task 4 - its action row rendered bare <button>
   elements picked up only by app.css's `.op-actions button` redirect (the outer div carries
   op-actions/danger-zone/stepup-dialog, all unscoped app.css classes; that container styling is
   untouched here). Buttons now carry the global .btn/.btn-primary/.btn-secondary vocabulary
   (Task 2, mirrored from ConfirmDialog.razor.css - see its comment for the full reasoning): a
   bare `.btn-primary` class alone would lose the cascade to `.op-actions button`, which is a
   plain element-descendant selector with higher specificity. Blazor's CSS isolation compiles a
   bare `.btn` selector here to `.btn[b-xxx]` (an attribute selector on this component's own,
   non-slotted, button markup), which outranks `.op-actions button` without touching app.css's
   op-actions redirect - out of scope; other pages still depend on it until they migrate off it. */
.confirm-actions[b-wgoc01zxxd] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.btn[b-wgoc01zxxd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}

.btn:active[b-wgoc01zxxd] {
    transform: translateY(1px);
}

.btn:focus-visible[b-wgoc01zxxd] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled[b-wgoc01zxxd] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-wgoc01zxxd] {
    background: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-wgoc01zxxd] {
    background: var(--accent-dark);
}

.btn-secondary[b-wgoc01zxxd] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-secondary:hover[b-wgoc01zxxd] {
    background: var(--surface-alt);
    border-color: var(--text-faint);
}