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

/* /Components/AiAssistSwitch.razor.rz.scp.css */
/* Spec 084 — AI Assistant toggle component. The control row puts the
   FluentSwitch and the dynamic state label on one line, with the label
   to the right of the toggle (Brett ask 2026-06-06: the prior static
   "AI Assistant enabled" label appeared regardless of switch state,
   creating a tension between the text and the visual). */

.cs-ai-switch__control[b-jpxb3kd2sd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 0;
}

.cs-ai-switch__state[b-jpxb3kd2sd] {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest, inherit);
}
/* /Components/AiTransparencyButton.razor.rz.scp.css */
/* Spec 098 — text-AI extension. Entity chips render as inline blocks
   with the kind label as a small badge. Reuses the existing brand
   palette without inventing new tokens. */

.cs-ai-transparency__entities[b-xxvolb48i2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cs-ai-transparency__entity-chip[b-xxvolb48i2] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.15));
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.025));
    font-size: 0.9rem;
    line-height: 1.4;
}

.cs-ai-transparency__entity-kind[b-xxvolb48i2] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, rgba(0, 0, 0, 0.5));
    text-transform: lowercase;
}

.cs-ai-transparency__ocr[b-xxvolb48i2] {
    white-space: pre-wrap;
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.025));
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
}
/* /Components/AssociationsDrawer.razor.rz.scp.css */
/* Spec 103 D4 / D13 — typed-edge association drawer. Drawer-style
   panel on the per-item card; renders a list of natural-language
   association rows + an inline add affordance with a search-as-you-
   type candidate picker. */

.cs-associations[b-yvxu0l2ceq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.cs-associations__head[b-yvxu0l2ceq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cs-associations__title[b-yvxu0l2ceq] {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
}

.cs-associations__hint[b-yvxu0l2ceq] {
    margin: 0;
    color: var(--neutral-foreground-hint, #777);
    font-size: 0.9em;
}

.cs-associations__list[b-yvxu0l2ceq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cs-associations__item[b-yvxu0l2ceq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #fafafa);
}

.cs-associations__phrase[b-yvxu0l2ceq] {
    line-height: 1.3;
}

.cs-associations__meta[b-yvxu0l2ceq] {
    color: var(--neutral-foreground-hint, #777);
    font-style: italic;
}

.cs-associations__target[b-yvxu0l2ceq] {
    color: var(--accent-foreground-rest, #c47900);
    text-decoration: none;
    font-weight: 500;
}

.cs-associations__target:hover[b-yvxu0l2ceq] {
    text-decoration: underline;
}

.cs-associations__remove[b-yvxu0l2ceq] {
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    background: transparent;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    color: var(--neutral-foreground-hint, #666);
    font-size: 0.85em;
    line-height: 1.2;
}

.cs-associations__remove:hover[b-yvxu0l2ceq] {
    color: var(--error-text-rest, #b00020);
    border-color: var(--error-text-rest, #b00020);
}

.cs-associations__remove-confirm[b-yvxu0l2ceq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85em;
}

.cs-associations__remove-prompt[b-yvxu0l2ceq] {
    color: var(--neutral-foreground-rest, #333);
}

.cs-associations__confirm-yes[b-yvxu0l2ceq],
.cs-associations__confirm-no[b-yvxu0l2ceq] {
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    background: transparent;
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    line-height: 1.2;
}

.cs-associations__confirm-yes[b-yvxu0l2ceq] {
    color: var(--error-text-rest, #b00020);
    border-color: var(--error-text-rest, #b00020);
}

.cs-associations__confirm-yes:hover[b-yvxu0l2ceq] {
    background: var(--error-text-rest, #b00020);
    color: #fff;
}

.cs-associations__confirm-no[b-yvxu0l2ceq] {
    color: var(--neutral-foreground-rest, #333);
}

.cs-associations__confirm-no:hover[b-yvxu0l2ceq] {
    background: var(--neutral-fill-hover, #f0f0f0);
}

.cs-associations__add[b-yvxu0l2ceq] {
    align-self: flex-start;
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    background: transparent;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    color: var(--neutral-foreground-rest, #333);
}

.cs-associations__add-panel[b-yvxu0l2ceq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--neutral-stroke-rest, #ddd);
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest, #fafafa);
}

.cs-associations__add-row[b-yvxu0l2ceq] {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.4rem;
    align-items: center;
}

.cs-associations__add-row label[b-yvxu0l2ceq] {
    color: var(--neutral-foreground-hint, #555);
    font-size: 0.9em;
}

.cs-associations__candidates[b-yvxu0l2ceq] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest, #ddd);
    border-radius: 4px;
}

.cs-associations__candidate[b-yvxu0l2ceq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.cs-associations__candidate:hover[b-yvxu0l2ceq] {
    background: var(--neutral-fill-hover, #f0f0f0);
}

.cs-associations__candidate--selected[b-yvxu0l2ceq] {
    background: var(--accent-fill-rest, #c47900);
    color: var(--accent-foreground-rest, #fff);
}

.cs-associations__candidate-kind[b-yvxu0l2ceq] {
    color: var(--neutral-foreground-hint, #777);
    font-size: 0.85em;
}

.cs-associations__add-actions[b-yvxu0l2ceq] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.cs-associations__error[b-yvxu0l2ceq] {
    color: var(--error-text-rest, #b00020);
    font-size: 0.9em;
    margin: 0;
}
/* /Components/Attachments/AttachmentList.razor.rz.scp.css */
/* Spec 033 / Phase 2 / T022 — scoped tile styling. The grid container
   itself (`.cs-media-grid`) is styled globally in app.css (spec 027)
   — this file only adds attachment-specific bits: extra top margin to
   separate the listing from the uploader above (D2), and the
   icon-tile centering for non-media items. */

.cs-attachment-list[b-fdzc4l6pem] {
    /* Breathing room between the uploader (above) and the listing
       (below). D2 says the uploader stays the primary CTA; this gap
       makes the visual separation read as intentional rhythm rather
       than crowding. */
    margin-top: 2rem;
}

/* Icon tiles (non-media: PDF, file) reuse the cs-media-grid__poster
   square shape but render a centered icon instead of a thumbnail
   image. */
[b-fdzc4l6pem] .cs-attachment-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

[b-fdzc4l6pem] .cs-attachment-list__icon svg {
    width: 40%;
    height: 40%;
    /* Inherit the muted foreground color from the parent so the icon
       sits quietly against the tile background rather than
       competing with the filename caption below. */
}

/* Spec 033 / Phase 3 / T030 — per-tile delete button. Wrapper is
   `position: relative` so the button can anchor top-right of the
   tile's square. Hover-reveal on desktop (opacity 0 → 1 on
   wrapper hover); always-visible on mobile (`@media (hover: none)`
   forces opacity 1). Focus-visible also reveals so keyboard users
   can reach the button without a hover state. */
.cs-attachment-list__tile-wrapper[b-fdzc4l6pem] {
    position: relative;
}

/* Spec 034 P2 (T021) — image tiles are now <button>s (they open the
   lightbox in-place instead of drilling through to /items/{id}). The
   global cs-media-grid__tile styling is anchor-shaped, so we strip
   the default button chrome here and let the tile inherit the same
   grid-cell shape. Same focus-visible + hover behavior as the anchor
   tiles.

   Spec 084 polish (Brett 2026-05-31, followup 2026-05-31): the padding
   value MUST match `.cs-attachment-list .cs-media-grid__tile` in
   app.css. The earlier draft of this rule used `padding: 0` to strip
   default button chrome — but because Blazor scoped CSS adds a
   `[b-xxx]` attribute that bumps specificity, that `padding: 0` BEAT
   the unscoped app.css `padding: 2.5rem 0.75rem 1rem` rule meant to
   reserve a header band for the absolutely-positioned edit / delete /
   sparkle chips. Symptom was invisible on desktop (chips are
   opacity:0 default) but obvious on mobile (chips always visible per
   the @media (max-width: 640px) override below). Image tiles render
   with BOTH `cs-media-grid__tile` AND `cs-attachment-list__photo-tile`;
   so this rule has to carry the same padding to keep the cascade
   consistent. */
.cs-attachment-list__photo-tile[b-fdzc4l6pem] {
    appearance: none;
    background: none;
    border: 0;
    padding: 2.5rem 0.75rem 1rem;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    /* Same outline behavior the <a> tiles already get via the global
       cs-media-grid__tile rule — explicit here because the <button>
       default differs. */
    outline-offset: 2px;
}

.cs-attachment-list__photo-tile:focus-visible[b-fdzc4l6pem] {
    outline: 2px solid var(--accent-fill-rest);
}

/* Spec 073 — shared base for the per-tile owner action chips (edit +
   delete). Same circular dark chip, hover-revealed. Each sets its own
   `right` below so they sit side-by-side in the top-right corner. */
.cs-attachment-list__add-to-set-btn[b-fdzc4l6pem],
.cs-attachment-list__edit-btn[b-fdzc4l6pem],
.cs-attachment-list__delete-btn[b-fdzc4l6pem],
.cs-attachment-list__sparkle-btn[b-fdzc4l6pem] {
    position: absolute;
    top: 0.375rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* More opaque than the original 0.55 — on bright photo tiles in
       light theme the trash icon was washing out. 0.7 keeps it
       legible against any poster tone without reading as a heavy
       solid blob. */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease;
    text-decoration: none; /* edit chip is an <a> */
}
.cs-attachment-list__delete-btn[b-fdzc4l6pem] {
    right: 0.375rem;
}
/* Edit sits just left of delete (28px chip + a small gap). */
.cs-attachment-list__edit-btn[b-fdzc4l6pem] {
    right: 2.75rem;
}
/* Spec 086 D7 polish (Brett 2026-05-31) — Add-to-Set sits one slot
   LEFT of edit, BETWEEN the sparkle-chip slot (right: 5.125rem) and
   the edit-chip slot (right: 2.75rem). Row right-to-left now reads:
   delete · edit · add-to-set · sparkle. Same chip cadence + hover-
   reveal as the others. */
.cs-attachment-list__add-to-set-btn[b-fdzc4l6pem] {
    right: 5.125rem;
}
/* Sparkle (AI transparency) — leftmost of the four chips. The chip
   render moved out of <AiTransparencyButton> on 2026-06-04 so the
   chip styling lives in the same scope as its siblings (edit, delete,
   add-to-set) instead of crossing a component boundary. */
.cs-attachment-list__sparkle-btn[b-fdzc4l6pem] {
    right: 7.5rem;
}

.cs-attachment-list__tile-wrapper:hover .cs-attachment-list__add-to-set-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:hover .cs-attachment-list__edit-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:hover .cs-attachment-list__delete-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:hover .cs-attachment-list__sparkle-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:focus-within .cs-attachment-list__add-to-set-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:focus-within .cs-attachment-list__edit-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:focus-within .cs-attachment-list__delete-btn[b-fdzc4l6pem],
.cs-attachment-list__tile-wrapper:focus-within .cs-attachment-list__sparkle-btn[b-fdzc4l6pem] {
    opacity: 1;
}

.cs-attachment-list__add-to-set-btn:hover[b-fdzc4l6pem],
.cs-attachment-list__edit-btn:hover[b-fdzc4l6pem],
.cs-attachment-list__delete-btn:hover[b-fdzc4l6pem],
.cs-attachment-list__sparkle-btn:hover[b-fdzc4l6pem] {
    background: rgba(0, 0, 0, 0.85);
}

.cs-attachment-list__add-to-set-btn:focus-visible[b-fdzc4l6pem],
.cs-attachment-list__edit-btn:focus-visible[b-fdzc4l6pem],
.cs-attachment-list__delete-btn:focus-visible[b-fdzc4l6pem],
.cs-attachment-list__sparkle-btn:focus-visible[b-fdzc4l6pem] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    opacity: 1;
}

@media (hover: none), (max-width: 640px) {
    /* Touch devices AND narrow viewports: keep the button always
       visible since hover doesn't fire reliably on touch and is
       awkward to discover at narrow widths. The width breakpoint
       (640px) matches `cs-media-grid`'s desktop→mobile boundary so
       both transitions happen together. DevTools mobile simulator
       doesn't toggle `hover: none` reliably, so the OR-with-width
       query covers that path too.

       Tap target stays ≥ 28px (close enough to 44px Apple HIG; full
       44px would crowd small tiles — the icon is 16px and the
       surrounding circle provides padding). */
    .cs-attachment-list__add-to-set-btn[b-fdzc4l6pem],
    .cs-attachment-list__edit-btn[b-fdzc4l6pem],
    .cs-attachment-list__delete-btn[b-fdzc4l6pem],
    .cs-attachment-list__sparkle-btn[b-fdzc4l6pem] {
        opacity: 1;
    }
}

/* Play-icon overlay moved to MediaGridThumbnail (shared with the
   Media rollup) — styles now live in app.css's cs-media-grid block.
   No media-wrapper / play-overlay rules needed here anymore. */

/* Force the chip icon glyphs white. The FluentIcon `Color="Color.Custom"
   CustomColor="#ffffff"` on each chip's <FluentIcon> in the markup is
   what actually wins the cascade (emits inline `fill="#fff"` on the SVG
   path, which beats any stylesheet rule); these CSS rules size the SVGs
   to the chip's interior and act as a defensive fallback. */
[b-fdzc4l6pem] .cs-attachment-list__add-to-set-btn svg,
[b-fdzc4l6pem] .cs-attachment-list__edit-btn svg,
[b-fdzc4l6pem] .cs-attachment-list__delete-btn svg,
[b-fdzc4l6pem] .cs-attachment-list__sparkle-btn svg {
    width: 16px;
    height: 16px;
}
/* /Components/Attachments/PhotoLightbox.razor.rz.scp.css */
/* Spec 034 P2 (T020/T025) — full-viewport photo overlay.

   VP-002: "The lightbox is the photo, not chrome." The image is centred,
   max-height: 100vh; controls are quiet, thumb-reachable on mobile, and
   sit on top of a low-opacity backdrop rather than competing with the
   image for attention.

   Mobile pass (FR-012): 360px width works without horizontal overflow;
   close/nav targets are ≥44×44px (WCAG 2.5.5); the meta strip falls
   below the image on narrow viewports.

   Theming: the overlay reads `--neutral-foreground-on-accent-rest` for
   icon colour over the dark backdrop; falls back to white. */

.cs-photo-lightbox[b-b7vpoj0cex] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* Stacks the chrome above the backdrop. */
    display: grid;
    place-items: center;
    /* Black backdrop tint — bright enough to read controls, dark enough
       that the photo's frame disappears against it. Hard-coded rather
       than var() because the backdrop is intentionally non-themable —
       a light-theme lightbox is the same dark void. */
    background: rgba(0, 0, 0, 0.85);
    /* Component has tabindex=-1; focus-visible should not paint a
       browser outline around the whole overlay rect. */
    outline: none;
    /* iOS Safari fix: reserve every touch starting anywhere in the
       overlay for our pointer handlers (swipe-nav, pinch-zoom, double-
       tap). Without this, touches landing OUTSIDE the inner
       .cs-photo-viewer__img — on the dark surround, the description /
       meta strip below the photo on narrow viewports, the chrome gaps
       — default to `touch-action: auto`, so iOS interprets a horizontal
       swipe as a page-scroll attempt and the still-scrollable body
       underneath glides up/down. Click events still fire from touchend,
       so close/nav/rotate/edit buttons keep working. */
    touch-action: none;
}

.cs-photo-lightbox__backdrop[b-b7vpoj0cex] {
    /* The decorative dismiss surface — covers the full viewport behind
       the chrome. tabindex=-1 + aria-hidden in the markup; the visible
       Close button + Esc are the discoverable affordances. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-out;
}

.cs-photo-lightbox__chrome[b-b7vpoj0cex] {
    /* The chrome positions the photo + controls relative to the
       viewport. `pointer-events: none` on the chrome cell + `auto`
       on every child means clicks land on either the photo (stage)
       or a button — never on the chrome itself, so the backdrop's
       dismiss action remains reachable everywhere there isn't a
       button or the image. */
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "topbar topbar topbar"
        "prev   stage  next"
        ".      desc   ."
        ".      meta   .";
    align-items: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 1rem;
    box-sizing: border-box;
    pointer-events: none;
}

.cs-photo-lightbox__chrome > *[b-b7vpoj0cex] {
    pointer-events: auto;
}

/* Spec 047 P2 follow-up iter 2 — single top toolbar. Three-column
   inner grid (1fr | auto | 1fr) so the title sits in the middle col
   visually centred across the chrome width regardless of which
   icons are visible (the rotate row hides for non-owners). The
   icons-group lives in the right col, right-aligned as a flex row. */
.cs-photo-lightbox__topbar[b-b7vpoj0cex] {
    grid-area: topbar;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.cs-photo-lightbox__topbar > .cs-photo-lightbox__title[b-b7vpoj0cex] {
    grid-column: 2;
    justify-self: center;
}

.cs-photo-lightbox__icons-group[b-b7vpoj0cex] {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Spec 084 / 023 polish (2026-06-04 refactor) — the sparkle in the
   lightbox is authored as a plain <button class="cs-photo-lightbox__action">
   right inside PhotoLightbox.razor (passed to <AiTransparencyButton> as its
   <Trigger> render fragment). Authoring it here is what lets the scoped
   .cs-photo-lightbox__action rule below reach it; an earlier design that
   rendered the button inside the child component fell out of scope and
   needed :deep() workarounds (see git log for #446 / #447). */

.cs-photo-lightbox__nav--prev[b-b7vpoj0cex] { grid-area: prev; }
.cs-photo-lightbox__nav--next[b-b7vpoj0cex] { grid-area: next; }

.cs-photo-lightbox__stage[b-b7vpoj0cex] {
    grid-area: stage;
    /* Photo + viewer container; absorbs the available space so the
       image scales to fit. */
    display: grid;
    place-items: center;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    cursor: default;
}

.cs-photo-lightbox__stage :deep(.cs-photo-viewer)[b-b7vpoj0cex],
.cs-photo-lightbox__stage :deep(.cs-photo-viewer--loaded)[b-b7vpoj0cex] {
    /* Override the PhotoViewer's default block layout so the embedded
       image fits the viewport. ::deep targets the un-scoped class on
       the child component (deliberate: PhotoViewer is shared, scoped
       styles can't reach it). */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.cs-photo-lightbox__stage :deep(.cs-photo-viewer__img)[b-b7vpoj0cex] {
    max-width: min(96vw, 100%);
    max-height: min(86vh, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* Spec 034 P3 (T030) — promote to its own layer so the per-frame
       transform from photo-lightbox.js doesn't repaint surrounding
       chrome on every pinch/pan/wheel tick. Also disables native
       gesture handling so iOS Safari's double-tap-to-zoom doesn't
       fight the custom toggle. */
    will-change: transform;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* The control buttons share one shape: a 44×44 circular tap target
   with a semi-transparent panel so they're legible on bright photos
   but recede when the user isn't looking at them. VP-002: controls
   are quiet — `opacity` carries the fade transition so the idle
   state below can fade them away when the pointer has been still. */
.cs-photo-lightbox__close[b-b7vpoj0cex],
.cs-photo-lightbox__fullscreen[b-b7vpoj0cex],
.cs-photo-lightbox__nav[b-b7vpoj0cex],
.cs-photo-lightbox__action[b-b7vpoj0cex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, opacity 260ms ease;
}

.cs-photo-lightbox__close :deep(svg)[b-b7vpoj0cex],
.cs-photo-lightbox__fullscreen :deep(svg)[b-b7vpoj0cex],
.cs-photo-lightbox__nav :deep(svg)[b-b7vpoj0cex],
.cs-photo-lightbox__action :deep(svg)[b-b7vpoj0cex] {
    fill: #fff;
}

.cs-photo-lightbox__close:hover[b-b7vpoj0cex],
.cs-photo-lightbox__fullscreen:hover[b-b7vpoj0cex],
.cs-photo-lightbox__nav:hover[b-b7vpoj0cex],
.cs-photo-lightbox__action:hover:not([disabled])[b-b7vpoj0cex] {
    background: rgba(0, 0, 0, 0.75);
}

.cs-photo-lightbox__close:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox__fullscreen:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox__nav:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox__action:focus-visible[b-b7vpoj0cex] {
    outline: 2px solid var(--accent-fill-rest, #ffffff);
    outline-offset: 2px;
}

.cs-photo-lightbox__action[disabled][b-b7vpoj0cex] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Spec 047 P2 follow-up iter 2 — the rotate row is now part of the
   topbar (icons-group flex), not a standalone bottom row. Drop
   grid-area and the pill background (the topbar's chrome handles
   visual containment); keep the inline-flex so the three buttons +
   optional rotate-msg span lay out horizontally. */
.cs-photo-lightbox__rotate[b-b7vpoj0cex] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-photo-lightbox__rotate-msg[b-b7vpoj0cex] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 1.3;
    padding: 0 0.5rem;
}

/* Spec 034 P4 (T040) — auto-fade controls after pointer idle (VP-002:
   the photo is the content, chrome is quiet). photo-lightbox.js
   toggles the `cs-photo-lightbox--idle` class on the overlay root
   after IDLE_AFTER_MS without pointer/keyboard activity, and clears
   it on any movement. The meta strip stays visible (it's
   informational, not a hover-only affordance) — fade applies only to
   the interactive buttons + the rotate row.

   Mobile (`@media (hover: none)`) keeps controls visible regardless:
   touch devices have no equivalent of "pointer idle" and a vanishing
   tap target is worse than a slightly busier viewport. */
.cs-photo-lightbox--idle .cs-photo-lightbox__close[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__fullscreen[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__nav[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__rotate[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__action[b-b7vpoj0cex] {
    opacity: 0;
    pointer-events: none;
}

@media (hover: none) {
    .cs-photo-lightbox--idle .cs-photo-lightbox__close[b-b7vpoj0cex],
    .cs-photo-lightbox--idle .cs-photo-lightbox__fullscreen[b-b7vpoj0cex],
    .cs-photo-lightbox--idle .cs-photo-lightbox__nav[b-b7vpoj0cex],
    .cs-photo-lightbox--idle .cs-photo-lightbox__rotate[b-b7vpoj0cex],
    .cs-photo-lightbox--idle .cs-photo-lightbox__action[b-b7vpoj0cex] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Focus stays visible even when otherwise idle — keyboard users
   shouldn't lose the focus ring just because they paused. */
.cs-photo-lightbox--idle .cs-photo-lightbox__close:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__fullscreen:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__nav:focus-visible[b-b7vpoj0cex],
.cs-photo-lightbox--idle .cs-photo-lightbox__action:focus-visible[b-b7vpoj0cex] {
    opacity: 1;
    pointer-events: auto;
}

/* Spec 047 P2 follow-up (Brett 2026-05-23) — title above the photo,
   description below. Both are informational like __meta below, so
   they stay visible when the rest of the chrome fades. White text on
   a calm pill background for legibility against any photo. */
.cs-photo-lightbox__title[b-b7vpoj0cex] {
    grid-area: title;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-photo-lightbox__description[b-b7vpoj0cex] {
    grid-area: desc;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.4;
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    max-width: 80vw;
    /* Multi-line cap so a long description doesn't crowd the photo;
       overflow ellipses after ~3 lines (the user can open details to
       see the full text). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    white-space: pre-wrap;
}

.cs-photo-lightbox__meta[b-b7vpoj0cex] {
    grid-area: meta;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.875rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-photo-lightbox__filename[b-b7vpoj0cex] {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-photo-lightbox__size[b-b7vpoj0cex],
.cs-photo-lightbox__counter[b-b7vpoj0cex] {
    color: rgba(255, 255, 255, 0.7);
}

/* Narrow viewports — collapse the side nav columns so the photo gets
   the full width, and pull the nav buttons to the bottom corners. */
@media (max-width: 480px) {
    .cs-photo-lightbox__chrome[b-b7vpoj0cex] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto auto;
        grid-template-areas:
            "topbar"
            "stage"
            "nav"
            "desc"
            "meta";
        gap: 0.375rem;
        padding: 0.5rem;
    }

    /* Mobile (<=480px): swipe left/right on the stage IS the intuitive
       navigation; the chevron buttons crowd the small viewport and
       overlap the bottom menu. Hidden here; photo-lightbox.js detects
       the gesture and round-trips through the [JSInvokable]
       OnLightboxSwipe callback to Prev/NextAsync. The "nav" grid area
       collapses to zero height because no child claims it. */
    .cs-photo-lightbox__nav--prev[b-b7vpoj0cex],
    .cs-photo-lightbox__nav--next[b-b7vpoj0cex] {
        display: none;
    }

    /* Spec 047 P2 follow-up iter 3 (Brett 2026-05-23) — on narrow
       viewports the inner 1fr|auto|1fr topbar grid squeezes the
       middle title column to nothing because the right column needs
       ~252px for the 5 icons (rotate-L/R + edit + fullscreen +
       close). Switch to a stacked layout: title row above, icons
       row below — both full-width. Title centred; icons right-
       aligned as before. */
    .cs-photo-lightbox__topbar[b-b7vpoj0cex] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: 0.375rem;
    }

    .cs-photo-lightbox__topbar > .cs-photo-lightbox__title[b-b7vpoj0cex] {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        /* Cap to viewport-minus-padding so very long titles still
           ellipsize instead of forcing a horizontal scroll. */
        max-width: 100%;
    }

    .cs-photo-lightbox__icons-group[b-b7vpoj0cex] {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
    }
}
/* /Components/Attachments/PhotoViewer.razor.rz.scp.css */
/* Spec 035 T044 iter 3 (Brett 2026-05-20) — kill the inline-image
   line-height descender gap so the photo's rendered height matches
   its container exactly. `display: block` removes the baseline
   strut; `max-width: 100%` keeps the image inside the cell;
   `height: auto` preserves the intrinsic aspect ratio. Without this
   rule the wrapping div was ~5px taller than the rendered <img>,
   which caused the flank Prev/Next buttons to extend slightly above
   and below the photo on the detail page. */
.cs-photo-viewer__img[b-f1y1co2vcy] {
    display: block;
    max-width: 100%;
    height: auto;
    /* Spec 047 P2 follow-up — belt-and-suspenders against the
       browser's native HTML5 image-drag gesture (the no-drop cursor
       Brett hit while trying to pan the zoomed lightbox image). The
       img tag carries `draggable="false"` too; this guards Safari /
       legacy paths that ignore the attribute. */
    -webkit-user-drag: none;
    user-select: none;
}

/* Spec 035 T044 follow-up (Brett 2026-05-20) — image rotation
   controls. Mirrors the .cs-video-player__btn / __controls look so
   photos and videos feel like one family. Inline SkiaSharp on the
   server; the response returns once rotation + derivative regen
   are done, and the component then re-fetches the SAS with a
   cache-bust to surface the new orientation. */
.cs-photo-viewer__controls[b-f1y1co2vcy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cs-photo-viewer__btn[b-f1y1co2vcy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-rest);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.cs-photo-viewer__btn:hover:not([disabled])[b-f1y1co2vcy] {
    background: var(--neutral-fill-hover, #ebebeb);
    border-color: var(--neutral-foreground-hint);
}

.cs-photo-viewer__btn:focus-visible[b-f1y1co2vcy] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.cs-photo-viewer__btn[disabled][b-f1y1co2vcy] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cs-photo-viewer__msg[b-f1y1co2vcy] {
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
    line-height: 1.3;
}
/* /Components/Attachments/VideoPlayer.razor.rz.scp.css */
/* Spec 035 T044 (Brett iter 2, 2026-05-20) — pre-size the <video>
   element on first paint so the page doesn't jump when metadata
   loads. `aspect-ratio: auto 16 / 9` means "use the video's intrinsic
   ratio when it's known, fall back to 16:9 before metadata arrives."
   `object-fit: contain` + a black backdrop lets letter/pillar-boxing
   absorb the mismatch when the actual ratio differs from 16:9
   (notably phone-portrait clips). `max-height: 70vh` keeps tall
   portrait videos from monopolising the viewport on desktops. */
.cs-video-player__video[b-44ijfsv0ge] {
    width: 100%;
    aspect-ratio: auto 16 / 9;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: #000;
    display: block;
}

/* Spec 035 T044 iter 5 (Brett 2026-05-20) — single controls row:
   thumbnail (image + upload) on the left, rotate on the right.
   `justify-content: space-between` spreads them; `flex-wrap` keeps
   the layout sane on narrow viewports. */
.cs-video-player__controls[b-44ijfsv0ge] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cs-video-player__controls-thumb[b-44ijfsv0ge],
.cs-video-player__controls-rotate[b-44ijfsv0ge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-video-player__controls-thumb-actions[b-44ijfsv0ge] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* iter 6 (Brett 2026-05-20) — descriptor label sits ABOVE the
   button, not inside it. Pairs the Image icon with the prose so the
   button itself reads as a simple "Choose file" affordance. */
.cs-video-player__field-label[b-44ijfsv0ge] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Thumbnail preview + same-sized placeholder when none is set.
   ~96 × 144px ≈ 50% larger than the iter-1 inline 64×96 — visible at
   a glance without dominating the controls row. `object-fit: cover`
   keeps the aspect honest while filling the slot. */
.cs-video-player__thumb-preview[b-44ijfsv0ge],
.cs-video-player__thumb-placeholder[b-44ijfsv0ge] {
    width: 144px;
    height: 96px;
    border-radius: 0.375rem;
    flex: 0 0 auto;
    display: block;
}

.cs-video-player__thumb-preview[b-44ijfsv0ge] {
    object-fit: cover;
    background: var(--neutral-fill-rest, #f5f5f5);
}

.cs-video-player__thumb-placeholder[b-44ijfsv0ge] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-hint, #707070);
    border: 1px dashed var(--neutral-stroke-rest, #d0d0d0);
}

/* Match the attachment-uploader's "Choose files…" button style so
   the video controls feel like the rest of the app. Mirror of
   .cs-attachment-uploader__choose-btn in app.css; scoped here so
   the rule travels with the component. */
.cs-video-player__btn[b-44ijfsv0ge] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-rest);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.cs-video-player__btn:hover:not([disabled])[b-44ijfsv0ge] {
    background: var(--neutral-fill-hover, #ebebeb);
    border-color: var(--neutral-foreground-hint);
}

.cs-video-player__btn:focus-within[b-44ijfsv0ge],
.cs-video-player__btn:focus-visible[b-44ijfsv0ge] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.cs-video-player__btn[disabled][b-44ijfsv0ge] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Visually hide the native file input but keep it focusable +
   screen-reader-reachable (the <label> wrapper is the visible
   target). Same pattern as .cs-attachment-uploader__file. */
.cs-video-player__file-input[b-44ijfsv0ge] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cs-video-player__msg[b-44ijfsv0ge] {
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Spec 042 P4 (T051) — quiet inline label that introduces the burn-in
   fallback buttons. Slightly dimmed so the affordance reads as a follow-up
   to the primary rotate pair, not a competing control. */
.cs-video-player__rotate-fallback-label[b-44ijfsv0ge] {
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
    line-height: 1.3;
    margin-left: 0.25rem;
}

/* Spec 042 P2 / T031 — transcode-status banner, shown ABOVE the video.
   Calm + in-voice (brand-values): the info variant is a soft neutral
   tint, the warn variant a warm amber — never an alarming red. */
.cs-video-player__banner[b-44ijfsv0ge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
    border-radius: var(--control-corner-radius, 4px);
    border: 1px solid transparent;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.cs-video-player__banner--info[b-44ijfsv0ge] {
    background: var(--neutral-fill-rest, #f5f5f5);
    border-color: var(--neutral-stroke-rest, #d0d0d0);
    color: var(--neutral-foreground-rest);
}

/* Warm, not alarming — a failed optimise is honest information, not an
   error the user caused. Amber tint with a readable foreground. */
.cs-video-player__banner--warn[b-44ijfsv0ge] {
    background: #fdf4e3;
    border-color: #e8d3a2;
    color: #6b4e16;
}

.cs-video-player__banner-text[b-44ijfsv0ge] {
    flex: 1 1 12rem;
}

/* T035 — the subtle current-rendition line under the player. */
.cs-video-player__rendition[b-44ijfsv0ge] {
    margin: 0.25rem 0 0;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.8125rem;
    line-height: 1.2;
}

/* Spec 042 P3 (T040) — caption uploader row. Sits below the rotate +
   thumbnail row; same flex shape so the controls feel uniform. */
.cs-video-player__controls-captions[b-44ijfsv0ge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cs-video-player__captions-lang[b-44ijfsv0ge] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
}

.cs-video-player__captions-lang-text[b-44ijfsv0ge] {
    color: var(--neutral-foreground-hint, #707070);
}

.cs-video-player__captions-select[b-44ijfsv0ge] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-rest, #f5f5f5);
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
    line-height: 1.3;
}

.cs-video-player__captions-have[b-44ijfsv0ge] {
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
    line-height: 1.3;
}
/* /Components/ChildListView.razor.rz.scp.css */
/* Spec 086 D7 polish — the Venn-diagram "Add to Set…" stealth button
   inherits FluentUI's neutral stealth foreground by default, which
   reads as a near-black glyph against the row background. The icon's
   stroke="currentColor" lets us push it to the brand accent token at
   the wrapping-element level so it matches the Sets-affordance shape
   in the gallery tiles (ItemCard.razor.css mirrors this rule for the
   .cs-item-card__add-to-set class). */
[b-k8bogh41ta] .cs-child-list__add-to-set {
    color: var(--accent-fill-rest, #0078d4);
}
/* /Components/CompletePurchaseDialog.razor.rz.scp.css */
.cs-complete-purchase-popover[b-2i8daq5o9t] {
    background: var(--neutral-layer-floating);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 12px;
    min-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-complete-purchase-popover__title[b-2i8daq5o9t] {
    font-weight: 600;
}

.cs-complete-purchase-popover__hint[b-2i8daq5o9t] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.cs-complete-purchase-popover__field[b-2i8daq5o9t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-complete-purchase-popover__field label[b-2i8daq5o9t] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.cs-complete-purchase-popover__matches[b-2i8daq5o9t] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    max-height: 160px;
    overflow-y: auto;
}

.cs-complete-purchase-popover__match[b-2i8daq5o9t] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

.cs-complete-purchase-popover__match:hover[b-2i8daq5o9t] {
    background: var(--neutral-layer-2);
}

.cs-complete-purchase-popover__picked[b-2i8daq5o9t] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    margin-top: 4px;
}

.cs-complete-purchase-popover__clear[b-2i8daq5o9t] {
    background: transparent;
    border: 0;
    color: var(--accent-foreground-rest);
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 6px;
    text-decoration: underline;
}

.cs-complete-purchase-popover__error[b-2i8daq5o9t] {
    margin: 0;
    color: var(--error);
    font-size: 0.85rem;
}
/* /Components/ContactMethodsEditor.razor.rz.scp.css */
/* Spec 103 D2 — multi-valued ContactMethod editor.

   Card per row with a head row (Kind / Purpose / Primary / Remove)
   and a Value field. Phone rows expand with a flag row for isMobile +
   canText tristates. */

.cs-contact-methods[b-igpqsd6ohp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-contact-methods__row[b-igpqsd6ohp] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--neutral-stroke-rest, #ddd);
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest, #fafafa);
}

.cs-contact-methods__row-head[b-igpqsd6ohp] {
    display: grid;
    grid-template-columns: 9rem 1fr auto auto;
    gap: 0.4rem;
    align-items: end;
}

.cs-contact-methods__phone-flags[b-igpqsd6ohp] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85em;
    color: var(--neutral-foreground-hint, #555);
}

.cs-contact-methods__primary-toggle[b-igpqsd6ohp],
.cs-contact-methods__remove[b-igpqsd6ohp],
.cs-contact-methods__add[b-igpqsd6ohp] {
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    background: transparent;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
}

.cs-contact-methods__primary-toggle--on[b-igpqsd6ohp] {
    color: var(--accent-fill-rest, #c47900);
    border-color: var(--accent-fill-rest, #c47900);
}

.cs-contact-methods__remove[b-igpqsd6ohp] {
    color: var(--neutral-foreground-hint, #888);
    width: 2rem;
    text-align: center;
}

.cs-contact-methods__remove:hover[b-igpqsd6ohp] {
    color: var(--error-text-rest, #b00020);
    border-color: var(--error-text-rest, #b00020);
}

.cs-contact-methods__add[b-igpqsd6ohp] {
    align-self: flex-start;
    color: var(--neutral-foreground-rest, #333);
}

@media (max-width: 480px) {
    .cs-contact-methods__row-head[b-igpqsd6ohp] {
        grid-template-columns: 1fr auto auto;
    }
}
/* /Components/DeferPopover.razor.rz.scp.css */
.cs-defer-popover[b-tfrsgc21og] {
    background: var(--neutral-layer-floating);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 12px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-defer-popover__title[b-tfrsgc21og] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.cs-defer-popover__presets[b-tfrsgc21og] {
    margin: 4px 0;
}

.cs-defer-popover__custom[b-tfrsgc21og] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.cs-defer-popover__error[b-tfrsgc21og] {
    margin: 0;
    color: var(--error);
    font-size: 0.85rem;
}
/* /Components/GroupsPicker.razor.rz.scp.css */
/* Spec 094-5 — GroupsPicker styling.
   Mirrors PeoplePicker.razor.css with .cs-groups-picker selectors. The
   .cs-grant-select chip styles are duplicated because Blazor CSS isolation
   scopes each .razor.css file to its component's rendered DOM.
   Light/dark token sourcing matches PeoplePicker — see that file's
   header comment for the rationale. */

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

.cs-groups-picker__filter[b-lauirhojd3] {
    width: 100%;
}

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

.cs-groups-picker__list[b-lauirhojd3] {
    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-groups-picker__row[b-lauirhojd3] {
    margin: 0;
    padding: 0;
}

.cs-groups-picker__btn[b-lauirhojd3] {
    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-groups-picker__avatar[b-lauirhojd3] {
    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-groups-picker__text[b-lauirhojd3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.cs-groups-picker__name[b-lauirhojd3] {
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.cs-groups-picker__footer-link[b-lauirhojd3] {
    margin: 0;
    font-size: 0.875rem;
    text-align: right;
}

/* Per-row permission select — see PeoplePicker.razor.css for token rationale. */
.cs-grant-select[b-lauirhojd3] {
    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-lauirhojd3] {
        outline: 2px solid currentColor;
        outline-offset: 1px;
    }

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

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

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

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

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

[data-theme="dark"] .cs-grant-select--read[b-lauirhojd3],
[data-theme="dark"] .cs-grant-select--view[b-lauirhojd3] {
    color: #93c5fd;
    background: rgba( 59, 130, 246, 0.20);
    border-color: rgba( 59, 130, 246, 0.50);
}
[data-theme="dark"] .cs-grant-select--edit[b-lauirhojd3] {
    color: #fdba74;
    background: rgba(249, 115,  22, 0.22);
    border-color: rgba(249, 115,  22, 0.50);
}
[data-theme="dark"] .cs-grant-select--manage[b-lauirhojd3] {
    color: #c4b5fd;
    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-lauirhojd3],
    :root:not([data-theme="light"]) .cs-grant-select--view[b-lauirhojd3] {
        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-lauirhojd3] {
        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-lauirhojd3] {
        color: #c4b5fd;
        background: rgba(139,  92, 246, 0.22);
        border-color: rgba(139,  92, 246, 0.50);
    }
}

.cs-empty[b-lauirhojd3] {
    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-lauirhojd3] {
    font-weight: 600;
    margin: 0 0 var(--cs-spacing-1, 0.25rem) 0;
}

.cs-empty__hint[b-lauirhojd3] {
    margin: 0;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
}
/* /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;
    flex-direction: column;
    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;
}

/* Spec 035 T044 iter 5 (Brett 2026-05-20, applies to ALL items) —
   one-line title row with title (flex 1), then the type+sharing meta,
   then the edit pencil. Pulls meta out of the vertical stack so the
   description flows directly under the title without interruption, and
   the edit affordance lives next to the metadata it edits instead of
   being isolated on the right. */
[b-arlwh6riid] .cs-item-card__header-titlerow {
    display: flex;
    align-items: center;
    gap: var(--cs-spacing-2, 0.5rem);
    flex-wrap: wrap; /* narrow viewports wrap meta + edit under the title */
}

[b-arlwh6riid] .cs-item-card__header-titlerow .cs-page-title {
    flex: 1 1 auto;
    min-width: 0;
}

[b-arlwh6riid] .cs-item-card__header-titlerow .cs-page-meta {
    flex: 0 0 auto;
}

/* Venn icon uses stroke="currentColor"; we want it to read as the brand-
   accent Sets affordance even inside a stealth FluentButton (which would
   otherwise inherit neutral text). */
[b-arlwh6riid] .cs-item-card__add-to-set {
    color: var(--accent-fill-rest, #0078d4);
}

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

/* Spec 044 Phase 1 / P5-b (Brett, 2026-05-23) — edit-mode internal tab
   body. Stack fields vertically with consistent spacing, and force the
   FluentTextField + FluentTextArea inputs to fill the available width
   so they don't render at the FluentUI default narrow width. */
[b-arlwh6riid] .cs-item-card__header-edit-tab {
    display: flex;
    flex-direction: column;
    gap: var(--cs-spacing-2, 0.5rem);
    padding-top: var(--cs-spacing-2, 0.5rem);
}

[b-arlwh6riid] .cs-item-card__header-edit-tab fluent-text-field,
[b-arlwh6riid] .cs-item-card__header-edit-tab fluent-text-area {
    width: 100%;
}

/* Spec 044 Phase 3 (T023) — partial-failure block. Honest status, not
   error styling: a soft amber tint so the user reads it as "some
   worked, some didn't" rather than "everything broke." */
[b-arlwh6riid] .cs-item-card__partial-failure {
    margin: 0.5rem 0;
    padding: 0.625rem 0.875rem;
    background: #fdf4e3;
    border: 1px solid #e8d3a2;
    border-radius: var(--control-corner-radius, 4px);
    color: #6b4e16;
}

[b-arlwh6riid] .cs-item-card__partial-failure-summary {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

[b-arlwh6riid] .cs-item-card__partial-failure-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

[b-arlwh6riid] .cs-item-card__partial-failure-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.3;
}

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

[b-arlwh6riid] .cs-item-card__partial-failure-bad {
    flex: 1 1 auto;
}

/* Spec 044 Phase 4 (T031) — realtime "changed elsewhere" notice.
   Calm neutral surface (VP-005 — informational, not alarm). Sits
   above Save/Cancel so it reads as a state change the user needs to
   acknowledge before continuing. */
[b-arlwh6riid] .cs-item-card__elsewhere-notice {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.625rem 0.875rem;
    background: var(--neutral-fill-rest, #f5f5f5);
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: var(--control-corner-radius, 4px);
    color: var(--neutral-foreground-rest);
}

[b-arlwh6riid] .cs-item-card__elsewhere-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

[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);
}

/* Spec 035 T044 (Brett iter 2, 2026-05-20) — Prev/Next flank the
   VIDEO ITSELF, not the whole preview block (which also contains the
   rotate + poster controls below). CSS Grid + `:has(.cs-video-player
   --playable)` + `display: contents` surfaces the <video> as a row-1
   grid item and drops the rotate/poster control rows into rows 2/3
   spanning all columns, so the buttons stretch only to the video's
   height. For non-playable states (loading / honest-note) and for
   non-video viewers (photo / pdf / file), the preview stays a single
   grid item in col 2 row 1 — buttons match that block as before.
   Mobile (<=640px): stack vertically with full-width row buttons. */
[b-arlwh6riid] .cs-item-card__attachment-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: var(--cs-spacing-2, 0.5rem);
    width: 100%;
}

/* Display:contents surfaces nested children to participate in the row's
   grid, but ONLY for the loaded-content states — the loading / honest-
   note / error wrappers stay a single grid item so prev/next still
   flank them cleanly. Same shape for both viewers; iter-3 (2026-05-20)
   added the photo variant after Brett noticed the ~10-20px inline-image
   gap that left buttons extending slightly past the photo's edges. */
[b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-video-player--playable) .cs-item-card__attachment-preview,
[b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-photo-viewer--loaded) .cs-item-card__attachment-preview { display: contents; }
[b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-video-player--playable) .cs-video-player--playable { display: contents; }
[b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-photo-viewer--loaded) .cs-photo-viewer--loaded { display: contents; }

[b-arlwh6riid] .cs-item-card__attachment-nav-prev { grid-column: 1; grid-row: 1; }
[b-arlwh6riid] .cs-item-card__attachment-nav-next { grid-column: 3; grid-row: 1; }

/* Video: <video> is row 1 col 2; the combined rotate+thumbnail
   controls row (iter-5 merged the old __rotate + __poster divs into
   .cs-video-player__controls) drops into row 2 spanning every column.

   Spec 053 follow-up — `justify-self: center` mirrors the photo viewer
   rule below. Without it, a portrait video (aspect-ratio + max-height
   shrink width below 1fr) anchors to one side of the column, leaving
   visually unbalanced empty space next to the Prev rail. Centering
   keeps the video between the two rails instead. */
[b-arlwh6riid] .cs-item-card__attachment-row .cs-video-player__video {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}
[b-arlwh6riid] .cs-item-card__attachment-row .cs-video-player__controls { grid-column: 1 / -1; }

/* Photo: the <img> becomes the row 1 col 2 grid item. iter-4
   (2026-05-20, Brett follow-up): center horizontally so a photo whose
   intrinsic width is narrower than the cell sits in the middle of the
   space between the flank buttons (the default `justify-self: start`
   left-aligns it; `max-width: 100%` keeps it from scaling up). Videos
   don't need this — `width: 100%` makes them always fill the cell.
   Image-rotation follow-up (2026-05-20): the photo controls row drops
   to row 2 spanning all columns (mirrors .cs-video-player__controls). */
[b-arlwh6riid] .cs-item-card__attachment-row .cs-photo-viewer__img {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

[b-arlwh6riid] .cs-item-card__attachment-row .cs-photo-viewer__controls { grid-column: 1 / -1; }

[b-arlwh6riid] .cs-item-card__attachment-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cs-spacing-1, 0.25rem);
    width: 4.5rem;
    padding: var(--cs-spacing-2, 0.5rem) var(--cs-spacing-1, 0.25rem);
    background: var(--accent-fill-rest, #0078d4);
    /* dark-mode safety: hard-set white instead of trusting
       --foreground-on-accent-rest, which resolves to black in some
       theme combos (the chevron stays white via CustomColor; the label
       had to be pinned explicitly to match). */
    color: #ffffff;
    border: 0;
    /* Friendlier corner — Brett's iter 2 request (was control-corner-radius / 4px). */
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease;
}

[b-arlwh6riid] .cs-item-card__attachment-nav-link:hover {
    background: var(--accent-fill-hover, #106ebe);
}

[b-arlwh6riid] .cs-item-card__attachment-nav-link:active {
    background: var(--accent-fill-active, #005a9e);
    transform: scale(0.98);
}

[b-arlwh6riid] .cs-item-card__attachment-nav-link:focus-visible {
    outline: 2px solid var(--accent-foreground-rest, #ffffff);
    outline-offset: 2px;
}

[b-arlwh6riid] .cs-item-card__attachment-nav-label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #ffffff; /* same dark-mode safety as above */
}

@media (max-width: 640px) {
    /* Mobile: drop the flank Prev/Next buttons — they crowd the small
       viewport and the gesture (swipe left/right on the viewer) is the
       intuitive replacement on touch. touch-action keeps vertical pans
       scrolling the page while horizontal pans become the swipe gesture
       the row's @ontouchstart/@ontouchend handlers consume. */
    [b-arlwh6riid] .cs-item-card__attachment-row {
        display: flex;
        flex-direction: column;
        touch-action: pan-y;
    }
    [b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-video-player--playable) .cs-item-card__attachment-preview,
    [b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-video-player--playable) .cs-video-player--playable,
    [b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-photo-viewer--loaded) .cs-item-card__attachment-preview,
    [b-arlwh6riid] .cs-item-card__attachment-row:has(.cs-photo-viewer--loaded) .cs-photo-viewer--loaded {
        display: block;
    }
    [b-arlwh6riid] .cs-item-card__attachment-nav-link {
        display: none;
    }
}

/* Spec 047 P3 (T020 / VP-003) — empty-state affordance shown below
   the header when the item has no children. One calm centred line;
   no border or background, no exclamation, no illustration. */
.cs-item-card__empty-affordance[b-arlwh6riid] {
    text-align: center;
    color: var(--neutral-foreground-hint, #6c757d);
    font-size: 0.9375rem;
    padding: var(--cs-spacing-3, 0.75rem) var(--cs-spacing-2, 0.5rem);
}

/* Spec 047 P3 (T022 / VP-002) — drag-over visual. Calm outline tint
   keyed off the JS controller's data-drag-active attribute on the
   article root; no full-screen overlay, no animation longer than
   100ms. Sits inside the chrome so it doesn't shift layout. */
.cs-item-card[data-drag-active="true"][b-arlwh6riid] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: -4px;
    transition: outline-color 100ms ease;
}

/* Spec 096 D8 polish — owner attribution row on the item-detail card
   (when the caller doesn't own the item — typically the Shared-with-me
   case). Same lightweight treatment as PublicItemById's row: 28px
   avatar + display-name + @@handle. */
.cs-item-card__owner[b-arlwh6riid] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0 0;
    padding: 0.25rem 0.5rem;
    border-radius: var(--control-corner-radius, 4px);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
}

.cs-item-card__owner:hover[b-arlwh6riid] {
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
    text-decoration: none;
}

.cs-item-card__owner:focus-visible[b-arlwh6riid] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.cs-item-card__owner-avatar[b-arlwh6riid] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.cs-item-card__owner-avatar--initials[b-arlwh6riid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-fill-secondary-rest, #ebebeb);
    color: var(--neutral-foreground-rest);
    font-weight: 600;
    font-size: 0.8125rem;
}

.cs-item-card__owner-text[b-arlwh6riid] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.cs-item-card__owner-name[b-arlwh6riid] {
    font-weight: 600;
}

.cs-item-card__owner-handle[b-arlwh6riid] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}
/* /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);
}
/* Thumbnail variant — square slot, sized to fill the row's natural
   content height. Brett 2026-05-31: "thumbnails should be square. Round
   is right for avatars, I think, but not to identify photos or videos"
   + "they can be a bit large to fill the available row height." Bumped
   to 64px (was inheriting the 36px icon size); the parent --has-thumb
   modifier shifts the subtitle/hint indent so they still align with the
   title's left edge instead of running under the wider thumbnail. */
.cs-item-display--has-thumb .cs-item-display__icon--thumb[b-rv0xg08o6n] {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    border-radius: var(--control-corner-radius, 4px);
    overflow: hidden;
    background: transparent;
}
.cs-item-display__icon--thumb img[b-rv0xg08o6n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-item-display--has-thumb .cs-item-display__subtitle[b-rv0xg08o6n],
.cs-item-display--has-thumb .cs-item-display__hint[b-rv0xg08o6n] {
    padding-left: calc(80px + 0.75rem);
}
/* Tighten the row's vertical padding when a thumb is present so the
   preview fills more of the visible row height (Brett 2026-05-31 →
   2026-06-01: "increase the thumbnail to use more of the available
   row height"). Type-icon rows keep the 0.75rem rhythm. */
.cs-item-display--has-thumb[b-rv0xg08o6n] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.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;
}

/* Spec 047 P4 — calm helper line under the attachment-mode upload
   section; the verb is set by surrounding chrome so this just
   clarifies the multi-file / can-close-anytime semantics. */
.cs-item-editor__hint[b-uvfu2uid1r] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.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.
   Layout adapts: 3 cols wide-desktop, 2 cols comfortable-desktop, 1 col
   mobile. Spec 047 P4 removed the legacy spec-009 "disabled tile" CSS
   path — attachment types are first-class picker entries now. */

.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));
}

/* 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/LegacyDesignationSection.razor.rz.scp.css */
.cs-legacy[b-z626x6p67s] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 44rem;
}

.cs-legacy__hint[b-z626x6p67s] {
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.cs-legacy__contacts[b-z626x6p67s],
.cs-legacy__disposition[b-z626x6p67s] {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    padding: 0.75rem 1rem 1rem;
    margin: 0;
}

.cs-legacy__contacts legend[b-z626x6p67s],
.cs-legacy__disposition legend[b-z626x6p67s] {
    font-weight: 600;
    padding: 0 0.35rem;
}

.cs-legacy__contact-row[b-z626x6p67s] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 0.5rem;
}

.cs-legacy__contact-row[b-z626x6p67s]  fluent-text-field {
    min-width: 16rem;
    flex: 1;
}

.cs-legacy__months[b-z626x6p67s] {
    margin-block-start: 0.5rem;
}

.cs-legacy__error[b-z626x6p67s] {
    color: var(--error, #b10e1c);
    margin: 0;
}

.cs-legacy__actions[b-z626x6p67s] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
/* /Components/LocationDataEditor.razor.rz.scp.css */
/* Spec 103 D1 — Location capability sub-form. Two-column lat/long
   row collapses to single column on narrow viewports so the number
   fields don't squeeze under each other on phones. */

.cs-cap-editor--location[b-i0qi2oegpq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cs-cap-editor__row[b-i0qi2oegpq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .cs-cap-editor__row[b-i0qi2oegpq] {
        grid-template-columns: 1fr;
    }
}
/* /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;
    /* Spec 069 — break the min-content propagation from the Toast UI
       toolbar (intrinsic ~629px). Without min-width:0 the flex item
       refuses to shrink below its content, so the whole editor host
       grows to the toolbar width and bulges past a narrow dialog
       column. With it, the host takes the dialog width and the
       toolbar's overflow-x:auto scrolls instead. */
    min-width: 0;
}

/* Spec 069 — Toast UI mounts `.toastui-editor-defaultUI` into this host;
   same min-width:0 so the host doesn't shrink-wrap to the toolbar. */
.cs-markdown-body__host[b-ld512xagdf] {
    min-width: 0;
    max-width: 100%;
}

/* 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/MediaMissingPlaceholder.razor.rz.scp.css */
/* Inline variant — fills the 36px ItemDisplay icon slot. Just the
   prohibited icon centered on a subdued background; no caption (would
   overflow the slot at this size). */
.cs-media-missing--inline[b-o9meknr107] {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-fill-rest, #f3f3f3);
    border-radius: inherit;
}

[data-theme="dark"] .cs-media-missing--inline[b-o9meknr107] {
    background: var(--neutral-fill-rest, #2a2a2a);
}

/* Tile variant — fills ONLY the image-slot area (the same space the
   <img class="cs-media-grid__img" /> would occupy), NOT the whole
   surrounding tile. The tile's title + description are siblings of the
   thumbnail (in cs-media-grid__tile's flex column); the placeholder
   replaces the thumbnail in-place so those siblings stay visible.

   Aspect-ratio matches the existing photo tile so portrait/landscape
   tiles don't collapse on missing-media swaps. Background mirrors the
   existing --placeholder so the swap from loading→missing isn't
   jarring. */
.cs-media-missing--tile[b-o9meknr107] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--neutral-fill-rest, #1f1f1f);
    color: var(--neutral-foreground-rest, #b8b8b8);
    border-radius: inherit;
}

.cs-media-missing__caption[b-o9meknr107] {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: inherit;
    text-transform: none;
}
/* /Components/Onboarding/ColdHomeLayout.razor.rz.scp.css */
/* Spec 097 D3 — Cold Home layout. Type-led, restrained: no large
   hero image, no decorative gradients. Sits inside .app-main's
   existing padding so it shares horizontal gutters with every
   other authenticated page. */

.cs-cold-home[b-7acvgxodxd] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 64rem;
    margin: 1rem auto 0 auto;
}

.cs-cold-home__hero[b-7acvgxodxd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-cold-home__title[b-7acvgxodxd] {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--neutral-foreground-rest);
}

.cs-cold-home__lede[b-7acvgxodxd] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 38em;
}

/* Verb-card row. Collapsed default: four cards in a flex row that
   wraps on narrow viewports. Each card sits at min-width 12rem so
   the four-card row breaks cleanly at the standard breakpoints
   without per-card overrides. */
.cs-cold-home__verbs[b-7acvgxodxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cs-cold-home__verbs > *[b-7acvgxodxd] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Depth-expansion toggle. Pure text affordance — no border, no
   background — so it doesn't compete with the quick-action row
   below. Hover underlines; otherwise calm. */
.cs-cold-home__toggle[b-7acvgxodxd] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0.25rem 0;
    margin: -0.5rem 0;
    color: var(--accent-foreground-rest);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.cs-cold-home__toggle:hover[b-7acvgxodxd] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.cs-cold-home__toggle:focus-visible[b-7acvgxodxd] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Quick-actions row — three calm chips that lead the user into the
   first real action. NOT styled as the page's primary CTA (Add wizard
   handles the full-fat creation flow); these are convenience links. */
.cs-cold-home__quick-actions[b-7acvgxodxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cs-cold-home__quick[b-7acvgxodxd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.cs-cold-home__quick:hover[b-7acvgxodxd] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest, #d1d1d1);
}

.cs-cold-home__quick:focus-visible[b-7acvgxodxd] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}
/* /Components/Onboarding/VerbCard.razor.rz.scp.css */
/* Spec 097 — VerbCard. Two visual modes: collapsed (compact, ~50px
   tall — head only) and expanded (head + long blurb + Try-it link).
   The card surface is light: a single neutral border + small corner
   radius so the row reads as a typographic grid, not as buttons. */

.cs-verb-card[b-ceeh08fis0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-1);
    transition: border-color 120ms ease;
}

.cs-verb-card--expanded[b-ceeh08fis0] {
    border-color: var(--accent-stroke-rest, var(--accent-fill-rest));
}

.cs-verb-card__head[b-ceeh08fis0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cs-verb-card__title[b-ceeh08fis0] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.cs-verb-card__short[b-ceeh08fis0] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    line-height: 1.4;
}

.cs-verb-card__long[b-ceeh08fis0] {
    margin: 0;
    color: var(--neutral-foreground-rest);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.cs-verb-card__try[b-ceeh08fis0] {
    align-self: flex-start;
    color: var(--accent-foreground-rest);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.15rem 0;
}

.cs-verb-card__try:hover[b-ceeh08fis0] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.cs-verb-card__try:focus-visible[b-ceeh08fis0] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /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/PricingCards.razor.rz.scp.css */
/* Spec 093 D11 — Pricing cards visual design.
   Co-located in scoped CSS so the styles travel with the component
   and don't conflict with app.css's globals. */

/* Cadence toggle — segmented control pattern.
   Wrapped in a flex container so the inline-flex segmented control
   stays a pill but centers on the page. (margin:auto doesn't center
   an inline element; the wrapper does.) */
.cs-pricing-toggle-wrap[b-u18odeep7a] {
    display: flex;
    justify-content: center;
    margin: 0 0 2.5rem 0;
}

.cs-pricing-toggle[b-u18odeep7a] {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0.3rem;
    background: var(--neutral-fill-stealth-rest, #f3f3f3);
    border-radius: 999px;
    max-width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cs-pricing-toggle__option[b-u18odeep7a] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-rest, #1a1a1a);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cs-pricing-toggle__option:hover[b-u18odeep7a] {
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
}

.cs-pricing-toggle__option--active[b-u18odeep7a],
.cs-pricing-toggle__option--active:hover[b-u18odeep7a] {
    background: var(--neutral-fill-rest, #fff);
    color: var(--accent-foreground-rest, #006aff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cs-pricing-toggle__hint[b-u18odeep7a] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #6e6e6e);
    font-weight: 400;
}

.cs-pricing-toggle__option--active .cs-pricing-toggle__hint[b-u18odeep7a] {
    color: var(--accent-foreground-rest, #006aff);
}

/* Toggle should be centred above the grid. The host page renders it
   inline, so a wrapping <div> isn't introduced — center via margin. */
.cs-pricing-grid[b-u18odeep7a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cs-pricing-card[b-u18odeep7a] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem 1.5rem;
    background: var(--neutral-fill-rest, #fff);
    border: 1px solid var(--neutral-stroke-rest, #e5e5e5);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cs-pricing-card--featured[b-u18odeep7a] {
    border-color: var(--accent-stroke-rest, #006aff);
    box-shadow: 0 6px 24px rgba(0, 106, 255, 0.12);
}

.cs-pricing-card__badge[b-u18odeep7a] {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.2rem 0.75rem;
    background: var(--accent-fill-rest, #006aff);
    color: var(--accent-foreground-on-accent, #fff);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
}

.cs-pricing-card__name[b-u18odeep7a] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.cs-pricing-card__tagline[b-u18odeep7a] {
    margin: 0 0 0.5rem 0;
    color: var(--neutral-foreground-hint, #6e6e6e);
    line-height: 1.4;
    min-height: 2.8em; /* keep card heights aligned across tiers */
}

.cs-pricing-card__price[b-u18odeep7a] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
}

.cs-pricing-card__price strong[b-u18odeep7a] {
    font-weight: 700;
}

.cs-pricing-card__discount[b-u18odeep7a] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--accent-foreground-rest, #006aff);
    font-weight: 500;
}

.cs-pricing-card__features[b-u18odeep7a] {
    flex: 1;
    margin: 0.5rem 0 1.25rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-pricing-card__features li[b-u18odeep7a] {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.45;
}

.cs-pricing-card__features li[b-u18odeep7a]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-foreground-rest, #006aff);
    font-weight: 700;
}

.cs-pricing-card__form[b-u18odeep7a] {
    margin: 0;
}

.cs-pricing-card__cta[b-u18odeep7a] {
    /* border-box so width:100% includes the 1rem horizontal padding —
       otherwise the element extends past the card's content area
       (visible as a right-offset on the Free tier's "Your starting plan"). */
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    font: inherit;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.cs-pricing-card__cta--primary[b-u18odeep7a] {
    background: var(--accent-fill-rest, #006aff);
    color: var(--accent-foreground-on-accent, #fff);
    border-color: var(--accent-stroke-rest, #006aff);
}

.cs-pricing-card__cta--primary:hover[b-u18odeep7a] {
    background: var(--accent-fill-hover, #0058d9);
}

.cs-pricing-card__cta--free[b-u18odeep7a] {
    background: var(--neutral-fill-stealth-rest, #f3f3f3);
    color: var(--neutral-foreground-hint, #6e6e6e);
    cursor: default;
    font-style: italic;
}

/* Disabled state matches the --free visual; resets the default button
   "grayed out" browser styling so the card stays cohesive. */
.cs-pricing-card__cta:disabled[b-u18odeep7a] {
    cursor: default;
    opacity: 1;
}

/* Spec 093 state machine — current-tier marker. Subdued styling
   communicates "you are here" without competing with the active
   Upgrade / Downgrade affordances on neighboring cards. */
.cs-pricing-card__cta--current[b-u18odeep7a] {
    background: var(--neutral-fill-stealth-rest, #f3f3f3);
    color: var(--neutral-foreground-rest, #2d2d2d);
    border-color: var(--neutral-stroke-divider-rest, #d1d1d1);
    cursor: default;
    font-weight: 600;
}

/* Downgrade is a real action but not the primary path — neutral
   outlined to read as "available, deliberate" rather than the
   accent-filled primary. */
.cs-pricing-card__cta--downgrade[b-u18odeep7a] {
    background: transparent;
    color: var(--neutral-foreground-rest, #2d2d2d);
    border-color: var(--neutral-stroke-rest, #6e6e6e);
}

.cs-pricing-card__cta--downgrade:hover[b-u18odeep7a] {
    background: var(--neutral-fill-stealth-hover, #ebebeb);
}

/* Cancel surfaces in a quiet destructive tint so the user understands
   it ends their subscription, without dominating the card grid.
   Explicit light vs dark colors so the red passes WCAG AA in both
   modes — #c84a4a on white reads ~4.7:1, #f37b7b on a dark card reads
   ~5.5:1. Same red ramp as AccountMenu's sign-out hover (Spec 095). */
.cs-pricing-card__cta--cancel[b-u18odeep7a] {
    background: transparent;
    color: #c84a4a;
    border-color: #c84a4a;
}

.cs-pricing-card__cta--cancel:hover[b-u18odeep7a] {
    background: rgba(200, 74, 74, 0.08);
}

[data-theme="dark"] .cs-pricing-card__cta--cancel[b-u18odeep7a] {
    color: #f37b7b;
    border-color: #f37b7b;
}

[data-theme="dark"] .cs-pricing-card__cta--cancel:hover[b-u18odeep7a] {
    background: rgba(243, 123, 123, 0.10);
}

/* prefers-color-scheme fallback for first-paint before the
   data-theme attribute is set by client JS. Matches the broader
   convention in app.css per the spec-052 dual-source comment. */
@media (prefers-color-scheme: dark) {
    .cs-pricing-card__cta--cancel[b-u18odeep7a] {
        color: #f37b7b;
        border-color: #f37b7b;
    }
    .cs-pricing-card__cta--cancel:hover[b-u18odeep7a] {
        background: rgba(243, 123, 123, 0.10);
    }
}

/* Spec 093 polish — cadence switch (Plus M ↔ Plus Y, etc.). Same
   visual weight as Downgrade (neutral-outlined "available, deliberate"
   action) so a cadence change reads as a lateral move, not a downgrade. */
.cs-pricing-card__cta--switch[b-u18odeep7a] {
    background: transparent;
    color: var(--neutral-foreground-rest, #2d2d2d);
    border-color: var(--neutral-stroke-rest, #6e6e6e);
}

.cs-pricing-card__cta--switch:hover[b-u18odeep7a] {
    background: var(--neutral-fill-stealth-hover, #ebebeb);
}
/* /Components/Sets/AddToSetDialog.razor.rz.scp.css */
/* Spec 086 D7 — "Add to Set..." dialog body styles. The dialog frame
   itself is the Fluent default; only the row + chip + create-input
   layout needs custom CSS. */

.cs-add-to-set__create-row[b-jfvyretkb7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

[b-jfvyretkb7] .cs-add-to-set__create-input {
    flex: 1 1 auto;
    min-width: 12rem;
}

.cs-add-to-set__empty[b-jfvyretkb7] {
    color: var(--neutral-foreground-hint);
    text-align: center;
    padding: 1rem 0;
}

.cs-add-to-set__list[b-jfvyretkb7] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.cs-add-to-set__row[b-jfvyretkb7] {
    margin: 0;
    padding: 0;
}

.cs-add-to-set__toggle[b-jfvyretkb7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.cs-add-to-set__toggle:hover:not([disabled])[b-jfvyretkb7],
.cs-add-to-set__toggle:focus-visible[b-jfvyretkb7] {
    background: var(--neutral-fill-hover, rgba(0, 0, 0, 0.04));
    outline: none;
}

.cs-add-to-set__toggle[disabled][b-jfvyretkb7] {
    opacity: 0.6;
    cursor: default;
}

.cs-add-to-set__check[b-jfvyretkb7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-foreground-rest, var(--accent-fill-rest));
}

.cs-add-to-set__name[b-jfvyretkb7] {
    flex: 1 1 auto;
}

.cs-add-to-set__count[b-jfvyretkb7] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    white-space: nowrap;
}

.cs-add-to-set__error[b-jfvyretkb7] {
    color: var(--error-foreground, #c4314b);
    margin-top: 0.75rem;
}
/* /Components/Sets/PinnedSetChips.razor.rz.scp.css */
/* Spec 086 D8 — pinned-Set chip row. Inline list, wrapping. Each chip
   is a small accent-bordered pill that links to /sets/{id}. Matches the
   visual rhythm of the sharing badge but with a clickable affordance. */

.cs-pinned-set-chips[b-p4yfqisbdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.cs-pinned-set-chip[b-p4yfqisbdj] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--accent-stroke-rest, var(--accent-fill-rest));
    color: var(--accent-foreground-rest, var(--accent-fill-rest));
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    background: transparent;
    transition: background 120ms ease;
}

.cs-pinned-set-chip:hover[b-p4yfqisbdj],
.cs-pinned-set-chip:focus-visible[b-p4yfqisbdj] {
    background: var(--accent-fill-hover, rgba(0, 0, 0, 0.04));
    outline: none;
}
/* /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/Sharing/SharedWithSummary.razor.rz.scp.css */
/* Spec 044 Phase 2 — view-mode "Shared with: …" summary. Inactive
   chip strip; informational only, per VP-003. Wraps gracefully on
   narrow viewports. */

.cs-shared-with[b-ykzrhisafb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0.25rem 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

.cs-shared-with__label[b-ykzrhisafb] {
    color: var(--neutral-foreground-hint, #707070);
    margin-right: 0.125rem;
}

.cs-shared-with__chip[b-ykzrhisafb] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--neutral-fill-rest, #f5f5f5);
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    color: var(--neutral-foreground-rest);
    /* Chips are informational, not interactive — no hover, no
       cursor:pointer (VP-003). */
}
/* /Components/SharingPanel.razor.rz.scp.css */
/* Spec 044 Phase 3 (T021) — pending-changes block in Deferred mode.
   Quiet, informational; rendered below the People/Groups/Invite tabs
   when there are buffered ops. Matches the partial-failure block's
   amber tint so the two read as related "honest status" surfaces. */

[b-fhh8u37glc] .cs-sharing-panel__pending {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--neutral-fill-rest, #f5f5f5);
    border: 1px solid var(--neutral-stroke-rest, #d0d0d0);
    border-radius: var(--control-corner-radius, 4px);
}

[b-fhh8u37glc] .cs-sharing-panel__pending-title {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-fhh8u37glc] .cs-sharing-panel__pending-list {
    list-style: disc inside;
    margin: 0;
    padding: 0;
    color: var(--neutral-foreground-rest);
    font-size: 0.875rem;
    line-height: 1.4;
}

[b-fhh8u37glc] .cs-sharing-panel__pending-item {
    padding: 0.125rem 0;
}
/* /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;
    }
}
/* /Components/TicketViewer.razor.rz.scp.css */
/* Spec 104 PR γ — viewer styles. Calm/clean per brand values. */

.cs-ticket-viewer__loading[b-5xfpdz7i2s],
.cs-ticket-viewer__notfound[b-5xfpdz7i2s] {
    margin: 1.5rem 0;
}

.cs-ticket-viewer__header[b-5xfpdz7i2s] {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cs-ticket-viewer__header-top[b-5xfpdz7i2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cs-ticket-viewer__title[b-5xfpdz7i2s] {
    font-size: 1.25rem;
    margin: 0;
}

.cs-ticket-viewer__meta[b-5xfpdz7i2s] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
    margin: 0 0 1rem 0;
}

.cs-ticket-viewer__ref code[b-5xfpdz7i2s] {
    font-family: var(--monospace-font-family, monospace);
    font-size: 0.8125rem;
}

.cs-ticket-viewer__description[b-5xfpdz7i2s] {
    white-space: pre-wrap;
    margin: 0;
}

.cs-ticket-viewer__outcome[b-5xfpdz7i2s] {
    margin: 1rem 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--neutral-layer-2);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 4px;
}

.cs-ticket-viewer__thread[b-5xfpdz7i2s] {
    margin-bottom: 1.5rem;
}

.cs-ticket-viewer__thread-empty[b-5xfpdz7i2s] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
    margin: 1rem 0;
}

.cs-ticket-viewer__message[b-5xfpdz7i2s] {
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.cs-ticket-viewer__message--admin[b-5xfpdz7i2s] {
    background: var(--neutral-layer-2);
    border-left: 3px solid var(--accent-fill-rest);
}

.cs-ticket-viewer__message--submitter[b-5xfpdz7i2s] {
    background: var(--neutral-layer-1);
    border-left: 3px solid var(--neutral-stroke-rest);
}

.cs-ticket-viewer__message--system[b-5xfpdz7i2s] {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
}

.cs-ticket-viewer__system-line[b-5xfpdz7i2s] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
    text-align: center;
}

.cs-ticket-viewer__message-head[b-5xfpdz7i2s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.cs-ticket-viewer__author[b-5xfpdz7i2s] {
    font-weight: 600;
}

.cs-ticket-viewer__message-time[b-5xfpdz7i2s] {
    color: var(--neutral-foreground-hint);
    font-size: 0.8125rem;
}

.cs-ticket-viewer__message-body[b-5xfpdz7i2s] {
    white-space: pre-wrap;
    margin: 0;
}

.cs-ticket-viewer__reply[b-5xfpdz7i2s] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cs-ticket-viewer__error[b-5xfpdz7i2s] {
    color: var(--error-foreground);
    margin: 0;
    font-size: 0.875rem;
}

.cs-ticket-viewer__anon-notice[b-5xfpdz7i2s],
.cs-ticket-viewer__terminal-notice[b-5xfpdz7i2s] {
    margin: 1rem 0;
    padding: 0.875rem 1rem;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.9375rem;
}
/* /Components/TodayPlanSection.razor.rz.scp.css */
.cs-today-section[b-llii051nq9] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-today-section__header[b-llii051nq9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-today-section__date-strip[b-llii051nq9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

.cs-today-item__row[b-llii051nq9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cs-today-item__check[b-llii051nq9] {
    cursor: pointer;
    accent-color: var(--accent-fill-rest);
}

.cs-today-item__check--child[b-llii051nq9] {
    margin-left: 0;
}

.cs-today-item__check:disabled[b-llii051nq9] {
    cursor: default;
    opacity: 0.65;
}

.cs-today-item__type-icon[b-llii051nq9] {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

.cs-today-item__type-icon[b-llii051nq9]  svg {
    width: 16px;
    height: 16px;
}

.cs-today-item__chip[b-llii051nq9] {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.cs-today-item__chip--overdue[b-llii051nq9] {
    /* Brett 2026-06-12: the original red-on-12%-red wash sat near 3:1
       on the dark theme — hard to read. Solid fill + white text is
       theme-independent: #b91c1c behind #fff is ~5.9:1 (AA at this
       size/weight) on light AND dark. */
    background: var(--error, #b91c1c);
    color: #fff;
    font-weight: 600;
}

.cs-today-item__defer[b-llii051nq9] {
    margin-left: auto;
    opacity: 0.5;
}

.cs-today-item:hover .cs-today-item__defer[b-llii051nq9] {
    opacity: 1;
}

.cs-today-section__title[b-llii051nq9] {
    margin: 0;
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cs-today-section__date[b-llii051nq9] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.cs-today-section__hint[b-llii051nq9] {
    margin: 4px 0 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.cs-today-section__groups[b-llii051nq9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.cs-today-group[b-llii051nq9] {
    background: var(--neutral-layer-1);
    border-radius: 6px;
    padding: 12px;
}

.cs-today-group__header[b-llii051nq9] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--neutral-foreground-rest);
}

.cs-today-group__items[b-llii051nq9] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-today-item__title[b-llii051nq9] {
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.cs-today-item__title:hover[b-llii051nq9] {
    text-decoration: underline;
}

.cs-today-item__title--done[b-llii051nq9] {
    text-decoration: line-through;
    color: var(--neutral-foreground-hint);
}

.cs-today-item__children[b-llii051nq9] {
    margin: 4px 0 0 16px;
    padding: 0;
    list-style: disc;
    color: var(--neutral-foreground-rest);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-today-item__children a[b-llii051nq9] {
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

/* The child (sub-item) rows aren't the inline-flex `__row` the parent uses,
   so the overdue chip sat flush against the title. Match the parent row's
   title→chip gap (8px). Brett 2026-06-13: looked fine on tasks, jammed on
   purchases. */
.cs-today-item__children .cs-today-item__chip[b-llii051nq9] {
    margin-left: 8px;
}

.cs-today-item__children a:hover[b-llii051nq9] {
    text-decoration: underline;
}

/* /Components/TodaysPlanInput.razor.rz.scp.css */
.cs-todays-plan-input[b-av61hyi6hf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-todays-plan-input__textarea[b-av61hyi6hf] {
    width: 100%;
}

.cs-todays-plan-input__textarea[b-av61hyi6hf]  textarea {
    min-height: 120px;
    font-family: inherit;
}

.cs-todays-plan-input__message[b-av61hyi6hf] {
    margin: 0;
    color: var(--error);
    font-size: 0.875rem;
}

.cs-todays-plan-input__actions[b-av61hyi6hf] {
    margin-top: 4px;
}

.cs-todays-plan-input__date-row[b-av61hyi6hf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.cs-todays-plan-input__date-label[b-av61hyi6hf] {
    color: var(--neutral-foreground-hint);
}
/* /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.
   Spec 032 Phase 4 tangential fix: `flex-wrap: wrap` so the button
   drops below the title block on narrow viewports rather than running
   flush against the right edge. */
.cs-page-header[b-4k6u809vwf] {
    display: flex;
    flex-wrap: wrap;
    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/GroupDetail.razor.rz.scp.css */
/* Spec 094-4 — group-detail page styles. Mirrors SetDetail.razor.css
   so the rename + actions strip + body sections feel consistent across
   the two analogous v1 surfaces (item-grouping vs user-grouping). */

.cs-group-detail__header[b-9duj5vssu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.cs-group-detail__header > div:first-child[b-9duj5vssu0] {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-group-detail__actions[b-9duj5vssu0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.cs-group-detail__name-edit[b-9duj5vssu0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-9duj5vssu0] .cs-group-detail__name-input {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.cs-group-detail__description[b-9duj5vssu0] {
    margin-top: 0.5rem;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}

/* Add-bar — pinned at the top of the body, above the member list.
   Matches the search-then-list shape of the PeoplePicker so the user
   flow is consistent: filter your connections, click Add. */
.cs-group-detail__add-bar[b-9duj5vssu0] {
    margin: 1rem 0;
    padding: 0.75rem;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fafafa);
}

[b-9duj5vssu0] .cs-group-detail__add-search {
    width: 100%;
    margin-bottom: 0.5rem;
}

.cs-group-detail__hint[b-9duj5vssu0] {
    margin: 0.5rem 0 0;
    color: var(--neutral-foreground-rest, #555);
    font-size: 0.875rem;
}

.cs-group-detail__candidate-list[b-9duj5vssu0] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cs-group-detail__candidate[b-9duj5vssu0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    background: var(--neutral-fill-rest, #fff);
}

.cs-group-detail__candidate-text[b-9duj5vssu0] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cs-group-detail__display[b-9duj5vssu0] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-group-detail__handle[b-9duj5vssu0] {
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest, #555);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-group-detail__avatar[b-9duj5vssu0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-fill-rest, #2563eb);
    color: var(--neutral-foreground-on-accent-rest, #fff);
    font-weight: 600;
    flex: 0 0 auto;
}

.cs-group-detail__members[b-9duj5vssu0] {
    margin-top: 1rem;
}
/* /Pages/Home.razor.rz.scp.css */
/* Spec 060 P1 — moved from Web/Components/Pages/Home.razor.css. The
   .cs-page-title + .cs-page-subtitle promotions to app.css still apply. */

.cs-dashboard-grid[b-w6w3nrkvry] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Spec 075 — AI intent onramp entry point. A quiet, inviting banner above the
   dashboard; only shown when the feature is enabled for the user. */
/* Persistent (non-hover) affordances so it reads as tappable on touch too:
   an always-on accent border, an accent-coloured title (looks like a link),
   and a trailing chevron. Hover/focus just deepens it on desktop. */
.cs-start-cta[b-w6w3nrkvry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-fill-rest, #0078d4);
    border-radius: var(--control-corner-radius, 6px);
    background: var(--neutral-layer-2, transparent);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.cs-start-cta:hover[b-w6w3nrkvry],
.cs-start-cta:focus-visible[b-w6w3nrkvry] {
    border-color: var(--accent-fill-hover, var(--accent-fill-rest, #106ebe));
    background: var(--neutral-layer-3, var(--neutral-layer-2, transparent));
}

.cs-start-cta__text[b-w6w3nrkvry] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cs-start-cta__title[b-w6w3nrkvry] {
    font-weight: 600;
    color: var(--accent-foreground-rest, #0078d4);
}

.cs-start-cta__hint[b-w6w3nrkvry] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
}

.cs-start-cta__chevron[b-w6w3nrkvry] {
    flex: 0 0 auto;
}

/* Overdue hint variant for the Active Tasks card. Uses the design
   system's error-foreground token where available; falls back to a
   conservative red that meets WCAG AA against the card background. */
[b-w6w3nrkvry] .cs-summary-card__hint--overdue {
    color: var(--error-foreground-rest, #b42318);
    font-weight: 600;
}

/* Spec 060 P1 follow-up — make each li's title a direct link to the
   item / cabinet detail page. The card itself stays clickable (it
   navigates to the broader surface — /cabinets, /tasks, etc.); the
   link adds a faster path to a specific row. stopPropagation on the
   link's @onclick keeps the card's onclick handler from firing when
   the user clicked the link itself. */
[b-w6w3nrkvry] .cs-summary-card__body li a {
    color: inherit;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[b-w6w3nrkvry] .cs-summary-card__body li a:hover,
[b-w6w3nrkvry] .cs-summary-card__body li a:focus-visible {
    text-decoration: underline;
}
/* /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;
}

/* Avatar + name row used in Connections (Person column / mobile card
   head) and Directory (Handle / Display-name column). Flex row so the
   avatar sits next to the label; gap keeps them visually tied without
   crowding. */
.cs-person-link[b-3b756luq06] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
[b-3b756luq06] .cs-person-link .cs-avatar {
    flex: 0 0 auto;
}

/* Spec 096 D8 browse mode — Load-more button row. Centered so the
   browse list reads as a single column even on wide viewports where
   the data grid spans the width. */
.cs-directory-browse__loadmore[b-3b756luq06] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* Spec 096 D8 polish — Directory row cell links. Both the handle
   column and the display-name column wrap the /@@handle profile route
   so the whole row reads as clickable. Keep the link styling neutral
   so the row doesn't read as a "this is a hyperlink forest" — the
   cursor + hover affordance carries the click signal. */
.cs-directory__row-link[b-3b756luq06] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--control-corner-radius, 4px);
}

.cs-directory__row-link:hover[b-3b756luq06] {
    text-decoration: none;
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
}

.cs-directory__row-link:focus-visible[b-3b756luq06] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Text-only variant — the display-name cell sits as a row of text in
   the data grid; the small padding lets the hover tint render as a
   proper hit-target rather than only the text glyphs. */
.cs-directory__row-link--text[b-3b756luq06] {
    display: inline-block;
    padding: 2px 4px;
    margin: -2px -4px;
}
/* /Pages/SetDetail.razor.rz.scp.css */
/* Spec 086 v1 — minimal set-detail header styles. The list rendering
   reuses the global cs-list pattern from Cabinets/People/etc.; only
   the inline rename UX needs page-local styles. */

/* Page header — mirrors the cs-item-card header pattern used on the
   Cabinets/Folder pages (title block left, action group right, calm
   separator underneath so the body content reads as a distinct zone
   from the header strip). */
.cs-set-detail__header[b-vq0t6vmgdh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.cs-set-detail__header > div:first-child[b-vq0t6vmgdh] {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-set-detail__actions[b-vq0t6vmgdh] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.cs-set-detail__name-edit[b-vq0t6vmgdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-vq0t6vmgdh] .cs-set-detail__name-input {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.cs-set-detail__description[b-vq0t6vmgdh] {
    margin-top: 0.5rem;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}
/* /Pages/Start.razor.rz.scp.css */
/* Spec 075 — AI intent onramp (/start). Calm, roomy full-page layout per the
   brand values; the run reads as a transparent stepped process (GitHub-Actions
   pattern) rather than a transactional form. */

.cs-start[b-vts68em370] {
    max-width: 720px;
}

/* ---- The Ask ---------------------------------------------------------- */
.cs-start__ask[b-vts68em370] {
    margin-bottom: 1.5rem;
}

/* Stacked, full-width inputs (spec 077 #1) — room to type + the whole
   placeholder stays visible. */
.cs-ask-stack[b-vts68em370] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-ask-field[b-vts68em370] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cs-ask-field__label[b-vts68em370] {
    font-size: 1.05rem;
    color: var(--neutral-foreground-rest);
}

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

/* New-vs-existing mode toggle (spec 078) — a calm segmented control. */
.cs-ask-mode[b-vts68em370] {
    display: inline-flex;
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
    overflow: hidden;
}

.cs-ask-mode__opt[b-vts68em370] {
    font: inherit;
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    background: var(--neutral-layer-1, transparent);
    color: var(--neutral-foreground-rest);
    border: none;
    border-right: 1px solid var(--neutral-stroke-divider-rest);
}

.cs-ask-mode__opt:last-child[b-vts68em370] {
    border-right: none;
}

.cs-ask-mode__opt--on[b-vts68em370] {
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-inverse, #fff);
}

.cs-ask-input--block[b-vts68em370] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.05rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
}

.cs-ask-input--area[b-vts68em370] {
    resize: vertical;
    min-height: 3.5rem;
    line-height: 1.45;
}

.cs-ask-input[b-vts68em370] {
    font: inherit;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1, transparent);
    border: none;
    border-bottom: 1px solid var(--accent-fill-rest);
    padding: 0.15rem 0.35rem;
    min-width: 8rem;
}

.cs-ask-input:focus-visible[b-vts68em370] {
    outline: none;
    border-bottom-width: 2px;
}

.cs-ask-input--role[b-vts68em370] {
    min-width: 12rem;
}

.cs-ask-input--goal[b-vts68em370] {
    flex: 1;
    min-width: 16rem;
}

.cs-ask-summary[b-vts68em370] {
    color: var(--neutral-foreground-rest);
    font-size: 1.05rem;
    margin: 0;
}

.cs-ask-summary__quiet[b-vts68em370] {
    color: var(--neutral-foreground-hint);
}

/* Spec 081 — chip-summary + inline Edit affordance for completed steps. */
.cs-ask-summary__row[b-vts68em370] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cs-ask-summary__edit[b-vts68em370] {
    font-size: 0.9rem;
}

.cs-start__actions[b-vts68em370] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cs-start__actions--primary[b-vts68em370] {
    margin-top: 1rem;
}

.cs-start__error[b-vts68em370] {
    color: var(--error-foreground-rest, #b42318);
    margin-top: 0.5rem;
}

/* ---- The run ---------------------------------------------------------- */
.cs-run[b-vts68em370] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--neutral-stroke-divider-rest);
}

.cs-run__step[b-vts68em370] {
    padding: 0.25rem 0 0.5rem 1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
}

/* Spec 081 — visually mark steps downstream of an in-progress edit. Stays on
   screen for compare; greyed + non-interactive so the user can see what's
   stale before clicking "Re-run from here". */
.cs-run__step--outofdate[b-vts68em370] {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.cs-run__head[b-vts68em370] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

.cs-run__title[b-vts68em370] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.cs-run__body[b-vts68em370] {
    padding: 0.5rem 0 0.5rem 1.75rem;
}

.cs-run__spinner[b-vts68em370] {
    width: 20px;
    height: 20px;
}

.cs-interpretation[b-vts68em370] {
    font-size: 1.05rem;
    color: var(--neutral-foreground-rest);
    margin: 0 0 0.25rem;
}

/* ---- Proposal --------------------------------------------------------- */
.cs-field[b-vts68em370] {
    display: block;
    margin-bottom: 0.75rem;
}

.cs-field--inline[b-vts68em370] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-field__label[b-vts68em370] {
    display: block;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 0.2rem;
}

.cs-field--inline .cs-field__label[b-vts68em370] {
    margin-bottom: 0;
}

.cs-select[b-vts68em370] {
    font: inherit;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1, transparent);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
    padding: 0.3rem 0.4rem;
}

.cs-proposal__home[b-vts68em370] {
    padding: 0.75rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
    margin-bottom: 1rem;
}

.cs-proposal__target[b-vts68em370] {
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.cs-proposal__target-note[b-vts68em370] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
}

.cs-proposal__items[b-vts68em370] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-proposal__row[b-vts68em370] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-proposal__type[b-vts68em370] {
    flex: 0 0 9rem;
}

.cs-proposal__title[b-vts68em370] {
    flex: 1;
    min-width: 0;
}

.cs-proposal__addrow[b-vts68em370] {
    margin-top: 0.5rem;
}

.cs-linkbtn[b-vts68em370] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-foreground-rest, #0b5cad);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.cs-linkbtn:hover[b-vts68em370],
.cs-linkbtn:focus-visible[b-vts68em370] {
    text-decoration: underline;
}

.cs-iconbtn[b-vts68em370] {
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--neutral-foreground-hint);
}

.cs-iconbtn:hover[b-vts68em370] {
    color: var(--neutral-foreground-rest);
}

.cs-nudge[b-vts68em370] {
    margin-top: 0.75rem;
}

.cs-nudge__input[b-vts68em370] {
    display: block;
    width: 100%;
    min-height: 3rem;
    resize: vertical;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
}

/* ---- Materialization items ------------------------------------------- */
.cs-run__items[b-vts68em370] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-run__item[b-vts68em370] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-run__item-title[b-vts68em370] {
    color: var(--neutral-foreground-rest);
}

.cs-run__item-error[b-vts68em370] {
    color: var(--error-foreground-rest, #b42318);
    font-size: 0.85rem;
}

.cs-start__done[b-vts68em370] {
    margin-top: 1rem;
}

.cs-start__done-msg[b-vts68em370] {
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ---- Clarifying turn (spec 077) -------------------------------------- */
.cs-clarify__thinking[b-vts68em370] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
    margin: 0;
}

.cs-clarify__lead[b-vts68em370] {
    color: var(--neutral-foreground-hint);
    margin: 0.25rem 0 0.5rem;
}

.cs-clarify__q[b-vts68em370] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.cs-clarify__q-label[b-vts68em370] {
    color: var(--neutral-foreground-rest);
    font-size: 0.95rem;
}

.cs-interpretation--quiet[b-vts68em370] {
    color: var(--neutral-foreground-hint);
    font-size: 0.95rem;
}

/* ---- Nested folders in the proposal (spec 077) ----------------------- */
.cs-proposal__folder[b-vts68em370] {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 4px);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--neutral-layer-2, transparent);
}

.cs-proposal__folder-head[b-vts68em370] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-proposal__children[b-vts68em370] {
    list-style: none;
    margin: 0.4rem 0 0.4rem 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-proposal__addchild[b-vts68em370] {
    margin-left: 1.5rem;
}

.cs-run__item--child[b-vts68em370] {
    margin-left: 1.75rem;
}

/* ---- Reorganize plan (spec 079) -------------------------------------- */
.cs-plan__lead[b-vts68em370] {
    color: var(--neutral-foreground-hint);
    margin: 0.25rem 0 0.5rem;
}

.cs-plan[b-vts68em370] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cs-plan__check[b-vts68em370] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    cursor: pointer;
}

.cs-plan__text[b-vts68em370] {
    color: var(--neutral-foreground-rest);
}

/* A faint left accent keys each op kind without shouting. */
.cs-plan__op[b-vts68em370] {
    padding-left: 0.5rem;
    border-left: 3px solid var(--neutral-stroke-divider-rest);
}

.cs-plan__op--create-folder[b-vts68em370],
.cs-plan__op--create-item[b-vts68em370] {
    border-left-color: var(--accent-fill-rest);
}

.cs-plan__op--move[b-vts68em370] {
    border-left-color: var(--neutral-stroke-strong-rest, #888);
}

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