@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

.code-conflict-editor {
    --code-bg: var(--shell-menu-bg, var(--shell-bg-active));
    --code-border: var(--shell-menu-border, var(--app-theme-card-border, var(--shell-border)));
    --code-header-bg: color-mix(in srgb, var(--shell-bg-active) 82%, transparent);
    --code-text: var(--shell-text-primary);
    --code-muted: var(--shell-text-secondary);
    --code-hover: var(--shell-bg-hover);
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-bg);
    color: var(--code-text);
}

.code-conflict-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 7px 10px 7px 12px;
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-header-bg);
}

.code-conflict-editor__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.code-conflict-editor__title {
    margin: 0;
    overflow: hidden;
    color: var(--code-text);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-conflict-editor__subtitle {
    overflow: hidden;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-conflict-editor__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.code-conflict-editor > .code-surface {
    flex: 1 1 auto;
}

.code-conflict-editor .monaco-editor,
.code-conflict-editor .monaco-editor-background,
.code-conflict-editor .monaco-editor .margin,
.code-conflict-editor .monaco-editor .monaco-editor-background {
    background: transparent !important;
}

.code-surface__conflict-line {
    background: transparent;
}

/* Merge-tool tints: ours in the added tone, theirs in the accent tone, the marker lines muted. Diff hosts
   re-point these through the --code-conflict-* variables to their own added / accent tokens. */
.code-surface__conflict-ours-line {
    background: var(--code-conflict-ours-bg, color-mix(in srgb, #3fb950 10%, transparent));
}

.code-surface__conflict-theirs-line {
    background: var(--code-conflict-theirs-bg, color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 10%, transparent));
}

.code-surface__conflict-marker-line {
    background: var(--code-conflict-marker-bg, color-mix(in srgb, var(--code-muted) 16%, transparent));
}

.code-surface__conflict-glyph {
    position: relative;
}

.code-surface__conflict-glyph::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px auto 0;
    border-radius: 9999px;
    background: var(--code-conflict-glyph, var(--code-muted));
}

/* Per-hunk action bar under the closing marker: a hairline row in the surface's own fill, plain text buttons. */
.code-surface__conflict-actions {
    position: absolute;
    z-index: 40;
    display: flex;
    min-width: 0;
    height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    border-top: 0.5px solid var(--code-border);
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-conflict-actions-bg, var(--code-bg));
    color: var(--code-text);
    pointer-events: none;
    user-select: none;
}

.code-surface__conflict-actions-title {
    flex: 0 0 auto;
    color: var(--code-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    pointer-events: none;
}

.code-surface__conflict-actions-group {
    display: inline-flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    pointer-events: auto;
}

.code-surface__conflict-action-button {
    appearance: none;
    display: inline-flex;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--code-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: default;
    pointer-events: auto;
    transition: background-color 150ms, color 150ms;
}

.code-surface__conflict-action-button:hover {
    background: var(--code-hover);
    color: var(--code-text);
    transition-duration: 0s;
}

.code-surface__conflict-action-button:focus-visible {
    outline: 1px solid var(--app-theme-accent, #5e6ad2);
    outline-offset: 1px;
}

.code-surface__conflict-actions-title,
.code-surface__conflict-action-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
}

.file-tree__row {
    display: flex;
    width: 100%;
    height: 28px;
    align-items: center;
    gap: 6px;
    margin: 0 0 1px;
    padding-right: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.file-tree__row-action {
    display: inline-flex;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: var(--pointer, pointer);
}

.file-tree__row-action:focus {
    outline: none;
}

.file-tree__row:focus-within {
    outline: 1px solid color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 58%, transparent);
    outline-offset: -1px;
}

.file-tree__checkbox {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--app-theme-accent, #5e6ad2);
}

.file-tree__row:hover {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.file-tree__row--selected {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.file-tree__row--selected:hover {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.file-tree__row--colored:not(.file-tree__row--selected) {
    color: var(--file-tree-entry-color, currentColor);
}

.file-tree__row--colored:hover,
.file-tree__row--colored.file-tree__row--selected {
    color: var(--file-tree-entry-color, var(--shell-nav-active-text, var(--shell-text-primary)));
}

.file-tree__disclosure {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.82;
}

.file-tree__disclosure .shell-icon svg {
    transition: transform 0.12s ease;
    transform-origin: 50% 50%;
}

.file-tree__disclosure--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
}

.file-tree__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.9;
}

.file-tree__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-tree__children {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.file-tree__collapse {
    display: grid;
    overflow: hidden;
    transition: grid-template-rows 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.file-tree__collapse--expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
}

.file-tree__collapse--collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-2px);
}

@font-face {
    font-family: "Inter Variable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Berkeley-Mono-Variable-v3.2.woff2") format("woff2");
}


/* Agent + person avatar pair (measured Linear board card, delegated issue): flex row, agent
   mark first, person pulled left 4.5px so it paints on top; 31.5×18 at 18px, no ring. */
.ui-avatar-pair {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    vertical-align: middle;
}

.ui-avatar-pair__person {
    margin-left: calc(-1 * var(--ui-avatar-pair-overlap, 4.5px));
}

/* Person avatar with an agent mark badged bottom-right (AgentBadgedAvatar). The badge is the
   inbox accessory anatomy measured on Linear's inbox rows: a surface-coloured ring 2px larger
   than the 14px mark, hanging 4px past the avatar's bottom-right edge. */
.ui-agent-badged-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.ui-agent-badged-avatar__badge {
    position: absolute;
    right: var(--ui-agent-badge-offset, -4px);
    bottom: var(--ui-agent-badge-offset, -4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ui-agent-badge-size, 14px) + 2px);
    height: calc(var(--ui-agent-badge-size, 14px) + 2px);
    border-radius: 50%;
    background: var(--ui-agent-badge-ring, var(--shell-bg-surface, lch(5.52% 0.4 272 / 1)));
}

.ui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-avatar-size, 24px);
    height: var(--ui-avatar-size, 24px);
    flex: 0 0 var(--ui-avatar-size, 24px);
    overflow: hidden;
    border-radius: 9999px;
    background: var(--ui-avatar-bg, var(--shell-accent));
    color: var(--ui-avatar-text, lch(100% 0 0));
    /* Linear's initials: weight 400, ~9px in an 18px circle (measured). */
    font-size: calc(var(--ui-avatar-size, 24px) * 0.5);
    font-weight: 400;
    line-height: 1;
}

.ui-avatar--rounded-square {
    border-radius: 7px;
}

.ui-avatar--square {
    border-radius: 0;
}

.ui-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.layout-grid {
    container-type: inline-size;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    row-gap: var(--layout-grid-row-gap, var(--layout-grid-gap, 14px));
    column-gap: var(--layout-grid-column-gap, var(--layout-grid-gap, 14px));
    align-items: var(--layout-grid-align-items, stretch);
    justify-items: var(--layout-grid-justify-items, stretch);
}

.layout-grid--columns,
.layout-grid--areas {
    grid-template-columns: repeat(var(--layout-grid-columns, 12), minmax(0, 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--areas {
    grid-template-areas: var(--layout-grid-areas);
}

.layout-grid--autofit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min-item-width, 240px)), 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--autofill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--layout-grid-min-item-width, 240px)), 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--dense {
    grid-auto-flow: row dense;
}

.layout-grid--inset-compact {
    padding: 8px;
}

.layout-grid--inset-medium {
    padding: 12px;
}

.layout-grid--inset-page {
    padding: var(--single-column-page-body-gutter, 20px);
}

.layout-grid--equal-height > .layout-grid-item {
    display: block;
    align-self: stretch;
}

.layout-grid--equal-height > .layout-grid-item > * {
    width: 100%;
    min-height: 100%;
}

.layout-grid-item {
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    grid-column: var(--layout-grid-item-column, auto);
    grid-row: span var(--layout-grid-item-row-span, 1);
    order: var(--layout-grid-item-order, 0);
}

.layout-grid-item--area {
    grid-area: var(--layout-grid-item-area);
}

.docs-site {
    --docs-bg: rgb(8, 9, 10);
    --docs-bg-elevated: rgb(28, 28, 31);
    --docs-bg-hover: rgba(255, 255, 255, 0.05);
    --docs-border: rgb(28, 28, 31);
    --docs-border-strong: rgb(35, 37, 42);
    --docs-divider: rgb(62, 62, 68);
    --docs-text: rgb(247, 248, 248);
    --docs-text-secondary: rgb(208, 214, 224);
    --docs-text-muted: rgb(138, 143, 152);
    --docs-text-faint: rgb(95, 99, 108);
    background: var(--docs-bg);
    color: var(--docs-text);
    font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    position: fixed;
    inset: 0;
    overflow: auto;
    z-index: 0;
}

.docs-site--light {
    --docs-bg: rgb(247, 248, 248);
    --docs-bg-elevated: rgb(255, 255, 255);
    --docs-bg-hover: rgba(0, 0, 0, 0.04);
    --docs-border: rgb(223, 225, 229);
    --docs-border-strong: rgb(211, 214, 219);
    --docs-divider: rgb(196, 200, 207);
    --docs-text: rgb(26, 27, 30);
    --docs-text-secondary: rgb(65, 69, 76);
    --docs-text-muted: rgb(100, 106, 116);
    --docs-text-faint: rgb(142, 148, 158);
}

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

.docs-site a {
    color: inherit;
    text-decoration: none;
}

.docs-site button,
.docs-site input {
    font: inherit;
}

.docs-site__skip-link {
    position: fixed;
    top: 10px;
    left: 292px;
    z-index: 900;
    transform: translateY(-64px);
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    background: var(--docs-bg-elevated);
    color: var(--docs-text);
    padding: 7px 10px;
    transition: transform 160ms ease;
}

.docs-site__skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
}

.docs-sidebar {
    background: var(--docs-bg);
    border-right: 1px solid var(--docs-border-strong);
    color: var(--docs-text-muted);
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 280px;
    z-index: 100;
}

.docs-sidebar__header {
    align-items: center;
    border-bottom: 1px solid var(--docs-border-strong);
    display: flex;
    flex: 0 0 64px;
    height: 64px;
    padding: 0 16px 0 24px;
    width: 279px;
}

.docs-site .docs-sidebar__brand {
    align-items: center;
    color: var(--docs-text);
    display: inline-flex;
    gap: 16px;
    min-width: 0;
}

.docs-sidebar__brand-mark {
    background: var(--docs-text);
    border-radius: 9999px;
    display: inline-block;
    height: 20px;
    overflow: hidden;
    position: relative;
    content: "";
    width: 20px;
}

.docs-sidebar__brand-mark::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 4px,
            var(--docs-bg) 4px,
            var(--docs-bg) 6px
        );
    content: "";
    inset: 0;
    position: absolute;
}

.docs-sidebar__brand-divider {
    background: var(--docs-divider);
    display: inline-block;
    height: 20px;
    width: 1px;
}

.docs-sidebar__brand-text {
    color: var(--docs-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.docs-sidebar__search-button {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-sidebar__search-button:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-sidebar__desktop-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.docs-sidebar__nav-scroll {
    flex: 1 1 auto;
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) 10px,
        rgb(0, 0, 0) 20px,
        rgb(0, 0, 0) calc(100% - 64px),
        rgba(0, 0, 0, 0.2) calc(100% - 32px),
        rgba(0, 0, 0, 0) 100%
    );
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 12px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) 10px,
        rgb(0, 0, 0) 20px,
        rgb(0, 0, 0) calc(100% - 64px),
        rgba(0, 0, 0, 0.2) calc(100% - 32px),
        rgba(0, 0, 0, 0) 100%
    );
}

.docs-sidebar__nav-scroll::-webkit-scrollbar {
    display: none;
}

.docs-sidebar__search-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: none;
    gap: 8px;
    height: 32px;
    margin: 8px 0 14px;
    padding: 0 8px;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
}

.docs-sidebar__search-row:hover {
    background: var(--docs-bg-hover);
    color: var(--docs-text-secondary);
}

.docs-sidebar__mobile-tools {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 8px 0 20px;
}

.docs-sidebar__mobile-theme {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-sidebar__mobile-theme:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-sidebar__mobile-theme span {
    border: 1.5px solid currentColor;
    border-radius: 9999px;
    display: block;
    height: 14px;
    overflow: hidden;
    position: relative;
    width: 14px;
}

.docs-sidebar__mobile-theme span::after {
    background: currentColor;
    content: "";
    inset: -2px -2px -2px 6px;
    position: absolute;
}

.docs-sidebar__section {
    margin: 0;
}

.docs-sidebar__section-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    height: 36px;
    justify-content: space-between;
    line-height: 20px;
    padding: 0 5px 0 2px;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
}

.docs-sidebar__section-button:hover,
.docs-sidebar__section-button--current {
    color: var(--docs-text);
}

.docs-sidebar__section-button:hover {
    background: var(--docs-bg-hover);
}

.docs-sidebar__section-button .shell-icon {
    color: var(--docs-text-faint);
    transition: color 140ms ease, transform 140ms ease;
}

.docs-sidebar__section-button:hover .shell-icon,
.docs-sidebar__section-button--current .shell-icon {
    color: var(--docs-text-muted);
}

.docs-sidebar__section-button--collapsed .shell-icon {
    transform: rotate(-90deg);
}

.docs-sidebar__links {
    display: grid;
    gap: 0;
    margin: 0 0 2px;
}

.docs-sidebar__link {
    align-items: center;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 450;
    gap: 8px;
    height: 32px;
    line-height: 20px;
    padding: 0 8px 0 14px;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-sidebar__link:hover {
    background: transparent;
    color: var(--docs-text);
}

.docs-sidebar__link--current {
    color: var(--docs-text);
}

.docs-sidebar__footer {
    border-top: 1px solid transparent;
    display: grid;
    flex: 0 0 auto;
    gap: 0;
    padding: 20px;
}

.docs-sidebar__footer a {
    align-items: center;
    border-radius: 0;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 510;
    gap: 0;
    height: 36px;
    line-height: 21px;
    padding: 0 5px;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-sidebar__footer a:first-child {
    color: var(--docs-text);
}

.docs-sidebar__footer a:hover {
    background: transparent;
    color: var(--docs-text);
}

.docs-sidebar__footer .shell-icon {
    color: currentColor;
    flex: 0 0 auto;
    margin-right: 12px;
}

.docs-sidebar__open-app--mobile,
.docs-sidebar__menu-button,
.docs-sidebar__mobile-content {
    display: none;
}

.docs-site__header {
    align-items: center;
    background: var(--docs-bg);
    border-bottom: 1px solid var(--docs-border-strong);
    display: flex;
    height: 64px;
    left: 280px;
    padding: 0 16px 0 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.docs-site__breadcrumbs {
    align-items: center;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 510;
    gap: 8px;
    line-height: 21px;
    min-width: 0;
}

.docs-site__breadcrumb {
    color: var(--docs-text-muted);
    transition: color 140ms ease;
}

.docs-site__breadcrumb:hover {
    color: var(--docs-text-secondary);
}

.docs-site__breadcrumb--current {
    color: var(--docs-text);
}

.docs-site__breadcrumb-divider {
    color: var(--docs-text-faint);
    display: inline-flex;
    font-size: 14px;
    line-height: 21px;
}

.docs-site__header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.docs-site__theme-toggle {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-right: 1px;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-site__theme-toggle:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-site__open-app {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.28);
    color: var(--docs-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 520;
    height: 32px;
    justify-content: center;
    line-height: 20px;
    padding: 0;
    transition: background-color 140ms ease, box-shadow 140ms ease;
    width: 84px;
}

.docs-site__open-app:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.32);
}

.docs-site-copy {
    align-items: center;
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    display: inline-flex;
    height: 32px;
    position: relative;
    width: 147px;
}

.docs-site-copy__main,
.docs-site-copy__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-site-copy__main {
    border-radius: 9999px 0 0 9999px;
    flex: 0 0 115px;
    gap: 8px;
    padding: 0;
}

.docs-site-copy__toggle {
    border-left: 1px solid var(--docs-border);
    border-radius: 0 9999px 9999px 0;
    flex: 0 0 30px;
    padding: 0;
    width: 30px;
}

.docs-site-copy__main:hover,
.docs-site-copy__toggle:hover {
    background: var(--docs-bg-hover);
    color: var(--docs-text-secondary);
}

.docs-site-copy__menu {
    animation: docs-copy-menu-in 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgb(15, 16, 17);
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    box-shadow: 0 7px 32px rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 0;
    min-width: 280px;
    opacity: 1;
    padding: 4px;
    position: absolute;
    right: 0;
    transform-origin: top left;
    top: calc(100% + 8px);
    z-index: 760;
}

@keyframes docs-copy-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.docs-site-copy__menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--docs-text-secondary);
    display: flex;
    gap: 12px;
    height: 52px;
    padding: 6px 12px;
    text-align: left;
    width: 100%;
}

.docs-site-copy__menu button > .shell-icon {
    color: var(--docs-text-muted);
    flex: 0 0 auto;
}

.docs-site-copy__menu button span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.docs-site-copy__menu button strong {
    color: var(--docs-text-secondary);
    font-size: 14px;
    font-weight: 510;
    line-height: 19.5px;
}

.docs-site-copy__menu button small {
    color: var(--docs-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.docs-site-copy__menu button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--docs-text);
}

.docs-site-copy__menu button:hover strong {
    color: var(--docs-text);
}

.docs-site__main {
    min-height: 100vh;
    padding-left: 280px;
}

.docs-site__article-layout {
    align-items: flex-start;
    display: flex;
    gap: 76px;
    margin-left: 92px;
    padding: 112px 48px 48px 0;
}

.docs-article {
    color: var(--docs-text-secondary);
    flex: 0 0 650px;
    max-width: 650px;
    min-width: 0;
}

.docs-article h1,
.docs-article h2,
.docs-article h3 {
    color: var(--docs-text);
    font-weight: 560;
    letter-spacing: 0;
}

.docs-article h2 a,
.docs-article h3 a {
    display: inline-block;
}

.docs-article [id] {
    scroll-margin-top: 89px;
}

.docs-article h1 {
    font-size: 32px;
    line-height: 36px;
    margin: 0;
    font-weight: 590;
}

.docs-article h2 {
    font-size: 24px;
    font-weight: 590;
    line-height: 31.92px;
    margin: 56px 0 0;
    scroll-margin-top: 89px;
}

.docs-article h3 {
    font-size: 20px;
    font-weight: 590;
    line-height: 32px;
    margin: 24px 0 0;
    scroll-margin-top: 89px;
}

.docs-article p,
.docs-article li {
    color: var(--docs-text-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

.docs-article p {
    margin: 0 0 16px;
}

.docs-article h3 + p {
    margin-top: 6px;
    margin-bottom: 0;
}

.docs-article__lead {
    color: var(--docs-text-secondary);
    margin-top: 16px;
    margin-bottom: 32px;
}

.docs-article figure {
    margin: 32px 0 32px;
}

.docs-article img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.docs-article blockquote {
    border-left: 1px solid var(--docs-divider);
    margin: 24px 0 32px;
    padding: 0 0 0 16px;
}

.docs-article blockquote p {
    color: var(--docs-text-muted);
    margin: 0;
}

.docs-article ul,
.docs-article ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.docs-article li {
    margin: 8px 0;
    padding-left: 2px;
}

.docs-article table {
    border-collapse: collapse;
    color: var(--docs-text-secondary);
    display: table;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin: 28px 0 32px;
    width: 100%;
}

.docs-article th {
    color: var(--docs-text);
    font-weight: 540;
    padding: 8px 24px 8px 0;
    text-align: left;
}

.docs-article td {
    border-top: 1px solid var(--docs-border);
    padding: 12px 24px 12px 0;
    vertical-align: top;
}

.docs-article kbd {
    background: var(--docs-bg);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--docs-divider);
    color: var(--docs-text-secondary);
    font: inherit;
    margin: 0 1px;
    padding: 3px 6px;
}

.docs-article__pager {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 64px;
}

.docs-article__pager-card {
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    min-height: 80px;
    padding: 16px;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.docs-article__pager-card:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-divider);
}

.docs-article__pager-card span {
    color: var(--docs-text-faint);
    font-size: 13px;
    line-height: 18px;
}

.docs-article__pager-card strong {
    color: var(--docs-text);
    font-size: 14px;
    font-weight: 520;
    line-height: 20px;
}

.docs-article__pager-card--next {
    text-align: right;
}

.docs-toc {
    flex: 0 0 250px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    max-height: calc(100vh - 128px);
    overflow: hidden;
    padding-right: 8px;
    position: sticky;
    top: 104px;
}

.docs-toc__nav {
    border-left: 1px solid var(--docs-border-strong);
    display: grid;
    gap: 0;
    padding-left: 13px;
    position: relative;
}

.docs-toc__indicator {
    background: var(--docs-text);
    border-radius: 9999px;
    height: 19.5px;
    left: -1px;
    position: absolute;
    top: 0;
    transition: background-color 140ms ease;
    width: 1px;
}

.docs-site .docs-toc__link {
    border-radius: 0;
    color: var(--docs-text-muted);
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    margin: 0 0 8px var(--docs-toc-indent, 0px);
    padding: 0;
    position: relative;
    transition: color 140ms ease;
    width: calc(100% - var(--docs-toc-indent, 0px));
}

.docs-site .docs-toc__link:hover,
.docs-site .docs-toc__link:focus-visible,
.docs-site .docs-toc__link--active {
    color: var(--docs-text);
}

.docs-site .docs-toc__link:hover {
    background: transparent;
}

.docs-site .docs-toc__link--nested {
    padding-left: 0;
}

.docs-search {
    align-items: flex-start;
    background: rgba(8, 9, 10, 0.88);
    display: flex;
    inset: 0;
    justify-content: center;
    padding-top: 109px;
    position: fixed;
    z-index: 700;
}

.docs-search__dialog {
    background: var(--docs-bg-elevated);
    border: 1px solid var(--docs-border-strong);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    color: var(--docs-text-muted);
    display: block;
    min-height: 56px;
    overflow: hidden;
    position: relative;
    width: 560px;
}

.docs-search__dialog > .shell-icon {
    color: var(--docs-text-muted);
    left: 18px;
    position: absolute;
    top: 19px;
    z-index: 1;
}

.docs-search__input {
    background: transparent;
    border: 0;
    color: var(--docs-text);
    height: 56px;
    line-height: 56px;
    outline: none;
    padding: 0 18px 0 48px;
    width: 100%;
}

.docs-search__input::placeholder {
    color: var(--docs-text-faint);
}

.docs-search__results {
    border-top: 1px solid var(--docs-border-strong);
    display: grid;
    gap: 2px;
    padding: 6px;
}

.docs-search__result {
    border-radius: 8px;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
}

.docs-search__result:hover {
    background: rgba(255, 255, 255, 0.07);
}

.docs-search__result span {
    color: var(--docs-text);
    font-size: 14px;
    line-height: 20px;
}

.docs-search__result small {
    color: var(--docs-text-muted);
    font-size: 12px;
    line-height: 16px;
}

.docs-search__result p {
    color: var(--docs-text-muted);
    font-size: 13px;
    line-height: 18px;
    margin: 0;
}

@media (max-width: 1240px) {
    .docs-site__article-layout {
        gap: 40px;
        margin-left: 24px;
    }
}

@media (max-width: 1120px) {
    .docs-site__article-layout {
        display: block;
        margin-left: 0;
        padding: 112px 24px 48px;
    }

    .docs-article {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .docs-toc {
        display: none;
    }
}

@media (max-width: 768px) {
    .docs-sidebar {
        border-right: 0;
        height: 65px;
        right: 0;
        overflow: visible;
        width: 100%;
    }

    .docs-sidebar__header {
        flex-basis: 65px;
        height: 65px;
        padding: 0 8px 0 24px;
        width: auto;
    }

    .docs-sidebar__search-button--desktop,
    .docs-sidebar__desktop-content,
    .docs-site__header,
    .docs-toc {
        display: none;
    }

    .docs-sidebar__open-app--mobile {
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 9999px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.28);
        color: var(--docs-text);
        display: inline-flex;
        font-size: 14px;
        font-weight: 520;
        height: 32px;
        justify-content: center;
        line-height: 20px;
        margin-left: auto;
        padding: 0;
        width: 84px;
    }

    .docs-sidebar__menu-button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 9999px;
        color: var(--docs-text);
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        height: 48px;
        justify-content: center;
        margin-left: 4px;
        padding: 0;
        transition: background-color 140ms ease;
        width: 48px;
    }

    .docs-sidebar__menu-button:hover {
        background: var(--docs-bg-hover);
    }

    .docs-sidebar__menu-button span {
        background: currentColor;
        border-radius: 9999px;
        height: 1.5px;
        transition: transform 180ms ease, opacity 180ms ease;
        width: 17px;
    }

    .docs-sidebar__menu-button[aria-expanded="true"] span:first-child {
        transform: translateY(3.25px) rotate(45deg);
    }

    .docs-sidebar__menu-button[aria-expanded="true"] span:last-child {
        transform: translateY(-3.25px) rotate(-45deg);
    }

    .docs-sidebar__mobile-content {
        background: var(--docs-bg);
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: 0;
        min-height: 0;
        overflow: hidden;
        position: fixed;
        right: 0;
        top: 72px;
        z-index: 700;
    }

    .docs-sidebar__mobile-content .docs-sidebar__nav-scroll {
        padding: 8px 20px 12px;
    }

    .docs-sidebar__mobile-content .docs-sidebar__search-row {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--docs-border);
        border-radius: 9999px;
        display: flex;
        flex: 1 1 auto;
        margin: 0;
        width: auto;
    }

    .docs-sidebar__mobile-content .docs-sidebar__footer {
        border-top-color: var(--docs-border);
    }

    .docs-site__main {
        padding-left: 0;
    }

    .docs-site__article-layout {
        display: block;
        margin-left: 0;
        padding: 112px 24px 48px;
    }

    .docs-article {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .docs-article h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .docs-article [id],
    .docs-article h2,
    .docs-article h3 {
        scroll-margin-top: 236px;
    }

    .docs-article h2 {
        font-size: 20px;
        line-height: 26.6px;
    }

    .docs-article table {
        min-width: 360px;
    }

    .docs-article__pager {
        grid-template-columns: 1fr;
        margin-top: 48px;
    }

    .docs-search {
        padding-top: 101px;
    }

    .docs-search__dialog {
        width: calc(100vw - 40px);
    }
}

.layout-grid-item--hide-below-sm,
.layout-grid-item--hide-below-md,
.layout-grid-item--hide-below-lg {
    display: none;
}

@container (min-width: 640px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto));
        order: var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0));
    }

    .layout-grid-item--hide-below-sm {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-sm {
        display: block;
    }
}

@container (min-width: 900px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto)));
        order: var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0)));
    }

    .layout-grid-item--hide-below-md {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-md {
        display: block;
    }
}

@container (min-width: 1180px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-lg-column, var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto))));
        order: var(--layout-grid-item-lg-order, var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0))));
    }

    .layout-grid-item--hide-below-lg {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-lg {
        display: block;
    }

    .layout-grid-item--hide-above-lg {
        display: none;
    }
}

@container (min-width: 1440px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-xl-column, var(--layout-grid-item-lg-column, var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto)))));
        order: var(--layout-grid-item-xl-order, var(--layout-grid-item-lg-order, var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0)))));
    }
}

:root {
    color-scheme: dark;
    --font-regular: "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Linear Thai", sans-serif;
    --font-mono: "Berkeley Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --shell-sidebar-width: 220px;
    --settings-sidebar-width: 244px;
    --shell-nav-row-width: 220px;
    --shell-surface-radius: 12px;
    --shell-shadow: lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0;
    --shell-bg-sidebar: lch(2.595% 0.4 272 / 1);
    --shell-bg-scroll: transparent;
    --shell-bg-surface: lch(5.52% 0.4 272 / 1);
    --shell-bg-active: lch(9.02% 0.45 272 / 1);
    --shell-bg-button: lch(10.691% 0.493 272 / 1);
    --shell-filter-band-bg: lch(6.77% 0.75 272 / 1);
    --shell-filter-chip-bg: lch(10.691% 0.493 272 / 1);
    --shell-form-divider: lch(27% 1.5 272 / 1);
    --shell-form-checkbox-ring: lch(57% 1.5 272 / 1);
    --shell-form-panel-bg: lch(12.5% 0.85 272 / 1);
    --shell-form-card-border: lch(19% 1.48 272 / 1);
    --shell-form-preview-border: lch(36.5% 1.5 272 / 1);
    --shell-form-preview-text: lch(42% 1 272 / 1);
    --shell-list-row-hover: lch(13.5% 1 272 / 1);
    --shell-accent: lch(53% 52.26 286.91 / 1);
    --shell-accent-contrast: lch(100% 5 286.91 / 1);
    --shell-bg-surface-button: lch(10.691% 0.493 272 / 1);
    --shell-border-strong: lch(19.64% 1.38 272 / 1);
    --shell-bg-hover: lch(10.691% 0.493 272 / 1);
    --shell-nav-active-bg: var(--shell-bg-active);
    --shell-nav-hover-bg: var(--shell-bg-hover);
    --shell-nav-text: var(--shell-text-secondary);
    --shell-nav-hover-text: var(--shell-text-primary);
    --shell-nav-active-text: var(--shell-text-primary);
    --shell-menu-bg: lch(9.92% 0.75 272 / 1);
    --shell-border: lch(8.84% 1.38 272 / 1);
    --shell-text-primary: lch(100 0 272);
    --shell-text-secondary: lch(60.307% 1 272);
    --shell-text-tertiary: lch(90.077% 1 272);
    --shell-text-muted: lch(47% 0.9 272);
    --shell-sidebar-resize-guide: lch(100% 0 272 / 1);
    --shell-resize-guide-paint: linear-gradient( lch(from var(--shell-sidebar-resize-guide) l c h / 0) 0%, lch(from var(--shell-sidebar-resize-guide) l c h / 0.5) 15%, lch(from var(--shell-sidebar-resize-guide) l c h / 0.65) 50%, lch(from var(--shell-sidebar-resize-guide) l c h / 0.5) 85%, lch(from var(--shell-sidebar-resize-guide) l c h / 0) 100%);
    --shell-menu-text: lch(90.895% 1.375 272 / 1);
    --shell-menu-text-strong: lch(100 0 272 / 1);
    --shell-menu-text-danger: lch(65% 40 25 / 1);
    /* Create-modal surfaces (measured Linear light values live in the light blocks; these are
       the dark-ramp equivalents so the doc/panel/footer families theme like the rest of Qui). */
    --shell-create-panel-bg: lch(12.5% 1 272 / 1);
    --shell-create-panel-border: lch(19% 1.4 272 / 1);
    --shell-create-hairline: lch(19% 1.4 272 / 1);
    --shell-create-hover-bg: lch(20% 1 272 / 1);
    --shell-create-hover-bg-strong: lch(22% 1 272 / 1);
    --shell-create-text-title: lch(96% 0 272);
    --shell-create-text-primary: lch(88% 1 272);
    --shell-create-text-secondary: lch(62% 1 272);
    --shell-create-text-muted: lch(48% 1 272);
    --shell-create-placeholder: lch(45% 1 272);
    --shell-create-icon-bg: lch(35% 3 272 / 0.45);
    --shell-create-field-bg: lch(13% 1 272 / 1);
    --shell-create-row-hover: lch(17.5% 1 272 / 1);
    --shell-create-field-focus-border: lch(40% 1 272);
    --shell-sidebar-gutter: 8px;
    --shell-sidebar-peek-top: 42px;
    --shell-sidebar-peek-shadow: 0 0 0 0.5px lch(24% 1 272 / 1), 0 9px 48px lch(0 0 0 / 0.32), 0 6px 24px lch(0 0 0 / 0.36), 0 1px 1px lch(0 0 0 / 0.2);
    --shell-menu-hint: lch(63.582% 1.375 272 / 1);
    --shell-menu-indicator: lch(39.91% 1.375 272 / 1);
    --shell-menu-border: lch(22.88% 1.83 272 / 1);
    --shell-menu-divider: lch(22.88% 1.83 272 / 1);
    --shell-menu-item-hover: lch(15.32% 0.75 272 / 1);
    --assistant-border: lch(17.48% 1.38 272 / 1);
    --assistant-panel-shell-bg: lch(2.595% 0.4 272 / 1);
    --assistant-panel-content-bg: lch(7.67% 0.75 272 / 1);
    --assistant-panel-shadow: lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
    --assistant-composer-bg: lch(9.599% 0.943 272 / 1);
    --assistant-composer-button-bg: lch(16.991% 1.393 272 / 1);
    --assistant-composer-border: var(--assistant-border);
    --assistant-composer-icon: lch(90.986% 1.6 272 / 1);
    --assistant-user-message-bg: lch(9.599% 0.943 272 / 1);
    --assistant-user-message-text: lch(90.668% 1.375 272 / 1);
    --assistant-user-message-shadow: lch(0% 0 0 / 0.04) 0 4px 4px -1px, lch(0% 0 0 / 0.08) 0 1px 1px 0;
    --shell-menu-shadow: lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0;
    --app-modal-overlay: rgba(0, 0, 0, 0.4);
    --app-modal-overlay-opacity: 0.95;
    --app-modal-shadow: lch(0 0 0 / 0.08) 0 9px 48px 0, lch(0 0 0 / 0.1) 0 6px 24px 0, lch(0 0 0 / 0.04) 0 1px 1px 0;
    --app-modal-animation: 220ms cubic-bezier(0.43, 0.07, 0.59, 0.94);
    --app-modal-resize-duration: 300ms;
    --app-modal-resize-ease: cubic-bezier(0.43, 0.07, 0.59, 0.94);
    --shell-avatar-green: lch(70% 60 140);
    --shell-placeholder: lch(12% 0.9 272 / 0.92);
    --shell-placeholder-soft: lch(14% 0.85 272 / 0.95);
    --shell-placeholder-line: color-mix(in srgb, var(--shell-border) 72%, transparent);
    --sectioned-panel-list-header-bg: lch(7.67% 0.75 272 / 1);
    --shell-bg-card: lch(7.67% 0.75 272 / 1);
    --shell-border-card: lch(14.15% 1.83 272 / 1);
    --sectioned-panel-list-header-color: var(--shell-text-secondary);
    --settings-section-header-bg: color-mix(in lch, var(--settings-card-bg, lch(7.67% 0.75 272 / 1)) 78%, var(--shell-bg-surface, lch(5.52% 0.4 272 / 1)) 22%);
    --ui-form-range-tooltip-bg: var(--shell-menu-bg);
    --ui-form-range-tooltip-border: var(--shell-menu-border);
    --ui-form-range-tooltip-text: var(--shell-menu-text);
}

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

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background: var(--shell-bg-sidebar);
}

body {
    overflow: hidden;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.5;
    color: var(--shell-text-primary);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.shell-sidebar-resizing,
body.shell-sidebar-resizing *,
body.grid-sidebar-resizing,
body.grid-sidebar-resizing *,
body.page-side-panel-resizing,
body.page-side-panel-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    background: transparent;
    color: inherit;
}

h1:focus {
    outline: none;
}

.app-shell,
.settings-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--shell-bg-sidebar);
    color: var(--shell-text-primary);
}

.app-shell__main-column,
.settings-shell__main-column {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
}

.app-shell__main-column {
    margin-left: var(--shell-sidebar-width);
}

.settings-shell__main-column {
    margin-left: var(--settings-sidebar-width);
}

.shell-sidebar-overlay__backdrop {
    display: none;
}


@media (width <= 1024px) {
    .app-shell__main-column,
    .settings-shell__main-column {
        margin-left: 0;
    }

    .shell-sidebar {
        z-index: 760;
        width: min(var(--shell-sidebar-width), calc(100vw - 40px), 330px);
        max-width: min(calc(100vw - 40px), 330px);
        background: var(--shell-bg-sidebar);
        opacity: 0;
        transform: translateX(-100%);
        transition:
            transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 50ms ease-in-out;
        will-change: transform;
    }

    .shell-sidebar--workspace {
        --shell-nav-row-width: calc(min(var(--shell-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .shell-sidebar--settings {
        width: min(var(--settings-sidebar-width), calc(100vw - 40px), 330px);
        --shell-nav-row-width: calc(min(var(--settings-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .app-shell--sidebar-overlay-open .shell-sidebar,
    .settings-shell--sidebar-overlay-open .shell-sidebar {
        opacity: 1;
        transform: translateX(0);
    }

    .shell-sidebar__resize-handle {
        display: none;
    }

    .shell-sidebar-overlay__backdrop {
        position: fixed;
        inset: 0;
        z-index: 740;
        display: block;
        border: 0;
        background: color-mix(in srgb, var(--shell-bg-sidebar) 62%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease-in-out;
    }

    .app-shell--sidebar-overlay-open .shell-sidebar-overlay__backdrop,
    .settings-shell--sidebar-overlay-open .shell-sidebar-overlay__backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell-sidebar,
    .shell-sidebar-overlay__backdrop {
        transition: none;
    }
}


.settings-sidebar__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-left: 4px;
    padding: 0 12px 0 6px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition-property: border, background-color, color, opacity;
    transition-duration: 120ms;
}

.settings-sidebar__back-link:hover,
.settings-sidebar__back-link:focus-visible {
    background-color: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
    color: var(--shell-text-primary);
}

.settings-sidebar__back-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.settings-sidebar__back-link-label {
    display: inline-flex;
    align-items: center;
}

.page-stub__body::-webkit-scrollbar {
    width: 8px;
}

.page-stub__body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-border) 65%, transparent);
    border-radius: 999px;
}

.app-shell__surface {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 8px 8px 8px 0;
    overflow: hidden;
    border: 0.5px solid var(--shell-surface-border, var(--shell-border));
    border-radius: var(--shell-surface-radius);
    background: var(--shell-bg-surface);
    box-shadow: var(--shell-shadow);
}

.app-shell__surface--settings {
    margin-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-shell__surface--settings::-webkit-scrollbar {
    display: none;
}

.app-shell__surface--test-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-shell__surface--test-scroll::-webkit-scrollbar {
    display: none;
}

.app-shell__surface-wrap {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    transform-origin: center top;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell__surface-wrap--assistant-maximized {
    transform: scale(0.98);
}

/* The auth host is a normal scrolling document: the app shell's body { height:100%; overflow:hidden }
   must not clip a tall consent card, so the body scrolls and the shell only sets a minimum height. */
html:has(.auth-shell),
body:has(.auth-shell) {
    height: auto;
    min-height: 100%;
    margin: 0;
    overflow: auto;
    background: #090909;
}

.auth-shell {
    --auth-bg: #090909;
    --auth-text: #f4f4f5;
    --auth-muted: #8c8c90;
    --auth-button-bg: #1f1f20;
    --auth-button-hover-bg: #28282a;
    --auth-button-primary-bg: #626bdc;
    --auth-button-primary-hover-bg: #7179e2;
    --auth-border: #2b2c2f;
    --auth-input-bg: #111112;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre short content; when the card is taller than the viewport, start at the top and scroll. */
    justify-content: safe center;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.018), transparent 290px),
        var(--auth-bg);
    color: var(--auth-text);
    font-family: var(--font-regular);
}

.auth-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 288px;
    max-width: calc(100vw - 48px);
    margin-top: -20px;
    color: var(--auth-text);
    text-align: center;
}

.auth-panel--wide {
    width: 340px;
}

.auth-logo {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 30px;
    place-items: center;
    color: #f0f0f0;
}

.auth-logo svg {
    display: block;
}

.auth-panel__copy {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.auth-panel h1 {
    margin: 0;
    color: var(--auth-text);
    font-size: 19px;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.5rem;
}

.auth-panel__description {
    width: 100%;
    max-width: 250px;
    margin: -1px auto 14px;
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.auth-panel__description strong {
    color: var(--auth-text);
    font-weight: 450;
}

.auth-actions,
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
}

.auth-form {
    gap: 16px;
}

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 9999px;
    background: var(--auth-button-bg);
    color: var(--auth-text);
    cursor: var(--pointer, pointer);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-decoration: none;
    transition:
        background 120ms ease,
        color 120ms ease,
        opacity 120ms ease;
}

.auth-button:hover,
.auth-button:focus-visible {
    background: var(--auth-button-hover-bg);
    color: #fff;
    outline: none;
}

.auth-button--primary {
    background: var(--auth-button-primary-bg);
    color: #fff;
}

.auth-button--primary:hover,
.auth-button--primary:focus-visible {
    background: var(--auth-button-primary-hover-bg);
}

.auth-button[disabled],
.auth-button[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* OAuth consent surface (Linear agent-install reference image, 2026-09-06, 1× measurements):
   625px card (padding 40, radius 14, hairline ring), 68px app/platform marks 20px apart around a
   ⇄ glyph, title 22/500, subtitle 15 muted with the workspace in text colour, section labels
   15 muted, 46px list rows (16px glyph, 15px text) on hairline dividers inside an 8px card,
   40px Cancel (secondary) / Authorize (primary, radius 6) bottom-right, and a 15px trust
   notice below the card. The team list is revealed by the checked radio via :has() — no JS. */
.oauth-consent {
    --oauth-consent-card-bg: #101012;
    --oauth-consent-list-bg: #151517;
    --oauth-consent-ring: var(--auth-border, #2b2c2f);
    --oauth-consent-text: var(--auth-text, #f4f4f5);
    --oauth-consent-muted: var(--auth-muted, #8c8c90);
    --oauth-consent-accent: var(--auth-button-primary-bg, #626bdc);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 625px;
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    color: var(--oauth-consent-text);
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    text-align: left;
}

.oauth-consent__card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40px;
    border: 1px solid var(--oauth-consent-ring);
    border-radius: 14px;
    background: var(--oauth-consent-card-bg);
}

.oauth-consent__marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 30px;
}

.oauth-consent__mark {
    display: grid;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--oauth-consent-list-bg);
    place-items: center;
}

.oauth-consent__mark-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oauth-consent__mark-initials {
    display: grid;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.02em;
    place-items: center;
}

.oauth-consent__exchange {
    display: inline-flex;
    color: var(--oauth-consent-muted);
}

.oauth-consent__title {
    margin: 0;
    color: var(--oauth-consent-text);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
}

.oauth-consent__subtitle {
    margin: 6px 0 0;
    color: var(--oauth-consent-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
}

.oauth-consent__subtitle strong {
    color: var(--oauth-consent-text);
    font-weight: 500;
}

.oauth-consent__section {
    margin: 40px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.oauth-consent__section + .oauth-consent__section {
    margin-top: 32px;
}

.oauth-consent__section-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--oauth-consent-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}

.oauth-consent__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--oauth-consent-ring);
    border-radius: 8px;
    background: var(--oauth-consent-list-bg);
    list-style: none;
}

.oauth-consent__row {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 14px;
    color: var(--oauth-consent-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}

.oauth-consent__row + .oauth-consent__row {
    border-top: 1px solid var(--oauth-consent-ring);
}

.oauth-consent__row-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--oauth-consent-muted);
}

.oauth-consent__row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.oauth-consent__choice {
    cursor: pointer;
}

.oauth-consent__radio,
.oauth-consent__checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--oauth-consent-accent);
}

.oauth-consent__team-key,
.oauth-consent__team-private {
    flex: 0 0 auto;
    color: var(--oauth-consent-muted);
    font-size: 13px;
    line-height: 18px;
}

.oauth-consent__teams {
    display: none;
    margin-top: 12px;
}

.oauth-consent__teams-label {
    display: block;
    margin: 0 0 8px;
    color: var(--oauth-consent-muted);
    font-size: 13px;
    line-height: 18px;
}

/* CSS-only reveal: the checked mode decides which teams are listed. */
.oauth-consent:has(.oauth-consent__radio[data-team-selection="all"]:checked) .oauth-consent__teams,
.oauth-consent:has(.oauth-consent__radio[data-team-selection="privateonly"]:checked) .oauth-consent__teams {
    display: block;
}

.oauth-consent:has(.oauth-consent__radio[data-team-selection="privateonly"]:checked) .oauth-consent__team[data-private="false"] {
    display: none;
}

.oauth-consent__error {
    margin: 24px 0 0;
    color: #f87171;
    font-size: 14px;
    font-weight: 450;
    line-height: 20px;
}

.oauth-consent__actions {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 48px;
}

.oauth-consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--auth-button-bg, #1f1f20);
    color: var(--oauth-consent-text);
    cursor: default;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    transition: background 120ms ease;
}

.oauth-consent__button:hover,
.oauth-consent__button:focus-visible {
    background: var(--auth-button-hover-bg, #28282a);
    outline: none;
}

.oauth-consent__button:focus-visible {
    box-shadow: 0 0 0 2px rgba(98, 107, 220, 0.5);
}

.oauth-consent__button--primary {
    background: var(--oauth-consent-accent);
    color: #fff;
}

.oauth-consent__button--primary:hover,
.oauth-consent__button--primary:focus-visible {
    background: var(--auth-button-primary-hover-bg, #7179e2);
}

.oauth-consent__trust {
    padding: 0 40px;
    color: var(--oauth-consent-muted);
    font-size: 15px;
    line-height: 24px;
}

.oauth-consent__trust-title {
    display: block;
    color: var(--oauth-consent-text);
    font-weight: 500;
}

.oauth-consent__trust-text {
    margin: 0;
}

.oauth-consent__trust-text strong {
    color: var(--oauth-consent-text);
    font-weight: 500;
}

.auth-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.auth-input::placeholder {
    color: #65666a;
}

.auth-input:focus {
    border-color: #363941;
    box-shadow: 0 0 0 2px rgba(88, 91, 98, 0.34);
}

.auth-form__error {
    margin: -4px 0 0;
    color: #f87171;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: left;
}

.auth-form__help {
    margin: -2px 0 0;
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-align: center;
}

.auth-input--code {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 1rem;
    letter-spacing: 0.09em;
    text-align: center;
}

.auth-consent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--auth-text);
    list-style: none;
    text-align: left;
}

.auth-consent-item {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.auth-panel__footer,
.auth-link-row,
.auth-legal {
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.auth-panel__footer {
    margin-top: 30px;
}

.auth-link-row {
    margin-top: 18px;
}

.auth-link-row--compact {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.auth-legal {
    max-width: 260px;
    margin: 38px auto 0;
}

.auth-link {
    border: 0;
    background: transparent;
    color: var(--auth-text);
    cursor: var(--pointer, pointer);
    font: inherit;
    text-decoration: none;
}

.auth-link-button {
    padding: 0;
}

.auth-link:hover,
.auth-link:focus-visible {
    color: #fff;
    outline: none;
}

.auth-spinner {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 34px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    animation: auth-spin 800ms linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 520px) {
    .auth-shell {
        padding: 20px;
    }

    .auth-panel {
        width: min(288px, 100%);
        margin-top: -8px;
    }
}

.ui-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0.5px solid transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        box-shadow 120ms ease-out;
}

.ui-button__badge {
    position: absolute;
    z-index: 2;
    top: -5px;
    right: -5px;
    display: inline-flex;
    min-width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid var(--shell-bg-surface, var(--shell-bg-sidebar, #111));
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
    color: var(--shell-accent-contrast, #fff);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
}

.ui-button__badge--danger {
    background: var(--shell-danger-text, #ef4444);
    color: #fff;
}

.ui-button__badge--dot {
    top: -1px;
    right: -1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}

.ui-button--default,
.ui-button--pill {
    height: 28px;
    padding: 0 10px 0 6px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.ui-button--control {
    height: 32px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.ui-button--ghost {
    height: 32px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

/* Every size carries the 500 weight; without it Raised/Surface + Small inherited the UA 400
   (Linear's 24px pills — "Compose with Agent" on New loop, "Go to issue" in search — are 12px/500). */
.ui-button--small {
    height: 24px;
    padding: 0 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.ui-button--primary {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.ui-button--primary.ui-button--control {
    border-color: transparent;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

/* Opt-in raised text button (ButtonVariant.Raised): same fill/shadow family as the
   raised IconButton; hover shifts the fill one step toward the text (measured on
   Linear light: hover lch(95.9)). */
.ui-button--raised {
    border-color: transparent;
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

.ui-button--raised:hover,
.ui-button--raised:focus-visible {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--shell-control-raised-shadow, none));
}

.ui-button--surface {
    height: 28px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

/* Size=Small on the Surface variant: Linear's 24px white pill ("Go to issue" in the search
   split bar): 24px tall, padding 0 8px, 12px/500. */
.ui-button--surface.ui-button--small {
    height: 24px;
    padding: 0 8px;
    font-size: 0.75rem;
}

.ui-button--danger {
    color: var(--shell-menu-text-danger, lch(65% 40 25 / 1));
}

.ui-button:hover,
.ui-button:focus-visible {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    color: var(--settings-control-hover-text, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
    outline: none;
}

.ui-button--control:hover,
.ui-button--control:focus-visible {
    border-color: transparent;
}

.ui-button--primary.ui-button--control:hover,
.ui-button--primary.ui-button--control:focus-visible {
    background: lch(52.5% 61 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.ui-button--danger:hover,
.ui-button--danger:focus-visible {
    background: color-mix(in srgb, var(--shell-menu-text-danger, lch(65% 40 25 / 1)) 16%, var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1))));
    color: var(--shell-menu-text-danger, lch(65% 40 25 / 1));
}

.ui-button--disabled,
.ui-button:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-button--busy.ui-button--disabled,
.ui-button--busy:disabled,
.ui-icon-button--busy.ui-icon-button--disabled,
.ui-icon-button--busy:disabled {
    opacity: 1;
}

.ui-button--animated-border,
.ui-icon-button--animated-border,
.assistant-plan-chip--live {
    --ui-button-animated-border-color: var(--shell-accent, #5e6ad2);
    --ui-button-animated-border-speed: 1.4s;
    --ui-button-animated-border-surface: var(--shell-bg-surface, transparent);
    border-color: transparent;
    background: var(--ui-button-animated-border-surface);
    isolation: isolate;
    overflow: hidden;
}

.ui-button--animated-border::before,
.ui-icon-button--animated-border::before,
.assistant-plan-chip--live::before {
    position: absolute;
    z-index: -1;
    inset: -50%;
    display: block;
    background:
        conic-gradient(
            transparent 0deg 286deg,
            color-mix(in srgb, var(--ui-button-animated-border-color) 0%, transparent) 286deg 300deg,
            var(--ui-button-animated-border-color) 300deg 344deg,
            color-mix(in srgb, var(--ui-button-animated-border-color) 0%, transparent) 344deg 360deg);
    animation: ui-button-animated-border var(--ui-button-animated-border-speed) linear infinite;
    content: "";
}

.ui-button--animated-border::after,
.ui-icon-button--animated-border::after,
.assistant-plan-chip--live::after {
    position: absolute;
    z-index: -1;
    inset: 1px;
    display: block;
    border-radius: inherit;
    background: var(--ui-button-animated-border-surface);
    content: "";
}

.ui-button--animated-border:hover,
.ui-button--animated-border:focus-visible,
.ui-icon-button--animated-border:hover,
.ui-icon-button--animated-border:focus-visible {
    --ui-button-animated-border-surface: var(--settings-control-hover-bg, var(--shell-menu-item-hover, var(--shell-bg-hover, var(--shell-bg-active, var(--shell-bg-surface)))));
    border-color: transparent;
    background: var(--ui-button-animated-border-surface);
}

.ui-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: var(--pointer, pointer);
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        box-shadow 120ms ease-out,
        opacity 120ms ease-out;
}

.ui-icon-button__badge {
    position: absolute;
    z-index: 2;
    top: -3px;
    right: -3px;
    display: inline-flex;
    min-width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid var(--shell-bg-surface, var(--shell-bg-sidebar, #111));
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
    color: var(--shell-accent-contrast, #fff);
    font-size: 0.5625rem;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.ui-icon-button__badge--danger {
    background: var(--shell-danger-text, #ef4444);
    color: #fff;
}

.ui-icon-button__badge--dot {
    top: 1px;
    right: 1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}

.ui-icon-button--small {
    width: 24px;
    height: 24px;
}

.ui-icon-button--large {
    width: 32px;
    height: 32px;
}

.ui-icon-button--raised {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

.ui-icon-button--surface {
    background: var(--icon-button-surface-bg, var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1)));
}

.ui-icon-button--muted {
    color: var(--shell-menu-hint, lch(60.307% 1 272 / 1));
}

.ui-icon-button:hover,
.ui-icon-button:focus-visible {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
    outline: none;
}

/* Raised hover shifts the fill one step toward the text AND lifts the ring to the
   selected alpha (measured per theme on live Linear). */
.ui-icon-button--raised:hover,
.ui-icon-button--raised:focus-visible {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--shell-control-raised-shadow, none));
}

.ui-icon-button--disabled,
.ui-icon-button:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-icon-button-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--page-title-bar-action-color, var(--shell-menu-text, lch(90.35% 1.15 272 / 1)));
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    user-select: none;
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        opacity 120ms ease-out;
}

.ui-icon-button-group .ui-icon-button {
    position: relative;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button {
    color: inherit;
}

.ui-icon-button-group .ui-icon-button:first-child {
    margin-right: 1px;
    border-radius: 9999px 0 0 9999px;
}

.ui-icon-button-group .ui-icon-button:last-child {
    border-radius: 0 9999px 9999px 0;
}

.ui-icon-button-group .ui-icon-button:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -0.5px;
    width: 0.5px;
    background: var(--ui-icon-button-group-divider, var(--shell-menu-divider, lch(22.88% 1.83 272 / 1)));
}

.ui-icon-button-group:hover {
    background: var(--ui-icon-button-group-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
}

.ui-icon-button-group:hover .ui-icon-button:not(:first-child)::before,
.ui-icon-button-group:focus-within .ui-icon-button:not(:first-child)::before {
    display: none;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button:hover,
.ui-icon-button-group .ui-icon-button.ui-icon-button:focus-visible {
    background: var(--ui-icon-button-group-button-hover-bg, var(--shell-bg-button, lch(10.691% 0.493 272 / 1)));
    box-shadow: none;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button .shell-icon {
    color: var(--ui-icon-button-group-icon-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
}

.ui-icon-button-group .ui-icon-button.ui-icon-button:hover .shell-icon,
.ui-icon-button-group .ui-icon-button.ui-icon-button:focus-visible .shell-icon {
    color: var(--ui-icon-button-group-icon-hover-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.ui-icon-button-group .ui-icon-button--disabled,
.ui-icon-button-group .ui-icon-button:disabled {
    opacity: 0.6;
}

.ui-icon-button--icon-item-navigation-next .shell-icon {
    margin-left: 2px;
}

.ui-icon-button--icon-item-navigation-previous .shell-icon {
    margin-right: 2px;
}

.shell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-icon-size, 14px);
    height: var(--shell-icon-size, 14px);
    min-width: var(--shell-icon-size, 14px);
    max-width: var(--shell-icon-size, 14px);
    min-height: var(--shell-icon-size, 14px);
    max-height: var(--shell-icon-size, 14px);
    flex: 0 0 var(--shell-icon-size, 14px);
    overflow: hidden;
    color: currentColor;
}

.shell-icon--fontawesome {
    overflow: visible;
}

.shell-icon svg,
.shell-icon i {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
}

.shell-icon i {
    font-size: var(--shell-icon-size, 14px);
    line-height: var(--shell-icon-size, 14px);
    text-align: center;
}

.shell-icon--fontawesome i {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    line-height: 1;
    overflow: visible;
}

/* Measured Linear toggle glyph: the pane sits at x4 and animates 4.5px (expanded) ↔ 1.5px
   (collapsed) on the same 350ms shell curve as the rail; hovering a collapsed toggle refills it
   (hover intent) — the same states the collapse itself runs on. */
.shell-icon__sidebar-pane {
    transition: width 350ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ui-icon-button--icon-sidebar-toggle .shell-icon {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.ui-icon-button--icon-sidebar-toggle:hover .shell-icon,
.ui-icon-button--icon-sidebar-toggle:focus-visible .shell-icon {
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
}

.ui-icon-button[aria-expanded="false"] .shell-icon__sidebar-pane {
    width: 1.5px;
}

.ui-icon-button[aria-expanded="false"]:hover .shell-icon__sidebar-pane,
.ui-icon-button[aria-expanded="false"]:focus-visible .shell-icon__sidebar-pane {
    width: 4.5px;
}

.shell-icon-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-icon-button--primary {
    background: var(--shell-bg-button);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.shell-icon-button:hover {
    background: var(--shell-icon-hover-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.shell-icon-button--primary:hover {
    background: var(--shell-icon-primary-hover-bg, var(--shell-bg-button));
    color: var(--shell-text-primary);
}

@keyframes ui-button-animated-border {
    to {
        transform: rotate(1turn);
    }
}

.ui-form__body {
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
}

.ui-form__body--field-section {
    padding: 0;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
}

.ui-form__body--field-section .ui-form__row {
    position: relative;
    min-height: 65px;
    padding: 16px;
    border-top: 0;
}

.ui-form__body--field-section > .settings-form-option-row {
    position: relative;
    min-height: 65px;
    padding: 16px;
}

.ui-form__body--field-section .ui-form__row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.ui-form__body--field-section > .settings-form-option-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.ui-form__body--field-section .ui-form__row:last-child::after {
    display: none;
}

.ui-form__body--field-section > .settings-form-option-row:last-child::after {
    display: none;
}

.ui-form__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 360px);
    gap: 24px;
    align-items: center;
    min-height: 64px;
    padding: 14px 0;
    border-top: 0.5px solid var(--shell-border);
}

.ui-form__row > .ui-form__avatar-field {
    justify-self: end;
}

.ui-form__row--control-auto,
.ui-form__row--control-compact,
.ui-form__row--control-medium,
.ui-form__row--control-wide {
    grid-template-columns: minmax(180px, 1fr) var(--ui-form-row-control-width, auto);
}

.ui-form__row--control-compact {
    --ui-form-row-control-width: minmax(0, 180px);
}

.ui-form__row--control-medium {
    --ui-form-row-control-width: minmax(0, 256px);
}

.ui-form__row--control-wide {
    --ui-form-row-control-width: minmax(0, 340px);
}

.ui-form__row--control-full {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 360px);
}

.ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
}

.ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error) {
    width: auto;
}

.ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
    width: 100%;
}

.ui-form__row--invalid {
    grid-template-rows: auto auto;
    align-items: start;
}

.ui-form__row--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-top: 0;
}

.ui-form__row--stacked.ui-form__row--invalid {
    align-items: stretch;
}

.ui-form__row--stacked > .ui-form__avatar-field {
    justify-self: start;
}

.ui-form__row--stacked .ui-form__label {
    gap: 2px;
}

.ui-form__row--stacked .ui-form__error {
    grid-column: auto;
    margin: -2px 0 0;
}

.ui-form__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.ui-form__label span:last-child {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-form__error {
    grid-column: 2;
    margin: -16px 0 0;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ui-form__field--wide {
    grid-column: 1 / -1;
}

.ui-form__field-label {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.ui-form__field-description,
.ui-form__field-error {
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__field-description {
    color: var(--shell-text-secondary);
}

.ui-form__field-error {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.editable-title-field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    /* Wraps like Linear's issue title: one 32px line that grows with the content. */
    height: auto;
    min-height: 32px;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    field-sizing: content;
    /* Linear's issue title sits flush with the content column; the settings editor keeps
       its 14px inset via the scoped rule below. */
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: 0;
}

.settings-form .editable-title-field {
    padding: 0 14px;
}

/* Measured Linear (New loop title, 2026-09-11): the 24/600 title placeholder is the create-form
   placeholder tier — lch(64.6 1.25 282) light — not the dark tertiary text. */
.editable-title-field::placeholder {
    color: var(--shell-create-placeholder, var(--shell-text-tertiary, var(--shell-text-secondary)));
}

.editable-title-field:focus {
    outline: 0;
}

/* Measured Linear issue title (JAM-150 @1728): padding 6px 0 around the 32px line, and the 32px
   the page column gives the header block above it. */
.editable-title-field--detail {
    padding: 6px 0;
}

.editable-title-field--detail-top {
    margin-top: 32px;
}

/* Measured Linear issue description: the editor bleeds 14px each side of the column (margin
   0 −14px 10px) with padding 10px 14px 16px so the text stays on the column; body 15/450/24. */

.editable-title-field--disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.editable-title-field--readonly {
    cursor: default;
}

.key-value-entry-table {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.key-value-entry-table--disabled {
    opacity: 0.54;
}

.key-value-entry-table__header,
.key-value-entry-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.key-value-entry-table__header {
    min-height: 18px;
}

.key-value-entry-table__heading {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.key-value-entry-table__heading--actions {
    width: 32px;
}

.key-value-entry-table__rows {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.key-value-entry-table__row .ui-form__control-shell {
    min-width: 0;
}

.key-value-entry-table__row .ui-form__control {
    height: 32px;
}

.key-value-entry-table__footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.key-value-entry-table__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .key-value-entry-table__header {
        display: none;
    }

    .key-value-entry-table__row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .key-value-entry-table__row .ui-form__control-shell:first-child {
        grid-column: 1 / -1;
    }
}

.ui-form__control,
.ui-form__picker-trigger,
.ui-form__range-trigger,
.ui-form__duration-trigger,
.ui-form__interval-trigger,
.ui-form__timezone-trigger,
.ui-form__country-trigger,
.ui-form__time-trigger,
.ui-form__color-trigger,
.ui-form__phone-control,
.ui-form__email-trigger,
.ui-form__multi-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
    outline: none;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.ui-form__control,
.ui-form__phone-control,
.ui-form__email-trigger {
    border-color: var(--settings-input-border, var(--settings-control-border));
    background: var(--settings-input-bg, var(--settings-control-bg));
    color: var(--settings-input-text, var(--shell-text-primary));
}

.ui-form__control {
    padding: 6px 12px;
}

.ui-form__control::placeholder,
.ui-form__textarea::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__textarea {
    display: block;
    min-height: 88px;
    padding: 8px 10px;
    line-height: 1.125rem;
    resize: none;
}

.ui-form__textarea--resize {
    resize: vertical;
}

.ui-form__textarea--auto-grow {
    min-height: auto;
    overflow-y: hidden;
    resize: none;
}

.ui-form__textarea--has-max-rows {
    scrollbar-width: none;
}

.ui-form__textarea--has-max-rows::-webkit-scrollbar {
    display: none;
}

.ui-form__textarea-counter {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-height: 16px;
    margin-top: 5px;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 450;
    font-variant-numeric: tabular-nums;
    line-height: 1rem;
    white-space: nowrap;
}

.ui-form__control-shell--over-limit .ui-form__textarea-counter {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__rich-text {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--rich-text-min-height, 128px);
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-input-bg, var(--settings-control-bg));
    color: var(--settings-input-text, var(--shell-text-primary));
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.ui-form__rich-text:hover,
.ui-form__rich-text:focus-within {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
}

.ui-form__rich-text--invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__rich-text--plain {
    min-height: var(--rich-text-min-height, 96px);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ui-form__rich-text--renderer {
    background: transparent;
}

.ui-form__rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 33px;
    padding: 4px 6px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__rich-text-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Measured off Linear's selection toolbar: 26px squares, 16px glyphs at lch(40 1 282). */
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__rich-text-toolbar-button svg {
    width: 16px;
    height: 16px;
}

.ui-form__rich-text-toolbar-button:hover,
.ui-form__rich-text-toolbar-button:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__rich-text-toolbar-button:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ui-form__rich-text-toolbar-separator {
    width: 0.5px;
    height: 16px;
    margin: 0 4px;
    background: var(--shell-border);
}

.ui-form__rich-text-editor {
    position: relative;
    min-height: inherit;
}

.ui-form__rich-text-content {
    box-sizing: border-box;
    min-height: var(--rich-text-min-height, 128px);
    padding: 8px 10px 10px;
    outline: none;
    color: var(--rich-text-body-color, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25rem;
    /* Linear tracks body text -0.1px and renders with optimizeLegibility; without these the
       same text wraps at different points than the source. */
    letter-spacing: -0.1px;
    text-rendering: optimizeLegibility;
    word-break: break-word;
    caret-color: var(--shell-text-primary);
}

.ui-form__rich-text--plain .ui-form__rich-text-content {
    min-height: var(--rich-text-min-height, 96px);
    padding: 0;
    color: var(--rich-text-body-color, var(--shell-menu-text, var(--shell-text-secondary)));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
}

/* Measured Linear issue description: the editor bleeds 14px each side of the column (margin
   0 −14px 10px) with padding 10px 14px 16px so the text stays on the column; body 15/450/24.
   Declared after (and compounded with) the plain/renderer variants so Detail always wins. */
.ui-form__rich-text--detail,
.ui-form__rich-text--plain.ui-form__rich-text--detail,
.ui-form__rich-text--renderer.ui-form__rich-text--detail {
    box-sizing: border-box;
    width: calc(100% + 28px);
    min-height: 0;
    margin: 0 -14px 10px;
}

.ui-form__rich-text--detail .ui-form__rich-text-content,
.ui-form__rich-text--plain.ui-form__rich-text--detail .ui-form__rich-text-content,
.ui-form__rich-text--renderer.ui-form__rich-text--detail .ui-form__rich-text-content {
    min-height: 0;
    padding: 10px 14px 16px;
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
}

/* Measured Linear rhythm: block spacing lives on TOP margins via adjacency (16px base, 6px
   small, 22px large), never on bottom margins, so the document composes the same regardless
   of which block follows which. One scale everywhere — Linear renders descriptions and
   comments with identical typography; only translucent surface tints differ, and those
   adapt on their own. */
.ui-form__rich-text-content p,
.ui-form__rich-text-content h1,
.ui-form__rich-text-content h2,
.ui-form__rich-text-content h3,
.ui-form__rich-text-content ul,
.ui-form__rich-text-content ol,
.ui-form__rich-text-content blockquote,
.ui-form__rich-text-content pre {
    margin: 0;
}

.ui-form__rich-text-content p + p,
.ui-form__rich-text-content :is(ul, ol) + :is(p, ul, ol) {
    margin-top: var(--rich-text-block-gap, 16px);
}

.ui-form__rich-text-content p + :is(ul, ol) {
    margin-top: var(--rich-text-block-gap-small, 6px);
}

.ui-form__rich-text-content :is(p, ul, ol, h1, h2, pre, blockquote) + :is(pre, blockquote),
.ui-form__rich-text-content :is(pre, blockquote) + :is(p, ul, ol) {
    margin-top: var(--rich-text-block-gap-large, 22px);
}

.ui-form__rich-text-content h3 + :is(pre, blockquote) {
    margin-top: var(--rich-text-block-gap, 16px);
}

.ui-form__rich-text-content h1,
.ui-form__rich-text-content h2,
.ui-form__rich-text-content h3 {
    color: var(--shell-text-primary);
    font-weight: 600;
    letter-spacing: 0;
}

.ui-form__rich-text-content h1 {
    margin: 48px 0 16px;
    font-size: 1.375rem;
    line-height: 1.35;
}

.ui-form__rich-text-content h2 {
    margin: 32px 0 16px;
    font-size: 1.1875rem;
    line-height: 28px;
}

.ui-form__rich-text-content h3 {
    margin: 24px 0 6px;
    font-size: 1.0625rem;
    line-height: 24px;
}

.ui-form__rich-text-content > :first-child {
    margin-top: 0;
}

.ui-form__rich-text-content ul,
.ui-form__rich-text-content ol {
    padding-left: 24px;
}

/* Checklists hang their boxes in the left gutter: text lands at the same 24px as list text
   while the checkbox sits at the content edge (Linear's anatomy). */
.ui-form__rich-text-content ul.ui-form__rich-text-task-list {
    padding-left: 0;
}

.ui-form__rich-text-content li {
    margin: 0;
}

.ui-form__rich-text-content li + li,
.ui-form__rich-text-content li > ul,
.ui-form__rich-text-content li > ol {
    margin-top: var(--rich-text-block-gap-small, 6px);
}

.ui-form__rich-text-content hr {
    margin: var(--rich-text-block-gap-large, 22px) 0;
    border: 0;
    border-top: 1px solid var(--shell-border);
}

.ui-form__rich-text-content strong {
    font-weight: 600;
}

.ui-form__rich-text-content blockquote {
    position: relative;
    padding-left: 16px;
}

.ui-form__rich-text-content blockquote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--rich-text-quote-bar, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
}

.ui-form__rich-text-content code {
    padding: 0.5px 0.25em;
    border-radius: 0.1875em;
    background: var(--rich-text-inline-code-bg, color-mix(in srgb, var(--shell-text-primary) 5%, transparent));
    box-shadow: inset 0 0 0 0.5px var(--rich-text-inline-code-border, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9375em;
}

.ui-form__rich-text-code {
    padding: 0;
    overflow: auto;
    border: 0.5px solid var(--shell-border);
    border-radius: 6px;
    background: var(--rich-text-code-block-bg, color-mix(in srgb, var(--shell-text-primary) 5%, transparent));
    color: var(--shell-text-primary);
    line-height: 21px;
}

.ui-form__rich-text-code code {
    display: block;
    padding: 16px;
    border-radius: 0;
    background: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    line-height: 1.4;
    box-shadow: none;
}

/* Code block wrap toggle state (Linear's focused-block control). */
.ui-form__rich-text-code.is-wrapped code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Focused code block controls (Linear): a quiet pill at the block's top-right holding the
   language label and the wrap/copy actions; lives on the host overlay layer. */
.ui-form__rich-text-code-controls {
    position: absolute;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 9999px;
    background: var(--rich-text-code-block-bg, color-mix(in srgb, var(--shell-text-primary) 5%, transparent));
    pointer-events: auto;
}

.ui-form__rich-text-code-controls.is-visible {
    display: flex;
}

.ui-form__rich-text-code-controls__lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.ui-form__rich-text-code-controls__lang:hover {
    color: var(--shell-text-primary);
}

.ui-form__rich-text-code-lang-menu {
    top: 30px;
    right: 0;
    min-width: 150px;
}

.ui-form__rich-text-code-controls.is-menu-open .ui-form__rich-text-code-lang-menu {
    display: flex;
}

.ui-form__rich-text-code-controls > button:not(.ui-form__rich-text-code-controls__lang) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.ui-form__rich-text-code-controls > button:hover {
    color: var(--shell-text-primary);
}

/* Block grips (Linear): checklist 6-dot drag handles and heading ⋮ option buttons in the
   left gutter, revealed while the pointer is near the block. */
.ui-form__rich-text-grip {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.ui-form__rich-text-grip.is-active,
.ui-form__rich-text-grip.is-menu-open {
    opacity: 1;
    pointer-events: auto;
}

.ui-form__rich-text-grip-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
}

.ui-form__rich-text-grip[data-kind="drag"] .ui-form__rich-text-grip-handle {
    width: 14px;
    height: 18px;
    cursor: grab;
}

.ui-form__rich-text-grip[data-kind="menu"] .ui-form__rich-text-grip-handle {
    width: 26px;
    height: 26px;
    cursor: pointer;
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
}

.ui-form__rich-text-grip[data-kind="menu"] .ui-form__rich-text-grip-handle:hover,
.ui-form__rich-text-grip.is-menu-open[data-kind="menu"] .ui-form__rich-text-grip-handle {
    color: var(--shell-text-primary);
}

.ui-form__rich-text-grip-menu {
    top: 30px;
    left: 0;
}

.ui-form__rich-text-grip.is-menu-open .ui-form__rich-text-grip-menu {
    display: flex;
}

/* Syntax highlighting (lowlight/highlight.js, Linear-measured light palette: keywords purple
   rgb(149 50 164), built-ins orange rgb(167 64 2), params brown rgb(138 93 0)). */
.ui-form__rich-text-code .hljs-keyword,
.ui-form__rich-text-code .hljs-title,
.ui-form__rich-text-code .hljs-selector-tag,
.ui-form__rich-text-code .hljs-meta {
    color: var(--rich-text-code-keyword, rgb(149 50 164));
}

.ui-form__rich-text-code .hljs-built_in,
.ui-form__rich-text-code .hljs-type,
.ui-form__rich-text-code .hljs-number,
.ui-form__rich-text-code .hljs-literal {
    color: var(--rich-text-code-type, rgb(167 64 2));
}

.ui-form__rich-text-code .hljs-params,
.ui-form__rich-text-code .hljs-attr,
.ui-form__rich-text-code .hljs-property,
.ui-form__rich-text-code .hljs-variable {
    color: var(--rich-text-code-param, rgb(138 93 0));
}

.ui-form__rich-text-code .hljs-string,
.ui-form__rich-text-code .hljs-regexp,
.ui-form__rich-text-code .hljs-addition {
    color: var(--rich-text-code-string, rgb(34 111 58));
}

.ui-form__rich-text-code .hljs-comment,
.ui-form__rich-text-code .hljs-quote {
    color: var(--shell-text-secondary);
    font-style: italic;
}

/* Tables (measured off Linear light): hairline shell-border grid, header cells on a quiet
   tint, 15px body text, padding carried by the cells. */
.ui-form__rich-text-content .tableWrapper {
    position: relative;
    margin-top: var(--rich-text-block-gap-large, 22px);
    padding-right: 22px;
    padding-bottom: 22px;
    overflow-x: auto;
}

/* Linear's add-row/add-column strips render on an overlay layer over the editor host (the
   editable tree would clobber them); each controls box tracks its table's rect and reveals
   its bars while the pointer is over the table. */
.ui-form__rich-text-table-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.ui-form__rich-text-table-controls {
    position: absolute;
    pointer-events: none;
}

.ui-form__rich-text-table-add {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--rich-text-table-header-bg, color-mix(in srgb, var(--shell-text-primary) 7%, transparent));
    color: var(--shell-text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 100ms ease;
}

.ui-form__rich-text-table-controls.is-active .ui-form__rich-text-table-add {
    opacity: 1;
}

.ui-form__rich-text-table-add:hover {
    color: var(--shell-text-primary);
}

.ui-form__rich-text-table-add--column {
    top: 0;
    right: -22px;
    height: 100%;
    width: 16px;
}

.ui-form__rich-text-table-add--row {
    bottom: -22px;
    left: 0;
    width: 100%;
    height: 16px;
}

/* Column "⋯" pill: rides the caret's column, straddling the table's top edge (Linear). */
.ui-form__rich-text-table-column-trigger {
    position: absolute;
    top: -9px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-text-tertiary, lch(64.64 1.25 282));
    color: var(--shell-bg-surface, #fff);
    cursor: pointer;
    transform: translateX(-50%);
    pointer-events: auto;
}

.ui-form__rich-text-table-controls.has-caret .ui-form__rich-text-table-column-trigger {
    display: flex;
}

.ui-form__rich-text-table-column-trigger:hover,
.ui-form__rich-text-table-controls.is-menu-open .ui-form__rich-text-table-column-trigger {
    background: var(--shell-accent, #5e6ad2);
}

/* Editor context menus (table column, heading grip, code language): the SAME chrome as
   every other Qui menu — 12px radius shell-menu card, 32px rows, inset hover pill. */
.ui-form__rich-text-table-cell-menu {
    position: absolute;
    z-index: 5;
    top: 10px;
    display: none;
    flex-direction: column;
    min-width: 220px;
    padding: 5px 0;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 12px;
    background: var(--shell-menu-bg, var(--shell-bg-surface, #fff));
    box-shadow: var(--shell-menu-shadow, var(--shell-shadow, 0 8px 24px rgb(0 0 0 / 12%)));
    color: var(--shell-text-primary);
    pointer-events: auto;
}

.ui-form__rich-text-table-controls.is-menu-open .ui-form__rich-text-table-cell-menu {
    display: flex;
}

.ui-form__rich-text-table-cell-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    cursor: default;
    text-align: left;
    transition: color 120ms ease;
}

.ui-form__rich-text-table-cell-menu-item::before {
    content: "";
    position: absolute;
    inset: 1px 5px;
    z-index: -1;
    border-radius: 7px;
    background: transparent;
}

.ui-form__rich-text-table-cell-menu-item:hover,
.ui-form__rich-text-table-cell-menu-item:focus-visible {
    outline: none;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.ui-form__rich-text-table-cell-menu-item:hover::before,
.ui-form__rich-text-table-cell-menu-item:focus-visible::before {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
}

.ui-form__rich-text-table-cell-menu-icon {
    display: inline-flex;
    flex: none;
    color: var(--shell-text-secondary);
}

.ui-form__rich-text-table-cell-menu-label {
    flex: 1 1 auto;
    white-space: nowrap;
}

.ui-form__rich-text-table-cell-menu-kbd {
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 12px;
    letter-spacing: 0.08em;
}

.ui-form__rich-text-table-cell-menu-divider {
    height: 0.5px;
    margin: 5px 0;
    background: var(--shell-menu-border, var(--shell-border));
}

.ui-form__rich-text-content .tableWrapper + :is(p, ul, ol, pre, blockquote) {
    margin-top: var(--rich-text-block-gap-large, 22px);
}

.ui-form__rich-text-table,
.ui-form__rich-text-content .tableWrapper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}

.ui-form__rich-text-table th,
.ui-form__rich-text-table td,
.ui-form__rich-text-content .tableWrapper th,
.ui-form__rich-text-content .tableWrapper td {
    padding: 6px 10px;
    border: 0.5px solid var(--shell-border);
    text-align: left;
    vertical-align: top;
}

.ui-form__rich-text-table th,
.ui-form__rich-text-content .tableWrapper th {
    background: var(--rich-text-table-header-bg, color-mix(in srgb, var(--shell-text-primary) 7%, transparent));
    font-weight: 450;
}

.ui-form__rich-text-table p,
.ui-form__rich-text-content .tableWrapper table p {
    margin: 0;
}

/* Collapsible section (Linear's .collapsible-section anatomy): hanging 16px play-triangle
   toggle in a 24px gutter, rotating when open; content hides while closed. */
.ui-form__rich-text-collapsible {
    position: relative;
    margin-top: var(--rich-text-block-gap, 16px);
    padding-left: 24px;
}

.ui-form__rich-text-collapsible + :is(p, ul, ol, pre, blockquote) {
    margin-top: var(--rich-text-block-gap, 16px);
}

.ui-form__rich-text-collapsible-toggle {
    position: absolute;
    top: 2px;
    left: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.ui-form__rich-text-collapsible-toggle:hover {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
    color: var(--shell-text-primary);
}

.ui-form__rich-text-collapsible-toggle svg {
    transition: transform 120ms ease;
}

.ui-form__rich-text-collapsible[data-open="true"] .ui-form__rich-text-collapsible-toggle svg {
    transform: rotate(90deg);
}

.ui-form__rich-text-collapsible[data-open="false"] .ui-form__rich-text-collapsible-content {
    display: none;
}

.ui-form__rich-text-collapsible-content > :first-child {
    margin-top: var(--rich-text-block-gap, 16px);
}

.ui-form__rich-text-content--empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--settings-input-placeholder, var(--shell-text-tertiary));
    pointer-events: none;
}

/* Linear parity: the caret's empty paragraph shows the hint (e.g. "Type / for commands...") even in
   a non-empty document — TipTap's Placeholder decorates only the current empty node. */
.ui-form__rich-text-content p.is-empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--settings-input-placeholder, var(--shell-text-tertiary));
    pointer-events: none;
}

/* Opt-in compact rich text (Linear's inline composers): one-line 13px/450 body at 1.5
   line-height with the measured low-contrast placeholder. Compose with --plain, e.g.
   Class="ui-form__rich-text--plain ui-form__rich-text--compact". */
.ui-form__rich-text--compact {
    min-height: var(--rich-text-min-height, auto);
}

.ui-form__rich-text--compact .ui-form__rich-text-content {
    min-height: var(--rich-text-min-height, auto);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.5;
}

.ui-form__rich-text--compact .ui-form__rich-text-content--empty:first-child::before,
.ui-form__rich-text--compact .ui-form__rich-text-content p.is-empty::before {
    color: color-mix(in srgb, var(--shell-menu-text, currentColor) 45%, transparent);
    font-weight: 450;
}

.ui-form__rich-text-link {
    color: var(--shell-accent, #5e6ad2);
    text-decoration: none;
}

.ui-form__rich-text-link:hover {
    /* Linear never underlines document links, hovered or not. */
    text-decoration: none;
}

/* Media defaults (Linear parity, per James): full available content width, aspect preserved,
   responsive, no overflow — consistent across editor, detail render, and quick-view. */
.ui-form__rich-text-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 0.5px var(--shell-border);
}

.ui-form__rich-text-video-wrap {
    position: relative;
    width: 100%;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    background: lch(5% 0 272);
    box-shadow: inset 0 0 0 0.5px var(--shell-border);
}

.ui-form__rich-text-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ui-form__rich-text-file {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0;
    padding: 10px 14px;
    border: 0.5px solid var(--shell-border-card, var(--shell-border));
    border-radius: 10px;
    background: var(--shell-bg-active, var(--shell-bg-surface));
    cursor: default;
    user-select: none;
}

.ui-form__rich-text-file-icon {
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    height: 22px;
    color: var(--shell-text-secondary);
    background-color: currentcolor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 1.5h5.1L13 5.4V13a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13V3A1.5 1.5 0 0 1 4.5 1.5Zm4.6 1.4V5a1 1 0 0 0 1 1h2.1Z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 1.5h5.1L13 5.4V13a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13V3A1.5 1.5 0 0 1 4.5 1.5Zm4.6 1.4V5a1 1 0 0 0 1 1h2.1Z"/></svg>') center / contain no-repeat;
}

.ui-form__rich-text-file-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ui-form__rich-text-file-name {
    color: var(--shell-text-primary);
    font-size: 0.875rem;
    font-weight: 560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__rich-text-file-size {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

/* Selection rings on media nodes: yellow for images, blue for video + files (Linear). */
.ui-form__rich-text-content img.ui-form__rich-text-image.ProseMirror-selectednode {
    outline: 2px solid var(--rich-text-media-selected-image, #e8b93e);
    outline-offset: 1px;
}

.ui-form__rich-text-content .ui-form__rich-text-video-wrap.ProseMirror-selectednode,
.ui-form__rich-text-content .ui-form__rich-text-file.ProseMirror-selectednode {
    outline: 2px solid var(--rich-text-media-selected, var(--shell-accent, #5e6ad2));
    outline-offset: 1px;
}

/* ----- media chrome: floating toolbar, context menu, bubble toolbar -----
   Styled to the library's shell-dropdown-menu recipe (menu tokens, 12px radius, 32px items with the
   inset hover pill) so the chrome reads as native Qui. Elements start hidden; the post-render
   clampChrome() call nudges them fully into the viewport and reveals them. */

.ui-form__rich-text {
    position: relative;
}

.ui-form__rich-text-content--renderer {
    position: relative;
}

.ui-form__rich-text-media-toolbar {
    position: absolute;
    z-index: 30;
    visibility: hidden;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 3px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 10px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
}

.ui-form__rich-text-media-toolbar--entering {
    animation: rich-text-chrome-in 100ms ease-out;
}

.ui-form__rich-text-media-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__rich-text-media-toolbar-button:hover {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.ui-form__rich-text-media-toolbar-separator {
    width: 0.5px;
    height: 16px;
    margin: 0 4px;
    background: var(--shell-menu-divider);
}

.ui-form__rich-text-chrome-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
}

.ui-form__rich-text-chrome-menu {
    position: absolute;
    z-index: 40;
    visibility: hidden;
    min-width: 230px;
    padding: 5px 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    animation: rich-text-chrome-in 100ms ease-out;
}

.ui-form__rich-text-chrome-menu--fixed {
    position: fixed;
}

.ui-form__rich-text-bubble-anchor {
    position: relative;
    display: inline-flex;
}

.ui-form__rich-text-chrome-menu--bubble {
    /* Nested dropdown anchored under its own trigger button: must NOT inherit the
       hidden-pending-clamp state (nothing clamps the nested panel) — reveal immediately. */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    visibility: visible;
}

.ui-form__rich-text-chrome-menu-check {
    margin-left: auto;
    padding-left: 12px;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    font-size: 0.75rem;
}

/* Aa dropdown: options preview their own text style (Linear). */
.ui-form__rich-text-chrome-menu-item-label--heading-1 {
    font-size: 1.0625rem;
    font-weight: 640;
}

.ui-form__rich-text-chrome-menu-item-label--heading-2 {
    font-size: 0.9375rem;
    font-weight: 620;
}

.ui-form__rich-text-chrome-menu-item-label--heading-3 {
    font-size: 0.875rem;
    font-weight: 600;
}

.ui-form__rich-text-chrome-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.ui-form__rich-text-chrome-menu-item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
}

.ui-form__rich-text-chrome-menu-item > * {
    position: relative;
    z-index: 1;
}

.ui-form__rich-text-chrome-menu-item:hover {
    color: var(--shell-menu-text-strong);
}

.ui-form__rich-text-chrome-menu-item:hover::before {
    background: var(--shell-menu-item-hover);
}

.ui-form__rich-text-chrome-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    flex: 0 0 auto;
}

.ui-form__rich-text-chrome-menu-separator {
    height: 0.5px;
    margin: 4px 0;
    background: var(--shell-menu-divider);
}

.ui-form__rich-text-bubble {
    position: absolute;
    z-index: 30;
    visibility: hidden;
    display: inline-flex;
    align-items: center;
    /* MEASURED off Linear's live toolbar: 35px card = 26px buttons + 4.5px padding,
       6px gaps, radius 8, 0.5px lch(86.5) border, whisper shadow. */
    gap: 6px;
    padding: 4.5px;
    border: 0.5px solid var(--shell-menu-border, lch(86.5 0 282));
    border-radius: 8px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow, 0 3px 6px -2px lch(0 0 0 / 0.02), 0 1px 1px 0 lch(0 0 0 / 0.04));
}

.ui-form__rich-text-bubble--entering {
    animation: rich-text-chrome-in 100ms ease-out;
}

.ui-form__rich-text-bubble-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Measured off Linear's selection toolbar: 26px squares, 16px glyphs. */
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__rich-text-bubble-button svg {
    width: 16px;
    height: 16px;
}

.ui-form__rich-text-bubble-button:hover {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.ui-form__rich-text-bubble-button--active {
    background: var(--shell-menu-item-hover);
    color: var(--shell-accent, #5e6ad2);
}

/* Linear-style hover tooltips above chrome buttons: pill with the label (+ shortcut when present). */
.ui-form__rich-text-bubble-button,
.ui-form__rich-text-media-toolbar-button {
    position: relative;
}

.ui-form__rich-text-bubble-button[data-tip]::after,
.ui-form__rich-text-media-toolbar-button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding: 4px 9px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 7px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
}

.ui-form__rich-text-bubble-button[data-tip][data-kbd]::after {
    content: attr(data-tip) "\2002" attr(data-kbd);
}

.ui-form__rich-text-bubble-button[data-tip]:hover::after,
.ui-form__rich-text-media-toolbar-button[data-tip]:hover::after {
    display: block;
}

.ui-form__rich-text-bubble-caret {
    margin-left: 2px;
    font-size: 0.5625rem;
    color: var(--shell-menu-text);
    opacity: 0.7;
}

.ui-form__rich-text-bubble-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ui-form__rich-text-bubble-link-input {
    width: 200px;
    height: 26px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    outline: none;
}

@keyframes rich-text-chrome-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-form__rich-text-media-toolbar--entering,
    .ui-form__rich-text-chrome-menu,
    .ui-form__rich-text-bubble--entering {
        animation: none;
    }
}

.ui-form__rich-text-rule {
    height: 0.5px;
    margin: 12px 0;
    border: 0;
    background: var(--shell-border);
}

.ui-form__rich-text-mention {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.ui-form__rich-text-task-list {
    padding-left: 0;
    list-style: none;
}

.ui-form__rich-text-task-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ui-form__rich-text-task-item > label {
    display: inline-flex;
    align-items: center;
    height: 24px;
}

/* Linear's measured checkbox: 14x14 radius-3 custom box; unchecked keeps a mid-grey 1px
   border, checked fills with the body-text colour and paints the scraped check glyph. */
.ui-form__rich-text-task-item input {
    appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--rich-text-checkbox-border, color-mix(in srgb, var(--shell-menu-text, var(--shell-text-primary)) 55%, transparent));
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

.ui-form__rich-text-task-item input:checked {
    border-color: var(--rich-text-checkbox-checked-bg, var(--shell-menu-text, var(--shell-text-primary)));
    background-color: var(--rich-text-checkbox-checked-bg, var(--shell-menu-text, var(--shell-text-primary)));
    background-image: var(--rich-text-checkbox-check, url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22white%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: 1px 2px;
}

/* Slash-menu glyphs from the ShellIcon registry (Linear's editor icon set): 16px svgs at
   the secondary tint. */
.ui-form__rich-text-menu-icon--svg svg {
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary);
}

.ui-form__rich-text-menu {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    width: 256px;
    max-height: 324px;
    padding: 5px 0;
    overflow: auto;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 12px;
    background: var(--shell-menu-bg, var(--shell-bg-surface));
    box-shadow: var(--shell-menu-shadow, var(--shell-shadow));
    color: var(--shell-text-primary);
}

.ui-form__rich-text-menu-empty {
    padding: 5px 14px;
    color: var(--shell-text-tertiary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

/* Linear parity: the slash/mention menu reads as a plain context menu — single-line rows, bare
   glyphs (no icon tiles), group dividers, inset hover pill (shell-dropdown-menu recipe). */
.ui-form__rich-text-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.ui-form__rich-text-menu-item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
}

.ui-form__rich-text-menu-item > * {
    position: relative;
    z-index: 1;
}

.ui-form__rich-text-menu-item--active,
.ui-form__rich-text-menu-item:hover,
.ui-form__rich-text-menu-item:focus-visible {
    outline: none;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.ui-form__rich-text-menu-item--active::before,
.ui-form__rich-text-menu-item:hover::before,
.ui-form__rich-text-menu-item:focus-visible::before {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
}

.ui-form__rich-text-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    overflow: hidden;
    color: lch(63.582% 1.375 272 / 1);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
}

.ui-form__rich-text-menu-icon img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.ui-form__rich-text-menu-divider {
    height: 0.5px;
    margin: 4px 0;
    background: var(--shell-menu-divider, var(--shell-border));
}

.ui-form__rich-text-menu-group-label {
    padding: 6px 14px 2px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
}

.ui-form__rich-text-menu-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.ui-form__range-slider {
    --ui-form-range-track-bg: color-mix(in srgb, var(--shell-text-primary) 10%, var(--settings-control-bg, transparent));
    --ui-form-range-fill-bg: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    --ui-form-range-fill-hover-bg: lch(52.5% 61 288.421 / 1);
    --ui-form-range-thumb-bg: var(--ui-form-range-fill-bg);
    --ui-form-range-thumb-hover-bg: var(--ui-form-range-fill-hover-bg);
    --ui-form-range-thumb-ring: color-mix(in srgb, var(--ui-form-range-fill-bg) 18%, transparent);
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.ui-form__range-slider-main {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.ui-form__range-slider-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
}

.ui-form__range-slider-track-wrap::before,
.ui-form__range-slider-track-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 6px;
    border-radius: 9999px;
    pointer-events: none;
}

.ui-form__range-slider-track-wrap::before {
    background: var(--ui-form-range-track-bg);
}

.ui-form__range-slider-track-wrap::after {
    right: auto;
    width: var(--ui-form-range-percent, 0%);
    background: var(--ui-form-range-fill-bg);
}

.ui-form__range-slider-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 28px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: default;
    appearance: none;
}

.ui-form__range-slider-input:focus-visible {
    outline: none;
}

.ui-form__range-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow:
        0 0 0 4px var(--ui-form-range-thumb-ring),
        var(--shell-shadow);
}

.ui-form__range-slider-input:focus-visible::-moz-range-thumb {
    box-shadow:
        0 0 0 4px var(--ui-form-range-thumb-ring),
        var(--shell-shadow);
}

.ui-form__range-slider-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.ui-form__range-slider-input::-moz-range-track {
    height: 6px;
    background: transparent;
}

.ui-form__range-slider-input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 0;
    border-radius: 9999px;
    background: var(--ui-form-range-thumb-bg);
    box-shadow: var(--shell-shadow);
    appearance: none;
    transition: background-color 0.2s ease-in-out;
}

.ui-form__range-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 9999px;
    background: var(--ui-form-range-thumb-bg);
    box-shadow: var(--shell-shadow);
    transition: background-color 0.2s ease-in-out;
}

.ui-form__range-slider-input:hover::-webkit-slider-thumb {
    background: var(--ui-form-range-thumb-hover-bg);
    transition-duration: 0s;
}

.ui-form__range-slider-input:hover::-moz-range-thumb {
    background: var(--ui-form-range-thumb-hover-bg);
    transition-duration: 0s;
}

.ui-form__range-slider-input:disabled {
    opacity: 0.54;
}

.ui-form__range-slider-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: var(--ui-form-range-tooltip-percent, 0%);
    z-index: 2;
    min-width: 28px;
    padding: 3px 6px;
    border: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    border-radius: 6px;
    background: var(--ui-form-range-tooltip-bg, var(--shell-menu-bg, var(--shell-bg-active, #191919)));
    box-shadow: var(--shell-shadow);
    color: var(--ui-form-range-tooltip-text, var(--shell-menu-text, var(--shell-text-primary)));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.875rem;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ui-form__range-slider-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    border-bottom: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    background: inherit;
    transform: translate(-50%, -3px) rotate(45deg);
}

.ui-form__range-slider-marks {
    position: relative;
    height: 8px;
    margin-top: -4px;
}

.ui-form__range-slider--has-mark-labels .ui-form__range-slider-marks {
    height: 24px;
    margin-top: -2px;
}

.ui-form__range-slider-mark {
    position: absolute;
    top: 0;
    left: var(--ui-form-range-mark-percent, 0%);
    width: 1px;
    height: 6px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--shell-text-primary) 20%, transparent);
    transform: translateX(-50%);
}

.ui-form__range-slider-mark--major {
    height: 9px;
    background: color-mix(in srgb, var(--shell-text-primary) 34%, transparent);
}

.ui-form__range-slider-mark--filled {
    background: color-mix(in srgb, var(--ui-form-range-fill-bg) 72%, var(--shell-text-primary) 8%);
}

.ui-form__range-slider-mark-label {
    position: absolute;
    top: 10px;
    left: 50%;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ui-form__range-slider-minmax {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
}

.ui-form__range-slider-value {
    min-width: 34px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-align: right;
}

.ui-form__control:hover,
.ui-form__picker-trigger:hover,
.ui-form__picker-trigger:focus-visible,
.ui-form__range-trigger:hover,
.ui-form__range-trigger:focus-visible,
.ui-form__duration-trigger:hover,
.ui-form__duration-trigger:focus-visible,
.ui-form__interval-trigger:hover,
.ui-form__interval-trigger:focus-visible,
.ui-form__timezone-trigger:hover,
.ui-form__timezone-trigger:focus-visible,
.ui-form__country-trigger:hover,
.ui-form__country-trigger:focus-visible,
.ui-form__time-trigger:hover,
.ui-form__time-trigger:focus-visible,
.ui-form__color-trigger:hover,
.ui-form__color-trigger:focus-visible,
.ui-form__phone-control:hover,
.ui-form__email-trigger:hover,
.ui-form__multi-trigger:hover,
.ui-form__multi-trigger:focus-visible {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
    background: var(--settings-control-bg);
}

.ui-form__control:hover,
.ui-form__phone-control:hover,
.ui-form__email-trigger:hover {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
    background: var(--settings-input-bg, var(--settings-control-bg));
}

.ui-form__control:focus,
.ui-form__phone-control:focus-within,
.ui-form__email-trigger:focus-within {
    border-color: var(--settings-input-focus-border, var(--settings-input-border, var(--settings-control-border)));
    background: var(--settings-input-bg, var(--settings-control-bg));
}

.ui-form__row--invalid .ui-form__control,
.ui-form__row--invalid .ui-form__picker-trigger,
.ui-form__row--invalid .ui-form__range-trigger,
.ui-form__row--invalid .ui-form__duration-trigger,
.ui-form__row--invalid .ui-form__interval-trigger,
.ui-form__row--invalid .ui-form__timezone-trigger,
.ui-form__row--invalid .ui-form__country-trigger,
.ui-form__row--invalid .ui-form__time-trigger,
.ui-form__row--invalid .ui-form__color-trigger,
.ui-form__row--invalid .ui-form__phone-control,
.ui-form__row--invalid .ui-form__email-trigger,
.ui-form__row--invalid .ui-form__multi-trigger,
.ui-form__row--invalid .settings-select__trigger,
.ui-form__field--invalid .ui-form__control,
.ui-form__field--invalid .ui-form__picker-trigger,
.ui-form__field--invalid .ui-form__range-trigger,
.ui-form__field--invalid .ui-form__duration-trigger,
.ui-form__field--invalid .ui-form__interval-trigger,
.ui-form__field--invalid .ui-form__timezone-trigger,
.ui-form__field--invalid .ui-form__country-trigger,
.ui-form__field--invalid .ui-form__time-trigger,
.ui-form__field--invalid .ui-form__color-trigger,
.ui-form__field--invalid .ui-form__phone-control,
.ui-form__field--invalid .ui-form__email-trigger,
.ui-form__field--invalid .ui-form__multi-trigger,
.ui-form__field--invalid .settings-select__trigger,
.ui-form__control--invalid,
.ui-form__picker--invalid .ui-form__picker-trigger,
.ui-form__range-trigger--invalid,
.ui-form__duration--invalid .ui-form__duration-trigger,
.ui-form__interval--invalid .ui-form__interval-trigger,
.ui-form__timezone--invalid .ui-form__timezone-trigger,
.ui-form__country--invalid .ui-form__country-trigger,
.ui-form__time--invalid .ui-form__time-trigger,
.ui-form__color-picker--invalid .ui-form__color-trigger,
.ui-form__phone--invalid .ui-form__phone-control,
.ui-form__email--invalid .ui-form__email-trigger,
.ui-form__multi--invalid .ui-form__multi-trigger {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__row--invalid .ui-form__control,
.ui-form__row--invalid .ui-form__phone-control,
.ui-form__row--invalid .ui-form__email-trigger,
.ui-form__field--invalid .ui-form__control,
.ui-form__field--invalid .ui-form__phone-control,
.ui-form__field--invalid .ui-form__email-trigger,
.ui-form__control--invalid,
.ui-form__phone--invalid .ui-form__phone-control,
.ui-form__email--invalid .ui-form__email-trigger {
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-input-bg, var(--settings-control-bg))));
}

.ui-form__row--invalid .ui-form__control:focus,
.ui-form__row--invalid .ui-form__picker-trigger:focus-visible,
.ui-form__row--invalid .ui-form__range-trigger:focus-visible,
.ui-form__row--invalid .ui-form__duration-trigger:focus-visible,
.ui-form__row--invalid .ui-form__interval-trigger:focus-visible,
.ui-form__row--invalid .ui-form__timezone-trigger:focus-visible,
.ui-form__row--invalid .ui-form__country-trigger:focus-visible,
.ui-form__row--invalid .ui-form__time-trigger:focus-visible,
.ui-form__row--invalid .ui-form__color-trigger:focus-visible,
.ui-form__row--invalid .ui-form__phone-control:focus-within,
.ui-form__row--invalid .ui-form__email-trigger:focus-within,
.ui-form__row--invalid .ui-form__multi-trigger:focus-visible,
.ui-form__row--invalid .settings-select__trigger:focus-visible,
.ui-form__field--invalid .ui-form__control:focus,
.ui-form__field--invalid .ui-form__picker-trigger:focus-visible,
.ui-form__field--invalid .ui-form__range-trigger:focus-visible,
.ui-form__field--invalid .ui-form__duration-trigger:focus-visible,
.ui-form__field--invalid .ui-form__interval-trigger:focus-visible,
.ui-form__field--invalid .ui-form__timezone-trigger:focus-visible,
.ui-form__field--invalid .ui-form__country-trigger:focus-visible,
.ui-form__field--invalid .ui-form__time-trigger:focus-visible,
.ui-form__field--invalid .ui-form__color-trigger:focus-visible,
.ui-form__field--invalid .ui-form__phone-control:focus-within,
.ui-form__field--invalid .ui-form__email-trigger:focus-within,
.ui-form__field--invalid .ui-form__multi-trigger:focus-visible,
.ui-form__field--invalid .settings-select__trigger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, rgb(239, 92, 92) 14%, transparent);
}

.ui-form__row--invalid .ui-form__range-slider-track-wrap::before,
.ui-form__field--invalid .ui-form__range-slider-track-wrap::before,
.ui-form__row--invalid .ui-form__button-group,
.ui-form__field--invalid .ui-form__button-group,
.ui-form__row--invalid .ui-form__avatar-preview,
.ui-form__field--invalid .ui-form__avatar-preview,
.ui-form__button-group--invalid,
.ui-form__avatar-preview--invalid,
.ui-form__range-slider--invalid .ui-form__range-slider-track-wrap::before {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
}

.ui-form__row--invalid .ui-form__range-slider-track-wrap::after,
.ui-form__field--invalid .ui-form__range-slider-track-wrap::after,
.ui-form__range-slider--invalid .ui-form__range-slider-track-wrap::after {
    background: var(--status-red-text, rgb(239, 92, 92));
}

.ui-form__row--invalid .ui-form__range-slider,
.ui-form__field--invalid .ui-form__range-slider,
.ui-form__range-slider--invalid {
    --ui-form-range-fill-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-fill-hover-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-hover-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-ring: color-mix(in srgb, var(--status-red-text, rgb(239, 92, 92)) 18%, transparent);
}

.ui-form__row--invalid .ui-form__toggle-input,
.ui-form__field--invalid .ui-form__toggle-input,
.ui-form__toggle--invalid .ui-form__toggle-input {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__control[type="number"] {
    appearance: textfield;
}

.ui-form__control[type="number"]::-webkit-outer-spin-button,
.ui-form__control[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.ui-form__password {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ui-form__avatar-field {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-form__avatar-preview {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--ui-form-avatar-size, 64px);
    height: var(--ui-form-avatar-size, 64px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--shell-border) 88%, transparent);
    border-radius: 9999px;
    background: var(--ui-form-avatar-bg, var(--shell-bg-active));
    box-shadow: none;
    color: var(--ui-form-avatar-text, lch(100% 0 0));
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.ui-form__avatar-field--rounded-square .ui-form__avatar-preview {
    border-radius: 8px;
}

.ui-form__avatar-field--square .ui-form__avatar-preview {
    border-radius: 0;
}

.ui-form__avatar-preview:hover,
.ui-form__avatar-preview:focus-within,
.ui-form__avatar-field--drag-active .ui-form__avatar-preview {
    border-color: var(--settings-control-hover-border);
    background: var(--ui-form-avatar-bg, var(--settings-control-hover-bg));
    color: var(--ui-form-avatar-text, var(--shell-text-primary));
}

.ui-form__avatar-preview--file-invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__avatar-preview--disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-form__avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-form__avatar-initials {
    position: relative;
    z-index: 1;
    color: currentColor;
    font-size: calc(var(--ui-form-avatar-size, 64px) * 0.34);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.ui-form__avatar-drop-label {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 4px;
    background: color-mix(in srgb, var(--shell-bg-surface) 76%, transparent);
    color: var(--shell-text-primary);
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 0.75rem;
    text-align: center;
}

.ui-form__avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.ui-form__avatar-validation {
    flex: 0 0 100%;
    margin-top: 2px;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-avatar-crop-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
    outline: none;
}

.ui-avatar-crop-modal-layer[open] {
    display: flex;
}

.ui-avatar-crop-modal-layer::backdrop {
    background: transparent;
}

.ui-avatar-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--modal-backdrop-bg, var(--app-modal-overlay, lch(0% 0 0 / 0.72)));
}

.ui-avatar-crop-modal {
    position: relative;
    display: flex;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 13px;
    background: var(--shell-menu-bg, var(--shell-bg-active));
    box-shadow: var(--shell-shadow);
}

.ui-avatar-crop-modal__header,
.ui-avatar-crop-modal__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ui-avatar-crop-modal__header {
    min-height: 62px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-avatar-crop-modal__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 560;
    line-height: 1.3125rem;
}

.ui-avatar-crop-modal__header p {
    margin: 2px 0 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-avatar-crop-modal__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    overflow: auto;
    padding: 22px 20px 20px;
}

.ui-avatar-crop-modal__body::-webkit-scrollbar {
    display: none;
}

.ui-avatar-crop {
    position: relative;
    width: min(280px, calc(100vw - 96px));
    aspect-ratio: var(--avatar-crop-ratio, 1);
    overflow: hidden;
    border-radius: var(--avatar-crop-radius, 50%);
    background: var(--shell-bg-surface);
    box-shadow:
        0 0 0 1px var(--shell-border),
        0 0 0 999px color-mix(in srgb, var(--shell-bg-sidebar) 74%, transparent);
    touch-action: none;
    cursor: grab;
}

.ui-avatar-crop:active {
    cursor: grabbing;
}

.ui-avatar-crop__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform:
        translate(var(--avatar-crop-x, 0), var(--avatar-crop-y, 0))
        scale(var(--avatar-crop-scale, 1));
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}

.ui-avatar-crop__mask {
    position: absolute;
    inset: 0;
    border-radius: var(--avatar-crop-radius, 50%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent),
        inset 0 0 0 999px transparent;
    pointer-events: none;
}

.ui-avatar-crop-modal__controls {
    display: grid;
    gap: 14px;
    width: min(340px, 100%);
}

.ui-avatar-crop-modal__zoom {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ui-avatar-crop-modal__zoom > span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
}

.ui-avatar-crop-modal__actions {
    padding: 12px 16px 14px;
    border-top: 0.5px solid var(--shell-border);
}

.ui-form__password-field,
.ui-form__picker,
.ui-form__duration,
.ui-form__interval,
.ui-form__timezone,
.ui-form__country,
.ui-form__time,
.ui-form__color-picker,
.ui-form__phone,
.ui-form__email,
.ui-form__multi {
    position: relative;
    width: 100%;
}

.ui-floating-overlay {
    position: relative;
}

.ui-floating-overlay__anchor {
    display: block;
    width: 100%;
}

.ui-floating-overlay__scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-floating-overlay__positioner {
    z-index: 671;
    transform-origin: var(--ui-floating-overlay-origin, top left);
}

.ui-floating-overlay__positioner[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.ui-floating-overlay__positioner > .ui-form__date-panel,
.ui-floating-overlay__positioner > .ui-form__duration-panel,
.ui-floating-overlay__positioner > .ui-form__interval-panel,
.ui-floating-overlay__positioner > .ui-form__timezone-panel,
.ui-floating-overlay__positioner > .ui-form__country-panel,
.ui-floating-overlay__positioner > .ui-form__time-panel,
.ui-floating-overlay__positioner > .ui-form__color-panel,
.ui-floating-overlay__positioner > .ui-form__phone-panel,
.ui-floating-overlay__positioner > .ui-form__button-group-panel,
.ui-floating-overlay__positioner > .ui-form__multi-panel {
    position: static;
    top: auto;
    left: auto;
}

.ui-form__password-control {
    padding-right: 38px;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.ui-form__password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transform: translateY(-50%);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.ui-form__password-toggle:hover,
.ui-form__password-toggle:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__password-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

.ui-form__password-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: ui-form-password-toggle-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-toggle[data-state="visible"] .ui-form__password-toggle-icon {
    color: var(--shell-text-primary);
}

.ui-form__password-strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.ui-form__password-strength-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.ui-form__password-strength-segment {
    height: 3px;
    border-radius: 9999px;
    background: var(--shell-border);
    opacity: 0.72;
    transform-origin: left center;
    transition:
        background-color 180ms ease,
        opacity 180ms ease,
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-strength--1 .ui-form__password-strength-segment--active {
    background: #e5484d;
}

.ui-form__password-strength--2 .ui-form__password-strength-segment--active {
    background: #f2c94c;
}

.ui-form__password-strength--3 .ui-form__password-strength-segment--active {
    background: #5e6ad2;
}

.ui-form__password-strength--4 .ui-form__password-strength-segment--active {
    background: #5ecca0;
}

.ui-form__password-strength-segment--active {
    opacity: 1;
    animation: ui-form-password-strength-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-strength-label {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
    animation: ui-form-password-label-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-policy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__password-policy-item {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--shell-text-tertiary);
    transition: color 140ms ease;
}

.ui-form__password-policy-item--satisfied {
    color: var(--shell-text-secondary);
}

.ui-form__password-policy-indicator {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    color: var(--shell-accent, #5e6ad2);
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease;
}

.ui-form__password-policy-item--satisfied .ui-form__password-policy-indicator {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 42%, var(--shell-border));
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
}

.ui-form__password-caps,
.ui-form__password-confirmation,
.ui-form__password-breach {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__password-caps,
.ui-form__password-confirmation,
.ui-form__password-breach--compromised {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__password-breach--safe {
    color: var(--shell-text-secondary);
}

.ui-form__password-breach-spinner {
    display: inline-flex;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 1.5px solid color-mix(in srgb, var(--shell-text-secondary) 28%, transparent);
    border-top-color: var(--shell-text-secondary);
    border-radius: 9999px;
    animation: ui-form-control-spin 760ms linear infinite;
}

@keyframes ui-form-password-toggle-in {
    from {
        opacity: 0;
        transform: scale(0.82) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes ui-form-password-strength-in {
    from {
        transform: scaleX(0.45);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes ui-form-password-label-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-form__password-control,
    .ui-form__password-toggle,
    .ui-form__password-strength-segment,
    .ui-form__password-policy-item,
    .ui-form__password-policy-indicator {
        transition: none;
    }

    .ui-form__password-toggle-icon,
    .ui-form__password-strength-segment--active,
    .ui-form__password-strength-label,
    .ui-form__password-breach-spinner {
        animation: none;
    }
}

.ui-form__picker-trigger,
.ui-form__range-trigger,
.ui-form__duration-trigger,
.ui-form__interval-trigger,
.ui-form__timezone-trigger,
.ui-form__country-trigger,
.ui-form__time-trigger,
.ui-form__color-trigger,
.ui-form__phone-control,
.ui-form__email-trigger,
.ui-form__multi-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 28px 1px 10px;
    text-align: left;
    cursor: default;
}

.ui-form__control:disabled,
.ui-form__picker-trigger:disabled,
.ui-form__range-trigger:disabled,
.ui-form__duration-trigger:disabled,
.ui-form__interval-trigger:disabled,
.ui-form__timezone-trigger:disabled,
.ui-form__country-trigger:disabled,
.ui-form__time-trigger:disabled,
.ui-form__color-trigger:disabled,
.ui-form__phone-code-trigger:disabled,
.ui-form__phone-input:disabled,
.ui-form__phone-extension-input:disabled,
.ui-form__multi-trigger:disabled,
.settings-select__trigger:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-form__picker-value,
.ui-form__range-value,
.ui-form__duration-value,
.ui-form__interval-value,
.ui-form__timezone-value,
.ui-form__country-value,
.ui-form__time-value,
.ui-form__color-value,
.ui-form__phone-input,
.ui-form__email-value,
.ui-form__multi-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__picker-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.ui-form__range-trigger--has-compare {
    height: auto;
    min-height: 38px;
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-form__range-trigger--has-compare .ui-form__picker-icon {
    margin-top: 3px;
}

.ui-form__range-trigger--has-compare .ui-form__multi-chevron {
    top: 16px;
}

.ui-form__range-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.ui-form__range-compare {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    line-height: 0.875rem;
}

.ui-form__range-compare-label {
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.ui-form__range-compare-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__picker-scrim,
.ui-form__duration-scrim,
.ui-form__interval-scrim,
.ui-form__timezone-scrim,
.ui-form__country-scrim,
.ui-form__time-scrim,
.ui-form__phone-scrim,
.ui-form__multi-scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__picker--open,
.ui-form__duration--open,
.ui-form__interval--open,
.ui-form__timezone--open,
.ui-form__country--open,
.ui-form__time--open,
.ui-form__color-picker--open,
.ui-form__phone--open,
.ui-form__multi--open {
    z-index: 671;
}

.ui-form__date-panel,
.ui-form__duration-panel,
.ui-form__interval-panel,
.ui-form__timezone-panel,
.ui-form__country-panel,
.ui-form__time-panel,
.ui-form__color-panel,
.ui-form__phone-panel,
.ui-form__multi-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 671;
    border: 0.5px solid var(--settings-select-panel-border);
    background: var(--settings-select-panel-bg);
    box-shadow: lch(0% 0 0 / 0.125) 0 3px 8px, lch(0% 0 0 / 0.125) 0 2px 5px, lch(0% 0 0 / 0.125) 0 1px 1px;
}

/* Linear's date popover chrome (measured on the New loop "Starting" picker, light): 263px
   wide = 246px content + 8px inset + 0.5px hairline, r8, and the 6/18 + 3/9 + 1/1 trio. */
.ui-form__date-panel {
    width: 263px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: var(--shell-date-panel-shadow, lch(0 0 0 / 0.02) 0 6px 18px, lch(0 0 0 / 0.04) 0 3px 9px, lch(0 0 0 / 0.04) 0 1px 1px);
}

.ui-form__duration-panel {
    width: 282px;
    padding: 6px;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__duration-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__duration-panel-header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ui-form__duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
}

.ui-form__duration-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__duration-preset:hover,
.ui-form__duration-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__duration-preset--selected,
.ui-form__duration-preset--selected:hover,
.ui-form__duration-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__duration-preset--disabled,
.ui-form__duration-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__duration-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding-top: 6px;
}

.ui-form__duration-picker-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-form__duration-picker-grid--one {
    grid-template-columns: minmax(0, 1fr);
}

.ui-form__duration-column {
    display: grid;
    gap: 2px;
    max-height: 206px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ui-form__duration-column::-webkit-scrollbar {
    display: none;
}

.ui-form__duration-column-label {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    background: var(--settings-select-panel-bg);
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
}

.ui-form__duration-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: center;
    cursor: default;
}

.ui-form__duration-option:hover,
.ui-form__duration-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__duration-option--selected,
.ui-form__duration-option--selected:hover,
.ui-form__duration-option--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__duration-option--disabled,
.ui-form__duration-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__interval-panel {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__interval--has-preview .ui-form__interval-trigger {
    height: auto;
    min-height: 38px;
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-form__interval--has-preview .ui-form__picker-icon {
    margin-top: 3px;
}

.ui-form__interval--has-preview .ui-form__multi-chevron {
    top: 16px;
}

.ui-form__interval-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.ui-form__interval-preview {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    line-height: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__interval-mode-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 2px;
    padding: 4px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__interval-mode {
    position: relative;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-align: center;
    cursor: default;
}

.ui-form__interval-mode:hover,
.ui-form__interval-mode:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__interval-mode--selected,
.ui-form__interval-mode--selected:hover,
.ui-form__interval-mode--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__interval-options {
    max-height: 224px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__interval-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__interval-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__interval-option:hover::before,
.ui-form__interval-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__interval-option--selected::before,
.ui-form__interval-option--selected:hover::before,
.ui-form__interval-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__interval-option:focus-visible {
    outline: none;
}

.ui-form__interval-option span:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__interval-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__timezone-panel {
    width: min(420px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__timezone-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__timezone-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__timezone-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__timezone-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__timezone-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__timezone-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__timezone-option:hover::before,
.ui-form__timezone-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__timezone-option--selected::before,
.ui-form__timezone-option--selected:hover::before,
.ui-form__timezone-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__timezone-option:focus-visible {
    outline: none;
}

.ui-form__timezone-option-label,
.ui-form__timezone-option-offset {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__timezone-option-offset {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__timezone-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__timezone-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__country-panel {
    width: min(360px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__country-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__country-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__country-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__country-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__country-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__country-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__country-option:hover::before,
.ui-form__country-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__country-option--selected::before,
.ui-form__country-option--selected:hover::before,
.ui-form__country-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__country-option:focus-visible {
    outline: none;
}

.ui-form__country-flag,
.ui-form__country-option-label,
.ui-form__country-option-code {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__country-flag {
    width: 18px;
    text-align: center;
}

.ui-form__country-option-code {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__country-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__country-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__phone-control {
    padding: 0;
    overflow: hidden;
}

.ui-form__phone-code-trigger {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: 6px;
    min-width: 96px;
    padding: 0 9px 0 10px;
    border: 0;
    border-right: 0.5px solid var(--settings-control-border);
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font: inherit;
    cursor: default;
}

.ui-form__phone-code-trigger:hover,
.ui-form__phone-code-trigger:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__phone-flag,
.ui-form__phone-code {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__phone-code {
    font-weight: 450;
}

.ui-form__phone-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__phone-extension-divider {
    align-self: center;
    width: 0.5px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--settings-control-border);
}

.ui-form__phone-extension-input {
    width: 62px;
    min-width: 52px;
    flex: 0 0 62px;
    height: 100%;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__phone-input::placeholder,
.ui-form__phone-extension-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__phone-panel {
    width: min(380px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__phone-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__phone-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__phone-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__phone-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__phone-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__phone-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__phone-option:hover::before,
.ui-form__phone-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__phone-option--selected::before,
.ui-form__phone-option--selected:hover::before,
.ui-form__phone-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__phone-option:focus-visible {
    outline: none;
}

.ui-form__phone-option-flag,
.ui-form__phone-option-label,
.ui-form__phone-option-code {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__phone-option-flag {
    width: 18px;
    text-align: center;
}

.ui-form__phone-option-code {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__phone-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__phone-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    margin: 4px 0;
    padding: 0 8px;
}

.ui-form__date-nav-group {
    display: inline-flex;
    gap: 4px;
}

.ui-form__date-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
}

.ui-form__date-nav:hover:not(:disabled),
.ui-form__date-nav:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__date-nav:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ui-form__date-nav-icon {
    display: inline-flex;
}

.ui-form__date-month {
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.ui-form__date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 8px 4px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__date-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__date-preset:hover,
.ui-form__date-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__date-preset--selected,
.ui-form__date-preset--selected:hover,
.ui-form__date-preset--selected:focus-visible {
    background: var(--settings-control-active-bg, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
}

.ui-form__date-preset--disabled,
.ui-form__date-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

/* Calendar: an 8px spacing grid of 26px cells (7 × 26 + 6 × 8 = 230), 8px inset, 16px between
   the weekday row and the first week, 4px extra under the last row for the weekend band. */
.ui-form__date-calendar {
    position: relative;
    padding: 8px 8px 12px;
}

.ui-form__date-weekend-band {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: 60px;
    border-radius: 8px;
    background: var(--shell-date-weekend-band, var(--shell-bg-sunken, lch(97.3 0 282)));
    pointer-events: none;
}

.ui-form__date-weekdays,
.ui-form__date-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 26px);
    column-gap: 8px;
}

.ui-form__date-weekdays {
    margin-bottom: 16px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 27.5px;
    text-align: center;
}

.ui-form__date-grid {
    row-gap: 8px;
}

.ui-form__date-day {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 26px;
    cursor: default;
}

.ui-form__date-day:hover,
.ui-form__date-day:focus-visible {
    background: var(--settings-control-hover-bg);
    outline: none;
}

.ui-form__date-day--weekend {
    color: var(--shell-text-secondary);
}

.ui-form__date-day--muted,
.ui-form__date-day--muted.ui-form__date-day--weekend {
    color: var(--shell-text-muted);
}

/* Unverified: Linear's today-not-selected look (today was the selection when measured). */
.ui-form__date-day--today {
    color: var(--shell-accent, #5e6ad2);
}

.ui-form__date-day--disabled,
.ui-form__date-day:disabled {
    color: var(--shell-text-muted);
    pointer-events: none;
}

.ui-form__date-day--selected,
.ui-form__date-day--selected:hover,
.ui-form__date-day--selected:focus-visible,
.ui-form__date-day--selected.ui-form__date-day--disabled {
    background: var(--shell-accent, lch(53 52.26 286.91));
    color: var(--shell-accent-contrast, lch(100 5 286.91));
    font-weight: 500;
}

.ui-form__time-panel {
    width: 236px;
    max-height: none;
    padding: 6px;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__time-panel--compact {
    right: 0;
    left: auto;
    width: 236px;
}

.ui-form__time-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__time-panel-header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ui-form__time-panel-header span {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.ui-form__time-panel-header small,
.ui-form__time-zone-hint {
    display: block;
    overflow: hidden;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__time-zone-hint {
    max-width: 96px;
    margin-left: auto;
}

.ui-form__time-trigger--with-time-zone-hint .ui-form__time-value {
    min-width: max-content;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
}

.ui-form__time-trigger--with-time-zone-hint .ui-form__time-zone-hint {
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
}

.ui-form__time-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
}

.ui-form__time-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__time-preset:hover,
.ui-form__time-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__time-preset--selected,
.ui-form__time-preset--selected:hover,
.ui-form__time-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__time-preset--disabled,
.ui-form__time-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__time-picker-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 60px;
    gap: 4px;
    padding-top: 6px;
}

.ui-form__time-picker-grid--24 {
    grid-template-columns: minmax(0, 1fr) 64px;
}

.ui-form__time-column {
    display: grid;
    gap: 2px;
    max-height: 174px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ui-form__time-column::-webkit-scrollbar {
    display: none;
}

.ui-form__time-column--period {
    max-height: none;
}

.ui-form__time-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: center;
    cursor: default;
}

.ui-form__time-option:hover,
.ui-form__time-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__time-option--selected,
.ui-form__time-option--selected:hover,
.ui-form__time-option--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__time-option--disabled,
.ui-form__time-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__color-panel {
    width: 411px;
    overflow: hidden;
    border-radius: 6px;
}

.ui-form__color-swatch {
    width: 14px;
    height: 14px;
    border: 0.5px solid color-mix(in srgb, var(--shell-text-primary) 18%, transparent);
    border-radius: 9999px;
    box-shadow: var(--shell-shadow);
}

.ui-form__color-section {
    padding: 16px 0;
}

.ui-form__color-format {
    display: flex;
    padding: 0 16px 14px;
}

.ui-form__color-format .ui-form__button-group {
    width: auto;
}

.ui-form__color-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 22px;
    margin-bottom: 16px;
    padding: 0 16px;
}

.ui-form__color-current,
.ui-form__color-default {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__color-current {
    flex: 0 0 auto;
    border-radius: 50%;
}

.ui-form__color-hex {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    height: 16px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
}

.ui-form__color-hex input {
    min-width: 0;
    flex: 1 1 auto;
    height: 16px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__color-default {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    border-radius: 4px;
}

.ui-form__color-default span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent calc(50% - 1px), var(--shell-text-secondary) calc(50% - 1px), var(--shell-text-secondary) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at center, transparent 51%, var(--shell-text-secondary) 52%, var(--shell-text-secondary) 58%, transparent 59%);
}

.ui-form__color-default:hover,
.ui-form__color-default:focus-visible {
    background: var(--settings-control-hover-bg);
    outline: none;
}

.ui-form__color-palette {
    display: grid;
    gap: 8px;
    padding: 0 16px 14px;
}

.ui-form__color-palette-title {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 520;
    line-height: 0.875rem;
}

.ui-form__color-palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-form__color-preset {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 75%);
    background-color: var(--shell-bg-surface);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-text-primary) 18%, transparent);
    cursor: default;
}

.ui-form__color-preset span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-preset-value);
}

.ui-form__color-preset::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid transparent;
    border-radius: 9999px;
    pointer-events: none;
}

.ui-form__color-preset:hover::after,
.ui-form__color-preset:focus-visible::after {
    border-color: var(--settings-control-hover-border);
}

.ui-form__color-preset:focus-visible {
    outline: none;
}

.ui-form__color-preset--active::after,
.ui-form__color-preset--active:hover::after,
.ui-form__color-preset--active:focus-visible::after {
    border-color: var(--shell-accent, #5e6ad2);
}

.ui-form__color-body {
    display: flex;
    width: 100%;
    height: 100px;
    padding: 0 16px;
}

.ui-form__color-plane {
    position: relative;
    display: block;
    width: 350px;
    height: 100px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, var(--color-picker-color) 100%);
    cursor: crosshair;
}

.ui-form__color-plane-thumb {
    position: absolute;
    left: var(--color-picker-x, 52%);
    top: var(--color-picker-y, 18%);
    width: 16px;
    height: 16px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    background: var(--color-picker-selected, color(display-p3 0.378249 0.822859 0.486083));
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ui-form__color-hue {
    position: relative;
    display: block;
    width: 6px;
    height: 100px;
    margin-left: 16px;
    padding: 0;
    border: 0;
    background: linear-gradient(to bottom, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    cursor: default;
}

.ui-form__color-alpha {
    position: relative;
    display: block;
    width: 6px;
    height: 100px;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background:
        linear-gradient(to bottom, var(--color-picker-alpha-color), transparent),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 75%);
    background-color: var(--shell-bg-surface);
    background-position: 0 0, 0 0, 3px 3px;
    background-size: auto, 6px 6px, 6px 6px;
    cursor: default;
}

.ui-form__color-hue-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-hue-y, 39%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.ui-form__color-alpha-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-alpha-y, 0%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.ui-form__color-contrast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin: 14px 16px 0;
    padding-top: 12px;
    border-top: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__color-contrast strong {
    color: var(--shell-text-primary);
    font-weight: 560;
}

.ui-form__color-contrast em {
    font-style: normal;
    font-weight: 560;
}

.ui-form__color-contrast--pass em {
    color: var(--status-green-text, #5ecca0);
}

.ui-form__color-contrast--fail em {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.ui-form__color-error {
    margin: 10px 16px 0;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__datetime {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.ui-form__datetime-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.ui-form__datetime-controls--has-clear {
    grid-template-columns: minmax(0, 1fr) 112px auto;
}

.ui-form__datetime-time {
    height: 32px;
}

.ui-form__datetime-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__datetime-clear:hover,
.ui-form__datetime-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__datetime-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ui-form__datetime-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__datetime-preset:hover,
.ui-form__datetime-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__datetime-preset--selected,
.ui-form__datetime-preset--selected:hover,
.ui-form__datetime-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__datetime-preset--disabled,
.ui-form__datetime-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__multi-value {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-weight: 400;
}

.ui-form__email-trigger {
    min-height: 32px;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ui-form__email-trigger--invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__email-value {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-right: 0;
    font-weight: 400;
}

.ui-form__email-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
    color: var(--shell-accent, #5e6ad2);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 0.875rem;
}

.ui-form__email-chip--rich {
    height: 28px;
    padding-left: 4px;
}

.ui-form__email-chip-avatar {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--email-chip-color, var(--shell-accent, #5e6ad2)) 18%, transparent);
    color: var(--email-chip-color, var(--shell-accent, #5e6ad2));
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

.ui-form__email-chip-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-form__email-chip-text {
    display: grid;
    min-width: 0;
    max-width: 180px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ui-form__email-chip-name,
.ui-form__email-chip-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__email-chip-name {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.8125rem;
}

.ui-form__email-chip-address {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.75rem;
}

.ui-form__email-input {
    min-width: 148px;
    flex: 1 1 148px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__email-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__email-error {
    margin-top: 6px;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__multi-trigger {
    min-height: 32px;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ui-form__multi-chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    width: 10px;
    height: 5px;
    color: var(--shell-text-secondary);
    transform: translateY(-50%);
}

.ui-form__multi-panel {
    width: 100%;
    padding: 4px 0;
    max-height: min(342px, calc(100vh - 24px));
    overflow: auto;
    border-radius: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ui-form__multi-panel::-webkit-scrollbar {
    display: none;
}

.ui-form__multi-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    padding: 3px 8px 5px 12px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    background: var(--settings-select-panel-bg);
}

.ui-form__multi-panel-count {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-panel-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.ui-form__multi-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.ui-form__multi-panel-action:hover,
.ui-form__multi-panel-action:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__multi-panel-action--disabled,
.ui-form__multi-panel-action:disabled {
    color: var(--shell-text-muted);
    opacity: 0.5;
    pointer-events: none;
}

.ui-form__multi-section-label {
    position: relative;
    z-index: 1;
    min-height: 27px;
    padding: 8px 35px 5px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    user-select: none;
}

.ui-form__multi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 22px;
    padding: 0 4px 0 6px;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 6px;
    background: var(--shell-bg-active);
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__multi-chip--active {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 58%, var(--settings-input-border, var(--settings-control-border)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--shell-accent, #5e6ad2) 34%, transparent);
}

.ui-form__multi-chip-icon {
    display: inline-flex;
    color: var(--shell-text-secondary);
}

.ui-form__multi-chip-avatar,
.ui-form__multi-option-avatar {
    display: block;
    border-radius: 9999px;
}

.ui-form__multi-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
}

.ui-form__multi-chip-remove:hover,
.ui-form__multi-chip-remove:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__multi-input {
    min-width: 72px;
    flex: 1 1 72px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__multi-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__multi-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__multi-option {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__multi-option::before {
    content: "";
    position: absolute;
    inset: 1px 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__multi-option:hover::before,
.ui-form__multi-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__multi-option--active::before,
.ui-form__multi-option--active:hover::before,
.ui-form__multi-option--active:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__multi-option--selected::before,
.ui-form__multi-option--selected:hover::before,
.ui-form__multi-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__multi-option--selected .ui-form__multi-option-label {
    color: var(--shell-text-primary);
}

.ui-form__multi-option--disabled,
.ui-form__multi-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.48;
    pointer-events: none;
}

.ui-form__multi-option--create {
    color: var(--shell-text-primary);
}

.ui-form__tag-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 9999px;
}

.ui-form__multi-option-leading {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
}

.ui-form__multi-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ui-form__multi-option-label,
.ui-form__multi-option-meta {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-option-label {
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__multi-option-meta {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__multi-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-self: start;
    cursor: default;
}

.ui-form__toggle-input {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 72px;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    cursor: default;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.ui-form__toggle-input::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.ui-form__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.ui-form__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.ui-form__toggle-input:checked::after {
    left: 13px;
}

.ui-form__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

/* Compact 22×14 switch (Linear's document-popover size); hugs its content instead of
   stretching so a space-between row pushes it flush right. */
.ui-form__toggle--small {
    width: auto;
}

.ui-form__toggle--small .ui-form__toggle-input {
    width: 22px;
    height: 14px;
}

.ui-form__toggle--small .ui-form__toggle-input::after {
    left: 2px;
    width: 10px;
    height: 10px;
}

.ui-form__toggle--small .ui-form__toggle-input:checked::after {
    left: 10px;
}

.ui-form__toggle-label {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    user-select: none;
}

.ui-form__button-group {
    display: inline-flex;
    width: 100%;
    height: 32px;
    padding: 2px;
    overflow: hidden;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-control-bg);
}

.ui-form__button-group-overlay {
    width: 100%;
}

.ui-form__button-group-overlay .ui-floating-overlay__anchor {
    display: block;
    width: 100%;
}

.ui-form__button-group-scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__button-group--content {
    width: auto;
    max-width: 100%;
}

.ui-form__button-group-option {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.ui-form__button-group--content .ui-form__button-group-option {
    flex: 0 0 auto;
}

.ui-form__button-group-option-tooltip {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: stretch;
    height: 100%;
}

.ui-form__button-group-option-tooltip--content {
    flex: 0 0 auto;
}

.ui-form__button-group-option-tooltip .ui-form__button-group-option {
    width: 100%;
}

.ui-form__button-group-option-content {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-form__button-group-option-icon,
.ui-form__button-group-option-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.ui-form__button-group-option-chevron .shell-icon,
.ui-form__button-group-option-chevron svg {
    width: 10px;
    height: 5px;
}

.ui-form__button-group-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__button-group-option:hover,
.ui-form__button-group-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__button-group-option--active,
.ui-form__button-group-option--active:hover,
.ui-form__button-group-option--active:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: var(--shell-shadow);
}

.ui-form__button-group-panel {
    box-sizing: border-box;
    min-width: 180px;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    max-height: min(320px, calc(100vh - 24px));
    padding: 4px 0;
    overflow: auto;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 12px;
    background: var(--settings-select-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--settings-control-text);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ui-form__button-group-panel::-webkit-scrollbar {
    display: none;
}

.ui-form__button-group-panel-option {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__button-group-panel-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__button-group-panel-option:hover::before,
.ui-form__button-group-panel-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__button-group-panel-option:focus-visible {
    outline: none;
}

.ui-form__button-group-panel-option-icon,
.ui-form__button-group-panel-option-content,
.ui-form__button-group-panel-check {
    position: relative;
    z-index: 1;
}

.ui-form__button-group-panel-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-text-secondary);
}

.ui-form__button-group-panel-option-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ui-form__button-group-panel-option-label,
.ui-form__button-group-panel-option-description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__button-group-panel-option-label {
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__button-group-panel-option-description {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__button-group-panel-check {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    color: var(--shell-text-secondary);
    transform: translateY(-50%);
}

.ui-form__row .settings-select,
.ui-form__field .settings-select {
    justify-self: stretch;
    width: 100%;
}

.ui-form__row .settings-select__trigger,
.ui-form__field .settings-select__trigger {
    width: 100%;
    height: 32px;
    margin: 0;
    border-color: var(--settings-input-border, var(--settings-control-border));
    background: var(--settings-control-bg);
}

.ui-form__row--invalid .ui-form__button-group,
.ui-form__field--invalid .ui-form__button-group,
.ui-form__row--invalid .ui-form__avatar-preview,
.ui-form__field--invalid .ui-form__avatar-preview {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
}

.ui-form__row--invalid .settings-select__trigger,
.ui-form__field--invalid .settings-select__trigger {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__row--invalid .ui-form__rich-text,
.ui-form__field--invalid .ui-form__rich-text {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-input-bg, var(--settings-control-bg))));
}

@media (max-width: 720px) {
    .ui-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ui-form__row--control-auto,
    .ui-form__row--control-compact,
    .ui-form__row--control-medium,
    .ui-form__row--control-wide,
    .ui-form__row--control-full {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
        justify-self: stretch;
        width: 100%;
    }

    .ui-form__row > .ui-form__avatar-field {
        justify-self: start;
    }

    .ui-form__error {
        grid-column: 1;
        margin-top: -4px;
    }
}

.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 43.5px;
    margin-top: -0.25px;
}

.page-title-bar__leading {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.page-title-bar__sidebar-toggle {
    display: none;
    flex: 0 0 auto;
}

/* Linear's model: with a collapse-capable context the toggle is always the header's first item
   (8.5px from the card edge) and only its pane glyph animates between the two states. */
.page-title-bar__sidebar-toggle--persistent {
    display: grid;
}

.page-title-bar__leading:has(.page-title-bar__sidebar-toggle--persistent) .page-title-bar__title-slot {
    padding-left: 4px;
}

.page-title-bar__title-slot {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 10px;
    padding-right: 4px;
    flex: 0 1 auto;
}

.page-title-bar__title-leading {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 10px;
}

.page-title-bar__title-leading + .page-title-bar__title-slot {
    padding-left: 4px;
}

.page-title-bar__title {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 0.96875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--shell-text-primary);
    white-space: nowrap;
}

.page-title-bar__inline-actions,
.page-title-bar__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.page-title-bar__inline-actions {
    margin-left: 4px;
    gap: 4px;
}

.page-title-bar__actions {
    gap: var(--page-title-bar-actions-gap, 4px);
    margin-left: 12px;
}

.page-title-bar__inline-actions .ui-icon-button,
.page-title-bar__actions .ui-icon-button {
    color: var(--page-title-bar-action-color, var(--shell-menu-text));
    background: transparent;
    box-shadow: none;
}

.page-title-bar__inline-actions .ui-icon-button .shell-icon,
.page-title-bar__actions .ui-icon-button .shell-icon {
    color: var(--page-title-bar-action-icon-color, var(--shell-text-secondary));
}

.page-title-bar__inline-actions .ui-icon-button:hover,
.page-title-bar__inline-actions .ui-icon-button:focus-visible,
.page-title-bar__actions .ui-icon-button:hover,
.page-title-bar__actions .ui-icon-button:focus-visible {
    color: var(--page-title-bar-action-hover-color, var(--shell-text-primary));
    /* Subtle grey wash (measured on Linear: lch(95.88), same as our raised icon buttons). Was white
       (--shell-bg-button = lch(100)); --shell-bg-hover reads ~lch(97.94), still near-white, so use the
       menu-item-hover wash which resolves ~lch(95) in light and a dark wash in dark chrome. */
    background: var(--page-title-bar-action-hover-bg, var(--shell-menu-item-hover, lch(95.9% 0.16 282 / 1)));
    box-shadow: none;
}

.page-title-bar__inline-actions .ui-icon-button:hover .shell-icon,
.page-title-bar__inline-actions .ui-icon-button:focus-visible .shell-icon,
.page-title-bar__actions .ui-icon-button:hover .shell-icon,
.page-title-bar__actions .ui-icon-button:focus-visible .shell-icon {
    /* Hover strengthens the icon toward the primary text tone (darkens in light chrome, lightens
       in dark) — the old lch(90.35) fallback only suited dark chrome and lightened in light mode. */
    color: var(--page-title-bar-action-icon-hover-color, var(--shell-text-primary, lch(9.794% 0 282 / 1)));
}

@media (width <= 1024px) {
    .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .page-title-bar__title-slot {
        padding-left: 4px;
    }
}

/* .page-breadcrumbs was consolidated into the single .breadcrumbs primitive. */


.shell-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 560;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.shell-sidebar--workspace {
    width: var(--shell-sidebar-width);
    --shell-nav-row-width: calc(var(--shell-sidebar-width) - 24px);
}

.shell-sidebar--settings {
    width: var(--settings-sidebar-width);
    --shell-nav-row-width: calc(var(--settings-sidebar-width) - 24px);
}

.shell-sidebar--settings .shell-sidebar__top {
    flex-basis: 52.5px;
}

@media (width <= 1024px) {
    .shell-sidebar {
        z-index: 760;
        width: min(var(--shell-sidebar-width), calc(100vw - 40px), 330px);
        max-width: min(calc(100vw - 40px), 330px);
        background: var(--shell-bg-sidebar);
        opacity: 0;
        transform: translateX(-100%);
        transition:
            transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 50ms ease-in-out;
        will-change: transform;
    }

    .shell-sidebar--workspace {
        --shell-nav-row-width: calc(min(var(--shell-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .shell-sidebar--settings {
        width: min(var(--settings-sidebar-width), calc(100vw - 40px), 330px);
        --shell-nav-row-width: calc(min(var(--settings-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .app-shell.app-shell--sidebar-overlay-open .shell-sidebar,
    .settings-shell.settings-shell--sidebar-overlay-open .shell-sidebar {
        z-index: 760;
        opacity: 1;
        transform: translateX(0);
    }

    .shell-sidebar__resize-handle {
        display: none;
    }
}

.shell-sidebar__top {
    flex: 0 0 52px;
    padding: 0 12px;
}

.shell-sidebar__top-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    margin-top: 8px;
}

.shell-sidebar__top-row--settings {
    justify-content: flex-start;
    height: 44.5px;
}

.shell-workspace-menu-anchor {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

.shell-workspace-menu-anchor--open {
    z-index: 610;
}

.shell-sidebar__top-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: auto;
}

.shell-sidebar__footer {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 0 10px 10px;
    background: transparent;
}

.shell-sidebar__resize-handle {
    position: absolute;
    top: 14px;
    right: -5px;
    bottom: 40px;
    width: 7px;
    cursor: col-resize;
    z-index: 97;
}

/* Measured Linear: the guide is a 0.5px hairline, 12px end insets, painted with a
   soft-ended gradient of the guide color (0 -> 0.5 -> 0.65 -> 0.5 -> 0). */
.shell-sidebar__resize-handle::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 0.5px;
    border-radius: 4px;
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
    transition-delay: 0ms;
    pointer-events: none;
}

.shell-sidebar__resize-handle:hover::after,
.shell-sidebar__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.shell-workspace-button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 7px;
    border-radius: 10px;
    color: var(--shell-text-tertiary);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

.shell-workspace-button:hover {
    background-color: var(--shell-bg-hover, lch(4.52 0.45 272));
}

.shell-workspace-button__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: var(--shell-avatar-green);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
}

.shell-workspace-button__mark--image {
    display: block;
    object-fit: cover;
}

.shell-workspace-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--shell-text-tertiary);
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.4375rem;
    letter-spacing: -0.1px;
    font-feature-settings: "calt";
    font-variation-settings: "opsz" 28;
    text-transform: none;
}

.shell-workspace-button__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    margin-left: auto;
    color: var(--shell-text-tertiary);
    flex: 0 0 auto;
}

.shell-sidebar__scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin: 7.5px 0 2px;
    padding: 0 12px 44px;
    overflow-y: auto;
    scroll-padding-bottom: 44px;
    border-radius: 8px;
    background: var(--shell-bg-scroll);
    scrollbar-width: none;
}

.shell-sidebar--settings .shell-sidebar__scroll {
    margin-top: 0;
    padding-top: 5px;
}

.shell-sidebar__scroll:hover,
.shell-sidebar__scroll:focus-within {
    scrollbar-width: thin;
}

.shell-sidebar__scroll::-webkit-scrollbar {
    width: 0;
}

.shell-sidebar__scroll:hover::-webkit-scrollbar,
.shell-sidebar__scroll:focus-within::-webkit-scrollbar {
    width: 8px;
}

.shell-sidebar__scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

.shell-sidebar__scroll:hover::-webkit-scrollbar-thumb,
.shell-sidebar__scroll:focus-within::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-border) 65%, transparent);
    border-radius: 999px;
}

.shell-nav-group {
    display: flex;
    flex-direction: column;
}

.shell-nav-group:first-child {
    margin-top: 1px;
}

.shell-nav-group--offset {
    margin-top: 16px;
}

.shell-nav-section {
    display: flex;
    flex-direction: column;
}

/* Section rhythm: ONE token for flat and tree sections so mixed sidebars stay
   consistent; consumers retune via --shell-sidebar-section-gap on the sidebar. */
.shell-nav-section + .shell-nav-section {
    margin-top: var(--shell-sidebar-section-gap, 16px);
}

.shell-nav-section--top + .shell-nav-section {
    margin-top: var(--shell-sidebar-section-gap, 16px);
}

.shell-nav-section__header {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    padding-left: 5px;
    border-radius: 10px;
    transition: background-color 120ms ease;
}

.shell-nav-section__header:not(.shell-nav-section__header--static):hover,
.shell-nav-section__header:not(.shell-nav-section__header--static):focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52% 0.45 272 / 1)));
}

.shell-nav-section__toggle {
    display: flex;
    align-items: center;
    gap: 0;
    width: calc(var(--shell-nav-row-width) - 5px);
    height: 28px;
    padding: 0 4px;
    color: var(--shell-text-primary);
    cursor: default;
}

.shell-nav-section__toggle--static {
    justify-content: flex-start;
}

.shell-nav-section__toggle .shell-nav-heading {
    margin: 0;
    align-self: center;
}

.shell-nav-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-nav-section__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    transform: translateY(0.5px);
}

.shell-nav-section__toggle-icon--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

.shell-nav-section__actions {
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
}

.shell-nav-section__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    will-change: opacity;
}

.shell-nav-section__action .shell-icon svg {
    width: 14px;
    height: 14px;
}

.shell-nav-section__header:hover .shell-nav-section__action,
.shell-nav-section__header:focus-within .shell-nav-section__action {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.shell-nav-section__action:hover,
.shell-nav-section__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-nav-section__items {
    padding-top: 2.046875px;
}

.shell-nav-section__tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell-nav-heading {
    align-self: flex-start;
    margin: 0 0 8.796875px 9px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-nav-link {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    margin: 0 0 1px;
    border-radius: 8px;
    color: var(--shell-text-primary);
}

.shell-nav-link.active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
}

.shell-nav-link:not(.active):hover {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-nav-link__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding: 0 9px 0 10px;
    border-radius: 8px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.shell-nav-link.active .shell-nav-link__inner {
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-nav-link:hover .shell-nav-link__inner {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-nav-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.shell-nav-link__labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 15.5px;
}

.shell-nav-link__label,
.shell-nav-link__count {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shell-nav-link__count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 14px;
    height: 13px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
    transform: translateX(2px);
}

.shell-tree-section {
    display: flex;
    flex-direction: column;
    margin-top: var(--shell-sidebar-section-gap, 16px);
}

.shell-tree-section:first-child {
    margin-top: 0;
}

.shell-tree-section__header-wrapper {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
}

.shell-tree-section__toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 10px;
    color: var(--shell-text-primary);
    cursor: default;
    transition: background-color 120ms ease;
}

.shell-tree-section__toggle:hover,
.shell-tree-section__toggle:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-section__heading {
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-tree-section__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    transform: translateY(0.5px);
}

.shell-tree-section__toggle-icon--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

.shell-tree-section__actions {
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
}

.shell-tree-section__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, color 0.12s ease, visibility 0s linear 0.15s;
    will-change: opacity;
}

.shell-tree-section__action .shell-icon svg {
    width: 14px;
    height: 14px;
}

.shell-tree-section__header-wrapper:hover .shell-tree-section__action,
.shell-tree-section__header-wrapper:focus-within .shell-tree-section__action {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.shell-tree-section__action:hover,
.shell-tree-section__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-tree-section__list,
.shell-tree-node__children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell-tree-collapse {
    overflow: hidden;
    transform-origin: top;
    transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.shell-tree-collapse--expanded {
    max-height: 480px;
    opacity: 1;
    transform: none;
    outline: none;
}

.shell-tree-collapse--collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
}

.shell-tree-collapse--opening {
    animation: shell-collapse-in 160ms ease;
}

.shell-nav-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.shell-nav-collapse > * {
    min-height: 0;
    overflow: hidden;
}

.shell-nav-collapse.shell-tree-collapse--expanded {
    grid-template-rows: 1fr;
    max-height: none;
}

.shell-nav-collapse.shell-tree-collapse--collapsed {
    grid-template-rows: 0fr;
    max-height: none;
}

.shell-nav-collapse.shell-tree-collapse--opening {
    animation: shell-nav-collapse-in 160ms ease;
}

@keyframes shell-collapse-in {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        max-height: 480px;
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shell-nav-collapse-in {
    from {
        grid-template-rows: 0fr;
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: translateY(0);
    }
}

.shell-tree-section__list {
    padding-top: 2.046875px;
}

.shell-tree-node {
    display: block;
}

.shell-tree-node__children {
    position: relative;
}

.shell-tree-node__children--connected::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: var(--shell-tree-connector-left, 31.5px);
    width: 1px;
    border-radius: 0.5px;
    background: var(--shell-border, lch(12.62% 1.08 272 / 1));
    pointer-events: none;
}

.shell-tree-node__row {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    margin: 0 0 1px;
    border-radius: 8px;
}

.shell-tree-node__row > * {
    position: relative;
    z-index: 1;
}

.shell-tree-node__row--with-status::before {
    content: "";
    position: absolute;
    inset: 0 0 0 var(--shell-tree-inset);
    border-radius: 8px;
    pointer-events: none;
}

.shell-tree-node__row--with-actions:hover,
.shell-tree-node__row--with-actions:focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):hover,
.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):focus-within {
    background: transparent;
}

.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):hover::before,
.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):focus-within::before {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-node__row--with-status:has(.shell-tree-node__link.active),
.shell-tree-node__row--with-status:has(.shell-tree-node__compound-link.active) {
    background: transparent;
}

.shell-tree-node__row--with-status:has(.shell-tree-node__link.active)::before,
.shell-tree-node__row--with-status:has(.shell-tree-node__compound-link.active)::before {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
}

.shell-tree-node__main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.shell-tree-node__main--branch {
    padding-left: 9px;
}

.shell-tree-node__main--indented {
    width: calc(100% - var(--shell-tree-inset));
    margin-left: var(--shell-tree-inset);
    padding-left: 6px;
}

.shell-tree-node__compound {
    padding: 0;
    overflow: hidden;
}

.shell-tree-node__compound.shell-tree-node__main--branch,
.shell-tree-node__compound.shell-tree-node__main--indented {
    padding-left: 0;
}

.shell-tree-node__compound-link {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 0 0 9px;
    color: inherit;
}

.shell-tree-node__main--indented .shell-tree-node__compound-link {
    padding-left: 6px;
}

.shell-tree-node__compound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 28px;
    margin-left: 4px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__compound-link,
.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__compound-toggle {
    background: transparent;
    color: inherit;
}

.shell-tree-node__compound:hover,
.shell-tree-node__compound:focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__compound:hover .shell-tree-node__compound-link.active,
.shell-tree-node__compound:hover .shell-tree-node__compound-link.active + .shell-tree-node__compound-toggle,
.shell-tree-node__compound:focus-within .shell-tree-node__compound-link.active,
.shell-tree-node__compound:focus-within .shell-tree-node__compound-link.active + .shell-tree-node__compound-toggle {
    background: transparent;
}

.shell-tree-node__link.active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-tree-node__link:not(.active):hover,
.shell-tree-node__toggle:hover,
.shell-tree-node__toggle:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__row--with-actions .shell-tree-node__toggle:hover,
.shell-tree-node__row--with-actions .shell-tree-node__toggle:focus-visible {
    background: transparent;
}

.shell-tree-node__row--with-status .shell-tree-node__link.active,
.shell-tree-node__row--with-status .shell-tree-node__compound:has(.shell-tree-node__compound-link.active),
.shell-tree-node__row--with-status:hover .shell-tree-node__link:not(.active),
.shell-tree-node__row--with-status:focus-within .shell-tree-node__link:not(.active),
.shell-tree-node__row--with-status:hover .shell-tree-node__toggle,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__toggle,
.shell-tree-node__row--with-status:hover .shell-tree-node__compound,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__compound {
    background: transparent;
}

.shell-tree-node__row--with-actions:hover .shell-tree-node__main,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__main,
.shell-tree-node__row--with-status:hover .shell-tree-node__main,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__main {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__content {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0;
}

.shell-tree-node__content--branch {
    gap: 0;
}

.shell-tree-node__content--icon {
    gap: 6px;
}

.shell-tree-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-tree-node__icon--branch {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

.shell-tree-node__icon--child {
    width: 14px;
    height: 16px;
}

.shell-tree-node__icon--child .shell-icon {
    width: 14px;
    height: 16px;
}

.shell-tree-node__link.active .shell-tree-node__icon,
.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__icon,
.shell-tree-node__link:hover .shell-tree-node__icon,
.shell-tree-node__toggle:hover .shell-tree-node__icon,
.shell-tree-node__toggle:focus-visible .shell-tree-node__icon,
.shell-tree-node__row--with-actions:hover .shell-tree-node__icon,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__icon,
.shell-tree-node__row--with-status:hover .shell-tree-node__icon,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__icon {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shell-tree-node__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    flex: 0 0 auto;
}

.shell-tree-node__disclosure--inline {
    position: relative;
    top: 0.5px;
    margin-left: 4px;
}

.shell-tree-node__disclosure--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

/* The action slot is ALWAYS reserved (no 0→26px reflow): revealing must never
   move the button under the pointer, so only opacity/pointer-events change on
   hover, and the revealed control stacks above the sidebar resize handle
   (z-index 97) so edge clicks hit the action, not the handle. */
.shell-tree-node__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 26px;
    width: 26px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.shell-tree-node__row--with-actions:hover .shell-tree-node__actions,
.shell-tree-node__row--with-actions:focus .shell-tree-node__actions,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__actions,
.shell-tree-node__actions:focus-within {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 98;
}

.shell-tree-node__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    color: var(--shell-text-secondary);
    transition: color 0.12s ease;
}

.shell-tree-node__action .shell-icon svg {
    width: 12px;
    height: 16px;
    max-width: 12px;
}

.shell-tree-node__action:hover,
.shell-tree-node__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-tree-node__status {
    display: inline-flex;
    width: 18px;
    height: 24px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    color: var(--shell-tree-status-color, var(--shell-text-secondary));
}

.shell-tree-node__status--busy::before {
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    border-radius: 9999px;
    animation: shell-tree-status-spin 0.72s linear infinite;
    content: "";
}

.shell-tree-node__status--unread::before {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--shell-tree-status-color, #ef4444);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 35%, transparent);
    animation: shell-tree-status-pulse 1.45s ease-in-out infinite;
    content: "";
}

.shell-tree-node__status--action-required {
    color: var(--shell-tree-status-color, #f59e0b);
}

.shell-tree-node__status--action-required .shell-icon {
    animation: shell-tree-status-attention 1.35s ease-in-out infinite;
    transform-origin: center;
}

.shell-tree-node__status--action-required .shell-icon svg {
    display: block;
    width: 11px;
    height: 11px;
}

@keyframes shell-tree-status-spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes shell-tree-status-pulse {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(0.92);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 34%, transparent);
    }

    45% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 0%, transparent);
    }
}

@keyframes shell-tree-status-attention {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.9);
    }

    45% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell-tree-node__status--busy::before,
    .shell-tree-node__status--unread::before,
    .shell-tree-node__status--action-required .shell-icon {
        animation: none;
    }
}

.shell-help-menu {
    position: relative;
    margin: 0;
    display: flex;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 0;
}

.shell-help-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 734;
    cursor: default;
}

.shell-help-menu__trigger {
    position: relative;
    z-index: 736;
    display: grid;
    place-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 50%;
    color: var(--shell-text-tertiary);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: border 0.15s, background-color 0.15s, color 0.15s, opacity 0.15s;
}

.shell-help-menu__trigger .shell-icon {
    color: var(--shell-text-secondary);
}

.shell-help-menu__trigger .shell-icon svg {
    transition-property: fill;
    transition-duration: .15s;
}

.shell-help-menu__trigger:hover,
.shell-help-menu__trigger:focus-visible,
.shell-help-menu__trigger:active {
    background: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
    color: var(--shell-text-primary);
    transition-duration: 0s;
}

.shell-help-menu__trigger:hover .shell-icon,
.shell-help-menu__trigger:focus-visible .shell-icon,
.shell-help-menu__trigger:active .shell-icon {
    color: var(--shell-text-primary);
}

.shell-help-menu__trigger:hover .shell-icon svg,
.shell-help-menu__trigger:focus-visible .shell-icon svg,
.shell-help-menu__trigger:active .shell-icon svg {
    transition-duration: 0s;
}

.shell-help-menu__trigger--active {
    background: transparent;
    color: lch(90.077 1 272);
}

.shell-help-menu__trigger--active .shell-icon {
    color: lch(60.307% 1 272 / 1);
}

.shell-help-menu > .shell-dropdown-menu {
    position: fixed;
    top: auto;
    left: 12px;
    bottom: 38px;
    z-index: 735;
    width: 223px;
    transform-origin: -2px 399px;
    animation: shell-help-menu-in 120ms cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
}

.shell-help-menu > .shell-dropdown-menu .shell-dropdown-menu__item {
    width: 222px;
}

@keyframes shell-help-menu-in {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-modal-root {
    position: relative;
    z-index: 680;
}

.app-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 680;
}

.app-modal-dialog {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 122px 12px 122px;
    pointer-events: none;
    transition: padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--app-modal-overlay);
    opacity: var(--app-modal-overlay-opacity);
    cursor: default;
}

.app-modal-shell {
    position: relative;
    width: 100%;
    max-width: var(--app-modal-current-width, 750px);
    margin: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 22px;
    background: var(--shell-menu-bg);
    box-shadow: var(--app-modal-shadow);
    overflow: visible;
    transform-origin: top center;
    pointer-events: auto;
    transition:
        max-width var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        border-radius var(--app-modal-resize-duration) var(--app-modal-resize-ease);
    will-change: max-width;
}

.app-modal-shell__window-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.app-modal-shell--selection-sheet {
    overflow: hidden;
}

.app-modal-shell--selection-modal {
    overflow: hidden;
    border-radius: 12px;
}

.app-modal-shell__window-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
    transition: background-color 120ms ease, color 120ms ease;
}

.app-modal-shell__window-button:hover,
.app-modal-shell__window-button:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.app-modal-layer--entering .app-modal-backdrop {
    animation: app-modal-overlay-enter var(--app-modal-animation) forwards;
}

.app-modal-layer--open .app-modal-backdrop {
    opacity: var(--app-modal-overlay-opacity);
}

.app-modal-layer--closing .app-modal-backdrop {
    animation: app-modal-overlay-exit var(--app-modal-animation) forwards;
}

.app-modal-layer--entering .app-modal-shell {
    animation: app-modal-panel-enter var(--app-modal-animation) forwards;
}

.app-modal-layer--open .app-modal-shell {
    opacity: 1;
    transform: scale(1);
}

.app-modal-layer--closing .app-modal-shell {
    animation: app-modal-panel-exit var(--app-modal-animation) forwards;
}

@keyframes app-modal-overlay-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: var(--app-modal-overlay-opacity);
    }
}

@keyframes app-modal-overlay-exit {
    from {
        opacity: var(--app-modal-overlay-opacity);
    }

    to {
        opacity: 0;
    }
}

@keyframes app-modal-panel-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes app-modal-panel-exit {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.modal-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.modal-dialog-content__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 44px;
}

.modal-dialog-content__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.modal-dialog-content__message {
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.modal-dialog-input-field {
    padding: 0;
}

.modal-dialog-input-field__label {
    display: block;
    margin-bottom: 6px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1rem;
}

.modal-dialog-input-field__input {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 10px;
    border: 0.5px solid var(--settings-control-border, lch(17.48% 1.38 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text-strong);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    outline: none;
    box-sizing: border-box;
    box-shadow: var(--shell-shadow, lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0);
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.modal-dialog-input-field__input::placeholder {
    color: var(--shell-menu-hint);
}

.modal-dialog-input-field__input:focus {
    border-color: var(--settings-control-hover-border, lch(26.7% 1.94 272 / 1));
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

.modal-dialog-content__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-dialog-content__action {
    min-width: 72px;
}

.modal-dialog-content__actions .ui-button--control {
    height: 28px;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    box-shadow: none;
}

.app-modal-shell--date-picker {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--custom-date-filter {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--color-picker {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--geo-picker {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--tabbed {
    overflow: hidden;
    border-radius: 18px;
}

.app-modal-shell--split {
    overflow: hidden;
    border-radius: 18px;
}

.tabbed-modal {
    display: flex;
    min-height: var(--app-modal-current-min-height, 360px);
    height: var(--app-modal-current-height, auto);
    max-height: calc(100vh - var(--app-modal-top-inset, 96px) - var(--app-modal-bottom-inset, 72px));
    flex-direction: column;
    overflow: hidden;
    color: var(--shell-menu-text);
}

.tabbed-modal__header {
    display: flex;
    min-height: 64px;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 0.5px solid var(--shell-menu-border);
}

.tabbed-modal--with-subtitle .tabbed-modal__header {
    height: 76px;
    min-height: 76px;
}

.tabbed-modal__title-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.tabbed-modal__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.tabbed-modal__subtitle {
    max-width: 560px;
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.tabbed-modal__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.tabbed-modal__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}

.tabbed-modal--vertical .tabbed-modal__body {
    display: grid;
    grid-template-columns: minmax(152px, 190px) minmax(0, 1fr);
}

.tabbed-modal__tabs {
    display: flex;
    min-width: 0;
}

.tabbed-modal__tabs--horizontal {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--shell-menu-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabbed-modal__tabs--horizontal::-webkit-scrollbar {
    display: none;
}

.tabbed-modal__tabs--vertical {
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-right: 0.5px solid var(--shell-menu-border);
    background: color-mix(in srgb, var(--shell-menu-bg) 92%, var(--shell-bg-surface));
    overflow-y: auto;
    scrollbar-width: none;
}

.tabbed-modal__tabs--vertical::-webkit-scrollbar {
    display: none;
}

.tabbed-modal__tab {
    display: inline-flex;
    min-width: 0;
    height: 28px;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-hint);
    cursor: var(--pointer, pointer);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1rem;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

.tabbed-modal__tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabbed-modal__tabs--horizontal .tabbed-modal__tab {
    flex: 0 0 auto;
    padding: 0 10px;
}

.tabbed-modal__tabs--vertical .tabbed-modal__tab {
    width: 100%;
    padding: 0 9px;
}

.tabbed-modal__tab:hover,
.tabbed-modal__tab:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
    outline: none;
}

.tabbed-modal__tab--active,
.tabbed-modal__tab--active:hover,
.tabbed-modal__tab--active:focus-visible {
    background: var(--shell-menu-item-active, var(--shell-menu-item-hover));
    color: var(--shell-menu-text-strong);
}

.tabbed-modal__tab:disabled {
    cursor: default;
    opacity: 0.46;
}

.tabbed-modal__content {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
}

.tabbed-modal__panel {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 20px;
}

.tabbed-modal__footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 0.5px solid var(--shell-menu-border);
}

@media (width <= 640px) {
    .tabbed-modal--vertical .tabbed-modal__body {
        display: flex;
        flex-direction: column;
    }

    .tabbed-modal__tabs--vertical {
        flex-direction: row;
        gap: 6px;
        border-right: 0;
        border-bottom: 0.5px solid var(--shell-menu-border);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tabbed-modal__tabs--vertical .tabbed-modal__tab {
        width: auto;
        flex: 0 0 auto;
    }
}

.split-modal {
    display: flex;
    min-height: var(--app-modal-current-min-height, 420px);
    max-height: calc(100vh - var(--app-modal-top-inset, 96px) - var(--app-modal-bottom-inset, 72px));
    flex-direction: column;
    overflow: hidden;
    color: var(--shell-menu-text);
}

.split-modal__header {
    display: flex;
    min-height: 64px;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 56px 14px 20px;
    border-bottom: 0.5px solid var(--shell-menu-border);
}

.split-modal--with-subtitle .split-modal__header {
    height: 76px;
    min-height: 76px;
}

.split-modal__title-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.split-modal__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.split-modal__subtitle {
    max-width: 560px;
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.split-modal__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.split-modal__body {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

.split-modal__body > .split-view {
    flex: 1 1 auto;
}

.split-modal__body .split-view,
.split-modal__body .split-view__pane,
.split-modal__body .split-view__body {
    min-height: 0;
}

.split-modal__body .split-view__body {
    overflow: auto;
}

.split-modal__footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 0.5px solid var(--shell-menu-border);
}

@media (width <= 640px) {
    .split-modal__body > .split-view {
        display: flex;
        flex-direction: column;
    }

    .split-modal__body .split-view__pane--left,
    .split-modal__body .split-view__pane--right {
        width: 100%;
        flex: 1 1 0;
    }

    .split-modal__body .split-view__divider {
        display: none;
    }
}

.modal-date-picker {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal-date-picker--range {
    padding-top: 18px;
}

.modal-date-picker .modal-dialog-content__body {
    padding-right: 36px;
}

.modal-date-picker__range-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.modal-date-picker__range-pill {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    overflow: hidden;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-text-strong);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-date-picker__range-pill--empty {
    color: var(--shell-menu-hint);
}

.modal-date-picker__range-divider {
    width: 8px;
    height: 0.5px;
    background: var(--shell-menu-hint);
}

.modal-date-picker__panel {
    width: 100%;
    margin-top: 18px;
}

.modal-date-picker__header {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 4px;
    align-items: center;
    height: 30px;
    margin-bottom: 4px;
}

.modal-date-picker__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-hint);
    font: inherit;
    cursor: default;
}

.modal-date-picker__nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.modal-date-picker__nav-icon--previous {
    transform: rotate(180deg);
}

.modal-date-picker__nav:hover,
.modal-date-picker__nav:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.modal-date-picker__month {
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-align: center;
}

.modal-date-picker__weekdays,
.modal-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.modal-date-picker__weekdays {
    height: 24px;
    align-items: center;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.875rem;
    text-align: center;
}

.modal-date-picker__grid {
    gap: 2px;
}

.modal-date-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.modal-date-picker__day:hover,
.modal-date-picker__day:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.modal-date-picker__day--muted {
    color: var(--shell-menu-hint);
}

.modal-date-picker__day--today {
    color: var(--shell-accent, #5e6ad2);
}

.modal-date-picker__day--selected,
.modal-date-picker__day--selected:hover,
.modal-date-picker__day--selected:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 22%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--in-range {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--range-start,
.modal-date-picker__day--range-end,
.modal-date-picker__day--range-start:hover,
.modal-date-picker__day--range-end:hover,
.modal-date-picker__day--range-start:focus-visible,
.modal-date-picker__day--range-end:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 28%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--disabled,
.modal-date-picker__day:disabled {
    opacity: 0.32;
    pointer-events: none;
}

.modal-date-picker__actions {
    margin-top: 18px;
}

.modal-date-picker__clear {
    margin-right: auto;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
}

.custom-date-filter {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 236px);
    padding: 32px;
    overflow: hidden;
}

.custom-date-filter__heading {
    display: flex;
    align-items: center;
    min-height: 28px;
    gap: 8px;
    margin-bottom: 12px;
}

.custom-date-filter__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.4375rem;
}

.custom-date-filter__operator-tabs,
.custom-date-filter__tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-date-filter__operator-tab,
.custom-date-filter__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 12px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
    color: var(--shell-menu-hint);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    cursor: default;
}

.custom-date-filter__operator-tab:hover,
.custom-date-filter__operator-tab:focus-visible,
.custom-date-filter__tab:hover,
.custom-date-filter__tab:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__operator-tab--active,
.custom-date-filter__operator-tab--active:hover,
.custom-date-filter__operator-tab--active:focus-visible,
.custom-date-filter__tab--active,
.custom-date-filter__tab--active:hover,
.custom-date-filter__tab--active:focus-visible {
    background: var(--shell-menu-item-active, var(--shell-menu-item-hover));
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__separator {
    flex: 0 0 auto;
    height: 0.5px;
    margin: 12px -32px 0;
    background: var(--shell-menu-border);
}

.custom-date-filter__separator--bottom {
    margin-top: 0;
}

.custom-date-filter__viewport {
    height: 298px;
    min-height: 0;
    overflow: auto;
    padding: 16px 0;
    scrollbar-width: none;
}

.custom-date-filter__viewport::-webkit-scrollbar {
    display: none;
}

.custom-date-filter__period-year {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 8px 4px 0;
    box-sizing: border-box;
}

.custom-date-filter__year-label {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.custom-date-filter__period-grid {
    display: grid;
    gap: 8px;
}

.custom-date-filter__period-grid--month {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.custom-date-filter__period-grid--quarter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-date-filter__period-grid--half-year {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-date-filter__period,
.custom-date-filter__year-list .custom-date-filter__period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    cursor: default;
}

.custom-date-filter__period:hover,
.custom-date-filter__period:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__period--selected,
.custom-date-filter__period--selected:hover,
.custom-date-filter__period--selected:focus-visible {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 42%, var(--shell-menu-border));
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 20%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__year-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 4px;
}

.custom-date-filter__year-list .custom-date-filter__period {
    width: 100%;
}

.custom-date-filter__range-summary {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    color: var(--shell-menu-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.custom-date-filter__range-summary span:not(.custom-date-filter__range-arrow) {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 8px;
    background: var(--settings-control-bg, lch(9.92% 0.75 272 / 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-date-filter__range-arrow {
    color: var(--shell-menu-hint);
}

.custom-date-filter__day-calendars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.custom-date-filter__month-title {
    margin: 0 0 8px;
    color: var(--shell-menu-text-strong);
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-align: center;
}

.custom-date-filter__weekdays,
.custom-date-filter__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.custom-date-filter__weekdays {
    margin-bottom: 8px;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    text-align: center;
}

.custom-date-filter__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.custom-date-filter__day:hover,
.custom-date-filter__day:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__day--empty {
    pointer-events: none;
}

.custom-date-filter__day--today {
    color: var(--shell-accent, #5e6ad2);
}

.custom-date-filter__day--selected,
.custom-date-filter__day--selected:hover,
.custom-date-filter__day--selected:focus-visible,
.custom-date-filter__day--range-start,
.custom-date-filter__day--range-start:hover,
.custom-date-filter__day--range-start:focus-visible,
.custom-date-filter__day--range-end,
.custom-date-filter__day--range-end:hover,
.custom-date-filter__day--range-end:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 24%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__day--in-range {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.custom-date-filter__action {
    min-width: 61px;
}

.modal-color-picker {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal-color-picker .modal-dialog-content__body {
    padding-right: 36px;
}

.modal-color-picker__picker {
    margin-top: 18px;
}

.modal-color-picker__row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    margin-bottom: 16px;
}

.modal-color-picker__current,
.modal-color-picker__default {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.modal-color-picker__current {
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-menu-text-strong) 20%, transparent);
}

.modal-color-picker__hex {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    height: 18px;
    margin-left: 10px;
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.modal-color-picker__hex span {
    color: var(--shell-menu-text-strong);
}

.modal-color-picker__hex input {
    min-width: 0;
    flex: 1 1 auto;
    height: 18px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-hint);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.modal-color-picker__default {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    border-radius: 4px;
}

.modal-color-picker__default span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent calc(50% - 1px), var(--shell-menu-hint) calc(50% - 1px), var(--shell-menu-hint) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at center, transparent 51%, var(--shell-menu-hint) 52%, var(--shell-menu-hint) 58%, transparent 59%);
}

.modal-color-picker__default:hover,
.modal-color-picker__default:focus-visible {
    background: var(--shell-menu-item-hover);
    outline: none;
}

.modal-color-picker__body {
    display: flex;
    width: 100%;
    height: 132px;
}

.modal-color-picker__plane {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 132px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, var(--color-picker-color) 100%);
    cursor: crosshair;
}

.modal-color-picker__plane-thumb {
    position: absolute;
    left: var(--color-picker-x, 52%);
    top: var(--color-picker-y, 18%);
    width: 16px;
    height: 16px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    background: var(--color-picker-selected, color(display-p3 0.378249 0.822859 0.486083));
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.modal-color-picker__hue {
    position: relative;
    display: block;
    flex: 0 0 6px;
    width: 6px;
    height: 132px;
    margin-left: 16px;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: linear-gradient(to bottom, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    cursor: default;
}

.modal-color-picker__hue-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-hue-y, 39%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.modal-color-picker__actions {
    margin-top: 18px;
}

.modal-geo-picker {
    display: flex;
    min-height: 560px;
    flex-direction: column;
    padding: 20px;
}

.modal-geo-picker .modal-dialog-content__body {
    padding-right: 72px;
}

.modal-geo-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin-top: 18px;
    padding: 0 10px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-hint);
}

.modal-geo-picker__search:focus-within {
    border-color: var(--settings-control-hover-border);
}

.modal-geo-picker__search-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text-strong);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.modal-geo-picker__search-input::placeholder {
    color: var(--shell-menu-hint);
}

.modal-geo-picker__map {
    position: relative;
    min-height: 360px;
    flex: 1 1 auto;
    margin-top: 12px;
    overflow: hidden;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
}

.modal-geo-picker__status {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.modal-geo-picker__summary {
    display: grid;
    gap: 2px;
    min-height: 58px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    line-height: 1rem;
}

.modal-geo-picker__summary-label {
    color: var(--shell-menu-hint);
    font-weight: 450;
}

.modal-geo-picker__summary strong {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-geo-picker__missing {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 180px;
    margin-top: 18px;
    padding: 18px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.modal-geo-picker__missing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--status-red-text, rgb(239, 92, 92)) 16%, transparent);
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.modal-geo-picker__actions {
    margin-top: 18px;
}

.modal-dialog-content__actions .ui-button--control:hover,
.modal-dialog-content__actions .ui-button--control:focus-visible {
    border-color: transparent;
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.modal-dialog-content__actions .ui-button--primary.ui-button--control {
    border-color: transparent;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.modal-dialog-content__actions .ui-button--primary.ui-button--control:hover,
.modal-dialog-content__actions .ui-button--primary.ui-button--control:focus-visible {
    border-color: transparent;
    background: lch(52.5% 61 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.modal-dialog-content__actions .ui-button--danger.ui-button--control {
    border-color: transparent;
    background: lch(48% 54 31 / 1);
    color: lch(100% 4 31 / 1);
}

.modal-dialog-content__actions .ui-button--danger.ui-button--control:hover,
.modal-dialog-content__actions .ui-button--danger.ui-button--control:focus-visible {
    border-color: transparent;
    background: lch(52% 58 31 / 1);
    color: lch(100% 4 31 / 1);
}

.command-palette-shortcut-host {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.command-palette-root {
    position: fixed;
    inset: 0;
    z-index: 780;
    pointer-events: none;
}

.command-palette-layer {
    position: fixed;
    inset: 0;
    pointer-events: auto;
}

.command-palette-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    cursor: default;
}

.command-palette-panel {
    --command-palette-bg: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    --command-palette-border: var(--shell-menu-border, var(--shell-border, lch(22.88% 1.83 272 / 1)));
    --command-palette-text: var(--shell-menu-text, var(--shell-text-primary, lch(90.895% 1.375 272 / 1)));
    --command-palette-text-strong: var(--shell-menu-text-strong, var(--shell-text-primary, lch(100% 0 272 / 1)));
    --command-palette-muted: var(--shell-menu-hint, var(--shell-text-secondary, lch(63.582% 1.375 272 / 1)));
    --command-palette-hover-bg: var(--shell-menu-item-hover, var(--shell-bg-hover, lch(15.32% 0.75 272 / 1)));
    --command-palette-accent: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    --command-palette-shadow: var(--shell-menu-shadow, lch(0 0 0 / 0.1) 0 4px 40px 0, lch(0 0 0 / 0.125) 0 3px 20px 0, lch(0 0 0 / 0.125) 0 3px 12px 0, lch(0 0 0 / 0.125) 0 2px 8px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);

    position: fixed;
    top: 122px;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 32px));
    height: min(450px, calc(100vh - 32px));
    border: 0.5px solid var(--command-palette-border);
    border-radius: 12px;
    background: var(--command-palette-bg);
    box-shadow: var(--command-palette-shadow);
    color: var(--command-palette-text);
    overflow: clip;
    transform: translateX(-50%);
    transform-origin: top center;
    will-change: transform, opacity;
}

.command-palette-panel--entering {
    animation: command-palette-panel-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.command-palette-panel--closing {
    animation: command-palette-panel-exit 140ms ease both;
}

@keyframes command-palette-panel-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes command-palette-panel-exit {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.96);
    }
}

.command-palette__context-strip {
    display: flex;
    align-items: flex-end;
    min-height: 34px;
    padding: 0 14px;
}

.command-palette__context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--command-palette-hover-bg);
    color: var(--command-palette-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.90625rem;
}

.command-palette__context-prefix {
    flex: 0 0 auto;
    margin-right: 4px;
    font-weight: 700;
}

.command-palette__context-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette__context-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13.375px;
    height: 12.1016px;
    margin-left: 2.75px;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    overflow: visible;
    color: var(--command-palette-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.command-palette__search-strip {
    display: flex;
    align-items: stretch;
    min-height: 46px;
    padding: 6px 5px 0 6px;
}

.command-palette__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
}

.command-palette__search-input {
    width: 100%;
    height: 40px;
    padding: 11px 12px;
    border: 0;
    margin: 0;
    background: transparent;
    color: var(--command-palette-text);
    caret-color: var(--command-palette-accent);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    letter-spacing: 0;
    outline: none;
    appearance: none;
}

.command-palette__search-input::-webkit-search-decoration,
.command-palette__search-input::-webkit-search-cancel-button,
.command-palette__search-input::-webkit-search-results-button,
.command-palette__search-input::-webkit-search-results-decoration {
    display: none;
}

.command-palette__search-input::placeholder {
    color: var(--command-palette-muted);
    opacity: 1;
}

.command-palette__search-affordance {
    position: absolute;
    top: 11px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--command-palette-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    pointer-events: none;
}

.command-palette__search-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24.2109px;
    height: 17.1016px;
    color: inherit;
}

.command-palette__list-viewport {
    display: flex;
    flex: 0 0 370px;
    height: 370px;
    min-height: 0;
    padding: 0 5px 0 6px;
    box-sizing: border-box;
}

.command-palette__list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.command-palette__list-scroll::-webkit-scrollbar {
    display: none;
}

.command-palette__list {
    padding: 6px 0 0;
    margin: 0;
    list-style: none;
}

.command-palette__option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 12px;
    color: var(--command-palette-text);
    cursor: default;
}

.command-palette__option::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    bottom: 2px;
    left: 0;
    border-radius: 8px;
    background: transparent;
}

.command-palette__option:hover::before,
.command-palette__option--active::before {
    background: var(--command-palette-hover-bg);
}

.command-palette__option:hover .command-palette__option-label,
.command-palette__option--active .command-palette__option-label {
    color: var(--command-palette-text-strong);
}

.command-palette__option-icon,
.command-palette__option-label,
.command-palette__option-shortcuts {
    position: relative;
    z-index: 1;
}

.command-palette__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    margin-right: 8px;
    color: var(--command-palette-muted);
}

.command-palette__option:has(.command-palette__option-preview) .command-palette__option-icon {
    width: auto;
    min-width: 0;
}

.command-palette__option-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--command-palette-preview-color) 18%, transparent);
    border-radius: 7px;
    background: var(--command-palette-preview-bg);
    color: var(--command-palette-preview-color);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}

.command-palette__option-preview-accent {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--command-palette-preview-accent);
}

.command-palette__option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--command-palette-text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 22.5px;
}

.command-palette__option-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
}

.command-palette__option-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--command-palette-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.15;
}

.command-palette__option-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 12px;
    color: var(--command-palette-muted);
}

.command-palette__option-current {
    color: var(--command-palette-text);
}

.command-palette__option-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 21.1016px;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 15.6px;
}

.command-palette__empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--command-palette-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

.command-palette__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 12px 6px;
    border-bottom: 0.5px solid var(--command-palette-border);
}

.command-palette__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    appearance: none;
    color: var(--command-palette-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.90625rem;
    cursor: default;
}

.command-palette__tab:hover {
    background: var(--command-palette-hover-bg);
    color: var(--command-palette-text);
}

.command-palette__tab--active {
    background: var(--command-palette-hover-bg);
    color: var(--command-palette-text-strong);
}

.command-palette__tab-label {
    white-space: nowrap;
}

.command-palette__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--command-palette-hover-bg);
    color: var(--command-palette-muted);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1rem;
}

.command-palette__list-viewport--flex {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.command-palette__group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 0;
    padding: 8px 12px 0;
    color: var(--command-palette-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
}

.command-palette__group-busy {
    display: inline-flex;
    align-items: center;
    color: var(--command-palette-muted);
}

.qui-mermaid {
    --qui-mermaid-bg: var(--shell-menu-bg, var(--shell-bg, lch(9.92% 0.75 272 / 1)));
    --qui-mermaid-fg: var(--shell-text-primary, lch(90.895% 1.375 272 / 1));
    --qui-mermaid-accent: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    --qui-mermaid-muted: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
    --qui-mermaid-surface: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
    --qui-mermaid-border: var(--shell-menu-border, var(--shell-border, lch(22.88% 1.83 272 / 1)));

    margin: 12px 0;
    overflow-x: auto;
}

.qui-mermaid__diagram {
    display: flex;
    justify-content: flex-start;
}

/* Streaming skeleton: a quiet fixed-height block shown while the fence is still
   arriving, so partial diagrams never render and reflow per token. */
.qui-mermaid--streaming {
    height: 140px;
    border: 0.5px solid var(--qui-mermaid-border);
    border-radius: 8px;
    background: linear-gradient(
        100deg,
        var(--qui-mermaid-surface) 40%,
        color-mix(in srgb, var(--qui-mermaid-surface) 55%, var(--qui-mermaid-bg)) 50%,
        var(--qui-mermaid-surface) 60%
    );
    background-size: 220% 100%;
    animation: qui-mermaid-streaming 2.4s linear infinite;
}

@keyframes qui-mermaid-streaming {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qui-mermaid--streaming {
        animation: none;
        background: var(--qui-mermaid-surface);
    }
}


.qui-mermaid__diagram svg {
    max-width: 100%;
    height: auto;
}

.qui-mermaid__diagram svg text {
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, sans-serif);
}

.qui-mermaid__source {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.qui-mermaid[data-qui-mermaid-state="rendered"] .qui-mermaid__source {
    display: none;
}

.qui-mermaid[data-qui-mermaid-state="error"]::after {
    content: "Diagram failed to render";
    display: block;
    margin-top: 4px;
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    line-height: 1.2;
}

@media print {
    .qui-mermaid {
        break-inside: avoid;
    }
}


.app-toast-root {
    position: fixed;
    inset: 0;
    z-index: 760;
    pointer-events: none;
}

.app-toast-toaster {
    position: fixed;
    right: var(--offset-right);
    bottom: var(--offset-bottom);
    width: var(--width);
    max-width: calc(100vw - 32px);
    padding: 0;
    margin: 0;
    list-style: none;
    outline: 0;
    pointer-events: none;
}

.app-toast-toaster > li {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: var(--z-index);
    transform: translateY(calc(var(--offset, 0px) * -1 + 100%));
    transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
    box-sizing: border-box;
    outline: 0;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.app-toast-toaster > li[data-mounted="true"] {
    opacity: 1;
    transform: translateY(calc(var(--offset, 0px) * -1));
}

.app-toast-toaster > li[data-removed="true"] {
    opacity: 0;
    transform: translateY(calc(var(--offset, 0px) * -1 + 100%));
}

.app-toast-card {
    --app-toast-bg: var(--shell-menu-bg, var(--shell-bg-surface));
    --app-toast-raised-bg: var(--shell-bg-active);
    --app-toast-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --app-toast-border: var(--shell-menu-border, var(--shell-border));
    --app-toast-text: var(--shell-text-primary);
    --app-toast-muted: var(--shell-text-secondary);
    --app-toast-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    --app-toast-accent: var(--shell-accent, #5e6ad2);
    position: relative;
    width: var(--width, 356px);
    border-radius: 8px;
    background: var(--app-toast-bg);
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    outline: none;
    pointer-events: all;
}

.app-toast-card--rich {
    width: 384px;
    border-radius: 12px;
}

.app-toast-card--simple {
    min-height: 50px;
}

.app-toast-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        var(--app-toast-border) 0 0 0 0.5px,
        lch(0 0 0 / 0.125) 0 3px 8px 0,
        lch(0 0 0 / 0.125) 0 2px 5px 0,
        lch(0 0 0 / 0.125) 0 1px 1px 0;
}

.app-toast-card--simple::after {
    box-shadow:
        var(--app-toast-border) 0 0 0 1px,
        lch(0 0 0 / 0.1) 0 4px 12px 0;
}

.app-toast-card__simple-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 50px;
    padding: 16px;
}

.app-toast-card__simple-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    margin-right: 4px;
    flex: 0 0 auto;
}

.app-toast-card__simple-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.21875rem;
}

.app-toast-card__status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 383px;
    padding: 12px;
}

.app-toast-card__leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.app-toast-card__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 335px;
    min-width: 335px;
}

.app-toast-card__title-row,
.app-toast-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 335px;
}

.app-toast-card__title {
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 16.25px;
}

.app-toast-card__dismiss {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: -6px;
    border-radius: 9999px;
    color: var(--app-toast-accent);
}

.app-toast-card__dismiss:hover,
.app-toast-card__dismiss:focus-visible {
    background: var(--app-toast-hover-bg);
    color: var(--app-toast-text);
}

.app-toast-card__entity-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    margin: -4px;
    border-radius: 8px;
    color: var(--app-toast-text);
}

.app-toast-card__entity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: -2px 4px 0 0;
    flex: 0 0 auto;
}

.app-toast-card__entity-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-toast-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 16.25px;
}

.app-toast-card__footer {
    min-height: 19.5px;
}

.app-toast-card__footer-link {
    color: var(--app-toast-accent);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.app-toast-card__footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-toast-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--app-toast-soft);
    border-radius: 9999px;
}

.app-toast-card__action:hover,
.app-toast-card__action:focus-visible {
    background: var(--app-toast-hover-bg);
    color: var(--app-toast-text);
}

.error-state {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    color: var(--shell-text-primary);
    text-align: center;
    transform: translateY(22px);

    /* Illustration/text tiers derive from the theme so the artwork stays legible in
       light and dark. (Previously hardcoded dark-theme values washed out on light.) */
    --error-state-strong: color-mix(in lch, var(--shell-text-primary, lch(100 0 272)) 90%, var(--shell-bg-surface, lch(5.52% 0.4 272)));
    --error-state-muted: color-mix(in lch, var(--shell-text-primary, lch(100 0 272)) 60%, var(--shell-bg-surface, lch(5.52% 0.4 272)));
}

.error-state__illustration {
    display: block;
    width: 92px;
    height: 110px;
    flex: 0 0 auto;
    margin: 0 0 20px;
}

.error-state__illustration-foreground {
    fill: var(--error-state-strong, lch(90.35% 1.15 272 / 1));
}

.error-state__illustration-background {
    fill: var(--error-state-muted, lch(61.399% 1.15 272 / 1));
}

.error-state__illustration-line {
    fill: none;
    stroke: var(--error-state-strong, lch(90.35% 1.15 272 / 1));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.error-state__copy {
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.error-state__title {
    margin: 0;
    color: var(--error-state-strong, lch(90.35% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
}

.error-state__message {
    margin: 0;
    color: var(--error-state-muted, lch(61.399% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
    letter-spacing: 0;
}

.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 11px 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-secondary);
}

.alert-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    color: var(--shell-text-tertiary);
}

.alert-banner__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.alert-banner__body strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.alert-banner__body span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.alert-banner__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.alert-banner--info {
    border-color: color-mix(in srgb, #5e6ad2 32%, var(--shell-border));
    background: color-mix(in srgb, #5e6ad2 8%, var(--shell-bg-surface));
}

.alert-banner--info .alert-banner__icon {
    color: #8f96ff;
}

.alert-banner--success {
    border-color: color-mix(in srgb, #26b36a 34%, var(--shell-border));
    background: color-mix(in srgb, #26b36a 8%, var(--shell-bg-surface));
}

.alert-banner--success .alert-banner__icon {
    color: #3ccf84;
}

.alert-banner--warning {
    border-color: color-mix(in srgb, #d9a400 34%, var(--shell-border));
    background: color-mix(in srgb, #d9a400 8%, var(--shell-bg-surface));
}

.alert-banner--warning .alert-banner__icon {
    color: #e3b341;
}

.alert-banner--danger {
    border-color: color-mix(in srgb, #e5484d 34%, var(--shell-border));
    background: color-mix(in srgb, #e5484d 8%, var(--shell-bg-surface));
}

.alert-banner--danger .alert-banner__icon {
    color: #ff676d;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 22px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    background: var(--settings-control-bg);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.ui-badge--muted {
    background: transparent;
    color: var(--shell-text-tertiary);
}

.ui-badge--blue {
    border-color: color-mix(in srgb, #5e6ad2 34%, var(--shell-border));
    background: color-mix(in srgb, #5e6ad2 13%, transparent);
    color: #a8adff;
}

.ui-badge--green {
    border-color: color-mix(in srgb, #26b36a 34%, var(--shell-border));
    background: color-mix(in srgb, #26b36a 12%, transparent);
    color: #4fd18e;
}

.ui-badge--successtext {
    height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--status-green-text, lch(50% 80 141.95 / 1));
    font-weight: 450;
    line-height: normal;
}

.ui-badge--yellow {
    border-color: color-mix(in srgb, #d9a400 36%, var(--shell-border));
    background: color-mix(in srgb, #d9a400 12%, transparent);
    color: #e5b84d;
}

.ui-badge--red {
    border-color: color-mix(in srgb, #e5484d 36%, var(--shell-border));
    background: color-mix(in srgb, #e5484d 12%, transparent);
    color: #ff7074;
}

.ui-badge--count {
    min-width: 22px;
    padding: 0 6px;
    background: var(--shell-bg-selected);
    color: var(--shell-text-primary);
}

.ui-badge--icon {
    padding-left: 6px;
}

.progress-bar {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--progress-bar-track-bg, color-mix(in srgb, var(--shell-text-primary) 8%, var(--shell-bg-surface)));
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-text-primary) 5%, transparent);
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #5e6ad2;
}

.progress-bar--has-value span {
    min-width: 2px;
}

.progress-bar--success span {
    background: #26b36a;
}

.progress-bar--warning span {
    background: #d9a400;
}

.progress-bar--danger span {
    background: #e5484d;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
}

.status-row__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 9999px;
}

.status-row__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
}

.status-row__body strong {
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-row__body span {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--settings-status-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    vertical-align: top;
}

.inline-status__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 9999px;
}

.inline-status__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skeleton-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
}

.skeleton-row span {
    height: 8px;
    border-radius: 9999px;
    background:
        linear-gradient(
            90deg,
            var(--shell-bg-selected) 0%,
            color-mix(in srgb, var(--shell-bg-selected) 72%, var(--shell-text-tertiary)) 45%,
            var(--shell-bg-selected) 90%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-row span:first-child {
    width: 18px;
    height: 18px;
}

.skeleton-row--short {
    grid-template-columns: 26px minmax(0, 0.64fr) 62px;
}

@keyframes skeleton-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.shell-dock {
    position: relative;
    z-index: 720;
    height: 28px;
    flex: 0 0 auto;
}

.shell-dock__surface {
    display: flex;
    align-items: flex-start;
    height: 28px;
    margin-top: -4px;
    padding: 0 10px 0 2px;
    background: var(--shell-bg-sidebar);
}

.shell-dock__spacer {
    flex: 1 1 0;
    min-width: 24px;
    margin-top: 14px;
}

.assistant-tab-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 28px;
    gap: 2px;
    overflow: hidden;
}

.assistant-tab {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    max-width: 214px;
    min-width: 0;
    padding: 0 0 1px;
    border-radius: 8px;
    color: var(--shell-text-secondary);
    cursor: var(--pointer, pointer);
    overflow: hidden;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.assistant-tab--active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.assistant-tab:hover,
.assistant-tab:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-text-primary);
    outline: none;
}

.assistant-tab__inner {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 27px;
    gap: 5px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.assistant-tab__label-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 14.5px;
    padding-right: 8px;
    overflow: hidden;
    mask-image: linear-gradient(to left, transparent 0, black 10px);
}

.assistant-tab__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: currentColor;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.assistant-tab__unread-dot {
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--shell-accent, #5e6ad2);
}

.assistant-tab--unread .assistant-tab__label {
    color: var(--shell-text-primary);
}

.assistant-tab--thinking .assistant-tab__label,
.assistant-message__assistant-text--pending,
.agent-activity-working__label,
.comment-thread__working {
    display: inline-block;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2072%22%20fill%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22blur%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22%20height%3D%22300%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%226%22%20%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22rotate(-30%2090%2036)%22%20filter%3D%22url(%23blur)%22%3E%0A%20%20%20%20%3Crect%20x%3D%2272%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%235e6ad2%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.5%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2290%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23999a9d%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.4%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(var(--assistant-tab-thinking-base, var(--shell-bg-button)), var(--assistant-tab-thinking-base, var(--shell-bg-button)));
    background-repeat: no-repeat, no-repeat;
    background-size: 180px 72px, 100% 100%;
    background-position: calc(0% - 180px) 50%, 0 50%;
    background-blend-mode: screen, normal;
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: assistant-tab-thinking-shimmer 2.4s linear infinite;
    will-change: background-position;
}

@keyframes assistant-tab-thinking-shimmer {
    0%,
    100% {
        background-position: calc(0% - 180px) 50%, 0 50%;
    }

    75%,
    99.999% {
        background-position: calc(100% + 180px) 50%, 0 50%;
    }
}

.assistant-tab__close {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary);
    visibility: hidden;
    transform: translateY(-50%);
    cursor: var(--pointer, pointer);
}

.assistant-tab:hover .assistant-tab__close,
.assistant-tab:focus-within .assistant-tab__close {
    visibility: visible;
}

.assistant-tab:hover .assistant-tab__label-wrap,
.assistant-tab:focus-within .assistant-tab__label-wrap {
    mask-image: linear-gradient(to left, transparent 16px, black 32px);
}

.assistant-tab__close:hover,
.assistant-tab__close:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.assistant-tab__close::before {
    position: absolute;
    content: "";
    inset: -6px -4px -6px -4px;
}

.shell-dock__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

.shell-dock__ask,
.shell-dock__history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid transparent;
    border-radius: 8px;
    transition: border 0.15s, background-color 0.15s, color 0.15s, opacity 0.15s;
}

.shell-dock__ask {
    height: 28px;
    padding: 0 12px 0 10px;
    gap: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-dock__ask:hover,
.shell-dock__history:hover,
.shell-dock__ask:focus-visible,
.shell-dock__history:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-text-primary);
}

.shell-dock__ask--active,
.shell-dock__history--active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.shell-dock__history--active {
    background: transparent;
    color: var(--shell-text-primary);
}

.shell-dock__history {
    width: 28px;
    height: 28px;
    padding: 0 2px;
    color: var(--assistant-history-icon, var(--shell-text-muted));
}

.shell-dock__history.shell-dock__history--active {
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

/* Assistant identity mark: a Size×Size box holding the stock icon or the app's brand image
   (contain-fit, circular clip) so the ask button (14) and empty state (28) keep their geometry. */
.assistant-identity-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--assistant-identity-size, 14px);
    height: var(--assistant-identity-size, 14px);
}

.assistant-identity-mark__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: contain;
}

.shell-dock__ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

.shell-dock__ask-label {
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}


/* The history popover mounts through the generic AnchoredPopover; the positioner pins it
   above the dock's history button. Placement only — the z-index stays the generic 950 so the
   panel sits ABOVE its own backdrop (940) inside the dock's stacking context; a lower value
   (the old 740) let the transparent backdrop swallow every item click. */
.shell-dock .anchored-popover__positioner {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 35.5px;
}
.assistant-history-popover {
    width: min(383px, calc(100vw - 20px));
    max-height: min(657.5px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    background: var(--shell-menu-bg);
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    box-shadow: var(--shell-menu-shadow, var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0));
    overflow: hidden;
}

.assistant-history-popover__search {
    position: relative;
    flex: 0 0 35.77px;
    height: 35.77px;
    display: flex;
    align-items: center;
    padding: 0 12px 0 14px;
    border-bottom: 0.5px solid var(--assistant-history-divider, var(--shell-menu-divider, lch(16.4% 1.83 272 / 1)));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

.assistant-history-popover__search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.assistant-history-popover__input {
    position: relative;
    display: block;
    width: 100%;
    height: 35.28px;
    padding: 10px 0 9px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    caret-color: var(--shell-accent, var(--shell-menu-text-strong, var(--shell-text-primary)));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.assistant-history-popover__input::placeholder {
    color: var(--assistant-placeholder-color, var(--shell-menu-hint, var(--shell-text-secondary)));
    opacity: 1;
}

.assistant-history-popover__list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.assistant-history-popover__list-wrap::-webkit-scrollbar {
    display: none;
}

.assistant-history-popover__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: lch(0 0 0 / 0.004);
}

.assistant-history-popover__group {
    display: flex;
    align-items: center;
    height: 29.4px;
    padding: 8px 14px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.assistant-history-popover__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 100%;
    height: 31.36px;
    padding: 0 18px 0 14px;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: var(--pointer, pointer);
    user-select: none;
    transition: color var(--speed-highlightFadeOut, 120ms ease);
}

.assistant-history-popover__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    z-index: 0;
    border-radius: 8px;
    background: transparent;
}

.assistant-history-popover__item > * {
    position: relative;
    z-index: 1;
}

.assistant-history-popover__item:hover,
.assistant-history-popover__item:focus-visible {
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    outline: none;
}

.assistant-history-popover__item:hover::before,
.assistant-history-popover__item:focus-visible::before {
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
}

.assistant-history-popover__item-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Every row reserves the unread gutter (Linear: titles at +24 from the content edge);
       the dot just fills the space when needed. */
    padding-left: 24px;
    font-weight: 450;
    line-height: normal;
}

.assistant-history-popover__item-lead {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-flex;
    transform: translateY(-50%);
}

.assistant-history-popover__item-dot {
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.assistant-history-popover__item-time {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--assistant-history-meta-color, var(--shell-menu-indicator, var(--shell-text-secondary)));
}

.assistant-history-popover__separator {
    position: relative;
    height: 12px;
    padding: 6px 0;
}

.assistant-history-popover__separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 0.5px solid var(--assistant-history-divider, var(--shell-menu-divider, lch(16.4% 1.83 272 / 1)));
}

.assistant-history-popover__group:last-child,
.assistant-history-popover__separator:last-child {
    display: none;
}

.assistant-history-popover__empty {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
}

.assistant-panel {
    --assistant-panel-bg: var(--assistant-panel-shell-bg, var(--shell-menu-bg));
    --assistant-panel-raised-bg: var(--assistant-panel-content-bg, var(--shell-bg-active));
    --assistant-panel-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --assistant-panel-border: var(--assistant-border, var(--shell-border));
    --assistant-panel-text: var(--shell-text-primary);
    --assistant-panel-muted: var(--shell-text-secondary);
    --assistant-panel-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    position: absolute;
    left: calc(100% - 432px);
    top: calc(100% - 637px);
    width: 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: var(--assistant-panel-bg);
    color: var(--assistant-panel-text);
    border: 0.5px solid var(--assistant-panel-border);
    /* Measured Linear docked chat (2026-09-11): 12px top corners, 16px bottom corners. */
    border-radius: 12px 12px 16px 16px;
    box-shadow: var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    overflow: hidden;
    z-index: 730;
    font-weight: 400;
    transform-origin: center center;
    transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1), top 180ms cubic-bezier(0.16, 1, 0.3, 1), width 180ms cubic-bezier(0.16, 1, 0.3, 1), height 180ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease-in-out;
}

.assistant-panel.assistant-panel--maximized {
    top: 16px;
    left: 6px;
    width: calc(100% - 20px);
    height: calc(100% - 53px);
    border-radius: 16px;
}

.assistant-panel--entering {
    animation: assistant-panel-enter 180ms cubic-bezier(0.21, 0.99, 0.36, 1) forwards;
    transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), height 180ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease-in-out;
}

.assistant-panel--entering-from-history {
    animation-name: assistant-panel-enter-from-history;
}

.assistant-panel--closing {
    pointer-events: none;
    animation: assistant-panel-exit 140ms linear -28ms forwards;
}

.assistant-panel--closing-maximized {
    pointer-events: none;
    animation: assistant-panel-exit-maximized 140ms linear -28ms forwards;
}

@keyframes assistant-panel-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes assistant-panel-enter-from-history {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes assistant-panel-exit {
    from {
        opacity: 1;
    }

    30% {
        opacity: 0.82;
    }

    58% {
        opacity: 0.4;
    }

    82% {
        opacity: 0.165;
    }

    to {
        opacity: 0;
    }
}

@keyframes assistant-panel-exit-maximized {
    from {
        opacity: 1;
        transform: scale(1);
    }

    22% {
        opacity: 0.92;
        transform: scale(0.993);
    }

    38% {
        opacity: 0.8;
        transform: scale(0.985);
    }

    52% {
        opacity: 0.66;
        transform: scale(0.977);
    }

    68% {
        opacity: 0.42;
        transform: scale(0.97);
    }

    84% {
        opacity: 0.18;
        transform: scale(0.958);
    }

    to {
        opacity: 0;
        transform: scale(0.955);
    }
}

.assistant-panel__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 48px;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__header::after {
    position: absolute;
    content: "";
    top: 48px;
    right: 0;
    bottom: -16px;
    left: 0;
    height: 16px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(var(--assistant-panel-raised-bg), rgba(0, 0, 0, 0));
}

.assistant-panel:has(.assistant-panel__messages[data-can-scroll="true"]) .assistant-panel__header::after {
    opacity: 1;
}

.assistant-panel__title-strip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 291px;
    height: 24px;
    min-width: 0;
    padding: 2px;
}

.assistant-panel__beta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 43.5703px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 9999px;
    background: var(--assistant-panel-raised-bg);
    color: var(--assistant-panel-soft);
    flex: 0 0 auto;
}

.assistant-panel__beta-pill-text {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
}

.assistant-panel__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--assistant-panel-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.assistant-panel__title-strip > .assistant-panel__title {
    margin-left: 0;
}

.assistant-panel__beta-pill + .assistant-panel__title {
    margin-left: 0;
}

.assistant-panel__title-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    margin-right: -2px;
    border-radius: 9999px;
    color: var(--assistant-panel-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-panel__window-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.assistant-panel__window-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--assistant-panel-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-composer__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--assistant-composer-icon, var(--shell-text-tertiary));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-panel__title-action:hover,
.assistant-panel__title-action:focus-visible,
.assistant-panel__window-button:hover,
.assistant-panel__window-button:focus-visible,
.assistant-composer__icon-button:hover,
.assistant-composer__icon-button:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
}


/* Docked panel resize handles (measured Linear 2026-09-11: 11px zones straddling the edge, an 18px
   corner). The panel clips its children (overflow hidden, rounded corners), so our zones are the
   inside 8px of each edge and a 14px corner; the shared resize-guide hairline (0.5px, radius 4,
   --shell-resize-guide-paint fading at both ends) sits on the edge, inset 12px, fading in over
   250ms on hover and snapping on while dragging. */
.assistant-panel__resize {
    position: absolute;
    z-index: 3;
    touch-action: none;
}

.assistant-panel__resize--left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    cursor: col-resize;
}

.assistant-panel__resize--top {
    top: 0;
    right: 0;
    left: 0;
    height: 8px;
    cursor: row-resize;
}

.assistant-panel__resize--corner {
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    z-index: 4;
    cursor: nwse-resize;
}

.assistant-panel__resize--left::after,
.assistant-panel__resize--top::after {
    content: "";
    position: absolute;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.assistant-panel__resize--left::after {
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 0.5px;
    background: var(--shell-resize-guide-paint);
}

.assistant-panel__resize--top::after {
    left: 12px;
    right: 12px;
    top: 0;
    height: 0.5px;
    background: linear-gradient(to right,
        lch(from var(--shell-sidebar-resize-guide) l c h / 0) 0%,
        lch(from var(--shell-sidebar-resize-guide) l c h / 0.5) 15%,
        lch(from var(--shell-sidebar-resize-guide) l c h / 0.65) 50%,
        lch(from var(--shell-sidebar-resize-guide) l c h / 0.5) 85%,
        lch(from var(--shell-sidebar-resize-guide) l c h / 0) 100%);
}

.assistant-panel__resize:hover::after,
.assistant-panel__resize[data-dragging="true"]::after,
.assistant-panel__resize--corner:hover ~ .assistant-panel__resize::after {
    opacity: 1;
    transition-duration: 0s;
}

/* Frames during a drag must not glide: the panel's geometry transitions are off while resizing. */
.assistant-panel--resizing {
    transition: none;
}

body.assistant-panel-resizing {
    user-select: none;
}

.assistant-panel__chat-menu:not(.anchored-dropdown-menu--context) {
    top: 30px;
    right: -4px;
}

.assistant-panel__chat-menu:not(.anchored-dropdown-menu--context) > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    width: 172px;
}

.anchored-dropdown-menu--context.assistant-panel__chat-menu > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    width: 172px;
}

/* Docked tab context menu (measured JAM-133, 2026-09-11): 175px panel — Open full page · Close ·
   Close other tabs. Pointer-opened it sits at the pointer (context placement); keyboard-opened it
   rises above the tab (the dock hugs the bottom edge). */
.anchored-dropdown-menu--context.assistant-tab__menu > .shell-dropdown-menu {
    min-width: 0;
    width: 175px;
}

.assistant-tab__menu:not(.anchored-dropdown-menu--context) {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
}

.assistant-tab__menu:not(.anchored-dropdown-menu--context) > .shell-dropdown-menu {
    top: auto;
    right: auto;
    left: 0;
    width: 175px;
}

.assistant-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__empty,
.assistant-panel__messages {
    height: 100%;
}

.assistant-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px 18px;
    transform: translateY(-2px);
}

.assistant-panel__empty--context {
    padding: 0;
    transform: none;
    outline: none;
}

.assistant-panel__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--assistant-panel-soft);
}

.assistant-panel__empty-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 267.2734px;
    gap: 2px;
}

.assistant-panel__empty-title {
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.assistant-panel__empty-subtitle {
    display: block;
    width: 267.2734px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__suggestions {
    display: grid;
    grid-template-columns: 169.1719px 143.9453px;
    column-gap: 8px;
    row-gap: 8px;
    width: 321.1172px;
}

.assistant-panel__suggestion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28.5px;
    padding: 6px 14px 6px 12px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 8px;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.assistant-panel__suggestion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted);
}

.assistant-panel__suggestion:nth-child(1) {
    width: 169.1719px;
}

.assistant-panel__suggestion:nth-child(2) {
    width: 143.9453px;
}

.assistant-panel__suggestion:nth-child(3) {
    width: 175.5156px;
    grid-column: 1 / span 2;
    justify-self: center;
}

.assistant-panel__suggestion:hover,
.assistant-panel__suggestion:focus-visible {
    background: var(--assistant-panel-hover-bg);
    border-color: var(--settings-control-hover-border, var(--assistant-panel-border));
}

.assistant-panel__helper-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__helper-key {
    color: var(--assistant-panel-text);
}

.assistant-panel__messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.assistant-panel__messages::-webkit-scrollbar {
    display: none;
}

.assistant-message {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.assistant-message--user {
    justify-content: flex-end;
}

.assistant-message--assistant {
    min-height: 56.7969px;
}

.assistant-message__assistant-content {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.assistant-message__bubble {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    /* Dock default (measured); full-page and session-rail contexts widen to Linear's 75%. */
    max-width: var(--assistant-user-message-max-width, min(326px, calc(100% - 57px)));
    min-height: 36.7969px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--assistant-user-message-bg, lch(13.841% 0.943 272));
    color: var(--assistant-user-message-text, lch(90.668% 1.375 272));
    box-shadow: var(--assistant-user-message-shadow, none);
    box-sizing: border-box;
}

.assistant-message__text,
.assistant-message__assistant-text {
    min-width: 0;
    max-width: 100%;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal;
}

.assistant-message__text {
    color: var(--assistant-user-message-text, lch(90.668% 1.375 272));
}

.assistant-message__markdown {
    white-space: normal;
}

.assistant-message__markdown > :first-child {
    margin-top: 0;
}

.assistant-message__markdown > :last-child {
    margin-bottom: 0;
}

.assistant-message__markdown p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.assistant-message__markdown ul,
.assistant-message__markdown ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.assistant-message__markdown li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.assistant-message__markdown li > p {
    margin: 0;
}

.assistant-message__assistant-text {
    display: block;
    padding: 0 10px;
    width: calc(100% - 20px);
    white-space: normal;
    box-sizing: border-box;
}

.assistant-message__assistant-text--pending {
    width: auto;
    white-space: pre-wrap;
}

.assistant-message__worked-duration {
    display: flex;
    width: fit-content;
    max-width: 100%;
    height: 16px;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    margin: 0;
    color: var(--assistant-panel-muted);
    background: transparent;
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 500;
    line-height: normal;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
}

.assistant-message__worked-duration--has-disclosure,
.assistant-message__worked-duration--open {
    cursor: pointer;
}

/* Linear parity: the pill is quiet — no hover chrome, just the pointer + chevron. */
.assistant-message__worked-duration:focus-visible {
    outline: none;
}

/* Linear parity: a filled triangle — points right collapsed, rotates to point down open. */
.assistant-message__worked-duration .shell-icon {
    flex: 0 0 auto;
    transition: transform 120ms ease;
}

.assistant-message__worked-duration--open .shell-icon {
    transform: rotate(90deg);
}

.assistant-message__worked-duration-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
}

.assistant-message__worked-duration-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expand/contract animates to natural height via the grid-rows trick; content is
   always mounted and fades with the fold. */
.assistant-message__work-disclosure-frame {
    display: grid;
    grid-template-rows: 0fr;
    /* Collapsed, the empty frame would still cost two flex gaps (pill → frame → body);
       the negative margin folds one away and animates back in with the expansion. */
    margin-top: -12px;
    transition: grid-template-rows 200ms ease, margin-top 200ms ease;
}

.assistant-message__work-disclosure-frame--open {
    grid-template-rows: 1fr;
    margin-top: 0;
}

.assistant-message__work-disclosure-frame > .assistant-message__work-disclosure {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity 160ms ease;
}

.assistant-message__work-disclosure-frame--open > .assistant-message__work-disclosure {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .assistant-message__work-disclosure-frame,
    .assistant-message__work-disclosure-frame > .assistant-message__work-disclosure {
        transition: none;
    }
}

/* Linear parity: expanded worked-for content is a quiet indented text column — 12px
   rhythm everywhere (the assistant-content gap supplies the 12px above and below the
   block, so the container adds none of its own), rows inset 18px under the pill. */
.assistant-message__work-disclosure {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 10px 0 18px;
}

.assistant-message__work-disclosure .assistant-message__part--reasoning {
    display: block;
    border-left: 2px solid var(--assistant-panel-border);
    padding-left: 12px;
    animation: none;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 450;
    line-height: 1.6;
}

.assistant-message__work-summary {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    color: var(--assistant-panel-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.assistant-message__work-summary::before {
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    margin: 0 6px;
    border-radius: 9999px;
    background: currentColor;
    content: "";
    opacity: 0.7;
}

.assistant-message__work-summary:first-child::before {
    display: none;
}

.assistant-message__work-summary-count {
    font-weight: 600;
}

.assistant-message__work-summary--added {
    color: var(--assistant-work-added-color, #4fd18e);
}

.assistant-message__work-summary--edited {
    color: var(--assistant-work-edited-color, #e3b341);
}

.assistant-message__work-summary--removed {
    color: var(--assistant-work-removed-color, #ff7074);
}

.assistant-message__work-summary--warning {
    color: var(--assistant-work-warning-color, #e3b341);
}

.assistant-message__work-summary--accent {
    color: var(--assistant-work-accent-color, var(--shell-accent, #5e6ad2));
}

.assistant-message__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px 0 8px;
}

/* ── Reply options (Qui-native; no Linear reference) ──
   One-click replies an agent offers after a turn: a wrapping row of pill buttons under the
   latest reply, styled on the empty-state suggestion buttons. Hosts render them only on the
   latest reply while no turn is in flight; a click sends the option's prompt as a normal message. */
.assistant-message__reply-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
}

.assistant-message__reply-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 10px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: transparent;
    color: var(--assistant-panel-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.assistant-message__reply-option .shell-icon {
    flex: 0 0 auto;
    color: var(--assistant-panel-muted);
}

.assistant-message__reply-option:hover,
.assistant-message__reply-option:focus-visible {
    background: var(--assistant-panel-hover-bg);
    border-color: var(--settings-control-hover-border, var(--assistant-panel-border));
    color: var(--assistant-panel-text);
    outline: none;
}

/* ── Header actions zone (Qui-native; no Linear reference) ──
   The session's published actions as small icon+label buttons in the surface header (dock
   panel header, full-page title bar, agent side-panel header), ahead of the window controls;
   the clicked one shows the accent ring while the host invokes it. Host extras follow. */
.assistant-session-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 2px;
    margin-right: 4px;
}

.assistant-session-actions__button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 8px 0 6px;
    border: 0.5px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--assistant-panel-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.assistant-session-actions__button .shell-icon {
    flex: 0 0 auto;
}

.assistant-session-actions__button:hover,
.assistant-session-actions__button:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
    outline: none;
}

.assistant-session-actions__button:disabled {
    cursor: default;
    opacity: 0.6;
}

.assistant-session-actions__button--pending {
    opacity: 1;
    border-color: var(--shell-accent, #5e6ad2);
    color: var(--assistant-panel-text);
}

/* The dock header is ~380px wide: the zone collapses to icon-only buttons (the name becomes
   the tooltip) and never pushes the window controls off the strip. */
.assistant-panel__header .assistant-session-actions {
    flex: 0 0 auto;
    margin-right: 2px;
}

.assistant-panel__header .assistant-session-actions__button {
    width: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 9999px;
}

.assistant-panel__header .assistant-session-actions__label {
    display: none;
}

.assistant-message__copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    /* Linear parity: rests light (reduced opacity), darkens to full on hover. */
    color: var(--assistant-message-action-icon, var(--shell-text-muted));
    opacity: 0.55;
    transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
    cursor: default;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assistant-message__copy:hover,
.assistant-message__copy:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
    opacity: 1;
    outline: none;
}


/* Hover-revealed copy states (Linear: earlier replies and user bubbles show copy on hover). */
.assistant-message__actions--hover {
    opacity: 0;
    transition: opacity 150ms ease;
}

.assistant-message--assistant:hover .assistant-message__actions--hover,
.assistant-message__actions--hover:focus-within {
    opacity: 1;
}

.assistant-message__copy--user {
    align-self: center;
    margin-right: 8px;
    opacity: 0;
}

.assistant-message--user:hover .assistant-message__copy--user {
    opacity: 0.55;
}

.assistant-message--user .assistant-message__copy--user:hover,
.assistant-message__copy--user:focus-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .assistant-message__actions--hover,
    .assistant-message__copy--user,
    .assistant-message__copy {
        transition: none;
    }
}

.assistant-message__copy::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    /* Left-anchored, not centred: the button sits at the column's left edge and a centred
       tooltip hangs outside the transcript scroller and gets clipped. */
    left: 0;
    z-index: 1100;
    height: 27px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: var(--assistant-tooltip-bg, lch(13.07% 1.2 272));
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--assistant-tooltip-text, lch(91.214% 1.6 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 26px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.assistant-message__copy:hover::after,
.assistant-message__copy:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.assistant-message__assistant-text > :first-child {
    margin-top: 0;
}

.assistant-message__assistant-text > :last-child {
    margin-bottom: 0;
}

.assistant-message__assistant-text p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.assistant-message__assistant-text ul,
.assistant-message__assistant-text ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.assistant-message__assistant-text li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.assistant-message__assistant-text li > p {
    margin: 0;
}

/* Reply media can never widen the transcript. Images present at a set size and
   open the lightbox (cursor + focusability wired by the transcript JS). */
.assistant-message__assistant-text img,
.assistant-message__assistant-text video,
.assistant-message__assistant-text canvas,
.chat-message__markdown img {
    max-width: 100%;
    height: auto;
}

.assistant-message__assistant-text img,
.chat-message__markdown img {
    display: block;
    width: auto;
    max-height: 320px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 8px;
    cursor: zoom-in;
}

.assistant-message__assistant-text img:focus-visible,
.chat-message__markdown img:focus-visible {
    outline: 2px solid var(--accent, #5e6ad2);
    outline-offset: 2px;
}

/* Full-page and session-rail transcripts run Linear's roomier markdown rhythm
   (measured: 16px between paragraphs, lists tucked 6px under their intro with 6px
   between items at a 24px indent). The dock keeps its tighter spacing. */
.assistant-chat-surface__messages .assistant-message__assistant-text p,
.agent-session-panel__feed .assistant-message__assistant-text p {
    margin: 16px 0 0;
}

.assistant-chat-surface__messages .assistant-message__assistant-text ul,
.assistant-chat-surface__messages .assistant-message__assistant-text ol,
.agent-session-panel__feed .assistant-message__assistant-text ul,
.agent-session-panel__feed .assistant-message__assistant-text ol {
    margin: 6px 0 0;
    padding-left: 24px;
}

.assistant-chat-surface__messages .assistant-message__assistant-text li,
.agent-session-panel__feed .assistant-message__assistant-text li {
    margin: 6px 0 0;
}

.assistant-chat-surface__messages .assistant-message__assistant-text li:first-child,
.agent-session-panel__feed .assistant-message__assistant-text li:first-child {
    margin-top: 0;
}

.assistant-message__assistant-text a {
    color: var(--assistant-panel-text);
    text-decoration: underline;
    text-decoration-color: var(--assistant-panel-muted);
    text-underline-offset: 2px;
}

.assistant-message__assistant-text code {
    padding: 1px 4px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 4px;
    background: var(--assistant-panel-raised-bg);
    color: var(--assistant-panel-text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.75rem;
}

.assistant-message__assistant-text pre {
    max-width: 100%;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: var(--assistant-panel-raised-bg);
    overflow: auto;
}

.assistant-message__assistant-text pre code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: pre;
}

.assistant-message__assistant-text blockquote {
    margin: 0 0 8px;
    padding-left: 10px;
    border-left: 2px solid var(--assistant-panel-border);
    color: var(--assistant-panel-muted);
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .tableContainer {
    width: 100%;
    margin: 22px 0 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .table-wrapper {
    position: relative;
    width: calc(100% + 16px);
    margin: -6px 0 0 -16px;
    padding: 6px 0 22px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: transparent transparent;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .table-wrapper:hover {
    scrollbar-color: var(--scrollbar-color, var(--shell-scrollbar-thumb, var(--assistant-panel-border))) transparent;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) table {
    max-width: none;
    height: fit-content;
    min-width: 100%;
    margin: 0 0 1px;
    overflow: hidden;
    border: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
    border-radius: 6px;
    border-spacing: 0;
    border-collapse: separate;
    background: var(--assistant-markdown-table-bg, var(--settings-card-bg, var(--assistant-panel-bg, var(--shell-bg-surface, lch(100 0 282)))));
    color: var(--assistant-panel-text, var(--shell-text-primary, lch(20 1 282)));
    table-layout: fixed;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) thead th,
:where(.assistant-message__assistant-text, .chat-message__markdown) tbody tr:first-child > th {
    background: var(--assistant-markdown-table-header-bg, var(--settings-icon-tile-bg, var(--assistant-panel-raised-bg, var(--shell-bg-button, lch(94.5 0 282)))));
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th,
:where(.assistant-message__assistant-text, .chat-message__markdown) td {
    padding: 0;
    border-left: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) td {
    border-top: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th:first-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td:first-child {
    border-left: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) tbody:first-child tr:first-child > td,
:where(.assistant-message__assistant-text, .chat-message__markdown) tbody:first-child tr:first-child > th {
    border-top: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .cell-content {
    width: 100%;
    height: 100%;
    padding: 5px 8px;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th > :first-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td > :first-child {
    margin-top: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th > :last-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td > :last-child {
    margin-bottom: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th p,
:where(.assistant-message__assistant-text, .chat-message__markdown) td p {
    margin: 0;
}

.assistant-panel__composer-wrap {
    flex: 0 0 auto;
    padding: 0 8px 8px;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__context-row {
    /* Fills the panel (the composer is fluid too) so a user-resized dock keeps its 8px gutters. */
    width: auto;
    min-height: 26.5px;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
}

.assistant-panel__context-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22.5px;
    padding: 2px 4px;
    border-radius: 6px;
    color: var(--assistant-panel-text);
}

.assistant-panel__context-chip-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.assistant-panel__context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.assistant-panel__context-text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-panel__context-key {
    color: var(--assistant-panel-muted);
    flex: 0 0 auto;
}

.assistant-panel__context-title {
    color: var(--assistant-panel-soft);
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-composer {
    --assistant-composer-shell-width: 383px;
    --assistant-composer-inner-width: 375px;
    --assistant-composer-editor-width: 363px;
    position: relative;
    width: var(--assistant-composer-shell-width);
    min-height: 68.796875px;
    margin: 4px auto 0;
    padding: 6px 4px;
    border-radius: 7px;
    border: 0;
    background: var(--assistant-composer-bg, var(--assistant-panel-raised-bg));
    box-shadow:
        inset 0 0 0 0.5px var(--assistant-composer-border, var(--assistant-panel-border)),
        var(--assistant-user-message-shadow, 0 0 0 0 transparent);
}

/* External file drag hovering the composer (paste/drop attachments share the picker
   pipeline; the ring is the only visual the primitive adds). */
.message-composer--drag-active.assistant-composer,
.message-composer--drag-active {
    box-shadow:
        inset 0 0 0 1.5px var(--shell-accent),
        var(--assistant-user-message-shadow, 0 0 0 0 transparent);
}

.message-composer--fluid.assistant-composer {
    --assistant-composer-shell-width: 100%;
    --assistant-composer-inner-width: 100%;
    --assistant-composer-editor-width: 100%;
    width: auto;
    margin: 0;
    box-sizing: border-box;
}

.assistant-composer__editor-row,
.assistant-composer__action-row {
    width: var(--assistant-composer-inner-width);
    margin: 0 auto;
    background: transparent;
}

.message-composer--fluid .assistant-composer__editor-row,
.message-composer--fluid .assistant-composer__action-row,
.message-composer--fluid .assistant-composer__editor {
    box-sizing: border-box;
}

.message-composer__toolbar-spacer {
    display: inline-flex;
    flex: 0 0 auto;
    width: 0;
    height: 24px;
}

.message-composer__header,
.message-composer__footer {
    width: var(--assistant-composer-inner-width);
    margin: 0 auto;
}

.message-composer__header {
    margin-bottom: 4px;
}

/* ── Repository / branch target (Qui-native; no Linear reference) ──
   The wizard steps that pick a repository then a branch (searchable PanelListItem lists with a
   28px provider tile and an accent check), and the "owner/repo · branch" chip that shows the
   chosen target in headers and composer chrome. */
.repository-target-step,
.branch-target-step {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
}

.repository-target-step__list,
.branch-target-step__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding-right: 4px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--shell-text-secondary) 26%, transparent) transparent;
}

.repository-target-step__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0.5px solid color-mix(in srgb, var(--shell-accent, #5e6ad2) 35%, var(--shell-border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.repository-target-step__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--shell-accent, #5e6ad2);
    color: white;
}

.repository-target-step__empty {
    margin: 0;
    padding: 18px 4px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    text-align: center;
}

.branch-target-step__repository {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.branch-target-step__repository-label {
    color: var(--shell-text-primary);
}

.branch-target-step__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.branch-target-step__label {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.repository-branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 0.5px solid var(--shell-border);
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.repository-branch-chip .shell-icon {
    flex: 0 0 auto;
}

.repository-branch-chip__repository,
.repository-branch-chip__branch {
    color: var(--shell-text-primary);
}

.repository-branch-chip__separator {
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
}

.repository-branch-chip__new {
    padding: 0 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent);
    color: var(--shell-accent, #5e6ad2);
    font-size: 0.6875rem;
    line-height: 0.875rem;
}

.repository-branch-chip--editable {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.repository-branch-chip--editable:hover,
.repository-branch-chip--editable:focus-visible {
    background: var(--shell-bg-hover, var(--shell-bg-active));
    outline: none;
}

/* ── Plan chip (Qui-native; no Linear reference) ──
   The agent's to-do list as a compact "done/total" chip overlaying the composer's top corner
   (absolute, so the editor and the card's height never move): the drafts glyph + count, the
   shared animated border (controls.css) while the turn is live and the plan is unfinished,
   and the steps in a hover card above the chip. */
/* A header holding only the chip leaves the flow entirely: the chat composer is a
   space-between column, so even a 0px header would push the editor to the middle. */
.message-composer__header:has(> .assistant-composer__plan:only-child) {
    display: contents;
}

.assistant-composer__plan {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}

.assistant-chat-surface__body--chat .assistant-chat-surface__composer .assistant-composer__plan {
    top: 10px;
    right: 10px;
}

.assistant-plan-chip-scope {
    position: relative;
    display: inline-flex;
}

.assistant-plan-chip-scope .ui-hover-card-trigger {
    display: inline-flex;
    border-radius: 6px;
    outline: none;
}

.assistant-plan-chip {
    --ui-button-animated-border-color: var(--shell-accent, #5e6ad2);
    --ui-button-animated-border-speed: 1.4s;
    --ui-button-animated-border-surface: var(--assistant-composer-bg, var(--assistant-panel-raised-bg));
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px 0 5px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: var(--assistant-composer-bg, var(--assistant-panel-raised-bg));
    color: var(--assistant-panel-soft);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: default;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.assistant-plan-chip .shell-icon {
    flex: 0 0 auto;
    color: var(--assistant-panel-muted);
}

.assistant-plan-chip-scope .ui-hover-card-trigger:hover .assistant-plan-chip,
.assistant-plan-chip-scope .ui-hover-card-trigger:focus-visible .assistant-plan-chip {
    --ui-button-animated-border-surface: var(--assistant-panel-hover-bg);
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
}

.assistant-plan-chip--complete {
    color: var(--assistant-panel-muted);
}

.assistant-plan-chip--complete .shell-icon {
    color: var(--shell-success, var(--assistant-panel-muted));
}

.assistant-plan-card {
    width: max-content;
    min-width: 200px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 4px 0 6px;
}

.assistant-plan-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px 4px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.assistant-plan-card__progress {
    font-variant-numeric: tabular-nums;
}

.assistant-plan-card__steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 6px;
    list-style: none;
}

.assistant-plan-card__step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    color: var(--assistant-panel-text);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.assistant-plan-card__step .shell-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--assistant-panel-muted);
}

.assistant-plan-card__step--done {
    color: var(--assistant-panel-muted);
}

.assistant-plan-card__step--done .shell-icon {
    color: var(--shell-success, var(--assistant-panel-muted));
}

.assistant-plan-card__step--done .assistant-plan-card__step-text {
    text-decoration: line-through;
}

.assistant-plan-card__step--active .shell-icon {
    color: var(--shell-accent, #5e6ad2);
}

.assistant-plan-card__step--cancelled {
    color: var(--assistant-panel-muted);
}

.assistant-plan-card__step--cancelled .assistant-plan-card__step-text {
    text-decoration: line-through;
}

.assistant-composer__editor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    min-height: calc(var(--message-composer-min-editor-height, 20.796875px) + 4px);
    padding: 2px 6px;
    border-radius: 0;
}

.assistant-composer__action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-top: 8px;
    padding: 0 6px 0 2px;
    border-radius: 0;
}

/* With attachments off (agent session pop-out) the send/stop group is the row's only child;
   Linear keeps it at the right edge. */
.assistant-composer__action-row > :only-child {
    margin-left: auto;
}

.assistant-composer__editor {
    display: block;
    width: auto;
    flex: 1 1 92px;
    min-width: 92px;
    min-height: var(--message-composer-min-editor-height, 20.796875px);
    max-height: 96px;
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    overflow: auto;
    background: transparent;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    scrollbar-width: none;
}

.assistant-composer__editor--rich {
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.assistant-composer__editor--rich p,
.assistant-composer__editor--rich div,
.assistant-composer__editor--rich ul,
.assistant-composer__editor--rich ol,
.assistant-composer__editor--rich li,
.assistant-composer__editor--rich pre {
    margin-block: 0;
}

.assistant-composer__editor--rich ul,
.assistant-composer__editor--rich ol {
    padding-inline-start: 18px;
}

.assistant-composer__editor--rich li {
    padding-inline-start: 2px;
}

.assistant-composer__editor--rich pre {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    white-space: pre-wrap;
}

.assistant-composer__editor--rich[data-empty]::before {
    content: attr(data-placeholder);
    color: var(--assistant-panel-muted);
    pointer-events: none;
}

.assistant-composer__editor::-webkit-scrollbar {
    display: none;
}

.assistant-composer__editor::placeholder {
    color: var(--assistant-panel-muted);
    opacity: 1;
}

.assistant-composer__skills {
    display: inline-flex;
    align-items: center;
    gap: 5.5px;
    height: 24px;
    padding: 0 6px 0 4px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.assistant-composer__skills:hover,
.assistant-composer__skills:focus-visible {
    color: var(--assistant-panel-text);
}

.message-composer__slash-menu {
    position: absolute;
    z-index: 775;
    bottom: calc(100% - 4px);
    left: 6px;
    width: 226px;
    max-height: min(360px, calc(100vh - 160px));
    overflow: hidden;
    padding: 4px 0;
    border: 0.5px solid var(--shell-menu-border, var(--settings-card-border, var(--assistant-panel-border)));
    border-radius: 10px;
    background: var(--shell-menu-bg, var(--settings-card-bg, var(--assistant-panel-bg)));
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    box-shadow:
        0 6px 18px 0 color-mix(in srgb, black 4%, transparent),
        0 3px 9px 0 color-mix(in srgb, black 4%, transparent),
        0 1px 1px 0 color-mix(in srgb, black 4%, transparent);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 19.5px;
}

.message-composer__slash-title {
    display: flex;
    min-height: 28px;
    align-items: center;
    padding: 0 14px 2px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 19.5px;
}

.message-composer__slash-query {
    display: flex;
    min-height: 34px;
    align-items: center;
    padding: 0 14px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
}

.message-composer__slash-query > span {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    min-height: 27.5px;
    align-items: center;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-composer__slash-list {
    max-height: 276px;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
}

.message-composer__slash-list::-webkit-scrollbar {
    display: none;
}

.message-composer__slash-item {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border: 0;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: default;
}

.message-composer__slash-divider {
    position: relative;
    height: 10.5px;
}

.message-composer__slash-divider::before {
    position: absolute;
    right: 0;
    left: 0;
    top: 5px;
    height: 0.5px;
    background: var(--shell-menu-divider, var(--shell-menu-border, var(--assistant-panel-border)));
    content: "";
}

.message-composer__slash-item:hover,
.message-composer__slash-item:focus-visible {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
    outline: none;
}

.message-composer__slash-item-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.message-composer__slash-item-main .shell-icon {
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
}

.message-composer__slash-shortcut {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.8125rem;
    white-space: nowrap;
}

.message-composer__slash-empty {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
}

.message-composer__slash-dismiss {
    padding: 0;
    border: 0;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    background: transparent;
    font: inherit;
    cursor: default;
}

.message-composer__slash-dismiss:hover,
.message-composer__slash-dismiss:focus-visible {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    outline: none;
}

.assistant-composer__editor-host {
    display: block;
    width: auto;
    flex: 1 1 92px;
    min-width: 92px;
    min-height: var(--message-composer-min-editor-height, 20.796875px);
}

.message-composer--fluid .assistant-composer__editor-host {
    box-sizing: border-box;
}

.assistant-composer__editor-host .assistant-composer__editor {
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

.assistant-composer__editor.ProseMirror {
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.assistant-composer__editor p,
.assistant-composer__editor div,
.assistant-composer__editor ul,
.assistant-composer__editor ol,
.assistant-composer__editor li,
.assistant-composer__editor pre {
    margin-block: 0;
}

.assistant-composer__editor ul,
.assistant-composer__editor ol {
    padding-inline-start: 18px;
}

.assistant-composer__editor li {
    padding-inline-start: 2px;
}

.assistant-composer__editor pre {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    white-space: pre-wrap;
}

.assistant-composer__editor .assistant-composer__editor--empty::before,
.assistant-composer__editor.assistant-composer__editor--empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--assistant-placeholder-color, var(--assistant-panel-muted));
    pointer-events: none;
}

/* Transcript mention pills share the rich-text pill; as anchors they navigate in place. */
a.ui-form__rich-text-mention,
a.ui-form__rich-text-mention:hover {
    text-decoration: none;
    cursor: pointer;
}

a.ui-form__rich-text-mention:hover,
a.ui-form__rich-text-mention:focus-visible {
    background: var(--shell-menu-item-active, var(--shell-menu-item-hover, var(--settings-control-hover-bg)));
    outline: none;
}

.assistant-composer__editor-mention {
    color: var(--accent-strong, var(--assistant-panel-text));
    font-weight: 500;
}

.message-composer__slash-menu--floating {
    position: fixed;
    left: auto;
    bottom: auto;
}

.message-composer__slash-item--active {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
}

.message-composer__slash-icon {
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.75rem;
    line-height: 1;
}

.message-composer__slash-icon img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.message-composer__slash-copy {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.message-composer__slash-label,
.message-composer__slash-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-composer__slash-description {
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.75rem;
    line-height: 16px;
}

.anchored-dropdown-menu--assistant-skills > .shell-dropdown-menu {
    top: 28px;
    left: 0;
    width: 320px;
    border-color: var(--assistant-panel-border, var(--shell-menu-border));
    background: var(--shell-menu-bg);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__inner {
    background: var(--shell-menu-bg);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-row {
    min-height: 42px;
    padding: 3px 8px 2px 12px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-form {
    height: 34px;
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-input {
    height: 34px;
    padding: 8px 0;
    color: var(--shell-menu-text-strong);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-input::placeholder {
    color: var(--shell-menu-hint);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__list {
    padding: 6px 0;
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__item {
    min-height: 36px;
}

.assistant-composer__actions-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assistant-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0.5px solid transparent;
    border-radius: 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-composer__send--idle,
.assistant-composer__send--loading {
    border-color: var(--assistant-composer-border, transparent);
    background: var(--assistant-composer-button-bg, var(--shell-bg-button));
    color: var(--assistant-composer-icon, var(--shell-text-tertiary));
}

.assistant-composer__send--ready {
    background: var(--shell-accent, #5e6ad2);
    color: white;
}

.assistant-composer__send--ready:hover,
.assistant-composer__send--ready:focus-visible {
    filter: brightness(1.05);
}

.assistant-composer__send--loading {
    opacity: 1;
}

.assistant-composer__send--loading:hover,
.assistant-composer__send--loading:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
}

.assistant-panel--maximized .assistant-panel__header {
    padding-right: 10px;
}

.assistant-panel--maximized .assistant-panel__messages {
    padding-right: 12px;
}

.assistant-panel--maximized .assistant-panel__composer-wrap {
    padding: 4px 0 8px;
}

.assistant-panel--maximized .assistant-panel__context-row {
    width: 789px;
}

.assistant-panel--maximized .assistant-composer {
    --assistant-composer-shell-width: 789px;
    --assistant-composer-inner-width: 765px;
    --assistant-composer-editor-width: 753px;
}

.ui-popover-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ui-popover {
    z-index: 1100;
    pointer-events: none;
}

.ui-popover[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.ui-popover--tooltip[popover] {
    width: max-content;
    max-width: calc(100vw - 16px);
}

.ui-popover__offset {
    position: relative;
    padding: 8px 0;
}

.ui-popover--tooltip .ui-popover__offset {
    width: max-content;
    max-width: inherit;
}

.ui-popover__surface {
    max-height: var(--popper-max-height, none);
    overflow: var(--popper-overflow, visible);
    border: 0.5px solid var(--ui-popover-border, var(--shell-menu-border));
    border-radius: 8px;
    background: var(--ui-popover-bg, var(--shell-menu-bg));
    color: var(--ui-popover-text, var(--shell-menu-text));
    box-shadow: var(--ui-popover-shadow, 0 4px 4px -1px lch(0% 0 0 / 0.04), 0 1px 1px 0 lch(0% 0 0 / 0.08));
    opacity: 1;
    transform: scale(1);
    transform-origin: var(--ui-popover-origin, 50% 0);
    animation: ui-popover-enter 120ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
}

.ui-popover--tooltip .ui-popover__surface {
    width: max-content;
    max-width: inherit;
}

.ui-tooltip-trigger {
    max-width: 100%;
}

.ui-tooltip__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: inherit;
    min-height: 27px;
    padding: 5px 8px;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 16.5px;
    white-space: normal;
}

.ui-tooltip__label {
    min-width: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.ui-tooltip__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--ui-tooltip-key-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    background: transparent;
    color: var(--ui-tooltip-key-text, lch(63.582% 1.375 272 / 1));
    font-family: var(--font-regular);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.75rem;
}

@keyframes ui-popover-enter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ui-hover-card-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    outline: none;
}

.ui-hover-card {
    z-index: 1100;
    pointer-events: none;
}

.ui-hover-card[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.ui-hover-card__surface {
    box-sizing: border-box;
    min-width: var(--ui-hover-card-min-width, 0);
    max-width: var(--ui-hover-card-max-width, 20rem);
    width: max-content;
    padding: 12px;
    border: 0.5px solid var(--shell-hover-card-border, var(--shell-menu-border, lch(22.88% 1.83 272 / 1)));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    box-shadow: var(--shell-menu-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    transform-origin: var(--ui-hover-card-origin, top left);
    animation: ui-hover-card-enter 120ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
}
[data-app-theme="light"] .ui-hover-card__surface,
[data-app-theme="pure-light"] .ui-hover-card__surface {
    --shell-hover-card-border: lch(0 0 0 / 0.06);
    box-shadow: lch(0 0 0 / 0.08) 0 4px 12px 0, lch(0 0 0 / 0.04) 0 1px 3px 0;
}


/* Generic, content-agnostic layout helpers consumers can opt into for card content. */
.ui-hover-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ui-hover-card__heading {
    min-width: 0;
}

.ui-hover-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--shell-menu-text-strong, var(--shell-menu-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-hover-card__subtitle {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--shell-menu-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-hover-card__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.ui-hover-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--shell-menu-text);
}

.ui-hover-card__row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-hint);
}

.ui-hover-card__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.ui-hover-card__identifier {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--shell-menu-hint);
}

.ui-hover-card__divider {
    height: 0.5px;
    margin: 10px -12px;
    background: var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
}

.ui-hover-card__row-value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--shell-menu-hint);
}

.ui-hover-card__row-value--strong {
    color: var(--shell-menu-text);
}

.ui-hover-card__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--ui-hover-card-status, lch(68% 52 145));
}

@keyframes ui-hover-card-enter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-hover-card__surface {
        animation: none;
    }
}

.shell-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 540;
    cursor: default;
}

.anchored-dropdown-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 640;
    background: transparent;
    cursor: default;
}

.anchored-dropdown-menu {
    position: absolute;
    z-index: 650;
}

.anchored-dropdown-menu[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.anchored-dropdown-menu--context {
    position: fixed;
}

.anchored-dropdown-menu > .shell-dropdown-menu {
    top: 0;
    left: 0;
}

.anchored-dropdown-menu--context > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    min-width: 232px;
    width: max-content;
    max-width: min(92vw, 380px);
    transform: none;
    outline: none;
}

.anchored-dropdown-menu--context > .shell-dropdown-menu .shell-dropdown-menu__list {
    padding: 6px 0;
}

.anchored-dropdown-menu--below-end > .shell-dropdown-menu,
.anchored-dropdown-menu--board-header > .shell-dropdown-menu,
.anchored-dropdown-menu--grid-list-group > .shell-dropdown-menu,
.anchored-dropdown-menu--grid-list-row > .shell-dropdown-menu {
    top: 32px;
    left: 0;
    right: auto;
}

/* Below the anchor with the panel's RIGHT edge on the anchor's right edge — opens inward
   (leftward) so row menus stay inside their card instead of spilling past it. */
.anchored-dropdown-menu--below-align-end > .shell-dropdown-menu {
    top: 32px;
    left: auto;
    right: 0;
}

.anchored-dropdown-menu--card > .shell-dropdown-menu {
    top: 30px;
    left: 0;
    right: auto;
}

.anchored-dropdown-menu--context.anchored-dropdown-menu > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    transform: none;
    outline: none;
}

.shell-dropdown-menu {
    position: absolute;
    top: 32px;
    left: 0;
    /* Content-sized: a gentle 150px floor, then the panel grows to fit its widest row so
       labels never ellipsize AND narrow submenus never balloon to a fixed width (the caller's
       inline PanelWidth still overrides as its own minimum). */
    min-width: 150px;
    width: max-content;
    max-width: min(92vw, 420px);
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    overflow: visible;
    transform: scale(0.98);
    transform-origin: top left;
    z-index: 620;
}

.shell-dropdown-menu:focus {
    outline: none;
}

.shell-dropdown-menu__inner {
    overflow: visible;
    border-radius: 12px;
    background: var(--shell-menu-bg);
}

.shell-dropdown-menu__search-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px 0 14px;
    /* Measured Linear (pixel-sampled at 2x): a single device-pixel hairline of rgb(232,232,232)
       on the white panel — i.e. ~9% of the text tone over the surface, one step SOFTER than the
       menu group divider. The text-tier mix keeps the same relationship in dark. */
    border-bottom: 0.5px solid var(--shell-menu-search-divider, color-mix(in srgb, var(--shell-text-primary) 9%, transparent));
}

.shell-dropdown-menu__search-form {
    position: relative;
    display: grid;
    align-items: center;
    /* No column-gap: an unused trailing track's gap pushed the hotkey chip 8px off the
       corner (Linear: chip sits 13px from the panel's right edge). Spacing lives on the
       children instead. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    height: 35px;
    overflow: hidden;
}

.shell-dropdown-menu__search-form > .shell-dropdown-menu__header-action {
    margin-left: 8px;
}

.shell-dropdown-menu__search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.shell-dropdown-menu__search-input {
    min-width: 0;
    height: 35px;
    padding: 10px 0 9px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.shell-dropdown-menu__search-input::placeholder {
    color: var(--shell-menu-text);
    opacity: 1;
}

.shell-dropdown-menu__shortcut-strip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-left: 12px;
}

.shell-dropdown-menu__shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 4px;
    background: transparent;
    color: var(--shell-menu-hint);
    font-family: var(--font-regular);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.shell-dropdown-menu__header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 0 7px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-dropdown-menu__header-action:hover,
.shell-dropdown-menu__header-action:focus-visible {
    color: var(--shell-menu-text-strong);
    background: var(--shell-menu-item-hover);
    outline: none;
}

.shell-dropdown-menu__list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: transparent;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__list {
    max-height: min(320px, calc(100vh - 120px));
    padding: 6px 0 4px;
    overflow: auto;
    scrollbar-width: none;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__list::-webkit-scrollbar {
    display: none;
}

.shell-dropdown-menu__empty {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-dropdown-menu__row {
    position: relative;
    margin: 0;
}

/* Caller-owned per-row hover cards (Linear-style label/user/project popovers). Cards live
   in a panel-level container OUTSIDE the scrollable list — Chromium clips hit-testing (not
   paint) of content escaping the list's overflow, so in-row cards render but never hover.
   A delegated client-side listener (anchored-dropdown.js) sets top and toggles --open;
   show delay and hide grace live in these transitions. */
.shell-dropdown-menu__cards {
    display: contents;
}

.shell-dropdown-menu__hover-card {
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    z-index: 640;
    min-width: 260px;
    max-width: 340px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    /* Informational only: never a pointer target, never swallows clicks. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 0s linear;
    transition-delay: 350ms;
}

.shell-dropdown-menu__hover-card--open {
    opacity: 1;
    visibility: visible;
    transition-delay: 500ms;
}


/* Gap bridge for diagonal pointer travel into the submenu. Only exists while the row is
   hovered (the bridge is a row descendant, so the pointer moving onto it sustains :hover),
   bridge-held, or its submenu is open — an always-on bridge overhangs the last row by 14px
   and gives the list a sliver of scrollable dead space. */
.shell-dropdown-menu__row--has-children:hover::after,
.shell-dropdown-menu__row--has-children.shell-dropdown-menu__row--hovered::after,
.shell-dropdown-menu__row--has-children.shell-dropdown-menu__row--bridge-hold::after,
.shell-dropdown-menu__row--has-children.shell-dropdown-menu__row--submenu-open::after {
    content: "";
    position: absolute;
    top: -14px;
    bottom: -14px;
    left: 100%;
    width: 12px;
}

.shell-dropdown-menu__row--group-start {
    margin-top: 12px;
}

.shell-dropdown-menu__row--group-start::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 0.5px;
    background: var(--shell-menu-divider);
    pointer-events: none;
}

.shell-dropdown-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    text-align: left;
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    background: transparent;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-dropdown-menu__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
    z-index: 0;
}

.shell-dropdown-menu__item > * {
    position: relative;
    z-index: 1;
}

.shell-dropdown-menu__item--current {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item--checkbox {
    padding-left: 13px;
}

.shell-dropdown-menu__item--selection {
    font-weight: 400;
}

.shell-dropdown-menu__item--color-default {
    color: var(--shell-menu-text);
}

.shell-dropdown-menu__item--color-strong {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item--color-danger {
    color: var(--shell-menu-text-danger);
}

.shell-dropdown-menu__item--color-danger .shell-dropdown-menu__icon {
    color: var(--shell-menu-text-danger);
}

.shell-dropdown-menu__item:hover,
.shell-dropdown-menu__item:focus-visible,
.shell-dropdown-menu__item--hovered,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item:hover::before,
.shell-dropdown-menu__item:focus-visible::before,
.shell-dropdown-menu__item--hovered::before,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item::before,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item::before {
    background: var(--shell-menu-item-hover);
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item::before {
    display: none;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item:hover,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item:focus-visible,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item--hovered,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__row:hover > .shell-dropdown-menu__item,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item {
    background: var(--shell-menu-item-hover);
}

.shell-dropdown-menu__item:hover.shell-dropdown-menu__item--current,
.shell-dropdown-menu__item:focus-visible.shell-dropdown-menu__item--current,
.shell-dropdown-menu__item--hovered.shell-dropdown-menu__item--current,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item--current,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item--current {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline secondary text after the label (measured: Linear's due-picker remove row puts the
   current date 8px after the label, extra-muted, left-packed — NOT right-anchored like meta,
   so the label keeps its natural width and never ellipsizes against it). */
.shell-dropdown-menu__label:has(+ .shell-dropdown-menu__label-suffix) {
    /* Never ellipsize the label against its suffix — the suffix is the flexible part. */
    flex: 0 0 auto;
}

.shell-dropdown-menu__label-suffix {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--shell-menu-hint-muted, var(--shell-menu-hint));
}

.shell-dropdown-menu__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 16px;
}

.shell-dropdown-menu__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 3px;
    color: lch(100% 5 288.421 / 1);
    background: transparent;
    flex: 0 0 auto;
}

.shell-dropdown-menu__checkbox--interactive {
    cursor: pointer;
}

.shell-dropdown-menu__checkbox--interactive:hover {
    border-color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
}

.shell-dropdown-menu__checkbox svg {
    width: 10px;
    height: 10px;
}

.shell-dropdown-menu__checkbox--selected {
    border-color: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    background: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
}

.shell-dropdown-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: lch(63.582% 1.375 272 / 1);
    flex: 0 0 auto;
}

.shell-dropdown-menu__avatar,
.shell-dropdown-menu__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 8px;
}

.shell-dropdown-menu__avatar {
    width: 16px;
    height: 16px;
    overflow: hidden;
    border-radius: 9999px;
    /* Defer to the Avatar palette (per-user seeded backgrounds) when present. */
    background: var(--ui-avatar-bg, color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active)));
    /* Initials are always white on the seeded colour, both themes (Linear). */
    color: var(--ui-avatar-text, lch(100% 0 0));
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
    object-fit: cover;
}

.shell-dropdown-menu__swatch {
    width: 9px;
    height: 9px;
    margin-right: 11px;
    border-radius: 9999px;
}

.shell-dropdown-menu__trailing {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    color: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
}

.shell-dropdown-menu__meta {
    color: var(--shell-menu-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-dropdown-menu__section-label {
    display: block;
    padding: 9px 14px 4px;
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.shell-dropdown-menu__item--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.shell-dropdown-menu__selected-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-text);
}

.shell-dropdown-menu__hint {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.shell-dropdown-menu__key,
.shell-dropdown-menu__hint-text,
.shell-dropdown-menu__indicator {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-regular);
    font-style: normal;
}

.shell-dropdown-menu__key {
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.75625rem;
}

.shell-dropdown-menu__key + .shell-dropdown-menu__key {
    margin-left: 3px;
}

.shell-dropdown-menu__hint-text {
    margin: 0 4px;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
}

.shell-dropdown-menu__indicator {
    margin-left: 6px;
    color: var(--shell-menu-indicator);
    font-size: 6px;
    font-weight: 450;
    line-height: 1;
}

/* Agent mark avatar (Linear's built-in "Linear" agent / external app agents): circular, the
   product mark centred in a ring at 14/16/18px. Sits in the same slot as a person avatar. */
.ui-agent-avatar {
    display: inline-grid;
    place-items: center;
    width: var(--ui-agent-avatar-size, 16px);
    height: var(--ui-agent-avatar-size, 16px);
    flex: 0 0 var(--ui-agent-avatar-size, 16px);
    border-radius: 9999px;
    background: var(--ui-agent-avatar-bg, var(--shell-menu-item-hover, var(--settings-control-hover-bg)));
    color: var(--ui-agent-avatar-text, var(--shell-text-primary));
    overflow: hidden;
    vertical-align: middle;
}

.ui-agent-avatar__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.ui-agent-avatar__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Menu row anatomy for agent rows: tree elbow under the previous row, trailing badge, and the
   30px group header ("Team members", "New user"). Measured from Linear's assignee picker. */
.shell-dropdown-menu__elbow {
    position: relative;
    display: block;
    width: 10px;
    height: 9px;
    margin-right: 4px;
    flex: 0 0 10px;
    background: var(--detail-sidebar-connector, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpath d='M0 0h1v1c0 2.5 2.212 3.546 2.212 3.546L9.737 8.06c.568.306.094 1.186-.474.88l-6.48-3.488S0 4 0 1V0Z'/%3E%3C/svg%3E") no-repeat;
}

.shell-dropdown-menu__row--nested .shell-dropdown-menu__item::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 14px;
    width: 1px;
    height: 20px;
    background: var(--detail-sidebar-connector, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
    pointer-events: none;
}

.shell-dropdown-menu__badge {
    display: inline-flex;
    align-items: center;
    height: 16px;
    margin-left: 4px;
    padding: 0 6px;
    box-sizing: border-box;
    border: 0.5px solid var(--shell-border);
    border-radius: 6px;
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.shell-dropdown-menu__group-header {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 8px 14px;
    box-sizing: border-box;
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.shell-dropdown-menu__submenu-arrow {
    display: block;
    width: 16px;
    height: 7.5px;
    color: lch(39.91% 1.375 272 / 1);
    font-size: 6px;
    font-weight: 450;
    line-height: 7.5px;
    text-align: center;
}

/* Two-line rows (a profile's name + description): the label stacks over a muted 12px line,
   the row grows to 44px (6px vertical padding), both lines truncate. */
.shell-dropdown-menu__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shell-dropdown-menu__text .shell-dropdown-menu__label {
    flex: 0 0 auto;
}

.shell-dropdown-menu__description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.shell-dropdown-menu__item--has-description {
    padding-top: 6px;
    padding-bottom: 6px;
}

.shell-dropdown-menu__item--has-description .shell-dropdown-menu__content {
    height: auto;
}

/* Selectable parent rows: the chevron is its own hit target (the row selects). */
.shell-dropdown-menu__submenu-arrow--interactive {
    box-sizing: content-box;
    padding: 6px 4px;
    margin: -6px -4px;
    border-radius: 4px;
    cursor: default;
}

.shell-dropdown-menu__submenu-arrow--interactive:hover {
    background: var(--shell-bg-hover, var(--shell-bg-active));
    color: var(--shell-menu-text);
}

.shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]) {
    /* Parked offscreen while hidden: an absolutely-positioned panel anchored below its row
       still counts toward the parent list's scrollable overflow even at visibility:hidden,
       which let the list scroll into dead space past its last item. Fixed + offscreen keeps
       it out of every scroll container; positionVisibleSubmenus assigns real fixed
       coordinates within one poll tick of it becoming visible. */
    position: fixed;
    top: 0;
    left: -10000px;
    /* visibility:hidden blocks hit-testing when closed; the 300ms hide grace keeps the panel
       visible AND hoverable, so a diagonal crossing that briefly leaves the row/bridge can
       still land on it (hovering the panel re-hovers its parent row — it is a descendant).
       No pointer-events:none here: it is not transitionable and would defeat the grace. */
    opacity: 0;
    visibility: hidden;
    transform: none;
    outline: none;
    transition: opacity 0s linear, visibility 0s linear;
    transition-delay: 300ms;
}
/* Browsing rows must feel instant: when the pointer is on ANY other row, the previous
   submenu hides immediately. The hide grace above exists only for gap/bridge crossings
   (no row hovered) — never for row-to-row browsing. */
.shell-dropdown-menu__list:has(> .shell-dropdown-menu__row:hover) > .shell-dropdown-menu__row--has-children:not(:hover):not(.shell-dropdown-menu__row--bridge-hold) > .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]) {
    transition-delay: 0s;
}


/* Hover-driven opens get a small intent delay: a pointer clipping a sibling parent row
   mid-crossing (before the JS bridge can cover it) never commits that row's submenu. */
.shell-dropdown-menu__row--has-children:hover > .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]),
.shell-dropdown-menu__item--has-children:hover + .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]) {
    opacity: 1;
    visibility: visible;
    z-index: 630;
    transition-delay: 50ms;
}

/* Server/keyboard opens stay instant. */
.shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]).shell-dropdown-menu--visible,
.shell-dropdown-menu__row--hovered > .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]),
.shell-dropdown-menu__row--bridge-hold > .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]),
.shell-dropdown-menu__row--submenu-open > .shell-dropdown-menu[data-menu-level]:not([data-menu-level="0"]) {
    opacity: 1;
    visibility: visible;
    z-index: 630;
    transition-delay: 0s;
}

.shell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-icon-size, 14px);
    height: var(--shell-icon-size, 14px);
    min-width: var(--shell-icon-size, 14px);
    max-width: var(--shell-icon-size, 14px);
    min-height: var(--shell-icon-size, 14px);
    max-height: var(--shell-icon-size, 14px);
    flex: 0 0 var(--shell-icon-size, 14px);
    overflow: hidden;
    color: currentColor;
}

.shell-icon--fontawesome {
    overflow: visible;
}

.shell-icon svg,
.shell-icon i {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
}

.shell-icon i {
    font-size: var(--shell-icon-size, 14px);
    line-height: var(--shell-icon-size, 14px);
    text-align: center;
}

.shell-icon--fontawesome i {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    line-height: 1;
    overflow: visible;
}

.shell-icon--14 {
    width: 14px;
    height: 14px;
}

.shell-icon--13 {
    width: 13px;
    height: 13px;
}

.shell-icon--12 {
    width: 12px;
    height: 12px;
}

.shell-icon--8 {
    width: 8px;
    height: 8px;
}

.shell-icon--9 {
    width: 9px;
    height: 9px;
}

.shell-icon--16 {
    width: 16px;
    height: 16px;
}

.shell-icon--18 {
    width: 18px;
    height: 18px;
}

.shell-icon--20 {
    width: 20px;
    height: 20px;
}

.shell-icon--24 {
    width: 24px;
    height: 24px;
}

.shell-icon--28 {
    width: 28px;
    height: 28px;
}

.settings-select {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.settings-select--full {
    display: flex;
    width: 100%;
}

.settings-select--open {
    z-index: 670;
}

.settings-select__scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.settings-select__trigger {
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    max-width: 100%;
    height: 30px;
    margin: 1px 0;
    padding: 1px 28px 1px 10px;
    overflow: hidden;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border, lch(22.79% 1.83 272)));
    border-radius: 8px;
    background-color: var(--settings-control-bg, lch(13.841% 0.943 272));
    box-shadow: none;
    color: var(--settings-control-text, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition-duration: 0.15s;
    transition-property: background-color, border-color, color, box-shadow;
}

.settings-select--full .settings-select__trigger {
    width: 100%;
}

.settings-select__trigger:hover:not(:disabled),
.settings-select__trigger:focus-visible {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272)));
    outline: none;
    transition-duration: 0s;
}

.settings-select--with-leading .settings-select__trigger {
    padding-left: 5px;
}

.settings-select__trigger-content {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    gap: 8px;
    pointer-events: none;
}

.settings-select__trigger-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-select__chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    width: 10px;
    height: 5px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    transform: translateY(-50%);
    pointer-events: none;
}

.settings-select__chevron .shell-icon,
.settings-select__chevron svg {
    width: 10px;
    height: 5px;
}

.settings-select__panel {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    z-index: 670;
    display: flex;
    box-sizing: border-box;
    margin: 0;
    min-width: calc(var(--settings-select-anchor-width, 0px) + 13.3px);
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 0.5px solid var(--settings-select-panel-border, lch(18.47% 1.83 272));
    border-radius: 12px;
    background: var(--settings-select-menu-bg, var(--settings-select-panel-bg, lch(13.07% 1.2 272)));
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--settings-control-text, rgb(255, 255, 255));
}

function sizeOf(element, fallbackWidth, fallbackHeight) {
    // offsetWidth/offsetHeight are layout metrics, immune to the open animation's scale
    // (rect-based sizes read ~5% small mid-animation and skew placement).
    return {
        width: element?.offsetWidth || fallbackWidth,
        height: element?.offsetHeight || fallbackHeight
    };
}

.shell-sidebar__footer .settings-select__panel {
    bottom: auto;
}

.settings-select__viewport {
    width: 100%;
    padding: 4px 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.settings-select__viewport::-webkit-scrollbar {
    display: none;
}

.settings-select__section-label {
    box-sizing: border-box;
    max-width: 100%;
    height: 27px;
    margin-top: 10px;
    padding: 8px 25px 6px 12px;
    overflow: hidden;
    color: var(--shell-text-secondary, lch(64.855% 1.6 272));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-select__option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 35px 0 12px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, lch(91.214% 1.6 272));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.settings-select__option-preview {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 33.5px;
    height: 21px;
    margin-right: 6px;
    padding: 2px 4px;
    border: 0.5px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 8px;
    background: var(--app-theme-chip-bg, rgb(15, 15, 16));
    color: var(--app-theme-chip-color, rgb(226, 227, 229));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
}

.settings-select__trigger-preview {
    flex: 0 0 auto;
    margin-right: 0;
}

.settings-select__option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background-color: transparent;
}

.settings-select__option:hover::before,
.settings-select__option:focus-visible::before {
    background-color: var(--settings-control-hover-bg, lch(18.47% 1.2 272));
}

.settings-select__option:focus-visible {
    outline: none;
}

.settings-select__option-label {
    position: relative;
    z-index: 1;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-select__check {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 25px;
    height: 16px;
    color: var(--shell-text-secondary, lch(64.855% 1.6 272));
    transform: translateY(-50%);
}

.settings-select__check svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Compact variant: menu-embedded control (Linear display-options panel geometry) —
   24px flat borderless trigger, 12px/400 text, 24px option rows. */
/* Raised pill variant (measured on Linear's insights selects): default metrics with a
   borderless r8 pill on the surface-button tier, the raised shadow, 500-weight label and
   the chevron pushed to the pill's far edge. */
.settings-select--raised .settings-select__trigger {
    justify-content: space-between;
    border-color: transparent;
    border-radius: 8px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    /* Linear's universal raised-control skin (shared token with the raised buttons). */
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
    font-weight: 500;
}

/* Raised hover is a fill shift plus a ring lift to the selected alpha — never the
   bordered-control border (measured per theme on Linear's pills). */
.settings-select--raised .settings-select__trigger:hover:not(:disabled),
.settings-select--raised .settings-select__trigger:focus-visible {
    border-color: transparent;
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--shell-control-raised-shadow, none));
}

.settings-select--compact .settings-select__trigger {
    height: 24px;
    margin: 0;
    padding: 1px 18px 1px 8px;
    border-color: transparent;
    border-radius: 8px;
    background-color: var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1));
    box-shadow: var(--display-opt-control-shadow, lch(100% 0 0 / 0.174) 0px 0px 0px 0.5px, lch(0% 0 0 / 0.3) 0px 0.5px 1px 1px);
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.75rem;
}

.settings-select--compact .settings-select__trigger:hover:not(:disabled),
.settings-select--compact .settings-select__trigger:focus-visible {
    border-color: transparent;
    background-color: var(--shell-control-raised-hover-bg, var(--display-opt-control-bg, lch(25.2% 7.5 282.863 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--display-opt-control-shadow, none));
}

.settings-select--compact .settings-select__trigger-content {
    gap: 6px;
}

.settings-select--compact .settings-select__trigger-label {
    font-size: 0.75rem;
    line-height: normal;
}

.settings-select--compact .settings-select__chevron {
    right: 7px;
    width: 10px;
    height: 5px;
}

.settings-select--compact .settings-select__panel {
    min-width: calc(var(--settings-select-anchor-width, 0px) + 19.3px);
}

.settings-select--compact .settings-select__section-label {
    height: 24px;
    margin-top: 8px;
    padding: 6px 25px 4px 12px;
}

.settings-select--compact .settings-select__option {
    height: 24px;
    padding: 0 35px 0 12px;
    font-size: 0.75rem;
}

.settings-select--compact .settings-select__option::before {
    inset: 0;
    border-radius: 0;
}

.settings-select--compact .settings-select__option-label {
    font-size: 0.75rem;
    line-height: normal;
}

.settings-select--compact .settings-select__check {
    right: 12px;
    width: 16px;
}

.settings-select--compact .settings-select__check svg {
    width: 14px;
    height: 14px;
}

.settings-select__divider {
    height: 0;
    margin: 4px 0;
    border-top: 0.5px solid var(--display-opt-divider, var(--shell-menu-divider, lch(25.871% 8.268 282.863 / 1)));
}

.settings-select--compact .settings-select__divider {
    margin: 11.75px 0;
}

.selection-dropdown {
    display: inline-flex;
    position: relative;
}

.selection-dropdown--open {
    z-index: 6;
}

.selection-dropdown__scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: transparent;
    cursor: default;
}

/* Opt-in Linear property-pill trigger (SelectionDropdown TriggerVariant.RaisedPill).
   Measured off the live inline composer: 24px full-radius pill, 12/500 secondary text,
   6px icon gap, 0 8px 0 6px padding, raised button fill; hover one step toward the text. */
.selection-dropdown__trigger--raised-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-shadow, lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0);
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
}

.selection-dropdown__trigger--raised-pill:hover,
.selection-dropdown__trigger--raised-pill:focus-visible {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    outline: none;
}

[data-app-theme="light"] .selection-dropdown__trigger--raised-pill:hover,
[data-app-theme="light"] .selection-dropdown__trigger--raised-pill:focus-visible,
[data-app-theme="pure-light"] .selection-dropdown__trigger--raised-pill:hover,
[data-app-theme="pure-light"] .selection-dropdown__trigger--raised-pill:focus-visible {
    background: lch(95.9% 0.16 282 / 1);
}

.selection-dropdown__trigger-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Opt-in Linear hover: pill background on the trigger while the group is hovered. */
.selection-dropdown__trigger-group--hover > button:first-child {
    border-radius: 9999px;
    transition: background-color 120ms ease-out;
}

.selection-dropdown__trigger-group--hover:hover > button:first-child,
.selection-dropdown__trigger-group--hover > button:first-child:focus-visible {
    background: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
}

/* Side buttons (view chevron / clear x): 28px circles revealed on group hover. */
.selection-dropdown__side-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
    color: var(--shell-text-secondary);
    opacity: 0;
    cursor: pointer;
    transition: opacity 100ms ease-out, color 120ms ease-out;
}

.selection-dropdown__trigger-group:hover .selection-dropdown__side-button,
.selection-dropdown__side-button:focus-visible {
    opacity: 1;
}

.selection-dropdown__side-button:hover,
.selection-dropdown__side-button:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.selection-dropdown__anchor {
    display: inline-flex;
    position: relative;
    z-index: 1;
}

.selection-dropdown__panel {
    --selection-dropdown-width: 204px;
    --selection-dropdown-max-height: min(360px, calc(100vh - 16px));
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 620;
    display: flex;
    flex-direction: column;
    width: var(--selection-dropdown-width);
    max-height: var(--selection-dropdown-max-height);
    margin: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text);
    overflow: hidden;
    animation: selection-dropdown-in 150ms ease forwards;
    transform-origin: top left;
}

.selection-dropdown__panel:popover-open {
    display: flex;
}

.selection-dropdown__panel--align-end {
    right: auto;
}

.selection-dropdown__search-row,
.selection-dropdown__compact-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 12px 0 14px;
}

.selection-dropdown__compact-header {
    justify-content: space-between;
}

.selection-dropdown__header-label {
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.selection-dropdown__search-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 35px;
    padding: 10px 0 9px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.selection-dropdown__search-input::placeholder {
    color: var(--shell-menu-text);
    opacity: 1;
}

.selection-dropdown__search-input--hidden {
    position: absolute;
    top: 0;
    left: -99999px;
    width: 80px;
    padding-inline: 0;
}

.selection-dropdown__shortcut-strip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.selection-dropdown__shortcut-key,
.selection-dropdown__item-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.selection-dropdown__list {
    display: block;
    flex: 0 0 auto;
    gap: 0;
    margin: 0;
    padding: 6px 0 4px;
    list-style: none;
    min-height: 0;
    max-height: var(--selection-dropdown-max-height);
    overflow: auto;
    scrollbar-width: none;
}

/* Provider mode: fixed-height virtualized rows (Virtualize windows the list). */
.selection-dropdown__option--virtual,
.selection-dropdown__option--placeholder {
    box-sizing: border-box;
    height: var(--selection-row-height, 32px);
    min-height: 0;
    overflow: hidden;
}

.selection-dropdown__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.selection-dropdown__retry {
    appearance: none;
    border: 1px solid var(--shell-border-strong, var(--shell-border));
    border-radius: 4px;
    background: transparent;
    padding: 1px 8px;
    color: var(--shell-menu-text);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.selection-dropdown__retry:hover {
    background: var(--shell-bg-hover);
}

.selection-dropdown__list::-webkit-scrollbar {
    display: none;
}

.selection-dropdown__empty,
.selection-dropdown__section-label {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.selection-dropdown__section-label {
    padding-top: 9px;
    padding-bottom: 5px;
    padding-left: calc(14px + var(--selection-dropdown-depth, 0) * 16px);
}

.selection-dropdown__option {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 18px 0 calc(14px + var(--selection-dropdown-depth, 0) * 16px);
    color: var(--shell-menu-text);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.selection-dropdown__option--multiple {
    padding-left: calc(13px + var(--selection-dropdown-depth, 0) * 16px);
}

.selection-dropdown__option--group-start {
    margin-top: 12px;
}

.selection-dropdown__option--active,
.selection-dropdown__option:hover {
    background: var(--shell-menu-item-hover);
}

.selection-dropdown__option--nonselectable {
    color: var(--shell-menu-text);
}

.selection-dropdown__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11.84px;
    height: 11.84px;
    margin-right: 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 3.5px;
    color: var(--shell-menu-text-strong);
    background: transparent;
    flex: 0 0 auto;
}

.selection-dropdown__checkbox svg {
    width: 10px;
    height: 8px;
}

.selection-dropdown__checkbox--selected {
    background: lch(47.918% 59.303 288.421 / 1);
    border-color: lch(47.918% 59.303 288.421 / 1);
}

.selection-dropdown__option-body {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0;
}

.selection-dropdown__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.selection-dropdown__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.selection-dropdown__avatar {
    /* Flex-centred so the Avatar component's initials fallback stays centred; defer to the
       per-user Avatar palette when present (same contract as .shell-dropdown-menu__avatar). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--ui-avatar-bg, transparent);
    color: var(--ui-avatar-text, lch(100% 0 0));
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
}

.selection-dropdown__swatch {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
}

.selection-dropdown__content {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.selection-dropdown__label-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.selection-dropdown__label,
.selection-dropdown__meta,
.selection-dropdown__description {
    font-size: 0.8125rem;
    line-height: 1.21875rem;
}

.selection-dropdown__label {
    color: var(--shell-menu-text);
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-dropdown__meta,
.selection-dropdown__description {
    color: var(--shell-menu-hint);
    font-weight: 400;
    white-space: nowrap;
}

.selection-dropdown__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

.selection-dropdown__check,
.selection-dropdown__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint);
}

/* measured off Linear: 150ms ease, fade + scale from 0.95 */
@keyframes selection-dropdown-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.create-modal {
    display: flex;
    flex-direction: column;
    min-height: var(--app-modal-current-min-height, 260.6953125px);
    color: var(--shell-menu-text);
    transition: min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__header {
    display: flex;
    align-items: center;
    gap: 3.5px;
    min-height: 24px;
    padding: 12px 92px 0 12px;
    transition: padding-top var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__team-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px 0 5px;
    border-radius: 9999px;
    background: var(--shell-menu-item-hover, lch(16.091% 0.943 272 / 1));
    color: var(--shell-menu-text);
    transition: background-color 120ms ease, color 120ms ease;
}

.create-modal__team-pill:hover,
.create-modal__team-pill:focus-visible {
    background: var(--shell-menu-border, lch(18% 1 272 / 1));
    color: var(--shell-menu-text-strong);
}

.create-modal__team-pill-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    color: #ff2fcd;
}

.create-modal__team-pill-composite,
.create-modal__team-pill-provider {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    color: var(--shell-menu-text);
}

.create-modal__team-pill-separator {
    display: inline-flex;
    width: 8px;
    height: 13px;
    color: var(--shell-menu-indicator);
}

.create-modal__team-pill-separator svg {
    width: 8px;
    height: 13px;
}

.create-modal__label {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    color: var(--shell-menu-text);
}

.create-modal__header-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: var(--shell-menu-indicator);
}

.create-modal__header-chevron svg {
    width: 10px;
    height: 10px;
}

.create-modal__editors {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    margin-top: 21px;
    padding: 0 18px;
    transition:
        margin-top var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__title-mirror {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.create-modal__editor {
    position: relative;
    outline: none;
    border: 0;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: var(--shell-text-primary);
}

.create-modal__editor:empty::before {
    content: attr(data-placeholder);
    color: inherit;
}

.create-modal__editor--title {
    height: 24px;
    min-height: 24px;
    color: var(--shell-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.8rem;
    letter-spacing: -0.1px;
}

.create-modal__editor--description {
    flex: 1 1 auto;
    min-height: 79.1953125px;
    padding: 6px 0 12px;
    color: var(--shell-menu-text);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    transition:
        min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__rich-text {
    flex: 1 1 auto;
    color: var(--shell-menu-text);
    transition:
        min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 6px;
    transition: margin-top var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__pill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.create-modal__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px 0 6px;
    border-radius: 9999px;
    background: var(--shell-menu-item-hover, lch(16.091% 0.943 272 / 1));
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.create-modal__pill[aria-expanded="true"],
.create-modal__team-pill[aria-expanded="true"] {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.create-modal__pill:hover,
.create-modal__pill:focus-visible,
.create-modal__attach-button:hover,
.create-modal__attach-button:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.create-modal__pill--icon-only {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.create-modal__pill--more {
    width: 24px;
    box-shadow: var(--shell-shadow);
    color: var(--shell-menu-text);
}

.create-modal__pill-icon,
.create-modal__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.create-modal__pill .selection-dropdown__shortcut-strip,
.create-modal__team-pill .selection-dropdown__shortcut-strip {
    display: none;
}

.create-modal__avatar img {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
}

.create-modal__action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px 12px;
}

.create-modal__attach-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--shell-menu-item-hover, lch(16.091% 0.943 272 / 1));
    color: var(--shell-menu-hint);
    transition: background-color 120ms ease, color 120ms ease;
}

.create-modal__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    margin-left: auto;
    cursor: default;
}

.create-modal__toggle-input {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 72px;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
    cursor: default;
}

.create-modal__toggle-input::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.create-modal__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.create-modal__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.create-modal__toggle-input:checked::after {
    left: 13px;
}

.create-modal__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

.create-modal__toggle-label {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    user-select: none;
    cursor: default;
}

.create-modal__primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92.625px;
    height: 28px;
    margin-left: 0;
    padding: 0 10px;
    border-radius: 9999px;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: filter 120ms ease;
}

.create-modal__primary-action:hover,
.create-modal__primary-action:focus-visible {
    filter: brightness(1.06);
}

.selection-sheet {
    display: flex;
    flex-direction: column;
    color: var(--shell-menu-text);
    overflow: hidden;
}

.selection-sheet__header {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding: 14px 56px 10px 16px;
    box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.selection-sheet__title,
.selection-sheet__message {
    margin: 0;
    letter-spacing: 0;
}

.selection-sheet__title {
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.25rem;
}

.selection-sheet__message {
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.selection-sheet__search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-hint);
    flex: 0 0 auto;
}

.selection-sheet__search-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 35px;
    padding: 8px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.selection-sheet__search-input::placeholder {
    color: var(--shell-menu-hint);
    opacity: 1;
}

.selection-sheet__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: min(408px, calc(100vh - 284px));
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow: auto;
    scrollbar-width: none;
}

/* Provider mode: fixed-height virtualized rows (Virtualize windows the scroller). */
.selection-sheet__list--virtual {
    display: block;
}

.selection-sheet__option--virtual,
.selection-sheet__option--placeholder {
    box-sizing: border-box;
    height: var(--selection-row-height, 32px);
    min-height: 0;
    overflow: hidden;
}

.selection-sheet__state {
    gap: 8px;
}

.selection-sheet__retry {
    appearance: none;
    border: 1px solid var(--shell-border-strong, var(--shell-border));
    border-radius: 4px;
    background: transparent;
    padding: 2px 8px;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.selection-sheet__retry:hover {
    background: var(--shell-bg-hover);
}

.selection-sheet__list::-webkit-scrollbar {
    display: none;
}

.selection-sheet__empty,
.selection-sheet__section-label {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.selection-sheet__section-label {
    padding-top: 9px;
    padding-bottom: 5px;
}

.selection-sheet__option {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    color: var(--shell-menu-text);
    cursor: default;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

.selection-sheet__option--with-description {
    min-height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.selection-sheet__option--group-start {
    margin-top: 8px;
}

.selection-sheet__option--active,
.selection-sheet__option:hover {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.selection-sheet__option--nonselectable {
    color: var(--shell-menu-hint);
}

.selection-sheet__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    margin-right: 10px;
    color: var(--shell-menu-hint);
}

.selection-sheet__icon,
.selection-sheet__check,
.selection-sheet__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.selection-sheet__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
}

.selection-sheet__swatch {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
}

.selection-sheet__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.selection-sheet__label-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.selection-sheet__label,
.selection-sheet__meta,
.selection-sheet__description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-sheet__label {
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.selection-sheet__meta,
.selection-sheet__description {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.selection-sheet__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: 12px;
    color: var(--shell-menu-hint);
    flex: 0 0 auto;
}

.selection-sheet__check {
    color: var(--shell-menu-text-strong);
}

.selection-sheet__shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.selection-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 12px;
    box-shadow: inset 0 0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__selected-count {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-sheet__footer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.selection-modal {
    --selection-modal-bg: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    --selection-modal-border: var(--shell-menu-border, var(--shell-border, lch(22.88% 1.83 272 / 1)));
    --selection-modal-text: var(--shell-menu-text, var(--shell-text-primary, lch(90.895% 1.375 272 / 1)));
    --selection-modal-text-strong: var(--shell-menu-text-strong, var(--shell-text-primary, lch(100% 0 272 / 1)));
    --selection-modal-muted: var(--shell-menu-hint, var(--shell-text-secondary, lch(63.582% 1.375 272 / 1)));
    --selection-modal-hover-bg: var(--shell-menu-item-hover, var(--shell-bg-hover, lch(15.32% 0.75 272 / 1)));
    --selection-modal-accent: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));

    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--selection-modal-text);
    overflow: hidden;
}

.selection-modal__header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 14px 16px 4px;
}

.selection-modal__title,
.selection-modal__message {
    margin: 0;
    letter-spacing: 0;
}

.selection-modal__title {
    color: var(--selection-modal-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.25rem;
}

.selection-modal__message {
    color: var(--selection-modal-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.selection-modal__search-strip {
    display: flex;
    align-items: stretch;
    min-height: 46px;
    padding: 6px 5px 0 6px;
}

.selection-modal__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
}

.selection-modal__search-input {
    width: 100%;
    height: 40px;
    padding: 11px 12px;
    border: 0;
    margin: 0;
    background: transparent;
    color: var(--selection-modal-text);
    caret-color: var(--selection-modal-accent);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    letter-spacing: 0;
    outline: none;
    appearance: none;
}

.selection-modal__search-input::-webkit-search-decoration,
.selection-modal__search-input::-webkit-search-cancel-button,
.selection-modal__search-input::-webkit-search-results-button,
.selection-modal__search-input::-webkit-search-results-decoration {
    display: none;
}

.selection-modal__search-input::placeholder {
    color: var(--selection-modal-muted);
    opacity: 1;
}

.selection-modal__list-viewport {
    display: flex;
    min-height: 0;
    max-height: min(420px, calc(100vh - 284px));
    padding: 0 5px 6px 6px;
    box-sizing: border-box;
}

.selection-modal__list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.selection-modal__list-scroll::-webkit-scrollbar {
    display: none;
}

.selection-modal__list {
    padding: 6px 0 0;
    margin: 0;
    list-style: none;
}

.selection-modal__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--selection-modal-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

/* Provider mode: fixed-height virtualized rows (Virtualize windows .selection-modal__list-scroll). */
.selection-modal__option--virtual,
.selection-modal__option--placeholder {
    box-sizing: border-box;
    height: var(--selection-row-height, 46px);
    min-height: 0;
    overflow: hidden;
}

.selection-modal__state {
    gap: 8px;
}

.selection-modal__retry {
    appearance: none;
    border: 1px solid var(--shell-border-strong, var(--shell-border));
    border-radius: 4px;
    background: transparent;
    padding: 2px 8px;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.selection-modal__retry:hover {
    background: var(--shell-bg-hover);
}

.selection-modal__group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 0;
    padding: 8px 12px 0;
    color: var(--selection-modal-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
}

.selection-modal__option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 12px;
    color: var(--selection-modal-text);
    cursor: default;
    transition: color 120ms ease;
}

.selection-modal__option::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    bottom: 2px;
    left: 0;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
}

.selection-modal__option:hover::before,
.selection-modal__option--active::before {
    background: var(--selection-modal-hover-bg);
}

.selection-modal__option:hover .selection-modal__label,
.selection-modal__option--active .selection-modal__label {
    color: var(--selection-modal-text-strong);
}

.selection-modal__option--group-start {
    margin-top: 6px;
}

.selection-modal__option--nonselectable {
    color: var(--selection-modal-muted);
}

.selection-modal__leading,
.selection-modal__text,
.selection-modal__trailing {
    position: relative;
    z-index: 1;
}

.selection-modal__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    margin-right: 10px;
    color: var(--selection-modal-muted);
}

.selection-modal__leading:empty {
    display: none;
}

.selection-modal__icon,
.selection-modal__check,
.selection-modal__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The avatar is either an <img> or a UiAvatar root (which centres its initials with inline-flex);
   the slot must not override that display, and the 16px leading slot grows to fit the 18px avatar. */
.selection-modal__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
}

.selection-modal__leading:has(.selection-modal__avatar) {
    width: 18px;
    min-width: 18px;
}

.selection-modal__swatch {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
}

.selection-modal__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.selection-modal__label-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.selection-modal__label,
.selection-modal__meta,
.selection-modal__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-modal__label {
    min-width: 0;
    color: var(--selection-modal-text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 22.5px;
}

.selection-modal__meta,
.selection-modal__subtitle {
    color: var(--selection-modal-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.15;
}

.selection-modal__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: 12px;
    color: var(--selection-modal-muted);
    flex: 0 0 auto;
}

.selection-modal__check {
    color: var(--selection-modal-text-strong);
}

.selection-modal__shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 21px;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 15.6px;
}

.selection-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 12px;
}

.selection-modal__selected-count {
    min-width: 0;
    overflow: hidden;
    color: var(--selection-modal-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-modal__footer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.split-view {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.split-view--top-border {
    box-shadow: inset 0 0.5px 0 var(--shell-border);
}

.split-view__pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.split-view__pane--left {
    flex: 0 0 var(--split-view-left-width);
    width: var(--split-view-left-width);
}

.split-view__pane--right {
    flex: 1 1 auto;
}

.split-view__header {
    display: flex;
    flex: 0 0 auto;
    min-height: 44px;
    box-shadow: inset 0 -0.5px 0 var(--shell-border);
}

.split-view__header-inner {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 43.5px;
    padding: 0 8px;
}

.split-view-header-stack {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.pill-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--pill-tabs-min-height, 43.5px);
    min-width: 0;
    margin-top: var(--pill-tabs-margin-top, 0.75px);
}

.pill-tabs__items {
    display: flex;
    align-items: center;
    gap: var(--pill-tabs-gap, 6px); /* Linear: 6px between pill tabs (measured on the review header) */
    min-width: 0;
    flex: 1 1 auto;
}

.pill-tabs__actions {
    display: flex;
    align-items: center;
    gap: var(--pill-tabs-actions-gap, 6px);
    margin-left: auto;
    flex: 0 0 auto;
}

.pill-tab-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    margin: 0;
    border-radius: 9999px;
    border: 0.5px solid transparent;
    --button-tab-current-bg: var(--button-tab-bg, var(--shell-bg-button, lch(6.449% 0.493 272 / 1)));
    --button-tab-current-color: var(--button-tab-color, var(--shell-text-secondary, lch(61.399% 1.15 272 / 1)));
    --button-tab-current-border: var(--button-tab-border, var(--shell-menu-border, lch(100% 0 0 / 0.136)));
    --button-tab-current-shadow: var(--button-tab-shadow, var(--shell-shadow, 0px 4px 4px -1px lch(0% 0 0 / 0.04), 0px 1px 1px 0 lch(0% 0 0 / 0.08)));
    background: var(--button-tab-current-bg);
    background-clip: padding-box;
    color: var(--button-tab-current-color);
    white-space: nowrap;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
    transition-property: border, background-color, color, opacity;
    transition-duration: 0.15s;
}

.pill-tab-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 0.5px var(--button-tab-current-border),
        var(--button-tab-current-shadow);
    transition-property: box-shadow;
    transition-duration: inherit;
}

.pill-tab-button:hover,
.pill-tab-button:focus-visible,
.pill-tab-button--grouped:focus-within,
.pill-tab-button[data-menu-open="true"] {
    --button-tab-current-bg: var(--button-tab-hover-bg, var(--shell-menu-item-hover, var(--shell-bg-hover, lch(9.92% 0.493 272 / 1))));
    --button-tab-current-color: var(--button-tab-hover-color, var(--shell-text-primary, lch(90.35% 1.15 272 / 1)));
    --button-tab-current-border: var(--button-tab-hover-border, var(--shell-menu-border, lch(100% 0 0 / 0.158)));
}

.pill-tab-button--active,
.pill-tab-button--active:hover,
.pill-tab-button--active:focus-visible {
    --button-tab-current-bg: var(--button-tab-active-bg, var(--shell-tab-active-bg, var(--shell-nav-active-bg, lch(12.234% 0.879 272 / 1))));
    --button-tab-current-color: var(--button-tab-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    --button-tab-current-border: var(--button-tab-active-border, var(--shell-tab-active-ring, lch(100% 0 0 / 0.158)));
    --button-tab-current-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    background: var(--button-tab-current-bg);
    background-clip: padding-box;
    background-origin: padding-box;
    color: var(--button-tab-current-color);
}

.pill-tab-button__label {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.pill-tab-button__count {
    margin-left: 6px;
    color: var(--shell-text-muted, lch(63.304% 1.35 272));
    font-weight: 450;
}

.pill-tab-button__badge {
    position: absolute;
    z-index: 2;
    top: -3px;
    right: -3px;
    display: inline-flex;
    min-width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid var(--shell-bg-surface, var(--shell-bg-sidebar, #111));
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
    color: var(--shell-accent-contrast, #fff);
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
}

.pill-tab-button__badge--muted,
.ui-button__badge--muted {
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--shell-text-muted, lch(63.304% 1.35 272));
    font-weight: 450;
}

.pill-tab-button__badge--danger {
    background: var(--shell-danger-text, #ef4444);
    color: #fff;
}

.pill-tab-button__badge--dot {
    top: 1px;
    right: 1px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}

/* Split tab (QUI-60), measured on Linear's "N more" pill: the ordinary pill with the title, then Linear's angle
   glyph (angle-down, not the filled chevron caret) 6px after it in the text colour (the pill's own gap). */
.pill-tab-button__chevron {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.pill-tab-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    opacity: 0.86;
}

.pill-tab-button:focus-visible {
    outline: 2px solid transparent;
}

.pill-tab-button--grouped {
    padding: 0;
    gap: 0;
    overflow: visible;
    isolation: isolate;
}

.pill-tab-button--grouped .pill-tab-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-tab-button__group-trigger,
.pill-tab-button__group-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.pill-tab-button__group-trigger {
    gap: 6px;
    padding: 0 9px 0 10px;
    border-radius: 9999px 0 0 9999px;
}

.pill-tab-button__group-toggle {
    width: 26px;
    padding: 0;
    border-radius: 0 9999px 9999px 0;
}

.pill-tab-button__group-trigger:focus-visible,
.pill-tab-button__group-toggle:focus-visible {
    outline: 2px solid transparent;
}

.pill-tab-button__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.86;
}

.pill-tab-button__group-divider {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 0.5px;
    height: 16px;
    background: var(--button-tab-current-border);
    opacity: 1;
}

.anchored-dropdown-menu--pill-tab-group > .shell-dropdown-menu {
    top: 32px;
    left: 0;
    right: auto;
    width: 208px;
}

.split-view__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none;
}

.split-view--inset-inline .split-view__body {
    padding-inline: var(--split-view-body-padding-inline, 8px);
}

.split-view--inset-inline .split-view__body > .panel-list .panel-list-item__chrome {
    margin-inline: 0;
}

.split-view__body::-webkit-scrollbar {
    display: none;
}

.split-view__divider {
    position: absolute;
    inset: 0 auto 0 var(--split-view-left-width);
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 10px;
    padding: 0 4px;
    transform: translateX(-50%);
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
    outline: none;
}

.split-view__divider-line {
    width: 1px;
    height: 100%;
    background: var(--shell-border);
}

/* Hover/drag affordance: the standard resize-guide hairline over the boundary. */
.split-view__divider::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 0.5px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.split-view__divider:hover::after,
.split-view__divider:focus-visible::after,
.split-view__divider[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.split-view[data-dragging="true"] {
    cursor: col-resize;
    user-select: none;
}

.panel-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% + var(--panel-empty-state-top-compensation, 0px));
    min-height: 0;
    margin-top: calc(var(--panel-empty-state-top-compensation, 0px) * -1);
}

.panel-empty-state__content {
    display: flex;
    flex-direction: column;
    align-items: var(--panel-empty-state-align-items, center);
    gap: var(--panel-empty-state-section-gap, 20px);
    width: var(--panel-empty-state-content-width, 135.3671875px);
    min-height: var(--panel-empty-state-content-min-height, 135.5px);
    padding-bottom: var(--panel-empty-state-padding-bottom, 20px);
}

.panel-empty-state__graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-empty-state__text {
    display: flex;
    flex-direction: column;
    gap: var(--panel-empty-state-text-gap, 0px);
    width: 100%;
    text-align: var(--panel-empty-state-text-align, center);
}

.panel-empty-state__title {
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    white-space: normal;
}

.panel-empty-state__inbox-illustration {
    width: 97.5px;
    height: 100px;
}

.panel-empty-state__pulse-illustration {
    width: 84.6484375px;
    height: 80px;
}

.panel-empty-state__inbox-stroke-shadow {
    stroke: var(--shell-border, lch(19.64% 1.38 272));
}

.panel-empty-state__inbox-stroke-muted {
    stroke: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.panel-empty-state__inbox-stroke-strong {
    stroke: var(--shell-text-tertiary, lch(90.35% 1.15 272));
}

.panel-empty-state__message {
    color: var(--panel-empty-state-message-color, lch(61.399% 1.15 272));
    font-size: var(--panel-empty-state-message-font-size, 13px);
    font-weight: var(--panel-empty-state-message-font-weight, 500);
    line-height: var(--panel-empty-state-message-line-height, normal);
    white-space: var(--panel-empty-state-message-white-space, nowrap);
}

.panel-empty-state__actions {
    display: flex;
    width: 100%;
}

.panel-empty-state--wrap-message .panel-empty-state__message {
    white-space: var(--panel-empty-state-message-white-space, normal);
}

.single-column-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.single-column-page__header {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.single-column-page__title-row {
    /* Anchors the floating find-in-view bar (absolute, top-right) over the title content. */
    position: relative;
    min-height: 44px;
    border-bottom: 0.5px solid var(--single-column-page-divider, var(--shell-border));
}

.single-column-page__title-row-inner,
.single-column-page__secondary-row-inner {
    display: flex;
    align-items: center;
    min-height: 43.5px;
    padding: 0 8px;
}

.single-column-page__secondary-row {
    min-height: 43.5px;
    border-bottom: 0.5px solid var(--single-column-page-divider, var(--shell-border));
}

.single-column-page__secondary-row--no-divider {
    border-bottom: 0;
}

.single-column-page__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none;
}

.single-column-page__body::-webkit-scrollbar {
    display: none;
}

.single-column-page__body-inner {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: var(--single-column-page-inset, 8px) var(--single-column-page-inset, 8px) 0;
}

.single-column-page__body--flush .single-column-page__body-inner {
    padding: 0;
}

.single-column-page__body--fill {
    overflow: hidden;
}

.single-column-page__body--fill .single-column-page__body-inner {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.single-column-page__body-inner::after {
    content: "";
    display: block;
    flex: 0 0 var(--single-column-page-inset, 8px);
}

.single-column-page__body--flush .single-column-page__body-inner::after,
.single-column-page__body--fill .single-column-page__body-inner::after {
    content: none;
}

.fill-region {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.fill-region > * {
    flex: 1 1 auto;
    min-height: 0;
}

.tabbed-single-column-page__tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.tabbed-single-column-page__tabs-leading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.tabbed-single-column-page__tabs {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.tabbed-single-column-page__tabs-inline-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.tabbed-single-column-page__tab-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.tabbed-single-column-page__tab-actions .grid-toolbar {
    height: 28px;
    padding: 0;
    border-bottom: 0;
}

/* Standalone static-SSR hosts (BasicConstrainedPage rendered directly under <body> or a single
   <main>): outside the app shell there is no fixed-height ancestor, so the document itself scrolls
   instead of the page box, and the body's app-shell overflow:hidden is lifted. */
body:has(> .basic-page),
body:has(> main > .basic-page) {
    height: auto;
    min-height: 100%;
    overflow: auto;
}

body:has(> .basic-page) > .basic-page,
body:has(> main > .basic-page) > main > .basic-page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
}

.basic-page {
    --basic-page-bottom-gutter: 72px;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 64px 0 var(--basic-page-bottom-gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.basic-page::-webkit-scrollbar {
    display: none;
}

.basic-page__mobile-shell-header {
    display: none;
}

.basic-page__mobile-shell-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-page__mobile-shell-title--link:hover,
.basic-page__mobile-shell-title--link:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.basic-page--wide {
    padding-top: 51px;
    padding-bottom: var(--basic-page-bottom-gutter);
}

.basic-page--with-back {
    padding-top: 0;
}

.basic-page--with-back .basic-page__backbar {
    top: 0;
}

.basic-page__backbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex: 0 0 64px;
    align-items: flex-start;
    height: 64px;
    padding: 10px 8px 0;
    box-sizing: border-box;
    pointer-events: none;
}

.basic-page__backbar-sidebar-toggle {
    display: none;
    flex: 0 0 auto;
    pointer-events: auto;
}

.basic-page__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    pointer-events: auto;
}

.basic-page__back-link:hover,
.basic-page__back-link:focus-visible {
    border-color: transparent;
    background: var(--shell-menu-item-hover, lch(9.92% 0.493 272));
    color: var(--shell-text-primary, lch(100% 0 272));
    outline: none;
}

.basic-page__back-link:hover svg,
.basic-page__back-link:focus-visible svg {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.basic-page__back-link-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.basic-page__inner {
    display: flex;
    flex-direction: column;
}

.basic-page__inner--constrained {
    width: min(var(--basic-page-constrained-width, 640px), calc(100vw - 48px));
    max-width: var(--basic-page-constrained-width, 640px);
    margin: 0 auto;
}

.basic-page__inner--wide {
    width: auto;
    margin: 0 56px;
}

.basic-page__header {
    margin-bottom: 32px;
}

.basic-page__header--divider {
    margin-bottom: 32px;
    padding-bottom: 29px;
    border-bottom: 0.5px solid var(--shell-border);
}

/* Linear's settings-form hairline (measured on the template editor pages 2026-09-02): title
   row → 24px → 1px card-border-tint rule across the column → 24px → content. */
.basic-page__header--divider.basic-page__header--divider-hairline {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--shell-form-card-border, lch(89.84% 0 282));
}

.basic-page__inner--wide .basic-page__header {
    margin-bottom: 20px;
}

.basic-page__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 0 16px;
}

.basic-page__inner--wide .basic-page__title-row {
    padding: 0;
}

.basic-page__title-row--flush {
    padding: 0;
}

.basic-page__title-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.basic-page__title-row--flush .basic-page__title-main {
    gap: 16px;
}

.basic-page__title-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.basic-page__title-main:has(.basic-page__title-leading) {
    min-height: 38px;
}

.basic-page__title-main:has(.basic-page__title-leading[style*="48px"]) {
    min-height: 48px;
}

.basic-page__title-main:has(.basic-page__title-leading) .basic-page__title {
    font-size: 1.125rem;
    line-height: normal;
}

.basic-page__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.basic-page__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
}

.basic-page__title-secondary {
    color: lch(61.399% 1.15 272);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

.basic-page__header-actions {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.basic-page__subtitle {
    width: 100%;
    margin-top: 4px;
    padding: 0 16px;
    color: lch(61.399% 1.15 272);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.375rem;
}

.basic-page__inner--wide .basic-page__subtitle {
    padding: 0;
}

.basic-page__meta {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 3px;
    padding: 0 16px;
}

.basic-page__inner--wide .basic-page__meta {
    padding: 0;
}

.basic-page:not(.basic-page--with-back):has(.settings-toolbar) {
    padding-top: 64px;
}

.basic-page__meta:has(.settings-toolbar) {
    justify-content: stretch;
    margin: 12px 0 0;
}

@media (width <= 1024px) {
    .basic-page.basic-page--with-shell-header {
        padding-top: 0;
    }

    .basic-page__mobile-shell-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        background: var(--shell-bg-surface, var(--shell-bg-sidebar));
        color: var(--shell-text-primary);
    }

    .basic-page__mobile-shell-header .page-title-bar {
        min-height: 44px;
    }

    .basic-page__mobile-shell-header .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .basic-page__backbar-sidebar-toggle {
        display: grid;
        margin-right: 8px;
    }

    .basic-page.basic-page--with-shell-header:not(.basic-page--with-back) .basic-page__inner {
        margin-top: 48px;
    }

    .basic-page.basic-page--with-shell-header.basic-page--with-back .basic-page__backbar {
        flex-basis: 55px;
        height: 55px;
        padding-top: 1px;
    }
}

@media (max-width: 760px) {
    .basic-page {
        --basic-page-bottom-gutter: 56px;
        padding: 48px 0 var(--basic-page-bottom-gutter);
    }

    .basic-page.basic-page--with-shell-header {
        padding-top: 0;
    }

    .basic-page--with-back {
        padding-top: 0;
    }

    .basic-page.basic-page--with-shell-header.basic-page--with-back .basic-page__backbar {
        flex-basis: 43px;
        height: 43px;
    }

    .basic-page__inner--constrained,
    .basic-page__inner--wide {
        width: auto;
        max-width: none;
        margin: 0 16px;
        transform: none;
    }

    .basic-page__title-row,
    .basic-page__subtitle,
    .basic-page__meta {
        padding: 0;
    }
}

.detail-sidebar-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    --detail-sidebar-page-content-width: 805px;
    --detail-sidebar-page-content-min-gutter: 40px;
    --detail-sidebar-page-sidebar-width: 318px;
}

.detail-sidebar-page__header {
    flex: 0 0 auto;
    min-height: 44px;
    box-shadow: inset 0 -0.5px 0 var(--shell-border);
}

.detail-sidebar-page__header-inner {
    display: flex;
    align-items: center;
    min-height: 43.5px;
    padding: 0 8px;
}

.detail-sidebar-page__header-leading {
    /* Linear header split: the leading cluster fills the row so the actions slot can sit at the
       far right (previously shrink-wrapped, forcing consumers to ::deep-stretch it themselves). */
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: center;
    min-width: 0;
}

.detail-sidebar-page__header-content {
    min-width: 0;
    flex: 0 1 auto;
}

.detail-sidebar-page__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Far-right actions cluster (Linear); consumers previously forced this via ::deep. */
    margin-left: auto;
    flex: 0 0 auto;
}

.detail-sidebar-page__header-actions .shell-icon-button {
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid rgb(0 0 0 / 0%);
    color: var(--shell-text-primary);
}

.detail-sidebar-page__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.detail-sidebar-page__content-region {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.detail-sidebar-page__content-scroller {
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}

.detail-sidebar-page__content-scroller::-webkit-scrollbar {
    display: none;
}

.detail-sidebar-page__content-column {
    width: min(
        var(--detail-sidebar-page-content-width),
        max(0px, calc(100% - (var(--detail-sidebar-page-content-min-gutter) * 2)))
    );
    max-width: var(--detail-sidebar-page-content-width);
    min-height: 100%;
    margin: 48px auto 48px;
}

.detail-sidebar-page__sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--detail-sidebar-page-sidebar-width);
    width: var(--detail-sidebar-page-sidebar-width);
    min-width: var(--detail-sidebar-page-sidebar-width);
    box-sizing: border-box;
    padding: 8px 8px 16px 4px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.detail-sidebar-page__sidebar::-webkit-scrollbar {
    display: none;
}

.detail-sidebar-page__sidebar-utility {
    display: inline-flex;
    justify-content: flex-end;
    gap: 6px;
    min-height: 28px;
    margin: 0 0 8px;
}

/* Measured off Linear's issue screen: 28px circles on the button-surface token, 16px glyphs
   at secondary, 6px gap; the last two buttons fuse into the split "agent" pill. */
.detail-sidebar-page__sidebar-utility .ui-icon-button {
    display: flex;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 0.5px solid rgb(0 0 0 / 0%);
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-text-secondary);
    box-shadow: var(--shell-shadow);
}

.detail-sidebar-page__sidebar-utility .ui-icon-button svg {
    width: 16px;
    height: 16px;
}

.detail-sidebar-page__sidebar-utility .ui-icon-button:hover {
    color: var(--shell-text-primary);
}

/* The last two buttons used to be hand-fused into a split pill here; that's now the
   SplitButton primitive (its own joined chrome), so utility buttons stay plain circles. */

.detail-sidebar-page__sidebar-stack {
    display: flex;
    flex-direction: column;
    /* The shell owns the rhythm between sidebar islands — callers stack panels bare. */
    gap: 8px;
    min-width: 0;
}

/* Flat-rail LAYOUT model (measured JAM-31): the whole view lives on the app shell's surface
   card. The content column is FIXED-width after a fixed left gutter, and the RAIL is the
   flexible element — it sits beside the content and expands into any remaining width up to
   the card edge. No divider, no rail bg; SidebarWidth acts as the rail's MINIMUM. */
/* Flat rail scroll model (from Linear's DOM + James's scroll video): ONE scroll container
   holds BOTH columns; the rail is sticky — it scrolls its 48px head start then pins at the
   card top while content continues; the toolbar overlays the card OUTSIDE the scroller so
   it never moves; a top fade hints rail content sliding under the toolbar once pinned. */
.detail-sidebar-page--flat-rail {
    position: relative;
}

.detail-sidebar-page--flat-rail .detail-sidebar-page__body {
    overflow-y: auto;
}

.detail-sidebar-page--flat-rail .detail-sidebar-page__content-region {
    flex: 0 1 auto;
    /* Linear's issue content column is exactly 791px wide (measured at vw 1728). */
    width: calc(133px + 791px + 48px);
    min-width: 0;
}

.detail-sidebar-page--flat-rail .detail-sidebar-page__content-scroller {
    height: auto;
    overflow: visible;
}

.detail-sidebar-page--flat-rail .detail-sidebar-page__content-column {
    /* 59px top lands the title text exactly where Linear's sits below the header.
       Bottom space is padding, not margin — margins get collapsed/clipped by the
       scroller, which left the composer sitting on the baseline. */
    margin: 59px 48px 0 133px;
    padding-bottom: 60px;
    /* Shrinks with the region at narrow widths before it can run under the rail. */
    width: min(791px, calc(100% - 181px));
}

.detail-sidebar-page--flat-rail .detail-sidebar-page__sidebar {
    position: sticky;
    /* Pins BELOW the toolbar (video-matched): pinned first label rests at the toolbar's
       bottom edge with the fade band above it, not beside the buttons. */
    top: 25px;
    flex: 1 1 var(--detail-sidebar-page-sidebar-width);
    align-self: flex-start;
    width: auto;
    min-width: var(--detail-sidebar-page-sidebar-width);
    max-width: none;
    height: auto;
    min-height: 0;
    /* 63px flow offset + 11px pad places the first sidebar heading at Linear's measured
       y127.5 (was 48 → sat 15px too high); the sticky top pin is unchanged. */
    margin-top: 63px;
    padding: 11px 16px 16px 12px;
    border-left: 0;
    background: transparent;
    overflow: visible;
}

/* Scroll hint: fades in over the rail's first rows as the pin engages. */
.detail-sidebar-page--flat-rail .detail-sidebar-page__sidebar::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(to bottom, var(--detail-sidebar-page-surface, var(--shell-bg-surface, lch(97.94 0.5 282))) 30%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: qui-detail-rail-fade linear both;
    animation-timeline: scroll(nearest block);
    animation-range: 0 24px;
}

@keyframes qui-detail-rail-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The toolbar overlay: anchored to the page root, outside the scroll container. */
.detail-sidebar-page__sidebar-utility--overlay {
    position: absolute;
    z-index: 5;
    top: 52px;
    right: 13px;
    margin: 0;
}

/* Flat sections never collapse; the static header keeps the trigger's box metrics. */
.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__header-trigger--static {
    display: flex;
    align-items: center;
}

/* ----- Flat rail (Linear's chromeless issue-detail sidebar; RailStyle=Flat) -----
   Rhythm from the JAM-31 sweep: 13px/500 muted section labels, ~8px label→rows,
   ~32px between sections, 28px pills at 32px pitch. */
.detail-sidebar-page__sidebar-stack--flat {
    /* Measured: 34px from a section's last row to the next section label (87px pitch for
       single-row sections: 16 label + 9 gap + 28 pill + 34). */
    gap: 34px;
}

.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__header,
.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel--expanded .detail-sidebar-panel__header {
    height: 16px;
    min-height: 16px;
    /* Measured: pill tops sit 25px below the label top (16 label + 9). */
    margin-bottom: 9px;
    padding: 0;
}

/* The island header trigger carries a 6px side inset; flat labels left-align with the pills. */
.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__header-trigger {
    padding: 0;
}

.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__title {
    /* Linear insets label TEXT 8px so it lines up with the 16px icons inside the 28px rows
       (row box +6 pad +~1 border = icon at +7-8 from the row's left edge). */
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-text-secondary, lch(39.176 1.25 282));
}

.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__disclosure {
    color: var(--shell-text-secondary, lch(39.176 1.25 282));
    transform: scale(0.75);
}

.detail-sidebar-page__sidebar-stack--flat .detail-sidebar-panel__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Nested property row (Linear's milestone-under-project): 23px indent plus the measured
   connector — a 1px drop centred under the parent row's icon (x -9, from -8 to +6) with
   Linear's exact 10x9 curved tail sweeping into this row's icon. Mask-painted so the
   connector colour is a themable token. */
.detail-sidebar-property-nested {
    position: relative;
    margin-left: 23px;
}

.detail-sidebar-property-nested::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -9px;
    width: 1px;
    height: 14px;
    border-radius: 0.5px;
    background: var(--detail-sidebar-connector, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
}

.detail-sidebar-property-nested::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -9px;
    width: 10px;
    height: 9px;
    background: var(--detail-sidebar-connector, color-mix(in srgb, var(--shell-text-primary) 16%, transparent));
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpath d='M0 0h1v1c0 2.5 2.212 3.546 2.212 3.546L9.737 8.06c.568.306.094 1.186-.474.88l-6.48-3.488S0 4 0 1V0Z'/%3E%3C/svg%3E") no-repeat;
}

/* Unset properties render as muted verb pills ("Set priority") — measured JAM-144. */
.detail-sidebar-property-row--placeholder,
.detail-sidebar-property-row--placeholder .detail-sidebar-property-row__icon,
.detail-sidebar-property-row--placeholder .detail-sidebar-property-row__text {
    color: var(--shell-text-secondary, lch(39.176 1.25 282));
    font-weight: 450;
}

.detail-sidebar-property-row--placeholder .detail-sidebar-property-row__text {
    font-weight: var(--detail-sidebar-property-label-weight, 450);
}

/* ----- Breadcrumbs (the single Qui breadcrumb primitive) -----
   Measured off Linear (vw1728): 13px/500 crumbs in primary text, a muted `›` separator between
   crumbs, 16px leading icon; clickable crumbs take a soft hover wash, the current crumb is static. */
.breadcrumbs {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--shell-text-primary);
    text-decoration: none;
}

.breadcrumbs__item--link {
    height: 24px;
    /* Measured on Linear: crumb icon sits flush at the trail's left edge with an 8px icon→text gap.
       The 6px horizontal padding forms the hover pill; the matching negative inline margin cancels it
       for layout, so the resting icon stays flush and the separator gap is unchanged. */
    padding: 0 6px;
    margin: 0 -6px;
    gap: 8px;
    border-radius: 6px;
}

.breadcrumbs__item--link:hover,
.breadcrumbs__item--link:focus-visible {
    /* Subtle grey pill (Linear ≈ lch(95.88)); --shell-bg-hover reads ~lch(97.94), too near-white. */
    background: var(--shell-menu-item-hover, lch(95.9% 0.16 282 / 1));
    outline: none;
}

.breadcrumbs__item--current {
    height: 19.5px;
    padding: 0;
    gap: 8px;
}

.breadcrumbs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-text-secondary);
}

.breadcrumbs__text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
}

.breadcrumbs__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Measured on Linear: the `›` sits 8px from each crumb. */
    margin-left: 8px;
    margin-right: 8px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

/* ----- Breadcrumb bar: the row chrome a page/detail surface sits under ----- */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
}

.breadcrumb-bar--divided {
    border-bottom: 1px solid var(--shell-border, lch(86% 1.2 272 / 1));
}

.breadcrumb-bar__lead {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.breadcrumb-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
}

.detail-sidebar-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    border: 0.5px solid var(--detail-sidebar-panel-border, var(--settings-card-border, var(--shell-border)));
    border-radius: 10px;
    background: var(--detail-sidebar-panel-bg, var(--settings-card-bg, var(--shell-bg-active)));
    box-shadow: var(--shell-shadow);
    transition: min-height 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sidebar-panel--flat {
    box-shadow: none;
}

.detail-sidebar-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 16px;
    margin-bottom: 0;
    transition: margin-bottom 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sidebar-panel--expanded .detail-sidebar-panel__header {
    margin-bottom: 12px;
}

.detail-sidebar-panel__header-trigger {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 16px;
    gap: 3px;
    padding: 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--detail-sidebar-panel-title-color, var(--shell-text-secondary));
}

.detail-sidebar-panel__header-trigger:hover,
.detail-sidebar-panel__header-trigger:focus-visible {
    outline: none;
}

.detail-sidebar-panel__custom-title {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

.detail-sidebar-panel__header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.detail-sidebar-panel__title {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.detail-sidebar-panel__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    color: inherit;
    transition: transform 0.15s ease;
}

.detail-sidebar-panel--collapsed .detail-sidebar-panel__disclosure {
    transform: rotate(-90deg);
}

.detail-sidebar-panel__body-shell {
    display: grid;
    grid-template-rows: 1fr;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transition:
        grid-template-rows 220ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 160ms ease;
}

.detail-sidebar-panel--collapsed .detail-sidebar-panel__body-shell {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.detail-sidebar-panel__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.detail-sidebar-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.detail-sidebar-key-value-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.detail-sidebar-key-value-row {
    display: grid;
    grid-template-columns: var(--detail-sidebar-key-column-width, 90px) minmax(0, 1fr);
    align-items: center;
    min-height: 28px;
}

.detail-sidebar-key-value-row__key {
    min-width: 0;
    overflow: hidden;
    color: var(--detail-sidebar-key-color, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-sidebar-key-value-row__value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
}

.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.detail-section-header__leading {
    display: inline-flex;
    align-items: center;
}

.detail-section-header__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
}

.detail-section-header__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    color: var(--shell-text-secondary);
    transition: transform 120ms ease;
}

.detail-section-header__chevron--collapsed {
    transform: rotate(-90deg);
}

.detail-section-header__title {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.detail-section-header__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.detail-section-header__count-ring {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background:
        conic-gradient(rgb(99, 109, 241) 0deg var(--detail-section-count-fill, 120deg), transparent var(--detail-section-count-fill, 120deg) 360deg),
        transparent;
}

.detail-section-header__count-ring::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 9999px;
    background: var(--shell-bg-surface);
    box-shadow: inset 0 0 0 1px var(--shell-border);
}

.detail-section-header__count-text {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.detail-section-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-section-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 160ms ease, opacity 160ms ease;
}

.detail-section-collapse--collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
}

.detail-section-collapse__inner {
    min-height: 0;
    overflow: hidden;
}

.related-content-bar {
    display: block;
    width: 100%;
    min-height: var(--related-content-bar-height, 36px);
    color: var(--shell-text-primary);
}

.related-content-bar__chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--related-content-bar-height, 36px);
    padding: 0 0 0 8px;
    border-radius: 8px;
}

.related-content-bar--resource {
    width: calc(100% + 6px);
    margin-left: -6px;
}

.related-content-bar--resource .related-content-bar__chrome {
    min-height: 44px;
    padding: 0 12px 0 13px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: lch(7.67 0.75 272);
}

.related-content-bar__leading {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.related-content-bar__leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    color: var(--related-content-bar-icon-color, var(--shell-text-secondary));
}

.related-content-bar__key {
    display: inline-flex;
    align-items: center;
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.related-content-bar__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    color: var(--related-content-bar-status-icon-color, var(--shell-text-primary));
}

.related-content-bar__key-text,
.related-content-bar__title,
.related-content-bar__meta,
.related-content-bar__status {
    font-size: 0.8125rem;
    line-height: 0.96875rem;
    letter-spacing: 0;
}

.related-content-bar__key-text {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
    font-weight: 450;
}

.related-content-bar__body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    margin-left: 9px;
}

.related-content-bar--resource .related-content-bar__body {
    margin-left: 4px;
}

.related-content-bar__title,
.related-content-bar__meta,
.related-content-bar__status {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-content-bar__title {
    font-weight: 500;
    color: var(--shell-text-primary);
}

.related-content-bar__meta,
.related-content-bar__status {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
    font-weight: 450;
}

.related-content-bar__trailing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    justify-self: end;
}

.related-content-bar__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
}

.related-content-bar__meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border: 0.5px solid lch(15.32 1.38 272);
    border-radius: 48px;
    background: lch(4.52 0.3 272);
}

.related-content-bar__meta-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    color: var(--related-content-bar-meta-badge-color, lch(61.399% 1.15 272 / 1));
}

.related-content-bar__meta-badge-text {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.ui-icon-button.related-content-bar__menu {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: lch(61.803% 1.2 272 / 1);
}

.related-content-bar__resource-agent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid lch(15.32 1.38 272);
    border-radius: 9999px;
    color: lch(90.668% 1.375 272 / 1);
}

.related-content-bar__resource-agent-avatar {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
}

.related-content-bar__resource-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.related-content-bar__resource-status .shell-icon {
    color: rgb(247, 203, 0);
}

/* TopicThread: a topic block above a flat, single-level comment list. The card carries no
   horizontal padding — sections pad themselves, so the topic divider and the comment
   dividers (each item pads itself) run edge to edge. */
.topic-thread--chrome {
    border: 0.5px solid var(--shell-border, lch(19.64% 1.38 272 / 1));
    border-radius: 12px;
    background: var(--shell-bg-surface, lch(5.52% 0.4 272 / 1));
    overflow: hidden;
}

.topic-thread__topic {
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid var(--shell-border, lch(19.64% 1.38 272 / 1));
}


/* Linear-style bars: collapsed = subtle filled full-width bar with leading icon and a
   trailing unfold glyph; expanded = plain "Collapse" row with a trailing fold glyph. */
/* Rest state is unfilled like Linear; the subtle fill is the HOVER affordance. */
.topic-thread__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: left;
}

.topic-thread__summary:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
}

.topic-thread__summary--open {
    background: transparent;
    border-bottom: 0.5px solid var(--shell-border, lch(19.64% 1.38 272 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
}

.topic-thread__summary--open:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
}

.topic-thread__summary-icon {
    display: inline-flex;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

.topic-thread__summary-caret {
    display: inline-flex;
    margin-left: auto;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

.topic-thread__summary-meta {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

/* Collapse/expand animates like Linear: the body stays in the DOM and its grid row
   transitions 1fr→0fr with an opacity fade; inner overflow hides the squished content. */
/* Motion lives in topic-thread.js (Web Animations API — grid-rows/CSS-transition
   approaches snap in some embedded Chromium builds). These rules are the resting states;
   no opacity involved — content stays solid while the height animates, like Linear. */
.topic-thread__body {
    overflow: hidden;
}

.topic-thread__body--collapsed {
    height: 0;
}

/* CollapsibleSection: Linear's disclosure panel (pill toggle h24, count while closed,
   caller toolbar hidden while closed). Collapse motion lives in topic-thread.js via the
   data-collapse-animate hook; these rules are the resting states. ResourceList/ResourceItem:
   Linear-measured resource rows (h44 radius 8, 150ms surface transitions). */
.collapsible-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.collapsible-section__toggle {
    cursor: default;   /* Linear buttons keep the default cursor */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

/* dark/tinted themes: fill one step above the surface (bg-hover can equal the surface) */
.collapsible-section__toggle:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
}

/* light themes: Linear's gray pill fill (measured rgb(240) on the live app) */
[data-app-theme="light"] .collapsible-section__toggle:hover,
[data-app-theme="pure-light"] .collapsible-section__toggle:hover {
    background: lch(94.9% 0 272 / 1);
}

.collapsible-section__title {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 6px;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.75rem;
    font-weight: 500;
}

.collapsible-section__toggle,
.resource-item {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.collapsible-section__chevron {
    display: inline-flex;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    transition: transform 120ms ease;
}

.collapsible-section__chevron--open {
    transform: rotate(90deg);
}

.collapsible-section__collapsed {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.75rem;
}

.collapsible-section__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.collapsible-section__body {
    overflow: hidden;
}

.collapsible-section__body.is-collapsed {
    height: 0;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px 0 11px;
    border-radius: 8px;
    cursor: pointer;   /* Linear resource rows are links */
    text-decoration: none;
    color: inherit;
    /* one step above the page surface so rows read as raised in every theme */
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
    border: 0.5px solid var(--shell-border, lch(19.64% 1.38 272 / 1));
}

.resource-item:hover {
    /* dark/tinted themes: bg-button is one step lighter than the row */
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

/* light themes: hover darkens, but barely — Linear's hovered row is near-white
   (measured rgb(251) vs the white rest card; the nav-hover token is far too dark here) */
[data-app-theme="light"] .resource-item:hover,
[data-app-theme="pure-light"] .resource-item:hover {
    background: lch(98.6% 0 272 / 1);
}

.resource-item__icon,
.resource-item__leading {
    display: inline-flex;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    flex: 0 0 auto;
}

.resource-item__avatar {
    flex: 0 0 auto;
}

.resource-item__thumb {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex: 0 0 auto;
}

.resource-item__title {
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Linear: the muted description sits right after the title; only meta/menu right-align. */
    flex: 0 1 auto;
    min-width: 0;
}

.resource-item__label {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    flex: 0 0 auto;
}

.resource-item__menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

/* IssueList / IssueRow: Linear's sub-issues rows and connector lines, measured off the
   live app. Rows are 36px flush anchors (no background hover — the checkbox and menu
   reveal instead); children indent 24px per level; a 1px trunk drops from the parent's
   icon centre with a radius-6 elbow into each child. */
.issue-list {
    display: flex;
    flex-direction: column;
    --issue-rail: var(--shell-border, lch(19.64% 1.38 272 / 1));
}

[data-app-theme="light"] .issue-list,
[data-app-theme="pure-light"] .issue-list {
    --issue-rail: lch(84.44% 0 282 / 1);
}

/* All row rules are scoped under .issue-list: the grid demo content (issue-grid.css) reuses the
   bare .issue-row class name, and an unscoped hover fill here painted a rogue square highlight
   inside grid rows whenever the pointer crossed their inner content. */
.issue-list .issue-row {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    padding-right: 14px;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    user-select: none;
}

/* full-width hover fill including the checkbox gutter (measured off a Linear recording:
   rgb(238) ≈ lch 94.1 on light); dark themes step up from the surface */
.issue-list .issue-row:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
}

[data-app-theme="light"] .issue-list .issue-row:hover,
[data-app-theme="pure-light"] .issue-list .issue-row:hover {
    background: lch(94.1% 0.5 282 / 1);
}

/* the multi-select toggle sits in a FIXED far-left column (measured: 22px hit at x8,
   12px box, vertically centred) independent of nesting depth; rows pad their content to
   x = 39 + 24·depth so the status icon clears it */
.issue-row__check {
    position: absolute;
    left: 8px;
    top: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.issue-list .issue-row:hover .issue-row__check,
.issue-row__check--on {
    opacity: 1;
}

/* custom-drawn box (native checkboxes go black/red on themed pages): 14px radius-3,
   muted border at rest, accent fill + white check when selected — Linear's checkbox */
.issue-row__check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    background: var(--shell-bg-surface, transparent);
    color: transparent;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.issue-row__check--on .issue-row__check-box {
    background: var(--shell-accent, #5e6ad2);
    border-color: var(--shell-accent, #5e6ad2);
    color: #fff;
}

.issue-row__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

.issue-row__status-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.issue-row__status-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    border: 1.5px solid var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

.issue-row__title {
    margin-left: 9px;
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.issue-row__count {
    flex: 0 0 auto;
}

.issue-row__avatar {
    margin-left: 10px;
    flex: 0 0 auto;
}

/* no ⋯ button on Linear sub-issue rows — the per-row menu opens on right-click at the
   pointer (anchored-dropdown-menu--context) */
.issue-row__context {
    position: relative;
    display: inline-flex;
}

.issue-row--disabled {
    opacity: 0.55;
    cursor: default;
}

.issue-list .issue-row--disabled:hover {
    background: transparent;
}

/* expanded parents drop a short stub from just under their icon to the row bottom; the
   children trunk continues it seamlessly */
.issue-row--parent::after {
    content: "";
    position: absolute;
    left: var(--issue-self-trunk);
    top: 31px;
    width: 1px;
    height: 5px;
    background: var(--issue-rail);
    pointer-events: none;
}

.issue-list__children-inner {
    position: relative;
}

.issue-list__children-inner::before {
    content: "";
    position: absolute;
    left: var(--issue-trunk);
    top: 0;
    height: var(--issue-trunk-len, 0px);
    width: 1px;
    background: var(--issue-rail);
}

.issue-row--child::before {
    content: "";
    position: absolute;
    left: var(--issue-trunk);
    top: 0;
    width: 13px;
    height: 18px;
    border-left: 1px solid var(--issue-rail);
    border-bottom: 1px solid var(--issue-rail);
    border-bottom-left-radius: 6px;
    pointer-events: none;
}

/* IssueList drag (Linear sub-issues, verified against a capture): the original row stays
   in place; a compact status + title chip floats at the cursor and a 2px accent insertion
   line with a ring at its left end marks the landing point at the target depth. */
.issue-list-dnd-dragging,
.issue-list-dnd-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.issue-list-dnd-chip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--shell-bg-surface, lch(5.52% 0.4 272 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow:
        0 0 0 0.5px var(--shell-border, lch(19.64% 1.38 272 / 1)),
        0 8px 24px -6px lch(0% 0 0 / 0.3);
    pointer-events: none;
    will-change: transform;
    white-space: nowrap;
}

.issue-list-dnd-chip .issue-row__status {
    display: inline-flex;
    width: 14px;
}

.issue-list-dnd-indicator {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3999;
    height: 2px;
    border-radius: 1px;
    background: var(--shell-accent, #5e6ad2);
    pointer-events: none;
    will-change: transform, width;
}

.issue-list-dnd-indicator::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    border: 2px solid var(--shell-accent, #5e6ad2);
    background: transparent;
    box-sizing: border-box;
}

/* while a drag is live, suppress row hover so the list reads static under the chip */
.issue-list--dnd-active .issue-row:hover {
    background: transparent;
}

.issue-list--dnd-active .issue-row__check {
    opacity: 0 !important;
}


/* (stale duplicate .issue-chip block removed — the measured chip chrome lives in the
   issue-grid section below; the old copy leaked margin-left: 6px onto every chip) */


.comment-thread {
    --comment-thread-card-bg: var(--app-theme-card-bg, var(--shell-menu-bg, lch(15.736% 2.713 272.695 / 1)));
    --comment-thread-card-border: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border, lch(22.936% 3.913 272.695 / 1))));
    --comment-thread-card-shadow: var(--app-theme-card-shadow, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
    --comment-thread-divider: var(--comment-thread-card-border);
    --comment-thread-text: var(--shell-text-tertiary, var(--shell-text-primary));
    --comment-thread-muted: var(--shell-text-secondary);
    /* Softer than muted (Linear parity): fade toward the card surface so it mutes in any theme. */
    --comment-thread-placeholder: color-mix(in lch, var(--comment-thread-muted) 62%, var(--comment-thread-card-bg));
    --comment-thread-control-bg: var(--app-theme-control-bg, var(--shell-bg-button));
    --comment-thread-control-border: var(--app-theme-control-border, var(--comment-thread-card-border));
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.comment-thread--root {
    width: 100%;
    /* Measured Linear feed rhythm: 18px of air AFTER every comment card (before the next card,
       event line or the composer); only 8px between a run of event lines and the card below. */
    margin: 0 0 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}

.comment-thread--root.comment-thread--chrome {
    border: 0.5px solid var(--comment-thread-surface-border, var(--comment-thread-card-border));
    background: var(--comment-thread-surface-bg, var(--comment-thread-card-bg));
    box-shadow: var(--comment-thread-card-shadow);
}

.comment-thread--root.comment-thread--full-bleed {
    width: calc(100% + 16px);
    margin-left: -8px;
    margin-bottom: 18px;
}

.activity-event + .comment-thread--root {
    margin-top: 8px;
}

/* Measured JAM-153/JAM-138/JAM-5 (2026-09-05): Linear pads a run of event rows 8px below before
   whatever follows — a comment card, a session card or the composer; cards then own 18px after. */
.activity-event + .agent-activity-card,
.activity-event + .activity-feed__composer {
    margin-top: 8px;
}

.comment-thread__source-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 16px;
    border-bottom: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__footer {
    border-top: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: transparent;
    border: 0;
}

.comment-thread__item--top-level {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    padding: 14px 16px;
}

.comment-thread__item--top-level:not(.comment-thread__item--top-cap) {
    border-top: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__item--top-cap {
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 8px 8px 2px 2px;
}

.comment-thread__item--bottom-cap {
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 2px 2px 8px 8px;
}

.comment-thread__item--single {
    padding: 16px;
    border-radius: 8px;
}

.comment-thread__item--reply {
    padding: 14px 0 0;
}

/* Hairline between stacked entries in a thread card (parent → reply, reply → reply), matching
   the divider above the reply composer. First-level replies pull the line edge-to-edge through
   the card's horizontal padding; deeper nesting keeps the inset line. Spacing is symmetric:
   14px above and below every divider (the container margin is absorbed at the first level so
   the gap above the line doesn't double up). */
.comment-thread__replies .comment-thread__item--reply {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid var(--comment-thread-divider);
}

/* Measured Linear thread rhythm (JAM-153, root + agent reply + human reply + composer): the root
   keeps its full 16px bottom padding, then every entry is separated by the 0.5px divider with
   14px padding on BOTH sides of it (reply items are padding 14px 16px, full width), and the
   reply composer sits 11px below the last divider (46px tall). Root text → reply header 30.5,
   reply → reply 28.5, last reply → composer 25.5. */
.comment-thread__item--top-level:has(> .comment-thread__replies) {
    padding-bottom: 0;
}

.comment-thread__item--top-level > .comment-thread__replies {
    margin: 16px -16px 0;
}

.comment-thread__item--top-level > .comment-thread__replies > .comment-thread--nested > .comment-thread__item--reply {
    margin: 0;
    padding: 14px 16px;
}

.comment-thread__item--top-level > .comment-thread__replies > .comment-thread--nested > .comment-thread__item--reply:not(:first-child) {
    margin-top: 0;
}

.comment-thread__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    flex: 0 0 18px;
    object-fit: cover;
}

.ui-avatar.comment-thread__avatar {
    display: inline-flex;
}

.comment-thread__avatar--fallback {
    display: inline-grid;
    place-items: center;
    background: var(--ui-avatar-bg, var(--comment-thread-control-bg));
    color: var(--ui-avatar-text, lch(100% 0 0));
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 1;
}

.comment-thread__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.comment-thread__author,
.comment-thread__timestamp,
.comment-thread__attachment-name,
.comment-thread__attachment-size {
    letter-spacing: 0;
}

.comment-thread__text {
    letter-spacing: -0.1px;
}

.comment-thread__meta {
    display: inline-flex;
    align-items: center;
    /* Measured Linear (JAM-125 + JAM-153 headers): name → time = 8.0px. */
    gap: 8px;
    min-width: 0;
}

.comment-thread__author {
    color: var(--comment-thread-author-color, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.comment-thread__timestamp {
    color: var(--comment-thread-timestamp-color, var(--comment-thread-muted));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

/* Measured Linear (JAM-125) agent-authored comment: after the timestamp, "on behalf of" in the
   timestamp style (13/450 muted, ~4px in) and the human name 13/450 in the primary colour as a
   plain link — no second avatar, no bold. */
.comment-thread__on-behalf {
    margin: 0;
    color: var(--comment-thread-timestamp-color, var(--comment-thread-muted));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    white-space: nowrap;
}

.comment-thread__on-behalf-name {
    color: var(--comment-thread-author-color, var(--shell-text-primary));
    font-weight: 450;
    text-decoration: none;
}

/* Agent-session card header ("Linear  started by  Connor Roche  5min") and activity line
   (status glyph + text). */
.comment-thread__started-by {
    color: var(--comment-thread-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.comment-thread__creator {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.comment-thread__status-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment-thread__status-glyph {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 1.25rem;
    color: var(--comment-thread-muted);
}

/* Mention-triggered agent turn inside a thread (measured Linear JAM-153, classic-dark):
   while working, the reply-shaped row shows the agent avatar · name (13/500) · a 13/500 shimmering
   status ("Working…", "Updating issue…") where the timestamp sits, with no body and no actions.
   A turn that only performed actions leaves a 16px outcome line 12px under the triggering comment's
   body: 16px glyph inset 7px, actor 12/500 primary, text 12/450 muted, gap 4. */
.comment-thread__working {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    white-space: nowrap;
}

.comment-thread__outcome {
    display: flex;
    align-items: center;
    height: 16px;
    gap: 4px;
    margin-top: 12px;
}

.comment-thread__outcome-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 7px;
    color: var(--comment-thread-muted);
}

.comment-thread__outcome-actor {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

.comment-thread__outcome-text {
    color: var(--comment-thread-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

/* Agent hover card (measured Linear, delegate pill on JAM-153): 197px panel, 0.5px border,
   radius 8, 5px 8px padding; identity block padded 4px with a 32px mark, the name as a link
   chip (13px/500, 3px 5px, radius 4) and handle 12px/450 + "Agent" badge on the second line. */
.agent-hover-card-panel .ui-hover-card__surface {
    width: 197px;
    padding: 5px 8px;
    box-sizing: border-box;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-menu-bg, var(--assistant-panel-bg));
    /* Same hairline elevation as the issue hover cards (measured 0 0.5px 1px 1px @ 0.3). */
    box-shadow: var(--shell-hover-card-shadow, lch(0 0 0 / 0.3) 0 0.5px 1px 1px);
}

.agent-hover-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 0.6875rem;
    line-height: 1;
}

.agent-hover-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px;
}

.agent-hover-card__mark {
    flex: 0 0 32px;
}

.agent-hover-card__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.agent-hover-card__name {
    display: inline-block;
    align-self: flex-start;
    margin: -4px -5px;
    padding: 4px 5px;
    border-radius: 4px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
    text-decoration: none;
}

a.agent-hover-card__name:hover {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
}

.agent-hover-card__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    /* Measured: meta line 19px below the name text = 16px name + 1px column gap + 2px. */
    margin-top: 2px;
    line-height: 1rem;
}

.agent-hover-card__handle {
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.agent-hover-card__badge {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    box-sizing: border-box;
    border: 0.5px solid var(--shell-border);
    border-radius: 6px;
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.agent-hover-card__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 4px;
}

.agent-hover-card__row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--shell-menu-text-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
}

.agent-hover-card__row-link {
    color: var(--shell-text-primary);
    text-decoration: none;
}

.agent-hover-card__footer {
    padding: 0 4px 4px;
}

/* Agent activity card (measured Linear, JAM-153 activity feed): raised 8px card; 40px header
   (padding 6px 16px) with 18px mark, 13px/500 name, muted "started by", creator, time and a
   24px ⋯; 40px body row (padding 0 20px 0 17px) is the open affordance — 16px status glyph,
   toned status label, one-line muted text, 16px › chevron. */
.agent-activity-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    /* Measured JAM-153 (classic-dark): bg lch(16.361 2.713 272.695) = the board-card surface,
       0.5px ring lch(24.761 3.913 272.695) = white/0.1 over that surface (the board-card ring),
       no resting shadow (Linear's is a transparent 1px ring), root colour white. */
    border: 0.5px solid var(--board-card-ring, var(--shell-border));
    border-radius: 8px;
    background: var(--board-card-bg, var(--shell-bg-active));
    box-shadow: none;
    color: var(--shell-text, var(--shell-text-primary));
    outline: none;
}

.agent-activity-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 40px;
    padding: 6px 16px;
    box-sizing: border-box;
    /* Measured JAM-138 (classic-dark): the header/body split is a 0.5px full-width rule in
       the same token as the outer ring, inside the 40px header box (card stays 81px). */
    border-bottom: 0.5px solid var(--board-card-ring, var(--shell-border));
}

.agent-activity-card__identity {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

.agent-activity-card__mark {
    margin-right: 6px;
}

/* Measured: labels 91.636 (classic-dark) / 18.888 (light) — the group-header text tier — and
   muted runs 66.544 / 40; both are theme tokens, not the shell's primary/secondary pair. */
.agent-activity-card__name,
.agent-activity-card__creator {
    color: var(--agent-surface-text, var(--shell-text-primary));
}

.agent-activity-card__started-by,
.agent-activity-card__time {
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

.agent-activity-card__time {
    margin-left: 5px;
}

.agent-activity-card__options {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.agent-activity-card__options-button {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
}

.agent-activity-card__body {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px 0 17px;
    box-sizing: border-box;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
    outline: none;
}

.agent-activity-card__body:hover {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    border-radius: 0 0 8px 8px;
}

.agent-activity-card__body:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--shell-accent);
    border-radius: 0 0 8px 8px;
}

.agent-activity-card__status-icon,
.agent-activity-card__chevron {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

.agent-activity-card__status-icon--loader {
    color: var(--shell-text, var(--shell-text-primary));
}

.agent-activity-card__options-button .shell-icon {
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

/* Measured: the "Finished" label sits in the muted tier (66.544 classic-dark / 40 light); only
   the Error/Warning tones tint it. */
.agent-activity-card__status-label {
    flex: 0 0 auto;
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

.agent-activity-card__status-label--error {
    color: var(--agent-session-error-text, var(--issue-priority-urgent, lch(80 80 29)));
}

.agent-activity-card__status-label--warning {
    color: var(--status-warning-text, lch(78 70 80));
}

.agent-activity-card__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

/* Measured running card (JAM-153): tool-call arguments in the excerpt use the log's code span —
   mono 12/500, same muted tier. */
.agent-activity-card__text--mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Measured Linear card summary: inline code spans render in the code font at 12.1875/500 on the
   13px line; everything else is the raw markdown text. */
.agent-activity-card__code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 12.1875px;
    font-weight: 500;
    color: inherit;
}

.agent-activity-card__chevron {
    margin-left: auto;
}

/* Measured running/finished card extras: elapsed timer 13/500 muted before the chevron; text
   drops to the soft tier once finished; attachment pill 24px radius 48 with a 14px glyph. */
.agent-activity-card__elapsed {
    flex: 0 0 auto;
    color: var(--agent-surface-muted, var(--shell-text-secondary));
    white-space: nowrap;
}

.agent-activity-card__text--soft {
    color: var(--agent-surface-soft, var(--shell-text-tertiary));
}

.agent-activity-card__trailing {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.agent-attachment-chip {
    display: inline-flex;
    align-self: center;
    align-items: center;
    height: 24px;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 0.5px solid var(--agent-session-notice-ring, var(--shell-border));
    border-radius: 48px;
    background: var(--board-card-bg, var(--shell-bg-active));
    color: var(--agent-surface-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.agent-attachment-chip .shell-icon {
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}


/* Measured: each session card in Linear's activity feed sits in an item padded 18px below
   (card 81 → item 99) whatever follows it — another card, an event row or the composer. */
.activity-feed > .agent-activity-card {
    margin-bottom: 18px;
}

.comment-thread__header-actions {
    position: absolute;
    top: -5px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 30px;
    box-sizing: border-box;
    padding: 1px 1px 1px 50px;
    border-radius: 9999px;
    background: linear-gradient(to right, transparent, var(--comment-thread-card-bg) 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
}

.comment-thread--root.comment-thread--chrome .comment-thread__header-actions {
    background: linear-gradient(to right, transparent, var(--comment-thread-surface-bg, var(--comment-thread-card-bg)) 45%);
}

.comment-thread__header-actions .ui-icon-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    color: var(--comment-thread-text);
}

.comment-thread__item:hover:not(:has(.comment-thread__item:hover)) > .comment-thread__header > .comment-thread__header-actions,
.comment-thread__item:focus-within:not(:has(.comment-thread__item:focus-within)) > .comment-thread__header > .comment-thread__header-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Working rows (agent turn in flight) are header-only: the hidden body must not keep its flex box. */
.comment-thread__body[hidden] {
    display: none;
}

.comment-thread__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    box-sizing: border-box;
}

.comment-thread__body--image,
.comment-thread__body--attachment {
    gap: 8px;
}

.comment-thread__item--top-level .comment-thread__body {
    padding-left: 0;
}

/* Reply bodies align with the sender name (avatar 18px + 9px gap), Linear-style —
   the avatar hangs in the left gutter. */
.comment-thread__item--reply .comment-thread__body {
    padding-left: 27px;
}

.comment-thread__text {
    margin: 0;
    max-width: 788px;
    color: var(--comment-thread-body-color, var(--comment-thread-text));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    white-space: pre-wrap;
}

.comment-thread__body--image .comment-thread__text,
.comment-thread__body--attachment .comment-thread__text {
    max-width: 761px;
}

.comment-thread__item--top-level .comment-thread__body--image,
.comment-thread__item--top-level .comment-thread__body--attachment {
    padding-left: 27px;
}

.comment-thread__image-preview {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 6px;
    background: transparent;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    cursor: zoom-in;
}

.comment-thread__body--image .comment-thread__image-preview {
    margin-top: 6px;
}

.comment-thread__attachment {
    display: inline-flex;
    align-items: center;
    width: 761px;
    height: 47px;
    max-width: 100%;
    padding: 6px;
    gap: 6px;
    border: 0.5px solid var(--comment-thread-card-border);
    border-radius: 6px;
    background: var(--comment-thread-card-bg);
    box-shadow: var(--comment-thread-card-shadow);
    overflow: hidden;
}

.comment-thread__attachment-icon-wrap {
    display: inline-flex;
    align-items: center;
    width: 32px;
    min-width: 32px;
    height: 34px;
    color: var(--comment-thread-muted);
}

.comment-thread__attachment-meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0;
}

.comment-thread__attachment-name {
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-thread__attachment-size {
    margin-top: 2px;
    color: var(--comment-thread-muted);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.comment-thread__attachment-download.ui-icon-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-right: 4px;
    color: var(--comment-thread-muted);
}

.comment-thread__replies {
    margin-top: 16px;
}

/* Stock reaction pills (measured Linear comment reactions): 24px, padding 0 8px, gap 4,
   hairline ring, 12/450 count; reacted-by-me = 10% accent tint. */
.reaction-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.reaction-bar__reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--comment-thread-card-border, var(--shell-border));
    border-radius: 9999px;
    background: transparent;
    color: var(--comment-thread-text, var(--shell-text-primary));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1;
    cursor: pointer;
}

.reaction-bar__reaction:hover {
    background: var(--shell-bg-hover);
}

.reaction-bar__reaction--active {
    background: color-mix(in lch, var(--app-theme-accent, var(--shell-accent, #5e6ad2)) 10%, var(--comment-thread-card-bg, var(--shell-bg)));
    border-color: color-mix(in lch, var(--app-theme-accent, var(--shell-accent, #5e6ad2)) 10%, var(--comment-thread-card-border, var(--shell-border)));
}

.reaction-bar__reaction:disabled {
    opacity: 0.6;
    cursor: default;
}

.reaction-bar__reaction:disabled:hover {
    background: transparent;
}

.reaction-bar__emoji {
    font-size: 0.8125rem;
    line-height: 1;
}

.reaction-bar__count {
    font-variant-numeric: tabular-nums;
}

.comment-thread__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.comment-thread__reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--comment-thread-card-border);
    border-radius: 9999px;
    background: transparent;
    color: var(--comment-thread-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1;
    cursor: pointer;
}

.comment-thread__reaction:hover {
    background: var(--shell-bg-hover);
}

/* Reacted-by-me chip: low-chroma accent tint + accent hairline (Linear: bg lch(92% 5 282),
   border lch(85% 2.5 282) on light) — derived from the accent so it tracks any theme. */
.comment-thread__reaction--active {
    background: color-mix(in lch, var(--app-theme-accent, var(--shell-accent, #5e6ad2)) 10%, var(--comment-thread-card-bg));
    border-color: color-mix(in lch, var(--app-theme-accent, var(--shell-accent, #5e6ad2)) 10%, var(--comment-thread-card-border));
}

.comment-thread__reactions .comment-thread__reaction-add .emoji-picker__trigger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--comment-thread-muted);
    cursor: pointer;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.comment-thread__reactions .comment-thread__reaction-add .emoji-picker__trigger-button:hover {
    background: var(--shell-bg-hover);
    color: var(--shell-text-primary);
}

.comment-thread__reaction-emoji {
    font-size: 0.8125rem;
    line-height: 1;
}

.comment-thread__reaction-count {
    font-variant-numeric: tabular-nums;
}

.comment-thread__footer--reply-composer {
    padding: 0;
}

.comment-thread__footer--reply-composer .comment-composer {
    /* Measured Linear reply composer: 806×46, padding 11px 16px. */
    padding: 11px 16px;
}

.emoji-picker {
    display: inline-flex;
    min-width: 0;
}

.emoji-picker__trigger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.emoji-picker__trigger-button:hover {
    background: var(--shell-bg-hover);
    color: var(--shell-text-primary);
}

.emoji-picker__popover {
    z-index: 1100;
}

.emoji-picker__popover[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.emoji-picker__surface {
    display: flex;
    flex-direction: column;
    width: 316px;
    max-width: calc(100vw - 16px);
    max-height: 348px;
    overflow: hidden;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 8px;
    background: var(--shell-menu-bg, var(--shell-bg-surface));
    box-shadow: 0 8px 24px lch(0 0 0 / 0.18), 0 2px 6px lch(0 0 0 / 0.12);
    color: var(--shell-text-primary);
}

.emoji-picker__search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--shell-menu-border, var(--shell-border));
}

.emoji-picker__search-icon {
    flex-shrink: 0;
    color: var(--shell-text-secondary);
}

.emoji-picker__search {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 13px;
}

.emoji-picker__search::placeholder {
    color: var(--shell-text-secondary);
}

.emoji-picker__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 10px;
    overscroll-behavior: contain;
}

.emoji-picker__group-label {
    padding: 8px 4px 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--shell-text-secondary);
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.emoji-picker__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__emoji:hover {
    background: var(--shell-bg-hover);
}

.emoji-picker__empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--shell-text-secondary);
}

.activity-feed {
    --activity-feed-rail-color: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border)));
    --activity-feed-rail-mask: var(--app-theme-bg, var(--shell-bg-surface));
    --activity-event-text: var(--shell-text-secondary);
    position: relative;
    display: flex;
    flex-direction: column;
    /* Contain the connector rail's z-index:-1 in a local stacking context so it sits behind the node
       icons (which mask it) but in front of the feed's own backdrop. */
    isolation: isolate;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Connector rail (Linear parity): instead of one continuous line down the whole feed — which stubbed
   into the gaps around interleaved comment cards — each event node draws a 1px segment from its own
   node down to the NEXT item's node, but only when that next item is also an .activity-event. So the
   rail links consecutive event nodes and stops cleanly at comment cards (any non-.activity-event
   sibling breaks it) with no dangling stubs. The segment runs from just under this row's node
   (an 18px roundel spans y5.4–23.4 in the 28.8px row; a 14px glyph sits inside that) to just above
   the next row's node, so no node needs an opaque mask over the line — the rail reads the same on
   any surface (app background, docs card, dialog). */
.activity-event:has(+ .activity-event)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 23.4px;
    bottom: -5.4px;
    width: 1px;
    background: var(--activity-feed-rail-color);
    z-index: -1;
    pointer-events: none;
}

.activity-feed > * {
    position: relative;
}

.activity-feed > .comment-thread,
.activity-feed > .comment-composer {
    z-index: 1;
}

.activity-feed > .comment-thread--full-bleed {
    width: 100%;
    margin-left: 0;
}

/* Measured Linear column (791 @1728): agent session cards and the comment composer bleed
   --activity-feed-bleed (8px) past the text column on both sides; the composer wrapper follows
   the last row with no gap. */
.activity-feed__composer {
    position: relative;
    z-index: 1;
}

.activity-feed--bleed > .agent-activity-card,
.activity-feed--bleed > .activity-feed__composer {
    width: auto;
    margin-left: calc(-1 * var(--activity-feed-bleed, 8px));
    margin-right: calc(-1 * var(--activity-feed-bleed, 8px));
}

/* Measured JAM-153 feed: comment thread cards bleed the same 8px as session cards and the
   composer (807 in the 791 column), so all three share one edge. */
.activity-feed--bleed > .comment-thread--root {
    width: auto;
    margin-left: calc(-1 * var(--activity-feed-bleed, 8px));
    margin-right: calc(-1 * var(--activity-feed-bleed, 8px));
}

.activity-event {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    box-sizing: border-box;
    min-width: 0;
    /* Linear feed rows sit on a 28.8px pitch; our 16.8px line + 6px above and below lands it. */
    padding: 6px 0 6px 16px;
}

.activity-event__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 16.8px;
    /* No mask fill: the rail segment stops short of the node, so a glyph never sits on a square
       of app background when the feed is on another surface. */
    background: transparent;
    color: var(--activity-event-text);
}

.activity-event__avatar {
    display: block;
    width: 18px;
    height: 18px;
    margin-left: -2px;
    border-radius: 9999px;
    object-fit: cover;
}

.activity-event__initials {
    display: inline-grid;
    place-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-left: -2px;
    border-radius: 9999px;
    background: var(--ui-avatar-bg, var(--app-theme-control-bg, var(--shell-bg-button)));
    color: var(--ui-avatar-text, var(--shell-text-primary));
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 1;
}

.activity-event__copy {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    color: var(--activity-event-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 16.8px;
    word-break: break-word;
}

/* Agent-for-actor roundel: the badged avatar sits where the plain 18px avatar sits (-2px). */
.activity-event__icon .ui-agent-badged-avatar {
    margin-left: -2px;
}

/* Collapsed run of events (measured JAM-133): the "Show N events: …" label is plain event copy —
   12/450 in the muted event-text colour, role=button with the default cursor; Linear shows no
   hover treatment. Keyboard users get the focus ring. */
.activity-event__expand {
    color: var(--activity-event-text);
    cursor: default;
}

.activity-event__expand:focus-visible {
    outline: 2px solid var(--shell-focus-ring, var(--shell-accent));
    outline-offset: 2px;
    border-radius: 4px;
}

.activity-event__copy strong,
.activity-event__copy b {
    font-weight: 500;
}

/* Entity links inside event copy (measured Linear): rest on the same muted tier as the copy at
   450 — only member names and changed values step up to 500. */
.activity-event__copy a {
    color: var(--activity-event-text);
    font-weight: 450;
    text-decoration: none;
}

.activity-event__copy a:hover {
    text-decoration: underline;
}

.activity-event__separator {
    color: var(--activity-event-text);
}

.activity-event__time {
    color: var(--activity-event-text);
}

.activity-event__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--activity-event-text);
    font-weight: 450;
}

.activity-event__label::before {
    content: "";
    width: 12px;
    height: 16.8px;
    background: radial-gradient(circle 4.5px at 50% 50%, var(--activity-event-label-color, currentColor) 100%, transparent 100%);
}

.activity-event__inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 14px;
    color: var(--activity-event-text);
}

.comment-composer.comment-composer--card {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    min-height: 83px;
    padding: 12px 16px;
    column-gap: 12px;
    border: 0.5px solid var(--comment-thread-card-border);
    border-radius: 8px;
    background: var(--comment-thread-card-bg);
    box-shadow: var(--comment-thread-card-shadow, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

.comment-composer--card .comment-composer__input {
    grid-column: 1 / -1;
    align-self: start;
}

.comment-composer--card .comment-composer__attach {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.comment-composer--card .comment-composer__submit {
    grid-column: 3;
    grid-row: 2;
}

.comment-composer {
    --comment-thread-card-bg: var(--app-theme-card-bg, var(--shell-menu-bg, lch(15.736% 2.713 272.695 / 1)));
    --comment-thread-card-border: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border, lch(22.936% 3.913 272.695 / 1))));
    --comment-thread-text: var(--shell-text-tertiary, var(--shell-text-primary));
    --comment-thread-muted: var(--shell-text-secondary);
    --comment-thread-placeholder: color-mix(in lch, var(--comment-thread-muted) 62%, var(--comment-thread-card-bg));
    --comment-thread-control-bg: var(--app-theme-control-bg, var(--shell-bg-button));
    --comment-thread-control-border: var(--app-theme-control-border, var(--comment-thread-card-border));
    --comment-composer-submit-bg: var(--app-theme-accent, var(--shell-accent, #5e6ad2));
    --comment-composer-submit-icon: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.comment-composer--with-avatar {
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
}

.comment-composer--with-cancel.comment-composer--with-avatar {
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
}

.comment-composer__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    object-fit: cover;
}

.comment-composer__avatar--fallback {
    display: inline-grid;
    place-items: center;
    background: var(--ui-avatar-bg, var(--comment-thread-control-bg));
    color: var(--ui-avatar-text, lch(100% 0 0));
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 1;
}

.comment-composer__input {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    resize: none;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--comment-thread-text);
    font: 450 0.9375rem/1.5rem var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    letter-spacing: -0.1px;
    outline: none;
}

.comment-composer__input::placeholder {
    color: var(--comment-thread-placeholder, var(--comment-thread-muted));
}

.comment-composer__attach.ui-icon-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    color: var(--comment-thread-text);
}

.comment-composer__cancel.ui-button {
    height: 28px;
    min-height: 28px;
    color: var(--comment-thread-muted);
}

.comment-composer__submit.ui-button,
.comment-composer__submit.ui-icon-button {
    min-height: 24px;
    border-color: transparent;
    background: var(--comment-composer-submit-bg);
    color: var(--comment-composer-submit-icon);
    box-shadow: none;
}

.comment-composer__submit--icon.ui-icon-button {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
}

.comment-composer__submit--label.ui-button {
    height: 28px;
    min-height: 28px;
    padding-inline: 12px;
    border-color: var(--shell-border, lch(8.84% 1.38 272 / 1));
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    color: var(--comment-thread-text, var(--shell-menu-text, lch(90.895% 1.375 272 / 1)));
    box-shadow: var(--shell-shadow, lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0);
}

.comment-composer__submit--label.ui-button:has(.shell-icon) {
    padding-inline: 11px 8px;
}

.comment-composer__submit--label.ui-button:hover,
.comment-composer__submit--label.ui-button:focus-visible {
    border-color: var(--shell-border, lch(8.84% 1.38 272 / 1));
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

.comment-composer__submit.ui-button:disabled,
.comment-composer__submit.ui-icon-button:disabled,
.comment-composer__submit.ui-button--disabled,
.comment-composer__submit.ui-icon-button--disabled {
    background: var(--comment-thread-card-bg);
    color: var(--comment-thread-text);
    opacity: 1;
}

.comment-composer__submit--label.ui-button:disabled,
.comment-composer__submit--label.ui-button.ui-button--disabled {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    color: var(--comment-thread-text, var(--shell-menu-text, lch(90.895% 1.375 272 / 1)));
    opacity: 0.54;
}

.comment-thread__markdown {
    white-space: normal;
    overflow-wrap: anywhere;
}

.comment-thread__markdown > :first-child,
.comment-composer__preview > :first-child {
    margin-top: 0;
}

.comment-thread__markdown > :last-child,
.comment-composer__preview > :last-child {
    margin-bottom: 0;
}

.comment-thread__markdown p,
.comment-composer__preview p {
    margin: 0 0 10px;
}

.comment-thread__markdown ul,
.comment-thread__markdown ol,
.comment-composer__preview ul,
.comment-composer__preview ol {
    margin: 4px 0 10px;
    padding-left: 22px;
}

.comment-thread__markdown li + li,
.comment-composer__preview li + li {
    margin-top: 3px;
}

.comment-thread__markdown blockquote,
.comment-composer__preview blockquote {
    margin: 6px 0 10px;
    padding-left: 12px;
    border-left: 2px solid var(--comment-thread-control-border);
    color: var(--comment-thread-muted);
}

.comment-thread__markdown code,
.comment-composer__preview code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--comment-thread-control-bg);
    color: var(--shell-text-primary);
    font: 0.8125rem/1.35 var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.comment-thread__markdown pre,
.comment-composer__preview pre {
    max-width: 100%;
    margin: 6px 0 10px;
    padding: 10px 12px;
    border: 0.5px solid var(--comment-thread-control-border);
    border-radius: 6px;
    background: var(--comment-thread-control-bg);
    overflow-x: auto;
}

.comment-thread__markdown pre code,
.comment-composer__preview pre code {
    padding: 0;
    background: transparent;
}

.comment-thread__markdown a,
.comment-composer__preview a {
    color: var(--shell-accent, #5e6ad2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comment-composer--markdown {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 12px 16px 14px;
}

.comment-composer--markdown.comment-composer--with-avatar,
.comment-composer--markdown.comment-composer--with-cancel.comment-composer--with-avatar {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
}

.comment-composer--markdown .comment-composer__avatar {
    margin-top: 7px;
}

.comment-composer__editor {
    min-width: 0;
    border: 0.5px solid var(--comment-thread-control-border);
    border-radius: 8px;
    background: var(--comment-thread-card-bg);
    overflow: hidden;
}

.comment-composer__mode-row {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 12px;
    border-bottom: 0.5px solid var(--comment-thread-control-border);
}

.comment-composer__mode-tabs {
    display: inline-flex;
    align-self: stretch;
    gap: 16px;
}

.comment-composer__mode-tab {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--comment-thread-muted);
    font: 500 0.75rem/1 var(--font-regular, Inter, ui-sans-serif, system-ui, sans-serif);
    letter-spacing: 0;
    cursor: pointer;
}

.comment-composer__mode-tab[aria-selected="true"] {
    color: var(--shell-text-primary);
}

.comment-composer__mode-tab[aria-selected="true"]::after {
    position: absolute;
    right: 0;
    bottom: -0.5px;
    left: 0;
    height: 2px;
    background: var(--shell-accent, #5e6ad2);
    content: "";
}

.comment-composer__mode-tab:focus-visible {
    outline: 2px solid var(--shell-focus-ring, var(--shell-accent, #5e6ad2));
    outline-offset: 3px;
}

.comment-composer__markdown-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    overflow-x: auto;
}

.comment-composer__markdown-toolbar .ui-icon-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    color: var(--comment-thread-muted);
}

.comment-composer--markdown .comment-composer__input {
    display: block;
    min-height: 84px;
    padding: 12px;
    box-sizing: border-box;
}

.comment-composer__preview {
    min-height: 84px;
    padding: 12px;
    box-sizing: border-box;
    color: var(--comment-thread-text);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.35rem;
    overflow-wrap: anywhere;
}

.comment-composer__preview-empty {
    color: var(--comment-thread-muted);
}

.comment-composer__actions {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-top: 0.5px solid var(--comment-thread-control-border);
}

/* ── Rich comment composer (Linear anatomy): avatar pinned top-left beside the first line,
      the field spanning the width, and the controls on their own bottom-right row. ── */

/* Single row at rest and while the content stays on one line (plain-composer parity).
   Once the content wraps, wireComposerExpansion sets data-qui-expanded: the avatar pins
   top-left beside the first line and the controls drop to their own bottom-right row. */
.comment-composer--rich[data-qui-expanded] {
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "avatar field field field field"
        ". . attach cancel submit";
    align-items: start;
    row-gap: 8px;
}

.comment-composer--rich[data-qui-expanded] .comment-composer__avatar {
    grid-area: avatar;
    margin-top: 3px;
}

.comment-composer--rich[data-qui-expanded] .comment-composer__rich-field {
    grid-area: field;
}

.comment-composer--rich[data-qui-expanded] .comment-composer__attach {
    grid-area: attach;
    align-self: center;
}

.comment-composer--rich[data-qui-expanded] .comment-composer__cancel {
    grid-area: cancel;
    align-self: center;
}

.comment-composer--rich[data-qui-expanded] .comment-composer__submit {
    grid-area: submit;
    align-self: center;
}

.comment-composer__rich-field {
    --rich-text-min-height: 24px;
    min-width: 0;
}

.comment-composer__rich-field .ui-form__rich-text-editor {
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

.comment-composer__rich-field .ui-form__rich-text-content {
    padding: 0;
    color: var(--comment-thread-text);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    letter-spacing: -0.1px;
}

.comment-composer__rich-field .ui-form__rich-text-content p {
    margin: 0;
}

.comment-composer__rich-field [data-placeholder]::before {
    color: var(--comment-thread-placeholder, var(--comment-thread-muted));
}

/* Rich bodies in the thread: inherit the exact comment text typography, no renderer chrome. */
.comment-thread__rich-body {
    white-space: normal;
}

.comment-thread__rich-body .ui-form__rich-text-content,
.comment-thread__rich-body .ui-form__rich-text--renderer {
    min-height: 0;
    --rich-text-min-height: 0px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.comment-thread__rich-body .ui-form__rich-text-content p {
    margin: 0 0 8px;
}

/* "Last child" must ignore the hover chrome the renderer mounts inside the content —
   otherwise hovering media re-grants the real last block its default bottom margin
   and the card visibly grows. */
.comment-thread__rich-body .ui-form__rich-text-content > :nth-last-child(1 of :not(.ui-form__rich-text-media-toolbar, .ui-form__rich-text-chrome-backdrop, .ui-form__rich-text-chrome-menu)) {
    margin-bottom: 0;
}

.comment-thread__rich-body .ui-form__rich-text-content > :first-child {
    margin-top: 0;
}

/* ── Built-in comment options menu (shown when the item is editable and no caller menu
      is wired) — standard shell-menu recipe. ── */

.comment-thread__menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

.comment-thread__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 91;
    min-width: 160px;
    padding: 5px 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
}

.comment-thread__menu-separator {
    height: 0.5px;
    margin: 5px 0;
    background: var(--shell-menu-border, var(--shell-border));
}

.comment-thread__menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    flex: 0 0 auto;
}

.comment-thread__menu-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.comment-thread__menu-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
}

.comment-thread__menu-item:hover {
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.comment-thread__menu-item:hover::before {
    background: var(--shell-menu-item-hover);
}

.comment-thread__menu-item--danger,
.comment-thread__menu-item--danger:hover,
.comment-thread__menu-item--danger .comment-thread__menu-item-icon {
    color: var(--shell-menu-text-danger, lch(65% 40 25 / 1));
}

/* In-place edit: the composer replaces the body; strip its outer padding so it sits in the
   comment rhythm. Fixed two-row layout regardless of content size (the Linear edit state):
   editor spanning the top, attach bottom-left, Cancel/Save bottom-right. These rules must
   also beat the reply composer's rest/expanded grids, hence the doubled selectors. */
.comment-thread__body--editing {
    margin-top: 6px;
}

.comment-composer.comment-thread__edit-composer,
.comment-composer--rich.comment-thread__edit-composer,
.comment-composer--rich.comment-thread__edit-composer[data-qui-expanded] {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "field field field field"
        "attach . cancel submit";
    align-items: center;
    row-gap: 10px;
    padding: 0;
    min-height: 0;
}

.comment-thread__edit-composer .comment-composer__rich-field,
.comment-thread__edit-composer .comment-composer__input {
    grid-area: field;
}

.comment-thread__edit-composer .comment-composer__attach {
    grid-area: attach;
    justify-self: start;
}

.comment-thread__edit-composer .comment-composer__cancel {
    grid-area: cancel;
}

.comment-thread__edit-composer .comment-composer__submit {
    grid-area: submit;
}

.comment-thread__item--reply .comment-thread__body--editing {
    padding-left: 27px;
}

.comment-composer__action-spacer {
    flex: 1 1 auto;
}

@media (max-width: 560px) {
    .comment-composer--markdown,
    .comment-composer--markdown.comment-composer--with-avatar,
    .comment-composer--markdown.comment-composer--with-cancel.comment-composer--with-avatar {
        grid-template-columns: minmax(0, 1fr);
    }

    .comment-composer--markdown > .comment-composer__avatar {
        display: none;
    }

    .comment-composer__mode-row {
        align-items: flex-start;
        flex-direction: column;
        padding: 0 8px 6px 12px;
    }

    .comment-composer__mode-tabs {
        min-height: 34px;
    }

    .comment-composer__markdown-toolbar {
        width: 100%;
        justify-content: flex-start;
    }
}

.grid-region {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* The region owns its toolbar strip; geometry mirrors the page secondary-header row
   (43.5px min-height, 8px side padding) so page-hosted and embedded regions match. */
.grid-region__toolbar-strip {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 43.5px;
    padding: 0 8px;
    box-sizing: border-box;
}

.grid-region__tabs-row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Tab-less rows: caller content (or nothing) left, toolbar cluster pinned right with
   the same gap the pill-tabs actions slot uses. */
.grid-region__tabs-row-leading {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.grid-region__tabs-row-actions {
    display: flex;
    align-items: center;
    gap: var(--pill-tabs-actions-gap, 6px);
    margin-left: auto;
    flex: 0 0 auto;
}

/* Linear keeps the toolbar icon buttons pinned to the page's RIGHT edge: stretch the
   tabs slot (it shrink-wraps by default) so the pill-tabs space-between layout can
   push the actions cluster right. */
.tabbed-single-column-page__tabs:has(.grid-region__tabs-row) {
    flex: 1 1 auto;
    min-width: 0;
}

.grid-region__tabs-row .pill-tabs {
    margin-top: 0;
}

.grid-region__add-view-button {
    color: var(--shell-menu-text, lch(90.35% 1.15 272));
}

.grid-region__add-view-button .shell-icon svg path {
    fill: var(--add-view-icon-color, var(--shell-text-secondary));
}

.grid-region__tab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: visible;
}

.grid-region__tab-action {
    color: var(--shell-menu-text, lch(90.35% 1.15 272));
}

.grid-region__tab-action:hover,
.grid-region__tab-action:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.grid-region__tab-action[data-menu-open="true"] {
    background: var(--grid-toolbar-active-bg, var(--shell-bg-active, lch(11.849% 0.943 272 / 1)));
    color: var(--grid-toolbar-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.grid-region__grid-frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.grid-region__grid-frame[data-sidebar-open="true"] {
    grid-template-columns: minmax(0, 1fr) var(--grid-sidebar-width, 360px);
}

.grid-region__grid-viewport {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto hidden;
}

.grid-region__grid-viewport::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    z-index: 3;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    height: 100%;
    pointer-events: none;
    transform: translateX(-30px);
    box-shadow: 30px 0 0 0 var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1)));
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 100%
    );
}

.page-with-side-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns 260ms cubic-bezier(0.32, 0.72, 0, 1);
    --page-with-side-panel-main-padding-default: 0 8px;
}

.page-with-side-panel[data-main-layout="flush"] {
    --page-with-side-panel-main-padding-default: 0;
}

.page-with-side-panel__main {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--page-with-side-panel-main-padding, var(--page-with-side-panel-main-padding-default, 0 8px));
    box-sizing: border-box;
    overflow: hidden auto;
    scrollbar-width: none;
}

.page-with-side-panel__main::-webkit-scrollbar {
    display: none;
}

.page-with-side-panel[data-side-panel-open="true"] {
    grid-template-columns: minmax(0, 1fr) var(--page-side-panel-width, 396px);
}

body.page-side-panel-resizing .page-with-side-panel {
    transition: none !important;
}

.grid-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

.grid-toolbar__action {
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272 / 1));
}

/* Surface icons own their idle and hover fills through the IconButton variant. */
.grid-toolbar__action:where(:not(.ui-icon-button--surface)) {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

.grid-toolbar__action:hover,
.grid-toolbar__action:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.grid-toolbar__action .shell-icon,
.grid-toolbar__action .grid-toolbar__display-icon {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272 / 1));
}

.grid-toolbar__action[data-menu-open="true"] {
    background: var(--grid-toolbar-active-bg, var(--shell-bg-active, lch(11.849% 0.943 272 / 1)));
    color: var(--grid-toolbar-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

/* The pressed fill wins over the raised hover tint in every theme (the theme-scoped
   hover rules otherwise outrank the [data-menu-open] state while the pointer rests on
   the button). */
[data-app-theme] .ui-icon-button--raised[data-menu-open="true"],
[data-app-theme] .ui-button--raised[data-menu-open="true"] {
    background: var(--grid-toolbar-active-bg, var(--shell-bg-active, lch(11.849% 0.943 272 / 1)));
    color: var(--grid-toolbar-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

/* The active glyph lifts to full strength with the fill (measured on Linear's pressed
   insights toggle). */
.grid-region__tab-action[data-menu-open="true"] .shell-icon,
.grid-toolbar__action[data-menu-open="true"] .shell-icon {
    color: var(--grid-toolbar-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.grid-toolbar__display-wrap {
    position: relative;
    display: flex;
    overflow: visible;
}

.grid-toolbar__display-button {
    position: relative;
}

.grid-toolbar__display-icon {
    position: relative;
    display: inline-flex;
}

.grid-toolbar__display-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--shell-bg-surface, lch(5.52% 0.4 272 / 1));
    border-radius: 50%;
    background: var(--app-theme-accent, var(--shell-accent, lch(47.918% 59.303 288.421 / 1)));
}

.filters-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 2040;
    background: transparent;
    cursor: default;
}

.filters-menu__positioner {
    position: absolute;
    top: 31.75px;
    right: -5.2px;
    z-index: 2050;
    overflow: visible;
}

.filters-menu__positioner[data-horizontal-alignment="start"] {
    right: auto;
    left: -5.2px;
}

.filters-menu__positioner[data-open-direction="up"] {
    top: auto;
    bottom: 31.75px;
}

.filters-menu__panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.filters-menu__positioner[data-open-direction="up"] .filters-menu__panel {
    top: auto !important;
    bottom: 0;
}

.filters-menu__header {
    flex: 0 0 auto;
}

.filters-menu__search-form {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 36.5px;
    padding: 0 12px 0 14px;
}

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

.filters-menu__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 10px 0 9px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    outline: none;
}

.filters-menu__input::placeholder {
    color: var(--shell-menu-indicator, lch(36.308% 1.15 272 / 1));
    opacity: 1;
}

.filters-menu__shortcut {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.filters-menu__shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17.1px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    background: transparent;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
    box-sizing: border-box;
}

.filters-menu__scroll {
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: none;
}

.filters-menu__scroll::-webkit-scrollbar {
    display: none;
}

.filters-menu__list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: transparent;
}

.filters-menu__item {
    position: relative;
    height: 32px;
}

.filters-menu__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.filters-menu__item--focused::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.filters-menu__item:hover::before,
.filters-menu__item:focus-within::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.filters-menu__item--group-start {
    margin-top: 12px;
}

.filters-menu__item--group-start::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    border-top: 0.5px solid var(--shell-menu-divider, lch(16.668% 1.15 272 / 1));
}

.filters-menu__row-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 18px 0 14px;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.filters-menu__icon,
.filters-menu__choice-icon,
.filters-menu__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.filters-menu__icon,
.filters-menu__choice-icon {
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
}

.filters-menu__chevron {
    margin-left: 6px;
    color: var(--shell-menu-indicator, lch(39.91% 1.375 272 / 1));
    width: 16px;
    height: 8px;
}

/* Hover-opened flyout panels carry Linear's deeper 4-layer shadow; the anchored
   root keeps the standard menu shadow. */
.filters-menu__panel[data-menu-level]:not([data-menu-level="0"]) {
    box-shadow:
        lch(0 0 0 / 0.1) 0px 4px 40px 0px,
        lch(0 0 0 / 0.125) 0px 3px 20px 0px,
        lch(0 0 0 / 0.125) 0px 3px 12px 0px,
        lch(0 0 0 / 0.125) 0px 2px 8px 0px;
}

.filters-menu__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: 0 3.5px;
    border-radius: 9999px;
}

.filters-menu__avatar {
    flex: 0 0 auto;
}

.filters-menu__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 4px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
}

.filters-menu__group-prefix {
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
}

.filters-menu__group-sep {
    display: inline-block;
    margin: 0 4px;
    color: lch(45.531% 4.534 282.863 / 1);
    vertical-align: baseline;
}

.filters-menu__label,
.filters-menu__secondary {
    font-size: 0.8125rem;
    line-height: 1.21875rem;
}

.filters-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filters-menu__secondary {
    flex: 0 0 auto;
    color: var(--shell-menu-indicator, lch(39.91% 1.375 272 / 1));
    font-weight: 450;
    white-space: nowrap;
}

.filters-menu__choice-leading {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filters-menu__choice-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 4px;
    color: transparent;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
}

.filters-menu__choice-box--selected {
    border-color: lch(47.918% 59.303 288.421 / 1);
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 0 272 / 1);
}

/* Linear reveals the checkbox only on row hover / keyboard focus / when checked;
   the slot keeps its width so the icon column never shifts. */
.filters-menu__choice-box:not(.filters-menu__choice-box--selected) {
    opacity: 0;
    transition: opacity 80ms ease;
}

.filters-menu__item:hover .filters-menu__choice-box,
.filters-menu__item--focused .filters-menu__choice-box,
.filters-menu__item:focus-within .filters-menu__choice-box {
    opacity: 1;
}

.filters-menu__item--focused .filters-menu__row-button,
.filters-menu__item:hover .filters-menu__row-button,
.filters-menu__item:focus-within .filters-menu__row-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

/* Band host: the rounded filter surface (measured Linear fullscreen insights 2026-08-25:
   45px min height, r8, 10px padding, 0.5px border, band tokens). Pure chrome — hosts
   place it (margins/width) and decide when it renders; the FilterBar row goes inside. */
.filter-band {
    display: flex;
    align-items: center;
    min-height: 45px;
    padding: 10px;
    border: 0.5px solid var(--shell-filter-band-border, var(--shell-border, lch(13.08% 1.48 272 / 1)));
    border-radius: 8px;
    background: var(--shell-filter-band-bg, lch(9.345% 0.85 272 / 1));
    box-sizing: border-box;
}

/* The grid hosts its band flush under the toolbar with the page's 8px gutters. */
.grid-region__filter-band,
.filter-band--grid {
    flex: 0 0 auto;
    margin: 0 8px 8px;
}

/* Pure chip row — no surface chrome of its own; a FilterBand (or any host panel)
   provides the surface around it. */
.filter-bar {
    position: relative;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.filter-bar__filters {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-bar__group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 24px;
    border: 0.5px solid var(--shell-filter-chip-border, lch(27.12% 1.48 272 / 1));
    border-radius: 8px;
    overflow: visible;
}

.filter-bar__segment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 23px;
    padding: 0 6px;
    border: 0;
    border-right: 0.5px solid var(--shell-filter-chip-border, lch(27.12% 1.48 272 / 1));
    background: var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    white-space: nowrap;
    cursor: default;
}

.filter-bar__group > .filter-bar__segment:first-child {
    border-radius: 7.5px 0 0 7.5px;
}

.filter-bar__segment span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-bar__segment--field,
.filter-bar__segment--operator,
.filter-bar__segment--value {
    flex: 0 1 auto;
}

.filter-bar__segment--operator {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.filter-bar__group--advanced .filter-bar__segment--advanced {
    border-right: 0.5px solid var(--shell-filter-chip-border, lch(27.12% 1.48 272 / 1));
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.filter-bar__operator-wrap {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

/* The value segment keeps its border-right: it is the divider between the value and the
   x-remove segment (measured on Linear). */

/* Advanced-filter chips: ONE continuous fill with inline field/operator/value runs and
   muted or/and connectors — no internal segment dividers (measured on Linear). */
.filter-bar__segment--expression {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 23px;
    padding: 0 6px;
    border: 0;
    border-right: 0.5px solid var(--shell-filter-chip-border, lch(27.12% 1.48 272 / 1));
    border-radius: 7.5px 0 0 7.5px;
    background: var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    white-space: nowrap;
    cursor: default;
    overflow: hidden;
}

.filter-bar__segment--expression .shell-icon {
    flex: 0 0 auto;
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.filter-bar__expression-field {
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
}

.filter-bar__expression-operator,
.filter-bar__connector {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.filter-bar__connector {
    padding: 0 4px;
}

.filter-bar__segment .shell-icon {
    flex: 0 0 auto;
    color: currentColor;
}

.filter-chip-summary {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.filter-chip-summary__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-chip-summary__stack {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.filter-chip-summary__stack > * + * {
    margin-left: -3px;
}

.filter-chip-summary__stack .shell-icon {
    width: 12px;
    height: 12px;
    padding: 1px;
    border-radius: 9999px;
    background: var(--shell-filter-chip-bg, lch(10.691% 0.493 272 / 1));
    box-sizing: content-box;
}

.filter-chip-summary__avatar,
.filter-chip-summary__code,
.filter-chip-summary__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid var(--shell-filter-chip-bg, lch(10.691% 0.493 272 / 1));
    border-radius: 9999px;
    background: var(--filter-value-color, lch(28% 2 272 / 1));
    box-sizing: border-box;
}

.filter-chip-summary__avatar {
    object-fit: cover;
}

.filter-chip-summary__code {
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.filter-chip-summary__dot {
    width: 8px;
    height: 8px;
    border: 0;
    background: var(--filter-value-color, currentColor);
}

.filter-chip-summary__icon {
    display: inline-flex;
    align-items: center;
    color: var(--filter-value-color, currentColor);
}

.filter-chip-summary--colordot {
    gap: 5px;
}

.filter-bar__remove,
.filter-bar__add {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
}

.filter-bar__remove {
    margin-left: 0;
    height: 23px;
    min-height: 23px;
    border-radius: 0 7.5px 7.5px 0;
    background: var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
}

.filter-bar__remove .shell-icon {
    color: var(--shell-menu-hint, lch(61.399% 1.15 272 / 1));
}

.filter-bar__add {
    margin-left: 0;
}

.filter-bar__remove:hover,
.filter-bar__remove:focus-visible,
.filter-bar__add:hover,
.filter-bar__add:focus-visible,
.filter-bar__action:hover,
.filter-bar__action:focus-visible {
    background: var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
}

.filter-bar__action--save:hover,
.filter-bar__action--save:focus-visible {
    background: color-mix(
        in oklab,
        var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1)) 88%,
        var(--shell-menu-text, lch(90.35% 1.15 272 / 1)) 12%);
}

/* Every chip segment brightens one step on hover — field, operator, value, the advanced
   expression run, and the x-remove segment each highlight independently. */
.filter-bar__segment--field:hover,
.filter-bar__segment--operator:hover,
.filter-bar__segment--value:hover,
.filter-bar__segment--expression:hover,
.filter-bar__remove:hover,
.filter-bar__remove:focus-visible {
    background: color-mix(
        in oklab,
        var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1)) 90%,
        var(--shell-menu-text, lch(90.35% 1.15 272 / 1)) 10%);
}

.filter-bar__actions {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.filter-bar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
}

.filter-bar__action--save {
    position: relative;
    background: var(--shell-filter-chip-bg, lch(10.149% 0.689 272 / 1));
}

/* Linear's raised-button ring: 0.5px ring + drop shadow on ::after (measured). */
.filter-bar__action--save::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    box-shadow: var(--shell-filter-save-shadow, lch(100% 0 0 / 0.159) 0px 0px 0px 0.5px, lch(0% 0 0 / 0.3) 0px 0.5px 1px 1px);
    pointer-events: none;
}

.filter-bar__operator-backdrop {
    position: fixed;
    inset: 0;
    z-index: 640;
    border: 0;
    background: transparent;
    cursor: default;
}

.filter-bar__operator-menu {
    position: absolute;
    top: 27px;
    left: 0;
    z-index: 650;
    width: 175px;
    min-height: 77px;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.filter-bar__operator-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-bar__operator-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: lch(0% 0 0 / 0.004);
}

.filter-bar__operator-option {
    position: relative;
    height: 32px;
}

.filter-bar__operator-option::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.filter-bar__operator-option:hover::before,
.filter-bar__operator-option:focus-within::before,
.filter-bar__operator-option--current::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.filter-bar__operator-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.filter-bar__operator-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
}

.filter-bar__operator-option:hover .filter-bar__operator-button,
.filter-bar__operator-option:focus-within .filter-bar__operator-button,
.filter-bar__operator-option--current .filter-bar__operator-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.filter-bar__value-backdrop {
    position: fixed;
    inset: 0;
    z-index: 840;
    border: 0;
    background: transparent;
    cursor: default;
}

.filter-bar__value-menu {
    position: fixed;
    z-index: 850;
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.advanced-filter__backdrop {
    position: fixed;
    inset: 0;
    z-index: 820;
    border: 0;
    background: transparent;
    cursor: default;
}

.advanced-filter {
    position: fixed;
    z-index: 830;
    width: 321px;
    max-width: calc(100vw - 16px);
    padding: 12px;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    box-sizing: border-box;
}

.advanced-filter__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.advanced-filter__group:not(.advanced-filter__group--root) {
    width: 100%;
    padding: 8px;
    border: 0.5px solid var(--shell-border-strong, lch(19.64% 1.38 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-subtle, var(--shell-bg-surface));
    box-sizing: border-box;
}

.advanced-filter__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
}

.advanced-filter__group-label {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272 / 1));
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.advanced-filter__rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.advanced-filter__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.advanced-filter__row--group {
    align-items: flex-start;
}

.advanced-filter__operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 32px;
    height: 23px;
    padding: 0 4px;
    border: 0.5px solid var(--shell-border-strong, lch(25.04% 1.83 272 / 1));
    border-radius: 7.5px;
    background: var(--shell-bg-raised, var(--app-theme-raised-bg, var(--shell-bg-active)));
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.125rem;
    cursor: default;
}

.advanced-filter__operator:hover,
.advanced-filter__operator:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

.advanced-filter__filter-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 4px 6px 4px 5px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-raised, var(--app-theme-raised-bg, var(--shell-bg-active)));
    color: var(--shell-text-primary, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
}

.advanced-filter__filter-button:hover,
.advanced-filter__filter-button:focus-visible {
    background: var(--shell-bg-hover, lch(20.72% 1.329 272 / 1));
}

.advanced-filter__condition {
    max-width: 100%;
}

.advanced-filter__delete {
    width: 24px;
    height: 24px;
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
}

.filter-bar__value-header {
    flex: 0 0 auto;
    height: 36.5px;
    border-bottom: 0.5px solid transparent;
}

.filter-bar__value-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-bar__value-input {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    outline: none;
}

.filter-bar__value-input::placeholder {
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
}

.filter-bar__value-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    scrollbar-width: none;
}

.filter-bar__value-scroll::-webkit-scrollbar {
    display: none;
}

.filter-bar__value-list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: lch(0% 0 0 / 0.004);
}

.filter-bar__value-option {
    position: relative;
    height: 31.5px;
}

.filter-bar__value-option::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.filter-bar__value-option:hover::before,
.filter-bar__value-option:focus-within::before,
.filter-bar__value-option--selected::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.filter-bar__value-option-button {
    position: relative;
    display: grid;
    grid-template-columns: 14px auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    height: 31.5px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.filter-bar__value-option:hover .filter-bar__value-option-button,
.filter-bar__value-option:focus-within .filter-bar__value-option-button,
.filter-bar__value-option--selected .filter-bar__value-option-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.filter-bar__value-choice-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 4px;
    color: transparent;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
}

.filter-bar__value-choice-box--selected {
    border-color: lch(47.918% 59.303 288.421 / 1);
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 0 272 / 1);
}

.filter-bar__value-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
}

.filter-bar__value-option-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filter-bar__value-option-secondary {
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
    white-space: nowrap;
}

/* Hosting (backdrop, positioning, chrome, animation) comes from AnchoredPopover; the
   panel class only namespaces the content sections. */
.grid-display-options__panel {
    width: 100%;
}

.grid-display-options__section {
    padding-left: 17px;
    padding-right: 16px;
}

.grid-display-options__section--top {
    padding-top: 17px;
    padding-bottom: 11px;
}

.grid-display-options__section--compact {
    padding-top: 4px;
    padding-bottom: 8px;
}

.grid-display-options__section--board {
    padding-top: 15px;
    padding-bottom: 12px;
}

.grid-display-options__view-modes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.grid-display-options__mode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    width: auto;
    height: 28px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9999px;
    background: var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1));
    box-shadow: var(--display-opt-control-shadow, none);
    color: var(--display-opt-muted-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Idle segments hover a step up with the ring lifted to the selected alpha (measured). */
.grid-display-options__mode-button:hover:not(.grid-display-options__mode-button--active),
.grid-display-options__mode-button:focus-visible:not(.grid-display-options__mode-button--active) {
    background: var(--display-opt-control-hover-bg, var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--display-opt-control-shadow, none));
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
}

.grid-display-options__mode-button--active {
    background: var(--display-opt-segment-active-bg, lch(29.9% 7.71 282.863 / 1));
    box-shadow: var(--display-opt-selected-shadow, none);
    color: var(--display-opt-active-color, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
}

.grid-display-options__mode-icon {
    display: inline-flex;
    /* Measured on Linear's segment buttons: 14px glyphs. */
    width: 14px;
    height: 14px;
    color: currentColor;
}

.grid-display-options__mode-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.grid-display-options__setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-top: 0;
}

.grid-display-options__row-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.grid-display-options__direction-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--display-opt-muted-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.grid-display-options__direction-button:hover,
.grid-display-options__direction-button:focus-visible {
    background: var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    outline: none;
}

.grid-display-options__direction-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.grid-display-options__setting-label,
.grid-display-options__subheading {
    color: var(--display-opt-muted-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__select-host {
    display: inline-flex;
    justify-content: flex-end;
    min-width: 0;
}

.grid-display-options__select-host .settings-select__trigger {
    width: max-content;
    min-width: 99px;
    max-width: 160px;
}

.grid-display-options__select-host .settings-select--compact .settings-select__trigger {
    color: var(--display-opt-text-color, var(--shell-menu-text, lch(90.668% 1.375 272 / 1)));
}

.grid-display-options__select-host .settings-select__trigger:not(:hover):not(:focus-visible) {
    background-color: var(--display-opt-select-bg, var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1)));
}

.grid-display-options__select-host .settings-select__panel {
    /* The inner viewport supplies vertical spacing; remove the native popover inset only when measured. */
    padding: var(--display-opt-menu-padding, 4px);
    background: var(--display-opt-menu-bg, var(--settings-select-menu-bg, var(--settings-select-panel-bg, lch(13.07% 1.2 272))));
    border-color: var(--display-opt-menu-border, var(--settings-select-panel-border, lch(18.47% 1.83 272)));
}

.grid-display-options__select-host .settings-select__option {
    color: var(--display-opt-text-color, var(--settings-control-text, lch(91.214% 1.6 272)));
    line-height: var(--display-opt-option-line-height, 1.21875rem);
}

.grid-display-options__select-host .settings-select__trigger-content {
    min-width: 0;
}

.grid-display-options__divider {
    height: 0;
    border-top: 0.5px solid var(--display-opt-divider, var(--shell-menu-divider, lch(16.668% 1.15 272 / 1)));
}

.grid-display-options__heading {
    margin: 0;
    color: var(--display-opt-text-color, var(--shell-menu-text, lch(90.895% 1.375 272 / 1)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-top: 0;
}

.grid-display-options__toggle-label {
    color: var(--display-opt-muted-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__toggle-shell {
    display: inline-flex;
    align-items: center;
    height: 32px;
}

.grid-display-options__toggle-input {
    position: relative;
    display: block;
    width: 22px;
    height: 14px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 9999px;
    background: var(--display-opt-toggle-off-bg, var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1)));
    cursor: pointer;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.grid-display-options__toggle-input::before {
    content: "";
    position: absolute;
    inset: -8px;
}

.grid-display-options__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.grid-display-options__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.grid-display-options__toggle-input:checked::after {
    left: 10px;
}

.grid-display-options__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

.grid-display-options__subheading {
    margin: 11px 0 11px;
}

.grid-display-options__property-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
}

.grid-display-options__property-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1));
    box-shadow: var(--display-opt-control-shadow, none);
    color: var(--display-opt-muted-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

/* OFF chips hover a step up with the ring lifted to the selected alpha (measured). */
.grid-display-options__property-button:hover:not(.grid-display-options__property-button--active),
.grid-display-options__property-button:focus-visible:not(.grid-display-options__property-button--active) {
    background: var(--display-opt-control-hover-bg, var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--display-opt-control-shadow, none));
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
}

.grid-display-options__property-button--active {
    background: var(--display-opt-chip-on-bg, lch(32.043% 7.818 282.863 / 1));
    box-shadow: var(--display-opt-chip-on-shadow, none);
    color: var(--display-opt-active-color, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
}

.grid-display-options__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 45px;
    padding: 7px 8px 4.25px;
}

.grid-display-options__footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23.52px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__footer-button--primary {
    color: lch(59.03% 70 288.421 / 1);
}

.grid-sidebar {
    position: relative;
    display: flex;
    z-index: 40;
    width: var(--grid-sidebar-width, 360px);
    min-width: var(--grid-sidebar-width, 360px);
    height: 100%;
    padding: 0 0 0 4px;
    overflow: visible;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 120ms ease,
        visibility 120ms ease;
    visibility: hidden;
}

.grid-sidebar[data-open="true"] {
    padding-left: 4px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
    background-image: linear-gradient(
        to left,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 74%, transparent) 62%,
        transparent 100%
    );
}

.grid-sidebar[data-open="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -36px;
    z-index: 0;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 26%, transparent) 46%,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 100%
    );
}

.grid-sidebar[data-open="false"] {
    padding-left: 0;
}

.grid-sidebar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: calc(var(--grid-sidebar-width, 360px) - 4px);
    height: 100%;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.grid-sidebar__inner::-webkit-scrollbar {
    display: none;
}

.grid-sidebar__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: calc(var(--grid-sidebar-width, 360px) - 12px);
    min-height: 0;
    margin: 0 8px 8px 0;
    padding: 12px;
    border: 0.5px solid var(--page-side-panel-border, var(--detail-sidebar-panel-border, var(--shell-border)));
    border-radius: 10px;
    background: var(--page-side-panel-bg, var(--detail-sidebar-panel-bg, var(--shell-bg-active)));
    box-shadow: var(--page-side-panel-shadow, var(--shell-shadow));
    box-sizing: border-box;
}

.grid-sidebar__resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
}

.grid-sidebar__resize-handle::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 0.5px;
    border-radius: 4px;
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.grid-sidebar__resize-handle:hover::after,
.grid-sidebar__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.grid-sidebar[data-open="false"] .grid-sidebar__resize-handle {
    pointer-events: none;
}

.grid-sidebar__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    margin: 0 0 10px;
}

.grid-sidebar__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 16.5px;
    margin: 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--page-side-panel-tab-bg, var(--shell-bg-button));
    color: var(--page-side-panel-tab-color, var(--shell-text-secondary));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition:
        border 150ms ease,
        background-color 120ms ease,
        color 120ms ease,
        opacity 150ms ease;
}

.grid-sidebar__tab:hover,
.grid-sidebar__tab:focus-visible {
    background: var(--page-side-panel-tab-hover-bg, var(--shell-menu-item-hover));
    color: var(--page-side-panel-tab-hover-color, var(--shell-text-primary));
    outline: none;
}

.grid-sidebar__tab--active,
.grid-sidebar__tab--active:hover,
.grid-sidebar__tab--active:focus-visible {
    background: var(--page-side-panel-tab-active-bg, var(--shell-nav-active-bg));
    color: var(--page-side-panel-tab-active-color, var(--shell-text-primary));
}

.grid-sidebar__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.grid-sidebar__summary-card {
    display: flex;
    align-items: center;
    justify-content: normal;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--page-side-panel-summary-bg, var(--page-side-panel-bg, var(--shell-bg-active)));
    box-sizing: border-box;
}

.grid-sidebar__summary-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.grid-sidebar__summary-title,
.grid-sidebar__summary-count {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.grid-sidebar__summary-health-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: lch(38.409% 1.375 272 / 1);
}

.grid-sidebar__summary-health-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.grid-sidebar__summary-title {
    overflow: hidden;
    color: lch(100% 0 272 / 1);
    text-overflow: ellipsis;
}

.grid-sidebar__summary-count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: lch(100% 0 272 / 1);
}

.grid-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: var(--grid-list-content-width, 100%);
    min-height: 0;
    background: transparent;
    color: var(--grid-list-text-primary, var(--shell-text-primary));
}

.grid-list__header,
.grid-list__group-header,
.grid-list__row {
    display: grid;
    grid-template-columns: var(--grid-list-template-columns);
    column-gap: 8px;
    grid-column: 1 / -1;
    align-items: center;
    width: 100%;
    min-width: var(--grid-list-content-width, 100%);
}

.grid-list__header {
    flex: 0 0 32px;
    height: 32px;
}

.grid-list__header-cell,
.grid-list__header-spacer {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 24px;
}

.grid-list__header-cell {
    padding: 0 6px;
}

.grid-list__header-cell--collapsed,
.grid-list__cell--collapsed {
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
}

.grid-list__header-label {
    overflow: visible;
    color: var(--grid-list-header-label-color, var(--shell-text-secondary, lch(61.399% 1.15 272 / 1)));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    text-overflow: clip;
}

.grid-list__header-sort-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: none;
    height: 24px;
    padding: 0 6px;
    margin: 0 -6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--grid-list-header-sort-color, var(--shell-text-primary, lch(90.35% 1.15 272 / 1)));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
    user-select: none;
}

.grid-list__header-sort-button .grid-list__header-label {
    color: var(--grid-list-header-label-color, var(--shell-text-secondary, lch(61.399% 1.15 272 / 1)));
    font-weight: 450;
}

.grid-list__header-sort-button:hover,
.grid-list__header-sort-button:focus-visible {
    background: var(--grid-list-header-sort-hover-bg, var(--shell-bg-active, lch(9.92% 0.493 272 / 1)));
    color: var(--grid-list-header-sort-hover-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    outline: none;
}

.grid-list__header-sort-button:hover .grid-list__header-label,
.grid-list__header-sort-button:focus-visible .grid-list__header-label {
    color: var(--grid-list-header-sort-hover-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.grid-list__header-sort-icon {
    display: inline-flex;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    color: var(--grid-list-header-sort-icon-color, var(--shell-text-secondary, lch(61.399% 1.15 272 / 1)));
    opacity: 0;
    transition: opacity var(--speed-highlightFadeIn, 120ms) ease;
}

.grid-list__header-sort-icon svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.grid-list__header-sort-button--active .grid-list__header-sort-icon,
.grid-list__header-sort-button:hover .grid-list__header-sort-icon,
.grid-list__header-sort-button:focus-visible .grid-list__header-sort-icon {
    opacity: 1;
}

.grid-list__header-sort-button:hover .grid-list__header-sort-icon,
.grid-list__header-sort-button:focus-visible .grid-list__header-sort-icon {
    color: var(--grid-list-header-sort-hover-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.grid-list__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden auto;
    scrollbar-width: none;
}

.grid-list__body::-webkit-scrollbar {
    display: none;
}

.grid-bulk-selection {
    position: absolute;
    left: var(--grid-bulk-selection-left, 0);
    bottom: 16px;
    width: var(--grid-bulk-selection-width, 100%);
    z-index: 94;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Linear's exact bar (measured): 44px pill, 8px padding/gap; naked "N selected" text; raised
   action buttons (28px pills whose ring + soft shadow live on ::after); a trailing naked ×. */
.grid-bulk-selection__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 8px;
    border-radius: 9999px;
    background: var(--grid-bulk-selection-bg, lch(7.67% 0.75 272 / 1));
    box-shadow: var(
        --grid-bulk-selection-shadow,
        0 3px 8px lch(0% 0 0 / 0.125),
        0 2px 5px lch(0% 0 0 / 0.125),
        0 1px 1px lch(0% 0 0 / 0.125)
    );
    pointer-events: auto;
}

.grid-bulk-selection__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--grid-bulk-selection-button-color, lch(90.668% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    user-select: none;
}

.grid-bulk-selection__actions,
.grid-bulk-selection__action,
.grid-bulk-selection__clear {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9999px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.grid-bulk-selection__actions {
    gap: 6px;
    background: var(--grid-bulk-selection-actions-bg, lch(13.841% 0.943 272 / 1));
    color: var(--grid-bulk-selection-actions-color, lch(100% 0 272 / 1));
}

.grid-bulk-selection__actions-key {
    color: var(--grid-bulk-selection-actions-icon-color, lch(61.803% 1.2 272 / 1));
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Caller-provided action buttons share the raised treatment; --icon makes a 28px circle. */
.grid-bulk-selection__action {
    background: var(--grid-bulk-selection-actions-bg, lch(13.841% 0.943 272 / 1));
    color: var(--grid-bulk-selection-actions-color, lch(100% 0 272 / 1));
}

.grid-bulk-selection__action--icon {
    width: 28px;
    padding: 0;
}

/* Linear's raised-button ring + shadow, painted on ::after so it hugs the pill radius. */
.grid-bulk-selection__actions::after,
.grid-bulk-selection__action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(
        --grid-bulk-selection-action-ring-shadow,
        lch(100% 0 0 / 0.158) 0 0 0 0.5px,
        lch(0% 0 0 / 0.04) 0 4px 4px -1px,
        lch(0% 0 0 / 0.08) 0 1px 1px 0
    );
    pointer-events: none;
}

.grid-bulk-selection__clear {
    width: 28px;
    padding: 0;
    background: transparent;
}

.grid-bulk-selection__clear .shell-icon {
    color: var(--grid-bulk-selection-clear-icon-color, lch(61.803% 1.2 272 / 1));
}

.grid-bulk-selection__clear:hover,
.grid-bulk-selection__clear:focus-visible,
.grid-bulk-selection__actions:hover,
.grid-bulk-selection__actions:focus-visible,
.grid-bulk-selection__action:hover,
.grid-bulk-selection__action:focus-visible {
    background: var(--grid-bulk-selection-hover-bg, lch(16.5% 0.943 272 / 1));
    color: var(--grid-bulk-selection-hover-color, lch(100% 0 272 / 1));
    outline: none;
}

.grid-bulk-selection__count-number {
    font-variant-numeric: tabular-nums;
}

.filtered-empty-state {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272)));
    pointer-events: none;
}

.filtered-empty-state__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 350px;
    min-height: 210px;
    pointer-events: auto;
}

.filtered-empty-state__title {
    margin: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    text-align: center;
}

.filtered-empty-state__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 349px;
    height: 56px;
    margin-top: 20px;
    padding: 0 16px;
    gap: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    line-height: 0.90625rem;
    white-space: nowrap;
}

.filtered-empty-state__count {
    color: var(--shell-text-primary, lch(100% 0 272));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 20.5px;
}

.filtered-empty-state__muted {
    margin-left: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.filtered-empty-state__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-left: 64px;
    padding: 0 8.5px;
    border-radius: 6px;
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.filtered-empty-state__clear:hover,
.filtered-empty-state__clear:focus-visible {
    background: var(--shell-bg-hover, lch(9.92% 0.493 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
    outline: none;
}

.grid-list__group {
    display: grid;
    grid-template-columns: var(--grid-list-template-columns);
    column-gap: 8px;
    grid-auto-rows: min-content;
    flex-shrink: 0;
    width: 100%;
    min-width: var(--grid-list-content-width, 100%);
}

/* Linear's exact group rhythm: 36px sticky band with a 2px gap above and below it in flow
   (last row → 2px → band → 2px → first row = 40px between groups). The gaps are margins
   OUTSIDE the sticky element so the band sits flush at the top while stuck, like Linear's. */
.grid-list__group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    /* flex-shrink 0: .grid-list__body is a flex column — without it, overflow squeezes headers
       to min-content instead of scrolling. */
    flex: 0 0 auto;
    height: 36px;
    margin: 2px 0;
}


/* The pinned sticky clone overlays the list while scrolled through a group; cancel its flow
   footprint (2px margins + 36px band) so it never adds phantom scroll height or holes. */
.grid-list__group-header--virtual-sticky {
    margin-bottom: -38px;
}

/* Keyboard arrow-nav scrolls the active row into view with scrollIntoView({block:"nearest"}).
   Reserve the stuck band (36px) plus its 2px flow gap so arrowing UP doesn't park the row
   underneath the header. Sub-group headers are position:relative (non-sticky), so this is the
   full sticky offset. Keep in sync with the group-header height + margin. */
.grid-list__row {
    scroll-margin-top: 38px;
}

/* Compact density: 32px headers for dense settings-style tables (no Linear band gaps). */
.grid-list--compact-groups .grid-list__group-header {
    height: 32px;
    margin: 0;
}

.grid-list--compact-groups .grid-list__row {
    scroll-margin-top: 32px;
}

.grid-list--compact-groups .grid-list__group-leading-slot,
.grid-list--compact-groups .grid-list__group-checkbox-slot,
.grid-list--compact-groups .grid-list__group-end {
    height: 32px;
}

.grid-list--compact-groups .grid-list__group-title-cell {
    height: 31px;
}

.grid-list__group-header--subgroup {
    position: relative;
    top: auto;
    z-index: 0;
}

.grid-list__group-header:has(.anchored-dropdown-menu) {
    z-index: 700;
}

/* Linear's exact header band: a solid pill inset 8px from each edge (radius 8px), the same
   fill colour as row hover. The outer header element stays transparent — Linear's does too,
   even while stuck. */
.grid-list__group-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--grid-list-chrome-horizontal-inset, 0px) + 8px);
    bottom: 0;
    left: calc(var(--grid-list-chrome-horizontal-inset, 0px) + 8px);
    border-radius: var(--grid-list-group-band-radius, 8px);
    background: var(
        --grid-list-group-band-bg,
        var(--grid-list-row-hover-bg, var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1)))
    );
    pointer-events: none;
    opacity: 1;
}

.grid-list__group-header--subgroup::before {
    background: var(--grid-list-subgroup-surface-bg, lch(5.52% 0.4 272 / 1));
}

/* Thin window mode (W3): the header row is pinned to the uniform ItemSize slot,
   so the classic 36px band pill is drawn centered INSIDE the slot instead of
   stretching to the slot height. Margins are zero — the slot IS the rhythm. */
.grid-list__group-header--slot {
    margin: 0;
}

.grid-list__group-header--slot::before {
    top: 4px;
    bottom: 4px;
}

.grid-list__group-indent,
.grid-list__group-leading-slot,
.grid-list__group-checkbox-slot,
.grid-list__group-title-cell,
.grid-list__cell,
.grid-list__group-end {
    position: relative;
    min-width: 0;
    z-index: 1;
}

.grid-list__group-leading-slot,
.grid-list__group-checkbox-slot {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.grid-list__group-toggle {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 0;
    padding: 2px;
    border: 0;
    border-radius: 9999px;
    /* Measured on Linear: at rest the triangle is a DULL tint — hue borrowed from the group
       accent (status colour), lightness/chroma fixed per theme (magic-blue lch(25.596 7 h));
       the min() keeps grey accents grey. Hovering the header lifts it to the header text
       colour. Never a background fill. */
    color: var(--grid-list-collapse-icon-color,
        lch(from var(--grid-group-accent, var(--grid-list-text-secondary, lch(61.803% 1.2 272)))
            var(--grid-list-disclosure-l, 20.032%)
            min(c, var(--grid-list-disclosure-c, 7))
            h));
    background: transparent;
    transition: color 120ms ease;
}

.grid-list__group-toggle-icon {
    display: inline-flex;
    transition: transform 120ms ease;
}

.grid-list__group-toggle--expanded .grid-list__group-toggle-icon {
    transform: rotate(90deg);
}

/* Bright states (measured): hovering the header, keyboard focus, or a COLLAPSED group —
   Linear keeps the closed triangle at full header-text brightness so collapsed sections
   stay discoverable. */
.grid-list__group-header:hover .grid-list__group-toggle,
.grid-list__group-toggle:hover,
.grid-list__group-toggle:focus-visible,
.grid-list__group-toggle:not(.grid-list__group-toggle--expanded) {
    background: transparent;
    color: var(--grid-list-group-header-color, var(--grid-list-text-primary, lch(90.826% 1.425 272 / 1)));
    outline: none;
}

.grid-list__group-title-cell {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0;
}

.grid-list__group-header--subgroup .grid-list__group-title-cell {
    grid-column: 3 / -2;
}

.grid-list__group-header--subgroup .grid-list__group-title-cell::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    height: 0.5px;
    margin-left: 8px;
    background: var(--grid-list-subgroup-divider-color, lch(20.63% 1.83 272 / 1));
}

.grid-list__group-icon,
.grid-list__row-icon-button,
.grid-list__project-icon-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--grid-list-text-secondary, rgb(190, 194, 200));
    flex: 0 0 auto;
}

.grid-list__group-icon {
    /* Measured header run (Linear): triangle glyph at x18, 14px status icon at x45, title at
       x68 — a 22px icon box (nudged 1px left) with 5px trailing gap lands both exactly. */
    width: 22px;
    margin-left: -1px;
    margin-right: 5px;
}

.grid-list__group-title {
    overflow: hidden;
    color: var(--grid-list-group-title-color, var(--grid-list-group-header-color, var(--grid-list-text-primary, lch(90.826% 1.425 272 / 1))));
    font-size: var(--grid-list-group-text-size, 0.8125rem);
    font-weight: var(--grid-list-group-text-weight, 500);
    line-height: var(--grid-list-group-text-line-height, 0.96875rem);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Hover falls back to the caller's base title colour so a retinted header doesn't brighten. */
.grid-list__group-title:hover {
    color: var(--grid-list-group-title-hover-color, var(--grid-list-group-title-color, var(--grid-list-text-primary, lch(100% 0 272 / 1))));
}

.grid-list__group-count {
    margin-left: 8px;
    /* Measured: the count shares the disclosure's tint system — fixed per-theme L/C with the
       hue borrowed from the group accent (dark lch(63.304 7 h), light lch(37.776 12 h)). */
    color: var(--grid-list-group-count-color,
        lch(from var(--grid-group-accent, var(--grid-list-text-secondary, lch(61.803% 1.2 272)))
            var(--grid-list-count-l, 63.304%)
            min(c, var(--grid-list-count-c, 7))
            h));
    font-size: var(--grid-list-group-text-size, 0.8125rem);
    font-weight: var(--grid-list-group-text-weight, 450);
    line-height: var(--grid-list-group-text-line-height, 0.96875rem);
    white-space: nowrap;
}

/* Interactive group count (count-mode toggle, e.g. issue count vs estimate sum): a button that
   keeps the plain count's look at rest and gains a subtle hover. Default (no count modes) still
   renders a plain span, so today's grids are unchanged. */
button.grid-list__group-count--interactive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color 100ms ease;
}

/* Measured Linear: the count-mode toggle has NO hover fill — the text just brightens. */
button.grid-list__group-count--interactive:hover {
    color: var(--shell-text-primary);
}

.grid-list__group-count-icon {
    display: inline-flex;
    align-items: center;
}

.grid-list__group-end {
    height: 100%;
}

.grid-list__group-create {
    position: absolute;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    /* Rest: the same status-hued tint as the count (measured); hover: a round fill with the
       glyph stepping up to primary. */
    color: var(--grid-list-create-icon-color,
        lch(from var(--grid-group-accent, var(--grid-list-text-secondary, lch(61.803% 1.2 272)))
            var(--grid-list-count-l, 63.304%)
            min(c, var(--grid-list-count-c, 7))
            h));
    background: transparent;
}

.grid-list__group-create {
    top: 6px;
    right: 16px;
    opacity: 1;
}

.grid-list__group-create:hover,
.grid-list__group-create:focus-visible {
    background: var(--grid-list-group-create-hover-bg, var(--shell-menu-item-hover, lch(17.22% 1.05 272 / 1)));
    color: var(--grid-list-text-primary, lch(100% 0 272 / 1));
    outline: none;
}

button.grid-list__group-create {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

.grid-list__row {
    position: relative;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
}

.grid-list__row::before,
.grid-list__row::after {
    content: "";
    position: absolute;
    right: var(--grid-list-chrome-horizontal-inset, 0px);
    left: var(--grid-list-chrome-horizontal-inset, 0px);
    pointer-events: none;
}

/* State fill (hover/focus/selected). Linear's exact geometry: the highlight is a rounded
   8px-radius pill inset 8px from each row edge, not a full-bleed bar. */
.grid-list__row::before {
    top: 0;
    bottom: 0;
    right: calc(var(--grid-list-chrome-horizontal-inset, 0px) + 8px);
    left: calc(var(--grid-list-chrome-horizontal-inset, 0px) + 8px);
    border-radius: 8px;
    background: transparent;
}

/* Linear rows have no divider lines — the hairline is transparent by default and exists purely
   as an opt-in hook (settings-style tables set --grid-list-row-border themselves). */
.grid-list__row::after {
    bottom: 0;
    height: 0.5px;
    background: var(--grid-list-row-border, transparent);
}

.grid-list__row:hover,
.grid-list__row:focus-visible,
.grid-list__row--menu-open {
    outline: none;
}

.grid-list__row--menu-open {
    z-index: 700;
}

.grid-list__row:has(.anchored-dropdown-menu) {
    z-index: 700;
}

.grid-list__row:hover::before,
.grid-list__row.qome-force-hover::before,
.grid-list__row--menu-open::before {
    background: var(--grid-list-row-hover-bg, color-mix(in srgb, currentColor 6%, transparent));
}

/* Linear's three row states, measured exactly: hover = plain fill; keyboard-current = the same
   fill plus a 1px inset ring; checkbox-selected = accent tint, no ring. The keyboard ring is
   painted only while keyboard navigation owns the highlight (data-kb-active) — the moment the
   pointer moves, Linear hands the single highlight back to hover, so we do too.
   Keyed on :focus-visible (DOM focus) ONLY, never the server-synced --focused class: DOM focus
   moves instantly and is single by construction, while the class trails a circuit round-trip
   behind during arrow nav and briefly lights a second, stale row. */
.grid-list[data-kb-active] .grid-list__row:focus-visible::before {
    background: var(--grid-list-row-focus-bg, var(--grid-list-row-hover-bg, color-mix(in srgb, currentColor 9%, transparent)));
    box-shadow: inset 0 0 0 1px var(--grid-list-row-active-ring, color-mix(in srgb, currentColor 22%, transparent));
}

.grid-list__row--selected::before {
    background: var(--grid-list-row-selected-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent));
    border: 1px solid var(--grid-list-row-selected-border, transparent);
}

/* Checkbox selection records the current row even when it no longer owns DOM focus.
   In keyboard mode use only DOM focus, avoiding a stale server-focused row during navigation. */
.grid-list:not([data-kb-active]) .grid-list__row--selected.grid-list__row--focused::before {
    background: var(--grid-list-row-selected-active-bg, var(--grid-list-row-selected-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent)));
}

.grid-list[data-kb-active] .grid-list__row--selected:focus-visible::before {
    background: var(--grid-list-row-selected-active-bg, var(--grid-list-row-selected-focus-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 20%, transparent)));
}

.grid-list__row--selected:focus-visible::before,
.grid-list__row--selected:hover::before {
    background: var(--grid-list-row-selected-focus-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 20%, transparent));
}

/* Contiguous selected rows merge into one continuous band, like Linear: only the run's first row
   rounds its top corners and only its last row rounds its bottom corners, and the hairline row
   divider disappears inside the run. Rows are direct siblings in the list, so adjacency is pure
   CSS; group headers between runs break them naturally. */
.grid-list__row--selected:has(+ .grid-list__row--selected)::before {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.grid-list__row--selected + .grid-list__row--selected::before {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.grid-list__row--selected:has(+ .grid-list__row--selected)::after {
    background: transparent;
}

/* Keyboard mode (Linear parity): while navigating by keyboard, the row physically under a stationary
   pointer stops showing its mouse-hover fill — the keyboard "current" row owns the highlight until the
   pointer moves again. Toggled by data-kb-active on the grid root (set on arrow keydown, cleared on the
   next pointermove — see grid-list.js). The current (--focused) and selected rows keep their fill. */
.grid-list[data-kb-active] .grid-list__row:hover:not(.grid-list__row--selected):not(:focus-visible)::before {
    background: transparent;
}

.grid-list__row > * {
    position: relative;
    z-index: 1;
}

.grid-list__row-indent {
    width: 8px;
    height: 1px;
}

.grid-list__row-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.grid-list__row:hover .grid-list__row-checkbox-cell,
.grid-list__row:focus-visible .grid-list__row-checkbox-cell,
.grid-list__row--selected .grid-list__row-checkbox-cell {
    opacity: 1;
}

/* Hide instantly (no fade-out): during rapid arrow-nav a 120ms exit fade leaves a trail of
   ghost checkboxes on previously-current rows. The fade-in above still animates. */
.grid-list__row-checkbox-cell:not(:hover) {
    transition-duration: 0s;
}

.grid-list__row:hover .grid-list__row-checkbox-cell,
.grid-list__row:focus-visible .grid-list__row-checkbox-cell,
.grid-list__row--selected .grid-list__row-checkbox-cell {
    transition-duration: 120ms;
}

/* Keyboard mode: the row parked under the stationary pointer hides its checkbox affordance too —
   the keyboard-current row owns all affordances until the pointer moves (Linear behaviour).
   Instantly: the 120ms hover fade-in duration must not turn into a visible fade-out trail here. */
.grid-list[data-kb-active] .grid-list__row:hover:not(:focus-visible):not(.grid-list__row--selected) .grid-list__row-checkbox-cell {
    opacity: 0;
    transition-duration: 0s;
}

.grid-list__row-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--grid-list-checkbox-border, var(--grid-list-text-secondary, lch(36.308% 1.15 272 / 1)));
    border-radius: 3px;
    background: transparent;
    box-sizing: border-box;
}

/* Forgiving hit zone, like Linear: clicking anywhere in the checkbox gutter (full row height,
   the track plus its surrounding gaps) toggles selection instead of falling through to row
   navigation. The pseudo-element targets the checkbox span, so its click handler (which stops
   propagation) owns the whole zone. */
.grid-list__row-checkbox::before {
    content: "";
    position: absolute;
    inset: -15px -10px;
}

.grid-list__row--selected .grid-list__row-checkbox {
    border-color: var(--shell-accent, #5e6ad2);
    background: var(--shell-accent, #5e6ad2);
}

.grid-list__row-checkbox-mark {
    width: 6px;
    height: 3px;
    border-bottom: 1.5px solid var(--shell-bg, #fff);
    border-left: 1.5px solid var(--shell-bg, #fff);
    transform: translateY(-1px) rotate(-45deg);
}

.grid-list__title-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 28px;
}

.grid-list__row-icon-button,
.grid-list__project-icon-button {
    margin-right: 6px;
}

.grid-list__row-title,
.grid-list__project-title {
    overflow: hidden;
    color: var(--grid-list-text-primary, lch(100% 0 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 28px;
}

.grid-list__cell-pill,
.grid-list__cell-icon-text,
.grid-list__cell-icon-button {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    border-radius: 9999px;
    color: var(--grid-list-text-secondary, lch(61.399% 1.15 272 / 1));
}

.grid-list__cell-pill {
    height: 24px;
    max-width: 100%;
    padding: 0 8px;
}

.grid-list__cell-pill-icon,
.grid-list__cell-icon-text-icon,
.grid-list__cell-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
    flex: 0 0 auto;
}

.grid-list__cell-pill-label {
    overflow: hidden;
    margin-left: 8px;
    color: currentColor;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell-icon-button {
    justify-content: center;
    width: 28px;
    padding: 0 6px;
}

.grid-list__cell-icon-button:hover {
    background: var(--grid-list-row-hover-bg, lch(9.92% 0.493 272 / 1));
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
}

.grid-list__cell-icon-button--avatar {
    padding: 0;
}

.grid-list__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
}

.grid-list__cell-icon-text {
    max-width: 100%;
    padding: 0 6px;
}

.grid-list__cell-icon-text-label {
    margin-left: 8px;
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.grid-list__cell-text {
    overflow: hidden;
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell-empty {
    display: block;
    width: 28px;
    height: 28px;
}

.grid-list__row-end {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 28px;
    min-width: 0;
    z-index: 1;
}

/* The 28px trigger is wider than the 18px end-padding track (Linear's measured track): position
   it out of flow so it never widens the row and causes horizontal scroll. */
.grid-list__row-end > .grid-list__row-menu-trigger {
    position: absolute;
    right: 0;
}

.grid-list__row-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--grid-list-text-secondary, lch(61.399% 1.15 272 / 1));
    opacity: 0;
    transition:
        background-color 120ms ease-out,
        color 120ms ease-out,
        opacity 120ms ease-out;
}

.grid-list__row:hover .grid-list__row-menu-trigger,
.grid-list__row:focus-within .grid-list__row-menu-trigger,
.grid-list__row--menu-open .grid-list__row-menu-trigger {
    opacity: 1;
}

.grid-list__row-menu-trigger:hover,
.grid-list__row-menu-trigger:focus-visible {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--grid-list-text-primary, lch(90.668% 1.375 272 / 1));
    outline: none;
}

/* Non-scrolling positioning shell: keeps the bulk-selection bar pinned to the
   viewport while .board-grid itself scrolls. */
.board-grid-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.board-grid {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background-color: var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272)));
    scrollbar-gutter: stable;
}

.board-grid__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-left: 4px;
    overflow: hidden;
}

.board-column {
    position: relative;
    flex: 0 0 348px;
    display: flex;
    flex-direction: column;
    width: 348px;
    height: 100%;
    min-height: 0;
}

.board-column::before {
    position: absolute;
    inset: 4px 4px 0 4px;
    content: "";
    border-radius: 5px 5px 0 0;
    background: color-mix(in srgb, var(--shell-bg-sidebar) 32%, transparent);
    pointer-events: none;
}

.board-column__header {
    position: relative;
    z-index: 1;
    width: 348px;
    height: 50px;
    flex: 0 0 50px;
}

.board-column__header-surface {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 340px;
    height: 46px;
    margin: 4px 4px 0;
    padding: 0 8px 0 14px;
    border-radius: 5px 5px 0 0;
    background: transparent;
}

.board-column__heading-cluster {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.board-column__heading-link-cluster {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 256px;
}

/* Measured Linear header: 14px status icon, 10px gap to the 13px/500 title,
   8px gap to the 13px/450 count. */
.board-column__heading-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.board-column__heading-link {
    overflow: hidden;
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board-column__count {
    display: inline-flex;
    margin-left: 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.board-column__actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 50px;
    flex: 0 0 auto;
}

.board-column__action-anchor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

/* Header ⋯/+ (measured on live Linear): 24px circular ghost buttons, 14px glyphs,
   resting at the secondary text tier (the glyph fill, not the button colour),
   2px apart, brightening to primary on a soft tinted fill. */
.board-column__menu-button,
.board-column__create-button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    transition: background-color 120ms ease, color 120ms ease;
}

.board-column__menu-button:hover,
.board-column__menu-button:focus-visible,
.board-column__menu-button--open,
.board-column__create-button:hover,
.board-column__create-button:focus-visible {
    background: var(--board-column-button-hover-bg, lch(14.95% 1 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
}

.board-column__create-button {
    color: var(--board-column-create-icon-color, var(--shell-text-secondary, lch(61.399% 1.15 272)));
}

.board-column__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 1px 13px 13px;
    overflow: auto;
    scrollbar-gutter: stable;
    z-index: 1;
}

.board-column__cards--virtualized {
    gap: 0;
}

.board-column__cards--virtualized .board-card {
    margin-bottom: 8px;
}

/* Create-in-lane affordance that reveals on lane hover (Linear parity): a
   full-width, faintly filled rounded row with a centred plus. */
.board-column__cards-create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 322px;
    min-height: 38px;
    border-radius: 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    background-color: color-mix(in srgb, var(--shell-text-primary, lch(100% 0 272)) 4%, transparent);
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.board-column:hover .board-column__cards-create,
.board-column__cards-create:focus-visible {
    opacity: 1;
}

/* Never show the lane-tail create affordance mid-drag: the pointer sweeps source and
   target lanes constantly and the button reads as a phantom drop slot. */
.board-grid--dnd-active .board-column:hover .board-column__cards-create,
.board-grid--dnd-active .board-column__cards-create {
    opacity: 0;
    pointer-events: none;
}

.board-column__cards-create:hover {
    background-color: color-mix(in srgb, var(--shell-text-primary, lch(100% 0 272)) 8%, transparent);
    color: var(--shell-text-primary, lch(100% 0 272));
}

.board-column__cards-create-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.board-column__cards-shell {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
}

.board-card {
    position: relative;
    width: 322px;
}

/* Card surface (measured on live Linear): hairline ring + soft shadow, 8px radius,
   theme-token fills for rest/hover/selected states. */
.board-card__surface {
    display: flex;
    flex-direction: column;
    width: 322px;
    min-height: var(--board-card-height, 38px);
    padding: 5px 2px 5px 6px;
    border-radius: 8px;
    background-color: var(--board-card-bg, lch(9.232% 0.85 272 / 1));
    box-shadow:
        0 0 0 0.5px var(--board-card-ring, lch(100% 0 0 / 0.083)),
        var(--board-card-shadow, 0 0.5px 1px 1px lch(0 0 0 / 0.3));
    text-align: left;
    font-weight: 400;
    transition: background-color 100ms ease;
}

.board-card__surface:hover,
.board-card__surface:focus-visible,
.board-card--focused .board-card__surface {
    background-color: var(--board-card-hover-bg, lch(13.058% 1.3 272 / 1));
    outline: none;
}

.board-card--disabled .board-card__surface {
    cursor: default;
    opacity: 0.58;
}

/* Selected card (measured): the fill swaps to the accent-tinted family and the
   hairline ring brightens a touch; hover keeps shifting it in the same direction. */
.board-card--selected .board-card__surface {
    background-color: var(--board-card-selected-bg, lch(14.605% 16.228 285.615 / 1));
    box-shadow:
        0 0 0 0.5px var(--board-card-selected-ring, lch(100% 0 0 / 0.089)),
        var(--board-card-shadow, 0 0.5px 1px 1px lch(0 0 0 / 0.3));
}

.board-card--selected .board-card__surface:hover,
.board-card--selected .board-card__surface:focus-visible,
.board-card--selected.board-card--focused .board-card__surface {
    background-color: var(--board-card-selected-hover-bg, lch(18.43% 16.678 285.615 / 1));
}


/* Issue cards (IssueBoardCard): Linear's measured 8px inner padding. */
.board-card__surface:has(> .issue-board-card) {
    padding: 8px;
    min-height: 0;
}

.board-card__primary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 28px;
}

.board-card__title-cluster {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    min-height: 28px;
    gap: 4px;
}

.board-card__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin: 6px;
    color: var(--shell-text-secondary, rgb(190, 194, 200));
    flex: 0 0 auto;
}

.board-card__title {
    display: flow-root;
    overflow: hidden;
    color: var(--shell-text-tertiary, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0 0 6px;
    padding-top: 6px;
    line-height: normal;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board-card__accessories {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

.board-card--detailed .board-card__accessories {
    margin-right: -4px;
}

.board-card__accessory {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
}

.board-card__accessory-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272 / 1));
}

.board-card__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
}

.board-card__description {
    margin: 0 10px 0 4px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: normal;
}

.board-card--detailed .board-card__primary-row {
}

.board-card--detailed .board-card__description {
    display: flex;
    align-items: flex-start;
    margin: 0 0 3px;
    padding: 2px 4px 3px;
}

/* Drag and drop */
.board-grid--draggable .board-card__surface {
    cursor: grab;
    touch-action: none;
}

.board-dnd-dragging,
.board-dnd-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.board-dnd-clone {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    pointer-events: none;
    will-change: transform;
}

.board-dnd-clone .board-card {
    width: 322px;
}

/* Linear lifts the card flat under the cursor: normal scale, a soft drop shadow. */
.board-dnd-clone .board-card__surface {
    box-shadow:
        0 0 0 1px var(--shell-border, lch(18% 0.6 272 / 1)),
        0 8px 24px -6px lch(0% 0 0 / 0.45);
}

/* Linear's drop slot is a neutral, faintly filled recess — no accent, no outline. */
.board-dnd-placeholder {
    position: fixed;
    z-index: 3900;
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-text-primary, lch(100% 0 272)) 11%, transparent);
    pointer-events: none;
}

.board-card--dnd-shift {
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Multi-drag preview: the grabbed card rides a mini stack of blank card plates,
   offset down-right, with the list's count bubble at the top-right corner. */
.board-dnd-clone--stack .board-card--drag-preview {
    position: relative;
    z-index: 1;
}

.board-dnd-stack__back {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background-color: var(--board-card-bg, lch(9.232% 0.85 272 / 1));
    box-shadow:
        0 0 0 0.5px var(--board-card-ring, lch(100% 0 0 / 0.083)),
        var(--board-card-shadow, 0 0.5px 1px 1px lch(0 0 0 / 0.3));
}

.board-dnd-stack__back--1 {
    transform: translate(4px, 4px);
}

.board-dnd-stack__back--2 {
    transform: translate(8px, 8px);
}

.board-dnd-stack__badge {
    z-index: 2;
}

/* Hidden columns rail (empty columns collapse here, Linear-style) */
.board-grid__hidden-rail {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 300px;
    max-width: 300px;
    padding: 4px 13px 13px;
    /* Pin to the right edge of the board when lanes don't fill the width;
       when lanes overflow it sits directly after the last lane. */
    margin-left: auto;
}

.board-grid__hidden-rail-header {
    display: flex;
    align-items: center;
    height: 46px;
    margin-top: 4px;
    padding: 0 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.board-grid__hidden-rail-chevron {
    display: inline-flex;
    margin-right: 6px;
    transition: transform 160ms ease;
}

.board-grid__hidden-rail-chevron--expanded {
    transform: rotate(90deg);
}

.board-grid__hidden-rail-count {
    margin-left: 6px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 450;
}

.board-grid__hidden-rail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 9px;
}

.board-grid__hidden-column {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    background-color: var(--shell-bg-active, lch(7.67% 0.75 272));
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-tertiary, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 500;
    transition: box-shadow 120ms ease, background-color 120ms ease;
}

.board-grid__hidden-column-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.board-grid__hidden-column-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board-grid__hidden-column-count {
    margin-left: auto;
    padding-left: 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 450;
}

.board-grid__hidden-column--drop-active {
    background-color: color-mix(in srgb, var(--shell-accent, lch(52% 24 272)) 14%, var(--shell-bg-active, lch(7.67% 0.75 272)));
    box-shadow: inset 0 0 0 2px var(--shell-accent, lch(52% 24 272));
}

/* Grid list drag and drop (rows + change-by-group) */
.grid-dnd-dragging,
.grid-dnd-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* Compact chip that follows the cursor: status icon + title, elevated. */
.grid-dnd-chip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 280px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: var(--shell-bg-active, lch(7.67% 0.75 272));
    box-shadow:
        0 0 0 1px var(--shell-border, lch(18% 0.6 272 / 1)),
        0 8px 24px -6px lch(0% 0 0 / 0.45);
    color: var(--shell-text-tertiary, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform;
}

.grid-dnd-chip .grid-list__row-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-dnd-chip__title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-drag: the compact chip carries an 18px rounded count badge overlapping the corner
   (measured on Linear: radius 8, dull elevated tint, white 12px/500, card shadow). */
.grid-dnd-chip--multi {
    overflow: visible;
}

.grid-dnd-chip__badge {
    position: absolute;
    top: -9px;
    right: -9px;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--grid-dnd-badge-bg, lch(25.596% 8.268 282.863 / 1));
    color: lch(100% 0 0);
    font-size: 12px;
    font-weight: 500;
    box-shadow: lch(0% 0 0 / 0.3) 0 0.5px 1px 1px;
}

/* Multi-drag: Linear shows a mini STACK under the cursor — the grabbed row's compact card on
   top, up to two offset card surfaces peeking out behind, count bubble on the corner. */
.grid-dnd-stack {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    pointer-events: none;
    will-change: transform;
}

.grid-dnd-stack__card {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 280px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: var(--shell-menu-bg, lch(12.72% 0.85 272 / 1));
    border: 0.5px solid var(--shell-menu-border, lch(25.68% 1.93 272 / 1));
    box-shadow: var(--shell-menu-shadow, lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0);
    color: var(--shell-text-tertiary, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.grid-dnd-stack__card--back1,
.grid-dnd-stack__card--back2 {
    position: absolute;
    inset: 0;
}

.grid-dnd-stack__card--back1 {
    transform: translate(4px, 4px);
}

.grid-dnd-stack__card--back2 {
    transform: translate(8px, 8px);
}

.grid-dnd-stack__card--top {
    position: relative;
    z-index: 1;
}

.grid-dnd-stack .grid-dnd-chip__badge {
    z-index: 2;
}

/* Single-row drag: Linear uses the native full-row snapshot; mirror it with a translucent
   full-row clone that keeps the grab offset. */
.grid-dnd-row-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    overflow: hidden;
    border-radius: 4px;
    background: var(--grid-list-row-hover-bg, lch(9.345% 0.85 272 / 1));
    opacity: 0.8;
    pointer-events: none;
    will-change: transform;
}

.grid-dnd-row-ghost > * {
    pointer-events: none;
}

/* Accent insertion line between rows / at group boundaries. */
.grid-dnd-line {
    position: fixed;
    z-index: 3900;
    height: 2px;
    border-radius: 999px;
    background: var(--shell-accent, lch(52% 24 272));
    pointer-events: none;
}

.grid-dnd-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--shell-accent, lch(52% 24 272));
    transform: translateY(-50%);
}

/* Quick filter panel (Linear-style category filter sidebar) — theme-aware via tokens */
.quick-filter-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    /* Linear's quick-filter is a raised, rounded panel-card inset on the content surface.
       The card surface + radius live on the .page-side-panel__panel wrapper below; this fills it. */
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
    color: var(--shell-text-primary);
}

/* Quick-filter sidebar fills the full sidebar height (Linear). The shared side-panel
   containers size to content for other panels, so scope the stretch to this one via :has(). */
/* Full-height sidebars are declared by the host (PageWithSidePanel SidePanelFillContent
   / GridSidebarModel.FillHeight) — never inferred from panel content. */
.page-side-panel--fill .page-side-panel__panel,
.page-side-panel--fill .page-side-panel__content {
    flex: 1 1 auto;
    min-height: 0;
}

/* Linear's quick-filter is a rounded raised card: radius 10, a 0.5px border, a soft shadow
   and an 8px gutter — all provided by the base .page-side-panel__panel. We only lift the
   surface to the raised standard card token (measured Linear lch(13.6) ~= --shell-bg-active). */
.page-side-panel--lifted .page-side-panel__panel {
    /* Keep the lifted surface and border on the same theme palette. */
    border-color: var(--detail-sidebar-panel-border, var(--shell-border-card, lch(14.15% 1.83 272 / 1)));
    background: var(--detail-sidebar-panel-bg, var(--shell-bg-active, var(--shell-bg-card)));
}

.quick-filter-panel__tabs {
    /* Content sits flush at the card's 12px outer padding (measured Linear); only a small
       gap below the tabs before the option list. The 32px band comes from PillTabs.MinHeight. */
    padding: 0 0 8px;
}

/* Quick-filter tabs share the display-options shape and rings, with measured
   sidebar colours supplied through their own tokens. */
.quick-filter-panel__tabs .pill-tab-button {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 12px;
    --button-tab-bg: var(--quick-filter-tab-bg, var(--display-opt-control-bg, lch(22.614% 7.389 282.863 / 1)));
    --button-tab-color: var(--quick-filter-tab-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
    --button-tab-border: transparent;
    --button-tab-shadow: var(--display-opt-control-shadow, none);
    --button-tab-hover-bg: var(--display-opt-control-hover-bg, var(--shell-menu-item-hover));
    --button-tab-hover-border: transparent;
    --button-tab-active-bg: var(--quick-filter-tab-active-bg, var(--display-opt-segment-active-bg, lch(29.9% 7.71 282.863 / 1)));
    --button-tab-active-color: var(--quick-filter-tab-active-color, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
    --button-tab-active-border: var(--display-opt-selected-ring, lch(100% 0 0 / 0.158));
}

.quick-filter-panel__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Measured Linear: 42px rows at 43px pitch — a 1px seam, not 2. */
    gap: 1px;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.quick-filter-panel__option {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    text-align: left;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.quick-filter-panel__option:hover,
.quick-filter-panel__option:focus-visible {
    background: color-mix(in srgb, var(--shell-bg-active), var(--shell-menu-item-hover) 26%);
    outline: none;
}

/* Selected (single active option): measured Linear fill is very subtle, ~2 lightness above
   the panel (lch(15.6) on panel lch(13.6)). Only the label is promoted to primary; the count
   stays muted like every other row (measured Linear count stays lch(65) when selected). */
.quick-filter-panel__option--active,
.quick-filter-panel__option--active:hover {
    background: var(--quick-filter-selected-bg, color-mix(in srgb, var(--shell-bg-active), var(--shell-menu-item-hover) 30%));
}

.quick-filter-panel__option--active .quick-filter-panel__option-label {
    color: var(--shell-text-primary);
}

/* Measured Linear: once a filter is active in the category, every non-selected row drops to
   opacity 0.5 (the whole row together — label, count, icon), the selected row stays at 1. */
.quick-filter-panel__option--dimmed {
    opacity: 0.5;
}

.quick-filter-panel__option-lead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.quick-filter-panel__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--shell-text-secondary);
}

.quick-filter-panel__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
}

.quick-filter-panel__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary);
}

.quick-filter-panel__option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--shell-text-primary);
    font-weight: 450;
}

.quick-filter-panel__option-hint {
    padding-left: 12px;
    color: var(--shell-text-secondary);
    /* Measured Linear: hint and count run a step below the 13px row label. */
    font-size: 0.75rem;
    font-weight: 450;
    opacity: 0;
    transition: opacity 120ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.quick-filter-panel__option:hover .quick-filter-panel__option-hint,
.quick-filter-panel__option:focus-visible .quick-filter-panel__option-hint,
.quick-filter-panel__option--active .quick-filter-panel__option-hint {
    opacity: 1;
}

/* Measured Linear: the active row's "Clear filter" is primary text, not muted. */
.quick-filter-panel__option--active .quick-filter-panel__option-hint {
    color: var(--shell-text-primary);
}

.quick-filter-panel__option-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 12px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* Muted context glyph before the count (Linear draws the active view's icon here). */
.quick-filter-panel__option-count-icon {
    display: inline-flex;
    align-items: center;
    color: var(--shell-text-secondary);
}



.grid-preview-panel {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 650;
    display: flex;
    width: 416px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 112px);
    overflow: hidden auto;
    border: 0.5px solid var(--shell-menu-border, lch(20.63% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1));
    box-shadow: rgba(0, 0, 0, 0.12) 0 4px 34px 0;
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    box-sizing: border-box;
    scrollbar-width: none;
}

.grid-preview-panel::-webkit-scrollbar {
    display: none;
}

.grid-preview-panel__content {
    display: block;
    width: 100%;
    min-height: 664px;
    padding: 16px 24px;
    box-sizing: border-box;
}

.grid-preview-panel__key {
    display: block;
    margin: 0 0 6px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.grid-preview-panel__title {
    display: block;
    margin: 0 0 12px;
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    font-size: 1.125rem;
    font-weight: 500;
    line-height: normal;
}

.grid-preview-panel__meta {
    display: block;
    margin: 0 0 16px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.grid-preview-panel__body {
    display: block;
    margin: 0;
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
}

.panel-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: var(--panel-list-padding-block-start, 8px) 0 var(--panel-list-padding-block-end, 16px);
}

.panel-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--panel-list-item-row-height, calc(var(--panel-list-item-min-height, 55px) + 2px));
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    appearance: none;
    font: inherit;
    line-height: normal;
    cursor: var(--panel-list-item-cursor, default);
    user-select: none;
    -webkit-user-select: none;
}

button.panel-list-item,
a.panel-list-item {
    cursor: var(--panel-list-item-interactive-cursor, default);
}

.panel-list-item.panel-list-item--interactive {
    cursor: var(--panel-list-item-interactive-cursor, pointer);
}

.panel-list-item__chrome {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--panel-list-item-min-height, 55px);
    margin: 0 var(--panel-list-item-plate-margin-inline, 8px);
    padding: 0 var(--panel-list-item-inset-end, 16px) 0 var(--panel-list-item-inset-start, 16px);
    column-gap: var(--panel-list-item-content-gap, 12px);
    border-radius: 8px;
    flex: 0 0 auto;
}

.panel-list-item__chrome::before {
    content: "";
    position: absolute;
    inset:
        var(--panel-list-item-plate-inset-top, 0)
        var(--panel-list-item-plate-inset-inline, 0)
        var(--panel-list-item-plate-inset-bottom, 0)
        var(--panel-list-item-plate-inset-inline, 0);
    border-radius: 8px;
    background-color: transparent;
    transition:
        background-color 120ms ease,
        box-shadow 120ms ease;
    pointer-events: none;
}

.panel-list-item__leading,
.panel-list-item__body,
.panel-list-item__trailing {
    position: relative;
    z-index: 1;
}

.panel-list-item--body-only .panel-list-item__chrome {
    grid-template-columns: auto minmax(0, 1fr);
}

.panel-list-item--no-trailing .panel-list-item__chrome {
    grid-template-columns: auto minmax(0, 1fr);
}

.panel-list-item:hover .panel-list-item__chrome::before,
.panel-list-item.qome-force-hover .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-hover-bg, var(--shell-menu-item-hover, var(--shell-bg-hover, lch(11.888% 7.051 282.863))));
}

.panel-list-item--selected .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-selected-bg, var(--shell-nav-active-bg, var(--shell-bg-active, lch(9.471% 6.568 282.863))));
}

.panel-list-item:active .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-pressed-bg, var(--panel-list-item-selected-bg, var(--shell-nav-active-bg, var(--shell-bg-active))));
}

.panel-list-item:focus-visible {
    outline: none;
}

.panel-list-item:focus-visible .panel-list-item__chrome::before {
    box-shadow: inset 0 0 0 1px var(--panel-list-item-focus-ring, var(--shell-menu-border, var(--shell-border)));
}

.panel-list-item--no-selection-plate.panel-list-item--selected .panel-list-item__chrome::before {
    background-color: transparent;
}

.panel-list-item__leading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--panel-list-item-leading-width, 32px);
    min-width: var(--panel-list-item-leading-width, 32px);
}

.panel-list-item__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.panel-list-item__title-row,
.panel-list-item__subtitle-row {
    min-width: 0;
}

.panel-list-item__title,
.panel-list-item__subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: normal;
}

.panel-list-item__title {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 500;
}

.panel-list-item__title--strong,
.panel-list-item--selected .panel-list-item__title {
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
}

.panel-list-item__subtitle {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 450;
}

.panel-list-item__trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.panel-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--panel-list-icon-size, 28px);
    height: var(--panel-list-icon-size, 28px);
    flex: 0 0 var(--panel-list-icon-size, 28px);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-list-icon-color, var(--shell-text-secondary)) 13%, transparent);
    color: var(--panel-list-icon-color, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: var(--panel-list-icon-size, 28px);
}

.panel-list-icon--text {
    color: var(--shell-text-primary);
}

.panel-list-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.panel-list-meta__indicator {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
}

.panel-list-meta__text {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-list-item {
    position: relative;
}

.activity-list-item__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.activity-list-item__title-row,
.activity-list-item__subtitle-row,
.activity-list-item__description-row {
    display: flex;
    min-width: 0;
    align-items: center;
}

.activity-list-item__title,
.activity-list-item__subtitle,
.activity-list-item__description {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-list-item__title {
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.activity-list-item__title--strong,
.activity-list-item--selected .activity-list-item__title {
    color: var(--shell-text-tertiary);
}

.activity-list-item__subtitle,
.activity-list-item__description {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.activity-list-item__description {
    color: var(--shell-text-muted, var(--shell-text-secondary));
}

.activity-list-item__trailing-content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.activity-list-item__menu-button {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-muted, var(--shell-text-secondary));
    opacity: 0;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        opacity 120ms ease;
}

.activity-list-item:hover .activity-list-item__menu-button,
.activity-list-item:focus-within .activity-list-item__menu-button,
.activity-list-item--menu-open .activity-list-item__menu-button,
.activity-list-item.qome-force-hover .activity-list-item__menu-button {
    opacity: 1;
}

.activity-list-item__menu-button:hover,
.activity-list-item__menu-button:focus-visible,
.activity-list-item--menu-open .activity-list-item__menu-button {
    background: var(--shell-bg-hover);
    color: var(--shell-text-tertiary);
    outline: none;
}

.sectioned-panel-list__group + .sectioned-panel-list__group {
    margin-top: 0;
}

.sectioned-panel-list__group + .sectioned-panel-list__group::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sectioned-panel-list-divider-height, 4px);
    background: var(--sectioned-panel-list-divider-color, var(--shell-bg-surface, var(--app-theme-surface-bg, transparent)));
}

.sectioned-panel-list__header {
    display: flex;
    width: calc(100% - (var(--sectioned-panel-list-header-margin-inline, 8px) * 2));
    min-height: var(--sectioned-panel-list-header-min-height, 28px);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 var(--sectioned-panel-list-header-margin-inline, 8px);
    padding: 0 var(--sectioned-panel-list-header-padding-inline, 8px);
    border: 0;
    border-radius: 8px;
    background: var(--sectioned-panel-list-header-bg, var(--app-theme-card-bg, var(--shell-bg-active)));
    color: var(--sectioned-panel-list-header-color, var(--shell-text-secondary));
    text-align: left;
    appearance: none;
    font: inherit;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.sectioned-panel-list__header:hover,
.sectioned-panel-list__header:has(.sectioned-panel-list__header-main:focus-visible),
.sectioned-panel-list__header:has(.sectioned-panel-list__collapse-button:focus-visible) {
    background: var(--sectioned-panel-list-header-hover-bg, var(--sectioned-panel-list-header-bg, var(--app-theme-card-bg, var(--shell-bg-active))));
    color: var(--sectioned-panel-list-header-hover-color, var(--shell-text-tertiary));
    outline: none;
}

.sectioned-panel-list__header--selected {
    color: var(--sectioned-panel-list-header-color, var(--shell-text-secondary));
}

.sectioned-panel-list__header-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.sectioned-panel-list__header-main,
.sectioned-panel-list__collapse-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    appearance: none;
    font: inherit;
}

.sectioned-panel-list__header-main {
    min-width: 0;
    max-width: 100%;
    height: var(--sectioned-panel-list-header-min-height, 28px);
    flex: 0 1 auto;
    gap: 6px;
    justify-content: flex-start;
    padding: 0;
    cursor: var(--panel-list-item-interactive-cursor, pointer);
}

.sectioned-panel-list__header-main:focus-visible,
.sectioned-panel-list__collapse-button:focus-visible {
    outline: none;
}

.sectioned-panel-list__collapse-button {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    justify-content: center;
    padding: 0;
    border-radius: 5px;
    color: var(--shell-text-secondary);
    cursor: var(--panel-list-item-interactive-cursor, pointer);
    opacity: 0.78;
    transition: color 120ms ease, opacity 120ms ease;
}

.sectioned-panel-list__header:hover .sectioned-panel-list__collapse-button,
.sectioned-panel-list__header:has(.sectioned-panel-list__header-main:focus-visible) .sectioned-panel-list__collapse-button,
.sectioned-panel-list__header:has(.sectioned-panel-list__collapse-button:focus-visible) .sectioned-panel-list__collapse-button {
    color: var(--shell-text-tertiary);
    opacity: 1;
}

.sectioned-panel-list__collapse-button .shell-icon {
    transition: transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__collapse-button .shell-icon {
    transform: rotate(-90deg);
}

.sectioned-panel-list__header-icon {
    flex: 0 0 18px;
    border-radius: 6px;
}

.sectioned-panel-list__header-icon .shell-icon {
    color: currentColor;
}

.sectioned-panel-list__header-title,
.sectioned-panel-list__header-meta {
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sectioned-panel-list__header-title {
    font-weight: 500;
}

.sectioned-panel-list__header-meta {
    font-weight: 450;
    color: var(--shell-text-secondary);
}

.sectioned-panel-list__header .shell-icon {
    flex: 0 0 auto;
}

.sectioned-panel-list__children-shell {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    opacity: 1;
    transition:
        grid-template-rows 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 140ms ease;
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__children-shell {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.sectioned-panel-list__children {
    min-height: 0;
    overflow: hidden;
    padding: 2px 0 6px;
    transition: padding 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__children {
    padding-top: 0;
    padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sectioned-panel-list__children-shell,
    .sectioned-panel-list__children,
    .sectioned-panel-list__collapse-button .shell-icon {
        transition: none;
    }
}

.field-section + .field-section {
    margin-top: var(--field-section-gap, 28px);
}

.field-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
}

.field-section__header-main {
    min-width: 0;
}

.field-section__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4375rem;
}

.field-section__subtitle {
    margin-top: 2px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.field-section__actions {
    --field-section-header-action-size: 24px;
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-height: var(--field-section-header-action-size);
    gap: 4px;
}

.field-section__actions .settings-row-actions {
    min-height: var(--field-section-header-action-size);
    gap: 4px;
}

.field-section__actions .ui-button {
    height: var(--field-section-header-action-size);
    min-height: var(--field-section-header-action-size);
    padding: 0 8px;
    font-size: 0.75rem;
    line-height: normal;
}

.field-section__actions .ui-icon-button {
    width: var(--field-section-header-action-size);
    height: var(--field-section-header-action-size);
}

.field-group {
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
}

.field-group--flush {
    border: 0;
    border-radius: 0;
    background: transparent;
    margin-left: -20px;
    margin-right: -20px;
}

.field-group--flush > .field-group__list > .field-row {
    padding-left: 20px;
    padding-right: 20px;
}

.field-group--flush > .field-group__list > .field-row::after {
    display: none;
}

.field-section .field-group + .field-group {
    margin-top: 12px;
}

.field-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.field-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 16px 12px 16px 16px;
    border-radius: 8px;
}

.field-row:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.field-row:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.field-row:has(.settings-select--open),
.field-row:has(.selection-dropdown--open) {
    z-index: 670;
}

.field-row--interactive {
    transition: background-color 120ms ease-out;
}

.field-row--interactive:hover,
.field-row--interactive:focus-within {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.field-row--disabled {
    opacity: 0.54;
}

.field-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.field-group__list > .field-row:last-child::after {
    display: none;
}

.field-row__overlay {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.field-row__overlay--button {
    padding: 0;
}

.field-row__overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.field-row__overlay:disabled {
    cursor: default;
}

.field-row__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
}

.field-row__leading--tile {
    width: 32px;
    height: 32px;
}

.field-row--with-icon-tile {
    min-height: 65px;
}

.field-row__body {
    min-width: 0;
    flex: 1 1 auto;
}

.field-row__label {
    display: block;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.field-row__description {
    margin-top: 3px;
    color: var(--settings-status-text, var(--shell-text-secondary, lch(61.803% 1.2 272)));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.field-row__description--monospace {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.field-row__trailing {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.field-row--control-compact .field-row__trailing,
.field-row--control-medium .field-row__trailing,
.field-row--control-wide .field-row__trailing,
.field-row--control-full .field-row__trailing {
    width: var(--field-row-control-width, auto);
    min-width: 0;
}

.field-row--control-compact {
    --field-row-control-width: min(180px, 100%);
}

.field-row--control-medium {
    --field-row-control-width: min(256px, 100%);
}

.field-row--control-wide {
    --field-row-control-width: min(340px, 100%);
}

.field-row--control-full {
    --field-row-control-width: min(360px, 100%);
}

.field-row--control-compact .field-row__trailing > *,
.field-row--control-medium .field-row__trailing > *,
.field-row--control-wide .field-row__trailing > *,
.field-row--control-full .field-row__trailing > * {
    width: 100%;
    min-width: 0;
}

.field-row__trailing .ui-icon-button + .ui-icon-button {
    margin-left: -4px;
}

.field-row__trailing:has(.settings-select--open),
.field-row__trailing:has(.selection-dropdown--open) {
    z-index: 670;
}

.field-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: lch(61.803% 1.2 272);
}

.permission-list {
    min-height: 242px;
    padding: 0 16px;
    list-style: none;
}

.permission-list__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48.5px;
    padding: 16px 0;
}

.permission-list__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.5px;
    left: 0;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.permission-list__item:last-child::after {
    display: none;
}

.permission-list__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: lch(61.803% 1.2 272);
}

.permission-list__text {
    min-width: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

@media (max-width: 760px) {
    .field-section__header {
        padding: 0;
    }

    .field-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .field-row__trailing {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 8px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    transition:
        border-color 120ms ease-out,
        background-color 120ms ease-out,
        color 120ms ease-out;
}

.search-field:focus-within {
    border-color: var(--settings-control-border-active, var(--shell-border-strong));
    background: var(--settings-control-bg, lch(9.02% 2.1 272));
    color: var(--shell-text-primary);
}

.search-field--disabled {
    opacity: 0.54;
}

.search-field__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.search-field__input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.search-field__input::placeholder {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.search-field__input::-webkit-search-decoration,
.search-field__input::-webkit-search-cancel-button,
.search-field__input::-webkit-search-results-button,
.search-field__input::-webkit-search-results-decoration {
    display: none;
}

.settings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    gap: 16px;
}

.settings-toolbar__filters,
.settings-toolbar__actions,
.settings-row-actions {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.settings-toolbar__filters {
    gap: 6px;
}

.settings-toolbar__actions,
.settings-row-actions {
    justify-content: flex-end;
}

.settings-row-actions--start {
    justify-content: flex-start;
}

.settings-row-actions--center {
    justify-content: center;
}

.settings-row-actions--end {
    justify-content: flex-end;
}

.settings-toolbar .search-field {
    width: 300px;
    max-width: 100%;
    height: 32px;
    gap: 8px;
    padding: 0 8px;
    border-color: var(--settings-control-border, lch(15.32% 1.38 272));
    background: var(--settings-control-bg, lch(5.52% 0.4 272));
}

.settings-toolbar .search-field__icon {
    width: 16px;
    height: 16px;
    color: var(--shell-text-primary);
}

.settings-toolbar .search-field__input {
    font-weight: 500;
}

.settings-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    gap: 16px;
    margin-top: 28px;
}

.settings-editor-footer__leading {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.settings-editor-footer__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.settings-grid-list {
    min-width: 0;
}

.settings-grid-list .grid-list {
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-grid-list--flush .grid-list {
    border-top: 0;
    --grid-list-surface-bg: var(--settings-card-bg, lch(5.52% 0.4 272));
    --grid-list-row-border: var(--settings-row-divider, lch(9.02% 2.1 272));
}

.settings-table {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.settings-table--fill {
    height: 100%;
    min-height: 0;
}

.settings-table--fill .settings-table__surface {
    flex: 1 1 auto;
    min-height: 0;
}

.settings-table--fill .settings-table__section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.settings-table--fill .settings-table__empty {
    flex: 1 1 auto;
    min-height: 220px;
}

.settings-table--fill .settings-table__surface--loading {
    flex: 1 1 auto;
}

.settings-table__toolbar {
    min-height: 32px;
}

.settings-table__surface {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(5.52% 0.4 272));
    overflow: visible;
}

.settings-table__section {
    min-width: 0;
}

.settings-table__section:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.settings-table__section:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

.settings-table__section + .settings-table__section {
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-table__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
    padding: 10px 16px 6px;
    border-radius: 5px;
    border-bottom: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
    background: var(--settings-section-header-bg, var(--settings-card-bg, lch(7.67% 0.75 272)));
}

.settings-table__section:first-child > .settings-table__section-header {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.settings-table__section:last-child > .settings-table__section-header:last-child {
    border-bottom-right-radius: 11px;
    border-bottom-left-radius: 11px;
}

.settings-table__section-main {
    min-width: 0;
}

.settings-table__section-title {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1rem;
}

.settings-table__section-subtitle {
    margin: 2px 0 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.settings-table__section-count {
    flex: 0 0 auto;
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    font-size: 0.6875rem;
    line-height: 0.875rem;
}

.settings-table__header-row,
.settings-table__row {
    display: grid;
    grid-template-columns: var(--settings-table-grid-template);
    min-width: 0;
}

.settings-table__header-row {
    min-height: 31px;
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
    border-bottom: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-table__section-header + .settings-table__header-row {
    border-top: 0;
}

.settings-table__header-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 12px;
    color: var(--shell-text-secondary);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 0.875rem;
    white-space: nowrap;
}

.settings-table__header-cell:first-child {
    padding-left: 16px;
}

.settings-table__header-cell--actions {
    padding: 0 8px 0 0;
}

.settings-table__sort-button {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    height: 24px;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.settings-table__sort-button:hover,
.settings-table__sort-button:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.settings-table__sort-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-table__sort-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    opacity: 0;
    color: var(--shell-text-secondary);
    transition: opacity 120ms ease, color 120ms ease, transform 120ms ease;
}

.settings-table__header-cell--sort-active .settings-table__sort-icon,
.settings-table__sort-button:hover .settings-table__sort-icon,
.settings-table__sort-button:focus-visible .settings-table__sort-icon {
    opacity: 1;
}

.settings-table__sort-icon--descending {
    transform: rotate(180deg);
}

.settings-table__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-table__row {
    position: relative;
    align-items: center;
    min-height: 50px;
    transition: background-color 120ms ease-out;
}

.settings-table__row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
    pointer-events: none;
}

.settings-table__rows > .settings-table__row:last-child::after {
    display: none;
}

.settings-table__row--interactive {
    cursor: pointer;
}

.settings-table__row:hover,
.settings-table__row:focus-within,
.settings-table__row--selected {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.settings-table__row--disabled {
    opacity: 0.54;
    cursor: default;
}

.settings-table__row--loading {
    pointer-events: none;
}

.settings-table__row-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: inherit;
}

.settings-table__row-overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.settings-table__cell,
.settings-table__actions-cell {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 50px;
    padding: 7px 12px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.settings-table__cell:first-child {
    padding-left: 16px;
}

.settings-table__row--interactive .settings-table__cell {
    pointer-events: none;
}

.settings-table__row--interactive .settings-table__cell :where(a, button, input, select, textarea, [role="button"], [role="combobox"]),
.settings-table__row--interactive .settings-table__actions-cell {
    pointer-events: auto;
}

.settings-table__cell--primary {
    gap: 10px;
}

.settings-table__header-cell--align-center,
.settings-table__cell--align-center {
    justify-content: center;
    text-align: center;
}

.settings-table__header-cell--align-end,
.settings-table__cell--align-end {
    justify-content: flex-end;
    text-align: right;
}

.settings-table__cell--muted {
    color: var(--shell-text-secondary);
}

.settings-table__cell--strong {
    font-weight: 560;
}

.settings-table__cell--code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.settings-table__avatar,
.settings-table__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 7px;
    background: var(--settings-icon-tile-bg, lch(10.691% 0.493 272));
    color: var(--settings-icon-tile-color, var(--shell-text-primary));
}

.settings-table__avatar {
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1;
}

.settings-table__avatar--image {
    object-fit: cover;
}

.settings-table__entity,
.settings-table__cell-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.settings-table__entity-title,
.settings-table__cell-text,
.settings-table__cell-subtext,
.settings-table__entity-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-table__entity-title,
.settings-table__cell-text {
    color: inherit;
}

.settings-table__entity-subtitle,
.settings-table__cell-subtext {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.settings-table__cell-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-right: 7px;
    color: var(--shell-text-secondary);
}

.settings-table__actions-cell {
    justify-content: flex-end;
    padding: 0 8px 0 0;
}

.settings-table__row-actions {
    position: relative;
    display: inline-flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease-out;
}

.settings-table__row:hover .settings-table__row-actions,
.settings-table__row:focus-within .settings-table__row-actions,
.entity-row:hover .settings-table__row-actions,
.entity-row:focus-within .settings-table__row-actions,
.settings-table__row-actions--open {
    opacity: 1;
    pointer-events: auto;
}

.settings-table__row-menu-button {
    width: 28px;
    height: 28px;
}

.settings-table__loading-bar,
.settings-table__loading-action {
    display: block;
    height: 8px;
    border-radius: 9999px;
    background:
        linear-gradient(
            90deg,
            var(--shell-bg-selected) 0%,
            color-mix(in srgb, var(--shell-bg-selected) 72%, var(--shell-text-tertiary)) 45%,
            var(--shell-bg-selected) 90%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.settings-table__loading-bar {
    width: min(100%, 128px);
}

.settings-table__loading-bar--primary {
    width: min(100%, 190px);
}

.settings-table__loading-bar--short {
    width: min(100%, 64px);
}

.settings-table__loading-action {
    width: 18px;
    height: 18px;
}

.anchored-dropdown-menu--settings-table-row > .shell-dropdown-menu {
    width: 220px;
}

.settings-table__empty {
    min-height: 78px;
}

.settings-form {
    position: relative;
    margin: 0 0 48px;
}

.settings-form--editor {
    display: flex;
    flex-direction: column;
}

.settings-form--editor > .editable-title-field + .ui-form__rich-text {
    margin-top: 40px;
}

.settings-editor-footer .ui-button--default.ui-button--control {
    background: var(--settings-form-secondary-button-bg, var(--settings-control-hover-bg, lch(20.671% 6.918 282.863)));
    color: var(--settings-form-secondary-button-text, var(--shell-menu-text, lch(91.561% 4.284 282.863)));
}

.settings-editor-footer .ui-button--default.ui-button--control:hover,
.settings-editor-footer .ui-button--default.ui-button--control:focus-visible {
    background: var(--settings-form-secondary-button-hover-bg, var(--shell-menu-item-hover, lch(24.2% 7.8 282.863)));
    color: var(--shell-text-primary);
}

.settings-form-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 16px;
    border: 0.5px solid var(--settings-card-border, lch(20.171% 8.268 282.863));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(12.971% 7.068 282.863));
}

.settings-form-card > .ui-form__row--stacked,
.settings-form-card > .settings-form-option-row {
    margin: 0 0 24px;
}

.settings-form-card > .ui-form__row--stacked:last-child,
.settings-form-card > .settings-form-option-row:last-child,
.settings-form-card > .settings-row-actions:last-child {
    margin-bottom: 0;
}

.settings-form-card .ui-form__row--stacked {
    gap: 0;
}

.settings-form-card .ui-form__row--stacked .ui-form__label {
    display: block;
    margin: 1px 0 4px;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span:first-child {
    display: inline;
    color: var(--shell-menu-text, lch(91.297% 4.534 282.863));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span + span {
    display: inline;
    margin-left: 4px;
    color: var(--shell-text-secondary, lch(65.188% 4.534 282.863));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span + span::before {
    content: "-";
    margin-right: 4px;
    color: var(--shell-text-tertiary, lch(42.561% 4.534 282.863));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
}

.settings-form-card .ui-form__row--stacked .ui-form__error {
    margin-top: 6px;
}

.settings-form-card .ui-form__textarea {
    min-height: 64px;
    padding: 6px 12px;
    line-height: 17px;
}

.settings-form-card > .settings-row-actions {
    min-height: 32px;
    margin-top: 0;
    gap: 12px;
}

.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control {
    background: var(--settings-form-secondary-button-bg, var(--settings-control-hover-bg, lch(19.828% 7.282 282.863)));
    color: var(--settings-form-secondary-button-text, var(--shell-menu-text, lch(91.297% 4.534 282.863)));
}

.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control:hover,
.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control:focus-visible {
    background: var(--settings-form-secondary-button-hover-bg, var(--shell-menu-item-hover, lch(24.2% 7.8 282.863)));
    color: var(--shell-text-primary);
}

.settings-form--sectioned {
    display: flex;
    flex-direction: column;
}

.settings-form--sectioned > .ui-form__row--stacked {
    margin: 0 0 28px;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label {
    display: block;
    margin: 0 0 8px;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span:first-child {
    display: inline;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span + span {
    display: inline;
    margin-left: 4px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span + span::before {
    content: "-";
    margin-right: 4px;
    color: var(--shell-text-tertiary);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
}

.settings-form--sectioned > .settings-form-section-card {
    margin: 0 0 24px;
}

.settings-form--sectioned > .settings-row-actions {
    min-height: 32px;
    margin-top: 4px;
    gap: 12px;
}

.settings-form-section-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 24px;
    border: 0.5px solid var(--settings-card-border, lch(20.171% 8.268 282.863));
    border-radius: 5px;
    background: var(--settings-card-bg, lch(12.971% 7.068 282.863));
}

.settings-form-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
    margin-bottom: 22px;
}

.settings-form-section-card__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.settings-form-section-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
}

.settings-form-section-card__subtitle {
    margin: -14px 0 20px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.settings-form-section-card__content {
    min-width: 0;
}

.settings-form-section-card .settings-form-option-row {
    min-height: 32px;
}

.settings-form-section-card .settings-form-option-row__label {
    color: var(--shell-text-secondary);
    font-weight: 450;
}

.settings-form-section-card__note {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.3125rem;
}

.settings-form-option-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    gap: 12px;
}

.settings-form-option-row:has(.ui-form__avatar-field) {
    min-height: 50px;
}

.settings-form-option-row__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    /* Linear: 3px between the label line and its description (settings + loop rows). */
    gap: 3px;
}

.settings-form-option-row__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Descriptions wrap (Linear: settings "When enabled, issues can be estimated…" runs to two lines at
   14.5px, the loop permissions rows wrap at 598px next to their toggle) — never ellipsised. */
.settings-form-option-row__description {
    min-width: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
}

.settings-form-option-row__description a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
    text-underline-offset: 2px;
}

.settings-form-option-row__description a:hover,
.settings-form-option-row__description a:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.settings-form-option-row__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.settings-static-value,
.settings-muted-value {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-static-value {
    text-align: right;
}

.settings-theme-preview-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.settings-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 20px;
}

.settings-modal-form__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-modal-form__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.settings-modal-form__header p,
.settings-modal-form__error {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.1875rem;
}

.settings-modal-form__error {
    color: var(--feedback-danger-text, #f87171);
}

.settings-modal-form__fields {
    min-width: 0;
}

.settings-modal-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.settings-totp-panel {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
}

.settings-totp-panel__qr {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-height: 242px;
    padding: 16px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #fff;
}

.settings-totp-panel__qr svg {
    display: block;
    width: min(100%, 214px);
    height: auto;
    max-height: 214px;
    flex: 0 0 auto;
}

.settings-totp-panel__manual {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.settings-totp-panel__manual span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.settings-totp-panel__manual code {
    overflow-wrap: anywhere;
    color: var(--shell-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

@media (max-width: 760px) {
    .settings-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-toolbar .search-field {
        width: 100%;
    }

    .settings-row-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.navigation-row,
.entity-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
    padding: 16px;
    border-radius: 8px;
}

.navigation-row:first-child,
.entity-row:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.navigation-row:last-child,
.entity-row:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.navigation-row--interactive,
.entity-row--interactive {
    transition: background-color 120ms ease-out;
}

.navigation-row--interactive:hover,
.navigation-row--interactive:focus-within,
.entity-row--interactive:hover,
.entity-row--interactive:focus-within {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.navigation-row--disabled,
.entity-row--disabled {
    opacity: 0.54;
}

.navigation-row::after,
.entity-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.field-group__list > .navigation-row:last-child::after,
.field-group__list > .entity-row:last-child::after {
    display: none;
}

.navigation-row__overlay,
.entity-row__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.navigation-row__overlay--button,
.entity-row__overlay--button {
    padding: 0;
}

.navigation-row__overlay:focus-visible,
.entity-row__overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.navigation-row__overlay:disabled,
.entity-row__overlay:disabled {
    cursor: default;
}

.settings-row-icon-tile {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863)));
    color: var(--settings-row-icon-tile-color, var(--settings-icon-tile-color, var(--shell-text-primary)));
    pointer-events: none;
}

.settings-row-icon-tile--plain {
    background: transparent;
    color: var(--settings-row-icon-tile-color, var(--shell-text-secondary, lch(61.399% 1.15 272)));
}

.settings-row-icon-tile--accent {
    background: var(--settings-row-icon-tile-bg, color-mix(in srgb, var(--shell-accent, lch(55% 66 286)) 18%, transparent));
    color: var(--settings-row-icon-tile-color, var(--shell-accent, lch(62% 68 286)));
}

.settings-row-icon-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-row-icon-tile__initials {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.navigation-row__icon-tile {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863)));
    color: var(--settings-row-icon-tile-color, var(--settings-icon-tile-color, var(--shell-text-primary)));
    pointer-events: none;
}

.navigation-row__body,
.entity-row__body {
    position: relative;
    z-index: 2;
    min-width: 0;
    flex: 1 1 auto;
    pointer-events: none;
}

.navigation-row__label,
.entity-row__title {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.navigation-row__description,
.entity-row__subtitle {
    margin-top: 3px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.navigation-row__trailing,
.entity-row__trailing {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

/* Linear's settings cards reveal the row's trailing action only on hover (or keyboard focus). */
.entity-row--trailing-reveal .entity-row__trailing {
    opacity: 0;
    transition: opacity 120ms ease;
}

.entity-row--trailing-reveal:hover .entity-row__trailing,
.entity-row--trailing-reveal:focus-within .entity-row__trailing {
    opacity: 1;
}

.navigation-row__value {
    color: inherit;
}

.navigation-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: inherit;
}

.entity-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: inherit;
}

.entity-row {
    min-height: 65px;
}

.entity-row__leading,
.entity-row__avatar {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--entity-row-avatar-bg, var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863))));
    color: var(--entity-row-avatar-text, lch(100% 0 0));
    pointer-events: none;
}

.entity-row__avatar {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.entity-row__avatar--circle {
    border-radius: 9999px;
}

.entity-row__avatar--square {
    border-radius: 0;
}

.entity-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-state-block {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 94px;
    padding: 24px 32px;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.empty-state-block--compact {
    min-height: 60px;
    padding: 16px 32px;
}

.empty-state-block--centered {
    min-height: 180px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.empty-state-block__graphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.empty-state-block__body {
    min-width: 0;
    flex: 1 1 auto;
}

.empty-state-block--centered .empty-state-block__body {
    flex: 0 1 auto;
}

.empty-state-block__title {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.375rem;
}

.empty-state-block--compact .empty-state-block__title {
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.empty-state-block__description {
    margin-top: 3px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.1875rem;
}

.empty-state-block__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.empty-state-block--centered .empty-state-block__actions {
    margin-left: 0;
}

@media (max-width: 760px) {
    .navigation-row,
    .entity-row {
        align-items: flex-start;
        gap: 12px;
    }

    .navigation-row__trailing,
    .entity-row__trailing {
        align-self: center;
    }

    .empty-state-block {
        align-items: flex-start;
        padding: 16px;
    }

    .empty-state-block__actions {
        align-self: center;
    }
}

.dashed-empty-action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 0.5px dashed var(--dashed-empty-action-border, var(--shell-border-strong));
    border-radius: 10px;
    background: transparent;
    color: var(--shell-text-secondary);
    text-align: center;
}

.dashed-empty-action--compact {
    min-height: 80px;
    padding: 18px;
}

.dashed-empty-action--disabled {
    opacity: 0.54;
}

.dashed-empty-action__graphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.dashed-empty-action__body {
    min-width: 0;
}

.dashed-empty-action__title {
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.dashed-empty-action__description {
    margin-top: 2px;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.dashed-empty-action__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashed-empty-action__actions .ui-button {
    height: 24px;
    min-height: 24px;
    padding: 0 8px 0 6px;
    background: var(--dashed-empty-action-button-bg, var(--app-theme-raised-control-bg, var(--shell-bg-button)));
    color: var(--dashed-empty-action-button-text, var(--app-theme-text-on-raised, var(--shell-text-primary)));
    font-size: 0.75rem;
    line-height: normal;
}

.dashed-empty-action__actions .ui-button:hover,
.dashed-empty-action__actions .ui-button:focus-visible {
    background: var(--dashed-empty-action-button-hover-bg, var(--settings-control-hover-bg));
    color: var(--dashed-empty-action-button-hover-text, var(--shell-text-primary));
}

.settings-custom-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: min(250px, 100%);
    height: 32px;
}

.settings-custom-color__swatch {
    position: absolute;
    left: 9px;
    z-index: 1;
    width: 14px;
    height: 14px;
    border: 0.5px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 9999px;
    pointer-events: none;
}

.settings-custom-color__input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 42px 0 31px;
    border: 0.5px solid var(--settings-control-border, lch(22.79% 1.83 272 / 1));
    border-radius: 8px;
    background: var(--settings-control-bg, lch(13.841% 0.943 272 / 1));
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 2rem;
    outline: none;
}

.settings-custom-color__input:focus {
    border-color: var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1));
}

.settings-custom-color__format {
    position: absolute;
    top: 2px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.settings-custom-color__format:hover,
.settings-custom-color__format:focus-visible {
    background: var(--settings-control-hover-bg, lch(15.8% 1.11 272 / 1));
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    outline: none;
}

.settings-custom-contrast {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: min(250px, 100%);
}

.settings-custom-contrast__range {
    flex: 1 1 auto;
    height: 6px;
    margin: 0;
    accent-color: var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1));
}

.settings-custom-contrast__value {
    min-width: 17px;
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    text-align: right;
}

.settings-custom-sharing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.settings-toggle {
    position: relative;
    width: 30px;
    height: 20px;
    margin: 0;
    border: 0;
    border-radius: 72px;
    appearance: none;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    outline: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.settings-toggle:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.settings-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.settings-toggle:checked::before {
    left: 13px;
}

.settings-toggle:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
    cursor: default;
}

.chart-card {
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-active);
    box-shadow: var(--shell-shadow);
}

.chart-card--wide {
    grid-column: 1 / -1;
}

.chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid var(--shell-border);
}

.chart-card__header span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.chart-card__header h3 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.chart-card__header small {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.line-chart {
    padding: 16px;
}

.line-chart__plot {
    position: relative;
    min-width: 0;
}

.line-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.line-chart__grid-lines line {
    stroke: var(--shell-border);
    stroke-width: 0.75;
}

.line-chart__area {
    fill: color-mix(in srgb, #5e6ad2 16%, transparent);
}

.line-chart__line {
    fill: none;
    stroke: #8f96ff;
    stroke-linecap: round;
    stroke-width: 3;
}

.line-chart__point {
    fill: var(--shell-bg-active);
    stroke: #8f96ff;
    stroke-width: 2.5;
}

.line-chart__point:hover {
    fill: #8f96ff;
}

.line-chart__hit-targets {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.line-chart__hit-target {
    position: absolute;
    left: var(--line-chart-point-x);
    top: var(--line-chart-point-y);
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: auto;
    border-radius: 999px;
    cursor: var(--pointer, pointer);
    transform: translate(-50%, -50%);
}

.line-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

.bar-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    height: 266px;
    padding: 18px 18px 14px;
}

.bar-chart__bar {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    height: 100%;
}

.bar-chart__bar span {
    display: flex;
    align-items: end;
    min-height: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-bg-selected) 60%, transparent);
}

.bar-chart__bar i {
    display: block;
    width: 100%;
    height: var(--bar-height);
    border-radius: 8px;
    background: var(--chart-bar-color, linear-gradient(180deg, #8f96ff 0%, #5e6ad2 100%));
    transition: filter 120ms ease-out;
}

.bar-chart__bar:hover i {
    filter: brightness(1.12);
}

.bar-chart__bar strong {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.9375rem;
    text-align: center;
    text-overflow: ellipsis;
}

.calendar-heatmap-chart {
    --calendar-heatmap-empty-color: color-mix(in srgb, var(--shell-bg-hover, transparent) 74%, transparent);
    --calendar-heatmap-level-1: color-mix(in srgb, var(--shell-accent, #5e6ad2) 24%, var(--shell-bg-raised, var(--shell-bg-active)));
    --calendar-heatmap-level-2: color-mix(in srgb, var(--shell-accent, #5e6ad2) 38%, var(--shell-bg-raised, var(--shell-bg-active)));
    --calendar-heatmap-level-3: color-mix(in srgb, var(--shell-accent, #5e6ad2) 52%, var(--shell-bg-raised, var(--shell-bg-active)));
    --calendar-heatmap-level-4: color-mix(in srgb, var(--shell-accent, #5e6ad2) 68%, var(--shell-bg-raised, var(--shell-bg-active)));
    --calendar-heatmap-level-5: color-mix(in srgb, var(--shell-accent, #5e6ad2) 84%, var(--shell-text-primary));

    min-width: 0;
    padding: 16px;
    overflow: hidden;
    container-type: inline-size;
}

.calendar-heatmap-chart__viewport {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.calendar-heatmap-chart__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.calendar-heatmap-chart__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--calendar-heatmap-week-count), minmax(0, 1fr));
    grid-template-rows: repeat(7, auto);
    gap: clamp(1px, 0.72cqw, var(--calendar-heatmap-cell-gap));
}

.calendar-heatmap-chart__cell {
    display: block;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.calendar-heatmap-chart__day {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--calendar-heatmap-day-color) 72%, var(--shell-border-subtle, var(--shell-border)));
    border-radius: 4px;
    background: var(--calendar-heatmap-day-color);
    cursor: var(--pointer, pointer);
    transition:
        background-color 120ms ease-out,
        box-shadow 120ms ease-out,
        transform 120ms ease-out;
}

.calendar-heatmap-chart__day:disabled {
    cursor: default;
}

.calendar-heatmap-chart__day:not(.calendar-heatmap-chart__day--padding):hover,
.calendar-heatmap-chart__day:not(.calendar-heatmap-chart__day--padding):focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--calendar-heatmap-day-color) 52%, var(--shell-text-secondary));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--calendar-heatmap-day-color) 62%, var(--shell-text-secondary)),
        0 1px 2px color-mix(in srgb, var(--shell-shadow-color, #000) 16%, transparent);
}

.calendar-heatmap-chart__day--padding {
    opacity: 0.36;
}

.calendar-heatmap-chart__months {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--calendar-heatmap-week-count), minmax(0, 1fr));
    gap: clamp(1px, 0.72cqw, var(--calendar-heatmap-cell-gap));
    margin-top: clamp(7px, 1.2cqw, 12px);
    color: var(--shell-text-tertiary);
    font-size: clamp(0.625rem, 1.55cqw, 0.75rem);
    font-weight: 450;
    line-height: 1rem;
}

.calendar-heatmap-chart__months span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.calendar-heatmap-chart__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.chart-split {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 266px;
    padding: 18px;
}

.pie-chart,
.doughnut-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 0.5px color-mix(in srgb, var(--shell-border) 82%, transparent),
        0 18px 60px color-mix(in srgb, #000 22%, transparent);
}

.doughnut-chart {
    position: relative;
    display: grid;
    place-items: center;
}

.doughnut-chart::before {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: var(--shell-bg-active);
    box-shadow: inset 0 0 0 0.5px var(--shell-border);
}

.doughnut-chart span {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.doughnut-chart strong,
.radial-chart strong {
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 550;
    line-height: 30px;
}

.doughnut-chart small,
.radial-chart small {
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.9375rem;
}

.chart-legend {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.chart-legend span {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-legend strong {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 550;
}

.radial-chart {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 266px;
    padding: 18px;
}

.radial-chart svg {
    width: 220px;
    height: 220px;
    transform: rotate(-90deg);
}

.radial-chart__track {
    fill: none;
    stroke: var(--shell-bg-selected);
    stroke-width: 14;
}

.radial-chart__track--inner {
    stroke-width: 10;
}

.radial-chart__value {
    fill: none;
    stroke: #5e6ad2;
    stroke-linecap: round;
    stroke-width: 14;
}

.radial-chart__value--inner {
    stroke: #26b36a;
    stroke-width: 10;
}

.radial-chart > span {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

@media (max-width: 720px) {
    .chart-card--wide {
        grid-column: auto;
    }

    .chart-split {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
}

.lightbox {
    --lightbox-bg: var(--shell-bg-surface);
    --lightbox-panel-bg: var(--shell-menu-bg, var(--shell-bg-surface));
    --lightbox-raised-bg: var(--shell-bg-active);
    --lightbox-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --lightbox-border: var(--shell-menu-border, var(--shell-border));
    --lightbox-text: var(--shell-text-primary);
    --lightbox-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    --lightbox-muted: var(--shell-text-secondary);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    cursor: zoom-out;
    animation: lightbox-backdrop-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--closing {
    pointer-events: none;
    animation: lightbox-backdrop-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__figure {
    position: fixed;
    inset: 44px 0 44px;
    z-index: 2147483001;
    display: block;
    margin: 0;
    cursor: zoom-out;
    animation: lightbox-image-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--gallery .lightbox__figure {
    bottom: 104px;
}

.lightbox--closing .lightbox__figure {
    animation: lightbox-image-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__image-stage {
    position: absolute;
    inset: 53px 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: zoom-out;
}

/* Laid out at natural pixels once the zoom controller runs (it sets width/height inline); the
   transform carries fit / 100% and panning, so the stage never scrolls. Before the controller runs
   the max-* keep a huge image from flashing at full size. */
.lightbox__image {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    translate: -50% -50%;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox__image-stage--pannable .lightbox__image {
    cursor: grab;
}

.lightbox__label {
    position: fixed;
    right: 4px;
    bottom: 10px;
    left: 4px;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 19.5px;
    overflow: hidden;
    color: var(--lightbox-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.lightbox__label-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightbox__counter {
    justify-self: center;
    margin-left: 8px;
    color: var(--lightbox-muted);
    font-size: 0.75rem;
    line-height: 1rem;
}

.lightbox--closing .lightbox__label {
    animation: lightbox-chrome-out 120ms ease-out both;
}

.lightbox__toolbar {
    /* Minimal Linear-style cluster: plain icons on the backdrop, no strip. */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 40px;
    padding: 6px 10px 6px 6px;
    background: transparent;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

/* Next arrow reuses the left-arrow glyph mirrored. */

/* Mirror the span ONLY — hitting the inner svg too double-flips back to left. */
.lightbox__button--next .shell-icon {
    transform: scaleX(-1);
}

.lightbox__button:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.lightbox__nav {
    position: fixed;
    top: 50%;
    z-index: 2147483002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--lightbox-panel-bg) 86%, transparent);
    box-shadow:
        lch(0% 0 0 / 0.16) 0 10px 24px,
        lch(0% 0 0 / 0.14) 0 2px 8px;
    color: var(--lightbox-soft);
    cursor: default;
    transform: translateY(-50%);
    transition: background-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.lightbox__nav--previous {
    left: 18px;
}

.lightbox__nav--next {
    right: 18px;
}

.lightbox__nav:disabled {
    opacity: 0.34;
}

.lightbox__nav:not(:disabled):hover,
.lightbox__nav:not(:disabled):focus-visible {
    background: var(--lightbox-hover-bg);
    color: var(--lightbox-text);
    outline: none;
}

.lightbox--closing .lightbox__toolbar {
    animation: lightbox-chrome-out 120ms ease-out both;
}

.lightbox__button,
.lightbox__zoom-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--lightbox-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.lightbox__zoom-button:disabled {
    opacity: 0.48;
}

.lightbox__button::after,
.lightbox__zoom-button::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 2147483003;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 6px;
    background: var(--lightbox-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--lightbox-soft);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.4375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.lightbox__button:hover::after,
.lightbox__button:focus-visible::after,
.lightbox__zoom-button:hover::after,
.lightbox__zoom-button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%);
}

.lightbox__content--document {
    cursor: auto;
    position: fixed;
    inset: 64px 64px 52px;
    z-index: 2147483001;
    display: grid;
    place-items: stretch;
    min-width: 0;
    min-height: 0;
    animation: lightbox-document-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--gallery .lightbox__content--document {
    bottom: 112px;
}

.lightbox--closing .lightbox__content--document {
    animation: lightbox-document-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__frame,
.lightbox__monaco-shell,
.lightbox__monaco,
.lightbox__video,
.lightbox__youtube {
    width: 100%;
    height: 100%;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: var(--lightbox-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.24) 0 18px 48px,
        lch(0% 0 0 / 0.18) 0 6px 18px;
}

.lightbox__frame,
.lightbox__youtube {
    display: block;
}

.lightbox__video {
    object-fit: contain;
}

.lightbox__audio-shell {
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: 24px minmax(260px, 520px);
    align-items: center;
    gap: 14px;
    width: min(620px, calc(100vw - 128px));
    padding: 18px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: var(--lightbox-panel-bg);
    color: var(--lightbox-soft);
}

.lightbox__audio {
    width: 100%;
}

.lightbox__filmstrip {
    position: fixed;
    bottom: 42px;
    left: 50%;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
    min-height: 58px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--lightbox-panel-bg) 92%, transparent);
    box-shadow:
        lch(0% 0 0 / 0.18) 0 12px 30px,
        lch(0% 0 0 / 0.12) 0 3px 10px;
    scrollbar-width: thin;
    translate: -50% 0;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.lightbox--closing .lightbox__filmstrip,
.lightbox--closing .lightbox__nav {
    animation: lightbox-chrome-out 120ms ease-out both;
}

.lightbox__filmstrip-item {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--lightbox-raised-bg);
    color: var(--lightbox-muted);
    cursor: default;
    opacity: 0.74;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, opacity 120ms ease-out, transform 120ms ease-out;
}

.lightbox__filmstrip-item:hover,
.lightbox__filmstrip-item:focus-visible,
.lightbox__filmstrip-item--active {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 72%, var(--lightbox-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-accent, #5e6ad2) 22%, transparent);
    opacity: 1;
    outline: none;
}

.lightbox__filmstrip-item--active {
    transform: translateY(-1px);
}

.lightbox__filmstrip-image,
.lightbox__filmstrip-file {
    display: block;
    width: 100%;
    height: 100%;
}

.lightbox__filmstrip-image {
    object-fit: cover;
}

.lightbox__filmstrip-file {
    display: grid;
    place-items: center;
}

@keyframes lightbox-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes lightbox-backdrop-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes lightbox-image-in {
    from {
        opacity: 1;
        transform: translate3d(0, 12px, 0) scale(0.48);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes lightbox-image-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.72);
    }
}

@keyframes lightbox-document-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes lightbox-document-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.98);
    }
}

@keyframes lightbox-chrome-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lightbox-chrome-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.lightbox__button {
    width: 28px;
    padding: 0 2px;
}

.lightbox__zoom-button {
    width: 51px;
    padding: 0;
    margin-right: 21px;
    color: var(--lightbox-muted);
}

.lightbox__button:last-child {
    margin-left: 21px;
}

.lightbox__button:hover,
.lightbox__button:focus-visible,
.lightbox__zoom-button:hover,
.lightbox__zoom-button:focus-visible {
    background: var(--lightbox-hover-bg);
    color: var(--lightbox-text);
    outline: none;
}

@media (max-width: 640px) {
    .lightbox__nav {
        width: 36px;
        height: 36px;
    }

    .lightbox__nav--previous {
        left: 8px;
    }

    .lightbox__nav--next {
        right: 8px;
    }

    .lightbox__content--document {
        inset-right: 12px;
        inset-left: 12px;
    }
}

.lightbox__toolbar--markdown {
    width: auto;
    padding-left: 8px;
}

.lightbox__view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
    padding: 2px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--lightbox-panel-bg) 72%, transparent);
}

.lightbox__view-toggle-button {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--lightbox-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.lightbox__view-toggle-button:hover {
    color: var(--lightbox-text);
}

.lightbox__view-toggle-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lightbox-text) 35%, transparent);
    outline-offset: 1px;
}

.lightbox__view-toggle-button--active {
    background: var(--lightbox-hover-bg);
    color: var(--lightbox-text);
}

.lightbox__markdown {
    width: 100%;
    height: 100%;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: var(--lightbox-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.24) 0 18px 48px,
        lch(0% 0 0 / 0.18) 0 6px 18px;
    overflow: hidden;
}

.lightbox__monaco-host {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.lightbox__monaco-surface {
    flex: 1 1 auto;
    min-height: 0;
}

.lightbox__monaco-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--lightbox-panel-bg);
    color: var(--lightbox-muted);
    font-size: 0.8125rem;
}

.lightbox__monaco-fallback-notice {
    padding: 10px 20px;
    border-bottom: 0.5px solid var(--lightbox-border);
    background: var(--lightbox-raised-bg);
    color: var(--lightbox-muted);
    font-size: 0.75rem;
}

.lightbox__monaco-fallback {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 16px 20px;
    overflow: auto;
    color: var(--lightbox-text);
    font: 0.8125rem/1.5 var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    white-space: pre;
}

.ui-card {
    --ui-card-bg: var(--shell-bg-surface);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
    --ui-card-header-bg: transparent;
    --ui-card-row-hover-bg: var(--shell-bg-hover, var(--settings-control-hover-bg, lch(15.32% 0.75 272 / 1)));
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--ui-card-border);
    border-radius: 8px;
    background: var(--ui-card-bg);
    box-shadow: var(--ui-card-shadow);
    color: var(--shell-text-primary);
}

.app-shell[data-app-theme="light"] .ui-card,
.settings-shell[data-app-theme="light"] .ui-card {
    --ui-card-bg: lch(99.6% 0.15 272 / 1);
    --ui-card-border: lch(88.8% 0.8 272 / 1);
    --ui-card-shadow: 0 1px 1px lch(0 0 0 / 0.025), 0 8px 24px lch(0 0 0 / 0.035);
    --ui-card-header-bg: lch(98.4% 0.2 272 / 1);
    --ui-card-row-hover-bg: lch(95.4% 0.35 272 / 1);
}

.ui-card--subtle {
    --ui-card-bg: var(--shell-bg-active);
}

.app-shell[data-app-theme="light"] .ui-card--subtle,
.settings-shell[data-app-theme="light"] .ui-card--subtle {
    --ui-card-bg: lch(99.6% 0.15 272 / 1);
}

.ui-card--elevated {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-shadow: var(--shell-shadow);
}

.ui-card--wide {
    grid-column: 1 / -1;
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 45px;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--ui-card-border);
    background: var(--ui-card-header-bg);
}

.ui-card__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ui-card__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.ui-card__subtitle {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-card__header-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.ui-card__body {
    min-width: 0;
}

.ui-card__body--none,
.ui-card__body--flush {
    padding: 0;
}

.ui-card__body--compact {
    padding: 8px;
}

.ui-card__body--default {
    padding: 12px;
}

.ui-card__body--spacious {
    padding: 16px;
}

.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 41px;
    padding: 8px 14px;
    border-top: 0.5px solid var(--ui-card-border);
}

.metric-strip {
    --ui-card-shadow: none;
}

.app-shell[data-app-theme="light"] .metric-strip,
.settings-shell[data-app-theme="light"] .metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
}

.metric-strip .ui-card__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.metric-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
}

.metric-item + .metric-item {
    border-left: 0.5px solid var(--ui-card-border);
}

.metric-item__label,
.metric-item__trend {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.metric-item__value {
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 560;
    line-height: 30px;
}

@media (max-width: 720px) {
    .ui-card--wide {
        grid-column: auto;
    }

    .metric-item + .metric-item {
        border-left: 0;
        border-top: 0.5px solid var(--ui-card-border);
    }
}

.page-side-panel {
    position: relative;
    display: flex;
    z-index: 40;
    width: var(--page-side-panel-width, 396px);
    min-width: var(--page-side-panel-width, 396px);
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 120ms ease,
        visibility 120ms ease;
    visibility: hidden;
}

.page-side-panel[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

[data-grid-list-viewport] {
    position: relative;
}

[data-grid-list-viewport][data-overflow-right="true"]::after {
    content: "";
    display: block;
    flex: 0 0 40px;
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    bottom: 0;
    z-index: 22;
    width: 40px;
    height: 100%;
    margin-left: -40px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(5.52% 0.4 272 / 1))) 64%, transparent) 48%,
        transparent 100%
    );
}

.page-side-panel__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: var(--page-side-panel-width, 396px);
    height: 100%;
    min-height: 0;
    padding-top: var(--page-side-panel-gutter-top, 0px);
    overflow: auto;
    box-sizing: border-box;
    scrollbar-width: none;
}

.page-side-panel__inner::-webkit-scrollbar {
    display: none;
}

.page-side-panel__panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: calc(var(--page-side-panel-width, 396px) - var(--page-side-panel-gutter-right, 8px));
    min-height: 0;
    margin: 0 var(--page-side-panel-gutter-right, 8px) var(--page-side-panel-gutter-bottom, 8px) 0;
    padding: 12px;
    border: 0.5px solid var(--page-side-panel-card-border, var(--shell-border-card, lch(14.15% 1.83 272 / 1)));
    border-radius: 10px;
    background: var(--page-side-panel-card-bg, var(--shell-bg-card, lch(7.67% 0.75 272 / 1)));
    box-shadow:
        lch(0 0 0 / 0.04) 0 4px 4px -1px,
        lch(0 0 0 / 0.08) 0 1px 1px 0;
    box-sizing: border-box;
}

.page-side-panel--transparent .page-side-panel__panel {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Reusable light-card wrapper for side-panel sections. The panel stays
   unopinionated (Transparent chrome just stacks children); callers wrap each
   section in .qui-sidebar-card to get the shared elevated-card style. */
.qui-sidebar-card {
    border: 0.5px solid var(--shell-border-card, lch(14.15% 1.83 272 / 1));
    border-radius: 10px;
    /* Elevated surface (white in light, raised grey in dark) — the same token the
       detail side panels use — so the card reads lighter than the page, not darker. */
    background: var(--shell-bg-active, lch(9.02% 0.45 272 / 1));
    box-shadow:
        lch(0 0 0 / 0.04) 0 4px 4px -1px,
        lch(0 0 0 / 0.08) 0 1px 1px 0;
    box-sizing: border-box;
}

.qui-sidebar-card--padded {
    padding: 8px;
}

.page-side-panel__resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
}

.page-side-panel__resize-handle::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 0.5px;
    border-radius: 4px;
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.page-side-panel__resize-handle:hover::after,
.page-side-panel__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.page-side-panel[data-open="false"] .page-side-panel__resize-handle {
    pointer-events: none;
}

.page-side-panel__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    margin: 0 0 10px;
}

.page-side-panel__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 16.5px;
    margin: 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: lch(9.599% 0.943 272 / 1);
    color: lch(61.803% 1.2 272 / 1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition:
        border 150ms ease,
        background-color 120ms ease,
        color 120ms ease,
        opacity 150ms ease;
}

.page-side-panel__tab:hover,
.page-side-panel__tab:focus-visible {
    background: lch(13.07% 0.943 272 / 1);
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    outline: none;
}

.page-side-panel__tab--active,
.page-side-panel__tab--active:hover,
.page-side-panel__tab--active:focus-visible {
    background: lch(15.384% 1.329 272 / 1);
    color: lch(100% 0 272 / 1);
}

.page-side-panel__content,
.page-side-panel__section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-side-panel__section {
    gap: 8px;
    min-width: 0;
}

.page-side-panel__section-title {
    color: var(--shell-text-secondary, lch(61.803% 1.2 272 / 1));
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1.3;
}

.page-side-panel__summary-card {
    display: flex;
    align-items: center;
    justify-content: normal;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--shell-bg-card, lch(7.67% 0.75 272 / 1));
    box-sizing: border-box;
}

.page-side-panel__summary-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.page-side-panel__summary-title,
.page-side-panel__summary-count {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.page-side-panel__summary-health-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.page-side-panel__summary-health-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.page-side-panel__summary-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-side-panel__summary-count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
    flex: 0 0 auto;
    border-radius: 10px;
}

.metric-strip.ui-card {
    border-radius: 10px;
}

.app-shell[data-app-theme="light"] .metric-strip,
.settings-shell[data-app-theme="light"] .metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-shadow: none;
}

.metric-strip .ui-card__body {
    display: grid;
    grid-template-columns: repeat(var(--metric-strip-columns, 4), minmax(0, 1fr));
}

.metric-item {
    gap: 6px;
    padding: 16px;
}

.metric-item__label {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
}

.metric-item__value {
    letter-spacing: 0;
}

.metric-item__trend {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.metric-item__trend--success {
    color: #5ecca0;
}

.metric-item__trend--warning {
    color: #f2c94c;
}

.metric-item__trend--danger {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.metric-item__trend--info {
    color: var(--accent-solid, #5e6ad2);
}

.dashboard-widget-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.single-column-page__body-inner > .dashboard-widget-stack,
.detail-tab-panel > .dashboard-widget-stack {
    gap: 14px;
}

.dashboard-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.dashboard-progress-row {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.dashboard-progress-row + .dashboard-progress-row {
    padding-top: 10px;
    border-top: 0.5px solid var(--ui-card-border, var(--shell-border));
}

.dashboard-progress-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.dashboard-progress-row span,
.dashboard-progress-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-progress-row span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.dashboard-progress-row strong {
    flex: 0 0 auto;
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1rem;
}

.dashboard-progress-row__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 9999px;
}

.dashboard-progress-row--with-dot > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.signal-card {
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-bg-active);
}

.signal-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 0.5px solid var(--shell-border);
}

.signal-card__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.875rem;
    font-weight: 560;
    line-height: 1.25rem;
}

.signal-card__header span {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
}

.signal-list {
    display: flex;
    flex-direction: column;
}

.signal-list-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    min-height: 56px;
    padding: 11px 14px;
}

.signal-list-item + .signal-list-item {
    border-top: 0.5px solid var(--shell-border);
}

.signal-list-item strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 540;
    line-height: 1.125rem;
}

.signal-list-item small {
    grid-column: 2;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.signal-list-item__dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--shell-text-secondary);
}

.signal-list-item--success .signal-list-item__dot {
    background: #5ecca0;
}

.signal-list-item--warning .signal-list-item__dot {
    background: #f2c94c;
}

.signal-list-item--danger .signal-list-item__dot {
    background: var(--status-red-text, rgb(239, 92, 92));
}

.signal-list-item--info .signal-list-item__dot {
    background: var(--accent-solid, #5e6ad2);
}

.ui-form-grid {
    width: 100%;
}

@container (max-width: 720px) {
    .ui-form-grid > * {
        grid-column: 1 / -1;
    }
}

.detail-tab-panel {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--detail-tab-panel-top-gutter, 0) var(--detail-tab-panel-gutter, 8px) var(--detail-tab-panel-gutter, 8px);
    box-sizing: border-box;
    flex-direction: column;
    gap: 18px;
    overflow: auto;
    scrollbar-width: none;
}

.detail-tab-panel::-webkit-scrollbar {
    display: none;
}

.detail-tab-panel.split-tab-panel {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.split-tab-panel > .split-view {
    flex: 1 1 auto;
}

.page-with-side-panel__main > .detail-tab-panel,
.page-with-side-panel__main > .fill-region > .detail-tab-panel {
    padding-right: 0;
    padding-left: 0;
}

.detail-sidebar-property-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    /* Hug the content even inside a stretch-aligned flex column (the pill sizes to its label,
       like Linear) — callers must not need a wrapper to stop the row painting full-width. */
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0 10px 0 6px;
    border: 0;
    background: transparent;
    /* Measured Linear rail tier (dark: lch(90.947 4.284 282.863)) — one step below text-primary. */
    color: var(--shell-menu-text, var(--shell-text-primary));
}

/* Measured Linear hover anatomy: pill + trailing actions share a line; the › view circle and the
   detached ✕ are 28px circles with their own hover fill, revealed when the line is hovered. The
   due-date-style inline ✕ lives inside the pill and reveals the same way. */
.detail-sidebar-property-line {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    max-width: 100%;
}

.detail-sidebar-property-line__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    opacity: 0;
    transition: opacity 120ms ease;
}

/* Measured Linear: the 9×5 go-to caret is drawn pointing down and rotated to point right. */
.detail-sidebar-property-line__action--view svg {
    transform: rotate(-90deg);
}

.detail-sidebar-property-line__action--clear {
    width: 24px;
    height: 24px;
    min-height: 24px;
}

/* Measured Linear: hovering the property pill reveals the action WITH its circle fill (the same
   tone as the pill's own hover), before the action itself is hovered. */
.detail-sidebar-property-line:hover .detail-sidebar-property-line__action,
.detail-sidebar-property-line:focus-within .detail-sidebar-property-line__action {
    opacity: 1;
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
}

.detail-sidebar-property-row__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: -4px;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.detail-sidebar-property-row:hover .detail-sidebar-property-row__clear,
.detail-sidebar-property-row:focus-within .detail-sidebar-property-row__clear {
    display: inline-flex;
}

/* Picker-hosted rows: the ToggleChip trigger is chrome-free, so the pill span re-creates the
   interactive Button pill's radius and hover/open fill (and stays lit while its picker is open). */
.detail-sidebar-property-chip .detail-sidebar-property-row {
    border-radius: 9999px;
}

.detail-sidebar-property-chip .toggle-chip__button:hover .detail-sidebar-property-row,
.detail-sidebar-property-chip .toggle-chip__button:focus-visible .detail-sidebar-property-row,
.detail-sidebar-property-chip.toggle-chip--open .detail-sidebar-property-row {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    color: var(--settings-control-hover-text, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
}

/* The chip list's "+" keeps its fill while its picker is open. */
.detail-sidebar-chip-list .toggle-chip--open .detail-sidebar-chip-list__add {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
    color: var(--shell-text-primary);
}

.detail-sidebar-property-row__icon,
.detail-sidebar-property-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    color: var(--detail-sidebar-property-icon-color, var(--shell-text-primary));
}

.detail-sidebar-property-row__avatar {
    flex: 0 0 14px;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin: 0 1px;
    border-radius: 9999px;
    /* Per-person system palette first; accent mix only when no palette var is provided. */
    background: var(--ui-avatar-bg, color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active)));
    color: var(--ui-avatar-text, var(--accent-contrast));
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

/* Assigned people use the shared body-text role; other property kinds retain their palette. */
.detail-sidebar-property-row--human:not(.detail-sidebar-property-row--placeholder) {
    --detail-sidebar-property-label-color: var(--app-theme-text-body, inherit);
    --detail-sidebar-property-label-weight: 500;
}

.detail-sidebar-property-row__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--detail-sidebar-property-label-color, inherit);
    font-size: 0.8125rem;
    font-weight: var(--detail-sidebar-property-label-weight, 450);
    line-height: 0.96875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-editor {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.entity-property-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
}

button.entity-property-chip {
    cursor: default;
}

.entity-property-chip--interactive {
    cursor: pointer;
}

.entity-property-chip--row {
    gap: 8px;
    height: 28px;
    min-height: 28px;
    padding: 0 10px 0 6px;
    border-radius: 9999px;
    color: var(--shell-menu-text);
}

.entity-property-chip--compact {
    gap: 6px;
    height: 24px;
    min-height: 24px;
    padding: 0 7px 0 5px;
    border-radius: 9999px;
    color: var(--shell-menu-text);
}

.entity-property-chip--chip {
    gap: 6px;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--shell-border);
    border-radius: 30px;
    background: var(--shell-bg-surface);
}

.entity-property-chip--interactive:hover,
.entity-property-chip--interactive:focus-visible,
.entity-property-chip--open {
    background: var(--shell-menu-item-hover);
    outline: none;
}

.entity-property-chip--chip.entity-property-chip--interactive:hover,
.entity-property-chip--chip.entity-property-chip--interactive:focus-visible,
.entity-property-chip--chip.entity-property-chip--open {
    border-color: var(--shell-menu-border);
    background: var(--shell-bg-surface);
}

.entity-property-chip__icon,
.entity-property-chip__avatar,
.entity-property-chip__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    color: var(--shell-text-primary);
}

.entity-property-chip__avatar {
    width: 18px;
    min-width: 18px;
    height: 18px;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

.entity-property-chip__avatar--image {
    object-fit: cover;
}

.entity-property-chip__swatch {
    width: 9px;
    min-width: 9px;
    height: 9px;
    border-radius: 50%;
}

.entity-property-chip__text,
.entity-property-chip__meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-property-chip__text {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.entity-property-chip--row .entity-property-chip__text,
.entity-property-chip--compact .entity-property-chip__text {
    color: var(--shell-menu-text);
}

.entity-property-chip__meta {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

.anchored-dropdown-menu--property-editor > .shell-dropdown-menu {
    width: 207px;
}

.detail-sidebar-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 2px 0 1px -1.5px;
    padding-left: 2px;
}

.detail-sidebar-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--shell-border);
    border-radius: 30px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-primary);
    text-decoration: none;
}

.detail-sidebar-label-chip-anchor {
    position: relative;
    display: inline-flex;
}

button.detail-sidebar-label-chip {
    font: inherit;
    cursor: pointer;
}

/* Measured Linear hover: the chip fills with the control-hover tint (lch(93.48) light). */
.detail-sidebar-label-chip:hover {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
}

/* Linear's trailing "+" after the label chips: 24px round icon button, secondary glyph
   warming to primary (with the control-hover fill) on hover. */
.detail-sidebar-chip-list__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.detail-sidebar-chip-list__add:hover {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
    color: var(--shell-text-primary);
}

.detail-sidebar-label-chip__caret {
    display: inline-flex;
    align-items: center;
    margin-left: 1px;
    color: var(--shell-text-secondary);
}

a.detail-sidebar-label-chip,
.detail-sidebar-label-chip--interactive {
    cursor: pointer;
}

a.detail-sidebar-label-chip:hover,
a.detail-sidebar-label-chip:focus-visible,
.detail-sidebar-label-chip--interactive:hover,
.detail-sidebar-label-chip--interactive:focus-visible,
.detail-sidebar-label-chip--interactive[aria-expanded="true"] {
    border-color: var(--shell-menu-border);
    background: var(--shell-bg-surface);
    outline: none;
}

.anchored-dropdown-menu--detail-chip > .shell-dropdown-menu {
    width: 207px;
}

.anchored-dropdown-menu--detail-chip:not(.anchored-dropdown-menu--context) > .shell-dropdown-menu {
    top: 29px;
    left: 0;
}

.detail-sidebar-label-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--detail-sidebar-label-chip-color, var(--shell-text-secondary));
}

.detail-sidebar-label-chip__text {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.detail-sidebar-header-action {
    width: 28px;
    height: 28px;
    color: var(--shell-text-primary);
}

.detail-sidebar-empty-text {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
}

.detail-sidebar-empty-text a {
    color: var(--shell-text-primary);
    text-decoration: none;
}

.detail-sidebar-progress {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding-top: 12px;
}

.detail-sidebar-progress-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    min-height: 40.5px;
    column-gap: 4px;
}

.detail-sidebar-progress-stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.detail-sidebar-progress-stat span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.detail-sidebar-progress-stat strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 510;
    line-height: 1rem;
}

.detail-sidebar-segmented-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    margin: 14px 0 10px;
    padding: 0;
    border-radius: 5px;
    background: var(--detail-sidebar-segmented-bg, var(--shell-bg-surface));
}

.detail-sidebar-segmented-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.detail-sidebar-segmented-tab--active {
    background: var(--detail-sidebar-segmented-active-bg, var(--shell-nav-active-bg, var(--shell-bg-active)));
    color: var(--detail-sidebar-segmented-active-color, var(--shell-text-primary));
}

.detail-sidebar-summary-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.detail-sidebar-summary-row {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--shell-text-primary);
}

.detail-sidebar-summary-row span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-sidebar-summary-row strong {
    flex: 0 0 auto;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

.detail-sidebar-see-all-button {
    height: 24px;
    min-height: 24px;
    padding: 0 4px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
}

.detail-sidebar-activity-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding-top: 12px;
}

.detail-sidebar-activity-item {
    display: flex;
    min-width: 0;
    gap: 8px;
    padding-top: 12px;
}

.detail-sidebar-activity-item:first-child {
    padding-top: 0;
}

.detail-sidebar-activity-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
}

.detail-sidebar-activity-item__copy {
    display: block;
    min-width: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
}

.detail-sidebar-activity-item__copy strong {
    color: var(--shell-text-primary);
    font-weight: 450;
}

.grid-toolbar--tab-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-height: 39.5px;
    padding: 0;
    border-bottom: 0;
}

.grid-list-viewport--fill {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: auto hidden;
}

.grid-list-title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.grid-list-title-stack strong,
.grid-list-title-stack small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-list-title-stack strong {
    color: var(--grid-list-text-primary, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 540;
    line-height: 1.125rem;
}

.grid-list-title-stack small {
    color: var(--grid-list-text-secondary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

@media (max-width: 720px) {
    .metric-strip .ui-card__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.components-reconnect-active-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-active-visible,
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-active-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    width: min(380px, calc(100vw - 24px));
    max-width: none;
    min-height: 0;
    height: fit-content;
    margin: auto;
    padding: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 22px;
    background: var(--shell-menu-bg);
    box-shadow: var(--app-modal-shadow);
    color: var(--shell-menu-text);
    overflow: visible;
    opacity: 1;
    transform: none;
    outline: none;
}

#components-reconnect-modal::backdrop {
    background: var(--app-modal-overlay);
    opacity: var(--app-modal-overlay-opacity);
}

.components-reconnect-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 24px;
}

.components-reconnect-header {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding-right: 44px;
}

.components-reconnect-body {
    display: block;
    min-width: 0;
}

.components-reconnect-status {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
}

.components-reconnect-status::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--shell-menu-border);
    border-top-color: currentColor;
    border-radius: 9999px;
    animation: components-reconnect-spin 850ms linear infinite;
}

.components-reconnect-status::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%);
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status {
    color: lch(73% 45 28 / 1);
}

#components-reconnect-modal.components-reconnect-paused .components-reconnect-status {
    color: lch(78% 36 78 / 1);
}

#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status {
    color: lch(73% 45 28 / 1);
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status::before,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-status::before,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status::before {
    border-color: color-mix(in lch, currentColor 42%, var(--shell-menu-border));
    animation: none;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status::after,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-status::after,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status::after {
    opacity: 1;
}

.components-reconnect-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#components-reconnect-modal h2,
#components-reconnect-modal p {
    margin: 0;
}

.components-reconnect-title {
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.components-reconnect-message {
    max-width: 284px;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.components-reconnect-actions {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-actions,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-actions,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-actions {
    display: flex;
}

#components-reconnect-modal .ui-button.components-reconnect-failed-visible,
#components-reconnect-modal .ui-button.components-pause-visible,
#components-reconnect-modal .ui-button.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .ui-button.components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .ui-button.components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .ui-button.components-resume-failed-visible {
    display: inline-flex;
}

@keyframes components-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.ui-form__control-shell {
    position: relative;
    display: block;
    width: 100%;
}

.ui-form__control-shell > .ui-form__control {
    width: 100%;
}

.ui-form__control-shell--has-prefix > .ui-form__control,
.ui-form__password--has-prefix .ui-form__password-control {
    padding-left: 32px;
}

.ui-form__control-shell--has-suffix > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-clear > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-counter > .ui-form__control {
    padding-right: 54px;
}

.ui-form__control-shell--has-clear.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-clear.ui-form__control-shell--has-counter > .ui-form__control {
    padding-right: 66px;
}

.ui-form__control-shell--has-steppers > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear > .ui-form__control {
    padding-right: 58px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-steppers.ui-form__control-shell--has-unit > .ui-form__control {
    padding-right: 74px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear.ui-form__control-shell--has-unit > .ui-form__control {
    padding-right: 96px;
}

.ui-form__password--has-clear .ui-form__password-control,
.ui-form__password--loading .ui-form__password-control,
.ui-form__password--validating .ui-form__password-control {
    padding-right: 64px;
}

.ui-form__control-affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1;
}

.ui-form__control-shell > .ui-form__control-affix,
.ui-form__password-field > .ui-form__control-affix {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ui-form__control-shell > .ui-form__control-affix--prefix,
.ui-form__password-field > .ui-form__control-affix--prefix {
    left: 10px;
}

.ui-form__control-shell > .ui-form__control-affix--suffix,
.ui-form__password-field > .ui-form__control-affix--suffix {
    right: 10px;
    gap: 5px;
    pointer-events: auto;
}

.ui-form__control-shell--has-clear > .ui-form__control-affix--suffix {
    right: 34px;
}

.ui-form__control-shell--has-steppers > .ui-form__control-affix--suffix {
    right: 34px;
}

.ui-form__control-shell--has-clear.ui-form__control-shell--has-steppers > .ui-form__control-affix--suffix {
    right: 58px;
}

.ui-form__control-affix--textarea {
    top: 14px;
    transform: none;
}

.ui-form__control-clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.ui-form__control-clear .shell-icon,
.ui-form__multi-chip-remove .shell-icon {
    width: 8px;
    height: 8px;
}

.ui-form__control-clear:hover,
.ui-form__control-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__control-clear:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ui-form__control-shell > .ui-form__control-clear,
.ui-form__password-field > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__picker-trigger > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__range-trigger > .ui-form__control-clear,
.ui-form__duration-trigger > .ui-form__control-clear,
.ui-form__timezone-trigger > .ui-form__control-clear,
.ui-form__country-trigger > .ui-form__control-clear,
.ui-form__time-trigger > .ui-form__control-clear,
.ui-form__color-trigger > .ui-form__control-clear,
.ui-form__email-trigger > .ui-form__control-clear,
.ui-form__multi-trigger > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 25px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__control-shell--has-steppers > .ui-form__control-clear {
    right: 28px;
}

.ui-form__control-clear--textarea {
    top: 8px;
    transform: none;
}

.ui-form__control-clear--password {
    right: 32px;
}

.ui-form__control-loader {
    display: inline-flex;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: auto;
    border: 1.5px solid color-mix(in srgb, var(--shell-text-secondary) 32%, transparent);
    border-top-color: var(--shell-text-secondary);
    border-radius: 9999px;
    animation: ui-form-control-spin 760ms linear infinite;
}

.ui-form__control-shell > .ui-form__control-loader,
.ui-form__password-field > .ui-form__control-loader {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 9px;
    margin-left: 0;
    translate: 0 -50%;
}

.ui-form__control-loader--textarea {
    top: 12px;
    translate: none;
}

.ui-form__control-counter {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    min-width: 30px;
    justify-content: flex-end;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.ui-form__control-shell--over-limit .ui-form__control-counter {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__control-unit {
    color: var(--shell-text-tertiary);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.ui-form__number-steppers {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 26px;
    overflow: hidden;
    border-radius: 5px;
    transform: translateY(-50%);
}

.ui-form__number-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-tertiary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__number-stepper:hover,
.ui-form__number-stepper:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__number-stepper--increment svg {
    transform: rotate(-90deg);
}

.ui-form__number-stepper--decrement svg {
    transform: rotate(90deg);
}

.ui-form__control--validating,
.ui-form__rich-text--validating,
.ui-form__picker--validating .ui-form__picker-trigger,
.ui-form__duration--validating .ui-form__duration-trigger,
.ui-form__interval--validating .ui-form__interval-trigger,
.ui-form__timezone--validating .ui-form__timezone-trigger,
.ui-form__country--validating .ui-form__country-trigger,
.ui-form__time--validating .ui-form__time-trigger,
.ui-form__color-picker--validating .ui-form__color-trigger,
.ui-form__phone--validating .ui-form__phone-control,
.ui-form__email--validating .ui-form__email-trigger,
.ui-form__multi--validating .ui-form__multi-trigger,
.ui-form__button-group--validating,
.ui-form__avatar-field--validating .ui-form__avatar-preview {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 54%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__control--valid,
.ui-form__rich-text--valid,
.ui-form__picker--valid .ui-form__picker-trigger,
.ui-form__duration--valid .ui-form__duration-trigger,
.ui-form__interval--valid .ui-form__interval-trigger,
.ui-form__timezone--valid .ui-form__timezone-trigger,
.ui-form__country--valid .ui-form__country-trigger,
.ui-form__time--valid .ui-form__time-trigger,
.ui-form__color-picker--valid .ui-form__color-trigger,
.ui-form__phone--valid .ui-form__phone-control,
.ui-form__email--valid .ui-form__email-trigger,
.ui-form__multi--valid .ui-form__multi-trigger,
.ui-form__button-group--valid,
.ui-form__avatar-field--valid .ui-form__avatar-preview {
    border-color: color-mix(in srgb, var(--status-green-text, #5ecca0) 58%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__control--warning,
.ui-form__rich-text--warning,
.ui-form__picker--warning .ui-form__picker-trigger,
.ui-form__duration--warning .ui-form__duration-trigger,
.ui-form__interval--warning .ui-form__interval-trigger,
.ui-form__timezone--warning .ui-form__timezone-trigger,
.ui-form__country--warning .ui-form__country-trigger,
.ui-form__time--warning .ui-form__time-trigger,
.ui-form__color-picker--warning .ui-form__color-trigger,
.ui-form__phone--warning .ui-form__phone-control,
.ui-form__email--warning .ui-form__email-trigger,
.ui-form__multi--warning .ui-form__multi-trigger,
.ui-form__button-group--warning,
.ui-form__avatar-field--warning .ui-form__avatar-preview {
    border-color: color-mix(in srgb, #f2c94c 68%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--validating .ui-form__toggle-input,
.ui-form__range-slider--validating .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 54%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--valid .ui-form__toggle-input,
.ui-form__range-slider--valid .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, var(--status-green-text, #5ecca0) 58%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--warning .ui-form__toggle-input,
.ui-form__range-slider--warning .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, #f2c94c 68%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__avatar-field {
    position: relative;
}

.ui-form__avatar-clear {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-secondary);
    box-shadow: var(--shell-shadow);
    cursor: default;
}

.ui-form__avatar-clear:hover,
.ui-form__avatar-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__picker-trigger--has-clear {
    padding-right: 34px;
}

.ui-form__range-trigger--has-clear,
.ui-form__duration-trigger--has-clear,
.ui-form__interval-trigger--has-clear,
.ui-form__timezone-trigger--has-clear,
.ui-form__country-trigger--has-clear,
.ui-form__time-trigger--has-clear,
.ui-form__color-trigger--has-clear,
.ui-form__email-trigger--has-clear,
.ui-form__multi-trigger--has-clear {
    padding-right: 52px;
}

.ui-form__range-trigger--has-clear .ui-form__multi-chevron,
.ui-form__duration-trigger--has-clear .ui-form__multi-chevron,
.ui-form__interval-trigger--has-clear .ui-form__multi-chevron,
.ui-form__timezone-trigger--has-clear .ui-form__multi-chevron,
.ui-form__country-trigger--has-clear .ui-form__multi-chevron,
.ui-form__time-trigger--has-clear .ui-form__multi-chevron,
.ui-form__multi-trigger--has-clear .ui-form__multi-chevron {
    right: 9px;
}

@keyframes ui-form-control-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-modal-shell--wizard {
    overflow: hidden;
    border-radius: 18px;
}

.wizard-frame {
    display: flex;
    max-height: calc(100vh - 168px);
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    color: var(--shell-menu-text);
}

.wizard-frame--sidebar {
    min-height: 460px;
}

/* ── Header ── */

.wizard-frame__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 28px 20px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__heading {
    min-width: 0;
    padding-right: 32px;
}

.wizard-frame__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    line-height: 1.3125rem;
}

.wizard-frame__message {
    max-width: 520px;
    margin: 6px 0 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 440;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.wizard-frame__count {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    line-height: 1rem;
    white-space: nowrap;
}

/* ── Compact steps (horizontal) ── */

.wizard-frame__compact-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
    padding: 0 20px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__compact-step {
    position: relative;
    display: inline-flex;
    min-width: 0;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--shell-menu-hint);
    cursor: default;
    transition: color 160ms ease;
}

.wizard-frame__compact-step::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background 200ms ease;
}

.wizard-frame__compact-step:not(:disabled):hover,
.wizard-frame__compact-step:not(:disabled):focus-visible {
    color: var(--shell-menu-text-strong);
    outline: none;
}

.wizard-frame__compact-step--active {
    color: var(--shell-menu-text-strong);
}

.wizard-frame__compact-step--active::after {
    background: var(--shell-accent, #5e6ad2);
}

.wizard-frame__compact-step:disabled {
    cursor: default;
    opacity: 0.48;
}

/* ── Step markers (shared compact + sidebar) ── */

.wizard-frame__compact-step-marker,
.wizard-frame__step-marker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.wizard-frame__compact-step-marker {
    width: 16px;
    height: 16px;
}

.wizard-frame__compact-step--active .wizard-frame__compact-step-marker {
    background: var(--shell-accent, #5e6ad2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #5e6ad2) 16%, transparent);
    color: #fff;
}

.wizard-frame__compact-step--completed .wizard-frame__compact-step-marker,
.wizard-frame__step--completed .wizard-frame__step-marker {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
    color: var(--shell-accent, #5e6ad2);
}

.wizard-frame__compact-step-label {
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Body shell ── */

.wizard-frame__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.wizard-frame__body--with-rail {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

/* ── Sidebar step rail ── */

.wizard-frame__step-rail {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 1px;
    padding: 16px 12px;
    border-right: 0.5px solid var(--shell-menu-divider);
    overflow: auto;
    scrollbar-width: none;
}

.wizard-frame__step-rail::-webkit-scrollbar {
    display: none;
}

.wizard-frame__step {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-height: 48px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--shell-menu-hint);
    text-align: left;
    cursor: default;
    transition: background 160ms ease, color 160ms ease;
}

.wizard-frame__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(9px + 22px + 2px);
    left: calc(10px + 11px);
    width: 1px;
    height: calc(100% - 22px - 9px + 1px);
    background: var(--shell-menu-divider);
    transition: background 200ms ease;
}

.wizard-frame__step--completed:not(:last-child)::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 36%, transparent);
}

.wizard-frame__step:not(:disabled):hover,
.wizard-frame__step:not(:disabled):focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.wizard-frame__step--active {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.wizard-frame__step:disabled {
    cursor: default;
    opacity: 0.48;
}

.wizard-frame__step--disabled {
    opacity: 0.48;
}

.wizard-frame__step-marker {
    width: 22px;
    height: 22px;
    margin-top: 0;
    font-size: 0.6875rem;
}

.wizard-frame__step--active .wizard-frame__step-marker {
    background: var(--shell-accent, #5e6ad2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #5e6ad2) 16%, transparent);
    color: #fff;
}

.wizard-frame__step-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.wizard-frame__step-title {
    overflow: hidden;
    color: currentcolor;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-frame__step-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--shell-menu-hint);
    font-size: 0.71875rem;
    font-weight: 440;
    line-height: 0.9375rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ── Content area ── */

.wizard-frame__content {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px;
    overflow: auto;
    scrollbar-width: none;
}

.wizard-frame__content::-webkit-scrollbar {
    display: none;
}

.wizard-frame__active-step-heading {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wizard-frame__active-step-heading h3 {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    line-height: 1.25rem;
}

.wizard-frame__active-step-heading p,
.wizard-frame__empty {
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 440;
    line-height: 1.1875rem;
}

.wizard-frame__step-body {
    min-width: 0;
}

/* ── Error banner ── */

.wizard-frame__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 0.5px solid color-mix(in srgb, var(--shell-menu-text-danger) 32%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-menu-text-danger) 7%, transparent);
    color: var(--shell-menu-text-danger);
    font-size: 0.8125rem;
    font-weight: 480;
    line-height: 1.125rem;
}

/* ── Footer ── */

.wizard-frame__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__footer-left,
.wizard-frame__footer-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wizard-frame__footer-right {
    justify-content: flex-end;
}

.wizard-frame__primary-action {
    min-width: 92px;
}

.wizard-frame__button-spinner {
    display: inline-flex;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1.5px solid currentcolor;
    border-right-color: transparent;
    border-radius: 9999px;
    animation: ui-form-control-spin 720ms linear infinite;
}

/* ── Responsive ── */

@media (max-width: 680px) {
    .wizard-frame {
        max-height: calc(100vh - 64px);
    }

    .wizard-frame__header {
        padding: 22px 20px 16px;
    }

    .wizard-frame__heading {
        padding-right: 24px;
    }

    .wizard-frame__body--with-rail {
        display: flex;
        flex-direction: column;
    }

    .wizard-frame__step-rail {
        display: grid;
        grid-auto-columns: minmax(148px, 1fr);
        grid-auto-flow: column;
        border-right: 0;
        border-bottom: 0.5px solid var(--shell-menu-divider);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .wizard-frame__step:not(:last-child)::before {
        display: none;
    }

    .wizard-frame__content {
        padding: 20px;
    }

    .wizard-frame__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .wizard-frame__footer-left,
    .wizard-frame__footer-right {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-form__control-loader {
        animation: none;
    }

    .wizard-frame__button-spinner {
        animation: none;
    }

    .wizard-frame__compact-step,
    .wizard-frame__compact-step::after,
    .wizard-frame__compact-step-marker,
    .wizard-frame__step-marker,
    .wizard-frame__step {
        transition: none;
    }
}

.chat-transcript {
    display: flex;
    position: relative;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    /* Vertical only: wide media/diagrams scroll inside their own blocks, never the transcript. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.chat-transcript::-webkit-scrollbar {
    display: none;
}

.chat-transcript__top-scroll-hint {
    position: sticky;
    z-index: 2;
    top: -8px;
    display: block;
    height: 16px;
    flex: 0 0 16px;
    margin: -8px -8px -20px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))),
        color-mix(in srgb, var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))) 0%, transparent)
    );
}

.chat-transcript--top-scroll-hint[data-can-scroll="true"] .chat-transcript__top-scroll-hint {
    opacity: 1;
}

/* Bottom scroll hint (measured Linear 2026-09-11, dock + full page): a 52px fade to the surface
   colour pinned to the scrollport's bottom, visible only while newer content sits below. Sticky
   inside the scroller so it costs no layout; the negative margins pull it over the last row. */
.chat-transcript__bottom-scroll-hint {
    position: sticky;
    z-index: 2;
    bottom: -20px;
    display: block;
    height: 52px;
    flex: 0 0 52px;
    margin: calc(-52px - 12px) -8px -20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
    background: linear-gradient(
        to top,
        var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))),
        color-mix(in srgb, var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))) 0%, transparent)
    );
}

.chat-transcript[data-can-scroll="true"][data-at-bottom="false"] .chat-transcript__bottom-scroll-hint {
    opacity: 1;
}

/* "Latest" pill (measured Linear): 28px, radius 15, surface bg, 0.5px hairline border, 12/500
   primary text, padding 0 10px 0 8px with a 14px muted arrow-down; centred 12px above the
   scrollport bottom. Hidden (and inert) while the newest messages are in view. */
.chat-transcript__latest {
    position: sticky;
    z-index: 3;
    bottom: -8px;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    margin: calc(-28px - 12px) 0 -20px;
    padding: 0 10px 0 8px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 15px;
    background: var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface)));
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, background-color 150ms ease;
}

.chat-transcript__latest .shell-icon {
    color: var(--shell-text-secondary);
}

.chat-transcript[data-can-scroll="true"][data-at-bottom="false"] .chat-transcript__latest {
    opacity: 1;
    pointer-events: auto;
}

.chat-transcript__latest:hover {
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
}

/* Rich mention pill (a resolved issue reference): [status glyph] IDENTIFIER Title — the inline
   issue-reference anatomy (14px glyph, muted identifier, primary title), no "@". */
.assistant-mention--rich {
    gap: 4px;
}

.assistant-mention__icon {
    display: inline-flex;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
}

.assistant-mention__icon svg {
    width: 14px;
    height: 14px;
}

.assistant-mention__identifier {
    color: var(--shell-text-secondary);
    font-weight: 500;
}

.assistant-mention__title {
    color: var(--shell-text-primary);
    font-weight: 500;
}

/* One Qui-owned hover card per transcript for mention pills; the host renders the body. Fixed and
   above the transcript's stacking context; the surface reuses the shared hover-card chrome. */
.chat-transcript__mention-hover {
    z-index: 760;
    pointer-events: auto;
}

.chat-transcript__mention-hover-surface {
    --ui-hover-card-max-width: 24rem;
}

.chat-transcript--empty {
    justify-content: center;
}

/* Scroll room under the last message for the anchor-to-top send mechanic; sized by JS. */
.chat-transcript__spacer {
    flex: 0 0 auto;
    height: 0;
}

/* Messages animate in only once the initial transcript has painted (the JS marks the
   pre-existing children), so opening a conversation doesn't replay a fade-in cascade. */
.chat-transcript--live > :not(.chat-transcript__spacer):not(.chat-transcript__top-scroll-hint):not([data-chat-entered]) {
    animation: chat-message-enter 200ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes chat-message-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-transcript--live > :not(.chat-transcript__spacer):not(.chat-transcript__top-scroll-hint):not([data-chat-entered]) {
        animation: none;
    }
}

.chat-message {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.chat-message--start {
    align-items: flex-start;
}

.chat-message--end {
    align-items: flex-end;
}

.chat-message--end.chat-message--bubble {
    max-width: 80%;
    align-self: flex-end;
}

.chat-message--center {
    align-items: center;
}

.chat-message__plain,
.chat-message-bubble {
    min-width: 0;
    max-width: min(100%, 520px);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    overflow-wrap: anywhere;
    word-break: normal;
}

.chat-message__plain {
    width: 100%;
}

.chat-message__content {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.chat-message__attachments {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.chat-message-bubble {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--shell-bg-raised);
    box-shadow: var(--assistant-user-message-shadow, none);
}

.chat-message-bubble--end {
    background: var(--assistant-user-message-bg, var(--shell-bg-raised));
    color: var(--assistant-user-message-text, var(--shell-text-primary));
}

.chat-message__text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-message__text--pending {
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
}

.chat-message__text--reasoning,
.assistant-message__part--reasoning {
    display: inline-block;
    max-width: 100%;
    /* Reasoning summaries arrive as paragraphs separated by blank lines: keep the breaks. */
    white-space: pre-line;
    color: color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 74%, transparent);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 450;
    line-height: 1.125rem;
    background-image: linear-gradient(
        105deg,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 54%, transparent) 0%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 76%, transparent) 36%,
        var(--assistant-panel-soft, var(--shell-text-primary)) 50%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 76%, transparent) 64%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 54%, transparent) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chat-reasoning-shimmer 3.8s linear infinite;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .chat-message__text--reasoning,
    .assistant-message__part--reasoning {
        color: color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 74%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-message__text--reasoning,
    .assistant-message__part--reasoning {
        animation: none;
        background-position: 50% 0;
    }
}

@keyframes chat-reasoning-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.chat-message__markdown > :first-child {
    margin-top: 0;
}

.chat-message__markdown > :last-child {
    margin-bottom: 0;
}

.chat-message__markdown p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.chat-message__markdown ul,
.chat-message__markdown ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.chat-message__markdown code {
    padding: 1px 4px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 4px;
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.75rem;
}

.chat-message__markdown,
.chat-message__markdown li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chat-message__markdown pre {
    max-width: 100%;
    overflow-x: auto;
}

.chat-message-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

.chat-message:hover .chat-message-toolbar,
.chat-message:focus-within .chat-message-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.chat-message-toolbar__button {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--assistant-message-action-icon, var(--shell-text-muted));
    cursor: default;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.chat-message-toolbar__button:hover,
.chat-message-toolbar__button:focus-visible {
    background: var(--assistant-panel-hover-bg, var(--shell-hover-bg));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    outline: none;
}

.chat-message-toolbar__button::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1100;
    height: 27px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-tooltip-bg, var(--shell-menu-bg));
    box-shadow:
        rgb(0 0 0 / 12.5%) 0 3px 8px,
        rgb(0 0 0 / 12.5%) 0 2px 5px,
        rgb(0 0 0 / 12.5%) 0 1px 1px;
    color: var(--assistant-tooltip-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 26px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.chat-message-toolbar__button:hover::after,
.chat-message-toolbar__button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.chat-message-toolbar__label {
    overflow: hidden;
    max-width: 92px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-avatar-message {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    align-items: start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--shell-text-primary);
    transition: background-color 120ms ease-out;
}

.chat-avatar-message--start {
    grid-template-columns: 28px minmax(0, 1fr) auto;
}

.chat-avatar-message--end {
    grid-template-columns: auto minmax(0, 1fr) 28px;
}

.chat-avatar-message--no-avatar.chat-avatar-message--start {
    grid-template-columns: minmax(0, 1fr) auto;
}

.chat-avatar-message--no-avatar.chat-avatar-message--end {
    grid-template-columns: auto minmax(0, 1fr);
}

.chat-avatar-message:hover,
.chat-avatar-message:focus-within {
    background: var(--shell-bg-hover);
}

.chat-avatar-message__avatar {
    display: flex;
    grid-row: 1;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 9999px;
    background: var(--chat-avatar-message-avatar-bg, var(--shell-accent, #5e6ad2));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.75rem;
}

.chat-avatar-message--end .chat-avatar-message__avatar {
    grid-column: 3;
}

.chat-avatar-message__body {
    display: flex;
    grid-row: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.chat-avatar-message--end .chat-avatar-message__body {
    grid-column: 2;
    align-items: flex-end;
}

.chat-avatar-message--no-avatar.chat-avatar-message--start .chat-avatar-message__body {
    grid-column: 1;
}

.chat-avatar-message--no-avatar.chat-avatar-message--end .chat-avatar-message__body {
    grid-column: 2;
}

.chat-avatar-message__header {
    display: flex;
    min-height: 18px;
    align-items: baseline;
    gap: 7px;
}

.chat-avatar-message--end .chat-avatar-message__header {
    flex-direction: row-reverse;
}

.chat-avatar-message__header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.125rem;
}

.chat-avatar-message__header span {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    line-height: 0.9375rem;
}

.chat-avatar-message__bubble {
    width: fit-content;
    max-width: min(680px, 100%);
    margin-top: 2px;
    padding: 7px 10px;
    border: 0.5px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-bg-active);
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-avatar-message--end .chat-avatar-message__bubble {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent);
    color: var(--shell-text-primary);
}

.chat-avatar-message__actions {
    display: flex;
    grid-row: 1;
    align-items: flex-start;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1px);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.chat-avatar-message--start .chat-avatar-message__actions {
    grid-column: 3;
}

.chat-avatar-message--end .chat-avatar-message__actions {
    grid-column: 1;
}

.chat-avatar-message:hover .chat-avatar-message__actions,
.chat-avatar-message:focus-within .chat-avatar-message__actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.assistant-message__part {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.assistant-message__part + .assistant-message__part {
    margin-top: 8px;
}

.assistant-message__part--status {
    color: var(--assistant-panel-muted);
}

.assistant-message__part--reasoning + .assistant-message__part {
    margin-top: 10px;
}

.assistant-message__part--error {
    padding: 8px 10px;
    border: 0.5px solid color-mix(in srgb, var(--danger, #f04438) 38%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #f04438) 9%, transparent);
    color: var(--assistant-panel-text);
}

.assistant-panel__state {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 28px;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__state-title {
    color: var(--assistant-panel-text);
    font-size: 0.875rem;
    font-weight: 560;
}

.assistant-panel__state-copy {
    max-width: 260px;
}

.assistant-panel__state-spinner {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--assistant-panel-border);
    border-top-color: var(--assistant-panel-text);
    border-radius: 9999px;
    animation: assistant-panel-spin 720ms linear infinite;
}

@keyframes assistant-panel-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Linear parity: while the agent works, a single step line replaces the worked-for
   pill — only the latest tool shows ("Name…" while running), shimmering at Linear's
   measured 2.4s linear; the latest reasoning paragraph streams below it. */
.assistant-message__live {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

/* The one-line ticker window: step swaps roll vertically inside it. */
.assistant-message__live-line {
    position: relative;
    display: block;
    height: 16px;
    overflow: hidden;
    margin-bottom: 12px;
}

.assistant-message__live-step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 16px;
    overflow: hidden;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.assistant-message__live-step--out {
    animation: assistant-live-roll-out 240ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

@keyframes assistant-live-roll-out {
    to {
        opacity: 0;
        transform: translateY(-14px);
    }
}

@keyframes assistant-live-roll-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.assistant-message__live-step--active {
    background-image: linear-gradient(
        105deg,
        color-mix(in srgb, var(--assistant-panel-muted) 55%, transparent) 0%,
        color-mix(in srgb, var(--assistant-panel-muted) 78%, transparent) 36%,
        var(--assistant-panel-soft, var(--shell-text-primary)) 50%,
        color-mix(in srgb, var(--assistant-panel-muted) 78%, transparent) 64%,
        color-mix(in srgb, var(--assistant-panel-muted) 55%, transparent) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        assistant-live-roll-in 240ms cubic-bezier(0.2, 0.6, 0.2, 1),
        assistant-live-shimmer 2.4s linear infinite;
}


@keyframes assistant-live-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.assistant-message__live-reasoning {
    margin: 0;
    border-left: 2px solid var(--assistant-panel-border);
    padding-left: 12px;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.6;
    /* Reasoning summaries arrive as paragraphs separated by blank lines: keep the breaks. */
    white-space: pre-line;
    animation: assistant-live-reasoning-in 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

@keyframes assistant-live-reasoning-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-message__live-step--active {
        animation: none;
        background-position: 50% 0;
    }

    .assistant-message__live-step--out {
        animation: none;
        opacity: 0;
    }

    .assistant-message__live-reasoning {
        animation: none;
    }
}

/* Linear parity: a tool call is a plain muted text row — no card, no icon, no status
   colour. Title 13/500 with a single truncating 13/450 detail beside it (16px gap). */
.assistant-tool-call {
    display: flex;
    align-items: baseline;
    gap: 16px;
    max-width: 100%;
    min-width: 0;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    line-height: 1rem;
}

.assistant-tool-call__title {
    flex: 0 0 auto;
    font-weight: 500;
}

.assistant-tool-call__detail {
    min-width: 0;
    overflow: hidden;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-message__part.assistant-message__part--work-log {
    display: block;
    width: 100%;
    margin: 8px 0 10px;
}

.assistant-message__inline-flow {
    display: inline;
}

.assistant-message__inline-flow > .assistant-inline-chip {
    margin-right: 4px;
}

.assistant-inline-chip {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    min-height: 19.5px;
    align-items: center;
    vertical-align: baseline;
    gap: 4px;
    padding: 1.5px 3.9px 1.5px 2.6px;
    border: 0.5px solid transparent;
    border-radius: 4px;
    color: var(--assistant-inline-chip-text, var(--assistant-panel-soft));
    background: var(--assistant-inline-chip-bg, var(--shell-bg-button));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    white-space: nowrap;
}

.assistant-inline-chip__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--assistant-panel-muted);
}

.assistant-inline-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-inline-chip__remove {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    margin: 0 0 0 1px;
    color: var(--assistant-panel-muted);
    background: transparent;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.assistant-inline-chip--removable:hover .assistant-inline-chip__remove,
.assistant-inline-chip--removable:focus-within .assistant-inline-chip__remove {
    opacity: 1;
}

.assistant-inline-chip__remove:hover,
.assistant-inline-chip__remove:focus-visible {
    color: var(--assistant-panel-text);
    background: var(--assistant-panel-hover-bg);
    outline: none;
}

.assistant-work-log {
    width: 100%;
    max-width: 70%;
    margin: 8px 0 10px;
    overflow: hidden;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--assistant-panel-raised-bg, var(--shell-bg-raised)) 82%, transparent);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--assistant-panel-text, var(--shell-text-primary)) 3%, transparent);
    box-sizing: border-box;
}

.assistant-message__assistant-text .assistant-work-log {
    margin-left: 0;
}

.assistant-work-log__header {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-bottom: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1rem;
    text-transform: uppercase;
}

.assistant-work-log__header-icon,
.assistant-work-log__entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
}

.assistant-work-log__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-work-log__count {
    display: inline-flex;
    min-width: 20px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 9999px;
    background: color-mix(in srgb, var(--assistant-panel-hover-bg, var(--shell-bg-hover)) 58%, transparent);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.assistant-work-log__entries {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant-message__assistant-text .assistant-work-log__entries {
    margin: 0;
    padding: 0;
}

.assistant-work-log__entry {
    display: flex;
    min-width: 0;
    height: 28px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-top: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.assistant-message__assistant-text .assistant-work-log__entry {
    margin: 0;
    overflow-wrap: normal;
}

.assistant-work-log__entry:first-child {
    border-top: 0;
}

.assistant-work-log__entry-title {
    flex: 0 0 auto;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-work-log__entry-detail {
    min-width: 0;
    overflow: hidden;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-panel__context-row {
    gap: 4px;
    flex-wrap: wrap;
}

.assistant-panel__context-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 9999px;
    color: var(--assistant-panel-muted);
    transition: background-color 90ms ease-out, color 90ms ease-out;
}

.assistant-panel__context-remove:hover,
.assistant-panel__context-remove:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
    outline: none;
}

.code-viewer,
.code-editor,
.code-diff-viewer,
.code-review-viewer,
.code-merge-viewer {
    --code-bg: var(--shell-menu-bg, var(--shell-bg-active));
    --code-border: var(--shell-menu-border, var(--app-theme-card-border, var(--shell-border)));
    --code-header-bg: color-mix(in srgb, var(--shell-bg-active) 82%, transparent);
    --code-text: var(--shell-text-primary);
    --code-muted: var(--shell-text-secondary);
    --code-hover: var(--shell-bg-hover);
    display: flex;
    min-width: 0;
    min-height: 0;
    color: var(--code-text);
}

.code-diff-viewer,
.code-review-viewer,
.code-snippet-card {
    --code-review-card-bg: var(--code-bg);
    --code-review-header-bg: var(--code-bg);
    --code-review-line-number-bg: var(--code-bg);
    --code-review-added-bg: rgba(4, 154, 31, 0.1);
    --code-review-added-gutter-bg: var(--code-review-line-number-bg);
    --code-review-added-border: rgb(34, 197, 94);
    --code-review-added-text: lch(68% 64.37 141.95);
    --code-review-removed-bg: rgba(220, 38, 38, 0.13);
    --code-review-removed-gutter-bg: var(--code-review-line-number-bg);
    --code-review-removed-border: rgb(248, 113, 113);
    --code-review-removed-text: lch(67% 58 29);
    --code-review-comment-bg: var(--code-review-card-bg);
    --code-review-comment-border: var(--code-border);
    --code-review-fold-bg: color-mix(in srgb, var(--shell-bg-active) 52%, transparent);
    --code-review-fold-hover-bg: color-mix(in srgb, var(--shell-bg-hover) 72%, transparent);
}

.code-viewer,
.code-editor,
.code-diff-viewer,
.code-merge-viewer {
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-bg);
}

.code-viewer__header,
.code-editor__header,
.code-diff-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 7px 10px 7px 12px;
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-header-bg);
}

.code-viewer__title-stack,
.code-editor__title-stack,
.code-diff-viewer__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.code-viewer__title,
.code-editor__title,
.code-diff-viewer__title {
    margin: 0;
    overflow: hidden;
    color: var(--code-text);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-viewer__subtitle,
.code-editor__subtitle,
.code-diff-viewer__subtitle {
    overflow: hidden;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-viewer__actions,
.code-editor__actions,
.code-diff-viewer__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.code-surface,
.code-diff-viewer__surface {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: var(--code-surface-height, 360px);
    overflow: hidden;
    background: var(--code-bg);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.code-viewer > .code-surface,
.code-editor > .code-surface,
.code-diff-viewer > .code-diff-viewer__surface {
    flex: 1 1 auto;
}

.code-surface--theme-background,
.code-diff-viewer__surface {
    background: transparent;
}

.code-surface__comment-line {
    background: color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 13%, transparent);
}

.code-surface__comment-glyph {
    position: relative;
}

.code-surface__comment-glyph::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px auto 0;
    border-radius: 9999px;
    background: var(--app-theme-accent, #5e6ad2);
}

.code-surface__comment-glyph--resolved::after {
    background: var(--shell-text-muted);
}

.code-diff-viewer .monaco-diff-editor .line-insert,
.code-diff-viewer .monaco-diff-editor .char-insert {
    background: var(--code-review-added-bg) !important;
}

.code-diff-viewer .monaco-diff-editor .line-delete,
.code-diff-viewer .monaco-diff-editor .char-delete {
    background: var(--code-review-removed-bg) !important;
}

.code-diff-viewer .monaco-diff-editor .gutter-insert {
    box-shadow: inset 2px 0 0 var(--code-review-added-border) !important;
}

.code-diff-viewer .monaco-diff-editor .gutter-delete {
    box-shadow: inset 2px 0 0 var(--code-review-removed-border) !important;
}

.code-diff-viewer .monaco-diff-editor .line-numbers {
    color: var(--code-muted) !important;
}

.code-diff-viewer .monaco-diff-editor .line-numbers.active-line-number {
    color: var(--code-text) !important;
}

.code-diff-viewer__threads {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-top: 0.5px solid var(--code-border);
}

.code-diff-viewer__thread {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: 0.5px solid var(--code-border);
    border-radius: 6px;
    background: var(--shell-bg-surface);
}

.code-diff-viewer__thread--resolved {
    opacity: 0.66;
}

.code-diff-viewer__thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--code-muted);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
    text-transform: uppercase;
}

.code-diff-viewer__thread-message {
    margin: 0;
    color: var(--code-text);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.code-review-viewer {
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background: transparent;
}

.code-review-viewer--virtualized {
    overflow: hidden;
}

.code-review-viewer__toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 0 2px;
}

.code-review-viewer__summary,
.code-review-viewer__actions,
.code-review-viewer__file-meta {
    display: inline-flex;
    align-items: center;
}

.code-review-viewer__summary {
    gap: 10px;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1rem;
}

.code-review-viewer__actions {
    gap: 8px;
}

.code-review-viewer__stack {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    align-content: start;
    gap: 16px;
}

.code-review-viewer__stack--virtualized {
    display: block;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.code-review-viewer__stack--virtualized .code-review-viewer__file-card {
    margin-bottom: 16px;
}

.code-review-viewer__file-card {
    min-width: 0;
    overflow: visible;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-review-card-bg);
}

.code-review-viewer__file-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    height: 37px;
    min-height: 37px;
    padding: 6px 8px;
    border-bottom: 0.5px solid var(--code-border);
    border-radius: 7.5px 7.5px 0 0;
    background: var(--code-review-header-bg);
    box-shadow:
        inset 0 0 0 0.5px var(--code-border),
        0 1px 0 var(--code-review-header-bg);
}

.code-review-viewer__file-toggle {
    position: relative;
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--code-muted);
    cursor: default;
    padding: 0;
}

.code-review-viewer__file-toggle:hover,
.code-review-viewer__file-toggle:focus-visible {
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__file-language-icon,
.code-review-viewer__file-collapse-icon {
    grid-area: 1 / 1;
    transition: opacity 120ms ease, transform 120ms ease;
}

.code-review-viewer__file-language-icon {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: var(--code-muted);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.code-review-viewer__file-collapse-icon {
    display: inline-grid;
    place-items: center;
    color: var(--code-muted);
    opacity: 0;
    transform: rotate(90deg) scale(0.94);
}

.code-review-viewer__file-toggle:hover .code-review-viewer__file-language-icon,
.code-review-viewer__file-toggle:focus-visible .code-review-viewer__file-language-icon {
    opacity: 0;
}

.code-review-viewer__file-toggle:hover .code-review-viewer__file-collapse-icon,
.code-review-viewer__file-toggle:focus-visible .code-review-viewer__file-collapse-icon {
    opacity: 1;
}

.code-review-viewer__file-toggle--collapsed .code-review-viewer__file-collapse-icon {
    transform: rotate(0deg) scale(0.94);
}

.code-review-viewer__file-card--collapsed .code-review-viewer__file-header {
    border-bottom: 0;
    border-radius: 8px;
}

.code-review-viewer__file-title-stack {
    min-width: 0;
    overflow: hidden;
}

.code-review-viewer__file-title-line {
    display: flex;
    min-width: 0;
    max-width: 100%;
    height: 15px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.code-review-viewer__file-name,
.code-review-viewer__file-directory {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-review-viewer__file-name {
    flex: 0 1 auto;
    color: var(--code-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-review-viewer__file-directory {
    flex: 1 1 auto;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-review-viewer__file-meta {
    display: inline-flex;
    min-width: max-content;
    height: 24px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
    white-space: nowrap;
}

.code-review-viewer__file-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--app-theme-accent, #5e6ad2);
}

.code-review-viewer__file-additions {
    color: var(--code-review-added-text);
}

.code-review-viewer__file-deletions {
    color: var(--code-review-removed-text);
}

.code-review-viewer__review-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
}

.code-review-viewer__review-button:hover,
.code-review-viewer__review-button:focus-visible {
    background: var(--code-hover);
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__review-button--checked {
    color: var(--code-text);
}

.code-review-viewer__review-box {
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 0.5px solid var(--code-border);
    border-radius: 3px;
    color: var(--shell-bg-surface);
}

.code-review-viewer__review-button--checked .code-review-viewer__review-box {
    border-color: var(--app-theme-accent, #5e6ad2);
    background: var(--app-theme-accent, #5e6ad2);
}

.code-review-viewer__file-meta .ui-icon-button {
    opacity: 1;
}

.code-review-viewer__diff {
    min-width: 0;
    overflow-x: auto;
    padding: 0;
    border-radius: 0 0 7.5px 7.5px;
    background: var(--code-review-card-bg);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.code-review-viewer__line {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(max-content, 1fr);
    min-width: max-content;
    height: 20px;
    min-height: 20px;
    color: var(--code-text);
    font-size: 0.75rem;
    line-height: 20px;
}

.code-review-viewer__line--added {
    box-shadow: inset 2px 0 0 var(--code-review-added-border);
}

.code-review-viewer__line--removed {
    box-shadow: inset 2px 0 0 var(--code-review-removed-border);
}

.code-review-viewer__line--added .code-review-viewer__line-code,
.code-review-viewer__line--added .code-review-viewer__line-number {
    background: var(--code-review-added-bg);
}

.code-review-viewer__line--removed .code-review-viewer__line-code,
.code-review-viewer__line--removed .code-review-viewer__line-number {
    background: var(--code-review-removed-bg);
}

.code-review-viewer__line-number {
    position: sticky;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 20px;
    padding: 0 10px;
    background: var(--code-review-line-number-bg);
    color: var(--code-muted);
    user-select: none;
}

.code-review-viewer__line--added .code-review-viewer__line-number {
    color: var(--code-review-added-text);
}

.code-review-viewer__line--removed .code-review-viewer__line-number {
    color: var(--code-review-removed-text);
}

.code-review-viewer__line-code {
    display: block;
    min-width: 0;
    height: 20px;
    padding: 0 10px;
    color: inherit;
    font: inherit;
    white-space: pre;
}

.code-review-viewer__line-action {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-grid;
    width: 60px;
    height: 20px;
    place-items: center;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--code-review-line-number-bg) 72%, var(--shell-bg-hover));
    color: var(--code-muted);
    opacity: 0;
    transform: none;
    transition: opacity 100ms ease, background-color 100ms ease, color 100ms ease;
}

.code-review-viewer__line:hover .code-review-viewer__line-action,
.code-review-viewer__line:focus-within .code-review-viewer__line-action {
    opacity: 1;
    transform: none;
}

.code-review-viewer__line-action:hover,
.code-review-viewer__line-action:focus-visible {
    background: color-mix(in srgb, var(--code-review-line-number-bg) 52%, var(--shell-bg-hover));
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__fold {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 28px;
    align-items: center;
    border-top: 0.5px solid var(--code-border);
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-review-fold-bg);
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1rem;
}

.code-review-viewer__fold-gutter {
    display: inline-grid;
    height: 28px;
    place-items: center;
}

.code-review-viewer__fold-side-button,
.code-review-viewer__fold-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--code-muted);
    font: inherit;
    cursor: default;
}

.code-review-viewer__fold-side-button {
    width: 24px;
    height: 24px;
    padding: 0;
}

.code-review-viewer__fold-side-button:hover,
.code-review-viewer__fold-side-button:focus-visible,
.code-review-viewer__fold-label:hover,
.code-review-viewer__fold-label:focus-visible {
    background: var(--code-review-fold-hover-bg);
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__fold-label {
    width: fit-content;
    min-height: 24px;
    justify-self: center;
    padding: 0 8px;
    margin-right: 60px;
}

.code-review-viewer__thread,
.code-review-viewer__comment-draft {
    display: block;
    margin: 0;
    padding: 8px clamp(12px, 18%, 244px) 8px 72px;
    color: var(--code-text);
}

.code-review-viewer__thread--added,
.code-review-viewer__comment-draft--added {
    background: linear-gradient(
        to right,
        var(--code-review-added-bg) 0,
        var(--code-review-added-bg) 100%
    );
    box-shadow: inset 2px 0 0 var(--code-review-added-border);
}

.code-review-viewer__thread--removed,
.code-review-viewer__comment-draft--removed {
    background: linear-gradient(
        to right,
        var(--code-review-removed-bg) 0,
        var(--code-review-removed-bg) 100%
    );
    box-shadow: inset 2px 0 0 var(--code-review-removed-border);
}

.code-review-viewer__thread--resolved {
    opacity: 0.68;
}

.code-review-viewer__thread .comment-thread--root,
.code-review-viewer__comment-draft .comment-composer {
    width: 100%;
    margin: 0;
}

.code-review-viewer__comment-draft .comment-composer {
    border: 0.5px solid var(--comment-thread-card-border, var(--code-border));
    border-radius: 8px;
    background: var(--comment-thread-card-bg, var(--code-review-comment-bg));
    min-height: 42px;
    padding: 7px 10px 7px 12px;
}

.code-review-viewer__comment-draft .comment-composer__input {
    min-height: 22px;
    line-height: 1.25rem;
}

.code-review-viewer__empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: var(--code-muted);
    font-size: 0.8125rem;
}

.code-snippet-card {
    --code-bg: var(--shell-menu-bg, var(--shell-bg-active));
    --code-border: var(--shell-menu-border, var(--app-theme-card-border, var(--shell-border)));
    --code-text: var(--shell-text-primary);
    --code-muted: var(--shell-text-secondary);
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-review-card-bg);
}

.code-snippet-card__header {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    height: 37px;
    min-height: 37px;
    padding: 6px 8px;
    border-bottom: 0.5px solid var(--code-border);
    border-radius: 7.5px 7.5px 0 0;
    background: var(--code-review-header-bg);
    box-shadow:
        inset 0 0 0 0.5px var(--code-border),
        0 1px 0 var(--code-review-header-bg);
}

.code-snippet-card__language-icon {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: var(--code-muted);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.code-snippet-card__title-stack {
    min-width: 0;
    overflow: hidden;
}

.code-snippet-card__title-line {
    display: flex;
    min-width: 0;
    max-width: 100%;
    height: 15px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.code-snippet-card__file-name,
.code-snippet-card__file-directory {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-snippet-card__file-name {
    flex: 0 1 auto;
    color: var(--code-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-snippet-card__file-directory {
    flex: 1 1 auto;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-snippet-card__meta {
    display: inline-flex;
    min-width: 0;
    max-width: 42%;
    height: 24px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
    white-space: nowrap;
}

.code-snippet-card__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-snippet-card__body {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 0 0 7.5px 7.5px;
    background: var(--code-review-card-bg);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.code-snippet-card__line {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    height: 20px;
    min-height: 20px;
    color: var(--code-text);
    font-size: 0.75rem;
    line-height: 20px;
}

.code-snippet-card__line--highlighted {
    box-shadow: inset 2px 0 0 var(--app-theme-accent, #5e6ad2);
}

.code-snippet-card__line--highlighted .code-snippet-card__line-code,
.code-snippet-card__line--highlighted .code-snippet-card__line-number,
.code-snippet-card__line--warning .code-snippet-card__line-code,
.code-snippet-card__line--warning .code-snippet-card__line-number {
    background: color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 12%, transparent);
}

.code-snippet-card__line--error {
    box-shadow: inset 2px 0 0 var(--shell-danger-text, #f97373);
}

.code-snippet-card__line--error .code-snippet-card__line-code,
.code-snippet-card__line--error .code-snippet-card__line-number {
    background: color-mix(in srgb, var(--shell-danger-text, #f97373) 10%, transparent);
}

.code-snippet-card__line--added {
    box-shadow: inset 2px 0 0 var(--code-review-added-border);
}

.code-snippet-card__line--removed {
    box-shadow: inset 2px 0 0 var(--code-review-removed-border);
}

.code-snippet-card__line--added .code-snippet-card__line-code,
.code-snippet-card__line--added .code-snippet-card__line-number {
    background: var(--code-review-added-bg);
}

.code-snippet-card__line--removed .code-snippet-card__line-code,
.code-snippet-card__line--removed .code-snippet-card__line-number {
    background: var(--code-review-removed-bg);
}

.code-snippet-card__line-number {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 20px;
    padding: 0 10px;
    background: var(--code-review-line-number-bg);
    color: var(--code-muted);
    user-select: none;
}

.code-snippet-card__line-code {
    display: block;
    min-width: 0;
    height: 20px;
    overflow: hidden;
    padding: 0 10px;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    white-space: pre;
}

.code-merge-viewer {
    gap: 10px;
    padding: 10px;
}

.code-merge-viewer__sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.code-merge-viewer--resultonly .code-merge-viewer__sources {
    display: none;
}

.code-merge-viewer__conflicts {
    display: grid;
    gap: 8px;
}

.code-merge-viewer__conflict {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 0.5px solid var(--code-border);
    border-radius: 7px;
    background: var(--shell-bg-surface);
}

.code-merge-viewer__conflict--resolved {
    opacity: 0.7;
}

.code-merge-viewer__conflict-summary,
.code-merge-viewer__conflict-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.code-merge-viewer__conflict-summary {
    justify-content: space-between;
    color: var(--code-muted);
    font-size: 0.75rem;
    line-height: 1rem;
}

.lightbox__monaco-shell .code-viewer,
.lightbox__monaco-shell .code-surface {
    height: 100%;
    border: 0;
    border-radius: 0;
}

@media (max-width: 760px) {
    .code-review-viewer__file-header {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .code-review-viewer__file-meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding: 0 0 8px 32px;
    }

    .code-review-viewer__line {
        grid-template-columns: 42px minmax(max-content, 1fr);
    }

    .code-review-viewer__thread {
        padding-left: 12px;
    }

    .code-merge-viewer__sources {
        grid-template-columns: 1fr;
    }
}

.shell-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 746;
    pointer-events: none;
}

.shell-drawer-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}

/* DimBackdrop (Linear's ⌘/ drawer): a black/25% scrim faded in to 0.95 behind the panel. */
.shell-drawer-layer--dim .shell-drawer-backdrop {
    background: var(--shell-drawer-scrim, lch(0 0 0 / 0.25));
    opacity: 0.95;
}

.shell-drawer-layer--dim.shell-drawer-layer--entering .shell-drawer-backdrop {
    animation: shell-drawer-scrim-enter 320ms linear both;
}

.shell-drawer-layer--dim.shell-drawer-layer--closing .shell-drawer-backdrop {
    animation: shell-drawer-scrim-exit 320ms linear both;
    pointer-events: none;
}

/* Measured Linear (⌘/ shortcuts drawer, 2026-09-02 @1728×1050 @2x): 360px wide, 12px from the
   top/right/bottom edges, radius 12, 1px border lch(97.3), the light three-layer shadow. */
.shell-drawer {
    position: fixed;
    top: var(--shell-drawer-top, 12px);
    right: var(--shell-drawer-right, 12px);
    bottom: var(--shell-drawer-bottom, 12px);
    display: flex;
    flex-direction: column;
    width: var(--shell-drawer-width, 360px);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border: 1px solid var(--shell-drawer-border, var(--shell-border));
    border-radius: 12px;
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
    box-shadow: var(--shell-drawer-shadow, lch(0 0 0 / 0.02) 0 6px 18px, lch(0 0 0 / 0.04) 0 3px 9px, lch(0 0 0 / 0.04) 0 1px 1px);
    color: var(--shell-text-primary);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    visibility: hidden;
    will-change: transform, opacity;
}

.shell-drawer-layer--open .shell-drawer {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* Motion: Linear runs an inline spring — the panel travels only 20px while fading, overshoots
   ~1px past rest and settles. Reproduced as keyframe-sampled springs (samples every 40ms of the
   real curve; linear timing between them), 320ms to settle. */
.shell-drawer-layer--entering .shell-drawer {
    visibility: visible;
    animation: shell-drawer-enter 320ms linear both;
}

.shell-drawer-layer--closing .shell-drawer {
    visibility: visible;
    animation: shell-drawer-exit 320ms linear both;
    pointer-events: none;
}

@keyframes shell-drawer-enter {
    0% { opacity: 0; transform: translateX(20px); }
    12.5% { opacity: 0.065; transform: translateX(18.7px); }
    25% { opacity: 0.68; transform: translateX(6.4px); }
    37.5% { opacity: 1; transform: translateX(-0.3px); }
    50% { opacity: 1; transform: translateX(-1.03px); }
    62.5% { opacity: 1; transform: translateX(-0.33px); }
    75% { opacity: 1; transform: translateX(0.02px); }
    100% { opacity: 1; transform: none; }
}

@keyframes shell-drawer-exit {
    0% { opacity: 1; transform: none; }
    12.5% { opacity: 0.48; transform: translateX(10.4px); }
    25% { opacity: 0.034; transform: translateX(19.3px); }
    37.5% { opacity: 0; transform: translateX(21.1px); }
    50% { opacity: 0; transform: translateX(20.5px); }
    100% { opacity: 0; transform: translateX(20px); }
}

@keyframes shell-drawer-scrim-enter {
    0% { opacity: 0; }
    12.5% { opacity: 0.078; }
    25% { opacity: 0.345; }
    37.5% { opacity: 0.563; }
    50% { opacity: 0.733; }
    62.5% { opacity: 0.854; }
    75% { opacity: 0.926; }
    87.5% { opacity: 0.95; }
    100% { opacity: 0.95; }
}

@keyframes shell-drawer-scrim-exit {
    0% { opacity: 0.95; }
    12.5% { opacity: 0.565; }
    25% { opacity: 0.28; }
    37.5% { opacity: 0.094; }
    50% { opacity: 0.007; }
    62.5% { opacity: 0; }
    100% { opacity: 0; }
}

.shell-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 20px 20px 14px;
    box-sizing: border-box;
}

.shell-drawer__title-group,
.shell-drawer__actions {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.shell-drawer__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-drawer__header-button.ui-icon-button {
    color: var(--shell-text-tertiary);
    background: transparent;
    border-color: transparent;
}

.shell-drawer__header-button.ui-icon-button:hover,
.shell-drawer__header-button.ui-icon-button:focus-visible {
    color: var(--shell-text-primary);
    background: var(--shell-bg-hover);
}

.shell-drawer__search {
    flex: 0 0 auto;
    padding: 0 20px 25px;
}

.shell-drawer__search .search-field {
    height: 44px;
    padding: 0 12px;
    border-color: var(--shell-drawer-search-border, var(--settings-control-border));
    border-radius: 10px;
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
}

.shell-drawer__search .search-field:focus-within {
    border-color: var(--settings-control-border-active, var(--shell-border-strong));
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
}

.shell-drawer__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
    padding: 0 20px 20px;
    scrollbar-width: none;
}

.shell-drawer__body::-webkit-scrollbar {
    display: none;
}

.shell-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.shell-drawer-list__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.shell-drawer-list__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-drawer-list__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.shell-drawer-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    gap: 12px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-menu-item-border, transparent);
    border-radius: 10px;
    background: var(--shell-bg-button);
    color: var(--shell-text-secondary);
    box-sizing: border-box;
}

.shell-drawer-list__item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-drawer-list__item-meta {
    flex: 0 0 auto;
    color: var(--shell-text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

@media (max-width: 720px) {
    .shell-drawer {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }
}

.assistant-message__bubble {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
}

.message-composer__attachments {
    display: flex;
    width: var(--assistant-composer-inner-width);
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 auto 6px;
    padding: 0 6px;
    box-sizing: border-box;
}

.message-composer--fluid .message-composer__attachments {
    width: 100%;
}

.message-composer__file-input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0.01;
    appearance: none;
}

.composer-feedback-stack {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.composer-staged-items {
    width: 100%;
    min-width: 0;
}

.composer-staged-items__error {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 7px 8px;
    border: 0.5px solid color-mix(in srgb, var(--danger, #f04438) 45%, var(--assistant-panel-border, transparent));
    border-radius: 8px;
    color: var(--feedback-danger-text, #b42318);
    background: color-mix(in srgb, var(--danger, #f04438) 9%, transparent);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.composer-staged-items__retry {
    flex: 0 0 auto;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.composer-staged-items__retry:hover,
.composer-staged-items__retry:focus-visible {
    text-decoration: underline;
    outline: none;
}

.composer-staged-items__chips {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
}

.composer-staged-item {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    min-height: 19.5px;
    padding: 1.5px 3.9px 1.5px 2.6px;
    border: 0.5px solid transparent;
    border-radius: 4px;
    color: var(--assistant-panel-soft, var(--shell-text-strong));
    background: var(--assistant-inline-chip-bg, var(--shell-bg-button));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
}

.composer-staged-item__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted, var(--shell-text-muted));
}

.composer-staged-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-staged-item__remove {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.composer-staged-item:hover .composer-staged-item__remove,
.composer-staged-item:focus-within .composer-staged-item__remove {
    opacity: 1;
}

.qui-file-input--hidden {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0.01;
}

.assistant-attachment-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: var(--shell-text-muted);
    cursor: pointer;
}

.assistant-attachment-trigger:hover,
.assistant-attachment-trigger:focus-visible {
    color: var(--shell-text-strong);
    background: var(--shell-surface-hover);
    outline: none;
}

.assistant-attachment-trigger--disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.attachment-block {
    position: relative;
    display: flex;
    min-width: 0;
    width: 100%;
    min-height: 47px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-composer-bg, var(--shell-bg-raised));
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    box-sizing: border-box;
}

.attachment-block--transcript {
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
}

.attachment-block--composer,
.assistant-message__bubble .attachment-block--transcript {
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
}

.attachment-block--composer.attachment-block--image {
    width: 72px;
    min-height: 72px;
    flex: 0 0 72px;
    padding: 3px;
}

.attachment-block--composer.attachment-block--file {
    width: auto;
    min-width: 176px;
    max-width: min(100%, 320px);
    flex: 0 1 auto;
}

.attachment-block--failed {
    border-color: color-mix(in srgb, var(--danger, #f04438) 45%, var(--assistant-panel-border, transparent));
}

.attachment-block--interactive {
    cursor: pointer;
}

.attachment-block--interactive:focus-visible {
    outline: none;
    border-color: var(--settings-control-focus-border, var(--assistant-panel-border));
    box-shadow: 0 0 0 1px var(--settings-control-focus-shadow, transparent);
}

.attachment-block__file-icon {
    display: inline-flex;
    width: 32px;
    height: 34px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0;
    background: transparent;
    color: var(--assistant-panel-soft, var(--shell-text-muted));
}

.attachment-block__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    margin-top: -4px;
}

.attachment-block__name {
    overflow: hidden;
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 23px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-block__meta {
    overflow: hidden;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
    margin-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-block__actions,
.attachment-block__image-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.attachment-block__action {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--assistant-panel-muted, var(--shell-text-muted));
    cursor: default;
    text-decoration: none;
    transition: background-color 90ms ease-out, color 90ms ease-out;
}

.attachment-block__action:hover,
.attachment-block__action:focus-visible {
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    outline: none;
}

.attachment-block__image-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.attachment-block__image {
    display: block;
    max-height: 280px;
    width: 100%;
    object-fit: contain;
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
}

.attachment-block--composer .attachment-block__image {
    width: 64px;
    height: 64px;
    max-height: 64px;
    object-fit: cover;
}

.attachment-block__image-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-panel-bg, var(--shell-bg));
    box-shadow: var(--assistant-panel-shadow, none);
    opacity: 0;
    transition: opacity 90ms ease-out;
}

.attachment-block:hover .attachment-block__image-actions,
.attachment-block:focus-within .attachment-block__image-actions {
    opacity: 1;
}

.attachment-block__progress {
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 42px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
}

.attachment-block__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--shell-accent, #5e6ad2);
}

.chat-message__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.chat-message__attachments {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.chat-avatar-message__bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== search-experience.css ===== */
/* Search experience: the full-page search screen (header, scope tabs, filter
   row, virtualized result list with leading key labels and meta, split detail
   pane). Extracted from the aggregate's hand-mirrored region 2026-08-26 so the
   per-component source + marker-block convention holds. */

.search-experience {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--shell-bg-surface);
    color: var(--shell-text-primary);
}

.search-experience__header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    background: var(--shell-bg-surface);
}

.search-experience__search-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 43.5px;
    border-bottom: 0.5px solid var(--shell-border);
    padding: 0 8px;
}

.search-experience__sidebar-toggle {
    margin-right: 2px;
}

.search-experience__search-icon {
    position: absolute;
    left: 17px;
    top: 15px;
    display: inline-flex;
    color: var(--shell-text-secondary);
    pointer-events: none;
}

.search-experience__input {
    display: block;
    width: 100%;
    height: 22px;
    min-width: 0;
    padding: 0 26px 0 32px;
    border: 0;
    margin: 0;
    outline: none;
    overflow: hidden;
    background: transparent;
    color: var(--shell-text-tertiary, var(--shell-text-primary));
    caret-color: var(--shell-text-tertiary, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.375rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.search-experience__input:empty::before {
    content: attr(data-placeholder);
    color: var(--shell-text-secondary);
    opacity: 1;
    pointer-events: none;
}

.search-experience__input br {
    display: none;
}

.search-experience__clear-button {
    position: absolute;
    top: 10.75px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 5px;
    color: var(--shell-text-secondary);
}

.search-experience__clear-button:hover,
.search-experience__clear-button:focus-visible {
    color: var(--shell-text-primary);
}

.search-experience__tabs-row {
    display: flex;
    align-items: center;
    padding: 16px 8px 8px;
}

.search-experience__tabs-row .pill-tabs {
    min-height: 28px;
    margin-top: 0;
}

/* Active-filter chips sit directly under the scope tabs, on the grid's filter band (same 8px
   inset as the tabs row). */
.search-experience__filter-band {
    flex: 0 0 auto;
    margin: 0 8px 8px;
}

/* Pills must never flex-shrink (squeezed padding); the overflow pill owns narrow fits. */
.search-experience__tabs-row .pill-tabs__items {
    flex-wrap: nowrap;
    min-width: 0;
}

.search-experience__tabs-row .pill-tab-button,
.search-experience__tabs-row .search-experience__more-anchor {
    flex: 0 0 auto;
}

.search-experience__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.search-experience__toolbar-button {
    /* Fill comes from ui-icon-button--surface (GridToolbar); class kept as a caller hook. */
}

/* ----- split mode: results left (400px, resizable), caller detail right ----- */
.search-experience__split {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.search-experience__split .split-view__header-inner {
    padding: 0;
}

.search-experience__split .search-experience__search-row {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

.search-experience__split .search-experience__tabs-row {
    flex: 0 0 auto;
}

/* Measured Linear split bar (2026-09-02): 44px, gap 4, padding 0 8, hairline bottom; lead cluster
   padding-left 10 / gap 6 with key + title at 13/500 primary and the 28px round actions; trail
   cluster margin-left 8 / gap 12 with the 24px "Go to …" pill and the 28px close. */
.search-experience__detail-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 0.5px solid var(--shell-form-card-border, var(--shell-border, lch(89.84% 0 282)));
}

.search-experience__detail-bar-lead {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 10px;
}

.search-experience__detail-bar-key {
    flex: 0 0 auto;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.search-experience__detail-bar-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.search-experience__detail-bar-trail {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: 8px;
}

.search-experience__detail-close {
    flex: 0 0 auto;
}

.search-experience__split .search-experience__body {
    height: 100%;
}

.search-experience__detail {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

.search-experience__more-anchor {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.search-experience__more-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-experience__more-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
}

.search-experience__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.search-experience__results-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 0 0 16px;
    scrollbar-width: none;
}

.search-experience__results-scroll::-webkit-scrollbar {
    display: none;
}

.search-experience__group {
    display: flex;
    flex-direction: column;
}

.search-experience__group + .search-experience__group {
    margin-top: 12px;
}

.search-experience__group-label {
    padding: 0 18px;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    text-transform: uppercase;
}

/* Virtualized results: every slot is the scope's row size (Linear: 40px rows, 36px issue rows);
   group-header slots pin to the scroller top while their group scrolls under them. */
/* Block flow (not the flex column) so Virtualize's spacers and slots keep their true heights —
   flex children would shrink to fit the viewport and skew its row-size estimate. */
.search-experience__results-scroll--virtual {
    display: block;
}

.search-experience__row-slot {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: var(--search-experience-row-size, 40px);
    min-height: var(--search-experience-row-size, 40px);
    box-sizing: border-box;
}

.search-experience__row-slot > .search-experience__result {
    min-height: 0;
    height: 100%;
}

.search-experience__row-slot--placeholder {
    pointer-events: none;
}

.search-experience__group-label--virtual {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    height: var(--search-experience-row-size, 40px);
    padding-bottom: 6px;
    box-sizing: border-box;
    background: var(--shell-bg-surface, var(--shell-bg));
}

.search-experience__group-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-experience__result,
.search-experience__recent-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 16px 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: default;
    user-select: none;
}

.search-experience__result {
    color: var(--shell-text-primary);
}

.search-experience__result:hover,
.search-experience__result:focus-visible,
.search-experience__result--active,
.search-experience__recent-item:hover,
.search-experience__recent-item:focus-visible {
    background: var(--shell-bg-active);
    color: var(--shell-text-primary);
    outline: none;
}

/* Measured Linear "All" scope row (2026-09-02, 1440 light): 40px = 12px padding around a 16px
   content line; the hover/selected fill is an 8px-inset block (margin 0 8px, padding 0 8px 0
   10px, radius 8), not edge to edge. */
.search-experience__result--compact {
    width: calc(100% - 16px);
    min-height: 40px;
    margin: 0 8px;
    padding: 0 8px 0 10px;
    gap: 8px;
    border-radius: 8px;
}

.search-experience__result-key-col {
    flex: 0 0 52px;
    width: 52px;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.search-experience__result-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
}

.search-experience__result-title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary, lch(19.588% 1.25 282));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-title-text mark {
    background: transparent;
    color: var(--shell-text-primary);
    font-weight: 650;
}

.search-experience__result-age {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

/* Scoped rows are the type's own list row: full width; Linear's issue list row is 36px, the
   project/document rows 40px. Hosts drop their row kits in via ResultContentTemplate. */
.search-experience__result--list[data-scope="issues"] {
    min-height: 36px;
}

.search-experience__result-icon,
.search-experience__recent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    margin: 0 6px 0 0;
    color: var(--shell-text-secondary);
}

.search-experience__result-leading-label {
    flex: 0 0 72px;
    width: 72px;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result:hover .search-experience__result-icon,
.search-experience__result:focus-visible .search-experience__result-icon,
.search-experience__result--active .search-experience__result-icon {
    color: var(--shell-text-primary);
}

.search-experience__result-copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__recent-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.search-experience__result-title,
.search-experience__recent-query {
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-title mark,
.search-experience__result-subtitle mark,
.search-experience__result-copy mark {
    background: transparent;
    color: var(--shell-text-primary);
    font-weight: 650;
}

.search-experience__result-subtitle,
.search-experience__recent-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-subtitle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-key {
    color: var(--shell-text-muted);
    flex: 0 0 auto;
}

.search-experience__result:hover .search-experience__result-subtitle,
.search-experience__result:focus-visible .search-experience__result-subtitle,
.search-experience__result--active .search-experience__result-subtitle,
.search-experience__recent-item:hover .search-experience__recent-subtitle,
.search-experience__recent-item:focus-visible .search-experience__recent-subtitle {
    color: var(--shell-text-tertiary, var(--shell-text-primary));
}

.search-experience__result-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
    padding-left: 12px;
    color: var(--shell-text-secondary);
}

.search-experience__metadata {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 170px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.search-experience__metadata-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-experience__metadata-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.search-experience__metadata--badge {
    height: 20px;
    padding: 0 7px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 999px;
    background: var(--shell-bg-button);
}

.search-experience__metadata--avatar {
    flex: 0 0 auto;
}

.search-experience__result:hover .search-experience__metadata,
.search-experience__result:focus-visible .search-experience__metadata,
.search-experience__result--active .search-experience__metadata {
    color: var(--shell-text-tertiary, var(--shell-text-primary));
}

.search-experience__result-time,
.search-experience__recent-time {
    flex: 0 0 auto;
    margin-left: 16px;
    color: var(--shell-text-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.search-experience__recent {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 6px 18px 18px;
}

.search-experience__recent .search-experience__recent-item {
    border-radius: 8px;
    padding: 0 12px 0 6px;
    min-height: 36px;
}

.search-experience__recent-header {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0 8px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.search-experience__recent-row {
    position: relative;
    display: flex;
    align-items: center;
}

.search-experience__recent-row .search-experience__recent-item {
    flex: 1 1 auto;
    min-width: 0;
}

.search-experience__recent-remove {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 100ms ease-out;
}

.search-experience__recent-row:hover .search-experience__recent-remove,
.search-experience__recent-remove:focus-visible {
    opacity: 1;
}

.search-experience__recent-item--clear .search-experience__recent-icon {
    color: var(--shell-text-secondary);
}

.search-experience__recent-item--clear .search-experience__recent-query {
    color: var(--shell-text-secondary);
}

.search-experience__recent-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-experience__state,
.search-experience__loading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
    color: var(--shell-text-secondary);
    text-align: center;
}

.search-experience__loading {
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 24px;
}

.search-experience__state-title {
    color: var(--shell-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.search-experience__state-copy {
    max-width: 360px;
    margin-top: 6px;
    color: var(--shell-text-muted);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

@media (width <= 720px) {
    .search-experience__header {
        min-height: 83px;
    }

    .search-experience__search-row,
    .search-experience__tabs-row {
        padding-right: 10px;
        padding-left: 10px;
    }

    .search-experience__search-icon {
        left: 47px;
    }

    .search-experience__input {
        padding-left: 34px;
    }

    .search-experience__tabs-row .pill-tabs__items {
        overflow: auto;
        scrollbar-width: none;
    }

    .search-experience__tabs-row .pill-tabs__items::-webkit-scrollbar {
        display: none;
    }

    .search-experience__result {
        align-items: center;
        padding-right: 12px;
        padding-left: 12px;
    }

    .search-experience__result-leading-label {
        flex-basis: 74px;
        width: 74px;
    }

    .search-experience__result-meta {
        display: none;
    }
}
/* ===== end search-experience.css ===== */

.git-commit-graph {
    --git-graph-refs-width: 150px;
    --git-graph-rails-width: 188px;
    --git-graph-row-height: 38px;
    --git-graph-divider-height: 22px;
    --git-graph-lane-0: lch(72% 38 210);
    --git-graph-lane-1: lch(60% 48 275);
    --git-graph-lane-2: lch(58% 62 305);
    --git-graph-lane-3: lch(58% 68 330);
    --git-graph-lane-4: lch(62% 56 356);
    --git-graph-lane-5: lch(58% 60 30);
    --git-graph-lane-6: lch(70% 58 60);
    --git-graph-lane-7: lch(80% 62 90);
    position: relative;
    overflow: auto;
    max-height: min(720px, 80vh);
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
    font-family: var(--font-regular);
    outline: none;
}

.git-commit-graph:focus-visible {
    box-shadow: inset 0 0 0 1px var(--shell-accent, #5e6ad2);
}

.app-shell[data-app-theme="light"] .git-commit-graph,
.settings-shell[data-app-theme="light"] .git-commit-graph {
    --git-graph-lane-0: lch(52% 40 210);
    --git-graph-lane-1: lch(48% 52 275);
    --git-graph-lane-2: lch(46% 64 305);
    --git-graph-lane-3: lch(46% 68 330);
    --git-graph-lane-4: lch(50% 58 356);
    --git-graph-lane-5: lch(48% 62 30);
    --git-graph-lane-6: lch(54% 60 60);
    --git-graph-lane-7: lch(58% 62 90);
}

@media (prefers-color-scheme: light) {
    .app-shell[data-app-theme="system"] .git-commit-graph,
    .settings-shell[data-app-theme="system"] .git-commit-graph {
        --git-graph-lane-0: lch(52% 40 210);
        --git-graph-lane-1: lch(48% 52 275);
        --git-graph-lane-2: lch(46% 64 305);
        --git-graph-lane-3: lch(46% 68 330);
        --git-graph-lane-4: lch(50% 58 356);
        --git-graph-lane-5: lch(48% 62 30);
        --git-graph-lane-6: lch(54% 60 60);
        --git-graph-lane-7: lch(58% 62 90);
    }
}

.git-commit-graph__header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: var(--git-graph-refs-width) var(--git-graph-rails-width) minmax(0, 1fr);
    align-items: center;
    height: 28px;
    background: var(--shell-bg-surface);
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-muted);
    font-size: 0.625rem;
    font-weight: 550;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
}

.git-commit-graph__header-cell {
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.git-commit-graph__header-cell--message {
    padding-left: 13px;
}

.git-commit-graph__body {
    position: relative;
    min-width: 100%;
}

.git-commit-graph__rails-viewport {
    position: absolute;
    left: var(--git-graph-refs-width);
    width: var(--git-graph-rails-width);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.git-commit-graph__rails-viewport--clipped {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
}

.git-commit-graph__rails-viewport--panned.git-commit-graph__rails-viewport--clipped {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

.git-commit-graph__rails-viewport--panned:not(.git-commit-graph__rails-viewport--clipped) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px);
    mask-image: linear-gradient(90deg, transparent, #000 16px);
}

.git-commit-graph__rails {
    display: block;
}

.git-commit-graph__rails-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--git-graph-refs-width) + var(--git-graph-rails-width) - 3px);
    width: 6px;
    z-index: 4;
    cursor: col-resize;
}

.git-commit-graph__rails-resize::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 0.5px;
    border-radius: 4px;
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.git-commit-graph__rails-resize:hover::after,
.git-commit-graph--resizing .git-commit-graph__rails-resize::after {
    opacity: 1;
    transition-duration: 0s;
}

.git-commit-graph--resizing {
    cursor: col-resize;
    user-select: none;
}

.git-commit-graph__edge {
    fill: none;
    stroke-width: 2;
    transition: opacity 0.18s ease;
}

.git-commit-graph__edge--boundary {
    stroke-dasharray: 4 5;
    opacity: 0.72;
}

.git-commit-graph__lane-stroke-0 { stroke: var(--git-graph-lane-0); }
.git-commit-graph__lane-stroke-1 { stroke: var(--git-graph-lane-1); }
.git-commit-graph__lane-stroke-2 { stroke: var(--git-graph-lane-2); }
.git-commit-graph__lane-stroke-3 { stroke: var(--git-graph-lane-3); }
.git-commit-graph__lane-stroke-4 { stroke: var(--git-graph-lane-4); }
.git-commit-graph__lane-stroke-5 { stroke: var(--git-graph-lane-5); }
.git-commit-graph__lane-stroke-6 { stroke: var(--git-graph-lane-6); }
.git-commit-graph__lane-stroke-7 { stroke: var(--git-graph-lane-7); }

.git-commit-graph__lane-fill-0 { fill: var(--git-graph-lane-0); }
.git-commit-graph__lane-fill-1 { fill: var(--git-graph-lane-1); }
.git-commit-graph__lane-fill-2 { fill: var(--git-graph-lane-2); }
.git-commit-graph__lane-fill-3 { fill: var(--git-graph-lane-3); }
.git-commit-graph__lane-fill-4 { fill: var(--git-graph-lane-4); }
.git-commit-graph__lane-fill-5 { fill: var(--git-graph-lane-5); }
.git-commit-graph__lane-fill-6 { fill: var(--git-graph-lane-6); }
.git-commit-graph__lane-fill-7 { fill: var(--git-graph-lane-7); }

.git-commit-graph__node {
    transition: opacity 0.18s ease;
}

.git-commit-graph[data-focus-lane] .git-commit-graph__edge,
.git-commit-graph[data-focus-lane] .git-commit-graph__node {
    opacity: 0.16;
}

.git-commit-graph[data-focus-lane="0"] [data-lane="0"],
.git-commit-graph[data-focus-lane="1"] [data-lane="1"],
.git-commit-graph[data-focus-lane="2"] [data-lane="2"],
.git-commit-graph[data-focus-lane="3"] [data-lane="3"],
.git-commit-graph[data-focus-lane="4"] [data-lane="4"],
.git-commit-graph[data-focus-lane="5"] [data-lane="5"],
.git-commit-graph[data-focus-lane="6"] [data-lane="6"],
.git-commit-graph[data-focus-lane="7"] [data-lane="7"] {
    opacity: 1;
}

/* Ref connectors never dim during branch focus: their refs-cell half lives
   outside the SVG, so dimming only the SVG half would split the line. */
.git-commit-graph__ref-line {
    stroke-width: 2;
    opacity: 0.85;
}

.git-commit-graph__node-ring {
    fill: var(--shell-bg-button);
    stroke-width: 2.5;
}

.git-commit-graph__node-initials {
    fill: var(--shell-text-primary);
    font-family: var(--font-regular);
    font-size: 8px;
    font-weight: 650;
    pointer-events: none;
    user-select: none;
}

.git-commit-graph__node-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}

.git-commit-graph__bot-check-light {
    fill: var(--shell-text-muted);
}

.git-commit-graph__bot-check-dark {
    fill: var(--shell-bg-active);
}

.git-commit-graph__row {
    position: absolute;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: var(--git-graph-refs-width) var(--git-graph-rails-width) minmax(0, 1fr);
    align-items: center;
    height: var(--git-graph-row-height);
    cursor: pointer;
    background: color-mix(in srgb, var(--git-graph-row-lane, transparent) 5%, transparent);
}

.git-commit-graph__row:hover {
    background: var(--shell-bg-hover);
}

.git-commit-graph__row--selected,
.git-commit-graph__row--selected:hover {
    background: var(--shell-bg-active);
    box-shadow: inset 2px 0 0 var(--shell-accent, #5e6ad2);
}

.git-commit-graph__refs {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-left: 10px;
    white-space: nowrap;
}

.git-commit-graph__refs-inner {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* The label side of each ref connector: a dedicated SVG layer over the refs
   column so both halves of the line rasterize identically to the rails SVG
   at any zoom. Pills paint above it (z-index 3 vs 1) and hide the overlap. */
.git-commit-graph__ref-lines {
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.git-commit-graph__ref-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.git-commit-graph__ref-group--extra {
    display: none;
}

.git-commit-graph__ref-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 22px;
    padding: 0 5px;
    border: 0.5px solid color-mix(in srgb, var(--git-graph-row-lane, var(--shell-menu-border)) 45%, var(--shell-menu-border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--git-graph-row-lane, transparent) 22%, var(--shell-bg-button));
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

/* Kraken stacks the expanded refs vertically over the rows below. */
.git-commit-graph__refs--multi:hover .git-commit-graph__refs-inner {
    position: absolute;
    top: -4px;
    left: 6px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: max-content;
    padding: 4px 6px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 6px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
}

.git-commit-graph__refs--multi:hover .git-commit-graph__ref-group--extra {
    display: inline-flex;
}

.git-commit-graph__refs--multi:hover .git-commit-graph__ref-count {
    display: none;
}

.git-commit-graph__ref {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 0.5px solid color-mix(in srgb, var(--git-graph-row-lane, var(--shell-menu-border)) 45%, var(--shell-menu-border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--git-graph-row-lane, transparent) 22%, var(--shell-bg-button));
    color: var(--shell-text-primary);
    font-family: var(--font-regular);
    font-size: 0.6875rem;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shell-shadow);
}

.git-commit-graph__ref:hover {
    background: color-mix(in srgb, var(--git-graph-row-lane, transparent) 34%, var(--shell-bg-button));
}

.git-commit-graph__ref--checked,
.git-commit-graph__ref--checked:hover {
    border-color: var(--git-graph-row-lane, var(--shell-accent, #5e6ad2));
    background: color-mix(in srgb, var(--git-graph-row-lane, var(--shell-accent, #5e6ad2)) 80%, black);
    color: lch(100 0 272);
}

.git-commit-graph__ref--ghost {
    opacity: 0;
    box-shadow: none;
    color: var(--shell-text-secondary);
    cursor: default;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.git-commit-graph__row:hover .git-commit-graph__ref--ghost,
.git-commit-graph__row--selected .git-commit-graph__ref--ghost {
    opacity: 0.6;
}

.git-commit-graph__ref-name {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.git-commit-graph__ref-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0.5px solid color-mix(in srgb, var(--git-graph-row-lane, var(--shell-menu-border)) 45%, var(--shell-menu-border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--git-graph-row-lane, transparent) 22%, var(--shell-bg-button));
    color: var(--shell-text-secondary);
}

.git-commit-graph__message {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-right: 16px;
}

.git-commit-graph__bar {
    width: 3px;
    height: 22px;
    flex: none;
    border-radius: 2px;
    background: var(--git-graph-row-lane, var(--shell-border));
}

.git-commit-graph__text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.git-commit-graph__title {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.git-commit-graph__row--selected .git-commit-graph__title {
    font-weight: 550;
}

.git-commit-graph__description {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--shell-text-muted);
    font-size: 0.78125rem;
    font-weight: 450;
    white-space: nowrap;
}

.git-commit-graph__divider {
    position: absolute;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: var(--git-graph-divider-height);
}

.git-commit-graph__divider::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 0.5px solid var(--shell-border);
}

.git-commit-graph__divider-label {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    padding: 2px 9px;
    border-radius: 9px;
    background: var(--shell-bg-active);
    color: var(--shell-text-secondary);
    font-size: 0.65625rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .git-commit-graph__edge,
    .git-commit-graph__node {
        transition: none;
    }
}

.floating-panel-host {
    position: relative;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
}

.floating-panel-host__layer {
    position: absolute;
    inset: 0;
    z-index: var(--floating-panel-layer-z-index, 600);
    overflow: hidden;
    pointer-events: none;
}

.floating-panel-dock-preview {
    position: absolute;
    z-index: 0;
    opacity: 0;
    border: 1px solid color-mix(in srgb, var(--shell-accent, #5e6ad2) 70%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, var(--shell-bg-surface, #18191d));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
    transition: opacity 100ms ease, transform 100ms ease;
}

.floating-panel-dock-preview--left,
.floating-panel-dock-preview--right {
    top: 10px;
    bottom: 10px;
    width: min(38%, 480px);
    transform: scaleX(0.96);
}

.floating-panel-dock-preview--left {
    left: 10px;
    transform-origin: left center;
}

.floating-panel-dock-preview--right {
    right: 10px;
    transform-origin: right center;
}

.floating-panel-dock-preview--bottom {
    right: 10px;
    bottom: 10px;
    left: 10px;
    height: min(38%, 360px);
    transform: scaleY(0.96);
    transform-origin: center bottom;
}

.floating-panel-host[data-floating-panel-dock-preview="left"] .floating-panel-dock-preview--left,
.floating-panel-host[data-floating-panel-dock-preview="right"] .floating-panel-dock-preview--right,
.floating-panel-host[data-floating-panel-dock-preview="bottom"] .floating-panel-dock-preview--bottom {
    opacity: 1;
    transform: scale(1);
}

.floating-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--floating-panel-border, var(--shell-border, #2c2d33));
    border-radius: 8px;
    background: var(--floating-panel-bg, var(--shell-surface, #18191d));
    color: var(--floating-panel-text, var(--shell-text-primary, #f1f1f3));
    box-shadow: var(--floating-panel-shadow, 0 18px 48px rgb(0 0 0 / 0.28));
    pointer-events: auto;
    will-change: transform, width, height;
    transition: transform 160ms ease, width 160ms ease, height 160ms ease, box-shadow 120ms ease;
}

.floating-panel[hidden] {
    display: none;
}

.floating-panel[data-floating-panel-interacting] {
    transition: none;
}

.floating-panel--placement-docked {
    border-color: var(--floating-panel-docked-border, var(--shell-border-strong, #44464f));
    box-shadow: var(--floating-panel-docked-shadow, 0 12px 34px rgb(0 0 0 / 0.32));
}

.floating-panel--active {
    border-color: var(--floating-panel-active-border, var(--shell-border-strong, #44464f));
    box-shadow: var(--floating-panel-active-shadow, 0 22px 60px rgb(0 0 0 / 0.38));
}

.floating-panel:focus-visible {
    outline: 2px solid var(--floating-panel-focus, var(--shell-accent, #5e6ad2));
    outline-offset: -2px;
}

.floating-panel__titlebar {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 38px;
    padding: 0 7px 0 12px;
    border-bottom: 1px solid var(--floating-panel-divider, var(--shell-border, #2c2d33));
    background: var(--floating-panel-title-bg, var(--shell-bg-elevated, #202126));
    user-select: none;
    touch-action: none;
    border-radius: 7px 7px 0 0;
}

.floating-panel--movable .floating-panel__titlebar {
    cursor: grab;
}

.floating-panel[data-floating-panel-interacting="move"] .floating-panel__titlebar {
    cursor: grabbing;
}

.floating-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--floating-panel-title-color, var(--shell-text-primary, #f1f1f3));
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
}

.floating-panel__title > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-panel__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1px;
}

.floating-panel__action {
    display: inline-flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--floating-panel-action-color, var(--shell-text-secondary, #a5a7ad));
    cursor: pointer;
}

.floating-panel__action:hover {
    background: var(--floating-panel-action-hover-bg, var(--shell-bg-hover, #2a2b31));
    color: var(--floating-panel-action-hover-color, var(--shell-text-primary, #f1f1f3));
}

.floating-panel__action:focus-visible {
    outline: 2px solid var(--floating-panel-focus, var(--shell-accent, #5e6ad2));
    outline-offset: -2px;
}

.floating-panel__content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 7px 7px;
}

.floating-panel__resize-handle {
    position: absolute;
    z-index: 2;
    touch-action: none;
}

.floating-panel__resize-handle--n,
.floating-panel__resize-handle--s {
    right: 8px;
    left: 8px;
    height: 8px;
}

.floating-panel__resize-handle--n {
    top: -4px;
    cursor: ns-resize;
}

.floating-panel__resize-handle--s {
    bottom: -4px;
    cursor: ns-resize;
}

.floating-panel__resize-handle--e,
.floating-panel__resize-handle--w {
    top: 8px;
    bottom: 8px;
    width: 8px;
}

.floating-panel__resize-handle--e {
    right: -4px;
    cursor: ew-resize;
}

.floating-panel__resize-handle--w {
    left: -4px;
    cursor: ew-resize;
}

.floating-panel__resize-handle--ne,
.floating-panel__resize-handle--se,
.floating-panel__resize-handle--sw,
.floating-panel__resize-handle--nw {
    width: 12px;
    height: 12px;
}

.floating-panel__resize-handle--ne {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

.floating-panel__resize-handle--se {
    right: -4px;
    bottom: -4px;
    cursor: nwse-resize;
}

.floating-panel__resize-handle--sw {
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}

.floating-panel__resize-handle--nw {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

.floating-panel-launcher-shell {
    position: absolute;
    z-index: 100000;
    width: 42px;
    height: 42px;
    pointer-events: auto;
}

.floating-panel-launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--floating-panel-launcher-border, var(--shell-border-strong, #44464f));
    border-radius: 50%;
    background: var(--floating-panel-launcher-bg, var(--shell-bg-elevated, #202126));
    color: var(--floating-panel-launcher-color, var(--shell-text-primary, #f1f1f3));
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.34);
    cursor: grab;
    touch-action: none;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.floating-panel-launcher:hover {
    border-color: var(--floating-panel-active-border, var(--shell-border-strong, #5b5d68));
    background: var(--floating-panel-action-hover-bg, var(--shell-bg-hover, #2a2b31));
    transform: translateY(-1px);
}

.floating-panel-launcher:focus-visible {
    outline: 2px solid var(--floating-panel-focus, var(--shell-accent, #5e6ad2));
    outline-offset: 2px;
}

.floating-panel-launcher[data-floating-panel-interacting] {
    cursor: grabbing;
    transform: none;
}

.floating-panel-launcher__count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--floating-panel-launcher-bg, var(--shell-bg-elevated, #202126));
    border-radius: 9px;
    background: var(--shell-accent, #5e6ad2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.floating-panel-launcher__tray {
    position: absolute;
    top: 50px;
    left: 0;
    width: min(270px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--floating-panel-border, var(--shell-border, #2c2d33));
    border-radius: 8px;
    background: var(--floating-panel-bg, var(--shell-surface, #18191d));
    color: var(--floating-panel-text, var(--shell-text-primary, #f1f1f3));
    box-shadow: 0 18px 48px rgb(0 0 0 / 0.36);
}

.floating-panel-launcher-shell--align-right .floating-panel-launcher__tray {
    right: 0;
    left: auto;
}

.floating-panel-launcher-shell--tray-above .floating-panel-launcher__tray {
    top: auto;
    bottom: 50px;
}

.floating-panel-launcher__tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 11px;
    border-bottom: 1px solid var(--floating-panel-divider, var(--shell-border, #2c2d33));
    color: var(--shell-text-secondary, #a5a7ad);
    font-size: 11px;
    font-weight: 600;
}

.floating-panel-launcher__tray-header > span:last-child {
    font-variant-numeric: tabular-nums;
}

.floating-panel-launcher__items {
    display: grid;
    max-height: 264px;
    overflow-y: auto;
    padding: 5px;
}

.floating-panel-launcher__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--floating-panel-text, var(--shell-text-primary, #f1f1f3));
    text-align: left;
    cursor: pointer;
}

.floating-panel-launcher__item:hover {
    background: var(--floating-panel-action-hover-bg, var(--shell-bg-hover, #2a2b31));
}

.floating-panel-launcher__item:focus-visible {
    outline: 2px solid var(--floating-panel-focus, var(--shell-accent, #5e6ad2));
    outline-offset: -2px;
}

.floating-panel-launcher__item > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-panel-launcher__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--shell-border, #2c2d33);
    border-radius: 6px;
    color: var(--shell-text-secondary, #a5a7ad);
}

body.floating-panel-interacting {
    cursor: grabbing;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .floating-panel,
    .floating-panel-dock-preview,
    .floating-panel-launcher {
        transition: none;
    }

    .floating-panel {
        scroll-behavior: auto;
    }
}

/* ============================================================
   ProcessTracker — horizontal / vertical stage stepper
   ============================================================ */

.process-tracker {
    --process-marker-size: 26px;
    --process-track-color: var(--shell-menu-divider, #22242b);
    --process-accent: var(--shell-accent, #5e6ad2);
    --process-danger: lch(58% 46 26);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.process-tracker__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-tracker__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.process-tracker__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--shell-text-primary);
}

.process-tracker__count {
    font-size: 0.71875rem;
    color: var(--shell-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.process-tracker__progress {
    width: 100%;
}

.process-tracker__track {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-tracker--horizontal .process-tracker__track {
    flex-direction: row;
    align-items: flex-start;
}

.process-tracker__stage {
    position: relative;
    display: flex;
    min-width: 0;
}

.process-tracker--horizontal .process-tracker__stage {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    text-align: center;
}

/* Connector: drawn from this marker toward the next. The accent fill (a gradient sized
   0%→100%) wipes across once this stage is Done, animating the transition. */
.process-tracker--horizontal .process-tracker__stage::after {
    content: "";
    position: absolute;
    top: calc(var(--process-marker-size) / 2);
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--process-track-color);
    background-image: linear-gradient(var(--process-accent), var(--process-accent));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transform: translateY(-50%);
    transition: background-size 450ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.process-tracker--horizontal .process-tracker__stage:last-child::after {
    display: none;
}

/* Same end state for both orientations: the accent gradient fully covers the track. */
.process-tracker__stage--done::after {
    background-size: 100% 100%;
}

.process-tracker__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--process-marker-size);
    height: var(--process-marker-size);
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    cursor: default;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.process-tracker__marker:not(:disabled) {
    cursor: pointer;
}

.process-tracker__marker:not(:disabled):hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--process-accent) 12%, transparent);
}

.process-tracker__marker:focus-visible {
    outline: 2px solid var(--process-accent);
    outline-offset: 2px;
}

.process-tracker__marker-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.process-tracker__stage--active .process-tracker__marker {
    background: var(--process-accent);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--process-accent) 18%, transparent);
}

.process-tracker__stage--done .process-tracker__marker {
    background: color-mix(in srgb, var(--process-accent) 18%, transparent);
    color: var(--process-accent);
}

.process-tracker__stage--blocked .process-tracker__marker {
    background: color-mix(in srgb, var(--process-danger) 20%, transparent);
    color: var(--process-danger);
}

.process-tracker__stage--skipped .process-tracker__marker {
    background: transparent;
    color: var(--shell-text-muted);
    box-shadow: inset 0 0 0 1px var(--process-track-color);
}

.process-tracker__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.process-tracker__label-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.process-tracker--horizontal .process-tracker__label-row {
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.process-tracker__label {
    font-size: 0.78125rem;
    font-weight: 550;
    line-height: 1.25;
    color: var(--shell-text-primary);
}

.process-tracker__stage--pending .process-tracker__label {
    color: var(--shell-text-secondary);
}

.process-tracker__stage--skipped .process-tracker__label {
    color: var(--shell-text-muted);
    text-decoration: line-through;
}

.process-tracker__meta {
    font-size: 0.6875rem;
    color: var(--shell-text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.process-tracker__description {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--shell-text-muted);
}

/* Vertical orientation (also the narrow-width fallback for horizontal). */
.process-tracker--vertical .process-tracker__track {
    flex-direction: column;
    align-items: stretch;
}

.process-tracker--vertical .process-tracker__stage {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 2px 0 18px;
    text-align: left;
}

.process-tracker--vertical .process-tracker__stage::after {
    content: "";
    position: absolute;
    top: var(--process-marker-size);
    left: calc(var(--process-marker-size) / 2);
    width: 2px;
    height: 100%;
    background-color: var(--process-track-color);
    background-image: linear-gradient(var(--process-accent), var(--process-accent));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 0%;
    transform: translateX(-50%);
    transition: background-size 450ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.process-tracker--vertical .process-tracker__stage:last-child::after {
    display: none;
}

.process-tracker--vertical .process-tracker__copy {
    padding-top: 3px;
}

@media (max-width: 600px) {
    .process-tracker--horizontal .process-tracker__track {
        flex-direction: column;
        align-items: stretch;
    }

    .process-tracker--horizontal .process-tracker__stage {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 2px 0 18px;
        text-align: left;
    }

    .process-tracker--horizontal .process-tracker__label-row {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .process-tracker--horizontal .process-tracker__stage::after {
        top: var(--process-marker-size);
        left: calc(var(--process-marker-size) / 2);
        width: 2px;
        height: 100%;
        background-position: center top;
        background-size: 100% 0%;
        transform: translateX(-50%);
    }

    .process-tracker--horizontal .process-tracker__stage:last-child::after {
        display: none;
    }

    .process-tracker--horizontal .process-tracker__copy {
        padding-top: 3px;
    }
}

/* Pop the marker as it enters the active, then the done, state. Distinct animation names
   so the pop re-fires on each transition (pending → active → done). */
.process-tracker__stage--active .process-tracker__marker {
    animation: process-tracker-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-tracker__stage--done .process-tracker__marker {
    animation: process-tracker-pop-done 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes process-tracker-pop {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes process-tracker-pop-done {
    0% { transform: scale(0.86); }
    55% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Draw the tick on: the stroked path starts fully offset and animates to a complete stroke
   when the done marker (and so this SVG) first mounts. Base offset is 0 so reduced-motion /
   no-animation shows a complete tick. */
.process-tracker__tick {
    overflow: visible;
}

.process-tracker__tick path {
    stroke-dasharray: 22;
    animation: process-tracker-draw 360ms cubic-bezier(0.65, 0, 0.35, 1) 90ms both;
}

@keyframes process-tracker-draw {
    from { stroke-dashoffset: 22; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .process-tracker__marker,
    .process-tracker__stage::after {
        transition: none;
    }

    .process-tracker__stage--active .process-tracker__marker,
    .process-tracker__stage--done .process-tracker__marker {
        animation: none;
    }

    .process-tracker__tick path {
        animation: none;
    }
}

/* Icon + colour picker — a combined symbol/colour popover (Linear-style), themed via the
   shared --shell-menu-* tokens so it works in both light and dark. Used by the anchored
   IconColorPicker popover and the IconColorPickerModal. */

.icon-color-picker {
    display: inline-flex;
    min-width: 0;
}

.icon-color-picker__trigger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: pointer;
}

.icon-color-picker__trigger-button:hover {
    background: var(--shell-bg-hover);
    color: var(--shell-text-primary);
}

.icon-color-picker__trigger-button:disabled {
    cursor: default;
    opacity: 0.5;
}

.icon-color-picker__preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 1;
}

.icon-color-picker__popover {
    z-index: 1100;
}

.icon-color-picker__popover[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.icon-color-picker__surface {
    display: flex;
    flex-direction: column;
    width: 411px;
    max-width: calc(100vw - 16px);
    max-height: 420px;
    overflow: hidden;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 8px;
    background: var(--shell-menu-bg, var(--shell-bg-surface));
    box-shadow: var(--shell-menu-shadow, 0 8px 24px lch(0 0 0 / 0.18), 0 2px 6px lch(0 0 0 / 0.12));
    color: var(--shell-menu-text, var(--shell-text-primary));
}

.icon-color-picker__tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 0.5px solid var(--shell-menu-border, var(--shell-border));
}

.icon-color-picker__tab {
    position: relative;
    padding: 6px 4px 10px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.icon-color-picker__tab:hover {
    color: var(--shell-menu-text, var(--shell-text-primary));
}

.icon-color-picker__tab.is-active {
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.icon-color-picker__tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0 -0.5px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.icon-color-picker__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
}

.icon-color-picker__swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--icon-color-picker-swatch, transparent);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-menu-text-strong, #fff) 20%, transparent);
    cursor: pointer;
}

.icon-color-picker__swatch:hover {
    transform: scale(1.08);
}

.icon-color-picker__swatch.is-active {
    box-shadow: 0 0 0 2px var(--shell-menu-bg, var(--shell-bg-surface)), 0 0 0 3.5px var(--icon-color-picker-swatch, var(--shell-menu-text-strong));
}

.icon-color-picker__swatch--custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__swatch--custom:hover {
    color: var(--shell-menu-text, var(--shell-text-primary));
    transform: none;
}

.icon-color-picker__search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 0 12px 8px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 8px;
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
}

.icon-color-picker__search-icon {
    flex-shrink: 0;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__search {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font: inherit;
    font-size: 13px;
}

.icon-color-picker__search::placeholder {
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 8px 12px;
    overscroll-behavior: contain;
}

.icon-color-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    outline: none;
}

.icon-color-picker__group-label {
    grid-column: 1 / -1;
    padding: 8px 4px 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    cursor: pointer;
}

.icon-color-picker__cell:hover {
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
}

.icon-color-picker__cell:focus-visible {
    outline: 2px solid var(--shell-accent, #5e6ad2);
    outline-offset: -2px;
}

.icon-color-picker__cell--icon {
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__cell--icon:hover {
    color: var(--shell-menu-text, var(--shell-text-primary));
}

.icon-color-picker__cell--emoji {
    aspect-ratio: 1;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
}

.icon-color-picker__cell.is-selected {
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
}

.icon-color-picker__cell--icon.is-selected {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.icon-color-picker__empty {
    grid-column: 1 / -1;
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.icon-color-picker__custom {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.icon-color-picker__custom-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.icon-color-picker__custom-back:hover {
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
    color: var(--shell-menu-text, var(--shell-text-primary));
}

.icon-color-picker__hsv {
    width: 100%;
}

/* Modal variant reuses the surface without the popover chrome. */
.modal-icon-color-picker {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal-icon-color-picker .modal-dialog-content__body {
    padding-right: 36px;
}

.modal-icon-color-picker__picker {
    margin-top: 16px;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 8px;
    overflow: hidden;
}

.modal-icon-color-picker__picker .icon-color-picker__surface {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.modal-icon-color-picker__actions {
    margin-top: 18px;
}
/* Grouped drag-and-drop list (Linear "Issue statuses" settings list clone).
   Metrics measured 1:1 from Linear light theme — see evidence/linear-dnd-list/.
   Every color flows through the shell theme tokens; the hex fallbacks are the
   measured Linear light values, and callers can override any --grouped-list-*
   hook per instance. */

.grouped-drag-list,
.grouped-list-dnd-clone {
    --gdl-card-bg: var(--grouped-list-card-bg, var(--settings-card-bg, #ffffff));
    --gdl-card-border: var(--grouped-list-card-border, color-mix(in srgb, var(--gdl-text-primary) 14%, var(--gdl-card-bg)));
    --gdl-card-radius: var(--grouped-list-card-radius, 10px);
    --gdl-header-bg: var(--grouped-list-header-bg, color-mix(in srgb, var(--gdl-text-primary) 7%, var(--gdl-card-bg)));
    --gdl-divider: var(--grouped-list-divider, color-mix(in srgb, var(--gdl-text-primary) 9.5%, var(--gdl-card-bg)));
    --gdl-text-primary: var(--grouped-list-text, var(--shell-text-primary, #1b1b1b));
    --gdl-text-secondary: var(--grouped-list-text-secondary, var(--shell-text-secondary, #5e5e60));
    --gdl-hover-bg: var(--grouped-list-hover-bg, var(--shell-bg-hover, rgba(0, 0, 0, 0.05)));
    --gdl-hairline: var(--grouped-list-hairline, 0.5px);
    --gdl-item-color: var(--gdl-text-secondary);

    position: relative;
    font-family: var(--font-regular, "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", sans-serif);
    color: var(--gdl-text-primary);
}

.grouped-drag-list__sections {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    background: var(--gdl-card-bg);
    border-radius: var(--gdl-card-radius);
    box-shadow:
        0 0 0 var(--gdl-hairline) var(--gdl-card-border),
        0 1px 3px 0 lch(0% 0 0 / 0.05);
}

.grouped-drag-list__section {
    position: relative;
}

.grouped-drag-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* An empty group keeps a slim band of card surface so consecutive headers
   never touch, and the group stays a comfortable drop target. */
.grouped-drag-list__items--empty {
    min-height: 8px;
}

.grouped-drag-list__item {
    position: relative;
}

/* Hairline divider between adjacent rows only (never after the last row of a
   section, never between a row and the next header). */
.grouped-drag-list__item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    border-bottom: var(--gdl-hairline) solid var(--gdl-divider);
    z-index: 1;
    pointer-events: none;
}

/* Group header — fixed (not draggable) */

.grouped-drag-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    margin: 0 12px;
    padding: 0 6px 0 16px;
    border-radius: 6px;
    background: var(--gdl-header-bg);
}

.grouped-drag-list__section:first-child > .grouped-drag-list__header {
    margin-top: 16px;
}

.grouped-drag-list__header-title-wrap {
    display: flex;
    min-width: 0;
    align-items: center;
}

.grouped-drag-list__header-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    color: var(--gdl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grouped-drag-list__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--gdl-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.grouped-drag-list__add:hover,
.grouped-drag-list__add:focus-visible {
    background: var(--gdl-hover-bg);
    color: var(--gdl-text-primary);
    transition-duration: 0s;
}

/* Row */

.grouped-drag-list__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 16px;
    background: transparent;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Hover-reveal drag grip in the row's left padding (the shared stack-drag
   affordance); only when the list itself has dragging enabled. */
.grouped-drag-list__grip {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-flex;
    justify-content: center;
    width: 16px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--gdl-text-secondary, var(--shell-text-secondary, #5e5e60));
    pointer-events: none;
}

.grouped-drag-list--draggable .grouped-drag-list__row:not(.grouped-drag-list__row--disabled):not(.grouped-drag-list__row--fixed):hover .grouped-drag-list__grip {
    opacity: 1;
}

.grouped-list-dnd-clone .grouped-drag-list__grip {
    opacity: 0;
}

.grouped-drag-list--draggable .grouped-drag-list__row:not(.grouped-drag-list__row--disabled):not(.grouped-drag-list__row--fixed) {
    cursor: grab;
}

.grouped-drag-list__row:focus-visible {
    outline: 2px solid var(--grouped-list-focus-ring, var(--shell-tab-active-ring, lch(47.918% 59.303 288.421)));
    outline-offset: -2px;
    border-radius: 6px;
}

.grouped-drag-list__row--disabled {
    opacity: 0.6;
}

.grouped-drag-list__row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.grouped-drag-list__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    color: var(--gdl-item-color);
    background: var(--gdl-item-tile-bg, color-mix(in srgb, var(--gdl-item-color) 25%, var(--gdl-card-bg)));
}

.grouped-drag-list__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.grouped-drag-list__title-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.grouped-drag-list__title {
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    color: var(--gdl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grouped-drag-list__dot {
    display: inline-block;
    flex-shrink: 0;
    font-size: 13px;
    line-height: normal;
    color: var(--gdl-text-secondary);
}

.grouped-drag-list__extra {
    font-size: 13px;
    font-weight: 450;
    line-height: normal;
    color: var(--gdl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grouped-drag-list__subtitle-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.grouped-drag-list__subtitle,
.grouped-drag-list__subtitle-extra {
    font-size: 12px;
    font-weight: 450;
    line-height: normal;
    color: var(--gdl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grouped-drag-list__dot--small {
    font-size: 12px;
}

/* Trailing actions fade in on row hover, Linear-style (no row background change). */

.grouped-drag-list__trailing {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.grouped-drag-list__row:hover .grouped-drag-list__trailing,
.grouped-drag-list__row:focus-visible .grouped-drag-list__trailing,
.grouped-drag-list__row--menu-open .grouped-drag-list__trailing,
.grouped-drag-list__trailing:focus-within {
    opacity: 1;
    transition-duration: 0s;
}

.grouped-drag-list__row-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--gdl-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.grouped-drag-list__row-menu:hover,
.grouped-drag-list__row-menu:focus-visible,
.grouped-drag-list__row--menu-open .grouped-drag-list__row-menu {
    background: var(--gdl-hover-bg);
    color: var(--gdl-text-primary);
    transition-duration: 0s;
}

/* Drag visuals */

.grouped-list-dnd-dragging,
.grouped-list-dnd-dragging * {
    cursor: grabbing !important;
}

.grouped-list-dnd-clone {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    pointer-events: none;
    will-change: transform;
}

/* Linear lifts the row flat under the cursor: card surface, soft shadow. */
.grouped-list-dnd-clone .grouped-drag-list__row--drag-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 16px;
    border-radius: 6px;
    background: var(--gdl-card-bg);
    box-shadow:
        0 0 0 var(--gdl-hairline) var(--gdl-card-border),
        0 8px 24px -6px lch(0% 0 0 / 0.3);
    font-family: var(--font-regular, "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", sans-serif);
}

.grouped-list-dnd-clone .grouped-drag-list__trailing {
    opacity: 0;
}

/* While dragging, rows and headers slide around the moving gap with dnd-kit's
   sortable transition; the source row keeps its slot but turns invisible. */
.grouped-drag-list--dnd-active .grouped-drag-list__item,
.grouped-drag-list--dnd-active .grouped-drag-list__header {
    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

.grouped-drag-list__item--dnd-source {
    visibility: hidden;
}

/* While a drag is live, suppress hover reveals so rows stay clean under the clone. */
.grouped-drag-list--dnd-active .grouped-drag-list__trailing {
    opacity: 0 !important;
}

/* ===== video-player.css ===== */

/* Qui video player chrome (Linear-style) — shared by the rich-text editor node, RichTextRenderer,
   and the Lightbox. The shell is a column: picture fills the remaining space, the control bar is
   always visible at the bottom (this is also what keeps Lightbox controls on-screen). */

/* Always-dark chrome for the VIDEO overlay only: playback controls paint over the
   picture, so they stay dark regardless of the app theme (standard player behaviour).
   The lightbox and the image annotator follow the app theme — their chrome reads the
   live shell tokens, so a light app gets light chrome like Linear's light mode. */
.qui-video {
    color-scheme: dark;
    --shell-shadow: lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0;
    --shell-bg-surface: lch(5.52% 0.4 272 / 1);
    --shell-bg-active: lch(9.02% 0.45 272 / 1);
    --shell-bg-button: lch(10.691% 0.493 272 / 1);
    --shell-bg-hover: lch(10.691% 0.493 272 / 1);
    --shell-border: lch(8.84% 1.38 272 / 1);
    --shell-text-primary: lch(100 0 272);
    --shell-text-secondary: lch(60.307% 1 272);
    --shell-text-tertiary: lch(90.077% 1 272);
    --shell-menu-bg: lch(9.92% 0.75 272 / 1);
    --shell-menu-text: lch(90.895% 1.375 272 / 1);
    --shell-menu-text-strong: lch(100 0 272 / 1);
    --shell-menu-hint: lch(63.582% 1.375 272 / 1);
    --shell-menu-border: lch(22.88% 1.83 272 / 1);
    --shell-menu-divider: lch(22.88% 1.83 272 / 1);
    --shell-menu-item-hover: lch(15.32% 0.75 272 / 1);
    --shell-menu-shadow: lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0;
}

.qui-video {
    position: relative;
    min-height: 0;
    background: lch(5% 0 272);
}

.qui-video > video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.qui-video:fullscreen {
    background: #000;
}

/* Inset floating control bar over the picture (Linear): bottom margin left/right, rounded pill. */
.qui-video__bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    background: lch(27% 0.5 272 / 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: lch(96% 0 0);
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    user-select: none;
    z-index: 2;
}

.qui-video__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: default;
    transition: background-color 120ms ease;
    position: relative;
}

.qui-video__button:hover {
    background: lch(100% 0 0 / 0.12);
}

.qui-video__button svg {
    width: 14px;
    height: 14px;
}

.qui-video__button--speed {
    width: auto;
    min-width: 30px;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 560;
}

.qui-video__time {
    color: lch(96% 0 0 / 0.92);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.qui-video__seek:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.qui-video__seek {
    flex: 1 1 auto;
    min-width: 40px;
    height: 3px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 9999px;
    background:
        linear-gradient(
            to right,
            lch(96% 0 0) var(--qui-video-progress, 0%),
            lch(100% 0 0 / 0.24) var(--qui-video-progress, 0%));
    outline: none;
    cursor: default;
}

.qui-video__seek::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 3px;
    height: 13px;
    border: 0;
    border-radius: 2px;
    background: lch(100% 0 0);
    box-shadow: 0 1px 3px lch(0% 0 0 / 0.4);
}

.qui-video__seek::-moz-range-thumb {
    width: 3px;
    height: 13px;
    border: 0;
    border-radius: 2px;
    background: lch(100% 0 0);
    box-shadow: 0 1px 3px lch(0% 0 0 / 0.4);
}

/* Speed menu: dark context-menu-style popup anchored above the speed button. */
.qui-video__menu-anchor {
    position: relative;
    display: inline-flex;
}

.qui-video__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    display: none;
    min-width: 96px;
    padding: 4px 0;
    border: 0.5px solid lch(100% 0 0 / 0.14);
    border-radius: 10px;
    background: lch(20% 0.5 272 / 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px lch(0% 0 0 / 0.4);
    z-index: 3;
}

.qui-video__menu--open {
    display: block;
}

.qui-video__menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 28px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: lch(96% 0 0);
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: left;
    cursor: default;
}

.qui-video__menu-item:hover {
    background: lch(100% 0 0 / 0.1);
}

.qui-video__menu-check {
    font-size: 0.6875rem;
    color: lch(96% 0 0 / 0.9);
}

/* Tooltips above the bar buttons (same pill treatment as the rich-text chrome). */
.qui-video__button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding: 4px 9px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 7px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
}

.qui-video__button[data-tip]:hover::after {
    display: block;
}

/* Lightbox shell: shrink-wraps the video (no side gutters) and centres in the document stage.
   The video keeps its intrinsic aspect, capped to the stage (insets 64px 64px 52px). */
.lightbox__content--document:has(> .lightbox__video-shell) {
    place-items: center;
}

.lightbox__video-shell {
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    box-shadow:
        lch(0% 0 0 / 0.24) 0 18px 48px,
        lch(0% 0 0 / 0.18) 0 6px 18px;
}

/* Beats the shared document-view rule (width/height 100% + panel background = white gutters).
   Scales the video UP OR DOWN to fill the stage (insets 64px 64px 52px) on whichever axis binds,
   while the element box keeps the video's exact shape — the shell hugs it, no gutters. The aspect
   var is exported by qui-video.js from the intrinsic dimensions (16:9 until metadata arrives). */
.lightbox__video-shell .lightbox__video {
    display: block;
    width: min(calc(100vw - 128px), calc((100vh - 116px) * var(--qui-video-aspect, 1.77778)));
    height: auto;
    border: 0;
    border-radius: 8px;
    background: lch(5% 0 0);
    box-shadow: none;
}

/* ----- built-in image editor: Lightbox-mirroring fullscreen surface ----- */

.qui-annotator-overlay {
    --qui-annotator-sidebar-width: 252px;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--shell-bg-surface);
    color: var(--shell-text-primary);
    animation: lightbox-backdrop-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}



/* Top bar owns ALL annotator chrome: tools left-aligned, save/cancel right (Lightbox layout).
   Buttons follow the standard Qui chrome recipe: 28px, radius 7, menu tokens, 120ms hover. */
/* Sits above the stage (which shares 2147483001) but before the bar in DOM order,
   so at the bar's z-index the bar and its dropdowns still win hit-testing. */
.qui-annotator-overlay__backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483002;
    background: transparent;
}

.qui-annotator-overlay__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 6px 10px;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.qui-annotator-overlay__tools {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.qui-annotator-overlay__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.qui-annotator-overlay__tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.qui-annotator-overlay__tool:hover {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
}

.qui-annotator-overlay__tool--active {
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
}

.qui-annotator-overlay__tool:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.qui-annotator-overlay__divider {
    width: 0.5px;
    height: 16px;
    margin: 0 5px;
    background: var(--shell-border);
}

.qui-annotator-overlay__anchor .qui-annotator-overlay__tool,
.qui-annotator-overlay__tool:has(.qui-annotator-overlay__caret) {
    width: auto;
    padding: 0 7px;
}

.qui-annotator-overlay__anchor {
    position: relative;
    display: inline-flex;
}

.qui-annotator-overlay__caret {
    margin-left: 3px;
    font-size: 0.5625rem;
    color: currentColor;
    opacity: 0.7;
}

.qui-annotator-overlay__swatch {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1.5px lch(50% 0 0 / 0.35);
}

.qui-annotator-overlay__dot {
    display: inline-block;
    border-radius: 9999px;
    background: currentColor;
}

.qui-annotator-overlay__swatch-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    min-width: 0;
    padding: 10px;
}

.qui-annotator-overlay__swatch-option {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid transparent;
    outline: 1px solid var(--shell-menu-hint, var(--shell-text-secondary));
    outline-offset: -1px;
    border-radius: 9999px;
    cursor: default;
    transition: transform 80ms ease;
}

.qui-annotator-overlay__swatch-option:hover {
    transform: scale(1.12);
}

.qui-annotator-overlay__swatch-option--active {
    box-shadow: 0 0 0 2px var(--shell-menu-bg), 0 0 0 3.5px var(--shell-accent, #5e6ad2);
}

/* Same pill tooltips as the rest of the rich-text chrome. */
.qui-annotator-overlay__tool[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 6px;
    background: var(--shell-menu-bg);
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--shell-menu-text, var(--shell-text-tertiary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
}

.qui-annotator-overlay__tool[data-tip]:hover::after {
    display: inline-flex;
}

/* Edge tools keep their tooltip inside the viewport. */
.qui-annotator-overlay__tools > .qui-annotator-overlay__tool:first-child::after {
    left: 0;
    transform: none;
}

.qui-annotator-overlay__actions > .qui-annotator-overlay__tool:last-child::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Background sidebar: slides in from the left under the top bar. */
.qui-annotator-overlay__sidebar {
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;
    z-index: 2147483002;
    width: var(--qui-annotator-sidebar-width);
    padding: 14px 16px 20px;
    overflow-y: auto;
    background: var(--shell-menu-bg);
    border-right: 0.5px solid var(--shell-menu-border);
    box-shadow: var(--shell-menu-shadow);
    animation: qui-annotator-sidebar-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes qui-annotator-sidebar-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.qui-annotator-overlay__sidebar-title {
    margin: 14px 0 8px;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 550;
}

.qui-annotator-overlay__sidebar-title:first-child {
    margin-top: 2px;
}

.qui-annotator-overlay__bg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.qui-annotator-overlay__bg-chip {
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    border: 0.5px solid lch(50% 0 0 / 0.25);
    border-radius: 9px;
    cursor: default;
    transition: transform 100ms ease, box-shadow 120ms ease;
}

.qui-annotator-overlay__bg-chip:hover {
    transform: scale(1.06);
}

.qui-annotator-overlay__bg-chip--active {
    box-shadow: 0 0 0 2px var(--shell-menu-bg), 0 0 0 3.5px var(--shell-accent, #5e6ad2);
}

/* "None": empty chip with a diagonal strike. */
.qui-annotator-overlay__bg-chip--none {
    position: relative;
    background: transparent;
    border-color: var(--shell-menu-divider);
}

.qui-annotator-overlay__bg-chip--none::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: linear-gradient(to top right, transparent calc(50% - 0.75px), #eb5757 calc(50% - 0.75px), #eb5757 calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.qui-annotator-overlay__bg-sliders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 0.5px solid var(--shell-menu-divider);
    transition: opacity 120ms ease;
}

.qui-annotator-overlay__bg-sliders--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.qui-annotator-overlay__bg-slider label {
    display: block;
    margin-bottom: 2px;
    color: var(--shell-menu-text, var(--shell-text-tertiary));
    font-size: 0.75rem;
    font-weight: 500;
}

.qui-annotator-overlay__stage {
    position: fixed;
    inset: 44px 0 44px;
    z-index: 2147483001;
    display: flex;
    min-height: 0;
}

.qui-annotator-overlay__annotator {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* ===== annotations.css ===== */

/* QImageAnnotator — QUI-native chrome for the fabric.js annotation engine.
   Colours come from the shell theme tokens so it tracks light/dark. */

.qui-annotator {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* Horizontal tool bar, top-left (Lightbox family): menu tokens, dropdowns open below. */
.qui-annotator__toolbar {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100% - 24px);
    padding: 4px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 10px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.qui-annotator__group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.qui-annotator__group + .qui-annotator__group {
    padding-left: 7px;
    margin-left: 5px;
    border-left: 0.5px solid var(--shell-menu-divider, var(--shell-border));
}

.qui-annotator__group--history {
    margin-left: 0;
}

/* Dropdown anchors off the rail. */
.qui-annotator__anchor {
    position: relative;
    display: inline-flex;
}

.qui-annotator__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    z-index: 5;
    min-width: 150px;
    padding: 5px 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
}

.qui-annotator__menu--swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 0;
    padding: 10px;
}

.qui-annotator__menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 32px;
    padding: 0 16px 0 12px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 450;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.qui-annotator__menu-item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
}

.qui-annotator__menu-item > * {
    position: relative;
    z-index: 1;
}

.qui-annotator__menu-item:hover {
    color: var(--shell-menu-text-strong);
}

.qui-annotator__menu-item:hover::before {
    background: var(--shell-menu-item-hover);
}

.qui-annotator__menu-icon {
    display: inline-flex;
    width: 16px;
    justify-content: center;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
}

.qui-annotator__menu-check {
    margin-left: auto;
    color: var(--shell-menu-text-strong);
    font-size: 0.75rem;
}

/* Rail triggers: colour swatch + width dot. */
.qui-annotator__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    cursor: default;
    transition: background-color 120ms ease;
}

.qui-annotator__trigger:hover {
    background: var(--shell-menu-item-hover);
}

.qui-annotator__trigger-swatch {
    width: 16px;
    height: 16px;
    margin: 6px;
    padding: 0;
    border: 2px solid lch(100% 0 0 / 0.35);
    border-radius: 9999px;
    background: var(--qui-annotator-swatch, #ff3b30);
    cursor: default;
}

.qui-annotator__group--actions {
    gap: 6px;
}

/* Active tool: tint the QUI icon button with the shell accent. */
.ui-icon-button.qui-annotator__tool--active {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 16%, transparent);
    color: var(--shell-accent, #5e6ad2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shell-accent, #5e6ad2) 40%, transparent);
}

/* Colour swatches. */
.qui-annotator__swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 1px solid var(--shell-menu-hint, var(--shell-text-secondary));
    outline-offset: -1px;
    background: var(--qui-annotator-swatch, #ff3b30);
    cursor: default;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.qui-annotator__swatch:hover {
    transform: scale(1.08);
}

.qui-annotator__swatch--active {
    box-shadow: 0 0 0 2px var(--shell-menu-bg), 0 0 0 3.5px var(--shell-accent, #5e6ad2);
}

/* Width / font-size pills. */
.qui-annotator__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-text-secondary, var(--shell-text-primary));
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.qui-annotator__step:hover {
    background: var(--shell-bg-hover, color-mix(in srgb, var(--shell-text-primary) 8%, transparent));
}

.qui-annotator__step--active {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 40%, transparent);
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent);
    color: var(--shell-text-primary);
}

.qui-annotator__dot {
    display: inline-block;
    border-radius: 50%;
    background: currentColor;
}

/* Stage: flat Lightbox-style surface; the canvas carries the Lightbox drop shadow. */
.qui-annotator__stage {
    position: relative;
    flex: 1;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.qui-annotator__canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow:
        lch(0% 0 0 / 0.24) 0 18px 48px,
        lch(0% 0 0 / 0.18) 0 6px 18px;
}

.qui-annotator--no-toolbar .qui-annotator__stage {
    min-height: 240px;
}

/* ----- CleanShot-style crop frame ----- */

.qui-annotator__crop {
    position: absolute;
    z-index: 3;
    cursor: move;
    box-shadow: 0 0 0 9999px lch(0% 0 0 / 0.55);
    background:
        linear-gradient(to right, transparent calc(33.33% - 0.5px), lch(100% 0 0 / 0.55) calc(33.33% - 0.5px), lch(100% 0 0 / 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
        linear-gradient(to right, transparent calc(66.66% - 0.5px), lch(100% 0 0 / 0.55) calc(66.66% - 0.5px), lch(100% 0 0 / 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5px), lch(100% 0 0 / 0.55) calc(33.33% - 0.5px), lch(100% 0 0 / 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5px), lch(100% 0 0 / 0.55) calc(66.66% - 0.5px), lch(100% 0 0 / 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
    outline: 1px solid lch(100% 0 0 / 0.9);
}

.qui-annotator__crop-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 2;
}

/* Corner brackets (thick L shapes) */
.qui-annotator__crop-handle--nw { top: -3px; left: -3px; border-top: 4px solid #fff; border-left: 4px solid #fff; cursor: nwse-resize; }
.qui-annotator__crop-handle--ne { top: -3px; right: -3px; border-top: 4px solid #fff; border-right: 4px solid #fff; cursor: nesw-resize; }
.qui-annotator__crop-handle--se { bottom: -3px; right: -3px; border-bottom: 4px solid #fff; border-right: 4px solid #fff; cursor: nwse-resize; }
.qui-annotator__crop-handle--sw { bottom: -3px; left: -3px; border-bottom: 4px solid #fff; border-left: 4px solid #fff; cursor: nesw-resize; }

/* Edge midpoint bars */
.qui-annotator__crop-handle--n { top: -3px; left: 50%; width: 22px; height: 10px; transform: translateX(-50%); border-top: 4px solid #fff; cursor: ns-resize; }
.qui-annotator__crop-handle--s { bottom: -3px; left: 50%; width: 22px; height: 10px; transform: translateX(-50%); border-bottom: 4px solid #fff; cursor: ns-resize; }
.qui-annotator__crop-handle--w { left: -3px; top: 50%; width: 10px; height: 22px; transform: translateY(-50%); border-left: 4px solid #fff; cursor: ew-resize; }
.qui-annotator__crop-handle--e { right: -3px; top: 50%; width: 10px; height: 22px; transform: translateY(-50%); border-right: 4px solid #fff; cursor: ew-resize; }

/* Live size readout — original-image pixels, centred above the frame. */
.qui-annotator__crop-size {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 6px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text, var(--shell-text-tertiary));
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.qui-annotator__crop-actions {
    position: absolute;
    right: 0;
    bottom: -40px;
    display: flex;
    gap: 4px;
}

.qui-annotator__crop-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 8px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text-strong, #fff);
    font-size: 0.8125rem;
    cursor: default;
    transition: background-color 120ms ease;
}

.qui-annotator__crop-action:hover {
    background: var(--shell-menu-item-hover);
}

.qui-annotator__crop-action[data-crop="revert"] {
    width: auto;
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 450;
    white-space: nowrap;
}

.qui-annotator__crop-action--apply {
    border-color: transparent;
    background: var(--shell-accent, #5e6ad2);
    color: #fff;
}


/* ProgressPill: Linear's inline donut + n/m label (measured: arc = accent #5e6ad2,
   track/border = hairline gray, label mid-gray 13px). Bare variant drops the chrome. */
.progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
}

.progress-pill--bordered {
    height: 28px;
    padding: 0 12px 0 9px;
    border: 0.5px solid var(--shell-border, lch(19.64% 1.38 272 / 1));
    border-radius: 9999px;
}

.progress-pill__ring {
    flex: 0 0 auto;
}

.progress-pill__track {
    fill: none;
    stroke: var(--shell-border, lch(19.64% 1.38 272 / 1));
    stroke-width: 2;
    stroke-linecap: round;
}

.progress-pill__value {
    fill: none;
    stroke: var(--shell-accent, #5e6ad2);
    stroke-width: 2;
    stroke-linecap: round;
}

.progress-pill__label {
    line-height: 1;
}

/* Clickable pills darken on hover (measured on Linear light: rest lch(97.9) -> lch(92.4));
   dark themes fill a step up. Cursor stays default like Linear's buttons. */
.progress-pill--bordered.progress-pill--interactive {
    transition: background-color 150ms ease;
}

.progress-pill--bordered.progress-pill--interactive:hover {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

[data-app-theme="light"] .progress-pill--bordered.progress-pill--interactive:hover,
[data-app-theme="pure-light"] .progress-pill--bordered.progress-pill--interactive:hover {
    background: lch(92.44% 0.5 282 / 1);
}

/* Popover open (measured off Linear): 150ms ease fade + scale from 0.95, transform-origin
   toward the anchor so panels grow OUT of their trigger. */
@keyframes qui-popover-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.anchored-dropdown-menu > .shell-dropdown-menu {
    animation: qui-popover-in 150ms ease;
    transform-origin: top left;
}

.anchored-dropdown-menu--below-align-end > .shell-dropdown-menu {
    transform-origin: top right;
}

.ui-hover-card {
    animation: qui-popover-in 150ms ease;
    transform-origin: var(--ui-floating-overlay-origin, top left);
}

.ui-popover__surface {
    animation: ui-popover-surface-in 150ms ease;
    transform-origin: var(--ui-popover-origin, 50% 0);
}

@keyframes ui-popover-surface-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.icon-color-picker__popover[popover] .icon-color-picker__surface {
    animation: icon-color-picker-in 150ms ease;
    transform-origin: top left;
}

@keyframes icon-color-picker-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Popover close (mirror of the open): 150ms ease, fade + scale back to 0.95. The
   --closing latch keeps the panel mounted while this plays; forwards holds opacity 0 so
   there is no flash if unmount lands a frame late. */
@keyframes qui-popover-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.anchored-dropdown-menu--closing {
    pointer-events: none;
}

.anchored-dropdown-menu--closing > .shell-dropdown-menu {
    animation: qui-popover-out 150ms ease forwards;
}

/* AnchoredPopover: THE hosting for click-anchored popover cards. Chrome and motion are
   deliberately identical to the dropdown menus — same border/bg/shadow tokens, same
   150ms qui-popover in/out with the origin toward the anchor. */
.anchored-popover__backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.anchored-popover__positioner {
    position: absolute;
    top: 32.25px;
    right: 0;
    z-index: 950;
    box-sizing: border-box;
}

.anchored-popover__panel {
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    overflow: hidden;
    outline: none;
    animation: qui-popover-in 150ms ease;
    transform-origin: top right;
}

/* Top-layer mode: strip the UA popover chrome from the positioner — the panel inside brings
   its own surface; inline styles own the fixed position. */
.anchored-popover__positioner[popover] {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}


.anchored-popover--align-start .anchored-popover__panel {
    transform-origin: top left;
}

.anchored-popover--closing {
    pointer-events: none;
}

.anchored-popover--closing .anchored-popover__panel {
    animation: qui-popover-out 150ms ease forwards;
}

/* Popover open (measured off Linear): form-field panels (date, time, country, colour,
   multi-select…) zoom from the placement-aware origin the positioning JS computes. */
@keyframes ui-floating-overlay-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ui-floating-overlay__positioner {
    animation: ui-floating-overlay-in 150ms ease;
}

/* CustomizerModal: Linear's "Customize sidebar" generalised. Measured off the live app:
   478px surface, radius 16, 24px padding, gray group cards (4.5% text over surface) of
   36px rows — six-dot handle, 16px icon, 15px/500 label, ghost select on the right —
   with the section label OUTSIDE the card. */
.customizer-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: lch(0% 0 0 / 0.4);
}

.customizer-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 25px 25px 25px;
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(15.736% 2.713 272.695 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    box-shadow:
        0 0 0 0.5px var(--shell-menu-border, var(--shell-border, lch(19.64% 1.38 272 / 1))),
        0 16px 48px -12px lch(0% 0 0 / 0.4);
    overflow-y: auto;
}

/* the centring transform and the open animation both use transform — run the zoom on a
   wrapper-free surface by letting the animation END at the centring transform */
@keyframes customizer-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.customizer-modal {
    animation: customizer-modal-in 150ms ease;
}

.customizer-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.customizer-modal--without-top .customizer-modal__header {
    margin-bottom: 10px;
}

.customizer-modal__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.customizer-modal__top {
    margin-bottom: 0;
}

/* shared card surface: the setting rows and the group item cards */
.customizer-setting,
.grouped-drag-list--customizer .grouped-drag-list__items {
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--shell-text-primary, #1b1b1b) 8.5%, transparent);
    background: color-mix(in srgb, var(--shell-text-primary, #1b1b1b) 4.5%, transparent);
}

.customizer-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 8px 0 16px;
    margin-bottom: 8px;
}

.customizer-setting__label {
    font-size: 0.8125rem;
    font-weight: 500;
}

.customizer-setting__trailing,
.customizer-modal__row-trailing {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ghost select trigger: "Always show ⌄" */
.customizer-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.customizer-select:hover {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
}

.customizer-select__chevron {
    display: inline-flex;
    opacity: 0.7;
}

/* group list restyle: transparent shell, label outside, compact 36px rows */
.grouped-drag-list--customizer .grouped-drag-list__sections {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
}

.grouped-drag-list--customizer .grouped-drag-list__section {
    margin-top: 16px;
}

.customizer-modal--without-top .grouped-drag-list__section:first-child {
    margin-top: 0;
}

.grouped-drag-list--customizer .grouped-drag-list__header {
    min-height: 0;
    margin: 0 0 10px;
    padding: 0 0 0 2px;
    background: transparent;
    border: 0;
}

.grouped-drag-list--customizer .grouped-drag-list__header-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grouped-drag-list--customizer .grouped-drag-list__items {
    padding: 6px 12px;
}

.grouped-drag-list--customizer .grouped-drag-list__row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0;
}

/* six-dot drag handle */
.customizer-modal__handle {
    display: inline-grid;
    grid-template-columns: repeat(2, 2px);
    grid-template-rows: repeat(3, 2px);
    gap: 2px;
    margin-right: 8px;
    flex: 0 0 auto;
}

.customizer-modal__handle > span {
    width: 2px;
    height: 2px;
    border-radius: 9999px;
    background: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    opacity: 0.8;
}

.customizer-modal__row-icon {
    display: inline-flex;
    margin-right: 6px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
}

.customizer-modal__row-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grouped-drag-list--customizer .grouped-drag-list__trailing {
    opacity: 1;
}

.grouped-drag-list--customizer .grouped-drag-list__item:not(:last-child)::after {
    content: none;
}

/* drag preview for the customizer variant: Linear floats the BARE row content — no
   card, no shadow — so the drag reads as the content itself moving */
.grouped-list-dnd-clone.grouped-drag-list--customizer .grouped-drag-list__row--drag-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.grouped-list-dnd-clone.grouped-drag-list--customizer .grouped-drag-list__trailing {
    opacity: 1;
}

/* Linear's customizer keeps every row's select visible during a drag — only the
   settings-list variant hides trailing content mid-drag */
.grouped-drag-list--customizer.grouped-drag-list--dnd-active .grouped-drag-list__trailing {
    opacity: 1 !important;
}
/* Linear document editor — surface, meta popover, version history modal. Measured off the live
   app: 805px centred column, 24px/600 title, file-glyph icon above, meta pill top-right; the
   history modal is a large rounded card with a compare pane + day-grouped version list. */

.document-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The "Edited …" control (DocumentMetaMenu) sits at the top-right of the document body, flush to
   the right edge — its own row above the icon/title, like Linear. */
/* Sticky like Linear: the pill stays pinned to the top of the scrolling document column.
   The bar itself is click-through so it never blocks text under it mid-scroll — but every
   direct child (the pill overlay AND the history modal + backdrop, which render inside this
   bar) must restore pointer-events or the whole modal becomes uninteractable. */
.document-editor__meta-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 8px 12px 0;
    pointer-events: none;
}

.document-editor__meta-bar > * {
    pointer-events: auto;
}

.document-meta-overlay {
    display: inline-flex;
}

/* Measured Linear presence: 16px round avatars in the meta row, right of the pill — each with a
   1px surface-colour gap ring and an outer ring in the participant colour. */
.document-collaborators {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    order: 2;
}

.document-collaborators__avatar {
    display: inline-flex;
    border-radius: 9999px;
    box-shadow:
        0 0 0 1px var(--shell-bg-surface, lch(100% 0 272)),
        0 0 0 2.5px var(--presence-color, lch(55% 60 180));
}

.document-collaborators__avatar .ui-avatar,
.document-collaborators__avatar img {
    border-radius: 9999px;
}

/* Measured Linear 2026-08-31: 12px / 500 full-radius pill, transparent at rest, text+icon on
   the body tier, 28px tall, pad 8/10, 0.5px transparent border (metrics only). Hover fills
   with lch(94.854% 0.5 282) light == ~6% text-on-surface. */
.document-editor__meta-pill {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    gap: 6px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--document-body-text, var(--shell-text-primary, lch(90.451% 1.2 272)));
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.document-editor__meta-pill:hover {
    background: color-mix(in srgb, var(--shell-text-primary, lch(90% 1.2 272)) 6%, var(--shell-bg-surface, lch(100% 0 272)));
}

.document-editor__meta-pill .shell-icon {
    color: inherit;
}

/* Linear's 805px column is the TEXT measure — side padding sits outside it (24 + 805 + 24),
   and the icon slot starts 28px below the meta bar. */
.document-editor__surface {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 853px;
    padding: 28px 24px 120px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Icon + title share one row (deliberate divergence from Linear, which stacks them). */
.document-editor__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.document-editor__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 36px;
}

/* The glyph sits on a subtle page-shaped plate (5% text tint): a 36px rounded square whose
   top-right corner is chopped on a rounded diagonal, like Linear's document-page silhouette. */
.document-editor__icon .icon-color-picker__trigger-button {
    width: 36px;
    height: 36px;
}

.document-editor__glyph,
.document-editor__icon-static,
.document-editor__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    background: color-mix(in srgb, var(--shell-text-primary, currentColor) 5%, transparent);
    clip-path: path("M6 0 L23.8 0 Q26 0 27.6 1.6 L34.4 8.4 Q36 10 36 12.2 L36 30 Q36 36 30 36 L6 36 Q0 36 0 30 L0 6 Q0 0 6 0 Z");
    cursor: pointer;
}

.document-editor__glyph--placeholder {
    color: var(--shell-text-tertiary, lch(48% 1.5 272));
}

.document-editor__emoji {
    font-size: 26px;
    line-height: 1;
}

/* Measured Linear: 24/600, 32px line, −0.16px tracking, then a 26px gap to the first
   paragraph (16px here + 10px body padding). */
.document-editor__title {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.16px;
}

.document-editor__title::placeholder {
    color: var(--document-placeholder-text, var(--shell-text-tertiary, lch(48% 1.5 272)));
}

.document-editor__body {
    position: relative;
    padding-top: 10px;
}

/* Author-names gutter (measured Linear): 12/400 on the body's 24px line grid, secondary tier,
   right-aligned with the label's right edge 35px left of the text column. */
.document-editor__author-gutter {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
}

.document-editor__author-label {
    position: absolute;
    right: 35px;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

/* Body copy sits one tier LIGHTER than the title in Linear light themes (lch 19.588 vs 9.794) —
   the same measured ladder as --stats-table-label-color, exposed as --document-body-text. */
.document-editor__body .document-editor__rich-text .ui-form__rich-text-content {
    min-height: 40vh;
    padding: 0;
    color: var(--document-body-text, var(--shell-text-primary, lch(90.451% 1.2 272)));
    font-size: 0.9375rem;
    line-height: 1.5rem;
}

.document-editor__body .document-editor__rich-text .ui-form__rich-text-content--empty:first-child::before,
.document-editor__body .document-editor__rich-text .ui-form__rich-text-content p.is-empty::before {
    color: var(--document-placeholder-text, var(--shell-text-tertiary, lch(48% 1.5 272)));
}

/* ── Meta popover ── */

/* FloatingOverlay panel surface (click-triggered). Measured Linear 2026-08-31: 323.5px wide,
   radius 12, 0.5px border, and a VERY light three-layer shadow (2%/4%/4%). */
.document-meta-popover {
    width: 323.5px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--shell-menu-bg, var(--shell-bg-surface, lch(100% 0 272)));
    color: var(--shell-menu-text, var(--shell-text-primary));
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    box-shadow:
        lch(0 0 0 / 0.02) 0 6px 18px,
        lch(0 0 0 / 0.04) 0 3px 9px,
        lch(0 0 0 / 0.04) 0 1px 1px;
    overflow: hidden;
    animation: document-meta-in 130ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

@keyframes document-meta-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* Measured Linear: flat full-width rows (no inset hover plates), 4.5px above / 8px below. */
.document-meta-popover__toggles {
    display: flex;
    flex-direction: column;
    padding: 4.5px 0 8px;
    border-bottom: 0.5px solid var(--shell-menu-divider, var(--shell-menu-border));
}

.document-meta-popover__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
    padding: 0 16px;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 450;
    white-space: nowrap;
    cursor: pointer;
}

/* Measured Linear: "Owned by" row 44 tall, "Last edit by" 40, 0.5px hairline between; labels
   sit in a fixed ~71.5px column so the names align across rows. */
.document-meta-popover__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 0.5px solid var(--shell-menu-divider, var(--shell-menu-border));
    font-size: 0.8125rem;
}

.document-meta-popover__row--owner {
    height: 44px;
}

.document-meta-popover__row--edit {
    height: 40px;
}

.document-meta-popover__label {
    width: 71.5px;
    flex-shrink: 0;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    white-space: nowrap;
}

.document-meta-popover__person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.document-meta-popover__name {
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-meta-popover__time {
    margin-left: auto;
    color: var(--shell-menu-hint, var(--shell-text-secondary));
    white-space: nowrap;
}

/* Linear's raised-control skin (0.5px ring as spread shadow + ambient): inset 8px, 28px tall,
   radius-full, 12px/500, centred content, text+icon on the menu-text tier. */
.document-meta-popover__history {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: calc(100% - 16px);
    height: 28px;
    margin: 8px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.document-meta-popover__history:hover {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--shell-control-raised-shadow, none));
}

.document-meta-popover__history .shell-icon {
    color: inherit;
}

/* ── History modal ── */

.document-history__backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: color-mix(in srgb, #000 32%, transparent);
    animation: document-history-fade 150ms ease;
}

/* Measured Linear: 1020 x 841 card, radius 12, horizontally centred, anchored ~70px from the top
   (NOT vertically centred). */
.document-history {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 901;
    width: min(1020px, calc(100vw - 64px));
    height: min(841px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: var(--shell-bg-surface, lch(99% 0.2 272 / 1));
    box-shadow:
        lch(0 0 0 / 0.24) 0 18px 48px,
        lch(0 0 0 / 0.18) 0 6px 18px;
    overflow: hidden;
    animation: document-history-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
}

@keyframes document-history-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes document-history-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.97) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

/* Replayed each time the selected version changes (keyed remount) — a soft cross-fade
   so switching versions in the list reads as a transition, not a hard swap. */
@keyframes document-history-content {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Measured Linear: header text sits 20.5px from the modal edge, close button 10.5/16.5. */
.document-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16.5px 0 20.5px;
    flex: none;
}

/* Measured Linear: ~15px, the "Restore version for" prefix is muted grey / regular weight and the
   doc title is dark / medium (not heavy bold). */
/* Measured Linear: 13px/500 — "Restore version for" on the secondary tier, the doc title
   near-black, 16px doc icon between them. */
.document-history__heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shell-menu-hint, var(--shell-text-secondary, lch(64.894% 2.106 272.695)));
    font-size: 0.8125rem;
    font-weight: 500;
}

.document-history__doc-icon {
    display: inline-flex;
    align-items: center;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
}

/* The heading reuses the editor's icon glyph, whose chip box reads too heavy at heading size.
   Strip the chip so it renders as a plain, thin glyph like Linear's header. */
.document-history__doc-icon .document-editor__glyph,
.document-history__doc-icon .document-editor__glyph--placeholder {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: inherit;
}

.document-history__doc-icon .document-editor__emoji {
    width: auto;
    height: auto;
    font-size: 1rem;
}

.document-history__doc-title {
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-weight: 500;
}

/* The body (content + version list) sits in an INNER card, inset 16px from the modal edges below
   the header — measured Linear: [16.5, 49.5, 987×775, radius 8, border 0.5px]. */
.document-history__body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 248px;
    flex: 1;
    min-height: 0;
    margin: 0 16px 16px;
    border: 0.5px solid var(--shell-border, lch(86% 1.2 272 / 1));
    border-radius: 8px;
    overflow: hidden;
}

.document-history__empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 1rem;
}

/* Measured Linear live (2026-08-31): pane padding 52px top (the date chip floats in it at
   16/16), 16px right, 84px bottom, 24px left. */
.document-history__compare {
    position: relative;
    min-height: 0;
    padding: 52px 16px 84px 24px;
    overflow-y: auto;
}

/* Measured Linear: the compare pane renders the document at its editor metrics — 15/450,
   24px line, −0.1px tracking, menu-text tier — with 16px between paragraphs. */
.document-history__content {
    color: var(--shell-menu-text, var(--shell-text-primary, lch(90.451% 1.2 272)));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    letter-spacing: -0.1px;
    animation: document-history-content 160ms ease;
}

.document-history__content .ui-form__rich-text-content p + p {
    margin-top: 16px;
}

/* The shared renderer carries the editor's 128px min-height + padding (so an empty editor is
   clickable); in the read-only history view that turns every block into a tall gap. Strip it,
   and force the document metrics past the renderer's 13px form defaults. */
.document-history__content .document-history__rich-text {
    min-height: 0;
    padding: 0;
}

.document-history__content .document-history__rich-text.ui-form__rich-text-content,
.document-history__content .document-history__rich-text .ui-form__rich-text-content,
.document-history__content .document-history__rich-text p {
    color: var(--shell-menu-text, var(--shell-text-primary, lch(90.451% 1.2 272)));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    letter-spacing: -0.1px;
}

/* Measured Linear: the date chip floats at 16/16 in the pane's 52px top padding — 21.5 tall,
   pad 3/7, radius 8, bg lch(94.5), 12px text: near-black date + secondary time, 4px apart. */
.document-history__date-chip {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 21.5px;
    padding: 3px 7px;
    box-sizing: border-box;
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-text-primary, lch(90% 1.2 272)) 6%, var(--shell-bg-surface, lch(100% 0 272)));
    color: var(--shell-menu-text-strong, var(--shell-text-primary, lch(90.451% 1.2 272)));
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
}

.document-history__date-chip-time {
    color: var(--shell-menu-hint, var(--shell-text-secondary, lch(64.894% 2.106 272.695)));
}

.document-history__attributed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.document-history__run {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
}

.document-history__run--nogutter {
    grid-template-columns: 1fr;
    gap: 0;
}

.document-history__run-author {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.9375rem;
    text-align: right;
}

/* Near-invisible hairline (Linear ≈ 0.5px lch 91.9%) — the list reads as part of the card, not a
   panel behind a divider. */
.document-history__list {
    border-left: 0.5px solid color-mix(in srgb, var(--shell-border, lch(86% 1.2 272)) 45%, transparent);
    padding: 8px 6px;
    overflow-y: auto;
}

/* Measured Linear rhythm: ~6px from a day label to its first row, ~4px between rows in a group,
   ~20px separating one day group from the next. */
.document-history__group-label {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.75rem;
    font-weight: 450;
    padding: 0 8px;
    margin-bottom: 6px;
}

.document-history__group-label:not(:first-child) {
    margin-top: 20px;
}

/* Measured Linear: 8px padding, radius 6, two lines (date/time/badge · avatar/name). */
/* Measured Linear row height ≈ 54.5 — tighter than a default 8/8 + 7 gap. */
.document-history__version {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 7px 8px;
    margin-bottom: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Measured Linear (light): hover lch(96.5%), active lch(94.5%) — subtle neutral greys, active a
   touch darker than hover. Mix text-primary into the surface so both themes stay correct. */
.document-history__version:hover {
    background: color-mix(in srgb, var(--shell-text-primary, lch(90% 1.2 272)) 4%, var(--shell-bg-surface, lch(100% 0 272)));
}

.document-history__version--active,
.document-history__version--active:hover {
    background: color-mix(in srgb, var(--shell-text-primary, lch(90% 1.2 272)) 7%, var(--shell-bg-surface, lch(100% 0 272)));
}

/* Measured Linear: date 12px/500 near-black, time 12px/450 muted grey. */
.document-history__version-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1.25;
}

.document-history__version-date {
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-weight: 500;
    white-space: nowrap;
}

.document-history__version-time {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-weight: 450;
    white-space: nowrap;
}

.document-history__current {
    margin-left: auto;
    padding: 1px 7px;
    border: 0.5px solid var(--issue-chip-border, var(--shell-border, lch(86% 1.2 272 / 1)));
    border-radius: 4px;
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Author line: 13px/450 muted grey name, ~20px avatar. */
.document-history__version-authors {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1;
}

.document-history__avatars {
    display: inline-flex;
}

.document-history__avatars .document-history__avatar:not(:first-child) {
    margin-left: -6px;
}

.document-history__toolbar {
    position: absolute;
    left: 0;
    right: 248px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* One unified pill (measured Linear): 40px tall, fully rounded, holds the highlight controls, a
   divider, and the Restore accent button. */
.document-history__toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 14px;
    border-radius: 9999px;
    background: var(--shell-menu-bg, var(--shell-bg-surface));
    border: 1px solid var(--shell-menu-border, var(--shell-border));
    box-shadow: lch(0 0 0 / 0.12) 0 6px 18px;
    white-space: nowrap;
    pointer-events: auto;
}

.document-history__toolbar-divider {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: var(--shell-menu-divider, var(--shell-menu-border, var(--shell-border)));
}

.document-history__restore {
    height: 24px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-accent, lch(47.918% 59.303 288.421));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.document-history__restore:hover:not(:disabled) {
    filter: brightness(1.08);
}

.document-history__restore:disabled {
    opacity: 0.4;
    cursor: default;
}

.document-history__diff-label {
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-size: 0.8125rem;
    font-weight: 450;
}

.document-history__diff-count {
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 0.8125rem;
}

.document-history__diff-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    cursor: pointer;
}

.document-history__diff-nav:hover:not(:disabled) {
    background: var(--shell-bg-hover, lch(93% 0.5 272 / 1));
}

.document-history__diff-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Template editor ── */

/* Linear settings › templates › document › new (measured live 2026-09-01 @2x): a 760px column
   with a 0 16px gutter → 728px text measure; the page owns outer margins. Icon + name + body
   STACK (this page really stacks on Linear too, unlike our one-row document divergence). */
.document-template-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    padding: 0 16px;
    margin: 8px auto 0;
    box-sizing: border-box;
}

/* Icon + name. INLINE by default — one row, icon left, name filling the rest, 12px gap, then
   the name's 16px gap before the body (our document page's treatment; a deliberate divergence
   from Linear's template form). --stacked restores Linear's measured icon-slot → name stack. */
.document-template-editor__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.document-template-editor__header--stacked {
    display: block;
    margin-bottom: 0;
}

/* A 32×36 slot holding a plain 24px glyph button (margin 6px 4px) — no page-silhouette plate,
   no clip-path, no fill. */
.document-template-editor__icon {
    display: flex;
    align-items: center;
    width: 32px;
    height: 36px;
    flex-shrink: 0;
}

.document-template-editor__icon .icon-color-picker__trigger-button {
    width: 24px;
    height: 24px;
    margin: 6px 4px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.document-template-editor__glyph,
.document-template-editor__icon-static,
.document-template-editor__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--shell-text-primary, lch(19.588% 1.25 282));
    cursor: pointer;
}

.document-template-editor__glyph--placeholder {
    color: var(--document-template-icon-placeholder, var(--shell-text-muted));
}

.document-template-editor__emoji {
    font-size: 18px;
    line-height: 1;
}

/* Measured: 24/600, 32px line, −0.16px tracking (margin 6px 0 16px when stacked). */
.document-template-editor__title {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary, lch(9.794% 0 282));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.16px;
}

.document-template-editor__header--stacked .document-template-editor__title {
    margin: 6px 0 16px;
}

.document-template-editor__title::placeholder {
    color: var(--document-placeholder-text, var(--shell-text-tertiary, lch(64.64% 1.25 282)));
}

/* Measured: 24px above the first text line / 48px below; 15/450/24 text; NO forced min-height
   (the document page's 40vh stays scoped to .document-editor__body). */
.document-template-editor__body {
    position: relative;
    padding: 24px 0 48px;
}

.document-template-editor__body .document-template-editor__rich-text .ui-form__rich-text-content {
    padding: 0;
    color: var(--document-body-text, var(--shell-text-primary, lch(19.588% 1.25 282)));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
}

.document-template-editor__body .document-template-editor__rich-text .ui-form__rich-text-content--empty:first-child::before,
.document-template-editor__body .document-template-editor__rich-text .ui-form__rich-text-content p.is-empty::before {
    color: var(--document-placeholder-text, var(--shell-text-tertiary, lch(64.64% 1.25 282)));
}

/* Measured footer: right-aligned 8px-gap row of 32px pills (ButtonSize.Control). Cancel is a
   white pill (no shadow); Create (Primary) is the 53% accent with the soft two-layer shadow,
   hover one step darker (the accent-pill formula). */
.document-template-editor__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px;
}

.document-template-editor__footer .ui-button--control {
    background: var(--shell-bg-content, var(--shell-bg-surface-button));
    color: var(--document-body-text, lch(19.588% 1.25 282));
}

.document-template-editor__footer .ui-button--control.ui-button--primary {
    background: var(--shell-accent, lch(53% 52.26 286.91));
    color: lch(100% 5 286.91);
    box-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
}

.document-template-editor__footer .ui-button--control.ui-button--primary:hover {
    background: color-mix(in lch, var(--shell-accent, lch(53% 52.26 286.91)) 92%, black);
}

/* ── Template pill + picker ── */

/* Measured Linear (empty document, 2026-09-02 @2x): a 24px text pill — 12/500 label, 14px
   folded-corner glyph, padding 0 8px 0 6px, radius 9999, transparent at rest, hover one step
   toward the text. Linear seats it beside the icon above the title; our one-row header trails
   it after the title. */
.document-template-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--document-body-text, var(--shell-text-primary, lch(19.588% 1.25 282)));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.document-template-pill svg {
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
}

/* The overlay anchor must hug the 24px pill (a block anchor's line box adds a descent pixel and
   pushes the popover to 5px); Linear's popover sits exactly 4px below the pill. */
.document-template-overlay .ui-floating-overlay__anchor {
    display: flex;
}

.document-template-pill:hover,
.document-template-pill:focus-visible,
.document-template-pill[aria-expanded="true"] {
    background: var(--shell-menu-item-hover, lch(95.883% 0.157 282));
    outline: none;
}

/* Popover: 175px, radius 12, 0.5px border, the light three-layer shadow, 6px list padding. */
.document-template-picker {
    width: 175px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--shell-menu-bg, var(--shell-bg-surface, lch(100% 0 282)));
    color: var(--shell-menu-text, var(--shell-text-primary));
    border: 0.5px solid var(--shell-menu-border, var(--shell-border, lch(91.9% 0 282)));
    box-shadow:
        lch(0 0 0 / 0.02) 0 6px 18px,
        lch(0 0 0 / 0.04) 0 3px 9px,
        lch(0 0 0 / 0.04) 0 1px 1px;
    overflow: hidden;
}

.document-template-picker__status {
    position: absolute;
    left: -99999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.document-template-picker__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

/* Rows: 32px, padding 0 18px 0 14px, 16px icon + 8px gap + 13/450 name; the hover plate is an
   8px-radius layer inset 6px from the row edges. */
.document-template-picker__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary, lch(20% 1 282)));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    text-align: left;
    cursor: default;
}

.document-template-picker__option::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
}

.document-template-picker__option:hover::before,
.document-template-picker__option:focus-visible::before {
    background: var(--shell-menu-item-hover, lch(95.883% 0.157 282));
}

.document-template-picker__option:focus-visible {
    outline: none;
}

.document-template-picker__icon,
.document-template-picker__name {
    position: relative;
}

.document-template-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary, lch(40% 1 282));
    flex-shrink: 0;
}

.document-template-picker__emoji {
    font-size: 14px;
    line-height: 1;
}

.document-template-picker__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rich-text diff view — the measured Linear change-explorer presentation, generic over any
   rich-text body + change record (document history, issue-description history, …).
   Measured spec: per-block wash lch(86.215 12.893 282.979) inset -4/-6 r3, contiguous blocks
   merge (top -12 bridges the 16px paragraph gap, rounding only at region ends); 1px side bar
   (2px on the nav-active region) flush 24px left of the text with a 16px bottom fade; added
   text tinted lch(30.88 25.332 285.561); removed = grey wash + struck-through hint text. */

.rich-text-diff__block {
    position: relative;
    scroll-margin: 80px;
}

.rich-text-diff__block + .rich-text-diff__block {
    margin-top: 16px;
}

.rich-text-diff__block .ui-form__rich-text-content p:empty {
    min-height: 1.5rem;
}

.rich-text-diff__block--added::after,
.rich-text-diff__block--removed::after {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    border-radius: 3px;
}

.rich-text-diff__block--added::after {
    background: var(--document-diff-added-bg, color-mix(in srgb, var(--shell-accent, lch(47.918% 59.303 288.421)) 14%, var(--shell-bg-surface, lch(100% 0 272))));
}

.rich-text-diff__block--removed::after {
    background: var(--document-diff-removed-bg, color-mix(in srgb, var(--shell-text-primary, lch(90% 1.2 272)) 4%, var(--shell-bg-surface, lch(100% 0 272))));
}

.rich-text-diff__block--added + .rich-text-diff__block--added::after,
.rich-text-diff__block--removed + .rich-text-diff__block--removed::after {
    top: -12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.rich-text-diff__block--added:has(+ .rich-text-diff__block--added)::after,
.rich-text-diff__block--removed:has(+ .rich-text-diff__block--removed)::after {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* The side bars: 1px strips flush at the pane's padding edge (24px left of the text), one
   continuous run per region with a 16px fade-out tail; the nav-active region doubles them. */
.rich-text-diff__block--added::before,
.rich-text-diff__block--removed::before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -24px;
    width: 1px;
}

.rich-text-diff__block--added::before {
    background: linear-gradient(
        to bottom,
        var(--document-diff-bar, color-mix(in srgb, var(--shell-accent, lch(47.918% 59.303 288.421)) 88%, var(--shell-bg-surface, lch(100% 0 272)))),
        var(--document-diff-bar, color-mix(in srgb, var(--shell-accent, lch(47.918% 59.303 288.421)) 88%, var(--shell-bg-surface, lch(100% 0 272)))) calc(100% - 16px),
        transparent);
}

.rich-text-diff__block--removed::before {
    background: linear-gradient(
        to bottom,
        var(--document-diff-removed-bar, var(--shell-text-secondary, lch(64.894% 2.106 272.695))),
        var(--document-diff-removed-bar, var(--shell-text-secondary, lch(64.894% 2.106 272.695))) calc(100% - 16px),
        transparent);
}

.rich-text-diff__block--added:has(+ .rich-text-diff__block--added)::before {
    background: var(--document-diff-bar, color-mix(in srgb, var(--shell-accent, lch(47.918% 59.303 288.421)) 88%, var(--shell-bg-surface, lch(100% 0 272))));
}

.rich-text-diff__block--removed:has(+ .rich-text-diff__block--removed)::before {
    background: var(--document-diff-removed-bar, var(--shell-text-secondary, lch(64.894% 2.106 272.695)));
}

.rich-text-diff__block--added + .rich-text-diff__block--added::before,
.rich-text-diff__block--removed + .rich-text-diff__block--removed::before {
    top: -12px;
}

.rich-text-diff__block--added.rich-text-diff__block--active::before,
.rich-text-diff__block--removed.rich-text-diff__block--active::before {
    width: 2px;
}

/* Text treatment. The host-scoped variants outrank pane typography overrides of equal
   specificity because this file loads after documents.css in the aggregate. */
.rich-text-diff__block--added .rich-text-diff__rich-text,
.rich-text-diff__block--added .rich-text-diff__rich-text p,
.document-history__content .rich-text-diff__block--added .rich-text-diff__rich-text p {
    color: var(--document-diff-added-text, var(--shell-accent, lch(47.918% 59.303 288.421)));
}

.rich-text-diff__block--removed .rich-text-diff__rich-text {
    text-decoration: line-through;
}

.rich-text-diff__block--removed .rich-text-diff__rich-text,
.rich-text-diff__block--removed .rich-text-diff__rich-text p,
.document-history__content .rich-text-diff__block--removed .rich-text-diff__rich-text p {
    color: var(--shell-menu-hint, var(--shell-text-secondary, lch(64.894% 2.106 272.695)));
}

/* Generic editor presence — measured off Linear's live collaboration (2026-08-31):
   caret = 2px bar in the participant colour; name flag floats at caret top −16/−1 — 16px tall,
   12/450, pad 0 4, radius 2 2 2 0 (square corner anchors to the caret), participant colour
   background with a light-tint text colour, fading out 0.4s after idle; selection = translucent
   rects in the participant colour at 38% alpha, radius 2. */

.rich-text-presence {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.rich-text-presence__selection {
    position: absolute;
    border-radius: 2px;
    background: color-mix(in srgb, var(--presence-color, lch(55% 60 180)) 38%, transparent);
}

.rich-text-presence__caret {
    position: absolute;
    width: 2px;
    background: var(--presence-color, lch(55% 60 180));
}

.rich-text-presence__flag {
    position: absolute;
    top: -16px;
    left: -1px;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 4px;
    border-radius: 2px 2px 2px 0;
    background: var(--presence-color, lch(55% 60 180));
    color: var(--presence-text-color, #fff);
    font-size: 0.75rem;
    font-weight: 450;
    white-space: nowrap;
    opacity: 0;
}

/* The flag shows when the participant moves, then fades away (Linear's autofade: 0.4s out). */
.rich-text-presence__flag--fresh {
    animation: rich-text-presence-flag 3s ease forwards;
}

@keyframes rich-text-presence-flag {
    0% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Issue-grid primitives ── */
.issue-priority-icon {
    display: inline-block;
    flex: none;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    vertical-align: middle;
}

.issue-priority-icon--urgent {
    color: var(--issue-priority-urgent, lch(66% 68 46));
}

.issue-status-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

.hexagon-progress-icon,
.pulse-disc-icon,
.diamond-progress-icon,
.dashed-ring-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

/* Shared bordered-pill base for the row chips (label, project, cycle, due date, relation). */
.issue-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px 0 7px;
    border: 0.5px solid var(--issue-chip-border, var(--shell-border, lch(86% 1.2 272 / 1)));
    border-radius: 9999px;
    font-size: 0.75rem;
    /* Chip labels rest on the SECONDARY text tier (measured on Linear in every theme);
       hover/menu-open promotes them to primary below. */
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    white-space: nowrap;
    flex: none;
}

.issue-chip > svg {
    flex: none;
}

.cycle-icon { flex: none; }
.cycle-icon--raised {
    --cycle-icon-faint: var(--app-theme-hover-text-faint, var(--app-theme-text-faint, currentColor));
    --cycle-icon-muted: var(--app-theme-hover-text-muted, var(--shell-text-secondary, currentColor));
}

.issue-cycle-chip__icon--upcoming { color: var(--cycle-icon-muted, var(--shell-text-secondary, lch(48% 1.5 272))); }
.issue-cycle-chip__icon--upcoming > circle { stroke: var(--cycle-icon-faint, var(--app-theme-text-faint, currentColor)); }
.issue-cycle-chip__icon--active { color: var(--issue-cycle-active, lch(52% 45 262)); }
.issue-cycle-chip__icon--active > .issue-cycle-chip__track { stroke: var(--cycle-icon-faint, var(--app-theme-text-faint, currentColor)); }
.issue-cycle-chip__icon--active > path { fill: var(--cycle-icon-muted, var(--shell-text-secondary, currentColor)); }
.issue-cycle-chip__icon--completed { color: var(--cycle-icon-muted, var(--shell-text-secondary, currentColor)); overflow: visible; }
.issue-cycle-chip__icon--completed > circle { stroke: var(--cycle-icon-faint, var(--app-theme-text-faint, currentColor)); }
.issue-cycle-chip__icon--completed > .cycle-icon__play { fill: var(--cycle-icon-faint, var(--app-theme-text-faint, currentColor)); }

.issue-due-chip__icon--normal { color: var(--shell-text-secondary, lch(48% 1.5 272)); }
.issue-due-chip__icon--soon { color: var(--issue-due-soon, lch(66% 80 48)); }
.issue-due-chip__icon--overdue { color: var(--issue-due-overdue, lch(58% 73 29)); }

/* Project chip — tinted isometric cube + name. */
.issue-project-chip__icon { flex: none; }
.issue-project-chip__name { color: inherit; }

/* Blocking relations — Linear's exact "blocked" octagon glyph; blocked-by red, blocking amber. */
.issue-relation-chip__icon { flex: none; }
/* Tint the GLYPH, not the chip: the count text must follow the normal chip text tiers
   (secondary at rest, primary on hover) while the stop icon keeps its red at all times. */
.issue-relation-chip--blocked-by .issue-relation-chip__icon { color: var(--issue-relation-blocked, lch(80% 80 29)); }
.issue-relation-chip--blocking .issue-relation-chip__icon { color: var(--issue-relation-blocking, lch(80% 80 29)); }

/* Labels — bordered stadium pill: coloured dot + name (measured Linear). */
.issue-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 8px;
    border: 0.5px solid var(--issue-chip-border, var(--shell-border, lch(86% 1.2 272 / 1)));
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    white-space: nowrap;
}

.issue-label-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.issue-label-chip--compact {
    gap: 0;
    padding: 0;
    border: 0;
    height: auto;
}

.issue-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* No overflow clip: a squeezed last pill must slide UNDER the next cluster chip
       (which paints above with its rounded edge), never get cut flat at the row box. */
    flex: 1;
}

.issue-label-row__chip {
    /* Label pills slide under their right neighbour when squeezed (Linear): the wrapper
       shrinks, the pill keeps its full rounded shape and the next pill paints over it. */
    flex: 0 1 auto;
    min-width: 12px;
    position: relative;
}

.issue-label-row__chip > * {
    flex: none;
}

.issue-label-row__chip:nth-child(1) { z-index: 1; }
.issue-label-row__chip:nth-child(2) { z-index: 2; }
.issue-label-row__chip:nth-child(3) { z-index: 3; }
.issue-label-row__chip:nth-child(4) { z-index: 4; }
.issue-label-row__chip:nth-child(5) { z-index: 5; }
.issue-label-row__chip:nth-child(6) { z-index: 6; }

/* Overflow pill: a cluster of the hidden labels' dots + "+N labels", bordered like a label. */
.issue-label-row__more {
    flex: none;
    position: relative;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 7px;
    border: 0.5px solid var(--issue-chip-border, var(--shell-border, lch(86% 1.2 272 / 1)));
    border-radius: 9999px;
    background: var(--issue-chip-bg, var(--shell-bg-surface, transparent));
    font-size: 0.75rem;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
}

.issue-label-row__more-dots {
    display: inline-flex;
    align-items: center;
}

.issue-label-row__more-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* Ring in the pill's own background so the overlap reads as a neat stack, not a clip. */
    box-shadow: 0 0 0 1.5px var(--issue-chip-bg, var(--shell-bg-surface, lch(100% 0 272)));
}

.issue-label-row__more-dot:not(:first-child) {
    margin-left: -3px;
}


.issue-label-row [hidden] {
    display: none !important;
}

/* ── Linear issue row (packed inline layout, composed from the primitives) ────────────────
   One flex line: title column grows, a gap spacer pushes the metadata region right, avatar +
   dates pinned at the end. 13px throughout (title 550, metadata muted 12px) to match Linear. */
.issue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-width: 0;
    font-size: 13px;
    line-height: normal;
}

.issue-row__lead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.issue-row__gap {
    flex: 0 0 8px;
}

.issue-row__code {
    flex: none;
    /* Fixed identifier slot so the status icons align in a column regardless of key length
       (Linear reserves a constant width per view). Apps can retune via the token. */
    width: var(--issue-row-code-width, 3.875rem);
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    font-weight: 450;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.issue-row__title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--shell-text-primary, lch(90% 1.2 272));
    font-weight: 500;
}

/* Keep property slots fixed when the title yields space to trailing metadata. */
.issue-row__lead > .ui-hover-card-trigger,
.issue-row__lead > .toggle-chip {
    flex-shrink: 0;
}

.issue-row__lead > .issue-row__title {
    margin-left: 0;
}

/* Custom ToggleChip content keeps the status glyph in the same slot as priority icons. */
.issue-row__lead .toggle-chip__button:has(> .issue-status-icon) {
    width: 16px;
    justify-content: center;
}

/* Linear's trailing chip cluster (measured live): it takes the row's free space and
   spreads chips (loose column alignment across rows), squeezes 1.5x faster than the title
   when tight — chips slide under its hidden overflow — and on hover reclaims space from
   the title (shrink 1.5 -> 0.3, animated). */
.issue-row__meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 1 1.5 auto;
    min-width: 150px;
    justify-content: flex-end;
    overflow: hidden;
    margin-right: 8px;
    transition: flex-shrink 0.25s cubic-bezier(0.38, 0.01, 0.33, 1);
}

/* Every trailing chip squeezes individually as space tightens, Linear's way: the chip
   KEEPS its full rounded shape and slides UNDER its right neighbour, which paints over it
   with its own opaque background — never a flat clipped edge. The wrapper shrinks; the
   chip overflows it and the ascending z-order does the tucking. */
.issue-row__meta > .issue-chip-trigger,
.issue-row__meta > .issue-row__labels {
    flex: 0 1 auto;
    min-width: 18px;
    position: relative;
}

.issue-row__meta > *:nth-child(1) { z-index: 1; }
.issue-row__meta > *:nth-child(2) { z-index: 2; }
.issue-row__meta > *:nth-child(3) { z-index: 3; }
.issue-row__meta > *:nth-child(4) { z-index: 4; }
.issue-row__meta > *:nth-child(5) { z-index: 5; }
.issue-row__meta > *:nth-child(6) { z-index: 6; }
.issue-row__meta > *:nth-child(7) { z-index: 7; }
.issue-row__meta > *:nth-child(8) { z-index: 8; }

.issue-row__meta:hover {
    flex-shrink: 0.3;
}

.issue-row__labels {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
}

/* The squeeze must reach the label row through the trigger wrappers, or the cluster clips
   at its own edge instead of collapsing the labels into the stacked pill. */
.issue-row__labels .issue-chip-trigger,
.issue-row__labels .issue-chip-trigger__button,
.issue-row__labels .toggle-chip,
.issue-row__labels .toggle-chip__button {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

/* Collapsed labels: Linear's stacked pill — the label-stack icon in the first label's
   colour plus a muted count (measured: radius 48, pad 0 8, 12px/450 count, 6px gap). */
.issue-label-row__stack {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--issue-chip-border, var(--shell-border, lch(24.236% 3.413 272.695)));
    border-radius: 48px;
    background: var(--issue-chip-bg, var(--shell-bg-surface, transparent));
    white-space: nowrap;
}


.issue-label-row__stack-icon {
    display: inline-flex;
    align-items: center;
}

.issue-label-row__stack-count {
    margin-left: 6px;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    font-size: 12px;
    font-weight: 450;
}

.issue-row__trail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: 2px;
}

.issue-row__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ui-avatar-bg, var(--shell-accent, lch(58% 45 262)));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 4px;
}
.issue-row__avatar--none {
    background: transparent;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
}

.issue-row__avatar-mark {
    flex: none;
    margin-right: 4px;
}


.issue-row__trail .issue-row__avatar,
.issue-row__trail .issue-row__avatar-mark {
    margin-right: 0;
}

.issue-row__date {
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    font-size: 12px;
    font-weight: 450;
    font-variant-numeric: tabular-nums;
    flex: none;
    width: 60px;
    text-align: right;
    white-space: nowrap;
}


/* ── Interactive chip trigger (Linear parity) ────────────────────────────────────────────
   The wrapper button is a reset shell: the chip inside keeps its chrome and gains the
   measured hover/menu-open fill. Chips carry an OPAQUE surface fill so they pop against the
   row hover/keyboard fills without restyling (Linear's rows behave exactly this way), and on
   selected rows they go transparent to the selection band while the border picks up the
   accent tint (all values measured off the live app). */
.issue-chip-trigger {
    position: relative;
    display: inline-flex;
    min-width: 0;
    flex: none;
}

.issue-chip-trigger__button {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: default;
}

.issue-chip-trigger__button:focus-visible {
    outline: none;
}


/* Icon-picker variant: priority/status glyphs keep their 16px layout box; the hover pill is a
   24px rounded square painted via padding + negative margin so row geometry never shifts. */
.issue-chip-trigger--icon .issue-chip-trigger__button {
    margin: -4px;
    padding: 4px;
    border-radius: 4px;
}

/* Leading icon triggers (priority / status / assignee avatar): measured on Linear these get
   NO hover fill — the only change is the muted priority glyph stepping up to the primary
   tier. Colored glyphs (urgent orange, status rings, avatars) do not change. */
.issue-chip-trigger--icon .issue-chip-trigger__button:hover,
.issue-chip-trigger--icon .issue-chip-trigger__button:focus-visible,
.issue-chip-trigger--icon.issue-chip-trigger--open .issue-chip-trigger__button {
    background: transparent;
}

.issue-chip-trigger--icon .issue-chip-trigger__button:hover .issue-priority-icon:not(.issue-priority-icon--urgent),
.issue-chip-trigger--icon .issue-chip-trigger__button:focus-visible .issue-priority-icon:not(.issue-priority-icon--urgent),
.issue-chip-trigger--icon.issue-chip-trigger--open .issue-chip-trigger__button .issue-priority-icon:not(.issue-priority-icon--urgent) {
    color: var(--shell-text-primary, lch(100% 0 272));
}

/* Same measured behaviour for the ToggleChip primitive's icon triggers: NO hover fill; only the
   muted priority glyph steps to the primary tier. Colored glyphs (urgent, status rings, avatars)
   do not change. */
.toggle-chip--brighten .toggle-chip__button:hover .issue-priority-icon:not(.issue-priority-icon--urgent),
.toggle-chip--brighten .toggle-chip__button:focus-visible .issue-priority-icon:not(.issue-priority-icon--urgent),
.toggle-chip--brighten.toggle-chip--open .toggle-chip__button .issue-priority-icon:not(.issue-priority-icon--urgent) {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.issue-chip,
.issue-label-chip,
.issue-label-row__more,
.progress-pill--bordered {
    background: var(--issue-chip-bg, var(--shell-bg-surface, transparent));
}

/* Selected metadata shares one text tier; explicit status, project and label colours stay
   on their glyphs. Chip hover/menu states retain their existing precedence. */
.grid-list__row--selected :is(.issue-row__code, .issue-row__date, .issue-row__estimate,
    .issue-chip, .issue-label-chip, .issue-label-row__more, .issue-label-row__stack-count,
    .progress-pill, .chip--naked) {
    color: var(--issue-row-selected-muted-text, var(--shell-text-secondary));
}

.grid-list__row--selected .issue-row__title {
    color: var(--issue-row-selected-text, var(--shell-text-primary));
}

/* Hover is per-chip, not per-trigger: a trigger wrapping a label CLUSTER must only light the
   chip under the pointer (Linear behaviour). Menu-open and keyboard focus light the cluster.
   Hover promotes the chip label to the primary text tier and (dark themes) brightens the
   hairline — all measured on real Linear. */
.issue-chip-trigger__button :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered):hover,
.issue-chip-trigger__button:focus-visible :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered),
.issue-chip-trigger--open :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered),
.toggle-chip__button :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered):hover,
.toggle-chip__button:focus-visible :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered),
.toggle-chip--open :is(.issue-chip, .issue-label-chip, .issue-label-row__more, .progress-pill--bordered) {
    background: var(--issue-chip-hover-bg, var(--shell-bg-active, lch(7.32% 0.85 272 / 1)));
    color: var(--shell-text-primary, lch(100% 0 272));
    border-color: var(--issue-chip-hover-border, var(--issue-chip-border, var(--shell-border, lch(27.12% 1.48 272 / 1))));
}

.grid-list__row--selected .issue-chip,
.grid-list__row--selected .issue-label-chip,
.grid-list__row--selected .issue-label-row__more,
.grid-list__row--selected .progress-pill--bordered {
    background: var(--issue-chip-selected-bg, transparent);
    border-color: var(--issue-chip-selected-border, color-mix(in srgb, var(--shell-accent, #5e6ad2) 25%, var(--issue-chip-border, var(--shell-border, lch(86% 1.2 272 / 1)))));
}

/* Hovered selected metadata shares the selection palette. Split project segments are
   independent hover targets and retain their existing behaviour until measured separately. */
.grid-list__row--selected :is(.issue-project-chip:not(.issue-project-chip--split),
    .issue-label-chip, .progress-pill--bordered, .issue-due-chip):hover {
    background: var(--issue-chip-selected-hover-bg, var(--issue-chip-hover-bg, var(--shell-bg-active)));
    border-color: var(--issue-chip-selected-hover-border, var(--issue-chip-hover-border, var(--issue-chip-border, var(--shell-border))));
    color: var(--issue-row-selected-text, var(--shell-text-primary));
}

/* Row chips match Linear exactly: 24px tall, 8px side padding, 12px/450 text, 6px dot gap. */
.issue-row .chip,
.issue-row .progress-pill__label {
    line-height: normal;
}

.issue-row .issue-chip,
.issue-row .issue-label-chip,
.issue-row .issue-label-row__more {
    height: 24px;
    font-size: 12px;
    font-weight: 450;
    padding: 0 8px;
    gap: 6px;
    border-radius: 9999px;
    border-width: 0.5px;
}

/* A 9px label dot is centred in the same 14px icon slot as other row chips. */
.issue-row .issue-label-chip:not(.issue-label-chip--compact) .issue-label-chip__dot {
    margin: 0 2.5px;
}

.issue-row .issue-label-chip:not(.issue-label-chip--compact) .issue-label-chip__name {
    margin-right: 1px;
}

.issue-row .issue-label-row__more > .ui-hover-card-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.issue-row .issue-label-row__more-dots {
    width: 14px;
    height: 14px;
    flex: none;
}

.issue-row .issue-label-row__more-dot {
    flex: none;
    margin-left: 0;
}

.issue-row .issue-label-row__more-dot:not([hidden]) ~ .issue-label-row__more-dot:not([hidden]) {
    margin-left: -4.5px;
}

.issue-row .issue-label-row__more-label {
    margin-right: 1px;
    white-space: nowrap;
}

/* Constrain the complete project/milestone chip; text shares that width naturally.
   The outer cluster wrapper may allocate less space while the chip tucks under neighbours. */
.issue-row .issue-project-chip {
    max-width: 290px;
}

.issue-row .issue-project-chip__name {
    margin-right: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.issue-row .issue-project-chip__segment,
.issue-row .issue-project-chip__segment .ui-hover-card-trigger {
    gap: 6px;
}

.issue-row .issue-project-chip--split {
    padding: 0;
    gap: 0;
}

.issue-row .issue-project-chip--split .issue-project-chip__segment {
    padding: 0 8px;
}

/* ── Issue hover cards (measured live from Linear's list rows) ─────────────────────────
   Shared chrome: 8px radius (tighter than menus), hairline menu border, a much lighter
   shadow than menus, no surface padding — each card lays out its own sections. */
.issue-hover-card .ui-hover-card__surface {
    padding: 0;
    border-radius: 8px;
    box-shadow: var(--shell-hover-card-shadow, lch(0% 0 0 / 0.3) 0 0.5px 1px 1px);
}

[data-app-theme="light"] .issue-hover-card .ui-hover-card__surface,
[data-app-theme="pure-light"] .issue-hover-card .ui-hover-card__surface {
    box-shadow: lch(0 0 0 / 0.08) 0 4px 12px 0, lch(0 0 0 / 0.04) 0 1px 3px 0;
}

.issue-hc {
    font-size: 12px;
    font-weight: 450;
    line-height: 1.25;
    color: var(--shell-menu-text, lch(90.895% 1.375 272));
}

.issue-hc__body {
    padding: 11px 14px 12px;
}

/* Board issue card content (IssueBoardCard): status + identifier + avatar, title, then
   priority and compact label chips. The BoardCard surface supplies bg/border/focus. */
.issue-board-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.issue-board-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.issue-board-card__identifier {
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    font-size: 12px;
    font-weight: 450;
    white-space: nowrap;
}

.issue-board-card__spacer {
    flex: 1 1 auto;
}

.issue-board-card__avatar--none {
    display: inline-flex;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    opacity: 0.6;
}

.issue-board-card__title {
    color: var(--shell-text-primary, lch(100% 0 272));
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.issue-board-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.issue-board-card__meta .issue-label-chip {
    height: 22px;
    font-size: 12px;
    font-weight: 450;
    padding: 0 8px;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 24px;
    overflow: hidden;
}

.issue-board-card__more {
    height: 22px;
    font-size: 12px;
    font-weight: 450;
    padding: 0 8px 0 7px;
}

.issue-board-card__more .issue-label-row__more-dot {
    display: inline-block;
}

/* Clickable cells inside hover cards (Linear: the "N labeled issues" count is a
   hoverable button that opens the labeled-issues view). */
.issue-hc__action {
    margin: -3px -6px;
    padding: 3px 6px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.issue-hc__action:hover {
    background: var(--shell-menu-item-hover, lch(17.22% 1.05 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
}

/* Interactive board card (chip-engine variant): meta chips wrap onto extra rows and
   the label chips wrap WITHIN the card (Linear board cards wrap labels rather than
   squeezing them like the list row). Chips re-anchor to the CARD surface (measured):
   rest fill = the card's rest bg (it stays put while the card hovers brighter around
   it), hairline and hover values shifted by the same elevation delta. */
.board-card__surface {
    --issue-chip-bg: var(--board-card-bg, lch(9.232% 0.85 272 / 1));
    --issue-chip-border: var(--board-card-chip-border, lch(20.032% 1.48 272 / 1));
    --issue-chip-hover-bg: var(--board-card-chip-hover-bg, lch(11.232% 1.35 272 / 1));
    --issue-chip-hover-border: var(--board-card-chip-hover-border, lch(32.032% 1.48 272 / 1));
}

/* Card chips are 24px with 8px side padding and 4px gaps (all measured). */
.issue-board-card--full .issue-chip,
.issue-board-card--full .issue-label-chip,
.issue-board-card--full .issue-label-row__more,
.issue-board-card--full .progress-pill--bordered {
    height: 24px;
    font-size: 12px;
    font-weight: 450;
    padding: 0 8px;
    gap: 6px;
    border-radius: 9999px;
    border-width: 0.5px;
}

.issue-board-card--full .issue-board-card__meta {
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
    overflow: visible;
}

.issue-board-card--full .issue-label-row {
    gap: 4px;
}

/* The labels region takes its own full-width line(s): block-level so the width is
   definite all the way down to the chip row — the trigger wrapper otherwise sizes
   to content and the percentage chain never constrains the chips. */
.issue-board-card--full .issue-board-card__labels {
    display: block;
    flex: 1 1 100%;
    min-width: 0;
}

.issue-board-card--full .issue-board-card__labels .issue-chip-trigger,
.issue-board-card--full .issue-board-card__labels .toggle-chip {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.issue-board-card--full .issue-board-card__labels .issue-chip-trigger__button,
.issue-board-card--full .issue-board-card__labels .toggle-chip__button {
    display: flex;
    width: 100%;
    min-width: 0;
}

.issue-board-card--full .issue-label-row {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: 6px;
    max-width: 100%;
}

/* Icon-only glyph chip (board-card priority — measured Linear: 24px round chip, 0.5px
   border, 14px glyph centred with 4.5px side padding). */
.issue-board-card--full .issue-chip--glyph {
    padding: 0 4.5px;
    justify-content: center;
    min-width: 24px;
    gap: 0;
}

/* The sub-issues pill drops from the row's 28px to card-chip scale (24px, measured). */
.issue-board-card--full .progress-pill--bordered {
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    gap: 6px;
}

/* Status sits WITH the title (Linear), not in the identifier row. */
.issue-board-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.issue-board-card__title-row .issue-chip-trigger--icon,
.issue-board-card__title-row .toggle-chip--brighten {
    margin-top: 1px;
    flex: 0 0 auto;
}

/* Created/Updated footer (Linear board card bottom line). */
.issue-board-card__dates {
    display: flex;
    gap: 12px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    font-size: 12px;
    font-weight: 450;
}

/* Split project|milestone pill (Linear when the issue has a milestone): one bordered
   pill, hairline divider, per-segment hover + truncation. */
.issue-project-chip__segment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.issue-project-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-project-chip--split {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.issue-project-chip--split .issue-project-chip__segment {
    align-self: stretch;
    padding: 0 6px 0 7px;
}

.issue-project-chip--split .issue-project-chip__segment--milestone {
    padding: 0 8px 0 6px;
}

/* Each segment's hover-card trigger wrapper lays out the icon + name pair. */
.issue-project-chip__segment .ui-hover-card-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.issue-project-chip--split .issue-project-chip__segment:hover {
    background: var(--issue-chip-hover-bg, var(--shell-bg-active, lch(7.32% 0.85 272 / 1)));
}

.issue-project-chip__divider {
    align-self: stretch;
    width: 0.5px;
    flex: 0 0 auto;
    background: var(--issue-chip-border, var(--shell-border, lch(27.12% 1.48 272 / 1)));
}

.issue-project-chip__milestone-icon {
    flex: 0 0 auto;
    color: var(--issue-milestone-color, lch(71% 55 100));
}

/* Sub-issues card (measured): a plain list of 24px rows — 14px status icon + 13px/500
   primary title, single line, no kicker/ids — inside ~10px vertical padding. */
.issue-hc--sub-list {
    padding: 10px 12px;
    max-width: 415px;
}

.issue-hc__sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    min-width: 0;
}

.issue-hc__sub-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-hc__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-top: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272));
    color: var(--shell-menu-hint, lch(48% 1.5 272));
    font-size: 11px;
}

.issue-hc__kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
    font-size: 13px;
    font-weight: 500;
}

.issue-hc__title {
    display: block;
    margin-top: 3px;
    color: var(--shell-menu-text-strong, var(--shell-text-primary, lch(95% 0.6 272)));
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

a.issue-hc__title:hover {
    text-decoration: underline;
}

.issue-hc__header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-menu-text-strong, var(--shell-text-primary, lch(95% 0.6 272)));
}

.issue-hc__desc {
    margin-top: 6px;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
    font-size: 12px;
    font-weight: 450;
}

.issue-hc__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 450;
}

.issue-hc__row:first-child {
    margin-top: 0;
}

.issue-hc__cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.issue-hc__cell--gap {
    margin-left: 12px;
}

.issue-hc__right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.issue-hc__muted {
    color: var(--shell-menu-hint, lch(48% 1.5 272));
}

.issue-hc__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.issue-hc__presence {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: lch(60% 64.37 141.95);
    flex: none;
    margin: 0 4px;
}

.issue-hc__chevron {
    display: inline-flex;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
}

.issue-hc__kbds {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.issue-hc__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272));
    border-radius: 4px;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
    font-family: var(--font-regular);
    font-size: 11px;
    font-weight: 400;
}

/* Assignee card: 32px avatar header + 24px-pitch info rows. */
.issue-hc__person {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
}

.issue-hc__person-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-menu-text-strong, var(--shell-text-primary, lch(95% 0.6 272)));
    text-decoration: none;
}

a.issue-hc__person-name:hover {
    text-decoration: underline;
}

.issue-hc__person-meta {
    margin-top: 2px;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
    font-size: 12px;
}

.issue-hc__info {
    padding: 4px 13px 12px;
}

.issue-hc__info .issue-hc__row {
    margin-top: 8px;
    font-weight: 500;
}

/* Due date card: one-line compact strip. */
.issue-hover-card--slim .ui-hover-card__surface {
    padding: 0;
}

.issue-hc--slim {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    font-size: 12px;
}

.issue-hc--slim .issue-hc__due-state {
    font-weight: 500;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
}

.issue-hc--slim .issue-hc__due-action {
    font-weight: 450;
    color: var(--shell-menu-hint, lch(48% 1.5 272));
}

/* Assignee avatar brightens and the status icon darkens on hover (Linear, list + board) — on
   both the examples trigger and the ToggleChip primitive. */
.issue-chip-trigger--icon:hover .issue-row__avatar-mark,
.issue-chip-trigger--icon:hover .issue-board-card__avatar,
.toggle-chip--brighten:hover .issue-row__avatar-mark,
.toggle-chip--brighten:hover .issue-board-card__avatar {
    filter: brightness(1.18);
}

.issue-chip-trigger--icon:hover .issue-status-icon,
.toggle-chip--brighten:hover .issue-status-icon {
    filter: brightness(0.82);
}

/* Links + time-in-status chips reuse the shared issue-chip look. */
.issue-links-chip,
.issue-time-chip,
.issue-estimate-chip {
    gap: 4px;
}

/* Row estimate: plain icon + number (not a chip). Muted at rest; on hover the whole thing
   steps to the primary text tier with NO background, exactly like the priority glyph. */
.issue-row__estimate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    white-space: nowrap;
}

.issue-chip-trigger--estimate .issue-chip-trigger__button:hover .issue-row__estimate,
.issue-chip-trigger--estimate .issue-chip-trigger__button:focus-visible .issue-row__estimate,
.issue-chip-trigger--estimate.issue-chip-trigger--open .issue-row__estimate {
    color: var(--shell-text-primary);
}

/* Sub-issues pill in rows/cards: the bordered chip (border + hover state kept), just sized
   down to the 24px / 12px chip standard — the default 28px pill was oversized. */
.issue-row .progress-pill--bordered,
.issue-board-card--full .progress-pill--bordered {
    height: 24px;
    padding: 0 8px 0 6px;
    gap: 6px;
    font-size: 0.75rem;
}

.issue-row .progress-pill--bordered {
    padding-left: 8px;
}

:where(.issue-row) .progress-pill--bordered {
    border-color: var(--issue-chip-border, var(--shell-border));
}

/* StatsTable: Linear insights-panel summary table (measured on the live insights sidebar,
   magic-blue, 2026-08-21). A CSS grid with content-sized columns that scrolls both ways
   inside its container; the header row is sticky to the top, the first (label) column is
   sticky to the left, hairlines are 0.5px, and hovering a row fills every cell in it —
   including the sticky label cell. */
.stats-table {
    position: relative;
    display: grid;
    overflow: auto;
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
}

.stats-table__row {
    display: contents;
}

.stats-table__cell {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    border-right: 0.5px solid var(--stats-table-separator, var(--stats-table-cell-border, lch(23.632% 1.48 272 / 1)));
    border-bottom: 0.5px solid var(--stats-table-hairline, var(--stats-table-header-border, lch(18.832% 1.48 272 / 1)));
}

.stats-table__cell:last-child {
    border-right: 0;
}

.stats-table__cell--header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--stats-table-header-bg, lch(13.058% 1.3 272 / 1));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    border-top: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    border-bottom: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
}

.stats-table__cell--label {
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 500;
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
    color: var(--stats-table-label-color, lch(100% 0 272 / 1));
}

.stats-table__cell--header.stats-table__cell--label {
    z-index: 3;
    font-weight: 500;
    background: var(--stats-table-header-bg, lch(13.058% 1.3 272 / 1));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.stats-table__row--highlighted .stats-table__cell {
    background: var(--stats-table-row-hover-bg, lch(14.265% 1.3 272 / 1));
}

.stats-table__row--body:hover .stats-table__cell {
    background: var(--stats-table-row-hover-bg, lch(14.265% 1.3 272 / 1));
}

.stats-table__cell--selectable {
    cursor: pointer;
}

.stats-table__sort-icon {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.stats-table__cell--header:hover .stats-table__sort-icon {
    opacity: 0.6;
}

.stats-table__cell--header.stats-table__cell--sorted .stats-table__sort-icon {
    opacity: 1;
}

/* Selection is a rounded 1px ACCENT ring, not a fill (measured from Linear's insights
   table): the row ring wraps the whole row with rounded outer corners — drawn as per-cell
   ::after segments because rows are display:contents — and the stat-cell ring is a rounded
   rect inset 2px inside the clicked cell. */
.stats-table__row--body.stats-table__row--selected .stats-table__cell {
    position: relative;
}

.stats-table__row--body.stats-table__row--selected .stats-table__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid var(--shell-accent, #5e6ad2);
    border-bottom: 1px solid var(--shell-accent, #5e6ad2);
    pointer-events: none;
}

.stats-table__row--body.stats-table__row--selected .stats-table__cell--label::after {
    border-left: 1px solid var(--shell-accent, #5e6ad2);
    border-radius: 6px 0 0 6px;
}

.stats-table__row--body.stats-table__row--selected .stats-table__cell:last-child::after {
    border-right: 1px solid var(--shell-accent, #5e6ad2);
    border-radius: 0 6px 6px 0;
}

.stats-table__cell--cell-selected {
    position: relative;
}

.stats-table__cell--cell-selected::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid var(--shell-accent, #5e6ad2);
    border-radius: 8px;
    pointer-events: none;
}

.stats-table__cell--header.stats-table__cell--col-selected,
.stats-table__cell--header.stats-table__cell--col-selected .stats-table__text {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-table__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.stats-table__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-table__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* StatsBarChart: Linear insights-panel bar chart (measured on the live insights sidebar,
   magic-blue, 2026-08-21, plain and stacked modes). Fixed 10px bars centred in even slots,
   dashed gridlines with a solid baseline, right-hand axis labels, an invisible full-height
   track behind each column that fades in at 50% on hover, and a 2px notch in the panel-bg
   colour capping every bar segment. The bottom 30px strip carries per-column labels. */
.stats-bar-chart {
    position: relative;
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
}

.stats-bar-chart__svg {
    display: block;
}

.stats-bar-chart__grid-line {
    stroke: var(--stats-chart-grid-line, lch(20.032% 1.48 272 / 1));
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.stats-bar-chart__grid-line--base {
    stroke-dasharray: none;
}

.stats-bar-chart__hit {
    fill: transparent;
}

.stats-bar-chart__track {
    fill: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.stats-bar-chart__col--highlighted .stats-bar-chart__track {
    opacity: 0.5;
}

.stats-bar-chart__col:hover .stats-bar-chart__track {
    opacity: 0.5;
}

.stats-bar-chart__bar {
    pointer-events: none;
}

.stats-bar-chart__bar--dimmed {
    opacity: 0.3;
}

.stats-bar-chart__notch {
    stroke: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
    stroke-width: 2;
    pointer-events: none;
}

.stats-bar-chart__axis {
    position: absolute;
    top: 0;
    /* Labels right-align 16px in from the content edge (measured on Linear 2026-08-25). */
    right: 16px;
    bottom: 30px;
    width: 33px;
    pointer-events: none;
}

.stats-bar-chart__axis-label {
    position: absolute;
    right: 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 16px;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    /* Formatted labels ("4.5 B") stay on one line; AutoAxisLabelWidth measures them whole. */
    white-space: nowrap;
}

.stats-bar-chart__labels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

.stats-bar-chart__label {
    position: absolute;
    top: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centered labels may breathe past their slot (Linear doesn't ellipsize these);
       horizontal mode re-clips below. */
    overflow: visible;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.stats-bar-chart__label--hovered {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-bar-chart__label-pill {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    border: 1px solid var(--stats-chart-grid-line, lch(20.032% 1.48 272 / 1));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.75rem;
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
}

.stats-bar-chart__label-text {
    /* Measured Linear fullscreen x-labels: 13px/450 on the header-text tier (39.176 light). */
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    white-space: nowrap;
    padding: 0 2px;
}

.stats-bar-chart__label-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.stats-bar-chart__tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    box-shadow: lch(0 0 0 / 0.1) 0px 4px 40px 0px, lch(0 0 0 / 0.125) 0px 3px 20px 0px, lch(0 0 0 / 0.15) 0px 1px 4px 0px;
    white-space: nowrap;
}

.stats-bar-chart__tooltip-title {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--stats-table-label-color, lch(100% 0 272 / 1));
    padding: 2px 0 4px;
}

.stats-bar-chart__tooltip-grid {
    display: grid;
    grid-template-columns: 6px auto auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding-bottom: 2px;
}

.stats-bar-chart__tooltip-grid--three {
    grid-template-columns: 6px auto auto;
}

.stats-bar-chart__tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 17px;
}

.stats-bar-chart__tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-bar-chart__tooltip-name {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.stats-bar-chart__tooltip-value {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    justify-self: end;
}

.stats-bar-chart__tooltip-share {
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    justify-self: end;
}

/* StatsPercentileChart: Linear's "Time in status" / "Issue age" insights chart (measured on
   the live sidebar + reference capture, magic-blue, 2026-08-21). A log-time strip plot:
   dashed gridlines at duration ticks with right-hand labels, per-issue 5px dots in the
   bucket colour dimmed ~62% toward the panel fill, stepped aggregate lines (P50/P75/P95)
   with 20px ramps between bands and pill badges at the right edge, a subtle full-height
   band highlight for the hovered bucket, and a legend strip whose hovered chip gets the
   same boxed pill treatment as the bar chart's labels. */
.stats-percentile-chart {
    position: relative;
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
}

.stats-percentile-chart__svg {
    display: block;
}

.stats-percentile-chart__band {
    fill: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    opacity: 0.3;
}

.stats-percentile-chart__grid-line {
    stroke: var(--stats-chart-grid-line, lch(20.032% 1.48 272 / 1));
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.stats-percentile-chart__grid-line--base {
    stroke-dasharray: none;
}

.stats-percentile-chart__dots {
    position: absolute;
    top: 0;
    left: 0;
    right: 35px;
    bottom: 30px;
    pointer-events: none;
}

.stats-percentile-chart__dot-slot {
    position: absolute;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.stats-percentile-chart__dot-slot .ui-hover-card-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.stats-percentile-chart__dot-slot:hover {
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
    border-radius: 50%;
}

.stats-percentile-chart__dot-slot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1.5px solid var(--stats-table-label-color, lch(100% 0 272 / 1));
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.stats-percentile-chart__dot-slot:hover::after {
    opacity: 1;
}

.stats-percentile-chart__dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.stats-percentile-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    pointer-events: none;
}

.stats-percentile-chart__hit {
    fill: transparent;
}

.stats-percentile-chart__axis {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 30px;
    width: 33px;
    pointer-events: none;
}

.stats-percentile-chart__axis-label {
    position: absolute;
    right: 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 16px;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.stats-percentile-chart__badges {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 30px;
    pointer-events: none;
}

.stats-percentile-chart__badge {
    position: absolute;
    right: 0;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    border: 1px solid var(--stats-chart-grid-line, lch(20.032% 1.48 272 / 1));
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-size: 0.75rem;
    line-height: 16px;
    white-space: nowrap;
}

.stats-percentile-chart__line--dimmed {
    opacity: 0.25;
}

.stats-percentile-chart__badge--dimmed {
    opacity: 0.35;
}

.stats-percentile-chart__value-chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stats-percentile-chart__value-chip {
    position: absolute;
    transform: translateX(-100%);
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.stats-percentile-chart__value-chip-label {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
    margin-right: 5px;
}

.stats-percentile-chart__legend {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

.stats-percentile-chart__legend-item {
    position: absolute;
    top: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.stats-percentile-chart__legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-percentile-chart__legend-item--hovered .stats-percentile-chart__legend-chip {
    background: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    border-color: var(--stats-chart-grid-line, lch(20.032% 1.48 272 / 1));
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-percentile-chart__legend-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.stats-percentile-chart__legend-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== chips.css (generic chip primitives) ===== */
/* Generic chip primitives — Chip (visual) + ToggleChip (interactive). No domain knowledge:
   domain chips (status, priority, estimate, project, …) compose these with parameters. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1;
    color: var(--shell-text-secondary);
}

/* Pill: bordered surface (Linear row/board chip — 24px, 8px pad, pill radius). */
.chip--pill {
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--chip-border, var(--issue-chip-border, var(--shell-border)));
    border-radius: 48px;
    background: var(--chip-bg, var(--issue-chip-bg, var(--shell-bg-surface, transparent)));
    color: var(--shell-text-primary);
}

/* Naked: no surface — leading glyph + label/count inline (e.g. estimate on a list row). */
.chip--naked {
    color: var(--shell-text-secondary);
}

/* Cell: borderless grid-cell pill — transparent until hover paints the row-hover fill
   (Linear's projects-grid meta cells: 28px tall, 16px glyph). Measured 2026-09-03 on Linear's
   projects list and search rows: VALUE chips (lead, progress, target date, status, target) are
   12px/450 on the primary-ish tier; only the health chip ("No updates") keeps 12px/500 on the
   secondary tier — that's Muted. */
.chip--cell {
    height: 28px;
    padding: 0 6px;
    border-radius: 9999px;
    gap: 8px;
    color: var(--chip-cell-label-color, var(--grid-list-text-primary, var(--shell-text-primary)));
    font-weight: 450;
}

.chip--cell.chip--muted {
    color: var(--grid-list-text-secondary, var(--shell-text-secondary));
    font-weight: 500;
}

.chip--cell:not(:has(.chip__label)) {
    justify-content: center;
    min-width: 28px;
}

/* Raised: Linear's modal property chip (measured on the new-issue modal) — 24px full pill on a
   modal/card surface, 12px/500 label that STAYS on the secondary tier on hover. The hairline
   "border" is not a border: it's a ring + soft elevation painted on ::after (0.088 alpha resting,
   0.147 on hover), sharing the --shell-control-raised-* family with the raised buttons. */
.chip--raised {
    position: relative;
    height: 24px;
    padding: 0 8px 0 6px;
    gap: 4px;
    border-radius: 9999px;
    background: var(--chip-raised-bg, var(--shell-menu-bg, var(--shell-bg-surface, transparent)));
    color: var(--shell-text-secondary);
    font-weight: var(--chip-raised-font-weight, 500);
    line-height: var(--chip-raised-line-height, 1);
    border: var(--chip-raised-border, 0);
    box-sizing: border-box;
}

.chip--raised.chip--value-set > .chip__label {
    color: var(--chip-raised-value-color, inherit);
}

.chip--raised.chip--value-empty > .chip__label {
    color: var(--chip-raised-placeholder-color, inherit);
}

.chip--raised::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

/* Label-less raised chip (the "…" more chip): a 24px round hit target. */
.chip--raised:not(:has(.chip__label)) {
    justify-content: center;
    min-width: 24px;
    padding: 0 2px;
}

/* Raised hover: fill one step + ring strengthens; the label does NOT promote to primary
   (measured — Linear keeps the muted tier under the pointer). */
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:hover .chip--raised,
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:focus-visible .chip--raised,
.toggle-chip--open:not(.toggle-chip--brighten) .chip--raised {
    background: var(--chip-raised-hover-bg, var(--shell-control-raised-hover-bg, var(--shell-bg-active)));
}

.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:hover .chip--raised::after,
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:focus-visible .chip--raised::after,
.toggle-chip--open:not(.toggle-chip--brighten) .chip--raised::after {
    box-shadow: var(--shell-control-raised-hover-shadow, lch(0 0 0 / 0.147) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

/* Muted trailing hint after the label ("· 12d"): 70% of the chip colour — Linear's measured
   health-age suffix (lch(… / 0.7)). */
.chip__hint {
    flex: 0 0 auto;
    white-space: pre;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

/* The cell hover fill is a currentColor mix at Linear's measured 12.5% alpha, so it stacks on
   the row hover AND takes the chip's colour: a coloured chip (health) hovers with a tinted
   fill, a neutral chip with a grey one. */
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:hover .chip--cell,
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:focus-visible .chip--cell,
.toggle-chip--open:not(.toggle-chip--brighten) .chip--cell {
    background: var(--chip-cell-hover-bg, color-mix(in srgb, currentColor 12.5%, transparent));
    color: var(--grid-list-text-primary, var(--shell-text-primary));
}

/* Icon-only: a single glyph, no label (priority / status triggers). */
.chip--icon-only {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.chip__leading {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.chip__avatar {
    flex: 0 0 auto;
}

.chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.chip__count-icon {
    display: inline-flex;
    align-items: center;
}

/* ── ToggleChip: the interactive wrapper (button/anchor + picker + hover-card) ── */
.toggle-chip {
    position: relative;
    display: inline-flex;
    min-width: 0;
    flex: none;
}

.toggle-chip__button {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: default;
}

.toggle-chip__button:focus-visible {
    outline: none;
}

/* Fill hover (pill chips): paint a fill + promote the label to the primary text tier. */
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:hover .chip--pill,
.toggle-chip:not(.toggle-chip--brighten) .toggle-chip__button:focus-visible .chip--pill,
.toggle-chip--open:not(.toggle-chip--brighten) .chip--pill {
    background: var(--chip-hover-bg, var(--issue-chip-hover-bg, var(--shell-bg-active)));
    color: var(--shell-text-primary);
    border-color: var(--chip-hover-border, var(--issue-chip-hover-border, var(--shell-border)));
}

/* Brighten hover (icon-only / naked): no fill — the glyph + text step to the primary tier. */
.toggle-chip--brighten .toggle-chip__button:hover .chip,
.toggle-chip--brighten .toggle-chip__button:focus-visible .chip,
.toggle-chip--brighten.toggle-chip--open .chip {
    color: var(--shell-text-primary);
}

/* Icon-only hover box: a 24px rounded-square hit target painted with padding + negative margin
   so surrounding geometry never shifts. */
.toggle-chip .chip--icon-only {
    margin: -4px;
    padding: 4px;
    border-radius: 4px;
}

/* ── ChipCluster: the squeeze/z-tuck metadata row ── */
.chip-cluster {
    display: inline-flex;
    align-items: center;
}

/* Zero-specificity defaults so a caller's cluster class (e.g. the row meta, gap 3 /
   min-width 150) can re-tune them regardless of stylesheet order. */
:where(.chip-cluster) {
    gap: 8px;
    min-width: 0;
}

/* Each chip squeezes individually and slides under its right neighbour as space tightens;
   the ascending z-order does the tucking (the neighbour's opaque surface paints over it). */
.chip-cluster > * {
    flex: 0 1 auto;
    min-width: 18px;
    position: relative;
}

/* Direct toggle-chip children must out-rank the base .toggle-chip { flex: none } or the
   squeeze never reaches them (mirrors .issue-row__meta > .issue-chip-trigger). */
.chip-cluster > .toggle-chip {
    flex: 0 1 auto;
    min-width: 18px;
}

/* Linear keeps the final due-date badge at its full width while earlier badges tuck.
   Opt in for clusters whose final item needs its complete visible hit target. */
.chip-cluster.chip-cluster--preserve-last-width > :nth-last-child(1 of :not(:where(.chip-cluster__spacer))) {
    flex-shrink: 0.000001;
}

.chip-cluster > *:nth-child(1) { z-index: 1; }
.chip-cluster > *:nth-child(2) { z-index: 2; }
.chip-cluster > *:nth-child(3) { z-index: 3; }
.chip-cluster > *:nth-child(4) { z-index: 4; }
.chip-cluster > *:nth-child(5) { z-index: 5; }
.chip-cluster > *:nth-child(6) { z-index: 6; }
.chip-cluster > *:nth-child(7) { z-index: 7; }
.chip-cluster > *:nth-child(8) { z-index: 8; }

.chip-cluster:hover {
    flex-shrink: 0.3;
}

/* Opt-in semantic allocation. A label group can contain several badges in one DOM
   wrapper, so the caller supplies the count rather than deriving it from child nodes. */
.chip-cluster.chip-cluster--counted {
    flex: 1 1.5 auto;
    min-width: 180px;
}

.chip-cluster.chip-cluster--counted[data-item-count="0"] { min-width: 0; }
.chip-cluster.chip-cluster--counted[data-item-count="2"] { min-width: 90px; }
.chip-cluster.chip-cluster--counted[data-item-count="3"] { min-width: 120px; }
.chip-cluster.chip-cluster--counted[data-item-count="4"] { min-width: 150px; }

.chip-cluster.chip-cluster--counted[data-item-count] > * { min-width: 0; }
.chip-cluster.chip-cluster--counted:hover { flex-shrink: 0.3; }

.chip-cluster > .chip-cluster__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* A sole badge keeps its intrinsic width, including while the cluster is hovered. */
.chip-cluster.chip-cluster--counted[data-item-count="1"] {
    flex-shrink: 0;
    min-width: min-content;
}

.chip-cluster.chip-cluster--counted[data-item-count="1"] > * { flex-shrink: 0; }

/* ===== chips.css split segment ===== */
/* ── SplitToggleChip: two independently-actionable segments + hairline divider ── */
.split-toggle-chip__segment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.split-toggle-chip--split {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.split-toggle-chip--split .split-toggle-chip__segment {
    align-self: stretch;
    padding: 0 6px 0 7px;
}

.split-toggle-chip--split .split-toggle-chip__segment--end {
    padding: 0 8px 0 6px;
}

.split-toggle-chip__divider {
    align-self: stretch;
    width: 0.5px;
    background: var(--chip-border, var(--issue-chip-border, var(--shell-border)));
    flex: 0 0 auto;
}

.split-toggle-chip__segment .ui-hover-card-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.split-toggle-chip--split .split-toggle-chip__segment:hover {
    background: var(--chip-hover-bg, var(--issue-chip-hover-bg, var(--shell-bg-active)));
}

/* Timeline primitives: Linear's cycles-list scaffold (measured on the live team cycles
   list, classic-dark, 2026-08-22). A 126px left gutter carries a 1px vertical rail at
   x=73; each entry's marker (right-aligned two-line date + 9px dot centred on the rail)
   straddles the entry's BOTTOM edge, marking the boundary to the next entry. Rows are
   70px links with the description inline after the title; notice rows are 48px. */
.timeline-list {
    position: relative;
}

.timeline-entry {
    position: relative;
    display: flex;
}

.timeline-entry__gutter {
    position: relative;
    flex: 0 0 126px;
}

.timeline-entry__gutter::before {
    content: "";
    position: absolute;
    left: 73px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--timeline-rail, lch(13.4% 1.38 272 / 1));
}

.timeline-entry:last-child .timeline-entry__gutter::before {
    bottom: 0;
}

.timeline-entry--active-rail .timeline-entry__gutter::before {
    background: var(--shell-accent, #5e6ad2);
}

.timeline-entry__date {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 63px;
    padding-right: 12px;
    box-sizing: border-box;
    transform: translateY(50%);
    z-index: 1;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 14.5px;
    color: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
}

.timeline-entry__dot {
    position: absolute;
    left: 69px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 1;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
    background: var(--shell-bg-surface, lch(5.52% 0.4 272 / 1));
}

.timeline-entry__dot--filled {
    background: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
}

.timeline-entry__dot--accent {
    border-color: var(--shell-accent, #5e6ad2);
    background: var(--shell-accent, #5e6ad2);
}

.timeline-entry__content {
    flex: 1;
    min-width: 0;
}

.timeline-list--divided .timeline-entry__content {
    border-bottom: 1px solid var(--timeline-rail, lch(13.4% 1.38 272 / 1));
}

.timeline-list--divided .timeline-entry:last-child .timeline-entry__content {
    border-bottom: none;
}

.timeline-row {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Hover: Linear fills the ENTIRE entry — gutter included — with a rounded band; the
   rail, marker and divider render on top of it. */
.timeline-entry:has(.timeline-row):hover {
    background: var(--grid-list-row-hover-bg, lch(9.345% 0.85 272 / 1));
    border-radius: 6px;
}

.timeline-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.timeline-row__leading {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    margin-right: 8px;
    color: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
}

.timeline-row__title {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--timeline-title-color, lch(90.826% 1.425 272 / 1));
}

.timeline-row__description {
    margin-left: 16px;
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-row__trailing {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.timeline-row__menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--grid-list-text-secondary, lch(61.803% 1.2 272 / 1));
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.timeline-entry:hover .timeline-row__menu-button,
.timeline-row__menu-button:focus-visible,
.timeline-row__menu-button[aria-expanded="true"] {
    opacity: 1;
}

.timeline-row__menu-button:hover {
    background: var(--panel-list-item-hover-bg, lch(17.22% 1.05 272 / 1));
}

.timeline-notice {
    display: flex;
    align-items: center;
    height: 48px;
    gap: 16px;
}

.timeline-notice__icon {
    display: inline-flex;
    color: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
}

.timeline-notice__text {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--grid-list-text-secondary, lch(61.803% 1.2 272 / 1));
}

.progress-ring {
    flex: 0 0 auto;
}

.progress-ring__track {
    stroke: var(--timeline-rail, lch(13.4% 1.38 272 / 1));
}

/* Status chip: quiet flat fill, unusually tight 2px radius (measured). */
.status-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    background: var(--status-chip-bg, lch(7.52% 0.75 272 / 1));
    color: var(--status-chip-color, lch(61.803% 1.2 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 16px;
    white-space: nowrap;
}

/* Inline stat: bright value + muted unit ("64% of capacity", "58 scope"). */
.inline-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.inline-stat__value {
    font-weight: 500;
    color: var(--grid-list-group-header-color, lch(90.826% 1.425 272 / 1));
}

.inline-stat__unit {
    font-weight: 450;
    color: var(--grid-list-text-secondary, lch(61.803% 1.2 272 / 1));
}

/* ── Grid search (Linear "Find in view", measured) ─────────────────────────────
   160×28 input, 8px radius, hairline border, 13px/500; magnifier left, Clear ×
   right (text only). Entrance: fade + 8px slide-down, ~200ms strong ease-out;
   exit is instant (no animation), per the live capture. */
.grid-search {
    /* Floats OVER the title bar's top-right corner (measured Linear), covering whatever
       sits beneath — never inline in the actions flow. Centered in the 44px row via
       margin so transform stays free for the entrance animation. */
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 30;
    display: flex;
    align-items: center;
    width: 160px;
    height: 28px;
    margin-top: -14px;
    flex: none;
    animation: grid-search-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--grid-search-bg, var(--shell-menu-bg, lch(100% 0 272)));
    border-radius: 8px;
}

@keyframes grid-search-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grid-search__input {
    width: 100%;
    height: 28px;
    padding: 6px 25px 6px 32px;
    border: 0.5px solid var(--grid-search-border, var(--shell-menu-border, lch(86% 1.2 272 / 1)));
    border-radius: 8px;
    background: var(--grid-search-bg, var(--shell-menu-bg, lch(100% 0 272)));
    color: var(--shell-text-primary, lch(19% 1.6 272));
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    outline: none;
    transition: border-color 0.15s ease;
}

.grid-search__input::placeholder {
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    font-weight: 500;
}

.grid-search__input:focus {
    border-color: var(--grid-search-border-focus, var(--shell-accent, #5e6ad2));
}

.grid-search__icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    pointer-events: none;
}

.grid-search__clear {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary, lch(48% 1.5 272));
    cursor: pointer;
}

.grid-search__clear:hover {
    color: var(--shell-text-primary, lch(19% 1.6 272));
}



/* StatsLineChart + BurnUpChart: Linear's cycle burn-up chart (measured from James's
   screen recording, magic-blue, 2026-08-22). Clean plot with NO gridlines: hatched
   weekend bands (45° 1px lines on a 5px pitch), 2px series lines (projection dotted,
   completed carries a translucent area fill and both progress lines end in 4px dots),
   a short accent "today" bar rising from the baseline, a dashed hover scrubber that
   snaps to days, and a snapping date chip below the axis. */
.stats-line-chart {
    position: relative;
}

.stats-line-chart__svg {
    display: block;
    overflow: visible;
}

.stats-line-chart__hatch-line {
    stroke: var(--timeline-rail, lch(13.4% 1.38 272 / 1));
    stroke-width: 1;
}

.stats-line-chart__band {
    opacity: 0.6;
}

.stats-line-chart__area {
    opacity: 0.22;
    pointer-events: none;
}

.stats-line-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

.stats-line-chart__line--dashed {
    stroke-dasharray: 2 4;
    stroke-width: 1.5;
    opacity: 0.7;
}

.stats-line-chart__baseline {
    stroke: var(--timeline-rail, lch(13.4% 1.38 272 / 1));
    stroke-width: 1;
    pointer-events: none;
}

.stats-line-chart__axis-tick {
    stroke: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
    stroke-width: 1;
    opacity: 0.6;
    pointer-events: none;
}

.stats-line-chart__today {
    stroke: var(--shell-accent, #5e6ad2);
    stroke-width: 3;
    stroke-linecap: round;
    pointer-events: none;
}

.stats-line-chart__scrubber {
    stroke: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.stats-line-chart__end-dot {
    pointer-events: none;
}

.stats-line-chart__hit {
    fill: transparent;
}

.stats-line-chart__axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    pointer-events: none;
}

.stats-line-chart__axis-label {
    position: absolute;
    top: 7px;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--timeline-marker-color, lch(39.003% 1.2 272 / 1));
    white-space: nowrap;
}

.stats-line-chart__axis-label:first-child {
    transform: none;
}

.stats-line-chart__hover-chip {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    white-space: nowrap;
}

.stats-line-chart__hover-chip-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    border-left: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

/* Generic chart legend (measured on the cycle burn-up): divider-separated 44px rows of
   swatch + name + right-aligned value + optional suffix; callers recompute rows to follow
   chart hover. */
.stats-chart-legend {
    display: flex;
    flex-direction: column;
}

.stats-chart-legend__row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    border-bottom: 1px solid var(--timeline-rail, lch(13.4% 1.38 272 / 1));
    font-size: 0.8125rem;
}

.stats-chart-legend__row:last-child {
    border-bottom: none;
}

.stats-chart-legend__swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.stats-chart-legend__name {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-weight: 450;
}

.stats-chart-legend__value {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-chart-legend__suffix {
    font-weight: 450;
    color: var(--grid-list-text-secondary, lch(61.803% 1.2 272 / 1));
}

.stats-chart-legend__suffix--alert {
    color: lch(55% 70 30);
}

/* Donut in the stats-family language: square-cut arcs with notch gaps (the bar-segment
   treatment applied radially), dim-others emphasis, shared tooltip anatomy, centre stat
   following the emphasized segment. */
.stats-donut-chart {
    position: relative;
    flex: 0 0 auto;
}

.stats-donut-chart svg {
    overflow: visible;
    display: block;
}

.stats-donut-chart__arc {
    fill: none;
    stroke-linecap: butt;
    cursor: pointer;
    pointer-events: stroke;
    transition: opacity 0.12s ease, stroke-width 0.12s ease;
}

.stats-donut-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
}

.stats-donut-chart__center-value {
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-donut-chart__center-label {
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--grid-list-text-secondary, lch(61.803% 1.2 272 / 1));
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-donut-chart__tooltip {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    box-shadow: lch(0 0 0 / 0.1) 0px 4px 40px 0px, lch(0 0 0 / 0.125) 0px 3px 20px 0px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
}

.stats-donut-chart__tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.stats-donut-chart__tooltip-name {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
}

.stats-donut-chart__tooltip-value {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-weight: 500;
}

.stats-donut-chart__tooltip-share {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
}

/* Activity event link segments (measured Linear): the relative time and member names are
   real links — resting on the secondary tier, promoted to primary on hover, no underline.
   The __copy qualifier keeps these ahead of the generic `.activity-event__copy a` link tier,
   which would otherwise force the primary colour and 450 weight onto them. */
.activity-event__separator {
    font-weight: 600;
}

a.activity-event__time,
.activity-event__copy a.activity-event__time {
    color: var(--activity-event-text);
    font-weight: 450;
    text-decoration: none;
}

a.activity-event__time:hover,
.activity-event__copy a.activity-event__time:hover {
    color: var(--shell-text-primary, lch(19% 1.6 272));
    text-decoration: none;
}

.activity-event__member,
.activity-event__copy a.activity-event__member {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.activity-event__member:hover,
.activity-event__copy a.activity-event__member:hover {
    color: var(--shell-text-primary, lch(19% 1.6 272));
    text-decoration: none;
}

a.activity-event__icon {
    text-decoration: none;
}

/* ParentIssueChip: Linear's parent-reference row 8px under the issue title. Muted 13px/450
   verb, a hover-fill link chip (radius 8, pad 5px 4px, gap 4) with status icon + muted key +
   13px/500 primary title, then the bordered progress pill. Row gap is 2px — the link's own
   4px side padding makes up the visual spacing. */
.parent-issue-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 26px;
    margin: 8px 0 34px;
}

.parent-issue-chip__label {
    color: var(--shell-text-secondary);
    font-size: 13px;
    font-weight: 450;
    line-height: 16px;
    white-space: nowrap;
}

.parent-issue-chip__link {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 5px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.parent-issue-chip__link:hover {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover));
}

.parent-issue-chip__icon {
    flex: none;
    color: var(--parent-issue-chip-icon-color, var(--shell-text-secondary));
}

.parent-issue-chip__key {
    color: var(--shell-text-secondary);
    font-size: 13px;
    font-weight: 450;
    line-height: 16px;
    white-space: nowrap;
}

.parent-issue-chip__title {
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* This surface's pill is one notch tighter than the 28px grid chrome (measured 26px, 0 8px). */
.parent-issue-chip .progress-pill--bordered {
    height: 26px;
    min-height: 26px;
    padding: 0 8px;
}

/* Calendar heatmap in the stats-family language: square quiet-fill cells stepped from a
   single colour, hairline hover ring, 1px accent selection ring (the family's selection
   treatment), shared tooltip-card anatomy, muted 12px month/weekday labels. */
.stats-heatmap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
}

.stats-heatmap__months {
    display: grid;
    grid-auto-flow: column;
    gap: var(--stats-heatmap-gap, 3px);
    height: 20px;
    margin-left: 30px;
}

.stats-heatmap__month {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
}

.stats-heatmap__body {
    display: flex;
}

.stats-heatmap__weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--stats-heatmap-cell, 10px));
    gap: var(--stats-heatmap-gap, 3px);
    width: 30px;
    flex: 0 0 auto;
}

.stats-heatmap__weekday {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
    line-height: var(--stats-heatmap-cell, 10px);
}

.stats-heatmap__grid {
    display: grid;
    grid-template-rows: repeat(7, var(--stats-heatmap-cell, 10px));
    gap: var(--stats-heatmap-gap, 3px);
}

.stats-heatmap__cell {
    width: var(--stats-heatmap-cell, 10px);
    height: var(--stats-heatmap-cell, 10px);
    border-radius: 0;
    background: var(--stats-table-row-hover-bg, lch(24.567% 1.475 271.271 / 1));
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.stats-heatmap__cell--padding {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

.stats-heatmap__cell--hovered {
    box-shadow: inset 0 0 0 1px var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
}

.stats-heatmap__cell--selected {
    outline: 1px solid var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1));
    outline-offset: 1px;
}

.stats-heatmap__tooltip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -100%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    box-shadow: lch(0 0 0 / 0.1) 0px 4px 40px 0px, lch(0 0 0 / 0.125) 0px 3px 20px 0px;
    white-space: nowrap;
    pointer-events: none;
}

.stats-heatmap__tooltip-value {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-weight: 500;
}

.stats-heatmap__tooltip-date {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
}

/* Strip chart in the stats-family language: labelled rows of equal per-period cells
   (good / warning / bad / no data), muted 12px summary and axis labels, the shared
   tooltip-card anatomy, and the family hover — the hovered cell stays full strength while
   the rest of its row fades. */
.stats-strip-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
    font-size: 0.75rem;
}

.stats-strip-chart__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stats-strip-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.stats-strip-chart__label {
    overflow: hidden;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-strip-chart__summary {
    flex: 0 0 auto;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
    font-variant-numeric: tabular-nums;
}

.stats-strip-chart__strip {
    position: relative;
    display: flex;
    gap: var(--stats-strip-gap, 2px);
    height: var(--stats-strip-cell-height, 24px);
}

.stats-strip-chart__cell {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 1px;
    background: var(--stats-strip-empty, var(--stats-table-row-hover-bg, lch(24.567% 1.475 271.271 / 1)));
    transition: opacity 0.12s ease;
}

.stats-strip-chart__cell--good,
.stats-strip-chart__tooltip-dot--good {
    background: var(--stats-strip-good, #4cb782);
}

.stats-strip-chart__cell--warning,
.stats-strip-chart__tooltip-dot--warning {
    background: var(--stats-strip-warning, #f2c94c);
}

.stats-strip-chart__cell--bad,
.stats-strip-chart__tooltip-dot--bad {
    background: var(--stats-strip-bad, var(--status-red-text, #eb5757));
}

.stats-strip-chart__tooltip-dot--none {
    background: var(--stats-strip-empty, var(--stats-table-row-hover-bg, lch(24.567% 1.475 271.271 / 1)));
}

/* Family hover: the row fades so the hovered period reads at full strength. */
.stats-strip-chart__strip--hovered .stats-strip-chart__cell:not(.stats-strip-chart__cell--hovered) {
    opacity: 0.45;
}

.stats-strip-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: -6px;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.6875rem;
    font-weight: 450;
}

/* Tooltip card: the heatmap's anatomy, sitting 6px above the strip. */
.stats-strip-chart__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    z-index: 5;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--stats-chart-tooltip-bg, lch(22.957% 1.6 272 / 1));
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    box-shadow: lch(0 0 0 / 0.1) 0px 4px 40px 0px, lch(0 0 0 / 0.125) 0px 3px 20px 0px;
    white-space: nowrap;
    pointer-events: none;
}

.stats-strip-chart__tooltip--start {
    transform: none;
}

.stats-strip-chart__tooltip--end {
    transform: translateX(-100%);
}

.stats-strip-chart__tooltip-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.stats-strip-chart__tooltip-name {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-weight: 450;
}

.stats-strip-chart__tooltip-value {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.stats-strip-chart__tooltip-label {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-weight: 450;
}

/* Horizontal mode: rows instead of columns — labels in a left column, bars extend right
   from a solid baseline, dashed gridlines run vertically with axis values along the
   bottom strip. Same track/notch/tooltip anatomy, transposed. */
.stats-bar-chart--horizontal .stats-bar-chart__axis {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 20px;
}

.stats-bar-chart--horizontal .stats-bar-chart__axis-label {
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
}

.stats-bar-chart--horizontal .stats-bar-chart__labels {
    right: auto;
    top: 0;
    bottom: 20px;
    height: auto;
}

.stats-bar-chart--horizontal .stats-bar-chart__label {
    top: auto;
    height: auto;
    left: 0;
    right: 8px;
    justify-content: flex-end;
}

.stats-bar-chart--horizontal .stats-bar-chart__label {
    overflow: hidden;
}

.stats-bar-chart--horizontal .stats-bar-chart__label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Insights framework: fullscreen frame measured on Linear's insights view (light,
   2026-08-22). Left column = header strip (44px tabs), optional filter strip (45px,
   tinted + hairline), visual panel, table panel (fills + scrolls). Right rail 300px
   behind a 0.5px hairline; 48px control rows (13px muted label at 24px inset, ghost
   select trigger right-aligned at 24px inset); footer pinned to the bottom. */
.insights-layout {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* Fullscreen insights sits on the page surface; the catalog's canonical stats
       ladder is surface-relative, so no local re-basing is needed. Sidebar panels wrap
       in .stats-inset instead. */
    background: var(--stats-table-bg, lch(5.52% 0.4 272 / 1));
}

.insights-layout__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.insights-layout__header {
    flex: 0 0 auto;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 18px;
}

/* Remeasured 2026-08-25: the filter row is a transparent strip (7.5px vertical
   rhythm) holding the rounded FilterBand — the old tinted hairline strip was wrong. */
.insights-layout__filter {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    /* Measured: 7.5px vertical rhythm, 10/16 horizontal insets, hairline under the row. */
    padding: 7.5px 16px 7.5px 10px;
    border-bottom: 0.5px solid var(--shell-filter-band-border, var(--shell-border, lch(13.08% 1.48 272 / 1)));
}

.insights-layout__visual {
    flex: 0 0 auto;
    /* Chart runs full-bleed to the content edges (measured: svg at x=0 of the content
       area); the summary strip carries its own 16px inset. */
    padding: 0;
}

.insights-layout__table {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.insights-layout__rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-left: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    padding: 8px 0;
}

.insights-rail-row {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px;
}

.insights-rail-row__label {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    white-space: nowrap;
}

.insights-rail-row__control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
/* The one layout rule the rail owns: Linear's uniform 150px control column. */
.insights-rail-row__control .settings-select__trigger {
    width: 150px;
}


/* InsightsSidebar: the narrow inset composition (grid sidebars, detail rails). The
   stats-inset class re-bases the stats tokens to the panel ladder, and the sidebar sits
   inside the standard side-panel card (surface lift comes from the .page-side-panel__panel
   chrome, same as the quick-filter panel — nothing painted here). Measured on Linear's
   cycle-insights sidebar (light, 2026-08-25): 16px content inset; summary number 18px/500
   with 12px/500 muted unit; control labels 12px/500 muted, 10px above 30px raised selects
   (16px column gap); chart full-bleed 250px; table flush under the chart, 38px rows,
   12px values at 450. Negative margin + matching padding makes the sidebar the scroller
   at the card edge so chart and table can bleed to the card border. */
.insights-sidebar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* The root cancels the card's 12px padding and scrolls edge-to-edge; each section
       carries its own 16px inset instead of negative margins (negative margins inside
       the scroller clipped the chart's right axis). */
    margin: -12px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

/* The table's sticky label column needs a solid fill — use the card surface itself so it
   is identical to the panel background in every theme (never the fullscreen/board ladder). */
.insights-sidebar.stats-inset {
    --stats-table-bg: var(--detail-sidebar-panel-bg, var(--shell-bg-active, var(--shell-bg-card, lch(7.67% 0.75 272 / 1))));
}

.insights-sidebar__controls {
    display: flex;
    gap: 16px;
    padding: 10px 16px 0;
}

.insights-sidebar__control {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 10px;
}

.insights-sidebar__control .settings-select--raised .settings-select__trigger {
    padding: var(--insights-select-padding, 1px 28px 1px 10px);
    color: var(--insights-select-color, var(--settings-control-text, lch(90.668% 1.375 272)));
}

.insights-sidebar__control .settings-select__trigger:not(:hover):not(:focus-visible) {
    background: var(--insights-select-bg, var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1)));
}

.insights-sidebar__control-label {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.insights-sidebar__chart {
    padding: 13px 0 0;
    /* Clip the full-bleed chart edges horizontally only — plain overflow:hidden also
       cut off the mouse-follow tooltip card where it extends over the table below. */
    overflow-x: clip;
    overflow-y: visible;
}

.insights-sidebar__table {
    overflow-x: auto;
}



/* Summary action buttons + their popovers (measured from Linear's sidebar shots:
   ~300px card, r12, 16px padding, 32px option rows; menu rows 36px with 14px icons). */
.insights-sidebar__actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Display popover content: hosting comes from AnchoredPopover; this only pads the rows. */
.insights-sidebar__display-popover {
    padding: 10px 16px;
}

.insights-sidebar__option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
}

.insights-sidebar__option-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    white-space: nowrap;
}

.insights-sidebar__option-chip {
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--shell-bg-hover, lch(14.265% 1.3 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
}


/* Server-mode load states: an empty shell keeps the panel footprint before the first
   result lands; refreshes keep the last result mounted with only the small summary-row
   indicator so the chart and table never flash or remount. */
.insights-sidebar__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 120px;
    padding: 16px;
}

.insights-sidebar__state-text {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
}

.insights-sidebar__spinner,
.insights-sidebar__refresh-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--shell-bg-hover, lch(14.265% 1.3 272 / 1));
    border-top-color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    border-radius: 50%;
    animation: insights-sidebar-spin 800ms linear infinite;
}

.insights-sidebar__refresh-indicator {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

.insights-sidebar__retry {
    appearance: none;
    border: none;
    background: transparent;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.insights-sidebar__retry:hover {
    background: var(--shell-bg-hover, lch(14.265% 1.3 272 / 1));
}

@keyframes insights-sidebar-spin {
    to { transform: rotate(360deg); }
}



.insights-rail-footer {
    margin-top: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    /* Measured: 35px strip, 6px/20px padding, divider on the separator tier. */
    padding: 6px 20px;
    border-top: 0.5px solid var(--stats-table-separator, var(--stats-table-cell-border, lch(23.632% 1.48 272 / 1)));
}

.insights-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    /* Measured strip: 12px + 32px line + 12px = 56px tall, 16px side inset. */
    padding: 12px 16px;
}

.insights-summary__value {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 32px;
    color: var(--stats-summary-color, lch(100% 0 272 / 1));
}

.insights-summary__label {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

/* Compact (sidebar) summary — measured on Linear's cycle-insights sidebar. */
.insights-summary--compact {
    align-items: baseline;
    padding: 20px 16px 0;
}

.insights-summary--compact .insights-summary__value {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 22px;
}

.insights-summary--compact .insights-summary__label {
    font-size: 0.75rem;
    font-weight: 500;
}

.insights-summary__extra {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

/* Fullscreen-insights interactions: segment-level hover (bars take pointer events when
   stacked), a mouse-following tooltip card driven by CSS vars from stats-chart-pointer.js
   (no per-pixel circuit traffic), hovered tooltip row brightened, and dot column markers
   that expand into the label pill on hover. */
.stats-bar-chart--segments .stats-bar-chart__bar {
    pointer-events: auto;
}

.stats-bar-chart--follow .stats-bar-chart__tooltip {
    left: 0;
    top: 0;
    transform: translate3d(calc(var(--stats-tip-x, 0px) + 16px), calc(var(--stats-tip-y, 0px) - 34px), 0);
}

.stats-bar-chart__tooltip-item--dim {
    opacity: 0.45;
}

.stats-bar-chart__tooltip-name.stats-bar-chart__tooltip-item--active {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.stats-bar-chart__label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.stats-bar-chart__label-dot--hollow {
    background: transparent;
    border: 1px solid var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

/* Segment-hover cross-highlight: the cell at (hovered chart segment row x column). */
.stats-table__cell--cell-highlighted {
    background: var(--stats-table-row-hover-bg, lch(24.567% 1.475 271.271 / 1));
}

.stats-table__cell--cell-highlighted .stats-table__text {
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.insights-rail-row--compact {
    height: 28px;
}

.insights-rail-row--compact .insights-rail-row__label {
    font-size: 0.8125rem;
}

.insights-summary__trailing {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

/* Avatar / initials adornments (assignee-style groups). */
.stats-table__avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.stats-table__initials {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    flex: 0 0 auto;
}

/* Avatar / initials column markers (assignee-style slices). */
.stats-bar-chart__label-image {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.stats-bar-chart__label-initials {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    flex: 0 0 auto;
}

/* Drill-down panel interior (measured on Linear's insights panel; migrated from the
   example so downstream apps get the signed-off look from stock components). */
.insights-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 10px;
}

.insights-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.insights-panel__sep {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.insights-panel__avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.insights-panel__initials {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.insights-panel__icon {
    display: inline-flex;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.insights-panel__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.insights-panel__notice {
    padding: 6px 20px 10px;
    font-size: 0.75rem;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.insights-panel__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.875rem;
}

.insights-panel__empty-art {
    width: 150px;
    height: 88px;
    border: 1px dashed var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    border-radius: 16px;
    transform: rotate(-8deg);
}

.insights-panel__list {
    display: flex;
    flex-direction: column;
}

.insights-panel__group {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 20px;
    background: var(--stats-table-header-bg, lch(11.632% 1.48 272 / 1));
    border-top: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    border-bottom: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
}

.insights-panel__group-count {
    font-weight: 450;
}

.insights-panel__group-total {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.insights-panel__row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    font-size: 0.8125rem;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

.insights-panel__row:hover {
    background: var(--stats-table-row-hover-bg, lch(24.567% 1.475 271.271 / 1));
}

.insights-panel__row-id {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    font-size: 0.75rem;
    min-width: 58px;
}

.insights-panel__row-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insights-panel__row-assignee {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--stats-table-value-color, lch(90.826% 1.425 272 / 1));
}

/* Rail accessories that belong to the composition, not the demo. */
.insights-rail-gap {
    height: 16px;
    flex: 0 0 auto;
}

.insights-rail-row__value-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 6px;
    border: 0.5px solid var(--stats-chart-tooltip-border, lch(37.357% 1.6 272 / 1));
    font-size: 0.75rem;
    margin-left: 6px;
}

.insights-rail-footer__hint {
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.insights-rail-footer__reset {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.insights-rail-footer__link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--app-theme-accent, #5e6ad2);
    cursor: pointer;
}

/* Drill-down panel: replaces the rail while a selection is open (measured 577px). */
.insights-layout__panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-left: 0.5px solid var(--stats-table-header-border, lch(18.832% 1.48 272 / 1));
    animation: insights-panel-in 0.2s ease-out;
    transition: transform 0.16s ease-in, opacity 0.16s ease-in;
}

.insights-layout__panel--closing {
    transform: translateX(100%);
    opacity: 0;
}

@keyframes insights-panel-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.stats-bar-chart__pill-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.stats-bar-chart__pill-image {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.stats-bar-chart__pill-initials {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    flex: 0 0 auto;
}

/* Externally-triggered card (table-cell hover): anchored at the segment, so the
   mouse-follow transform must not apply — its CSS vars hold the stale last position. */
.stats-bar-chart--follow .stats-bar-chart__tooltip--anchored {
    transform: none;
    /* --follow pins left:0; a right-anchored card would stretch between both edges. */
    left: auto;
}

/* Compact switch (measured 22×14 on Linear's insights rail toggles). */
.settings-toggle--small {
    width: 22px;
    height: 14px;
}

.settings-toggle--small::before {
    width: 10px;
    height: 10px;
    left: 2px;
}

.settings-toggle--small:checked::before {
    left: 10px;
}

/* Inset variant (StatsTable Inset param): the sidebar-panel table — value cells at 450
   (labels keep 500 via their own rule) and no leading header hairline; the stats-inset
   token remap comes from the same class list. */
.stats-table--inset .stats-table__cell {
    font-weight: 450;
}

.stats-table--inset .stats-table__cell--header {
    border-top: 0;
}

/* Inset context (sidebar insights panel, docs cards on elevated fills): remaps the
   working stats tokens to the panel-relative ladder measured on the sidebar. Components
   are context-blind — wrap them in .stats-inset and every tier re-bases. */
.stats-inset {
    --stats-table-bg: var(--stats-inset-bg, lch(9.232% 0.85 272 / 1));
    --stats-table-header-bg: var(--stats-inset-header-bg, lch(13.058% 1.3 272 / 1));
    --stats-table-row-hover-bg: var(--stats-inset-hover-bg, lch(14.265% 1.3 272 / 1));
    --stats-table-header-border: var(--stats-inset-hairline, lch(18.832% 1.48 272 / 1));
    --stats-table-hairline: var(--stats-inset-hairline, lch(18.832% 1.48 272 / 1));
    --stats-table-separator: var(--stats-inset-separator, lch(23.632% 1.48 272 / 1));
    --stats-table-cell-border: var(--stats-inset-separator, lch(23.632% 1.48 272 / 1));
}

/* Crosshair hover (measured via trusted hover 2026-08-23): value-cell hover paints the
   full row AND full column at the arm tint (half-step off the surface) with the hovered
   cell a full step; label/header hover paint their whole row/column at the full step.
   Explicit fills replace the plain row :hover band. */
.stats-table--crosshair .stats-table__row--body:hover .stats-table__cell {
    background: transparent;
}

.stats-table--crosshair .stats-table__row--body:hover .stats-table__cell--label {
    background: var(--stats-table-bg, lch(9.232% 0.85 272 / 1));
}

.stats-table--crosshair .stats-table__cell--crosshair-arm,
.stats-table--crosshair .stats-table__row--body:hover .stats-table__cell--crosshair-arm,
.stats-table--crosshair .stats-table__cell--label.stats-table__cell--crosshair-arm {
    background: var(--stats-table-hover-arm, lch(7.756% 1 272 / 1));
}

.stats-table--crosshair .stats-table__cell--crosshair-focus,
.stats-table--crosshair .stats-table__row--body:hover .stats-table__cell--crosshair-focus,
.stats-table--crosshair .stats-table__cell--label.stats-table__cell--crosshair-focus {
    background: var(--stats-table-hover-focus, lch(10.509% 1.1 272 / 1));
}

/* External row highlight (chart hover) keeps the full-row band in crosshair mode too. */
.stats-table--crosshair .stats-table__row--highlighted .stats-table__cell {
    background: var(--stats-table-hover-focus, lch(10.509% 1.1 272 / 1));
}

/* Inbox-row anatomy (measured on Linear's inbox, 2026-08-23): 16px round accessory
   badge overlapping the avatar bottom-right with a surface ring; muted title prefix;
   two-tier trailing cluster (one item top, up to two bottom); 8px accent unread dot. */
.activity-list-item__leading-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.activity-list-item__accessory {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shell-bg-surface, lch(5.52% 0.4 272 / 1));
}

.activity-list-item__accessory-inner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    background: var(--shell-bg-hover, lch(14.265% 1.3 272 / 1));
    color: var(--shell-text-secondary, lch(63.304% 1.35 272 / 1));
}

.activity-list-item__accessory-image {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
}

.activity-list-item__title-prefix {
    flex: 0 0 auto;
    margin-right: 6px;
    color: var(--shell-text-secondary, lch(63.304% 1.35 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1rem;
}

.activity-list-item__trailing-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    align-self: stretch;
}

.activity-list-item__trailing-top,
.activity-list-item__trailing-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 1rem;
}

.activity-list-item__meta-text {
    color: var(--shell-text-secondary, lch(63.304% 1.35 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.activity-list-item__meta-icon {
    display: inline-flex;
    color: var(--shell-text-secondary, lch(63.304% 1.35 272 / 1));
}

.activity-list-item__unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-theme-accent, lch(53% 52.26 286.91 / 1));
}

/* Measured on Linear's inbox: the unread dot sits inline at the start of the title
   line (8px dot + 6px gap before the identifier prefix), not in the trailing cluster. */
.activity-list-item__unread-dot--inline {
    flex: 0 0 auto;
    margin-right: 6px;
}

.panel-list-icon--round {
    border-radius: 50%;
}

/* ActivityFeed header (Linear-measured): hairline divider 16px under the resources, h32
   header 18px below it with the 15/600 title, then 16px to the first feed row. The right
   side is a text pill (Unsubscribe: h32 radius-full pad 0 12, 12/500) and the subscriber
   facepile button (18px avatars overlapped -9px, pad 0 6). */
.activity-feed__divider {
    height: 0.5px;
    margin-top: 16px;
    background: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border, lch(22.936% 3.913 272.695 / 1))));
}

.activity-feed__header {
    display: flex;
    align-items: center;
    height: 32px;
    margin: 18px 0 16px;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.activity-feed__header-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--shell-text-primary, lch(100% 0 272.695 / 1));
    line-height: 23px;
}

.activity-feed__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.activity-feed__subscribe {
    height: 32px;
    padding: 0 12px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    cursor: default;
    transition: background-color 150ms ease, color 150ms ease;
    line-height: normal;
}

.activity-feed__subscribers {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    cursor: default;
    transition: background-color 150ms ease;
}

.activity-feed__subscribers > * + * {
    margin-left: -9px;
}

.activity-feed__subscribe:hover,
.activity-feed__subscribers:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
}

.activity-feed__subscribe:hover {
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
}

[data-app-theme="light"] .activity-feed__subscribe:hover,
[data-app-theme="pure-light"] .activity-feed__subscribe:hover,
[data-app-theme="light"] .activity-feed__subscribers:hover,
[data-app-theme="pure-light"] .activity-feed__subscribers:hover {
    background: lch(94.9% 0 272 / 1);
}

/* Composer under the feed: Linear leaves 18px above it (block-margin collapse with the
   last comment card's 8px yields exactly 18). */
.activity-feed + .comment-composer {
    margin-top: 18px;
}

/* DetailContentActions: the reaction/attach ghost strip under a description — 28px round
   ghosts with 14px glyphs (Linear's svg says 16 but its iconSmall CSS renders 14),
   hanging 6px into the left gutter, 14px above the next section. */
.detail-content-actions {
    display: flex;
    align-items: center;
    gap: 0;
    height: 28px;
    margin: 0 0 14px -6px;
}

.detail-content-actions__reactions {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.detail-content-actions > button,
.detail-content-actions > .ui-icon-button,
.detail-content-actions__actions > button,
.detail-content-actions__actions > .ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    cursor: default;
    transition: background-color 150ms ease, color 150ms ease;
}

.detail-content-actions button:hover {
    background: var(--shell-bg-active, lch(7.67% 0.75 272 / 1));
    color: var(--shell-menu-text, lch(95.899% 1.194 272 / 1));
}

[data-app-theme="light"] .detail-content-actions button:hover,
[data-app-theme="pure-light"] .detail-content-actions button:hover {
    background: lch(94.9% 0 272 / 1);
}

/* Section header title accessory: Linear parks the progress wheel + count right after the
   Sub-issues label, on the left — never with the trailing tools. */
.collapsible-section__title-accessory {
    display: inline-flex;
    align-items: center;
}

.collapsible-section__header .progress-pill__label {
    font-size: 0.75rem;
    line-height: normal;
}

/* Sections stack 12px apart (sub-issues bottom to resources header, measured). */
.collapsible-section + .collapsible-section {
    margin-top: 12px;
}

/* Right-aligned resource meta (the "13h" age) ahead of the row menu. */
.resource-item__meta {
    margin-left: auto;
    color: var(--shell-text-secondary, lch(64.894% 2.106 272.695 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    flex: 0 0 auto;
}

.resource-item__menu {
    margin-left: auto;
}

.resource-item__meta ~ .resource-item__menu {
    margin-left: 0;
}

/* Resource-row ⋯: hidden until the row is hovered (Linear); stays while the menu has focus. */
.resource-item__menu-button {
    opacity: 0;
    transition: opacity 120ms ease;
}

.resource-item:hover .resource-item__menu-button,
.resource-item__menu:focus-within .resource-item__menu-button,
.resource-item__menu-button:focus-visible {
    opacity: 1;
}

/* The main composer sits 18px under the last comment card exactly (Linear); the feed is a
   flex column, so the card's own bottom margin cannot collapse away — zero it instead. */
.activity-feed > .comment-thread--root:last-child {
    margin-bottom: 0;
}




.ui-split-button {
    position: relative;
    display: inline-flex;
}

/* Headerless embedding (under TabbedSingleColumnPage, which owns the header + tab row):
   drop the header-coupled top offsets so the content/rail start near the region top. */
/* Embedded under a tab shell: TWO independent scroll areas (content + rail), not the
   standalone single-scroller. Each pane scrolls on its own; the page never scrolls. */
.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__body {
    overflow: hidden;
    min-height: 0;
}
.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-region {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
}
.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-region::-webkit-scrollbar {
    display: none;
}
.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-column {
    margin-top: var(--detail-sidebar-page-content-top, 20px);
}
.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__sidebar {
    position: static;
    margin-top: var(--detail-sidebar-page-content-top, 20px);
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    /* The ::before fade now reads the rail's OWN scroll, so it hints when the rail overflows. */
    /* Breathing room so the last panel never sits on the baseline when the rail scrolls. */
    padding-bottom: 48px;
}

/* ---- Pane layout (Layout=Pane, or the detail embedded in an InboxDetailPanel) ----
   Linear slips the reading-pane gutters in vs the standalone issue page: content hugs a ~40px
   left gutter and fills toward the rail, the rail keeps a ~49px right gutter, and the detail's
   own toolbar overlay sits in a reserved top strip (there's no header row to seat it). These are
   scoped under .inbox-detail-panel so the tabbed standalone issue page (also headerless) is
   unaffected. */
.detail-sidebar-page--pane.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__body,
.inbox-detail-panel .detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__body {
    padding-right: 40px;
}
.detail-sidebar-page--pane.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-region,
.inbox-detail-panel .detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-region {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.detail-sidebar-page--pane.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-column,
.inbox-detail-panel .detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__content-column {
    margin: 44px 40px 0 40px;
    width: min(791px, calc(100% - 80px));
}
.detail-sidebar-page--pane.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__sidebar,
.inbox-detail-panel .detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__sidebar {
    margin-top: 44px;
}
.detail-sidebar-page--pane.detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__sidebar-utility--overlay,
.inbox-detail-panel .detail-sidebar-page--flat-rail.detail-sidebar-page--no-header .detail-sidebar-page__sidebar-utility--overlay {
    top: 8px;
    right: 40px;
}

.ui-icon-button-group--raised {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

/* InboxPage / InboxDetailPanel: a first-class inbox container. The detail pane stacks a chrome
   header (breadcrumb left; toolbar + notification actions right) over the caller's detail body. */
.inbox-page__menu-anchor {
    position: relative;
    display: inline-flex;
}

.inbox-page__filters {
    padding: 6px 12px;
}

.inbox-page__list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.inbox-detail-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.inbox-detail-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 4px 12px 4px 16px;
    border-bottom: 0.5px solid var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border)));
}

.inbox-detail-panel__leading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.inbox-detail-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Notification actions (snooze/delete/unsubscribe) sit a touch apart from the issue toolbar. */
.inbox-detail-panel__notif {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}

.inbox-detail-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


/* Thin-viewport uncovered ranges (spec W2): in-flow placeholder rows occupying
   exactly the measurement slots their rows will fill — never absolutely
   positioned, no loading affordance outside the virtualized flow. */
.grid-list__window-placeholder {
    pointer-events: none;
}

.grid-list__window-placeholder::after {
    content: "";
    grid-column: 1 / -1;
    height: 12px;
    margin: 0 24px;
    border-radius: 4px;
    background: var(--shell-bg-hover, lch(94.799% 1.4 272 / 0.5));
}


/* Thin-viewport board columns (spec W2/A6): uncovered card ranges render as
   in-flow placeholder cards at the estimated card slot height. */
.board-card--window-placeholder {
    pointer-events: none;
}

.board-card--window-placeholder .board-card__surface::after {
    content: "";
    display: block;
    height: 12px;
    margin: 4px 8px;
    border-radius: 4px;
    background: var(--shell-bg-hover, lch(94.799% 1.4 272 / 0.5));
}

/* ===== automations.css ===== */
.automation-rules-section {
    display: flex;
    flex-direction: column;
    max-width: 640px;
}

.automation-rules-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.automation-rules-section__title {
    margin: 0;
    color: var(--shell-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.automation-rules-section__description {
    margin: -8px 0 16px;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.5;
}

.automation-rules-section__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.automation-rule-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 10px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

.automation-rule-card__grip {
    position: absolute;
    top: 0;
    left: -20px;
    display: flex;
    justify-content: center;
    width: 20px;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: move;
    touch-action: none;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.automation-rule-card:hover .automation-rule-card__grip {
    opacity: 1;
}

.automation-rule-card__grip-icon {
    flex: 0 0 auto;
}

.automation-rule-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
}

.automation-rule-card__row {
    display: flex;
    align-items: center;
    min-height: 24.5px;
}

.automation-rule-card__label {
    flex: 0 0 48.5px;
    width: 48.5px;
    white-space: nowrap;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.automation-rule-card__content {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.automation-rule-card__tools {
    position: absolute;
    right: 16px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.automation-rule-card:hover .automation-rule-card__tools,
.automation-rule-card__tools:focus-within {
    opacity: 1;
}

.ui-icon-button.automation-rule-card__tool {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

.automation-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0 4px;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.5;
}

.automation-action-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.automation-action-row__text {
    white-space: nowrap;
}

.automation-action-row__picker {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.automation-action-row__trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0 -4px;
    padding: 1px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.automation-action-row__trigger:hover,
.automation-action-row__trigger[aria-expanded="true"] {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* Edit-state phrase (measured on the live edit card): raised caret pickers
   h22 r8, 12px/400, 6px apart, no leading bolt. */
.automation-action-row--editing {
    gap: 0 6px;
}

.automation-action-row__trigger--picker,
.automation-action-row__trigger--picker:hover,
.automation-action-row__trigger--picker[aria-expanded="true"] {
    height: 22px;
    margin: 0;
    padding: 1px 8px;
    gap: 4px;
    border-radius: 8px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.automation-action-row__trigger--picker:hover,
.automation-action-row__trigger--picker[aria-expanded="true"] {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    box-shadow: var(--shell-control-raised-hover-shadow, var(--shell-control-raised-shadow, none));
}

.automation-action-row__caret {
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

/* Edit-state Cancel/Save (bottom-right, 16px/16px in, 8px apart): 24px pills,
   12px/500; Save fills with the accent. */
.automation-rule-card__actions {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.automation-rule-card__action {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.automation-rule-card__action:hover {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
}

.automation-rule-card__action--save,
.automation-rule-card__action--save:hover {
    background: var(--shell-accent, #5e6ad2);
    color: var(--shell-accent-contrast, #fff);
    box-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
}

.automation-rule-card__action--save:hover {
    filter: brightness(1.06);
}

/* Read-only chip rows (Linear's SLA cards): chips are inert display */
.filter-bar--readonly .filter-bar__segment {
    cursor: default;
}

/* Floating clone + drag state shared by every stack-dnd scope (SLA rule
   cards, form-builder fields, in-card option rows) */
.stack-dnd-clone {
    position: fixed;
    z-index: 4000;
    margin: 0;
    pointer-events: none;
    will-change: transform;
}

.stack-dnd-clone .automation-rule-card__grip,
.stack-dnd-clone .automation-rule-card__tools {
    opacity: 1;
}

.stack-dnd-source {
    visibility: hidden;
}

body.stack-dnd-dragging {
    cursor: move;
    user-select: none;
}

/* ===== form-builder.css ===== */
.form-builder-section {
    display: flex;
    flex-direction: column;
    max-width: 750px;
}

.form-builder-section__title {
    margin: 0 0 4px;
    color: var(--shell-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.form-builder-section__description {
    margin: 0 0 16px;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.5;
}

.form-builder-section__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-builder-section__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.form-builder-section__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.form-builder-section__add:hover {
    background: var(--shell-control-raised-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
}

.form-field-card {
    position: relative;
    box-sizing: border-box;
    border: 0.5px solid var(--shell-form-card-border, lch(19% 1.48 272 / 1));
    border-radius: 10px;
}

.form-field-card__grip {
    position: absolute;
    top: 0;
    left: -20px;
    display: flex;
    justify-content: center;
    width: 20px;
    height: 100%;
    padding-top: 15px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: move;
    touch-action: none;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.form-field-card:hover .form-field-card__grip {
    opacity: 1;
}

.form-field-card__header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    padding: 6px 8px;
}

.form-field-card__type {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.form-field-card__type-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.form-field-card__type-trigger:hover,
.form-field-card__type-trigger[aria-expanded="true"] {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

.form-field-card__type-caret {
    margin-left: 2px;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.form-field-card__required {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    cursor: var(--pointer, pointer);
}


.ui-icon-button.form-field-card__remove {
    width: 24px;
    height: 24px;
    margin-left: 12px;
    border-radius: 9999px;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

/* The measured card anatomy: transparent 36px header strip over a WHITE r10
   body panel (0.5px top hairline lch(91.9), pad 12/16/16) that holds the label,
   description and type body. */
.form-field-card__panel {
    box-sizing: border-box;
    border-top: 0.5px solid var(--shell-form-divider, lch(27% 1.5 272 / 1));
    border-radius: 10px;
    background: var(--shell-form-panel-bg, lch(12.5% 0.85 272 / 1));
    padding: 12px 16px 16px;
}

.form-field-card__label,
.form-field-card__description {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    resize: none;
    outline: none;
    overflow: hidden;
}

.form-field-card__label {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 23px;
}

.form-field-card__label::placeholder {
    color: var(--shell-text-muted, lch(56% 1 272));
    font-weight: 600;
}

.form-field-card__description {
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20px;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.form-field-card__description::placeholder {
    color: var(--shell-text-muted, lch(56% 1 272));
}

.form-field-card__preview {
    box-sizing: border-box;
    min-height: 33px;
    margin-top: 12px;
    padding: 6px 12px;
    border: 0.5px solid var(--shell-form-preview-border, lch(36.5% 1.5 272 / 1));
    border-radius: 8px;
    background: var(--shell-form-panel-bg, lch(12.5% 0.85 272 / 1));
    color: var(--shell-form-preview-text, lch(42% 1 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.5;
}

.form-field-card__preview--tall {
    min-height: 60px;
}

/* Linear's custom checkbox (Required + option rows): 14px r3; unchecked = 1px
   grey ring, checked = accent fill with a white check. */
.form-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid var(--shell-form-checkbox-ring, lch(52.04% 0 282 / 1));
    border-radius: 3px;
    background: transparent;
    color: var(--shell-accent-contrast, #fff);
}

.form-checkbox--checked {
    border-color: transparent;
    background: var(--shell-accent, #5e6ad2);
}

.form-checkbox__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: var(--pointer, pointer);
}

.form-checkbox__mark {
    pointer-events: none;
}

.form-options {
    display: flex;
    flex-direction: column;
    margin: 10px -8px 0 -13px;
}

.form-options__row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
}

.form-options__grip {
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 16px;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: move;
    touch-action: none;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.form-options__row:hover .form-options__grip {
    opacity: 1;
}

.form-options__checkbox {
    margin-left: 1px;
}

.form-options__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin-left: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    outline: none;
}

.form-options__input::placeholder {
    color: var(--shell-text-muted, lch(56% 1 272));
}

.ui-icon-button.form-options__remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 9999px;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

.form-options__add {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    height: 32px;
    margin: 0 0 0 4px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.form-options__add:hover {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* ===== catalog-table.css ===== */
/* Catalog table: the editable hierarchical catalog (measured on Linear's label
   editor): 32px toolbar controls, 12px/500 header, 44px full-width hover rows
   with inline-editable name/description cells (r8 quiet buttons, ghost when
   empty), far-left disclosure caret gutter, group clover icon, 9px swatches,
   tree connectors on child rows, fixed metadata columns, plain counts and a
   hover-revealed 32px round overflow. Checkbox, ghost description and overflow
   only show on row hover. */

.catalog-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.catalog-table__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.catalog-table__filter {
    box-sizing: border-box;
    width: 300px;
    height: 32px;
    padding: 0 10px;
    border: 0.5px solid var(--shell-border-strong, lch(88.5% 1 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.catalog-table__filter::placeholder {
    color: var(--shell-text-muted, lch(56% 1 272));
}

.catalog-table__filter:focus {
    border-color: var(--shell-accent, #5e6ad2);
}

.catalog-table__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.catalog-table__head {
    display: flex;
    align-items: center;
    height: 32px;
}

.catalog-table__head-label {
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
}

.catalog-table__row {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    border-radius: 8px;
}

.catalog-table__row:hover {
    background: var(--shell-list-row-hover, lch(95.75% 0.5 282 / 1));
}

/* Tree connector on child rows: vertical drop under the group icon center with
   an elbow curving into the swatch; non-last children continue the vertical
   line through the full row height. The offset tracks the select column: 72px
   with it, 38px less without (catalog-table--no-select). */
.catalog-table {
    --catalog-connector-left: 72px;
}

.catalog-table--no-select {
    --catalog-connector-left: 34px;
}

.catalog-table__row--child::before {
    content: "";
    position: absolute;
    left: var(--catalog-connector-left, 72px);
    top: 0;
    width: 16px;
    height: 22px;
    border-left: 1px solid var(--shell-border-strong, lch(88.5% 1 272 / 1));
    border-bottom: 1px solid var(--shell-border-strong, lch(88.5% 1 272 / 1));
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

.catalog-table__row--child:not(.catalog-table__row--last-child)::after {
    content: "";
    position: absolute;
    left: var(--catalog-connector-left, 72px);
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--shell-border-strong, lch(88.5% 1 272 / 1));
    pointer-events: none;
}

.catalog-table__select {
    display: flex;
    align-items: center;
    flex: 0 0 38px;
    box-sizing: border-box;
    width: 38px;
    padding-left: 22px;
}

/* Checkbox is hover-revealed unless checked. */
.catalog-table__select .form-checkbox {
    opacity: 0;
    transition: opacity 0.15s;
}

.catalog-table__row:hover .catalog-table__select .form-checkbox,
.catalog-table__select .form-checkbox--checked {
    opacity: 1;
}

/* Far-left disclosure gutter: caret at x38, before the group icon. */
.catalog-table__caret-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
}

.catalog-table__head .catalog-table__caret-slot {
    flex-basis: 16px;
    width: 16px;
}

.catalog-table__lead {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 402px;
    min-width: 0;
    padding-left: 14px;
    gap: 8px;
}

.catalog-table__row--group .catalog-table__lead {
    padding-left: 6.5px;
    gap: 9px;
}

.catalog-table__row--child .catalog-table__lead {
    padding-left: 37px;
}

.catalog-table__head .catalog-table__lead {
    width: 406px;
    padding-left: 0;
}

.catalog-table__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    cursor: var(--pointer, pointer);
}

.catalog-table__disclosure:hover {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* Base glyph points right (collapsed); expanded rotates it down. */
.catalog-table__disclosure svg {
    transform: rotate(90deg);
    transition: transform 0.1s ease;
}

.catalog-table__disclosure--collapsed svg {
    transform: none;
}

.catalog-table__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
}

.catalog-table__swatch {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Swatch as a picker trigger: 28px round hover backdrop, but only the 9px dot
   footprint in the row flow so name positions stay put. */
.catalog-table__swatch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: -9.5px;
    margin-right: -9.5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: var(--pointer, pointer);
}

.catalog-table__swatch-button:hover,
.catalog-table__swatch-button[aria-expanded="true"] {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* Group clover as a picker trigger: same 28px backdrop, 16px flow footprint. */
.catalog-table__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: -6px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: var(--pointer, pointer);
}

.catalog-table__icon-button:hover,
.catalog-table__icon-button[aria-expanded="true"] {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* Floating color palette (Linear's label color picker): 32px circles, hairline
   divider, rainbow custom slot. Card chrome comes from anchored-popover__panel. */
.swatch-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
}

.swatch-picker__color {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: var(--pointer, pointer);
}

.swatch-picker__divider {
    flex: 0 0 auto;
    width: 1px;
    height: 32px;
    margin: 0 4px;
    background: var(--shell-border-strong, lch(88.5% 1 272 / 1));
}

.swatch-picker__custom {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #eb5757, #f2c94c, #4cb782, #4ea7fc, #b678f0, #eb5757);
    cursor: var(--pointer, pointer);
}

/* Custom color mode: the palette card swaps to the spectrum picker (measured on
   Linear: ~413px card, header dot + HEX input + ringed rainbow toggle, 99px
   saturation/value field beside a 7px hue rail). */
.swatch-picker--custom {
    display: block;
    width: 413px;
    padding: 16px;
}

.color-spectrum {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.color-spectrum__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-spectrum__dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.color-spectrum__hex-label {
    color: var(--shell-text-muted, lch(56% 1 272));
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.color-spectrum__hex-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 450;
    outline: none;
}

.color-spectrum__rainbow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #eb5757, #f2c94c, #4cb782, #4ea7fc, #b678f0, #eb5757);
    box-shadow: 0 0 0 2px var(--shell-bg-primary, var(--shell-bg-surface)), 0 0 0 4px var(--shell-accent, #5e6ad2);
    cursor: var(--pointer, pointer);
}

.color-spectrum__body {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.color-spectrum__field {
    position: relative;
    flex: 1 1 auto;
    height: 99px;
    border-radius: 4px;
    cursor: crosshair;
    touch-action: none;
}

.color-spectrum__thumb {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.35), inset 0 0 0 0.5px rgb(0 0 0 / 0.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.color-spectrum__hue {
    position: relative;
    flex: 0 0 7px;
    width: 7px;
    border-radius: 3.5px;
    background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    cursor: var(--pointer, pointer);
    touch-action: none;
}

.color-spectrum__hue-thumb {
    position: absolute;
    left: 50%;
    width: 15px;
    height: 8px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Description flexes so the fixed metadata columns and trailing overflow stay
   in view at any container width (618px emerges at Linear's 1499px container). */
.catalog-table__description {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    padding-left: 2px;
}

/* Empty-description placeholder is hover-revealed; real values always show. */
.catalog-table__description .inline-editable-cell--ghost {
    opacity: 0;
    transition: opacity 0.15s;
}

.catalog-table__row:hover .catalog-table__description .inline-editable-cell--ghost {
    opacity: 1;
}

.catalog-table__cell {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0;
}

.catalog-table__meta {
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    white-space: nowrap;
}

.catalog-table__text {
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    white-space: nowrap;
}

.catalog-table__count {
    display: inline-flex;
    align-items: center;
    color: var(--shell-text-secondary, lch(64.199% 1.9 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.catalog-table__trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 60px;
    box-sizing: border-box;
    width: 60px;
    padding-right: 28px;
}

.catalog-table__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    opacity: 0;
    transition: opacity 0.15s;
    cursor: var(--pointer, pointer);
}

.catalog-table__row:hover .catalog-table__menu,
.catalog-table__menu[aria-expanded="true"] {
    opacity: 1;
}

.catalog-table__menu:hover {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

/* Inline click-to-edit cell: quiet r8 button <-> input, ghost-muted when empty */
.inline-editable-cell {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    height: 24.5px;
    margin: 0;
    padding: 0 4.5px;
    border: 0.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
}

.inline-editable-cell > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-editable-cell:hover:not(:disabled) {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

.inline-editable-cell:disabled {
    cursor: default;
}

.inline-editable-cell--ghost {
    color: var(--shell-text-muted, lch(56% 1 272));
}

.inline-editable-cell__input {
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
    height: 24.5px;
    padding: 0 4.5px;
    border: 1px solid var(--shell-accent, #5e6ad2);
    border-radius: 8px;
    background: var(--shell-bg-surface-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    outline: none;
}

/* ===== navigation.css (sidebar-dnd additions) ===== */
/* Opt-in sidebar drag-and-drop (sidebar-dnd.js): dimmed source row, accent
   highlight on a folder receiving a drop; clone + insertion line are inline. */
.shell-tree-node--sbd-source > .shell-tree-node__row {
    opacity: 0.45;
}

.shell-tree-node__row--sbd-into {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
    box-shadow: inset 0 0 0 1.5px var(--shell-accent, #5e6ad2);
    border-radius: 6px;
}

body.sidebar-dnd-dragging {
    cursor: grabbing;
    user-select: none;
}

body.sidebar-dnd-dragging * {
    cursor: grabbing !important;
}

.shell-nav-link.shell-tree-node--sbd-source {
    opacity: 0.45;
}

/* ===== dashboards.css ===== */
/* Dashboards: the widget-grid screen cloned from Linear's dashboards (measured live,
   light theme, 2026-08-26 — see linear-dashboards-spec memory). Cards sit directly on
   the page surface (fullscreen stats token scope, NOT stats-inset): transparent fill,
   0.5px hairline at radius 8, no shadow. */

/* Canvas: fractional tracks (Linear: 4), 15px column gap, 16px row gap. The host page
   owns surface and insets (Linear: 32px sides). */
.dashboard-canvas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A row holds up to four widgets which expand/contract to share it equally. */
.dashboard-canvas__row {
    display: flex;
    gap: 15px;
    min-width: 0;
}

.dashboard-widget {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 176px; /* measured: small KPI card height */
    border: 0.5px solid var(--dashboard-widget-border, var(--shell-border));
    border-radius: 8px;
    background: transparent;
    transition: border-color 0.1s ease-out;
}

/* Hover darkens the card border one step (estimate — pending a trusted-pointer measure). */
.dashboard-widget:hover {
    border-color: var(--dashboard-widget-border-hover, var(--shell-border-strong));
}

/* Header band: centered 13px/500 title, 33px from the card top (≈63px band). */
.dashboard-widget__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    padding: 33px 16px 8px;
}


.dashboard-widget__header--start {
    justify-content: flex-start;
    padding: 16px 20px 7px;
}


/* Dashboard scope for the strip chart: room under the title band (and for the hover card
   above the first row). */
.dashboard-widget__body > .stats-strip-chart {
    padding-top: 12px;
}

/* Dashboard scope for the strip plot: no at-rest band badges, icon-only column labels
   (Linear's dashboard variant), and the plot hugs the card. */
.dashboard-widget .stats-percentile-chart__badges {
    display: none;
}

.dashboard-widget .stats-percentile-chart__legend-text {
    display: none;
}

/* Strip-plot legend: 14px icons (16 measured too big vs Linear). Hovering the SLICE
   (the chart drives __legend-item--hovered, same model as the bar chart's column hover)
   reveals the label as a pill; legend items are absolutely positioned so the raised
   pill overlays neighbouring slices instead of pushing or clipping. */
.dashboard-widget .stats-percentile-chart__legend-icon svg {
    width: 14px;
    height: 14px;
}

.dashboard-widget .stats-percentile-chart__legend-chip {
    border-radius: 8px;
    padding: 2px 6px;
    white-space: nowrap;
    transition: background 0.1s ease-out;
}

.dashboard-widget .stats-percentile-chart__legend-item--hovered {
    z-index: 3;
    overflow: visible;
}

.dashboard-widget .stats-percentile-chart__legend-item--hovered .stats-percentile-chart__legend-chip {
    background: var(--stats-table-header-bg, var(--shell-bg-hover, lch(94.44% 0 282 / 1)));
}

.dashboard-widget .stats-percentile-chart__legend-item--hovered .stats-percentile-chart__legend-text {
    display: inline;
}

/* Chart bodies let the hover pills escape the card instead of clipping (the table
   widget keeps its own clipping). */
.dashboard-widget__body:has(.dashboard-chart-area) {
    overflow: visible;
}

/* Bar chart shares the strip plot's flush start at the card inset. */
.dashboard-widget .stats-bar-chart {
    margin-left: -16px;
}

/* Linear's strip plot starts at the card's 16px inset with no extra internal padding. */
.dashboard-widget .stats-percentile-chart {
    margin-left: -16px;
}

/* Linear's dashboard table runs edge-to-edge in the card with no top border above the
   header — only the hairline below it. */
.dashboard-widget .stats-table__cell--header {
    border-top: 0;
}

.dashboard-chart-area {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-widget .stats-percentile-chart__label-text {
    display: none;
}

/* Linear's dashboard tables drop the fullscreen header band — headers sit on the card
   surface. Sticky header/label cells still need SOLID surface fills so horizontal
   scrolling never shows cells sliding beneath them. */
.dashboard-widget .stats-table {
    --stats-table-header-bg: var(--shell-bg-surface, lch(100% 0 272 / 1));
    --stats-table-bg: var(--shell-bg-surface, lch(100% 0 272 / 1));
}

.dashboard-widget__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    color: var(--stats-table-label-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hover-revealed ⋯ menu, 16px inset from the card's top-right corner. */
.dashboard-widget__menu-anchor {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.dashboard-widget:hover .dashboard-widget__menu-anchor,
.dashboard-widget__menu-anchor:focus-within,
.dashboard-widget__menu-anchor:has([aria-expanded='true']) {
    opacity: 1;
}

/* Drag grip: hover-revealed at the card's top-left, mirroring the ⋯ inset; drags
   start from the grip only so widget-body interactions never conflict. */
.dashboard-widget__grip {
    position: absolute;
    top: 16px;
    /* Linear hangs the grip in the gutter, centered on the card's left border. */
    left: -12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    opacity: 0;
    transition: opacity 0.1s ease-out;
    cursor: grab;
    touch-action: none;
}

.dashboard-widget:hover .dashboard-widget__grip {
    opacity: 1;
}

.dashboard-widget__grip:active {
    cursor: grabbing;
}

.dashboard-widget__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px 16px;
    overflow: hidden;
}

/* KPI number body: 24px/500 primary, centered in the remaining card space. */
.dashboard-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Measured: the number's box starts 84px from the card top (header ends at 64). */
    padding-top: 20px;
    gap: 4px;
    flex: 1 1 auto;
}

.dashboard-value__number {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.5rem;
    color: var(--stats-summary-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    font-variant-numeric: tabular-nums;
}

.dashboard-value__caption {
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

/* Stat rows: 15px/450, muted label left + primary value right, 40px pitch; the block
   centers in the body (measured ~103px side insets on a 347px card → fixed max width). */
.dashboard-stat-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
}

.dashboard-stat-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    line-height: 1.4375rem;
}

/* Linear separates the stat rows with the table hairline tier. */
.dashboard-stat-list__row + .dashboard-stat-list__row {
    border-top: 0.5px solid var(--stats-table-hairline, var(--stats-table-header-border, lch(23.632% 1.48 272 / 1)));
}

.dashboard-stat-list__label {
    font-size: 0.9375rem;
    font-weight: 450;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.dashboard-stat-list__value {
    font-size: 0.9375rem;
    font-weight: 450;
    color: var(--stats-summary-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    font-variant-numeric: tabular-nums;
}

/* Page header: icon + 24px/600 title, muted description, control row below. */
.dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Measured: 40px from the title bar to the title and 25px from the controls row
       down to the first card. */
    padding: 32px 0 25px;
}

.dashboard-header__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    /* Measured: a translucent tint over the surface, not a solid fill. */
    background: var(--dashboard-icon-chip-bg, lch(78.247% 3.577 260.65 / 0.125));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.dashboard-header__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    color: var(--stats-summary-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.dashboard-header__description {
    font-size: 0.9375rem;
    color: var(--stats-summary-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.dashboard-header__description--placeholder {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.dashboard-header__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-header__controls-left,
.dashboard-header__controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Breadcrumb title bar: 53px strip sharing the page surface, hairline below. Left:
   dashboard glyph + 13px/500 title + favorite star + overflow menu; right: muted
   "Refreshed Xmin ago" + copy-link. */
.dashboard-title-bar__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--stats-table-label-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    white-space: nowrap;
}

.dashboard-title-bar__meta {
    font-size: 0.8125rem;
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    white-space: nowrap;
}

/* Editable header title/description: invisible inputs styled as the text they replace. */
.dashboard-header__title-input,
.dashboard-header__description-input {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    color: inherit;
    outline: none;
}

.dashboard-header__title-button,
.dashboard-header__description-button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    text-align: left;
    cursor: text;
}

.dashboard-header__icon-button {
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
}

/* Widget drag: dimmed source while the translucent clone follows the pointer; a 2px
   accent insertion line marks the drop edge (same language as the sidebar drag). */
.dashboard-widget--drag-source {
    opacity: 0.4;
}

.dashboard-canvas__drag-clone {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.9;
}

.dashboard-canvas__insertion-line {
    position: fixed;
    z-index: 999;
    width: 2px;
    border-radius: 1px;
    background: var(--shell-accent, #5e6ad2);
    pointer-events: none;
}


/* Small accent pill (add-insight "Add to dashboard"): 24px, accent fill, 12px/500. */
.ui-button--accentpill {
    height: 24px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: var(--shell-accent, lch(53% 52.26 286.91));
    color: lch(100% 5 286.91);
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
}

.ui-button--accentpill:hover {
    background: color-mix(in lch, var(--shell-accent, lch(53% 52.26 286.91)) 92%, black);
}

/* Add-insight widget-type trio: 45×28 pills, fill-swap selection (measured 2026-08-27). */
.insights-display-toggle {
    display: inline-flex;
    gap: 6px;
}

.insights-display-toggle__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 28px;
    border: none;
    border-radius: 9999px;
    background: var(--shell-bg-surface-button, lch(99.997% 0.5 282 / 1));
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    cursor: pointer;
    transition: background 0.1s ease-out;
}

.insights-display-toggle__pill--active {
    background: var(--insights-display-toggle-active-bg, var(--button-tab-active-bg));
    color: var(--stats-table-label-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

/* Breadcrumb inversion measured on add-insight: ancestors PRIMARY, current crumb MUTED. */
.dashboard-title-bar__crumb--muted {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
}

.dashboard-title-bar__crumb-sep {
    color: var(--stats-table-header-color, lch(63.304% 1.35 272 / 1));
    margin: 0 2px;
}

/* Empty-state primitives, measured 1:1 from Linear (2026-08): the my-issues/drafts/inbox
   list empty states and the initiatives/projects/views/team-issues feature intros.
   Illustration colors derive from a four-step ink ramp mixed between the surface fill and
   the primary text color (Linear dark: strokes L 27/37/62/90 over fills L 5.5/9.3, hue 272),
   so light themes invert automatically. Override the --empty-state-* hooks to retune. */

.empty-state-art {
    display: block;
    width: auto;
    height: var(--empty-state-art-height, 120px);
    flex: 0 0 auto;
    --es-fill: var(--empty-state-fill, var(--shell-bg-surface, lch(5.52% 0.4 272)));
    --es-fill-raised: var(--empty-state-fill-raised, var(--shell-bg-active, lch(9.345% 0.85 272)));
    --es-ink-ref: var(--shell-text-primary, lch(100 0 272));
    --es-ink-faint: var(--empty-state-line-faint, color-mix(in lch, var(--es-ink-ref) 24%, var(--es-fill)));
    --es-ink-soft: var(--empty-state-line-soft, color-mix(in lch, var(--es-ink-ref) 34%, var(--es-fill)));
    --es-ink: var(--empty-state-line, color-mix(in lch, var(--es-ink-ref) 60%, var(--es-fill)));
    --es-ink-strong: var(--empty-state-line-strong, color-mix(in lch, var(--es-ink-ref) 90%, var(--es-fill)));
}

.empty-state-art__fill {
    fill: var(--es-fill);
}

.empty-state-art__fill-raised {
    fill: var(--es-fill-raised);
}

.empty-state-art__ink-faint {
    fill: var(--es-ink-faint);
}

.empty-state-art__ink-soft {
    fill: var(--es-ink-soft);
}

.empty-state-art__ink {
    fill: var(--es-ink);
}

.empty-state-art__ink-strong {
    fill: var(--es-ink-strong);
}

.empty-state-art__line-faint {
    stroke: var(--es-ink-faint);
}

.empty-state-art__line-soft {
    stroke: var(--es-ink-soft);
}

.empty-state-art__line {
    stroke: var(--es-ink);
}

.empty-state-art__line-strong {
    stroke: var(--es-ink-strong);
}

.empty-state-art__line-bg {
    stroke: var(--es-fill);
}

.empty-state {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 120px 60px;
}

.empty-state--pane {
    gap: 24px;
    --empty-state-art-height: 100px;
}

/* Triage-style compact empty state: small illustration, tight gap, native 24px pill. */
.empty-state--compact {
    gap: 16px;
    padding: 24px;
    --empty-state-art-height: 64px;
}

.empty-state__label {
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}

/* Page/pane action pill is 28px; the compact (triage) variant keeps the native 24px AccentPill. */
.empty-state:not(.empty-state--compact) .empty-state__action.ui-button,
.feature-intro__primary.ui-button {
    height: 28px;
    padding: 0 10px;
    font-size: 0.75rem;
    box-shadow: lch(0 0 0 / 0.3) 0 0.5px 1px 1px;
}

.feature-intro {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    gap: 24px;
}

.feature-intro__art {
    display: flex;
    --empty-state-art-height: 80px;
}

.feature-intro__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-intro__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-intro__title {
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
}

.feature-intro__description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.4;
}

.feature-intro__description p {
    margin: 0;
}

.feature-intro__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-intro__primary-hint {
    margin-left: 6px;
}

.feature-intro__secondary.ui-button {
    height: 28px;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(10.149% 0.689 272));
    color: var(--shell-text-primary, lch(90.451% 1.2 272));
    font-size: 0.75rem;
    font-weight: 500;
}

.feature-intro__secondary.ui-button:hover {
    background: var(--shell-bg-hover, lch(13% 0.7 272));
}

/* Keyboard-key chips (measured: 18×17, r4, hairline border; "then" separator 10px). */
.qi-kbd-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.qi-kbd {
    display: inline-flex;
    min-width: 18px;
    height: 17px;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0.5px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
}

.qi-kbd-group__sep {
    font-size: 0.625rem;
    font-weight: 450;
}

.qi-kbd-group--subtle {
    color: var(--shell-text-secondary, lch(61.803% 1.2 272));
}

.qi-kbd-group--subtle .qi-kbd {
    border-color: color-mix(in srgb, currentColor 16%, transparent);
    font-weight: 450;
}

/* ── Fuzzy date picker — Linear's variable-precision target-date panel (measured @1728 light):
   304px panel, 16.5px inset, 32px parse input, 28px precision pills 6px apart, year sections
   (62px pitch) of centred 24px period pills, 26px circle-day calendar. Selected = accent pill,
   current period = soft pill. ─────────────────────────────────────────────────────────────── */
.fuzzy-date-picker {
    display: flex;
    width: 304px;
    padding: 16.5px;
    box-sizing: border-box;
    flex-direction: column;
}

.fuzzy-date-picker__title {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 14.5px;
    color: var(--shell-text-secondary, lch(40% 1 282));
}

.fuzzy-date-picker__input {
    height: 32px;
    padding: 6px 12px;
    box-sizing: border-box;
    border: 0.5px solid var(--shell-border, lch(86.5% 0 282));
    border-radius: 8px;
    background: var(--shell-bg-surface, lch(100% 0 282));
    color: var(--shell-text-primary, lch(10% 0 282));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    outline: none;
}

.fuzzy-date-picker__input:focus {
    border-color: var(--shell-accent, lch(53% 52.26 286.91));
}

.fuzzy-date-picker__tabs {
    display: flex;
    margin-top: 12px;
    gap: 6px;
}

.fuzzy-date-picker__tab {
    height: 28px;
    padding: 4px 7px;
    border: 0;
    border-radius: 9999px;
    background: var(--fuzzy-date-tab-bg, var(--button-tab-bg, var(--shell-bg-surface-button)));
    /* Linear draws the pill outline as a hairline ring + soft elevation (::after chrome). */
    box-shadow: lch(0 0 0 / 0.088) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.02) 0 1px 1px 0;
    color: var(--shell-text-secondary, lch(40% 1 282));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}

.fuzzy-date-picker__tab:hover {
    background: var(--shell-bg-hover, lch(93% 0.5 272));
    color: var(--shell-text-primary, lch(10% 0 282));
}

.fuzzy-date-picker__tab--selected,
.fuzzy-date-picker__tab--selected:hover {
    background: var(--fuzzy-date-tab-selected-bg, var(--button-tab-active-bg));
    color: var(--shell-text-primary, lch(10% 0 282));
}

/* Full-bleed hairline between the precision row and the body (measured lch(91.9)). */
.fuzzy-date-picker__divider {
    height: 0;
    margin: 14px -16.5px 0;
    border-top: 0.5px solid var(--shell-border-subtle, var(--shell-border));
}

/* The scroller bleeds 4.5px past the content on both sides so the thin scrollbar sits in the
   gutter, options staying at content width (measured: scroller 279 vs content 271). */
.fuzzy-date-picker__body {
    height: 198px;
    margin: 0 -4.5px;
    padding: 10px 4.5px 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.fuzzy-date-picker__section {
    margin-bottom: 15.5px;
}

.fuzzy-date-picker__section--year {
    margin-bottom: 8px;
}

.fuzzy-date-picker__year-label {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 14.5px;
    color: var(--shell-text-secondary, lch(40% 1 282));
    text-align: left;
}

.fuzzy-date-picker__grid {
    display: grid;
    gap: 8px;
}

.fuzzy-date-picker__grid--half { grid-template-columns: repeat(2, 1fr); }
.fuzzy-date-picker__grid--quarter { grid-template-columns: repeat(4, 1fr); }
.fuzzy-date-picker__grid--month { grid-template-columns: repeat(3, 1fr); }

.fuzzy-date-picker__option {
    display: flex;
    width: 100%;
    height: 24px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: var(--fuzzy-date-tab-bg, var(--button-tab-bg, var(--shell-bg-surface-button)));
    /* Same hairline ring + soft elevation chrome as the precision pills. */
    box-shadow: lch(0 0 0 / 0.088) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.02) 0 1px 1px 0;
    color: var(--shell-menu-text, lch(20% 1 282));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: default;
}

.fuzzy-date-picker__option:hover {
    background: var(--fuzzy-date-current-bg, var(--shell-menu-item-hover));
}

/* The period containing "today" wears a soft pill even unselected (measured lch(94.5)). */
.fuzzy-date-picker__option--current {
    background: var(--fuzzy-date-current-bg, var(--shell-menu-item-hover));
}

/* The value converted into ANOTHER precision: grey fill + accent ring (Linear). */
.fuzzy-date-picker__option--derived,
.fuzzy-date-picker__option--derived:hover {
    background: var(--fuzzy-date-current-bg, var(--shell-menu-item-hover));
    box-shadow: 0 0 0 1px var(--shell-accent, lch(53% 52.26 286.91 / 0.65)),
        lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.02) 0 1px 1px 0;
}

/* The value at its OWN precision: solid accent pill. */
.fuzzy-date-picker__option--selected,
.fuzzy-date-picker__option--selected:hover {
    background: var(--shell-accent, lch(53% 52.26 286.91));
    box-shadow: none;
    color: lch(100% 5 286.91);
}

.fuzzy-date-picker__cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-menu-text, lch(20% 1 282));
}

.fuzzy-date-picker__cal-nav-group {
    display: inline-flex;
    gap: 4px;
}

.fuzzy-date-picker__cal-nav {
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary, lch(40% 1 282));
    cursor: default;
}

.fuzzy-date-picker__cal-nav:hover {
    background: var(--shell-bg-hover, lch(94.5% 0 282));
    color: var(--shell-text-primary, lch(10% 0 282));
}

.fuzzy-date-picker__cal-nav-flip {
    display: inline-flex;
    transform: scaleX(-1);
}

.fuzzy-date-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 10px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--shell-border-subtle, var(--shell-border));
    font-size: 13px;
    color: var(--shell-text-secondary, lch(40% 1 282));
    text-align: center;
}

.fuzzy-date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 8px;
    row-gap: 8px;
}

.fuzzy-date-picker__day {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--shell-menu-text, lch(20% 1 282));
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    justify-self: center;
    cursor: default;
}

.fuzzy-date-picker__day:hover {
    background: var(--shell-bg-hover, lch(94.5% 0 282));
}

.fuzzy-date-picker__day--outside {
    opacity: 0.3;
}

/* Weekends stay muted even inside the month (measured lch(66)). */
.fuzzy-date-picker__day--weekend {
    color: var(--shell-text-muted, lch(66% 1 282));
}

.fuzzy-date-picker__day--today {
    background: var(--fuzzy-date-current-bg, var(--shell-menu-item-hover));
}

.fuzzy-date-picker__day--selected,
.fuzzy-date-picker__day--selected:hover {
    background: var(--shell-accent, lch(53% 52.26 286.91));
    color: lch(100% 5 286.91);
}

.fuzzy-date-picker__clear {
    height: 28px;
    margin-top: 4px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary, lch(40% 1 282));
    font-family: inherit;
    font-size: 0.75rem;
    text-align: left;
    cursor: default;
}

.fuzzy-date-picker__clear:hover {
    background: var(--shell-bg-hover, lch(94.5% 0 282));
    color: var(--shell-text-primary, lch(10% 0 282));
}

/* ── Tile card — Linear's drafts card surface (measured @1728 light): 140px anchor tile,
   radius 10, hairline border, hover tint + soft shadow, hover-revealed actions. ──────────── */
.tile-card {
    display: flex;
    height: 140px;
    padding: 12px 16px 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--tile-card-border, var(--shell-border));
    border-radius: 10px;
    background: var(--tile-card-bg, var(--shell-bg-surface));
    color: var(--shell-text-primary);
    text-decoration: none;
    cursor: default;
}

.tile-card:hover,
.tile-card:focus-visible {
    background: var(--tile-card-hover-bg, var(--shell-bg-hover));
    box-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
    outline: none;
}

.tile-card__header {
    display: flex;
    align-items: center;
    min-height: 28px;
    flex: none;
    gap: 8px;
}

.tile-card__title {
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tile-card__hint {
    flex: none;
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--shell-text-secondary);
}

.tile-card__actions {
    display: inline-flex;
    margin-left: auto;
    flex: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.tile-card:hover .tile-card__actions,
.tile-card:focus-within .tile-card__actions {
    opacity: 1;
}

.tile-card__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    line-height: 21px;
    color: var(--shell-text-secondary);
}

.tile-card__body p {
    margin: 0;
}

/* Nested quote panel (Linear comment drafts): top-rounded bordered surface that bleeds past the
   card's clipped bottom edge; header band with divider, then the quoted body. */
.tile-card__panel {
    display: flex;
    flex-direction: column;
    margin: 5px 0 -16px;
    flex: none;
    border: 0.5px solid var(--tile-card-border, var(--shell-border));
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.tile-card__panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--tile-card-border, var(--shell-border));
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--shell-text-secondary);
}

.tile-card__panel-body {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 21px;
    color: var(--shell-text-secondary);
}

.tile-card__panel-body p {
    margin: 0;
}

/* Labelled tile band (Linear drafts sections). */
.tile-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tile-section__label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    color: var(--shell-text-secondary);
}

/* Fixed-width tracks for AutoFill/AutoFit grids (Linear card grids keep exact card widths). */
.layout-grid--fixed-items.layout-grid--autofill,
.layout-grid--fixed-items.layout-grid--autofit {
    grid-template-columns: repeat(auto-fill, min(100%, var(--layout-grid-fixed-item-width, 240px)));
}

/* Stacked tile sections breathe like Linear's drafts bands. */
.tile-section + .tile-section {
    margin-top: 32px;
}

/* ── Full-page agent chat (measured …/agent, classic dark @1728; logo watermark omitted) ── */
.assistant-chat-surface__switcher-scope {
    position: relative;
    display: inline-flex;
}

.assistant-chat-surface__switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    /* Pull flush into the title-bar's left gutter so the pill sits in the corner like Linear. */
    margin-left: -8px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: var(--pointer, pointer);
}

.assistant-chat-surface__switcher-label {
    font-size: 0.8125rem;
    font-weight: 500;
}

.assistant-chat-surface__title-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

.assistant-chat-surface__options-scope {
    position: relative;
    display: inline-flex;
}


.assistant-chat-surface__switcher:hover,
.assistant-chat-surface__switcher:focus-visible {
    background: var(--shell-bg-hover);
    outline: none;
}

.assistant-chat-surface__switcher-scope .anchored-popover__positioner {
    top: 32px;
    left: 9px;
    right: auto;
}

.assistant-chat-surface__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
}

.assistant-chat-surface__body--empty {
    justify-content: center;
}

.assistant-chat-surface__messages {
    display: flex;
    flex-direction: column;
    width: 712px;
    max-width: calc(100% - 32px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

/* Linear's inter-message rhythm (~16px group spacing, measured); also keeps the 9px
   anchor band above a just-sent message inside empty space instead of the previous
   reply's tail. Padding stays the surface's own. */
.assistant-chat-surface__messages.chat-transcript {
    --assistant-user-message-max-width: 75%;
    gap: 16px;
    padding: 12px 0;
}

/* Full-page bubbles run Linear's larger geometry (measured: 8px radius, 8/12 padding). */
.assistant-chat-surface__messages .assistant-message__bubble {
    border-radius: 8px;
    padding: 8px 12px;
}

.assistant-chat-surface__messages::-webkit-scrollbar {
    display: none;
}

.assistant-chat-surface__composer {
    width: 712px;
    max-width: calc(100% - 32px);
    flex: 0 0 auto;
}

.assistant-chat-surface__body--chat .assistant-chat-surface__composer {
    padding-bottom: 16px;
}

/* Conversation state runs Linear's wider column (measured 821) with the larger composer card
   (128 min, 14/18 padding) and 15px/24 transcript text; the empty state keeps the 712 card. */
.assistant-chat-surface__body--chat .assistant-chat-surface__messages,
.assistant-chat-surface__body--chat .assistant-chat-surface__composer {
    width: 821px;
}

.assistant-chat-surface__body--chat .assistant-chat-surface__composer .message-composer {
    min-height: 128px;
    padding: 12px;
}

.assistant-chat-surface__messages {
    font-size: 0.9375rem;
    line-height: 1.5rem;
}

.assistant-chat-surface__messages .assistant-message__text,
.assistant-chat-surface__messages .assistant-message__assistant-text {
    font-size: 0.9375rem;
    line-height: 1.5rem;
}

/* The measured card chrome: raised surface, radius 10, the pane's 0.3 shadow; 15px input. */
.assistant-chat-surface__body {
    --assistant-user-message-bg: var(--assistant-page-user-message-bg, var(--shell-bg-sidebar));
    --assistant-panel-bg: var(--assistant-panel-shell-bg, var(--shell-menu-bg));
    --assistant-panel-raised-bg: var(--assistant-panel-content-bg, var(--shell-bg-active));
    --assistant-panel-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --assistant-panel-border: var(--assistant-border, var(--shell-border));
    --assistant-panel-text: var(--shell-text-primary);
    --assistant-panel-muted: var(--shell-text-secondary);
    --assistant-panel-soft: var(--shell-menu-text, var(--shell-text-tertiary));
}

.assistant-chat-surface__composer .message-composer {
    width: 100%;
    max-width: none;
    min-height: 104px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    text-align: left;
    background: var(--assistant-composer-bg, var(--shell-bg-active));
    border-radius: 10px;
    box-shadow: var(--assistant-panel-shadow, lch(0 0 0 / 0.3) 0 0.5px 1px 1px);
}

.assistant-chat-surface__composer .message-composer__editor-row,
.assistant-chat-surface__composer .message-composer__editor-host {
    width: 100%;
}

/* The full-page card is fluid: every strip spans the composer content instead of the
   dock's fixed inner width, so attachments start at the editor's left edge and wrap
   from there (multiple cards wrap from the same edge). */
.assistant-chat-surface__composer .message-composer__attachments,
.assistant-chat-surface__composer .message-composer__header,
.assistant-chat-surface__composer .message-composer__footer,
.assistant-chat-surface__composer .message-composer__action-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.assistant-chat-surface__composer .message-composer__attachments {
    justify-content: flex-start;
    padding: 0;
}

.assistant-chat-surface__composer .message-composer__action-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.assistant-chat-surface__composer .message-composer [contenteditable],
.assistant-chat-surface__composer .message-composer textarea {
    font-size: 0.9375rem;
    font-weight: 450;
}

/* ── Guard dialog: a small confirm stacked OVER the current app modal (Linear's
   "Save to drafts?" — measured 480w / radius 12 / the app-modal shadow trio).
   The app-modal shell's will-change makes it the containing block for position:fixed,
   so the inset is card-relative: 177px under the card top = Linear's measured 299px. ── */
.modal-guard-dialog {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 177px 12px 0;
}

.modal-guard-dialog__backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.modal-guard-dialog__card {
    position: relative;
    width: 100%;
    max-width: 480px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--app-modal-shadow);
}

/* Measured guard buttons run larger than the stock dialog family: 32px / 13px / pad 0 12. */
.modal-guard-dialog .modal-dialog-content__actions .ui-button--control {
    height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

/* Three-action dialogs pin the alternate action bottom-left (Linear's Discard / Undo changes). */
.modal-dialog-content__actions--split .modal-dialog-content__action--start {
    margin-right: auto;
}

/* ── Create-modal shell: the measured Linear new-issue body (see linear-new-issue-modal-spec).
   Renders inside .app-modal-shell; ModalHost owns card chrome + expand/close actions. ── */
/* Three-zone layout bounded to the viewport: header, title and footer stay fixed, only the
   description region scrolls. Both height bounds track the CURRENT insets (written by the
   modal host) and transition with the resize tokens, so expand animates height in step with
   the width/inset moves instead of snapping. */
.create-modal-shell {
    display: flex;
    flex-direction: column;
    min-height: min(
        var(--app-modal-current-min-height, 260px),
        calc(100dvh - var(--app-modal-current-top-inset, 122px) - var(--app-modal-current-bottom-inset, 122px)));
    max-height: calc(100dvh - var(--app-modal-current-top-inset, 122px) - var(--app-modal-current-bottom-inset, 122px));
    color: var(--shell-menu-text);
    transition:
        min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        max-height var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

/* Height-animation states driven by create-modal-shell.js. */
.create-modal-shell--animating {
    overflow: hidden;
}

.create-modal-shell--no-transition {
    transition: none;
}

.create-modal-shell__header,
.create-modal-shell__chip-row,
.create-modal-shell__footer {
    flex: 0 0 auto;
}

/* The single scrolling zone; the negative margin parks the scrollbar at the modal edge and
   the padding restores the 18px text gutter. */
.create-modal-shell__description-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -18px;
    padding: 0 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 12px frame; 16px below the 24px content row; right inset clears the two 28px window
   actions (12 + 28 + 6 + 28 + 6). */
.create-modal-shell__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 80px 16px 12px;
}

.create-modal-shell__separator {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1;
    color: var(--shell-text-secondary);
}

.create-modal-shell__label {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    color: var(--create-modal-label-text, lch(20 1 282));
    white-space: nowrap;
}

.create-modal-shell__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Dirty-state header pill ("Save as draft"): 24px raised text pill. */
.create-modal-shell__header-actions .ui-button {
    height: 24px;
    padding: 0 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--shell-text-primary);
}

.create-modal-shell__editors {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    padding: 0 18px;
}

.create-modal-shell__editors .editable-title-field {
    flex: 0 0 auto;
}

/* Title: measured 18px/600, 1.6 line-height, flush (no field chrome). */
.create-modal-shell__title.editable-title-field {
    width: 100%;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 30px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

.create-modal-shell__title.editable-title-field:focus {
    outline: none;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* Measured placeholder tier: Linear's editors hint at lch(66) — well above tertiary. */
.create-modal-shell__title.editable-title-field::placeholder {
    color: var(--create-modal-placeholder, lch(66% 1 282));
}

.create-modal-shell .ui-form__rich-text-content--empty:first-child::before,
.create-modal-shell .ui-form__rich-text-content p.is-empty::before {
    color: var(--create-modal-placeholder, lch(66% 1 282));
}

.create-modal-shell__chip-row {
    --chip-raised-bg: var(--create-issue-chip-bg, var(--shell-menu-bg, var(--shell-bg-surface, transparent)));
    --chip-raised-value-color: var(--create-issue-chip-value-color, inherit);
    --chip-raised-placeholder-color: var(--create-issue-chip-placeholder-color, inherit);
    --chip-raised-font-weight: var(--create-issue-chip-font-weight, 500);
    --chip-raised-line-height: var(--create-issue-chip-line-height, 1);
    --chip-raised-border: var(--create-issue-chip-border, 0);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 12px;
}

.create-modal-shell__sections {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

/* Footer attach glyph: measured var(--shell-create-text-secondary, lch(40% 1 282)) at 16px. */
.create-modal-shell__footer-start .ui-icon-button {
    color: var(--shell-text-secondary);
}

.create-modal-shell__message {
    padding: 0 12px 8px;
    font-size: 0.75rem;
    color: var(--shell-text-secondary);
}

.create-modal-shell__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px;
}

.create-modal-shell__footer-start {
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-modal-shell__footer-end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.create-modal-shell__create-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.create-modal-shell__create-more-label {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--shell-text-secondary);
    user-select: none;
}

/* Compact 22×14 switch (measured; the settings toggle is 30×20). */
.create-modal-shell__create-more-switch.ui-form__toggle {
    width: auto;
    gap: 0;
}

.create-modal-shell__create-more-switch .ui-form__toggle-input {
    width: 22px;
    height: 14px;
    background: var(--ui-toggle-compact-off-bg, var(--ui-toggle-off-bg));
}

.create-modal-shell__create-more-switch .ui-form__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--shell-accent));
}

.create-modal-shell__create-more-switch .ui-form__toggle-input::after {
    left: 2px;
    width: 10px;
    height: 10px;
}

.create-modal-shell__create-more-switch .ui-form__toggle-input:checked::after {
    left: 10px;
}

/* Primary action: measured 28px full-radius accent pill, 12px/500, soft two-layer shadow. */
.create-modal-shell__primary.ui-button--primary {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-accent);
    color: var(--shell-accent-contrast);
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
}

/* Header context chips (the team crumb): tighter left pad + near-black 450 label (measured). */
.create-modal-shell__header .chip--raised {
    padding: 0 8px 0 5px;
}

.create-modal-shell__header .chip--raised .chip__label {
    font-weight: 450;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
}

/* ── Create-modal panel: the shared sub-issue / milestone card (measured on both
   modals): card on the lch(98.557) fill, 0.5px lch(88.4) border, radius 12; the
   composer replaces the list while open; chips inside pick the panel fill via
   --chip-raised-bg. ── */
.create-modal-panel {
    display: flex;
    flex-direction: column;
    margin: 0 12px;
    border: 0.5px solid var(--shell-create-panel-border, lch(88.4% 0 282));
    border-radius: 12px;
    background: var(--shell-create-panel-bg, lch(98.557% 0 282));
    --chip-raised-bg: var(--shell-create-panel-bg, lch(98.557% 0 282));
}

.create-modal-panel__header {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px 6px 6px;
}

.create-modal-panel__header-label {
    padding: 6px;
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
}

.create-modal-panel__header-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    cursor: default;
}

.create-modal-panel__header-count {
    font-size: 0.6875rem;
    font-weight: 450;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
    border-radius: 4px;
}

.create-modal-panel__header-chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    transform: rotate(-90deg);
    transition: transform 120ms ease;
}

.create-modal-panel__header-chevron--open {
    transform: rotate(0deg);
}

/* Row: measured 43h, radius 10, pad 3 8 3 16; status 24, title 13/500, trailing avatar 18. */
.create-modal-panel__row {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 3px 8px 3px 16px;
    border-radius: 10px;
}

.create-modal-panel__row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: lch(70.313% 3.577 260.65);
    flex: 0 0 auto;
}

.create-modal-panel__row-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 12px 0 4px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.create-modal-panel__row:hover {
    background: var(--shell-create-row-hover, lch(96.4% 0 282));
}

/* Six-dot drag grip (the shared Linear grip language), revealed on row hover in the
   left gutter without shifting layout. */
.create-modal-panel__row-grip {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    grid-template-columns: repeat(2, 2px);
    grid-template-rows: repeat(3, 2px);
    gap: 2px;
    opacity: 0;
    transition: opacity 100ms ease;
    cursor: grab;
}

.create-modal-panel__row:hover .create-modal-panel__row-grip {
    opacity: 1;
}

.create-modal-panel__row-grip > span {
    width: 2px;
    height: 2px;
    border-radius: 9999px;
    background: var(--shell-create-text-muted, lch(63.69% 1 282));
}

.create-modal-panel__row-trailing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--shell-create-text-muted, lch(63.69% 1 282));
}

.create-modal-panel__row-assignee-chip .ui-avatar {
    width: 18px;
    height: 18px;
}

/* Composer: title row (status chip + 13/600 title), 15px description, then chips + actions. */
.create-modal-panel__composer {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 12px 12px;
}

.create-modal-panel__composer-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 2px 0 0;
}

/* Measured: the title-row status is a bare 24px round icon button — no raised ring. */
.create-modal-panel__composer-status {
    margin-left: -4px;
}

.create-modal-panel__composer-status .chip--icon-only {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border-radius: 9999px;
}

.create-modal-panel__composer-status .toggle-chip__button:hover .chip--icon-only,
.create-modal-panel__composer-status.toggle-chip--open .chip--icon-only {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__composer-title.editable-title-field {
    flex: 1 1 auto;
    min-height: 24px;
    padding: 3px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--shell-create-text-title, lch(9.65% 0 282));
}

.create-modal-panel__composer-title.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-panel__composer-description.editable-title-field {
    min-height: 66px;
    margin-bottom: 24px;
    padding: 0 0 0 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
}

.create-modal-panel__composer-description.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-panel__composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 28px;
    flex-wrap: nowrap;
}

.create-modal-panel__composer-chips {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.create-modal-panel__composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Raised round attach (the panel version carries the ring, unlike the main footer's). */
.create-modal-panel__composer-attach.ui-icon-button {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--shell-create-panel-bg, lch(98.557% 0 282));
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

.create-modal-panel__cancel {
    height: 24px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    cursor: default;
}

.create-modal-panel__cancel:hover {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__add {
    height: 24px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-accent, lch(53% 52.26 286.91));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--shell-accent-contrast, lch(100% 5 286.91));
    cursor: default;
}

.create-modal-panel__add:hover:not(:disabled) {
    background: lch(48% 52.26 286.91);
}

.create-modal-panel__add:disabled {
    opacity: 0.55;
}

.create-modal-panel__footer {
    display: flex;
    justify-content: flex-end;
    padding: 9px 8px 12px 0;
}

.create-modal-panel__reopen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    margin: 0;
    padding: 0 8px 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    cursor: default;
}

.create-modal-panel__reopen:hover {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__reopen-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

/* Drag-to-reorder: rows lift under the pointer; a 2px accent insertion line marks the drop slot
   (the shared sidebar/grouped-drag-list dnd language — Linear's visuals pending measurement). */
.create-modal-panel__row {
    position: relative;
}

.create-modal-panel__row--drop-before::before,
.create-modal-panel__row--drop-after::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    border-radius: 1px;
    background: var(--shell-accent, lch(53% 52.26 286.91));
}

.create-modal-panel__row--drop-before::before {
    top: -1px;
}

.create-modal-panel__row--drop-after::after {
    bottom: -1px;
}

/* Measured sub-composer placeholder tier. */
.create-modal-panel__composer-title.editable-title-field::placeholder,
.create-modal-panel__composer-description.editable-title-field::placeholder {
    color: var(--shell-create-text-muted, lch(63.69% 1 282));
}

/* Trailing row chips: 24px round hover targets (the stock icon-only chip's 4px-radius
   hover box reads wrong on the panel rows). */
.create-modal-panel__row-trailing .toggle-chip .chip--icon-only {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border-radius: 9999px;
}

.create-modal-panel__row-trailing .toggle-chip__button:hover .chip--icon-only,
.create-modal-panel__row-trailing .toggle-chip--open .chip--icon-only {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}


/* Divided footer variant (the project modal's measured hairline above Cancel/Create). */
.create-modal-shell--divided-footer .create-modal-shell__footer {
    border-top: 0.5px solid var(--shell-create-hairline, lch(86.5% 0 282));
    padding-top: 12px;
}

/* Fill variant: the create-project modal opens at FULL height (measured: the 63px-inset
   viewport bound with a 564px document area on a fresh open) instead of content-sizing. */
.create-modal-shell--fill {
    min-height: calc(100dvh - var(--app-modal-current-top-inset, 122px) - var(--app-modal-current-bottom-inset, 122px));
}

/* ── Promoted from the create-modal example mocks (sign-off pass): the document-layout
   family (create-modal-doc), the form-mode family (create-modal-form), panel item rows /
   entry composer, and shared header bits. Examples now hold markup + mock data only. ── */
/* Team crumb mark: Linear renders the 12px team glyph inside a 16px rounded container. */
.create-modal-shell__team-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 8px;
}

/* Cycle chip: measured 32×24 (unlike the 24px "…" chip, it keeps full horizontal padding). */
.toggle-chip--wide-glyph .chip--raised:not(:has(.chip__label)) {
    min-width: 32px;
}


/* ── Form mode (measured): 479px card; each field = 13/500 label (+12/500 lch(66)
   "(optional)"), bordered 32h radius-8 control, 13px text; instructions are bare copy. ── */
.create-modal-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 0 12px;
}

.create-modal-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-modal-form__label-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.create-modal-form__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(20% 1 282));
}

.create-modal-form__optional {
    font-size: 12px;
    font-weight: 500;
    color: var(--shell-create-placeholder, lch(66% 1 282));
}

.create-modal-form__instructions {
    margin: 0;
    font-size: 13px;
    font-weight: 450;
    color: var(--shell-create-text-secondary, lch(40% 1 282));
}

.create-modal-form__control {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-create-hairline, lch(86.5% 0 282));
    border-radius: 8px;
    background: var(--shell-create-field-bg, lch(100% 0 282));
    font: inherit;
    font-size: 13px;
    color: var(--shell-create-text-title, lch(10% 0 282));
    box-sizing: border-box;
}

.create-modal-form__control::placeholder {
    color: var(--shell-create-placeholder, lch(66% 1 282));
}

.create-modal-form__control:focus {
    outline: none;
    border-color: var(--shell-create-field-focus-border, lch(70% 1 282));
}

.create-modal-form__control--invalid {
    border-color: lch(55% 65 30);
}

.create-modal-form__error {
    font-size: 12px;
    color: lch(55% 65 30);
}

.create-modal-form__textarea {
    height: auto;
    min-height: 55px;
    padding: 8px 12px;
    resize: vertical;
}

.create-modal-form__checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-modal-form__check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 450;
    color: var(--shell-create-text-primary, lch(20% 1 282));
    cursor: default;
}

.create-modal-form__check input {
    width: 12px;
    height: 12px;
    margin: 0;
}

.create-modal-form__select-chip {
    width: 100%;
}

.create-modal-form__select-chip .toggle-chip__button {
    width: 100%;
}

.create-modal-form__select {
    justify-content: space-between;
    gap: 8px;
    cursor: default;
}

.create-modal-form__select-placeholder {
    color: var(--shell-create-placeholder, lch(66% 1 282));
    font-weight: 400;
}

.create-modal-form__select-chevron {
    width: 14px;
    height: 14px;
    color: var(--shell-create-text-secondary, lch(40% 1 282));
    flex: 0 0 auto;
}

.create-modal-form__file {
    cursor: default;
}

/* Template chip in the header: primary-tier text like measured (header-qualified to
   outrank the generic header raised-chip label rule). */
.create-modal-shell__header .create-modal-shell__template-chip .chip__label {
    color: var(--shell-create-text-primary, lch(20% 1 282));
}

/* Project-modal body (measured): icon picker 28×28 radius 4 tinted, 24px name, 15px summary,
   the chip row inline under the summary, then the document area. The shell's title slot hosts
   the whole cluster; the milestones panel rides the shared create-modal-panel family. */
.create-modal-doc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* shell editors pad 18 + 10 here = Linear's measured 28px content inset on the 920 card */
    padding: 12px 10px 0;
}

.create-modal-doc__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.create-modal-doc__name-row .create-modal-doc__name.editable-title-field {
    flex: 1 1 auto;
}

.create-modal-doc__icon-trigger {
    display: inline-flex;
    flex: 0 0 auto;
}

.create-modal-doc__icon-trigger .icon-color-picker__trigger-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    cursor: default;
}

.create-modal-doc__icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--shell-create-icon-bg, lch(78.247% 3.577 260.65 / 0.35));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.create-modal-doc__name.editable-title-field {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--shell-create-text-title, lch(9.65% 0 282));
}

.create-modal-doc__name.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-doc__name.editable-title-field::placeholder,
.create-modal-doc__summary.editable-title-field::placeholder {
    color: var(--shell-create-placeholder, lch(66% 1 282));
}

.create-modal-doc__summary.editable-title-field {
    width: 100%;
    padding: 0 0 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 450;
    color: var(--shell-create-text-primary, lch(20% 1 282));
}

.create-modal-doc__summary.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-doc__chips {
    --chip-raised-bg: var(--create-project-chip-bg, var(--shell-menu-bg, var(--shell-bg-surface, transparent)));
    --chip-raised-value-color: var(--create-project-chip-value-color, inherit);
    --chip-raised-placeholder-color: var(--create-project-chip-placeholder-color, inherit);
    --chip-raised-font-weight: var(--create-project-chip-font-weight, 500);
    --chip-raised-line-height: var(--create-project-chip-line-height, 1);
    --chip-raised-border: var(--create-project-chip-border, 0);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 2px 0 4px;
}

/* Measured: a 0.5px lch(86.5) hairline separates the chip row from the document area,
   with 24px below it before the text. */
.create-modal-doc__document {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px 10px 0;
    border-top: 0.5px solid var(--shell-create-hairline, lch(86.5% 0 282));
    padding-top: 16px;
}

.create-modal-doc__document .create-modal-doc__editor {
    flex: 0 0 auto;
    margin: 0 0 12px;
}

/* Pinned to the scroll-area bottom (measured), with breathing room under it. */
/* Bottom gap equals the side inset (16px), per real Linear; -2px widens the panel from the
   editors' 18px pad to the measured 16px card inset. */
.create-modal-panel--pinned {
    margin: auto -2px 16px;
}

/* Milestones header: pill toggle + the side "Add" round button (measured 24×24 at row end). */
.create-modal-panel__header--split {
    justify-content: space-between;
}

.create-modal-panel__header-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
    cursor: default;
    flex: 0 0 auto;
}

.create-modal-panel__header-add:hover {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__header-add svg {
    width: 14px;
    height: 14px;
}

/* Milestone rows: measured 42h — glyph 16 (x+16), name 13/450 lch(19.3), trailing date glyph +
   always-visible 24×24 remove. */
.create-modal-panel__item-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px 0 16px;
    gap: 8px;
}

.create-modal-panel__item-row:hover {
    background: var(--shell-create-row-hover, lch(96.4% 0 282));
}

.create-modal-panel__item-row--drop-before::before,
.create-modal-panel__item-row--drop-after::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    border-radius: 1px;
    background: var(--shell-accent, lch(53% 52.26 286.91));
}

.create-modal-panel__item-row--drop-before::before { top: -1px; }
.create-modal-panel__item-row--drop-after::after { bottom: -1px; }

.create-modal-panel__item-glyph {
    display: inline-flex;
    color: var(--shell-create-text-muted, lch(63.69% 1 282));
    flex: 0 0 auto;
}

.create-modal-panel__item-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 13px;
    font-weight: 450;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.create-modal-panel__item-meta {
    display: inline-flex;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
    flex: 0 0 auto;
}

.create-modal-panel__item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
    cursor: default;
    flex: 0 0 auto;
}

.create-modal-panel__item-remove:hover {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__item-remove svg {
    width: 14px;
    height: 14px;
}

/* Composer (measured): body pad 0 12 13 16, name row 43h with glyph + 13/600 name + 28×28
   radius-8 date button; description 15px; right-aligned Cancel + Add milestone 24px pills. */
.create-modal-panel__entry-composer {
    display: flex;
    flex-direction: column;
    padding: 0 12px 13px 16px;
}

.create-modal-panel__entry-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 43px;
}

.create-modal-panel__entry-name.editable-title-field {
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--shell-create-text-title, lch(9.65% 0 282));
}

.create-modal-panel__entry-name.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-panel__entry-name.editable-title-field::placeholder,
.create-modal-panel__entry-description.editable-title-field::placeholder {
    color: var(--shell-create-text-muted, lch(63.69% 1 282));
}

.create-modal-panel__entry-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-create-text-secondary, lch(38.6% 1 282));
    cursor: default;
    flex: 0 0 auto;
}

.create-modal-panel__entry-side:hover {
    background: var(--shell-create-hover-bg, lch(93.5% 0 282));
}

.create-modal-panel__entry-description.editable-title-field {
    min-height: 66px;
    margin: 0 0 16px;
    padding: 0 0 0 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 400;
    color: var(--shell-create-text-primary, lch(19.3% 1 282));
}

.create-modal-panel__entry-description.editable-title-field:focus {
    outline: none;
    box-shadow: none;
}

.create-modal-panel__entry-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 24px;
}

/* Footer: measured hairline divider + right-aligned Cancel/Create project 28px pills. */
.create-modal-shell__secondary {
    height: 28px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9999px;
    position: relative;
    background: var(--shell-menu-bg, lch(100% 0 282));
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--shell-create-text-primary, lch(20% 1 282));
    cursor: default;
    box-shadow: var(--shell-control-raised-shadow, lch(0 0 0 / 0.09) 0 0 0 0.5px, lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0);
}

.create-modal-shell__secondary:hover {
    background: var(--shell-create-hover-bg-strong, lch(95.886% 0 282));
}

/* ── Agent session panel ──────────────────────────────────────────────────────────
   Linear's issue-page agent rail, measured at 560px: themed surface (8px radius),
   two-line header, quiet 12px feed typography, bordered notice cards, footer slot. */
.agent-session-panel {
    /* Light themes render the pop-out on the content white (Linear), dark on the shell bg. */
    --assistant-panel-bg: var(--agent-session-panel-bg, var(--assistant-panel-shell-bg, var(--shell-menu-bg)));
    --assistant-panel-raised-bg: var(--assistant-panel-content-bg, var(--shell-bg-active));
    --assistant-panel-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --assistant-panel-border: var(--assistant-border, var(--shell-border));
    /* Measured pop-out text tiers: title/labels 91.636 (classic-dark), muted 66.544. */
    --assistant-panel-text: var(--agent-surface-text, var(--shell-text-primary));
    --assistant-panel-muted: var(--agent-surface-muted, var(--shell-text-secondary));
    --assistant-panel-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100%;
    height: 100%;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 8px;
    background: var(--assistant-panel-bg);
    color: var(--assistant-panel-text);
    box-shadow: var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    overflow: hidden;
}

/* Measured Linear pop-out header (JAM-153): 62px tall — padding 4px 6px 0 10px, heading padded
   6px 0 12px 6px with an 8px gap between the 16px title line and the 16px identity line;
   round 28px actions at the right with a 2px gap. */
/* Two stacked rows: the title row (title + round actions, 28px so the buttons set its height)
   and the full-width identity row 2px under it — the measured geometry (title at y10, identity
   at y34, 12px under it) unchanged, but the identity row now spans the whole header so the
   branch pill can sit at the far right, in line with the actions. */
.agent-session-panel__header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 12px 10px;
}

.agent-session-panel__heading {
    display: flex;
    min-width: 0;
    min-height: 28px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 0 0 0 6px;
}

.agent-session-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px;
    overflow: hidden;
    color: var(--assistant-panel-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Measured JAM-153 header second line: after the agent name, the model label — 12/500 muted in
   an 18px pill (padding 2px 6px, radius 6, no fill), 5px gap, not interactive. */
.agent-session-panel__model {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 0; /* the identity row's 5px gap is the measured spacing */
    padding: 2px 6px;
    box-sizing: border-box;
    /* Measured 2026-09-08 on Linear's review pop-out (light): 0.5px hairline lch(86.5 0 282) — the
       panel border tier — radius 6, no fill. The reasoning and branch pills share it. */
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap;
}

/* Header metadata pills after the model: the same measured 18px pill, the branch one with a
   12px branch glyph. On a narrow panel the model and branch pills give way first (they
   truncate down to a readable minimum) and the short reasoning pill never collapses, so the
   identity row stays one line and never runs into the header actions. */
.agent-session-panel__model {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-session-panel__model--branch {
    gap: 4px;
    min-width: 72px;
    max-width: 220px;
    /* The branch rides the far right of the identity row. */
    margin-left: auto;
}

.agent-session-panel__model--reasoning {
    flex: 0 0 auto;
    max-width: 120px;
}

.agent-session-panel__model-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-session-panel__model .shell-icon {
    flex: 0 0 auto;
}

.agent-session-panel__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    padding-left: 6px;
    height: 16px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 16px;
}

.agent-session-panel__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.agent-session-panel__actions .ui-icon-button {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
}

.agent-session-panel__feed {
    --assistant-user-message-max-width: 75%;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    /* Measured: first feed row 4px under the header, 8px side inset, 20px below the last row. */
    padding: 4px 8px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.agent-session-panel__feed::-webkit-scrollbar {
    display: none;
}

.agent-session-panel__footer {
    flex: 0 0 auto;
    /* Measured: composer section padded 0 8px 8px. */
    padding: 0 8px 8px;
}

/* Measured session composer card: 906×71.8 — 0.5px ring, padding 6px 8px 8px 2px inside it
   (editor 2.5px from the left edge, actions flush to the 8.5px right/bottom inset). */
.agent-session-panel__footer .message-composer--fluid.assistant-composer {
    min-height: 71.8px;
    padding: 6.5px 8.5px 8.5px 2.5px;
    border-radius: 8px;
}

.agent-session-panel__footer .message-composer--fluid .assistant-composer__action-row {
    padding: 0;
}


/* Agent session pop-out host (measured Linear JAM-153 "Agent chat"): fixed overlay inset 6px from
   the viewport's top/right/bottom, 560px default (inline px, user-resizable; max = viewport − 12), z 250, covering the properties rail; dock-panel
   chrome (shell bg, 0.5px border, radius 8, three-layer shadow) with the raised surface inside;
   a left-edge resize handle. Enters like the side panel (opacity + 18px slide). */
.agent-session-overlay {
    position: fixed;
    top: var(--agent-session-overlay-inset, 6px);
    right: var(--agent-session-overlay-inset, 6px);
    bottom: var(--agent-session-overlay-inset, 6px);
    left: auto;
    /* Qui shell scale: above the assistant dock (720), below sidebars (740) and menus (760). */
    z-index: var(--agent-session-overlay-z, 730);
    display: flex;
    width: var(--agent-session-overlay-width, 560px);
    max-width: calc(100vw - 2 * var(--agent-session-overlay-inset, 6px));
    box-sizing: border-box;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 8px;
    background: var(--assistant-panel-shell-bg, var(--shell-menu-bg));
    box-shadow: var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    visibility: hidden;
    /* Visibility flips instantly on open (so the dialog can take focus the same frame it
       appears) and only after the fade on close. */
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 120ms ease,
        visibility 0s linear 120ms;
}

.agent-session-overlay[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

/* Measured Linear pop-out scrim (JAM-153, classic-dark): a fixed full-viewport layer one step
   under the dialog, lch(0 0 0 / 0.4) at opacity 0.95, pointer-events auto — clicking it
   dismisses the dialog (aria-modal). */
.agent-session-overlay__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--agent-session-overlay-z, 730) - 1);
    background: lch(0 0 0 / 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.agent-session-overlay__scrim[data-open="true"] {
    opacity: 0.95;
    pointer-events: auto;
}

/* Same handle as every other Qui resizable edge (.page-side-panel__resize-handle,
   .grid-sidebar__resize-handle, .split-view__divider): 7px hit area straddling the edge, the
   0.5px resize-guide hairline (radius 4, --shell-resize-guide-paint) fading in over 250ms on
   hover and snapping on while dragging. */
.agent-session-overlay__resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
}

.agent-session-overlay__resize-handle::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 0.5px;
    border-radius: 4px;
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.agent-session-overlay__resize-handle:hover::after,
.agent-session-overlay__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.agent-session-overlay[data-open="false"] .agent-session-overlay__resize-handle {
    pointer-events: none;
}

.agent-session-overlay__surface {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    overflow: clip;
    background: var(--assistant-panel-content-bg, var(--shell-bg-active));
}

.agent-session-overlay__surface > .agent-session-panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}

/* ⋯ options menu: the pop-out header's 28px round action, or the card's 24px muted button. */
.agent-session-options-menu {
    display: inline-flex;
    align-items: center;
}

.agent-session-options-menu .ui-icon-button {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
}

.agent-session-options-menu--card .ui-icon-button {
    width: 24px;
    height: 24px;
}

.agent-session-options-menu--card .shell-icon {
    color: var(--agent-surface-muted, var(--shell-text-secondary));
}

.agent-session-panel--flush {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Measured: 30.5px divider row — 8px vertical padding around a 12/500 line, centred, in a
   softer-than-secondary text (lch 44.798 classic-dark / 66 light). */
/* ---- Agent session feed rows (measured Linear JAM-145/JAM-150, 2026-09-05) ---- */

/* Collapsible activity group ("Worked for 2 minutes"). */
.agent-activity-log {
    display: flex;
    flex-direction: column;
}

.agent-activity-log__header {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 16px;
    gap: 6px;
    padding: 8px 0;
    margin: -8px 0;
    box-sizing: content-box;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
    outline: none;
}

.agent-activity-log__header:focus-visible {
    box-shadow: 0 0 0 1.5px var(--shell-accent);
    border-radius: 4px;
}

.agent-activity-log__disclosure,
.agent-activity-tool-row__disclosure,
.agent-activity-tool-group__disclosure {
    display: inline-flex;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    transition: transform 120ms ease;
}

.agent-activity-log--expanded > .agent-activity-log__header .agent-activity-log__disclosure,
.agent-activity-tool-row--expanded > .agent-activity-tool-row__summary .agent-activity-tool-row__disclosure,
.agent-activity-tool-group--expanded > .agent-activity-tool-group__header .agent-activity-tool-group__disclosure {
    transform: rotate(90deg);
}

.agent-activity-log__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
}

/* Thought / step text: 12/450 on 19.2 muted, 24px in; inline code is the measured mono chip. */
/* Non-final messages (commentary) are real messages: they render in the same text block as the
   final answer (same tier, size and markdown), in place between the work segments they seal;
   only the final answer gets the copy action and the reply controls. The segment headers they
   seal read "Worked" without a duration (interior); the tail keeps "Worked for N". */
.assistant-message__assistant-text--interim .assistant-message__part--commentary > :first-child {
    margin-top: 0;
}

.assistant-message__assistant-text--interim .assistant-message__part--commentary > :last-child {
    margin-bottom: 0;
}

.assistant-message__worked-duration--interior {
    cursor: pointer;
}

/* Collapsed interior segments name their last item (last tool / last thought) on one line. */
.assistant-message__worked-duration--interior .assistant-message__worked-duration-main {
    min-width: 0;
}

.assistant-message__worked-duration-text--last {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A sealed segment whose last item was a thought keeps the reasoning trace's left rule (the same
   2px rule the live reasoning line carries), so the collapsed header still reads as reasoning. */
.assistant-message__worked-duration-text--reasoning {
    border-left: 2px solid var(--assistant-panel-border);
    padding-left: 12px;
    font-weight: 450;
}

/* Text delivered whole (AssistantMessageDelivery.Whole) revealed as if streamed: each word (or
   block unit) fades in on its own delay; the DOM is restored to plain text afterwards. Hidden
   words keep their space, so the message's height is final from the first frame. */
.assistant-reveal .assistant-reveal__unit {
    opacity: 0;
    animation: assistant-reveal-unit 260ms ease-out forwards;
    animation-delay: var(--assistant-reveal-delay, 0ms);
}

@keyframes assistant-reveal-unit {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-reveal .assistant-reveal__unit {
        opacity: 1;
        animation: none;
    }
}

.agent-activity-thought {
    margin: 0;
    padding-left: 24px;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 19.2px;
    overflow-wrap: anywhere;
    /* Reasoning summaries arrive as paragraphs separated by blank lines: keep the breaks. */
    white-space: pre-line;
}

.agent-activity-thought code {
    padding: 0.5px 2.8125px;
    border-radius: 2.25px;
    background: lch(100 0 0 / 0.075);
    color: inherit;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 11.25px;
}

/* Tool call row: 16px tall, 10px in, gap 10; name 12/500 muted; args one clipped line. */
.agent-activity-tool-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px;
}

.agent-activity-tool-row__summary {
    display: flex;
    align-items: center;
    height: 16px;
    gap: 10px;
    min-width: 0;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
    outline: none;
}

.agent-activity-tool-row__summary:focus-visible {
    box-shadow: 0 0 0 1.5px var(--shell-accent);
    border-radius: 4px;
}

.agent-activity-tool-row__name {
    flex: 0 0 auto;
    white-space: nowrap;
}

.agent-activity-tool-row__arguments {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    font-size: 0.75rem;
    font-weight: 500;
}

.agent-activity-tool-row__arguments--mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
}

/* Non-success terminal states on a worklog tool row (Qui-native; Linear's pop-out was not
   observed with an interrupted call): a 12/500 label after the arguments — cancelled in the
   muted tier, failed in the error tone — so a stopped turn never reads as a completed call. */
.agent-activity-tool-row__status {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
}

.agent-activity-tool-row__status--failed {
    color: var(--agent-session-error-text, lch(50 80 29));
}

.agent-activity-tool-row--cancelled > .agent-activity-tool-row__summary .agent-activity-tool-row__arguments {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Expanded output: 16px padding, clipped at 270.875px, mono 11.375/15.925 soft; tool pill top-right. */
.agent-activity-tool-row__output {
    position: relative;
    box-sizing: border-box;
    max-height: 270.875px;
    padding: 16px;
    overflow: clip;
}

.agent-activity-tool-row__output--unclipped {
    max-height: none;
    overflow: visible;
}

.agent-activity-tool-row__output-label {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    padding: 6px 6px 6px 8px;
    border-radius: 9999px;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 15px;
}

.agent-activity-tool-row__output-text {
    margin: 0;
    color: var(--agent-surface-soft, var(--assistant-panel-soft));
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 11.375px;
    font-weight: 450;
    line-height: 15.925px;
    white-space: pre;
}

/* Clipped-output expand pill (measured "Expand (45 lines)"): 24px, padding 0 12px, radius 9999,
   raised surface, 12/500, centred at the foot of the block. */
.agent-activity-tool-row__expand {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: var(--shell-menu-bg, var(--assistant-panel-raised-bg));
    color: var(--agent-surface-text, var(--assistant-panel-text));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
}

/* "Used N tools" fold: header padding 0 8px, gap 3; rows indented a further 10px. */
.agent-activity-tool-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-activity-tool-group__header {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 16px;
    gap: 3px;
    padding: 0 8px;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
    outline: none;
}

.agent-activity-tool-group__header:focus-visible {
    box-shadow: 0 0 0 1.5px var(--shell-accent);
    border-radius: 4px;
}

.agent-activity-tool-group__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px;
}

/* Live "Working…" header: pill (padding 0 8px, margin 0 -8px, radius 4, gap 3) with the Agent
   sprite and the shimmering 12/500 label. */
.agent-activity-working {
    display: flex;
    align-self: flex-start;
    align-items: center;
    height: 16px;
}

.agent-activity-working__pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 8px;
    margin: 0 -8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
}

.agent-activity-working__loader {
    color: var(--agent-surface-text, var(--assistant-panel-text));
}

/* The session panel's Working… label shimmers over the SOFT text tier (measured on JAM-153:
   base rgb(104,105,109) ≈ L44 behind the same 180×72 blurred sweep, 2.4s linear), not the
   dock tab's darker thinking base. */
.agent-activity-working__label,
.comment-thread__working {
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2072%22%20fill%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22blur%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22%20height%3D%22300%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%226%22%20%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22rotate(-30%2090%2036)%22%20filter%3D%22url(%23blur)%22%3E%0A%20%20%20%20%3Crect%20x%3D%2272%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%235e6ad2%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.5%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2290%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23999a9d%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.4%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(var(--agent-surface-soft, var(--assistant-tab-thinking-base, var(--shell-bg-button))), var(--agent-surface-soft, var(--assistant-tab-thinking-base, var(--shell-bg-button))));
}

/* Response footer chip: "4 files · b19a994 · +91 · −1" — 24px, padding 0 8px, gap 6, radius 6. */
.agent-change-summary-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    height: 24px;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 0.5px solid var(--agent-session-notice-ring, var(--assistant-panel-border));
    border-radius: 6px;
    background: var(--board-card-bg, var(--assistant-panel-raised-bg));
    color: var(--agent-surface-text, var(--assistant-panel-text));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.agent-change-summary-chip__reference {
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-weight: 400;
}

.agent-change-summary-chip__additions {
    color: var(--agent-diff-additions, lch(50 80 141.95));
}

.agent-change-summary-chip__deletions {
    color: var(--agent-session-error-text, lch(50 80 29));
}

/* ---- Measured Linear pop-out presentations of the shared AssistantMessage ---- */

/* Attributed user message: no bubble; right-aligned block max-width 85%, padding-left 12; 17px
   header line (14px avatar · name 12/500 primary · time 12/500 soft, gap 6); text 13/450 on 20.8
   inset 10px, 4px under the header. */
.assistant-message--attributed {
    flex-direction: column;
    align-items: flex-end;
}

/* Measured JAM-153 (classic-dark + Linear Dark): the header line lives inside the bubble —
   16.5px row, padding 2px 0 0, gap 6 — above the 13/450/20.8 text, bubble gap 4. */
.assistant-message--attributed .assistant-message__author-line {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 16.5px;
    gap: 6px;
    padding: 2px 0 0;
    margin: 0;
}

.assistant-message--attributed .assistant-message__author-avatar {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--assistant-panel-raised-bg);
    color: lch(100 0 282);
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.assistant-message--attributed .assistant-message__author {
    color: var(--agent-surface-text, var(--assistant-panel-text));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
}

.assistant-message--attributed .assistant-message__time {
    color: var(--agent-surface-soft, var(--assistant-panel-soft));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
}

/* Measured JAM-153: the prompt IS a bubble — 461px inside a 560 pop-out (max-width 85%,
   right-aligned), padding 8px 12px, radius 8, bg lch(21.504 2.927 272.695) classic-dark /
   lch(18.739 7.282 282.863) Linear Dark (--agent-session-prompt-bg), flex column gap 4. */
.assistant-message--attributed .assistant-message__bubble {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    max-width: 85%;
    min-height: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--agent-session-prompt-bg, var(--assistant-panel-raised-bg));
    color: var(--agent-surface-text, var(--assistant-panel-text));
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
}

.assistant-message--attributed .assistant-message__copy--user {
    display: none;
}

/* Log work presentation: the "Worked for N" header is the measured 12/500 muted row with a 16px
   disclosure triangle (32px hover area); the disclosure lays the thought / tool rows out 12px
   below on a 12px gap; the live state is the Working… sprite pill. */
.assistant-message--work-log .assistant-message__worked-duration {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 16px;
    gap: 6px;
    padding: 8px 0;
    margin: -8px 0;
    box-sizing: content-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 15px;
}

.assistant-message--work-log .assistant-message__worked-duration .shell-icon {
    color: var(--agent-surface-muted, var(--assistant-panel-muted));
    transition: transform 120ms ease;
}

.assistant-message--work-log .assistant-message__worked-duration[aria-expanded="true"] .shell-icon {
    transform: rotate(90deg);
}

.assistant-message--work-log .assistant-message__work-disclosure {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The 12px lead-in only exists while the log is open (the frame stays mounted to animate). */
.assistant-message--work-log .assistant-message__work-disclosure-frame--open .assistant-message__work-disclosure {
    padding-top: 12px;
}

.assistant-message--work-log .assistant-message__work-disclosure-frame--open + .assistant-message__assistant-text {
    margin-top: 12px;
}

/* Session transcript: the pop-out feed's measured inset (4/8/20) on the shared scroller. */
.agent-session-transcript {
    padding: 4px 8px 20px;
    gap: 12px;
}

/* Measured Linear pop-out feed column (JAM-153/145): every agent row sits 10px inside the 8px
   transcript padding — x18.5, flush with the origin-line avatar — the "Worked for" header, the
   Working… pill, the response text and the opened log alike. Inside the log, tool rows are +10
   and thoughts +24 from that column; the live thought under Working… is +14. The dock's 18px
   disclosure inset and 10px text padding do not apply here. */
.agent-session-transcript .assistant-message--work-log {
    box-sizing: border-box;
    padding: 0 10px;
}

.agent-session-transcript .assistant-message--work-log .assistant-message__work-disclosure {
    padding: 0;
}

.agent-session-transcript .assistant-message--work-log .assistant-message__assistant-text {
    padding: 0;
}

.agent-session-transcript .assistant-message--work-log .assistant-message__assistant-content > .agent-activity-thought {
    padding-left: 14px;
}

/* The live ticker sits on the same column as the header, the non-final messages and the answer
   (measured: x18.5 for every agent row); its reasoning line lands at +14 like the live thought. */
.agent-session-transcript .assistant-message--work-log .assistant-message__live {
    padding: 0;
}

.agent-session-panel__feed--transcript {
    padding: 0;
    overflow: hidden;
}

.agent-session-panel__feed--transcript > .chat-transcript {
    flex: 1 1 auto;
    min-height: 0;
}

.agent-session-timestamp {
    display: block;
    padding: 8px 0;
    color: var(--agent-session-timestamp-text, var(--assistant-panel-soft));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 14.5px;
    text-align: center;
}

/* Measured: 14px avatar, 8px gap, 12/450 text on a 16.8px line, secondary colour. */
.agent-session-event {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 10px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.4;
}

.agent-session-event__leading {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 14px;
}

.agent-session-event__avatar {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--assistant-panel-raised-bg);
    color: lch(100 0 282);
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.agent-session-event__body {
    min-width: 0;
}

.agent-session-event__body strong,
.agent-session-event__body a {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

/* Measured Linear notice card (JAM-153 Error): padding 8px 12px inside a 0.5px ring
   (lch 30.761 classic-dark / 91.9 light), radius 8; heading row 24px; body 4px below on an
   18px line. The Error tone layers a red tint + 45° hatch (masked out over the left 15%)
   and a red gradient hairline edge fading over the left half. */
.agent-session-notice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    border: 0.5px solid var(--agent-session-notice-ring, var(--assistant-panel-border));
    border-radius: 8px;
    padding: 8px 12px;
    overflow: hidden;
}

.agent-session-notice--error::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, color(srgb 0.953132 0.306776 0.323264 / 0.2) 0%, transparent 15%),
        repeating-linear-gradient(45deg, color(srgb 1.26658 0.525532 0.514914 / 0.2) 0, color(srgb 1.26658 0.525532 0.514914 / 0.2) 0.5px, transparent 0.5px, transparent 6px);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 15%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 15%);
}

.agent-session-notice--error::after {
    content: "";
    position: absolute;
    inset: -0.5px;
    padding: 0.5px;
    border-radius: 8px;
    pointer-events: none;
    background-image: linear-gradient(90deg, color(srgb 0.854014 0.207599 0.250672 / 0.3) 0%, transparent 50%);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
}

.agent-session-notice__heading {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 24px;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.agent-session-notice--warning .agent-session-notice__heading,
.agent-session-notice--error .agent-session-notice__heading {
    color: var(--agent-session-notice-tone, var(--agent-session-error-text, lch(80 80 29)));
}

.agent-session-notice--neutral .agent-session-notice__heading {
    color: var(--assistant-panel-muted);
}

.agent-session-notice__body {
    position: relative;
    z-index: 1;
    margin: 4px 0 0;
    color: var(--assistant-panel-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 18px;
}

.agent-session-notice--error .agent-session-notice__body {
    color: var(--agent-session-error-body-text, var(--assistant-panel-text));
}

.agent-session-notice-action {
    display: flex;
    padding: 0 8px;
}

/* ── Desktop collapse, measured from Linear: the layout slot animates (main column offset
   220 → the 8px gutter) while the rail translates fully off-canvas plus a 16px gap, both on the
   350ms shell curve and driven by the same state so they move in lockstep — the content card
   glides left rather than a panel flying off. No opacity fade. The rail keeps its width, so
   expansion restores it exactly. The page title bar's persistent toggle stays put; only its
   pane glyph animates. Hovering that toggle (or the 8px hot edge) PEEKS the rail: the same
   element lifts into a floating panel under the header row — card surface, measured corners
   and shadow — without a backdrop; clicking the toggle expands for real. ── */
@media (width > 1024px) {
    body:not(.shell-sidebar-resizing) .app-shell:has(.shell-sidebar[data-collapsed]) .app-shell__main-column {
        transition: margin-left 350ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .app-shell__main-column {
        margin-left: var(--shell-sidebar-gutter, 8px);
    }

    .app-shell:has(.shell-sidebar[data-collapsed]) .shell-sidebar {
        transition:
            transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
            top 0s linear 350ms,
            border-radius 0s linear 350ms,
            background-color 0s linear 350ms,
            box-shadow 0s linear 350ms;
        will-change: transform;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar {
        z-index: 760;
        background: var(--shell-bg-sidebar);
        transform: translateX(calc(-100% - 16px));
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar__resize-handle {
        display: none;
    }

    /* Peek: the rail lifts into a floating panel under the header row (measured top 41.5px,
       corners 0 12 12 0, card surface, modal shadow trio + hairline ring), sliding in on a
       shorter curve and back out with no fade. */
    .app-shell:has(.shell-sidebar[data-collapsed="true"][data-peek="true"]) .shell-sidebar, .app-shell--sidebar-overlay-open:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar {
        top: var(--shell-sidebar-peek-top, 42px);
        border-radius: 0 var(--shell-surface-radius, 12px) var(--shell-surface-radius, 12px) 0;
        background: var(--shell-bg-surface);
        box-shadow: var(--shell-sidebar-peek-shadow);
        transform: translateX(0);
        transition:
            transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
            top 0s linear 0s,
            border-radius 0s linear 0s,
            background-color 0s linear 0s,
            box-shadow 0s linear 0s;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar-overlay__backdrop {
        display: none;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar__hot-edge {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--shell-sidebar-gutter, 8px);
        z-index: 759;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .page-title-bar__title-slot {
        padding-left: 4px;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page.basic-page--with-shell-header {
        padding-top: 0;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page__mobile-shell-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        background: var(--shell-bg-surface, var(--shell-bg-sidebar));
        color: var(--shell-text-primary);
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page__mobile-shell-header .page-title-bar {
        min-height: 44px;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page__mobile-shell-header .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page__backbar-sidebar-toggle {
        display: grid;
        margin-right: 8px;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page.basic-page--with-shell-header:not(.basic-page--with-back) .basic-page__inner {
        margin-top: 48px;
    }

    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .basic-page.basic-page--with-shell-header.basic-page--with-back .basic-page__backbar {
        flex-basis: 55px;
        height: 55px;
        padding-top: 1px;
    }
}

.shell-sidebar__hot-edge {
    display: none;
}

@media (width > 1024px) {
    .app-shell:has(.shell-sidebar[data-collapsed="true"]) .shell-sidebar__hot-edge {
        display: block;
    }
}

/* The optional expand affordance slot renders outside the inert rail while collapsed. */
.shell-sidebar__collapsed-affordance {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 570;
}

/* Linear's model: with a persistent (collapse-capable) sidebar toggle the standalone shell header
   is part of the page on desktop too — the toggle is always the first item of the page header —
   so the same header treatment the narrow viewport uses applies whenever it hosts one. */
.basic-page.basic-page--with-shell-header:has(.page-title-bar__sidebar-toggle--persistent) {
    padding-top: 0;
}

.basic-page__mobile-shell-header:has(.page-title-bar__sidebar-toggle--persistent) {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    background: var(--shell-bg-surface, var(--shell-bg-sidebar));
    color: var(--shell-text-primary);
}

.basic-page__mobile-shell-header:has(.page-title-bar__sidebar-toggle--persistent) .page-title-bar {
    min-height: 44px;
}

.basic-page.basic-page--with-shell-header:not(.basic-page--with-back):has(.page-title-bar__sidebar-toggle--persistent) .basic-page__inner {
    margin-top: 48px;
}

.basic-page.basic-page--with-shell-header.basic-page--with-back:has(.page-title-bar__sidebar-toggle--persistent) .basic-page__backbar {
    flex-basis: 55px;
    height: 55px;
    padding-top: 1px;
}
\n\n/* ── Dot-grid loaders (Linear's GridLoaderIcon, verbatim technique): every dot drawn dim, the
   lit frames laid out as a horizontal sprite strip that a stepped animation sweeps in 20
   segments of 5% with steps(frames, end), so each segment shows every frame once. Duration,
   delay and step count are set inline per instance (frames × 20 × interval). ── */
.grid-loader {
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
    vertical-align: middle;
}

.grid-loader circle {
    fill: currentColor;
}

.grid-loader__dim {
    color: var(--grid-loader-dim-color, currentColor);
    opacity: var(--grid-loader-dim, 0.3);
}

.grid-loader__sprite {
    animation-name: grid-loader-sweep;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    backface-visibility: hidden;
    transform-box: fill-box;
    transform-origin: 0 0;
    will-change: transform;
    transform: translate(0, 0);
}

.grid-loader--static .grid-loader__sprite {
    animation: none;
}

.grid-loader--paused .grid-loader__sprite {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .grid-loader__sprite {
        animation-play-state: paused;
    }
}

@keyframes grid-loader-sweep {
    0% { transform: translate(0, 0); }
    5% { transform: translate(-100%, 0); }
    5.0001% { transform: translate(0, 0); }
    10% { transform: translate(-100%, 0); }
    10.0001% { transform: translate(0, 0); }
    15% { transform: translate(-100%, 0); }
    15.0001% { transform: translate(0, 0); }
    20% { transform: translate(-100%, 0); }
    20.0001% { transform: translate(0, 0); }
    25% { transform: translate(-100%, 0); }
    25.0001% { transform: translate(0, 0); }
    30% { transform: translate(-100%, 0); }
    30.0001% { transform: translate(0, 0); }
    35% { transform: translate(-100%, 0); }
    35.0001% { transform: translate(0, 0); }
    40% { transform: translate(-100%, 0); }
    40.0001% { transform: translate(0, 0); }
    45% { transform: translate(-100%, 0); }
    45.0001% { transform: translate(0, 0); }
    50% { transform: translate(-100%, 0); }
    50.0001% { transform: translate(0, 0); }
    55% { transform: translate(-100%, 0); }
    55.0001% { transform: translate(0, 0); }
    60% { transform: translate(-100%, 0); }
    60.0001% { transform: translate(0, 0); }
    65% { transform: translate(-100%, 0); }
    65.0001% { transform: translate(0, 0); }
    70% { transform: translate(-100%, 0); }
    70.0001% { transform: translate(0, 0); }
    75% { transform: translate(-100%, 0); }
    75.0001% { transform: translate(0, 0); }
    80% { transform: translate(-100%, 0); }
    80.0001% { transform: translate(0, 0); }
    85% { transform: translate(-100%, 0); }
    85.0001% { transform: translate(0, 0); }
    90% { transform: translate(-100%, 0); }
    90.0001% { transform: translate(0, 0); }
    95% { transform: translate(-100%, 0); }
    95.0001% { transform: translate(0, 0); }
    to { transform: translate(-100%, 0); }
}

/* ── Page/section loading indicator: centred loader + muted label, revealed after the delay. ── */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--shell-text-secondary);
    opacity: 0;
    animation: loading-indicator-reveal 160ms ease-out var(--loading-indicator-delay, 250ms) both;
}

.loading-indicator--inline {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
}

.loading-indicator__label {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
    color: var(--shell-text-secondary);
}

@keyframes loading-indicator-reveal {
    to { opacity: 1; }
}

/* ── Loading chip: status pill (loader + label). ── */
.loading-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--shell-text-secondary) 9%, transparent);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ── Lazily-loaded view placeholder: three faint bars, fading in after the delay. ── */
.loading-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    animation: loading-indicator-reveal 160ms ease-out var(--loading-placeholder-delay, 250ms) both;
}

.loading-placeholder__bar {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--shell-text-muted, var(--shell-text-secondary)) 20%, transparent);
}

/* Button loading (Linear): the pong loader follows the label in the label colour. */
.ui-button__loader {
    margin-left: 2px;
}

.insights-sidebar__notice,
.insights-sidebar__empty {
    padding: 8px 16px;
    color: var(--shell-text-secondary, #8a8f98);
    font-size: 12px;
    line-height: 1.5;
}

.insights-sidebar__stale {
    border-left: 2px solid var(--shell-text-secondary, #8a8f98);
    margin: 8px 16px;
    padding: 4px 8px;
}

.settings-select__option:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.settings-select__option-reason {
    font-size: 11px;
    white-space: normal;
}

.insights-sidebar__summary-slot {
    min-height: 44px;
    flex-shrink: 0;
}

/* Reserve canvas space when the background settings panel is open. */
.qui-annotator-overlay__sidebar ~ .qui-annotator-overlay__stage {
    left: var(--qui-annotator-sidebar-width);
}

@media (max-width: 600px) {
    .qui-annotator-overlay {
        --qui-annotator-sidebar-height: min(40vh, 320px);
    }

    .qui-annotator-overlay__bar {
        height: 72px;
        align-items: flex-start;
    }

    .qui-annotator-overlay__tools {
        flex-wrap: wrap;
    }

    .qui-annotator-overlay__actions {
        flex-shrink: 0;
    }

    .qui-annotator-overlay__sidebar {
        top: auto;
        width: 100%;
        height: var(--qui-annotator-sidebar-height);
        border-top: 0.5px solid var(--shell-menu-border);
        border-right: 0;
        animation: none;
    }

    .qui-annotator-overlay__stage {
        top: 76px;
    }

    .qui-annotator-overlay__sidebar ~ .qui-annotator-overlay__stage {
        left: 0;
        bottom: var(--qui-annotator-sidebar-height);
    }
}

/* ===== diff.css ===== */

/* ===== Tokens ===== */
/* Base palette, then per-theme overrides. Every colour below goes through one of these. */

/* Diff surfaces cloned from Linear's review "Diff" tab (measured live, classic dark @1728,
   2026-09-05). Card: raised fill, radius 8, 37px header, hairline top/bottom. Body: 50px gutter
   + code column at 12px/20px Berkeley Mono. Fold rows 28px. Cards stack 8px apart beside a
   280px sticky rail. Every colour goes through a --diff-* token with the measured value as the
   fallback, so hosts retheme by overriding the token, never the rule. */

.diff-file-card,
.diff-lines,
.diff-file-rail,
.diff-review,
.file-explorer,
.diff-counts,
.code-mirror-editor {
    --diff-font-mono: var(--font-mono, "Berkeley Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    /* Tones are derived from the theme's primary text and card fill at Linear's measured ratios
       (classic dark: text 91.2 on card 16.4, hairline 24.8, gutter numbers 42.1, controls 36.2),
       so every theme keeps the same contrast steps instead of borrowing unrelated tokens. */
    --diff-page-bg: var(--shell-bg-surface, lch(12.236% 2.213 272.695));
    --diff-card-bg: var(--shell-bg-active, lch(16.361% 2.713 272.695));
    --diff-strong-text: var(--shell-text-primary, lch(100% 0 272.695));
    --diff-text: color-mix(in srgb, var(--diff-strong-text) 91%, var(--diff-card-bg));
    --diff-muted: var(--shell-text-secondary, lch(64.894% 2.106 272.695));
    --diff-gutter-text: color-mix(in srgb, var(--diff-muted) 58%, var(--diff-card-bg));
    --diff-placeholder-stripe: color-mix(in srgb, var(--diff-strong-text) 2.5%, transparent);
    --diff-placeholder-mark: color-mix(in srgb, var(--diff-strong-text) 7%, transparent);
    --diff-card-border: color-mix(in srgb, var(--diff-card-bg) 89%, var(--diff-strong-text));
    --diff-hover-bg: color-mix(in srgb, var(--diff-card-bg) 92%, var(--diff-strong-text));
    --diff-accent: var(--shell-accent, lch(47.918% 59.303 288.421));
    --diff-added-text: lch(68% 64.37 141.95);
    --diff-removed-text: lch(66% 73 29);
    --diff-added-count: lch(80% 80 141.95);
    --diff-removed-count: lch(80% 80 29);
    --diff-added-file: lch(65% 64.37 141.95);
    --diff-removed-file: lch(66% 73 29);
    --diff-added-bg: color-mix(in srgb, var(--diff-card-bg) 90%, var(--diff-added-text) 10%);
    --diff-removed-bg: color-mix(in srgb, var(--diff-card-bg) 90%, var(--diff-removed-text) 10%);
    --diff-selection-bg: color-mix(in srgb, var(--diff-accent) 14%, transparent);
    --diff-pill-hover-bg: color-mix(in srgb, var(--diff-strong-text) 8%, transparent);
    --diff-on-accent: #fff;
    --diff-check-mark: lch(100% 5 288.421);
    --diff-pending-bg: color-mix(in srgb, lch(75% 70 75) 18%, transparent);
    --diff-pending-text: lch(62% 70 75);
    --diff-popover-shadow: lch(0 0 0 / 0.3) 0 0.5px 1px 1px;
    --diff-checkbox-border: lch(64.361% 3.913 272.695);
    --diff-control-border: lch(36.236% 3.413 272.695);
    --diff-token-keyword-base: lch(75.5% 46.4 334.6);
    --diff-token-control-keyword-base: lch(71.5% 52.1 306.8);
    --diff-token-constant-base: lch(69.1% 48.3 280.7);
    --diff-token-type-base: lch(78.7% 34.3 234.6);
    --diff-token-number-base: lch(82.2% 29.3 197.6);
    --diff-token-variable-base: lch(81.6% 37.9 64.9);
    --diff-token-string-base: lch(90.4% 36 81.9);
}

/* classic-dark: sampled from Linear's review Diff tab (James's screenshots, 2026-09-06). */

/* Dark themes. Linear derives every dark surface tone from the theme's base colour with fixed LCH
   offsets (measured on its DOM, 2026-09-06: card +4.125 L, hairline +12.525, thread surface +8.25,
   thread ring +16.65 …), so the surfaces below come from the page background via relative colour
   syntax and a new dark theme needs no diff-specific palette. Change colours are Linear's constants;
   only the five text tones stay per theme (they follow the theme's contrast setting, not its base). */
[data-app-theme="classic-dark"] .diff-file-card,
[data-app-theme="classic-dark"] .diff-lines,
[data-app-theme="classic-dark"] .diff-file-rail,
[data-app-theme="classic-dark"] .diff-review,
[data-app-theme="classic-dark"] .file-explorer,
[data-app-theme="classic-dark"] .diff-counts,
[data-app-theme="classic-dark"] .code-mirror-editor,
[data-app-theme="classic-dark"] .diff-comment-thread,
[data-app-theme="magic-blue"] .diff-file-card,
[data-app-theme="magic-blue"] .diff-lines,
[data-app-theme="magic-blue"] .diff-file-rail,
[data-app-theme="magic-blue"] .diff-review,
[data-app-theme="magic-blue"] .file-explorer,
[data-app-theme="magic-blue"] .diff-counts,
[data-app-theme="magic-blue"] .code-mirror-editor,
[data-app-theme="magic-blue"] .diff-comment-thread,
[data-app-theme="dark"] .diff-file-card,
[data-app-theme="dark"] .diff-lines,
[data-app-theme="dark"] .diff-file-rail,
[data-app-theme="dark"] .diff-review,
[data-app-theme="dark"] .file-explorer,
[data-app-theme="dark"] .diff-counts,
[data-app-theme="dark"] .code-mirror-editor,
[data-app-theme="dark"] .diff-comment-thread {
    /* The interface surface, not --diff-page-bg: a code theme with "Use theme background" repaints the
       editor tokens inline, and the chrome around the code must keep the interface tone. */
    --diff-base: var(--shell-bg-surface, lch(12.236% 2.213 272.695));
    --diff-card-bg: lch(from var(--diff-base) calc(l + 4.125) calc(c + 0.5) h);
    --diff-toolbar-bg: var(--diff-card-bg);
    --diff-card-border: lch(from var(--diff-base) calc(l + 12.525) calc(c + 1.7) h);
    --diff-toolbar-border: var(--diff-card-border);
    --diff-thread-surface: lch(from var(--diff-base) calc(l + 8.25) calc(c + 1) h);
    --diff-thread-border: lch(from var(--diff-base) calc(l + 16.65) calc(c + 2.2) h);
    --diff-thread-shadow: lch(0 0 0 / 0.3) 0 0.5px 1px 1px;
    --diff-badge-bg: lch(from var(--diff-base) calc(l + 2) calc(c + 0.4) h);
    --diff-rail-selected-bg: lch(from var(--diff-base) calc(l + 9.2) calc(c + 0.4) h);
    --diff-chip-border: lch(from var(--diff-base) calc(l + 24.5) calc(c + 1.2) h);
    --diff-control-border: lch(from var(--diff-base) calc(l + 23.5) calc(c + 1) h);
    --diff-checkbox-border: lch(from var(--diff-base) calc(l + 52.125) calc(c + 1.7) h);
    --diff-tab-active-bg: lch(from var(--diff-base) calc(l + 16.5) calc(c + 1) h);
    --diff-added-text: rgb(103, 186, 100);
    --diff-added-count: rgb(116, 224, 114);
    --diff-added-file: rgb(95, 178, 93);
    --diff-removed-text: rgb(249, 113, 108);
    --diff-removed-count: rgb(255, 146, 138);
    --diff-removed-file: rgb(249, 113, 108);
    --diff-added-bg: color-mix(in srgb, var(--diff-added-text) 7.6%, var(--diff-card-bg));
    --diff-removed-bg: color-mix(in srgb, var(--diff-removed-text) 8%, var(--diff-card-bg));
    --diff-added-inline-bg: color-mix(in srgb, var(--diff-added-text) 17%, var(--diff-card-bg));
    --diff-removed-inline-bg: color-mix(in srgb, var(--diff-removed-text) 17.5%, var(--diff-card-bg));
}

/* classic-dark: text tones sampled from Linear (2026-09-06). */
[data-app-theme="classic-dark"] .diff-file-card,
[data-app-theme="classic-dark"] .diff-lines,
[data-app-theme="classic-dark"] .diff-file-rail,
[data-app-theme="classic-dark"] .diff-review,
[data-app-theme="classic-dark"] .file-explorer,
[data-app-theme="classic-dark"] .diff-counts,
[data-app-theme="classic-dark"] .code-mirror-editor,
[data-app-theme="classic-dark"] .diff-comment-thread {
    --diff-text: rgb(229, 230, 234);
    --diff-body-text: rgb(231, 232, 237);
    --diff-secondary: rgb(161, 162, 166);
    --diff-muted: rgb(112, 113, 117);
    --diff-gutter-text: rgb(99, 99, 103);
}

/* magic-blue: text tones sampled from Linear (2026-09-06). */
[data-app-theme="magic-blue"] .diff-file-card,
[data-app-theme="magic-blue"] .diff-lines,
[data-app-theme="magic-blue"] .diff-file-rail,
[data-app-theme="magic-blue"] .diff-review,
[data-app-theme="magic-blue"] .file-explorer,
[data-app-theme="magic-blue"] .diff-counts,
[data-app-theme="magic-blue"] .code-mirror-editor,
[data-app-theme="magic-blue"] .diff-comment-thread {
    --diff-text: rgb(228, 229, 236);
    --diff-body-text: rgb(231, 231, 240);
    --diff-secondary: rgb(158, 159, 166);
    --diff-muted: rgb(108, 108, 115);
    --diff-gutter-text: rgb(94, 95, 101);
}

/* dark: text tones sampled from Linear (2026-09-06). */
[data-app-theme="dark"] .diff-file-card,
[data-app-theme="dark"] .diff-lines,
[data-app-theme="dark"] .diff-file-rail,
[data-app-theme="dark"] .diff-review,
[data-app-theme="dark"] .file-explorer,
[data-app-theme="dark"] .diff-counts,
[data-app-theme="dark"] .code-mirror-editor,
[data-app-theme="dark"] .diff-comment-thread {
    --diff-text: rgb(227, 228, 230);
    --diff-body-text: rgb(229, 230, 233);
    --diff-secondary: rgb(153, 153, 156);
    --diff-muted: rgb(98, 99, 102);
    --diff-gutter-text: rgb(87, 87, 89);
}

/* magic-blue: sampled from Linear's review Diff tab (James's screenshots, 2026-09-06). */

/* dark: sampled from Linear's review Diff tab (James's screenshots, 2026-09-06). */

/* Light themes: same hues, pulled down to read on a pale card. */

[data-app-theme="light"] .diff-file-card,
[data-app-theme="light"] .diff-lines,
[data-app-theme="light"] .diff-file-rail,
[data-app-theme="light"] .diff-review,
[data-app-theme="light"] .file-explorer,
[data-app-theme="light"] .diff-counts,
[data-app-theme="light"] .code-mirror-editor,
[data-app-theme="pure-light"] .diff-file-card,
[data-app-theme="pure-light"] .diff-lines,
[data-app-theme="pure-light"] .diff-file-rail,
[data-app-theme="pure-light"] .diff-review,
[data-app-theme="pure-light"] .file-explorer,
[data-app-theme="pure-light"] .diff-counts,
[data-app-theme="pure-light"] .code-mirror-editor {
    --diff-checkbox-border: lch(54.1% 0 282);
    --diff-control-border: lch(84.44% 0 282);
    --diff-chip-border: lch(86.5% 0 282);
    --diff-chip-text: lch(40% 1 282);
    --diff-thread-border: lch(86.5% 0 282);
    --diff-thread-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
    --diff-toolbar-border: lch(91.9% 0 282);
    --diff-toolbar-bg: lch(100% 0 282);
    --diff-muted: lch(66% 1 282);
    --diff-secondary: lch(40% 1 282);
    --diff-rail-selected-bg: lch(93.483% 0.5 282);
    --diff-tab-active-bg: lch(95.543% 0 282);
    --diff-commit-connector: lch(75% 1 282);
    --diff-gutter-hover: rgb(0 0 0 / 0.05);
    --diff-gutter-text: lch(64.64% 1.25 282);
    --diff-added-inline-bg: lch(94.733% 9.903 148.136);
    --diff-removed-inline-bg: lch(94.733% 9.903 17.957);
    --diff-body-text: lch(20% 1 282);
    --diff-added-text: lch(60% 64.37 141.95);
    --diff-removed-text: lch(50% 73 29);
    --diff-added-count: lch(50% 80 141.95);
    --diff-removed-count: lch(50% 80 29);
    --diff-added-file: lch(63% 64.37 141.95);
    --diff-removed-file: lch(50% 73 29);
    --diff-added-bg: lch(97.94% 3.829 148.469);
    --diff-removed-bg: lch(97.112% 3.635 17.957);
    --diff-token-keyword-base: lch(54.9% 61.5 336.4);
    --diff-token-control-keyword-base: lch(47% 68 308.2);
    --diff-token-constant-base: lch(52.5% 41.7 281.1);
    --diff-token-type-base: lch(58.1% 39 241.1);
    --diff-token-number-base: lch(52.4% 30.6 196.7);
    --diff-token-variable-base: lch(51.4% 66.5 59.6);
    --diff-token-string-base: lch(59.8% 65.8 74.4);
}

@media (prefers-color-scheme: light) {
    [data-app-theme="system"] .diff-file-card,
    [data-app-theme="system"] .diff-lines,
    [data-app-theme="system"] .diff-file-rail,
    [data-app-theme="system"] .diff-review,
    [data-app-theme="system"] .file-explorer,
    [data-app-theme="system"] .diff-counts,
[data-app-theme="system"] .code-mirror-editor {
        --diff-checkbox-border: lch(54.1% 0 282);
        --diff-control-border: lch(84.44% 0 282);
    --diff-chip-border: lch(86.5% 0 282);
    --diff-chip-text: lch(40% 1 282);
    --diff-thread-border: lch(86.5% 0 282);
    --diff-thread-shadow: lch(0 0 0 / 0.02) 0 3px 6px -2px, lch(0 0 0 / 0.04) 0 1px 1px 0;
    --diff-toolbar-border: lch(91.9% 0 282);
    --diff-toolbar-bg: lch(100% 0 282);
    --diff-muted: lch(66% 1 282);
    --diff-secondary: lch(40% 1 282);
    --diff-rail-selected-bg: lch(93.483% 0.5 282);
    --diff-tab-active-bg: lch(95.543% 0 282);
    --diff-commit-connector: lch(75% 1 282);
    --diff-gutter-hover: rgb(0 0 0 / 0.05);
    --diff-gutter-text: lch(64.64% 1.25 282);
    --diff-added-inline-bg: lch(94.733% 9.903 148.136);
    --diff-removed-inline-bg: lch(94.733% 9.903 17.957);
    --diff-body-text: lch(20% 1 282);
        --diff-added-text: lch(60% 64.37 141.95);
        --diff-removed-text: lch(50% 73 29);
        --diff-added-count: lch(50% 80 141.95);
        --diff-removed-count: lch(50% 80 29);
        --diff-added-file: lch(63% 64.37 141.95);
        --diff-removed-file: lch(50% 73 29);
        --diff-added-bg: lch(97.94% 3.829 148.469);
        --diff-removed-bg: lch(97.112% 3.635 17.957);
        --diff-token-keyword-base: lch(54.9% 61.5 336.4);
        --diff-token-control-keyword-base: lch(47% 68 308.2);
        --diff-token-constant-base: lch(52.5% 41.7 281.1);
        --diff-token-type-base: lch(58.1% 39 241.1);
        --diff-token-number-base: lch(52.4% 30.6 196.7);
        --diff-token-variable-base: lch(51.4% 66.5 59.6);
        --diff-token-string-base: lch(59.8% 65.8 74.4);
    
    }
}

/* ===== Counts and file icons ===== */

/* ----- +N -N counts ----- */

.diff-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
    white-space: nowrap;
}

.diff-counts__additions {
    color: var(--diff-added-count);
}

.diff-counts__deletions {
    color: var(--diff-removed-count);
}

.diff-file-card__file-icon,
.diff-file-rail__row-icon,
.diff-file-rail__icon {
    color: var(--diff-strong-text);
}

/* Linear renders its coloured file sprite desaturated. */

.file-type-icon--mono {
    filter: grayscale(1);
}

/* ===== Review surface (rail + card stack layout) ===== */

/* ----- Review surface: sticky rail + scrolling stack ----- */

.diff-review {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-items: flex-start;
}

/* Linear (measured, light): a 36px white bar with a 0.5px lch(91.9 0 282) ring and r8 spans from the
   rail's left edge to the cards' right edge, 8px above both. */

.diff-review--toolbar {
    flex-direction: column;
    align-items: stretch;
}

.diff-review__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 36px;
    margin: 0 8px 8px; /* level with the page's tab row: the same 8px gutter on both sides */
    padding: 6px 10px 6px 12px;
    border: 0.5px solid var(--diff-toolbar-border, var(--diff-card-border));
    border-radius: 8px;
    background: var(--diff-toolbar-bg, var(--diff-card-bg));
}

/* Strip under the toolbar: the toolbar's side margins, outside the scroll region; banner then host content. */
.diff-review__strip,
.file-explorer__strip {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0 8px 8px;
}

/* Repository operation banner: the alert banner's anatomy with a spinner while in progress and a 2px progress
   track. Neutral by default (Linear's notices): the toolbar's fill and hairline, 13px/500 title, 12px secondary
   message, and only the icon carries the state. Tinted keeps the alert banner's coloured fills. */
.repository-operation-banner {
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
}

.repository-operation-banner--neutral {
    border-color: var(--diff-toolbar-border, var(--diff-card-border, var(--shell-border)));
    background: var(--diff-toolbar-bg, var(--diff-card-bg, var(--shell-bg-surface)));
    color: var(--diff-secondary, var(--shell-text-secondary));
}

.repository-operation-banner--neutral .alert-banner__body strong {
    color: var(--diff-text, var(--shell-text-primary));
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.repository-operation-banner--neutral .alert-banner__body span {
    color: var(--diff-secondary, var(--shell-text-secondary));
    font-size: 12px;
    font-weight: 450;
    line-height: 16px;
}

.repository-operation-banner--neutral .alert-banner__icon {
    color: var(--diff-secondary, var(--shell-text-secondary));
}

.repository-operation-banner--neutral.repository-operation-banner--conflicted .alert-banner__icon {
    color: var(--diff-warning, lch(66% 62 74));
}

.repository-operation-banner--neutral.repository-operation-banner--failed .alert-banner__icon {
    color: var(--diff-removed-file);
}

.repository-operation-banner--neutral.repository-operation-banner--completed .alert-banner__icon {
    color: var(--diff-added-file);
}

.repository-operation-banner__icon {
    margin-top: 0;
}

.repository-operation-banner__spinner {
    display: inline-flex;
}

.repository-operation-banner__body {
    gap: 1px;
}

.repository-operation-banner__progress {
    display: block;
    height: 2px;
    margin-top: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.repository-operation-banner__progress-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--shell-accent, var(--diff-accent));
    transition: width 200ms ease;
}

.repository-operation-banner__actions {
    flex: 0 0 auto;
}

.repository-operation-banner__navigator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Conflict stepper in the operation banner: previous / next around an "x/X" count. */
.diff-review__conflict-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 8px;
}

.diff-review__conflict-stepper-count {
    min-width: 32px;
    color: var(--diff-secondary, var(--shell-text-secondary));
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.diff-review__body {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-height: 100%;
}

.diff-review__rail-slot {
    position: relative;
    flex: 0 0 auto;
    box-sizing: content-box;
    width: var(--diff-rail-width, 280px);
    height: 100%; /* definite, so the rail's max-height caps it and the rail scrolls on its own */
    max-height: 100%;
    margin-left: 8px; /* rail and toolbar start 8px in from the surface edge, level with the tab row; cards end 8px short of it */
    margin-right: -6px;
    padding-right: 6px; /* room for the file rows' 5px right overhang so hover plates keep their corners; cards stay put */
    overflow: hidden;
    opacity: 1;
    transition: width 200ms cubic-bezier(0.33, 1, 0.68, 1), margin-left 200ms cubic-bezier(0.33, 1, 0.68, 1), opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
}

.diff-review__rail-slot--resizing {
    transition: none;
    user-select: none;
}

/* Drag handle on the rail's right edge, in the standard resize style (see .split-view__divider): a 10px hit
   area straddling the boundary and the resize-guide hairline (0.5px, 12px inset, fading ends) that shows on
   hover, focus and drag; no resting line, since Linear separates rail and cards with space. */
.diff-review__rail-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    width: 10px;
    padding: 0 4px;
    transform: translateX(50%);
    cursor: col-resize;
    touch-action: none;
    outline: none;
    z-index: 2;
}

.diff-review__rail-resizer::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 0.5px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.diff-review__rail-resizer:hover::after,
.diff-review__rail-resizer:focus-visible::after,
.diff-review__rail-resizer[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.diff-review__rail-slot--resizing {
    cursor: col-resize;
}

.diff-review__rail-slot--closed {
    width: 0;
    margin-left: 0;
    opacity: 0;
}

.diff-review__rail {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    width: var(--diff-rail-width, 280px);
    max-height: 100%;
    overflow-y: auto;
}

.diff-review__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding: 0 8px 16px 0;
}

.diff-review--no-rail .diff-review__content {
    padding-left: 16px;
}

/* ===== Review toolbar ===== */

.diff-review-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.diff-review-toolbar__commits {
    position: relative;
    display: inline-flex;
}

/* Linear opens the range picker under the pill's LEFT edge (459px wide), not right-aligned. */

.diff-review-toolbar__commits > .anchored-popover__positioner {
    left: 0;
    right: auto;
}

.diff-review-toolbar__pill,
.diff-review-toolbar__filter {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 24px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--diff-secondary, var(--shell-text-secondary));
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
    cursor: default;
    transition: background-color 0.15s, color 0.15s;
}

.diff-review-toolbar__pill:hover,
.diff-review-toolbar__filter:hover {
    transition-duration: 0s;
    background: var(--diff-pill-hover-bg);
    color: var(--diff-strong-text);
}

.diff-review-toolbar__pill > .shell-icon {
    margin-right: 6px;
}

.diff-review-toolbar__count {
    margin-left: 6px;
    color: var(--diff-muted);
    font-weight: 500;
}

.diff-review-toolbar__pill--active,
.diff-review-toolbar__filter--active {
    background: var(--diff-tab-active-bg, color-mix(in srgb, var(--diff-strong-text) 8%, transparent));
    color: var(--diff-strong-text);
}

.diff-review-toolbar__pill--active .diff-review-toolbar__label {
    font-weight: 450;
}

.diff-review-toolbar__pill--active .diff-review-toolbar__count,
.diff-review-toolbar__filter--active .diff-review-toolbar__count {
    color: var(--diff-secondary, var(--shell-text-secondary));
}

.diff-review-toolbar__leading {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.diff-review-toolbar__trailing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.diff-review-toolbar__filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.diff-review-toolbar__filter {
    padding: 0 8px;
    font-weight: 400;
}

.diff-review-toolbar__filter .diff-review-toolbar__count {
    font-weight: 400;
}

/* The trigger + popover for the display options panel. */

.diff-display-options-button {
    position: relative;
    display: inline-flex;
}

.diff-display-options-button__trigger--open {
    background: var(--diff-pill-hover-bg);
}

/* ===== Commit range picker ===== */

.anchored-popover__panel.diff-review-toolbar__commits-panel {
    border-radius: 10px;
}

.diff-commit-range {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 13px;
    line-height: 19.5px;
}

.diff-commit-range__row {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: calc(100% - 12px);
    height: 32px;
    margin: 0 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.diff-commit-range__row:hover,
.diff-commit-range__row:focus-visible {
    background: var(--shell-menu-item-hover-bg, var(--diff-pill-hover-bg));
    outline: none;
}

.diff-commit-range__row--all {
    justify-content: space-between;
}

.diff-commit-range__title {
    font-weight: 500;
}

.diff-commit-range__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--shell-text-secondary);
    font-weight: 400;
}

.diff-commit-range__separator {
    height: 0.5px;
    margin: 6px 0;
    background: var(--shell-menu-border, var(--shell-border));
}

.diff-commit-range__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 14px;
}

.diff-commit-range__order {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
}

.diff-commit-range__order:hover {
    background: var(--diff-pill-hover-bg);
}

.diff-commit-range__list {
    display: flex;
    flex-direction: column;
}

.diff-commit-range__item {
    position: relative;
}

/* Linear: a 1px × 6px connector hangs below each checkbox (x = its centre, y 29→35) — the dotted
   spine that links consecutive commits; the last commit has none. */

.diff-commit-range__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 29px;
    left: 20.5px;
    width: 1px;
    height: 6px;
    background: var(--diff-commit-connector, lch(59.633% 2.38 272));
}

.diff-commit-range__check {
    position: absolute;
    top: 9px;
    left: 14px;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
}

.diff-commit-range__check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: default;
}

.diff-commit-range__check-box {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid var(--diff-checkbox-border);
    border-radius: 4px;
    color: var(--diff-check-mark);
    transition: background-color 0.15s, border-color 0.15s;
}

.diff-commit-range__check input:checked + .diff-commit-range__check-box {
    border-color: var(--diff-accent);
    background: var(--diff-accent);
}

.diff-commit-range__check input:focus-visible + .diff-commit-range__check-box {
    outline: 2px solid var(--diff-accent);
    outline-offset: 1px;
}

.diff-commit-range__row--commit {
    padding-left: 30px;
    font-weight: 400;
}

.diff-commit-range__sha {
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
    font-family: var(--diff-font-mono, var(--font-mono, "Berkeley Mono", monospace));
    font-size: 12px;
}

.diff-commit-range__subject {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diff-commit-range__time {
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.diff-commit-range__clock {
    color: var(--shell-text-muted, var(--diff-muted));
}

/* ===== File rail ===== */

/* ----- File rail ----- */

.diff-file-rail {
    --diff-rail-width: 280px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--diff-rail-width);
    min-width: 0;
    color: var(--diff-text);
    font-size: 12px;
    line-height: 15px;
}

.diff-file-rail__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 10px 12px;
}

.diff-file-rail__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 12px 6px 0;
}

.diff-file-rail__search-icon {
    position: absolute;
    top: 50%;
    left: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--diff-muted);
    transform: translateY(calc(-50% - 1px));
    pointer-events: none;
}

.diff-file-rail__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 6px 28px 6px 26px;
    border: 0.5px solid var(--diff-control-border, lch(36.236% 3.413 272.695));
    border-radius: 8px;
    background: var(--diff-page-bg);
    color: var(--diff-text);
    font: inherit;
    font-size: 13px;
    line-height: 16px;
    outline: none;
}

.diff-file-rail__search-input::placeholder {
    color: var(--diff-gutter-text); /* Linear: placeholder = line-number grey (light 64.64, dark 99/99/103) */
}

.diff-file-rail__search-input:focus-visible {
    border-color: var(--diff-accent);
}

.diff-file-rail__tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 12px 6px;
}

.diff-file-rail__group-header,
.diff-file-rail__row {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--diff-text);
    font: inherit;
    text-align: left;
    cursor: default;
}

.diff-file-rail__group-header {
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 30px;
    margin-left: -6px;
    padding: 6px 5px;
    color: var(--diff-secondary, var(--diff-muted));
}

.diff-file-rail__group-header:hover,
.diff-file-rail__row:hover {
    /* --shell-nav-hover-bg (used before) is the sidebar's hover: darker than the content surface in dark
       themes, so rail hover was invisible there. */
    background: var(--diff-rail-hover-bg, var(--shell-list-row-hover, var(--diff-hover-bg)));
}

/* Rail hover per theme: dark themes one raised-surface step above the base (+4.125 L; selection is +9.2),
   light themes Linear's measured list hover. Themes without a block fall back to --shell-list-row-hover. */
[data-app-theme="dark"] .diff-file-rail,
[data-app-theme="classic-dark"] .diff-file-rail,
[data-app-theme="magic-blue"] .diff-file-rail,
[data-app-theme="custom"] .diff-file-rail {
    --diff-rail-hover-bg: lch(from var(--diff-base, var(--shell-bg-surface, lch(5.52% 0.4 272))) calc(l + 4.125) calc(c + 0.5) h);
}

[data-app-theme="light"] .diff-file-rail {
    --diff-rail-hover-bg: lch(94.44% 0.5 282);
}

[data-app-theme="pure-light"] .diff-file-rail {
    --diff-rail-hover-bg: lch(97.667% 0 142.924);
}

@media (prefers-color-scheme: light) {
    [data-app-theme="system"] .diff-file-rail {
        --diff-rail-hover-bg: lch(94.44% 0.5 282);
    }
}

.diff-file-rail__group-header:focus-visible,
.diff-file-rail__row:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: -1px;
}

.diff-file-rail__group-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.diff-file-rail__group-label {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diff-file-rail__group-count {
    color: var(--diff-gutter-text);
    font-weight: 450;
}

.diff-file-rail__chevron {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--diff-gutter-text);
    transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1);
    transform: rotate(90deg);
}

/* Linear (DOM-probed): group / directory collapse runs a 200ms height + opacity animation with
   cubic-bezier(0.33, 1, 0.68, 1); the chevron rotates with the same curve. */

.diff-file-rail__collapse {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 200ms cubic-bezier(0.33, 1, 0.68, 1), opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
}

.diff-file-rail__collapse--closed {
    grid-template-rows: 0fr;
    opacity: 0;
}

/* The clip box reaches 6px left so directory rows (which hang 6px into the gutter) keep their rounded corners. */
.diff-file-rail__collapse-inner {
    min-height: 0;
    margin-left: -6px;
    padding-left: 6px;
    overflow: hidden;
}

/* Linear (DOM-probed): a file row's hover card — full path + counts — appears ~450ms into the hover,
   8px under the row at the pointer's x: 11px/450, 5px 8px padding, r8, tooltip surface, pops in. */

.diff-file-rail__row--file {
    position: relative;
}

/* Hover card content; the surface (ring, fill, radius, entrance) is the shared popover primitive's,
   with Linear's measured tooltip shadow. */
.diff-file-rail__hover-popover {
    --ui-popover-shadow: var(--diff-popover-shadow);
}

.diff-file-rail__hover-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 22px; /* + the surface's hairline top and bottom = Linear's 24px card */
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 450;
    line-height: 13px;
    white-space: nowrap;
}

.diff-file-rail__hover-card-counts {
    font-size: 11px;
    gap: 4px;
}

.diff-file-rail__group-header--collapsed .diff-file-rail__chevron,
.diff-file-rail__row--collapsed .diff-file-rail__chevron {
    transform: rotate(0deg);
}

.diff-file-rail__group-counts {
    flex: 0 0 auto;
    gap: 6px;
}

.diff-file-rail__group-body {
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}

.diff-file-rail__group + .diff-file-rail__group {
    margin-top: 4px; /* + the tree's 2px gap = Linear's 6px */
}

.diff-file-rail__group-body--flat {
    padding-left: 0;
}

.diff-file-rail__directory {
    display: flex;
    flex-direction: column;
}

.diff-file-rail__directory-body {
    display: flex;
    flex-direction: column;
    padding-left: 0;
}

/* Nesting (measured on slop#17, 1728 wide): every level steps 14px. File icons sit at 245 + 14·depth
   from the rail's left edge (row host at 241, so 4px + 14px·depth); directory rows hang 6px into the
   gutter (row at 235) and their icons land on the same 245 + 14·depth grid from depth 1 (10px + 14px·depth),
   with the root directory icon at 240. */
.diff-file-rail__row-host > .diff-file-rail__row {
    padding-left: calc(4px + 14px * var(--diff-rail-depth, 0));
}

.diff-file-rail__directory-body > .diff-file-rail__directory > .diff-file-rail__row {
    padding-left: calc(10px + 14px * var(--diff-rail-depth, 1));
}

/* The hover-card trigger wraps each file row; it stretches like the row did and adds no box of its own. */
.diff-file-rail__row-host {
    display: flex;
    width: 100%;
    min-width: 0;
}

.diff-file-rail__row {
    gap: 8px;
    height: 28px;
    padding: 5px;
}

/* Directory rows pack icon, label and chevron at 4px (measured), 29px tall. */

.diff-file-rail__row--directory {
    gap: 4px;
    width: 100%;
    height: 29px;
    margin-left: -6px;
    padding: 6px 5px;
    color: var(--diff-secondary, var(--diff-muted));
}

/* Selection outranks hover: hovering the selected row keeps its selected fill. */
.diff-file-rail__row--selected,
.diff-file-rail__row--selected:hover {
    background: var(--diff-rail-selected-bg, var(--shell-nav-active-bg, var(--diff-selection-bg)));
    color: var(--diff-text);
}

.diff-file-rail__row-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    place-items: center;
}

/* Folder glyph: closed and open outlines stacked in one 14px cell; the collapsed state crossfades (Linear).
   Filled in the row's secondary tone (Linear: lch(39.176 1.25 282)), not the primary file-icon tone. */
.diff-file-rail__folder {
    color: var(--diff-secondary, var(--diff-muted));
}

.diff-file-rail__folder > .diff-file-rail__folder-glyph {
    grid-area: 1 / 1;
    color: inherit;
    transition: opacity 120ms ease;
}

.diff-file-rail__folder-glyph--closed {
    opacity: 0;
}

.diff-file-rail__row--collapsed .diff-file-rail__folder-glyph--closed {
    opacity: 1;
}

.diff-file-rail__row--collapsed .diff-file-rail__folder-glyph--open {
    opacity: 0;
}

.diff-file-rail__row-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diff-file-rail__row-label--directory {
    flex: 0 1 auto;
}

.diff-file-rail__row--directory .diff-file-rail__chevron {
    margin-left: 2px;
}

.diff-file-rail__row-label--added {
    color: var(--diff-added-file);
}

.diff-file-rail__row-label--removed,
.diff-file-rail__row-label--conflicted {
    color: var(--diff-removed-file);
}

.diff-file-rail__reviewed {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--diff-muted);
}

/* ----- File selection: a 14px box in each row's left gutter, rows shift 20px right to make room ----- */

.diff-file-rail__row-host,
.diff-file-rail__directory {
    position: relative;
}

.diff-file-rail__check {
    position: absolute;
    top: 7px;
    left: calc(4px + 14px * var(--diff-rail-depth, 0));
    z-index: 1;
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
}

.diff-file-rail__check--directory {
    top: 8px;
}

/* Root directory rows hang 5px into the gutter (icon at -1px); their box hangs with them so the gap to the
   folder glyph stays the same 6px as on file rows. */
.diff-file-rail__group-body > .diff-file-rail__directory > .diff-file-rail__check--directory {
    left: -1px;
}

.diff-file-rail__check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: default;
}

.diff-file-rail__check-box {
    display: inline-grid;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 1px solid var(--diff-checkbox-border);
    border-radius: 3px;
    background: var(--diff-surface, transparent);
    color: var(--shell-accent-contrast, #fff);
    transition: background-color 100ms ease, border-color 100ms ease;
}

.diff-file-rail__check input:checked + .diff-file-rail__check-box,
.diff-file-rail__check-box--mixed {
    border-color: var(--diff-accent);
    background: var(--diff-accent);
}

.diff-file-rail__check input:focus-visible + .diff-file-rail__check-box {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

.diff-file-rail__check--disabled {
    opacity: 0.4;
}

.diff-file-rail__check--disabled input {
    pointer-events: none;
}

.diff-file-rail--selectable .diff-file-rail__row-host > .diff-file-rail__row {
    padding-left: calc(24px + 14px * var(--diff-rail-depth, 0));
}

.diff-file-rail--selectable .diff-file-rail__group-body > .diff-file-rail__directory > .diff-file-rail__row {
    padding-left: 25px;
}

.diff-file-rail--selectable .diff-file-rail__directory-body > .diff-file-rail__directory > .diff-file-rail__row {
    padding-left: calc(30px + 14px * var(--diff-rail-depth, 1));
}

.diff-file-rail__row:focus-visible,
.diff-file-rail__group-header:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: -1px;
}

/* Unresolved-comment badge at the end of a rail row (measured 18×18, r5, lch(92.44 0.5 282) light). */

.diff-file-rail__badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--diff-badge-bg, color-mix(in srgb, var(--diff-text) 8%, transparent));
    color: var(--diff-secondary, var(--diff-muted));
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
}

/* ----- Rail list mode: "name  directory" rows ----- */

.diff-file-rail__row-directory {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--diff-muted);
    font-size: 11px;
    font-weight: 450;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== File list ===== */

/* ----- File stack ----- */

.diff-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Image card body (measured on slop#17): toolbar 8px under the header, right-aligned; Source | Preview pill
   167×33 (white, 0.5px hairline lch(91.9), r999, 4px padding, 2px gap) with 24px r9999 buttons whose active
   state fills lch(95.543); Download and Comment are 24px icon buttons after it. The image sits centred at
   natural size, 6px under the toolbar, with a 12px "W 360px × H 80px" caption 19px below. */
.diff-image-preview {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 33px;
}

.diff-image-preview__bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding-right: 1px;
}

.diff-image-preview__modes {
    display: inline-flex;
    gap: 2px;
    box-sizing: border-box;
    height: 33px;
    margin-right: 8px;
    padding: 4px;
    border: 0.5px solid var(--diff-card-border);
    border-radius: 999px;
    background: var(--diff-card-bg);
}

.diff-image-preview__mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-text);
    font: 500 12px/1 var(--font-regular);
    cursor: default;
}

.diff-image-preview__mode:hover {
    background: var(--diff-hover-bg);
}

.diff-image-preview__mode--active {
    /* Same active fill as the toolbar's Files pill: per theme, not the light literal it once fell back to. */
    background: var(--diff-tab-active-bg, color-mix(in srgb, var(--diff-strong-text) 8%, transparent));
}

.diff-image-preview__action {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-text);
    cursor: default;
}

.diff-image-preview__action:hover {
    background: var(--diff-hover-bg);
}

/* Linear's toolbar floats over the stage: the image top sits 75px under the card top, 3px above the bar's bottom. */
.diff-image-preview__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3px;
}

.diff-image-preview__frame {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.diff-image-preview__image {
    display: block;
    max-width: 100%;
    height: auto;
}

.diff-image-preview__caption {
    margin: 19px 0 0;
    color: var(--diff-secondary, var(--diff-muted));
    font: 450 12px/15px var(--font-regular);
}

.diff-image-preview__caption-key {
    color: var(--diff-muted);
}

.diff-image-preview__empty {
    margin: 0;
    padding: 24px;
    color: var(--diff-muted);
    font: 400 13px/1.5 var(--font-regular);
    text-align: center;
}

/* Generated-file notice (measured on slop#17): 100px block, 24px padding, 8px gap; 13px secondary text and a
   75×28 r9999 ghost "Show diff" button. */
.diff-file-card__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
}

.diff-file-card__notice-text {
    color: var(--diff-secondary, var(--diff-muted));
    font: 450 13px/16px var(--font-regular);
}

.diff-file-card__notice-button {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-text);
    font: 500 12px/1 var(--font-regular);
    cursor: default;
}

.diff-file-card__notice-button:hover {
    background: var(--diff-hover-bg);
}

/* Empty file body (measured: 68px block, 24px padding, 13px/1.5 centred in the muted tone). */
.diff-file-card__empty {
    margin: 0;
    padding: 24px;
    color: var(--diff-muted);
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.diff-file-list__empty,
.diff-file-rail__empty {
    margin: 0;
    padding: 12px 0;
    color: var(--diff-muted);
    font-size: 12px;
    line-height: 15px;
}

/* ===== File card ===== */

/* ----- File card ----- */

.diff-file-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: clip; /* Linear: r8 clip — rounds the stuck header's bottom off at the end of the file */
    border-radius: 8px;
    color: var(--diff-text);
}

.diff-file-card__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--diff-page-bg); /* Linear: page-coloured strip masks the body's corners while stuck */
}

.diff-file-card__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    height: 37px;
    padding: 6px 12px 6px 16px;
    border-radius: 8px 8px 0 0;
    background: var(--diff-card-bg);
    box-shadow: inset 0 0 0 0.5px var(--diff-card-border);
}

.diff-file-card--collapsed .diff-file-card__header-inner {
    border-radius: 8px;
}

.diff-file-card--collapsed .diff-file-card__header {
    border-bottom-color: transparent;
    border-radius: 8px;
}

.diff-file-card__title {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
}

.diff-file-card__toggle {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--diff-muted);
    cursor: default;
}

.diff-file-card__file-icon,
.diff-file-card__chevron {
    grid-area: 1 / 1;
    display: inline-grid;
    place-items: center;
    transition: opacity 120ms ease, transform 120ms ease;
}

.diff-file-card__chevron {
    opacity: 0;
    transform: rotate(90deg);
}

.diff-file-card__toggle--collapsed .diff-file-card__chevron {
    transform: rotate(0deg);
}

.diff-file-card__toggle:not(.diff-file-card__toggle--static):hover .diff-file-card__file-icon,
.diff-file-card__toggle:focus-visible .diff-file-card__file-icon {
    opacity: 0;
}

.diff-file-card__toggle:not(.diff-file-card__toggle--static):hover .diff-file-card__chevron,
.diff-file-card__toggle:focus-visible .diff-file-card__chevron {
    opacity: 1;
}

.diff-file-card__toggle:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

.diff-file-card__path {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.diff-file-card__name {
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--diff-text);
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
    text-overflow: ellipsis;
}

.diff-file-card__name--added {
    color: var(--diff-added-file);
}

.diff-file-card__name--removed {
    color: var(--diff-removed-file);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}

.diff-file-card__directory,
.diff-file-card__renamed-from {
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--diff-secondary, var(--diff-muted));
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
    text-overflow: ellipsis;
}

.diff-file-card__copy {
    display: inline-grid;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--diff-muted);
    opacity: 0;
    transition: opacity 100ms ease;
}

.diff-file-card__header:hover .diff-file-card__copy,
.diff-file-card__copy:focus-visible {
    opacity: 1;
}

.diff-file-card__copy:hover {
    color: var(--diff-text);
}

.diff-file-card__meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.diff-file-card__actions-wrap {
    position: relative;
    display: inline-flex;
}

.diff-file-card__reviewed,
.diff-file-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 24px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-secondary, var(--diff-muted));
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
}

.diff-file-card__reviewed {
    gap: 8px;
    padding: 0 8px;
}

.diff-file-card__actions {
    width: 24px;
    padding: 0 2px;
}

.diff-file-card__reviewed:hover,
.diff-file-card__actions:hover {
    background: var(--diff-pill-hover-bg);
}

.diff-file-card__reviewed:focus-visible,
.diff-file-card__actions:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

.diff-file-card__reviewed-box {
    display: inline-grid;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 1px solid var(--diff-checkbox-border);
    border-radius: 3px;
    color: var(--shell-accent-contrast, #fff);
    transition: background-color 100ms ease, border-color 100ms ease;
}

.diff-file-card__reviewed--checked .diff-file-card__reviewed-box {
    border-color: var(--diff-accent);
    background: var(--diff-accent);
}

.diff-file-card__reviewed-label {
    color: var(--diff-secondary, var(--diff-muted));
    font-weight: 450;
}

/* Selection toggle in the header: the Reviewed toggle's anatomy and slot, host-labelled ("Staged"). */
.diff-file-card__select:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.diff-file-card__uncommitted--conflicted {
    background: color-mix(in srgb, var(--diff-removed-file) 14%, transparent);
    color: var(--diff-removed-file);
}

.diff-file-card__uncommitted--resolved {
    background: color-mix(in srgb, var(--diff-added-file) 14%, transparent);
    color: var(--diff-added-file);
}

.diff-file-card__conflict {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.diff-file-card__conflict-error {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    border-top: 0.5px solid var(--diff-card-border);
    color: var(--diff-removed-file);
    font-size: 12px;
    line-height: 16px;
}

/* "Uncommitted" pill after the path (working set); accent tint, 16px tall. */
.diff-file-card__uncommitted {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--diff-accent) 14%, transparent);
    color: var(--diff-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.diff-file-card__reviewed--checked .diff-file-card__reviewed-label {
    color: var(--diff-text);
}

.diff-file-card__body {
    min-width: 0;
    overflow: clip;
    border-radius: 0 0 8px 8px;
    background: var(--diff-card-bg);
    box-shadow: inset 0.5px 0 0 var(--diff-card-border), inset -0.5px 0 0 var(--diff-card-border), inset 0 -0.5px 0 var(--diff-card-border);
    animation: diff-annotation-enter 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .diff-file-card__body {
        animation: none;
    
    }
}

/* Comment count in the card header (chat glyph 12 + count, 12px before the +/- counts). */

.diff-file-card__comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    color: var(--diff-secondary, var(--diff-muted));
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
}

/* ===== Diff lines (gutter, code, folds, split view) ===== */

/* ----- Unified line list ----- */

/* Clicking into the code focuses the list (tabindex -1) so the menu key and Shift+F10 reach it; no ring. */
.diff-lines:focus {
    outline: none;
}

/* Menus opened from the code (the right-click menu) use the UI face, not the code face the list sets. */
.diff-lines .anchored-dropdown-menu {
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: normal;
}

.diff-lines {
    --diff-gutter-width: 50px;
    --diff-font-size: 12px;
    --diff-line-height: 20px;
    position: relative;
    display: block;
    min-width: 0;
    overflow-x: auto;
    color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size);
    line-height: var(--diff-line-height);
    tab-size: 4;
}

/* Theme background on: the list paints the theme's editor colours edge to edge. */

.diff-lines--themed {
    background: var(--diff-card-bg);
}

/* Wrapped lines: rows grow with their text; the gutter stays pinned to the first visual line. */

.diff-lines--wrap .diff-line,
.diff-lines--wrap .diff-line__gutter,
.diff-lines--wrap .diff-line__code {
    height: auto;
    min-height: var(--diff-line-height);
}

.diff-lines--wrap .diff-line {
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
    min-width: 0;
}

.diff-lines--wrap .diff-line__code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-lines--wrap .diff-line__gutter {
    align-items: flex-start;
}

/* Differentiate without colour: a 2px change bar inside the gutter edge instead of the tints. */

.diff-lines--no-color .diff-line--added .diff-line__code,
.diff-lines--no-color .diff-line--removed .diff-line__code {
    background: transparent;
}

.diff-lines--no-color .diff-line--added .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-added-text);
}

.diff-lines--no-color .diff-line--removed .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-removed-text);
}

.diff-line,
.diff-fold,
.diff-annotation {
    position: relative;
    display: grid;
    grid-template-columns: var(--diff-gutter-width) minmax(max-content, 1fr);
    min-width: max-content;
}

.diff-line {
    --diff-row-bg: transparent;
    height: var(--diff-line-height);
}

.diff-line--added {
    --diff-row-bg: var(--diff-added-bg);
}

.diff-line--removed {
    --diff-row-bg: var(--diff-removed-bg);
}

.diff-file-card__conflict-error {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    border-top: 0.5px solid var(--diff-card-border);
    color: var(--diff-removed-file);
    font-size: 12px;
    line-height: 16px;
}

/* "Uncommitted" pill after the path (working set); accent tint, 16px tall. */
.diff-file-card__uncommitted {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--diff-accent) 14%, transparent);
    color: var(--diff-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.diff-file-card__reviewed--checked .diff-file-card__reviewed-label {
    color: var(--diff-text);
}


/* Comment count in the card header (chat glyph 12 + count, 12px before the +/- counts). */

.diff-file-card__comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    color: var(--diff-secondary, var(--diff-muted));
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
}

/* ===== Diff lines (gutter, code, folds, split view) ===== */

/* ----- Unified line list ----- */

/* Clicking into the code focuses the list (tabindex -1) so the menu key and Shift+F10 reach it; no ring. */
.diff-lines:focus {
    outline: none;
}

/* Menus opened from the code (the right-click menu) use the UI face, not the code face the list sets. */
.diff-lines .anchored-dropdown-menu {
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: normal;
}

.diff-lines {
    --diff-gutter-width: 50px;
    --diff-font-size: 12px;
    --diff-line-height: 20px;
    position: relative;
    display: block;
    min-width: 0;
    overflow-x: auto;
    color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size);
    line-height: var(--diff-line-height);
    tab-size: 4;
}

/* Theme background on: the list paints the theme's editor colours edge to edge. */

.diff-lines--themed {
    background: var(--diff-card-bg);
}

/* Wrapped lines: rows grow with their text; the gutter stays pinned to the first visual line. */

.diff-lines--wrap .diff-line,
.diff-lines--wrap .diff-line__gutter,
.diff-lines--wrap .diff-line__code {
    height: auto;
    min-height: var(--diff-line-height);
}

.diff-lines--wrap .diff-line {
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
    min-width: 0;
}

.diff-lines--wrap .diff-line__code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-lines--wrap .diff-line__gutter {
    align-items: flex-start;
}

/* Differentiate without colour: a 2px change bar inside the gutter edge instead of the tints. */

.diff-lines--no-color .diff-line--added .diff-line__code,
.diff-lines--no-color .diff-line--removed .diff-line__code {
    background: transparent;
}

.diff-lines--no-color .diff-line--added .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-added-text);
}

.diff-lines--no-color .diff-line--removed .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-removed-text);
}

.diff-line,
.diff-fold,
.diff-annotation {
    position: relative;
    display: grid;
    grid-template-columns: var(--diff-gutter-width) minmax(max-content, 1fr);
    min-width: max-content;
}

.diff-line {
    --diff-row-bg: transparent;
    height: var(--diff-line-height);
}

.diff-line--added {
    --diff-row-bg: var(--diff-added-bg);
}

.diff-line--removed {
    --diff-row-bg: var(--diff-removed-bg);
}

.diff-file-card__conflict-error {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    border-top: 0.5px solid var(--diff-card-border);
    color: var(--diff-removed-file);
    font-size: 12px;
    line-height: 16px;
}

/* "Uncommitted" pill after the path (working set); accent tint, 16px tall. */
.diff-file-card__uncommitted {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--diff-accent) 14%, transparent);
    color: var(--diff-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.diff-file-card__reviewed--checked .diff-file-card__reviewed-label {
    color: var(--diff-text);
}


/* Comment count in the card header (chat glyph 12 + count, 12px before the +/- counts). */

.diff-file-card__comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    color: var(--diff-secondary, var(--diff-muted));
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
}

/* ===== Diff lines (gutter, code, folds, split view) ===== */

/* ----- Unified line list ----- */

/* Clicking into the code focuses the list (tabindex -1) so the menu key and Shift+F10 reach it; no ring. */
.diff-lines:focus {
    outline: none;
}

/* Menus opened from the code (the right-click menu) use the UI face, not the code face the list sets. */
.diff-lines .anchored-dropdown-menu {
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: normal;
}

.diff-lines {
    --diff-gutter-width: 50px;
    --diff-font-size: 12px;
    --diff-line-height: 20px;
    position: relative;
    display: block;
    min-width: 0;
    overflow-x: auto;
    color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size);
    line-height: var(--diff-line-height);
    tab-size: 4;
}

/* Theme background on: the list paints the theme's editor colours edge to edge. */

.diff-lines--themed {
    background: var(--diff-card-bg);
}

/* Wrapped lines: rows grow with their text; the gutter stays pinned to the first visual line. */

.diff-lines--wrap .diff-line,
.diff-lines--wrap .diff-line__gutter,
.diff-lines--wrap .diff-line__code {
    height: auto;
    min-height: var(--diff-line-height);
}

.diff-lines--wrap .diff-line {
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
    min-width: 0;
}

.diff-lines--wrap .diff-line__code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-lines--wrap .diff-line__gutter {
    align-items: flex-start;
}

/* Differentiate without colour: a 2px change bar inside the gutter edge instead of the tints. */

.diff-lines--no-color .diff-line--added .diff-line__code,
.diff-lines--no-color .diff-line--removed .diff-line__code {
    background: transparent;
}

.diff-lines--no-color .diff-line--added .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-added-text);
}

.diff-lines--no-color .diff-line--removed .diff-line__gutter {
    box-shadow: inset 2px 0 0 var(--diff-removed-text);
}

.diff-line,
.diff-fold,
.diff-annotation {
    position: relative;
    display: grid;
    grid-template-columns: var(--diff-gutter-width) minmax(max-content, 1fr);
    min-width: max-content;
}

.diff-line {
    --diff-row-bg: transparent;
    height: var(--diff-line-height);
}

.diff-line--added {
    --diff-row-bg: var(--diff-added-bg);
}

.diff-line--removed {
    --diff-row-bg: var(--diff-removed-bg);
}

.diff-line__gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    height: var(--diff-line-height);
    padding: 0 10px;
    background: var(--diff-card-bg);
    color: var(--diff-gutter-text);
    user-select: none;
}

.diff-line--added .diff-line__gutter {
    color: var(--diff-added-text);
}

.diff-line--removed .diff-line__gutter {
    color: var(--diff-removed-text);
}

/* Linear (measured, light): the sticky 50px gutter sits on the card background and paints the row tint
   over it with a ::before overlay (same colour as the code cell), plus a 1px bar in the change colour
   on its left edge. */

.diff-line--added .diff-line__gutter,
.diff-line--removed .diff-line__gutter {
    background: var(--diff-row-bg);
    box-shadow: inset 1px 0 0 currentColor;
}

/* ===== Conflict rows (DiffConflictView) =====
   A conflicted file drawn with the diff's own rows: each hunk's two sides tinted (ours in the added tone, theirs
   in the amber), the two marker lines as side headers, the closing marker as an action row with the actions in
   a bubble, and an inline textarea when a hunk is being edited. Nothing here scrolls on its own. */

/* Replacing a hunk with its editor (and back) swaps rows in place at the same height; keep the browser's scroll
   anchoring off these rows so the swap never moves the scroll position. */
.diff-lines--conflicts {
    overflow-anchor: none;
}

/* Rows that appear (the editor taking a hunk's place, the rows coming back on Done or Cancel, a resolved hunk)
   fade and settle in over 160ms; unchanged rows are reused by the renderer and never animate. */
.diff-lines--conflicts .diff-line,
.diff-lines--conflicts .diff-conflict__edit,
.diff-lines--conflicts .diff-conflict__actions {
    animation: diff-conflict-enter 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes diff-conflict-enter {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diff-lines--conflicts .diff-line,
    .diff-lines--conflicts .diff-conflict__edit,
    .diff-lines--conflicts .diff-conflict__actions {
        animation: none;
    }
}

/* Marker rows default to the muted tone; the two side headers then take their block's tint so each reads
   as the first row of what follows (the rules below win by order). */
.diff-line--conflict-marker {
    --diff-row-bg: color-mix(in srgb, var(--diff-muted) 10%, var(--diff-card-bg));
}

.diff-line--conflict-ours,
.diff-line--conflict-marker-ours {
    --diff-row-bg: var(--diff-added-bg);
}

.diff-line--conflict-theirs,
.diff-line--conflict-marker-theirs {
    --diff-row-bg: var(--diff-conflict-theirs-bg, color-mix(in srgb, var(--diff-theirs-text, lch(66% 62 74)) 12%, var(--diff-card-bg)));
}

.diff-line--conflict-ours .diff-line__gutter,
.diff-line--conflict-theirs .diff-line__gutter {
    background: var(--diff-row-bg);
    box-shadow: inset 1px 0 0 currentColor;
}

.diff-line--conflict-ours .diff-line__gutter {
    color: var(--diff-added-text);
}

.diff-line--conflict-theirs .diff-line__gutter {
    color: var(--diff-theirs-text, lch(66% 62 74));
}

/* Side header row: one cell across the gutter and the code column. The label is an anchor-shaped chip flush
   with the row's left edge, square on the left, rounded on the right, the row's full height, carrying the same
   1px bar the tinted lines beneath it have; side name then the ref, all in the chip. */
.diff-conflict__header {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    box-sizing: border-box;
    height: var(--diff-line-height);
    padding: 0;
    background: var(--diff-row-bg);
    font-family: var(--font-regular, inherit);
    white-space: nowrap;
}

.diff-conflict__marker-side {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    box-sizing: border-box;
    height: var(--diff-line-height);
    padding: 0 10px 0 9px;
    border-radius: 0 4px 4px 0;
    color: var(--shell-accent-contrast, #fff);
    font-size: 11px;
    font-weight: 500;
    line-height: var(--diff-line-height);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--diff-strong-text, var(--diff-text)) 28%, transparent);
}

.diff-conflict__marker-side--ours {
    background: var(--diff-added-file);
}

.diff-conflict__marker-side--theirs {
    background: var(--diff-theirs-text, lch(66% 62 74));
}

.diff-conflict__marker-ref {
    font-family: var(--diff-font-mono);
    font-size: 11px;
    font-weight: 450;
    opacity: 0.85;
}

/* The action row stands in for the closing marker. It takes the plain row colour, like the line after it, and
   holds the actions in a bubble in the selection toolbar's style: hairline, radius 8, card fill and shadow. */
.diff-conflict__actions {
    --diff-row-bg: transparent;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 40px;
}

.diff-conflict__actions-body {
    display: flex;
    min-width: 0;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    background: var(--diff-row-bg);
    font-family: var(--font-regular, inherit);
}

.diff-conflict__bubble {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    padding: 3px;
    border: 0.5px solid var(--diff-thread-border, var(--diff-card-border));
    border-radius: 8px;
    background: var(--diff-thread-surface, var(--diff-card-bg));
    box-shadow: var(--diff-thread-shadow, lch(0 0 0 / 0.3) 0 0.5px 1px 1px);
}

.diff-conflict__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--diff-secondary, var(--diff-muted));
    font: inherit;
    font-family: var(--font-regular, inherit);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
    cursor: default;
    transition: background-color 150ms, color 150ms;
}

.diff-conflict__action:hover {
    background: var(--diff-pill-hover-bg);
    color: var(--diff-body-text, var(--diff-strong-text));
    transition-duration: 0s;
}

.diff-conflict__action:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

.diff-conflict__action:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.diff-conflict__action--primary {
    color: var(--diff-accent);
}

/* Inline hunk editor: rows in the ours tint with a numbered gutter, the textarea in the code column with the
   diff's font, line height and padding, so the edited hunk reads like the lines around it. */
.diff-conflict__edit {
    --diff-row-bg: var(--diff-added-bg);
    display: grid;
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
    min-height: calc(var(--diff-line-height) * var(--diff-conflict-rows, 3));
}

.diff-conflict__edit-gutter {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    height: auto;
    align-self: stretch;
    padding: 0 10px;
    background: var(--diff-row-bg);
    color: var(--diff-added-text);
    box-shadow: inset 1px 0 0 currentColor;
}

.diff-conflict__edit-gutter .diff-line__number {
    height: var(--diff-line-height);
}

.diff-conflict__edit-body {
    position: relative;
    min-width: 0;
    background: var(--diff-row-bg);
}

/* Highlight layer: the tokenised draft painted under the textarea, line for line in the same metrics. */
.diff-conflict__highlight {
    position: absolute;
    inset: 0;
    padding: 0 10px;
    overflow: hidden;
    color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size);
    line-height: var(--diff-line-height);
    tab-size: 4;
    white-space: pre;
    pointer-events: none;
}

.diff-conflict__highlight-line {
    height: var(--diff-line-height);
}

.diff-conflict__editor {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--diff-line-height) * var(--diff-conflict-rows, 3));
    margin: 0;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size);
    line-height: var(--diff-line-height);
    tab-size: 4;
    white-space: pre;
    resize: none;
    outline: none;
    overflow: hidden;
}

/* Linear's DiffSharedCommentButton (DOM-probed 2026-09-06): a pill 4px inside the gutter
   (width gutter − 8, line-height tall, r9999) that covers the line number, filled with the title
   colour at 5% over the row (7% hover) and the 14px "Chat" glyph at 65% title colour. */

.diff-line__comment {
    position: absolute;
    inset: 0 4px;
    z-index: 1;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    background: var(--diff-comment-button-bg, color-mix(in srgb, var(--diff-strong-text) 5%, var(--diff-row-bg, var(--diff-card-bg))));
    opacity: 0;
    cursor: default;
    transition: opacity 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--diff-strong-text) 65%, transparent);
}

.diff-line__comment:hover {
    background: var(--diff-comment-button-hover-bg, color-mix(in srgb, var(--diff-strong-text) 7%, var(--diff-row-bg, var(--diff-card-bg))));
}

.diff-line:hover .diff-line__comment,
.diff-line__comment:focus-visible {
    opacity: 1;
}

.diff-lines--commentable .diff-line:hover .diff-line__number {
    opacity: 0;
}

.diff-line__comment:focus-visible {
    outline: 2px solid var(--diff-accent);
    outline-offset: -2px;
}

.diff-line__number {
    display: inline-flex;
    align-items: center;
    height: var(--diff-line-height);
    text-align: right;
    white-space: nowrap;
}

.diff-line__number--glyph {
    width: 12px;
    justify-content: flex-end;
}

.diff-line__code {
    box-sizing: border-box;
    height: var(--diff-line-height);
    padding: 0 10px;
    background: var(--diff-row-bg);
    white-space: pre;
}

.diff-line:hover .diff-line__code {
    background: color-mix(in srgb, var(--diff-row-bg) 100%, var(--diff-hover-bg) 0%);
}

/* Fold rows: 28px, step button(s) at the gutter edge, "Expand all" pill centred on the row. */

.diff-fold {
    height: 28px;
}

.diff-fold__gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    box-sizing: border-box;
    height: 28px;
    padding: 2px 4px 2px 0;
    background: var(--diff-card-bg);
}

.diff-fold__body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.diff-fold__step,
.diff-fold__expand-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 24px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--diff-card-bg);
    color: var(--diff-secondary, var(--diff-text));
    font: inherit;
    font-family: var(--font-regular, inherit);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    cursor: default;
    transition: background-color 80ms ease;
}

.diff-fold__step {
    width: 24px;
    padding: 0 2px;
}

.diff-fold__expand-all {
    position: absolute;
    top: 2px;
    left: 50%;
    gap: 6px;
    padding: 0 8px 0 6px;
    transform: translateX(calc(-50% - var(--diff-gutter-width) / 2));
    white-space: nowrap;
}

.diff-fold__step:hover,
.diff-fold__expand-all:hover {
    background: var(--diff-pill-hover-bg);
}

.diff-fold__step:focus-visible,
.diff-fold__expand-all:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

/* ----- Split view: old beside new, each side its own gutter + code column ----- */

.diff-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
}

.diff-split-row--fold > .diff-fold {
    grid-column: 1 / -1;
}

.diff-split-row--fold {
    display: block;
}

.diff-split__side {
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
    min-width: 0;
}

.diff-split__side--left {
    border-right: 0.5px solid var(--diff-card-border);
}

.diff-split__side .diff-line__code {
    overflow: hidden;
    text-overflow: clip;
}

.diff-lines--split .diff-split__side .diff-line__gutter {
    position: static;
}

.diff-line--blank .diff-line__gutter,
.diff-line__code--blank {
    background: var(--diff-blank-bg, color-mix(in srgb, var(--diff-card-bg) 96%, var(--diff-text) 4%));
    background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--diff-text) 5%, transparent) 6px 7px);
}

/* Linear (measured, light): the changed run is an inline span with 2px vertical padding, r4,
   bg lch(94.733 9.903 148.136) — the same family as the row tint, one step stronger. */

.diff-inline--added {
    padding: 2px 0;
    background: var(--diff-added-inline-bg, color-mix(in srgb, var(--diff-added-text) 22%, transparent));
    border-radius: 4px;
}

.diff-inline--removed {
    padding: 2px 0;
    background: var(--diff-removed-inline-bg, color-mix(in srgb, var(--diff-removed-text) 22%, transparent));
    border-radius: 4px;
}

.diff-lines--no-color .diff-inline--added,
.diff-lines--no-color .diff-inline--removed {
    background: transparent;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* Row windowing: the rows outside the viewport are stood in for by spacers of their exact height.
   They carry a faint placeholder so a fast fling shows row striping and gutter marks instead of a blank,
   drawn purely in CSS at the line pitch so it costs nothing on the server round trip. */
.diff-lines__spacer,
.diff-file-card__shell {
    display: block;
    width: 100%;
    pointer-events: none;
    background-image:
        linear-gradient(to bottom, var(--diff-placeholder-mark) 0 8px, transparent 8px),
        repeating-linear-gradient(to bottom, var(--diff-placeholder-stripe) 0 var(--diff-line-height, 20px), transparent var(--diff-line-height, 20px) calc(var(--diff-line-height, 20px) * 2));
    background-size: 22px var(--diff-line-height, 20px), auto;
    background-position: 14px 6px, 0 0;
    background-repeat: repeat-y, repeat;
}

.diff-lines--split .diff-lines__spacer {
    background-image:
        linear-gradient(to bottom, var(--diff-placeholder-mark) 0 8px, transparent 8px),
        linear-gradient(to bottom, var(--diff-placeholder-mark) 0 8px, transparent 8px),
        repeating-linear-gradient(to bottom, var(--diff-placeholder-stripe) 0 var(--diff-line-height), transparent var(--diff-line-height) calc(var(--diff-line-height) * 2));
    background-size: 22px var(--diff-line-height), 22px var(--diff-line-height), auto;
    background-position: 14px 6px, calc(50% + 14px) 6px, 0 0;
    background-repeat: repeat-y, repeat-y, repeat;
}

/* File-level threads (Linear's "Comment on file") sit above the first line, on the card fill. */

.diff-lines__file-threads {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    background: var(--diff-card-bg);
}

/* ===== Syntax token swatches ===== */

/* Syntax swatches: every TextMate family the tokenizer emits. A SyntaxTheme overrides the
   --diff-token-<kind> custom properties (plus -weight/-style/-decoration/-bg); the fallbacks are
   Linear Dark's measured palette expressed through the *-base tokens below. */

.diff-token--keyword {
    color: var(--diff-token-keyword, var(--diff-token-keyword-base));
    font-weight: var(--diff-token-keyword-weight, inherit);
    font-style: var(--diff-token-keyword-style, normal);
    text-decoration: var(--diff-token-keyword-decoration, none);
    background: var(--diff-token-keyword-bg, transparent);
}

.diff-token--control-keyword {
    color: var(--diff-token-control-keyword, var(--diff-token-control-keyword-base));
    font-weight: var(--diff-token-control-keyword-weight, inherit);
    font-style: var(--diff-token-control-keyword-style, normal);
    text-decoration: var(--diff-token-control-keyword-decoration, none);
    background: var(--diff-token-control-keyword-bg, transparent);
}

.diff-token--operator {
    color: var(--diff-token-operator, var(--diff-text));
    font-weight: var(--diff-token-operator-weight, inherit);
    font-style: var(--diff-token-operator-style, normal);
    text-decoration: var(--diff-token-operator-decoration, none);
    background: var(--diff-token-operator-bg, transparent);
}

.diff-token--punctuation {
    color: var(--diff-token-punctuation, var(--diff-text));
    font-weight: var(--diff-token-punctuation-weight, inherit);
    font-style: var(--diff-token-punctuation-style, normal);
    text-decoration: var(--diff-token-punctuation-decoration, none);
    background: var(--diff-token-punctuation-bg, transparent);
}

.diff-token--string {
    color: var(--diff-token-string, var(--diff-token-string-base));
    font-weight: var(--diff-token-string-weight, inherit);
    font-style: var(--diff-token-string-style, normal);
    text-decoration: var(--diff-token-string-decoration, none);
    background: var(--diff-token-string-bg, transparent);
}

.diff-token--regexp {
    color: var(--diff-token-regexp, lch(54.6% 72.2 47.1));
    font-weight: var(--diff-token-regexp-weight, inherit);
    font-style: var(--diff-token-regexp-style, normal);
    text-decoration: var(--diff-token-regexp-decoration, none);
    background: var(--diff-token-regexp-bg, transparent);
}

.diff-token--escape {
    color: var(--diff-token-escape, var(--diff-token-variable-base));
    font-weight: var(--diff-token-escape-weight, inherit);
    font-style: var(--diff-token-escape-style, normal);
    text-decoration: var(--diff-token-escape-decoration, none);
    background: var(--diff-token-escape-bg, transparent);
}

.diff-token--number {
    color: var(--diff-token-number, var(--diff-token-number-base));
    font-weight: var(--diff-token-number-weight, inherit);
    font-style: var(--diff-token-number-style, normal);
    text-decoration: var(--diff-token-number-decoration, none);
    background: var(--diff-token-number-bg, transparent);
}

.diff-token--constant {
    color: var(--diff-token-constant, var(--diff-token-constant-base));
    font-weight: var(--diff-token-constant-weight, inherit);
    font-style: var(--diff-token-constant-style, normal);
    text-decoration: var(--diff-token-constant-decoration, none);
    background: var(--diff-token-constant-bg, transparent);
}

.diff-token--variable {
    color: var(--diff-token-variable, var(--diff-token-variable-base));
    font-weight: var(--diff-token-variable-weight, inherit);
    font-style: var(--diff-token-variable-style, normal);
    text-decoration: var(--diff-token-variable-decoration, none);
    background: var(--diff-token-variable-bg, transparent);
}

.diff-token--property {
    color: var(--diff-token-property, var(--diff-token-variable-base));
    font-weight: var(--diff-token-property-weight, inherit);
    font-style: var(--diff-token-property-style, normal);
    text-decoration: var(--diff-token-property-decoration, none);
    background: var(--diff-token-property-bg, transparent);
}

.diff-token--parameter {
    color: var(--diff-token-parameter, var(--diff-token-variable-base));
    font-weight: var(--diff-token-parameter-weight, inherit);
    font-style: var(--diff-token-parameter-style, normal);
    text-decoration: var(--diff-token-parameter-decoration, none);
    background: var(--diff-token-parameter-bg, transparent);
}

.diff-token--function {
    color: var(--diff-token-function, var(--diff-token-number-base));
    font-weight: var(--diff-token-function-weight, inherit);
    font-style: var(--diff-token-function-style, normal);
    text-decoration: var(--diff-token-function-decoration, none);
    background: var(--diff-token-function-bg, transparent);
}

.diff-token--type {
    color: var(--diff-token-type, var(--diff-token-type-base));
    font-weight: var(--diff-token-type-weight, inherit);
    font-style: var(--diff-token-type-style, normal);
    text-decoration: var(--diff-token-type-decoration, none);
    background: var(--diff-token-type-bg, transparent);
}

.diff-token--namespace {
    color: var(--diff-token-namespace, var(--diff-token-type-base));
    font-weight: var(--diff-token-namespace-weight, inherit);
    font-style: var(--diff-token-namespace-style, normal);
    text-decoration: var(--diff-token-namespace-decoration, none);
    background: var(--diff-token-namespace-bg, transparent);
}

.diff-token--tag {
    color: var(--diff-token-tag, var(--diff-token-keyword-base));
    font-weight: var(--diff-token-tag-weight, inherit);
    font-style: var(--diff-token-tag-style, normal);
    text-decoration: var(--diff-token-tag-decoration, none);
    background: var(--diff-token-tag-bg, transparent);
}

.diff-token--attribute {
    color: var(--diff-token-attribute, var(--diff-token-variable-base));
    font-weight: var(--diff-token-attribute-weight, inherit);
    font-style: var(--diff-token-attribute-style, normal);
    text-decoration: var(--diff-token-attribute-decoration, none);
    background: var(--diff-token-attribute-bg, transparent);
}

.diff-token--decorator {
    color: var(--diff-token-decorator, var(--diff-token-variable-base));
    font-weight: var(--diff-token-decorator-weight, inherit);
    font-style: var(--diff-token-decorator-style, normal);
    text-decoration: var(--diff-token-decorator-decoration, none);
    background: var(--diff-token-decorator-bg, transparent);
}

.diff-token--comment {
    color: var(--diff-token-comment, var(--diff-muted));
    font-weight: var(--diff-token-comment-weight, inherit);
    font-style: var(--diff-token-comment-style, normal);
    text-decoration: var(--diff-token-comment-decoration, none);
    background: var(--diff-token-comment-bg, transparent);
}

.diff-token--label {
    color: var(--diff-token-label, var(--diff-gutter-text));
    font-weight: var(--diff-token-label-weight, inherit);
    font-style: var(--diff-token-label-style, normal);
    text-decoration: var(--diff-token-label-decoration, none);
    background: var(--diff-token-label-bg, transparent);
}

.diff-token--invalid {
    color: var(--diff-token-invalid, lch(62.5% 68.7 23.1));
    font-weight: var(--diff-token-invalid-weight, inherit);
    font-style: var(--diff-token-invalid-style, normal);
    text-decoration: var(--diff-token-invalid-decoration, none);
    background: var(--diff-token-invalid-bg, transparent);
}

.diff-token--heading {
    color: var(--diff-token-heading, var(--diff-token-keyword-base));
    font-weight: var(--diff-token-heading-weight, inherit);
    font-style: var(--diff-token-heading-style, normal);
    text-decoration: var(--diff-token-heading-decoration, none);
    background: var(--diff-token-heading-bg, transparent);
    font-weight: var(--diff-token-heading-weight, 700);
}

.diff-token--list-marker {
    color: var(--diff-token-list-marker, var(--diff-gutter-text));
    font-weight: var(--diff-token-list-marker-weight, inherit);
    font-style: var(--diff-token-list-marker-style, normal);
    text-decoration: var(--diff-token-list-marker-decoration, none);
    background: var(--diff-token-list-marker-bg, transparent);
}

.diff-token--quote {
    color: var(--diff-token-quote, var(--diff-muted));
    font-weight: var(--diff-token-quote-weight, inherit);
    font-style: var(--diff-token-quote-style, normal);
    text-decoration: var(--diff-token-quote-decoration, none);
    background: var(--diff-token-quote-bg, transparent);
}

.diff-token--link {
    color: var(--diff-token-link, var(--diff-text));
    font-weight: var(--diff-token-link-weight, inherit);
    font-style: var(--diff-token-link-style, normal);
    text-decoration: var(--diff-token-link-decoration, none);
    background: var(--diff-token-link-bg, transparent);
    text-decoration: var(--diff-token-link-decoration, underline);
}

.diff-token--inserted {
    color: var(--diff-token-inserted, var(--diff-token-number-base));
    font-weight: var(--diff-token-inserted-weight, inherit);
    font-style: var(--diff-token-inserted-style, normal);
    text-decoration: var(--diff-token-inserted-decoration, none);
    background: var(--diff-token-inserted-bg, transparent);
}

.diff-token--deleted {
    color: var(--diff-token-deleted, var(--diff-token-string-base));
    font-weight: var(--diff-token-deleted-weight, inherit);
    font-style: var(--diff-token-deleted-style, normal);
    text-decoration: var(--diff-token-deleted-decoration, none);
    background: var(--diff-token-deleted-bg, transparent);
}

.diff-token--changed {
    color: var(--diff-token-changed, var(--diff-token-keyword-base));
    font-weight: var(--diff-token-changed-weight, inherit);
    font-style: var(--diff-token-changed-style, normal);
    text-decoration: var(--diff-token-changed-decoration, none);
    background: var(--diff-token-changed-bg, transparent);
}

/* ===== Annotations and comment threads ===== */

/* Annotations sit under their line in the code column, gutter kept blank. */

.diff-annotation__gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--diff-card-bg);
}

.diff-annotation__body {
    min-width: 0;
    padding: 8px 12px 12px;
    font-family: var(--font-regular, inherit);
    white-space: normal;
}

/* Draft composer and thread rows slide in the way Linear's inline composer does (~150ms ease-out). */

@keyframes diff-annotation-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.diff-annotation--draft .diff-annotation__body, .diff-annotation--thread .diff-annotation__body {
    animation: diff-annotation-enter 150ms ease-out;
    padding: 6px;
    font-family: var(--font-regular, inherit);
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .diff-annotation--draft .diff-annotation__body,
    .diff-annotation--thread .diff-annotation__body {
        animation: none;
    
    }
}

/* The row behind a card keeps its line's tint; the card sits 6px inside it. */

.diff-annotation--on-added,
.diff-annotation--on-added .diff-annotation__gutter {
    background: var(--diff-added-bg);
}

.diff-annotation--on-removed,
.diff-annotation--on-removed .diff-annotation__gutter {
    background: var(--diff-removed-bg);
}

.diff-annotation--draft .diff-annotation__gutter,
.diff-annotation--thread .diff-annotation__gutter {
    display: none;
}

/* Full-width rows: the split-view rule excludes these, so no priority override is needed. */
.diff-annotation--draft,
.diff-annotation--thread {
    grid-template-columns: minmax(0, 1fr);
}

.diff-composer,
.diff-comment-thread {
    --diff-thread-bg: var(--diff-thread-surface, var(--shell-bg-active, var(--diff-page-bg)));
    box-sizing: border-box;
    width: 100%;
    border: 0.5px solid var(--diff-thread-border, var(--diff-card-border));
    border-radius: 8px;
    background: var(--diff-thread-bg);
    /* Linear: dark themes carry a tight 0.3 black ring-shadow; light gets the soft two-layer card shadow. */
    box-shadow: var(--diff-thread-shadow, lch(0 0 0 / 0.3) 0 0.5px 1px 1px);
    color: var(--diff-strong-text);
    font-family: var(--font-regular, inherit);
    font-size: 15px;
    line-height: 24px;
}

.diff-comment-thread {
    display: flex;
    flex-direction: column;
}

.diff-comment-thread--resolved .diff-comment {
    opacity: 0.72;
}

/* One comment: 16px block, 6px between header and body. */

.diff-comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

/* Hairline between comment blocks, edge to edge (measured 0.5px lch(91.9 0 282) on light). */

.diff-comment + .diff-comment {
    border-top: 0.5px solid var(--diff-thread-divider, var(--diff-card-border));
}

.diff-comment__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px; /* Linear: the 24px options button sets the row height */
}

.diff-comment__avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    overflow: hidden;
    place-items: center;
    border-radius: 9999px;
    background: var(--diff-accent);
    color: var(--diff-on-accent);
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
}

.diff-comment__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diff-comment__header .diff-comment__avatar {
    margin-right: 1px;
}

.diff-comment__author {
    color: var(--diff-strong-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}

.diff-comment__time,
.diff-comment__label {
    color: var(--diff-muted);
    font-size: 13px;
    font-weight: 450;
    line-height: 16px;
}

.diff-comment__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--diff-muted);
}

.diff-comment__label--pending {
    padding: 0 6px;
    border-radius: 4px;
    background: var(--diff-pending-bg);
    color: var(--diff-pending-text);
    font-weight: 500;
}

.diff-comment__spacer,
.diff-composer__spacer {
    flex: 1 1 auto;
}

.diff-comment__actions {
    position: relative; /* anchors the "⋯" menu */
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0; /* Linear: the 24px "⋯" sits flush with the 16px content inset, not past it */
}

.diff-comment__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-strong-text);
    cursor: default;
    opacity: 0;
    transition: background-color 150ms, color 150ms, opacity 100ms;
}

.diff-comment:hover .diff-comment__action,
.diff-comment__action:focus-visible,
.diff-comment__action--visible {
    opacity: 1;
}

.diff-comment__action:hover {
    background: var(--diff-pill-hover-bg);
    transition-duration: 0s;
}

/* Linear (measured, light): the root "Agent comment" label is an outlined chip — 0.5px
   lch(86.5 0 282) ring, r5, 2px 5px padding, 12px/450 lch(40 1 282), 8px after the time. */

.diff-comment__label--root {
    box-sizing: border-box;
    height: 20px;
    padding: 2px 5px;
    border: 0.5px solid var(--diff-chip-border, var(--diff-control-border));
    border-radius: 5px;
    color: var(--diff-chip-text, var(--diff-secondary, var(--diff-muted)));
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
}

/* Linear keeps only the 24×24 "⋯" options button resting-visible; everything else reveals on hover. */

.diff-comment__action--options {
    opacity: 1;
    color: var(--diff-secondary, var(--diff-muted)); /* Linear: the resting ⋯ is the secondary grey */
}

.diff-comment__body {
    color: var(--diff-body-text, var(--diff-strong-text));
    font-size: 15px;
    font-weight: 450;
    line-height: 24px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Replies indent their body under the name (avatar 18 + 9). */

.diff-comment--reply .diff-comment__body,
.diff-comment--reply .diff-comment__editor,
.diff-comment--reply .diff-comment__reactions {
    margin-left: 27px;
}

.diff-comment__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.diff-comment__reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 0.5px solid var(--diff-card-border);
    border-radius: 9999px;
    font-size: 12px;
    line-height: 15px;
}

/* Reply footer: 11px 16px, avatar · field · attach · round submit. */

.diff-comment-thread__reply {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-top: 0.5px solid var(--diff-thread-divider, var(--diff-card-border));
    border-radius: 0 0 8px 8px;
}

.diff-comment-thread__reply-input,
.diff-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--diff-strong-text);
    font: inherit;
    font-size: 15px;
    line-height: 24px;
    resize: none;
    outline: none;
}

.diff-comment-thread__reply-input::placeholder,
.diff-composer__input::placeholder {
    color: var(--diff-muted);
}

.diff-comment-thread__reply-input {
    height: 24px;
}

.diff-comment__editor {
    margin-top: 2px;
}

.diff-lines--split .diff-annotation:not(.diff-annotation--draft):not(.diff-annotation--thread) {
    grid-template-columns: var(--diff-gutter-width) minmax(0, 1fr);
}

/* ===== Selection toolbar ===== */
/* Linear (DOM-probed 2026-09-06, light): a raised card (thread-card ring/fill/shadow, r8) with 4px padding,
   centred on the selection's start caret and 12px above its first line, popping in like every popover. Buttons 26px, r4,
   text entries 13px/500 primary + 16px secondary glyph at 6px, icon entries 26×26; hover = the light hover tone;
   caller actions first, then a 1×16 hairline (margin 0 2px 0 7px), then Comment · Copy 6px apart. */
.diff-selection-toolbar {
    position: fixed;
    z-index: 1100;
    /* Centred on the selection's start caret (Linear), sitting 12px above the first selected line. */
    transform: translate(-50%, -100%);
    font-family: var(--font-regular, inherit); /* UI type, not the code column's mono */
}

.diff-selection-toolbar__surface {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 4px;
    border: 0.5px solid var(--diff-thread-border, var(--diff-card-border));
    border-radius: 8px;
    background: var(--diff-thread-surface, var(--diff-card-bg));
    color: var(--diff-strong-text);
    box-shadow: var(--diff-thread-shadow, lch(0 0 0 / 0.3) 0 0.5px 1px 1px);
    transform-origin: 100% 100%;
    animation: ui-popover-enter 120ms cubic-bezier(0.32, 0.72, 0, 1);
}

.diff-selection-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 26px;
    min-width: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--diff-secondary, var(--diff-muted));
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    cursor: default;
    transition: background-color 0.15s, color 0.15s;
}

.diff-selection-toolbar__button--labelled {
    padding: 0 6px;
}

.diff-selection-toolbar__button + .diff-selection-toolbar__button {
    margin-left: 6px;
}

.diff-selection-toolbar__button:hover {
    background: var(--diff-pill-hover-bg);
    color: var(--diff-body-text, var(--diff-strong-text));
    transition-duration: 0s;
}

.diff-selection-toolbar__button:focus-visible {
    outline: 1px solid var(--diff-accent);
}

.diff-selection-toolbar__label {
    color: var(--diff-body-text, var(--diff-strong-text));
}

.diff-selection-toolbar__separator {
    width: 0;
    height: 16px;
    margin: 0 2px 0 7px;
    border-left: 1px solid var(--diff-thread-border, var(--diff-card-border));
}

.diff-selection-toolbar__separator + .diff-selection-toolbar__button {
    margin-left: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .diff-selection-toolbar__surface {
        animation: none;
    }
}

/* ===== Comment composer ===== */

.diff-composer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}

.diff-composer__input {
    min-height: 46px;
}

.diff-composer__dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
}

.diff-composer__dismiss,
.diff-composer__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--diff-strong-text);
    cursor: default;
    transition: background-color 150ms, color 150ms;
}

.diff-composer__dismiss:hover,
.diff-composer__icon-button:hover {
    background: var(--diff-pill-hover-bg);
    transition-duration: 0s;
}

.diff-composer__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: -6px;
}

.diff-composer__audience {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.diff-composer__audience-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 24px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--diff-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    cursor: default;
    transition: background-color 150ms, color 150ms;
}

.diff-composer__audience-option--selected {
    background: var(--diff-pill-hover-bg);
    color: var(--diff-strong-text);
}

.diff-composer__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0.5px solid var(--diff-card-border);
    border-radius: 12px;
    background: var(--diff-thread-bg, var(--diff-page-bg));
    color: var(--diff-strong-text);
    cursor: default;
    transition: background-color 150ms, color 150ms, opacity 150ms;
}

.diff-composer__submit:not(:disabled) {
    border-color: var(--diff-accent);
    background: var(--diff-accent);
    color: var(--diff-on-accent);
}

.diff-composer__submit:disabled {
    opacity: 0.5;
}

/* ===== Display options panel ===== */

/* ----- Display options panel (Linear's popover content, measured 301px) ----- */

.diff-display-options {
    --diff-options-accent: var(--shell-accent, lch(53% 52.26 286.91));
    --diff-options-fill: color-mix(in srgb, var(--shell-text-primary) 6%, transparent);
    --diff-options-fill-active: color-mix(in srgb, var(--shell-text-primary) 14%, transparent);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 301px;
    padding: 14px 16px 8px;
    color: var(--shell-text-primary);
    font-size: 12px;
    line-height: 15px;
}

/* Linear (measured, dark): 32px segmented row, 2px inset, r5; tabs 28px r9999 6px 8px with a 16px glyph;
   inactive = 6% text over the panel, active = 14%; 22px to the first toggle row. */

.diff-display-options__segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    box-sizing: border-box;
    height: 32px;
    margin-bottom: 6px;
    padding: 2px;
    border-radius: 5px;
}

.diff-display-options__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 28px;
    padding: 6px 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--diff-options-fill);
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: default;
    transition: background-color 150ms, color 150ms;
}

.diff-display-options__tab:hover {
    transition-duration: 0s;
    color: var(--shell-text-primary);
}

.diff-display-options__tab--active {
    background: var(--diff-options-fill-active);
    color: var(--shell-text-primary);
}

.diff-display-options__section {
    display: flex;
    flex-direction: column;
}

.diff-display-options__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
}

.diff-display-options__label {
    color: var(--shell-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.diff-display-options__switch {
    width: auto;
    flex: 0 0 auto;
}

/* Linear: 24px combobox pills, 6% fill, r8, 12px/400, 9×5 chevron 8px from the right edge. */

.diff-display-options__select {
    box-sizing: border-box;
    height: 24px;
    min-width: 52px;
    padding: 1px 22px 1px 8px;
    border: 0.5px solid transparent;
    border-radius: 8px;
    background-color: var(--diff-options-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%23888a8f' d='M1.915.557a.667.667 0 0 0-.943.943l2.862 2.862a.942.942 0 0 0 1.333 0L8.028 1.5a.667.667 0 0 0-.943-.943L4.5 3.14 1.915.557Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
}

.diff-display-options__select--theme {
    min-width: 96px;
}

/* Linear: "Order by" = 24px direction toggle (arrow glyph) immediately left of the combobox. */

.diff-display-options__order {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* Linear (DOM-probed 2026-09-06): 24×24 round icon button, 0.5px transparent ring, sort glyph 14px
   in the secondary tone; hover = the menu hover tone at 50% + a hairline of it, glyph to the title tone.
   Same 150ms fade-out as every Linear button (instant in). */

.diff-display-options__direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.diff-display-options__direction:hover {
    border-color: var(--diff-options-hover, color-mix(in srgb, var(--shell-text-primary) 18%, transparent));
    background-color: color-mix(in srgb, var(--diff-options-hover, color-mix(in srgb, var(--shell-text-primary) 18%, transparent)) 50%, transparent);
    color: var(--shell-text-primary);
    transition-duration: 0s;
}

/* ===== Shared control motion ===== */

/* ----- Motion: Linear transitions borders, fills and text over 150ms on its buttons ----- */

.diff-file-card__toggle,
.diff-file-card__reviewed,
.diff-file-card__actions,
.diff-file-card__copy,
.diff-fold__step,
.diff-fold__expand-all,
.diff-file-rail__group-header,
.diff-file-rail__row {
    transition: border-color 150ms, background-color 150ms, color 150ms, opacity 100ms ease;
}

/* ----- Motion: Linear highlights instantly on hover-in and fades over 150ms on hover-out ----- */

.diff-file-card__toggle:hover,
.diff-file-card__reviewed:hover,
.diff-file-card__actions:hover,
.diff-fold__step:hover,
.diff-fold__expand-all:hover,
.diff-file-rail__group-header:hover,
.diff-file-rail__row:hover,
.diff-comment-thread__resolve:hover,
.diff-comment__action:hover {
    transition-duration: 0s;
}
/* ===== end diff.css ===== */

/* ===== code-editor.css ===== */
/* CodeMirror 6 dressed as Linear's diff family. Everything visual comes from the diff tokens
   (gutter, row metrics, font, syntax swatches, selection, focus row) so an editor and a viewed
   file in the same card are indistinguishable. Token colours arrive through the diff-token--*
   classes CodeMirror emits (see js/code-editor.js), not through a CodeMirror theme. */

.code-mirror-editor {
    /* Colour tokens come from the diff token blocks (this class is in every one of them); these two are editor-only. */
    --diff-focus-bg: color-mix(in srgb, var(--diff-strong-text) 4%, transparent);
    --diff-selection-bg: color-mix(in srgb, var(--diff-accent) 14%, transparent);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--diff-card-bg);
    color: var(--diff-text);
    font-family: var(--diff-font-mono);
    font-size: var(--diff-font-size, 12px);
    line-height: var(--diff-line-height, 20px);
}

.code-mirror-editor--themed {
    background: var(--diff-card-bg);
}

.code-mirror-editor__host {
    display: flex;
    min-height: 0;
    height: var(--code-mirror-editor-height, auto);
}

.code-mirror-editor__host .cm-editor {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit; /* not the `font` shorthand: it resets line-height and CodeMirror measures 14px rows */
}

.code-mirror-editor__host .cm-editor.cm-focused {
    outline: none;
}

.code-mirror-editor__host .cm-scroller {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: auto;
}

/* Gutter: 50px column, numbers right-aligned 10px from the code, in the diff's gutter tone. */
.code-mirror-editor__host .cm-gutters {
    position: sticky;
    box-sizing: border-box;
    min-width: var(--diff-gutter-width, 50px);
    padding: 0;
    border: 0;
    background: var(--diff-card-bg);
    color: var(--diff-gutter-text);
}

/* :first-child is CodeMirror's hidden width spacer (height 0) — it must not get a row height. */
.code-mirror-editor__host .cm-lineNumbers .cm-gutterElement:not(:first-child) {
    box-sizing: border-box;
    min-width: var(--diff-gutter-width, 50px);
    min-height: var(--diff-line-height, 20px); /* CodeMirror pins its measured height inline; never let a row shrink below ours */
    padding: 0 10px 0 0;
    text-align: right;
    font-size: var(--diff-font-size, 12px);
    line-height: var(--diff-line-height, 20px);
}

.code-mirror-editor__host .cm-activeLineGutter {
    background: transparent;
}

.code-mirror-editor__host .cm-focused .cm-activeLineGutter {
    background: var(--diff-focus-bg);
    color: var(--diff-muted);
}

.code-mirror-editor__host .cm-foldGutter .cm-gutterElement {
    padding: 0 4px 0 0;
    line-height: var(--diff-line-height, 20px);
}

.code-mirror-editor__fold {
    display: inline-block;
    width: 10px;
    height: 10px;
    opacity: 0;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: opacity 0.15s;
}

.code-mirror-editor__fold--open {
    transform: rotate(90deg);
}

.code-mirror-editor__host .cm-gutters:hover .code-mirror-editor__fold {
    opacity: 1;
}

/* Rows: 20px, code inset 10px like the diff's code cell. */
.code-mirror-editor__host .cm-content {
    padding: 0;
    caret-color: var(--diff-strong-text);
}

.code-mirror-editor__host .cm-line {
    padding: 0 10px;
    line-height: var(--diff-line-height, 20px);
}

.code-mirror-editor__host .cm-activeLine {
    background: transparent;
}

.code-mirror-editor__host .cm-focused .cm-activeLine {
    background: var(--diff-focus-bg);
}

.code-mirror-editor__host .cm-cursor,
.code-mirror-editor__host .cm-dropCursor {
    border-left: 1.5px solid var(--diff-strong-text);
}

/* Selection: CodeMirror's base theme paints its own light/dark defaults (#d7d4f0 focused, #d9d9d9
   idle) from a rule five classes deep, so ours must sit deeper still or a dark theme shows the pale
   lavender band. Focused and idle read the same token, as the diff viewer does (QUI-56). */
.code-mirror-editor__host .cm-editor .cm-scroller .cm-selectionLayer .cm-selectionBackground,
.code-mirror-editor__host .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.code-mirror-editor__host .cm-selectionBackground,
.code-mirror-editor__host ::selection {
    background: var(--diff-selection-bg);
}

.code-mirror-editor__host .cm-selectionMatch {
    background: color-mix(in srgb, var(--diff-accent) 10%, transparent);
}

.code-mirror-editor__host .cm-matchingBracket,
.code-mirror-editor__host .cm-focused .cm-matchingBracket {
    background: color-mix(in srgb, var(--diff-strong-text) 10%, transparent);
    outline: none;
}

.code-mirror-editor__host .cm-placeholder {
    color: var(--diff-gutter-text);
    font-style: normal;
}

/* Autocomplete and search panels use the popover tokens so they match the review's menus. */
.code-mirror-editor__host .cm-tooltip {
    border: 0.5px solid var(--ui-popover-border, var(--shell-menu-border, lch(22.88% 1.83 272)));
    border-radius: 8px;
    background: var(--ui-popover-bg, var(--shell-menu-bg, lch(9.92% 0.75 272)));
    color: var(--ui-popover-text, var(--shell-menu-text, lch(90.895% 1.375 272)));
    box-shadow: var(--ui-popover-shadow, 0 4px 4px -1px lch(0% 0 0 / 0.04), 0 1px 1px 0 lch(0% 0 0 / 0.08));
    font-family: var(--font-regular, inherit);
    font-size: 12px;
}

.code-mirror-editor__host .cm-tooltip.cm-tooltip-autocomplete > ul {
    font-family: var(--diff-font-mono);
    font-size: 12px;
}

.code-mirror-editor__host .cm-tooltip.cm-tooltip-autocomplete > ul > li {
    padding: 4px 8px;
    line-height: 20px;
}

.code-mirror-editor__host .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
    background: color-mix(in srgb, var(--diff-strong-text) 8%, transparent);
    color: inherit;
}

.code-mirror-editor__host .cm-panels {
    border: 0;
    background: var(--diff-page-bg);
    color: var(--diff-text);
    font-family: var(--font-regular, inherit);
    font-size: 12px;
}

.code-mirror-editor__host .cm-panel.cm-search input,
.code-mirror-editor__host .cm-panel.cm-search button {
    font: inherit;
}

.code-mirror-editor--readonly .cm-cursor {
    display: none;
}
/* ===== end code-editor.css ===== */

/* Host-owned column width (AssistantChatSurface.ColumnWidth); Linear's run log runs 789px. */
.assistant-chat-surface__body--chat .assistant-chat-surface__messages,
.assistant-chat-surface__body--chat .assistant-chat-surface__composer {
    width: var(--assistant-chat-surface-column-width, 821px);
}

/* Embedded (ShowHeader=false): the body fills the host pane. */
.assistant-chat-surface__body--embedded {
    height: 100%;
}

/* CompactComposer: Linear's 104px run-log composer card (12px padding, 12px bottom inset). */
.assistant-chat-surface__body--chat.assistant-chat-surface__body--compact-composer .assistant-chat-surface__composer .message-composer {
    min-height: 104px;
    padding: 12px;
}

.assistant-chat-surface__body--chat.assistant-chat-surface__body--compact-composer .assistant-chat-surface__composer {
    padding-bottom: 12px;
}

.chat-transcript__leading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 auto;
}

/* SplitViewHeaderStyle.Toolbar: Linear's list-pane toolbar (run log) — 36px, no hairline. */
.split-view--toolbar-headers .split-view__header {
    min-height: 36px;
    box-shadow: none;
}

.split-view--toolbar-headers .split-view__header-inner {
    min-height: 36px;
}

/* CompactListRow: Linear's 36px list row on an 8px gutter (loop run log) — 14px glyph, 12px/500
   label, 12px/450 secondary meta cells, radius 8, selected/hover wash. */
.compact-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: default;
}

.compact-list-row:hover,
.compact-list-row:focus-visible {
    background: var(--shell-menu-item-hover);
    outline: none;
}

.compact-list-row--selected,
.compact-list-row--selected:hover {
    background: var(--shell-bg-active, var(--shell-menu-item-hover));
}

.compact-list-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.compact-list-row__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
}

.compact-list-row__trailing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--shell-text-secondary);
}

.compact-list-row__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.compact-list-row__meta .shell-icon {
    color: var(--shell-text-secondary);
}

.compact-list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

/* Muted crumb (BreadcrumbItemModel.IsMuted): Linear's "Run history" tail crumb sits in the
   secondary tier while the loop crumb before it stays primary. */
.breadcrumbs__item--muted {
    color: var(--shell-text-secondary);
}

/* ── Sticky group header overlay (thin window mode) ──
   Measured Linear: the stuck band is the same 36px pill, flush at the top of the viewport; the
   next band pushes it up. In window mode the in-flow slot headers are STATIC (nothing sticky
   inside Virtualize's measured content) and the pinned header is this overlay, a sibling of the
   scroller inside the frame, translated by grid-list.js from the uniform slot arithmetic. */
.grid-list__body-frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    /* Clip (not hidden: no scroll container, no sticky side effects) so a pushed-off overlay never
       paints into the column header above; the group menu is a top-layer popover at the root. */
    overflow: clip;
}

.grid-list__group-header--slot {
    /* Relative, not static: the ::before band is absolutely inset to the header box. */
    position: relative;
    top: auto;
    z-index: 0;
}

.grid-list__group-header--overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    margin: 0;
    will-change: transform;
}

.grid-list__group-header--overlay[hidden] {
    display: none;
}

/* ===== reviews.css ===== */
/* Linear's Reviews page (measured 2026-09-12 @1728): 320px list column, 44px title bar, pill tabs at y=60,
   28px grey section bands, 40px single-line rows; reading pane with the illustrated empty state. */

/* PillTabs carries 8px above and below its 28px pills; Linear's tabs sit at y=60 under the 44px title bar and
   the first section band at y=96. */
.reviews-page__tabs {
    margin-top: -2px;
    padding: 0 8px;
}

.reviews-page__list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.review-list {
    display: flex;
    flex-direction: column;
    outline: none;
    /* Band, hover and selected fills. Dark themes derive them from the content surface with fixed LCH steps,
       the way Linear derives its dark surfaces (and the diff rail already does): hover and the band one step
       up (+4.125 L, the raised-surface step), selection two (+9.2 L), so all three read on every dark theme.
       The sidebar's --shell-nav-hover-bg was used before: it is darker than the content surface in dark themes,
       so hover was invisible. Light themes keep Linear's measured band/hover lch(94.44 0.5 282). */
    --reviews-row-hover-bg: lch(from var(--shell-bg-surface, lch(5.52% 0.4 272)) calc(l + 4.125) calc(c + 0.5) h);
    --reviews-row-selected-bg: lch(from var(--shell-bg-surface, lch(5.52% 0.4 272)) calc(l + 9.2) calc(c + 0.4) h);
    --reviews-section-default-bg: var(--reviews-row-hover-bg);
}

[data-app-theme="light"] .review-list {
    --reviews-row-hover-bg: lch(94.44% 0.5 282);
    --reviews-row-selected-bg: var(--shell-nav-active-bg, lch(93.483% 0.5 282));
    --reviews-section-default-bg: lch(94.44% 0.5 282);
}

/* Pure light: the same lightness drop from its white surface as the theme catalog's list hover. */
[data-app-theme="pure-light"] .review-list {
    --reviews-row-hover-bg: lch(97.667% 0 142.924);
    --reviews-row-selected-bg: var(--shell-nav-active-bg, lch(93.483% 0.5 282));
    --reviews-section-default-bg: lch(94.44% 0.5 282);
}

@media (prefers-color-scheme: light) {
    [data-app-theme="system"] .review-list {
        --reviews-row-hover-bg: lch(94.44% 0.5 282);
        --reviews-row-selected-bg: var(--shell-nav-active-bg, lch(93.483% 0.5 282));
        --reviews-section-default-bg: lch(94.44% 0.5 282);
    }
}

.review-list__section-header {
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    width: calc(100% - 16px);
    height: 28px;
    margin: 0 8px;
    padding: 0 0 0 10px;
    border: 0;
    border-radius: 6px;
    background: var(--reviews-section-bg, var(--reviews-section-default-bg));
    color: var(--shell-text-secondary, lch(37.776% 1.25 282));
    font: 500 12px/15px var(--font-regular);
    text-align: left;
    cursor: default;
}

.review-list__section-count {
    color: var(--shell-text-secondary, lch(37.776% 1.25 282));
}

.review-list__section-chevron {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary, lch(37.776% 1.25 282));
    transition: transform 120ms ease;
}

.review-list__section-chevron--collapsed {
    transform: rotate(-90deg);
}

/* Linear: 2px between a band and its first row, 2px between the last row and the next band; the band lives
   in a 32px virtualized slot. */
.review-list__section-slot {
    box-sizing: border-box;
    height: 32px;
    padding: 2px 0;
}

.review-list-row {
    display: block;
    box-sizing: border-box;
    height: 40px;
    padding: 0 8px;
    color: inherit;
    text-decoration: none;
    cursor: default;
}

.review-list-row__plate {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    padding: 0 8px;
    border-radius: 8px;
}

.review-list-row:hover .review-list-row__plate {
    background: var(--reviews-row-hover-bg);
}

/* Selection outranks hover: hovering the selected row keeps its selected fill. */
.review-list-row--selected .review-list-row__plate,
.review-list-row--selected:hover .review-list-row__plate {
    background: var(--reviews-row-selected-bg);
}

.review-list-row__state {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 14px;
    height: 14px;
}

.review-list-row__state--open {
    color: var(--review-state-open, lch(68% 64.37 141.95));
}

.review-list-row__state--draft {
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
}

.review-list-row__state--closed {
    color: var(--review-state-closed, lch(58% 73 29));
}

.review-list-row__state--merged {
    color: var(--review-state-merged, lch(48% 59.31 288.43));
}

.review-list-row__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary, lch(9.794% 0 282));
    font: 500 13px/16px var(--font-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-list-row__trailing {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.review-list-row__marker {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
}

.review-list-row__badge {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.review-list-row__badge--failed {
    background: var(--review-badge-failed-bg, color-mix(in srgb, var(--review-state-closed, lch(58% 73 29)) 14%, transparent));
    color: var(--review-state-closed, lch(58% 73 29));
}

.review-list-row__time {
    min-width: 30px;
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
    font: 450 13px/16px var(--font-regular);
    text-align: right;
}

.review-list__empty {
    margin: 0;
    padding: 24px 16px;
    color: var(--shell-text-secondary);
    font: 450 13px/16px var(--font-regular);
    text-align: center;
}

.reviews-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 23px;
    height: 100%;
    min-height: 320px;
}

.reviews-page__illustration {
    display: block;
    width: 143px;
    height: 152px;
}

.reviews-page__empty-label {
    color: var(--shell-text-secondary, lch(39.176% 1.25 282));
    font: 500 13px/16px var(--font-regular);
}

.reviews-page__filters {
    padding: 0 8px 8px;
}

.reviews-page__filter-anchor,
.review-display-options-button {
    position: relative;
    display: inline-flex;
}

/* Display options popover (measured: 301×363; rows 32px with a 500/12 secondary label and a 92×24 combobox;
   "Display properties" heading; 24px chips, on = primary text, off = secondary). */
.review-display-options {
    --review-options-fill: color-mix(in srgb, var(--shell-text-primary) 6%, transparent);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 301px;
    padding: 7px 17px 12px 14px;
    color: var(--shell-text-primary);
    font-size: 12px;
    line-height: 15px;
}

.review-display-options__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
}

.review-display-options__row--spaced {
    margin-top: 16px;
}

.review-display-options__label {
    color: var(--shell-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.review-display-options__switch {
    width: auto;
    flex: 0 0 auto;
}

.review-display-options__select {
    box-sizing: border-box;
    width: 92px;
    height: 24px;
    padding: 1px 22px 1px 8px;
    border: 0.5px solid transparent;
    border-radius: 8px;
    background-color: var(--review-options-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%23888a8f' d='M1.915.557a.667.667 0 0 0-.943.943l2.862 2.862a.942.942 0 0 0 1.333 0L8.028 1.5a.667.667 0 0 0-.943-.943L4.5 3.14 1.915.557Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
}

.review-display-options__heading {
    margin-top: 25px;
    color: var(--shell-text-secondary);
    font-weight: 500;
}

.review-display-options__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 4px;
    margin-top: 12px;
}

.review-display-options__chip {
    box-sizing: border-box;
    height: 24px;
    padding: 0 7px;
    border: 0.5px solid var(--shell-border-subtle, var(--shell-border));
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: 500 12px/15px var(--font-regular);
    cursor: default;
}

.review-display-options__chip:hover {
    background: var(--review-options-fill);
}

.review-display-options__chip--on {
    background: var(--review-options-fill);
    color: var(--shell-text-primary);
}
/* ===== end reviews.css ===== */

/* ===== explorer.css ===== */

/* File explorer surface: the diff review's layout (toolbar bar, 280px rail, content beside it) with a
   virtualized multi-source tree on the left and one file on the right. Geometry copies the diff rail
   (rows 28/29px, 14px per level, r5 plates, 200ms easeOutCubic chevrons and crossfading folder glyphs);
   colours go through the same --diff-* tokens (diff.css scopes them to .file-explorer too), so a theme that
   styles the diff review styles the explorer. */

.file-explorer {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-items: flex-start;
}

.file-explorer--toolbar {
    flex-direction: column;
    align-items: stretch;
}

.file-explorer__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 36px;
    margin: 0 8px 8px; /* level with the page's tab row: the same 8px gutter on both sides */
    padding: 6px 10px 6px 12px;
    border: 0.5px solid var(--diff-toolbar-border, var(--diff-card-border));
    border-radius: 8px;
    background: var(--diff-toolbar-bg, var(--diff-card-bg));
}

.file-explorer__body {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-height: 100%;
}

.file-explorer__rail-slot {
    position: relative;
    flex: 0 0 auto;
    box-sizing: content-box;
    width: var(--explorer-rail-width, 280px);
    height: 100%;
    max-height: 100%;
    margin-left: 8px;
    margin-right: -6px;
    padding-right: 6px;
    overflow: hidden;
    opacity: 1;
    transition: width 200ms cubic-bezier(0.33, 1, 0.68, 1), margin-left 200ms cubic-bezier(0.33, 1, 0.68, 1), opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
}

.file-explorer__rail-slot--resizing {
    transition: none;
    user-select: none;
    cursor: col-resize;
}

.file-explorer__rail-slot--closed {
    width: 0;
    margin-left: 0;
    opacity: 0;
}

/* Drag handle on the rail's right edge in the standard resize style: 10px hit area straddling the boundary,
   0.5px guide hairline inset 12px that shows on hover, focus and drag. */
.file-explorer__rail-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    width: 10px;
    padding: 0 4px;
    transform: translateX(50%);
    cursor: col-resize;
    touch-action: none;
    outline: none;
    z-index: 2;
}

.file-explorer__rail-resizer::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 0.5px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: var(--shell-resize-guide-paint);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.file-explorer__rail-resizer:hover::after,
.file-explorer__rail-resizer:focus-visible::after,
.file-explorer__rail-resizer[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.file-explorer__rail {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    width: var(--explorer-rail-width, 280px);
    max-height: 100%;
    overflow-y: auto;
}

/* Unlike the diff review (cards stack and the content area scrolls), the explorer shows one file: the card
   fills the pane's height and its body is the scrolling region, so the header never leaves the top. */
.file-explorer__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 0 8px 16px 0;
}

.file-explorer--no-rail .file-explorer__content {
    padding-left: 16px;
}

/* The file view is one diff card filling the pane; its notices reuse the card's 68px centred notice. */
.file-view-card__host {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.file-view-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* The body scrolls inside the card's r8 clip; the inset hairlines stay on its edges. */
.file-view-card > .diff-file-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    animation: none;
}

.file-view-card > .diff-file-card__body > .diff-lines,
.file-view-card > .diff-file-card__body > .diff-image-preview,
.file-view-card > .diff-file-card__body > .diff-file-card__empty {
    flex: 0 0 auto;
}

/* Save controls in the card header: a 24px pill that turns accent-filled once the draft is dirty, and a 12px
   status word before it (Saving… · the failure message, with the button reading Retry). */
.file-view-card__save-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.file-view-card__save-status {
    margin-right: 6px;
    color: var(--diff-muted);
    font-size: 12px;
    font-weight: 450;
    line-height: 15px;
    white-space: nowrap;
}

.file-view-card__save-status--failed {
    color: var(--diff-removed-file, lch(56% 60 25));
}

.file-view-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--diff-secondary, var(--shell-text-secondary));
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
    cursor: default;
    transition: background-color 0.15s, color 0.15s;
}

.file-view-card__action:hover:not(:disabled) {
    transition-duration: 0s;
    background: var(--diff-pill-hover-bg);
    color: var(--diff-strong-text);
}

.file-view-card__action:focus-visible {
    outline: 1px solid var(--diff-accent);
    outline-offset: 1px;
}

.file-view-card__action:disabled {
    opacity: 0.5;
}

.file-view-card__action--primary {
    background: var(--diff-accent);
    color: #fff;
}

.file-view-card__action--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--diff-accent) 88%, #fff);
    color: #fff;
}

/* Source / Preview for previewable files and images: the image card's segmented pill pinned bottom right of the
   card (a sibling of the card inside the host, so it never scrolls with the body), with the spacing the top-right
   bar had (8px from the edge, 20px to the pill's right); the FormatPreview fills the card and scrolls inside it. */
.file-view-card__host {
    position: relative;
}

.file-view-card__mode-pill {
    position: absolute;
    right: 20px;
    bottom: 8px;
    z-index: 3;
    margin: 0;
}

.file-view-card .diff-image-preview__bar {
    display: none; /* the pinned pill drives the modes and Download lives in the menu */
}

.file-view-card__preview {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 12px 12px 12px;
}

.file-view-card__preview > .format-preview {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.file-view-card__no-preview {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 24px;
    color: var(--diff-muted);
    font-size: 13px;
    line-height: 16px;
    text-align: center;
}

.file-view-card__no-preview-link {
    color: var(--diff-accent);
    font-weight: 500;
    text-decoration: none;
}

.file-view-card__no-preview-link:hover {
    text-decoration: underline;
}

/* The editor body: CodeMirror dressed as the line list (editable text files open straight into it). It fills the
   card's body and scrolls itself (CodeMirror's scroller), so the body does not double-scroll. */
.file-view-card__editor {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.file-view-card__editor .code-mirror-editor {
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
}

.file-view-card__editor .code-mirror-editor__host {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* Nothing open: the empty state sits centred in the slot the card would fill. */
/* Full-screen image editor: the annotator overlay's chrome (surface fill, same z-index and entrance), a 40px
   bar with the file name, save status and Close, and the annotator filling the rest. */
.file-view-card__image-editor {
    display: flex;
    flex-direction: column;
    cursor: default;
}

/* While the discard confirm is up the overlay drops under the modal host (680) so the dialog can be used. */
.file-view-card__image-editor--guarding {
    z-index: 670;
}

.file-view-card__image-editor-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    padding: 6px 10px 6px 16px;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.file-view-card__image-editor-title {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary);
    font: 500 13px/16px var(--font-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-view-card__image-editor-path {
    margin-left: 4px;
    color: var(--shell-text-secondary);
    font-weight: 400;
}

.file-view-card__image-editor-status {
    margin-left: auto;
    color: var(--shell-text-secondary);
    font: 450 12px/15px var(--font-regular);
    white-space: nowrap;
}

.file-view-card__image-editor-status--failed {
    color: var(--diff-removed-file, lch(56% 60 25));
}

.file-view-card__image-editor-status + .file-view-card__action,
.file-view-card__image-editor-bar > .file-view-card__action:first-of-type:last-child {
    margin-left: 8px;
}

.file-view-card__image-editor-bar > .file-view-card__action:last-child {
    margin-left: auto;
}

.file-view-card__image-editor-status ~ .file-view-card__action:last-child {
    margin-left: 8px;
}

.file-view-card__image-editor-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.file-view-card__image-editor-stage > .qui-annotator {
    height: 100%;
}

.file-explorer__empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.file-explorer__empty-state {
    flex: 0 0 auto;
}

/* ----- Toolbar (same pills as the diff review toolbar) ----- */

.file-explorer-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.file-explorer-toolbar__pill {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 24px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--diff-secondary, var(--shell-text-secondary));
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
    cursor: default;
    transition: background-color 0.15s, color 0.15s;
}

.file-explorer-toolbar__pill:hover {
    transition-duration: 0s;
    background: var(--diff-pill-hover-bg);
    color: var(--diff-strong-text);
}

.file-explorer-toolbar__pill > .shell-icon {
    margin-right: 6px;
}

.file-explorer-toolbar__pill--active {
    background: var(--diff-tab-active-bg, color-mix(in srgb, var(--diff-strong-text) 8%, transparent));
    color: var(--diff-strong-text);
}

.file-explorer-toolbar__pill--active .file-explorer-toolbar__label {
    font-weight: 450;
}

.file-explorer-toolbar__leading {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.file-explorer-toolbar__trailing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* ----- Rail ----- */

.file-explorer-rail {
    --explorer-rail-width: 280px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--explorer-rail-width);
    min-width: 0;
    color: var(--diff-text);
    font-size: 12px;
    line-height: 15px;
}

.file-explorer-rail__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 10px 12px;
}

.file-explorer-rail__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 12px 6px 0;
}

.file-explorer-rail__search-icon {
    position: absolute;
    top: 50%;
    left: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--diff-muted);
    transform: translateY(calc(-50% - 1px));
    pointer-events: none;
}

.file-explorer-rail__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 6px 28px 6px 26px;
    border: 0.5px solid var(--diff-control-border, lch(36.236% 3.413 272.695));
    border-radius: 8px;
    background: var(--diff-page-bg);
    color: var(--diff-text);
    font: inherit;
    font-size: 13px;
    line-height: 16px;
    outline: none;
}

.file-explorer-rail__search-input::placeholder {
    color: var(--diff-gutter-text);
}

.file-explorer-rail__search-input:focus-visible {
    border-color: var(--diff-accent);
}

/* A plain block, not a flex column: Virtualize's spacers and rows stack inside it and the rail scrolls. */
.file-explorer-rail__tree {
    display: block;
    flex: 0 0 auto;
    padding: 0 12px 12px 6px;
    outline: none;
}

.file-explorer-rail__group-header,
.file-explorer-rail__row {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--diff-text);
    font: inherit;
    text-align: left;
    cursor: default;
}

/* Source bands: the diff rail's group header (30px, hangs 6px into the gutter), 4px above its rows and 6px
   between bands. */
.file-explorer-rail__group-header {
    gap: 6px;
    width: 100%;
    height: 30px;
    margin-left: -6px;
    margin-bottom: 4px;
    padding: 6px 5px;
    color: var(--diff-secondary, var(--diff-muted));
}

.file-explorer-rail__group-header--after {
    margin-top: 6px;
}

.file-explorer-rail__group-header:hover,
.file-explorer-rail__row:hover {
    background: var(--diff-rail-hover-bg, var(--shell-list-row-hover, var(--diff-hover-bg)));
}

/* Rail hover per theme, as the diff rail: dark themes one raised step above the base, light themes Linear's
   measured list hover. */
[data-app-theme="dark"] .file-explorer-rail,
[data-app-theme="classic-dark"] .file-explorer-rail,
[data-app-theme="magic-blue"] .file-explorer-rail,
[data-app-theme="custom"] .file-explorer-rail {
    --diff-rail-hover-bg: lch(from var(--diff-base, var(--shell-bg-surface, lch(5.52% 0.4 272))) calc(l + 4.125) calc(c + 0.5) h);
}

[data-app-theme="light"] .file-explorer-rail {
    --diff-rail-hover-bg: lch(94.44% 0.5 282);
}

[data-app-theme="pure-light"] .file-explorer-rail {
    --diff-rail-hover-bg: lch(97.667% 0 142.924);
}

@media (prefers-color-scheme: light) {
    [data-app-theme="system"] .file-explorer-rail {
        --diff-rail-hover-bg: lch(94.44% 0.5 282);
    }
}

.file-explorer-rail__group-header:focus-visible,
.file-explorer-rail__row:focus-visible,
.file-explorer-rail__tree:focus-visible .file-explorer-rail__group-header--cursor,
.file-explorer-rail__tree:focus-visible .file-explorer-rail__row--cursor {
    outline: 1px solid var(--diff-accent);
    outline-offset: -1px;
}

.file-explorer-rail__group-label {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-explorer-rail__source-icon {
    color: var(--diff-secondary, var(--diff-muted));
}

.file-explorer-rail__chevron {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--diff-gutter-text);
    transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1);
    transform: rotate(90deg);
}

.file-explorer-rail__group-header--collapsed .file-explorer-rail__chevron,
.file-explorer-rail__row--collapsed .file-explorer-rail__chevron {
    transform: rotate(0deg);
}

.file-explorer-rail__row-host {
    display: flex;
    width: 100%;
    min-width: 0;
}

/* File rows: 28px, icon 4px + 14px per level in from the tree's content edge. */
.file-explorer-rail__row {
    gap: 8px;
    height: 28px;
    padding: 5px;
}

.file-explorer-rail__row--file,
.file-explorer-rail__row--placeholder {
    padding-left: calc(4px + 14px * var(--explorer-rail-depth, 0));
}

/* Folder rows: 29px, packed at 4px, hanging 6px into the gutter; nested folders land on the same 14px grid. */
.file-explorer-rail__row--folder {
    gap: 4px;
    width: 100%;
    height: 29px;
    margin-left: -6px;
    padding: 6px 5px;
    color: var(--diff-secondary, var(--diff-muted));
}

.file-explorer-rail__row--folder.file-explorer-rail__row--nested {
    padding-left: calc(10px + 14px * var(--explorer-rail-depth, 1));
}

.file-explorer-rail__row--folder .file-explorer-rail__chevron {
    margin-left: 2px;
}

/* Selection outranks hover. */
.file-explorer-rail__row--selected,
.file-explorer-rail__row--selected:hover {
    background: var(--diff-rail-selected-bg, var(--shell-nav-active-bg, var(--diff-selection-bg)));
    color: var(--diff-text);
}

.file-explorer-rail__row--unavailable .file-explorer-rail__row-label {
    color: var(--diff-muted);
}

.file-explorer-rail__row-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    place-items: center;
}

.file-explorer-rail__folder {
    color: var(--diff-secondary, var(--diff-muted));
}

.file-explorer-rail__folder > .file-explorer-rail__folder-glyph {
    grid-area: 1 / 1;
    color: inherit;
    transition: opacity 120ms ease;
}

.file-explorer-rail__folder-glyph--closed {
    opacity: 0;
}

.file-explorer-rail__row--collapsed .file-explorer-rail__folder-glyph--closed {
    opacity: 1;
}

.file-explorer-rail__row--collapsed .file-explorer-rail__folder-glyph--open {
    opacity: 0;
}

.file-explorer-rail__row-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-explorer-rail__row-label--folder {
    flex: 0 1 auto;
}

/* Change-status tints on the name (the diff rail's added/removed tones, an amber for modified). Selected rows
   keep the tint. Hosts override --explorer-modified-file / --explorer-ignored-file to retone. */
.file-explorer-rail__row-label--added,
.file-explorer-rail__row-label--untracked,
.file-explorer-rail__row-label--renamed {
    color: var(--diff-added-file);
}

.file-explorer-rail__row-label--removed,
.file-explorer-rail__row-label--conflicted {
    color: var(--diff-removed-file);
}

.file-explorer-rail__row-label--modified {
    color: var(--explorer-modified-file, var(--diff-modified-file, lch(66% 62 74)));
}

.file-explorer-rail__row-label--ignored {
    color: var(--explorer-ignored-file, var(--diff-muted));
}

/* Filter results are flat: name, then the directory in the muted small face (the diff rail's list mode). */
.file-explorer-rail__row--result.file-explorer-rail__row--folder {
    gap: 8px;
    height: 28px;
    margin-left: 0;
    padding: 5px 5px 5px calc(4px + 14px * var(--explorer-rail-depth, 0));
}

.file-explorer-rail__row--result .file-explorer-rail__row-label {
    flex: 0 1 auto;
}

.file-explorer-rail__row-directory {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--diff-muted);
    font-size: 11px;
    font-weight: 450;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trailing markers: a letter, a glyph, or a 6px dot, in the marker's colour. */
.file-explorer-rail__marker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    height: 14px;
    color: var(--explorer-marker-color, var(--diff-muted));
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
}

.file-explorer-rail__marker--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Inline name boxes (rename, new file, new folder): the row's own geometry with the label swapped for an input. */
.file-explorer-rail__row--input {
    cursor: text;
}

.file-explorer-rail__name-input {
    box-sizing: border-box;
    min-width: 0;
    flex: 1 1 auto;
    height: 20px;
    padding: 0 4px;
    border: 1px solid var(--diff-accent);
    border-radius: 4px;
    background: var(--diff-page-bg);
    color: var(--diff-text);
    font: inherit;
    font-weight: 450;
    outline: none;
}

.file-explorer-rail__name-input::placeholder {
    color: var(--diff-gutter-text);
}

/* Drag and drop (Linear's insertion-line language, as the sidebar): the source row stays put dimmed, a clone
   follows the pointer, a 2px accent line marks the destination folder's edge, and hovering the middle of a folder
   row (or a source band) highlights it as the drop target. */
.file-explorer-rail__row-host--drag-source > .file-explorer-rail__row {
    opacity: 0.4;
}

.file-explorer-rail__row--drop-into,
.file-explorer-rail__group-header--drop-into {
    box-shadow: inset 0 0 0 1px var(--diff-accent);
    background: color-mix(in srgb, var(--diff-accent) 10%, transparent);
}

body.file-explorer-dragging,
body.file-explorer-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

/* Placeholder rows under a folder: loading, failed (click to retry) and empty. */
.file-explorer-rail__row--placeholder {
    color: var(--diff-muted);
}

.file-explorer-rail__row--placeholder .file-explorer-rail__row-label {
    font-weight: 400;
}

.file-explorer-rail__row--empty .file-explorer-rail__row-label {
    padding-left: 22px;
    font-style: italic;
}

.file-explorer-rail__row--failed {
    color: var(--diff-secondary, var(--diff-muted));
}

.file-explorer-rail__retry {
    flex: 0 0 auto;
    color: var(--diff-accent);
    font-weight: 500;
}

.file-explorer-rail__spinner {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.7;
    animation: file-explorer-spin 0.8s linear infinite;
}

@keyframes file-explorer-spin {
    to { transform: rotate(360deg); }
}

.file-explorer-rail__empty {
    margin: 8px 0 0 6px;
    color: var(--diff-muted);
    font-size: 12px;
}
/* ===== end explorer.css ===== */

/* ===== format-preview.css ===== */

/* FormatPreview: one file format (markdown, SVG, CSV, HTML, Excel, Word, PDF) rendered inside its own
   bounded scroll root, so the same component sits in the lightbox stage and in a fixed-height card.
   Colours resolve through the lightbox tokens when a lightbox hosts it and fall back to the shell
   tokens elsewhere. The host owns the panel chrome (border, radius, shadow); this owns the inside. */

.format-preview {
    --format-preview-panel-bg: var(--lightbox-panel-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
    --format-preview-raised-bg: var(--lightbox-raised-bg, var(--shell-bg-active));
    --format-preview-hover-bg: var(--lightbox-hover-bg, var(--shell-menu-item-hover, var(--settings-control-hover-bg)));
    --format-preview-border: var(--lightbox-border, var(--shell-menu-border, var(--shell-border)));
    --format-preview-text: var(--lightbox-text, var(--shell-text-primary));
    --format-preview-soft: var(--lightbox-soft, var(--shell-menu-text, var(--shell-text-tertiary)));
    --format-preview-muted: var(--lightbox-muted, var(--shell-text-secondary));
    --format-preview-measure: var(--lightbox-measure, 880px);
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: var(--format-preview-text);
}

/* ── Document formats (markdown, Word): the scroll root wraps a measured body ── */

.format-preview__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.format-preview__body {
    max-width: var(--format-preview-measure);
    margin: 0 auto;
    padding: 36px 44px 56px;
    color: var(--format-preview-text);
    font-size: 0.875rem;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
}

.format-preview__body > :first-child {
    margin-top: 0;
}

.format-preview__body > :last-child {
    margin-bottom: 0;
}

.format-preview__body h1,
.format-preview__body h2,
.format-preview__body h3,
.format-preview__body h4,
.format-preview__body h5,
.format-preview__body h6 {
    margin: 26px 0 10px;
    font-weight: 600;
    line-height: 1.3;
}

.format-preview__body h1 {
    font-size: 1.375rem;
}

.format-preview__body h2 {
    padding-bottom: 6px;
    border-bottom: 0.5px solid var(--format-preview-border);
    font-size: 1.125rem;
}

.format-preview__body h3 {
    font-size: 1rem;
}

.format-preview__body h4,
.format-preview__body h5,
.format-preview__body h6 {
    font-size: 0.875rem;
}

.format-preview__body p {
    margin: 0 0 12px;
}

.format-preview__body ul,
.format-preview__body ol {
    margin: 4px 0 12px;
    padding-left: 24px;
}

.format-preview__body li + li {
    margin-top: 4px;
}

.format-preview__body blockquote {
    margin: 8px 0 12px;
    padding-left: 12px;
    border-left: 2px solid var(--format-preview-border);
    color: var(--format-preview-muted);
}

.format-preview__body code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--format-preview-raised-bg);
    color: var(--format-preview-text);
    font: 0.8125rem/1.35 var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.format-preview__body pre {
    max-width: 100%;
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 0.5px solid var(--format-preview-border);
    border-radius: 6px;
    background: var(--format-preview-raised-bg);
    overflow-x: auto;
}

.format-preview__body pre code {
    padding: 0;
    background: transparent;
}

.format-preview__body a {
    color: var(--shell-accent, #5e6ad2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.format-preview__body hr {
    margin: 18px 0;
    border: 0;
    border-top: 0.5px solid var(--format-preview-border);
}

.format-preview__body img {
    max-width: 100%;
    border-radius: 6px;
}

.format-preview__body .tableContainer {
    width: 100%;
    margin: 12px 0;
}

.format-preview__body .table-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.format-preview__body table,
.format-preview__sheet table {
    max-width: none;
    height: fit-content;
    min-width: 100%;
    margin: 0 0 1px;
    overflow: hidden;
    border: 0.5px solid var(--format-preview-border);
    border-radius: 6px;
    border-spacing: 0;
    border-collapse: separate;
    background: var(--format-preview-panel-bg);
    color: var(--format-preview-text);
    font-size: 0.875rem;
    line-height: 1.65;
    table-layout: fixed;
}

.format-preview__body thead th,
.format-preview__body tbody tr:first-child > th,
.format-preview__sheet thead th,
.format-preview__sheet tbody tr:first-child > th {
    background: var(--format-preview-raised-bg);
}

.format-preview__body th,
.format-preview__body td,
.format-preview__sheet th,
.format-preview__sheet td {
    padding: 0;
    border-left: 0.5px solid var(--format-preview-border);
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.format-preview__body td,
.format-preview__sheet td {
    border-top: 0.5px solid var(--format-preview-border);
}

.format-preview__body th:first-child,
.format-preview__body td:first-child,
.format-preview__sheet th:first-child,
.format-preview__sheet td:first-child {
    border-left: 0;
}

.format-preview__body tbody:first-child tr:first-child > td,
.format-preview__body tbody:first-child tr:first-child > th,
.format-preview__sheet tbody:first-child tr:first-child > td,
.format-preview__sheet tbody:first-child tr:first-child > th {
    border-top: 0;
}

.format-preview__body .cell-content,
.format-preview__sheet .cell-content {
    width: 100%;
    height: 100%;
    padding: 5px 8px;
}

.format-preview__body th > :first-child,
.format-preview__body td > :first-child {
    margin-top: 0;
}

.format-preview__body th > :last-child,
.format-preview__body td > :last-child {
    margin-bottom: 0;
}

.format-preview__body th p,
.format-preview__body td p {
    margin: 0;
}

.format-preview__notice {
    margin-top: 16px;
    color: var(--format-preview-muted);
    font-size: 0.75rem;
}

/* ── Sheet formats (CSV, Excel): toolbar / tabs above a bounded table scroller ── */

.format-preview__sheet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
    padding: 36px 44px 56px;
    font-size: 0.875rem;
    line-height: 1.65;
}

.format-preview__toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.format-preview__meta {
    flex: 0 0 auto;
    margin-bottom: 12px;
    color: var(--format-preview-muted);
    font-size: 0.75rem;
}

.format-preview__toolbar .format-preview__meta {
    margin-bottom: 0;
}

.format-preview__search {
    box-sizing: border-box;
    width: 200px;
    padding: 4px 10px;
    border: 0.5px solid var(--format-preview-border);
    border-radius: 6px;
    background: var(--format-preview-raised-bg);
    color: var(--format-preview-text);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: normal;
    outline: none;
}

.format-preview__search::placeholder {
    color: var(--format-preview-muted);
}

.format-preview__search:focus-visible {
    border-color: var(--shell-accent, var(--format-preview-muted));
}

.format-preview__th--sortable {
    cursor: pointer;
    user-select: none;
}

.format-preview__th--sortable:hover {
    background: var(--format-preview-hover-bg);
}

.format-preview__table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.format-preview__table-scroll table {
    overflow: visible;
}

/* The header tbody follows the colgroup, so target the header cells directly (the only th in the table). */
.format-preview__table-scroll th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--format-preview-raised-bg);
}

.format-preview__sheet .cell-content--clamp {
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.format-preview__sheet .cell-content--end {
    text-align: right;
}

.format-preview__tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
    padding: 2px;
    overflow-x: auto;
    border: 0.5px solid var(--format-preview-border);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--format-preview-panel-bg) 72%, transparent);
    scrollbar-width: thin;
}

.format-preview__tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--format-preview-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.format-preview__tab:hover {
    color: var(--format-preview-text);
}

.format-preview__tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--format-preview-text) 35%, transparent);
    outline-offset: 1px;
}

.format-preview__tab--active {
    background: var(--format-preview-hover-bg);
    color: var(--format-preview-text);
}

.format-preview__note {
    flex: 0 0 auto;
    margin-bottom: 8px;
    color: var(--format-preview-muted);
    font-size: 0.75rem;
}

.format-preview__index {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--format-preview-raised-bg);
    color: var(--format-preview-muted);
}

.format-preview__table-scroll th.format-preview__corner {
    z-index: 3;
}

/* ── Framed formats (HTML, PDF) and the SVG stage ── */

.format-preview__frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--format-preview-panel-bg);
}

.format-preview__stage {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    place-items: center;
    padding: 24px;
    overflow: auto;
}

.format-preview__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── Status cards: loading, failed (with Retry), too large ── */

.format-preview__status {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 48px 24px;
    color: var(--format-preview-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.format-preview__status-text {
    margin: 0;
}

.format-preview__status-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-preview__action,
.format-preview__download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 0.5px solid var(--format-preview-border);
    border-radius: 9999px;
    background: var(--format-preview-panel-bg);
    color: var(--format-preview-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.format-preview__action:hover,
.format-preview__download:hover {
    background: var(--format-preview-hover-bg);
}
/* ===== end format-preview.css ===== */

/* Workspace chrome: the island bar under a page's tab row, and the panel below it that holds
   the surface's content. Measured on the diff review and file explorer toolbars
   (2026-08-25): 36px tall, 0.5px hairline at radius 8, on the page's 8px gutters. */
.toolbar-island,
.frame-surface {
    --chrome-island-bg: var(--shell-bg-active);
    --chrome-island-border: color-mix(in srgb, var(--chrome-island-bg) 89%, var(--shell-text-primary));
}

/* The dark families derive both from the page surface, as the diff cards do. */
[data-app-theme="dark"] .toolbar-island,
[data-app-theme="dark"] .frame-surface,
[data-app-theme="classic-dark"] .toolbar-island,
[data-app-theme="classic-dark"] .frame-surface,
[data-app-theme="magic-blue"] .toolbar-island,
[data-app-theme="magic-blue"] .frame-surface {
    --chrome-island-bg: lch(from var(--shell-bg-surface) calc(l + 4.125) calc(c + 0.5) h);
    --chrome-island-border: lch(from var(--shell-bg-surface) calc(l + 12.525) calc(c + 1.7) h);
}

.toolbar-island {
    display: flex;
    align-items: center;
    gap: var(--toolbar-island-gap, 8px);
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--toolbar-island-height, 36px);
    margin: 0 8px 8px;
    padding: 6px 10px 6px 12px;
    border: 0.5px solid var(--chrome-island-border);
    border-radius: 8px;
    background: var(--chrome-island-bg);
}

/* A bar of icon buttons sits tighter than one of text controls. */
.toolbar-island--dense {
    gap: var(--toolbar-island-gap, 2px);
    padding: 0 4px;
}

.toolbar-island--flush {
    margin: 0;
}

.toolbar-island__leading,
.toolbar-island__trailing {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    flex: 0 0 auto;
    min-width: 0;
}

.toolbar-island__content {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    flex: 1 1 auto;
    min-width: 0;
}

.frame-surface {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 8px 8px;
    padding: var(--frame-surface-padding, 0);
    overflow: hidden;
    border: 0.5px solid var(--chrome-island-border);
    border-radius: 8px;
    background: var(--chrome-surface-bg, var(--chrome-island-bg));
}

.frame-surface--static {
    flex: 0 0 auto;
}

.frame-surface--unclipped {
    overflow: visible;
}

.frame-surface--flush {
    margin: 0;
}

/* FillRegion stretches its children; the bar keeps its measured height. */
.fill-region > .toolbar-island {
    flex: 0 0 auto;
}

/* Bounded cards (QUI-67): the surface caps to the host's MaxHeight and, with FitViewport, to
   the room the overlay measured at the card's placement, so long content scrolls inside the
   card instead of running off the screen. Unbounded cards are untouched. */
.ui-hover-card__surface--bounded {
    max-height: min(
        var(--ui-hover-card-max-height, 100vh),
        var(--ui-floating-available-height, 100vh));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A long unbroken label must not widen a bounded card past its max width. */
    overflow-wrap: anywhere;
}