/* Islands skin for dashboard pages; legacy vars are remapped onto --jb-* tokens here, and jb-tokens.css flips them for the light theme. */

:root {
    --bg-base: var(--jb-bg-canvas);
    --bg-surface: var(--jb-bg-canvas);
    --bg-elevated: var(--jb-bg-raised);
    --bg-card: var(--jb-bg-inset);
    --solid-bg-card: var(--jb-bg-dialog);
    --glass-bg: var(--jb-bg-canvas);
    --glass-border: var(--jb-border);
    --accent: var(--jb-accent);
    --accent-hover: var(--jb-accent-hover);
    --accent-muted: color-mix(in srgb, var(--jb-accent) 15%, transparent);
    --accent-subtle: color-mix(in srgb, var(--jb-accent) 6%, transparent);
    --accent-glow: color-mix(in srgb, var(--jb-accent) 25%, transparent);
    --text-primary: var(--jb-fg);
    --text-secondary: var(--jb-fg-secondary);
    --text-tertiary: var(--jb-fg-secondary);
    --border: var(--jb-border);
    --border-subtle: var(--jb-border-island);
    --input-bg: var(--jb-bg-inset);
    --input-focus-bg: var(--jb-bg-inset);
    --input-focus-ring: transparent;
    --shadow-sm: none;
    --shadow-md: var(--jb-shadow-popup);
    --shadow-lg: var(--jb-shadow-dialog);
    --radius-sm: var(--jb-r-md);
    --radius-md: var(--jb-r-md);
    --radius-lg: var(--jb-r-panel);
    --sidebar-bg: var(--jb-bg-canvas);
    --sidebar-border: var(--jb-border);
    --sidebar-item-hover: var(--jb-bg-hover);
    --sidebar-item-active: var(--jb-bg-selected-muted);
    --sidebar-text-primary: var(--jb-fg);
    --sidebar-text-secondary: var(--jb-fg);
    --sidebar-text-tertiary: var(--jb-fg-secondary);
    --sidebar-compact-width: 56px;
    --duration-xfast: var(--jb-dur-in);
    --duration-fast: var(--jb-dur-in);
    --duration-normal: var(--jb-dur-out);
    --duration-slow: var(--jb-dur-out);
    --badge-approved: var(--jb-success);
    --badge-approved-bg: var(--jb-success-bg);
    --badge-vote: var(--jb-chart-2);
    --badge-vote-bg: color-mix(in srgb, var(--jb-chart-2) 18%, transparent);
    --badge-undenied: var(--jb-chart-5);
    --badge-undenied-bg: color-mix(in srgb, var(--jb-chart-5) 18%, transparent);
    --badge-feature: var(--jb-chart-1);
    --badge-feature-bg: color-mix(in srgb, var(--jb-chart-1) 18%, transparent);
    --badge-team: var(--jb-chart-1); /* indigo has no chart step; nearest by hex distance is chart-1 (blue), not chart-4 (purple) */
    --badge-team-bg: color-mix(in srgb, var(--jb-chart-1) 18%, transparent);
    --badge-comment: var(--jb-chart-4);
    --badge-comment-bg: color-mix(in srgb, var(--jb-chart-4) 18%, transparent);
    --badge-merged: var(--jb-chart-4);
    --badge-merged-bg: color-mix(in srgb, var(--jb-chart-4) 18%, transparent);
    --badge-denied: var(--jb-chart-7);
    --badge-denied-bg: color-mix(in srgb, var(--jb-chart-7) 18%, transparent);
    --badge-vote-removed: var(--jb-error);
    --badge-vote-removed-bg: var(--jb-error-bg);
    --badge-deleted: var(--jb-chart-3);
    --badge-deleted-bg: color-mix(in srgb, var(--jb-chart-3) 18%, transparent);
    --badge-unarchived: var(--jb-warning);
    --badge-unarchived-bg: var(--jb-warning-bg);
    --badge-moved: var(--jb-chart-6);
    --badge-moved-bg: color-mix(in srgb, var(--jb-chart-6) 18%, transparent);
    --badge-archived: var(--jb-chart-8);
    --badge-archived-bg: color-mix(in srgb, var(--jb-chart-8) 14%, transparent);
    --badge-view: var(--jb-chart-8);
    --badge-view-bg: color-mix(in srgb, var(--jb-chart-8) 14%, transparent);
    --error: var(--jb-error);
    --error-muted: var(--jb-error-bg);
    --warning: var(--jb-warning);
    --warning-muted: var(--jb-warning-bg);
    --success: var(--jb-success);
    --success-muted: var(--jb-success-bg);
    --scrollbar-thumb: var(--jb-border-control);
    --scrollbar-thumb-hover: var(--jb-border-raised);
    --gradient-glass: none;
    --gradient-subtle: none;
    --sidebar-width: var(--jb-sidebar-w);
    --info: var(--jb-accent); /* 15 of 23 call sites are load bearing status colour; jb-accent is nearest since JetBrains has no info hue */
    --info-muted: var(--jb-info-bg); /* the tint jb-tokens.css already built for modal-info-box and sample-banner */
    --space-1: var(--jb-sp-1);
    --space-2: var(--jb-sp-2);
    --space-3: var(--jb-sp-3);
    --space-4: var(--jb-sp-4);
    --space-5: var(--jb-sp-4); /* 20px sits equidistant between sp-4 (16) and sp-5 (24); sp-4 matches panel padding, this name's actual role */
    --space-6: var(--jb-sp-5);
    --space-8: var(--jb-sp-6);
    --space-10: var(--jb-sp-6); /* 40px sits equidistant between sp-6 (32) and sp-7 (48); sp-6 keeps the row as dense as every other row height in the file */
    --space-12: var(--jb-sp-7);
    --text-xs: var(--jb-t-1);
    --text-sm: var(--jb-t-3);
    --text-base: var(--jb-t-5);
    --text-lg: var(--jb-t-6);
    --text-xl: var(--jb-t-6); /* 20px is nearer t-6 (18, -2px) than t-7 (24, +4px); it labels a panel heading, not a page title */
}

html {
    scrollbar-gutter: stable;
}

body, button, input, select, textarea {
    font-family: var(--jb-font);
}

body {
    font-size: 13px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}

.sidebar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.main-content {
    border: none;
    box-shadow: none;
    /* bottom: clearance for the fixed status bar (--jb-h-control) plus a grid gap */
    padding: 0 var(--jb-sp-4) calc(var(--jb-h-control) + var(--jb-sp-4));
    overflow: visible;
}

.top-bar {
    height: 40px;
    margin-bottom: 16px;
    padding: 0;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: var(--jb-z-sticky);
    background: var(--jb-bg-toolbar);
    border-bottom: 1px solid var(--jb-border);
}
html.is-demo .top-bar {
    top: var(--demo-banner-h, 40px);
    /* The island gap under the demo strip is a slot the board scrolls through; paint it toolbar coloured. */
    box-shadow: 0 calc(-1 * var(--jb-island-gap)) 0 var(--jb-bg-toolbar);
}
/* The title shrinks rather than grows, so a count after it stays in the row; .top-bar-left holds the row open. */
.top-bar h1 {
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-bar svg {
    width: 20px;
    height: 20px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    margin-left: auto;
}
.toolbar-icon-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: var(--jb-r-lg);
    color: var(--jb-fg);
    cursor: default;
    text-decoration: none;
    transition: background-color var(--jb-dur-in) ease-out, color var(--jb-dur-in) ease-out;
}
.toolbar-icon-btn svg {
    width: 20px;
    height: 20px;
}
.toolbar-icon-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.toolbar-icon-btn:active {
    background: var(--jb-bg-pressed);
}
.bulk-select-btn {
    background: transparent;
    border: none;
}
.bulk-select-btn.toolbar-icon-btn {
    box-sizing: border-box;
}
.bulk-select-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.bulk-select-btn:active {
    background: var(--jb-bg-pressed);
}
.bulk-select-btn.active {
    background: var(--jb-bg-selected-muted);
    color: var(--jb-accent);
}
@media (pointer: coarse) {
    .toolbar-icon-btn,
    .toolbar-filter-toggle,
    .board-tab-add,
    .hamburger-btn,
    .roadmap-nav-btn {
        position: relative;
    }
    .toolbar-icon-btn::after,
    .toolbar-filter-toggle::after,
    .board-tab-add::after,
    .hamburger-btn::after,
    .roadmap-nav-btn::after {
        content: "";
        position: absolute;
        inset: -7px;
    }
}

.jb-tooltip {
    position: fixed;
    z-index: var(--jb-z-tooltip);
    background: var(--jb-bg-popup);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    box-shadow: var(--jb-shadow-popup);
    padding: 12px 16px;
    max-width: 250px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--jb-dur-tooltip) ease;
}
.jb-tooltip.visible { opacity: 1; }
.jb-tooltip strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--jb-fg);
}
.jb-tooltip span {
    display: block;
    font-size: 12px;
    color: var(--jb-fg-secondary);
    margin-top: 2px;
}

.button-group-button {
    height: var(--jb-h-control);
    padding: 0 8px;
    font-size: 13px;
    border-radius: var(--jb-r-md);
}
.button-group-button:hover { background-color: var(--jb-bg-hover); }

.top-bar-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
/* display:contents: Safari mis-measures this box's own intrinsic width whichever way it's asked for (auto, max-content, a fixed flex-basis), so the filter button always overflowed into the next toolbar icon. Removing the box lets its children flex directly inside .top-bar-right, where sizing is correct. Restored to a real flex box in the narrower layouts below, where it needs to size and wrap as one unit. */
.top-bar-tools {
    display: contents;
}
.toolbar-filters,
.top-bar-tools > .ob-open {
    flex-shrink: 0;
}
/* Safari older than 14.1 (still out there on customer machines) ignores flex gap entirely, so the search box and every toolbar button collapse edge to edge. */
@supports not (gap: 1px) {
    .top-bar-right > * + * { margin-left: 2px; }
    .top-bar-tools > * + * { margin-left: 8px; }
}
.top-bar-tools .toolbar-search {
    flex: 0 0 280px;
    max-width: 280px;
    height: 30px;
}
.board-tabs, .page-tabs {
    gap: 4px;
    padding: 0 0 3px;
    background: transparent;
    border: none;
    border-radius: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--jb-alpha-w-40) transparent;
}
.board-tabs::-webkit-scrollbar, .page-tabs::-webkit-scrollbar { height: 3px; }
.board-tabs::-webkit-scrollbar-track, .page-tabs::-webkit-scrollbar-track { background: transparent; }
.board-tabs::-webkit-scrollbar-thumb, .page-tabs::-webkit-scrollbar-thumb { background: var(--jb-alpha-w-40); border-radius: 0; }
.board-tabs::-webkit-scrollbar-thumb:hover, .page-tabs::-webkit-scrollbar-thumb:hover { background: var(--jb-alpha-w-50); }
/* A tab strip in the top bar is already spaced by the bar, and the extra 16px would break a 40px row. */
.page-tabs {
    margin-bottom: 16px;
}
.top-bar-left .page-tabs {
    margin-bottom: 0;
}
.board-tab, .page-tab {
    flex: 0 0 auto;
    gap: 6px;
    height: var(--jb-tab-pill-h);
    padding: 0 12px;
    border-radius: var(--jb-r-lg);
    font-size: 13px;
    font-weight: var(--jb-w-normal);
    color: var(--jb-fg-secondary);
    opacity: 0.75;
    background: transparent;
    box-shadow: none;
    transition: background-color var(--jb-dur-in) ease-out, opacity var(--jb-dur-in) ease-out;
}
.board-tab:hover, .page-tab:hover {
    opacity: 1;
    color: var(--jb-fg);
    background: var(--jb-tab-hover-bg);
}
.board-tab.active, .page-tab.active {
    opacity: 1;
    color: var(--jb-fg);
    font-weight: var(--jb-w-normal);
    background: var(--jb-tab-selected-bg);
    box-shadow: inset 0 0 0 1px var(--jb-tab-selected-border);
}
.board-tab-add {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-lg);
    border: none;
    background: transparent;
    color: var(--jb-fg-icon);
    font-size: 16px;
    flex-shrink: 0;
    transition: background-color var(--jb-dur-in) ease-out, color var(--jb-dur-in) ease-out;
}
.board-tab-add:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
    border-color: transparent;
}
.board-tab-add:active {
    background: var(--jb-bg-pressed);
}
.board-tab-upgrade {
    height: var(--jb-tab-pill-h);
    padding: 0 12px;
    border-radius: var(--jb-r-lg);
    border: none;
    background: transparent;
    color: var(--jb-link);
    font-size: 12px;
    font-weight: var(--jb-w-normal);
}
.board-tab-upgrade:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-link);
}

/* The admin gate pages carry this pair and load no other sheet, so the swap lives here rather than in inner-index.css. */
.logo-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.logo-light {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: none;
}

/* Inline, not block: the gate card centres its contents with text-align, which only reaches a line of text. */
[data-theme="light"] .logo-light {
    display: inline;
}

.sidebar-logo {
    height: 40px;
    min-height: 40px;
    padding: 0 16px 0 20px;
    border-bottom: none;
    margin-bottom: 0;
}
.sidebar-logo .logo-text {
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    letter-spacing: normal;
    color: var(--jb-fg);
}
.sidebar-project-switcher {
    padding: 2px 0;
    border-bottom: none;
    margin-bottom: 2px;
}

.nav-item {
    height: 24px;
    padding: 0 12px;
    margin: 0 8px;
    border-radius: var(--jb-r-md);
    gap: 8px;
    font-size: 13px;
}
.nav-item.active {
    font-weight: var(--jb-w-normal);
}
.nav-item .nav-icon,
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { color: inherit; }
.nav-item .nav-label { line-height: 16px; }
/* How many things are waiting on this entry, filled rather than tinted so it survives the 56px rail, and always red. */
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--jb-r-md);
    background: var(--jb-count-danger);
    color: var(--jb-fg-on-accent);
    font-size: 11px;
    font-weight: var(--jb-w-medium);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* On a 56px rail the count rides the icon's corner, absolute and hung into the gutter so the icon stays recognisable. */
@media (min-width: 769px) {
    [data-sidebar="compact"] .nav-item { position: relative; }
    [data-sidebar="compact"] .nav-badge {
        position: absolute;
        top: -2px;
        right: -6px;
        height: 16px;
        min-width: 16px;
        padding: 0 4px;
        z-index: 1;
    }
}
.sidebar-tooltip { display: none !important; }

.nav-section-label {
    padding: 0;
    margin: 16px 20px 4px;
}
.nav-section-text {
    font-size: 11px;
    font-weight: var(--jb-w-medium);
    text-transform: none;
    letter-spacing: normal;
    color: var(--jb-fg-tertiary);
}

.project-switcher-trigger {
    height: 28px;
    width: calc(100% - 16px);
    /* border-compensated: 1px border + this padding renders --jb-sp-3 */
    padding: 0 calc(var(--jb-sp-3) - 1px);
    margin: 0 8px;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--jb-r-md);
    font-size: 13px;
    font-weight: var(--jb-w-semi);
    color: var(--jb-fg);
}
.project-trigger-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.sidebar-logo .logo-icon {
    display: none;
}
.project-item-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-selected-muted) !important;
    color: var(--jb-fg);
    font-size: 11px;
    font-weight: var(--jb-w-medium);
}
.project-switcher-trigger .project-chevron-icon {
    margin-left: auto;
}
.project-switcher-trigger .project-item-avatar {
    width: 20px;
    height: 20px;
    background: var(--jb-accent) !important;
    color: var(--jb-fg-on-accent);
    font-weight: var(--jb-w-semi);
}
.project-switcher-trigger:hover {
    background: var(--jb-bg-hover);
    border-color: transparent;
}
.project-chevron-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    color: var(--jb-fg-icon);
}
.sidebar-collapse-btn {
    background: transparent;
    border: none;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-icon);
}
.sidebar-collapse-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.sidebar-collapse-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}
.project-switcher-dropdown {
    background: var(--jb-layer-2);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    box-shadow: var(--jb-shadow-dialog);
    padding: 6px;
    gap: 2px;
}
.project-switcher-dropdown .project-search-input {
    height: 28px;
    padding: 0 8px;
    margin-bottom: 6px;
    font-size: 13px;
    font-family: var(--jb-font);
    background: var(--jb-bg-inset);
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    color: var(--jb-fg);
}
.project-switcher-dropdown .project-search-input:focus {
    border-color: var(--jb-focus);
    background: var(--jb-bg-inset);
}
:root:not([data-theme="light"]) .project-switcher-dropdown .project-search-input:not(:focus) {
    border-color: transparent;
}
.project-switcher-dropdown .project-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.project-switcher-dropdown .project-list-item {
    height: 24px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg);
}
.project-switcher-dropdown .project-list-item:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.project-switcher-dropdown .project-list-item.active {
    background: var(--jb-bg-selected-muted);
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
}
.project-switcher-dropdown .project-switcher-divider {
    display: none;
}
.project-switcher-dropdown .project-create-link {
    height: 24px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
    margin-top: 6px;
}
.project-switcher-dropdown .project-create-link:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}

.sidebar-footer-item {
    height: 24px;
    padding: 0 12px;
    margin: 0 8px;
    border-radius: var(--jb-r-md);
    gap: 8px;
    font-size: 13px;
}
.sidebar-user {
    height: 24px;
    padding: 0 12px;
    margin: 0 8px;
    border-radius: var(--jb-r-md);
    gap: 8px;
}

/* The signed in user's initial, tinted from their name by the markup so the circle is finished in the first frame. */
.sidebar-user-avatar {
    background: color-mix(in srgb, var(--avatar-color, var(--jb-fg-secondary)) 24%, transparent);
    color: var(--avatar-color, var(--jb-fg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar-color, var(--jb-fg-secondary)) 45%, transparent);
    font-weight: var(--jb-w-medium);
    user-select: none;
}

/* Only the inactive half of the theme control is hidden, so the label follows whatever the sidebar or toolbar already says. */
html:not([data-theme="light"]) .theme-icon-moon,
html:not([data-theme="light"]) .theme-label-dark,
html[data-theme="light"] .theme-icon-sun,
html[data-theme="light"] .theme-label-light {
    display: none;
}
html.is-demo .sidebar-logout { display: none; }

@media (min-width: 769px) {
    .sidebar-footer {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 0 8px;
        margin: 0 0 0 24px;
        border: none;
    }
    .sidebar-footer .nav-label,
    .sidebar-footer .sidebar-user-name {
        display: none;
    }
    .sidebar-footer .sidebar-footer-item,
    .sidebar-footer .sidebar-user {
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0;
        gap: 0;
        justify-content: center;
        border-radius: var(--jb-r-lg);
    }
    .sidebar-footer .sidebar-footer-item:hover,
    .sidebar-footer .sidebar-user:hover {
        background: var(--jb-bg-hover);
    }
    .sidebar-footer .sidebar-footer-item:active,
    .sidebar-footer .sidebar-user:active {
        background: var(--jb-bg-pressed);
    }
    .sidebar-footer .sidebar-user-avatar {
        width: 20px;
        height: 20px;
    }
    .top-bar .sidebar-footer-item,
    .top-bar .sidebar-user,
    .top-bar .sidebar-upgrade {
        color: var(--jb-fg);
    }
    .top-bar .sidebar-footer-item:hover,
    .top-bar .sidebar-user:hover,
    .top-bar .sidebar-logout:hover {
        color: var(--jb-fg);
        background: var(--jb-bg-hover);
    }
    .top-bar .sidebar-footer svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.5;
    }
}

/* Tablet 769 to 1100: two 40px rows, tabs with the user cluster then search and filters, placed after the min-769 block. */
@media (min-width: 769px) and (max-width: 1100px) {
    .top-bar {
        flex-wrap: wrap;
        height: auto;
        min-height: 80px;
        padding: 0;
        column-gap: 8px;
        row-gap: 0;
        align-items: center;
    }
    .top-bar-left {
        order: 1;
        flex: 1 1 240px;
        min-width: 0;
        height: 40px;
        display: flex;
        align-items: center;
    }
    .top-bar > .sidebar-footer {
        order: 2;
        flex: none;
        height: 40px;
        margin: 0;
    }
    .top-bar-right {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        height: 40px;
        margin-left: 0;
        border-top: 1px solid var(--jb-border);
    }
    .top-bar:has(> .top-bar-right.is-hidden) {
        min-height: 40px;
    }
    .top-bar-tools {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .top-bar-tools .toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 769px) {
    [data-sidebar="compact"] .nav-item,
    [data-sidebar="compact"] .project-switcher-trigger {
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0 auto;
        gap: 0;
        justify-content: center;
        border-radius: var(--jb-r-md);
    }
}
[data-sidebar="compact"] .nav-item .nav-icon {
    width: 24px;
    height: 24px;
}
[data-sidebar="compact"] .sidebar-collapse-btn svg {
    width: 24px;
    height: 24px;
    transform: none;
}
[data-sidebar="compact"] .project-switcher-trigger .project-item-avatar {
    width: 24px;
    height: 24px;
}

/* Below 1200px the sidebar is compact regardless, so the collapse button and the header row that holds it both go. */
@media (max-width: 1200px) {
    .sidebar-logo { display: none; }
}
/* With that row gone the project avatar squares the rail off, centred in a band the height of the top bar. */
@media (min-width: 769px) and (max-width: 1200px) {
    .sidebar-project-switcher {
        display: grid;
        place-items: center;
        height: 40px;
        padding: 0;
        margin: 0;
    }
}

.sidebar-spacer { order: 1; }
.sidebar-footer { order: 3; }

.toolbar-search {
    height: var(--jb-h-control);
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    font-size: 13px;
    /* border-compensated: 1px border + this padding renders --jb-sp-3, matching the switcher trigger's inset */
    padding: 0 calc(var(--jb-sp-3) - 1px);
    max-width: 280px;
}
.toolbar-search-icon[fill="none"] {
    fill: none;
    color: var(--jb-fg);
    width: 20px;
    height: 20px;
}
.toolbar-input::placeholder {
    color: var(--jb-fg-secondary);
}
.toolbar-search:focus-within {
    border-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.toolbar-input { font-size: 13px; }
.toolbar-input:focus-visible { outline: none; }
.toolbar-search-kbd {
    background: var(--jb-bg-inset);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg-secondary);
}

.toolbar-filter-toggle {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: var(--jb-r-lg);
    color: var(--jb-fg-icon);
    cursor: default;
    position: relative;
}
.toolbar-filter-toggle:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.toolbar-filter-toggle:active {
    background: var(--jb-bg-pressed);
}
.toolbar-filter-toggle.active {
    background: transparent;
    color: var(--jb-accent);
}
.toolbar-filter-toggle.active:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.toolbar-filter-toggle.active:active {
    background: var(--jb-bg-pressed);
}
.toolbar-filter-toggle svg {
    width: 20px;
    height: 20px;
}
.toolbar-filter-toggle .filter-active-dot {
    position: absolute;
    top: 4px;
    right: 4px;
}

.toolbar-filter-popover {
    background: var(--jb-bg-popup);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    box-shadow: var(--jb-shadow-popup);
    padding: 12px;
    transform: none;
    transition: opacity var(--jb-dur-in) ease-out, visibility var(--jb-dur-in) ease-out;
}
.toolbar-filter-popover.active {
    transform: none;
}
.filter-popover-link {
    height: 24px;
    padding: 0 8px;
    border-radius: var(--jb-r-md);
    color: var(--jb-link);
}
.filter-popover-link:hover {
    background: var(--jb-bg-hover);
    text-decoration: none;
}
.toolbar-select {
    height: var(--jb-h-control);
    font-size: 13px;
    border-radius: var(--jb-r-md);
    background-color: var(--jb-bg-inset);
    border: 1px solid var(--jb-border-control);
}
.toolbar-select:hover {
    border-color: var(--jb-border-raised);
}
.toolbar-select:active {
    background-color: var(--jb-bg-pressed);
}

.roadmap-container {
    gap: var(--jb-island-gap);
    margin-top: 0;
}

/* Getting started: the steps that make the sample board theirs, in the same drawer as the card guide. */
.gs-panel {
    z-index: var(--jb-z-dialog);
}
.gs-welcome {
    margin: 0 0 var(--jb-sp-4);
    font-size: var(--jb-t-4);
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg);
}
.ob-progress {
    margin: 0 0 var(--jb-sp-5);
}
.ob-steps {
    display: grid;
    gap: var(--jb-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ob-step {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 72px;
    gap: var(--jb-sp-3);
    align-items: start;
}
.ob-step-mark {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1.5px solid var(--jb-fg-tertiary);
    border-radius: 50%;
}
.ob-step--done .ob-step-mark {
    border-color: var(--jb-success);
    background: var(--jb-success);
}
.ob-step h3 {
    margin: 0;
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-medium);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg);
}
.ob-step--done h3 {
    color: var(--jb-fg-tertiary);
    text-decoration: line-through;
}
.ob-step p {
    margin: 2px 0 0;
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.ob-step .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    min-width: 0;
    padding: 0;
}
.ob-steps-foot {
    margin: var(--jb-sp-5) 0 0;
    text-align: center;
}
.ob-steps-hide {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--jb-t-2);
    color: var(--jb-fg-tertiary);
    cursor: pointer;
}
.ob-steps-hide:hover {
    color: var(--jb-fg-secondary);
}
/* Sample data notice: an editor notification panel, tinted and separated by a hairline, sharing the radius of the islands above. */
.sample-banner {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-4);
    /* It owns the gap on both sides like an island, or it sits flat against whatever follows it. */
    margin-top: 16px;
    margin-bottom: 16px;
    padding: var(--jb-sp-2) var(--jb-sp-2) var(--jb-sp-2) var(--jb-sp-3);
    background: var(--jb-info-bg);
    border: 1px solid var(--jb-info-border);
    border-radius: var(--jb-r-panel);
}
/* Last in its container it needs no gap under it; the container's own padding is already there. */
.sample-banner:last-child { margin-bottom: 0; }
.sample-banner-text {
    flex: 1;
    margin: 0;
    font-size: 13px;
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.sample-banner-text strong {
    font-weight: var(--jb-w-semi);
    color: var(--jb-fg);
}
.sample-banner .btn {
    flex-shrink: 0;
}
/* The same strip in the warning tokens, because a security notice is a warning rather than information. */
.sample-banner--warn {
    background: var(--jb-warning-bg);
    border-color: var(--jb-warning-border);
}
@media (max-width: 640px) {
    .sample-banner {
        align-items: stretch;
        flex-direction: column;
        gap: var(--jb-sp-2);
    }
}

/* A generic skeleton vocabulary for rows, cards and panels; the stack owns the rhythm so no block carries a margin. */
.skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-stack.loose {
    gap: 16px;
}
.skeleton-block {
    width: 100%;
    height: 32px;
    margin: 0;
    border-radius: var(--jb-r-md);
}
.skeleton-text { height: 20px; }
.skeleton-title { height: 24px; }
.skeleton-control { height: 28px; }
.skeleton-row { height: 44px; }
.skeleton-card { height: 48px; }
.skeleton-panel { height: 96px; }
.skeleton-block.short { width: 60%; }
.skeleton-block.narrow { width: 35%; }
.skeleton-block.quarter { width: 25%; }
/* inner-index.css forces height on .skeleton-block.short at equal specificity, so this combination needs a three class rule to win. */
.skeleton-block.short.skeleton-text { height: 20px; }

/* An empty board is an island with centred text, not an illustration. */
.ob-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fills the space under the top bar rather than stopping at the text, minus the bar, gaps and margins. */
    min-height: calc(100vh - var(--jb-toolbar-h) - var(--jb-sp-4) - var(--jb-sp-3) - var(--jb-island-gap));
    padding: var(--jb-sp-7) var(--jb-sp-5);
    text-align: center;
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
}
.ob-empty-message { display: flex; flex-direction: column; align-items: center; }
#ob-empty-features { margin-top: var(--jb-sp-4); }
.ob-empty-state h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: var(--jb-w-semi);
    color: var(--jb-fg);
}
.ob-empty-state p {
    margin: 0 0 16px;
    max-width: 46ch;
    font-size: 13px;
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg-secondary);
}
.ob-empty-hint {
    margin-top: 12px;
    font-size: 12px;
    color: var(--jb-fg-tertiary);
}

/* The island surface, defined once: every page's primary content sits on one, with no shadow and the gap doing the separating. */
.jb-island {
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
}

/* Columns are lanes, so a board grows to the bottom of the window from the layout rather than a viewport calculation. */
.main-content:has(> .roadmap-scroll-wrapper) {
    display: flex;
    flex-direction: column;
}
.roadmap-scroll-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.roadmap-container { flex: 1; }
body:not(.view-priorities) .prio-only,
.view-priorities .board-only { display: none; }
.board-access[aria-pressed="true"] svg:first-child,
.board-access[aria-pressed="false"] svg:nth-child(2) { display: none; }
.view-switch {
    flex: none;
    margin-left: 4px;
}
.view-switch button {
    padding: 0 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.view-switch span {
    color: var(--jb-fg-secondary);
    font-variant-numeric: tabular-nums;
}
.prio-bar {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--jb-fg-secondary);
}
.prio-bar .view-switch { margin: 0; }
.prio-table {
    margin-bottom: 40px;
    overflow-x: auto;
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-md);
}
.prio table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.prio th,
.prio td {
    padding: 0 12px;
    border-bottom: 1px solid var(--jb-border);
    text-align: left;
    white-space: nowrap;
}
.prio th {
    height: 32px;
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-secondary);
}
.prio td { height: 44px; }
.prio :is(th, td):first-child {
    width: 40px;
    text-align: right;
    font: 11px var(--jb-font-mono);
    color: var(--jb-fg-tertiary);
}
.prio :is(th, td):is(:nth-child(4), :nth-child(6)) { text-align: right; }
.prio td:nth-child(4) { font-weight: var(--jb-w-semi); }
.prio tbody tr { transition: background-color var(--jb-dur-in) ease-out; }
.prio tbody tr:hover { background: var(--jb-bg-hover); }
.prio tbody tr:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -2px;
}
.prio .cash { color: var(--jb-success); }
.prio .warn { color: var(--jb-warning); }
.prio .dim { color: var(--jb-fg-tertiary); }
.prio-title {
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.prio-title b { font-weight: var(--jb-w-medium); }
.prio-weeks {
    height: 20px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.prio-weeks i {
    width: 6px;
    border-radius: 1px;
    background: var(--jb-border-control);
}
.prio-weeks i:nth-child(7) { background: var(--jb-fg); }
.prio-weeks span {
    margin-left: 4px;
    font-size: 12px;
    color: var(--jb-fg-tertiary);
}
.prio-weeks .up { color: var(--jb-success); }
.prio-score {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 12px var(--jb-font-mono);
}
.prio-score .card-progress-track {
    width: 96px;
    flex: none;
}
.prio footer {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--jb-fg-secondary);
}
.prio footer:has(#prio-all[hidden]) { display: none; }
#prio-summary {
    font-size: 12px;
    color: var(--jb-fg-tertiary);
    font-variant-numeric: tabular-nums;
}

.board-stats {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--jb-border);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-md);
    overflow: hidden;
}
.board-stat {
    flex: 1 1 200px;
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--jb-bg-island);
    font-variant-numeric: tabular-nums;
}
.board-stat span {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--jb-fg-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-stat b {
    font-size: 16px;
    font-weight: var(--jb-w-normal);
}
.board-stat b.warn { color: var(--jb-warning); }
.board-stat small {
    font-size: 11px;
    color: var(--jb-fg-tertiary);
}
.board-stat small.up { color: var(--jb-success); }

:where(.column-add, .column-toggle, .card-overflow-toggle, .card-overflow-item, .card-btn, .see-more-btn, .guide-popover header button, .fd button, .view-switch button, .column-swatches button) {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: default;
}
.lane svg,
.guide-popover svg,
.fd svg,
.view-switch svg,
.board-tab svg,
.board-access svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lane {
    flex: 1 0 auto;
    width: 272px;
    min-width: 272px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-md);
}
.lane:has(.drag-over),
.lane.drag-over {
    box-shadow: inset 0 0 0 1px var(--jb-focus);
}
.lane > .kanban-column {
    display: contents;
    width: auto;
    min-width: 0;
    min-height: 0;
}
.lane > .kanban-column > .column-header { order: -1; }
.kanban-column:not(:last-child)::after { display: none; }
.lane > .kanban-column[data-kind="pending"] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--jb-warning-bg);
    border: 1px solid var(--jb-warning-border);
    border-radius: var(--jb-r-md);
}
.lane > .kanban-column[data-kind="pending"]:not(:has(.feature-card-roadmap)) { display: none; }
.lane-stack > .kanban-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lane-stack > .kanban-column + .kanban-column {
    padding-top: 6px;
    border-top: 1px solid var(--jb-border);
}

.column-header {
    position: relative;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0 0 0 4px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.column-header h3 {
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: var(--jb-w-semi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lane-stack .column-header { padding: 0; }
[data-kind="pending"] > .column-header {
    height: 20px;
    padding: 0 4px;
    gap: 6px;
    color: var(--jb-warning);
    font-size: 12px;
    font-weight: var(--jb-w-medium);
}
[data-kind="pending"] > .column-header h3 {
    flex: 1;
    font: inherit;
}
.column-status-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 4px;
    background: var(--dot, var(--jb-fg-tertiary));
}
[data-color=""] { --dot: initial; }
[data-kind="review"], [data-color="purple"] { --dot: var(--jb-chart-4); }
[data-kind="progress"], [data-color="blue"] { --dot: var(--jb-accent); }
[data-color="teal"] { --dot: var(--jb-chart-5); }
[data-kind="completed"], [data-color="green"] { --dot: var(--jb-success); }
[data-color="yellow"] { --dot: var(--jb-warning); }
[data-kind="denied"], [data-color="red"] { --dot: var(--jb-error); }
.column-swatches {
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.column-swatches button {
    width: 14px;
    height: 14px;
    border-radius: var(--jb-r-sm);
    background: var(--dot, var(--jb-fg-tertiary));
}
.column-swatches [aria-checked="true"] {
    outline: 1.5px solid var(--jb-fg);
    outline-offset: 2px;
}
.column-count,
.section-count {
    min-width: 0;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    color: var(--jb-fg-secondary);
    font-size: 11px;
    font-weight: var(--jb-w-medium);
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}
[data-kind="pending"] .column-count {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 12px;
}
.column-add,
.column-toggle {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
}
.column-add { margin-left: auto; }
.column-toggle { margin-right: -4px; }
.column-toggle svg { stroke-width: 2.25; }
.column-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.column-add:hover,
.column-toggle:hover,
.column-header .card-overflow-toggle:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.column-hidden { color: var(--jb-fg-tertiary); }

.column-content {
    flex: 1;
    min-height: 0;
    gap: 6px;
}
.lane-stack .column-content,
[data-kind="pending"] > .column-content { flex: none; }
.kanban-column:has(.column-toggle[aria-expanded="false"]) > .column-content { display: none; }
.see-more-btn {
    height: 28px;
    flex: none;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
}
.see-more-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}

.feature-card-roadmap {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--jb-bg-popup);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    box-shadow: none;
    cursor: default;
    transition: border-color var(--jb-dur-in) ease-out;
}
.feature-card-roadmap:hover,
.feature-card-roadmap.card-overflow-open {
    border-color: var(--jb-border-control);
    box-shadow: none;
    transform: none;
}
.feature-card-roadmap[hidden], .board-tab [hidden] { display: none; }
.feature-card-roadmap:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.feature-card-roadmap.dragging {
    border-color: var(--jb-accent);
    box-shadow: var(--jb-shadow-popup);
    transform: none;
}
.feature-card-roadmap.card-flash { animation: card-flash 1600ms ease-out; }
@keyframes card-flash {
    from {
        border-color: var(--jb-accent);
        box-shadow: 0 0 0 1px var(--jb-accent);
    }
}

.card-tally {
    width: 44px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-vote {
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    color: var(--jb-fg);
    font-size: 14px;
    font-weight: var(--jb-w-semi);
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}
.card-vote svg,
.guide-vote svg {
    color: var(--jb-fg-secondary);
    stroke-width: 2.5;
}
.card-cash {
    color: var(--jb-success);
    font-size: 12px;
    font-weight: var(--jb-w-semi);
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}
.card-trow {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.feature-card-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--jb-fg);
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    line-height: 18px;
    overflow-wrap: anywhere;
}
.card-pin {
    display: none;
    margin-top: 3px;
    color: var(--jb-warning);
}
.pinned .card-pin { display: block; }
.card-overflow-toggle {
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: -3px;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-tertiary);
}
.card-overflow-toggle svg { stroke-width: 3; }
.feature-card-roadmap:hover .card-overflow-toggle { color: var(--jb-fg); }
.card-overflow-toggle[aria-expanded="true"] {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}

.card-pending {
    display: none;
    flex-direction: column;
    gap: 8px;
}
[data-kind="pending"] .card-pending { display: flex; }
.card-byline {
    font-size: 12px;
    color: var(--jb-fg-tertiary);
}
.card-decide {
    display: flex;
    gap: 6px;
}
.card-btn {
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
}
.card-btn:hover { background: var(--jb-bg-hover); }
.card-btn-deny {
    border-color: transparent;
    color: var(--jb-error);
}
[data-kind="pending"] :is(.card-tally, .card-desc, .card-mrow, .card-overflow-toggle) { display: none; }
[data-kind="pending"] .card-body { gap: 6px; }

.card-desc {
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--jb-fg-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.card-progress-bar {
    margin: 0;
    gap: 8px;
}
.card-progress-track {
    flex: 1;
    height: 4px;
    background: var(--jb-bg-inset);
    border-radius: 2px;
}
.card-progress-text {
    font: 11px var(--jb-font-mono);
    color: var(--jb-fg-secondary);
}
.card-mrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--jb-fg-secondary);
}
.card-mrow:not(:has(*)) { display: none; }
.card-mrow > * { flex: none; }
:is(.card-mrow, .fd) .feature-tag {
    flex: 0 1 auto;
    min-width: 0;
    display: block;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--jb-r-sm);
    background: color-mix(in srgb, var(--tag-color, var(--jb-fg-tertiary)) 18%, transparent);
    color: var(--tag-color, var(--jb-fg-tertiary));
    font-size: 11px;
    font-weight: var(--jb-w-medium);
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Wraps so the label drops out whole when the row runs short of room; the second line is clipped. */
.card-pulse {
    flex: 0 1 auto;
    min-width: 46px;
    height: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    overflow: hidden;
    line-height: 16px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.card-pulse b {
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg);
}
.card-pulse.quiet { color: var(--jb-fg-tertiary); }
.card-bars {
    height: 16px;
    margin-right: 2px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.card-bars i {
    width: 4px;
    height: 2px;
    border-radius: 1px 1px 0 0;
    background: var(--jb-border);
}
.card-bars i[style] { background: var(--jb-fg-tertiary); }
.card-bars i[style]:last-child { background: var(--jb-fg); }
.kanban-column:not([data-kind="progress"]) .card-mrow:has(.feature-tag) .card-pulse,
:is(.kanban-column:not([data-kind]) [data-type-id="4"], [data-kind="progress"]) .card-mrow:has(.card-stale):has(.card-due) .card-pulse { display: none; }
.card-quick,
.card-stale,
.mg-similar {
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--jb-r-sm);
    font-size: 11px;
    font-weight: var(--jb-w-medium);
    white-space: nowrap;
}
.card-quick { padding: 0 3px; }
.card-quick svg { fill: currentColor; }
.card-quick,
.mg-similar {
    background: var(--jb-success-bg);
    color: var(--jb-success);
}
.card-stale {
    background: var(--jb-warning-bg);
    color: var(--jb-warning);
    font-variant-numeric: tabular-nums;
}
.card-effort {
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg-secondary);
    font: 11px/16px var(--jb-font-mono);
    text-align: center;
}
.card-due,
.card-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.card-due.overdue { color: var(--jb-error); }
.card-comments { margin-left: auto; }
.card-unread {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--jb-accent);
}
.kanban-column[data-kind]:not([data-kind="progress"]) :is(.card-progress-bar, .card-stale, .card-due),
.kanban-column:not([data-kind]) .feature-card-roadmap:not([data-type-id="4"]) .card-stale,
[data-kind="progress"] :is(.card-mrow .feature-tag, .card-quick) { display: none; }

.lane-stack .feature-card-roadmap {
    height: 36px;
    padding: 0 4px 0 8px;
    align-items: center;
}
.lane-stack :is(.card-cash, .card-vote svg, .card-desc, .card-progress-bar, .card-mrow) { display: none; }
.lane-stack .card-tally { width: auto; }
.lane-stack .card-vote {
    min-width: 32px;
    height: 22px;
    padding: 0 4px;
    flex-direction: row;
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg-tertiary);
    font-size: 12px;
    line-height: 20px;
}
.lane-stack .card-trow { align-items: center; }
.lane-stack .feature-card-title {
    color: var(--jb-fg-secondary);
    font-weight: var(--jb-w-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lane-stack [data-kind="completed"] :is(.card-vote, .feature-card-title) { color: var(--jb-fg); }
.lane-stack .card-overflow-toggle,
.column-header .card-overflow-toggle { margin-top: 0; }

.card-overflow-menu,
.move-submenu,
.fd-menu,
.vf-launcher-menu {
    padding: 4px;
    background: var(--jb-bg-popup);
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    box-shadow: var(--jb-shadow-popup);
}
.card-overflow-menu {
    top: 30px;
    right: 4px;
    width: 200px;
    min-width: 0;
    transform: none;
    transition: none;
}
.card-overflow-menu.active,
.move-submenu,
.fd-menu { animation: menu-pop var(--jb-dur-in) ease-out; }
@keyframes menu-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}
.move-submenu {
    position: absolute;
    left: calc(100% + 4px);
    width: 176px;
}
.move-submenu--left {
    left: auto;
    right: calc(100% + 4px);
}
.card-overflow-item {
    width: 100%;
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
}
.card-overflow-item:hover,
.card-overflow-item:focus-visible,
.card-overflow-item[aria-expanded="true"] {
    outline: none;
    background: var(--jb-bg-selected);
    color: var(--jb-fg);
}
.card-overflow-item:disabled {
    background: none;
    color: var(--jb-fg-tertiary);
}
.card-overflow-item kbd {
    margin-left: auto;
    color: var(--jb-fg-tertiary);
    font: 11px var(--jb-font-mono);
}
.move-feature svg { color: var(--jb-fg-secondary); }
.move-submenu svg { margin-left: auto; }
.card-overflow-danger,
.card-overflow-danger:hover { color: var(--jb-error); }
.card-overflow-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--jb-border);
}

.card-guide-btn[aria-expanded="true"] { background: var(--jb-bg-hover); }
.guide-popover {
    top: calc(100% + 6px);
    width: 328px;
    padding: 0 0 10px;
    background: var(--jb-bg-island);
    border-color: var(--jb-border-control);
    font-size: 12px;
    line-height: 16px;
}
.guide-popover header {
    height: 36px;
    padding: 0 4px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guide-popover h2 {
    margin: 0;
    font-size: 13px;
    font-weight: var(--jb-w-semi);
}
.guide-popover header button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
}
.guide-popover header button:hover { background: var(--jb-bg-hover); }
.guide-popover dl {
    margin: 0;
    padding: 0 12px;
}
.guide-popover dl div {
    min-height: 28px;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.guide-popover dt {
    width: 52px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guide-popover dd {
    margin: 0;
    color: var(--jb-fg-secondary);
}
.guide-popover .card-comments {
    margin: 0;
    color: var(--jb-fg-secondary);
}
.guide-vote {
    width: 44px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    font-weight: var(--jb-w-semi);
}
.guide-keys {
    margin: 6px 12px 0;
    padding-top: 8px;
    border-top: 1px solid var(--jb-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.guide-keys span {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--jb-fg-secondary);
}
.guide-keys kbd {
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    color: var(--jb-fg);
    font: 11px/16px var(--jb-font-mono);
    text-align: center;
}

.column-content,
.detail-panel-body,
/* inner-index declares smooth scrolling universally, so page and list changes are set back to instant here. */
.jbs-pages,
.jbs-results,
.jbs-content-body {
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--jb-alpha-w-40) transparent;
}
.column-content::-webkit-scrollbar,
.detail-panel-body::-webkit-scrollbar,
.jbs-pages::-webkit-scrollbar,
.jbs-results::-webkit-scrollbar,
.jbs-content-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.column-content::-webkit-scrollbar-track,
.detail-panel-body::-webkit-scrollbar-track,
.jbs-pages::-webkit-scrollbar-track,
.jbs-results::-webkit-scrollbar-track,
.jbs-content-body::-webkit-scrollbar-track {
    background: transparent;
}
.column-content::-webkit-scrollbar-thumb,
.detail-panel-body::-webkit-scrollbar-thumb,
.jbs-pages::-webkit-scrollbar-thumb,
.jbs-results::-webkit-scrollbar-thumb,
.jbs-content-body::-webkit-scrollbar-thumb {
    background: var(--jb-alpha-w-40);
    border-radius: 0;
}
.column-content::-webkit-scrollbar-thumb:hover,
.detail-panel-body::-webkit-scrollbar-thumb:hover,
.jbs-pages::-webkit-scrollbar-thumb:hover,
.jbs-results::-webkit-scrollbar-thumb:hover,
.jbs-content-body::-webkit-scrollbar-thumb:hover {
    background: var(--jb-alpha-w-50);
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: none;
    border-radius: var(--jb-r-sm);
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    background: color-mix(in srgb, var(--tag-color, var(--jb-fg-tertiary)) 22%, transparent);
    color: var(--tag-color, var(--jb-fg-tertiary));
}
.feature-tag:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
/* A mark rather than a chip, so it does not read as a third thing to click and costs the line eleven pixels. */
.feature-tag-date {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: var(--jb-sp-1);
    padding: 0;
    background: none;
    color: var(--jb-syntax-constant);
    font-size: var(--jb-t-1);
    font-weight: var(--jb-w-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.feature-tag-date svg {
    width: 11px;
    height: 11px;
}
.feature-tag-date.overdue {
    color: var(--jb-error);
}
.card-score-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--jb-sp-1);
    height: 22px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    border-radius: var(--jb-r-sm);
}
.card-score-badge svg {
    width: 14px;
    height: 14px;
}
.card-score-badge-demand {
    color: var(--jb-syntax-metadata);
    background: color-mix(in srgb, var(--jb-syntax-metadata) 22%, transparent);
}
.card-score-badge-priority {
    color: var(--jb-syntax-keyword);
    background: color-mix(in srgb, var(--jb-syntax-keyword) 22%, transparent);
}
.card-score-badge-effort {
    color: var(--jb-syntax-string);
    background: color-mix(in srgb, var(--jb-syntax-string) 22%, transparent);
    font-variant-numeric: normal;
}
.card-score-badge-comments {
    color: var(--jb-fg-secondary);
    background: transparent;
}
/* The count is a mark on the number it annotates, the same blue in the drawer as on the card. */
.count-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 13px;
    font-weight: var(--jb-w-semi);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.count-dot--weighted {
    color: var(--jb-count-accent-tint);
}

.column-empty-state {
    border: none;
    padding: 8px 4px;
}
.column-empty-state:hover,
.kanban-column.drag-over .column-empty-state {
    border-color: transparent;
    color: var(--jb-fg-tertiary);
}
/* The custom board renders its empty state once and never touches it again, so a dragged card hides it without any script. */
.column-content:has(.feature-card-roadmap) .column-empty-state { display: none; }

.toggle-slider::before {
    background: var(--jb-fg-on-accent);
}

.btn-primary,
.btn-secondary,
.btn-danger,
.voter-load-more,
.ob-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jb-sp-2);
    min-height: var(--jb-h-control);
    min-width: var(--jb-w-button-min);
    padding: 0 14px;
    font-size: 13px;
    font-weight: var(--jb-w-normal);
    border-radius: var(--jb-r-md);
    text-decoration: none;
    cursor: default;
    transition: background-color var(--jb-dur-in) ease-out;
}
.btn-primary,
.ob-empty-btn {
    background: var(--jb-accent);
    border: 1px solid var(--jb-accent);
    color: var(--jb-fg-on-accent);
}
.btn-primary:hover,
.ob-empty-btn:hover {
    background: var(--jb-accent-hover);
    border-color: var(--jb-accent-hover);
    opacity: 1;
    transform: none;
    box-shadow: none;
}
.btn-primary:active,
.ob-empty-btn:active {
    background: var(--jb-accent-pressed);
    border-color: var(--jb-accent-pressed);
    transform: none;
}
.btn-secondary,
.voter-load-more {
    background: var(--jb-bg-raised);
    border: 1px solid var(--jb-border-control);
    color: var(--jb-fg);
}
.btn-secondary:hover,
.voter-load-more:hover {
    background: var(--jb-bg-hover);
    border-color: var(--jb-border-control);
    color: var(--jb-fg);
    transform: none;
}
.btn-secondary:active,
.voter-load-more:active {
    background: var(--jb-bg-pressed);
    transform: none;
}
.btn-danger {
    background: var(--jb-bg-raised);
    border: 1px solid var(--jb-error-border);
    color: var(--jb-error);
}
.btn-danger:hover,
.btn-danger:active {
    background: var(--jb-error-solid);
    border-color: var(--jb-error-solid);
    color: var(--jb-fg-on-accent);
    transform: none;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"],
.btn-danger:disabled,
.ob-empty-btn:disabled,
.voter-load-more:disabled {
    background: transparent;
    border-color: var(--jb-border-control);
    color: var(--jb-fg-disabled);
}

.modal-close,
.detail-panel-close {
    width: 28px;
    height: 28px;
    padding: 0 0 3px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    color: var(--jb-fg-icon);
    border: none;
    background: transparent;
    border-radius: var(--jb-r-md);
}
.modal-close:hover,
.detail-panel-close:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
    transform: none;
}
.detail-panel-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-panel-edit-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-icon);
}
.detail-panel-edit-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.card-guide-panel-header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.bulk-action-bar .btn-primary,
.bulk-action-bar .btn-secondary,
.bulk-action-bar .btn-danger {
    height: var(--jb-h-control);
    font-size: 13px;
}

/* Every field in a step sits in one grid, so a single row gap sets the rhythm; wide controls span both columns. */
.wizard-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--jb-sp-5) var(--jb-sp-4);
    align-items: start;
}
.wizard-form-grid > .form-group-roadmap {
    min-width: 0;
    margin-bottom: 0;
}
.wizard-form-grid > .form-group-full {
    grid-column: 1 / -1;
}
.wizard-form-grid > .help-text { margin-top: calc(var(--jb-sp-3) - var(--jb-sp-5)); }
@media (max-width: 600px) {
    .wizard-form-grid { grid-template-columns: minmax(0, 1fr); }
}
.progress-presets,
.effort-selector-edit,
.view-switch {
    display: flex;
    gap: 2px;
    padding: 1px;
    background: var(--jb-bg-inset);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
}
.progress-preset-btn,
.effort-btn-edit {
    flex: 1;
    min-width: 0;
}
.progress-preset-btn,
.effort-btn-edit,
.view-switch button {
    height: var(--jb-h-dense);
    border: 1px solid transparent;
    border-radius: var(--jb-r-sm);
    text-align: center;
    color: var(--jb-fg-secondary);
    font-variant-numeric: tabular-nums;
    transition: color var(--jb-dur-in) ease-out;
}
.progress-preset-btn:hover,
.effort-btn-edit:hover,
.view-switch button:hover { color: var(--jb-fg); }
.progress-preset-btn.active,
.effort-btn-edit.active,
.view-switch .active {
    background: var(--jb-bg-popup);
    border-color: var(--jb-border-control);
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
}
.form-input, .form-select {
    height: var(--jb-h-control);
    padding: 0 6px 0 9px;
    font-size: 13px;
    border-radius: var(--jb-r-md);
}
.form-select { padding-right: 32px; }
.form-textarea { display: block; font-size: 13px; border-radius: var(--jb-r-md); }
.form-label { font-size: 13px; font-weight: var(--jb-w-normal); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: transparent;
}
@media (pointer: coarse) {
    .form-input, .form-select, .form-textarea, .toolbar-input { font-size: 16px; }
}

/* One dimming layer for every floating surface: fixed over the viewport, blurred until text stops resolving, and tinted for the light theme. */
:root {
    --jb-backdrop-blur: 2px;
    --jb-backdrop-tint: color-mix(in srgb, var(--jb-gray-10) 32%, transparent);
    --jb-z-backdrop: 999;
    --jb-z-panel: 1000;
}
/* Without backdrop-filter the tint is the whole effect, so it is heavier; where the blur lands it steps back. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --jb-backdrop-tint: color-mix(in srgb, var(--jb-gray-10) 14%, transparent);
    }
}

.jb-backdrop,
.modal-overlay,
.panel-backdrop,
.sidebar-overlay,
.ob-welcome-overlay,
.ob-tour-overlay,
.demo-restriction-modal {
    position: fixed;
    inset: 0;
    z-index: var(--jb-z-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--jb-backdrop-tint);
    backdrop-filter: blur(var(--jb-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--jb-backdrop-blur));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    touch-action: none;
    /* --jb-dur-* collapse to 0ms under prefers-reduced-motion in jb-tokens.css, which is the whole of this layer's motion. */
    transition: opacity var(--jb-dur-out) var(--jb-ease-out),
                visibility var(--jb-dur-out) var(--jb-ease-out);
}
/* :where keeps the shown state at one class of weight, so the modifiers below can turn it off. */
.jb-backdrop:where(.active),
.modal-overlay:where(.active),
.panel-backdrop:where(.active),
.sidebar-overlay:where(.active),
.ob-welcome-overlay:where(.active),
.ob-tour-overlay:where(.active),
.demo-restriction-modal:where(.active) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-duration: var(--jb-dur-in);
    transition-timing-function: var(--jb-ease-in);
}
/* An overlay wrapping its own panel rides the panel layer and dims through its background, or a confirmation lands behind its drawer. */
.modal-overlay,
.ob-welcome-overlay,
.ob-tour-overlay,
.demo-restriction-modal {
    z-index: var(--jb-z-panel);
}
/* A drawer is a tool window, so it is an island: one width, floating with the island gap and the panel radius. */
:root {
    --drawer-w: 560px;
    --drawer-top: var(--jb-island-gap);
    --drawer-pad: var(--jb-sp-5);
}
html.is-demo {
    --drawer-top: calc(var(--demo-banner-h, 40px) + var(--jb-island-gap));
}
.modal-container,
.modal-overlay .modal-content,
.detail-panel,
.card-guide-panel,
.vf-launcher-panel {
    position: fixed;
    top: var(--drawer-top);
    right: var(--jb-island-gap);
    bottom: var(--jb-island-gap);
    left: auto;
    width: var(--drawer-w);
    max-width: calc(100vw - var(--jb-island-gap) * 2);
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-dialog);
    overflow: hidden;
    transform: translateX(calc(100% + var(--jb-island-gap)));
    visibility: hidden;
    animation: none;
    transition: transform var(--jb-dur-out) ease-in, visibility 0s var(--jb-dur-out);
}
.modal-overlay.active .modal-container,
.modal-overlay.active .modal-content,
.detail-panel.active,
.card-guide-panel.active,
.vf-launcher-panel.active {
    transform: translateX(0);
    visibility: visible;
    animation: none;
    transition: transform var(--jb-dur-drawer) cubic-bezier(.2, 0, 0, 1);
}
.modal-body,
.detail-panel-body,
.card-guide-panel-body {
    overscroll-behavior: contain;
    overflow-x: hidden;
    padding: var(--drawer-pad);
}
.modal-container:has(.modal-body-text),
#share-modal .modal-container,
.card-guide-panel {
    bottom: auto;
    max-height: calc(100dvh - var(--drawer-top) - var(--jb-island-gap));
}
@media (max-width: 768px) {
    .modal-container:has(.modal-body-text),
    #share-modal .modal-container,
    .card-guide-panel {
        bottom: 0;
        max-height: none;
    }
    .modal-container,
    .modal-overlay .modal-content,
    .detail-panel,
    .card-guide-panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        border: none;
        border-radius: 0;
        transform: translateX(100%);
    }
    html.is-demo .modal-container,
    html.is-demo .modal-overlay .modal-content,
    html.is-demo .detail-panel,
    html.is-demo .card-guide-panel {
        top: var(--demo-banner-h, 40px);
    }
    :root { --drawer-pad: var(--jb-sp-4); }
}

/* The scroll lock is on the root only: hiding body overflow moves the scrollport and drops the sticky top bar. */
html:has(.modal-overlay.active),
html:has(.detail-panel.active),
html:has(.card-guide-panel.active),
html:has(.jb-settings-dialog.active) {
    overflow: hidden;
}

.roadmap-bottom-bar.jb-statusbar {
    position: fixed;
    left: calc(var(--sidebar-width) + var(--layout-offset));
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    margin: 0;
    height: 28px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    background: var(--jb-bg-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-top: 1px solid var(--jb-border-island);
    border-radius: 0;
    box-shadow: none;
    z-index: var(--jb-z-sticky);
}
[data-sidebar="compact"] .roadmap-bottom-bar.jb-statusbar {
    left: calc(var(--sidebar-compact-width) + var(--layout-offset));
}
@media (max-width: 768px) {
    .roadmap-bottom-bar.jb-statusbar { left: 0; }
}
.roadmap-nav-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: var(--jb-r-md);
}
.roadmap-nav-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.roadmap-dot:hover { opacity: 0.6; }
.roadmap-dot:active { opacity: 1; }
.roadmap-dot.active { background: var(--jb-accent); }
.roadmap-bottom-divider { background: var(--jb-border); }
.roadmap-bottom-hints {
    color: var(--jb-fg-tertiary);
    margin-left: auto;
}
.roadmap-bottom-hints kbd {
    background: var(--jb-bg-inset);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
}
@media (pointer: coarse) {
    .roadmap-bottom-hints,
    .roadmap-bottom-divider,
    .toolbar-search-kbd {
        display: none;
    }
}

.bulk-action-bar {
    background: var(--jb-bg-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--jb-border-raised);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-popup);
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}
.bulk-action-bar .bulk-count-label {
    background: var(--jb-bg-inset);
    color: var(--jb-fg-secondary);
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    border-radius: var(--jb-r-md);
    padding: 0 8px;
    height: var(--jb-h-control);
    display: inline-flex;
    align-items: center;
}
.bulk-action-bar .bulk-count-label span {
    color: var(--jb-fg);
    font-weight: var(--jb-w-semi);
}
.bulk-action-bar .btn {
    border-radius: var(--jb-r-md);
}
.bulk-action-bar .toolbar-select {
    height: var(--jb-h-control);
    font-size: 13px;
    width: auto;
    flex: 0 1 200px;
}
@media (min-width: 769px) {
    .bulk-action-bar { flex-wrap: nowrap; }
}

.toast {
    position: fixed;
    top: 52px;
    bottom: auto;
    left: auto;
    right: 16px;
    transform: none;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--jb-bg-raised);
    border: 1px solid var(--jb-border-raised);
    border-radius: var(--jb-r-md);
    color: var(--jb-fg);
    box-shadow: var(--jb-shadow-toast);
    font-size: 13px;
    width: clamp(300px, 90vw, 420px);
    overflow: hidden;
}
.card-progress-fill {
    background: var(--jb-accent);
    border-radius: var(--jb-r-sm);
    animation: none;
    transition: width var(--jb-dur-out) ease;
}
.toast.success,
.toast.error,
.toast.warning,
.toast.info,
.toast.celebration {
    border: 1px solid var(--jb-border-raised);
}
.toast.success .title { color: var(--jb-success); }
.toast.error .title { color: var(--jb-error); }
.toast.warning .title { color: var(--jb-warning); }
.toast.info .title { color: var(--jb-info); }
.toast.success .toast-progress-bar { background: var(--jb-success); }
.toast.error .toast-progress-bar { background: var(--jb-error); }
.toast.warning .toast-progress-bar { background: var(--jb-warning); }
.toast.info .toast-progress-bar { background: var(--jb-info); }
@media (max-width: 600px) {
    .toast {
        top: 52px;
        bottom: auto;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }
}
html.is-demo .toast {
    top: calc(var(--demo-banner-h, 40px) + 52px);
}

.modal-info-box {
    background: var(--jb-info-bg);
    border: 1px solid var(--jb-info-border);
    border-radius: var(--jb-r-md);
    padding: var(--jb-sp-3);
}
.modal-info-box p,
.modal-body-text {
    color: var(--jb-fg);
    font-size: 13px;
    line-height: var(--jb-lh-prose);
}

/* The guide is reference, so it is rows of term and thing rather than stacked headings, and fits without scrolling. */
.guide-group + .guide-group {
    margin-top: var(--jb-sp-5);
}
.guide-group-title {
    margin: 0 0 var(--jb-sp-2);
    font-size: var(--jb-t-2);
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-tertiary);
}
.guide-rows {
    display: grid;
    gap: var(--jb-sp-2);
    margin: 0;
}
.guide-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: var(--jb-sp-3);
    align-items: center;
}
.guide-row dt {
    margin: 0;
    font-size: var(--jb-t-2);
    color: var(--jb-fg-tertiary);
}
.guide-row dd {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    margin: 0;
    font-size: var(--jb-t-3);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
/* The sample chip sits on the same line as the sentence explaining it, so the two can be matched without scanning. */
.guide-example {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    margin: 0;
}
.guide-example > * {
    margin: 0;
}
.guide-example .card-progress-bar {
    align-items: center;
    width: 88px;
    gap: 6px;
}

.modal-info-box--warning {
    background: var(--jb-warning-bg);
    border-color: var(--jb-warning-border);
}
.modal-info-box--warning p { color: var(--jb-warning); }
.modal-info-box--error {
    background: var(--jb-error-bg);
    border-color: var(--jb-error-border);
}
.modal-info-box--error .panel-section-title { color: var(--jb-error); }
.modal-info-box p { margin: 0; }
.modal-info-box .panel-section-title { margin-bottom: var(--jb-sp-1); }

.tags-list-section {
    padding: 0;
    margin-bottom: var(--jb-sp-6);
    border-bottom: none;
}
.new-tag-section { padding-top: 0; }
.modal-container .team-note-area {
    padding: 0;
    border-top: none;
    border-bottom: none;
}

/* Every right side drawer wears the same chrome: a 40px header, a 16px content well, and a 12px by 16px action footer. */
.modal-header,
.card-guide-panel-header,
.detail-panel .jb-drawer-head {
    height: var(--jb-panel-head-h);
    min-height: var(--jb-panel-head-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--jb-sp-1);
    margin: 0;
    padding: 0 var(--jb-sp-2) 0 var(--drawer-pad);
    border-bottom: 1px solid var(--jb-border);
}
.modal-footer,
.wizard-footer,
.detail-action-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jb-sp-3);
    padding: var(--jb-sp-3) var(--drawer-pad);
    border-top: 1px solid var(--jb-border);
}
.modal-footer > *,
.wizard-footer > *,
.detail-action-footer > * {
    margin: 0;
}
.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger,
.modal-footer .share-btn,
.wizard-footer .btn,
.detail-action-footer .btn {
    min-height: var(--jb-h-control);
    margin: 0;
}
.wizard-footer-right {
    display: flex;
    gap: var(--jb-sp-3);
    margin-left: auto;
}
.modal-footer-left,
.modal-footer .modal-footer-left,
.detail-action-footer :is(.btn-danger, .modal-footer-left) {
    margin-right: auto;
}
.modal-container .form-group-roadmap {
    margin-top: 0;
    margin-bottom: var(--jb-sp-5);
}
.modal-container .form-group-roadmap:last-child,
.modal-container .wizard-form-grid > .form-group-roadmap,
/* The row already owns the break under it,
so its cells must not carry a second one. */
.modal-container .form-row > .form-group-roadmap {
    margin-bottom: 0;
}
.form-row {
    margin-bottom: var(--jb-sp-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fd [hidden] { display: none !important; }
.fd-loading .fd-body { visibility: hidden; }
.fd-head {
    position: relative;
    flex: none;
    height: 48px;
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--jb-border);
}
.fd-status {
    height: 28px;
    margin-right: auto;
    padding: 0 8px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    font-weight: var(--jb-w-medium);
}
.fd-status svg { color: var(--jb-fg-secondary); }
.fd-status:disabled { border-color: transparent; }
.fd-status:disabled svg { display: none; }
.fd-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
}
#panel-actions-btn svg { stroke-width: 3; }
#panel-action-pin[aria-pressed="true"] { color: var(--jb-warning); }
.fd-readonly .fd-board { display: none; }
.fd-rule {
    width: 1px;
    height: 16px;
    margin: 0 6px;
    background: var(--jb-border);
}
.fd-menu {
    position: absolute;
    top: 42px;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.fd-menu:not(.active) { display: none; }
#panel-status-menu {
    left: 16px;
    width: 176px;
}
#panel-status-menu svg { margin-left: auto; }
#panel-actions-menu {
    right: 42px;
    width: 200px;
}
:is(.fd-status, .fd-icon, .fd-tier, .fd-act) { transition: background-color var(--jb-dur-in) ease-out; }
:is(.fd-status:enabled, .fd-icon, .fd-tier, .fd-act):hover,
:is(.fd-status, .fd-icon)[aria-expanded="true"] { background: var(--jb-bg-hover); }

.fd-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.fd-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.fd-tally {
    width: 56px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fd-vote {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    font-size: 18px;
    font-weight: var(--jb-w-semi);
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}
.fd-vote svg {
    color: var(--jb-fg-secondary);
    stroke-width: 2.5;
}
.fd-title {
    flex: 1;
    min-width: 0;
}
.fd-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: var(--jb-w-semi);
    line-height: 24px;
    overflow-wrap: anywhere;
}
.fd-title p {
    margin: 6px 0 0;
    line-height: 20px;
    color: var(--jb-fg-secondary);
    white-space: pre-wrap;
}
.fd-chips,
.fd-progress {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.fd-chips .fd-when { margin-left: 4px; }
.fd-progress {
    margin-top: 14px;
    gap: 10px;
    font-size: 12px;
    color: var(--jb-fg-secondary);
}
.fd-progress .card-progress-track { max-width: 200px; }
:is(.fd-progress, .fe) .card-progress-fill { height: 100%; }

.fd-label {
    height: 20px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-secondary);
}
.fd-label span {
    color: var(--jb-fg-tertiary);
    font-variant-numeric: tabular-nums;
}
.fd-reply {
    padding: 12px 14px 14px;
    border: 1px solid var(--jb-tab-selected-border);
    border-radius: var(--jb-r-md);
    background: var(--jb-tab-selected-bg);
}
.fd-who {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.fd-who b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--jb-w-medium);
}
.fd-when {
    font-size: 12px;
    color: var(--jb-fg-tertiary);
    font-variant-numeric: tabular-nums;
}
.fd-team {
    width: 20px;
    height: 20px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--jb-r-sm);
    background: var(--jb-accent);
    color: var(--jb-fg-on-accent);
    font-size: 11px;
    font-weight: var(--jb-w-semi);
}
.fd-cmt > .fd-team {
    width: 24px;
    height: 24px;
}
.fd-role {
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--jb-r-sm);
    background: var(--jb-accent);
    color: var(--jb-fg-on-accent);
    font-size: 11px;
    font-weight: var(--jb-w-medium);
}
.fd-say {
    margin: 2px 0 0;
    line-height: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.fd-reply .fd-say { margin-top: 8px; }
.fd-reply .fd-act {
    margin: 0 -6px 0 auto;
    color: var(--jb-link);
}
.fd-compose,
.fd-inline {
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    background: var(--jb-bg-inset);
}
:is(.fd-compose, .fd-inline):focus-within { border-color: var(--jb-accent); }
.fd-compose textarea,
.fd-inline input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font: inherit;
}
.fd-compose textarea {
    display: block;
    width: 100%;
    height: 80px;
    padding: 10px 12px;
    line-height: 20px;
    resize: none;
}
.fd-compose div {
    padding: 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
:is(.fd-compose, .fe footer) .btn-secondary {
    border-color: transparent;
    background: none;
}
.fd-cmt .fd-compose { margin-top: 4px; }

.fd-tiers { margin: 0 -8px; }
.fd-tier {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--jb-r-md);
    text-align: left;
}
.fd-tier > svg {
    color: var(--jb-fg-tertiary);
    stroke-width: 2.25;
    transition: transform var(--jb-dur-in) ease-out;
}
.fd-tier[aria-expanded="true"] > svg { transform: rotate(90deg); }
.fd-tier-name {
    width: 108px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fd-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.fd-stack .avatar-circle {
    margin-left: -5px;
    background: color-mix(in srgb, var(--avatar-color) 24%, var(--jb-bg-island));
    box-shadow: 0 0 0 2px var(--jb-bg-island);
}
.fd-stack .avatar-circle:first-child { margin-left: 0; }
.fd-stack .fd-when { margin-left: 8px; }
.fd-w {
    width: 40px;
    text-align: right;
    font-weight: var(--jb-w-semi);
    font-variant-numeric: tabular-nums;
}
.fd-money {
    width: 72px;
    flex: none;
    text-align: right;
    color: var(--jb-success);
    font-weight: var(--jb-w-semi);
    font-variant-numeric: tabular-nums;
}
.fd-money[data-none] { color: var(--jb-fg-tertiary); }
.fd-people { padding: 0 8px 6px 30px; }
.fd-person {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fd-person > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jb-fg-secondary);
}
.fd-person .fd-money {
    color: var(--jb-fg-tertiary);
    font-weight: var(--jb-w-normal);
}
.fd-people .fd-act { margin: 2px 0 0 22px; }
.fd-empty {
    margin: 0;
    color: var(--jb-fg-tertiary);
}
.fd-tiers .fd-empty { padding: 0 8px; }

.fd-thread {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fd-cmt {
    display: flex;
    gap: 10px;
}
.fd-cmt > div {
    flex: 1;
    min-width: 0;
}
.fd-cmt .fd-cmt { margin-top: 12px; }
.fd-acts {
    margin: 2px 0 0 -6px;
    display: flex;
    gap: 2px;
}
.fd-act {
    height: 24px;
    padding: 0 6px;
    border-radius: var(--jb-r-sm);
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-tertiary);
}
.fd-inline {
    height: 32px;
    margin-top: 12px;
    padding: 0 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.fd-inline input {
    flex: 1;
    height: 30px;
}
.fd-label + .fd-inline { margin: 0 0 20px; }
.fd-inline:not(:focus-within) input:placeholder-shown + .btn-primary { visibility: hidden; }
.fd-inline .btn-primary {
    min-width: 0;
    min-height: 24px;
    height: 24px;
    padding: 0 10px;
    font-weight: var(--jb-w-medium);
}
.fd section > b { font-weight: var(--jb-w-medium); }

.fe h2 {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: var(--jb-w-semi);
}
.fe h3 {
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--jb-border);
    font-size: 12px;
    font-weight: var(--jb-w-semi);
}
.fe-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fe-field > span {
    height: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-secondary);
}
.fe-field b {
    height: 18px;
    margin-left: auto;
    padding: 0 6px 0 4px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
    font-variant-numeric: tabular-nums;
}
.fe-field b:focus-within {
    border-color: transparent;
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.fe-field b input {
    width: 3ch;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    outline: 0;
    color: inherit;
    font: inherit;
    text-align: right;
    appearance: textfield;
}
.fe-field b input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fe-field i {
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    font-size: 11px;
    font-style: normal;
}
.fe-field > .card-progress-track { flex: none; }
.fe-field small {
    font-size: 12px;
    color: var(--jb-fg-tertiary);
}
.fe-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fe textarea { resize: none; }
#wiz-response,
#wiz-note { min-height: 68px; }
#wiz-heading {
    height: 36px;
    font-size: 14px;
    font-weight: var(--jb-w-medium);
}
@media (max-width: 600px) {
    .fe-two { grid-template-columns: 1fr; }
}
.mg .modal-body > p {
    margin: 0;
    line-height: 20px;
    color: var(--jb-fg-secondary);
}
.mg .toolbar-search {
    max-width: none;
    background: var(--jb-bg-inset);
}
.mg-row,
.mg-opt {
    width: 100%;
    padding: 0 12px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: var(--jb-r-md);
}
.mg-row {
    height: 40px;
    background: var(--jb-bg-inset);
    border-color: var(--jb-border);
}
#merge-target-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#merge-target-list > p {
    margin: 8px 0 0;
    color: var(--jb-fg-tertiary);
}
.mg-opt {
    height: 36px;
    transition: background-color var(--jb-dur-in) ease-out, border-color var(--jb-dur-in) ease-out;
}
.mg-opt:hover { background: var(--jb-bg-hover); }
.mg-opt[aria-selected="true"] {
    background: var(--jb-bg-selected);
    border-color: var(--jb-tab-selected-border);
}
.mg b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: var(--jb-w-medium);
}
.mg-opt b { font-weight: var(--jb-w-normal); }
.mg-tk {
    min-width: 32px;
    height: 22px;
    flex: none;
    padding: 0 4px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    font-size: 12px;
    font-weight: var(--jb-w-semi);
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.status-text {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--jb-fg-secondary);
}
.mg-radio {
    width: 14px;
    height: 14px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--jb-border-control);
    border-radius: 7px;
}
[aria-selected="true"] > .mg-radio {
    border-color: var(--jb-accent);
    background: var(--jb-accent);
}
[aria-selected="true"] > .mg-radio::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--jb-fg-on-accent);
}
.mg-res {
    padding: 12px 14px;
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    animation: menu-pop 200ms ease-out;
}
.mg-res > span {
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-secondary);
}
.mg-res dl {
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px 16px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.mg-res dt { color: var(--jb-fg-secondary); }
.mg-res dd {
    margin: 0;
    text-align: right;
    color: var(--jb-fg-tertiary);
}
.mg-res dd[id$="-to"] {
    min-width: 72px;
    color: var(--jb-fg);
    font-weight: var(--jb-w-semi);
}
#merge-mrr-to { color: var(--jb-success); }
.mg-free .mg-cash { display: none; }
.mg-res small,
.mg footer > span {
    font-size: 12px;
    color: var(--jb-fg-tertiary);
}
.mg-res small {
    display: block;
    margin-top: 10px;
}
.mg footer > span { flex: 1; }

.detail-panel .detail-panel-header {
    padding: 0;
    border-bottom: 1px solid var(--jb-border);
}
.detail-panel .detail-panel-header:not(:has(.detail-panel-tabs)) {
    border-bottom: none;
}
.detail-panel .detail-panel-meta {
    padding: var(--jb-sp-3) var(--drawer-pad) 0;
    margin: 0;
    gap: var(--jb-sp-2);
}
#voter-panel-name { display: flex; align-items: center; gap: var(--jb-sp-2); }
#voter-detail-panel .detail-panel-meta > span { display: contents; }
#voter-panel-sub { margin: 0; }
#voter-panel-sub:empty { display: none; }
#voter-detail-panel .wv-row { min-height: 0; padding: var(--jb-sp-1) 0; border-top: 0; }
:is(#voter-detail-panel, #activity-panel) .activity-item { min-height: 28px; margin-inline: calc(-1 * var(--jb-sp-2)); padding: 2px var(--jb-sp-2); column-gap: var(--jb-sp-2); border-radius: var(--jb-r-md); }
:is(#voter-detail-panel, #activity-panel) .activity-item + .activity-item::before { content: none; }
@media (max-width: 768px) {
    :is(#voter-detail-panel, #activity-panel) .activity-item { padding-block: var(--jb-sp-2); }
}
#voter-detail-panel .activity-date-header { margin-inline: calc(-1 * var(--jb-sp-2)); padding: var(--jb-sp-2) var(--jb-sp-2) 0; }
.detail-panel .va-highlight { padding: var(--jb-sp-2) var(--jb-sp-2) var(--jb-sp-2) var(--jb-sp-3); }
.detail-panel .va-highlight-body { flex: 1; flex-direction: row; align-items: center; }
.detail-panel .va-highlight-body > .btn { flex: none; margin: 0 0 0 auto; }
#voter-detail-panel .activity-item-body { flex: 1 1 0; }
#voter-detail-panel :is(.activity-badge, .detail-panel-status-badge) { min-width: 84px; justify-content: center; }
#voter-detail-panel .wizard-form-grid { gap: var(--jb-sp-3); }
#voter-detail-panel .wizard-form-grid > * { margin: 0; }
#voter-detail-panel .form-label { font-size: 12px; color: var(--jb-fg-secondary); }
#voter-detail-panel .form-textarea { min-height: 0; }
.detail-panel .detail-panel-tabs {
    padding: var(--jb-sp-3) var(--drawer-pad);
}
/* The status is a tinted chip in the status colour, the shape the tags already use, so the dot goes. */
.detail-panel-status-badge {
    background: color-mix(in srgb, var(--status-color, var(--jb-fg-tertiary)) 22%, transparent);
    color: var(--status-color, var(--jb-fg-tertiary));
}

.detail-panel-tabs {
    padding: 0;
    gap: 2px;
    background: none;
    border-bottom: none;
}
.detail-panel-tab {
    flex: none;
    height: 28px;
    padding: 0 12px;
    margin-bottom: 0;
    border-bottom: none;
    border-radius: var(--jb-r-md);
    background: transparent;
    color: var(--jb-fg-secondary);
    font-size: 13px;
    font-weight: var(--jb-w-normal);
    letter-spacing: normal;
    transition: background-color var(--jb-dur-in) ease-out, color var(--jb-dur-in) ease-out;
}
.detail-panel-tab:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.detail-panel-tab.active {
    font-weight: var(--jb-w-normal);
    background: var(--jb-tab-selected-bg);
    color: var(--jb-fg);
    box-shadow: inset 0 0 0 1px var(--jb-tab-selected-border);
    border-bottom-color: transparent;
}
.detail-panel-tabcontent.active {
    animation: none;
}
.tab-count {
    background: none;
    padding: 0;
    margin-left: 4px;
    color: var(--jb-fg-secondary);
    font-weight: var(--jb-w-normal);
    border-radius: 0;
}

/* Overview is a JetBrains inspector: titled separators between groups, and a two column grid keeping each label beside its value. */
.detail-panel .panel-description {
    font-size: 13px;
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg);
    margin: 0 0 var(--jb-sp-5);
    white-space: pre-wrap;
}
.detail-panel .panel-section { margin: 0 0 var(--jb-sp-5); }
.detail-panel .panel-section:last-child { margin-bottom: 0; }
.detail-panel .panel-section.is-hidden { margin-bottom: 0; }
.panel-section-title {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    min-height: var(--jb-h-control);
    margin: 0 0 var(--jb-sp-2);
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-tertiary);
}
.panel-section-title::after {
    content: "";
    order: 2;
    flex: 1;
    height: 1px;
    background: var(--jb-border);
}
.panel-section-title > :is(.btn, .voter-profile-status) { order: 3; }
.panel-section-title--plain { min-height: 0; justify-content: space-between; }
.panel-section-title--plain::after { content: none; }
/* Nothing to show is a sentence, not a faded italic. */
.panel-empty {
    margin: 0;
    font-size: 13px;
    color: var(--jb-fg-tertiary);
}

.panel-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    column-gap: var(--jb-sp-5);
    align-items: center;
    margin: 0;
}
.panel-kv-row { display: contents; }
.panel-kv-row.is-hidden { display: none; }
.panel-kv-row dt {
    display: flex;
    align-items: center;
    min-height: var(--jb-row);
    margin: 0;
    font-size: 13px;
    color: var(--jb-fg-secondary);
}
.panel-kv-row dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--jb-row);
    margin: 0;
    font-size: 13px;
    color: var(--jb-fg);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
/* Prioritization and Engagement stand side by side, each laying its pairs two to a line, which is the size the content wants. */
.panel-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--jb-sp-5) var(--jb-sp-6);
    align-items: start;
    margin: 0 0 var(--jb-sp-5);
}
.detail-panel .panel-cols > .panel-section,
.detail-panel .panel-section > .panel-cols:last-child { margin-bottom: 0; }
/* One metric per line with the badge pinned right, so every value lines up under the one above it. */
.panel-kv--split {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--jb-sp-4);
}
/* The count has no badge, so it borrows the badge's six pixels of right inset to stay in the column. */
.panel-kv .count-dot {
    padding-right: 6px;
}
@media (max-width: 420px) {
    .panel-cols { grid-template-columns: minmax(0, 1fr); }
}

/* The value wears the badge the board card gives it, neutral for votes and comments, which carry no ranking meaning. */
.card-score-badge.is-unset {
    background: transparent;
    color: var(--jb-fg-disabled);
}

.panel-progress { margin-bottom: var(--jb-sp-3); }
.panel-progress.is-hidden { margin-bottom: 0; }
.panel-progress-value {
    color: var(--jb-fg);
    font-variant-numeric: tabular-nums;
}
.panel-progress-fill {
    height: 100%;
    background: var(--jb-accent);
    border-radius: var(--jb-r-sm);
}
/* One hue for every tier, since the row label already names it and a colour per tier would be decoration. */
.tier-chart-total {
    margin-top: var(--jb-sp-2);
    padding-top: var(--jb-sp-2);
    border-top: 1px solid var(--jb-border);
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg);
}

/* Comments and Voters get a tab each, with their own search and filter, rather than a tally stacked under a conversation. */
.voter-tier-badge {
    background: var(--jb-bg-inset);
    color: var(--jb-fg-secondary);
}
.voter-mrr-badge {
    background: color-mix(in srgb, var(--jb-syntax-string) 22%, transparent);
    color: var(--jb-syntax-string);
}

/* Every commenter and voter takes a colour from the editor palette by name, so a thread reads as a room of people. */
.avatar-circle {
    font-weight: var(--jb-w-medium);
    background: color-mix(in srgb, var(--avatar-color, var(--jb-fg-secondary)) 24%, transparent);
    color: var(--avatar-color, var(--jb-fg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar-color, var(--jb-fg-secondary)) 45%, transparent);
}
/* Written since the owner was last here, marked by a gutter dot that is reserved on every comment so nothing shifts. */

[data-theme="light"] .sidebar { box-shadow: none; }
[data-theme="light"] .roadmap-bottom-bar {
    background: var(--jb-bg-raised);
    border-color: var(--jb-border);
}
[data-theme="light"] .roadmap-bottom-bar.jb-statusbar {
    background: var(--jb-bg-canvas);
    border-color: transparent;
    border-top-color: var(--jb-border-island);
}
[data-theme="light"] .roadmap-nav-btn {
    background: transparent;
    border-color: transparent;
}
[data-theme="light"] .roadmap-bottom-divider { background: var(--jb-border); }
[data-theme="light"] .toolbar-search {
    background: var(--jb-bg-island);
    border-color: var(--jb-border-control);
}
[data-theme="light"] .toolbar-search-kbd {
    background: var(--jb-bg-inset);
    border-color: var(--jb-border);
}
[data-theme="light"] .toolbar-filter-toggle {
    background: transparent;
    border: none;
    box-shadow: none;
}
[data-theme="light"] .bulk-action-bar {
    background: var(--jb-bg-raised);
    border: 1px solid var(--jb-border-raised);
    box-shadow: var(--jb-shadow-popup);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .detail-panel,
[data-theme="light"] .card-guide-panel,
[data-theme="light"] .modal-container,
[data-theme="light"] .modal-overlay .modal-content {
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-dialog);
}
@media (max-width: 768px) {
    [data-theme="light"] .detail-panel,
    [data-theme="light"] .card-guide-panel,
    [data-theme="light"] .modal-container,
    [data-theme="light"] .modal-overlay .modal-content {
        border: none;
        border-radius: 0;
    }
}

[data-theme="light"] .detail-panel-tabs { border-bottom: none; }
[data-theme="light"] .tab-count { background: none; }
/* The status hue is a fixed board hex rather than a theme token, so it is darkened on a white surface. */
[data-theme="light"] .detail-panel-status-badge {
    background: color-mix(in srgb, var(--status-color, var(--jb-fg-tertiary)) 15%, transparent);
    color: color-mix(in srgb, var(--status-color, var(--jb-fg-tertiary)) 62%, var(--jb-fg));
}

.modal-header h2,
.modal-title,
.detail-panel-heading,
.card-guide-panel-header h2 {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: var(--jb-w-medium);
    letter-spacing: normal;
    line-height: 1.2;
    color: var(--jb-fg);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* JetBrains form labels match the value's size and colour and sit left aligned above it, rather than shrunk and greyed. */
.modal-container .form-label,
.modal-container label {
    font-size: 13px;
    font-weight: var(--jb-w-normal);
    color: var(--jb-fg);
    margin-bottom: 6px;
    letter-spacing: normal;
    text-transform: none;
}
.modal-container .required { color: var(--jb-error); }
.modal-container .form-textarea {
    min-height: 88px;
    padding: 6px 9px;
    line-height: var(--jb-lh-prose);
}
.tab-count { font-size: 11px; }
.voter-type-badge { font-size: 11px; }
.bulk-count-label { font-size: 13px; }
/* The same titled separator the detail panel uses, so a group header reads alike in either drawer. */
.tags-section-title {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    font-size: 12px;
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-tertiary);
    text-transform: none;
    letter-spacing: normal;
    padding: 0;
    border-top: none;
    margin: var(--jb-sp-6) 0 var(--jb-sp-3);
}
.tags-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--jb-border);
}
.team-note-badge { font-size: 11px; text-transform: none; letter-spacing: normal; }
@media (max-width: 600px) {
    .wizard-footer .btn-primary,
    .wizard-footer .btn-secondary { font-size: 13px; }
}
[data-theme="light"] .detail-panel-close:hover { background: var(--jb-bg-hover); }
[data-theme="light"] .tab-count { background: var(--jb-bg-inset); }

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

.top-bar-left:has(.board-tabs) h1 { display: none; }
.filter-popover-label,
.panel-section-title,
.detail-panel-status-badge {
    text-transform: none;
    letter-spacing: normal;
}
/* Centred on the hidden dot button, so the card keeps its layout in bulk mode. */
.bulk-checkbox {
    position: absolute;
    top: 10px;
    right: 13px;
    margin: 0;
    z-index: 3;
    border-radius: var(--jb-r-sm);
}
.lane-stack .bulk-checkbox {
    top: 8px;
    right: 7px;
}
.bulk-checkbox:checked,
.bulk-checkbox:hover {
    box-shadow: none;
}
.feature-card-roadmap.bulk-mode-card {
    position: relative;
}
.feature-card-roadmap.bulk-selected {
    background: var(--jb-bg-selected-muted) !important;
    border-color: var(--jb-accent) !important;
    box-shadow: none !important;
}
.feature-card-roadmap.bulk-selected:hover {
    background: var(--jb-bg-selected) !important;
}
/* A re-ranked card travels to its new position rather than snapping; the movement is the signal, so the surface is untouched. */
.feature-card-roadmap.card-reranked {
    transition: transform var(--jb-dur-out) var(--jb-ease-out);
}

.drop-indicator {
    background: var(--jb-accent);
    border-radius: 0;
    box-shadow: none;
    animation: none;
}
.bulk-mode-card .card-overflow-toggle {
    visibility: hidden;
}
.bulk-count-label {
    background: var(--jb-bg-inset);
    color: var(--jb-fg-secondary);
}
[data-theme="light"] .bulk-count-label,
[data-theme="light"] .card-progress-track,
[data-theme="light"] .voter-tier-badge {
    box-shadow: inset 0 0 0 1px var(--jb-border);
}

@media (min-width: 769px) {
    .toolbar-filter-popover { right: 8px; }
}

.tags-section-title { margin: 0 0 var(--jb-sp-3); }
.tag-item { height: 32px; padding: 8px 12px; }
.tag-delete-btn {
    border-radius: var(--jb-r-lg);
}
.tag-delete-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.tag-delete-btn .action-icon {
    width: 16px;
    height: 16px;
}

.voting-tier-accent-bar[data-accent="blue"] { background: var(--jb-chart-1); }
.wv-priority-bar[data-rank="1"] { background: linear-gradient(90deg, var(--jb-accent), var(--jb-chart-1)); }

/* The colour is restated here because the legacy sheet pins the light theme toast to a literal at equal specificity. */
[data-theme="light"] .toast {
    border-color: var(--jb-border-raised);
    color: var(--jb-fg);
}
[data-theme="light"] .project-switcher-trigger {
    background: transparent;
    border-color: transparent;
}

/* Mobile shell (<=768). Overrides inner-index 5834. */
@media (max-width: 768px) {
    /* The top padding is the fixed top bar's own height, measured by common.js, because the bar wraps to one, two or three rows. */
    .main-content { padding: calc(var(--phone-top-bar-h, 40px) + var(--jb-sp-2)) 8px 44px; }

    /* Anything the page scrolls to itself has to clear the same two strips, or a row lands under fixed chrome. */
    html { scroll-padding-top: calc(var(--phone-top-bar-h, 40px) + 48px); }

    .top-bar-right,
    .top-bar-tools {
        flex: 1 1 auto;
        min-width: 0;
    }
    .top-bar-tools {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* A left cluster with nothing visible still takes a share of the row, so it leaves the row to the search. */
    .top-bar-left:empty,
    .top-bar-left:has(> .top-bar-page-name:only-child) { display: none; }

    /* Voters loses its tab strip on a phone, since the list is the page; ?tab=settings still opens the settings surface. */
    .top-bar-left:has(> .page-tabs > .page-tab[data-tab="voters"].active) { display: none; }
    .top-bar-tools .toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
    /* The popover is anchored to the full bleed top bar rather than the 30px button, with the page gutter written out. */
    .toolbar-filters { position: static; }
    .toolbar-filter-popover {
        right: var(--jb-sp-2);
        left: auto;
        min-width: 0;
        width: min(280px, calc(100vw - 32px));
    }

    /* Fixed rather than sticky, and under the mobile header: this page offers more than one scrolling ancestor a sticky bar could pick. */
    .top-bar {
        position: fixed;
        top: 40px;
        left: 0;
        right: 0;
        height: auto;
        min-height: 40px;
        padding: 0 8px var(--jb-sp-2);
        gap: 8px;
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    html.is-demo .top-bar {
        top: calc(var(--demo-banner-h, 36px) + 40px);
    }
    .top-bar h1 {
        font-size: 13px;
        font-weight: 600;
    }

    /* The demo strip keeps the sentence and the exit button on a phone, and drops the tour link and the disclaimer. */
    html.is-demo { --demo-strip-h: 36px; }
    .demo-banner {
        padding: 0 var(--jb-sp-2);
    }
    .demo-banner-content {
        justify-content: space-between;
        gap: var(--jb-sp-2);
        max-width: none;
    }
    .demo-banner-text-group {
        min-width: 0;
        text-align: left;
    }
    .demo-banner-label { display: inline; }
    .demo-banner-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    /* The tinted bar and the button already say this is not the product, so the icon in front goes. */
    .demo-banner-text > svg,
    .demo-banner-subtext { display: none; }
    .demo-banner-cta {
        height: 24px;
        padding: 0 var(--jb-sp-2);
        font-size: 11px;
    }

    .board-tab, .page-tab {
        height: var(--jb-tab-pill-h);
        padding: 0 12px;
        font-size: 13px;
    }
    .board-tab-add {
        width: 28px;
        height: 28px;
        padding: 0;
    }
    .board-tab-upgrade {
        height: var(--jb-tab-pill-h);
        padding: 0 12px;
        font-size: 12px;
    }

    .toolbar-filter-toggle,
    .bulk-select-btn {
        width: 30px;
        height: 30px;
        padding: 0;
    }
    .toolbar-search {
        height: var(--jb-h-control);
        min-height: var(--jb-h-control);
    }

    /* No hairline between the header and the top bar: they are one slab of chrome, and the pair's bottom edge is what matters. */
    .mobile-header {
        height: 40px;
        padding: 0 8px;
        background: var(--jb-bg-toolbar);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
    }
    body { padding-top: 40px; }
    html.is-demo body { padding-top: calc(var(--demo-banner-h, 34px) + 40px); }
    /* The wordmark says what the mark says, and on a 360px header that is 20px spent twice. */
    .mobile-header .logo-icon { display: none; }
    .mobile-header .logo-text {
        font-size: 13px;
        font-weight: var(--jb-w-medium);
        color: var(--jb-fg);
    }
    .mobile-header .hamburger-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        display: grid;
        place-items: center;
        border-radius: var(--jb-r-md);
        color: var(--jb-fg);
    }
    .mobile-header .hamburger-btn:hover { background: var(--jb-bg-hover); }
    .mobile-header .hamburger-btn:active { background: var(--jb-bg-pressed); }

    .sidebar {
        width: 260px;
        background: var(--jb-bg-canvas);
        border-right: 1px solid var(--jb-border);
        box-shadow: var(--jb-shadow-dialog);
    }
    [data-sidebar="compact"] .sidebar { width: 260px; }
    /* The sidebar is a full width drawer here, so every rule squaring an item for the 56px rail is undone and rows take 36px. */
    .sidebar .nav-item,
    [data-sidebar="compact"] .nav-item,
    [data-sidebar="compact"] .sidebar-footer-item,
    .sidebar-footer .sidebar-user {
        height: 36px;
        width: auto;
        padding: 0 12px;
        margin: 0 8px;
        gap: 8px;
        border-radius: var(--jb-r-md);
        font-size: 13px;
        justify-content: flex-start;
        align-self: stretch;
    }
    [data-sidebar="compact"] .sidebar-user { justify-content: flex-start; }
    [data-sidebar="compact"] .nav-section-label {
        height: auto;
        margin: 0 20px 4px;
        border-bottom: none;
        overflow: visible;
    }
    /* The drawer runs the full height of the phone, so the safe area inset lifts logout above the home indicator. */
    .sidebar-footer {
        gap: var(--jb-sp-1);
        padding: var(--jb-sp-2) 0 calc(var(--jb-sp-2) + env(safe-area-inset-bottom));
    }
    .top-bar > .sidebar-footer { display: none; }

    .roadmap-container {
        gap: var(--jb-island-gap);
        margin-top: 8px;
    }
    .lane { padding: 6px; }
    .roadmap-bottom-bar.jb-statusbar {
        padding: 0 8px;
        gap: 8px;
        justify-content: center;
    }
    .roadmap-nav-btn {
        width: 24px;
        height: 24px;
    }
}

/* Settings dialog: a centred window, the page list flush on the canvas and the page itself on the island. */
.jb-settings-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: var(--jb-z-panel);
    width: min(1080px, 100% - 48px);
    height: min(740px, 100% - 48px);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-dialog);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--jb-dur-out) var(--jb-ease-out),
                visibility var(--jb-dur-out) var(--jb-ease-out);
}
.jb-settings-dialog.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-duration: var(--jb-dur-in);
    transition-timing-function: var(--jb-ease-in);
}
/* The hidden attribute carries only UA weight and loses to any display set here. */
.jb-settings-dialog [hidden], #import-modal [hidden] { display: none !important; }
.jb-settings-dialog kbd {
    padding: 0 var(--jb-sp-1);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    font-family: inherit;
    font-size: var(--jb-t-1);
    color: var(--jb-fg-secondary);
}

.jbs-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--jb-bg-canvas);
    border-right: 1px solid var(--jb-border);
}
.jbs-nav-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jb-sp-3);
    padding: var(--jb-sp-4) var(--jb-sp-3) var(--jb-sp-2);
}
.jbs-title {
    flex: 1;
    margin: 0 0 0 var(--jb-sp-2);
    font-size: var(--jb-t-5);
    font-weight: var(--jb-w-semi);
    line-height: 24px;
}
.jbs-search {
    flex: 1 0 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
}
.jbs-search .toolbar-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--jb-fg);
}
.jbs-pages,
.jbs-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--jb-sp-3) var(--jb-sp-3);
}
.jbs-pages > p {
    margin: var(--jb-sp-4) 0 var(--jb-sp-1) var(--jb-sp-2);
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jbs-page,
.jbs-result {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    width: 100%;
    min-height: var(--jb-h-control);
    padding: 0 var(--jb-sp-2);
    border: none;
    border-radius: var(--jb-r-md);
    background: none;
    font: inherit;
    font-size: var(--jb-t-3);
    color: var(--jb-fg);
    text-align: left;
    cursor: default;
}
.jbs-page svg { flex: none; color: var(--jb-fg-icon); }
.jbs-page > span:first-of-type,
.jbs-result > span:first-child { flex: 1; min-width: 0; }
.jbs-page:hover,
.jbs-result:hover { background: var(--jb-bg-hover); }
.jbs-page[aria-current="page"],
.jbs-result.on {
    background: var(--jb-bg-selected);
    box-shadow: inset 0 0 0 1px var(--jb-tab-selected-border);
}
.jbs-page:focus-visible,
.jbs-result:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.jbs-page.jbs-dirty::after,
.jbs-dot {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--jb-r-sm);
    background: var(--jb-accent);
}
.jbs-count {
    padding: 0 var(--jb-sp-1);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-hover);
    font-size: var(--jb-t-1);
    line-height: 18px;
    color: var(--jb-fg-secondary);
}
.jbs-where {
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jbs-empty {
    margin: var(--jb-sp-3) var(--jb-sp-2) 0;
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.jbs-nav-foot {
    display: flex;
    flex-direction: column;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-3) var(--jb-sp-4);
    border-top: 1px solid var(--jb-border);
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jbs-nav-foot a {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    color: inherit;
    text-decoration: none;
}
.jbs-nav-foot a:hover { color: var(--jb-fg); }

.jbs-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
}
.jbs-head {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-4) var(--jb-sp-4) var(--jb-sp-4) var(--jb-sp-6);
    border-bottom: 1px solid var(--jb-border);
}
.jbs-head-text { flex: 1; min-width: 0; }
.jbs-head h3 {
    margin: 0;
    font-size: var(--jb-t-5);
    font-weight: var(--jb-w-semi);
    line-height: 24px;
}
.jbs-head p {
    margin: 0;
    font-size: var(--jb-t-2);
    line-height: 18px;
    color: var(--jb-fg-secondary);
}
.jbs-icon-btn,
.jb-settings-dialog .field-reset-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--jb-h-control);
    height: var(--jb-h-control);
    padding: 0;
    border: none;
    border-radius: var(--jb-r-md);
    background: none;
    color: var(--jb-fg-icon);
    opacity: 1;
    cursor: default;
    transition: background-color var(--jb-dur-in) var(--jb-ease-in);
}
.jbs-icon-btn:hover,
.jb-settings-dialog .field-reset-btn:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.jbs-icon-btn:active,
.jb-settings-dialog .field-reset-btn:active { background: var(--jb-bg-pressed); }
.jb-settings-dialog .field-reset-btn.resetting svg { animation: none; }
.jbs-mobile { display: none; }

.jbs-content-body {
    min-height: 0;
    padding: var(--jb-sp-5) var(--jb-sp-6) var(--jb-sp-7);
    overflow-y: auto;
    overflow-x: hidden;
    /* Reserved on every page, or the right edge every control aligns to moves. */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}
.jbs-content-body:focus-visible { outline: none; }
.jb-settings-dialog .settings-fragment-root { max-width: 680px; }
.jb-settings-dialog .jbs-wide .settings-fragment-root { max-width: 1040px; }
.jbs-gate,
.jbs-load-error {
    margin: 0;
    font-size: var(--jb-t-3);
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg-secondary);
}
.jbs-load-error { color: var(--jb-error); }

.jbs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-3) var(--jb-sp-4) var(--jb-sp-3) var(--jb-sp-6);
    border-top: 1px solid var(--jb-border);
    font-size: var(--jb-t-3);
}
.jbs-bar-text { flex: 1 1 160px; min-width: 0; }
.jbs-bar > svg,
.jbs-dot,
.jbs-quiet { display: none; }
.jbs-quiet {
    background: none;
    border-color: transparent;
}
.jbs-bar[data-state="clean"] { color: var(--jb-fg-secondary); }
.jbs-bar[data-state="clean"] .jbs-bar-ok {
    display: block;
    color: var(--jb-success);
}
.jbs-bar[data-state="clean"] .btn-secondary { display: none; }
.jbs-bar[data-state="dirty"] .jbs-dot,
.jbs-bar[data-state="saving"] .jbs-dot { display: block; }
.jbs-bar[data-state="guard"] { background: var(--jb-warning-bg); }
.jbs-bar[data-state="guard"] .jbs-bar-warn {
    display: block;
    color: var(--jb-warning);
}
.jbs-bar[data-state="guard"] .jbs-quiet { display: inline-flex; }
.jbs-bar .btn-primary kbd {
    background: none;
    border-color: var(--jb-alpha-w-30);
    color: inherit;
}
.jbs-bar .btn-primary:disabled kbd { border-color: var(--jb-border); }

/* A confirmation raised from inside the dialog sits one step above the panel layer and carries its own wash. */
.jbs-confirm {
    position: fixed;
    inset: 0;
    z-index: calc(var(--jb-z-panel) + 2);
    display: grid;
    place-items: center;
    padding: var(--jb-sp-4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--jb-dur-out) var(--jb-ease-out),
                visibility var(--jb-dur-out) var(--jb-ease-out);
}
.jbs-confirm::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jb-backdrop-tint);
    backdrop-filter: blur(var(--jb-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--jb-backdrop-blur));
}
.jbs-confirm.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-duration: var(--jb-dur-in);
    transition-timing-function: var(--jb-ease-in);
}
.jbs-confirm-box {
    position: relative;
    width: min(400px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--jb-bg-dialog);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-dialog);
    overflow: hidden;
}
.jbs-confirm-body {
    padding: var(--jb-sp-4) var(--jb-sp-5);
    font-size: var(--jb-t-3);
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg);
}
.jbs-confirm-body p { margin: 0; }
/* The cancel survey is the one confirmation with a form in it, so it takes the drawer's width rather than the sentence's. */
.jbs-confirm-box--wide { width: min(560px, 100%); }
.jbs-confirm-body .cancel-why, .jbs-confirm-body .app-form-group { margin-top: var(--jb-sp-4); }
.jbs-confirm .cancel-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--jb-sp-4);
    margin-top: var(--jb-sp-2);
    padding: 0;
    background: none;
    border: none;
}
.jbs-confirm .cancel-reasons input {
    appearance: none;
    /* 18 is the shipping checkbox geometry, and the box sits outside the dialog that declares --jbs-check. */
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    border: 1px solid var(--jb-border-control);
    border-radius: 50%;
    background: var(--jb-bg-inset);
}
.jbs-confirm .cancel-reasons label { font-weight: var(--jb-w-normal); }
.jbs-confirm .cancel-reasons input:hover { border-color: var(--jb-border-raised); }
.jbs-confirm .cancel-reasons input:checked { border: 4px solid var(--jb-accent); }
.jbs-confirm .cancel-reasons input:focus-visible { outline: 2px solid var(--jb-focus); outline-offset: -1px; }
.jbs-confirm-body .form-textarea { width: 100%; min-height: 0; margin-top: var(--jb-sp-1); }
@media (max-width: 600px) {
    .jbs-confirm .cancel-reasons { grid-template-columns: 1fr; }
}

.jb-settings-dialog .app-section {
    margin: 0 0 var(--jb-sp-6);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.jbs-sec-h {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    margin: 0 0 var(--jb-sp-2);
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-semi);
    line-height: var(--jb-lh-tight);
    color: var(--jb-fg);
}
.jbs-sec-h:not(:first-child) { margin-top: var(--jb-sp-6); }
.jbs-sec-p {
    margin: 0 0 var(--jb-sp-3);
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.jbs-sec-p a { color: var(--jb-link); }

.jbs-group {
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
}
.jbs-group > * + *,
.jbs-group details > * + * { border-top: 1px solid var(--jb-border); }
.jbs-danger {
    border-color: var(--jb-error-border);
    overflow: hidden;
}
.jbs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jb-sp-4);
    padding: var(--jb-sp-3) var(--jb-sp-4);
}
.jbs-txt,
.jbs-row > .jbs-lbl {
    flex: 1 1 200px;
    min-width: 0;
}
.jbs-txt {
    display: flex;
    flex-direction: column;
    gap: var(--jb-nudge);
}
.jbs-stack {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: var(--jb-sp-2);
}
.jbs-row.jbs-stack > * { flex: none; }
.jbs-lbl {
    margin: 0;
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-medium);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg);
}
.jbs-desc {
    font-size: var(--jb-t-2);
    line-height: 18px;
    color: var(--jb-fg-secondary);
}
.jbs-sub {
    padding-left: var(--jb-sp-6);
    background: var(--jb-bg-inset);
}
.jbs-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jb-sp-2);
}
.jbs-line > .app-text-input:not(.jbs-hex) { flex: 1 1 200px; min-width: 0; }
.jbs-w { width: 300px; max-width: 50%; }
.jbs-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--jb-sp-2);
}
.jbs-sure { background: var(--jb-error-bg); }
.jbs-sure .app-text-input { max-width: 240px; }
.jbs-actions { margin-top: var(--jb-sp-5); }
.jbs-flash { animation: jbs-flash 1.8s var(--jb-ease-out); }
@keyframes jbs-flash { from { background: var(--jb-bg-selected); } }

.jb-settings-dialog summary {
    list-style: none;
    cursor: default;
}
.jb-settings-dialog summary::-webkit-details-marker { display: none; }
.jb-settings-dialog details[open] > summary > .share-btn { display: none; }
.jbs-adv { margin-top: var(--jb-sp-5); }
.jbs-adv summary {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-1);
    width: fit-content;
}
.jbs-adv summary::before {
    content: "";
    width: var(--jb-icon);
    height: var(--jb-icon);
    background: var(--jb-fg-icon);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jbs-adv[open] summary::before { transform: rotate(90deg); }
.jbs-adv .jbs-sec-h:not(:first-child) { margin-top: var(--jb-sp-4); }
.jbs-adv > p { margin-top: var(--jb-sp-2); }

.jb-settings-dialog .app-text-input,
.jb-settings-dialog .settings-textarea {
    background: var(--jb-bg-inset);
    border-color: var(--jb-border-control);
    color: var(--jb-fg);
    font-size: var(--jb-t-3);
}
.jb-settings-dialog .settings-textarea {
    min-height: 72px;
    padding: 6px 9px;
    line-height: var(--jb-lh-prose);
}
.jb-settings-dialog .toolbar-select {
    width: auto;
    max-width: 100%;
    padding: 0 var(--jb-sp-6) 0 9px;
    background-size: var(--jb-icon);
    background-position: right var(--jb-sp-2) center;
    color: var(--jb-fg);
    cursor: default;
}
.jb-settings-dialog .settings-textarea:hover { border-color: var(--jb-border-raised); }
.jb-settings-dialog .settings-textarea:focus,
.jb-settings-dialog .toolbar-select:focus {
    border-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.jbs-hex {
    width: 112px;
    font-family: var(--jb-font-mono);
}
.jb-settings-dialog input[type="color"] {
    width: var(--jb-h-control);
    height: var(--jb-h-control);
    padding: 2px;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-md);
    background: var(--jb-bg-inset);
    cursor: default;
}
.jb-settings-dialog input[type="range"] {
    width: 160px;
    padding: 0;
    border: none;
    accent-color: var(--jb-accent);
}

.jbs-switch {
    appearance: none;
    position: relative;
    flex: none;
    width: 32px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
    cursor: default;
}
.jbs-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: calc(var(--jb-r-sm) - 2px);
    background: var(--jb-fg-secondary);
}
.jbs-switch:hover { border-color: var(--jb-border-raised); }
.jbs-switch:checked {
    background: var(--jb-accent);
    border-color: var(--jb-accent);
}
.jbs-switch:checked::after {
    left: 16px;
    background: var(--jb-fg-on-accent);
}
.jbs-switch:focus-visible,
.jbs-chip:has(:focus-visible),
.jbs-swatch:focus-visible,
.jbs-preset:focus-visible,
.jbs-seg button:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}

.jbs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jb-sp-2);
}
.jbs-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--jb-sp-2);
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    font-size: var(--jb-t-2);
    color: var(--jb-fg);
    cursor: default;
    user-select: none;
}
.jbs-chip:hover { background: var(--jb-bg-hover); }
.jbs-chip:has(:checked) {
    background: var(--jb-bg-selected);
    border-color: var(--jb-tab-selected-border);
}
.jbs-chip input {
    appearance: none;
    width: 0;
    height: 12px;
    margin: 0;
    padding: 0;
    border: none;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.jbs-chip input:checked {
    width: 12px;
    margin-right: var(--jb-sp-1);
}

.jbs-swatch {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-sm);
    cursor: default;
}
.jbs-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--jb-bg-island), 0 0 0 3px var(--jb-fg); }

.jbs-theme {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--jb-sp-6);
    align-items: start;
}
.jbs-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--jb-sp-2);
}
.jbs-preset {
    display: flex;
    flex-direction: column;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-2);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    background: none;
    font: inherit;
    font-size: var(--jb-t-2);
    color: var(--jb-fg);
    text-align: left;
    cursor: default;
}
.jbs-preset:hover { background: var(--jb-bg-hover); }
.jbs-preset[aria-pressed="true"] {
    border-color: var(--jb-accent);
    box-shadow: inset 0 0 0 1px var(--jb-accent);
}
.jbs-preset span {
    display: grid;
    height: 52px;
    padding: var(--jb-sp-2);
    border-radius: var(--jb-r-sm);
}
.jbs-preset span::before {
    content: "";
    border: 1px solid var(--p-border);
    border-radius: var(--jb-r-sm);
    background:
        linear-gradient(var(--p-accent), var(--p-accent)) var(--jb-sp-2) var(--jb-sp-2) / 24px 6px no-repeat,
        linear-gradient(var(--p-text), var(--p-text)) var(--jb-sp-2) 20px / 50% 4px no-repeat,
        var(--p-card);
}
.jbs-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--jb-sp-3);
}
.jbs-preview > .jbs-line { justify-content: space-between; }
.jbs-preview .jbs-sec-h { margin: 0; }
.jbs-preview[data-mode="dark"] .preview-container[data-mode="light"],
.jbs-preview[data-mode="light"] .preview-container[data-mode="dark"] { display: none; }
.jbs-seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--jb-r-md);
    background: var(--jb-bg-inset);
}
.jbs-seg button {
    height: 22px;
    padding: 0 var(--jb-sp-2);
    border: none;
    border-radius: calc(var(--jb-r-md) - 2px);
    background: none;
    font: inherit;
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
    cursor: default;
}
.jbs-seg button:hover { color: var(--jb-fg); }
.jbs-seg [aria-pressed="true"],
.jbs-seg [aria-pressed="true"]:hover {
    background: var(--jb-accent);
    color: var(--jb-fg-on-accent);
}
/* The preview models the customer's public card, so it keeps that card's type but not its hover lift. */
.jb-settings-dialog .preview-card,
.jb-settings-dialog .preview-card:hover {
    transition: none;
    transform: none;
    box-shadow: none;
}

.jbs-dns {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--jb-sp-3);
    padding: var(--jb-sp-2) var(--jb-sp-3);
    border-radius: var(--jb-r-md);
    background: var(--jb-bg-inset);
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jbs-dns code,
.jbs-address {
    font-family: var(--jb-font-mono);
    font-size: var(--jb-t-2);
    color: var(--jb-fg);
    overflow-wrap: anywhere;
}
.jbs-address {
    color: var(--jb-link);
    text-decoration: none;
}
.jbs-address:hover { text-decoration: underline; }

.jb-settings-dialog .app-section .share-btn-primary {
    background: var(--jb-bg-raised);
    border-color: var(--jb-border-control);
    color: var(--jb-fg);
}
.jb-settings-dialog .share-btn.saving::after { display: none; }
.jb-settings-dialog a.share-btn,
.jb-settings-dialog .share-btn:disabled { cursor: default; }
.jb-settings-dialog .copy-link-btn {
    width: var(--jb-h-control);
    min-width: var(--jb-h-control);
    padding: 0;
}
.jb-settings-dialog .copy-link-btn.copied {
    border-color: var(--jb-success);
    color: var(--jb-success);
}
.jb-settings-dialog .app-text-input.delete-input-valid,
.app-text-input.delete-input-valid {
    border-color: var(--jb-error);
    box-shadow: none;
}

.app-section-description {
    margin: var(--jb-sp-2) 0 0;
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.app-form-group label {
    margin-bottom: 0;
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-normal);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg);
}
.help-text {
    margin: var(--jb-sp-2) 0 0;
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
    opacity: 1;
}
.app-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: var(--jb-sp-3);
    margin-top: var(--jb-sp-1);
}
.app-toggle-row .help-text { margin: 0; }
.app-field-row { display: flex; gap: var(--jb-sp-2); }
.app-field-row .form-input { flex: 1; }
.field-error {
    margin: var(--jb-sp-2) 0 0;
    font-size: var(--jb-t-2);
    color: var(--jb-error);
}
.jbs-map {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 16px minmax(0, 1fr) 48px 56px;
    gap: var(--jb-sp-2) var(--jb-sp-3);
    align-items: center;
    font-size: var(--jb-t-3);
    color: var(--jb-fg);
}
.jbs-map--cols { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) minmax(0, 1.2fr); }
.jbs-map .h { font-size: var(--jb-t-2); color: var(--jb-fg-secondary); }
.jbs-map .n { text-align: right; font-variant-numeric: tabular-nums; }
.jbs-map .t { padding-top: var(--jb-sp-2); border-top: 1px solid var(--jb-border); font-weight: var(--jb-w-medium); }
.jbs-map svg { color: var(--jb-fg-tertiary); }
.jbs-map select { width: 100%; min-width: 0; }
.jbs-ok { color: var(--jb-success); }
.jbs-warn { color: var(--jb-warning); }
.jbs-drop {
    display: grid;
    place-items: center;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-6) var(--jb-sp-4);
    border: 1px dashed var(--jb-border-control);
    border-radius: var(--jb-r-md);
    font-size: var(--jb-t-3);
    color: var(--jb-fg-secondary);
}
.jbs-drop.over { border-color: var(--jb-focus); }
.jbs-steps {
    margin: var(--jb-sp-2) 0 0;
    padding-left: 18px;
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg-secondary);
}
.jbs-area { width: 100%; height: auto; min-height: 168px; resize: vertical; font-family: var(--jb-font); }
.app-text-input {
    height: var(--jb-h-control);
    padding: 2px 6px 2px 9px;
    border-color: var(--jb-border-control);
    font-size: var(--jb-t-3);
}
.app-text-input:hover:not(:disabled) { border-color: var(--jb-border-raised); }
.app-text-input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.app-text-input:disabled {
    background: var(--jb-bg-canvas);
    border-color: var(--jb-border);
    color: var(--jb-fg-disabled);
    opacity: 1;
}

.checkbox-group {
    margin: 0;
    padding: 0;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    min-height: var(--jb-row);
    gap: 5px;
    margin: 0;
    font-size: 13px;
    font-weight: var(--jb-w-normal);
    color: var(--jb-fg);
    user-select: none;
}
.checkbox-group input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jb-border-control);
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-inset);
}
.checkbox-group input[type="checkbox"]:hover { border-color: var(--jb-border-raised); }
.checkbox-group input[type="checkbox"]:checked {
    background: var(--jb-accent);
    border-color: var(--jb-accent);
}
.checkbox-group input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
.checkbox-group input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 7px;
    border: solid var(--jb-fg-on-accent);
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    opacity: 0;
}
.checkbox-group input[type="checkbox"]:checked::after { opacity: 1; }

.jbs-group + .settings-card-list { margin-top: var(--jb-sp-3); }
/* A settings list is the one place the IDE draws a box, with rows separated by a hairline rather than carded. */
.jb-settings-dialog .settings-card-list:has(.member-card),
.jb-settings-dialog .settings-card-list:has(.invite-link-card) {
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-md);
    overflow: hidden;
}
.jb-settings-dialog .member-card,
.jb-settings-dialog .invite-link-card {
    min-height: calc(var(--jb-h-control) + var(--jb-sp-4));
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-2) var(--jb-sp-3) var(--jb-sp-2) var(--jb-sp-4);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
    transition: background-color var(--jb-dur-in) var(--jb-ease-in);
}
.jb-settings-dialog .member-card + .member-card,
.jb-settings-dialog .invite-link-card + .invite-link-card { border-top: 1px solid var(--jb-border); }
.jb-settings-dialog .member-card:hover,
.jb-settings-dialog .invite-link-card:hover {
    background: var(--jb-bg-hover);
    border-color: var(--jb-border);
    box-shadow: none;
    transform: none;
}
.jb-settings-dialog .member-card-left { gap: var(--jb-sp-2); }
.jb-settings-dialog .member-actions {
    display: grid;
    grid-template-columns: 132px auto;
    align-items: center;
    justify-items: start;
    gap: var(--jb-sp-2);
    margin-top: 0;
}
.jb-settings-dialog .member-role-select { width: 100%; min-width: 0; }
.jb-settings-dialog .member-avatar {
    width: 24px;
    height: 24px;
    background: var(--jb-bg-hover);
    font-size: var(--jb-t-1);
    font-weight: var(--jb-w-medium);
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .member-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--jb-sp-2);
    row-gap: var(--jb-sp-1);
}
.jb-settings-dialog .member-name {
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-normal);
    color: var(--jb-fg);
}
.jb-settings-dialog .member-email,
.jb-settings-dialog .member-meta,
.jb-settings-dialog .invite-link-date {
    margin-top: 0;
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .invite-link-url-row { gap: var(--jb-sp-2); }
.jb-settings-dialog .invite-link-url {
    padding: 0;
    background: none;
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .invite-link-meta { gap: var(--jb-sp-2); font-size: var(--jb-t-2); }
.jb-settings-dialog .member-you-badge,
.jb-settings-dialog .member-count-badge,
.jb-settings-dialog .role-badge {
    margin-left: 0;
    padding: 0 var(--jb-sp-1);
    border: none;
    border-radius: var(--jb-r-sm);
    background: var(--jb-bg-hover);
    font-size: var(--jb-t-1);
    font-weight: var(--jb-w-normal);
    line-height: 18px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .role-owner { color: var(--jb-warning); }
.jb-settings-dialog .role-editor { color: var(--jb-accent); }
.jb-settings-dialog .share-empty-state {
    align-items: flex-start;
    gap: var(--jb-sp-1);
    padding: 0;
    border: none;
    text-align: left;
    font-size: var(--jb-t-2);
}
.jb-settings-dialog .share-empty-state-icon { display: none; }
.jb-settings-dialog .share-empty-state-title {
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-normal);
    color: var(--jb-fg);
}
.jb-settings-dialog .share-empty-state-desc {
    max-width: none;
    font-size: var(--jb-t-2);
}

.jb-settings-dialog .billing-plan-status {
    margin-top: var(--jb-sp-1);
    font-size: var(--jb-t-2);
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .billing-plan-status:first-child { margin-top: 0; }
.jb-settings-dialog .billing-plan-status.billing-status-warning { color: var(--jb-warning); }

.jb-settings-dialog .appearance-target-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jb-sp-1);
    margin: 0 0 var(--jb-sp-5);
}
.jb-settings-dialog .appearance-target-bar:not(:has(.appearance-target-pill + .appearance-target-pill)) { display: none; }
.jb-settings-dialog .appearance-target-label {
    margin-right: var(--jb-sp-2);
    font-size: var(--jb-t-3);
    color: var(--jb-fg-secondary);
}
.jb-settings-dialog .appearance-target-pill {
    height: var(--jb-tab-pill-h);
    padding: 0 var(--jb-sp-3);
    border: none;
    font-size: var(--jb-t-3);
    color: var(--jb-fg-secondary);
    cursor: default;
    /* inner-index declares a 120ms cross fade here, and a tab strip switches instantly. */
    transition: none;
}
.jb-settings-dialog .appearance-target-pill:hover {
    background: var(--jb-tab-hover-bg);
    color: var(--jb-fg);
}
.jb-settings-dialog .appearance-target-pill:active { background: var(--jb-bg-pressed); }
.jb-settings-dialog .appearance-target-pill.active {
    background: var(--jb-tab-selected-bg);
    box-shadow: inset 0 0 0 1px var(--jb-tab-selected-border);
    color: var(--jb-fg);
}

.jbs-confirm .modal-close { padding: 0; cursor: default; }
.jbs-confirm .modal-close:active { background: var(--jb-bg-pressed); }

@media (max-width: 1200px) {
    .jbs-theme { grid-template-columns: minmax(0, 1fr); }
    .jbs-preview {
        position: static;
        order: -1;
    }
}

@media (max-width: 1100px) {
    .jbs-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jbs-w { width: 100%; max-width: none; }
}

@media (max-width: 768px) {
    .jb-settings-dialog {
        width: auto;
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    html.is-demo .jb-settings-dialog { top: var(--demo-banner-h, 40px); }
    .jb-settings-dialog.jbs-on-page .jbs-nav,
    .jb-settings-dialog:not(.jbs-on-page) .jbs-main { display: none; }
    .jbs-nav { border-right: none; }
    .jbs-mobile { display: grid; }
    .jbs-keys,
    .jbs-save-key { display: none; }
    .jbs-head { padding: var(--jb-sp-3) var(--jb-sp-4); }
    .jbs-content-body { padding: var(--jb-sp-4) var(--jb-sp-4) var(--jb-sp-7); }
    .jbs-bar { padding: var(--jb-sp-3) var(--jb-sp-4); }
    .jbs-pair { grid-template-columns: minmax(0, 1fr); }
    .jb-settings-dialog .member-card { flex-direction: row; align-items: center; }
}

/* Density stays and the hit area grows, and iOS zooms into any field set under 16px. */
@media (pointer: coarse) {
    .jb-settings-dialog .app-text-input,
    .jb-settings-dialog .settings-textarea,
    .jb-settings-dialog .toolbar-select,
    .jb-settings-dialog .toolbar-input { font-size: 16px; }
    .jbs-icon-btn,
    .jbs-confirm .modal-close { position: relative; }
    .jbs-icon-btn::after,
    .jbs-confirm .modal-close::after {
        content: "";
        position: absolute;
        inset: calc((var(--jb-h-control) - var(--jb-tap-min, 44px)) / 2);
    }
}

/* The board at 768 and below: one lane at a time under a row of lane tabs, with onboarding left out. */

.lite-notice, .lane-tabs { display: none; }

@media (max-width: 768px) {
    /* One line of explanation sized like a toolbar row, so dismissing it is a courtesy rather than a relief. */
    .lite-notice {
        display: flex;
        align-items: center;
        gap: var(--jb-sp-2);
        min-height: 28px;
        margin-top: 8px;
        margin-bottom: var(--jb-island-gap);
        padding: var(--jb-sp-1) var(--jb-sp-1) var(--jb-sp-1) var(--jb-sp-2);
        background: var(--jb-info-bg);
        border: 1px solid var(--jb-info-border);
        border-radius: var(--jb-r-panel);
    }
    .lite-notice[hidden] { display: none; }
    .lite-notice-icon {
        flex-shrink: 0;
        color: var(--jb-fg-secondary);
    }
    .lite-notice-text {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 12px;
        line-height: var(--jb-lh-ui);
        color: var(--jb-fg-secondary);
    }
    .lite-notice-text strong {
        font-weight: var(--jb-w-semi);
        color: var(--jb-fg);
    }
    .lite-notice-close {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--jb-r-sm);
        color: var(--jb-fg-tertiary);
    }
    .lite-notice-close:active {
        background: var(--jb-bg-pressed);
        color: var(--jb-fg);
    }

    /* One tinted strip at this width, so the onboarding goes and the last line releases the hold on the revenue chips. */
    .board-page .sample-banner,
    .gs-panel,
    .top-bar-tools > .ob-open { display: none; }

    /* Controls that only mean something against the full board, including the custom board's column renaming, deleting and adding. */
    .board-page .bulk-select-btn,
    .board-page .tag-manage-btn,
    .board-page #add-column-btn,
    .board-page .column-header .card-overflow-toggle,
    .board-page .roadmap-bottom-bar.jb-statusbar,
    .board-page .board-stats,
    .board-page .board-tab-add,
    .board-page .board-tab-upgrade,
    .board-page .top-bar-left > .fd-rule,
    .board-page #board-access,
    .board-page .toolbar-search-kbd,
    .board-page .lane:not(.is-current),
    .board-page .guide-keys,
    .board-page .board-tabs:not(.open) > .board-tab:not(.active) { display: none; }

    /* A view transition name makes .main-content a stacking context, which would trap the lifted top bar under the header. */
    .board-page .main-content { view-transition-name: none; }
    .board-page .top-bar { z-index: calc(var(--jb-z-popover) + 1); }
    .board-page .mobile-header-logo { visibility: hidden; }
    .board-page .board-tabs {
        position: absolute;
        top: -40px;
        left: 8px;
        max-width: calc(100% - 96px);
        height: 40px;
        align-items: center;
        overflow: visible;
    }
    .board-page .board-tabs > .board-tab.active {
        padding: 0 8px;
        background: none;
        box-shadow: none;
        font-weight: var(--jb-w-semi);
    }
    .board-page .board-tabs:has(> :not(.active)) > .active::after {
        content: "";
        width: 6px;
        height: 6px;
        margin: -3px 2px 0;
        border: solid var(--jb-fg-secondary);
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
    }
    .board-page .board-tabs.open {
        top: -38px;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 4px;
        background: var(--jb-bg-popup);
        border: 1px solid var(--jb-border-control);
        border-radius: var(--jb-r-md);
        box-shadow: var(--jb-shadow-popup);
    }
    .board-page .board-tabs.open > .active { order: -1; }
    .board-page #card-guide-btn {
        position: absolute;
        top: -35px;
        right: 46px;
    }

    .board-page .top-bar-right { justify-content: flex-end; }
    .board-page .top-bar-tools { flex: none; }
    .board-page .top-bar-tools .toolbar-search {
        position: absolute;
        left: 8px;
        right: 8px;
        z-index: 1;
    }
    .board-page .top-bar-tools .toolbar-search:not(:focus-within):has(.toolbar-input:placeholder-shown) {
        position: relative;
        left: 0;
        flex: 0 0 30px;
        padding: 0;
        justify-content: center;
        background: none;
        border-color: transparent;
    }
    .board-page .top-bar-tools .toolbar-search:not(:focus-within):has(.toolbar-input:placeholder-shown) .toolbar-input {
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    .lane-tabs {
        display: flex;
        flex: 1 0 100%;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .lane-tabs .column-count {
        padding: 0;
        background: none;
        font-size: 11px;
    }
    .board-page .roadmap-container {
        display: block;
        overflow: visible;
        scroll-snap-type: none;
        min-height: 0;
    }
    .board-page .lane {
        width: auto !important;
        min-width: 0 !important;
    }

    html:has(.card-overflow-menu.active) { overflow: hidden; }
    .board-page:has(.card-overflow-menu.active) > * { pointer-events: none; }
    .board-page:has(.card-overflow-menu.active) > .vf-launcher { display: none; }
    .board-page .feature-card-roadmap.card-overflow-open { z-index: var(--jb-z-dialog); }
    .board-page .card-overflow-menu.active,
    .board-page .move-submenu {
        position: fixed;
        inset: auto 0 0 !important;
        z-index: var(--jb-z-dialog);
        width: auto;
        padding: 20px 8px;
        border-width: 1px 0 0;
        border-radius: var(--jb-r-md) var(--jb-r-md) 0 0;
        box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--jb-gray-10) 50%, transparent);
        pointer-events: auto;
    }
    .board-page .move-submenu { box-shadow: none; }
    .board-page .card-overflow-menu.active::before,
    .board-page .move-submenu::before {
        content: "";
        position: absolute;
        top: 8px;
        left: calc(50% - 18px);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--jb-border-control);
    }
    .board-page .card-overflow-item {
        height: 44px;
        padding: 0 12px;
        border-radius: var(--jb-r-md);
        font-size: 14px;
    }
    .board-page .card-overflow-item kbd { display: none; }
    .board-page .move-feature svg { margin-left: auto; }

    .prio-bar > span,
    .prio thead,
    .prio td:is(:nth-child(3), :nth-child(5)),
    .prio .feature-tag,
    .prio td.dim,
    .prio td .dim { display: none; }
    .prio table,
    .prio tbody { display: block; }
    .prio tbody tr {
        display: grid;
        grid-template-columns: 16px auto auto auto 1fr 52px;
        align-items: center;
        gap: 4px 6px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--jb-border);
        font-size: 12px;
        color: var(--jb-fg-secondary);
    }
    .prio td {
        height: auto;
        padding: 0;
        border: 0;
    }
    .prio td:first-child {
        grid-row: 1 / 3;
        width: auto;
    }
    .prio td:nth-child(2) {
        grid-column: 2 / 6;
        min-width: 0;
        font-size: 13px;
        color: var(--jb-fg);
    }
    .prio td:nth-child(4) { grid-area: 2 / 2; color: var(--jb-fg); }
    .prio td:nth-child(6) { grid-area: 2 / 3; }
    .prio td:nth-child(7) { grid-area: 2 / 4; }
    .prio td:nth-child(9) { grid-area: 2 / 5; }
    .prio td:nth-child(8) { grid-area: 1 / 6 / 3; }
    .prio-title { min-width: 0; }
    .prio-title b {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .prio-score {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 6px;
    }
    .prio-score .card-progress-track { width: 52px; }

}

/* The demo strip reads as one 40px line: the message centred, the disclaimer following it, and the button pinned to the right gutter. */

.demo-banner-label {
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
}
.demo-banner-text {
    color: var(--jb-fg-secondary);
    opacity: 1;
}
/* The figure arrives from a request, so its placeholder is given the width it will need and the sentence does not slide. */
.demo-banner-timer {
    display: inline-block;
    min-width: 3ch;
    color: var(--jb-fg);
    font-weight: var(--jb-w-medium);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 769px) {
    /* The strip matches the inset the merged footer keeps, so its button and the avatar below it share a right edge. */
    .demo-banner {
        padding-right: var(--jb-sp-5);
    }
    .demo-banner-content {
        display: grid;
        grid-template-columns: 1fr minmax(0, auto) 1fr;
        align-items: center;
        gap: var(--jb-sp-4);
        max-width: none;
        margin: 0;
    }
    .demo-banner-text-group {
        grid-column: 2;
        display: flex;
        align-items: baseline;
        gap: var(--jb-sp-2);
        min-width: 0;
        text-align: left;
    }
    .demo-banner-text,
    .demo-banner-subtext {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .demo-banner-subtext {
        margin: 0;
        font-size: var(--jb-t-3);
    }
    /* One separator between the message and its aside, so the line reads as a sentence with a footnote. */
    .demo-banner-subtext::before {
        content: "\00B7";
        margin-right: var(--jb-sp-2);
    }
    .demo-banner-actions {
        grid-column: 3;
        justify-self: end;
    }
}

/* Restarting the tour is a borderless control in the corner rather than a link buried in the middle of the sentence. */
.demo-banner-actions {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
}
.demo-banner-replay {
    display: inline-flex;
    align-items: center;
    height: var(--jb-h-control);
    padding: 0 var(--jb-sp-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--jb-r-md);
    color: var(--jb-fg-secondary);
    font-family: inherit;
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background var(--jb-dur-in) var(--jb-ease-in),
                color var(--jb-dur-in) var(--jb-ease-in);
}
.demo-banner-replay:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.demo-banner-replay:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
}
/* The tour does not run on a phone, so neither does its control; placed here because at equal weight the last rule wins. */
@media (max-width: 768px) {
    .demo-banner-replay { display: none; }
}
/* The tour dims the strip with the rest of the page, so the restart control is not reachable underneath. */
html.demo-tour-open .demo-banner-replay {
    visibility: hidden;
}

/* Between 769 and 1200 the sidebar is a rail, so the disclaimer is the part that waits for a wider window. */
@media (min-width: 769px) and (max-width: 1200px) {
    .demo-banner-subtext { display: none; }
}

/* The tour uses the popup this design system already has, with the dimming carried by the ring's own spread shadow. */

/* A shadow colour, written like the shadow tokens: the backdrop tint dims towards the island, which is already darker in dark theme. */
:root {
    --demo-tour-scrim: rgba(0, 0, 0, 0.72);
}
[data-theme="light"] {
    --demo-tour-scrim: rgba(0, 0, 0, 0.46);
}

/* Catches every click so a step cannot be pulled out from under itself, and sits below the ring. */
.demo-tour-block {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

/* The dim is the whole signal: the hole takes the target's own corner radius, and no accent outline claims a selection. */
.demo-tour-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    box-shadow: 0 0 0 100vmax var(--demo-tour-scrim);
    pointer-events: none;
    z-index: 10001;
    transition: top var(--jb-dur-tooltip) var(--jb-ease-in),
                left var(--jb-dur-tooltip) var(--jb-ease-in),
                width var(--jb-dur-tooltip) var(--jb-ease-in),
                height var(--jb-dur-tooltip) var(--jb-ease-in),
                border-radius var(--jb-dur-tooltip) var(--jb-ease-in),
                opacity var(--jb-dur-out) var(--jb-ease-out);
}
.demo-tour-ring.is-hidden {
    opacity: 0;
}
/* Coach mode: no dim and no click catching, the customer works the page and the ring points at the next control. */
.demo-tour-block.is-coach {
    pointer-events: none;
}
.demo-tour-ring.is-coach,
.demo-tour-ring.is-coach.is-tracking {
    box-shadow: 0 0 0 2px var(--jb-accent), 0 0 0 6px color-mix(in srgb, var(--jb-accent) 25%, transparent);
    transition: opacity var(--jb-dur-in) var(--jb-ease-in);
}
/* While the page scrolls the ring follows its target frame by frame, so a transition would leave it behind. */
.demo-tour-ring.is-tracking {
    transition: none;
}

.demo-tour-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: var(--jb-sp-3) var(--jb-sp-4);
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-r-panel);
    box-shadow: var(--jb-shadow-dialog);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--jb-dur-out) var(--jb-ease-out);
}
.demo-tour-pop.is-in {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--jb-dur-in);
    transition-timing-function: var(--jb-ease-in);
}

/* Two borders of a rotated square draw the beak, and the overlap covers the panel's own border where they meet. */
.demo-tour-beak {
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border);
    transform: rotate(45deg);
}
.demo-tour-pop[data-side="bottom"] .demo-tour-beak {
    top: -6px;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.demo-tour-pop[data-side="top"] .demo-tour-beak {
    bottom: -6px;
    border-left-color: transparent;
    border-top-color: transparent;
}
.demo-tour-pop[data-side="right"] .demo-tour-beak {
    left: -6px;
    border-right-color: transparent;
    border-top-color: transparent;
}
.demo-tour-pop[data-side="left"] .demo-tour-beak {
    right: -6px;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.demo-tour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jb-sp-2);
    margin-bottom: var(--jb-sp-1);
}
.demo-tour-count {
    font-size: var(--jb-t-2);
    color: var(--jb-fg-tertiary);
    font-variant-numeric: tabular-nums;
}
.demo-tour-close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: -6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg-tertiary);
    cursor: default;
    transition: background var(--jb-dur-in) var(--jb-ease-in),
                color var(--jb-dur-in) var(--jb-ease-in);
}
.demo-tour-close:hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}

.demo-tour-title {
    margin: 0 0 var(--jb-sp-2);
    font-size: var(--jb-t-4);
    font-weight: var(--jb-w-semi);
    line-height: var(--jb-lh-tight);
    color: var(--jb-fg);
}
.demo-tour-text {
    margin: 0 0 var(--jb-sp-4);
    font-size: var(--jb-t-4);
    line-height: var(--jb-lh-prose);
    color: var(--jb-fg-secondary);
}

/* The steps that make a claim read the card's own figures off the element, using the detail drawer's label and figure pairing. */
.demo-tour-stats {
    display: flex;
    gap: var(--jb-sp-5);
    margin: 0 0 var(--jb-sp-4);
    padding-top: var(--jb-sp-3);
    border-top: 1px solid var(--jb-border);
}
.demo-tour-stats[hidden] {
    display: none;
}
.demo-tour-stat dt {
    font-size: var(--jb-t-2);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-tertiary);
}
.demo-tour-stat dd {
    margin: 0;
    font-size: var(--jb-t-5);
    font-weight: var(--jb-w-semi);
    line-height: var(--jb-lh-tight);
    color: var(--jb-fg);
    font-variant-numeric: tabular-nums;
}

.demo-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jb-sp-2);
}
.demo-tour-nav {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
}
.demo-tour-skip,
.demo-tour-back,
.demo-tour-next,
.demo-tour-cta {
    display: inline-flex;
    align-items: center;
    height: var(--jb-h-control);
    padding: 0 var(--jb-sp-3);
    border: 1px solid transparent;
    border-radius: var(--jb-r-md);
    font-family: inherit;
    font-size: var(--jb-t-3);
    font-weight: var(--jb-w-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
    transition: background var(--jb-dur-in) var(--jb-ease-in),
                color var(--jb-dur-in) var(--jb-ease-in);
}
.demo-tour-skip,
.demo-tour-back {
    background: transparent;
    color: var(--jb-fg-secondary);
}
.demo-tour-back {
    border-color: var(--jb-border-raised);
}
.demo-tour-skip:hover,
.demo-tour-back:not(:disabled):hover {
    background: var(--jb-bg-hover);
    color: var(--jb-fg);
}
.demo-tour-back:disabled {
    opacity: 0.4;
}
.demo-tour-next,
.demo-tour-cta {
    background: var(--jb-accent);
    border-color: var(--jb-accent);
    color: var(--jb-fg-on-accent);
}
.demo-tour-back[hidden],
.demo-tour-next[hidden],
.demo-tour-cta[hidden],
.demo-tour-pop[data-side="center"] .demo-tour-beak {
    display: none;
}
/* The welcome card is read before anything is lit, so it is wider, its close sits in the title row, and both choices stand together. */
.demo-tour-pop[data-side="center"] {
    width: 640px;
    padding: var(--jb-sp-7) var(--jb-sp-7) var(--jb-sp-6);
}
.demo-tour-pop[data-side="center"] .demo-tour-head {
    position: absolute;
    top: var(--jb-sp-4);
    right: var(--jb-sp-4);
    margin: 0;
}
.demo-tour-pop[data-side="center"] .demo-tour-title {
    margin-bottom: var(--jb-sp-3);
    padding-right: var(--jb-sp-6);
    font-size: var(--jb-t-7);
}
.demo-tour-pop[data-side="center"] .demo-tour-text {
    margin-bottom: var(--jb-sp-5);
    font-size: var(--jb-t-5);
    color: var(--jb-fg);
}
.demo-tour-html { margin-bottom: var(--jb-sp-6); }
.demo-tour-pop[data-side="center"] .demo-tour-actions {
    justify-content: flex-end;
}
.demo-tour-pop[data-side="center"] .demo-tour-skip {
    border-color: var(--jb-border-raised);
}
.ob-open {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--jb-sp-2);
    height: var(--jb-h-control);
    padding: 0 var(--jb-sp-3);
    white-space: nowrap;
}
.ob-open .column-count {
    color: var(--jb-fg);
}
.demo-tour-next:hover,
.demo-tour-cta:hover {
    background: var(--jb-accent-hover);
    border-color: var(--jb-accent-hover);
}
.demo-tour-close:focus-visible,
.demo-tour-skip:focus-visible,
.demo-tour-back:focus-visible,
.demo-tour-next:focus-visible,
.demo-tour-cta:focus-visible {
    outline: 2px solid var(--jb-focus);
    outline-offset: -1px;
    border-color: transparent;
}

/* The phone list row: Voters and Activity become two lines, the subject with its timestamp above everything that qualifies it. */

@media (max-width: 768px) {
    .activity-item {
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        padding: var(--jb-sp-2) var(--jb-sp-3);
        column-gap: var(--jb-sp-2);
        row-gap: var(--jb-sp-1);
    }
    .activity-item + .activity-item::before {
        left: var(--jb-sp-3);
        right: var(--jb-sp-3);
    }

    /* A 24px marker in a 32px gutter, centred against the whole row because it marks the whole row. */
    .activity-item:has(> .activity-icon-wrapper) { padding-left: 44px; }
    .activity-item > .activity-icon-wrapper {
        position: absolute;
        left: var(--jb-sp-3);
        top: 50%;
        transform: translateY(-50%);
    }

    .activity-item > .activity-item-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .activity-item > .activity-item-time {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 11px;
    }
    .activity-item::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 0;
    }
    /* Everything that is not the subject or the time is evidence and drops to the second line, whatever a renderer adds. */
    .activity-item > :not(.activity-icon-wrapper):not(.activity-item-title):not(.activity-item-time) {
        order: 4;
        flex: 0 1 auto;
        min-width: 0;
        font-size: 11px;
    }
    .activity-item > .activity-item-actor {
        max-width: none;
        color: var(--jb-fg-secondary);
    }
}

/* Three targets under the 24 by 24 floor, grown by an invisible reach except the range buttons, which grow two real pixels. */

@media (pointer: coarse) {
    .lite-notice-close,
    .mobile-header-logo { position: relative; }
    .lite-notice-close::after {
        content: "";
        position: absolute;
        inset: calc((22px - var(--jb-tap-min, 44px)) / 2);
    }
    .mobile-header-logo::after {
        content: "";
        position: absolute;
        inset: calc((20px - var(--jb-tap-min, 44px)) / 2) 0;
    }
    .chart-range-btn { height: var(--jb-h-dense); }
}

/* Hover on a touch screen never ends, so under a coarse pointer the row takes a pressed fill instead. */

@media (pointer: coarse) {
    .activity-item:hover { background: none; }
    .activity-item-clickable:active { background: var(--jb-bg-pressed); }
}

/* The page name comes back only at the widths where the rail is unlabelled and the page has no tab strip. */

.top-bar-page-name { display: none; }

@media (min-width: 769px) and (max-width: 1200px) {
    .top-bar-page-name {
        display: block;
        flex: 0 1 auto;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* On a phone the insights rail sits above the list and arrives shut, remembering its state per screen; above 768 it cannot collapse. */

.rail-collapse {
    display: flex;
    align-items: center;
    gap: var(--jb-sp-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}
.rail-collapse-chevron {
    display: none;
    flex-shrink: 0;
    color: var(--jb-fg-tertiary);
}

@media (max-width: 768px) {
    .page-with-rail .insights-rail { order: -1; }

    /* Shut, the section is its head alone, so only the height moves, and the figures carry the sixteen the list rows start at. */
    .insights-rail .rail-section { padding: 0 var(--jb-sp-4); }
    .insights-rail .rail-section-head { margin-bottom: 0; }
    .insights-rail .rail-section > :not(.rail-section-head, .rail-bar-track) {
        padding: var(--jb-sp-1) 0 var(--jb-sp-3);
    }

    /* The rail closes by clipping so there is a height to travel between; common.js writes the measured one and 38 is the fallback. */
    .insights-rail > * { flex: 0 0 auto; }
    .insights-rail.is-collapsed { height: 38px; }
    .insights-rail.is-collapsed,
    .insights-rail.is-sliding { overflow: hidden; }

    /* Opening and closing are different gestures, and the tokens already say so: arriving is quick, leaving takes a moment longer. */
    .insights-rail.is-sliding { transition: height var(--jb-dur-in) var(--jb-ease-in); }
    .insights-rail.is-sliding.is-collapsed {
        transition: height var(--jb-dur-out) var(--jb-ease-out);
    }

    /* The content is drawn in full from the first frame, so the fade underneath keeps the reveal from being a wipe. */
    .insights-rail.is-sliding:not(.is-collapsed) .rail-section > :not(.rail-section-head),
    .insights-rail.is-sliding:not(.is-collapsed) .insights-rail-body {
        animation: collapsible-fade-in var(--jb-dur-in) var(--jb-ease-in) both;
    }

    /* Clipped is not gone, so once closed the box stops existing for everything except layout, which still measures it. */
    .insights-rail.is-collapsed:not(.is-sliding) .rail-section > :not(.rail-section-head),
    .insights-rail.is-collapsed:not(.is-sliding) .insights-rail-body { visibility: hidden; }

    /* The head is the target, all of it: a 36px row whose right half does nothing still reads as tappable. */
    .rail-collapse {
        flex: 1 1 auto;
        min-height: 36px;
    }
    .rail-collapse-chevron {
        display: block;
        transition: transform var(--jb-dur-in) var(--jb-ease-in);
    }

    .insights-rail.is-collapsed .rail-collapse-chevron { transform: rotate(-90deg); }
    .insights-rail.is-collapsed .chart-range-btns { display: none; }
}

/* On a phone the Voters settings row wraps itself: the text takes a 200px floor and the control cluster may not shrink. */

@media (max-width: 768px) {
    .wv-row {
        flex-wrap: wrap;
        row-gap: var(--jb-sp-2);
        padding: var(--jb-sp-2) var(--jb-sp-3);
    }
    .wv-row-text {
        flex: 1 1 200px;
        min-width: 200px;
    }
    .wv-row-aside {
        flex: 0 0 auto;
        flex-wrap: wrap;
    }
    .wv-panel-head { padding: var(--jb-sp-3); }
}

/* The five plan pages are a door: no sidebar, no board, one island centred on the canvas under a bare top bar. */

.plan-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--jb-bg-canvas);
}
.plan-page .top-bar {
    position: sticky;
    top: 0;
    height: 40px;
    padding: 0 var(--jb-sp-4);
    margin-bottom: 0;
    background: var(--jb-bg-canvas);
    border-bottom: 1px solid var(--jb-border);
}
.plan-page-content {
    width: min(720px, calc(100vw - var(--jb-sp-4) * 2));
    margin: var(--jb-sp-5) auto var(--jb-sp-6);
}
.plan-page-content--narrow { width: min(480px, calc(100vw - var(--jb-sp-4) * 2)); }
.plan-page-content--wide { width: min(960px, calc(100vw - var(--jb-sp-4) * 2)); }
.plan-page-content--wide { text-align: center; }
.plan-page-content--wide .appearance-target-bar { justify-content: center; }
.plan-page-content--wide .plan-tiles { text-align: left; }
.plan-page-content > p, .plan-page .kanban-column > p {
    margin: 0 0 var(--jb-sp-4);
    font-size: var(--jb-t-3);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.plan-page-content--wide > p { font-size: var(--jb-t-4); color: var(--jb-fg); }
/* A one island page spaces its children with the island's own gap, so nothing inside brings a margin of its own. */
.plan-page .kanban-column > h1, .plan-page .kanban-column > p, .plan-page .kanban-column > .section-actions { margin: 0; }
/* Below 768 the app grows this box so the board's search field can fill it; the door has no search, only two icons. */
.plan-page .top-bar-right { justify-content: flex-end; }
/* The board sizes a column at a fixed 360px so it can be dragged; on the door the island is the content column. */
.plan-cards-island {
    width: auto;
    min-width: 0;
    min-height: 0;
    gap: var(--jb-sp-3);
    padding: var(--jb-sp-3);
}
/* The dialog's rows are one line tall, so centring reads; on the door the button lines up with the plan name. */
.plan-page .billing-plan-card { align-items: flex-start; }
/* Three rows read as one bounded list, the way the team list already separates its members. */
.plan-cards-island .billing-plan-card + .billing-plan-card {
    border-top: 1px solid var(--jb-border);
    padding-top: var(--jb-sp-3);
}
/* Three plan tiles side by side, Pro in the middle carrying the badge, the accent edge and the one filled button. */
.plan-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--jb-island-gap);
    margin-top: var(--jb-sp-4);
}
.plan-tiles > .billing-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--jb-sp-3);
    margin: 0;
    padding: var(--jb-sp-4);
    background: var(--jb-bg-island);
    border: 1px solid var(--jb-border-island);
    border-radius: var(--jb-r-panel);
}
.jb-settings-dialog .plan-tiles > .billing-plan-card {
    background: var(--jb-bg-island);
    border-color: var(--jb-border-control);
}
.plan-tiles > .billing-plan-card[data-plan="PRO"] {
    background: var(--jb-info-bg);
    border-color: var(--jb-info-border);
}
.plan-tiles > .billing-plan-card[data-plan="PRO"] .plan-features { color: var(--jb-fg); }
.plan-tiles > .billing-plan-card[data-plan="PRO"] .plan-features li::before { background-color: var(--jb-accent); }
.plan-tiles .billing-plan-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.plan-tile-badge {
    position: absolute;
    top: -11px;
    left: var(--jb-sp-4);
    height: 22px;
    background: var(--jb-accent);
    color: var(--jb-fg-on-accent);
    font-size: var(--jb-t-2);
}
.plan-tiles .billing-plan-name { font-size: var(--jb-t-3); font-weight: var(--jb-w-medium); }
.billing-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--jb-sp-1);
    margin-top: var(--jb-sp-1);
}
.billing-plan-price .billing-plan-amount {
    margin: 0;
    font-size: var(--jb-t-7);
    font-weight: var(--jb-w-semi);
    line-height: var(--jb-lh-tight);
    font-variant-numeric: tabular-nums;
    color: var(--jb-fg);
}
.billing-plan-price .billing-plan-per {
    margin: 0;
    font-size: var(--jb-t-3);
    color: var(--jb-fg-secondary);
}
.plan-tiles .billing-plan-note { margin-top: var(--jb-sp-1); }
.plan-save {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: var(--jb-sp-1);
    padding: 0 var(--jb-sp-1);
    border-radius: var(--jb-r-sm);
    font-size: var(--jb-t-1);
    font-weight: var(--jb-w-medium);
    background: var(--jb-bg-inset);
    color: var(--jb-fg-secondary);
}
.plan-tiles .plan-features, .checkout-summary .plan-features {
    flex: 1;
    gap: var(--jb-sp-2);
    margin: var(--jb-sp-3) 0 0;
    padding-top: var(--jb-sp-3);
    border-top: 1px solid var(--jb-border);
    font-size: var(--jb-t-3);
    line-height: var(--jb-lh-ui);
    color: var(--jb-fg-secondary);
}
.plan-tiles .plan-features li, .checkout-summary .plan-features li {
    padding-left: var(--jb-sp-5);
    font-size: inherit;
    color: inherit;
}
.plan-tiles .plan-features li::before, .checkout-summary .plan-features li::before {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 0;
    background-color: var(--jb-fg-tertiary);
    background-image: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-tiles .plan-features li.feature-dim { color: var(--jb-fg-disabled); }
.plan-tiles .plan-features li.feature-dim::before {
    background-color: var(--jb-fg-disabled);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.plan-tiles .plan-choose { width: 100%; }
.plan-tiles .plan-current {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--jb-h-control);
    margin: 0;
}
@media (max-width: 768px) {
    .plan-tiles { grid-template-columns: 1fr; }
    .plan-tiles > [data-plan="PRO"] { order: -1; }
}
/* The summary is one tile's worth of facts beside the card form; the list does not grow, the link is quiet. */
.checkout-summary .plan-features { flex: 0 0 auto; }
.checkout-summary > p { margin: 0; }
.checkout-summary .sample-banner { margin: 0; }
.checkout-summary > a { font-size: var(--jb-t-3); color: var(--jb-fg-secondary); text-decoration: none; }
.checkout-summary > a:hover { color: var(--jb-fg); }
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--jb-island-gap);
    align-items: start;
}
@media (max-width: 768px) {
    .checkout-layout { grid-template-columns: 1fr; }
}
/* Sign in, sign up, reset, invite, admin and not found: one narrow island holding a form on the money pages' shell. */
.plan-page-content--narrow .plan-cards-island > .share-btn { width: 100%; }
.plan-page .app-form-group { margin: 0; }
[aria-invalid="true"] { border-color: var(--jb-error); }
/* The project tile is a link and the thanks banner is hidden until a payment lands; the legacy sheet gives both a display of their own. */
a.np-card { text-decoration: none; color: inherit; }
.np-upgrade-banner[hidden] { display: none; }
/* The phone band pads the body for a mobile header the door does not render. */
@media (max-width: 768px) {
    body.plan-page { padding-top: 0; }
    html.is-demo body.plan-page { padding-top: var(--demo-banner-h); }
}

/* The list and pager containers collapse while empty, so two empty children do not spend two gaps under the placeholder. */

.collapses-when-empty:empty {
    display: none;
}

.vf-launcher {
    position: fixed;
    right: var(--jb-sp-4);
    bottom: var(--jb-sp-7);
    z-index: var(--jb-z-panel);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--jb-sp-2);
}

.vf-launcher-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--jb-accent);
    border: 1px solid var(--jb-accent);
    border-radius: var(--jb-r-pill);
    color: var(--jb-fg-on-accent);
    box-shadow: var(--jb-shadow-dialog);
}

.vf-launcher:is(:hover, :focus-within, .open) .vf-launcher-button {
    background: var(--jb-accent-hover);
    border-color: var(--jb-accent-hover);
}

.vf-launcher-menu {
    min-width: 176px;
    animation: menu-rise var(--jb-dur-in) ease-out;
}

.vf-launcher:not(:hover, :focus-within, .open) .vf-launcher-menu {
    display: none;
}

@keyframes menu-rise {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

@media (pointer: coarse) {
    .vf-launcher-menu .card-overflow-item {
        height: 44px;
        padding: 0 12px;
        border-radius: var(--jb-r-md);
        font-size: 14px;
    }
}

.vf-launcher-panel {
    z-index: var(--jb-z-panel);
    width: 420px;
    background: var(--jb-bg-canvas);
}

.vf-launcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--jb-panel-head-h);
    padding: 0 var(--jb-sp-3);
    border-bottom: 1px solid var(--jb-border);
}

.vf-launcher-title {
    font-size: 13px;
    color: var(--jb-fg);
}

.vf-launcher-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--jb-r-sm);
    color: var(--jb-fg-icon);
}

.vf-launcher-close:hover {
    background: var(--jb-bg-hover);
}

.vf-launcher-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-2) var(--jb-sp-3) 0;
}

.vf-launcher-bar .page-tabs {
    margin: 0;
}

.vf-launcher-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--jb-sp-2);
    padding: var(--jb-sp-2) var(--jb-sp-3) 0;
}

.vf-launcher-tools[hidden] {
    display: none;
}

.vf-launcher-tools .toolbar-search {
    flex: 1;
    max-width: none;
}

.vf-launcher-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--jb-sp-3);
}

@media (prefers-reduced-motion: no-preference) {
    .vf-launcher-body > div {
        transition: opacity 220ms ease;
    }
}

.vf-launcher-foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--jb-sp-3);
    border-top: 1px solid var(--jb-border);
}

.row-tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--tile-color);
    background: color-mix(in srgb, var(--tile-color) 22%, transparent);
}

.list-island { container: island / inline-size; }
.list-island-head { display: flex; align-items: center; gap: var(--jb-sp-2); min-height: 48px; padding: 0 var(--jb-sp-3) 0 var(--jb-sp-4); }
.list-island-head:has(+ :not([hidden])) { border-bottom: 1px solid var(--jb-border-island); }
.list-island-head h2 { margin: 0; font-size: 13px; font-weight: var(--jb-w-semi); white-space: nowrap; }
.list-island-head > .btn { flex: none; margin-left: auto; }
.list-island-toggle { display: inline-flex; align-items: center; gap: var(--jb-sp-2); height: var(--jb-h-control); margin-left: calc(-1 * var(--jb-sp-2)); padding: 0 var(--jb-sp-2); border: 0; border-radius: var(--jb-r-md); background: none; color: var(--jb-fg); font: inherit; }
.list-island-toggle:hover { background: var(--jb-bg-hover); }
.list-island-toggle > svg { color: var(--jb-fg-secondary); }
.list-island-toggle[aria-expanded="false"] > svg { transform: rotate(-90deg); }
.list-island-count { font-size: 12px; color: var(--jb-fg-tertiary); }
.list-island-count.is-full { color: var(--warning); }
@media (max-width: 600px) {
    .list-island-count { display: none; }
}
:is(#releases-list, #messages-list, #ways-list, #keys-list, #api-keys-list) { --voter-cols: minmax(0, 1fr) 120px 112px 120px; }
#api-keys-list .voter-row .va-sub { display: none; }
#api-keys-list .key-value { grid-column: auto; }
#api-keys-list > .help-text { margin: 0; padding: var(--jb-sp-3) var(--jb-sp-4); }
@container island (max-width: 719px) {
    :is(#releases-list, #messages-list, #ways-list, #keys-list, #api-keys-list) :is(.voter-cols, .voter-row) { grid-template-columns: minmax(0, 1fr) 120px 120px; }
    :is(#releases-list, #messages-list, #ways-list, #api-keys-list) :is(.voter-cols, .voter-row) > :nth-child(3) { display: none; }
    #keys-list .key-value { grid-column: auto; }
}
@container island (max-width: 559px) {
    :is(#releases-list, #messages-list, #ways-list, #keys-list, #api-keys-list) :is(.voter-cols, .voter-row) { grid-template-columns: minmax(0, 1fr) 120px; }
    :is(#releases-list, #messages-list, #ways-list, #keys-list, #api-keys-list) :is(.voter-cols, .voter-row) > :nth-child(2) { display: none; }
    #api-keys-list .voter-row .va-sub { display: block; }
}
#releases-list .rail-bar-fill { background: var(--success); }
#subscribers-list { --voter-cols: minmax(0, 1fr) 120px; }
.voter-cell-stack.is-zero { color: var(--jb-fg-tertiary); }
.voter-row > .voter-cell-stack.activity-item-time { align-items: flex-end; }

.detail-panel-meta > .va-sub { margin-left: auto; }
.panel-section-tools { display: flex; align-items: center; gap: var(--jb-sp-2); }
.panel-list { border: 1px solid var(--jb-border); border-radius: var(--jb-r-panel); }
.panel-list > * { position: relative; display: flex; align-items: center; gap: var(--jb-sp-3); min-height: 40px; padding: var(--jb-sp-1) var(--jb-sp-3); }
.panel-list > * + *::before { content: ""; position: absolute; top: 0; left: var(--jb-sp-3); right: var(--jb-sp-3); height: 1px; background: var(--jb-border-island); }
.panel-list .activity-item-body { flex: 1; min-width: 0; }
.panel-list-num { flex: none; width: 64px; text-align: right; }
.release-idea-result:hover { background: var(--jb-bg-hover); }
.release-idea-search { color: var(--jb-fg-tertiary); }
.release-idea-search:focus-within { outline: 2px solid var(--jb-focus); outline-offset: -2px; border-radius: var(--jb-r-panel); }
.release-idea-search > input { flex: 1; min-width: 0; height: var(--jb-h-control); padding: 0; border: 0; background: none; color: var(--jb-fg); font: inherit; outline: none; }
.panel-inset { padding: var(--jb-sp-4); border-radius: var(--jb-r-panel); background: var(--jb-bg-inset); }
.panel-kv--wide { grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--jb-sp-4); }
.panel-kv--wide dd { justify-content: flex-start; }

.panel-form { gap: var(--jb-sp-5); }
.panel-form :is(.form-row, .form-group-roadmap), .panel-form > .panel-section { margin: 0; }
.panel-form .form-row { gap: var(--jb-sp-3); }
.panel-form .form-label { margin-bottom: var(--jb-sp-1); font-size: 12px; color: var(--jb-fg-secondary); }
.panel-form-group { display: flex; flex-direction: column; gap: var(--jb-sp-3); }
.release-form-head { grid-template-columns: minmax(0, 1fr) 168px; }
.message-form-trio { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.message-form-end { align-items: end; }
@media (max-width: 600px) {
    .message-form-trio { grid-template-columns: minmax(0, 1fr); }
}
.toggle-btns { display: flex; flex-wrap: wrap; gap: var(--jb-sp-2); }
.panel-inset + .toggle-btns { margin-top: var(--jb-sp-2); }
.toggle-btns > button { display: inline-flex; align-items: center; gap: var(--jb-sp-2); height: var(--jb-h-control); padding: 0 var(--jb-sp-3); border: 1px solid var(--jb-border-control); border-radius: var(--jb-r-md); background: none; color: var(--jb-fg-secondary); font: inherit; }
.toggle-btns > button:hover { background: var(--jb-bg-hover); color: var(--jb-fg); }
.toggle-btns > button.active { background: var(--jb-tab-selected-bg); border-color: var(--jb-tab-selected-border); color: var(--jb-fg); }
.toggle-btns > .help-text { margin: 0; }
.panel-kv-row dd > .va-sub { margin-left: var(--jb-sp-2); }

.share-mono { font-family: var(--jb-font-mono); }
.key-value { grid-column: span 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--jb-fg-secondary); }
.panel-list .activity-sub-text { white-space: normal; }
.panel-list .share-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.key-value, .panel-list .activity-item-body).is-zero { color: var(--jb-fg-tertiary); }
.share-locked > :is(.btn, .detail-panel-status-badge) { flex: none; margin-left: auto; }
.key-value:has(> .share-copy-btn) { display: flex; align-items: center; gap: var(--jb-sp-1); }
.key-value > .share-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.key-value > .toolbar-icon-btn { width: 24px; height: 24px; color: var(--jb-fg-tertiary); }
.key-value > .toolbar-icon-btn svg { width: 14px; height: 14px; }
.share-code { margin: 0; padding: var(--jb-sp-3) var(--jb-sp-4); overflow-x: auto; border-radius: var(--jb-r-panel); background: var(--jb-bg-inset); font: 12px/1.6 var(--jb-font-mono); color: var(--jb-fg); }
textarea.share-mono { min-height: 0; }
.share-check { display: flex; gap: var(--jb-sp-2); }
.share-check > input { flex: 1; min-width: 0; }
.share-check + :not(:empty) { margin-top: var(--jb-sp-3); }
.va-highlight.is-good { background: var(--jb-success-bg); border-color: var(--jb-success-border); color: var(--jb-success); }