:root {
    color-scheme: dark;
    --bg: #0d1116;
    --surface: #121820;
    --surface-2: #17202a;
    --surface-3: #1c2733;
    --panel: var(--surface);
    --panel-strong: var(--surface-2);
    --panel-soft: var(--surface-2);
    --ink: #e7edf3;
    --text: var(--ink);
    --muted: #95a3b2;
    --muted-strong: #b5c0cb;
    --text-soft: #7f8d9c;
    --line: rgba(148, 163, 184, 0.14);
    --line-strong: rgba(148, 163, 184, 0.22);
    --border: var(--line);
    --brand: #4f6f8f;
    --accent: #6f8eac;
    --accent-hover: #84a3c2;
    --accent-border: rgba(111, 142, 172, 0.35);
    --gold: #c7a15a;
    --soft: rgba(111, 142, 172, 0.13);
    --danger-bg: rgba(154, 80, 74, 0.13);
    --danger: #d49a93;
    --success-bg: rgba(101, 137, 114, 0.14);
    --success: #a8c7b2;
    --left-rail-width: 238px;
    --right-rail-width: 320px;
    --font-family-base: Arial, "Segoe UI", sans-serif;
    --font-size-2xs: 0.68rem;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.78rem;
    --font-size-ui: 0.82rem;
    --font-size-body: 0.86rem;
    --font-size-body-lg: 0.9rem;
    --font-size-section: 1rem;
    --font-size-section-lg: 1.25rem;
    --font-size-display: 1.45rem;
    --font-weight-regular: 400;
    --font-weight-bold: 600;
    --font-weight-strong: 700;
    --module-title-size: var(--font-size-display);
    --module-title-weight: var(--font-weight-strong);
    --module-subtitle-size: var(--font-size-body-lg);
    --module-gap: 8px;
    --surface-radius: 8px;
    --surface-bg: rgba(18, 24, 32, 0.96);
    --text-primary: var(--ink);
    --text-muted: var(--muted);
    --text-subtle: var(--muted-strong);
    --panel-border: var(--line);
    --accent-blue: var(--accent);
    --accent-gold: var(--gold);
    --selected-background: rgba(111, 142, 172, 0.12);
    --selected-border: var(--accent-border);
    --badge-bg: rgba(199, 161, 90, 0.12);
    --button-bg: #536f8b;
    --button-hover-bg: #63809c;
    --button-secondary-bg: rgba(148, 163, 184, 0.08);
    --control-radius: 7px;
    --row-pad-y: 6px;
    --row-pad-x: 8px;
    --row-hover-bg: rgba(255, 255, 255, 0.035);
    --row-selected-bg: var(--selected-background);
    --compact-control-height: 28px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(61, 127, 214, 0.1), transparent 24%),
        radial-gradient(circle at bottom right, rgba(211, 167, 109, 0.08), transparent 22%),
        var(--bg);
    color: var(--ink);
    font-family: var(--font-family-base);
}

body[data-view="home"] .content {
    background:
        linear-gradient(180deg, rgba(61, 127, 214, 0.06), transparent 220px),
        transparent;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: #efc98f;
}

button,
.button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

button:hover,
.button:hover {
    background: #669ce8;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button.secondary {
    background: #222c36;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.button.ghost {
    min-height: 34px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
    border: 1px solid var(--line);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 9px 10px;
    background: #10141a;
    color: #eef3f7;
    font: inherit;
}

input::placeholder,
textarea::placeholder {
    color: #87919b;
}

textarea {
    min-height: 92px;
    resize: vertical;
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted-strong);
    font-size: var(--font-size-body-lg);
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width);
}

.rail-resize-handle {
    padding: 0;
    border: 0;
    position: fixed;
    top: 0;
    z-index: 80;
    width: 12px;
    height: 100vh;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
    appearance: none;
}

.rail-resize-handle::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: rgba(211, 167, 109, 0.26);
    transition: background 120ms ease, box-shadow 120ms ease;
}

.rail-resize-handle:hover::after,
.rail-resize-handle:focus-visible::after,
body.is-resizing-rails .rail-resize-handle::after {
    background: rgba(211, 167, 109, 0.72);
    box-shadow: 0 0 0 1px rgba(211, 167, 109, 0.16);
}

.rail-resize-handle.left-rail-handle {
    left: calc(var(--left-rail-width) - 6px);
}

.rail-resize-handle.right-rail-handle {
    right: calc(var(--right-rail-width) - 6px);
}

body.is-resizing-rails {
    cursor: col-resize;
    user-select: none;
}

.sidebar,
.left,
.content,
.main,
.right {
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

.sidebar,
.left {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(16, 20, 24, 0.92);
    color: var(--ink);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), #669ce8);
    color: #fff;
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-ui);
}

.brand-mark:hover,
.brand-mark:focus {
    color: #fff;
    box-shadow: 0 0 0 2px rgba(102, 156, 232, 0.28);
}

.brand {
    margin-bottom: 2px;
    color: #eaf0f5;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-strong);
}

.brand-subtitle {
    color: #9daab6;
    font-size: var(--font-size-sm);
}

.mobile-nav-toggle,
.mobile-nav-button {
    display: none;
}

.mobile-context-toggle,
.mobile-context-button {
    display: none;
}

.mobile-project-menu,
.mobile-project-unread-badge,
.mobile-logout-row,
.mobile-nav-logout {
    display: none;
}

.sidebar nav {
    display: grid;
    gap: 4px;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--muted-strong);
}

.sidebar nav a.active {
    background: rgba(61, 127, 214, 0.13);
    box-shadow: inset 3px 0 0 rgba(61, 127, 214, 0.82);
    color: #fff;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
}

.active-project-context {
    display: grid;
    gap: 3px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    text-decoration: none;
}

.active-project-context:hover,
.active-project-context.active {
    border-color: rgba(61, 127, 214, 0.36);
    background: rgba(61, 127, 214, 0.1);
}

.active-project-context span {
    color: var(--muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.active-project-context strong {
    color: var(--accent);
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-body);
    line-height: 1.25;
}

.user-card {
    margin-top: auto;
    padding-top: 14px;
    display: grid;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #aeb7c0;
    font-size: var(--font-size-body-lg);
}

.user-card strong {
    color: #eef3f7;
}

.user-card a {
    color: var(--accent);
    font-weight: var(--font-weight-bold);
}

.role-badge {
    width: fit-content;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.role-badge.admin {
    border-color: rgba(211, 167, 109, 0.36);
    background: rgba(211, 167, 109, 0.12);
    color: var(--accent);
}

.content,
.main {
    padding: 18px 20px 28px;
    display: grid;
    gap: 16px;
    align-content: start;
}

.right {
    padding: 18px 18px 18px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(16, 20, 24, 0.88);
}

.page-head {
    display: grid;
    gap: var(--module-gap);
    margin-bottom: -2px;
}

.page-head h1 {
    margin: 0;
    color: #eaf0f5;
    font-size: var(--module-title-size);
    font-weight: var(--module-title-weight);
    letter-spacing: 0;
}

.page-head p {
    max-width: 72ch;
    margin: 0;
    color: var(--muted);
    font-size: var(--module-subtitle-size);
    line-height: 1.45;
}

.active-project-strip {
    padding: 10px 12px;
}

.active-project-strip strong {
    display: block;
    color: #eef3f7;
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-bold);
}

.active-project-strip small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.compact-head {
    gap: 3px;
}

.compact-head h1 {
    font-size: var(--font-size-section-lg);
}

.panel,
.card {
    border: 1px solid var(--line);
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    padding: 16px;
}

.context-panel {
    position: sticky;
    top: 18px;
}

.panel h2,
.card h2 {
    margin-top: 0;
    color: #eef3f7;
}

.surface-panel {
    background: var(--panel);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.card {
    background: #1c2630;
}

.card h2 {
    margin: 0 0 8px;
    font-size: var(--font-size-section);
}

.card p {
    color: #c4ccd4;
    line-height: 1.45;
}

.card footer,
.muted,
.row span,
.list a span {
    color: var(--muted);
    font-size: var(--font-size-body);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.metrics div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #222c36;
}

.metrics strong {
    display: block;
    color: #eef3f7;
    font-size: 2rem;
}

.metrics span {
    color: var(--muted);
}

.project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    border-color: rgba(61, 127, 214, 0.2);
    background:
        radial-gradient(circle at top right, rgba(61, 127, 214, 0.16), transparent 34%),
        rgba(24, 32, 41, 0.96);
}

.project-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.project-hero p {
    max-width: 72ch;
    color: #c8d1d9;
    line-height: 1.45;
}

.hero-actions,
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
    gap: 14px;
}

.settings-sections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.settings-sections a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-strong);
    white-space: nowrap;
}

.settings-sections a.active {
    border-color: rgba(211, 167, 109, 0.36);
    background: rgba(211, 167, 109, 0.1);
    color: var(--accent);
}

.settings-placeholder {
    display: grid;
    gap: 10px;
}

.settings-placeholder h2 {
    margin-bottom: 0;
    font-size: var(--font-size-section);
}

.email-diagnostics-panel {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.email-diagnostics-panel h3 {
    margin: 0;
    font-size: var(--font-size-body-lg);
}

.email-diagnostics-panel dl,
.email-test-result dl {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: var(--font-size-ui);
}

.email-diagnostics-panel dt {
    color: var(--muted);
    font-weight: var(--font-weight-strong);
}

.email-diagnostics-panel dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.email-test-result {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.email-test-form {
    max-width: 480px;
}

.checkbox-line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 28px;
    font-size: var(--font-size-ui);
}

.checkbox-line input {
    width: 15px;
    height: 15px;
}

.project-assignment-fieldset {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.project-assignment-fieldset legend {
    padding: 0 4px;
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.project-assignment-list {
    display: grid;
    gap: 6px;
    max-height: 150px;
    overflow: auto;
}

.project-assignment-list label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 26px;
    font-size: var(--font-size-ui);
}

.project-assignment-list input {
    width: 15px;
    height: 15px;
}

.user-project-controls {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.user-project-controls h3 {
    margin: 0;
    font-size: var(--font-size-body-lg);
}

.compact-list {
    gap: 6px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
}

.form-grid .wide {
    grid-column: 1 / -1;
}

.split {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    min-height: 520px;
}

body[data-view="chats"] .split,
body[data-view="communications"] .split {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}

.list {
    display: grid;
    gap: 8px;
    align-content: start;
}

body[data-view="chats"] .list,
body[data-view="communications"] .split .list {
    gap: 6px;
    padding: 12px;
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

body[data-view="messaging"] .list,
body[data-view="communications"] .messaging-shell .list {
    gap: 6px;
    padding: 8px;
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

body[data-view="chats"] .mini-form,
body[data-view="communications"] .mini-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

body[data-view="chats"] .mini-form input,
body[data-view="chats"] .mini-form button,
body[data-view="communications"] .mini-form input,
body[data-view="communications"] .mini-form button {
    min-height: var(--compact-control-height);
    padding: 7px 9px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
}

.list a {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 8px;
    color: var(--ink);
}

body[data-view="chats"] .list a,
body[data-view="communications"] .split .list a {
    gap: 2px;
    padding: var(--row-pad-y) var(--row-pad-x);
    border-radius: 6px;
}

body[data-view="messaging"] .list a,
body[data-view="communications"] .messaging-shell .list a {
    gap: 4px;
    padding: 8px;
    border-radius: 6px;
}

.communications-tabs {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin: -4px 0 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-bg);
}

.communications-tabs a {
    min-height: 30px;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-strong);
}

.communications-tabs a.active,
.communications-tabs a:hover {
    background: var(--row-selected-bg);
    color: #eef3f7;
}

.communications-all {
    display: grid;
    gap: 8px;
}

.communication-activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.025);
}

.communication-activity-item strong,
.communication-activity-item span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.communication-activity-item small,
.communication-activity-item span:last-child {
    grid-column: 2;
    color: var(--muted);
}

.communication-activity-item:hover {
    border-color: rgba(211, 167, 109, 0.32);
    background: var(--row-selected-bg);
}

.messaging-shell {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 0;
}

.messaging-center-head {
    position: sticky;
    z-index: 11;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

.direct-thread-view {
    min-height: min(680px, calc(100vh - 190px));
}

#direct-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 5px;
    padding-right: 3px;
    scroll-padding-top: 12px;
}

.direct-thread-view .composer-input {
    grid-template-columns: minmax(0, 1fr) 42px;
}

.conversation-toggle {
    flex: 0 0 auto;
}

.messaging-active-title {
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.messaging-active-title h2 {
    margin: 0;
    overflow: hidden;
    color: #eef3f7;
    font-size: var(--font-size-section);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-drawer {
    position: absolute;
    z-index: 12;
    top: 54px;
    bottom: 0;
    left: 0;
    width: min(320px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 150px));
    overflow: auto;
    border: 1px solid var(--line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    transform: translateX(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.messaging-shell.drawer-open .conversation-drawer {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.conversation-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.conversation-drawer-head strong {
    color: #eef3f7;
    font-size: var(--font-size-body);
}

.conversation-search {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.conversation-search input {
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
}

@media (max-width: 900px) {
    .messaging-center-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .messaging-active-title {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .messaging-active-title .direct-participant-chips {
        grid-column: 1 / -1;
        text-align: left;
        white-space: normal;
    }

    .conversation-drawer {
        position: static;
        width: 100%;
        max-height: none;
        transform: none;
        display: none;
    }

    .messaging-shell.drawer-open .conversation-drawer {
        display: grid;
    }
}

.list a.active,
.list a:hover {
    background: var(--row-selected-bg);
    color: #eef3f7;
}

.project-switcher {
    padding: 12px;
}

.project-switcher label {
    max-width: 360px;
}

.mini-form,
.composer {
    display: grid;
    gap: 8px;
}

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

.chat {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

.pinned-messages {
    display: grid;
    gap: 6px;
    max-height: 180px;
    overflow: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(211, 167, 109, 0.06);
}

.pinned-title {
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pinned-message {
    display: grid;
    gap: 4px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}

.pinned-message-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pinned-message-head strong {
    color: #eef3f7;
    font-size: var(--font-size-ui);
}

.pinned-message-head span,
.pinned-message small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: var(--font-size-2xs);
}

.pinned-message p {
    margin: 0;
    color: #d2dce4;
    font-size: var(--font-size-ui);
    line-height: 1.25;
}

#messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 5px;
    padding-right: 3px;
}

.message {
    position: relative;
    padding: 5px 8px 6px;
    border-left: 2px solid transparent;
    border-radius: 6px;
}

.message.selected {
    border-left-color: var(--accent);
    background: var(--row-selected-bg);
}

.message.is-pinned {
    border-left-color: rgba(211, 167, 109, 0.55);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
}

.message strong {
    color: #eef3f7;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.message time {
    color: var(--muted);
    font-size: var(--font-size-2xs);
}

.detail-link {
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    opacity: 0.72;
}

.edited-marker {
    color: var(--muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    opacity: 0.8;
}

.message-edit-form {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
}

.message-edit-form textarea {
    width: 100%;
    min-height: 58px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: var(--font-size-body-lg);
    resize: vertical;
}

.message-edit-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.message-edit-actions button,
.message-edit-actions .button {
    min-height: var(--compact-control-height);
    padding: 0 10px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.pin-form {
    display: inline-flex;
    margin: 0;
    align-items: center;
}

.pin-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    cursor: pointer;
}

.pin-check input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.pin-check span {
    opacity: 0.72;
}

.pin-check:hover {
    color: var(--ink);
}

.message p {
    color: #d2dce4;
    line-height: 1.3;
    margin: 1px 0 0;
    font-size: var(--font-size-body-lg);
}

.direct-thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.direct-thread-head h2 {
    margin: 0 0 4px;
    color: #eef3f7;
    font-size: var(--font-size-section);
}

.direct-thread-kind {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-bottom: 4px;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    text-transform: uppercase;
}

.direct-participant-chips {
    margin: 0;
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    text-align: right;
}

.messaging-active-title .direct-participant-chips {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-thread-list small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-thread-row a {
    min-width: 0;
    border: 1px solid transparent;
}

.direct-thread-row a.active {
    border-color: rgba(211, 167, 109, 0.3);
}

.direct-thread-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.direct-thread-row-head strong,
.direct-thread-subject,
.direct-thread-snippet {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-thread-row-head strong {
    color: #eef3f7;
    font-size: var(--font-size-ui);
}

.direct-thread-subject {
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
}

.direct-thread-snippet {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.direct-thread-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    color: var(--muted);
    font-size: var(--font-size-2xs);
}

.direct-thread-row-meta em {
    color: var(--accent);
    font-style: normal;
    font-weight: var(--font-weight-strong);
}

.direct-message.mine {
    border-left-color: rgba(61, 127, 214, 0.45);
}

.direct-message-content {
    position: relative;
    display: inline-block;
    max-width: min(100%, 760px);
    padding-right: 6px;
    vertical-align: top;
}

.direct-reaction-picker {
    position: absolute;
    top: 4px;
    right: -34px;
    display: inline-flex;
    gap: 3px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(16, 20, 24, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.direct-message:hover .direct-reaction-picker,
.direct-message:focus-within .direct-reaction-picker,
.direct-message:focus .direct-reaction-picker,
.comm-message:hover .direct-reaction-picker,
.comm-message:focus-within .direct-reaction-picker,
.comm-message:focus .direct-reaction-picker {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.direct-reaction-form {
    margin: 0;
}

.direct-reaction-button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
    line-height: 1;
}

.direct-reaction-button:hover,
.direct-reaction-button:focus-visible,
.direct-reaction-button.active {
    background: rgba(211, 167, 109, 0.12);
    color: #eef3f7;
}

.direct-reaction-badges {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    max-width: min(100%, 220px);
    margin-left: 6px;
    vertical-align: text-bottom;
}

.direct-reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 20px;
    max-width: 96px;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #1b242d;
    color: #d8e0e7;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-reaction-badge:hover,
.direct-reaction-badge:focus-visible {
    border-color: rgba(211, 167, 109, 0.42);
    color: #eef3f7;
    outline: none;
}

.direct-read-receipt {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--font-size-2xs);
    line-height: 1.2;
    text-align: right;
}

.attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.message-attachment-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.message-attachment-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(240px, 100%);
    max-width: 100%;
    max-height: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.message-attachment-preview img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
}

.attachment {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(61, 127, 214, 0.12);
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-detail {
    gap: 6px;
    border-radius: 8px;
}

.attachment-detail small {
    color: var(--muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-detail a,
.attachment-detail em {
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-style: normal;
    font-weight: var(--font-weight-strong);
}

.attachment-detail.is-deleted {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
}

.message .delete-form {
    position: absolute;
    top: 3px;
    right: 3px;
    opacity: 0;
}

.message:hover .delete-form,
.message:focus-within .delete-form {
    opacity: 1;
}

.composer {
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.composer-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 42px;
    align-items: end;
    gap: 6px;
}

.composer textarea {
    min-height: 38px;
    max-height: 112px;
    resize: vertical;
    line-height: 1.3;
    padding: 8px 10px;
}

.composer-attach,
.composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 6px;
}

.composer-attach {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--accent);
    cursor: pointer;
}

.composer-attach:hover,
.composer-attach:focus-within {
    border-color: rgba(61, 127, 214, 0.72);
    background: rgba(61, 127, 214, 0.14);
}

.composer-attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.composer-send {
    width: 42px;
    font-size: var(--font-size-body-lg);
}

.attachment-destination {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.attachment-destination select {
    min-height: 30px;
    padding: 5px 8px;
    font-size: var(--font-size-xs);
}

.pasted-attachment-list {
    display: grid;
    gap: 6px;
    margin-top: 4px;
}

.pasted-attachment-list[hidden] {
    display: none;
}

.pasted-attachment-heading {
    margin: 0;
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.pasted-attachment-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: rgba(255, 255, 255, 0.03);
}

.pasted-attachment-item img,
.pasted-attachment-icon {
    width: 42px;
    height: 34px;
    border-radius: 5px;
    object-fit: cover;
    background: rgba(111, 142, 172, 0.18);
}

.pasted-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
}

.pasted-attachment-detail {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pasted-attachment-remove {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.row {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.row strong {
    color: #eaf0f5;
}

.activity-panel {
    overflow: visible;
}

.activity-table-wrap {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.generic-resizable-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 2px;
    scrollbar-gutter: stable;
}

.has-generic-resizable-table {
    min-width: 0;
}

.generic-resizable-table {
    min-width: 100%;
    table-layout: fixed;
}

.generic-resizable-header {
    position: relative;
}

.generic-column-resize-handle {
    position: absolute;
    z-index: 2;
    top: 3px;
    right: -5px;
    bottom: 3px;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}

.generic-column-resize-handle::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 4px;
    bottom: 1px;
    width: 1px;
    background: rgba(161, 189, 218, 0.3);
    opacity: 0;
}

.generic-resizable-header:hover .generic-column-resize-handle::after,
.generic-column-resize-handle:hover::after,
.generic-column-resize-handle:focus-visible::after {
    opacity: 1;
}

.is-resizing-generic-table-column {
    cursor: col-resize;
    user-select: none;
}

@media (max-width: 768px) {
    .generic-column-resize-handle {
        display: none;
    }
}

.activity-filters,
.activity-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.activity-filters {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.activity-filters label {
    width: auto;
    min-width: 130px;
    font-size: var(--font-size-xs);
}

.activity-filters select {
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
}

.activity-filters button,
.activity-filters .button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.activity-table th,
.activity-table td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: var(--font-size-sm);
}

.activity-table th {
    color: var(--muted);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
}

.activity-table th:nth-child(1) {
    width: 22%;
}

.activity-table th:nth-child(2) {
    width: 20%;
}

.activity-table th:nth-child(3) {
    width: 14%;
}

.activity-table th:nth-child(4) {
    width: 12%;
}

.activity-table th:nth-child(5) {
    width: 80px;
}

.activity-table th:nth-child(6) {
    width: 126px;
}

.activity-table th:nth-child(7) {
    width: 116px;
}

.activity-table strong,
.activity-table small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-table small {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.activity-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.activity-actions form {
    margin: 0;
}

.activity-actions .button,
.activity-actions .danger-button {
    min-height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: var(--font-size-2xs);
}

.activity-pagination {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.activity-pagination > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.activity-pagination .button {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.page-count {
    color: var(--muted-strong);
}

.project-card.active,
.task-card.overdue {
    border-color: rgba(211, 167, 109, 0.42);
}

.project-row-list {
    display: grid;
    gap: 8px;
}

.project-select-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: #eef3f7;
    text-decoration: none;
}

.project-select-row:hover,
.project-select-row.active {
    border-color: rgba(211, 167, 109, 0.38);
    background: rgba(211, 167, 109, 0.06);
}

.project-select-row.archived {
    color: var(--muted-strong);
}

.project-row-main,
.project-select-row strong,
.project-select-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.project-row-title strong {
    min-width: 0;
}

.project-select-row small,
.project-row-meta {
    color: var(--muted);
    font-size: var(--font-size-ui);
}

.project-row-meta {
    white-space: nowrap;
}

.project-row-meta form {
    margin: 0;
}

.project-row-meta em {
    margin-right: 8px;
    color: var(--accent);
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.project-unread-badge {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid rgba(211, 167, 109, 0.42);
    border-radius: 999px;
    background: rgba(211, 167, 109, 0.14);
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    flex: 0 0 auto;
}

.project-card h2 a,
.task-card h2 a {
    color: #eef3f7;
}

.file-list {
    display: grid;
    gap: 2px;
}

.files-head {
    gap: 3px;
}

.files-toolbar {
    padding: 10px;
    display: grid;
    gap: 8px;
}

.compact-upload,
.compact-folder,
.file-filter-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    align-items: end;
}

.compact-upload label,
.compact-folder label,
.file-filter-strip label {
    gap: 3px;
    font-size: var(--font-size-sm);
}

.compact-upload input,
.compact-upload select,
.compact-folder input,
.file-filter-strip select {
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--font-size-ui);
}

.compact-upload button,
.compact-folder button,
.file-filter-strip button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 6px;
}

.file-picker input {
    font-size: var(--font-size-sm);
}

.file-filters,
.task-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.task-filters-compact,
.task-create-compact {
    padding: 10px;
    gap: 8px;
}

.task-filters-compact {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
}

.task-create-compact {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.task-filters-compact label,
.task-create-compact label {
    gap: 3px;
    font-size: var(--font-size-sm);
}

.task-filters-compact select,
.task-filters-compact button,
.task-create-compact input,
.task-create-compact select,
.task-create-compact textarea,
.task-create-compact button {
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: var(--font-size-ui);
}

.task-create-compact textarea {
    min-height: 32px;
    max-height: 72px;
}

.task-create-compact .wide {
    grid-column: auto;
}

.task-date-range {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(116px, 1fr)) auto;
    gap: 6px;
    align-items: end;
}

.task-create-compact .task-date-range {
    grid-column: span 3;
}

.task-date-range label {
    min-width: 0;
}

.task-date-range .date-range-toggle {
    white-space: nowrap;
}

.date-range-hint {
    grid-column: 1 / -1;
    margin: -1px 0 0;
    color: var(--muted);
    font-size: var(--font-size-xs);
    line-height: 1.25;
}

.date-range-hint.is-error {
    color: var(--danger);
    font-weight: var(--font-weight-bold);
}

.date-range-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(292px, calc(100vw - 36px));
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.date-range-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.date-range-month {
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
}

.date-range-nav {
    display: inline-flex;
    gap: 4px;
}

.date-range-nav button {
    width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 6px;
}

.date-range-weekdays,
.date-range-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.date-range-weekdays span {
    color: var(--muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    text-align: center;
    text-transform: uppercase;
}

.date-range-day {
    min-height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.date-range-day:hover {
    border-color: var(--accent);
}

.date-range-day.is-outside {
    color: var(--muted);
    opacity: 0.52;
}

.date-range-day.is-today {
    border-color: var(--muted);
}

.date-range-day.is-in-range {
    background: rgba(61, 127, 214, 0.18);
    color: var(--accent);
}

.date-range-day.is-start,
.date-range-day.is-end {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.date-range-day.is-start.is-end {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

@media (min-width: 1081px) {
    .task-filters-compact,
    .task-create-compact,
    .task-table-wrap,
    .request-table-wrap {
        max-width: calc(100vw - var(--left-rail-width) - var(--right-rail-width) - 54px);
    }
}

@media (max-width: 760px) {
    .task-date-range,
    .task-create-compact .task-date-range {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-date-range .date-range-toggle {
        grid-column: 1 / -1;
    }
}

.batch-heading {
    margin: 10px 0 2px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-radius: 8px;
    background: rgba(61, 127, 214, 0.1);
    color: var(--accent);
    font-weight: var(--font-weight-strong);
}

.batch-heading span {
    color: var(--muted);
    font-weight: var(--font-weight-regular);
}

.file-row {
    align-items: center;
}

.file-row.selected {
    padding-inline: 10px;
    border: 1px solid rgba(211, 167, 109, 0.34);
    border-radius: 8px;
    background: rgba(211, 167, 109, 0.06);
}

.task-table-wrap {
    overflow-x: auto;
    padding: 0;
    border-radius: var(--surface-radius);
}

.task-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.task-table th,
.task-table td {
    padding: var(--row-pad-y) var(--row-pad-x);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.task-table th {
    color: var(--muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: uppercase;
}

.task-table th .task-sort-link {
    color: inherit;
    text-decoration: none;
}

.task-table th .task-sort-link.active {
    color: #d3a76d;
}

.task-table td {
    color: #d8e0e7;
    font-size: var(--font-size-body-lg);
}

.task-table td:first-child {
    max-width: 260px;
}

.task-table td:first-child a {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.task-table td:first-child .inline-edit-trigger {
    max-width: 220px;
}

.task-table td small {
    display: inline;
    margin-left: 6px;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.task-table .delete-form button {
    min-height: var(--compact-control-height);
    padding: 0 9px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.work-item-tabs {
    margin-bottom: 14px;
}

.work-item-table-wrap {
    overflow-x: auto;
}

.work-item-table {
    min-width: 1480px;
    table-layout: fixed;
}

.work-item-table th,
.work-item-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-item-table th {
    position: relative;
    padding-right: 18px;
}

.work-item-sort-button {
    display: inline-flex;
    max-width: 100%;
    min-height: 0;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.work-item-sort-button span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-item-sort-indicator {
    flex: 0 0 auto;
    min-width: 9px;
    color: var(--accent);
    font-size: var(--font-size-2xs);
}

.work-item-resize-handle {
    position: absolute;
    top: 6px;
    right: 0;
    bottom: 6px;
    width: 10px;
    cursor: col-resize;
    opacity: 0;
}

.work-item-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 4px;
    bottom: 0;
    width: 1px;
    background: rgba(161, 189, 218, 0.36);
}

.work-item-table th:hover .work-item-resize-handle,
.work-item-resize-handle:focus-visible {
    opacity: 1;
}

.is-resizing-work-item-columns {
    cursor: col-resize;
    user-select: none;
}

@media (max-width: 768px) {
    .work-item-resize-handle {
        display: none;
    }
}

.work-item-table td:first-child {
    max-width: none;
}

.work-item-table td:first-child .inline-edit-trigger,
.work-item-table .inline-edit-trigger {
    max-width: 100%;
}

.work-item-table .inline-edit-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-item-table .health-chip {
    max-width: 100%;
}

.work-item-table .work-item-description-column,
.work-item-table .work-item-description-cell {
    width: 360px;
}

.work-item-table .work-item-dependency-column,
.work-item-table .work-item-dependency-cell {
    width: 160px;
}

.work-item-table .work-item-dependency-cell {
    overflow: visible;
    white-space: normal;
}

.dependency-state {
    display: inline-flex;
    width: fit-content;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.dependency-state-blocked {
    border-color: rgba(214, 91, 77, 0.62);
    background: rgba(214, 91, 77, 0.15);
    color: #f19a90;
}

.dependency-state-partial {
    border-color: rgba(221, 178, 81, 0.58);
    background: rgba(221, 178, 81, 0.14);
    color: #efd17f;
}

.dependency-state-ready {
    border-color: rgba(91, 172, 118, 0.58);
    background: rgba(91, 172, 118, 0.14);
    color: #9bd2aa;
}

.dependency-state-none {
    color: var(--muted);
}

.dependency-summary > summary {
    cursor: pointer;
    list-style: none;
}

.dependency-summary > summary::-webkit-details-marker {
    display: none;
}

.dependency-summary-list {
    display: grid;
    gap: 4px;
    min-width: 280px;
    margin-top: 7px;
}

.dependency-summary-list a {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.dependency-summary-list a.is-blocking {
    border-color: rgba(214, 91, 77, 0.42);
}

.dependency-summary-list a.is-complete {
    color: var(--muted-strong);
}

.dependency-summary-list strong,
.dependency-summary-list small {
    overflow-wrap: anywhere;
    white-space: normal;
}

.dependency-summary-list small {
    color: var(--muted);
}

.work-item-table .work-item-description-cell {
    white-space: normal;
    line-height: 1.35;
}

.work-item-table .work-item-description-cell > span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.compact-person {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-item-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(111, 142, 172, 0.24);
    border-radius: 999px;
    background: rgba(58, 83, 111, 0.28);
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    white-space: nowrap;
}

.task-table tr.selected {
    background: var(--row-selected-bg);
}

.task-table tbody tr:hover {
    background: var(--row-hover-bg);
}

.request-table-wrap {
    overflow-x: auto;
    padding: 0;
    border-radius: var(--surface-radius);
}

.request-grid {
    --request-columns: minmax(240px, 1.8fr) 128px 146px 82px 112px 112px 112px 142px 116px;
    min-width: 1190px;
}

.request-grid-header,
.request-grid-row {
    display: grid;
    grid-template-columns: var(--request-columns);
    align-items: center;
}

.request-grid-header {
    min-height: 34px;
    border-bottom: 1px solid var(--line);
}

.request-grid-heading,
.request-grid-cell {
    min-width: 0;
    padding: 8px 10px;
}

.request-grid-heading {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.request-column-sort {
    color: inherit;
    text-decoration: none;
}

.request-column-sort:hover,
.request-column-sort.active {
    color: #d3a76d;
}

.request-grid-row {
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.request-grid-row:last-child {
    border-bottom: 0;
}

.request-grid-row:hover {
    background: var(--row-hover-bg);
}

.request-grid-row.selected {
    background: var(--row-selected-bg);
}

.request-grid-cell {
    overflow: hidden;
    color: #d8e0e7;
    font-size: var(--font-size-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-title-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.request-title-cell .request-title-link {
    min-width: 0;
    overflow: hidden;
    color: #f6ddb0;
    font-weight: var(--font-weight-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-status-cell .status-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-edit-trigger {
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    min-width: 0;
    align-items: center;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    cursor: text;
    vertical-align: middle;
}

.inline-edit-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-edit-trigger:hover,
.inline-edit-trigger:focus-visible {
    border-color: rgba(211, 167, 109, 0.42);
    background: rgba(211, 167, 109, 0.08);
    outline: none;
}

.inline-edit-trigger.status-pill {
    padding: 2px 8px;
    cursor: pointer;
}

.inline-edit-cell {
    position: relative;
    isolation: isolate;
}

.request-grid-cell.inline-editing,
.task-table td.inline-editing {
    overflow: visible;
}

.request-grid-cell.inline-edit-active,
.task-table td.inline-edit-active {
    outline: 1px solid rgba(211, 167, 109, 0.42);
    outline-offset: -1px;
}

.inline-edit-form {
    position: absolute;
    inset: 4px 6px;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 1px solid rgba(211, 167, 109, 0.46);
    border-radius: 6px;
    background: rgba(18, 18, 18, 0.98);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.inline-edit-form.is-floating {
    position: fixed;
    inset: auto;
    z-index: 1000;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: min(320px, calc(100vw - 16px));
    min-height: 38px;
    padding: 6px;
    gap: 6px;
    border-color: rgba(161, 189, 218, 0.5);
    border-radius: 8px;
    background: rgba(14, 21, 29, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(161, 189, 218, 0.12);
}

.inline-edit-form[data-input-type="timing-date"] {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) auto;
}

.inline-edit-form.is-floating[data-input-type="timing-date"] {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto;
}

.inline-edit-form.is-floating[data-input-type="multi-select"],
.inline-edit-form.is-floating[data-input-type="textarea"] {
    align-items: start;
}

.inline-edit-control {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: var(--font-size-ui);
    line-height: 1.15;
}

.inline-edit-form textarea.inline-edit-control {
    min-height: 52px;
    resize: none;
}

.inline-disposition-note {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 25;
    display: grid;
    gap: 4px;
    width: 280px;
    max-width: min(320px, 70vw);
    padding: 8px;
    border: 1px solid rgba(211, 167, 109, 0.4);
    border-radius: 7px;
    background: #151515;
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: var(--font-size-xs);
    white-space: normal;
}

.inline-edit-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    min-width: 68px;
}

.inline-edit-actions button {
    width: auto;
    min-width: 30px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: var(--font-size-2xs);
    line-height: 1;
    text-align: center;
}

.inline-edit-actions button[data-inline-cancel] {
    background: var(--surface-2);
    color: var(--text);
}

.inline-edit-form.is-saving {
    opacity: 0.7;
}

.inline-edit-error {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: min(300px, 70vw);
    padding: 5px 7px;
    border: 1px solid rgba(255, 179, 168, 0.42);
    border-radius: 6px;
    background: #211413;
    color: #ffb3a8;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    white-space: normal;
}

.inline-edit-form.has-disposition .inline-edit-error {
    top: calc(100% + 92px);
}

.person-picker-native {
    display: none;
}

.person-picker {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.person-picker-control {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    cursor: text;
}

.person-picker.is-open .person-picker-control,
.person-picker-control:focus-within {
    border-color: rgba(161, 189, 218, 0.62);
    box-shadow: 0 0 0 1px rgba(86, 137, 196, 0.18);
}

.person-picker-chips {
    display: contents;
}

.person-picker-chip {
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid rgba(161, 189, 218, 0.28);
    border-radius: 999px;
    background: rgba(86, 137, 196, 0.18);
    color: var(--text);
    font-size: var(--font-size-xs);
    line-height: 1.2;
}

.person-picker-chip span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-picker-search {
    flex: 1 1 120px;
    min-width: 96px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    outline: none;
}

.person-picker-list {
    position: absolute;
    z-index: 1010;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow: auto;
    padding: 4px;
    border: 1px solid rgba(161, 189, 218, 0.38);
    border-radius: 8px;
    background: #101820;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

.person-picker-option,
.person-picker-empty {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
}

.person-picker-option[aria-selected="true"],
.person-picker-option:hover,
.person-picker-option:focus-visible {
    background: rgba(86, 137, 196, 0.24);
    outline: none;
}

.person-picker-avatar {
    display: inline-grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
}

.person-picker-empty {
    color: var(--muted);
}

.inline-person-picker .person-picker-control {
    min-height: 30px;
}

.person-picker.has-error .person-picker-control {
    border-color: rgba(255, 179, 168, 0.7);
}

.request-priority-cell,
.request-health-cell,
.request-timing-cell,
.request-person-cell,
.request-updated-cell {
    color: var(--muted-strong);
}

.request-actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

.request-row-action {
    min-height: var(--compact-control-height);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: var(--font-size-xs);
    line-height: 1;
}

.request-actions-cell .delete-form {
    display: inline-flex;
    margin: 0;
}

.unread-badge,
.new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid rgba(240, 196, 106, 0.42);
    border-radius: 999px;
    background: rgba(240, 196, 106, 0.1);
    color: #f0c46a;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.new-badge {
    min-width: 0;
    min-height: 16px;
    vertical-align: middle;
}

.unread-pill {
    margin-left: 6px;
}

.unread-link {
    color: inherit;
    font-weight: inherit;
}

.task-table tr.overdue td {
    color: #d3a76d;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(61, 127, 214, 0.12);
    color: #dcecff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.user-admin-panel {
    display: grid;
    gap: 10px;
}

.user-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.user-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.segmented-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.segmented-tabs a {
    min-height: 34px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-strong);
}

.segmented-tabs a.active {
    border-color: rgba(211, 167, 109, 0.38);
    background: rgba(211, 167, 109, 0.12);
    color: var(--accent);
}

.segmented-tabs span {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    text-align: center;
    font-size: var(--font-size-xs);
}

.user-table-wrap {
    overflow-x: auto;
}

.user-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.user-table th:nth-child(1),
.user-table td:nth-child(1) {
    width: 46%;
}

.user-table th:nth-child(2),
.user-table td:nth-child(2) {
    width: 82px;
}

.user-table th:nth-child(3),
.user-table td:nth-child(3) {
    width: 132px;
}

.user-table th:nth-child(4),
.user-table td:nth-child(4) {
    width: 104px;
}

.user-table th:nth-child(5),
.user-table td:nth-child(5) {
    width: 82px;
}

.user-table:has(.select-col) th:nth-child(1),
.user-table:has(.select-col) td:nth-child(1) {
    width: 54px;
}

.user-table:has(.select-col) th:nth-child(2),
.user-table:has(.select-col) td:nth-child(2) {
    width: 42%;
}

.user-table:has(.select-col) th:nth-child(3),
.user-table:has(.select-col) td:nth-child(3) {
    width: 82px;
}

.user-table:has(.select-col) th:nth-child(4),
.user-table:has(.select-col) td:nth-child(4) {
    width: 132px;
}

.user-table:has(.select-col) th:nth-child(5),
.user-table:has(.select-col) td:nth-child(5) {
    width: 104px;
}

.user-table:has(.select-col) th:nth-child(6),
.user-table:has(.select-col) td:nth-child(6) {
    width: 82px;
}

.user-table th,
.user-table td {
    padding: 6px 7px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-table th {
    color: var(--muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.user-table td {
    color: #d8e0e7;
    font-size: var(--font-size-sm);
}

.user-table tr.selected {
    background: rgba(211, 167, 109, 0.07);
}

.user-cell a {
    display: block;
    max-width: 42ch;
    overflow: hidden;
    color: #eef3f7;
    font-weight: var(--font-weight-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell small {
    display: none;
    margin-top: 3px;
    max-width: 42ch;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
}

.role-cell,
.status-cell,
.created-cell {
    color: var(--muted-strong);
}

.select-col {
    text-align: center;
}

.select-col input {
    width: auto;
}

.empty-cell {
    color: var(--muted);
    text-align: center;
}

.user-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

.user-actions form {
    margin: 0;
}

.user-actions .button,
.user-actions .danger-button,
.user-actions button {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.user-actions .danger-button {
    background: rgba(201, 86, 67, 0.12);
    color: #d3a76d;
}

.sub-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(211, 167, 109, 0.1);
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.health-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid rgba(133, 157, 183, 0.26);
    border-radius: 999px;
    background: rgba(133, 157, 183, 0.1);
    color: #cbd6e2;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-future,
.health-open,
.health-recent {
    border-color: rgba(104, 162, 221, 0.3);
    background: rgba(104, 162, 221, 0.1);
    color: #b8d3ef;
}

.health-active,
.health-waiting_responsible {
    border-color: rgba(211, 167, 109, 0.32);
    background: rgba(211, 167, 109, 0.1);
    color: #ead2ad;
}

.health-due_soon,
.health-past_target {
    border-color: rgba(224, 128, 93, 0.36);
    background: rgba(224, 128, 93, 0.11);
    color: #efb49e;
}

.health-overdue {
    border-color: rgba(231, 91, 83, 0.38);
    background: rgba(231, 91, 83, 0.12);
    color: #f1a39d;
}

.health-done,
.health-closed {
    border-color: rgba(124, 166, 135, 0.32);
    background: rgba(124, 166, 135, 0.1);
    color: #bed3c4;
}

.invite-link-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin: 10px 0;
}

.invite-link-copy label {
    min-width: 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.invite-link-copy input {
    width: 100%;
    min-height: 32px;
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.invite-timeline {
    display: grid;
    gap: 5px;
    margin: 8px 0 10px;
}

.invite-timeline div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.invite-timeline strong {
    color: var(--ink);
}

.invite-timeline span {
    text-align: right;
}

.bulk-selection-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.bulk-selection-footer button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.rail-form {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
}

.rail-form input,
.rail-form select,
.rail-form textarea {
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: var(--font-size-ui);
}

.rail-form textarea {
    min-height: 82px;
}

.direct-message-form select[multiple] {
    min-height: 112px;
}

.task-rail-form .task-date-range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-rail-form .date-range-toggle,
.task-rail-form .date-range-popover,
.task-rail-form .date-range-hint {
    grid-column: 1 / -1;
}

.task-rail-form .date-range-popover {
    position: static;
    width: auto;
    box-shadow: none;
}

.replace-version-form {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.replace-version-form textarea {
    min-height: 58px;
}

.upload-conflict-shell {
    align-items: flex-start;
    padding-top: 6vh;
}

.upload-conflict-panel {
    width: min(760px, calc(100vw - 32px));
}

.upload-conflict-panel h1 {
    margin-bottom: 8px;
}

.warning-note {
    margin: 10px 0 0;
    padding: 9px 10px;
    border: 1px solid rgba(244, 190, 92, 0.4);
    border-radius: 8px;
    background: rgba(244, 190, 92, 0.08);
    color: #f5d89d;
    font-size: var(--font-size-body);
}

.conflict-summary {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.conflict-summary div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.conflict-summary span {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.conflict-summary strong {
    color: #eef3f7;
    overflow-wrap: anywhere;
}

.conflict-summary small {
    color: var(--muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.conflict-actions {
    display: grid;
    gap: 8px;
}

.conflict-actions textarea {
    min-height: 58px;
}

.checkbox-label {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 7px;
}

.checkbox-label input {
    width: auto;
}

.file-table-panel {
    padding: 10px;
    display: grid;
    gap: 8px;
}

.files-explorer {
    display: grid;
    gap: 8px;
    padding: 0;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.files-explorer.is-drag-over {
    outline: 2px solid rgba(61, 127, 214, 0.72);
    outline-offset: -5px;
    background: rgba(61, 127, 214, 0.08);
}

.files-drop-target-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(61, 127, 214, 0.28);
    border-radius: 7px;
    background: rgba(61, 127, 214, 0.08);
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
}

.files-explorer.is-drag-over .files-drop-target-label {
    border-color: rgba(61, 127, 214, 0.78);
    background: rgba(61, 127, 214, 0.18);
    color: #eef3f7;
}

.files-drop-target-label::before {
    content: "Drop to upload";
    display: none;
}

.files-explorer.is-drag-over .files-drop-target-label {
    font-size: 0;
}

.files-explorer.is-drag-over .files-drop-target-label::before,
.files-explorer.is-drag-over .files-drop-target-label strong {
    display: inline;
    font-size: var(--font-size-xs);
}

.files-explorer.is-drag-over .files-drop-target-label strong::before {
    content: " to ";
    color: var(--muted-strong);
}

.files-explorer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.files-explorer-header-compact {
    align-items: flex-start;
}

.files-explorer-header-compact h1 {
    margin: 0 0 var(--module-gap);
    color: #eaf0f5;
    font-size: var(--module-title-size);
    font-weight: var(--module-title-weight);
    letter-spacing: 0;
}

.file-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
}

.file-breadcrumb a {
    color: #eef3f7;
    font-weight: var(--font-weight-strong);
}

.file-back-link {
    min-height: var(--compact-control-height);
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.files-toolbar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

.files-view-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.view-toggle-button {
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    cursor: pointer;
}

.view-toggle-button.is-active {
    background: rgba(211, 167, 109, 0.16);
    color: #f6dfba;
    box-shadow: inset 0 0 0 1px rgba(211, 167, 109, 0.3);
}

.view-label-short {
    display: none;
}

.upload-menu {
    display: inline-block;
    position: relative;
}

.upload-menu summary {
    list-style: none;
    cursor: pointer;
}

.upload-menu summary::-webkit-details-marker {
    display: none;
}

.upload-menu summary::after {
    content: " ▾";
}

.upload-menu-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    width: max-content;
    min-width: 190px;
    max-width: min(240px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #27313c;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.upload-menu-options button {
    min-height: 30px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #eef3f7;
    text-align: left;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.upload-menu-options button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.file-upload-form,
.file-selection-bar,
.folder-create-form,
.explorer-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: end;
}

.file-upload-form {
    padding: 7px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.file-tools-panel {
    display: grid;
    gap: 8px;
}

.file-tools-top {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.context-panel .file-upload-form,
.context-panel .file-selection-bar,
.context-panel .folder-create-form,
.context-panel .explorer-filter {
    display: grid;
    gap: 7px;
    align-items: stretch;
}

.context-panel .file-upload-form label,
.context-panel .file-selection-bar label,
.context-panel .folder-create-form label,
.context-panel .explorer-filter label {
    min-width: 0;
}

.context-panel .file-upload-form select,
.context-panel .file-selection-bar select,
.context-panel .folder-create-form input,
.context-panel .explorer-filter input,
.context-panel .explorer-filter select {
    width: 100%;
}

.file-upload-form input[type="file"] {
    display: none;
}

.upload-status-panel {
    display: grid;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(61, 127, 214, 0.28);
    border-radius: 8px;
    background: rgba(61, 127, 214, 0.08);
    color: #e6edf3;
}

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

.upload-status-panel h2 {
    margin: 0;
    font-size: var(--font-size-body);
}

.upload-status-panel p {
    margin: 0;
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
}

.upload-status-panel menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.upload-conflict-modal {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(5, 8, 12, 0.64);
}

.upload-conflict-modal[hidden] {
    display: none;
}

.upload-conflict-dialog {
    display: grid;
    gap: 10px;
    width: min(520px, 100%);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #202933;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.upload-conflict-dialog h2 {
    margin: 0;
    color: #eef3f7;
    font-size: var(--font-size-section);
}

.upload-conflict-dialog p {
    margin: 0;
    color: var(--muted-strong);
    font-size: var(--font-size-body);
}

.upload-conflict-dialog menu {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.conflict-summary.compact {
    margin: 0;
}

.upload-progress-track {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.upload-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.16s ease;
}

.upload-failure-list {
    margin: 0;
    padding-left: 18px;
    color: #f0c4bb;
    font-size: var(--font-size-sm);
}

.file-selection-bar {
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.file-selection-bar[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

.file-selection-bar span {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.file-selection-bar strong,
.file-cut-note {
    color: var(--accent);
}

.file-upload-form label,
.file-selection-bar label,
.folder-create-form label,
.explorer-filter label {
    width: auto;
    min-width: 120px;
    font-size: var(--font-size-xs);
}

.file-upload-form select,
.file-selection-bar select,
.folder-create-form input,
.explorer-filter input,
.explorer-filter select {
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
}

.file-upload-form button,
.file-selection-bar button,
.folder-create-form button,
.explorer-filter button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.upload-destination-note {
    align-self: center;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.upload-destination-note strong {
    color: var(--accent);
}

.folder-create-form input {
    width: 180px;
}

.explorer-filter {
    padding-top: 2px;
}

.explorer-filter .search-field {
    flex: 1 1 220px;
}

.explorer-filter details {
    position: relative;
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
}

.explorer-filter summary {
    min-height: 30px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
}

.explorer-filter details[open] {
    display: contents;
}

.file-drop-note {
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.file-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.explorer-list {
    border: 1px solid var(--line);
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

.files-explorer[data-files-view-mode="preview"] .files-details-view {
    display: none;
}

.files-explorer[data-files-view-mode="details"] .files-preview-grid {
    display: none;
}

.files-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

.file-preview-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.026);
    cursor: grab;
}

.file-preview-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.file-preview-card.selected,
.file-preview-card.is-selected {
    border-color: rgba(211, 167, 109, 0.48);
    background: var(--row-selected-bg);
    outline: 1px solid rgba(211, 167, 109, 0.34);
}

.file-preview-card.storage-missing {
    border-color: rgba(232, 131, 112, 0.32);
    background: rgba(175, 64, 64, 0.08);
}

.file-preview-card.is-dragging-file,
.file-preview-card.is-dragging-folder {
    opacity: 0.54;
}

.file-preview-card.file-drop-target.is-move-target {
    outline: 2px solid rgba(61, 127, 214, 0.8);
    outline-offset: -2px;
    background: rgba(61, 127, 214, 0.12);
}

.file-preview-box {
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(100%, 256px);
    aspect-ratio: 1 / 1;
    max-height: 256px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    overflow: hidden;
    background: #10141a;
}

.file-preview-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdf-thumb-canvas {
    display: none;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.pdf-thumb-rendered .pdf-thumb-canvas {
    display: block;
}

.pdf-thumb-rendered .pdf-thumb-fallback {
    display: none;
}

.pdf-thumb-failed .pdf-thumb-fallback {
    display: grid;
}

.office-thumb-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.office-thumb-rendered .office-thumb-image {
    display: block;
}

.office-thumb-rendered .office-thumb-fallback {
    display: none;
}

.folder-preview-box {
    background: linear-gradient(180deg, rgba(211, 167, 109, 0.13), rgba(61, 127, 214, 0.08));
}

.preview-folder-icon {
    font-size: 5.4rem;
    line-height: 1;
}

.preview-type-tile {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: min(78%, 198px);
    height: min(100%, 256px);
    max-height: 256px;
    aspect-ratio: 0.77 / 1;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: #e8edf2;
    color: #1b2530;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    text-align: center;
}

.preview-type-tile strong {
    font-size: var(--font-size-section-lg);
    letter-spacing: 0;
}

.preview-type-tile span {
    color: #51606e;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.preview-type-pdf {
    border-top: 10px solid #d85847;
}

.preview-type-doc {
    border-top: 10px solid #3d7fd6;
}

.preview-type-sheet {
    border-top: 10px solid #43a66c;
}

.preview-type-slide {
    border-top: 10px solid #c77a34;
}

.preview-type-text,
.preview-type-file {
    border-top: 10px solid #8b97a4;
}

.preview-type-missing {
    border-color: rgba(232, 131, 112, 0.5);
    border-top: 10px solid #d85847;
    background: #2a1718;
    color: #ffe1d8;
}

.preview-type-missing span {
    color: #f1b4a6;
}

.file-preview-card-body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.file-preview-name {
    min-width: 0;
    overflow: hidden;
    color: #eef3f7;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.file-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
}

.files-preview-empty {
    grid-column: 1 / -1;
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.file-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.file-table col[data-col="name"] {
    width: auto;
}

.file-table col[data-col="modified"] {
    width: 96px;
}

.file-table col[data-col="size"] {
    width: 76px;
}

.file-table col[data-col="by"] {
    width: 96px;
}

.file-table th.select-col,
.file-table td.select-col {
    display: none;
}

.file-table th:nth-child(1),
.file-table td:nth-child(1) {
    width: auto;
    min-width: 0;
}

.file-table input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
}

.file-table th,
.file-table td {
    padding: var(--row-pad-y) 7px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.file-table th {
    position: relative;
    color: var(--muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: uppercase;
}

.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.col-resizer::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 3px;
    width: 1px;
    background: transparent;
}

.col-resizer:hover::after {
    background: rgba(255, 255, 255, 0.28);
}

.file-table td {
    color: #d8e0e7;
    font-size: var(--font-size-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-table td.file-modified-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.file-modified-timestamp {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 1px;
    max-width: 100%;
    color: #d8e0e7;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.file-modified-timestamp span {
    display: inline-block;
}

.file-table tr.selected,
.file-table tr.is-selected {
    background: var(--row-selected-bg);
    outline: 1px solid rgba(211, 167, 109, 0.28);
    outline-offset: -1px;
}

.file-table tr.folder-row {
    background: rgba(255, 255, 255, 0.018);
    cursor: grab;
}

.file-table tr.file-row {
    cursor: grab;
}

.file-table tr.file-row.storage-missing {
    background: rgba(175, 64, 64, 0.08);
}

.file-table tr.file-row.is-dragging-file,
.file-table tr.folder-row.is-dragging-folder {
    opacity: 0.54;
}

.file-table tr.file-drop-target.is-move-target {
    outline: 2px solid rgba(61, 127, 214, 0.8);
    outline-offset: -2px;
    background: rgba(61, 127, 214, 0.12);
}

.file-table tr:hover {
    background: var(--row-hover-bg);
}

.file-name a {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: #eef3f7;
    text-overflow: ellipsis;
}

.file-table .file-open-link,
.file-table .folder-open-link {
    pointer-events: none;
}

.file-name-icon {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: var(--font-size-body-lg);
}

.file-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-status-badge,
.storage-version-warning {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid rgba(232, 131, 112, 0.55);
    border-radius: 999px;
    color: #f1b4a6;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1.1;
    white-space: nowrap;
}

.storage-warning {
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(232, 131, 112, 0.45);
    border-radius: 8px;
    background: rgba(232, 131, 112, 0.1);
    color: #f4d1c9;
}

.storage-warning strong {
    color: #ffe1d8;
}

.storage-warning span {
    color: var(--muted);
    font-size: var(--font-size-ui);
}

.storage-repair-tools {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(61, 127, 214, 0.32);
    border-radius: 8px;
    background: rgba(61, 127, 214, 0.07);
}

.storage-repair-tools.expanded {
    margin: 0;
}

.storage-repair-form {
    display: grid;
    gap: 8px;
}

.storage-candidate-note {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.storage-candidate-note strong {
    color: #eef3f7;
    font-size: var(--font-size-ui);
}

.storage-candidate-note span {
    color: var(--muted);
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.integrity-panel {
    display: grid;
    gap: 16px;
}

.integrity-panel h2 {
    margin: 0;
    font-size: var(--font-size-section);
}

.integrity-metrics.metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.integrity-repair-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(61, 127, 214, 0.34);
    border-radius: 8px;
    background: rgba(61, 127, 214, 0.06);
}

.integrity-repair-card h2 {
    overflow-wrap: anywhere;
}

.integrity-repair-card dl {
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    gap: 7px 12px;
}

.integrity-repair-card dt {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0;
    text-transform: uppercase;
}

.integrity-repair-card dd {
    margin: 0;
    color: #eef3f7;
    overflow-wrap: anywhere;
}

.integrity-bulk-form {
    padding: 10px;
    border: 1px dashed rgba(245, 216, 157, 0.34);
    border-radius: 8px;
    background: rgba(245, 216, 157, 0.06);
}

.integrity-version-list {
    margin-top: -8px;
}

.integrity-orphan-list {
    display: grid;
    gap: 6px;
}

.integrity-orphan-list div {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.integrity-orphan-list strong {
    color: #e8eef5;
    overflow-wrap: anywhere;
}

.integrity-orphan-list span {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.button.disabled,
.disabled-link {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.disabled-link {
    color: var(--muted);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-strong);
}

.sort-link {
    color: var(--muted);
    font-weight: var(--font-weight-strong);
}

.sort-link.active {
    color: var(--accent);
}

.file-name small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
}

.inline-folder-form {
    margin: 0;
}

.inline-folder-form select {
    width: 92px;
    min-height: 26px;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.folder-manager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted-strong);
}

.folder-chip small {
    color: var(--muted);
}

.folder-chip form {
    margin: 0;
}

.folder-chip button {
    min-height: 20px;
    width: 20px;
    padding: 0;
    border-radius: 50%;
    background: rgba(201, 86, 67, 0.16);
    color: #f0c4bb;
    font-size: var(--font-size-sm);
}

.timeline {
    display: grid;
    gap: 10px;
}

.timeline div {
    display: grid;
    grid-template-columns: 180px 1fr 160px;
    gap: 12px;
    align-items: center;
}

.timeline time {
    color: var(--accent);
}

.schedule-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
}

.schedule-filters label {
    width: auto;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 7px;
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.schedule-filters input[type="checkbox"],
.schedule-filters select {
    width: auto;
}

.schedule-filters select {
    min-height: 28px;
    padding: 3px 24px 3px 8px;
    font-size: var(--font-size-sm);
}

.schedule-sort {
    margin-left: 0;
}

.schedule-milestones {
    white-space: nowrap;
}

.health-blocked,
.blocked-badge {
    border-color: rgba(211, 167, 109, 0.5);
    background: rgba(211, 167, 109, 0.14);
    color: #e8bd83;
}

.blocked-badge {
    display: inline-flex;
    padding: 1px 5px;
    border: 1px solid rgba(211, 167, 109, 0.5);
    border-radius: 999px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
}

.dependency-select {
    min-height: 92px;
}

.dependency-list {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.dependency-warning {
    padding: 7px 9px;
    border: 1px solid rgba(211, 167, 109, 0.5);
    background: rgba(211, 167, 109, 0.12);
    color: #e8bd83;
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.dependency-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    color: var(--ink);
    text-decoration: none;
}

.dependency-item strong {
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dependency-item.is-blocking {
    border-color: rgba(211, 167, 109, 0.45);
}

.dependency-item.is-complete {
    color: var(--muted);
    opacity: 0.78;
}

.schedule-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

.schedule-key-item {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.schedule-key-swatch {
    display: inline-block;
    width: 22px;
    height: 10px;
    border: 1px solid transparent;
    background: #68a978;
}

.schedule-key-swatch.status-due-today {
    background: #f0d36b;
}

.schedule-key-swatch.status-future {
    border-color: #68a978;
    border-style: dashed;
    background: rgba(104, 169, 120, 0.28);
}

.schedule-key-swatch.status-overdue {
    background: #c95643;
}

.schedule-key-swatch.status-complete {
    background: #777b80;
}

.gantt-panel {
    display: grid;
    gap: 14px;
}

.gantt-head {
    display: flex;
    min-height: 12px;
    justify-content: flex-end;
}

.gantt-scale-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.gantt-scale-title {
    padding: 8px 6px 0;
    color: #eef3f7;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.gantt {
    position: relative;
    display: grid;
    gap: 8px;
}

.gantt-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
    scrollbar-gutter: stable;
}

.gantt-scroll.is-scrollable {
    scrollbar-color: rgba(211, 167, 109, 0.38) rgba(255, 255, 255, 0.05);
}

.gantt-canvas {
    min-width: var(--gantt-width, 100%);
    display: grid;
    gap: 8px;
}

.gantt-scroll-hint {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.gantt-scale {
    position: relative;
    height: 48px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.gantt-month-row,
.gantt-increment-row {
    position: relative;
    height: 24px;
}

.gantt-month-row {
    border-bottom: 1px solid var(--line);
}

.gantt-month {
    position: absolute;
    left: var(--month-left);
    width: var(--month-width);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-tick {
    position: absolute;
    left: var(--tick-left);
    bottom: 4px;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.scale-daily .gantt-tick {
    font-size: var(--font-size-2xs);
}

.gantt-tick.major {
    color: #d2dce4;
    font-weight: var(--font-weight-strong);
}

.gantt-today-label {
    position: absolute;
    left: var(--today-left);
    bottom: 3px;
    transform: translateX(-50%);
    padding: 0 3px;
    background: #101418;
    color: #ff4d4f;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    white-space: nowrap;
}

.gantt-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.gantt-meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    padding: 0 6px;
    gap: 1px;
    align-items: stretch;
    overflow: hidden;
    color: inherit;
}

.gantt-scroll.is-scrollable .gantt-meta {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #101418;
    box-shadow: 8px 0 10px rgba(16, 20, 24, 0.72);
}

.gantt-meta-link {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.gantt-meta-link:hover strong,
.gantt-meta-link:focus strong {
    color: var(--accent);
}

.gantt-meta-link:focus {
    outline: 1px solid rgba(211, 167, 109, 0.45);
    outline-offset: 2px;
}

.gantt-meta strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #eef3f7;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-meta-status {
    display: flex;
    min-width: 0;
    gap: 5px;
    align-items: center;
    color: var(--muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.gantt-meta-status span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-status-form {
    flex: 0 0 auto;
    display: inline-flex;
    margin: 0;
}

.schedule-status-form select {
    min-height: 21px;
    max-width: 74px;
    padding: 1px 18px 1px 6px;
    border-radius: 5px;
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.schedule-status-readonly {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-size: var(--font-size-2xs);
}

.gantt-track {
    position: relative;
    height: 30px;
    border-radius: 0;
    background: #10141a;
    border: 1px solid var(--line);
    overflow: visible;
}

.gantt-milestone-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 14px;
    pointer-events: none;
}

.gantt-today-overlay {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 14px;
    pointer-events: none;
}

.gantt-milestone-track {
    position: relative;
    min-width: 0;
    min-height: 100%;
}

.gantt-today-track {
    position: relative;
    min-width: 0;
    min-height: 100%;
}

.gantt-panel .gantt-track,
.gantt-panel .gantt-bar,
.gantt-panel .gantt-bar * {
    border-radius: 0;
}

.gantt-grid-line {
    position: absolute;
    z-index: 1;
    left: var(--tick-left);
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.gantt-grid-line.week {
    width: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.gantt-grid-line.month {
    width: 2px;
    background: rgba(211, 167, 109, 0.2);
}

.gantt-today-line {
    position: absolute;
    z-index: 3;
    left: var(--today-left);
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ff4d4f;
    box-shadow: 0 0 0 1px rgba(16, 20, 24, 0.35), 0 0 10px rgba(255, 77, 79, 0.26);
    pointer-events: none;
}

.gantt-milestone-marker {
    position: absolute;
    z-index: 4;
    left: var(--milestone-left);
    top: 0;
    bottom: 0;
    width: 18px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(161, 189, 218, 0.5);
    background: rgba(111, 142, 172, 0.53);
    color: #eef3f7;
    text-decoration: none;
    overflow: hidden;
    pointer-events: auto;
}

.gantt-milestone-marker:hover,
.gantt-milestone-marker:focus,
.gantt-milestone-marker.selected {
    background: rgba(111, 142, 172, 0.78);
    outline: 1px solid rgba(161, 189, 218, 0.72);
    outline-offset: 1px;
}

.gantt-milestone-marker span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 100%;
    overflow: hidden;
    color: inherit;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-bar {
    position: absolute;
    z-index: 2;
    left: var(--drag-left, var(--bar-left));
    width: var(--drag-width, var(--bar-width));
    top: 5px;
    bottom: 5px;
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 20px;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 0;
    background: linear-gradient(90deg, #3d7fd6, #669ce8);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    cursor: grab;
    touch-action: none;
}

.gantt-resize-handle {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 8px;
    border-color: rgba(255, 255, 255, 0.44);
    opacity: 0.72;
    cursor: ew-resize;
}

.gantt-resize-handle.handle-start {
    left: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.54);
}

.gantt-resize-handle.handle-due {
    right: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.54);
}

.gantt-bar:hover .gantt-resize-handle,
.gantt-bar:focus .gantt-resize-handle,
.gantt-bar.is-resizing .gantt-resize-handle {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.gantt-bar:hover,
.gantt-bar:focus {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: 1px;
}

.gantt-bar.is-dragging,
.gantt-bar.is-drag-preview {
    z-index: 5;
    cursor: grabbing;
    opacity: 0.88;
    outline: 2px solid rgba(255, 255, 255, 0.62);
    outline-offset: 1px;
}

.gantt-bar.is-resizing {
    cursor: ew-resize;
}

.gantt-bar.is-pending-shift {
    z-index: 4;
    outline: 2px solid rgba(211, 167, 109, 0.78);
    outline-offset: 1px;
}

.gantt-bar.is-drag-preview::after {
    content: attr(data-drag-preview);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    min-width: max-content;
    padding: 3px 6px;
    border: 1px solid rgba(211, 167, 109, 0.35);
    background: #101418;
    color: #eef3f7;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.gantt-drag-confirm {
    position: absolute;
    z-index: 6;
    left: min(max(var(--drag-left, var(--bar-left)), 0%), calc(100% - 220px));
    top: calc(100% + 4px);
    display: flex;
    width: 220px;
    padding: 6px;
    gap: 5px;
    align-items: center;
    border: 1px solid rgba(211, 167, 109, 0.34);
    background: #101418;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

.gantt-drag-confirm strong,
.gantt-drag-confirm span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-drag-confirm strong {
    flex: 1 1 auto;
    color: #eef3f7;
    font-size: var(--font-size-2xs);
}

.gantt-drag-confirm span {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
}

.gantt-drag-confirm button {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 3px 6px;
    font-size: var(--font-size-2xs);
}

.gantt-row.selected .gantt-track {
    border-color: rgba(211, 167, 109, 0.62);
    box-shadow: inset 0 0 0 1px rgba(211, 167, 109, 0.2);
}

.gantt-bar-title,
.gantt-bar-owner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-bar-title {
    flex: 1 1 auto;
}

.gantt-bar-owner {
    flex: 0 2 auto;
    opacity: 0.82;
}

.gantt-row.overdue .gantt-bar {
    background: #c95643;
    color: #101418;
}

.gantt-row.behind:not(.overdue) .gantt-bar {
    box-shadow: inset 0 -2px 0 rgba(211, 167, 109, 0.58);
}

.gantt-bar.status-complete {
    background: #777b80;
    color: #101010;
}

.gantt-bar.status-overdue {
    background: #c95643;
    color: #101418;
}

.gantt-bar.status-due-today {
    background: #f0d36b;
    color: #101418;
}

.gantt-bar.status-active {
    background: #68a978;
    color: #101010;
}

.gantt-bar.status-future {
    border: 1px dashed #68a978;
    background: rgba(104, 169, 120, 0.28);
    color: #d8eadc;
}

.gantt-row.blocked .gantt-bar {
    box-shadow: inset 0 0 0 2px rgba(211, 167, 109, 0.72);
}

.gantt-blocked-icon {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    line-height: 1;
}

.gantt-row.selected .gantt-bar {
    outline: 2px solid rgba(211, 167, 109, 0.78);
    outline-offset: 1px;
}

.gantt-marker {
    position: absolute;
    left: var(--bar-left);
    top: 5px;
    width: 16px;
    height: 22px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 4px;
    background: var(--accent);
}

.flash {
    padding: 10px 12px;
    border: 1px solid rgba(61, 127, 214, 0.28);
    border-radius: 8px;
    background: rgba(61, 127, 214, 0.16);
    color: #eef3f7;
}

.flash.error {
    border-color: rgba(201, 86, 67, 0.32);
    background: var(--danger-bg);
    color: #f0c4bb;
}

.flash.success {
    border-color: rgba(104, 169, 120, 0.4);
    background: var(--success-bg);
    color: #cdebd4;
}

.delete-form {
    margin: 8px 0 0;
}

.row .delete-form,
.list-row .delete-form {
    margin: 0;
}

.danger-button {
    min-height: 30px;
    padding: 0 10px;
    background: #341b18;
    color: #f0c4bb;
    border: 1px solid rgba(201, 86, 67, 0.32);
    font-size: var(--font-size-sm);
}

.danger-button:hover {
    background: #431f1a;
}

.admin-delete {
    border-color: rgba(211, 167, 109, 0.4);
    color: var(--accent);
}

.list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.rail-panel {
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.rail-panel:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.eyebrow {
    margin: 0 0 8px;
    color: #87919b;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rail-panel h2 {
    margin: 0 0 8px;
    color: #eef3f7;
    font-size: var(--font-size-section);
    line-height: 1.2;
}

.rail-kicker {
    margin: 0 0 7px;
    color: #87919b;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rail-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rail-metrics div {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #222c36;
}

.rail-metrics strong {
    display: block;
    color: #eef3f7;
    font-size: var(--font-size-section-lg);
}

.rail-metrics span,
.rail-list span {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.rail-list {
    display: grid;
    gap: 8px;
}

.rail-list div {
    display: grid;
    gap: 3px;
}

.rail-list a {
    display: grid;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}

.rail-list a:hover strong,
.rail-list a:focus-visible strong {
    color: var(--accent);
}

.rail-list strong {
    color: #d2dce4;
    font-size: var(--font-size-body-lg);
    line-height: 1.35;
}

.context-detail dl {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 7px 10px;
    margin: 10px 0;
}

.context-detail dt {
    color: var(--muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.context-detail dd {
    margin: 0;
    color: #d8e0e7;
    overflow-wrap: anywhere;
}

.context-detail .button {
    width: 100%;
    margin-top: 8px;
}

.version-history {
    display: grid;
    gap: 8px;
    margin: 8px 0 10px;
}

.version-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.version-item.is-current {
    border-color: rgba(61, 127, 214, 0.55);
    background: rgba(61, 127, 214, 0.08);
}

.version-item div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.version-item strong,
.version-item span,
.version-item em {
    overflow-wrap: anywhere;
}

.version-item strong {
    color: #eef3f7;
    font-size: var(--font-size-body);
}

.version-item span,
.version-item em {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-style: normal;
}

.version-item a {
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    text-decoration: none;
}

.file-preview {
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #10141a;
}

.file-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}

.pdf-preview iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}

.file-viewer-page {
    background: var(--bg);
}

.viewer-shell {
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 24px 0 40px;
}

.viewer-shell.document-open-shell {
    width: min(760px, calc(100vw - 32px));
}

.viewer-header,
.viewer-meta,
.viewer-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.viewer-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.viewer-header h1 {
    margin: 0;
    max-width: 620px;
    font-size: var(--font-size-section);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.viewer-meta {
    padding: 0;
    margin-bottom: 12px;
}

.viewer-meta summary {
    padding: 10px 14px;
    color: var(--muted-strong);
    cursor: pointer;
    font-weight: var(--font-weight-strong);
}

.viewer-meta dl {
    display: grid;
    grid-template-columns: repeat(4, auto 1fr);
    gap: 4px 10px;
    margin: 0;
    padding: 0 14px 12px;
}

.viewer-linked {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.viewer-linked .rail-kicker {
    width: 100%;
    margin: 0;
    text-align: right;
}

.viewer-panel {
    padding: 14px;
}

.document-open-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    border-color: rgba(61, 127, 214, 0.28);
    background: rgba(61, 127, 214, 0.06);
}

.document-open-head {
    display: flex;
    gap: 10px;
    align-items: start;
    justify-content: space-between;
}

.document-open-panel h2 {
    margin: 0;
    max-width: 100%;
    font-size: var(--font-size-body-lg);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.document-action-grid,
.document-rail-actions {
    display: grid;
    gap: 7px;
}

.document-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.document-action-grid .button,
.document-open-footer .button,
.document-reset-choice {
    min-height: 32px;
    padding: 0 10px;
    font-size: var(--font-size-sm);
}

.document-preference {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
}

.document-preference input {
    min-height: 0;
}

.document-open-status {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(61, 127, 214, 0.32);
    border-radius: 6px;
    background: rgba(61, 127, 214, 0.1);
    color: var(--ink);
    font-size: var(--font-size-ui);
}

.document-advanced {
    padding: 8px 10px;
    border: 1px solid rgba(166, 176, 195, 0.2);
    border-radius: 6px;
    background: rgba(20, 27, 38, 0.42);
}

.document-advanced summary {
    color: var(--muted-strong);
    cursor: pointer;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-strong);
}

.document-advanced .muted {
    margin: 7px 0;
    font-size: var(--font-size-sm);
}

.document-open-footer {
    display: flex;
    justify-content: flex-start;
}

.document-integration-note {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px dashed rgba(166, 176, 195, 0.28);
    border-radius: 6px;
    background: rgba(20, 27, 38, 0.62);
    color: var(--muted);
    font-size: var(--font-size-body);
}

.document-integration-note strong {
    color: var(--ink);
}

.document-integration-note ol {
    margin: 0;
    padding-left: 18px;
}

.document-integration-note li {
    margin: 2px 0;
}

.document-integration-note.compact {
    font-size: var(--font-size-sm);
}

.document-launch-notice {
    margin: 0;
    padding: 9px 11px;
    border: 1px solid rgba(61, 127, 214, 0.4);
    border-radius: 6px;
    background: rgba(61, 127, 214, 0.12);
    color: var(--ink);
    font-size: var(--font-size-body);
}

.document-launch-notice.compact {
    font-size: var(--font-size-sm);
}

.document-edit-link-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.document-edit-link-copy.compact {
    grid-template-columns: 1fr;
}

.document-edit-link-copy label {
    min-width: 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.document-edit-link-copy input {
    width: 100%;
    min-height: 32px;
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
}

.document-copy-status {
    align-self: center;
    color: var(--success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.document-copy-status.is-error {
    color: var(--danger);
}

.viewer-text {
    overflow: auto;
    max-height: 72vh;
    padding: 14px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-soft);
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    font: 0.9rem/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.viewer-table-wrap {
    width: 100%;
    max-height: 72vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.viewer-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}

.viewer-table th,
.viewer-table td {
    min-width: 110px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: var(--font-size-body);
}

.viewer-table th {
    position: sticky;
    top: 0;
    background: var(--panel-soft);
    z-index: 1;
}

.viewer-image {
    text-align: center;
}

.viewer-image img {
    max-width: 100%;
    max-height: 78vh;
}

.viewer-pdf iframe {
    width: 100%;
    min-height: 78vh;
    border: 0;
    background: #ffffff;
}

.viewer-document {
    max-width: 860px;
    margin-inline: auto;
    line-height: 1.6;
}

.viewer-slide {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.viewer-note {
    color: var(--muted);
}

@media (max-width: 760px) {
    .viewer-header,
    .viewer-meta {
        display: block;
    }

    .viewer-actions,
    .viewer-linked {
        justify-content: flex-start;
        margin-top: 12px;
    }

    .viewer-meta dl {
        grid-template-columns: auto 1fr;
    }

    .document-edit-link-copy {
        grid-template-columns: 1fr;
    }
}

.ai-panel {
    border-color: rgba(61, 127, 214, 0.24);
}

.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.login-panel {
    width: min(420px, 100%);
    padding: 24px;
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #222c36;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.login-panel h1 {
    margin: 0;
}

@media (max-width: 1180px) {
    .shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .right {
        display: none;
    }

    .rail-resize-handle {
        display: none;
    }

    .project-hero,
    .workspace-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .shell,
    .split {
        grid-template-columns: 1fr;
    }

    .sidebar,
    .left,
    .content,
    .main,
    .right {
        height: auto;
        overflow: visible;
    }

    .sidebar {
        position: static;
    }

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

    .timeline div,
    .row,
    .gantt-row {
        grid-template-columns: 1fr;
        display: grid;
    }

    .gantt-scale {
        margin-left: 0;
    }

    .gantt-bar-owner {
        display: none;
    }

    .project-hero {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        background: var(--bg);
    }

    button,
    .button,
    .button.ghost {
        min-height: 32px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: var(--font-size-xs);
        line-height: 1.1;
    }

    input,
    select,
    textarea {
        min-height: 34px;
        padding: 7px 8px;
        border-radius: 6px;
        font-size: var(--font-size-body);
    }

    .shell {
        display: block;
        min-height: 100vh;
    }

    .sidebar,
    .left {
        position: sticky;
        top: 0;
        z-index: 92;
        height: auto;
        max-height: 100dvh;
        padding: 0;
        gap: 0;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        background: rgba(15, 19, 24, 0.98);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
        scrollbar-gutter: auto;
    }

    .brand-block {
        display: none;
    }

    .mobile-nav-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-nav-button {
        display: grid;
        grid-template-columns: 34px 34px minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        min-height: 52px;
        padding: 6px 50px 6px 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
    }

    body[data-view="spaces"][data-mobile-project-menu="0"] .mobile-nav-button {
        grid-template-columns: 34px minmax(0, 1fr);
        padding-right: 8px;
    }

    body[data-view="spaces"][data-mobile-project-menu="0"] .mobile-nav-menu-icon,
    body[data-view="spaces"][data-mobile-project-menu="0"] .mobile-context-button {
        display: none;
    }

    body[data-view="spaces"][data-mobile-project-menu="0"] .mobile-nav-toggle:checked ~ .primary-nav,
    body[data-view="spaces"][data-mobile-project-menu="0"] .mobile-nav-toggle:checked ~ .active-project-context {
        display: none;
    }

    .mobile-nav-menu-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.035);
        color: #eef3f7;
        font-size: var(--font-size-section);
        font-weight: var(--font-weight-strong);
        line-height: 1;
    }

    .mobile-nav-mark {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #4a86dc;
        color: #fff;
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-strong);
        cursor: pointer;
    }

    .mobile-nav-mark:focus {
        outline: 2px solid rgba(102, 156, 232, 0.55);
        outline-offset: 2px;
    }

    .mobile-nav-copy {
        display: grid;
        gap: 1px;
        min-width: 0;
    }

    .mobile-nav-copy strong {
        min-width: 0;
        overflow: hidden;
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-copy em {
        min-width: 0;
        overflow: hidden;
        color: var(--muted-strong);
        width: fit-content;
        max-width: 100%;
        padding: 2px 7px;
        border: 1px solid rgba(211, 167, 109, 0.2);
        border-radius: 999px;
        background: rgba(211, 167, 109, 0.08);
        color: #d9b883;
        font-size: var(--font-size-2xs);
        font-style: normal;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-copy em:empty {
        display: none;
    }

    .mobile-nav-toggle:checked + .mobile-nav-button .mobile-nav-menu-icon {
        border-color: rgba(211, 167, 109, 0.45);
        background: rgba(211, 167, 109, 0.16);
        color: var(--accent);
    }

    .mobile-nav-toggle:checked + .mobile-nav-button .mobile-nav-menu-icon {
        font-size: 0;
    }

    .mobile-nav-toggle:checked + .mobile-nav-button .mobile-nav-menu-icon::after {
        content: "×";
        font-size: var(--font-size-section);
        line-height: 1;
    }

    .sidebar .primary-nav,
    .sidebar .active-project-context,
    .sidebar .mobile-nav-logout,
    .sidebar .user-card {
        display: none;
    }

    .mobile-nav-toggle:checked ~ .primary-nav,
    .mobile-nav-toggle:checked ~ .active-project-context,
    .mobile-nav-toggle:checked ~ .mobile-nav-logout {
        display: grid;
    }

    .sidebar nav.primary-nav {
        grid-template-columns: 1fr;
        gap: 4px;
        max-height: calc(100dvh - 148px);
        overflow-y: auto;
        padding: 8px;
        border-top: 1px solid var(--line);
        background: #151b22;
    }

    .sidebar nav a {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        color: #d9e2eb;
        font-size: var(--font-size-ui);
    }

    .sidebar nav a.active {
        border-color: rgba(211, 167, 109, 0.36);
        background: rgba(211, 167, 109, 0.13);
        color: #f6dfba;
    }

    .active-project-context,
    .user-card,
    .mobile-nav-logout {
        margin: 0 8px 8px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: var(--font-size-xs);
    }

    .mobile-nav-logout {
        min-height: 36px;
        align-items: center;
        color: #f1b4a6;
        font-weight: var(--font-weight-strong);
    }

    .user-card {
        display: none !important;
    }

    .content,
    .main {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 10px;
        gap: 10px;
        overflow: visible;
        scrollbar-gutter: auto;
    }

    .main > *,
    .content > *,
    .page-head,
    .split,
    body[data-view="chats"] .list,
    .chat,
    .panel,
    .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .right {
        display: block !important;
        position: fixed;
        z-index: 93;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        padding: 0;
        overflow: visible;
        pointer-events: none;
        border-left: 0;
        background: transparent;
        scrollbar-gutter: auto;
    }

    .rail-resize-handle {
        display: none !important;
    }

    .context-panel {
        position: fixed;
        right: 8px;
        bottom: 10px;
        left: 8px;
        display: none;
        max-height: min(76dvh, 640px);
        padding: 12px;
        overflow: auto;
        border: 1px solid var(--line-strong);
        border-radius: 14px 14px 10px 10px;
        background: #151c24;
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }

    .mobile-context-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-context-button {
        position: fixed;
        top: 10px;
        right: 8px;
        z-index: 94;
        display: grid;
        place-items: center;
        align-items: center;
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.035);
        color: #eef3f7;
        box-shadow: none;
        font-size: var(--font-size-section-lg);
        font-weight: var(--font-weight-strong);
        line-height: 1;
        pointer-events: auto;
    }

    .mobile-context-toggle:checked ~ .mobile-context-button {
        border-color: rgba(211, 167, 109, 0.45);
        background: rgba(211, 167, 109, 0.16);
        color: var(--accent);
    }

    .mobile-context-toggle:checked ~ .context-panel {
        display: block;
    }

    .rail-panel {
        padding-bottom: 9px;
        margin-bottom: 9px;
    }

    .page-head {
        gap: 4px;
    }

    .page-head h1,
    .files-explorer-header-compact h1 {
        display: none;
    }

    .page-head p {
        margin: 0;
        color: var(--muted);
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }

    .panel,
    .card {
        padding: 9px;
        border-radius: 8px;
    }

    .project-switcher {
        padding: 10px;
    }

    body[data-view="spaces"] .page-head {
        padding: 0;
    }

    body[data-view="spaces"][data-mobile-project-menu="0"] .page-head h1 {
        display: block;
        margin: 0;
        color: #eef3f7;
        font-size: var(--font-size-section);
    }

    body[data-view="spaces"][data-mobile-project-menu="0"] .page-head p {
        color: var(--muted-strong);
    }

    body[data-view="spaces"][data-mobile-project-menu="1"] .page-head,
    body[data-view="spaces"][data-mobile-project-menu="1"] .project-selector,
    body[data-view="spaces"][data-mobile-project-menu="1"] .archived-projects {
        display: none;
    }

    body[data-view="spaces"][data-mobile-project-menu="1"] .mobile-project-menu {
        display: grid;
    }

    .project-selector {
        padding: 0;
        overflow: hidden;
    }

    .project-row-list {
        display: grid;
        gap: 0;
    }

    .project-select-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-height: 46px;
        padding: 11px 12px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
    }

    .project-select-row:last-child {
        border-bottom: 0;
    }

    .project-select-row strong {
        min-width: 0;
        overflow: hidden;
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-select-row small,
    .project-select-row .project-row-meta {
        display: none;
    }

    .mobile-project-unread-badge {
        display: grid;
        place-items: center;
        min-width: 26px;
        min-height: 24px;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(211, 167, 109, 0.16);
        color: #f6dfba;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-strong);
    }

    .mobile-project-unread-badge:empty {
        background: transparent;
    }

    .mobile-project-menu {
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .mobile-project-menu-head {
        display: grid;
        gap: 2px;
        padding: 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.02);
    }

    .mobile-project-menu-head span {
        color: var(--muted);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-strong);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mobile-project-menu-head strong {
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
    }

    .mobile-project-menu-list {
        display: grid;
    }

    .mobile-project-menu-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
        min-height: 44px;
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        color: #e8eef5;
        font-size: var(--font-size-body-lg);
        font-weight: var(--font-weight-strong);
    }

    .mobile-project-menu-row em {
        color: var(--muted);
        font-size: var(--font-size-section);
        font-style: normal;
    }

    .mobile-project-menu-row .unread-badge {
        min-width: 24px;
    }

    .mobile-logout-row {
        display: block;
        min-height: 42px;
        padding: 12px;
        color: #f1b4a6;
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-strong);
    }

    .project-switcher label {
        max-width: none;
    }

    .split,
    body[data-view="chats"] .split {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
    }

    .communications-tabs,
    .files-view-toggle {
        display: flex;
        width: 100%;
        margin: 0 0 8px;
        gap: 0;
        padding: 0;
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #151c24;
        scrollbar-gutter: auto;
    }

    .communications-tabs a,
    .view-toggle-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 0 10px;
        border: 0;
        border-right: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        color: var(--muted-strong);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-strong);
        text-align: center;
        white-space: nowrap;
    }

    .communications-tabs a:last-child,
    .view-toggle-button:last-child {
        border-right: 0;
    }

    .communications-tabs a.active,
    .view-toggle-button.is-active {
        background: rgba(211, 167, 109, 0.14);
        color: #f4d7a5;
        box-shadow: inset 0 -2px 0 rgba(211, 167, 109, 0.7);
    }

    .view-label-full {
        display: none;
    }

    .view-label-short {
        display: inline;
    }

    .messaging-center-head {
        gap: 6px;
        padding: 7px;
        border-radius: 8px;
    }

    .conversation-toggle {
        min-height: 28px;
        padding: 0 8px;
    }

    .messaging-active-title {
        gap: 5px 7px;
    }

    .messaging-active-title h2 {
        font-size: var(--font-size-body-lg);
    }

    .direct-thread-view {
        min-height: 0;
    }

    #direct-messages {
        max-height: 54dvh;
        min-height: 220px;
        overflow-x: hidden;
    }

    .direct-message,
    .direct-message-content,
    .direct-message-content p,
    .attachment,
    .attachment-detail,
    .attachment-detail a,
    .direct-reaction-badges,
    .direct-read-receipt {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .attachment {
        display: inline-flex;
        align-items: flex-start;
        min-height: 24px;
        border-radius: 8px;
        line-height: 1.25;
        text-overflow: clip;
        white-space: normal;
    }

    .attachment-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        width: 100%;
    }

    .attachment-detail small,
    .attachment-detail a,
    .attachment-detail em {
        display: block;
        min-width: 0;
        line-height: 1.25;
        white-space: normal;
    }

    body[data-view="chats"] .list,
    .chat {
        width: 100%;
        min-height: 0;
        padding: 10px;
    }

    body[data-view="chats"] .mini-form {
        grid-template-columns: 1fr auto;
    }

    #messages {
        max-height: 58dvh;
        min-height: 220px;
        padding-right: 0;
    }

    .pinned-message-head,
    .message-meta {
        flex-wrap: wrap;
    }

    .pinned-message-head strong,
    .message strong {
        overflow-wrap: anywhere;
    }

    .composer-input {
        grid-template-columns: minmax(0, 1fr) 38px 42px;
    }

    .attachment-destination {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .files-explorer {
        gap: 8px;
    }

    .files-explorer-header {
        display: grid;
        gap: 7px;
        align-items: start;
    }

    .files-explorer-header > div:first-child {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

    .files-toolbar-actions {
        flex-wrap: wrap;
        gap: 5px;
    }

    .files-view-toggle {
        margin: 0;
    }

    .files-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
        gap: 8px;
        padding: 8px;
    }

    .file-preview-card {
        gap: 6px;
        padding: 7px;
    }

    .file-preview-box {
        width: min(100%, 156px);
        max-height: 156px;
    }

    .preview-folder-icon {
        font-size: 3.6rem;
    }

    .preview-type-tile {
        width: min(82%, 122px);
        max-height: 156px;
        padding: 10px;
    }

    .preview-type-tile strong {
        font-size: var(--font-size-section);
    }

    .file-preview-name {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .file-breadcrumb {
        padding: 7px 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        font-size: var(--font-size-xs);
        line-height: 1.35;
    }

    .files-drop-target-label {
        min-height: 26px;
        padding: 3px 7px;
        border-radius: 999px;
        font-size: var(--font-size-xs);
    }

    .files-explorer[data-files-mobile-simple="1"] {
        gap: 8px;
    }

    .files-explorer[data-files-mobile-simple="1"] .files-drop-target-label,
    .files-explorer[data-files-mobile-simple="1"] .files-view-toggle,
    .files-explorer[data-files-mobile-simple="1"] .files-preview-grid,
    .files-explorer[data-files-mobile-simple="1"] .file-table thead,
    .files-explorer[data-files-mobile-simple="1"] .file-table colgroup,
    .files-explorer[data-files-mobile-simple="1"] .file-table td:not(:first-child),
    .files-explorer[data-files-mobile-simple="1"] .file-name small,
    .files-explorer[data-files-mobile-simple="1"] .storage-status-badge,
    .files-explorer[data-files-mobile-landing="1"] .file-table tr.file-row {
        display: none;
    }

    .files-explorer[data-files-mobile-simple="1"] .files-details-view,
    .files-explorer[data-files-mobile-simple="1"] .file-table,
    .files-explorer[data-files-mobile-simple="1"] .file-table tbody,
    .files-explorer[data-files-mobile-simple="1"] .file-table tr,
    .files-explorer[data-files-mobile-simple="1"] .file-table td {
        display: block;
        width: 100%;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-table tr.folder-row,
    .files-explorer[data-files-mobile-simple="1"] .file-table tr.file-row {
        position: relative;
        min-height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        cursor: pointer;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-table tr.folder-row:last-child,
    .files-explorer[data-files-mobile-simple="1"] .file-table tr.file-row:last-child {
        border-bottom: 0;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-table tr.folder-row::after,
    .files-explorer[data-files-mobile-simple="1"] .file-table tr.file-row::after {
        content: "›";
        position: absolute;
        top: 50%;
        right: 12px;
        color: var(--muted);
        font-size: var(--font-size-section);
        transform: translateY(-50%);
    }

    .files-explorer[data-files-mobile-simple="1"] .file-name {
        padding: 12px 34px 12px 12px;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-name a {
        display: inline-flex;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
        align-items: center;
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
        font-weight: var(--font-weight-strong);
        pointer-events: auto;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-name-icon {
        flex: 0 0 auto;
        width: 22px;
        text-align: center;
    }

    .files-explorer[data-files-mobile-simple="1"] .file-label {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .files-explorer[data-files-mobile-simple="1"] .new-badge,
    .files-explorer[data-files-mobile-simple="1"] .unread-badge,
    .files-explorer[data-files-mobile-simple="1"] .badge {
        margin-left: 8px;
        vertical-align: middle;
    }

    .file-table-wrap,
    .task-table-wrap {
        overflow-x: visible;
    }

    .file-table,
    .task-table,
    .file-table tbody,
    .task-table tbody,
    .file-table tr,
    .task-table tr,
    .file-table td,
    .task-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .file-table thead,
    .task-table thead,
    .file-table colgroup {
        display: none;
    }

    .file-table tr,
    .task-table tbody tr {
        margin: 0 0 7px;
        padding: 9px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.018);
    }

    .file-table tr:last-child,
    .task-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .file-table td,
    .task-table td {
        padding: 3px 0;
        border-bottom: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: var(--font-size-ui);
    }

    .file-table td:not(:first-child),
    .task-table td:not(:first-child) {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 7px;
        align-items: start;
        color: var(--muted-strong);
    }

    .file-table td:not(:first-child)::before,
    .task-table td:not(:first-child)::before {
        color: var(--muted);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-strong);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .file-table td:nth-child(2)::before {
        content: "Modified";
    }

    .file-table td:nth-child(3)::before {
        content: "Size";
    }

    .file-table td:nth-child(4)::before {
        content: "By";
    }

    .task-table td:nth-child(2)::before {
        content: "Project";
    }

    .task-table td:nth-child(3)::before {
        content: "Owner";
    }

    .task-table td:nth-child(4)::before {
        content: "Priority";
    }

    .task-table td:nth-child(5)::before {
        content: "Health";
    }

    .task-table td:nth-child(6)::before {
        content: "Done";
    }

    .task-table td:nth-child(7)::before {
        content: "Start";
    }

    .task-table td:nth-child(8)::before {
        content: "Due";
    }

    .task-table td:nth-child(9)::before {
        content: "Created";
    }

    .task-table td:nth-child(10)::before {
        content: "Actions";
    }

    .task-table-wrap .task-table tbody tr {
        min-height: 42px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        cursor: pointer;
    }

    .task-table-wrap .task-table tbody tr:last-child {
        border-bottom: 0;
    }

    .task-table-wrap .task-table td {
        padding: 0;
    }

    .task-table-wrap .task-table td:first-child {
        display: flex;
        min-width: 0;
        gap: 8px;
        align-items: center;
        padding: 11px 10px;
    }

    .task-table-wrap .task-table td:first-child::before {
        content: "☑";
        flex: 0 0 22px;
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: var(--font-size-body-lg);
    }

    .task-table-wrap .task-table td:first-child .inline-edit-trigger {
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
        font-weight: var(--font-weight-strong);
        text-align: left;
        overflow-wrap: anywhere;
    }

    .task-table-wrap .task-table td:first-child small,
    .task-table-wrap .task-table td:nth-child(2),
    .task-table-wrap .task-table td:nth-child(3),
    .task-table-wrap .task-table td:nth-child(4),
    .task-table-wrap .task-table td:nth-child(5),
    .task-table-wrap .task-table td:nth-child(7),
    .task-table-wrap .task-table td:nth-child(8),
    .task-table-wrap .task-table td:nth-child(9),
    .task-table-wrap .task-table td:nth-child(10) {
        display: none;
    }

    .task-table-wrap .task-table td:nth-child(6) {
        display: block;
        padding: 0 10px 10px 40px;
    }

    .task-table-wrap .task-table td:nth-child(6)::before {
        display: none;
    }

    .task-table-wrap .task-table td:nth-child(6) .inline-edit-trigger {
        min-height: 0;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: var(--font-size-2xs);
    }

    .request-actions-cell {
        justify-content: flex-start;
    }

    .request-table-wrap {
        overflow-x: visible;
    }

    .request-grid {
        display: grid;
        min-width: 0;
        gap: 6px;
    }

    .request-grid-header {
        display: none;
    }

    .request-grid-body {
        display: grid;
        gap: 6px;
    }

    .request-grid-row {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 9px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.018);
    }

    .request-grid-cell {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 7px;
        align-items: start;
        padding: 3px 0;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .request-grid-cell::before {
        color: var(--muted);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-strong);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .request-title-cell {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        padding-bottom: 6px;
    }

    .request-title-cell::before {
        content: "";
        display: none;
    }

    .request-status-cell::before {
        content: "Disposition";
    }

    .request-health-cell::before {
        content: "Health";
    }

    .request-priority-cell::before {
        content: "Priority";
    }

    .request-timing-cell::before {
        content: "Target";
    }

    .request-person-cell:nth-of-type(6)::before {
        content: "Requested";
    }

    .request-person-cell:nth-of-type(7)::before {
        content: "Responsible";
    }

    .request-updated-cell::before {
        content: "Updated";
    }

    .request-actions-cell::before {
        content: "Actions";
    }

    .request-actions-cell {
        align-items: center;
    }

    .request-grid-body {
        gap: 0;
    }

    .request-grid-row {
        min-height: 42px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        cursor: pointer;
    }

    .request-grid-row:last-child {
        border-bottom: 0;
    }

    .request-grid-cell {
        padding: 0;
    }

    .request-title-cell {
        display: flex;
        min-width: 0;
        gap: 8px;
        align-items: center;
        padding: 11px 10px 4px;
    }

    .request-title-cell::before {
        content: "↗";
        flex: 0 0 22px;
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: var(--font-size-body-lg);
    }

    .request-title-cell .inline-edit-trigger {
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #eef3f7;
        font-size: var(--font-size-body-lg);
        font-weight: var(--font-weight-strong);
        text-align: left;
        overflow-wrap: anywhere;
    }

    .request-health-cell,
    .request-timing-cell,
    .request-person-cell,
    .request-updated-cell,
    .request-actions-cell {
        display: none;
    }

    .request-status-cell,
    .request-priority-cell {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        padding: 0 0 10px 40px;
    }

    .request-status-cell::before,
    .request-priority-cell::before {
        display: none;
    }

    .request-status-cell .inline-edit-trigger,
    .request-priority-cell .inline-edit-trigger {
        min-height: 0;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: var(--font-size-2xs);
    }

    .file-name a,
    .task-table td:first-child a {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .file-name small,
    .task-table td small {
        margin: 3px 0 0;
        display: block;
        white-space: normal;
    }

    .task-table .delete-form button,
    .request-actions-cell .button,
    .request-actions-cell button {
        min-height: 28px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: var(--font-size-xs);
    }

    .file-table tr.selected,
    .file-table tr.is-selected,
    .task-table tr.selected {
        background: var(--row-selected-bg);
    }

    .file-table tr.folder-row,
    .file-table tr.file-row {
        cursor: default;
    }

    .file-upload-form,
    .file-selection-bar,
    .folder-create-form,
    .explorer-filter,
    .rail-form {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .task-rail-form .task-date-range,
    .task-date-range {
        grid-template-columns: 1fr;
    }

    .date-range-popover {
        width: 100%;
        max-width: 100%;
    }

    .schedule-filters {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .schedule-key {
        justify-content: flex-start;
        margin-left: 0;
    }

    .gantt-panel {
        overflow: hidden;
    }

    .gantt-head {
        justify-content: flex-start;
    }

    .gantt-scroll {
        overflow-x: auto;
        max-width: 100%;
    }

    .gantt-canvas {
        min-width: 760px;
    }

    .gantt-scale {
        margin-left: 170px;
    }

    .gantt-row {
        display: grid;
        grid-template-columns: 170px minmax(560px, 1fr);
        min-height: 42px;
    }

    .gantt-meta {
        width: 170px;
        min-width: 170px;
        padding: 7px 8px;
    }

    .gantt-meta strong {
        font-size: var(--font-size-ui);
        line-height: 1.15;
    }

    .gantt-meta-status {
        gap: 4px;
    }

    .gantt-meta-status span:not(.new-badge) {
        display: none;
    }

    .gantt-bar-title {
        max-width: 100%;
    }

    .gantt-bar-owner {
        display: none;
    }

    .activity-filters,
    .activity-pagination {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .activity-table-wrap {
        overflow-x: visible;
    }

    .activity-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 6px;
    }

    .activity-table,
    .activity-table tbody,
    .activity-table tr,
    .activity-table td {
        display: block;
        width: 100%;
    }

    .activity-table thead {
        display: none;
    }

    .activity-table tr {
        min-height: 42px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
    }

    .activity-table td {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 7px;
        padding: 3px 0;
        border-bottom: 0;
        white-space: normal;
    }

    .activity-table td:first-child {
        display: block;
        padding: 10px 10px 4px;
    }

    .activity-table td:first-child strong {
        display: block;
        color: #eef3f7;
        font-size: var(--font-size-body);
        line-height: 1.2;
    }

    .activity-table td:first-child small {
        display: none;
    }

    .activity-table td:nth-child(2) {
        display: block;
        padding: 0 10px 10px;
        color: var(--muted-strong);
        font-size: var(--font-size-xs);
    }

    .activity-table td:nth-child(2)::before {
        display: none;
    }

    .activity-table td:not(:first-child)::before {
        color: var(--muted);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-strong);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .activity-table td:nth-child(2)::before {
        content: "Object";
    }

    .activity-table td:nth-child(3)::before {
        content: "Project";
    }

    .activity-table td:nth-child(4)::before {
        content: "User";
    }

    .activity-table td:nth-child(5)::before {
        content: "State";
    }

    .activity-table td:nth-child(6)::before {
        content: "Created";
    }

    .activity-table td:nth-child(7)::before {
        content: "Actions";
    }

    .activity-table strong,
    .activity-table small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .activity-table td:nth-child(3),
    .activity-table td:nth-child(4),
    .activity-table td:nth-child(5),
    .activity-table td:nth-child(6),
    .activity-table td:nth-child(7) {
        display: none;
    }

    .activity-actions {
        justify-content: flex-start;
    }

    .direct-thread-list small,
    .direct-thread-subject,
    .direct-thread-snippet,
    .direct-thread-row-meta {
        display: none;
    }

    .direct-thread-row a {
        padding: 10px;
    }

    .direct-thread-row-head strong {
        font-size: var(--font-size-body);
    }

    .settings-sections {
        grid-template-columns: 1fr;
    }

    .cards,
    .workspace-grid,
    .project-hero {
        grid-template-columns: 1fr;
    }
}

/* Unified Visual System Rollout
   Keeps existing behavior intact while aligning type, controls, rails, lists, and cards. */
body {
    color: var(--text-primary);
    font-size: var(--font-size-body);
}

.content,
.main {
    gap: 14px;
}

.panel,
.card,
.rail-panel,
.context-panel,
.file-table-wrap,
.files-preview-grid,
.upload-conflict-panel,
.integrity-panel,
.viewer-linked,
.viewer-open-options,
.activity-table-wrap,
.task-table-wrap,
.request-table-wrap {
    border-color: var(--panel-border);
    border-radius: var(--surface-radius);
    background: var(--surface-bg);
}

.page-head,
.files-explorer-header-compact {
    gap: 4px;
    margin-bottom: 4px;
}

.page-head h1,
.files-explorer-header-compact h1 {
    font-size: var(--module-title-size);
    font-weight: var(--module-title-weight);
    line-height: 1.15;
}

.page-head p,
.active-project-strip small,
.file-breadcrumb,
.muted,
.empty-cell,
.file-drop-note,
.request-grid-cell small,
.task-table td small,
.activity-table small,
.direct-thread-snippet,
.direct-thread-row-meta,
.message time,
.message small,
.direct-message small,
.file-preview-meta,
.file-name small,
.viewer-meta,
.viewer-note {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
}

.panel h2,
.card h2,
.rail-panel h2,
.context-detail h2,
.messaging-active-title h2,
.direct-thread-head h2,
.upload-status-panel h2,
.upload-conflict-dialog h2,
.integrity-panel h2,
.integrity-repair-card h2,
.viewer-linked h2,
.document-open-panel h2 {
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.rail-kicker,
.task-table th,
.file-table th,
.request-grid-heading,
.activity-table th,
.file-upload-form label,
.file-selection-bar label,
.rail-form label,
.direct-message-form label,
.project-assignment-fieldset legend,
.file-filter-strip label,
.task-filters-compact label,
.task-create-compact label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

button,
.button,
input[type="submit"],
input[type="button"] {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--control-radius);
    background: var(--button-bg);
    color: #fff;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--button-hover-bg);
}

.button.secondary,
button.secondary {
    background: var(--button-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--panel-border);
}

.button.ghost,
button.ghost,
.danger-button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--control-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.right .button,
.right button,
.context-panel .button,
.context-panel button,
.rail-panel .button,
.rail-panel button {
    min-height: 32px;
    padding-inline: 11px;
    font-size: var(--font-size-ui);
}

input,
select,
textarea {
    min-height: 32px;
    padding: 7px 9px;
    border-radius: var(--control-radius);
    border-color: var(--line-strong);
    font-size: var(--font-size-ui);
    line-height: 1.35;
}

textarea {
    min-height: 76px;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    font-size: var(--font-size-body);
}

.communications-tabs,
.files-view-toggle,
.segmented-tabs,
.settings-sections {
    gap: 4px;
}

.communications-tabs a,
.segmented-tabs a,
.view-toggle-button,
.settings-sections a {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: var(--control-radius);
    color: var(--text-subtle);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
}

.communications-tabs a.active,
.communications-tabs a:hover,
.segmented-tabs a.active,
.view-toggle-button.is-active,
.settings-sections a.active {
    border-color: var(--selected-border);
    background: var(--selected-background);
    color: var(--text-primary);
    box-shadow: none;
}

.nav-badge,
.mobile-project-unread-badge,
.project-unread-badge,
.new-badge,
.status-pill,
.health-pill,
.file-type-badge,
.direct-thread-kind,
.direct-reaction-badge,
.reaction-badge,
.role-badge,
.storage-status-badge {
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 999px;
    border-color: var(--selected-border);
    background: var(--badge-bg);
    color: var(--accent-gold);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.sidebar {
    font-size: var(--font-size-body);
}

.brand-mark {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.sidebar nav a {
    min-height: 34px;
    padding: 8px 11px;
    border-radius: var(--control-radius);
    color: var(--text-subtle);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

.sidebar nav a.active {
    background: var(--selected-background);
    box-shadow: inset 2px 0 0 var(--selected-border);
    color: var(--text-primary);
}

.active-project-context {
    padding: 10px 12px;
    border-color: var(--panel-border);
    border-radius: var(--surface-radius);
}

.active-project-context span,
.user-card span {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.active-project-context strong,
.user-card strong {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
}

.project-select-row,
.direct-thread-row a,
.communication-activity-item,
.message,
.direct-message,
.file-preview-card,
.task-card,
.request-grid-row,
.activity-table tbody tr {
    border-radius: var(--surface-radius);
}

.project-select-row strong,
.direct-thread-row-head strong,
.message strong,
.direct-message strong,
.file-preview-name,
.file-label,
.task-table td:first-child a,
.request-title-cell .request-title-link,
.activity-table strong {
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
}

.project-select-row.has-unread strong,
.direct-thread-row.is-unread strong,
.unread-row .file-label,
.unread-link {
    font-weight: var(--font-weight-bold);
}

.message p,
.direct-message-content,
.direct-message p,
.communication-activity-item span,
.request-grid-cell,
.task-table td,
.file-table td,
.activity-table td {
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
}

.message-meta,
.direct-thread-row-meta,
.direct-message-read,
.direct-message small,
.message small,
.message time {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}

.message.selected,
.direct-message.selected,
.file-table tr.selected,
.file-table tr.is-selected,
.task-table tr.selected,
.request-grid-row.selected,
.file-preview-card.selected,
.file-preview-card.is-selected,
.activity-table tr.selected {
    border-color: var(--selected-border);
    background: var(--selected-background);
}

.file-table th,
.file-table td,
.task-table th,
.task-table td,
.activity-table th,
.activity-table td,
.request-grid-heading,
.request-grid-cell {
    padding-block: var(--row-pad-y);
    padding-inline: var(--row-pad-x);
}

.file-table th,
.task-table th,
.activity-table th,
.request-grid-heading {
    color: var(--text-muted);
    background: transparent;
}

.file-table tr:hover,
.task-table tbody tr:hover,
.request-grid-row:hover,
.activity-table tbody tr:hover,
.file-preview-card:hover,
.direct-thread-row a:hover,
.communication-activity-item:hover {
    background: var(--row-hover-bg);
}

.files-explorer-header,
.files-toolbar,
.file-filter-strip,
.file-upload-form,
.file-selection-bar,
.task-filters-compact,
.task-create-compact,
.request-grid-header,
.request-grid-row {
    gap: 8px;
}

.files-preview-grid {
    gap: 12px;
}

.file-preview-card {
    padding: 8px;
}

.file-preview-name {
    line-height: 1.25;
}

.right,
.context-panel {
    font-size: var(--font-size-body);
}

.right dl,
.context-panel dl {
    gap: 7px 10px;
}

.right dt,
.context-panel dt {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.right dd,
.context-panel dd {
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.25;
}

.right .muted,
.context-panel .muted,
.right p:not(.rail-kicker),
.context-panel p:not(.rail-kicker) {
    font-size: var(--font-size-body);
    line-height: 1.35;
}

.viewer-header h1,
.viewer-linked h2 {
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 760px) {
    .page-head h1,
    .files-explorer-header-compact h1 {
        font-size: var(--font-size-section-lg);
    }

    .sidebar nav a,
    .project-select-row strong,
    .message p,
    .direct-message-content,
    .file-table td,
    .task-table td,
    .request-grid-cell,
    .activity-table td {
        font-size: var(--font-size-body);
    }

    button,
    .button,
    .right .button,
    .right button {
        min-height: 32px;
        font-size: var(--font-size-ui);
    }

    .mobile-project-menu,
    .mobile-project-unread-badge,
    .project-unread-badge {
        font-size: var(--font-size-2xs);
    }
}

/* Forced Visual System Replacement
   This layer intentionally supersedes the legacy bright-blue/gold skin. */
html,
body {
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--text);
}

body::before,
body::after {
    display: none;
}

a {
    color: var(--accent-hover);
}

a:hover {
    color: #a5bad0;
}

.sidebar,
.right,
.content,
.main,
.panel,
.card,
.rail-panel,
.context-panel,
.file-table-wrap,
.task-table-wrap,
.request-table-wrap,
.activity-table-wrap,
.files-preview-grid,
.viewer-shell,
.viewer-linked,
.viewer-open-options,
.upload-conflict-panel,
.upload-status-panel,
.integrity-panel {
    background: var(--surface-bg);
    border-color: var(--border);
    box-shadow: none;
}

.sidebar {
    background: #0b0f14;
    border-right-color: var(--border);
}

.right {
    border-left-color: var(--border);
}

.brand-mark {
    background: #4e6680;
    color: var(--text);
    box-shadow: none;
}

.sidebar nav a,
.active-project-context,
.project-select-row,
.direct-thread-row a,
.communication-activity-item,
.message,
.direct-message,
.file-preview-card,
.request-grid-row,
.task-card,
.activity-table tbody tr {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.sidebar nav a {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

.sidebar nav a.active,
.sidebar nav a:hover,
.active-project-context:hover,
.active-project-context.active,
.project-select-row:hover,
.project-select-row.active,
.direct-thread-row a:hover,
.direct-thread-row a.active,
.communication-activity-item:hover,
.message.selected,
.direct-message.selected,
.file-table tr.selected,
.file-table tr.is-selected,
.task-table tr.selected,
.request-grid-row.selected,
.file-preview-card.selected,
.file-preview-card.is-selected,
.activity-table tr.selected {
    background: var(--selected-background);
    border-color: var(--selected-border);
    color: var(--text);
    box-shadow: none;
}

.active-project-context strong,
.project-row-meta em,
.pinned-title,
.message strong,
.direct-message strong,
.direct-thread-row-head strong,
.file-label,
.file-preview-name,
.task-table td:first-child a,
.request-title-cell .request-title-link,
.activity-table strong,
.user-cell a,
.file-breadcrumb a,
.rail-list a strong,
.version-item a,
.project-select-row strong,
.project-card h2 a,
.task-card h2 a {
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

.page-head h1,
.files-explorer-header-compact h1 {
    color: var(--text);
    font-size: var(--module-title-size);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0;
}

.panel h2,
.card h2,
.rail-panel h2,
.context-detail h2,
.messaging-active-title h2,
.direct-thread-head h2,
.viewer-header h1,
.viewer-linked h2,
.document-open-panel h2,
.upload-status-panel h2,
.integrity-panel h2 {
    color: var(--text);
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-bold);
}

.page-head p,
.active-project-context span,
.project-select-row small,
.project-row-meta,
.message-meta,
.message time,
.message small,
.direct-message small,
.direct-message-read,
.direct-thread-row-meta,
.direct-thread-snippet,
.file-name small,
.file-preview-meta,
.task-table td small,
.request-grid-cell small,
.activity-table small,
.viewer-meta,
.viewer-note,
.muted,
.empty-cell,
.file-drop-note {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}

.rail-kicker,
.right dt,
.context-panel dt,
.task-table th,
.file-table th,
.request-grid-heading,
.activity-table th,
.rail-form label,
.direct-message-form label,
.file-upload-form label,
.file-selection-bar label,
.task-filters-compact label,
.task-create-compact label,
.file-filter-strip label {
    color: var(--text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.right dd,
.context-panel dd,
.right p:not(.rail-kicker),
.context-panel p:not(.rail-kicker),
.message p,
.direct-message-content,
.direct-message p,
.file-table td,
.task-table td,
.request-grid-cell,
.activity-table td,
.viewer-document,
.viewer-open-card p {
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.38;
}

button,
.button,
input[type="submit"],
input[type="button"],
.right .button,
.right button,
.context-panel .button,
.context-panel button,
.rail-panel .button,
.rail-panel button {
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--control-radius);
    background: var(--button-bg);
    color: #f2f6fa;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
    box-shadow: none;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--button-hover-bg);
    color: #fff;
}

.button.secondary,
button.secondary,
.button.ghost,
button.ghost {
    background: var(--button-secondary-bg);
    color: var(--text);
    border-color: var(--border);
}

.danger-button,
button.danger,
.button.danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: rgba(154, 80, 74, 0.28);
}

input,
select,
textarea {
    min-height: 32px;
    background: #0f141b;
    border-color: var(--line-strong);
    color: var(--text);
    font-size: var(--font-size-ui);
    box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.button:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(111, 142, 172, 0.5);
    outline-offset: 2px;
}

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

.communications-tabs,
.files-view-toggle,
.segmented-tabs,
.settings-sections {
    background: var(--surface-2);
    border-color: var(--border);
}

.communications-tabs a,
.segmented-tabs a,
.view-toggle-button,
.settings-sections a {
    color: var(--muted-strong);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
}

.communications-tabs a.active,
.communications-tabs a:hover,
.segmented-tabs a.active,
.view-toggle-button.is-active,
.settings-sections a.active {
    background: var(--surface-3);
    border-color: var(--accent-border);
    color: var(--text);
    box-shadow: none;
}

.nav-badge,
.mobile-project-unread-badge,
.project-unread-badge,
.new-badge,
.status-pill,
.health-pill,
.file-type-badge,
.direct-thread-kind,
.direct-reaction-badge,
.reaction-badge,
.role-badge,
.storage-status-badge {
    min-height: 17px;
    padding: 2px 6px;
    border: 1px solid rgba(199, 161, 90, 0.24);
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--gold);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.status-pill,
.health-pill,
.file-type-badge {
    border-color: var(--border);
    background: rgba(148, 163, 184, 0.08);
    color: var(--muted-strong);
}

.task-table,
.file-table,
.activity-table,
.request-grid {
    color: var(--text);
}

.file-table th,
.file-table td,
.task-table th,
.task-table td,
.activity-table th,
.activity-table td,
.request-grid-heading,
.request-grid-cell {
    padding: 6px 8px;
    border-color: var(--border);
}

.file-table th,
.task-table th,
.activity-table th,
.request-grid-header {
    background: #10161d;
}

.file-table tr:hover,
.task-table tbody tr:hover,
.activity-table tbody tr:hover,
.request-grid-row:hover,
.file-preview-card:hover {
    background: var(--row-hover-bg);
}

.files-preview-grid {
    background: transparent;
}

.file-preview-card,
.viewer-open-card,
.integrity-repair-card,
.upload-conflict-dialog,
.project-select-row {
    background: rgba(18, 24, 32, 0.72);
    border-color: var(--border);
}

.file-preview-box {
    background: #0e1319;
    border-color: var(--border);
}

.preview-type-tile {
    background: #dfe5eb;
    color: #202a35;
}

.preview-type-slide,
.preview-type-doc,
.preview-type-file,
.preview-type-text {
    border-top-color: var(--accent);
}

.preview-type-pdf {
    border-top-color: var(--danger);
}

.preview-type-sheet {
    border-top-color: var(--success);
}

.gantt-header,
.gantt-table,
.schedule-toolbar,
.timeline-header,
.timeline-row,
.calendar-grid,
.calendar-item {
    border-color: var(--border);
}

.gantt-meta,
.gantt-date,
.timeline-date,
.calendar-meta {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.viewer-page,
.file-viewer-page {
    background: var(--bg);
    color: var(--text);
}

.viewer-header,
.viewer-actions,
.viewer-linked,
.document-open-panel {
    border-color: var(--border);
}

@media (max-width: 760px) {
    body {
        background: var(--bg);
    }

    .mobile-project-menu,
    .active-project-strip,
    .page-head,
    .panel,
    .card,
    .rail-panel,
    .context-panel {
        background: var(--surface-bg);
        border-color: var(--border);
    }

    .sidebar nav a,
    .project-select-row,
    .file-table td,
    .task-table td,
    .request-grid-cell,
    .activity-table td,
    .message p,
    .direct-message-content {
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-regular);
    }

    button,
    .button,
    .right .button,
    .right button {
        min-height: 30px;
    }
}

/* Legacy gold cleanup: ordinary labels, values, links, and inline-edit text are not badge accents. */
.task-table th .task-sort-link.active,
.request-column-sort:hover,
.request-column-sort.active,
.inline-edit-trigger,
.inline-edit-trigger:hover,
.inline-edit-trigger:focus-visible,
.task-table .inline-edit-trigger,
.request-grid .inline-edit-trigger,
.user-cell a,
.active-project-context strong,
.project-row-meta em,
.file-breadcrumb a,
.rail-list a,
.rail-list a strong,
.version-item a,
.attachment-detail a,
.settings-sections a.active,
.communication-activity-item strong,
.request-title-cell .request-title-link,
.task-table td:first-child a,
.file-table .file-open-link,
.file-table .folder-open-link,
.direct-thread-row a,
.project-select-row strong {
    color: var(--text);
}

.task-table th .task-sort-link.active,
.request-column-sort:hover,
.request-column-sort.active {
    color: var(--muted-strong);
}

.inline-edit-trigger.status-pill,
.inline-edit-trigger.health-pill,
.inline-edit-trigger.priority-pill,
.inline-edit-trigger .status-pill,
.inline-edit-trigger .health-pill,
.inline-edit-trigger .priority-pill,
.nav-badge,
.mobile-project-unread-badge,
.project-unread-badge,
.new-badge,
.direct-thread-kind,
.direct-reaction-badge,
.reaction-badge,
.role-badge,
.storage-status-badge {
    color: var(--gold);
}

.status-pill,
.health-pill,
.priority-pill,
.file-type-badge {
    color: var(--muted-strong);
}

.task-table .inline-edit-trigger *,
.request-grid .inline-edit-trigger *,
.task-table td:first-child .inline-edit-trigger,
.task-table td:first-child .inline-edit-trigger *,
.request-title-cell .inline-edit-trigger,
.request-title-cell .inline-edit-trigger *,
.gantt-today-label {
    color: var(--text);
}

.gantt-today-label {
    background: var(--surface-3);
    border-color: var(--accent-border);
    color: #ff4d4f;
}

.project-select-row.has-unread strong,
.direct-thread-row.is-unread strong,
.unread-row .file-label,
.unread-link,
.unread-link .file-label {
    font-weight: var(--font-weight-regular);
}

.task-table tr.overdue td,
.task-table tr.overdue td *,
.task-table tr.overdue .inline-edit-trigger,
.task-table tr.overdue .inline-edit-trigger * {
    color: var(--text);
}

.task-table tr.overdue small,
.task-table tr.overdue td small {
    color: var(--muted);
}

.task-table tr.overdue .status-pill,
.task-table tr.overdue .health-pill,
.task-table tr.overdue .priority-pill,
.task-table tr.overdue .health-chip {
    color: var(--muted-strong);
}

/* Communications unified layout */
body[data-view="communications"] .page-head {
    margin-bottom: 12px;
}

body[data-view="communications"] .communications-tabs {
    display: inline-flex;
    width: auto;
    margin: 0 0 14px;
    padding: 3px;
    border-radius: var(--surface-radius);
    background: rgba(20, 29, 38, 0.72);
}

body[data-view="communications"] .communications-tabs a {
    min-width: 72px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid transparent;
    color: var(--muted-strong);
    font-weight: var(--font-weight-strong);
}

body[data-view="communications"] .communications-tabs a.active {
    background: rgba(36, 52, 68, 0.9);
    border-color: rgba(111, 142, 172, 0.26);
    color: var(--text);
}

.comm-shell {
    display: flex;
    flex-direction: column;
    min-height: min(690px, calc(100vh - 188px));
    padding: 12px;
    gap: 10px;
    overflow: hidden;
}

.comm-selector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
}

.comm-selector-spacer {
    flex: 1 1 auto;
}

.comm-select {
    width: min(100%, 360px);
    min-height: 36px;
    border-radius: var(--control-radius);
    background: rgba(8, 13, 18, 0.48);
    color: var(--text);
}

.comm-select.compact {
    width: 170px;
}

.comm-select.comm-category-select {
    width: min(100%, 250px);
}

.topic-directory {
    display: flex;
    min-height: min(690px, calc(100vh - 188px));
    max-height: calc(100vh - 188px);
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 14px;
}

.topic-directory-head,
.topic-conversation-head,
.topic-browser-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-directory-head {
    justify-content: space-between;
}

.topic-directory-head h2,
.topic-directory-head p {
    margin: 0;
}

.topic-directory-head p {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.topic-directory-actions,
.topic-browser-filter-group,
.topic-browser-expand-group,
.topic-conversation-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.topic-directory-actions .button,
.topic-browser-controls .button,
.topic-conversation-head .button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.topic-browser-controls {
    flex-wrap: wrap;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.topic-browser-search {
    flex: 1 1 260px;
    min-width: 190px;
}

.topic-browser-search input {
    width: 100%;
    min-height: 36px;
    background: rgba(8, 13, 18, 0.48);
}

.topic-browser-filter-group .button.is-active {
    border-color: rgba(92, 143, 194, 0.48);
    background: rgba(75, 111, 147, 0.44);
    color: var(--text);
}

.topic-browser-expand-group {
    margin-left: auto;
}

.topic-browser-groups {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    border: 1px solid rgba(111, 142, 172, 0.18);
    border-radius: var(--surface-radius);
    background: rgba(8, 13, 18, 0.2);
}

.topic-browser-category {
    border-bottom: 1px solid rgba(111, 142, 172, 0.18);
}

.topic-browser-category:last-of-type {
    border-bottom: 0;
}

.topic-browser-category[hidden],
.topic-browser-topic[hidden] {
    display: none;
}

.topic-browser-category > summary {
    display: grid;
    grid-template-columns: 18px minmax(150px, auto) auto auto minmax(140px, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}

.topic-browser-category > summary::-webkit-details-marker {
    display: none;
}

.topic-browser-category > summary:hover,
.topic-browser-category[open] > summary {
    background: rgba(52, 78, 105, 0.14);
}

.topic-category-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-strong);
    font-size: 18px;
    transform: rotate(0deg);
    transition: transform 120ms ease;
}

.topic-browser-category[open] .topic-category-chevron {
    transform: rotate(90deg);
}

.topic-browser-category > summary strong {
    color: var(--text);
    font-size: var(--font-size-body);
}

.topic-category-count,
.topic-category-activity,
.topic-browser-topic time {
    color: var(--muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.topic-category-activity {
    justify-self: end;
}

.topic-browser-topic-list {
    display: grid;
    border-top: 1px solid rgba(111, 142, 172, 0.13);
}

.topic-browser-topic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 14px 7px 38px;
    border-bottom: 1px solid rgba(111, 142, 172, 0.11);
    color: var(--text);
    text-decoration: none;
}

.topic-browser-topic:last-child {
    border-bottom: 0;
}

.topic-browser-topic:hover,
.topic-browser-topic:focus,
.topic-browser-topic.is-selected {
    background: rgba(75, 111, 147, 0.26);
    color: var(--text);
}

.topic-browser-topic.is-unread {
    box-shadow: inset 3px 0 0 rgba(240, 196, 106, 0.72);
}

.topic-browser-topic.is-unread .topic-browser-topic-title {
    font-weight: var(--font-weight-bold);
}

.topic-browser-topic-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-browser-topic .unread-badge,
.topic-browser-category > summary .unread-badge {
    margin-left: 0;
}

.topic-browser-empty {
    margin: 0;
    padding: 22px;
    color: var(--muted);
    text-align: center;
}

.topic-conversation {
    position: relative;
    display: block;
    min-height: min(690px, calc(100vh - 188px));
    max-height: calc(100vh - 188px);
    padding: 0;
}

.topic-conversation-content {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 12px;
}

.topic-conversation-head {
    position: relative;
    z-index: 2;
    min-height: 44px;
    justify-content: space-between;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
}

.topic-breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--muted-strong);
    overflow: hidden;
}

.topic-breadcrumb span,
.topic-breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-breadcrumb strong {
    color: var(--text);
}

.topic-conversation[data-topic-split] {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.direct-conversation {
    display: flex;
    min-height: min(690px, calc(100vh - 188px));
    max-height: calc(100vh - 188px);
    flex-direction: row;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.direct-conversation-content {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 12px;
}

.direct-conversation-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
}

.direct-conversation-head > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.direct-conversation-head strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.communications-browser-sidebar {
    position: relative;
    width: 330px;
    min-width: 260px;
    max-width: 55%;
    min-height: 0;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-right: 1px solid rgba(111, 142, 172, 0.3);
    background: rgba(8, 13, 18, 0.24);
}

.direct-browser-search {
    display: block;
}

.direct-browser-search input {
    width: 100%;
    min-height: 36px;
    background: rgba(8, 13, 18, 0.48);
}

.direct-browser-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    border: 1px solid rgba(111, 142, 172, 0.18);
    border-radius: var(--surface-radius);
    background: rgba(8, 13, 18, 0.2);
}

.direct-browser-list .direct-thread-row {
    border-bottom: 1px solid rgba(111, 142, 172, 0.14);
}

.direct-browser-list .direct-thread-row:last-child {
    border-bottom: 0;
}

.direct-browser-list .direct-thread-row a {
    border-radius: 0;
}

.direct-browser-list .direct-thread-roster-only .direct-thread-row-head {
    align-items: flex-start;
}

.direct-browser-list .direct-thread-roster-only .direct-thread-row-head strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.communications-empty-context {
    min-height: 100%;
    display: grid;
    place-content: center;
    align-items: center;
    padding: 28px;
    text-align: center;
}

.communications-empty-context h2,
.communications-empty-context p {
    margin: 0;
}

.communications-empty-context p {
    margin-top: 6px;
}

.communications-browser-sidebar > header,
.communications-browser-sidebar > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.communications-browser-sidebar > header {
    min-height: 32px;
}

.communications-browser-sidebar > header strong {
    color: var(--text);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topic-browser-sidebar .topic-browser-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.topic-browser-sidebar .topic-browser-filter-group {
    display: flex;
}

.topic-browser-sidebar .topic-browser-filter-group .button {
    flex: 1 1 0;
}

.topic-browser-sidebar .topic-browser-category > summary {
    grid-template-columns: 16px minmax(0, 1fr) auto auto;
    min-height: 38px;
    padding: 7px 8px;
}

.topic-browser-sidebar .topic-category-activity {
    display: none;
}

.topic-browser-sidebar .topic-browser-topic {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 8px 7px 26px;
}

.topic-browser-sidebar .topic-browser-topic time {
    display: none;
}

.communications-browser-sidebar > footer {
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.communications-browser-sidebar > footer a {
    color: var(--link);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.communications-sidebar-resize-handle {
    position: absolute;
    z-index: 2;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 12px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: col-resize;
}

.communications-sidebar-resize-handle::after {
    content: "";
    position: absolute;
    top: 44px;
    right: 5px;
    bottom: 44px;
    width: 2px;
    border-radius: 999px;
    background: rgba(111, 142, 172, 0.28);
}

.communications-sidebar-resize-handle:hover::after,
.communications-sidebar-resize-handle:focus-visible::after,
body.is-resizing-communications-sidebar .communications-sidebar-resize-handle::after {
    width: 3px;
    background: rgba(122, 171, 218, 0.8);
}

.comm-topic-create-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    margin: 0 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--surface-radius);
    background: rgba(20, 29, 38, 0.48);
}

.comm-topic-create-panel label {
    display: grid;
    gap: 5px;
    color: var(--muted-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}

.comm-topic-create-panel input,
.comm-topic-create-panel select,
.comm-topic-create-panel textarea {
    width: 100%;
    border-radius: var(--control-radius);
    font-size: var(--font-size-sm);
    text-transform: none;
    letter-spacing: 0;
}

.comm-topic-create-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-context-pill,
.comm-chip,
.comm-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    background: rgba(20, 29, 38, 0.62);
    color: var(--muted-strong);
}

.comm-context-pill {
    padding: 0 13px;
    white-space: nowrap;
}

.comm-chip-group {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.comm-chip {
    min-width: 36px;
    padding: 0 9px;
    color: var(--text);
    font-weight: var(--font-weight-strong);
}

.comm-icon-button {
    width: 38px;
    padding: 0;
    font-size: var(--font-size-body-lg);
    line-height: 1;
}

.comm-message-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 0;
    overflow: auto;
    overflow-x: hidden;
    padding: 1px 2px 0;
}

.comm-message {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) minmax(74px, auto);
    gap: 8px;
    align-items: start;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid rgba(111, 142, 172, 0.14);
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

.comm-message .direct-reaction-picker {
    top: 5px;
    right: 8px;
}

.comm-message:hover,
.comm-message.selected {
    background: rgba(52, 78, 105, 0.16);
}

.comm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(111, 142, 172, 0.2);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(106, 130, 153, 0.48), rgba(54, 65, 78, 0.62));
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-strong);
}

.comm-message-main {
    min-width: 0;
    display: grid;
    gap: 3px;
    overflow: visible;
}

.comm-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    color: var(--muted);
    flex-wrap: wrap;
}

.comm-meta:empty {
    display: none;
}

.comm-meta strong {
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.comm-meta time,
.comm-meta .edited-marker {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.comm-body,
.comm-message p.comm-body {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.34;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.comm-body a,
.comm-feed-main a {
    color: var(--link);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comm-signal-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    justify-self: end;
    min-width: 68px;
    max-width: 168px;
    padding-top: 0;
}

.comm-signal-time {
    color: var(--muted);
    font-size: var(--font-size-xs);
    line-height: 1;
    white-space: nowrap;
}

.comm-signal-cluster .direct-reaction-badges {
    margin: 0;
    gap: 4px;
}

.comm-badge {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(111, 142, 172, 0.22);
    background: rgba(20, 29, 38, 0.78);
    color: var(--muted-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
}

.comm-read-badge {
    color: var(--muted);
}

.comm-message .attachments,
.comm-message .direct-message-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    margin-top: 1px;
}

.comm-message .attachment,
.comm-message .attachment-detail {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.comm-message .attachment-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    padding: 5px 7px;
}

.comm-message .attachment-detail strong,
.comm-message .attachment-detail small,
.comm-message .attachment-detail a,
.comm-message .attachment-detail em {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.comm-message .pin-form,
.comm-message .detail-link,
.comm-message .edit-link {
    flex: 0 0 auto;
}

.comm-date-separator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 5px 0 2px;
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
}

.comm-date-separator::before,
.comm-date-separator::after {
    content: "";
    height: 1px;
    background: rgba(111, 142, 172, 0.16);
}

.comm-composer {
    flex: 0 0 auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.comm-composer .composer-input {
    grid-template-columns: minmax(0, 1fr) 42px 48px;
    align-items: stretch;
}

.comm-composer textarea {
    min-height: 44px;
    max-height: 104px;
    padding: 11px 13px;
}

.comm-composer .composer-attach,
.comm-composer .composer-send {
    width: 42px;
    height: 42px;
    min-height: 42px;
}

.comm-composer .composer-send {
    width: 48px;
}

.comm-feed-list {
    display: grid;
    overflow: auto;
}

.comm-feed-list .communication-activity-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(111, 142, 172, 0.14);
    border-radius: 0;
    background: transparent;
    text-decoration: none;
}

.comm-feed-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.comm-feed-main strong {
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-feed-main strong span,
.comm-feed-main em,
.comm-feed-side {
    color: var(--muted);
    font-style: normal;
    font-size: var(--font-size-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-feed-side {
    display: grid;
    justify-items: end;
    color: var(--muted);
}

body[data-view="communications"] .right .button,
body[data-view="communications"] .right button {
    background: rgba(83, 111, 139, 0.78);
    border-color: rgba(111, 142, 172, 0.22);
}

.work-item-panel .rail-detail-actions,
.rail-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.work-item-panel > .rail-kicker:not(:first-child) {
    margin-top: 16px;
}

.work-item-panel > .rail-detail-actions {
    margin-bottom: 4px;
}

.work-item-panel > .delete-form {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.work-item-panel > .dependency-warning {
    margin: 12px 0 0;
}

.work-item-panel > .dependency-list {
    margin: 0 0 4px;
}

.work-item-panel > .attachments,
.work-item-panel > .muted {
    margin-bottom: 0;
}

.task-import-form {
    margin-top: 14px;
}

.task-import-preview {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.task-import-preview-head,
.task-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.task-import-preview-head h2,
.task-import-preview-head p {
    margin: 0;
}

.import-status {
    padding: 4px 9px;
    border: 1px solid rgba(124, 166, 135, 0.38);
    border-radius: 999px;
    background: rgba(124, 166, 135, 0.12);
    color: #bed3c4;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.import-status.has-errors {
    border-color: rgba(231, 91, 83, 0.42);
    background: rgba(231, 91, 83, 0.12);
    color: #f1a39d;
}

.import-errors {
    padding: 10px 12px;
    border: 1px solid rgba(231, 91, 83, 0.35);
    background: rgba(231, 91, 83, 0.08);
    color: #f1b1ad;
}

.import-errors ul {
    margin: 7px 0 0;
    padding-left: 20px;
}

.task-import-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.task-import-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
}

.task-import-table th,
.task-import-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.task-import-table th {
    color: var(--muted);
    text-transform: uppercase;
}

.task-import-table tr.has-errors {
    background: rgba(231, 91, 83, 0.07);
}

.task-import-table td small {
    display: block;
    max-width: 42ch;
    margin-top: 3px;
    color: #f1a39d;
    white-space: normal;
}

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

.task-import-actions form {
    margin: 0;
}

.work-item-panel .rail-detail-actions .button,
.rail-form-actions .button,
.rail-form-actions button {
    width: auto;
    min-height: 34px;
    margin-top: 0;
    padding: 7px 12px;
}

.work-item-panel .request-convert-form {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .comm-shell {
        min-height: calc(100vh - 220px);
        padding: 10px;
    }

    .topic-directory {
        min-height: calc(100vh - 220px);
        max-height: none;
    }

    .topic-directory-head,
    .topic-conversation-head {
        align-items: stretch;
        flex-direction: column;
    }

    .topic-directory-actions,
    .topic-conversation-nav {
        width: 100%;
    }

    .topic-directory-actions .button,
    .topic-conversation-nav .button {
        flex: 1 1 0;
    }

    .topic-browser-expand-group {
        width: 100%;
        margin-left: 0;
    }

    .topic-browser-expand-group .button {
        flex: 1 1 0;
    }

    .topic-browser-category > summary {
        grid-template-columns: 18px minmax(0, 1fr) auto auto;
    }

    .topic-category-activity {
        display: none;
    }

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

    .topic-browser-topic time {
        display: none;
    }

    .topic-conversation[data-topic-split] {
        flex-direction: column;
        max-height: none;
        padding: 0;
    }

    .direct-conversation {
        flex-direction: column;
        max-height: none;
        padding: 0;
    }

    .communications-browser-sidebar {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        max-height: 42vh;
        border-right: 0;
        border-bottom: 1px solid rgba(111, 142, 172, 0.3);
    }

    .direct-conversation-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .communications-sidebar-resize-handle {
        display: none;
    }

    .comm-selector-row {
        flex-wrap: wrap;
    }

    .comm-select,
    .comm-select.compact {
        width: 100%;
        flex: 1 1 100%;
    }

    .comm-message,
    .comm-feed-list .communication-activity-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .comm-signal-cluster,
    .comm-feed-side {
        justify-content: flex-start;
        justify-items: start;
        min-width: 0;
        padding-top: 0;
    }
}
.project-search-form {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.project-search-form label {
    font-weight: 700;
}

.project-search-form > div {
    display: flex;
    gap: 0.65rem;
}

.project-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
}

.project-search-summary {
    margin: 0 0 1rem;
    color: var(--muted);
}

.project-search-summary strong {
    color: var(--text);
}

.project-search-group {
    margin-bottom: 1rem;
}

.project-search-group h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.project-search-group h2 span {
    display: inline-grid;
    min-width: 1.7rem;
    min-height: 1.7rem;
    place-items: center;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--surface-muted, #eef2f5);
    font-size: 0.78rem;
}

.project-search-results {
    display: grid;
}

.project-search-result {
    display: block;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.project-search-result:first-child {
    border-top: 0;
}

.project-search-result:hover strong,
.project-search-result:focus strong {
    text-decoration: underline;
}

.project-search-result p {
    margin: 0.3rem 0;
    line-height: 1.45;
}

.project-search-result span {
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .project-search-form > div {
        align-items: stretch;
        flex-direction: column;
    }
}
.project-file-picker-field {
    display: grid;
    gap: 7px;
}

.project-file-picker-field .field-label {
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-file-picker-selection {
    font-size: var(--font-size-xs);
}

.project-file-picker-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
}

.project-file-picker-modal[hidden],
.project-file-picker-row[hidden],
.project-file-picker-empty[hidden] {
    display: none;
}

.project-file-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 13, 0.82);
}

.project-file-picker-dialog {
    position: absolute;
    inset: 6vh 5vw;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #101720;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.project-file-picker-dialog > header,
.project-file-picker-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.project-file-picker-dialog > footer {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.project-file-picker-dialog h2 {
    margin: 0;
}

.project-file-picker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
    align-items: end;
    gap: 20px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.project-file-picker-breadcrumb {
    overflow: hidden;
    color: var(--muted-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-picker-search {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.project-file-picker-body {
    display: grid;
    grid-template-columns: minmax(210px, 25%) minmax(0, 1fr);
    min-height: 0;
}

.project-file-picker-tree {
    overflow: auto;
    padding: 10px;
    border-right: 1px solid var(--line);
}

.project-file-picker-tree button {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    overflow: hidden;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-strong);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-picker-tree button:hover,
.project-file-picker-tree button.active {
    background: var(--selected-background);
    color: var(--ink);
}

.project-file-picker-list {
    min-width: 0;
    overflow: auto;
    padding: 10px 14px;
}

.project-file-picker-list-head,
.project-file-picker-row {
    display: grid;
    grid-template-columns: 28px minmax(260px, 2.2fr) minmax(75px, 0.7fr) minmax(130px, 1fr) minmax(70px, 0.55fr) minmax(120px, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 850px;
}

.project-file-picker-list-head {
    position: sticky;
    z-index: 1;
    top: -10px;
    min-height: 38px;
    border-bottom: 1px solid var(--line-strong);
    background: #101720;
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.project-file-picker-list-head button {
    min-height: 28px;
    padding: 0;
    background: transparent;
    color: var(--muted);
    text-align: left;
}

.project-file-picker-row {
    min-height: 42px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.project-file-picker-row:hover {
    background: var(--row-hover-bg);
}

.project-file-picker-row:has(input:checked) {
    background: var(--selected-background);
}

.project-file-picker-row strong,
.project-file-picker-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-picker-row input {
    width: 17px;
    height: 17px;
}

.project-file-picker-actions {
    display: flex;
    gap: 8px;
}

body.project-file-picker-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .project-file-picker-dialog {
        inset: 2vh 2vw;
    }

    .project-file-picker-toolbar {
        grid-template-columns: 1fr;
    }

    .project-file-picker-body {
        grid-template-columns: 1fr;
    }

    .project-file-picker-tree {
        display: flex;
        max-height: 105px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .project-file-picker-tree button {
        flex: 0 0 auto;
        width: auto;
        max-width: 220px;
    }
}
.work-item-filter-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) auto auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 12px;
}

.work-item-filter-bar label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.work-item-filter-bar select {
    min-width: 0;
}

@media (max-width: 1150px) {
    .work-item-filter-bar {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 700px) {
    .work-item-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}
.request-resolution {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--accent-border);
    border-radius: var(--surface-radius);
    background: var(--selected-background);
}

.request-resolution span {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.request-convert-form,
.request-reject-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.request-convert-form h3,
.request-reject-form h3 {
    margin: 0;
    font-size: var(--font-size-section);
}
.workstream-summary{display:flex;gap:.65rem;flex-wrap:wrap;margin:0 0 1rem}
.workstream-summary-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px solid color-mix(in srgb,var(--workstream-color) 55%,#34404c);border-radius:999px;background:color-mix(in srgb,var(--workstream-color) 12%,#111820);font-size:.82rem}
.workstream-summary-chip>span:last-child{color:#9eacba}
.workstream-dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--workstream-color)}
.workstream-badge{display:inline-flex;align-items:center;max-width:12rem;padding:.25rem .55rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--workstream-color) 70%,#34404c);background:color-mix(in srgb,var(--workstream-color) 16%,#111820);color:#f3f7fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem}
.workstream-badge:before{content:"";width:.48rem;height:.48rem;border-radius:50%;background:var(--workstream-color);margin-right:.4rem;flex:0 0 auto}
.workstream-badge.is-unassigned{--workstream-color:#66717d;color:#aab4be}
.rail-workstream{margin:-.15rem 0 .9rem}

/* Workstream is a required primary column in the combined desktop work queue. */
@media (min-width: 769px) {
    .work-item-table th.work-item-workstream-column,
    .work-item-table td.work-item-workstream-cell {
        display: table-cell !important;
        visibility: visible !important;
        width: 190px;
        min-width: 190px;
    }
}

@media (min-width: 769px) {
    .work-item-table th,
    .work-item-table td {
        padding: 7px 7px;
    }

    .work-item-table th {
        padding-right: 12px;
    }

    .work-item-table {
        min-width: 1320px;
    }

    .work-item-table th.work-item-workstream-column,
    .work-item-table td.work-item-workstream-cell {
        width: 168px;
        min-width: 168px;
    }

    .work-item-table .work-item-dependency-column,
    .work-item-table .work-item-dependency-cell {
        width: 138px;
    }

    .work-item-table .work-item-description-column,
    .work-item-table .work-item-description-cell {
        width: 300px;
    }
}

.gantt-floating-scroll {
    position: fixed;
    z-index: 45;
    bottom: 8px;
    display: none;
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(211, 167, 109, 0.24);
    border-radius: 7px;
    background: #111820;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
    scrollbar-color: rgba(211, 167, 109, 0.7) rgba(255, 255, 255, 0.08);
}

.gantt-floating-scroll.is-visible {
    display: block;
}

.gantt-floating-scroll > div {
    height: 1px;
}

.dependency-focus-toggle {
    white-space: nowrap;
}

.dependency-focus-toggle.is-active {
    border-color: #5ca8ef;
    background: rgba(49, 126, 196, 0.28);
    color: #d9eeff;
}

.dependency-focus-summary {
    margin-left: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(92, 168, 239, 0.5);
    border-radius: 999px;
    color: #8ec8ff;
    font-size: var(--font-size-xs);
}

.gantt-canvas,
.dependency-map-canvas {
    position: relative;
}

.dependency-focus-mode .gantt-row.focus-unrelated {
    opacity: 0.22;
    filter: saturate(0.35);
}

.dependency-focus-mode .gantt-row.focus-selected,
.dependency-focus-mode .gantt-row.focus-prerequisite,
.dependency-focus-mode .gantt-row.focus-dependent {
    opacity: 1;
}

.dependency-focus-mode .gantt-row.focus-selected .gantt-track {
    box-shadow: inset 0 0 0 1px rgba(92, 168, 239, 0.9);
}

.dependency-focus-mode .gantt-row.focus-prerequisite .gantt-meta {
    border-left: 3px solid #d99b32;
}

.dependency-focus-mode .gantt-row.focus-dependent .gantt-meta {
    border-left: 3px solid #a855f7;
}

.dependency-connector-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.dependency-connector {
    fill: none;
    stroke-width: 2;
    opacity: 0.9;
}

.dependency-connector.prerequisite {
    stroke: #d99b32;
}

.dependency-connector.dependent {
    stroke: #a855f7;
}

.show-critical-path .dependency-connector {
    stroke-width: 3;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(168,85,247,.45));
}

.dependency-map-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.dependency-map-view-toggle {
    display: flex;
    gap: 8px;
    margin: -4px 0 12px;
}

.dependency-map-view-toggle .button.is-active {
    border-color: #5ca8ef;
    background: #315a7f;
    color: #fff;
}

.dependency-map-filters {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(260px, 2fr) 120px auto auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

.dependency-map-filters.is-full-project {
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
    justify-content: start;
}

.dependency-filter-status {
    align-self: center;
    color: var(--muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.dependency-map-filters.is-applying {
    opacity: .72;
    pointer-events: none;
}

.dependency-map-filters label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.dependency-map-filters .check {
    display: flex;
    align-items: center;
    padding-bottom: 9px;
    white-space: nowrap;
}

.dependency-map-canvas {
    min-height: 590px;
    max-height: calc(100vh - 285px);
    overflow: auto;
    cursor: grab;
    overscroll-behavior: contain;
}

.dependency-map-canvas.is-panning {
    cursor: grabbing;
    user-select: none;
}

.dependency-map-columns {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: max-content;
    gap: 54px;
    align-items: flex-start;
    transform-origin: top left;
}

.dependency-map-column {
    width: 245px;
}

.dependency-map-column h2 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: var(--font-size-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dependency-map-node-list {
    display: grid;
    gap: 18px;
}

.dependency-map-node {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 112px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--node-color) 75%, #34404c);
    border-left: 4px solid var(--node-color);
    border-radius: 10px;
    background: #121b24;
    color: #eef3f7;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

.dependency-map-node:hover,
.dependency-map-node:focus,
.dependency-map-node.is-root {
    border-color: #5ca8ef;
    box-shadow: 0 0 0 2px rgba(92,168,239,.24), 0 8px 24px rgba(0,0,0,.28);
}

.dependency-map-node-stream {
    color: var(--node-color);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.dependency-map-node-meta {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

.dependency-map-node.status-complete {
    opacity: .72;
}

.dependency-map-node.status-blocked::after {
    content: "Blocked";
    position: absolute;
    top: 10px;
    right: 10px;
    color: #f1bd72;
    font-size: var(--font-size-2xs);
}

.dependency-map-canvas.is-full-project .dependency-map-columns {
    gap: 42px;
}

.dependency-map-canvas.is-full-project .dependency-map-column {
    width: 220px;
}

.dependency-map-canvas.is-full-project .dependency-map-node-list {
    gap: 11px;
}

.dependency-map-canvas.is-full-project .dependency-map-node {
    gap: 4px;
    min-height: 82px;
    padding: 10px;
}

.dependency-map-canvas.is-full-project .dependency-map-node strong {
    font-size: var(--font-size-sm);
    line-height: 1.25;
}

.dependency-map-canvas.is-full-project .dependency-map-node:hover:not(.is-hover-target):not(.is-root) {
    border-color: color-mix(in srgb, var(--node-color) 75%, #34404c);
    box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

.dependency-map-canvas.is-full-project .dependency-map-node.is-hover-target {
    border-color: #5ca8ef;
    box-shadow: 0 0 0 2px rgba(92,168,239,.24), 0 8px 24px rgba(0,0,0,.28);
}

.dependency-map-canvas.is-full-project .dependency-connector {
    stroke-width: 1;
    opacity: .16;
}

.dependency-map-canvas.has-emphasis .dependency-map-node,
.dependency-map-canvas.has-emphasis .dependency-connector {
    opacity: .12;
}

.dependency-map-canvas.has-emphasis .dependency-map-node.is-related,
.dependency-map-canvas.has-emphasis .dependency-connector.is-related {
    opacity: 1;
}

.dependency-map-zoom {
    position: sticky;
    z-index: 12;
    right: 8px;
    bottom: 8px;
    display: flex;
    width: max-content;
    margin: 28px 0 0 auto;
    gap: 7px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(17,24,32,.94);
}

.dependency-map-help {
    position: sticky;
    z-index: 11;
    left: 8px;
    bottom: 8px;
    width: max-content;
    max-width: calc(100% - 250px);
    margin-top: -42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(17,24,32,.92);
    color: var(--muted);
    font-size: var(--font-size-xs);
    pointer-events: none;
}

@media (max-width: 1100px) {
    .dependency-map-filters {
        grid-template-columns: 1fr 1fr;
    }

    .dependency-map-canvas {
        max-height: calc(100vh - 330px);
    }
}
.dependency-picker-field {
  display: grid;
  gap: 0.4rem;
}

.dependency-picker-open {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.dependency-picker-dialog {
  background: #111820;
  border: 1px solid #344251;
  border-radius: 12px;
  color: #edf4fb;
  height: min(720px, calc(100vh - 48px));
  margin: auto;
  max-height: none;
  max-width: none;
  padding: 0;
  width: min(1100px, calc(100vw - 48px));
}

.dependency-picker-dialog::backdrop {
  background: rgba(3, 8, 13, 0.78);
}

.dependency-picker-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
}

.dependency-picker-header,
.dependency-picker-footer {
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
}

.dependency-picker-header {
  border-bottom: 1px solid #2b3742;
  display: flex;
  justify-content: space-between;
}

.dependency-picker-header h2 {
  font-size: 1.15rem;
  margin: 0;
}

.dependency-picker-close {
  min-width: 2.25rem;
}

.dependency-picker-tabs {
  align-items: end;
  border-bottom: 1px solid #2b3742;
  display: flex;
  gap: 0.3rem;
  padding: 0.6rem 1.15rem 0;
}

[data-dependency-tab] {
  background: transparent;
  border-color: transparent;
  border-radius: 6px 6px 0 0;
  color: #9eb1c4;
}

[data-dependency-tab].is-active {
  background: #1b2631;
  border-color: #344251;
  border-bottom-color: #1b2631;
  color: #fff;
}

.dependency-picker-panel {
  min-height: 0;
  overflow: hidden;
}

.dependency-picker-prerequisites {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  min-height: 0;
}

.dependency-picker-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  padding: 1rem 1.15rem;
}

.dependency-picker-main > p {
  color: #aab9c7;
  margin: 0 0 0.8rem;
}

.dependency-picker-filters {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(220px, 1fr) 180px 145px;
  margin-bottom: 0.8rem;
}

.dependency-picker-results {
  border: 1px solid #2b3742;
  border-radius: 8px;
  min-height: 0;
  overflow: auto;
}

.dependency-picker-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.dependency-picker-result-head,
.dependency-picker-result {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 28px minmax(250px, 1.7fr) 160px 82px 105px 95px;
  min-width: 820px;
}

.dependency-picker-result-head {
  background: #0d141b;
  color: #8fa3b6;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 0.55rem 0.7rem;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.dependency-picker-result {
  border-top: 1px solid #26323d;
  cursor: pointer;
  padding: 0.6rem 0.7rem;
}

.dependency-picker-result:hover,
.dependency-picker-result.is-selected {
  background: #1b2733;
}

.dependency-picker-result-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-picker-side {
  border-left: 1px solid #2b3742;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.dependency-picker-side h3 {
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}

.dependency-selected-list,
.dependency-dependent-list {
  display: grid;
  gap: 0.5rem;
}

.dependency-selected-card,
.dependency-selected-item,
.dependency-dependent-item,
.dependency-dependent-list a {
  align-items: center;
  background: #18222c;
  border: 1px solid #31404e;
  border-radius: 7px;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
}

.dependency-selected-item span,
.dependency-dependent-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dependency-picker-impact {
  border-top: 1px solid #2b3742;
  margin-top: 1rem;
  padding-top: 1rem;
}

.dependency-picker-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dependency-picker-dependents {
  height: 100%;
  overflow: auto;
  padding: 1rem 1.15rem;
}

.dependency-picker-footer {
  background: #111820;
  border-top: 1px solid #2b3742;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  z-index: 2;
}

.dependency-picker-footer-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

.dependency-picker-safeguard {
  color: #92a5b7;
  font-size: 0.8rem;
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 820px) {
  .dependency-picker-dialog {
    height: calc(100vh - 20px);
    width: calc(100vw - 20px);
  }

  .dependency-picker-prerequisites {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .dependency-picker-main {
    min-height: 460px;
  }

  .dependency-picker-side {
    border-left: 0;
    border-top: 1px solid #2b3742;
  }

  .dependency-picker-filters {
    grid-template-columns: 1fr;
  }
}
.rich-composer {
  display: grid;
  gap: 0;
  min-width: 0;
}

.rich-toolbar {
  align-items: center;
  background: #0e151c;
  border: 1px solid #344251;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.35rem;
}

.rich-toolbar button {
  background: transparent;
  border: 1px solid transparent;
  color: #c6d4e1;
  min-height: 1.9rem;
  padding: 0.25rem 0.48rem;
}

.rich-toolbar button:hover,
.rich-toolbar button:focus-visible {
  background: #23303c;
  border-color: #465767;
}

.rich-color-label {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  margin: 0;
}

.rich-color-label span {
  color: #aab9c7;
  font-size: 0.76rem;
}

.rich-color-label select {
  min-height: 1.9rem;
  padding: 0.2rem 1.7rem 0.2rem 0.4rem;
}

.rich-composer .composer-input {
  border-radius: 0 0 8px 8px;
}

.rich-editor {
  color: #edf4fb;
  flex: 1;
  line-height: 1.45;
  max-height: 11rem;
  min-height: 3.25rem;
  min-width: 0;
  overflow: auto;
  outline: none;
  padding: 0.65rem 0.7rem;
  white-space: pre-wrap;
}

.rich-editor:empty::before {
  color: #718396;
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-editor ul,
.rich-editor ol,
.formatted-message-body ul,
.formatted-message-body ol {
  margin: 0.35rem 0;
  padding-left: 1.4rem;
}

.formatted-message-body {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.formatted-message-body p {
  margin: 0 0 0.45rem;
}

.formatted-message-body p:last-child {
  margin-bottom: 0;
}
.calendar-settings-grid {
    display: grid;
    gap: 16px;
}

.calendar-setting-card {
    display: grid;
    gap: 16px;
}

.calendar-setting-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.calendar-setting-heading h2 {
    margin: 0 0 4px;
}

.calendar-step {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    color: #081018;
    background: var(--accent, #79a9d1);
    font-weight: 800;
}

.calendar-preferences-form,
.calendar-preferences-form fieldset {
    display: grid;
    gap: 12px;
}

.calendar-preferences-form fieldset {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.calendar-option-grid,
.calendar-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 14px;
}

.calendar-field-row label,
.calendar-url-field {
    display: grid;
    gap: 6px;
}

.calendar-url-field > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.calendar-url-field input {
    min-width: 0;
}

.calendar-safety-note {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.calendar-feed-start-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.calendar-feed-start-row > .checkbox-label {
    padding-top: 0;
}

.calendar-enrollment-guide {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 86%, var(--accent) 14%);
}

.calendar-enrollment-guide > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 800;
    list-style-position: inside;
}

.calendar-enrollment-guide > summary small {
    color: var(--muted);
    font-weight: 600;
}

.calendar-guide-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--border);
}

.calendar-guide-body h3 {
    margin: 18px 0 8px;
}

.calendar-guide-body p,
.calendar-guide-body ol,
.calendar-guide-body ul {
    margin-top: 10px;
    margin-bottom: 0;
}

.calendar-guide-body li {
    margin-bottom: 8px;
    line-height: 1.45;
}

.calendar-guide-notes {
    margin-top: 18px;
    padding: 2px 14px 14px;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--panel) 92%, #ffffff 8%);
}

.calendar-provider-list {
    display: grid;
    gap: 10px;
}

.calendar-provider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.calendar-provider > div {
    display: grid;
    gap: 3px;
}

.calendar-provider span {
    color: var(--muted);
    font-size: .88rem;
}

.calendar-provider-meta,
.calendar-provider-error {
    display: block;
    max-width: 260px;
}

.calendar-provider-error {
    color: #ff9c8f !important;
}

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

.calendar-provider-actions form {
    margin: 0;
}

.calendar-boundaries {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.calendar-download-action {
    margin-top: 10px;
}

.calendar-link {
    opacity: .85;
}
/* Decisions manual */
.decision-view-navigation {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.decision-view-navigation > a:not(.button) {
  padding: 0.62rem 0.9rem;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
}

.decision-view-navigation > a.active {
  color: var(--text);
  background: var(--panel-strong);
  box-shadow: inset 0 0 0 1px var(--border);
}

.decision-view-navigation .decision-new-action {
  margin-left: auto;
}

.decision-manual,
.decision-register,
.decision-editor,
.decision-detail {
  min-width: 0;
}

.decision-manual-head,
.decision-register > header,
.decision-editor > header,
.decision-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.decision-manual-head h2,
.decision-register h2,
.decision-editor h2,
.decision-detail h2 {
  margin: 0;
}

.decision-manual-head p,
.decision-register header p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.decision-manual-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.decision-manual-actions label,
.decision-register > header label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.decision-manual-search {
  display: block;
  margin: 1rem 0 0.75rem;
}

.decision-manual-search input {
  width: 100%;
}

.decision-manual-groups {
  display: grid;
  gap: 0.55rem;
}

.decision-manual-category {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(9, 18, 27, 0.35);
}

.decision-manual-category > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 0.9rem;
  cursor: pointer;
  list-style: none;
  background: var(--panel-strong);
}

.decision-manual-category > summary::-webkit-details-marker {
  display: none;
}

.decision-manual-category > summary strong {
  color: var(--text);
}

.decision-manual-category > summary > span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
}

.decision-category-chevron {
  color: var(--accent);
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.decision-manual-category[open] .decision-category-chevron {
  transform: rotate(90deg);
}

.decision-manual-list {
  display: grid;
}

.decision-manual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.9rem;
  border-top: 1px solid var(--border);
}

.decision-manual-row-main {
  min-width: 0;
}

.decision-manual-row-main strong {
  color: var(--text);
}

.decision-manual-row-main p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.decision-manual-row-meta {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.decision-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0.12rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.decision-status-active {
  color: #a7efbd;
  border-color: #3b8655;
  background: rgba(55, 126, 80, 0.2);
}

.decision-status-draft {
  color: #ffd986;
  border-color: #846529;
  background: rgba(132, 101, 41, 0.2);
}

.decision-status-superseded {
  color: #c4ccd5;
  border-color: #59636d;
  background: rgba(89, 99, 109, 0.18);
}

.decision-register > header {
  margin-bottom: 0.9rem;
}

.decision-register td:first-child {
  min-width: 280px;
}

.decision-register td:first-child a {
  display: grid;
  gap: 0.2rem;
}

.decision-register td:first-child small {
  color: var(--muted);
  font-weight: 400;
}

.decision-editor-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.decision-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.decision-editor-grid label,
.decision-editor-support label,
.decision-editor-form > label {
  display: grid;
  gap: 0.32rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.decision-title-field {
  grid-column: span 2;
}

.decision-body-label .rich-editor {
  min-height: 300px;
  max-height: 58vh;
  overflow: auto;
}

.decision-editor-support {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
  gap: 1rem;
}

.decision-editor-support > div {
  display: grid;
  gap: 0.75rem;
}

.decision-editor-support select[multiple] {
  min-height: 12rem;
}

.decision-editor-actions {
  display: flex;
  gap: 0.55rem;
}

.decision-breadcrumb {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decision-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.decision-document {
  margin-top: 1.1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(8, 15, 23, 0.42);
  line-height: 1.55;
}

.decision-document h2,
.decision-document h3 {
  margin: 1.2rem 0 0.55rem;
}

.decision-document > :first-child {
  margin-top: 0;
}

.decision-detail-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.decision-detail-section h3 {
  margin: 0 0 0.7rem;
}

.decision-related-tasks,
.decision-notes {
  display: grid;
  gap: 0.55rem;
}

.decision-related-tasks a,
.decision-notes article,
.decision-revision-history article {
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-strong);
}

.decision-related-tasks a {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.decision-related-tasks span,
.decision-notes time,
.decision-revision-history span {
  color: var(--muted);
  font-size: 0.78rem;
}

.decision-notes article > header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
}

.decision-revision-history > summary {
  cursor: pointer;
  font-weight: 800;
}

.decision-revision-history > div {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.decision-revision-history article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.8rem;
}

.decision-revision-history article p {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
}

.formatted-message-body table,
.rich-editor table {
  width: 100%;
  margin: 0.75rem 0;
  border-collapse: collapse;
  table-layout: auto;
}

.formatted-message-body th,
.formatted-message-body td,
.rich-editor th,
.rich-editor td {
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.formatted-message-body th,
.rich-editor th {
  background: var(--panel-strong);
  color: var(--text);
}

.formatted-message-body blockquote,
.rich-editor blockquote {
  margin: 0.7rem 0;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: rgba(102, 179, 255, 0.08);
}

.topic-decision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.08rem 0.36rem;
  border: 1px solid #846529;
  border-radius: 999px;
  color: #ffd166;
  font-size: 0.7rem;
  font-weight: 800;
}

.topic-active-decision {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.65rem 0.9rem 0;
  padding: 0.62rem 0.75rem;
  border: 1px solid #846529;
  border-radius: 9px;
  background: rgba(132, 101, 41, 0.15);
}

.topic-active-decision > span:nth-child(2) {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.topic-active-decision small {
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topic-active-decision em {
  margin-left: auto;
  color: var(--muted);
}

.topic-conversation-head-actions {
  display: flex;
  gap: 0.4rem;
}

@media (max-width: 900px) {
  .decision-view-navigation,
  .decision-manual-head,
  .decision-register > header,
  .decision-editor > header,
  .decision-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .decision-view-navigation .decision-new-action {
    margin-left: 0;
  }

  .decision-editor-grid,
  .decision-editor-support,
  .decision-manual-row {
    grid-template-columns: 1fr;
  }

  .decision-title-field {
    grid-column: auto;
  }

  .decision-manual-row-meta {
    justify-items: start;
    white-space: normal;
  }

  .topic-conversation-head-actions {
    flex-wrap: wrap;
  }
}