@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/GuestSessionBanner.razor.rz.scp.css */
.cs-guest-session-banner[b-s4ftopv1hj] {
    margin: 0.5rem 0;
    /* Spec 004 — force a high-contrast palette so the banner stays
       readable across both light and dark themes. The default Fluent
       MessageBar Info tokens render near-invisible on the CleverSets
       dark surface (see screenshot in conversation). */
    background-color: var(--accent-fill-rest, #0078d4);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--control-corner-radius, 4px);
    padding: 0.5rem 0.75rem;
}

[b-s4ftopv1hj] .cs-guest-session-banner,
[b-s4ftopv1hj] .cs-guest-session-banner * {
    color: #ffffff !important;
    fill: #ffffff;
}

[b-s4ftopv1hj] .cs-guest-session-banner a,
[b-s4ftopv1hj] .cs-guest-session-banner fluent-anchor::part(control) {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 0.25rem;
}

/* /Components/ItemCard.razor.rz.scp.css */
/* Spec 005 polish — unified ItemCard styles.

   Goals:
     • Card-like surface with a sane max-width (so very wide screens don't
       sprawl) and no horizontal scroll on any nested element.
     • Vertical scroll on the children/sharing tab bodies, never on the
       outer document — keeps the back row + breadcrumb pinned in view.
     • Mirror existing .cs-list / .cs-empty / .cs-breadcrumbs idioms used
       on the Cabinets list so children rows look consistent.
*/

[b-arlwh6riid] .cs-item-card {
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-3, 0.75rem);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    /* Prevent the article from forcing horizontal scroll if a child
       overflows — we prefer wrapping/truncation over horizontal motion. */
    overflow-x: hidden;
}

[b-arlwh6riid] .cs-item-card__topbar {
    display: flex;
    align-items: center;
    gap: var(--cs-spacing-3, 0.75rem);
    flex-wrap: wrap;
}

[b-arlwh6riid] .cs-item-card__topbar .cs-breadcrumbs {
    flex: 1 1 auto;
    min-width: 0;
}

[b-arlwh6riid] .cs-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cs-spacing-1, 0.25rem);
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.9rem;
}

[b-arlwh6riid] .cs-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

[b-arlwh6riid] .cs-breadcrumbs a:hover,
[b-arlwh6riid] .cs-breadcrumbs a:focus-visible {
    text-decoration: underline;
}

[b-arlwh6riid] .cs-breadcrumbs__sep {
    opacity: 0.6;
}

[b-arlwh6riid] .cs-item-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--cs-spacing-2, 0.5rem);
    padding: var(--cs-spacing-3, 0.75rem) 0;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

[b-arlwh6riid] .cs-item-card__header-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-1, 0.25rem);
    /* Long titles/descriptions wrap rather than overflow horizontally. */
    overflow-wrap: anywhere;
}

[b-arlwh6riid] .cs-item-card__header-edit {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-2, 0.5rem);
}

[b-arlwh6riid] .cs-page-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

[b-arlwh6riid] .cs-page-meta {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
}

[b-arlwh6riid] .cs-page-subtitle {
    margin: 0;
    color: var(--neutral-foreground-rest, #303030);
}

/* Spec 011 polish — Contact-flavored item view-mode field list. dt/dd
   pairs render in a tight two-column grid; multi-line MailingAddress
   spans the full row via white-space: pre-line. */
[b-arlwh6riid] .cs-item-card__contact {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 0 0;
    font-size: 0.9375rem;
}
[b-arlwh6riid] .cs-item-card__contact dt {
    color: var(--neutral-foreground-hint, #707070);
    font-weight: 500;
}
[b-arlwh6riid] .cs-item-card__contact dd {
    margin: 0;
    color: var(--neutral-foreground-rest, #303030);
}
[b-arlwh6riid] .cs-item-card__contact-multiline {
    white-space: pre-line;
}

[b-arlwh6riid] .cs-item-card__tabs {
    /* Let the tab strip span the card; tab bodies handle their own scroll. */
    width: 100%;
}

[b-arlwh6riid] .cs-item-card__tabbody {
    padding: var(--cs-spacing-3, 0.75rem) 0;
    /* Spec 027 smoke follow-up — the prior implementation capped the
       tab body height and gave it its own vertical scroll. That made
       browser features (Cmd/Ctrl+End, in-page Find auto-scroll,
       mobile pull-to-refresh) feel wrong because the inner scroll
       stole the natural page-level scroll. Drop the cap + overflow
       and let the page scroll instead. If the tab strip scrolling
       out of view becomes annoying on tall lists, follow up with
       `position: sticky` on `.cs-item-card__tabs` rather than
       reintroducing the inner scrollbar. */
    overflow-x: hidden;
}

[b-arlwh6riid] .cs-item-card__add {
    margin-bottom: var(--cs-spacing-3, 0.75rem);
}

[b-arlwh6riid] .cs-item-card__children .cs-list {
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-2, 0.5rem);
}

[b-arlwh6riid] .cs-list__row-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--cs-spacing-2, 0.5rem);
    border-radius: var(--control-corner-radius, 4px);
    min-width: 0;
}

[b-arlwh6riid] .cs-list__row-wrapper > .cs-list__row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Actions (sharing badge + delete) top-align with the title row so
   they sit next to the title rather than floating beside whatever
   content height the subtitle happens to produce. The 0.75rem
   top-padding matches the .cs-item-display top-padding so the badge
   bottom-aligns visually with the title baseline. */
[b-arlwh6riid] .cs-list__actions {
    display: flex;
    align-items: center;
    gap: var(--cs-spacing-1, 0.25rem);
    flex: 0 0 auto;
    padding-top: 0.75rem;
}

[b-arlwh6riid] .cs-list__row {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--control-corner-radius, 4px);
}

[b-arlwh6riid] .cs-list__row:hover,
[b-arlwh6riid] .cs-list__row:focus-visible {
    background: var(--neutral-fill-secondary-rest, #fafafa);
    outline: none;
}

[b-arlwh6riid] .cs-empty {
    margin-top: var(--cs-spacing-4, 1rem);
    padding: var(--cs-spacing-6, 1.5rem);
    border: 1px dashed var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    text-align: center;
}

[b-arlwh6riid] .cs-empty__title {
    font-weight: 600;
    margin: 0 0 var(--cs-spacing-1, 0.25rem) 0;
}

[b-arlwh6riid] .cs-empty__hint {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
}

[b-arlwh6riid] .cs-loading {
    color: var(--neutral-foreground-hint, #707070);
}

[b-arlwh6riid] .cs-dialog-error,
[b-arlwh6riid] .cs-action-error {
    color: var(--error-foreground-rest, #b00020);
    margin-top: var(--cs-spacing-2, 0.5rem);
}
/* /Components/ItemDisplay.razor.rz.scp.css */
.cs-item-display[b-rv0xg08o6n] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #ebebeb);
}
.cs-item-display:last-child[b-rv0xg08o6n] {
    border-bottom: none;
}
.cs-item-display__row[b-rv0xg08o6n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.cs-item-display__icon[b-rv0xg08o6n],
.cs-item-display__avatar[b-rv0xg08o6n] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--neutral-fill-rest, #f3f3f3);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest, #1f1f1f);
}
.cs-item-display__text[b-rv0xg08o6n] {
    flex: 1;
    min-width: 0;
}
.cs-item-display__title[b-rv0xg08o6n] {
    font-weight: 500;
    line-height: 1.3;
}
/* Subtitle/description lives on its own row under the header strip so it
   gets the full row width on every breakpoint. Indented to align with the
   title (icon column 36px + row gap 0.75rem).

   Clamped to 2 lines so a long description (e.g. a markdown-bodied Note
   whose Description carries paragraphs of content) doesn't blow the row
   open and create a wrap-the-actions-around layout. Click into the item
   for the full content. */
.cs-item-display__subtitle[b-rv0xg08o6n] {
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-size: 0.85rem;
    line-height: 1.35;
    width: 100%;
    padding-left: calc(36px + 0.75rem);
    word-break: break-word;
    /* Multi-line ellipsis. -webkit-line-clamp is supported across all
       evergreen browsers (Safari / Chrome / Firefox / Edge as of 2024+). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Collapse newlines/extra whitespace from markdown source to keep
       the clamped preview readable as a one-paragraph summary. */
    white-space: normal;
}
.cs-item-display__hint[b-rv0xg08o6n] {
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-size: 0.85rem;
    width: 100%;
    padding-left: calc(36px + 0.75rem);
    word-break: break-word;
}
.cs-item-display__trailing[b-rv0xg08o6n] {
    flex-shrink: 0;
}

/* Spec 012 / T030 / D5 — done-state visual treatment for
   completed Tasks. Composed of FOUR signals so the row reads
   "done" at a glance even without a comparison row alongside:

     1. Title gets a STRONG strikethrough — full-color
        decoration line (not dimmed with the text) at 2px
        thickness. Smoke-pass surfaced that line-through
        following the text-decoration-color default rendered
        too faint at small mobile sizes; locking the decoration
        color to neutral-foreground-rest keeps it readable.
     2. Entire block drops to neutral-foreground-hint coloring
        so the row reads quieter than active rows.
     3. Icon swaps to Filled.CheckmarkCircle (handled at the
        call site via DoneAwareIcon) — the Things 3-style
        explicit "checked off" mark.
     4. Subtle background tint so the row reads as a distinct
        state-row in a scrolling list, not just a faint variant.

   The neutral-foreground-hint design token is contrast-checked
   in the FluentUI palette for both light + dark backgrounds;
   composing it for the whole block stays WCAG-AA-compliant. */
.cs-item-display--done .cs-item-display__title[b-rv0xg08o6n] {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--neutral-foreground-rest, #1f1f1f);
}
.cs-item-display--done[b-rv0xg08o6n] {
    color: var(--neutral-foreground-hint, #6e6e6e);
    background: var(--neutral-layer-2, #f6f6f6);
}
.cs-item-display--done .cs-item-display__icon[b-rv0xg08o6n],
.cs-item-display--done .cs-item-display__avatar[b-rv0xg08o6n] {
    opacity: 0.85;
}
/* /Components/ItemEditor.razor.rz.scp.css */
/* ItemEditor — orchestrator for the item create flow. Sections
   stack vertically with consistent rhythm; capability sub-forms
   appear in a stable order so the layout doesn't jump as the user
   picks different types.

   The dialog wrapper provides the modal frame; this component owns
   only the form body + bottom actions row. */

.cs-item-editor[b-uvfu2uid1r] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-item-editor__alert[b-uvfu2uid1r] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--control-corner-radius, 6px);
    background: color-mix(in srgb, var(--error, #b3261e) 12%, var(--neutral-layer-1));
    color: var(--neutral-foreground-rest);
    border: 1px solid color-mix(in srgb, var(--error, #b3261e) 40%, transparent);
}

.cs-item-editor__section[b-uvfu2uid1r] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cs-item-editor__section-heading[b-uvfu2uid1r] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

/* "Selected type" row — replaces the picker once a type is chosen so
   the rest of the form has space. The Change button is Stealth so it
   reads as an undo affordance, not a competing primary action. */
.cs-item-editor__type-chosen[b-uvfu2uid1r] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
}

.cs-item-editor__type-icon[b-uvfu2uid1r] {
    color: var(--accent-foreground-rest);
    flex: 0 0 auto;
}

.cs-item-editor__type-meta[b-uvfu2uid1r] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cs-item-editor__type-meta > span[b-uvfu2uid1r] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.cs-item-editor__field-error[b-uvfu2uid1r] {
    margin: 0;
    color: var(--error, #b3261e);
    font-size: 0.9375rem;
}

/* Sharing radios — each radio has a strong primary line + a quieter
   description so users understand what each mode means without a
   separate help icon. The hint span sits next to the strong on the
   same line wrap-permitting; on narrow viewports it stacks below. */
.cs-item-editor__radio-hint[b-uvfu2uid1r] {
    display: block;
    margin-block-start: 0.125rem;
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Bottom action bar — Cancel left, Create right. Sticky-feel via
   margin-top: auto isn't needed because the dialog body scrolls
   vertically when content exceeds the viewport. */
.cs-item-editor__actions[b-uvfu2uid1r] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-block-start: 0.5rem;
    padding-block-start: 0.875rem;
    border-block-start: 1px solid var(--neutral-stroke-divider-rest);
}
/* /Components/ItemTypePicker.razor.rz.scp.css */
/* Item type picker — clustered tile grid for choosing from the seeded
   ItemTypes. Tiles are clickable surfaces with a clear selected state
   and a quiet disabled state for capabilities not yet supported (the
   attachment cluster, deferred to spec 009). Layout adapts: 3 cols
   wide-desktop, 2 cols comfortable-desktop, 1 col mobile. */

.cs-itp[b-07185mhn5v] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-itp__loading[b-07185mhn5v],
.cs-itp__error[b-07185mhn5v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--neutral-foreground-hint);
}

.cs-itp__empty[b-07185mhn5v] {
    margin: 0;
    color: var(--neutral-foreground-hint);
}

/* Cluster heading — typography-driven emphasis so the user can scan
   the type categories at a glance. Uppercase + tracking is preserved
   for the "section label" feel; weight + size + full-foreground
   color elevate it without leaning on a secondary accent (kept the
   palette restrained per the calm/anti-dark-pattern brand voice). */
.cs-itp__group-heading[b-07185mhn5v] {
    margin: 0 0 0.625rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-rest);
}
/* A bit more breathing room between groups so the category boundaries
   read clearly even before the user processes the heading text. */
.cs-itp__group[b-07185mhn5v] {
    margin-bottom: 1.25rem;
}

.cs-itp__tiles[b-07185mhn5v] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Tile — a button that visually reads like a card. We use <button>
   rather than <div role="button"> so keyboard activation, focus, and
   disabled state come for free from the platform. */
.cs-itp__tile[b-07185mhn5v] {
    /* Strip default button chrome; we restyle from scratch. */
    appearance: none;
    -webkit-appearance: none;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    padding: 0.875rem 1rem;
    text-align: start;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.cs-itp__tile:hover[b-07185mhn5v] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-1px);
    box-shadow: var(--elevation-shadow-card-rest, 0 1px 4px rgba(0,0,0,0.08));
}

.cs-itp__tile:focus-visible[b-07185mhn5v] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Selected — accent border + faint accent tint so it reads as the
   committed choice without shouting. Keep the change subtle so the
   non-selected tiles remain readable as siblings. */
.cs-itp__tile--selected[b-07185mhn5v] {
    border-color: var(--accent-fill-rest);
    border-width: 2px;
    /* Compensate the extra border so the tile size doesn't shift. */
    padding: calc(0.875rem - 1px) calc(1rem - 1px);
    background: color-mix(in srgb, var(--accent-fill-rest) 6%, var(--neutral-layer-1));
}

/* Disabled — quiet the tile, kill hover affordance, set the
   "not-allowed" cursor. The tooltip on the element explains why. */
.cs-itp__tile--disabled[b-07185mhn5v] {
    cursor: not-allowed;
    opacity: 0.55;
}

.cs-itp__tile--disabled:hover[b-07185mhn5v] {
    transform: none;
    box-shadow: none;
    border-color: var(--neutral-stroke-divider-rest);
}

/* prefers-reduced-motion: drop the hover lift entirely. The border /
   color cues still communicate state. */
@media (prefers-reduced-motion: reduce) {
    .cs-itp__tile[b-07185mhn5v] {
        transition: none;
    }
    .cs-itp__tile:hover[b-07185mhn5v] {
        transform: none;
    }
}

.cs-itp__tile-head[b-07185mhn5v] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cs-itp__tile-icon[b-07185mhn5v] {
    color: var(--accent-foreground-rest);
    flex: 0 0 auto;
}

.cs-itp__tile-name[b-07185mhn5v] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Description uses the secondary reading ramp — it's prose meant to
   help the user choose, not chrome label. */
.cs-itp__tile-desc[b-07185mhn5v] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
    line-height: 1.4;
}
/* /Components/Markdown/MarkdownBody.razor.rz.scp.css */
/* MarkdownBody — textarea + Edit/Preview tab pair for markdown
   body fields. Brand-values lean (calm + clear, Obsidian / iA
   Writer): the source view is the default; the Preview tab is
   one click away but not in your face. Monospace inside the
   textarea so markdown source renders the way the author types
   it. The help line below sits at neutral-foreground-hint so it
   doesn't compete for attention. */

.cs-markdown-body[b-ld512xagdf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Pull the FluentTabs container in tight against the textarea
   below it; the default Fluent tab bar leaves a gap that looks
   detached from the input. */
.cs-markdown-body__tabs[b-ld512xagdf] {
    --tab-padding-inline: 0.75rem;
}

.cs-markdown-body__textarea[b-ld512xagdf] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    /* iA Writer-style: a clean monospace inside the source view
       so markdown syntax is unambiguous. System monospace stack
       avoids shipping a webfont and respects user preferences. */
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 8rem;
}

.cs-markdown-body__textarea:focus-visible[b-ld512xagdf] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    border-color: transparent;
}

.cs-markdown-body__textarea:disabled[b-ld512xagdf] {
    background: var(--neutral-fill-input-disabled);
    color: var(--neutral-foreground-disabled);
    cursor: not-allowed;
}

.cs-markdown-body__preview[b-ld512xagdf] {
    min-height: 8rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    /* Match the reading rhythm a Post / Note view will use so
       Preview WYSIWYG matches the eventual rendered surface. */
    font-size: 0.9375rem;
    line-height: 1.55;
}

.cs-markdown-body__preview > :first-child[b-ld512xagdf] {
    margin-top: 0;
}

.cs-markdown-body__preview > :last-child[b-ld512xagdf] {
    margin-bottom: 0;
}

/* Loading / error / empty states inside Preview share a calm,
   centered visual so they don't feel like errors when they're
   not. */
.cs-markdown-body__preview-loading[b-ld512xagdf],
.cs-markdown-body__preview-empty[b-ld512xagdf] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.cs-markdown-body__preview-error[b-ld512xagdf] {
    margin: 0;
    color: color-mix(in srgb, var(--error, #b3261e) 80%, var(--neutral-foreground-rest));
}

.cs-markdown-body__help[b-ld512xagdf] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
}

.cs-markdown-body__help code[b-ld512xagdf],
.cs-markdown-body__help kbd[b-ld512xagdf] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
    padding: 0.0625rem 0.25rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 3px;
    background: var(--neutral-layer-2);
}
/* /Components/Markdown/MarkdownText.razor.rz.scp.css */
/* Spec 012 smoke-pass polish — typographic defaults for the
   sanitized HTML that MarkdownText emits via MarkupString.
   The component's outer <div> is whatever the caller passed
   in CssClass (cs-page-subtitle on ItemCard read-mode,
   cs-post-detail__text on PostDetail, etc.) — we don't own
   that class. ::deep selectors target the rendered children
   regardless of the wrapper class.

   Surfaced during the spec 012 manual smoke pass: a wrapped
   <h1> in a Note's body rendered with no line-height between
   lines, so two-line headings ran into each other. The fix is
   sensible line-height + a touch of vertical rhythm so dense
   markdown (heading → paragraph → list) breathes correctly. */

[b-8linn4e1b0] h1,
[b-8linn4e1b0] h2,
[b-8linn4e1b0] h3,
[b-8linn4e1b0] h4,
[b-8linn4e1b0] h5,
[b-8linn4e1b0] h6 {
    line-height: 1.25;
    margin: 0.75em 0 0.4em;
}

[b-8linn4e1b0] h1:first-child,
[b-8linn4e1b0] h2:first-child,
[b-8linn4e1b0] h3:first-child,
[b-8linn4e1b0] h4:first-child,
[b-8linn4e1b0] h5:first-child,
[b-8linn4e1b0] h6:first-child {
    margin-top: 0;
}

[b-8linn4e1b0] p {
    margin: 0 0 0.6em;
    line-height: 1.5;
}

[b-8linn4e1b0] p:last-child {
    margin-bottom: 0;
}

[b-8linn4e1b0] ul,
[b-8linn4e1b0] ol {
    margin: 0 0 0.6em;
    padding-left: 1.4em;
}

[b-8linn4e1b0] li {
    line-height: 1.5;
    margin: 0.15em 0;
}

[b-8linn4e1b0] blockquote {
    margin: 0.5em 0;
    padding-left: 0.75em;
    border-left: 3px solid var(--neutral-stroke-divider-rest, #ebebeb);
    color: var(--neutral-foreground-hint, #6e6e6e);
}

[b-8linn4e1b0] pre {
    margin: 0.6em 0;
    padding: 0.6em 0.75em;
    background: var(--neutral-layer-2, #f6f6f6);
    border-radius: var(--control-corner-radius, 6px);
    overflow-x: auto;
    line-height: 1.45;
}

[b-8linn4e1b0] code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92em;
}

[b-8linn4e1b0] pre code {
    background: transparent;
    padding: 0;
}
/* /Components/PeoplePicker.razor.rz.scp.css */
/* Spec 005 / FR-024 — PeoplePicker styling.
   Renders accepted-mutual peers as bordered list rows with avatar +
   display name + @handle, with a selected state and hover affordance. */

.cs-people-picker[b-d417nam35i] {
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-3, 0.75rem);
}

.cs-people-picker__filter[b-d417nam35i] {
    width: 100%;
}

.cs-people-picker__status[b-d417nam35i] {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
}

.cs-people-picker__list[b-d417nam35i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-1, 0.25rem);
    max-height: 18rem;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    padding: var(--cs-spacing-1, 0.25rem);
    background: var(--neutral-layer-1, #ffffff);
    box-sizing: border-box;
    width: 100%;
}

.cs-people-picker__row[b-d417nam35i] {
    margin: 0;
    padding: 0;
}

.cs-people-picker__btn[b-d417nam35i] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--cs-spacing-3, 0.75rem);
    padding: var(--cs-spacing-2, 0.5rem) var(--cs-spacing-3, 0.75rem);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--control-corner-radius, 4px);
    color: var(--neutral-foreground-rest, inherit);
    text-align: left;
    min-width: 0;
    box-sizing: border-box;
}

.cs-people-picker__avatar[b-d417nam35i] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-fill-rest, #0078d4);
    color: var(--accent-foreground-rest, #ffffff);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    user-select: none;
}

.cs-people-picker__text[b-d417nam35i] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.cs-people-picker__display[b-d417nam35i] {
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-people-picker__handle[b-d417nam35i] {
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-people-picker__check[b-d417nam35i] {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Per-row permission select — the canonical permission palette per
   docs/design-system.md §2. Light-mode fg/bg/border come from the shared
   --cs-permission-{level}-{fg,bg,border} tokens in app.css (same fg hexes
   that back .cs-sharing-pill--{view,edit,manage} on the neutral page
   surface — the light unification holds end-to-end).

   Dark mode breaks the fg unification on purpose. The canonical dark fg
   is the -400 step (used by sharing-pill on a flat page bg, where it
   pops). Here the chip surface is a tinted rgba overlay, which lifts the
   effective bg luminance ~1 step — that knocks -400 fg under 4.5:1 on
   the violet/orange chips. Step the chip dark fg up to -300 and restore
   the original rgba opacities (.20-.22 fill, .50 border) so the chip
   reads cleanly. The light unification is unaffected.
     None   → neutral grey  (deliberately quiet — "off / unset")
     View   → cool blue     (passive, read-only)
     Edit   → warm orange   (active, modifying)
     Manage → violet        (administrative, distinct from any accent) */
.cs-grant-select[b-d417nam35i] {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 6.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--control-corner-radius, 4px);
    border: 1px solid currentColor;
    background: transparent;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.2;
    cursor: pointer;
}

    .cs-grant-select:focus-visible[b-d417nam35i] {
        outline: 2px solid currentColor;
        outline-offset: 1px;
    }

    .cs-grant-select option[b-d417nam35i] {
        color: var(--neutral-foreground-rest, #1f1f1f);
        background: var(--neutral-layer-1, #ffffff);
    }

.cs-grant-select--none[b-d417nam35i] {
    color: var(--cs-permission-none-fg);
    background: var(--cs-permission-none-bg);
    border-color: var(--cs-permission-none-border);
}

.cs-grant-select--read[b-d417nam35i],
.cs-grant-select--view[b-d417nam35i] {
    color: var(--cs-permission-view-fg);
    background: var(--cs-permission-view-bg);
    border-color: var(--cs-permission-view-border);
}

.cs-grant-select--edit[b-d417nam35i] {
    color: var(--cs-permission-edit-fg);
    background: var(--cs-permission-edit-bg);
    border-color: var(--cs-permission-edit-border);
}

.cs-grant-select--manage[b-d417nam35i] {
    color: var(--cs-permission-manage-fg);
    background: var(--cs-permission-manage-bg);
    border-color: var(--cs-permission-manage-border);
}

/* Dark-mode chip overrides (see header comment). Light tokens are
   inherited as-is; dark mode swaps fg → -300 and restores stronger
   rgba opacities so contrast ≥4.5:1 on the tinted chip. Selector
   pattern mirrors the sharing-pill dark/OS-fallback double-source in
   app.css — explicit attribute first, prefers-color-scheme fallback
   for the gap before ClientThemeService writes the attribute. */
[data-theme="dark"] .cs-grant-select--read[b-d417nam35i],
[data-theme="dark"] .cs-grant-select--view[b-d417nam35i] {
    color: #93c5fd; /* blue-300  */
    background: rgba( 59, 130, 246, 0.20);
    border-color: rgba( 59, 130, 246, 0.50);
}
[data-theme="dark"] .cs-grant-select--edit[b-d417nam35i] {
    color: #fdba74; /* orange-300 */
    background: rgba(249, 115,  22, 0.22);
    border-color: rgba(249, 115,  22, 0.50);
}
[data-theme="dark"] .cs-grant-select--manage[b-d417nam35i] {
    color: #c4b5fd; /* violet-300 */
    background: rgba(139,  92, 246, 0.22);
    border-color: rgba(139,  92, 246, 0.50);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cs-grant-select--read[b-d417nam35i],
    :root:not([data-theme="light"]) .cs-grant-select--view[b-d417nam35i] {
        color: #93c5fd;
        background: rgba( 59, 130, 246, 0.20);
        border-color: rgba( 59, 130, 246, 0.50);
    }
    :root:not([data-theme="light"]) .cs-grant-select--edit[b-d417nam35i] {
        color: #fdba74;
        background: rgba(249, 115,  22, 0.22);
        border-color: rgba(249, 115,  22, 0.50);
    }
    :root:not([data-theme="light"]) .cs-grant-select--manage[b-d417nam35i] {
        color: #c4b5fd;
        background: rgba(139,  92, 246, 0.22);
        border-color: rgba(139,  92, 246, 0.50);
    }
}

.cs-empty[b-d417nam35i] {
    margin: 0;
    padding: var(--cs-spacing-4, 1rem);
    border: 1px dashed var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    text-align: center;
}

.cs-empty__title[b-d417nam35i] {
    font-weight: 600;
    margin: 0 0 var(--cs-spacing-1, 0.25rem) 0;
}

.cs-empty__hint[b-d417nam35i] {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
}
/* /Components/ShareDialog.razor.rz.scp.css */
/* `.cs-share-dialog__status` styling moved to app.css so both ShareDialog
   AND SharingPanel (which reuses the class but isn't inside ShareDialog)
   pick it up — scoped CSS is keyed to the component file, so the class
   match was a coincidence the previous version relied on. */

/* Sharing-mode selector sits above the tabs. The selector is full-width
   so the long option labels (e.g. "Public — anyone signed in can view")
   don't get truncated, and the hint sits directly underneath in a muted
   tone so the paradigm explanation is unmissable but doesn't fight with
   the tabbed content for visual weight. */
.cs-share-dialog__mode[b-l2jou9cvvb] {
    margin: 0 var(--cs-spacing-4, 1rem) var(--cs-spacing-3, 0.75rem) var(--cs-spacing-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-1, 0.25rem);
}

    .cs-share-dialog__mode[b-l2jou9cvvb]  fluent-select {
        width: 100%;
    }

.cs-share-dialog__mode-hint[b-l2jou9cvvb] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cs-color-text-muted, #666);
}

/* Shown inside Invite tab when the current mode is Private — explains
   why the issue/redeem affordances are hidden rather than just appearing
   broken. */
.cs-share-dialog__disabled-note[b-l2jou9cvvb] {
    margin: 0;
    padding: var(--cs-spacing-3, 0.75rem);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--cs-color-text-muted, #555);
    font-size: 0.9rem;
}
/* /Components/SummaryCard.razor.rz.scp.css */
.cs-summary-card[b-3t8k3jf7fa] {
    cursor: pointer;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 160px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.cs-summary-card:hover[b-3t8k3jf7fa],
.cs-summary-card:focus-visible[b-3t8k3jf7fa] {
    transform: translateY(-2px);
    box-shadow: var(--elevation-shadow-card-rest, 0 2px 8px rgba(0,0,0,0.12));
}
.cs-summary-card__head[b-3t8k3jf7fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cs-summary-card__icon[b-3t8k3jf7fa] {
    color: var(--accent-fill-rest, #0f6cbd);
}
.cs-summary-card__title[b-3t8k3jf7fa] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.cs-summary-card__subtitle[b-3t8k3jf7fa] {
    margin: 0;
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-size: 0.85rem;
}
.cs-summary-card__body[b-3t8k3jf7fa] {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
}
.cs-summary-card__body ul[b-3t8k3jf7fa] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cs-summary-card__body li[b-3t8k3jf7fa] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    line-height: 1.3;
}
.cs-summary-card__body li .cs-summary-card__hint[b-3t8k3jf7fa] {
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.cs-summary-card__cta[b-3t8k3jf7fa] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent-fill-rest, #0f6cbd);
    font-size: 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
    .cs-summary-card[b-3t8k3jf7fa],
    .cs-summary-card:hover[b-3t8k3jf7fa],
    .cs-summary-card:focus-visible[b-3t8k3jf7fa] {
        transform: none;
        transition: none;
    }
}
/* /Pages/Cabinets.razor.rz.scp.css */
.cs-list[b-4k6u809vwf] {
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-2, 0.5rem);
    margin-top: var(--cs-spacing-4, 1rem);
}

/* T051: page header with right-aligned "New cabinet" affordance. */
.cs-page-header[b-4k6u809vwf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cs-spacing-4, 1rem);
}

/* T051: row wrapper hosts the navigable link and the action group side-by-side
   so the action buttons sit OUTSIDE the anchor (clicks don't navigate). */
.cs-list__row-wrapper[b-4k6u809vwf] {
    display: flex;
    align-items: stretch;
    gap: var(--cs-spacing-2, 0.5rem);
    border-radius: var(--control-corner-radius, 4px);
}

.cs-list__row-wrapper > .cs-list__row[b-4k6u809vwf] {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-list__actions[b-4k6u809vwf] {
    display: flex;
    align-items: center;
    gap: var(--cs-spacing-1, 0.25rem);
    flex: 0 0 auto;
}

/* T051: dialog and action error messaging. */
.cs-dialog-error[b-4k6u809vwf],
.cs-action-error[b-4k6u809vwf] {
    color: var(--error-foreground-rest, #b00020);
    margin-top: var(--cs-spacing-2, 0.5rem);
}

/* T046: navigable rows in the real-data view. Guest-tour rows render the
   ItemDisplay directly (non-navigable) so this rule never applies there. */
.cs-list__row[b-4k6u809vwf] {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--control-corner-radius, 4px);
}

.cs-list__row:hover[b-4k6u809vwf],
.cs-list__row:focus-visible[b-4k6u809vwf] {
    background: var(--neutral-fill-secondary-rest, #fafafa);
    outline: none;
}

.cs-empty[b-4k6u809vwf] {
    margin-top: var(--cs-spacing-6, 1.5rem);
    padding: var(--cs-spacing-6, 1.5rem);
    border: 1px dashed var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    text-align: center;
}

.cs-empty__title[b-4k6u809vwf] {
    font-weight: 600;
    margin: 0 0 var(--cs-spacing-1, 0.25rem) 0;
}

.cs-empty__hint[b-4k6u809vwf] {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
}

.cs-error[b-4k6u809vwf] {
    margin-top: var(--cs-spacing-4, 1rem);
    padding: var(--cs-spacing-4, 1rem);
    border-left: 3px solid var(--accent-fill-rest, #0078d4);
    background: var(--neutral-fill-secondary-rest, #fafafa);
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-3, 0.75rem);
    align-items: flex-start;
}

.cs-error__message[b-4k6u809vwf] {
    margin: 0;
}
/* /Pages/Dev/CapabilityEditorsPreview.razor.rz.scp.css */
.cs-cap-preview[b-t69u6ekepq] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    align-items: start;
}

.cs-cap-preview__editor[b-t69u6ekepq] {
    padding: 1.25rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-cap-preview__editor > h2[b-t69u6ekepq] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.cs-cap-preview__editor > h2 > small[b-t69u6ekepq] {
    margin-inline-start: 0.5rem;
    color: var(--neutral-foreground-hint);
    font-size: 0.8125rem;
    font-weight: 400;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.cs-cap-preview__state[b-t69u6ekepq] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Pages/Dev/ItemTypePickerPreview.razor.rz.scp.css */
.cs-itp-preview[b-b2an9f036z] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-itp-preview__controls[b-b2an9f036z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-1);
}

.cs-itp-preview__hint[b-b2an9f036z] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
}
/* /Pages/People.razor.rz.scp.css */
/* People page — responsive grid/cards toggle.
 *
 * Wide screens (≥ 720px) keep the FluentDataGrid; narrow screens swap to
 * a vertical card list so the per-row Actions don't get clipped on phones.
 */

.cs-grid-only[b-3b756luq06] {
    display: block;
}

.cs-cards-only[b-3b756luq06] {
    display: none;
}

@media (max-width: 719px) {
    .cs-grid-only[b-3b756luq06] {
        display: none;
    }

    .cs-cards-only[b-3b756luq06] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

.cs-card-list[b-3b756luq06] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-row-card[b-3b756luq06] {
    width: 100%;
}

.cs-row-card[b-3b756luq06]  .fluent-card,
.cs-row-card[b-3b756luq06]  fluent-card {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
}

.cs-row-card__head[b-3b756luq06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.cs-row-card__title[b-3b756luq06] {
    font-weight: 600;
    text-transform: capitalize;
}

.cs-row-card__meta[b-3b756luq06] {
    font-size: var(--type-ramp-minus-1-font-size, 0.85rem);
    color: var(--neutral-foreground-hint, #6b6b6b);
    margin-bottom: 8px;
    line-height: 1.4;
}

.cs-row-card__actions[b-3b756luq06] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Make buttons stretch to full width on the smallest screens so they're
 * easy to tap. */
@media (max-width: 419px) {
    .cs-row-card__actions[b-3b756luq06] {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-row-card__actions[b-3b756luq06]  fluent-button {
        width: 100%;
    }
}

/* Spec 005 � make the People-page tabs read as interactive controls instead
 * of plain headings: subtle pill background on hover, prominent active
 * underline + bold label, and a thin baseline separating the tab strip from
 * tab-pane content.  Selectors use ::deep so they pierce FluentTabs' shadow
 * boundary. */
.cs-people-tabs[b-3b756luq06] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, rgba(0,0,0,0.08));
    margin-bottom: 12px;
}

.cs-people-tabs[b-3b756luq06]  fluent-tab,
.cs-people-tabs[b-3b756luq06]  [role="tab"] {
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    color: var(--neutral-foreground-rest);
}

.cs-people-tabs[b-3b756luq06]  fluent-tab:hover,
.cs-people-tabs[b-3b756luq06]  [role="tab"]:hover {
    background-color: var(--neutral-fill-stealth-hover, rgba(0,0,0,0.04));
    color: var(--neutral-foreground-rest);
}

.cs-people-tabs[b-3b756luq06]  fluent-tab[aria-selected="true"],
.cs-people-tabs[b-3b756luq06]  [role="tab"][aria-selected="true"] {
    font-weight: 600;
    color: var(--accent-foreground-rest);
    border-bottom: 3px solid var(--accent-fill-rest);
    background-color: var(--neutral-fill-stealth-rest, transparent);
}

.cs-people-tabs[b-3b756luq06]  fluent-tab:focus-visible,
.cs-people-tabs[b-3b756luq06]  [role="tab"]:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}
/* /Pages/Start.razor.rz.scp.css */
.cs-start[b-vts68em370] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: 100dvh;
    padding: 2rem 1rem;
    background: var(--neutral-layer-1);
    text-align: center;
}

.cs-start__hero[b-vts68em370] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 32rem;
}

.cs-start__logo[b-vts68em370] {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.cs-start__brand[b-vts68em370] {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.cs-start__tagline[b-vts68em370] {
    font-size: 1.1rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.cs-start__actions[b-vts68em370] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

/* Spec 004 / T039 — Try-It is a real <form> POST so we cannot use a
   <FluentAnchor>. Style the bare <button> to match the neutral Fluent
   pill alongside Log In / Register. */
.cs-start__try-it-form[b-vts68em370] {
    margin: 0;
}
.cs-start__try-it[b-vts68em370] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--type-ramp-base-font-size, 0.875rem);
    font-weight: 600;
    line-height: 1;
    padding: 0.5rem 1.25rem;
    min-height: 2.25rem;
    border-radius: var(--control-corner-radius, 4px);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-rest, #1a1a1a);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.cs-start__try-it:hover[b-vts68em370] {
    background: var(--neutral-fill-hover, #ebebeb);
    border-color: var(--neutral-stroke-hover, #b8b8b8);
}
.cs-start__try-it:active[b-vts68em370] {
    background: var(--neutral-fill-active, #e0e0e0);
}
.cs-start__try-it:focus-visible[b-vts68em370] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: 2px;
}

.cs-start__note[b-vts68em370] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
}