/* Hallmark | genre: modern-minimal | macrostructure: Workbench | design-system: design.md | designed-as-app | pre-emit critique: P4 H4 E5 S4 R5 V4 */
@import "tokens.css";

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

html,
body {
    overflow-x: clip;
}

html {
    background: var(--color-paper);
    color-scheme: light;
    scroll-padding-block-start: var(--space-lg);
}

body {
    margin: 0;
    min-block-size: 100dvh;
    background:
        linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
    accent-color: var(--color-accent);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.56;
    text-align: start;
    text-rendering: optimizeLegibility;
}

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

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

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

code {
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: calc(var(--radius-input) - 2px);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    font-family: var(--font-outlier);
    font-size: 0.92em;
}

.icon {
    display: inline-block;
    flex: 0 0 auto;
    inline-size: 1.1em;
    block-size: 1.1em;
    color: currentColor;
    vertical-align: -0.16em;
    pointer-events: none;
}

.icon-sm {
    inline-size: 1rem;
    block-size: 1rem;
}

.icon-muted {
    color: var(--color-muted);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: var(--rule-fine) solid transparent;
    outline-offset: 3px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--rule-fine) solid var(--color-focus);
    outline-offset: 3px;
}

.visually-hidden:where(:not(:focus-within, :active)),
.skip-link:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.skip-link:focus {
    position: fixed;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    z-index: var(--z-toast);
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink);
    box-shadow: var(--shadow-lift);
    font-weight: 800;
}

.app-shell {
    min-block-size: 100dvh;
}

.sidebar {
    position: relative;
    z-index: var(--z-sticky);
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
    background: color-mix(in oklch, var(--color-panel), transparent 4%);
}

.brand,
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
}

.brand {
    width: fit-content;
}

.brand span:last-child,
.sidebar-user div {
    display: grid;
    min-width: 0;
}

.brand strong,
.sidebar-user strong {
    overflow: hidden;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand small,
.sidebar-user small,
.muted,
.task-meta,
.project-row small,
.task-row small,
.project-member-row small,
.field-hint,
.notification-row small,
.notification-row time,
.activity-item time,
.comment time,
.attachment-row small,
.chat-meta time {
    color: var(--color-muted);
}

.brand-mark,
.avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-family: var(--font-outlier);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    overflow: hidden;
}

.brand-mark {
    font-size: var(--text-sm);
}

.brand-mark-image {
    padding: var(--space-3xs);
    border: var(--rule-hair) solid var(--color-rule);
    background: var(--color-panel);
}

.brand-mark-image img,
.avatar-image img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.brand-mark-image img {
    object-fit: contain;
}

.avatar {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    background: var(--avatar-color, var(--color-accent));
}

.avatar-image {
    background: var(--color-panel);
}

.avatar-image img {
    object-fit: cover;
}

.nav {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    padding-block: var(--space-2xs);
    scrollbar-width: thin;
}

.nav a,
.logout-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink-2);
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.nav a.is-active,
.sidebar-user.is-active {
    border-color: var(--color-rule-2);
    background: var(--color-panel);
    color: var(--color-accent-strong);
    box-shadow: var(--shadow-card);
}

.nav-link-with-badge {
    justify-content: space-between;
}

.nav-link-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.nav-link-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.45rem;
    block-size: 1.45rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: var(--color-accent-ink);
    font-size: var(--text-xs);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.sidebar-user {
    padding: var(--space-xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    border-inline: var(--rule-hair) solid transparent;
    border-block-end: var(--rule-hair) solid transparent;
    border-radius: var(--radius-card);
    color: inherit;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.logout-form button {
    inline-size: 100%;
    justify-content: flex-start;
    border-color: var(--color-rule);
    background: var(--color-panel);
}

.main-panel {
    min-width: 0;
    padding: clamp(var(--space-sm), 3vw, var(--space-lg));
}

.auth-page .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: clamp(var(--space-sm), 4vw, var(--space-xl));
}

.auth-page .main-panel {
    inline-size: min(66rem, 100%);
    padding: 0;
}

.auth-card {
    display: grid;
    gap: var(--space-md);
    align-items: stretch;
    min-width: 0;
}

.auth-card > * {
    min-width: 0;
}

.auth-card .primary-button {
    inline-size: 100%;
}

.auth-card .secondary-button {
    inline-size: 100%;
}

.auth-copy {
    display: grid;
    align-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.auth-copy h1 {
    margin: 0;
    max-width: 11ch;
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.auth-copy p {
    max-width: 48ch;
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-md);
}

.page-header {
    display: grid;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.page-header > div:first-child {
    min-width: 0;
}

.page-header h1,
.panel h2,
.section-heading h2,
.kanban-column h3,
.empty-state h1,
.empty-state h2,
.empty-inline h3 {
    margin: 0;
    min-width: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.page-header h1 {
    max-width: 18ch;
    font-size: clamp(1.45rem, 1.65vw + 0.95rem, 2.25rem);
    font-weight: 850;
}

.panel h2,
.section-heading h2,
.kanban-column h3,
.empty-inline h3 {
    font-size: var(--text-lg);
}

.empty-state h1,
.empty-state h2 {
    font-size: var(--text-xl);
}

.page-header-wide h1 {
    max-width: 24ch;
}

.page-header p {
    max-width: 76ch;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

.eyebrow {
    margin: 0 0 var(--space-2xs);
    color: var(--color-accent-strong);
    font-family: var(--font-outlier);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-tabs {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin: calc(0rem - var(--space-xs)) 0 var(--space-md);
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    scrollbar-width: thin;
}

.project-tabs a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.35rem;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-weight: 850;
    white-space: nowrap;
    transition:
        background-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out);
}

.project-tabs a.is-active {
    background: var(--color-ink);
    color: var(--color-paper);
}

.panel,
.metric {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
}

.panel {
    padding: clamp(var(--space-sm), 2vw, var(--space-md));
}

.metrics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.my-work-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.metric {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-sm);
}

.work-stat {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
}

.work-stat span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.work-stat strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.work-stat.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.work-stat.is-danger strong {
    color: var(--color-danger);
}

.work-stat.is-accent {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.work-stat.is-accent strong {
    color: var(--color-accent-strong);
}

.work-stat.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.work-stat.is-warning strong {
    color: var(--color-warning);
}

.work-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin-block-end: var(--space-md);
    align-items: start;
}

.task-command-panel {
    display: grid;
    gap: var(--space-md);
    margin-block-end: var(--space-md);
    container: task-command / inline-size;
}

.task-command-panel.is-overdue {
    border-color: var(--color-danger);
    background:
        linear-gradient(135deg, var(--color-danger-soft), transparent 62%),
        var(--color-panel);
}

.task-command-main,
.task-command-copy {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
}

.task-command-copy {
    gap: var(--space-3xs);
}

.task-command-copy h2 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.12;
    letter-spacing: 0;
}

.task-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.task-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    margin-block-start: var(--space-2xs);
}

.task-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    width: fit-content;
    min-block-size: 1.65rem;
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
    white-space: nowrap;
}

.task-scope-chip .icon {
    color: var(--color-accent-strong);
}

.task-status-shell {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.task-status-shell h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    line-height: 1.2;
}

.task-status-flow {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    padding-block-end: var(--space-2xs);
    scroll-padding-inline: var(--space-xs);
    scrollbar-width: thin;
}

.task-status-step {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.45rem;
    padding: var(--space-2xs) var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

span.task-status-step {
    cursor: default;
}

.task-status-step:disabled {
    opacity: 1;
}

.task-status-step.is-current {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.task-status-dot {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 999px;
    background: var(--color-rule-2);
}

.task-status-step.is-current .task-status-dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.task-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.75rem), 1fr));
    gap: var(--space-xs);
}

.task-summary-card {
    display: grid;
    align-content: start;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: color-mix(in oklch, var(--color-panel), var(--color-paper-2) 28%);
}

.task-summary-card span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.task-summary-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

.task-summary-label .icon {
    color: var(--color-accent-strong);
}

.task-summary-card strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.task-summary-card small {
    color: var(--color-muted);
}

.task-summary-card.is-accent {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.task-summary-card.is-accent strong {
    color: var(--color-accent-strong);
}

.task-summary-card.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.task-summary-card.is-danger strong {
    color: var(--color-danger);
}

.task-summary-card.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.task-summary-card.is-warning strong,
.task-summary-card.is-warning .task-summary-label .icon {
    color: var(--color-warning);
}

.task-progress-meter {
    overflow: hidden;
    block-size: 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
}

.task-progress-meter span {
    display: block;
    inline-size: var(--progress, 0%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.task-edit-panel {
    scroll-margin-block-start: var(--space-lg);
}

.task-side-panel {
    scroll-margin-block-start: var(--space-lg);
}

.task-next-panel {
    gap: var(--space-sm);
}

.task-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    padding-block: var(--space-sm) var(--space-xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.task-next-action strong,
.task-next-action small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-next-action strong {
    color: var(--color-ink);
    font-weight: 850;
}

.task-next-action small {
    margin-block-start: var(--space-3xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.task-next-action .secondary-button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-block-start: var(--space-2xs);
}

.task-next-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-card);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.task-jump-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
}

.task-jump-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-width: 0;
    min-block-size: 2.4rem;
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.task-jump-list a .icon {
    color: var(--color-accent-strong);
}

.task-collab-panel {
    gap: var(--space-md);
}

.comment-composer .form-fieldset {
    background: var(--color-paper-2);
}

.comment-composer textarea {
    min-block-size: 7rem;
}

.task-timeline {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    min-width: 0;
}

.task-timeline-item::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--space-sm) + 0.85rem) calc(var(--space-sm) * -1);
    inset-inline-start: 1rem;
    inline-size: var(--rule-hair);
    background: var(--color-rule);
}

.task-timeline-item:last-child::before {
    display: none;
}

.task-timeline-marker {
    position: relative;
    z-index: var(--z-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-accent-strong);
}

.task-timeline-item.is-activity .task-timeline-marker {
    color: var(--color-muted);
}

.task-timeline-card {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding-block-end: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.task-timeline-item:last-child .task-timeline-card {
    padding-block-end: 0;
    border-block-end: 0;
}

.task-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: baseline;
}

.task-timeline-meta strong {
    color: var(--color-ink);
    font-weight: 850;
}

.task-timeline-meta time {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.task-timeline-card p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink-2);
}

.task-timeline-item.is-comment .task-timeline-card p {
    color: var(--color-ink);
}

.timeline-empty {
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border: var(--rule-hair) dashed var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.timeline-empty .icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    color: var(--color-accent-strong);
}

.focus-task-list,
.quick-view-list {
    display: grid;
    gap: var(--space-xs);
}

.focus-task-row,
.quick-view-chip {
    min-width: 0;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.focus-task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
}

.focus-task-row.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.focus-task-main {
    display: grid;
    min-width: 0;
}

.focus-task-main strong,
.quick-view-chip strong {
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
}

.focus-badge {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.focus-task-row.is-danger .focus-badge {
    background: var(--color-danger);
    color: var(--color-accent-ink);
}

.quick-view-list {
    grid-template-columns: minmax(0, 1fr);
}

.quick-view-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: center;
    min-block-size: 4rem;
    padding: var(--space-xs);
}

.quick-view-chip span {
    display: grid;
    min-width: 0;
}

.quick-view-chip small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-view-chip em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-family: var(--font-outlier);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.quick-view-chip.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.quick-view-chip.is-active,
.quick-view-chip.is-active .icon,
.quick-view-chip.is-active strong {
    color: var(--color-accent-strong);
}

.dashboard-action-panel {
    margin-block-end: var(--space-md);
}

.dashboard-action-panel .section-heading {
    align-items: start;
}

.dashboard-action-panel .section-heading p:not(.eyebrow) {
    margin: var(--space-3xs) 0 0;
    max-inline-size: 62ch;
}

.dashboard-action-grid,
.dashboard-focus-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.action-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: center;
    min-block-size: 4.25rem;
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.action-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
}

.action-chip-body {
    display: grid;
    min-width: 0;
}

.action-chip strong,
.dashboard-focus-main strong {
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
}

.action-chip small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-chip em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-family: var(--font-outlier);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.action-chip.is-accent {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.action-chip.is-accent,
.action-chip.is-accent .icon,
.action-chip.is-accent strong {
    color: var(--color-accent-strong);
}

.action-chip.is-accent em {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.action-chip.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.action-chip.is-danger,
.action-chip.is-danger .icon,
.action-chip.is-danger strong {
    color: var(--color-danger);
}

.action-chip.is-danger em {
    background: var(--color-danger);
    color: var(--color-accent-ink);
}

.action-chip.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.action-chip.is-warning,
.action-chip.is-warning .icon,
.action-chip.is-warning strong {
    color: var(--color-warning);
}

.action-chip.is-warning em {
    background: var(--color-warning);
    color: var(--color-accent-ink);
}

.dashboard-focus-list {
    display: grid;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.dashboard-focus-list ul {
    display: grid;
    gap: var(--space-xs);
}

.dashboard-focus-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        box-shadow var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.dashboard-focus-row.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.dashboard-focus-row.is-danger .focus-badge {
    background: var(--color-danger);
    color: var(--color-accent-ink);
}

.dashboard-focus-row.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.dashboard-focus-row.is-warning .focus-badge {
    background: var(--color-warning);
    color: var(--color-accent-ink);
}

.dashboard-focus-main {
    display: grid;
    min-width: 0;
}

.dashboard-focus-row > .focus-badge,
.dashboard-focus-row > .priority {
    justify-self: start;
}

.saved-view-tools {
    display: grid;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.saved-view-form {
    display: grid;
    gap: var(--space-2xs);
}

.saved-view-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.saved-view-list {
    display: grid;
    gap: var(--space-xs);
}

.saved-view-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.saved-view-row > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    min-block-size: 3.25rem;
    padding: var(--space-xs);
}

.saved-view-row span {
    display: grid;
    min-width: 0;
}

.saved-view-row strong {
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
}

.saved-view-row small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-view-row form {
    padding-inline-end: var(--space-xs);
}

.saved-view-row .text-button {
    min-inline-size: 2.5rem;
    padding-inline: var(--space-2xs);
}

.saved-view-row.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.saved-view-row.is-active,
.saved-view-row.is-active .icon,
.saved-view-row.is-active strong {
    color: var(--color-accent-strong);
}

.metric span {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw + 0.5rem, 2.2rem);
    font-weight: 850;
    line-height: 0.9;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.metric.danger strong {
    color: var(--color-danger);
}

.content-grid,
.chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.side-stack,
.form-stack,
.project-list,
.task-list,
.comment-list,
.member-list,
.project-member-list,
.chat-list,
.checklist,
.attachment-list,
.activity-list,
.notification-list,
.search-results {
    display: grid;
    gap: var(--space-sm);
}

.task-list.compact {
    gap: var(--space-xs);
}

.section-heading {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-sm);
}

.section-heading a {
    width: fit-content;
    color: var(--color-accent-strong);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: var(--rule-hair);
    text-underline-offset: 0.22em;
}

.section-heading .muted {
    font-variant-numeric: tabular-nums;
}

.project-row,
.task-row,
.task-card,
.notification-row,
.attachment-row,
.checklist-row,
.project-member-row,
.member-row {
    min-width: 0;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.project-row,
.task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
}

.project-row > span,
.task-row > span {
    min-width: 0;
}

.task-row {
    grid-template-columns: minmax(0, 1fr);
}

.project-row:focus-visible,
.task-row:focus-visible,
.focus-task-row:focus-visible,
.dashboard-focus-row:focus-visible,
.quick-view-chip:focus-visible,
.action-chip:focus-visible,
.saved-view-row > a:focus-visible,
.notification-row:focus-visible,
.search-result-row:focus-visible,
.project-tabs a:focus-visible,
.kanban-jump-nav a:focus-visible,
.task-jump-list a:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-panel);
    box-shadow:
        inset 0 0 0 var(--rule-fine) var(--color-accent-soft),
        var(--shadow-card);
}

.task-row-side {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.project-row strong,
.task-row strong,
.task-title {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
    letter-spacing: 0;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    margin-block-start: var(--space-3xs);
    font-size: var(--text-sm);
}

.meta-piece,
.task-title-line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-width: 0;
}

.task-title-line {
    max-inline-size: 100%;
}

.meta-piece > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-row strong.task-title-line {
    display: inline-flex;
}

.task-title-line > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.private-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: 1.45rem;
    padding-inline: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.progress-ring {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-inline-size: 3.25rem;
    min-block-size: 2rem;
    padding-inline: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-family: var(--font-outlier);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.project-summary {
    margin-block-end: var(--space-md);
}

.project-row-rich {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.project-row-rich.is-overdue {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.project-row-main {
    display: grid;
    align-content: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.project-row-side {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.project-progress {
    display: block;
    inline-size: 100%;
    block-size: 0.45rem;
    overflow: clip;
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
}

.project-progress > span {
    display: block;
    inline-size: var(--progress, 0%);
    max-inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.project-row-rich.is-overdue .project-progress > span {
    background: var(--color-danger);
}

.notification-summary {
    margin-block-end: var(--space-md);
}

.notification-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.notification-category-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
}

.notification-category-card .icon {
    color: var(--color-accent-strong);
}

.notification-category-card span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.notification-category-card strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.notification-category-card.is-mention {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.notification-category-card.is-mention strong,
.notification-category-card.is-mention .icon {
    color: var(--color-accent-strong);
}

.notification-category-card.is-deadline {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.notification-category-card.is-deadline strong,
.notification-category-card.is-deadline .icon {
    color: var(--color-warning);
}

.notification-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.notification-panel {
    min-width: 0;
}

.notification-priority-panel {
    border-color: var(--color-rule-2);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent-soft) 78%, transparent), transparent 62%),
        var(--color-panel);
}

.notification-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm);
    container: notification-row / inline-size;
}

.notification-row.is-unread {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.notification-row.is-attention {
    box-shadow:
        inset 3px 0 0 var(--color-accent),
        var(--shadow-card);
}

.notification-row.tone-danger {
    border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-rule));
}

.notification-row.tone-danger.is-attention {
    box-shadow:
        inset 3px 0 0 var(--color-danger),
        var(--shadow-card);
}

.notification-row.tone-info.is-attention {
    box-shadow:
        inset 3px 0 0 var(--color-accent),
        var(--shadow-card);
}

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-accent-strong);
}

.notification-main {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
}

.notification-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

.notification-type,
.notification-category,
.notification-unread {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.45rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
    line-height: 1;
}

.notification-unread {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.notification-row.tone-danger .notification-type {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.notification-row.tone-accent .notification-type {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.notification-row.tone-info .notification-type {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.notification-category {
    background: var(--color-panel);
    color: var(--color-muted);
}

.notification-row strong,
.notification-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-row .task-meta {
    display: flex;
}

.notification-body {
    display: -webkit-box;
    overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.notification-row-action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-block-size: 1.7rem;
    margin-block-start: var(--space-2xs);
    padding-inline: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-accent-strong);
    font-size: var(--text-xs);
    font-weight: 850;
}

.notification-row time {
    grid-column: 2;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.notification-empty-state .icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--color-accent-strong);
}

.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15.5rem, 82vw);
    gap: var(--space-xs);
    overflow-x: auto;
    padding: var(--space-2xs) var(--space-2xs) var(--space-xs);
    margin-inline: calc(0rem - var(--space-2xs));
    scroll-padding-inline: var(--space-xs);
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

.kanban-jump-nav {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin-block: var(--space-xs) var(--space-sm);
    padding-block-end: var(--space-2xs);
    scroll-padding-inline: var(--space-xs);
    scrollbar-width: thin;
}

.kanban-jump-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2xs);
    position: relative;
    min-block-size: 2.35rem;
    padding: var(--space-2xs) var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    white-space: nowrap;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.kanban-jump-nav a::before {
    content: "";
    inline-size: 0.42rem;
    block-size: 0.42rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity var(--dur-short) var(--ease-out),
        transform var(--dur-short) var(--ease-out);
}

.kanban-jump-nav a span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.65rem;
    block-size: 1.45rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-muted);
    font-family: var(--font-outlier);
    font-size: var(--text-xs);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kanban-jump-nav a.is-empty {
    color: var(--color-muted);
}

.kanban-jump-nav a.is-active,
.kanban-jump-nav a[aria-current="location"] {
    border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-rule));
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.kanban-jump-nav a.is-active::before,
.kanban-jump-nav a[aria-current="location"]::before {
    opacity: 1;
    transform: scale(1);
}

.kanban-jump-nav a.is-active span:last-child,
.kanban-jump-nav a[aria-current="location"] span:last-child {
    background: var(--color-panel);
    color: var(--color-accent-strong);
}

#my-board {
    margin-block-start: var(--space-md);
}

#my-board .section-heading {
    margin-block-end: var(--space-md);
}

.my-work-kanban {
    padding-block-start: var(--space-sm);
}

.my-work-kanban .kanban-column {
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
}

.kanban-column {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    min-block-size: 26rem;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    scroll-snap-align: start;
    scroll-margin-inline-start: var(--space-xs);
    scroll-margin-block-start: var(--space-md);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        box-shadow var(--dur-short) var(--ease-out);
}

.kanban-column.is-current {
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-rule));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.kanban-column h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    letter-spacing: 0;
}

.kanban-column h3 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    block-size: 1.55rem;
    padding-inline: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-muted);
    font-family: var(--font-outlier);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kanban-column.is-drop-target {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    box-shadow: inset 0 0 0 var(--rule-fine) var(--color-accent);
}

.task-card {
    position: relative;
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    container: task-card / inline-size;
}

.task-card.has-due-overdue,
.task-row.has-due-overdue {
    border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-rule));
    box-shadow:
        inset 3px 0 0 var(--color-danger),
        var(--shadow-card);
}

.task-card.has-due-today,
.task-card.has-due-soon,
.task-card.has-priority-high:not(.has-due-overdue):not(.has-due-today):not(.has-due-soon),
.task-card.has-priority-urgent:not(.has-due-overdue),
.task-row.has-due-today,
.task-row.has-due-soon {
    box-shadow:
        inset 3px 0 0 var(--color-warning),
        var(--shadow-card);
}

.task-card-link {
    display: grid;
    gap: var(--space-2xs);
    min-width: 0;
}

.task-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

.task-card-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    min-width: 0;
}

.task-card-progress,
.task-card-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: 1.6rem;
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.task-card-progress {
    flex: 1 1 6.5rem;
    min-inline-size: 5.5rem;
}

.task-card-progress-track {
    display: block;
    overflow: hidden;
    flex: 1 1 auto;
    min-inline-size: 3.5rem;
    block-size: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
}

.task-card-progress-track span {
    display: block;
    inline-size: var(--progress, 0%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.task-card-stat {
    padding-inline: var(--space-2xs);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
}

.task-card-stat .icon {
    color: var(--color-accent-strong);
}

.task-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    align-items: center;
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.task-card-status-select {
    min-block-size: 2.25rem;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
}

.task-card-submit {
    min-block-size: 2.25rem;
    padding-inline: var(--space-xs);
    color: var(--color-accent-strong);
}

.task-card[data-updating="true"] {
    opacity: 0.72;
}

.task-card.is-new {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    box-shadow:
        inset 0 0 0 var(--rule-fine) var(--color-accent),
        var(--shadow-card);
}

.task-card.is-draggable {
    cursor: grab;
}

.task-card.is-dragging {
    opacity: 0.58;
    cursor: grabbing;
    transform: translateY(-1px);
}

.task-card:focus-within {
    border-color: var(--color-accent);
    outline: var(--rule-fine) solid var(--color-focus);
    outline-offset: var(--space-3xs);
}

.task-filter-panel {
    margin-block-end: var(--space-md);
}

.task-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: end;
}

.task-filter-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.task-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    white-space: nowrap;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.task-filter-chip.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.my-work-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: end;
}

.task-filter-check {
    justify-content: center;
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.task-filter-check:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.task-filter-check:has(input:focus-visible) {
    outline: var(--rule-fine) solid var(--color-focus);
    outline-offset: var(--space-3xs);
}

.task-filter-check:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.kanban-empty {
    margin: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) dashed var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.kanban-column:has([data-task-card]) .kanban-empty {
    display: none;
}

.kanban-quick-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    align-items: center;
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.kanban-quick-add input {
    min-block-size: 2.5rem;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    font-size: var(--text-sm);
}

.kanban-quick-add .secondary-button {
    inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding: 0;
}

.kanban-quick-add[data-submitting="true"] {
    opacity: 0.72;
}

.search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.search-panel {
    margin-block-end: var(--space-md);
}

.search-form-enhanced {
    grid-template-areas:
        "search-label"
        "search-input"
        "search-hint"
        "search-actions";
    align-items: start;
}

.search-field {
    display: grid;
    min-width: 0;
}

.search-form-enhanced .search-field {
    display: contents;
}

.search-form-enhanced .search-field > label {
    grid-area: search-label;
}

.search-input-shell {
    grid-area: search-input;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2xs);
    align-items: center;
    min-block-size: 3rem;
    padding-inline: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    background: var(--color-panel);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        box-shadow var(--dur-short) var(--ease-out);
}

.search-input-shell input {
    min-block-size: 2.875rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.search-input-shell:focus-within {
    border-color: var(--color-focus);
    box-shadow: none;
}

.search-input-shell input:focus,
.search-input-shell input:focus-visible {
    outline: 0;
}

.search-form-enhanced .search-field > .field-hint {
    grid-area: search-hint;
}

.search-actions,
.search-form-enhanced > :is(.primary-button, .secondary-button) {
    grid-area: search-actions;
}

.search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.search-actions > :is(.primary-button, .secondary-button),
.search-form-enhanced > :is(.primary-button, .secondary-button) {
    min-block-size: 3rem;
}

.search-warning {
    margin: 0;
    color: var(--color-danger);
    font-weight: 850;
}

.search-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.search-insight-card {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
}

.search-insight-card span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.search-insight-card strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.search-insight-card small {
    color: var(--color-muted);
}

.search-insight-card.is-accent {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.search-insight-card.is-accent strong {
    color: var(--color-accent-strong);
}

.search-insight-card.is-danger {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.search-insight-card.is-danger strong {
    color: var(--color-danger);
}

.search-insight-card.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.search-insight-card.is-warning strong {
    color: var(--color-warning);
}

.search-result-overview,
.search-scope-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.search-result-overview .action-chip {
    background: var(--color-panel);
}

.search-results {
    margin-block-start: var(--space-md);
}

.search-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.search-result-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.search-result-row.has-due-overdue {
    border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-rule));
    box-shadow:
        inset 3px 0 0 var(--color-danger),
        var(--shadow-card);
}

.search-project-row {
    grid-template-columns: auto minmax(0, 1fr);
}

.search-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.search-result-main {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
}

.search-result-main strong {
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
}

.search-snippet {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-neutral);
    overflow-wrap: anywhere;
}

.search-result-side {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.search-guide-panel {
    margin-block-start: var(--space-md);
}

.search-scope-item {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.search-scope-item .icon {
    color: var(--color-accent-strong);
}

.search-scope-item strong {
    color: var(--color-ink);
    font-weight: 850;
}

.search-scope-item span {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.search-empty-state .icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--color-accent-strong);
}

.search-example-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.search-example-list code {
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-outlier);
}

.priority,
.due-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    width: fit-content;
    min-block-size: 1.65rem;
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 850;
    white-space: nowrap;
}

.priority-high {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.priority-urgent,
.due-badge.is-overdue {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.due-badge.is-today,
.due-badge.is-soon {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.priority-low {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.due-badge {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.due-badge.is-muted {
    background: var(--color-paper-3);
    color: var(--color-muted);
}

label {
    display: block;
    margin-block-end: var(--space-3xs);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    padding: 0.58rem var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-input);
    outline: var(--rule-fine) solid transparent;
    outline-offset: 1px;
    background: var(--color-panel);
    color: var(--color-ink);
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out);
}

textarea {
    min-block-size: 7rem;
    resize: vertical;
}

select[multiple] {
    min-block-size: 7rem;
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: var(--space-sm);
    block-size: var(--space-sm);
    min-inline-size: var(--space-sm);
    min-block-size: var(--space-sm);
    padding: 0;
    border: 0;
    outline-offset: var(--space-3xs);
    background: transparent;
    accent-color: var(--color-accent);
    cursor: pointer;
}

input[type="range"] {
    min-block-size: 2rem;
    padding-inline: 0;
    accent-color: var(--color-accent);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-muted);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--color-accent);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

input:where(:user-invalid, [aria-invalid="true"]),
select:where(:user-invalid, [aria-invalid="true"]),
textarea:where(:user-invalid, [aria-invalid="true"]) {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

form[data-dirty-guard][data-dirty="true"] {
    border-color: color-mix(in srgb, var(--color-warning) 72%, var(--color-rule));
    box-shadow: inset 0 0 0 var(--rule-fine) color-mix(in srgb, var(--color-warning) 34%, transparent);
}

.field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.field-hint {
    margin: var(--space-3xs) 0 0;
    font-size: var(--text-sm);
}

.form-fieldset {
    display: grid;
    gap: var(--space-xs);
    min-inline-size: 0;
    margin: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.form-fieldset legend {
    padding-inline: var(--space-2xs);
    color: var(--color-ink);
    font-weight: 850;
}

.required-mark {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.35rem;
    margin-inline-start: var(--space-3xs);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: var(--text-xs);
    font-weight: 850;
    line-height: 1;
    vertical-align: 0.08em;
}

.project-create-form {
    scroll-margin-block-start: var(--space-lg);
}

.disclosure {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.disclosure summary {
    min-block-size: 2.5rem;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-2);
    font-weight: 850;
    cursor: pointer;
}

.disclosure > .form-stack {
    padding: 0 var(--space-sm) var(--space-sm);
}

.primary-button,
.secondary-button,
.text-button,
.mention-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    max-inline-size: 100%;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.primary-button > span,
.secondary-button > span,
.text-button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-button {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.secondary-button {
    border-color: var(--color-rule-2);
    background: var(--color-panel);
    color: var(--color-ink-2);
}

.secondary-button.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.text-button {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    color: var(--color-danger);
}

form[data-submitting="true"] button[type="submit"] {
    opacity: 0.7;
    cursor: wait;
}

form[aria-busy="true"] {
    cursor: wait;
}

form[aria-busy="true"] :is(input, select, textarea, button) {
    cursor: wait;
}

.flash-stack {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.flash,
.toast {
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    color: var(--color-ink);
    box-shadow: var(--shadow-card);
    font-weight: 750;
}

.flash-success,
.toast[data-tone="success"] {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.flash-error,
.toast[data-tone="error"] {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.toast-stack {
    position: fixed;
    inset-block-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-xs);
    width: min(24rem, calc(100% - var(--space-lg)));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    animation: toast-in var(--dur-long) var(--ease-out);
}

.save-status {
    position: fixed;
    inset-block-end: max(var(--space-sm), env(safe-area-inset-bottom));
    inset-inline-end: max(var(--space-sm), env(safe-area-inset-right));
    z-index: calc(var(--z-toast) - 1);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    max-inline-size: min(22rem, calc(100% - var(--space-lg)));
    min-block-size: 2.75rem;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--rule-hair) solid color-mix(in srgb, var(--color-warning) 70%, var(--color-rule));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-warning-soft) 84%, var(--color-panel));
    color: var(--color-warning);
    box-shadow: var(--shadow-lift);
    font-size: var(--text-sm);
    font-weight: 850;
    line-height: 1.25;
    pointer-events: none;
    animation: toast-in var(--dur-long) var(--ease-out);
}

.save-status[hidden] {
    display: none;
}

.save-status-dot {
    flex: 0 0 auto;
    inline-size: 0.62rem;
    block-size: 0.62rem;
    border-radius: var(--radius-pill);
    background: currentColor;
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, currentColor 16%, transparent);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.comment,
.activity-item {
    padding-block: var(--space-xs);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.comment:last-child,
.activity-item:last-child {
    border-block-end: 0;
}

.comment p,
.chat-message p {
    margin: var(--space-3xs) 0 0;
}

.gantt-panel {
    overflow: clip;
}

.gantt-scroll {
    overflow-x: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    scrollbar-width: thin;
}

.gantt-grid {
    display: grid;
    grid-template-columns: 17.5rem minmax(47.5rem, 1fr);
    min-width: 60rem;
    background: var(--color-panel);
}

.gantt-head,
.gantt-task-info,
.gantt-track {
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.gantt-head {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    min-block-size: 2.75rem;
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
}

.gantt-task-head {
    display: flex;
    align-items: center;
    padding-inline: var(--space-sm);
    border-inline-end: var(--rule-hair) solid var(--color-rule);
}

.gantt-timeline-head {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--gantt-weeks), minmax(4.375rem, 1fr));
}

.gantt-timeline-head span:not(.gantt-today-line) {
    display: flex;
    align-items: center;
    padding-inline-start: var(--space-2xs);
    border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.gantt-task-info {
    display: grid;
    align-content: center;
    min-block-size: 3.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-inline-end: var(--rule-hair) solid var(--color-rule);
    background: var(--color-panel);
}

.gantt-task-info strong {
    overflow: hidden;
    color: var(--color-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-track {
    position: relative;
    min-block-size: 3.75rem;
    background-image: linear-gradient(to right, var(--color-rule) var(--rule-hair), transparent var(--rule-hair));
    background-size: calc(100% / var(--gantt-weeks)) 100%;
}

.gantt-bar {
    position: absolute;
    inset-block-start: var(--space-xs);
    display: flex;
    align-items: center;
    min-inline-size: 2.75rem;
    block-size: 2.25rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.gantt-bar-progress {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--color-accent);
}

.gantt-bar-label {
    position: relative;
    z-index: var(--z-base);
    padding-inline: var(--space-xs);
    color: var(--color-accent-ink);
    font-family: var(--font-outlier);
    font-size: var(--text-xs);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.gantt-bar-backlog {
    background: var(--color-paper-3);
}

.gantt-bar-todo {
    background: var(--color-accent-soft);
}

.gantt-bar-doing {
    background: var(--color-accent);
}

.gantt-bar-review {
    background: var(--color-warning);
}

.gantt-bar-done {
    background: var(--color-success);
}

.gantt-bar.is-overdue {
    background: var(--color-danger);
}

.gantt-today-line {
    position: absolute;
    inset-block: 0;
    z-index: var(--z-base);
    inline-size: var(--rule-fine);
    background: var(--color-danger);
}

.empty-inline,
.empty-state {
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
    border: var(--rule-hair) dashed var(--color-rule-2);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.empty-inline {
    padding: var(--space-sm);
}

.empty-state {
    max-inline-size: 36rem;
    margin: 8vh auto;
    padding: var(--space-lg);
}

.empty-inline > .icon,
.empty-state > .icon {
    padding: var(--space-3xs);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-accent-strong);
}

.empty-inline > .icon {
    inline-size: 2rem;
    block-size: 2rem;
}

.empty-state > .icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
}

.empty-inline p,
.empty-state p {
    max-inline-size: 54ch;
    margin: 0;
}

.empty-inline .primary-button,
.empty-inline .secondary-button,
.empty-state .primary-button,
.empty-state .secondary-button {
    margin-block-start: var(--space-2xs);
}

.error-state {
    display: grid;
    gap: var(--space-sm);
    inline-size: min(46rem, 100%);
    max-inline-size: 46rem;
    margin: 8vh auto;
    padding: clamp(var(--space-md), 4vw, var(--space-xl));
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
}

.error-state-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    color: var(--color-accent-strong);
}

.error-state-forbidden .error-state-icon {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.error-state h1 {
    margin: 0;
    max-inline-size: 14ch;
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.error-state p {
    max-inline-size: 58ch;
    margin: 0;
    color: var(--color-muted);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-2xs);
}

.error-actions > .primary-button,
.error-actions > .secondary-button {
    flex: 1 1 12rem;
}

.error-hints {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.error-hints > div {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
}

.error-hints dt {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 850;
}

.error-hints dd {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.empty-inline-compact {
    gap: var(--space-2xs);
    padding: var(--space-xs);
}

.empty-inline-compact > .icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
}

.member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "member-avatar"
        "member-meta"
        "member-name"
        "member-email"
        "member-role"
        "member-password"
        "member-photo"
        "member-active"
        "member-save";
    gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm);
}

.member-row.is-inactive {
    background: color-mix(in oklch, var(--color-paper-2), var(--color-panel) 32%);
}

.member-row.is-inactive > .avatar {
    opacity: 0.72;
    filter: grayscale(0.35);
}

.member-row > .avatar {
    grid-area: member-avatar;
}

.member-row > div,
.member-profile-meta {
    min-width: 0;
}

.member-profile-meta {
    grid-area: member-meta;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
    align-self: stretch;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
}

.member-status-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: 850;
    line-height: 1;
}

.member-status-chip.is-inactive {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.member-meta-item {
    display: grid;
    gap: 0;
    min-width: min(100%, 8rem);
}

.member-meta-item small {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 750;
}

.member-meta-item strong,
.member-meta-item time {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.member-field-name {
    grid-area: member-name;
}

.member-field-email {
    grid-area: member-email;
}

.member-field-role {
    grid-area: member-role;
}

.member-field-password {
    grid-area: member-password;
}

.member-field-avatar {
    grid-area: member-photo;
}

.member-field-name,
.member-field-email,
.member-field-role,
.member-field-password,
.member-field-avatar,
.settings-form .field-grid > div {
    display: grid;
    grid-template-rows: auto auto minmax(1.25rem, auto);
    align-content: start;
}

.member-row :is(.member-field-name, .member-field-email, .member-field-role, .member-field-password, .member-field-avatar) .field-hint,
.settings-form .field-grid > div > .field-hint {
    margin-block-start: var(--space-3xs);
    margin-block-end: 0;
}

.member-avatar-remove {
    margin-block-start: var(--space-2xs);
}

.member-row > .check-field {
    grid-area: member-active;
    align-self: center;
}

.member-row > .secondary-button {
    grid-area: member-save;
    align-self: center;
    justify-self: start;
}

.team-summary {
    margin-block-end: var(--space-md);
}

.team-add-form {
    align-content: start;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.profile-form {
    align-content: start;
}

.settings-form {
    align-content: start;
}

.profile-actions {
    display: flex;
    justify-content: flex-start;
}

.profile-overview-panel,
.profile-security-panel {
    display: grid;
    gap: var(--space-sm);
}

.profile-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: center;
    min-width: 0;
}

.profile-identity h2 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 850;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.profile-identity p {
    margin: var(--space-3xs) 0 0;
    overflow-wrap: anywhere;
}

.profile-avatar {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: var(--text-lg);
}

.profile-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.profile-meta-item {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.profile-meta-item small {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 800;
}

.profile-meta-item strong,
.profile-meta-item time {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.profile-security-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-security-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    min-width: 0;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 750;
    line-height: 1.5;
}

.profile-security-list .icon {
    margin-block-start: 0.08rem;
    color: var(--color-accent-strong);
}

.brand-preview-panel {
    display: grid;
    gap: var(--space-sm);
}

.brand-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: center;
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.brand-preview > span:last-child {
    display: grid;
    min-width: 0;
}

.brand-preview strong {
    overflow: hidden;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 850;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-preview small {
    overflow: hidden;
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-preview-mark {
    inline-size: 3rem;
    block-size: 3rem;
}

.manual-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.manual-content {
    display: grid;
    gap: var(--space-sm);
    max-inline-size: 72rem;
}

.manual-content h2,
.manual-content h3,
.manual-content h4 {
    margin: var(--space-md) 0 0;
    color: var(--color-ink);
    letter-spacing: 0;
}

.manual-content h2:first-child,
.manual-content h3:first-child,
.manual-content h4:first-child {
    margin-block-start: 0;
}

.manual-content h2 {
    font-size: var(--text-xl);
}

.manual-content h3 {
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-lg);
}

.manual-content p,
.manual-content li {
    max-inline-size: 76ch;
    color: var(--color-ink-2);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.manual-content ul,
.manual-content ol {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding-inline-start: var(--space-md);
}

.manual-content a {
    color: var(--color-accent-strong);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.manual-content code {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: calc(var(--radius-input) - 3px);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-outlier);
    font-size: 0.92em;
}

.manual-content :not(pre) > code {
    padding: 0.08rem 0.32rem;
}

.manual-content pre {
    max-inline-size: 100%;
    margin: 0;
    padding: var(--space-sm);
    overflow-x: auto;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.manual-content pre code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: pre;
}

.manual-side-panel {
    align-content: start;
}

.check-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
    min-block-size: 2.75rem;
    margin: 0;
    color: var(--color-ink-2);
    overflow-wrap: anywhere;
}

.check-field input {
    flex: 0 0 auto;
}

.mention-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-xs);
}

.mention-chip {
    min-block-size: 2rem;
    padding: var(--space-3xs) var(--space-xs);
    border-color: var(--color-rule);
    background: var(--color-paper-3);
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
}

.checklist-row,
.attachment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs);
}

.project-member-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "member-avatar member-info"
        "member-action member-action";
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs);
}

.project-member-row > .avatar {
    grid-area: member-avatar;
}

.project-member-row > span:not(.avatar) {
    grid-area: member-info;
    min-width: 0;
}

.project-member-row > form {
    grid-area: member-action;
    justify-self: start;
}

.project-member-row strong,
.project-member-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checklist-row form:first-child {
    min-width: 0;
}

.checklist-row .check-field {
    inline-size: 100%;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-input);
}

.checklist-row:focus-within {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 var(--rule-fine) var(--color-accent-soft);
}

.checklist-row.is-done {
    background: var(--color-paper-2);
}

.checklist-row.is-done .check-field {
    color: var(--color-muted);
    text-decoration: line-through;
}

.attachment-row a,
.attachment-link {
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 850;
}

.attachment-row > div {
    min-width: 0;
}

.attachment-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    max-inline-size: 100%;
}

.attachment-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.attachment-link .icon {
    color: var(--color-accent-strong);
}

.chat-panel {
    min-block-size: 32rem;
}

.chat-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    padding-block-end: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.chat-message > div {
    min-width: 0;
}

.chat-message:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.chat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: baseline;
}

.chat-meta strong,
.chat-meta time {
    min-width: 0;
    overflow-wrap: anywhere;
}

.github-main-stack,
.github-file-list,
.github-commit-list {
    display: grid;
    gap: var(--space-sm);
}

.github-compare-fields {
    grid-template-columns: minmax(0, 1fr);
}

.github-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.github-inline-form {
    display: inline-flex;
    margin: 0;
}

.github-safe-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid color-mix(in srgb, var(--color-accent) 38%, var(--color-rule));
    border-radius: var(--radius-card);
    background: var(--color-accent-soft);
    color: var(--color-ink-2);
}

.github-safe-note .icon {
    margin-block-start: 0.15em;
    color: var(--color-accent-strong);
}

.github-safe-note p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.github-guide-list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.github-guide-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    min-width: 0;
    padding-block: var(--space-2xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
}

.github-guide-list li:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

.github-guide-list .icon {
    margin-block-start: 0.18em;
    color: var(--color-accent-strong);
}

.github-guide-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.github-auth-panel {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.github-auth-panel summary {
    cursor: pointer;
    color: var(--color-ink);
    font-weight: 850;
}

.github-auth-panel[open] summary {
    padding-block-end: var(--space-xs);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.github-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
}

.github-stat {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.github-stat span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.github-stat strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}

.github-file-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.github-file-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 1.75rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: var(--text-xs);
    font-weight: 850;
    white-space: nowrap;
}

.github-file-status-added {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.github-file-status-removed {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.github-file-status-renamed {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.github-file-path {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-outlier);
    font-size: var(--text-sm);
}

.github-file-path a {
    color: var(--color-ink);
}

.github-file-path small {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--color-muted);
    font-family: var(--font-body);
}

.github-file-stats {
    display: flex;
    grid-column: 2;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    color: var(--color-muted);
    font-family: var(--font-outlier);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.github-added {
    color: var(--color-success);
}

.github-deleted {
    color: var(--color-danger);
}

.github-commit-row {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding-block-end: var(--space-xs);
    border-block-end: var(--rule-hair) solid var(--color-rule);
}

.github-commit-row:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.github-commit-row a,
.github-commit-row small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.github-commit-row a {
    color: var(--color-ink);
    font-weight: 850;
}

.github-commit-row small {
    color: var(--color-muted);
    font-family: var(--font-outlier);
}

.demo-mode-strip {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    min-width: 0;
    margin-block-end: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
    font-weight: 850;
}

.demo-mode-strip span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-brand-preview-real {
    pointer-events: none;
}

.demo-app-header {
    display: grid;
    gap: var(--space-sm);
    align-items: center;
    margin-block-end: var(--space-sm);
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
}

.demo-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    color: var(--color-ink);
    text-decoration: none;
}

.demo-brand > span:last-child {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
}

.demo-brand strong,
.demo-brand small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-brand small,
.demo-header-actions,
.demo-context-bar {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.demo-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    width: fit-content;
    min-block-size: 2rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: 850;
}

.demo-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.demo-context-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-end: var(--space-md);
}

.demo-context-bar span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: 2rem;
    padding-inline: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
}

.demo-hero {
    display: grid;
    gap: var(--space-md);
    align-items: stretch;
    margin-block-end: var(--space-md);
}

.demo-hero-copy,
.demo-hero-visual,
.demo-screen,
.demo-workbench,
.demo-board-section,
.demo-github,
.demo-feed,
.demo-feature-band {
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
}

.demo-hero-copy {
    display: grid;
    align-content: center;
    gap: var(--space-sm);
    min-width: 0;
    padding: clamp(var(--space-md), 3vw, var(--space-xl));
}

.demo-hero-copy h1 {
    max-width: 13ch;
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.demo-hero-copy p {
    max-width: 56ch;
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-md);
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.demo-actions.compact {
    margin-block-start: var(--space-sm);
}

.demo-hero-visual {
    display: grid;
    min-block-size: 20rem;
    padding: var(--space-md);
    background: var(--color-paper-2);
}

.demo-orbit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    align-self: center;
}

.demo-orbit span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 4.5rem;
    min-width: 0;
    padding: var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: color-mix(in oklch, var(--color-panel), transparent 8%);
    color: var(--color-ink);
    font-weight: 850;
    box-shadow: var(--shadow-card);
}

.demo-page-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 12;
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin-block-end: var(--space-md);
    padding: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    scrollbar-width: thin;
}

.demo-page-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-weight: 850;
    white-space: nowrap;
}

.demo-page-nav a.is-active {
    background: var(--color-ink);
    color: var(--color-paper);
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
}

.demo-screen,
.demo-workbench,
.demo-board-section,
.demo-github,
.demo-feed,
.demo-feature-band {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
    padding: clamp(var(--space-sm), 2vw, var(--space-md));
    margin-block-end: var(--space-md);
}

.demo-hero-compact .demo-hero-copy h1 {
    max-width: 16ch;
}

.demo-section-heading {
    display: grid;
    gap: var(--space-xs);
    align-items: end;
}

.demo-section-heading h1,
.demo-section-heading h2 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.08;
    letter-spacing: 0;
}

.demo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    width: fit-content;
    max-inline-size: 100%;
    min-block-size: 2.25rem;
    padding-inline: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.demo-task-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.demo-card-grid,
.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.demo-task,
.demo-action-card,
.demo-board-card,
.demo-form-card,
.demo-file-list article,
.demo-feed-list article,
.demo-feature-band > div,
.demo-brand-preview {
    min-width: 0;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.demo-action-card,
.demo-form-card,
.demo-brand-preview {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-sm);
}

.demo-action-card {
    color: inherit;
    text-decoration: none;
}

.demo-action-card:is(:hover, :focus-visible),
.demo-row-link:is(:hover, :focus-visible),
.demo-board-card-link:is(:hover, :focus-visible) {
    border-color: var(--color-accent);
}

.demo-action-card strong,
.demo-form-card h2,
.demo-form-card h3,
.demo-brand-preview strong {
    color: var(--color-ink);
}

.demo-form-card h2,
.demo-form-card h3 {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.25;
}

.demo-action-card p {
    margin: 0;
    color: var(--color-muted);
}

.demo-form-card label {
    display: grid;
    gap: var(--space-3xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.demo-form-card :is(input, textarea, select),
.demo-inline-actions select,
.demo-board-card select {
    color: var(--color-ink);
}

.demo-search-card {
    margin-block-end: var(--space-sm);
}

.demo-brand-preview {
    align-content: center;
    justify-items: start;
}

.demo-brand-preview > div {
    display: grid;
    gap: var(--space-3xs);
}

.demo-brand-preview small {
    color: var(--color-muted);
}

.demo-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.demo-filter-strip button,
.demo-filter-strip span,
.demo-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-inline-size: 100%;
    min-block-size: 1.85rem;
    padding-inline: var(--space-2xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 850;
}

.demo-filter-strip button {
    cursor: pointer;
}

.demo-list {
    display: grid;
    gap: var(--space-xs);
}

.demo-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-xs);
    align-items: center;
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.demo-row-link {
    color: inherit;
    text-decoration: none;
}

.demo-row-highlight {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.demo-row[data-read="true"] {
    opacity: 0.62;
}

.demo-row[data-read="true"] .demo-status-pill {
    background: var(--color-panel);
}

.demo-row strong,
.demo-row small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-row strong {
    color: var(--color-ink);
}

.demo-row small {
    grid-column: 2;
    color: var(--color-muted);
}

.demo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 850;
}

.demo-tabs {
    margin-block: 0;
}

.demo-tabs :is(a, button, span) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.demo-tabs :is(a, button, span).is-active {
    background: var(--color-ink);
    color: var(--color-paper);
}

.demo-task {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-sm);
}

.demo-task > span {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 850;
}

.demo-task h2,
.demo-task h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-md);
    line-height: 1.25;
}

.demo-task p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.demo-task.is-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
}

.demo-task.is-accent {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.demo-task.is-success {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.demo-progress {
    overflow: hidden;
    block-size: 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-rule), transparent 24%);
}

.demo-progress span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.demo-board {
    display: grid;
    grid-auto-columns: minmax(14rem, 1fr);
    grid-auto-flow: column;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-block-end: var(--space-2xs);
    scrollbar-width: thin;
}

.demo-lane {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.demo-lane header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.demo-lane h2,
.demo-lane h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.demo-lane header span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-panel);
    color: var(--color-muted);
    font-family: var(--font-outlier);
    font-size: var(--text-xs);
    font-weight: 850;
}

.demo-board-card {
    display: grid;
    gap: var(--space-3xs);
    padding: var(--space-xs);
}

.demo-board-card-link {
    display: grid;
    gap: var(--space-3xs);
    color: inherit;
    text-decoration: none;
}

.demo-board-card strong,
.demo-board-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-board-card strong {
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.demo-board-card small {
    color: var(--color-muted);
}

.demo-grid {
    display: grid;
    gap: var(--space-md);
}

.demo-diff-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
}

.demo-diff-summary span {
    display: grid;
    gap: var(--space-3xs);
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.demo-diff-summary strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
}

.demo-file-list,
.demo-feed-list {
    display: grid;
    gap: var(--space-xs);
}

.demo-file-list article {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs);
}

.demo-file-list article > span {
    width: fit-content;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: var(--text-xs);
    font-weight: 850;
}

.demo-file-list code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-file-list small {
    color: var(--color-muted);
    font-family: var(--font-outlier);
}

.demo-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

.demo-inline-actions select,
.demo-board-card select {
    min-block-size: 2.25rem;
    border-radius: var(--radius-pill);
}

.demo-mini-status {
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.demo-check-item {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    min-width: 0;
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-weight: 750;
}

.demo-comment-form,
.demo-compare-form,
.demo-inline-form {
    margin-block-start: 0;
}

.demo-feed-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs);
}

.demo-feed-icon,
.demo-feature-band span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-card);
    background: var(--color-ink);
    color: var(--color-paper);
}

.demo-feed-list strong,
.demo-feed-list p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-feed-list p,
.demo-feature-band p {
    margin: var(--space-3xs) 0 0;
    color: var(--color-muted);
}

.demo-feature-band {
    grid-template-columns: minmax(0, 1fr);
}

.demo-feature-band > div {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-sm);
}

.demo-feature-band strong {
    color: var(--color-ink);
    font-size: var(--text-md);
}

.setup-steps ol {
    padding-inline-start: var(--space-md);
}

.setup-card {
    align-items: stretch;
}

.setup-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    width: fit-content;
    min-block-size: 2rem;
    padding-inline: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
    font-weight: 850;
}

.auth-copy .setup-note {
    max-inline-size: 56ch;
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.setup-steps {
    align-content: start;
}

.setup-checklist {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: setup-step;
}

.setup-checklist li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3xs) var(--space-xs);
    min-width: 0;
    counter-increment: setup-step;
}

.setup-checklist li::before {
    display: inline-grid;
    grid-row: 1 / span 2;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-accent-strong);
    font-size: var(--text-sm);
    font-weight: 850;
    content: counter(setup-step);
}

.setup-checklist strong {
    min-width: 0;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.setup-checklist span {
    min-width: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.setup-footnote {
    display: flex;
    gap: var(--space-2xs);
    align-items: flex-start;
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hair) solid var(--color-rule);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
}

.setup-footnote .icon {
    margin-block-start: 0.2em;
    color: var(--color-success);
}

.setup-form-panel {
    align-content: start;
}

.setup-form-panel .section-heading {
    margin-block-end: 0;
}

.small {
    font-size: var(--text-sm);
}

@supports (content-visibility: auto) {
    .kanban-column {
        content-visibility: auto;
        contain-intrinsic-size: auto 17rem auto 42rem;
    }

    .comment,
    .activity-item,
    .task-timeline-item {
        content-visibility: auto;
        contain-intrinsic-size: auto none auto 5rem;
    }
}

@supports not (content-visibility: auto) {
    .kanban-column {
        contain: layout style paint;
    }

    .task-timeline-item {
        contain: layout style paint;
    }
}

@container task-card (min-width: 20rem) {
    .task-card-badges {
        justify-content: space-between;
    }

    .task-card-signal-row {
        gap: var(--space-xs);
    }

    .task-card-progress {
        min-inline-size: 7rem;
    }
}

@container task-command (min-width: 42rem) {
    .task-status-shell {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .task-status-flow {
        justify-content: flex-end;
    }
}

@container notification-row (min-width: 34rem) {
    .notification-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .notification-kicker,
    .notification-body,
    .notification-main > strong,
    .notification-main > .task-meta {
        grid-column: 1;
    }

    .notification-row-action {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
        margin-block-start: 0;
    }
}

@media (hover: hover) and (pointer: fine) {
    .nav a:hover,
    .sidebar-user:hover,
    .logout-form button:hover,
    .project-tabs a:hover,
    .secondary-button:hover,
    .mention-chip:hover,
    .kanban-jump-nav a:hover,
    .task-jump-list a:hover,
    .task-filter-chip:hover {
        border-color: var(--color-rule-2);
        background: var(--color-paper-3);
        color: var(--color-accent-strong);
    }

    .task-status-step:not(.is-current):hover {
        border-color: var(--color-rule-2);
        background: var(--color-paper-3);
        color: var(--color-accent-strong);
    }

    .primary-button:hover {
        background: var(--color-accent-strong);
        transform: translateY(-1px);
    }

    .project-row:hover,
    .task-row:hover,
    .focus-task-row:hover,
    .quick-view-chip:hover,
    .action-chip:hover,
    .dashboard-focus-row:hover,
    .search-result-row:hover,
    .saved-view-row:hover,
    .task-card:hover,
    .notification-row:hover,
    .attachment-row:hover,
    .checklist-row:hover,
    .project-member-row:hover {
        border-color: var(--color-rule-2);
        background: var(--color-panel);
    }

    .notification-row.is-unread:hover {
        border-color: var(--color-accent);
        background: var(--color-accent-soft);
    }

    .checklist-row:hover .check-field {
        color: var(--color-ink);
    }

    .checklist-row.is-done:hover .check-field {
        color: var(--color-muted);
    }

    .task-filter-check:hover {
        border-color: var(--color-accent);
        background: var(--color-paper-3);
        color: var(--color-accent-strong);
    }

    .task-filter-check:has(input:checked):hover {
        background: var(--color-accent-soft);
    }

    .task-filter-chip.is-active:hover {
        border-color: var(--color-accent);
        background: var(--color-accent-soft);
    }

    .kanban-jump-nav a.is-active:hover,
    .kanban-jump-nav a[aria-current="location"]:hover {
        border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-rule));
        background: var(--color-accent-soft);
    }

    input:not([type="checkbox"]):not([type="radio"]):hover,
    select:hover,
    textarea:hover {
        background: var(--color-paper);
    }

    .search-input-shell input:hover {
        background: transparent;
    }
}

.primary-button:active,
.secondary-button:active,
.text-button:active,
.mention-chip:active,
.nav a:active,
.sidebar-user:active,
.logout-form button:active,
.task-status-step:active,
.project-row:active,
.focus-task-row:active,
.quick-view-chip:active,
.action-chip:active,
.dashboard-focus-row:active,
.search-result-row:active,
.saved-view-row:active,
.notification-row:active,
.kanban-jump-nav a:active,
.task-jump-list a:active,
.task-filter-chip:active,
.task-filter-check:active {
    transform: translateY(1px);
}

@media (pointer: coarse) {
    .primary-button,
    .secondary-button,
    .text-button,
    .mention-chip,
    .nav a,
    .sidebar-user,
    .logout-form button,
    .project-row,
    .focus-task-row,
    .quick-view-chip,
    .action-chip,
    .dashboard-focus-row,
    .search-result-row,
    .saved-view-row > a,
    .notification-row,
    .kanban-jump-nav a,
    .task-status-step,
    .task-jump-list a,
    .task-filter-chip,
    .task-filter-check,
    input,
    select,
    textarea {
        min-block-size: 3rem;
    }
}

@media (min-width: 40rem) {
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-work-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .task-command-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .task-command-actions {
        justify-content: flex-end;
    }

    .quick-view-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-task-strip,
    .demo-feature-band {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .demo-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-section-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search-result-overview,
    .search-scope-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-focus-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .notification-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .notification-row time {
        grid-column: auto;
        justify-self: end;
        white-space: nowrap;
    }

    .project-row-rich {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search-project-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .search-result-side {
        grid-column: auto;
        justify-content: flex-end;
        min-inline-size: 8rem;
    }

    .task-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .task-row-side {
        justify-content: flex-end;
        min-inline-size: 7rem;
    }

    .project-row-side {
        justify-content: flex-end;
        min-inline-size: 8.5rem;
    }

    .saved-view-fields {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .field-grid,
    .github-compare-fields,
    .search-form,
    .task-filter-form,
    .my-work-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .github-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .github-file-row {
        grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
    }

    .github-file-stats {
        grid-column: auto;
        justify-self: end;
    }

    .profile-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search-form-enhanced {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "search-label search-label"
            "search-input search-actions"
            "search-hint search-hint";
    }

    .search-actions {
        align-self: stretch;
        align-items: stretch;
    }

    .section-heading,
    .page-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .header-actions {
        justify-content: flex-end;
    }

    .member-row {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "member-avatar member-meta member-meta"
            "member-avatar member-name member-email"
            "member-active member-role member-password"
            "member-photo member-photo member-photo"
            "member-save member-save member-save";
    }

    .member-row > .avatar {
        align-self: center;
    }

    .member-row > .secondary-button {
        justify-self: end;
    }

    .project-member-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "member-avatar member-info member-action";
    }

    .project-member-row > form {
        justify-self: end;
    }
}

@media (min-width: 52rem) {
    body:not(.auth-page) .app-shell {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
        align-items: start;
    }

    .sidebar {
        position: sticky;
        inset-block-start: 0;
        align-self: start;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        block-size: 100vh;
        block-size: 100dvh;
        max-block-size: 100vh;
        max-block-size: 100dvh;
        min-block-size: 0;
        align-content: stretch;
        overflow: hidden;
        border-block-end: 0;
        border-inline-end: var(--rule-hair) solid var(--color-rule);
    }

    .nav {
        display: grid;
        align-content: start;
        min-block-size: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-inline-end: var(--space-2xs);
        overscroll-behavior: contain;
    }

    .nav a,
    .logout-form button {
        justify-content: flex-start;
    }

    .sidebar-user {
        margin-block-start: 0;
    }

    .auth-card {
        grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.85fr);
    }

    .demo-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    }

    .demo-app-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .demo-header-actions {
        justify-content: flex-end;
    }

    .demo-search-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .demo-inline-form {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem) auto;
        align-items: end;
    }

    .demo-compare-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
    }

    .demo-compare-form .demo-inline-actions {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    }

    .profile-layout {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    }

    .manual-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .manual-side-panel {
        position: sticky;
        inset-block-start: var(--space-md);
    }

    .content-grid.wide-left {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    }

    .team-layout.content-grid.wide-left {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-layout {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    }

    .notification-layout {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
    }

    .work-command-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    }

    .demo-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
    }

    .demo-preview-grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    }

    .task-filter-form,
    .my-work-filter-form {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    }

    .member-row {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 78rem) {
    .metrics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-action-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .demo-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .demo-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kanban {
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 88rem) {
    .search-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-layout.content-grid.wide-left {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    }

    .member-row {
        grid-template-columns: auto repeat(4, minmax(7.5rem, 1fr)) auto auto;
        grid-template-areas:
            "member-avatar member-meta member-meta member-meta member-meta member-active member-save"
            "member-avatar member-name member-email member-role member-password member-active member-save"
            "member-avatar member-photo member-photo member-photo member-photo member-active member-save";
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 150ms !important;
    }

    .toast {
        animation-name: none;
    }
}