/*
 * Command Slate: component styles.
 * Rules: tokens only (no raw colours), logical properties only (inline-start/end, block-start/end) so
 * the product mirrors for Arabic, one class family per component (cs-*), no vendor overrides.
 * See docs/command-slate-design-system.md.
 */

/* ============================================================================ Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--cs-font);
    font-size: var(--cs-fs-body);
    line-height: var(--cs-lh-body);
    color: var(--cs-text);
    background: var(--cs-workspace);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--cs-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

img, svg { display: block; }

:focus-visible { outline: none; box-shadow: var(--cs-focus-ring); border-radius: var(--cs-radius-sm); }

/* Headings receive focus programmatically after navigation (screen readers announce the new page); no ring for that. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus, .cs-callout[tabindex="-1"]:focus { box-shadow: none; outline: none; }

.cs-tabular { font-variant-numeric: tabular-nums; }

.cs-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.cs-skip-link {
    position: fixed;
    inset-block-start: var(--cs-space-2);
    inset-inline-start: var(--cs-space-2);
    z-index: var(--cs-z-progress);
    padding: var(--cs-space-2) var(--cs-space-4);
    background: var(--cs-surface);
    color: var(--cs-text);
    border-radius: var(--cs-radius-sm);
    box-shadow: var(--cs-shadow-2);
    transform: translateY(-200%);
}
.cs-skip-link:focus { transform: none; }

.cs-icon { flex-shrink: 0; }
[dir="rtl"] .cs-icon.is-directional { transform: scaleX(-1); }

/* ============================================================================ Buttons */

.cs-btn {
    --btn-bg: var(--cs-surface);
    --btn-fg: var(--cs-text);
    --btn-border: var(--cs-border-strong);
    --btn-bg-hover: var(--cs-surface-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-space-2);
    height: var(--cs-control-h);
    padding-inline: 14px;
    border: 1px solid var(--btn-border);
    border-radius: var(--cs-radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--cs-fs-body);
    font-weight: var(--cs-fw-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--cs-duration-fast) var(--cs-ease), border-color var(--cs-duration-fast) var(--cs-ease), color var(--cs-duration-fast) var(--cs-ease);
}
.cs-btn:hover { background: var(--btn-bg-hover); text-decoration: none; }
.cs-btn:disabled, .cs-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.cs-btn--primary { --btn-bg: var(--cs-brand); --btn-fg: var(--cs-text-inverse); --btn-border: var(--cs-brand); --btn-bg-hover: var(--cs-brand-hover); }
.cs-btn--primary:active { background: var(--cs-brand-pressed); }
.cs-btn--secondary { /* default look */ }
.cs-btn--tertiary { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--cs-text-link); --btn-bg-hover: var(--cs-brand-subtle); padding-inline: 10px; }
.cs-btn--danger { --btn-bg: var(--cs-surface); --btn-fg: var(--cs-danger-strong); --btn-border: var(--cs-danger-border); --btn-bg-hover: var(--cs-danger-subtle); }
.cs-btn--danger-solid { --btn-bg: var(--cs-danger); --btn-fg: var(--cs-text-inverse); --btn-border: var(--cs-danger); --btn-bg-hover: var(--cs-danger-strong); }
.cs-btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--cs-text-secondary); --btn-bg-hover: var(--cs-surface-hover); }

.cs-btn--sm { height: var(--cs-control-h-sm); padding-inline: 10px; font-size: 13px; }
.cs-btn--icon { width: var(--cs-control-h); padding: 0; }
.cs-btn--icon.cs-btn--sm { width: var(--cs-control-h-sm); }
.cs-btn--block { width: 100%; }

.cs-btn.is-loading { cursor: progress; }
.cs-btn.is-loading .cs-btn__icon { display: none; }

.cs-spinner {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: cs-spin 700ms linear infinite;
    flex-shrink: 0;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

.cs-kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding-inline: 6px;
    border: 1px solid var(--cs-border);
    border-block-end-width: 2px;
    border-radius: 4px;
    background: var(--cs-surface);
    color: var(--cs-text-secondary);
    font-family: var(--cs-font);
    font-size: var(--cs-fs-micro);
    font-weight: var(--cs-fw-medium);
}

/* ============================================================================ Form controls */

.cs-input, .cs-select, .cs-textarea {
    width: 100%;
    height: var(--cs-control-h);
    padding-inline: 10px;
    border: 1px solid var(--cs-border-control);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-text);
    font: inherit;
    transition: border-color var(--cs-duration-fast) var(--cs-ease), box-shadow var(--cs-duration-fast) var(--cs-ease);
}
.cs-textarea { height: auto; min-height: 96px; padding-block: 8px; resize: vertical; }
.cs-input::placeholder, .cs-textarea::placeholder { color: var(--cs-text-tertiary); }
.cs-input:hover, .cs-select:hover, .cs-textarea:hover { border-color: var(--cs-text-secondary); }
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline: none; border-color: var(--cs-focus); box-shadow: 0 0 0 3px var(--cs-brand-subtle-border); }
.cs-input:disabled, .cs-select:disabled { background: var(--cs-surface-subtle); color: var(--cs-text-secondary); cursor: not-allowed; }
.cs-input.invalid, .cs-select.invalid, .cs-textarea.invalid { border-color: var(--cs-danger); }
.cs-input.invalid:focus, .cs-select.invalid:focus { box-shadow: 0 0 0 3px var(--cs-danger-border); }

.cs-select {
    appearance: none;
    padding-inline-end: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23617086' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}
[dir="rtl"] .cs-select { background-position: left 10px center; }
.cs-select--sm, .cs-input--sm { height: var(--cs-control-h-sm); font-size: 13px; }

.cs-input-group { position: relative; display: flex; align-items: center; }
.cs-input-group > .cs-icon { position: absolute; inset-inline-start: 10px; color: var(--cs-text-tertiary); pointer-events: none; }
.cs-input-group > .cs-input { padding-inline-start: 34px; }
.cs-input-group > .cs-input-group__suffix { position: absolute; inset-inline-end: 6px; }

.cs-checkbox { display: inline-flex; align-items: flex-start; gap: var(--cs-space-2); cursor: pointer; }
.cs-checkbox input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cs-brand); flex-shrink: 0; }

/* ============================================================================ Status badge */

.cs-badge {
    --tone-fg: var(--cs-neutral);
    --tone-text: var(--cs-neutral-strong);
    --tone-bg: var(--cs-neutral-subtle);
    --tone-border: var(--cs-neutral-border);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding-inline: 8px;
    border: 1px solid var(--tone-border);
    border-radius: var(--cs-radius-sm);
    background: var(--tone-bg);
    color: var(--tone-text);
    font-size: var(--cs-fs-support);
    font-weight: var(--cs-fw-semibold);
    line-height: 1;
    white-space: nowrap;
}
.cs-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-fg); flex-shrink: 0; }
.cs-badge--quiet { border-color: transparent; background: transparent; padding-inline: 0; }
.cs-badge--lg { height: 26px; padding-inline: 10px; font-size: 13px; text-transform: none; }

.is-success { --tone-fg: var(--cs-success); --tone-text: var(--cs-success-strong); --tone-bg: var(--cs-success-subtle); --tone-border: var(--cs-success-border); }
.is-warning { --tone-fg: var(--cs-warning); --tone-text: var(--cs-warning-strong); --tone-bg: var(--cs-warning-subtle); --tone-border: var(--cs-warning-border); }
.is-danger  { --tone-fg: var(--cs-danger);  --tone-text: var(--cs-danger-strong);  --tone-bg: var(--cs-danger-subtle);  --tone-border: var(--cs-danger-border); }
.is-info    { --tone-fg: var(--cs-info);    --tone-text: var(--cs-info-strong);    --tone-bg: var(--cs-info-subtle);    --tone-border: var(--cs-info-border); }
.is-neutral { --tone-fg: var(--cs-neutral); --tone-text: var(--cs-neutral-strong); --tone-bg: var(--cs-neutral-subtle); --tone-border: var(--cs-neutral-border); }

.cs-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding-inline: 5px;
    border-radius: 9px;
    background: var(--cs-danger); color: var(--cs-text-inverse);
    font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================ App shell */

.cs-shell {
    --sidebar: var(--cs-sidebar-w);
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    grid-template-rows: var(--cs-topbar-h) auto;
    min-height: 100vh;
}
.cs-shell.is-collapsed { --sidebar: var(--cs-sidebar-w-collapsed); }

.cs-main { grid-column: 2; min-width: 0; }
.cs-canvas {
    max-width: var(--cs-content-max);
    margin-inline: auto;
    padding: var(--cs-content-pad) var(--cs-content-pad) var(--cs-space-8);
}

/* ---- Progress bar (route/data activity) */
.cs-progress {
    position: fixed; inset-block-start: 0; inset-inline: 0;
    height: 2px; z-index: var(--cs-z-progress);
    pointer-events: none; opacity: 0;
    transition: opacity var(--cs-duration) var(--cs-ease);
    overflow: hidden;
}
.cs-progress.is-active { opacity: 1; }
.cs-progress::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
    background: var(--cs-brand);
    animation: cs-progress 1.1s var(--cs-ease) infinite;
}
@keyframes cs-progress { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---- Topbar */
.cs-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky; inset-block-start: 0; z-index: var(--cs-z-topbar);
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    height: var(--cs-topbar-h);
    background: var(--cs-surface);
    border-block-end: 1px solid var(--cs-border);
}
.cs-topbar__brand {
    display: flex; align-items: center; gap: var(--cs-space-3);
    padding-inline: var(--cs-space-4) var(--cs-space-3);
    background: var(--cs-sidebar-bg);
    color: var(--cs-sidebar-text-strong);
    border-block-end: 1px solid var(--cs-sidebar-bg);
    min-width: 0;
}
.cs-topbar__bar {
    display: flex; align-items: center; gap: var(--cs-space-2);
    padding-inline: var(--cs-content-pad);
    min-width: 0;
}
.cs-topbar__spacer { flex: 1; }
.cs-topbar__menu-toggle { display: none; }

.cs-logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.cs-logo:hover { text-decoration: none; }
.cs-logo__mark {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 7px;
    background: var(--cs-brand);
}
.cs-logo__name { font-size: 15px; font-weight: var(--cs-fw-semibold); letter-spacing: -0.01em; white-space: nowrap; }
.cs-logo__name span { color: var(--cs-sidebar-text); font-weight: var(--cs-fw-regular); }
.cs-shell.is-collapsed .cs-logo__name { display: none; }
.cs-shell.is-collapsed .cs-topbar__brand { justify-content: center; padding-inline: 0; }

.cs-search-trigger {
    display: flex; align-items: center; gap: var(--cs-space-2);
    width: min(520px, 100%); height: var(--cs-control-h);
    padding-inline: 10px 6px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface-subtle);
    color: var(--cs-text-tertiary);
    cursor: pointer; text-align: start;
    transition: border-color var(--cs-duration-fast) var(--cs-ease), background-color var(--cs-duration-fast) var(--cs-ease);
}
.cs-search-trigger:hover { border-color: var(--cs-border-strong); background: var(--cs-surface); }
.cs-search-trigger__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-search-trigger__keys { display: flex; gap: 3px; }

.cs-topbar__icon-btn { position: relative; }
.cs-topbar__icon-btn .cs-count { position: absolute; inset-block-start: 2px; inset-inline-end: 1px; box-shadow: 0 0 0 2px var(--cs-surface); }

.cs-user-trigger {
    display: flex; align-items: center; gap: var(--cs-space-2);
    height: 40px; padding-inline: 4px 8px;
    border: 1px solid transparent; border-radius: var(--cs-radius);
    background: transparent; cursor: pointer; text-align: start;
}
.cs-user-trigger:hover { background: var(--cs-surface-hover); }
.cs-user-trigger__text { display: flex; flex-direction: column; line-height: 1.2; }
.cs-user-trigger__name { font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-user-trigger__meta { font-size: var(--cs-fs-support); color: var(--cs-text-secondary); }

/* ---- Sidebar */
.cs-sidebar {
    grid-column: 1; grid-row: 2;
    position: sticky; inset-block-start: var(--cs-topbar-h);
    height: calc(100vh - var(--cs-topbar-h));
    display: flex; flex-direction: column;
    background: var(--cs-sidebar-bg);
    color: var(--cs-sidebar-text);
    z-index: var(--cs-z-sidebar);
}
.cs-sidebar__scroll { flex: 1; overflow-y: auto; padding: var(--cs-space-3) var(--cs-space-3) var(--cs-space-4); scrollbar-width: thin; scrollbar-color: var(--cs-sidebar-active) transparent; }
.cs-sidebar__section + .cs-sidebar__section { margin-block-start: var(--cs-space-4); }
.cs-sidebar__heading {
    padding: 0 10px 6px;
    color: var(--cs-sidebar-heading);
    font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold);
    letter-spacing: 0.07em; text-transform: uppercase;
}
.cs-sidebar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cs-nav-link {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 36px; padding-inline: 10px;
    border-radius: var(--cs-radius-sm);
    color: var(--cs-sidebar-text);
    font-size: var(--cs-fs-body); font-weight: var(--cs-fw-medium);
    text-decoration: none;
    transition: background-color var(--cs-duration-fast) var(--cs-ease), color var(--cs-duration-fast) var(--cs-ease);
}
.cs-nav-link:hover { background: var(--cs-sidebar-hover); color: var(--cs-sidebar-text-strong); text-decoration: none; }
.cs-nav-link.active { background: var(--cs-sidebar-active); color: var(--cs-sidebar-text-strong); }
.cs-nav-link.active::before {
    content: ""; position: absolute;
    inset-inline-start: -12px; inset-block: 8px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--cs-brand-on-dark);
}
[dir="rtl"] .cs-nav-link.active::before { border-radius: 3px 0 0 3px; }
.cs-nav-link.active .cs-icon { color: var(--cs-brand-on-dark); }
.cs-nav-link:focus-visible { box-shadow: 0 0 0 2px var(--cs-brand-on-dark); }
.cs-nav-link__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-nav-link__badge {
    min-width: 20px; height: 18px; padding-inline: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--cs-sidebar-active); color: var(--cs-sidebar-text-strong);
    font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums;
}
.cs-nav-link__badge.is-alert { background: var(--cs-danger); }
.cs-nav-link__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-danger); }
.cs-nav-link__proto {
    font-size: 10px; font-weight: var(--cs-fw-semibold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--cs-sidebar-heading);
}

.cs-sidebar__footer { border-block-start: 1px solid var(--cs-sidebar-border); padding: var(--cs-space-2) var(--cs-space-3); }
.cs-sidebar__collapse {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding-inline: 10px;
    border: 0; border-radius: var(--cs-radius-sm); background: transparent; color: var(--cs-sidebar-text); cursor: pointer;
}
.cs-sidebar__collapse:hover { background: var(--cs-sidebar-hover); color: var(--cs-sidebar-text-strong); }
.cs-shell.is-collapsed .cs-sidebar__collapse .cs-icon { transform: rotate(180deg); }
[dir="rtl"] .cs-shell.is-collapsed .cs-sidebar__collapse .cs-icon { transform: scaleX(-1) rotate(180deg); }

/* Collapsed rail: icons only, headings become thin dividers */
.cs-shell.is-collapsed .cs-sidebar__scroll { padding-inline: var(--cs-space-2); }
.cs-shell.is-collapsed .cs-nav-link { justify-content: center; padding: 0; }
.cs-shell.is-collapsed .cs-nav-link__label,
.cs-shell.is-collapsed .cs-nav-link__proto,
.cs-shell.is-collapsed .cs-sidebar__collapse span { display: none; }
.cs-shell.is-collapsed .cs-nav-link.active::before { inset-inline-start: -8px; }
.cs-shell.is-collapsed .cs-nav-link__badge { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding-inline: 4px; font-size: 10px; }
.cs-shell.is-collapsed .cs-sidebar__heading { height: 1px; padding: 0; margin: 0 10px 8px; background: var(--cs-sidebar-border); font-size: 0; }
.cs-shell.is-collapsed .cs-sidebar__collapse { justify-content: center; padding: 0; }

.cs-nav-scrim { display: none; }

/* ============================================================================ Menus / popovers */

.cs-menu { position: relative; display: inline-flex; }
.cs-menu__backdrop { position: fixed; inset: 0; z-index: var(--cs-z-menu); }
.cs-menu__panel {
    position: absolute; z-index: calc(var(--cs-z-menu) + 1);
    inset-block-start: calc(100% + 6px); inset-inline-end: 0;
    min-width: 220px;
    padding: var(--cs-space-1);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-2);
    animation: cs-pop var(--cs-duration-fast) var(--cs-ease);
}
.cs-menu__panel.is-start { inset-inline-end: auto; inset-inline-start: 0; }
.cs-menu__panel.is-up { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
@keyframes cs-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.cs-menu__label { padding: 8px 10px 4px; color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.cs-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; padding: 6px 10px;
    border: 0; border-radius: var(--cs-radius-sm);
    background: transparent; color: var(--cs-text);
    font-size: var(--cs-fs-body); text-align: start; text-decoration: none; cursor: pointer;
}
.cs-menu__item:hover, .cs-menu__item:focus-visible { background: var(--cs-surface-hover); text-decoration: none; box-shadow: none; }
.cs-menu__item .cs-icon { color: var(--cs-text-secondary); }
.cs-menu__item.is-danger { color: var(--cs-danger-strong); }
.cs-menu__item.is-danger .cs-icon { color: var(--cs-danger); }
.cs-menu__item.is-checked { font-weight: var(--cs-fw-medium); }
.cs-menu__item-hint { margin-inline-start: auto; color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); }
.cs-menu__divider { height: 1px; margin: 4px 0; background: var(--cs-border-subtle); }
.cs-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* ---- Notifications */
.cs-notifications { width: 380px; padding: 0; }
.cs-notifications__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-block-end: 1px solid var(--cs-border-subtle); }
.cs-notifications__title { font-size: var(--cs-fs-section); font-weight: var(--cs-fw-semibold); }
.cs-notifications__list { list-style: none; margin: 0; padding: 4px; max-height: 420px; overflow-y: auto; }
.cs-notification {
    position: relative; display: grid; grid-template-columns: 8px 1fr; gap: 10px;
    padding: 10px 10px 10px 8px; border-radius: var(--cs-radius-sm); color: var(--cs-text); text-decoration: none;
}
.cs-notification:hover { background: var(--cs-surface-hover); text-decoration: none; }
.cs-notification__dot { width: 8px; height: 8px; margin-block-start: 6px; border-radius: 50%; background: transparent; }
.cs-notification.is-unread .cs-notification__dot { background: var(--cs-brand); }
.cs-notification__title { display: flex; align-items: center; gap: 6px; font-weight: var(--cs-fw-semibold); }
.cs-notification.is-read .cs-notification__title { font-weight: var(--cs-fw-medium); color: var(--cs-text-secondary); }
.cs-notification__body { margin-block-start: 2px; color: var(--cs-text-secondary); font-size: 13px; }
.cs-notification__meta { display: flex; gap: 8px; margin-block-start: 4px; color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); }
.cs-notification__priority { color: var(--cs-danger-strong); font-weight: var(--cs-fw-semibold); }
.cs-notifications__foot { padding: 8px; border-block-start: 1px solid var(--cs-border-subtle); text-align: center; }

/* ============================================================================ Command palette */

.cs-palette-scrim { position: fixed; inset: 0; z-index: var(--cs-z-palette); background: var(--cs-scrim); animation: cs-fade var(--cs-duration) var(--cs-ease); }
.cs-palette {
    position: fixed; z-index: calc(var(--cs-z-palette) + 1);
    inset-block-start: 12vh; inset-inline-start: 50%;
    width: min(640px, calc(100vw - 32px));
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    max-height: min(560px, 76vh);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-3);
    overflow: hidden;
    animation: cs-palette-in var(--cs-duration) var(--cs-ease);
}
[dir="rtl"] .cs-palette { transform: translateX(50%); }
@keyframes cs-palette-in { from { opacity: 0; margin-block-start: -8px; } to { opacity: 1; margin-block-start: 0; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
.cs-palette__search { display: flex; align-items: center; gap: 10px; padding-inline: 16px; border-block-end: 1px solid var(--cs-border-subtle); }
.cs-palette__search .cs-icon { color: var(--cs-text-secondary); }
.cs-palette__input { flex: 1; height: 54px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--cs-text); }
.cs-palette__input:focus { outline: none; box-shadow: none; }
.cs-palette__input::placeholder { color: var(--cs-text-tertiary); }
.cs-palette__results { flex: 1; overflow-y: auto; padding: 6px; }
.cs-palette__group { padding: 10px 10px 4px; color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); letter-spacing: .07em; text-transform: uppercase; }
.cs-palette__option {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px; padding: 6px 10px;
    border-radius: var(--cs-radius-sm);
    cursor: pointer;
}
.cs-palette__option.is-active { background: var(--cs-surface-selected); }
.cs-palette__option-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--cs-radius-sm); background: var(--cs-surface-subtle); border: 1px solid var(--cs-border-subtle); color: var(--cs-text-secondary); }
.cs-palette__option.is-active .cs-palette__option-icon { background: var(--cs-surface); color: var(--cs-brand); border-color: var(--cs-brand-subtle-border); }
.cs-palette__option-text { display: flex; flex-direction: column; min-width: 0; }
.cs-palette__option-title { font-weight: var(--cs-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-palette__option-sub { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-palette__option-enter { margin-inline-start: auto; color: var(--cs-text-tertiary); visibility: hidden; }
.cs-palette__option.is-active .cs-palette__option-enter { visibility: visible; }
.cs-palette__empty { padding: 32px 16px; text-align: center; color: var(--cs-text-secondary); }
.cs-palette__foot { display: flex; gap: 16px; padding: 8px 14px; border-block-start: 1px solid var(--cs-border-subtle); background: var(--cs-surface-subtle); color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-palette__foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================================ Page headers */

.cs-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cs-space-4); margin-block-end: var(--cs-space-5); }
.cs-page-header__title { font-size: var(--cs-fs-page); line-height: var(--cs-lh-page); font-weight: var(--cs-fw-semibold); letter-spacing: -0.015em; }
.cs-page-header__description { margin-block-start: 4px; color: var(--cs-text-secondary); }
.cs-page-header__actions { display: flex; align-items: center; gap: var(--cs-space-2); flex-shrink: 0; }

.cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block-end: var(--cs-space-2); color: var(--cs-text-secondary); font-size: 13px; }
.cs-breadcrumb ol { display: contents; list-style: none; }
.cs-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.cs-breadcrumb a { color: var(--cs-text-secondary); }
.cs-breadcrumb a:hover { color: var(--cs-text); }
.cs-breadcrumb [aria-current="page"] { color: var(--cs-text); font-weight: var(--cs-fw-medium); }

.cs-details-header {
    margin: calc(var(--cs-content-pad) * -1) calc(var(--cs-content-pad) * -1) 0;
    padding: var(--cs-space-4) var(--cs-content-pad) 0;
    background: var(--cs-surface);
    border-block-end: 1px solid var(--cs-border);
}
.cs-details-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cs-space-4); }
.cs-details-header__identity { min-width: 0; }
.cs-details-header__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cs-space-3); }
.cs-details-header__title { font-size: var(--cs-fs-entity); line-height: var(--cs-lh-entity); font-weight: var(--cs-fw-semibold); letter-spacing: -0.015em; }
.cs-details-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block-start: 6px; color: var(--cs-text-secondary); }
.cs-details-header__meta > * + *::before { content: "·"; margin-inline-end: 10px; color: var(--cs-border-strong); }
.cs-details-header__meta .cs-link-button { font-weight: var(--cs-fw-medium); }
.cs-details-header__actions { display: flex; gap: var(--cs-space-2); flex-shrink: 0; }
.cs-details-header__tabs { margin-block-start: var(--cs-space-4); }
.cs-details-body { padding-block-start: var(--cs-space-5); }

.cs-link-button { padding: 0; border: 0; background: none; color: var(--cs-text-link); font: inherit; cursor: pointer; text-align: start; }
.cs-link-button:hover { text-decoration: underline; }
.cs-link-button.is-quiet { color: inherit; font-weight: var(--cs-fw-medium); text-decoration: underline; text-decoration-color: var(--cs-border-strong); text-underline-offset: 3px; }
.cs-link-button.is-quiet:hover { text-decoration-color: currentColor; }

/* ============================================================================ Tabs */

.cs-tabs { display: flex; gap: var(--cs-space-5); overflow-x: auto; scrollbar-width: none; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: 42px; padding: 0 2px;
    border: 0; background: none; color: var(--cs-text-secondary);
    font-weight: var(--cs-fw-medium); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.cs-tab:hover { color: var(--cs-text); text-decoration: none; }
.cs-tab[aria-selected="true"] { color: var(--cs-text); }
.cs-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--cs-brand); }
.cs-tab__count { min-width: 20px; height: 18px; padding-inline: 6px; border-radius: 9px; background: var(--cs-neutral-subtle); color: var(--cs-neutral-strong); font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); display: inline-grid; place-items: center; }

/* ============================================================================ Panels, sections, stats */

.cs-panel { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3); min-height: 52px; padding: 12px var(--cs-space-4); border-block-end: 1px solid var(--cs-border-subtle); }
.cs-panel__title { font-size: var(--cs-fs-section); line-height: var(--cs-lh-section); font-weight: var(--cs-fw-semibold); }
.cs-panel__subtitle { color: var(--cs-text-secondary); font-size: 13px; }
.cs-panel__body { padding: var(--cs-space-4); }
.cs-panel__body.is-flush { padding: 0; }
.cs-panel__foot { padding: 10px var(--cs-space-4); border-block-start: 1px solid var(--cs-border-subtle); }

.cs-eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-block-end: var(--cs-space-3);
    color: var(--cs-text-secondary);
    font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); letter-spacing: .08em; text-transform: uppercase;
}
.cs-eyebrow::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--cs-brand); }
.cs-eyebrow__aside { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-weight: var(--cs-fw-regular); font-size: var(--cs-fs-support); }

.cs-stack { display: grid; gap: var(--cs-space-5); }
.cs-cols { display: grid; gap: var(--cs-space-4); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cs-cols--2 { --cols: 2; }
.cs-cols--3 { --cols: 3; }
.cs-cols--main-aside { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }

.cs-stat-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
}
.cs-stat { padding: 14px var(--cs-space-4); min-width: 0; }
.cs-stat + .cs-stat { border-inline-start: 1px solid var(--cs-border-subtle); }
.cs-stat__label { display: flex; align-items: center; gap: 6px; color: var(--cs-text-secondary); font-size: 13px; font-weight: var(--cs-fw-medium); }
.cs-stat__value { margin-block-start: 6px; font-size: 22px; line-height: 28px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cs-stat__value.is-kpi { font-size: var(--cs-fs-kpi); line-height: var(--cs-lh-kpi); }
.cs-stat__hint { margin-block-start: 2px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* Attention strip: one segmented surface, not five cards */
.cs-attention { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); overflow: hidden; }
.cs-attention__item {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px 14px;
    color: var(--cs-text); text-decoration: none;
    transition: background-color var(--cs-duration-fast) var(--cs-ease);
}
.cs-attention__item + .cs-attention__item { border-inline-start: 1px solid var(--cs-border-subtle); }
.cs-attention__item::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: var(--tone-fg, var(--cs-neutral)); }
.cs-attention__item:hover { background: var(--cs-surface-subtle); text-decoration: none; }
.cs-attention__label { display: flex; align-items: center; gap: 8px; color: var(--cs-text-secondary); font-size: 13px; font-weight: var(--cs-fw-medium); }
.cs-attention__label .cs-icon { color: var(--tone-fg, var(--cs-neutral)); }
.cs-attention__value { margin-block-start: 6px; font-size: var(--cs-fs-kpi); line-height: var(--cs-lh-kpi); font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cs-attention__context { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-attention__cta { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 8px; color: var(--cs-text-link); font-size: 13px; font-weight: var(--cs-fw-medium); }

/* Compact work lists inside panels */
.cs-worklist { list-style: none; margin: 0; padding: 0; }
.cs-worklist__row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 56px; padding: 8px var(--cs-space-4);
    border-block-end: 1px solid var(--cs-border-subtle);
}
.cs-worklist__row:last-child { border-block-end: 0; }
.cs-worklist__title { font-weight: var(--cs-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-worklist__title a, .cs-worklist__title button { color: var(--cs-text); }
.cs-worklist__sub { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-worklist__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }
.cs-worklist__amount { font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; }

/* Meters */
.cs-meter { height: 6px; border-radius: 3px; background: var(--cs-neutral-subtle); overflow: hidden; }
.cs-meter__fill { height: 100%; border-radius: 3px; background: var(--cs-accent); }
.cs-meter-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 2fr) 56px; align-items: center; gap: 12px; padding-block: 8px; }
.cs-meter-row__label { font-weight: var(--cs-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-meter-row__value { text-align: end; font-variant-numeric: tabular-nums; color: var(--cs-text-secondary); }

/* Definition lists */
.cs-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px 16px; margin: 0; }
.cs-dl dt { color: var(--cs-text-secondary); }
.cs-dl dd { margin: 0; font-weight: var(--cs-fw-medium); min-width: 0; overflow-wrap: anywhere; }
.cs-dl--stacked { grid-template-columns: 1fr; gap: 2px; }
.cs-dl--stacked dd { margin-block-end: 12px; }

.cs-key-fact__label { color: var(--cs-text-secondary); font-size: 13px; }
.cs-key-fact__value { margin-block-start: 4px; font-size: 20px; line-height: 26px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; }
.cs-key-fact__hint { margin-block-start: 4px; color: var(--cs-text-secondary); font-size: 13px; }

/* Avatar */
.cs-avatar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: var(--size, 32px); height: var(--size, 32px);
    border-radius: 50%;
    background: var(--cs-accent-subtle); color: var(--cs-accent);
    font-size: calc(var(--size, 32px) * 0.38); font-weight: var(--cs-fw-semibold); letter-spacing: .02em;
}
.cs-avatar.is-brand { background: var(--cs-brand-subtle); color: var(--cs-brand-pressed); }

/* Activity timeline */
.cs-timeline { list-style: none; margin: 0; padding: 0; }
.cs-timeline li { position: relative; padding-inline-start: 22px; padding-block-end: 14px; }
.cs-timeline li::before { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-border-strong); }
.cs-timeline li::after { content: ""; position: absolute; inset-inline-start: 8px; inset-block: 16px 0; width: 1px; background: var(--cs-border-subtle); }
.cs-timeline li:last-child::after { display: none; }
.cs-timeline__meta { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* Callout */
.cs-callout { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--tone-border); border-radius: var(--cs-radius); background: var(--tone-bg); color: var(--tone-text); }
.cs-callout .cs-icon { color: var(--tone-fg); margin-block-start: 1px; }
.cs-callout__title { font-weight: var(--cs-fw-semibold); }
.cs-callout__body { color: var(--cs-text); }

/* ============================================================================ Data grid */

.cs-grid { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-grid__toolbar { padding: 12px var(--cs-space-4); border-block-end: 1px solid var(--cs-border-subtle); }

.cs-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); }
.cs-filterbar__search { flex: 1 1 260px; max-width: 360px; }
.cs-filterbar__select { flex: 0 1 180px; }
.cs-filterbar__select--narrow { flex-basis: 128px; }
.cs-filterbar__end { margin-inline-start: auto; display: flex; gap: var(--cs-space-2); }
.cs-filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); gap: var(--cs-space-3); margin-block-start: var(--cs-space-3); padding: var(--cs-space-3); border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); }
.cs-filter-panel__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--cs-space-2); }

.cs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 10px; }
.cs-chips__label { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-medium); margin-inline-end: 2px; }
.cs-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px; padding-inline: 10px 4px;
    border: 1px solid var(--cs-brand-subtle-border); border-radius: var(--cs-radius-sm);
    background: var(--cs-brand-subtle); color: var(--cs-info-strong);
    font-size: 13px; font-weight: var(--cs-fw-medium);
}
.cs-chip__key { color: var(--cs-text-secondary); font-weight: var(--cs-fw-regular); }
.cs-chip__remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--cs-info-strong); cursor: pointer; }
.cs-chip__remove:hover { background: var(--cs-brand-subtle-border); }

.cs-grid__viewport { position: relative; }
.cs-grid__loadbar { position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; overflow: hidden; z-index: 2; }
.cs-grid__loadbar::before { content: ""; position: absolute; inset-block: 0; width: 30%; background: var(--cs-brand); animation: cs-progress 1s var(--cs-ease) infinite; }

.cs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cs-fs-grid); line-height: var(--cs-lh-grid); }
.cs-table th {
    position: sticky; inset-block-start: var(--cs-topbar-h); z-index: var(--cs-z-sticky);
    height: 38px; padding: 0 12px;
    background: var(--cs-surface-subtle);
    border-block-end: 1px solid var(--cs-border);
    color: var(--cs-text-secondary);
    font-size: var(--cs-fs-support); font-weight: var(--cs-fw-semibold); text-align: start; white-space: nowrap;
}
.cs-table td {
    height: var(--row-h, var(--cs-row-standard));
    padding: 0 12px;
    border-block-end: 1px solid var(--cs-border-subtle);
    vertical-align: middle;
}
.cs-table th:first-child, .cs-table td:first-child { padding-inline-start: var(--cs-space-4); }
.cs-table th:last-child, .cs-table td:last-child { padding-inline-end: var(--cs-space-4); }
.cs-table tbody tr:last-child td { border-block-end: 0; }
.cs-table tbody tr { transition: background-color var(--cs-duration-fast) var(--cs-ease); }
.cs-table tbody tr.is-clickable { cursor: pointer; }
.cs-table tbody tr:hover { background: var(--cs-surface-hover); }
.cs-table .is-end { text-align: end; }
.cs-table .is-num { font-variant-numeric: tabular-nums; }
.cs-table .is-muted { color: var(--cs-text-tertiary); }
.cs-table .cs-cell-primary { color: var(--cs-text); font-weight: var(--cs-fw-semibold); text-decoration: none; }
.cs-table .cs-cell-primary:hover { color: var(--cs-text-link); text-decoration: underline; }
.cs-table .cs-cell-sub { display: block; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-regular); }

.cs-sort {
    display: inline-flex; align-items: center; gap: 4px; margin-inline: -4px; padding: 4px;
    border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer;
}
.cs-sort:hover { color: var(--cs-text); background: var(--cs-surface-hover); }
.cs-sort .cs-icon { opacity: .45; }
.cs-sort.is-sorted { color: var(--cs-text); }
.cs-sort.is-sorted .cs-icon { opacity: 1; color: var(--cs-brand); }
.cs-table th.is-end .cs-sort { flex-direction: row-reverse; }

.cs-grid.is-refreshing .cs-table tbody { opacity: .5; transition: opacity var(--cs-duration-fast) var(--cs-ease); }

.cs-grid--compact { --row-h: var(--cs-row-compact); }
.cs-grid--standard { --row-h: var(--cs-row-standard); }
.cs-grid--comfortable { --row-h: var(--cs-row-comfortable); }
.cs-grid--compact .cs-table { font-size: 13px; }
.cs-grid--comfortable .cs-table { font-size: var(--cs-fs-body); }

.cs-priority-p2 { display: none; }
.cs-priority-p3 { display: none; }
@media (min-width: 768px) { .cs-priority-p2 { display: table-cell; } }
@media (min-width: 1200px) { .cs-priority-p3 { display: table-cell; } }
.cs-grid__table-wrap { display: none; }
@media (min-width: 768px) { .cs-grid__table-wrap { display: block; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .cs-grid__table-wrap { overflow-x: auto; } .cs-table th { position: static; } }

/* Phone: cards, not a squeezed table */
.cs-grid__cards { list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .cs-grid__cards { display: none; } }
.cs-grid-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px var(--cs-space-4); border-block-end: 1px solid var(--cs-border-subtle); }
.cs-grid-card:last-child { border-block-end: 0; }
.cs-grid-card__title { font-weight: var(--cs-fw-semibold); }
.cs-grid-card .cs-worklist__sub { white-space: normal; }
.cs-grid-card__title a { color: var(--cs-text); }
.cs-grid-card__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--cs-text-secondary); font-size: 13px; }

.cs-grid__banner { display: flex; align-items: center; gap: 10px; margin: 12px var(--cs-space-4) 0; }

.cs-grid__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--cs-space-4); border-block-start: 1px solid var(--cs-border); }
.cs-grid__summary { color: var(--cs-text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.cs-grid__summary strong { color: var(--cs-text); font-weight: var(--cs-fw-semibold); }
.cs-grid__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); }
.cs-grid__page-size { display: flex; align-items: center; gap: 6px; color: var(--cs-text-secondary); font-size: 13px; }
.cs-grid__page-size .cs-select { width: auto; }

.cs-pager { display: flex; align-items: center; gap: 2px; }
.cs-pager__btn {
    min-width: 32px; height: 32px; padding-inline: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid transparent; border-radius: var(--cs-radius-sm);
    background: transparent; color: var(--cs-text); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cs-pager__btn:hover:not(:disabled) { background: var(--cs-surface-hover); }
.cs-pager__btn[aria-current="page"] { border-color: var(--cs-brand-subtle-border); background: var(--cs-brand-subtle); color: var(--cs-info-strong); font-weight: var(--cs-fw-semibold); }
.cs-pager__btn:disabled { color: var(--cs-text-tertiary); cursor: not-allowed; opacity: .6; }
.cs-pager__gap { width: 24px; text-align: center; color: var(--cs-text-tertiary); }
.cs-pager__compact { display: none; padding-inline: 8px; color: var(--cs-text-secondary); font-size: 13px; }
@media (max-width: 767.98px) { .cs-pager__num, .cs-pager__gap { display: none; } .cs-pager__compact { display: inline; } }

.cs-column-chooser { width: 240px; }
.cs-column-chooser .cs-checkbox { padding: 6px 10px; width: 100%; border-radius: var(--cs-radius-sm); }
.cs-column-chooser .cs-checkbox:hover { background: var(--cs-surface-hover); }
.cs-column-chooser .cs-checkbox.is-locked { color: var(--cs-text-tertiary); cursor: default; }

/* ============================================================================ Empty / error states */

.cs-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; }
.cs-state__icon {
    display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: 8px;
    border-radius: var(--cs-radius); border: 1px solid var(--tone-border, var(--cs-border)); background: var(--tone-bg, var(--cs-surface-subtle)); color: var(--tone-fg, var(--cs-text-secondary));
}
.cs-state__title { font-size: var(--cs-fs-section); line-height: var(--cs-lh-section); font-weight: var(--cs-fw-semibold); }
.cs-state__text { max-width: 420px; color: var(--cs-text-secondary); }
.cs-state__actions { display: flex; gap: var(--cs-space-2); margin-block-start: 10px; }
.cs-state--compact { padding: 28px 16px; }

/* ============================================================================ Skeletons */

.cs-skel {
    display: block; height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, var(--cs-skeleton) 0%, var(--cs-skeleton-shine) 50%, var(--cs-skeleton) 100%);
    background-size: 200% 100%;
    animation: cs-shimmer 1.4s ease-in-out infinite;
}
@keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cs-skel--title { height: 22px; width: 240px; }
.cs-skel--text { height: 12px; }
.cs-skel--value { height: 26px; width: 55%; }
.cs-skel--badge { height: 22px; width: 76px; border-radius: var(--cs-radius-sm); }
.cs-skel--circle { border-radius: 50%; }
.cs-skel--block { height: 100%; min-height: 160px; border-radius: var(--cs-radius); }
.cs-skel-row td { height: var(--row-h, var(--cs-row-standard)); }

/* ============================================================================ Drawer */

.cs-drawer-scrim { position: fixed; inset: 0; z-index: var(--cs-z-drawer); background: var(--cs-scrim-light); animation: cs-fade var(--cs-duration) var(--cs-ease); }
.cs-drawer {
    position: fixed; z-index: calc(var(--cs-z-drawer) + 1);
    inset-block: 0; inset-inline-end: 0;
    width: var(--cs-drawer-w); max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--cs-surface);
    border-inline-start: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-3);
    animation: cs-drawer-in var(--cs-duration-slow) var(--cs-ease);
}
@keyframes cs-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .cs-drawer { animation-name: cs-drawer-in-rtl; }
@keyframes cs-drawer-in-rtl { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px var(--cs-space-5); border-block-end: 1px solid var(--cs-border-subtle); }
.cs-drawer__eyebrow { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-medium); }
.cs-drawer__title { margin-block-start: 2px; font-size: 18px; line-height: 24px; font-weight: var(--cs-fw-semibold); }
.cs-drawer__body { flex: 1; overflow-y: auto; padding: var(--cs-space-5); }
.cs-drawer__section + .cs-drawer__section { margin-block-start: var(--cs-space-5); padding-block-start: var(--cs-space-5); border-block-start: 1px solid var(--cs-border-subtle); }
.cs-drawer__foot { display: flex; gap: var(--cs-space-2); justify-content: flex-end; padding: 12px var(--cs-space-5); border-block-start: 1px solid var(--cs-border-subtle); background: var(--cs-surface-subtle); }

/* ============================================================================ Dialog */

.cs-dialog-scrim { position: fixed; inset: 0; z-index: var(--cs-z-dialog); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: var(--cs-scrim); animation: cs-fade var(--cs-duration) var(--cs-ease); }
.cs-dialog {
    width: min(480px, 100%); max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--cs-surface); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-3);
    animation: cs-dialog-in var(--cs-duration) var(--cs-ease);
}
.cs-dialog--md { width: min(560px, 100%); }
@keyframes cs-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cs-dialog__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 0 var(--cs-space-5); }
.cs-dialog__title { font-size: 18px; line-height: 24px; font-weight: var(--cs-fw-semibold); }
.cs-dialog__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--cs-radius); background: var(--tone-bg); color: var(--tone-fg); flex-shrink: 0; }
.cs-dialog__body { padding: 12px var(--cs-space-5) 20px; overflow-y: auto; color: var(--cs-text-secondary); }
.cs-dialog__body .cs-field { color: var(--cs-text); }
.cs-dialog__foot { display: flex; justify-content: flex-end; gap: var(--cs-space-2); padding: 14px var(--cs-space-5); border-block-start: 1px solid var(--cs-border-subtle); background: var(--cs-surface-subtle); border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg); }

/* ============================================================================ Toasts */

.cs-toasts { position: fixed; z-index: var(--cs-z-toast); inset-block-end: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.cs-toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 12px 14px;
    background: var(--cs-surface-inverse); color: var(--cs-text-inverse);
    border-radius: var(--cs-radius); box-shadow: var(--cs-shadow-3);
    animation: cs-toast-in var(--cs-duration-slow) var(--cs-ease);
}
@keyframes cs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cs-toast__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cs-success); color: var(--cs-text-inverse); }
.cs-toast.is-info .cs-toast__icon { background: var(--cs-brand); }
.cs-toast.is-warning .cs-toast__icon { background: var(--cs-warning); }
.cs-toast.is-danger .cs-toast__icon { background: var(--cs-danger); }
.cs-toast__text { flex: 1; font-weight: var(--cs-fw-medium); }
.cs-toast__action { color: var(--cs-brand-on-dark); font-weight: var(--cs-fw-semibold); }
.cs-toast__close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--cs-radius-sm); background: transparent; color: var(--cs-sidebar-text); cursor: pointer; }
.cs-toast__close:hover { background: var(--cs-sidebar-active); color: var(--cs-text-inverse); }

/* ============================================================================ Forms */

.cs-form { display: grid; gap: var(--cs-space-4); max-width: 960px; }
.cs-form-section { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--cs-space-5); padding: var(--cs-space-5); background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-form-section__title { font-size: var(--cs-fs-section); line-height: var(--cs-lh-section); font-weight: var(--cs-fw-semibold); }
.cs-form-section__description { margin-block-start: 4px; color: var(--cs-text-secondary); font-size: 13px; }
.cs-form-section__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-4); align-content: start; }
.cs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-field--wide { grid-column: 1 / -1; }
.cs-field__label { font-size: 13px; font-weight: var(--cs-fw-medium); color: var(--cs-text); }
.cs-field__required { margin-inline-start: 2px; color: var(--cs-danger); }
.cs-field__help { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-field .validation-message, .cs-field__error { display: flex; align-items: center; gap: 4px; color: var(--cs-danger-strong); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-medium); }
.cs-form-error { margin-block-end: var(--cs-space-4); max-width: 960px; }
/* Dialog forms (≤ 4 fields): one column, fields stacked. */
.cs-form-stack { display: grid; gap: var(--cs-space-4); }
/* A row of related buttons inside a panel. */
.cs-button-row { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }
/* A masked identity number with its Show / Hide toggle. */
.cs-sensitive { display: inline-flex; align-items: baseline; gap: var(--cs-space-2); }
/* Search-and-add picker (tenants on a lease): results list under the input, chosen items below. */
.cs-picker { position: relative; }
.cs-picker__results { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); box-shadow: var(--cs-shadow-2, 0 8px 24px rgba(15, 23, 42, 0.12)); max-height: 280px; overflow-y: auto; }
.cs-picker__option { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--cs-radius-sm, 6px); background: none; color: var(--cs-text); text-align: start; cursor: pointer; font: inherit; }
.cs-picker__option:hover:not(:disabled), .cs-picker__option:focus-visible { background: var(--cs-surface-subtle); }
.cs-picker__option:disabled { color: var(--cs-text-tertiary); cursor: default; }
.cs-picker__status { margin-block-start: 6px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-picker__selected { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cs-picker__selected li { display: flex; align-items: center; gap: var(--cs-space-2); padding: 6px 10px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); }
.cs-picker__selected .cs-radio { flex: 1; }
.cs-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cs-form-error ul { margin: 6px 0 0; padding-inline-start: 18px; }
.cs-form-actions {
    position: sticky; inset-block-end: 0; z-index: var(--cs-z-sticky);
    display: flex; align-items: center; justify-content: flex-end; gap: var(--cs-space-2);
    max-width: 960px; margin-block-start: var(--cs-space-4);
    padding: 12px var(--cs-space-4);
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-2);
}
.cs-form-actions__status { margin-inline-end: auto; color: var(--cs-text-secondary); font-size: 13px; }
.cs-form-actions__status.is-dirty { color: var(--cs-warning-strong); font-weight: var(--cs-fw-medium); }

/* ============================================================================ Contract lifecycle */

.cs-lifecycle { list-style: none; margin: 0; padding: 0; }
.cs-lifecycle__step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding-block-end: 22px; }
.cs-lifecycle__step:last-child { padding-block-end: 0; }
.cs-lifecycle__step::after { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 30px 2px; width: 2px; border-radius: 1px; background: var(--cs-border); }
.cs-lifecycle__step:last-child::after { display: none; }
.cs-lifecycle__step.is-done::after { background: var(--cs-accent); }
.cs-lifecycle__marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cs-border-strong); background: var(--cs-surface); color: var(--cs-text-tertiary); }
.cs-lifecycle__step.is-done .cs-lifecycle__marker { border-color: var(--cs-accent); background: var(--cs-accent); color: var(--cs-text-inverse); }
.cs-lifecycle__step.is-current .cs-lifecycle__marker { border-color: var(--cs-brand); color: var(--cs-brand); box-shadow: 0 0 0 4px var(--cs-brand-subtle); }
.cs-lifecycle__step.is-current .cs-lifecycle__marker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cs-brand); }
.cs-lifecycle__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 28px; font-weight: var(--cs-fw-semibold); }
.cs-lifecycle__step.is-pending .cs-lifecycle__title { color: var(--cs-text-secondary); font-weight: var(--cs-fw-medium); }
.cs-lifecycle__meta { color: var(--cs-text-secondary); font-size: 13px; }
.cs-lifecycle__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); margin-block-start: 10px; }

.cs-lifecycle-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cs-lifecycle-bar__seg { height: 4px; border-radius: 2px; background: var(--cs-border); }
.cs-lifecycle-bar__seg.is-done { background: var(--cs-accent); }
.cs-lifecycle-bar__seg.is-current { background: var(--cs-brand); }

.cs-segmented { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); }
.cs-segmented button { height: 28px; padding-inline: 10px; border: 0; border-radius: var(--cs-radius-sm); background: transparent; color: var(--cs-text-secondary); font-size: 13px; font-weight: var(--cs-fw-medium); cursor: pointer; }
.cs-segmented button[aria-pressed="true"] { background: var(--cs-surface); color: var(--cs-text); box-shadow: var(--cs-shadow-1), 0 0 0 1px var(--cs-border); }

/* Lease term bar */
.cs-term { position: relative; margin-block: 18px 8px; }
.cs-term__track { height: 8px; border-radius: 4px; background: var(--cs-neutral-subtle); overflow: hidden; }
.cs-term__elapsed { height: 100%; background: var(--cs-accent); border-radius: 4px; }
.cs-term.is-expiring .cs-term__elapsed { background: var(--cs-warning); }
.cs-term__today { position: absolute; inset-block-start: -18px; transform: translateX(-50%); font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); white-space: nowrap; }
[dir="rtl"] .cs-term__today { transform: translateX(50%); }
.cs-term__ends { display: flex; justify-content: space-between; margin-block-start: 8px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* ============================================================================ Auth + external layouts */

.cs-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; background: var(--cs-surface); }
.cs-auth__form-side { display: flex; flex-direction: column; padding: 32px 40px; }
.cs-auth__form-wrap { flex: 1; display: grid; place-items: center; }
.cs-auth__form { width: min(380px, 100%); display: grid; gap: var(--cs-space-4); }
.cs-auth__title { font-size: var(--cs-fs-page); line-height: var(--cs-lh-page); font-weight: var(--cs-fw-semibold); letter-spacing: -0.015em; }
.cs-auth__subtitle { color: var(--cs-text-secondary); margin-block-start: 4px; }
.cs-auth__legal { color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); }
.cs-auth__hint { margin: 0; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); text-align: center; }
.cs-auth__panel {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: var(--cs-space-5);
    padding: 48px;
    background: var(--cs-sidebar-bg); color: var(--cs-sidebar-text);
}
.cs-auth__panel::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--cs-sidebar-border) 1px, transparent 1px), linear-gradient(90deg, var(--cs-sidebar-border) 1px, transparent 1px);
    background-size: 44px 44px; opacity: .55;
    mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent);
}
.cs-auth__panel > * { position: relative; }
.cs-auth__statement { max-width: 520px; color: var(--cs-sidebar-text-strong); font-size: 28px; line-height: 36px; font-weight: var(--cs-fw-semibold); letter-spacing: -0.02em; }
.cs-auth__points { display: grid; gap: 10px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.cs-auth__points li { display: flex; gap: 10px; align-items: flex-start; }
.cs-auth__points .cs-icon { color: var(--cs-brand-on-dark); margin-block-start: 2px; }
.cs-auth__preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 520px; border: 1px solid var(--cs-sidebar-border); border-radius: var(--cs-radius); background: var(--cs-sidebar-border); overflow: hidden; }
.cs-auth__preview div { padding: 14px 16px; background: var(--cs-sidebar-hover); }
.cs-auth__preview strong { display: block; color: var(--cs-sidebar-text-strong); font-size: 20px; font-variant-numeric: tabular-nums; }
.cs-auth__preview span { font-size: var(--cs-fs-support); }
.cs-proto-note { display: flex; gap: 8px; padding: 10px 12px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

.cs-external { min-height: 100vh; background: var(--cs-workspace); }
.cs-external__bar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-inline: 24px; background: var(--cs-surface); border-block-end: 1px solid var(--cs-border); }
.cs-external__company { display: flex; align-items: center; gap: 10px; font-weight: var(--cs-fw-semibold); }
.cs-external__secure { display: inline-flex; align-items: center; gap: 6px; color: var(--cs-success-strong); font-size: 13px; font-weight: var(--cs-fw-medium); }
.cs-external__main { max-width: 1080px; margin-inline: auto; padding: 32px 24px 64px; }
.cs-external__foot { padding: 24px; text-align: center; color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); }

.cs-sign { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--cs-space-5); align-items: start; }
.cs-sign__doc { background: var(--cs-surface-subtle); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-sign__doc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-block-end: 1px solid var(--cs-border); background: var(--cs-surface); border-radius: var(--cs-radius) var(--cs-radius) 0 0; font-size: 13px; }
.cs-sign__pages { display: grid; gap: 16px; max-height: 70vh; overflow-y: auto; padding: 20px; }
.cs-page-sheet { padding: 40px 44px; background: var(--cs-surface); border: 1px solid var(--cs-border-subtle); box-shadow: var(--cs-shadow-1); font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.6; color: var(--cs-text); }
.cs-page-sheet h3 { font-family: var(--cs-font); font-size: 15px; margin-block-end: 12px; }
.cs-page-sheet p + p { margin-block-start: 8px; }
.cs-page-sheet__foot { margin-block-start: 24px; color: var(--cs-text-tertiary); font-family: var(--cs-font); font-size: 11px; text-align: end; }
.cs-sign__panel { position: sticky; inset-block-start: 24px; }
.cs-signature-pad { position: relative; height: 140px; border: 1px dashed var(--cs-border-control); border-radius: var(--cs-radius); background: var(--cs-surface); touch-action: none; }
.cs-signature-pad canvas { width: 100%; height: 100%; }
.cs-signature-pad__line { position: absolute; inset-inline: 16px; inset-block-end: 34px; border-block-end: 1px solid var(--cs-border-strong); pointer-events: none; }
.cs-signature-pad__hint { position: absolute; inset-inline-start: 16px; inset-block-end: 12px; color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); pointer-events: none; }
.cs-signature-typed { display: flex; align-items: flex-end; height: 140px; padding: 0 16px 34px; border: 1px dashed var(--cs-border-control); border-radius: var(--cs-radius); background: var(--cs-surface); font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: 30px; color: var(--cs-text); }

/* ============================================================================ Tenant onboarding */

/* The onboarding workspace uses the canvas (up to ~1480px); fields keep readable widths inside their grids. */
.cs-onboarding { max-width: 1480px; margin-inline: auto; }
.cs-onboarding__section { margin-block-start: var(--cs-space-4); scroll-margin-block-start: var(--cs-space-5); }
.cs-onboarding__section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-2) var(--cs-space-3); margin-block-end: var(--cs-space-3); }
.cs-onboarding__heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-onboarding__title { font-size: var(--cs-fs-section); line-height: var(--cs-lh-section); font-weight: var(--cs-fw-semibold); }
.cs-onboarding__subtitle { margin-block-start: 1px; color: var(--cs-text-secondary); font-size: 13px; }
.cs-onboarding__actions {
    position: sticky; inset-block-end: 12px; z-index: var(--cs-z-sticky);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cs-space-2);
    margin-block-start: var(--cs-space-5); padding: 12px 16px;
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-2);
}
.cs-onboarding__actions .cs-btn--primary { min-width: 176px; }
.cs-onboarding__status { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; color: var(--cs-text-secondary); font-size: 13px; }
.cs-onboarding__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-success); }
.cs-onboarding__status.is-dirty { color: var(--cs-warning-strong); font-weight: var(--cs-fw-medium); }
.cs-onboarding__status.is-dirty::before { background: var(--cs-warning); }
.cs-onboarding__status.is-new::before { background: var(--cs-border-strong); }

/* A small square tile for a section's icon: brand tint for primary sections, neutral outline for sub-panels. */
.cs-icon-tile { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--cs-radius); background: var(--cs-brand-subtle); color: var(--cs-brand); }
.cs-icon-tile--sm { width: 30px; height: 30px; border-radius: var(--cs-radius-sm); }
.cs-icon-tile--outline { background: var(--cs-surface); border: 1px solid var(--cs-border); color: var(--cs-text-secondary); }
.cs-icon-tile.is-success { background: var(--cs-success-subtle); color: var(--cs-success-strong); }
.cs-icon-tile.is-warning { background: var(--cs-warning-subtle); color: var(--cs-warning-strong); }
.cs-icon-tile.is-danger { background: var(--cs-danger-subtle); color: var(--cs-danger-strong); }

/* Status chips: compact pills, tint + dot + text (never colour alone). */
.cs-badge--pill { height: 22px; padding-inline: 9px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0.01em; }

/* Guided progress: one refined strip, three steps joined by connectors (not a wizard framework). */
.cs-stepper { display: flex; align-items: center; gap: 0; list-style: none; margin: var(--cs-space-4) 0 0; padding: 14px 20px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); }
.cs-stepper__step { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.cs-stepper__step:last-child { flex: 0 1 auto; }
.cs-stepper__step:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 16px; margin-inline: 16px; border-radius: 1px; background: var(--cs-border); }
.cs-stepper__step.is-done:not(:last-child)::after { background: var(--cs-accent); }
.cs-stepper__marker { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1.5px solid var(--cs-border-strong); border-radius: 50%; background: var(--cs-surface); color: var(--cs-text-secondary); font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-stepper__step.is-current .cs-stepper__marker { border-color: var(--cs-brand); background: var(--cs-brand); color: var(--cs-text-inverse); box-shadow: 0 0 0 4px var(--cs-brand-subtle); }
.cs-stepper__step.is-done .cs-stepper__marker { border-color: var(--cs-accent); background: var(--cs-accent); color: var(--cs-text-inverse); }
.cs-stepper__text { display: grid; min-width: 0; margin-inline-start: 12px; }
.cs-stepper__label { font-size: 13.5px; font-weight: var(--cs-fw-semibold); color: var(--cs-text); overflow-wrap: anywhere; }
.cs-stepper__step.is-current .cs-stepper__label { color: var(--cs-brand); }
.cs-stepper__step:not(.is-current):not(.is-done) .cs-stepper__label { color: var(--cs-text-secondary); }
.cs-stepper__hint { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* Identity workspace: Passport | Emirates ID | Visa | Compliance. */
.cs-identity-workspace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.95fr); gap: var(--cs-space-4); align-items: stretch; }

/* One document as a mini workspace: head, preview, file, what was read, actions. */
.cs-idc { display: flex; flex-direction: column; min-width: 0; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-1); }
/* Head: icon | title over (status pill · Required); the description runs the full card width below,
   so a long status ("Pending review") never squeezes the title in a four-column workspace. */
.cs-idc__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 16px 16px 12px; }
.cs-idc__titles { min-width: 0; }
.cs-idc__title { font-size: 15px; line-height: 22px; font-weight: var(--cs-fw-semibold); }
.cs-idc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-block-start: 2px; }
.cs-idc__req { color: var(--cs-text-tertiary); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-medium); }
.cs-idc__desc { grid-column: 1 / -1; margin: 0; color: var(--cs-text-secondary); font-size: 12.5px; line-height: 18px; }
.cs-idc__body { flex: 1; display: grid; align-content: start; gap: 12px; padding: 0 16px 16px; }
.cs-idc__preview { position: relative; display: flex; gap: 8px; height: 168px; padding: 8px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); overflow: hidden; }
.cs-idc__preview figure { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.cs-idc__preview img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: var(--cs-radius-sm); }
.cs-idc__preview figcaption { color: var(--cs-text-tertiary); font-size: var(--cs-fs-micro); text-align: center; }
.cs-idc__pdf { flex: 1; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--cs-text-secondary); font-size: 13px; }
.cs-idc__file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); }
.cs-idc__file > .cs-icon { color: var(--cs-success); }
.cs-idc__file-text { flex: 1; display: grid; min-width: 0; }
.cs-idc__file-name { overflow: hidden; color: var(--cs-text); font-size: 13px; font-weight: var(--cs-fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.cs-idc__file-meta { color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); }
.cs-idc__section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--cs-border-subtle); }
.cs-idc__section-title { font-size: 12.5px; font-weight: var(--cs-fw-semibold); color: var(--cs-text); }
.cs-idc__mrz { color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); }
.cs-idc__fields { display: grid; gap: 0; margin: 0; }
.cs-idc__row { display: grid; grid-template-columns: minmax(92px, 40%) minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 30px; padding-block: 4px; border-block-end: 1px dashed var(--cs-border-subtle); font-size: 12.5px; }
.cs-idc__row:last-child { border-block-end: 0; }
.cs-idc__row dt { color: var(--cs-text-secondary); }
.cs-idc__row dd { margin: 0; min-width: 0; color: var(--cs-text); font-weight: var(--cs-fw-medium); overflow-wrap: anywhere; }
.cs-idc__row .cs-icon { justify-self: end; }
.cs-idc__row .is-high { color: var(--cs-brand); }
.cs-idc__row .is-reviewed { color: var(--cs-success); }
.cs-idc__row .is-verify { color: var(--cs-warning); }
.cs-idc__row .is-missing { color: var(--cs-border-strong); }
.cs-idc__note { display: flex; gap: 6px; padding: 8px 10px; border-radius: var(--cs-radius-sm); background: var(--tone-bg, var(--cs-surface-subtle)); color: var(--tone-text, var(--cs-text-secondary)); font-size: var(--cs-fs-support); }
.cs-idc__note .cs-icon { flex-shrink: 0; margin-block-start: 1px; }
.cs-idc__review { display: flex; gap: 8px; }
.cs-idc__review .cs-btn--primary { flex: 1; }
.cs-idc__processing { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 196px; padding: 16px; border: 1px solid var(--cs-brand-subtle); border-radius: var(--cs-radius); background: var(--cs-brand-subtle); color: var(--cs-text-secondary); font-size: 13px; text-align: center; }
.cs-idc__processing strong { color: var(--cs-text); }
.cs-idc__processing .cs-spinner { width: 22px; height: 22px; color: var(--cs-brand); }
/* Card actions: one segmented row of equal buttons. */
.cs-idc__actions { display: flex; border-block-start: 1px solid var(--cs-border-subtle); }
.cs-idc__actions > .cs-btn { flex: 1 1 auto; min-width: 0; gap: 6px; padding-inline: 8px; white-space: nowrap; height: 42px; border: 0; border-radius: 0; background: transparent; color: var(--cs-text-link); font-size: 13px; }
.cs-idc__actions > .cs-btn:hover { background: var(--cs-surface-hover); }
.cs-idc__actions > .cs-btn + .cs-btn { border-inline-start: 1px solid var(--cs-border-subtle); }
.cs-idc__actions > .cs-btn:first-child { border-end-start-radius: var(--cs-radius-lg); }
.cs-idc__actions > .cs-btn:last-child { border-end-end-radius: var(--cs-radius-lg); }

/* File drop target: the native input covers the zone, so click, keyboard and drag-and-drop all work. */
.cs-dropzone { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 196px; padding: 18px 14px; border: 1.5px dashed var(--cs-border-strong); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); color: var(--cs-text-secondary); font-size: 12.5px; text-align: center; transition: border-color var(--cs-duration-fast) var(--cs-ease), background-color var(--cs-duration-fast) var(--cs-ease); }
.cs-dropzone:hover, .cs-dropzone:focus-within { border-color: var(--cs-brand); background: var(--cs-brand-subtle); }
.cs-dropzone:focus-within { box-shadow: var(--cs-focus-ring); }
.cs-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cs-dropzone__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: 2px; border-radius: 50%; background: var(--cs-surface); color: var(--cs-brand); box-shadow: var(--cs-shadow-1), 0 0 0 1px var(--cs-border-subtle); }
.cs-dropzone__title { color: var(--cs-text); font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-dropzone__choose { margin-block-start: 4px; pointer-events: none; }
.cs-dropzone.has-file { border-style: solid; border-color: var(--cs-success-border); background: var(--cs-success-subtle); color: var(--cs-success-strong); }
.cs-dropzone.has-file .cs-dropzone__icon { color: var(--cs-success); }
.cs-dropzone-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-dropzone-pair .cs-dropzone { min-height: 150px; padding: 12px 8px; }
.cs-dropzone-pair .cs-dropzone__icon { width: 36px; height: 36px; }
.cs-idc__hint { color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); line-height: 16px; }

/* Compliance summary: the executive read-out of the four documents. */
.cs-csum { display: flex; flex-direction: column; min-width: 0; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-1); }
.cs-csum.is-ready { border-color: var(--cs-success-border); background: linear-gradient(180deg, var(--cs-success-subtle), var(--cs-surface) 70%); }
.cs-csum__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; }
.cs-csum__body { flex: 1; display: grid; align-content: start; gap: 12px; padding: 0 16px 16px; }
.cs-csum__list { display: grid; list-style: none; margin: 0; padding: 0; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); background: var(--cs-surface); }
/* dot | name | pill, with the detail under name and pill so it keeps the full width */
.cs-csum__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; }
.cs-csum__item > .cs-csum__detail { grid-column: 2 / -1; }
.cs-csum__item + .cs-csum__item { border-block-start: 1px solid var(--cs-border-subtle); }
.cs-csum__dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg); }
.cs-csum__name { font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-csum__detail { color: var(--cs-text-secondary); font-size: var(--cs-fs-micro); }
.cs-csum__state { display: grid; justify-items: center; gap: 6px; padding: 18px 14px; border: 1px solid var(--tone-border); border-radius: var(--cs-radius); background: var(--tone-bg); color: var(--tone-text); text-align: center; font-size: 12.5px; }
.cs-csum__state-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tone-fg); color: var(--cs-text-inverse); }
.cs-csum__state-title { color: var(--cs-text); font-size: 15px; font-weight: var(--cs-fw-semibold); }
.cs-csum__state ul { margin: 0; padding-inline-start: 18px; text-align: start; justify-self: stretch; }
.cs-conflict { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--cs-warning-border); border-radius: var(--cs-radius); background: var(--cs-warning-subtle); color: var(--cs-warning-strong); font-size: 12.5px; }
.cs-conflict strong { display: flex; align-items: center; gap: 6px; }
.cs-conflict ul { margin: 0; padding-inline-start: 18px; color: var(--cs-text); }

/* Tenant details: the final tenant profile, four compact panels in two rows. */
.cs-ob-panel { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-1); }
.cs-ob-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 16px 18px; border-block-end: 1px solid var(--cs-border-subtle); }
.cs-ob-panel__body { padding: 16px 18px 18px; }
.cs-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-4); align-items: stretch; }
.cs-ob-sub { min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-ob-sub__head { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.cs-ob-sub__title { font-size: 14px; font-weight: var(--cs-fw-semibold); }
.cs-ob-sub__subtitle { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--cs-space-4); }
.cs-fieldgrid .cs-field--wide { grid-column: 1 / -1; }
.cs-clear-btn { color: var(--cs-danger-strong); }

/* Where a prefilled value came from, inside its field: an icon + text chip (never colour alone). */
.cs-input-wrap { position: relative; }
.cs-input-wrap.has-adornment > .cs-input { padding-inline-end: 140px; }
.cs-input-wrap.has-adornment.is-date > .cs-input { padding-inline-end: 176px; }
.cs-provenance {
    position: absolute; inset-block-start: 50%; inset-inline-end: 8px; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 4px; max-width: 128px; height: 22px; padding-inline: 7px;
    border: 1px solid var(--tone-border, var(--cs-border)); border-radius: 999px; background: var(--tone-bg, var(--cs-surface-subtle));
    color: var(--tone-text, var(--cs-text-secondary)); font-size: var(--cs-fs-micro); font-weight: var(--cs-fw-semibold); white-space: nowrap; pointer-events: none;
}
.cs-provenance > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.cs-input-wrap.is-date .cs-provenance { inset-inline-end: 40px; }
.cs-phone { display: flex; gap: 6px; }
.cs-phone select { flex: 0 0 104px; }
.cs-phone input { flex: 1; min-width: 0; }

/* Review stage: concise summary cards beside the compliance outcome. */
.cs-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--cs-space-4); align-items: start; }
.cs-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-4); align-items: stretch; }
.cs-review-card { display: flex; flex-direction: column; min-width: 0; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-1); }
.cs-review-card__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-block-end: 1px solid var(--cs-border-subtle); }
.cs-review-card__title { flex: 1; font-size: 14px; font-weight: var(--cs-fw-semibold); }
.cs-review-card__body { padding: 12px 14px 14px; }
.cs-review-card .cs-dl { font-size: 13px; gap: 8px 14px; }

/* ============================================================================ Boot + runtime error */

.cs-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--cs-workspace); }
.cs-boot__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--cs-brand); }
.cs-boot__name { font-size: 16px; font-weight: var(--cs-fw-semibold); color: var(--cs-text); }
.cs-boot__name span { color: var(--cs-text-secondary); font-weight: var(--cs-fw-regular); }
.cs-boot__bar { width: 160px; height: 3px; border-radius: 2px; background: var(--cs-skeleton); overflow: hidden; }
.cs-boot__bar span { display: block; height: 100%; width: var(--blazor-load-percentage, 8%); background: var(--cs-brand); transition: width var(--cs-duration) var(--cs-ease); }

#blazor-error-ui {
    display: none; position: fixed; z-index: var(--cs-z-progress); inset-inline: 16px; inset-block-end: 16px;
    align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--cs-surface-inverse); color: var(--cs-text-inverse); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow-3);
}
#blazor-error-ui .reload { color: var(--cs-brand-on-dark); font-weight: var(--cs-fw-semibold); }
#blazor-error-ui .dismiss { margin-inline-start: auto; border: 0; background: transparent; color: var(--cs-sidebar-text); font-size: 18px; cursor: pointer; }

/* ============================================================================ Responsive */

/* Tablet: collapsed rail by default; the toggle opens the full navigation as an overlay. */
@media (max-width: 1199.98px) {
    .cs-shell { --sidebar: var(--cs-sidebar-w-collapsed); }
    .cs-shell:not(.is-nav-open) .cs-logo__name,
    .cs-shell:not(.is-nav-open) .cs-nav-link__label,
    .cs-shell:not(.is-nav-open) .cs-nav-link__proto,
    .cs-shell:not(.is-nav-open) .cs-sidebar__collapse span { display: none; }
    .cs-shell:not(.is-nav-open) .cs-topbar__brand { justify-content: center; padding-inline: 0; }
    .cs-shell:not(.is-nav-open) .cs-sidebar__scroll { padding-inline: var(--cs-space-2); }
    .cs-shell:not(.is-nav-open) .cs-nav-link { justify-content: center; padding: 0; }
    .cs-shell:not(.is-nav-open) .cs-nav-link.active::before { inset-inline-start: -8px; }
    .cs-shell:not(.is-nav-open) .cs-nav-link__badge { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding-inline: 4px; font-size: 10px; }
    .cs-shell:not(.is-nav-open) .cs-sidebar__heading { height: 1px; padding: 0; margin: 0 10px 8px; background: var(--cs-sidebar-border); font-size: 0; }
    .cs-shell.is-nav-open .cs-sidebar { width: var(--cs-sidebar-w); box-shadow: var(--cs-shadow-3); }
    .cs-shell.is-nav-open .cs-nav-scrim { display: block; position: fixed; inset: var(--cs-topbar-h) 0 0 0; z-index: calc(var(--cs-z-sidebar) - 1); background: var(--cs-scrim-light); }
    .cs-sidebar__collapse { display: none; }
    .cs-topbar__menu-toggle { display: inline-flex; }
    .cs-user-trigger__text { display: none; }
    .cs-attention { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-attention__item:nth-child(4) { border-inline-start: 0; }
    .cs-attention__item:nth-child(n+4) { border-block-start: 1px solid var(--cs-border-subtle); }
    .cs-cols--3 { --cols: 1; }
    .cs-cols--main-aside { grid-template-columns: minmax(0, 1fr); }
    .cs-sign { grid-template-columns: minmax(0, 1fr); }
    .cs-sign__panel { position: static; }
    .cs-identity-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-review-layout { grid-template-columns: minmax(0, 1fr); }
    .cs-details-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: off-canvas navigation, compact topbar, stacked layouts. */
@media (max-width: 767.98px) {
    .cs-shell { grid-template-columns: minmax(0, 1fr); }
    .cs-main { grid-column: 1; }
    .cs-topbar { grid-template-columns: auto minmax(0, 1fr); }
    .cs-topbar__brand { background: var(--cs-surface); color: var(--cs-text); padding-inline: 12px 0; border: 0; }
    .cs-shell:not(.is-nav-open) .cs-topbar__brand { padding-inline: 12px 0; }
    .cs-logo__name { display: none; }
    .cs-topbar__bar { padding-inline: 8px 12px; gap: 4px; }
    .cs-search-trigger { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .cs-search-trigger__text, .cs-search-trigger__keys { display: none; }
    .cs-create-label { display: none; }
    .cs-create-btn { width: 36px; padding: 0; }
    .cs-sidebar {
        position: fixed; inset-block: var(--cs-topbar-h) 0; inset-inline-start: 0;
        width: min(300px, 86vw); height: auto;
        transform: translateX(-100%); visibility: hidden;
        transition: transform var(--cs-duration-slow) var(--cs-ease), visibility 0s linear var(--cs-duration-slow);
    }
    [dir="rtl"] .cs-sidebar { transform: translateX(100%); }
    .cs-shell.is-nav-open .cs-sidebar { transform: none; visibility: visible; transition: transform var(--cs-duration-slow) var(--cs-ease); width: min(300px, 86vw); }
    .cs-page-header { flex-direction: column; align-items: stretch; gap: var(--cs-space-3); }
    .cs-page-header__actions .cs-btn { flex: 1; }
    .cs-details-header__row { flex-direction: column; }
    .cs-details-header__actions { width: 100%; }
    .cs-details-header__actions > .cs-btn:first-child { flex: 1; }
    .cs-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-attention__item:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--cs-border-subtle); }
    .cs-attention__item:nth-child(-n+2) { border-block-start: 0; }
    .cs-attention__item:nth-child(even) { border-inline-start: 1px solid var(--cs-border-subtle); }
    .cs-attention__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cs-attention__value { font-size: 24px; line-height: 30px; }
    .cs-cols, .cs-cols--2 { --cols: 1; }
    .cs-stat + .cs-stat { border-inline-start: 0; }
    .cs-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-stat:nth-child(even) { border-inline-start: 1px solid var(--cs-border-subtle); }
    .cs-stat:nth-child(n+3) { border-block-start: 1px solid var(--cs-border-subtle); }
    .cs-filterbar__search { flex-basis: 100%; max-width: none; }
    .cs-filterbar__select { flex: 1 1 calc(50% - 8px); }
    .cs-filterbar__end { margin-inline-start: 0; width: 100%; }
    .cs-filterbar__end .cs-btn { flex: 1; }
    .cs-grid__footer { flex-direction: column; align-items: stretch; }
    .cs-grid__controls { justify-content: space-between; }
    .cs-grid__density, .cs-grid__columns { display: none; }
    .cs-form-section { grid-template-columns: minmax(0, 1fr); gap: var(--cs-space-4); padding: var(--cs-space-4); }
    .cs-form-section__fields { grid-template-columns: minmax(0, 1fr); }
    .cs-form-actions { margin-inline: calc(var(--cs-content-pad) * -1); border-radius: 0; border-inline: 0; }
    .cs-form-actions .cs-btn { flex: 1; }
    .cs-form-actions__status { display: none; }
    .cs-drawer { width: 100vw; border-inline-start: 0; }
    .cs-notifications { width: calc(100vw - 24px); position: fixed; inset-inline: 12px; inset-block-start: calc(var(--cs-topbar-h) + 4px); }
    .cs-menu__panel.is-quick-create { position: fixed; inset-inline: 12px; inset-block-start: calc(var(--cs-topbar-h) + 4px); }
    .cs-palette { inset-block-start: 8px; max-height: calc(100vh - 16px); }
    .cs-auth { grid-template-columns: minmax(0, 1fr); }
    .cs-auth__panel { display: none; }
    .cs-auth__form-side { padding: 24px 20px; }
    .cs-page-sheet { padding: 24px 20px; }
    .cs-sign__pages { padding: 12px; max-height: 60vh; }
    .cs-toasts { inset-inline: 16px; inset-block-end: 16px; width: auto; }
    .cs-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .cs-dl dd { margin-block-end: 10px; }
    .cs-meter-row { grid-template-columns: minmax(0, 1fr) 56px; }
    .cs-meter-row .cs-meter { grid-column: 1 / -1; grid-row: 2; }
    .cs-hide-phone { display: none !important; }
    .cs-identity-workspace, .cs-details-grid, .cs-fieldgrid, .cs-review-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-stepper { padding: 10px 12px; }
    .cs-stepper__hint { display: none; }
    .cs-stepper__step:not(:last-child)::after { margin-inline: 8px; min-width: 8px; }
    .cs-stepper__marker { width: 26px; height: 26px; font-size: 12px; }
    .cs-stepper__text { margin-inline-start: 8px; }
    .cs-stepper__label { font-size: 12px; line-height: 16px; }
    .cs-ob-panel__head, .cs-ob-panel__body { padding-inline: 14px; }
    .cs-onboarding__actions { inset-block-end: 0; margin-inline: calc(var(--cs-content-pad) * -1); border-radius: 0; border-inline: 0; }
    .cs-onboarding__actions .cs-btn { flex: 1; }
    .cs-onboarding__status { flex-basis: 100%; }
}

@media (min-width: 768px) { .cs-only-phone { display: none !important; } }

/* ============================================================================ Reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .cs-skel { animation: none; background: var(--cs-skeleton); }
    .cs-progress::before, .cs-grid__loadbar::before { animation: none; width: 100%; opacity: .6; }
    .cs-spinner { animation: cs-spin 1.6s linear infinite !important; }
}

/* ============================================================================ Leasing CRM (docs/leasing-crm.md) */

/* A stat that filters the list: the whole cell is the link; the current filter is underlined. */
.cs-stat-link { display: block; min-width: 0; color: inherit; text-decoration: none; }
.cs-stat-link + .cs-stat-link { border-inline-start: 1px solid var(--cs-border-subtle); }
.cs-stat-link .cs-stat + .cs-stat, .cs-stat-link .cs-stat { border-inline-start: 0; }
.cs-stat-link:hover { background: var(--cs-surface-hover); text-decoration: none; }
.cs-stat-link:focus-visible { outline: 2px solid var(--cs-focus, var(--cs-accent)); outline-offset: -2px; }
.cs-stat-link.is-active { box-shadow: inset 0 -2px 0 var(--cs-accent); }
.cs-stat-link.is-active .cs-stat__label { color: var(--cs-accent); }
.cs-lead-pipeline { margin-block-end: var(--cs-space-4); }
.cs-filterbar__date { display: contents; }
/* Workspace: banners, unit cards, shortlist and viewings */
.cs-lead-banner { margin-block-end: var(--cs-space-4); }
.cs-muted { color: var(--cs-text-secondary); }
.cs-row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cs-space-2); }
.cs-table-wrap { overflow-x: auto; }
.cs-field__value { min-height: var(--cs-control-h, 36px); display: flex; align-items: center; font-weight: var(--cs-fw-medium); }
.cs-inline-list { margin: 6px 0 0; padding-inline-start: 18px; }
.cs-inline-list li + li { margin-block-start: 2px; }

.cs-lead-search { display: grid; gap: var(--cs-space-3); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cs-pager-lite { display: flex; align-items: center; justify-content: flex-end; gap: var(--cs-space-2); }
.cs-pager-lite .cs-muted { margin-inline-end: auto; }

.cs-lead-shortlist, .cs-lead-viewings { list-style: none; margin: 0; padding: 0; }
.cs-lead-unit { display: grid; gap: 4px; padding: 12px var(--cs-space-4); }
.cs-lead-shortlist .cs-lead-unit + .cs-lead-unit, .cs-lead-viewing + .cs-lead-viewing { border-block-start: 1px solid var(--cs-border-subtle); }
.cs-lead-unit.is-selected { background: var(--cs-success-subtle); box-shadow: inset 3px 0 0 var(--cs-success); }
.cs-lead-unit__name { font-weight: var(--cs-fw-semibold); }
.cs-lead-unit__meta { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-lead-unit__status { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-lead-unit__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }
.cs-lead-viewing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px var(--cs-space-3); padding: 12px var(--cs-space-4); }
.cs-lead-viewing .cs-lead-unit__actions { grid-column: 1 / -1; }

/* Timeline with icons (the lead's CRM history) */
.cs-lead-timeline { list-style: none; margin: 0; padding: 0; }
.cs-lead-timeline__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--cs-space-3); padding: 12px var(--cs-space-4); }
.cs-lead-timeline__item + .cs-lead-timeline__item { border-block-start: 1px solid var(--cs-border-subtle); }
.cs-lead-timeline__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cs-surface-subtle); border: 1px solid var(--cs-border-subtle); color: var(--cs-text-secondary); }
.cs-lead-timeline__summary { font-weight: var(--cs-fw-medium); }
.cs-lead-timeline__details { margin-block-start: 2px; white-space: pre-line; }
.cs-lead-timeline__meta { margin-block-start: 2px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* Documents */
.cs-lead-docs-intro { display: flex; gap: var(--cs-space-3); align-items: flex-start; }
.cs-lead-docs-intro p { margin: 0 0 var(--cs-space-3); max-width: 72ch; }
.cs-lead-requirements { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-lead-requirements li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: var(--cs-space-2); }
.cs-lead-requirements__name { font-weight: var(--cs-fw-medium); }
.cs-lead-docs-note { margin: var(--cs-space-3) 0 0; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }

/* Reservation: the hold, money and the quote */
.cs-reservation { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: var(--cs-space-5); align-items: start; }
.cs-reservation__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); margin-block: var(--cs-space-4) 0; }
.cs-reservation__actions:empty { display: none; }
.cs-hold { --tone-fg: var(--cs-accent); padding: var(--cs-space-4); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); box-shadow: inset 3px 0 0 var(--tone-fg); }
.cs-hold.is-soon { --tone-fg: var(--cs-warning); background: var(--cs-warning-subtle); }
.cs-hold.is-expired { --tone-fg: var(--cs-danger); background: var(--cs-danger-subtle); }
.cs-hold__label { font-size: 12px; font-weight: var(--cs-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-text-secondary); }
.cs-hold__time { margin-block-start: 4px; font-size: 22px; line-height: 28px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; }
.cs-hold__expires { margin-block-start: 2px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-reserve__heading { margin: 0 0 var(--cs-space-2); font-size: 13px; font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.cs-reserve__confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cs-space-4); margin-block-start: var(--cs-space-5); padding-block-start: var(--cs-space-4); border-block-start: 1px solid var(--cs-border-subtle); }
.cs-reserve__confirm .cs-field { width: 220px; }
.cs-reserve__summary { flex: 1 1 240px; color: var(--cs-text-secondary); }
.cs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--cs-space-2); align-items: start; }
.cs-checks li.is-passed .cs-icon { color: var(--cs-success); }
.cs-checks li.is-failed .cs-icon { color: var(--cs-danger); }
.cs-checks__why { display: block; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-fieldset { margin: 0; padding: var(--cs-space-3) var(--cs-space-4); border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); display: grid; gap: var(--cs-space-2); }
.cs-fieldset legend { padding-inline: 4px; font-weight: var(--cs-fw-semibold); font-size: 13px; }
.cs-filterbar__check { align-self: center; white-space: nowrap; }

@media (max-width: 1100px) {
    .cs-lead-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .cs-reservation { grid-template-columns: minmax(0, 1fr); }
    .cs-lead-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-reserve__confirm .cs-field { width: 100%; }
}
@media (max-width: 480px) {
    .cs-lead-search { grid-template-columns: minmax(0, 1fr); }
    .cs-lead-requirements li { grid-template-columns: 18px minmax(0, 1fr) auto; }
    .cs-lead-requirements li .cs-muted { display: none; }
}
/* Leasing: grid stacks shrink to the viewport (a wide table scrolls inside its wrapper instead of widening the page). */
.cs-lead-stack { grid-template-columns: minmax(0, 1fr); }
.cs-table td.is-nowrap { white-space: nowrap; }
.cs-lead-money { min-width: 520px; }
@media (max-width: 767.98px) {
    .cs-details-header__actions { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------- Building Structure Composer (Phase 26: physical floors first) */
.cs-composer { display: grid; gap: var(--cs-space-4); min-width: 0; }
.cs-composer > * { min-width: 0; }
.cs-stack-sm { display: grid; gap: var(--cs-space-3); min-width: 0; }
.cs-composer__issues { display: grid; gap: var(--cs-space-2); }
.cs-composer__issue-list { margin: 4px 0 0; padding-inline-start: 18px; }
.cs-composer__checklist ul { list-style: none; margin: var(--cs-space-2) 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.cs-composer__checklist li { display: flex; align-items: flex-start; gap: 6px; }
.cs-composer__checklist li.is-pass .cs-icon { color: var(--cs-success); }
.cs-composer__checklist li.is-fail { color: var(--cs-danger-strong); }
.cs-composer__checklist li.is-fail .cs-icon { color: var(--cs-danger); }
.cs-composer__checklist li.is-warn .cs-icon { color: var(--cs-warning); }
.cs-composer__issue { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: var(--cs-radius-sm); font-size: 13px; background: var(--tone-bg); color: var(--tone-text); }
.cs-composer__issue + .cs-composer__issue { margin-block-start: 4px; }
.cs-composer__create-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.cs-composer__done .cs-panel__body { display: grid; justify-items: start; gap: var(--cs-space-3); padding: var(--cs-space-6); }
.cs-composer__done .cs-icon-tile { background: var(--cs-success-subtle); color: var(--cs-success); }
.cs-composer__done-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--cs-space-2) var(--cs-space-5); }
.cs-composer .cs-cell-sub { display: block; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); font-weight: var(--cs-fw-regular); }

/* Progress: "Step 3 of 6 · Floor Contents" and the six steps (they scroll sideways on narrow screens, the page never does). */
.cs-bc-progress { min-width: 0; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); }
.cs-bc-progress__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; border-block-end: 1px solid var(--cs-border-subtle); font-size: 12.5px; }
.cs-bc-progress__head strong { color: var(--cs-text); font-weight: var(--cs-fw-semibold); }
.cs-bc-progress__scroll { position: relative; overflow-x: auto; scrollbar-width: thin; padding: 8px 10px; }   /* contains the steps' visually-hidden text */
.cs-bc-step button { position: relative; }
.cs-bc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; min-width: max-content; }
.cs-bc-step { flex: 1 1 0; }
.cs-bc-step button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--cs-radius); background: transparent; color: var(--cs-text-secondary); font: inherit; font-size: 13px; white-space: nowrap; text-align: start; cursor: pointer; }
.cs-bc-step button:hover { background: var(--cs-surface-hover); color: var(--cs-text); }
.cs-bc-step button:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 1px; }
.cs-bc-step__marker { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--cs-border); border-radius: 50%; background: var(--cs-surface); font-size: 12px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; }
.cs-bc-step.is-current button { background: var(--cs-brand-subtle); color: var(--cs-brand); font-weight: var(--cs-fw-semibold); }
.cs-bc-step.is-current .cs-bc-step__marker { background: var(--cs-brand); border-color: var(--cs-brand); color: var(--cs-text-inverse); }
.cs-bc-step.is-done button { color: var(--cs-success-strong); }
.cs-bc-step.is-done .cs-bc-step__marker { background: var(--cs-success-subtle); border-color: var(--cs-success-border); color: var(--cs-success-strong); }
.cs-bc-step.has-error .cs-bc-step__marker { background: var(--cs-danger-subtle); border-color: var(--cs-danger-border); color: var(--cs-danger-strong); }
.cs-bc-body { min-width: 0; }
.cs-bc-body:focus { outline: none; }

/* A step: the work panel and a sticky summary beside it. */
.cs-bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--cs-space-4); align-items: start; }
.cs-bc-main { min-width: 0; }
.cs-bc-main__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--cs-space-3); padding: var(--cs-space-4); border-block-end: 1px solid var(--cs-border-subtle); }
.cs-bc-main__heading { flex: 1 1 260px; min-width: 0; }
.cs-bc-main__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }
.cs-bc-main__body { display: grid; gap: var(--cs-space-4); min-width: 0; padding: var(--cs-space-4); }
.cs-bc-aside { position: sticky; top: calc(var(--cs-topbar-h) + var(--cs-space-4)); min-width: 0; overflow: hidden; }
.cs-bc-aside__sec { padding: var(--cs-space-3) var(--cs-space-4); }
.cs-bc-aside__sec + .cs-bc-aside__sec { border-block-start: 1px solid var(--cs-border-subtle); }
.cs-bc-aside__title { margin: 0 0 4px; font-size: 12.5px; font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); }
.cs-bc-aside__note { margin: 0; padding: 0 var(--cs-space-4) var(--cs-space-3); font-size: var(--cs-fs-support); color: var(--cs-text-secondary); }
.cs-bc-aside__sec .cs-bc-aside__note { padding: 6px 0 0; }
.cs-bc-aside__note.is-warning { color: var(--cs-warning-strong); }
.cs-bc-aside__progress { height: 6px; margin: 0 var(--cs-space-4) var(--cs-space-4); border-radius: 999px; background: var(--cs-neutral-subtle); overflow: hidden; }
.cs-bc-aside__progress i { display: block; height: 100%; border-radius: inherit; background: var(--cs-brand); }
.cs-bc-metrics { display: grid; margin: 0; }
.cs-bc-metrics div { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-block-end: 1px solid var(--cs-border-subtle); font-size: 13px; }
.cs-bc-metrics div:last-child { border-block-end: 0; }
.cs-bc-metrics dt { color: var(--cs-text-secondary); }
.cs-bc-metrics dd { margin: 0; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; text-align: end; }
.cs-bc-metrics .is-total dt { color: var(--cs-text); font-weight: var(--cs-fw-semibold); }

/* Add / edit unit: the form beside a sticky summary; one column on small screens, summary after the form. */
.cs-unitform { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--cs-space-4); align-items: start; }
.cs-unitform__main { display: grid; gap: var(--cs-space-4); min-width: 0; }
.cs-unitform .cs-form-section { grid-template-columns: minmax(0, 1fr); gap: var(--cs-space-3); }
.cs-unitform__aside { position: sticky; top: calc(var(--cs-topbar-h) + var(--cs-space-4)); display: grid; gap: var(--cs-space-4); min-width: 0; }
.cs-unitform__context { display: flex; align-items: center; gap: var(--cs-space-2); padding: 10px 12px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); background: var(--cs-neutral-subtle); font-size: 13px; }
.cs-unitform__actions { max-width: none; }
.cs-unitform .cs-field__help .cs-icon { vertical-align: -2px; }
@media (max-width: 1100px) {
    .cs-unitform { grid-template-columns: minmax(0, 1fr); }
    .cs-unitform__aside { position: static; }
}

/* Unit history: a vertical timeline on wide screens, compact cards on phones. */
.cs-history { display: grid; gap: var(--cs-space-4); }
.cs-history__filters { display: grid; gap: var(--cs-space-3); }
.cs-history__chips, .cs-history__controls { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: end; }
.cs-history__controls label { display: grid; gap: 4px; font-size: 12.5px; color: var(--cs-text-secondary); }
.cs-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-3); }
.cs-timeline__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--cs-space-3); position: relative; }
.cs-timeline__item::before { content: ""; position: absolute; inset-block: 36px -12px; inset-inline-start: 17px; width: 2px; background: var(--cs-border-subtle); }
.cs-timeline__item:last-child::before { display: none; }
.cs-timeline__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cs-neutral-subtle); color: var(--cs-text-secondary); border: 1px solid var(--cs-border); }
.cs-timeline__card { min-width: 0; padding: 10px 14px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-timeline__head { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; justify-content: space-between; }
.cs-timeline__meta, .cs-timeline__ref { margin: 2px 0 0; font-size: 12.5px; color: var(--cs-text-secondary); }
.cs-timeline__summary { margin: 6px 0 0; overflow-wrap: anywhere; }
.cs-timeline__details { margin-block-start: var(--cs-space-2); padding-block-start: var(--cs-space-2); border-block-start: 1px solid var(--cs-border-subtle); }
@media (max-width: 640px) {
    .cs-timeline__item { grid-template-columns: minmax(0, 1fr); }
    .cs-timeline__item::before, .cs-timeline__icon { display: none; }
}

/* Back / saved / Save draft / Continue: always reachable. */
.cs-bc-footer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-2); padding: 10px var(--cs-space-4); background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-2); }
.cs-bc-footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); margin-inline-start: auto; }
.cs-bc-footer__saved { font-size: var(--cs-fs-support); }

/* Choice cards: segments, type tiles, quick-add tiles, radio options. */
.cs-bc-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-bc-segments.is-compact { margin-block-start: var(--cs-space-1); }
.cs-bc-seg, .cs-bc-type, .cs-bc-quick__item { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); color: var(--cs-text); font: inherit; text-align: start; cursor: pointer; }
.cs-bc-seg strong, .cs-bc-type strong, .cs-bc-quick__item strong, .cs-bc-option strong { font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-bc-seg small, .cs-bc-type small, .cs-bc-quick__item small, .cs-bc-option small { font-size: 12px; color: var(--cs-text-secondary); }
.cs-bc-seg:hover, .cs-bc-type:hover, .cs-bc-quick__item:hover, .cs-bc-option:hover { border-color: var(--cs-brand-subtle-border); background: var(--cs-surface-hover); }
.cs-bc-seg.is-on, .cs-bc-type.is-on, .cs-bc-option.is-on { border-color: var(--cs-brand); background: var(--cs-brand-subtle); }
.cs-bc-type.is-on strong { color: var(--cs-brand); }
.cs-bc-seg:focus-visible, .cs-bc-type:focus-visible, .cs-bc-quick__item:focus-visible, .cs-bc-option:focus-within { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-bc-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.cs-bc-type { justify-items: center; text-align: center; padding: 10px 8px; }
.cs-bc-options { display: grid; gap: 8px; }
.cs-bc-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); cursor: pointer; }
.cs-bc-option input { flex: none; margin-block-start: 3px; accent-color: var(--cs-brand); }
.cs-bc-option span { display: grid; gap: 2px; min-width: 0; }
.cs-bc-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cs-bc-quick__item { justify-items: start; border-style: dashed; border-color: var(--cs-border-strong); background: var(--cs-surface-subtle); }
.cs-bc-quick__mark { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 4px; margin-block-end: 4px; border-radius: var(--cs-radius-sm); background: var(--cs-neutral-subtle); color: var(--cs-text); font-size: 11px; font-weight: var(--cs-fw-semibold); }

/* Floor cards (Physical Floors and Floor Contents). */
.cs-bc-floors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.cs-bc-floors.is-nested { padding: 8px; border-block-start: 1px solid var(--cs-border-subtle); background: var(--cs-surface-subtle); }
.cs-bc-floor { min-width: 0; overflow: hidden; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-bc-floor__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
.cs-bc-floor__code { display: grid; place-items: center; min-width: 44px; height: 38px; padding-inline: 8px; border-radius: var(--cs-radius-sm); background: var(--cs-neutral-subtle); color: var(--cs-text); font-size: 12px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-bc-floor__copy { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.cs-bc-floor__copy strong { font-size: 13.5px; font-weight: var(--cs-fw-semibold); overflow-wrap: anywhere; }
.cs-bc-floor__copy small { font-size: 12px; color: var(--cs-text-secondary); }
.cs-bc-floor__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cs-bc-floor__contents { padding: 8px 12px 10px; border-block-start: 1px solid var(--cs-border-subtle); background: var(--cs-surface-subtle); }
.cs-bc-floor__label { display: block; margin-block-end: 6px; font-size: 11px; font-weight: var(--cs-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--cs-text-secondary); }

/* Content chips and stack tags: the text says what it is; tone repeats it. */
.cs-bc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-bc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--chip-border, var(--cs-border)); border-radius: 999px; background: var(--chip-bg, var(--cs-surface)); color: var(--chip-text, var(--cs-text-secondary)); font: inherit; font-size: 12px; line-height: 1.4; text-align: start; overflow-wrap: anywhere; }
.cs-bc-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-dot, var(--cs-neutral)); }
button.cs-bc-chip { cursor: pointer; }
button.cs-bc-chip:hover { text-decoration: underline; }
button.cs-bc-chip:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-bc-chip.is-parking, .cs-bc-tag.is-parking { --chip-bg: var(--cs-info-subtle); --chip-border: var(--cs-info-border); --chip-text: var(--cs-info-strong); --chip-dot: var(--cs-info); }
.cs-bc-chip.is-amenity, .cs-bc-tag.is-amenity { --chip-bg: var(--cs-success-subtle); --chip-border: var(--cs-success-border); --chip-text: var(--cs-success-strong); --chip-dot: var(--cs-success); }
.cs-bc-chip.is-commercial, .cs-bc-tag.is-commercial { --chip-bg: var(--cs-warning-subtle); --chip-border: var(--cs-warning-border); --chip-text: var(--cs-warning-strong); --chip-dot: var(--cs-warning); }
.cs-bc-chip.is-common, .cs-bc-tag.is-common { --chip-bg: var(--cs-accent-subtle); --chip-border: var(--cs-border); --chip-text: var(--cs-text); --chip-dot: var(--cs-accent); }
.cs-bc-chip.is-service, .cs-bc-tag.is-service { --chip-bg: var(--cs-neutral-subtle); --chip-border: var(--cs-neutral-border); --chip-text: var(--cs-neutral-strong); --chip-dot: var(--cs-neutral); }
.cs-bc-chip.is-empty, .cs-bc-tag.is-empty { --chip-bg: transparent; --chip-text: var(--cs-text-tertiary); border-style: dashed; }
.cs-bc-chip.is-empty::before { display: none; }

/* The building drawn as a stack, top floor first. */
.cs-bc-stack { min-width: 0; padding: var(--cs-space-3); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); }
.cs-bc-stack__title { margin: 0 0 8px; font-size: 12.5px; font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); }
.cs-bc-stack__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cs-bc-stack__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; }
.cs-bc-stack__label { text-align: end; font-size: 12px; font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cs-bc-stack__box { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; min-height: 34px; padding: 5px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); background: var(--cs-surface); }
.cs-bc-tag { padding: 3px 7px; border: 1px solid var(--chip-border, transparent); border-radius: 4px; background: var(--chip-bg, var(--cs-neutral-subtle)); color: var(--chip-text, var(--cs-text)); font-size: 11.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Tables, sections and small parts. */
.cs-bc-table { font-size: 13px; }
.cs-bc-table td, .cs-bc-table th { padding-block: 6px; vertical-align: middle; }
.cs-bc-table tbody th, .cs-bc-table tfoot th { height: auto; background: transparent; border-block-end: 1px solid var(--cs-border-subtle); color: var(--cs-text); font-size: inherit; font-weight: var(--cs-fw-medium); text-align: start; }
.cs-bc-table tfoot th, .cs-bc-table tfoot td { border-block-start: 1px solid var(--cs-border); }
.cs-bc-table tr.is-removed { color: var(--cs-text-tertiary); }
.cs-bc-table tr.is-removed th { text-decoration: line-through; }
.cs-bc-table .cs-input--sm, .cs-bc-table .cs-select--sm { min-width: 0; }
.cs-bc-num { width: 88px; }
.cs-bc-code { width: 64px; }
.cs-bc-money { width: 120px; }
.cs-bc-floor-select { width: auto; min-width: 72px; }
.cs-bc-numbers { font-variant-numeric: tabular-nums; color: var(--cs-text-secondary); }
.cs-bc-mapping-result { white-space: normal; max-inline-size: 0; font-size: 12.5px; color: var(--cs-text-secondary); }   /* max-inline-size: 0 lets the long result wrap inside the table's own width */
.cs-bc-mapping-status td { padding-block: 0 8px; border-block-start: 0; }
.cs-bc-table--mapping tr[data-mapping-row] td { border-block-end: 0; }
.cs-bc-table--mapping td select:not(.cs-bc-floor-select) { min-width: 150px; }
.cs-bc-parking-cell { min-width: 150px; }
.cs-bc-subsec { display: grid; gap: var(--cs-space-2); min-width: 0; padding-block-start: var(--cs-space-4); border-block-start: 1px solid var(--cs-border-subtle); }
.cs-bc-subsec.is-first { padding-block-start: 0; border-block-start: 0; }
.cs-bc-subsec > p, .cs-bc-pattern p { margin: 0; }
.cs-bc-subhead { margin: 0; font-size: 14px; font-weight: var(--cs-fw-semibold); color: var(--cs-text); }
.cs-bc-pattern { display: grid; gap: var(--cs-space-3); min-width: 0; }
.cs-bc-pattern + .cs-bc-pattern { padding-block-start: var(--cs-space-4); border-block-start: 1px solid var(--cs-border-subtle); }
.cs-bc-pattern__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cs-space-2); }
.cs-bc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); }
.cs-callout .cs-bc-row { margin-block-start: var(--cs-space-2); }
.cs-bc-details { min-width: 0; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); }
.cs-bc-details > summary { cursor: pointer; font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-bc-details > summary:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; border-radius: 2px; }
.cs-bc-details__body { margin-block-start: var(--cs-space-3); }
.cs-bc-fieldset { display: grid; gap: 8px; min-width: 0; margin: var(--cs-space-3) 0 0; padding: 10px 12px; border: 1px solid var(--cs-border-subtle); border-radius: var(--cs-radius); }
.cs-bc-fieldset legend { padding-inline: 4px; font-size: 13px; font-weight: var(--cs-fw-semibold); }
.cs-bc-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cs-bc-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--cs-text-secondary); }
.cs-bc-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); }
.cs-bc-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-bc-rules li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); font-size: 13px; }
.cs-bc-preview { margin: var(--cs-space-3) 0 0; padding: 8px 10px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius-sm); background: var(--cs-surface-subtle); font-size: 12.5px; color: var(--cs-text-secondary); overflow-wrap: anywhere; }
.cs-bc-dialog-lead { margin: 0 0 var(--cs-space-3); }
.cs-bc-dialog-fields { margin-block-start: var(--cs-space-3); }
.cs-bc-readonly { display: flex; align-items: center; min-height: var(--cs-control-h); padding-inline: 10px; border: 1px dashed var(--cs-border); border-radius: var(--cs-radius-sm); color: var(--cs-text-secondary); font-variant-numeric: tabular-nums; }
.cs-bc-note { margin: 0; }
.cs-bc-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-3); }
.cs-bc-review__card { min-width: 0; padding: var(--cs-space-3); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); }
.cs-bc-inspect { max-width: 320px; }

/* The floor schematic: tiles, not a CAD drawing. */
.cs-plan { display: grid; gap: var(--cs-space-2); min-width: 0; }
.cs-plan__grid { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; border: 2px solid var(--cs-border-strong); border-radius: var(--cs-radius-sm); background: var(--cs-surface); }
.cs-plan__grid--spaces { border-style: dashed; border-width: 1px; }
.cs-plan__tile { display: grid; gap: 1px; align-content: center; justify-items: center; min-height: 64px; padding: 6px; border: 1px solid var(--tile-border, var(--cs-border)); border-radius: var(--cs-radius-sm); background: var(--tile-bg, var(--cs-surface-subtle)); text-align: center; }
.cs-plan__tile.is-apartment { --tile-bg: var(--cs-info-subtle); --tile-border: var(--cs-info-border); }
.cs-plan__tile.is-apartment-small { --tile-bg: var(--cs-success-subtle); --tile-border: var(--cs-success-border); }
.cs-plan__tile.is-commercial { --tile-bg: var(--cs-warning-subtle); --tile-border: var(--cs-warning-border); }
.cs-plan__tile.is-space { --tile-bg: var(--cs-neutral-subtle); --tile-border: var(--cs-neutral-border); }
.cs-plan__number { font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; font-size: 13px; overflow-wrap: anywhere; }
.cs-plan__meta { color: var(--cs-text); font-size: 11.5px; }
.cs-plan__bay { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--cs-text-secondary); }
.cs-plan__bays { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; border: 2px solid var(--cs-border-strong); border-radius: var(--cs-radius-sm); background: var(--cs-surface); }
.cs-plan__bay-tile { display: grid; justify-items: center; padding: 6px 2px; border: 1px solid var(--cs-border); border-radius: 3px; font-size: 11.5px; font-variant-numeric: tabular-nums; background: var(--cs-surface-subtle); }
.cs-plan__bay-tile.is-dedicated { background: var(--cs-brand-subtle); border-color: var(--cs-brand-subtle-border); }
.cs-plan__bay-tile.is-visitor { background: var(--cs-neutral-subtle); border-style: dashed; }
.cs-plan__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--cs-text-secondary); font-size: 12px; }
.cs-plan__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--cs-border); vertical-align: -2px; margin-inline-end: -6px; }
.cs-plan__swatch.is-apartment { background: var(--cs-info-subtle); }
.cs-plan__swatch.is-commercial { background: var(--cs-warning-subtle); }
.cs-plan__swatch.is-space { background: var(--cs-neutral-subtle); }
.cs-plan__swatch.is-dedicated { background: var(--cs-brand-subtle); }

/* Radio-card choices (building type, floor category, kind of space, charge): real radios, visually the cards. */
.cs-bc-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs-bc-choice__legend { padding: 0; margin-block-end: 6px; font-weight: var(--cs-fw-semibold); font-size: 13px; }
.cs-bc-choice.is-cols-1 { grid-template-columns: minmax(0, 1fr); }
.cs-bc-choice.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-bc-choice.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-bc-choice.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-bc-seg { position: relative; }
.cs-bc-seg > input[type="radio"] { position: absolute; inset-inline-start: 10px; inset-block-start: 12px; inline-size: 14px; block-size: 14px; margin: 0; accent-color: var(--cs-brand); cursor: pointer; }
.cs-bc-seg:has(> input[type="radio"]) { padding-inline-start: 34px; cursor: pointer; }
.cs-bc-seg:has(> input:focus-visible) { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
.cs-bc-seg.is-tile { justify-items: center; text-align: center; padding: 10px 8px 10px 30px; }
.cs-bc-seg.is-tile > input[type="radio"] { inset-block-start: 8px; inset-inline-start: 8px; }
.cs-bc-subchoice { margin-block-start: var(--cs-space-2); }

/* First visit and locked steps. */
.cs-bc-welcome { margin: 0; padding: 12px 14px; border-radius: var(--cs-radius); background: var(--cs-brand-subtle); color: var(--cs-text); font-size: 14px; line-height: 1.5; }
.cs-bc-next { margin: 0; padding-inline-start: 0; list-style: none; display: grid; gap: 10px; counter-reset: next; }
.cs-bc-next li { display: grid; gap: 1px; padding-inline-start: 30px; position: relative; counter-increment: next; font-size: 13px; }
.cs-bc-next li::before { content: counter(next); position: absolute; inset-inline-start: 0; inset-block-start: 1px; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 1px solid var(--cs-border); font-size: 11px; font-weight: var(--cs-fw-semibold); color: var(--cs-text-secondary); }
.cs-bc-next li span { color: var(--cs-text-secondary); font-size: 12.5px; }
.cs-bc-step.is-locked button { color: var(--cs-text-tertiary); }
.cs-bc-step.is-locked .cs-bc-step__marker { border-style: dashed; background: var(--cs-surface-subtle); color: var(--cs-text-tertiary); }
.cs-bc-locked .cs-callout__body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cs-bc-progress__head .is-error, .cs-bc-footer__saved.is-error { color: var(--cs-danger-strong); }
.cs-bc-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-bc-viewbar .cs-bc-segments { grid-template-columns: repeat(2, minmax(0, 220px)); }

/* Matrix, summaries, mapping results. */
.cs-bc-matrix th[scope="row"] { min-width: 150px; vertical-align: top; }
.cs-bc-matrix td, .cs-bc-matrix th { height: auto; padding-block: 8px; }
.cs-bc-matrix td { vertical-align: top; }
.cs-bc-matrix tfoot th, .cs-bc-matrix tfoot td { font-weight: var(--cs-fw-semibold); }
.cs-bc-matrix__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 6px; font-weight: var(--cs-fw-regular); }
.cs-bc-num-badge { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; margin-inline-end: 6px; border-radius: 50%; background: var(--cs-brand-subtle); color: var(--cs-brand); font-size: 12px; font-weight: var(--cs-fw-semibold); vertical-align: 1px; }
.cs-bc-optional { margin-inline-start: 6px; padding: 1px 8px; border: 1px solid var(--cs-border); border-radius: 999px; font-size: 11px; font-weight: var(--cs-fw-regular); color: var(--cs-text-secondary); vertical-align: 1px; }
.cs-bc-resultline { margin: var(--cs-space-2) 0 0; padding: 8px 10px; border-radius: var(--cs-radius-sm); background: var(--cs-surface-subtle); border: 1px solid var(--cs-border-subtle); font-size: 13px; }
.cs-bc-problem, .cs-bc-ok { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 12.5px; }
.cs-bc-problem { color: var(--cs-danger-strong); }
.cs-bc-ok { color: var(--cs-success-strong); }
.cs-bc-problem .cs-icon, .cs-bc-ok .cs-icon { flex: none; margin-block-start: 2px; }
.cs-bc-table tr.has-problem td, .cs-bc-table tr.has-problem th { background: var(--cs-danger-subtle); }
.cs-bc-assignments { margin-block-start: var(--cs-space-2); }
.cs-bc-assign-list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-bc-assign-list li { padding: 3px 8px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); background: var(--cs-surface); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cs-bc-flag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--cs-warning-subtle); border: 1px solid var(--cs-warning-border); color: var(--cs-warning-strong); font-size: 12px; }
.cs-bc-scope .cs-callout__body { font-size: 13px; }
.cs-cell-sub.is-warn { color: var(--cs-warning-strong); }

/* Review & create. */
.cs-bc-review__block { display: grid; gap: var(--cs-space-2); min-width: 0; padding-block-start: var(--cs-space-4); border-block-start: 1px solid var(--cs-border-subtle); }
.cs-bc-review__block:first-child { padding-block-start: 0; border-block-start: 0; }
.cs-bc-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-2); }
.cs-bc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 0; }
.cs-bc-tiles > div { padding: 8px 10px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle); }
.cs-bc-tiles dt { font-size: 12px; color: var(--cs-text-secondary); }
.cs-bc-tiles dd { margin: 2px 0 0; font-size: 20px; font-weight: var(--cs-fw-semibold); font-variant-numeric: tabular-nums; }
.cs-bc-dl { margin: 0; }
.cs-bc-scroll { max-block-size: 420px; overflow: auto; }
@media (max-width: 1199.98px) {
    .cs-bc-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-bc-aside { position: static; }
}
@media (max-width: 767.98px) {
    .cs-bc-segments, .cs-bc-review { grid-template-columns: minmax(0, 1fr); }
    .cs-bc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-bc-main__head, .cs-bc-main__body { padding: var(--cs-space-3); }
    .cs-bc-floor__actions { justify-content: flex-start; width: 100%; }
    .cs-bc-footer { flex-wrap: nowrap; padding: 8px var(--cs-space-3); }
    .cs-bc-footer__end { flex-wrap: nowrap; }
    .cs-bc-footer__saved { display: none; }
    .cs-bc-footer .cs-btn { padding-inline: 10px; }
    .cs-bc-footer [data-save-draft] .cs-btn__icon { display: none; }   /* one row: Back · Save draft · Continue */
}
@media (max-width: 399.98px) {
    .cs-bc-footer, .cs-bc-footer__end { flex-wrap: wrap; }
    .cs-bc-stack__row { grid-template-columns: 48px minmax(0, 1fr); }
    .cs-plan__grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}
@media (max-width: 767.98px) {
    .cs-bc-choice.is-cols-2, .cs-bc-choice.is-cols-3, .cs-bc-choice.is-cols-4 { grid-template-columns: minmax(0, 1fr); }
    .cs-bc-viewbar .cs-bc-segments { grid-template-columns: minmax(0, 1fr); }
    .cs-bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}/* A table inside .cs-table-wrap scrolls in its wrapper, which is then the sticky container: its header
   would sit topbar-height down over the first row. Headers there, and row headers anywhere, stay put. */
.cs-table-wrap .cs-table th, .cs-table tbody th { position: static; }
.cs-table-wrap { position: relative; }   /* contains visually-hidden captions and labels, so they scroll with the table */

/* ------------------------------------------------------------------ Unit rent policy (pricing) */
.cs-pricing-date { display: inline-block; width: auto; margin-inline: 8px; vertical-align: middle; }
.cs-pricing-table th[scope="row"] { font-weight: var(--cs-fw-medium); text-align: start; }
.cs-pricing-total th, .cs-pricing-total td { font-weight: var(--cs-fw-semibold); border-block-start: 1px solid var(--cs-border); }
.cs-pricing-concession { align-items: start; }
.cs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cs-list > li { display: grid; gap: 2px; padding-block-end: 12px; border-block-end: 1px solid var(--cs-border-subtle); }
.cs-list > li:last-child { padding-block-end: 0; border-block-end: 0; }

.cs-range { display: grid; gap: 10px; margin-block-start: var(--cs-space-4); }
.cs-range__track { position: relative; height: 12px; border-radius: 6px; background: var(--cs-neutral-subtle); overflow: visible; }
.cs-range__zone { position: absolute; inset-block: 0; border-radius: 6px; }
.cs-range__zone--below { inset-inline-start: 0; background: var(--cs-danger-subtle, #fde8e8); }
.cs-range__zone--ok { background: var(--cs-accent); opacity: .85; }
.cs-range__mark { position: absolute; inset-block: -4px; width: 3px; margin-inline-start: -1.5px; border-radius: 2px; }
.cs-range__mark--target { background: var(--cs-brand); }
.cs-range__mark--proposed { background: var(--cs-warning-strong, #b45309); width: 4px; }
.cs-range__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }
.cs-range__swatch { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 2px; background: var(--cs-neutral-subtle); }
.cs-range__swatch--below { background: var(--cs-danger-subtle, #fde8e8); }
.cs-range__swatch--ok { background: var(--cs-accent); }
.cs-range__swatch--target { background: var(--cs-brand); }
.cs-range__swatch--proposed { background: var(--cs-warning-strong, #b45309); }

.cs-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: chain; }
.cs-chain > li { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 36px; border-inline-start: 2px solid var(--cs-border); margin-inline-start: 10px; counter-increment: chain; }
.cs-chain > li::before { content: counter(chain); position: absolute; inset-inline-start: -13px; inset-block-start: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cs-border-strong); background: var(--cs-surface); color: var(--cs-text-secondary); font-size: 12px; font-weight: var(--cs-fw-semibold); }
.cs-chain > li.is-supplied { border-inline-start-color: var(--cs-accent); }
.cs-chain > li.is-winner { border-inline-start-color: var(--cs-brand); background: var(--cs-brand-subtle); }
.cs-chain > li.is-winner::before { background: var(--cs-brand); border-color: var(--cs-brand); color: var(--cs-text-inverse); }
.cs-chain__level { font-size: var(--cs-fs-support); color: var(--cs-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cs-chain__policy { font-weight: var(--cs-fw-semibold); }
.cs-chain__tag { justify-self: start; padding: 1px 8px; border-radius: 10px; background: var(--cs-brand); color: var(--cs-text-inverse); font-size: 11px; font-weight: var(--cs-fw-semibold); }
.cs-fieldset-plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs-plain-list { margin: 0; padding-inline-start: 18px; }
.cs-stepper__button { all: unset; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; cursor: pointer; border-radius: var(--cs-radius); }
.cs-stepper__button:focus-visible { outline: 2px solid var(--cs-focus-ring, var(--cs-brand)); outline-offset: 3px; }
.cs-rule { display: grid; gap: var(--cs-space-3); padding: var(--cs-space-4); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface-subtle, var(--cs-surface)); }
.cs-rule__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-cols--aside-main { display: grid; gap: var(--cs-space-5); grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1023.98px) { .cs-cols--aside-main { grid-template-columns: minmax(0, 1fr); } }
.cs-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-inbox__item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); color: inherit; text-decoration: none; background: var(--cs-surface); }
.cs-inbox__item:hover { background: var(--cs-surface-hover); }
.cs-inbox__item.is-selected { border-color: var(--cs-brand); box-shadow: 0 0 0 1px var(--cs-brand); background: var(--cs-brand-subtle); }
.cs-inbox__title { font-weight: var(--cs-fw-semibold); overflow-wrap: anywhere; }
.cs-inbox__sub { color: var(--cs-text-secondary); font-size: var(--cs-fs-support); overflow-wrap: anywhere; }
.cs-inbox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--cs-text-secondary); font-size: var(--cs-fs-support); }