:root,
[data-theme="dark"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #a44647;
    --age-2: #528c7d;
    --age-3: #5a7593;
    --age-4: #7b6780;
    --age-pinned: #7e8186;

    --canvas: #0f1012;
    --surface: #16181b;
    --raised: #1e2126;
    --sunken: rgba(0, 0, 0, 0.24);
    --faint: rgba(255, 255, 255, 0.045);

    --border: rgba(255, 255, 255, 0.075);
    --border-strong: rgba(255, 255, 255, 0.16);

    --hover: rgba(255, 255, 255, 0.045);

    --text: #c8ccd2;
    --text-strong: #f4f5f7;
    --muted: #9aa0a8;

    --accent: #b8434a;
    --accent-hover: #a33b42;
    --accent-tint: rgba(184, 67, 74, 0.16);
    --accent-line: rgba(184, 67, 74, 0.5);
    --on-accent: #ffffff;

    --danger: #c96a78;
    --danger-tint: rgba(201, 106, 120, 0.12);
    --danger-line: rgba(201, 106, 120, 0.45);
    --diff-removed: #c96a78;
    --diff-removed-tint: rgba(201, 106, 120, 0.14);
    --diff-added: #82bf99;
    --diff-added-tint: rgba(130, 191, 153, 0.14);

    --st-todo: #aeb4bc;
    --st-backlog: #9dabe0;
    --st-progress: #dcb06a;
    --st-done: #82bf99;
    --st-discarded: #a4a8ad;

    --dep-requires: #cfa257;
    --dep-blocks: #c96a78;
    --dep-duplicates: #8a9ad4;
    --dep-child-of: #79c0a0;
    --dep-supersedes: #b48ad4;

    --scrim: rgba(0, 0, 0, 0.55);

    color-scheme: dark;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --plan-label: 240px;

    --filter-label: 78px;

    /* The sidebar's width, which the app overrides inline on `.app` - the reader can drag it.
       A rule reads it to line its own content up with the chat column beside the sidebar. */
    --rail: 260px;
}


[data-theme="light"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #b8434a;
    --age-2: #3f7d6f;
    --age-3: #456a91;
    --age-4: #6d5a86;
    --age-pinned: #8a8f96;

    --canvas: #f7f8f9;
    --surface: #ffffff;
    --raised: #f0f1f3;
    --sunken: rgba(0, 0, 0, 0.04);
    --faint: rgba(0, 0, 0, 0.035);
    --border: rgba(16, 22, 28, 0.1);
    --border-strong: rgba(16, 22, 28, 0.2);
    --hover: rgba(16, 22, 28, 0.035);
    --text: #33383f;
    --text-strong: #101317;
    --muted: #626a78;
    --accent: #1273a8;
    --accent-hover: #0e5c88;
    --accent-tint: rgba(18, 115, 168, 0.14);
    --accent-line: rgba(18, 115, 168, 0.45);
    --on-accent: #ffffff;
    --danger: #b3261e;
    --danger-tint: rgba(179, 38, 30, 0.09);
    --danger-line: rgba(179, 38, 30, 0.4);
    --diff-removed: #b3261e;
    --diff-removed-tint: rgba(179, 38, 30, 0.09);
    --diff-added: #19572e;
    --diff-added-tint: rgba(25, 87, 46, 0.09);
    --st-todo: #4b525a;
    --st-backlog: #324785;
    --st-progress: #714a00;
    --st-done: #19572e;
    --st-discarded: #565d66;
    --dep-requires: #8a5a00;
    --dep-blocks: #a3241b;
    --dep-duplicates: #3f5aa6;
    --dep-child-of: #1f6b45;
    --dep-supersedes: #7a3fa6;
    --scrim: rgba(0, 0, 0, 0.35);
    color-scheme: light;
    --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.07);
    --shadow-md: 0 6px 18px rgba(16, 24, 32, 0.13);
    --shadow-lg: 0 20px 48px rgba(16, 24, 32, 0.2);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


[data-theme="red"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #d95b62;
    --age-2: #5f9b8a;
    --age-3: #61809f;
    --age-4: #83688b;
    --age-pinned: #8b8f95;

    --canvas: #1a1213;
    --surface: #211819;
    --raised: #2d2223;
    --sunken: rgba(0, 0, 0, 0.22);
    --faint: rgba(255, 255, 255, 0.07);
    --border: #3d2f30;
    --border-strong: #554043;
    --text: #dbd4d4;
    --text-strong: #f4eeee;
    --muted: #a39798;
    --accent: #d95b62;
    --accent-hover: #ea737a;
    --accent-tint: rgba(217, 91, 98, 0.16);
    --accent-line: rgba(217, 91, 98, 0.5);
    --diff-removed: #e08a92;
    --diff-removed-tint: rgba(224, 138, 146, 0.16);
    --diff-added: #86c9a2;
    --diff-added-tint: rgba(134, 201, 162, 0.14);
    --on-accent: #2b0f12;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
}

[data-theme="green"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #d0676d;
    --age-2: #4f9d7c;
    --age-3: #5b7f9e;
    --age-4: #7d6b88;
    --age-pinned: #868b91;

    --canvas: #121a15;
    --surface: #18211b;
    --raised: #223029;
    --sunken: rgba(0, 0, 0, 0.22);
    --faint: rgba(255, 255, 255, 0.07);
    --border: #2f3d34;
    --border-strong: #42544a;
    --text: #d3dbd6;
    --text-strong: #eef4f0;
    --muted: #93a099;
    --accent: #3fae79;
    --accent-hover: #52c48c;
    --accent-tint: rgba(63, 174, 121, 0.16);
    --accent-line: rgba(63, 174, 121, 0.5);
    --diff-removed: #d3939c;
    --diff-removed-tint: rgba(211, 147, 156, 0.16);
    --diff-added: #74c795;
    --diff-added-tint: rgba(116, 199, 149, 0.16);
    --on-accent: #06231a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
}

[data-theme="blue"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #cf6470;
    --age-2: #4b9a92;
    --age-3: #5a86c0;
    --age-4: #7a6b94;
    --age-pinned: #848a93;

    --canvas: #131820;
    --surface: #1a212a;
    --raised: #242e3a;
    --sunken: rgba(0, 0, 0, 0.22);
    --faint: rgba(255, 255, 255, 0.07);
    --border: #303c4a;
    --border-strong: #445263;
    --text: #d5dae1;
    --text-strong: #eff3f8;
    --muted: #949dab;
    --accent: #2b9fd8;
    --accent-hover: #3fb0e6;
    --accent-tint: rgba(43, 159, 216, 0.16);
    --accent-line: rgba(43, 159, 216, 0.5);
    --diff-removed: #d18f99;
    --diff-removed-tint: rgba(209, 143, 153, 0.16);
    --diff-added: #7cc49d;
    --diff-added-tint: rgba(124, 196, 157, 0.14);
    --on-accent: #0a1e2a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
}

[data-theme="purple"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #d1657a;
    --age-2: #4f9a8d;
    --age-3: #617ba8;
    --age-4: #8a6cb0;
    --age-pinned: #858a92;

    --canvas: #17131d;
    --surface: #1e1a25;
    --raised: #29232f;
    --sunken: rgba(0, 0, 0, 0.22);
    --faint: rgba(255, 255, 255, 0.07);
    --border: #372f40;
    --border-strong: #4c4157;
    --text: #d9d4de;
    --text-strong: #f2eef7;
    --muted: #9b93a4;
    --accent: #a37ae0;
    --accent-hover: #b78cea;
    --accent-tint: rgba(163, 122, 224, 0.16);
    --accent-line: rgba(163, 122, 224, 0.5);
    --diff-removed: #d1909c;
    --diff-removed-tint: rgba(209, 144, 156, 0.16);
    --diff-added: #86c6a1;
    --diff-added-tint: rgba(134, 198, 161, 0.14);
    --on-accent: #1d1030;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
}


[data-theme="black-and-white"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #d9d9d9;
    --age-2: #a6a6a6;
    --age-3: #767676;
    --age-4: #4f4f4f;
    --age-pinned: #8a8a8a;

    --canvas: #000000;
    --surface: #0d0d0d;
    --raised: #1a1a1a;
    --sunken: rgba(0, 0, 0, 0.35);
    --faint: rgba(255, 255, 255, 0.09);
    --border: #3a3a3a;
    --border-strong: #5c5c5c;
    --text: #e6e6e6;
    --text-strong: #ffffff;
    --muted: #a0a0a0;
    --accent: #ffffff;
    --accent-hover: #d6d6d6;
    --accent-tint: rgba(255, 255, 255, 0.14);
    --accent-line: rgba(255, 255, 255, 0.5);
    --on-accent: #000000;
    --danger: #767676;
    --danger-tint: rgba(255, 255, 255, 0.12);
    --danger-line: rgba(255, 255, 255, 0.4);
    --diff-removed: #b8b8b8;
    --diff-removed-tint: rgba(255, 255, 255, 0.16);
    --diff-added: #ffffff;
    --diff-added-tint: rgba(255, 255, 255, 0.3);
    --st-todo: #b0b0b0;
    --st-backlog: #cfcfcf;
    --st-progress: #e8e8e8;
    --st-done: #d0d0d0;
    --st-discarded: #9e9e9e;
    --dep-requires: #cfcfcf;
    --dep-blocks: #ffffff;
    --dep-duplicates: #9a9a9a;
    --dep-child-of: #808080;
    --dep-supersedes: #9a9a9a;
    --scrim: rgba(0, 0, 0, 0.7);
    color-scheme: dark;
    --shadow-sm: 0 1px 0 #000000;
    --shadow-md: 0 2px 0 #000000;
    --shadow-lg: 0 3px 0 #000000;
    --edge-light: inset 0 1px 0 #ffffff;
    --hover: rgba(255, 255, 255, 0.14);
}


[data-theme="contrast"] {
    /* The age ramp: how long a file has gone untouched (BIL-18). Four rungs, in the
       order the defrag legend reads them - touched lately, then untouched 30 days,
       90 days, 180 days - and one for a file somebody pinned, which a rule never
       touches. The storage bar, the blocks and the rule's own chips all read them,
       so a bucket cannot be one colour in one place and another elsewhere. */
    --age-1: #ff8a90;
    --age-2: #59d3b4;
    --age-3: #7fb2ff;
    --age-4: #c9a4ff;
    --age-pinned: #e6e6e6;

    --canvas: #000000;
    --surface: #000000;
    --raised: #101010;
    --sunken: rgba(255, 255, 255, 0.14);
    --faint: rgba(255, 255, 255, 0.2);
    --border: #ffffff;
    --border-strong: #ffffff;
    --text: #ffffff;
    --text-strong: #ffffff;
    --muted: #e0e0e0;
    --accent: #ffe100;
    --accent-hover: #fff45c;
    --accent-tint: rgba(255, 225, 0, 0.24);
    --accent-line: rgba(255, 225, 0, 0.8);
    --on-accent: #000000;
    --danger: #f25c5c;
    --danger-tint: rgba(242, 92, 92, 0.2);
    --danger-line: rgba(242, 92, 92, 0.85);
    --diff-removed: #ff8a8a;
    --diff-removed-tint: rgba(255, 138, 138, 0.22);
    --diff-added: #6ee7a0;
    --diff-added-tint: rgba(110, 231, 160, 0.22);
    --st-todo: #ffffff;
    --st-backlog: #9db8ff;
    --st-progress: #ffd479;
    --st-done: #6ee7a0;
    --st-discarded: #d0d0d0;
    --dep-requires: #ffd479;
    --dep-blocks: #ff8a8a;
    --dep-duplicates: #9db8ff;
    --dep-child-of: #7ee0a8;
    --dep-supersedes: #d4a0ff;
    --scrim: rgba(0, 0, 0, 0.75);
    color-scheme: dark;
    --shadow-sm: 0 1px 0 #ffffff;
    --shadow-md: 0 3px 0 #ffffff;
    --shadow-lg: 0 5px 0 #ffffff;
    --edge-light: inset 0 1px 0 #ffffff;
    --hover: rgba(255, 255, 255, 0.2);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

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

button {
    border: none;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}



.app {
    display: grid;
    grid-template-columns: 260px 6px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
}


/* The bar spans every column of the grid, and the workspace's own name sits over the sidebar
   it names. Its first zone is therefore the sidebar's width, which lands everything after it -
   the channel's name, and the search past that - exactly where the chat's content starts:
   16 + rail + 12 = rail + 6 + 22. The rail is the width the app writes inline, since the
   reader can drag it. */
.topbar {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}


.topbar__brand {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: var(--rail);
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 650;
}


.topbar__brand-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.topbar__brand-logo {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--faint);
    object-fit: contain;
}


/* The conversation's own name: the heading of everything under it. It is the one bold (700)
   label in the workspace and a size above the messages it heads (a message author is
   15px/600, a rail row 13px/400), so the eye lands on it first and the two layers below it
   never read as the same kind of thing. */
.topbar__channel {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


.topbar__channel-name {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 700;
}


.topbar__channel-sigil {
    flex: none;
    color: var(--muted);
}


/* The name's own box. It is where a phone cuts a long name with an ellipsis: the one thing in
   the bar that may shorten rather than push the field and the bell off it. */
.topbar__channel-title {
    min-width: 0;
}


.topbar__channel-meta {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}


.topbar__feed {
    padding: 1px 6px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 999px;
    color: var(--danger);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}


.topbar__feed:hover {
    background: var(--danger-tint);
    color: var(--text-strong);
}


.topbar__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}


.topbar__leave {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
}


/* The phone's fold: three icons beside a name and a field is more than a handset holds, so
   the channel's actions hide behind this until it is asked for. On a wide screen they are
   simply there, and this is not drawn. */
.topbar__more {
    display: none;
    flex: none;
}


.topbar__search {
    display: flex;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}


.workspaces {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.workspaces__stack {
    flex: 1;
    min-width: 0;
    position: relative;
}

.workspace {
    height: 100vh;
}

.workspace:not(.workspace--front) {
    display: none;
}

.workspace-rail {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 6px;
    width: 68px;
    height: 100vh;
    padding: 8px 6px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text);
}

.workspace-rail__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workspace-rail__item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.workspace-tab {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.workspace-tab:hover {
    background: var(--hover);
}

.workspace-tab--active {
    background: var(--raised);
    border-color: var(--border);
    color: var(--text);
}

.workspace-tab__mark {
    font-size: 14px;
    font-weight: 700;
}

img.workspace-tab__mark {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

.workspace-tab__name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.workspace-tab__unread {
    padding: 0 5px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
}

.workspace-tab__close {
    padding: 2px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.workspace-tab__close:hover {
    background: var(--hover);
    color: var(--text);
}

.workspace-rail__add {
    margin-top: auto;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}

.workspace-rail__add:hover {
    border-color: var(--muted);
    color: var(--text);
}

.signin {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--canvas);
}

.signin .auth {
    height: auto;
}

.signin__back {
    position: absolute;
    top: 16px;
    left: 16px;
}


.rail-resizer {
    cursor: col-resize;
    background: transparent;
    touch-action: none;
}

.rail-resizer:hover,
.rail-resizer--active {
    background: var(--accent);
}


.resize-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    cursor: col-resize;
    user-select: none;
}

.button {
    padding: 6px 12px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.button:hover {
    background: var(--raised);
}

.button--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
}

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

.button--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-strong);
    font-weight: 650;
}

.button--danger:hover:not(:disabled) {
    background: var(--danger);
}

.button:disabled {
    opacity: 0.55;
    cursor: default;
}

.avatar {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    user-select: none;
}

.avatar--sm {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 6px;
}

.avatar--xs {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    border-radius: 4px;
}


.auth {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.auth::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    background: var(--accent);
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.22;
}

[data-theme="black-and-white"] .auth::before,
[data-theme="contrast"] .auth::before {
    display: none;
}

.auth__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 360px;
    padding: 26px 26px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 650;
}

.auth__brand::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--accent);
    transform: rotate(45deg);
}

.auth__tagline {
    margin: -12px 0 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.auth__tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--canvas);
    border-radius: 8px;
}

.auth__tab {
    flex: 1;
    padding: 7px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
}

.auth__tab--active {
    background: var(--raised);
    color: var(--text-strong);
    font-weight: 600;
}

.auth__where {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.auth__where-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.auth__where-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth__change {
    padding: 3px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
}

.auth__change:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.auth__change:disabled {
    opacity: 0.55;
    cursor: default;
}

.auth__sso {
    width: 100%;
    padding: 10px;
    background: var(--raised);
    border: 1px solid var(--border);
    color: var(--text-strong);
    cursor: pointer;
}

.auth__sso:hover:not(:disabled) {
    background: var(--hover);
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth__note {
    margin: 0;
    padding: 8px 10px;
    background: var(--faint);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.field__input {
    padding: 9px 11px;
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}

.field__input:focus {
    border-color: var(--accent);
}

.picture-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.picture-field__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.picture-field__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.picture-field__confirm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.picture-field__ask {
    color: var(--muted);
    font-size: 12px;
}

.select {
    position: relative;
    display: inline-flex;
    width: 100%;
}

.select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    box-shadow: var(--edge-light);
    cursor: pointer;
}

.select__button:hover {
    border-color: var(--border-strong);
}

.select__button:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.select__button::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
}

.select__face {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select__face--unset {
    color: var(--muted);
}

.select__panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.select__search {
    width: 100%;
    margin-bottom: 4px;
    padding: 6px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
}

.select__search::placeholder {
    color: var(--muted);
}

.select__option {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.select__option:hover,
.select__option--on {
    background: var(--hover);
    color: var(--text-strong);
}

.select__option-tick {
    margin-right: 6px;
    color: var(--accent);
}

.select__empty {
    display: block;
    padding: 6px 8px;
    color: var(--muted);
    font-size: 12px;
}

.auth__error {
    margin: 0;
    padding: 8px 10px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}

.auth__submit {
    padding: 10px;
}

.auth__hint {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}


.sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text);
}

.sidebar__header {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--faint);
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    background: var(--surface);
}

.sidebar__search {
    width: 100%;
    padding: 6px 9px;
    background: var(--faint);
    border: 1px solid transparent;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    box-shadow: var(--edge-light);
}

.sidebar__search::placeholder {
    color: var(--muted);
}

.sidebar__search:focus {
    border-color: var(--accent);
    background: var(--sunken);
}

.sidebar__section {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 5px;
    font-size: 12px;
}

.sidebar__section-title {
    color: var(--muted);
    font-weight: 600;
}

.sidebar__section--channels {
    padding-top: 6px;
}

.sidebar__add {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 7px;
    background: var(--faint);
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.sidebar__add-glyph {
    font-size: 13px;
    line-height: 1;
}

.sidebar__add:hover {
    background: var(--accent);
    color: var(--text-strong);
}

.sidebar__hint {
    margin: 4px 12px;
    color: var(--muted);
    font-size: 13px;
}

.sidebar__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 6px;
}

.sidebar__empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sidebar__empty-action:hover {
    background: var(--hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}


.new-channel {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 7px;
    margin: 4px 10px 6px;
    padding: 9px;
    background: var(--sunken);
    border: 1px solid var(--faint);
    border-radius: 8px;
}

.new-channel__input {
    padding: 6px 9px;
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    box-shadow: var(--edge-light);
}

.new-channel__input:focus {
    border-color: var(--accent);
}

.new-channel__actions {
    display: flex;
    gap: 6px;
}

.new-channel__actions .button {
    flex: 1;
    padding: 5px 8px;
    font-size: 13px;
}

.new-channel .sidebar__hint {
    margin: 0;
}


.channel-list {
    flex: 0 0 auto;
    padding: 0 8px 8px;
}

.channel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.channel:hover {
    background: var(--hover);
}

/* The row the reader is in: the accent as a *tint* and nothing else - no slab of
   colour and no glowing hairline, both of which were the loudest things in a rail of
   quiet rows. The weight carries the selection instead (700, the boldest label in the
   rail), which is what a selected state should lean on against a muted palette. */
.channel--active,
.channel--active:hover {
    background: var(--accent-tint);
    color: var(--text-strong);
    font-weight: 700;
}

.channel--muted,
.channel--muted .channel__hash {
    color: var(--muted);
}

.channel--muted .avatar {
    opacity: 0.55;
}

.channel--muted.channel--active {
    color: var(--text-strong);
}

.channel__draft {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 18px;
    opacity: 0.75;
}

.channel__unread {
    flex-shrink: 0;
    margin-left: auto;
    padding: 1px 7px;
    background: var(--accent);
    border-radius: 999px;
    color: var(--text-strong);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
}

.channel__mute {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 13px;
    opacity: 0;
    cursor: pointer;
}

.channel:hover .channel__mute {
    opacity: 1;
}

.channel--muted .channel__mute {
    opacity: 0.7;
}

.channel__mute:hover {
    background: var(--faint);
    color: var(--text-strong);
    opacity: 1;
}

.channel__hash {
    color: var(--muted);
    font-weight: 400;
}

.channel--active .channel__hash {
    color: var(--muted);
}

.channel__name {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel--query .channel__hash {
    color: var(--accent);
}

/* The way to forget a saved query, in the rail. Always visible rather than revealed on hover:
   the reader reported delete as *missing* while this rule hid it, and a saved query's row is one
   of the two places a query is managed (ADR 0232). */
.channel__forget {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-left: auto;
    border-radius: 4px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.channel__forget:hover {
    background: var(--faint);
    color: var(--danger);
}

.channel-list--queries {
    padding-top: 0;
}


.sidebar__section-actions {
    display: flex;
    gap: 4px;
}

.channel-group {
    flex: 0 0 auto;
}

.channel-group__header {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 6px 10px;
}

.channel-group__handle {
    flex: 0 0 auto;
    padding: 0 2px;
    color: var(--muted);
    cursor: grab;
    user-select: none;
}

.channel-group__toggle {
    flex: 0 0 auto;
    width: 16px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.channel-group__toggle:hover {
    background: var(--faint);
    color: var(--text-strong);
}

.channel-group__emoji,
.channel-group__name {
    min-width: 0;
    padding: 1px 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.channel-group__emoji {
    flex: 0 0 auto;
    width: 1.8em;
}

.channel-group__emoji .emoji-button__glyph {
    font-size: 12px;
}

.channel-group__name {
    flex: 1 1 auto;
}

.channel-group__name:focus {
    background: var(--sunken);
    border-color: var(--accent);
    outline: none;
}

.channel-group__remove {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.channel-group__remove:hover {
    background: var(--faint);
    color: var(--text-strong);
}

.channel-group__count {
    flex: 0 0 auto;
    padding: 1px 6px;
    background: var(--raised);
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
}

.channel-list__loose {
    padding-top: 2px;
}

.channel-list__drop {
    margin: 2px 8px;
    padding: 6px 10px;
    border: 1px dashed var(--faint);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}



.channel {
    user-select: none;
}

.channel--held {
    opacity: 0.45;
}

.channel--drop,
.channel--drop:hover {
    background: var(--accent-tint);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.channel-group__header--drop {
    background: var(--accent-tint);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.channel-list__drop--over {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--text-strong);
}

.channel-list--public {
    padding-top: 0;
}

.channel-list--dms {
    padding-top: 0;
}

.channel--joinable {
    cursor: default;
}

.channel--joinable .channel__name {
    flex: 1;
}

.channel__join {
    flex-shrink: 0;
    padding: 2px 9px;
    background: var(--faint);
    border: 1px solid var(--faint);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.channel__join:hover:not(:disabled) {
    background: var(--accent);
    color: var(--text-strong);
}

.channel__join:disabled {
    opacity: 0.6;
    cursor: default;
}

.channel--pending {
    background: var(--faint);
    color: var(--muted);
}

.channel--pending .channel__hash {
    color: var(--muted);
}

.channel--pending:hover {
    background: var(--raised);
}

.channel--pending.channel--active,
.channel--pending.channel--active:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.channel__badge {
    flex-shrink: 0;
    padding: 1px 6px;
    background: var(--raised);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
}

.channel-list--invites {
    flex: 0 1 auto;
    padding-top: 0;
}

.new-channel__visibility {
    display: flex;
    gap: 6px;
}

.new-channel__choice {
    flex: 1;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.new-channel__choice:hover {
    color: var(--text);
}

.new-channel__choice--on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-strong);
    font-weight: 600;
}

.sidebar__footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border-top: 1px solid var(--faint);
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: auto;
    background: var(--surface);
}

.sidebar__user {
    flex: 1;
    min-width: 0;
}

.sidebar__user-name {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__user-email {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An icon is drawn in the ink and the size of where it is placed: `1em` so a lock beside a
   channel's name is as tall as that name, `currentColor` on its stroke so the rule that colours
   the slot colours the icon (ADR 0204). Width on an inline `span` is ignored, so the same class
   can sit on the `#` an open channel wears. */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
}

/* The marks that stand before a name, on the same baseline as the words they mark. */
.settings__sigil,
.consolidate__sigil,
.task-card__sigil {
    margin-right: 4px;
}

.icon-button {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--faint);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.icon-button:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.icon-button--danger {
    border-color: var(--danger);
    color: var(--danger);
}


.chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--canvas);
}

.leave-confirm {
    position: absolute;
    z-index: 4;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.leave-confirm__question {
    color: var(--text);
    font-size: 13px;
}

.leave-confirm .button {
    padding: 4px 10px;
    font-size: 12px;
}

.chat__loading {
    padding: 7px 18px;
    color: var(--muted);
    font-size: 12px;
}

.chat__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 18px 4px;
}

/* The thread scratchpad (CHA3-16): the conversation's own column, opened by whichever thread is
   at the middle of the screen. Flat and behind one hairline - a column of the reading, not a card
   laid over it - which is the rail's surface-and-depth rule rather than a new one. */

.chat__columns {
    display: flex;
    flex: 1;
    min-height: 0;
}

.chat__thread {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.thread-pad {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 320px;
    flex: none;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    background: var(--surface);
    border-left: 1px solid var(--border);
}

.thread-pad__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.thread-pad__title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.thread-pad__close {
    border: none;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread-pad__close:hover {
    color: var(--text-strong);
}

.thread-pad__note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.thread-pad__failure {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
}

/* The row that says the agent is reading this thread again: the reader's own act while it runs,
with the house spinner. It replaces the recompute control rather than sitting beside it, so one
invocation at a time is the only thing pressable. */
.thread-pad__computing {
    display: flex;
    align-items: center;
}

.thread-pad__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thread-pad__heading {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.thread-pad__entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.thread-pad__mark {
    color: var(--accent);
}

.thread-pad__mark--open {
    color: var(--muted);
}

.thread-pad__text {
    color: var(--text);
}

.thread-pad__recompute {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.thread-pad__recompute:hover {
    color: var(--text-strong);
}

.thread-pad__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.thread-pad__consolidate {
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread-pad__consolidate:hover {
    background: var(--accent-hover);
}

.thread-pad__add {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--raised);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread-pad__add:hover {
    background: var(--hover);
}

/* The quiet toolbar under a thread's replies: the reply action, and - where the channel has an
   agent - the scratchpad chip that says what its pad is doing. */

.thread__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.thread__pad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__pad:hover {
    background: var(--hover);
}

.thread__pad--open {
    background: var(--accent-tint);
    border-color: var(--accent-line);
}

.thread__pad-mark {
    color: var(--accent);
}

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

/* The closing act: what a thread that has gone quiet settled on, and the two ways to converge
   (consolidate this thread's own message into something new, or into a task that exists). */

.thread__proposal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 8px;
}

.thread__proposal-head {
    margin: 0;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.thread__proposal-source {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.thread__proposal-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.thread__proposal-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.thread__proposal-pick {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
}

.thread__proposal-tick {
    margin: 0;
    cursor: pointer;
}

.thread__proposal-note {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.task-form__pending {
    color: var(--muted);
    font-size: 11px;
}

.thread__proposal-kind {
    color: var(--muted);
}

.thread__proposal-title {
    color: var(--text);
}

.thread__proposal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The agent's proposals are a list the reader chooses from, so the card's primary act is the one
that makes the ticked ones; consolidating the whole thread into something new is the quieter
sibling beside it. */
.thread__proposal-make {
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__proposal-make:hover:not(:disabled) {
    background: var(--accent-hover);
}

.thread__proposal-make:disabled {
    opacity: 0.55;
    cursor: default;
}

.thread__proposal-new {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    background: var(--raised);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__proposal-new:hover {
    background: var(--hover);
}

.thread__proposal-add {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    background: var(--raised);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__proposal-add:hover {
    background: var(--hover);
}

.thread__proposal-leave {
    border: none;
    background: none;
    padding: 4px 2px;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__proposal-leave:hover {
    color: var(--text-strong);
}

.message-row + .message-row {
    margin-top: 8px;
}

.day-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.day-divider::before,
.day-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.message {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 9px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.message:hover {
    border-color: var(--border-strong);
}

.message__select {
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 0;
    cursor: pointer;
    transition: opacity 90ms ease-in;
}

.message--groupable:hover .message__select,
.message--selected .message__select,
.message__select:focus-visible {
    opacity: 1;
}

.message--groupable .avatar {
    transition: opacity 90ms ease-in;
}

.message--groupable:hover .avatar,
.message--selected .avatar {
    opacity: 0;
}

.message__select-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--canvas);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    pointer-events: none;
}

.message--groupable:hover .message__select-box {
    border-color: var(--accent);
}

.message__select--on .message__select-box {
    background: var(--accent);
    border-color: var(--accent);
}

.message__select-glyph {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--on-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.message__select--on .message__select-glyph {
    opacity: 1;
}

.message__select:focus-visible .message__select-box {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
}

.message--selected {
    background: var(--accent-tint);
    border-color: var(--accent-line);
}

.message--selected:hover {
    background: var(--accent-tint);
    border-color: var(--accent-line);
}

/* A card ends in a foot: the way to reply on the left, the reactions on the right, so both sit on
   the card's own bottom edge rather than floating beneath it (ADR 0202). */
.card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-left: auto;
}

.message__fold {
    display: flex;
    margin: 4px 0 0;
}

.message__main {
    flex: 1;
    min-width: 0;
}

.moved-notice {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.moved-notice:hover {
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.moved-notice__glyph {
    flex: none;
    color: var(--accent);
}

.moved-notice__text {
  flex: none;
  color: var(--muted);
}

.message__unsupported {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.message__working {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.message__thoughts {
    margin: 4px 0 0;
}

.message__thoughts-toggle {
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.message__thoughts-toggle:hover {
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.message__thoughts-caret {
    margin-right: 5px;
}

.message__thoughts-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 0 2px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    max-height: 240px;
    overflow-y: auto;
}

.message__thought {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.message__thought-agent {
    color: var(--text);
    font-weight: 600;
}

.moved-notice__task {
    overflow: hidden;
    color: var(--text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message__meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

/* A message's menu sits at the far end of the line that names it, the way a task's sits at the end
   of its head (ADR 0203). */
.message__meta .menu-wrap {
    margin-left: auto;
}

/* The author's name is where a reader wonders who somebody is, so it is the click that
   opens their profile. A button rather than a span with a handler, so it is reachable
   with the keyboard and says what it does; stripped back to the text it was. A size
   above the rail's rows (13px/400) and in the strong ink: this is content, not the way
   to it. */
.message__author {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-strong);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.message__author:hover {
    text-decoration: underline;
}

.message__bot {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    vertical-align: -1px;
}

.message__time {
    color: var(--muted);
    font-size: 12px;
}

.message__edited {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

.message__text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}



.message__action {
    padding: 1px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.message__action:hover {
    background: var(--raised);
    border-color: var(--border);
    color: var(--text-strong);
}


.thread {
    /* Inside the card, directly under the foot: the top margin is the only one it needs,
       because the card's own padding closes the bottom. */
    margin: 6px 0 0;
}

.thread__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 4px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.thread__toggle:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.thread__toggle--new {
    color: var(--accent);
}

.thread__caret {
    font-size: 10px;
    line-height: 1;
}

.thread__badge {
    padding: 1px 7px;
    background: var(--accent);
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
}


.thread__label {
    white-space: nowrap;
}

.thread__replies {
    display: flex;
    flex-direction: column;
}


/* A reply is a line of the message above it, not a card inside a card: no indent, no rail,
   no avatar and no bracket, with the byline running into the reply's own first line so a
   two-word answer is one line rather than a stack (CHA3-18). What groups a thread is
   spacing - 10px between replies, the larger gap back to the next top-level message - and
   the card's own boundary. */
.thread__reply {
    margin-top: 10px;
}

.thread__line {
    display: block;
}

.thread__byline {
    display: inline;
    color: var(--muted);
    font-size: 13px;
}

.thread__byline .message__author,
.thread__byline .message__author-button {
    font-weight: 600;
}

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

.thread__sep {
    margin: 0 4px;
    color: var(--border-strong);
}

.thread__edited {
    margin-left: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* The body flows after the byline: the first paragraph is inline, the rest break as they
   always did, so one line of reply reads as one line. The editable wrapper is a block by
   default, which is what would otherwise push the text onto the next line. */
.thread__body,
.thread__body .message__text,
.thread__body .editable,
.thread__body .md,
.thread__body .md > .md-p:first-child {
    display: inline;
}

/* A reply's own acts - the reactions and the door to answer *it* - are read on pointing at
   it: the sheet's flat replies carry nothing but their line, and the thread's own door is
   the one that must never hide (CHA3-18, ONB-3). */
/* A reply carries nothing but its line until it is pointed at. It is `display: none` rather
   than `opacity: 0` on purpose: an invisible box still takes its height, so a reply dragged a
   footer's margin and a row of controls behind every line - which turned the thread's 10px
   rhythm into a page of gaps. */
.thread__reply .card__foot {
    display: none;
}

.thread__reply:hover .card__foot,
.thread__reply:focus-within .card__foot {
    display: flex;
}

.thread__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.thread__attachment {
    max-width: 100%;
    padding: 1px 8px;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The thread's way in: three plain words on the card's foot, never a pill, a chevron or a
   hover reveal - hover-only is how a thread became undiscoverable (CHA3-18, ONB-3). */
.thread__words {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.thread__word {
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.thread__word:hover {
    color: var(--text-strong);
}

.thread__word--count {
    color: var(--accent);
    font-weight: 600;
}

.thread__word--new {
    color: var(--accent);
}

.thread__replies {
    display: flex;
    flex-direction: column;
}

.reply-box {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 760px;
    margin: 6px 0 4px 8px;
    box-shadow: var(--shadow-sm), var(--edge-light);
}

.reply-box .composer__field {
    padding: 3px 3px 3px 11px;
}

.reply-box .composer__input {
    max-height: 120px;
    padding: 5px 0;
    font-size: 13px;
}

.reply-box .composer__send {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.reply-box__cancel {
    padding: 4px 9px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.reply-box__cancel:hover {
    background: var(--raised);
    color: var(--text-strong);
}


/* The card's three tiers (CHA3-17): what it is at the top - the kind's mark, the kind's
   own word, the key and the status, with whose it is and the acts pushed to the right
   edge - then the title, then one line of facts, then the tags and the description. */
.task-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.task-card__top .task-card__type-name {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.task-card__top .task-key {
    color: var(--muted);
}

.task-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-card__top .task-card__assignee {
    margin-left: auto;
}

.task-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    color: var(--muted);
    font-size: 12.5px;
}

.task-card__sep {
    color: var(--border-strong);
}

.task-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm), var(--edge-light);
}

.task-card--stale {
    opacity: 0.6;
}

.task-card--stale:hover,
.task-card--stale:focus-within {
    opacity: 1;
}

/* The kind a consolidated card is: the kind's mark and the reader's own word for it, so a
   card says what it is without a colour to remember (CHA-77). They lead the top row. */
.task-card__type-glyph {
    color: var(--muted);
    font-size: 12px;
}

.task-card__type-name {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.task-card__face {
    flex: 0 0 auto;
}

.task-card__title {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.editable {
    display: block;
    margin: 0 -4px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: text;
}

.editable:hover {
    background: var(--hover);
}

.editable--on,
.editable--on:hover {
    width: 100%;
    background: var(--sunken);
    border-color: var(--accent);
    color: var(--text-strong);
    font: inherit;
    outline: none;
}

textarea.editable--on {
    min-height: 3.5em;
    resize: vertical;
}

.editable--empty {
    color: var(--muted);
    font-weight: 400;
}

.editable > .md > :first-child {
    margin-top: 0;
}

.task-card__description {
    margin: 0;
    color: var(--text);
    font-size: 14px;
}


.task-card__assignee {
    padding: 1px 7px;
    background: var(--raised);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}


.task-card__watching {
    padding: 1px 7px;
    background: var(--raised);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}


.task-card__origin {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

/* The one label a kind with no workflow is named by: on a search result. */
.search__state {
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    white-space: nowrap;
}


.task-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.task-card__links-label {
    color: var(--muted);
    font-size: 12px;
}


.task-key {
    padding: 2px 7px;
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


.task-card__activity {
    color: var(--muted);
    font-size: 12px;
}

/* What an ADR decided, drawn under its description: who is accountable for the
   decision and the prose behind it, which only a knowledge kind with fields of its
   own carries (TAS2-12). */
.task-card__adr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
}

.task-card__adr-field,
.task-card__adr-people {
    margin: 0;
}

.task-card__adr-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-card__adr-value {
    margin: 0;
    font-size: 13px;
}

.task-card__adr-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.task-card__adr-people {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.task-card__adr-label {
    color: var(--muted);
    font-size: 12px;
}

.task-card__actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}

.task-icon {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

/* The summary and the facts a task carries are read for, not hovered for: they stand
   on the card (CHA-79). The rest of the cluster - the jump to where a task was posted -
   keeps the reveal the icons' earlier decision gave them. */
.task-icon--shown {
    opacity: 1;
}

.task-card:hover .task-icon,
.task-card:focus-within .task-icon {
    opacity: 1;
}

.task-icon:hover {
    background: var(--hover);
    border-color: var(--faint);
    color: var(--text-strong);
}

.task-icon:disabled {
    cursor: default;
    opacity: 0.6;
}

.task-icon:disabled:hover {
    background: transparent;
    border-color: transparent;
}

.task-icon .spinner {
    margin-right: 0;
}

.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--text-strong);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -1px;
}

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

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }
}


.insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 13px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-line);
    border-radius: 8px;
}

.insights__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.insights__title {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.insights__as-of {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.insights__refresh {
    padding: 2px 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.insights__refresh:hover {
    border-color: var(--border);
    color: var(--text-strong);
}

.insights__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.insights__label {
    flex: 0 0 96px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.insights__value {
    color: var(--text);
    font-size: 13px;
}

.insights__statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.insights__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 7px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}

.insights__status--todo {
    border-color: var(--st-todo);
    color: var(--st-todo);
}

.insights__status--backlog {
    border-color: var(--st-backlog);
    color: var(--st-backlog);
}

.insights__status--in-progress {
    border-color: var(--st-progress);
    color: var(--st-progress);
}

.insights__status--done {
    border-color: var(--st-done);
    color: var(--st-done);
}

.insights__status--discarded {
    border-color: var(--st-discarded);
    color: var(--st-discarded);
}

.insights__estimate {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.insights__quantiles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.insights__quantile {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.insights__share {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.insights__day {
    color: var(--text);
    font-size: 12px;
}

.insights__note {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.insights__error {
    padding: 8px 10px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}


.task-card__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 13px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.summary__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.summary__title {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.summary__provenance {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.summary__hide {
    padding: 2px 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.summary__hide:hover {
    border-color: var(--border);
    color: var(--text-strong);
}

.summary__truncated {
    color: var(--st-progress);
    font-size: 12px;
}

.summary__body {
    color: var(--text);
    font-size: 14px;
}


.standup__section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.standup__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.standup__body {
    color: var(--text);
    font-size: 14px;
}


.summary__suggestions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.summary__suggestions-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.summary__suggestion {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.summary__suggestion-key {
    color: var(--text-strong);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
    font-weight: 600;
}

.summary__suggestion-note {
    color: var(--text);
    font-size: 12px;
}

.summary__suggestion-reason {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.summary__suggestion-apply {
    padding: 2px 9px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.summary__suggestion-apply:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.summary__suggestions-hint {
    color: var(--muted);
    font-size: 12px;
}


.summary__error {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
}

.summary__error-message {
    color: var(--text);
    font-size: 13px;
}

.summary__error-hint {
    color: var(--muted);
    font-size: 12px;
}



.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
}

.filter-chip:hover {
    background: var(--hover);
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.filter-chip:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.filter-chip--on {
    background: var(--raised);
    border-color: var(--border-strong);
    color: var(--text-strong);
    box-shadow: var(--edge-light);
}


.filter-chip--on.filter-chip--todo {
    border-color: var(--st-todo);
    color: var(--st-todo);
}

.filter-chip--on.filter-chip--backlog {
    border-color: var(--st-backlog);
    color: var(--st-backlog);
}

.filter-chip--on.filter-chip--in-progress {
    border-color: var(--st-progress);
    color: var(--st-progress);
}

.filter-chip--on.filter-chip--done {
    border-color: var(--st-done);
    color: var(--st-done);
}

.filter-chip--on.filter-chip--discarded {
    border-color: var(--st-discarded);
    color: var(--st-discarded);
}














.link-wrap {
    position: relative;
    display: inline-flex;
}

.dep-chip {
    padding: 2px 9px;
    background: transparent;
    border: 1px solid currentcolor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.dep-chip--requires {
    color: var(--dep-requires);
}

.dep-chip--blocks {
    color: var(--dep-blocks);
}

.dep-chip--duplicates {
    color: var(--dep-duplicates);
}

.dep-chip--child-of {
    color: var(--dep-child-of);
}

.dep-chip--supersedes {
    color: var(--dep-supersedes);
}

.dep-chip--on {
    background: var(--hover);
}

.ref-chip {
    padding: 2px 9px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.ref-chip:hover,
.ref-chip--on {
    background: var(--hover);
    color: var(--text-strong);
}

/* The **smart chip** (CHA-68, INT-5): a key in a message's words that names a consolidated
   unit the window holds. It stands in the reader's own flow, so it is drawn the way words
   are - small, on the line, a tint and a radius and no border at all - and lifts under the
   pointer the way the ref chip beside it does. It names the unit with its kind's mark, its
   key and its state, and nothing else: the title is what it says under the pointer. */
.chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    margin: 0 1px;
    padding: 1px 8px;
    background: var(--faint);
    border-radius: 6px;
    color: var(--text-strong);
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
}

.chip:hover {
    background: var(--hover);
}

.chip:focus-visible,
.status-chip:focus-visible,
.ref-chip:focus-visible {
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

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

.chip__name {
    color: var(--text-strong);
    font-weight: 600;
}

.chip__key {
    color: var(--muted);
    font-size: 11px;
}

/* What a smart chip opens: the unit it named, read-only, and the one way out - to the
   channel the unit lives in. It wears the shared settings overlay's scrim and place, so
   two modals are never stacked differently. */
.chip-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 18px;
    background: var(--scrim);
    overflow-y: auto;
    /* The surface holds the focus itself, so Escape reaches it wherever the reader's
       pointer had left it (components/modal.rs): that is no reason to draw a ring round
       the whole page, which is why the lightbox's own focus draws none either. */
    outline: none;
}

.chip-modal__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(92vw, 640px);
    max-height: 80vh;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    overflow-y: auto;
}

.chip-modal__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-modal__kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

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

.chip-modal__error {
    color: var(--danger);
}

.chip-modal__key {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.chip-modal__close {
    margin-left: auto;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.chip-modal__close:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.chip-modal__title {
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
}

.chip-modal__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chip-modal__prose,
.chip-modal__field {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
}

.chip-modal__label {
    margin-right: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.chip-modal__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.link-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.link-menu__heading {
    padding: 5px 8px 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.link-menu__item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.link-menu__item:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.link-menu__item--requires {
    color: var(--dep-requires);
}

.link-menu__item--blocks {
    color: var(--dep-blocks);
}

.link-menu__item--duplicates {
    color: var(--dep-duplicates);
}

.link-menu__item--child-of {
    color: var(--dep-child-of);
}

.link-menu__item--supersedes {
    color: var(--dep-supersedes);
}

.link-menu__item--quiet {
    color: var(--muted);
}



.menu-wrap {
    position: relative;
    display: inline-flex;
}

.menu__open {
    padding: 0 6px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.menu__open:hover,
.menu__open--on {
    background: var(--hover);
    color: var(--text-strong);
}

.menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.menu__heading {
    padding: 5px 8px 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.menu__item {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.menu__item--danger {
    color: var(--danger);
}

.menu__item--danger:hover {
    color: var(--danger);
}

.menu__note {
    display: block;
    max-width: 17rem;
    padding: 0 8px 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.menu__buttons {
    display: flex;
    gap: 6px;
    padding: 2px 4px 4px;
}

.menu__panel {
    width: 20rem;
    max-width: 72vw;
}

.assignee {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 4px 4px;
}

.assignee__field {
    width: 220px;
    padding: 6px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.assignee__field:focus {
    border-color: var(--accent-line);
    outline: none;
}

.assignee__field::placeholder {
    color: var(--muted);
}

.assignee__menu {
    display: flex;
    flex-direction: column;
}

.assignee__option {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.assignee__option:hover,
.assignee__option--on {
    background: var(--hover);
    color: var(--text-strong);
}

.assignee__mine {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-strong);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.assignee__mine:hover {
    background: var(--hover);
}

.assignee__missed {
    padding: 0 2px;
    color: var(--muted);
    font-size: 12px;
}

.assignee__note {
    padding: 0 2px;
    color: var(--muted);
    font-size: 12px;
    white-space: normal;
    max-width: 220px;
}









.message-row--highlight {
    animation: pulse 1.6s ease-out 2;
    border-radius: 8px;
}

@keyframes pulse {
    0% {
        background: var(--accent-tint);
    }

    100% {
        background: transparent;
    }
}



.event {
    display: flex;
    gap: 10px;
    max-width: 780px;
    margin: 5px 0;
    padding: 9px 12px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: 8px;
}

.event--good {
    border-left-color: var(--st-done);
}

.event--bad {
    border-left-color: var(--danger);
}

.event--neutral {
    border-left-color: var(--accent);
}


.event__mark {
    display: grid;
    flex: 0 0 26px;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--raised);
    border-radius: 6px;
    color: var(--text);
}

.event__logo {
    width: 16px;
    height: 16px;
}

.event__body {
    flex: 1;
    min-width: 0;
}

.event__head {
    display: flex;
    gap: 7px;
    align-items: baseline;
}

.event__provider {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.event__kind {
    color: var(--muted);
    font-size: 12px;
}

.event__status {
    padding: 1px 7px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.event__status--good {
    color: var(--st-done);
}

.event__status--bad {
    background: var(--danger-tint);
    color: var(--danger);
}

.event__status--neutral {
    background: var(--raised);
    color: var(--muted);
}

.event__time {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.event__link {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.event__link:hover {
    text-decoration: underline;
}


.event__line {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event__meta {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
}


.event__title {
    margin-top: 3px;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.event__description {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}


.event__verdict {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 650;
}

.event__verdict--good {
    color: var(--st-done);
}

.event__verdict--bad {
    color: var(--danger);
}

.event__verdict--neutral {
    color: var(--text);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.status-chip:hover {
    background: var(--hover);
    border-color: var(--faint);
}

.status-chip--todo {
    color: var(--st-todo);
}

.status-chip--backlog {
    color: var(--st-backlog);
}

.status-chip--in-progress {
    color: var(--st-progress);
}

.status-chip--done {
    color: var(--st-done);
}

.status-chip--discarded {
    color: var(--st-discarded);
    text-decoration: line-through;
}

/* A status a kind carries **without** a workflow - an ADR's review, a persona's
   maturity (TAS2-12). The words are the kind's own; the colours are the palette's:
   waiting wears `todo`, settled wears `done`, turned down wears `danger` and
   retired wears `discarded`. */
.status-chip--proposed,
.status-chip--draft {
    color: var(--st-todo);
}

.status-chip--accepted,
.status-chip--validated {
    color: var(--st-done);
}

.status-chip--rejected {
    color: var(--danger);
}

.status-chip--deprecated,
.status-chip--archived {
    color: var(--st-discarded);
}

.status-chip--superseded {
    color: var(--st-discarded);
    text-decoration: line-through;
}

/* Each kind's own lifecycle, in the palette's tones (TAS2-12 follow-up): waiting and
   planned wear `todo`, anything under way wears `progress`, reached and confirmed wear
   `done`, turned down wears `danger` and given up wears `discarded`. */
.status-chip--active,
.status-chip--testing,
.status-chip--running {
    color: var(--st-progress);
}

.status-chip--achieved,
.status-chip--confirmed {
    color: var(--st-done);
}

.status-chip--refuted {
    color: var(--danger);
}

.status-chip--abandoned,
.status-chip--stale,
.status-chip--aborted {
    color: var(--st-discarded);
}

.status-chip--planned {
    color: var(--st-todo);
}

.chip--todo {
    color: var(--st-todo);
}

.chip--backlog {
    color: var(--st-backlog);
}

.chip--in-progress {
    color: var(--st-progress);
}

.chip--done {
    color: var(--st-done);
}

.chip--discarded {
    color: var(--st-discarded);
    text-decoration: line-through;
}


.task-card__status {
    position: relative;
    display: inline-flex;
}

.status-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.status-menu__item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.status-menu__item:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.status-menu__item--current {
    font-weight: 600;
}

.status-menu__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-menu__dot--todo {
    background: var(--st-todo);
}

.status-menu__dot--backlog {
    background: var(--st-backlog);
}

.status-menu__dot--in-progress {
    background: var(--st-progress);
}

.status-menu__dot--done {
    background: var(--st-done);
}

.status-menu__dot--discarded {
    background: var(--st-discarded);
}

/* A kind's own lifecycle, the same tones as its chips: a hypothesis and an experiment
   offer their own statuses in the control's menu (TAS2-12 follow-up). */
.status-menu__dot--active,
.status-menu__dot--testing,
.status-menu__dot--running {
    background: var(--st-progress);
}

.status-menu__dot--achieved,
.status-menu__dot--confirmed {
    background: var(--st-done);
}

.status-menu__dot--refuted {
    background: var(--danger);
}

.status-menu__dot--abandoned,
.status-menu__dot--stale,
.status-menu__dot--aborted {
    background: var(--st-discarded);
}

.status-menu__dot--planned,
.status-menu__dot--draft {
    background: var(--st-todo);
}

.status-menu__dot--validated {
    background: var(--st-done);
}



.dashboard {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 18px 240px;
}


.dashboard__filters {
    display: flex;
    flex-direction: column;
    margin: 0 0 4px;
    padding: 6px 12px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.pill-input__label {
    flex-shrink: 0;
    width: var(--filter-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.dashboard__all {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.dashboard__all:hover {
    background: var(--hover);
    border-color: var(--border);
    color: var(--text-strong);
}

.dashboard__all:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.dashboard__note {
    color: var(--muted);
    font-size: 12px;
}

.dashboard__range {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 1px 4px 1px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--edge-light);
}

.dashboard__range:focus-within {
    border-color: var(--accent-line);
}

.filters__field-body > .select {
    flex: 0 0 auto;
    width: 150px;
}

.filters__field-body > .select .select__button {
    padding: 5px 9px;
    font-size: 12px;
}

.dashboard__date {
    padding: 3px 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 12px;
    outline: none;
}

.dashboard__clear {
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.dashboard__clear:hover {
    color: var(--text-strong);
}

.filters__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 30px;
}

.filters__chevron {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.filters__chevron:hover {
    background: var(--hover);
    border-color: var(--border);
    color: var(--text-strong);
}

.filters__chevron:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.filters__request {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 4px 2px 0;
}

.filters__clauses {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.filters__found {
    color: var(--muted);
    font-size: 12px;
}

/* The questions worth one click, before the bar's own acts (ADR 0231): a strip of pills
   that wraps, so a long question never pushes the way to keep it off the row. */
.filters__presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

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

.filters__preset {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.filters__preset:hover {
    background: var(--hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.filters__preset:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.filters__preset--on {
    background: var(--raised);
    border-color: var(--border-strong);
    color: var(--text-strong);
    box-shadow: var(--edge-light);
}

.filters__segment {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
    padding: 2px;
    background: var(--sunken);
    border-radius: 999px;
}

.filters__segment-label {
    padding: 0 6px 0 8px;
    color: var(--muted);
    font-size: 11px;
}

.filters__segment-item {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.filters__segment-item:hover {
    color: var(--text-strong);
}

.filters__segment-item--on {
    background: var(--raised);
    border-color: var(--border);
    color: var(--text-strong);
}

.filters__segment-item:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.filters__rows {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Every field of the bar is one row of the same two columns: its label in the fixed column
   (ADR 0047) and its answers in the second, so every answer in the card starts at the same x.
   A field is `display: contents` - a name for the pair - so its label and its answers are the
   grid's own children and line up with every other field's. */
.filters__fields {
    display: grid;
    grid-template-columns: var(--filter-label) minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
}

.filters__field {
    display: contents;
}

.filters__field-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.filters__field-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.dashboard__reset {
    padding: 4px 12px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dashboard__reset:hover {
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.dashboard__reset:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

/* The way to keep what the bar is asking (ADR 0231): the same pill the presets wear, so
   the strip's own acts read as one row, and the accent's tint only when it is pressed. */
.filters__save {
    flex-shrink: 0;
    padding: 5px 12px;
    background: var(--raised);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--edge-light);
}

.filters__save:hover {
    color: var(--text-strong);
}

.filters__save:disabled {
    opacity: 0.55;
    cursor: default;
}

.filters__save:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.dashboard__save-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px;
    background: var(--sunken);
    border: 1px solid var(--faint);
    border-radius: 8px;
}

.dashboard__save-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 9px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
}

.dashboard__save-name::placeholder {
    color: var(--muted);
}

.dashboard__save-name:focus {
    border-color: var(--accent);
    outline: none;
}

.dashboard__save-error {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}

/* The reader's way to forget the query they are working on: held at the form's far end so it is
   not pressed on the way to writing it, and inked quiet until it is wanted (ADR 0232). */
.dashboard__forget {
    margin-left: auto;
    color: var(--muted);
}

.dashboard__forget:hover {
    color: var(--danger);
}

.dashboard__more {
    padding: 10px 0 0;
}

/* A list the API has not answered yet is mocked by cards of the shape that is coming, so nothing
   jumps when the real ones arrive. Two of the palette's own greys and a breath rather than a
   sweeping gradient, because this stylesheet is flat and every colour is a token. */
.dashboard__reading {
    display: flex;
    flex-direction: column;
}

.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.skeleton-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skeleton {
    display: block;
    background: var(--faint);
    border-radius: 6px;
    animation: skeleton-pulse 1.6s ease-in-out infinite;
}

.skeleton--face {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.skeleton--name {
    width: 120px;
    height: 12px;
}

.skeleton--title {
    width: 60%;
    height: 16px;
}

.skeleton--line {
    width: 100%;
    height: 12px;
}

.skeleton--line.skeleton--short {
    width: 70%;
}

/* The same mockup on a board: a *small* card, wearing the geometry of the card the column will
   hold, so the three in a column read as a board rather than as a list of long rows. */
.skeleton-card--board {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.skeleton-card--board .skeleton--title {
    width: 88%;
    height: 12px;
}

.skeleton--key {
    width: 40px;
    height: 10px;
}

.skeleton--assignee {
    width: 64px;
    height: 10px;
}

.skeleton--count {
    width: 18px;
    height: 10px;
}

@keyframes skeleton-pulse {
    0%,
    100% {
        background: var(--faint);
    }

    50% {
        background: var(--raised);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

.plan {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 28px 56px;
    --plan-label: 240px;
}

.plan__figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
}

.plan__figures-head {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.plan__ins {
    padding: 12px 14px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.plan__ins--empty {
    background: transparent;
    border-style: dashed;
}

.plan__ins-title {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.plan__ins-note {
    padding-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.plan__ins-caption {
    padding-top: 6px;
    color: var(--text);
    font-size: 11px;
}

.plan__ins-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
}

.plan__ins-label {
    flex-shrink: 0;
    width: 140px;
    color: var(--text);
    font-size: 12px;
}

.plan__ins-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 10px;
    background: var(--faint);
    border-radius: 3px;
}

.plan__ins-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    min-width: 2px;
    background: var(--muted);
    border-radius: 3px;
}

.plan__ins-bar--todo {
    background: var(--st-todo);
}

.plan__ins-bar--backlog {
    background: var(--st-backlog);
}

.plan__ins-bar--in-progress {
    background: var(--st-progress);
}

.plan__ins-bar--done {
    background: var(--st-done);
}

.plan__ins-bar--discarded {
    background: var(--st-discarded);
}

.plan__ins-bar--work {
    background: var(--accent-tint);
    border: 1px solid var(--accent);
}

.plan__ins-bar--unknown {
    background: var(--faint);
    border: 1px dashed var(--muted);
}

.plan__ins-value {
    flex-shrink: 0;
    min-width: 90px;
    color: var(--text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.plan__ins-row--empty .plan__ins-label,
.plan__ins-row--empty .plan__ins-value {
    color: var(--muted);
}

.plan__head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 0;
}

.plan__totals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
}

.plan__ring {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
}

.plan__ring-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 9px;
    margin: -4.5px 0 0 -2px;
    background: var(--border-strong);
    border-radius: 2px;
}

.plan__ring-tick--done {
    background: var(--st-done);
}

.plan__ring-share {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transform: translate(-50%, -50%);
}

.plan__totals-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.plan__stats {
    display: flex;
    gap: 8px;
}

.plan__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.plan__stat-value {
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.plan__stat-label {
    color: var(--muted);
    font-size: 11px;
}

.plan__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.plan__coverage,
.plan__generated,
.plan__simulation {
    color: var(--muted);
    font-size: 12px;
}

.plan__summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.plan__estimate {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    padding: 4px 0 2px;
}

.plan__range {
    position: relative;
    flex: none;
    width: 180px;
    height: 10px;
    background: var(--faint);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.plan__range-likely {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--st-done);
    border-radius: 999px;
}

.plan__range-slip {
    position: absolute;
    top: 0;
    bottom: 0;
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
}

.plan__range-mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 0;
    border-left: 2px solid var(--text-strong);
    transform: translateX(-50%);
}

.plan__range-mark--slip {
    border-left: 1px dashed var(--border-strong);
}

.plan__range-mark--commit {
    top: -5px;
    bottom: -5px;
    border-left: 2px solid var(--accent);
}

.plan__estimate-badge {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.plan__estimate-note {
    color: var(--muted);
    font-size: 12px;
}

.plan__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: flex-start;
    padding: 12px 2px 2px;
    color: var(--muted);
    font-size: 11px;
}

.plan__legend-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan__legend-head {
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.plan__legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}

.plan__legend-item {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.plan__legend-swatch {
    width: 12px;
    height: 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.plan__legend-swatch--past {
    background: var(--st-progress);
}

.plan__legend-swatch--unknown {
    background: var(--faint);
    border-style: dashed;
    border-color: var(--muted);
}

.plan__legend-swatch--likely {
    background: var(--accent-tint);
    border-style: dashed;
    border-color: var(--accent);
}

.plan__legend-swatch--maybe {
    background: var(--faint);
    border-style: dashed;
    border-color: var(--border-strong);
}

.plan__legend-swatch--commit {
    width: 2px;
    background: var(--accent);
    border: 0;
}

.plan__legend-swatch--link {
    height: 0;
    border: 0;
    border-top: 1px dashed var(--muted);
}

.plan__chart {
    position: relative;
    margin-top: 12px;
    padding: 0 16px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.plan__axis {
    position: relative;
    height: 26px;
    margin-left: var(--plan-label);
    border-bottom: 1px solid var(--border);
}

.plan__tick {
    position: absolute;
    top: 7px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.plan__now-label {
    position: absolute;
    top: 7px;
    z-index: 1;
    padding: 0 3px;
    background: var(--surface);
    border-radius: 3px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateX(-50%);
}

.plan__body {
    position: relative;
}

.plan__grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--plan-label);
    z-index: 0;
    background: var(--faint);
}

.plan__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--plan-label);
    z-index: 2;
    pointer-events: none;
}

.plan__grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--border);
}

.plan__now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--accent);
}

.plan__link-h {
    position: absolute;
    height: 0;
    border-top: 1px dashed var(--muted);
}

.plan__link-v {
    position: absolute;
    width: 0;
    border-left: 1px dashed var(--muted);
}

.plan__rows {
    position: relative;
    z-index: 1;
}

.plan__row {
    display: flex;
    align-items: center;
    height: 56px;
}

.plan__rows > .plan__row + .plan__row {
    border-top: 1px solid var(--border);
}

/* Hovering lights the WHOLE row - the label column and the timeline alike - so one row can
   be followed across the chart. The label is not lifted out of it: the unit itself is what
   says the whole title, and that is the row's label opening it. */
.plan__row:hover {
    background: var(--hover);
}

.plan__row--stale {
    opacity: 0.6;
}

.plan__row--stale:hover {
    opacity: 1;
}

.plan__label {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    align-items: baseline;
    width: var(--plan-label);
    padding: 0 10px 0 0;
    overflow: hidden;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.plan__label:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: -2px;
}

.plan__position {
    flex-shrink: 0;
    min-width: 16px;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.plan__key {
    flex-shrink: 0;
    color: var(--muted);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 10px;
}

.plan__title-cell {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.25;
}

.plan__track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.plan__bar {
    position: absolute;
    top: 50%;
    height: 20px;
    min-width: 3px;
    border-radius: 4px;
    transform: translateY(-50%);
}

.plan__bar--todo {
    background: var(--st-todo);
}

.plan__bar--backlog {
    background: var(--st-backlog);
}

.plan__bar--in-progress {
    background: var(--st-progress);
}

.plan__bar--done {
    background: var(--st-done);
}

.plan__bar--discarded {
    background: var(--st-discarded);
}

.plan__bar--unknown {
    background: var(--faint);
    border: 1px dashed var(--muted);
}

.plan__forecast {
    position: absolute;
    top: 50%;
    height: 20px;
    min-width: 3px;
    background: var(--accent-tint);
    border: 1px dashed var(--accent);
    border-radius: 4px;
    transform: translateY(-50%);
}

.plan__forecast--maybe {
    min-width: 2px;
    background: var(--faint);
    border-color: var(--border-strong);
    border-left: 0;
    border-radius: 0 3px 3px 0;
}

.plan__forecast-commit {
    position: absolute;
    top: 50%;
    width: 0;
    height: 26px;
    border-left: 1px solid var(--accent);
    transform: translateY(-50%);
}

.plan__marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--muted);
    border: 1px solid var(--surface);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.plan__marker--commit {
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.plan__marker--pr {
    background: var(--accent-tint);
    border-color: var(--accent);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.plan__marker--checks {
    background: var(--muted);
    border-radius: 50%;
}

.plan__marker--comment,
.plan__marker--other {
    background: var(--surface);
    border-color: var(--muted);
}

.plan__marker--other {
    opacity: 0.6;
}

.plan__marker.plan__marker--good {
    background: var(--st-done);
}

.plan__marker.plan__marker--bad {
    background: var(--danger);
}

.plan__milestones-omitted {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 11px;
}

.plan__legend-swatch--marker-commit {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
}

.plan__legend-swatch--marker-pr {
    background: var(--accent-tint);
    border-color: var(--accent);
    border-radius: 2px;
    transform: rotate(45deg);
}

.plan__legend-swatch--marker-checks {
    background: var(--st-done);
    border-radius: 50%;
}

.plan__legend-swatch--marker-comment {
    background: var(--surface);
    border-color: var(--muted);
    border-radius: 50%;
}

.channel-list--activity {
    flex: 0 1 auto;
    padding-top: 6px;
    padding-bottom: 0;
}

.channel--activity .channel__hash {
    font-size: 12px;
}

.channel-list--dashboard {
    flex: 0 1 auto;
    padding-top: 0;
    padding-bottom: 0;
}

.channel--dashboard .channel__hash {
    font-size: 12px;
}



.board {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 12px;
}

.board__column {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    gap: 8px;
    padding: 8px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.board__column--landing {
    border-color: var(--accent-line);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.board__column-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px;
}

.board__column-title {
    font-size: 12px;
    font-weight: 600;
}

.board__column--todo .board__column-title {
    color: var(--st-todo);
}

.board__column--backlog .board__column-title {
    color: var(--st-backlog);
}

.board__column--in-progress .board__column-title {
    color: var(--st-progress);
}

.board__column--done .board__column-title {
    color: var(--st-done);
}

.board__column--discarded .board__column-title {
    color: var(--st-discarded);
}

.board__column-count {
    color: var(--muted);
    font-size: 12px;
}

.board__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.board__card:hover {
    border-color: var(--border-strong);
}

.board__card:focus-visible {
    border-color: var(--accent-line);
    outline: 2px solid var(--accent-tint);
    outline-offset: 1px;
}

.board__card--dragging {
    opacity: 0.45;
}

.board__ghost {
    position: fixed;
    z-index: 60;
    width: 240px;
    box-sizing: border-box;
    border-color: var(--accent-line);
    box-shadow: var(--shadow-lg);
    opacity: 1;
    cursor: grabbing;
    pointer-events: none;
}

.board__card--stale {
    opacity: 0.6;
}

.board__card--stale:hover,
.board__card--stale:focus-visible {
    opacity: 1;
}

.board__card-title {
    color: var(--text-strong);
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.board__card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.board__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--muted);
}

.board__card-meta .task-card__assignee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    text-overflow: ellipsis;
}

.board__deadline {
    flex: none;
    padding: 1px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.board__deadline--late {
    background: var(--danger-tint);
    border-color: var(--danger-line);
    color: var(--danger);
}

/* Near is a tint on the day itself, never a banner: the chip keeps its size and gains
   the accent, so "soon" reads at a glance without becoming a second headline (TAS2-18). */
.board__deadline--near {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--text-strong);
}

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

.board__thumb {
    display: block;
    width: 68px;
    height: 56px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    object-fit: cover;
}

.board__more {
    color: var(--muted);
    font-size: 12px;
}

.board__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
}

.board__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.board__tag {
    padding: 1px 6px;
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
}



.pill-input {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 260px;
}

.pill-input__field-wrap {
    position: relative;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    padding: 2px 6px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--edge-light);
}

.pill-input__field-wrap:focus-within {
    border-color: var(--accent-line);
}

.pill-input__field {
    flex: 1;
    min-width: 90px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    outline: none;
}

.pill {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    padding: 1px 4px 1px 8px;
    background: var(--faint);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-strong);
    font-size: 12px;
}

.pill__remove {
    padding: 0 2px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pill__remove:hover {
    color: var(--text-strong);
}

.pill-input__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 100%;
    max-height: 220px;
    margin-top: 4px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.pill-input__option {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pill-input__option:hover,
.pill-input__option--on {
    background: var(--hover);
    color: var(--text-strong);
}

.pill-input__empty {
    color: var(--muted);
    font-size: 12px;
}


.md > :first-child {
    margin-top: 0;
}

.md > :last-child {
    margin-bottom: 0;
}

.md-p {
    margin: 6px 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.46;
    overflow-wrap: anywhere;
}

.md-h {
    margin: 10px 0 4px;
    color: var(--text-strong);
    line-height: 1.3;
}

.md-h1 {
    font-size: 18px;
    font-weight: 650;
}

.md-h2 {
    font-size: 16px;
    font-weight: 650;
}

.md-h3 {
    font-size: 15px;
    font-weight: 600;
}

.md-h4,
.md-h5,
.md-h6 {
    font-size: 14px;
    font-weight: 600;
}

.md-code {
    padding: 2px 6px;
    background: var(--raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12.5px;
}

.md-code-wrap {
    margin: 8px 0 0;
    background: var(--raised);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
}

.md-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 16px;
    border-bottom: 1px solid var(--border);
}

.md-lang {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.md-copy {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.md-copy:hover {
    background: var(--hover);
    border-color: var(--faint);
    color: var(--text-strong);
}

.md-pre {
    margin: 0;
    padding: 13px 16px;
    overflow-x: auto;
}

.md-code-block {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12.5px;
    line-height: 1.5;
}

.md-line {
    min-height: 1.5em;
    white-space: pre;
}

.md-diff-wrap {
    overflow-x: auto;
}

.md-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    min-width: 100%;
    padding: 6px 0;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12.5px;
    line-height: 1.5;
}

.md-diff__file,
.md-diff__note {
    grid-column: 1 / -1;
    padding: 3px 16px;
    min-width: 0;
    color: var(--muted);
    white-space: pre;
}

.md-diff__file {
    border-bottom: 1px solid var(--border);
}

.md-diff__note {
    background: var(--faint);
}

.md-diff__row {
    display: contents;
}

.md-diff__cell {
    display: grid;
    grid-template-columns: 48px 16px minmax(0, 1fr);
    align-items: baseline;
    min-width: 0;
    border-top: 1px solid var(--faint);
}

.md-diff__cell--removed {
    background: var(--diff-removed-tint);
}

.md-diff__cell--added {
    background: var(--diff-added-tint);
}

.md-diff__cell--empty {
    background: var(--faint);
}

.md-diff__num {
    padding: 0 8px;
    border-right: 1px solid var(--border);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: pre;
}

.md-diff__sign {
    color: var(--muted);
    text-align: center;
}

.md-diff__cell--removed .md-diff__num,
.md-diff__cell--removed .md-diff__sign {
    color: var(--diff-removed);
}

.md-diff__cell--added .md-diff__num,
.md-diff__cell--added .md-diff__sign {
    color: var(--diff-added);
}

.md-diff__text {
    padding-right: 12px;
    white-space: pre;
}

.md-quote {
    margin: 8px 0 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--border);
    color: var(--muted);
}

.md-quote .md-p {
    color: inherit;
}

.md-list {
    margin: 6px 0 0;
    padding-left: 22px;
    color: var(--text);
}

.md-list--ordered {
    list-style: decimal;
}

.md-li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.md-li > .md-p {
    margin: 0;
}

.md-rule {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.md-table {
    margin: 8px 0 0;
    border-collapse: collapse;
    font-size: 13px;
}

.md-th,
.md-td {
    padding: 4px 10px;
    border: 1px solid var(--border);
}

.md-th {
    background: var(--raised);
    color: var(--text-strong);
    font-weight: 600;
    text-align: left;
}

.md-td {
    color: var(--text);
    overflow-wrap: anywhere;
}

.md-link {
    color: var(--accent);
    text-decoration: none;
}

.md-link:hover {
    text-decoration: underline;
}

.md-mention {
    border-radius: 4px;
    background: var(--faint);
    padding: 0 3px;
}

.md-mention--me {
    background: var(--accent-tint);
    color: var(--accent);
}

.md-channel {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.md-channel:hover {
    text-decoration: underline;
}

.md-channel--locked {
    color: var(--muted);
    cursor: default;
}


.reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 6px 0 0;
}


.reaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    background: var(--faint);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background 90ms ease,
        border-color 90ms ease,
        color 90ms ease;
}

.reaction:hover {
    background: var(--faint);
    color: var(--text);
}

.reaction__emoji {
    font-size: 13px;
    font-weight: 400;
}

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

.reaction--mine {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--text-strong);
}

.reaction--mine:hover {
    background: var(--accent-tint);
    color: var(--text-strong);
}

.reaction-add {
    flex-shrink: 0;
}

.reaction-add .emoji-button__glyph {
    font-size: 14px;
}

/* The way a message is turned into work, offered in the card's foot beside the reactions: an icon
   with a word, not a bare glyph, because a reaction is reversible and this takes the message out of
   the channel. It waits for the card to be hovered, like the row's other actions (ONB-3). */
.consolidate-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    height: 22px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 90ms ease-in, background 120ms, border-color 120ms, color 120ms;
}

.message:hover .consolidate-add,
.message:focus-within .consolidate-add {
    opacity: 1;
}

.consolidate-add:hover {
    background: var(--raised);
    border-color: var(--border);
    color: var(--text-strong);
}

/* A guest may not open a task of their own, so the one verb they keep - add to one that already
   exists - is drawn as their primary action, the same rule the bar and the picker follow
   (ADR 0128). */
.consolidate-add--primary {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--accent);
}


.emoji-button {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.emoji-button__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 3px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    transition:
        background 90ms ease,
        color 90ms ease;
}

.emoji-button__trigger:hover,
.emoji-button__trigger--open {
    background: var(--faint);
    color: var(--text-strong);
}

.emoji-button__glyph {
    font-size: 13px;
    line-height: 1;
}

.emoji-button__image {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    object-fit: contain;
}

.emoji-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: var(--scrim);
}

.emoji-button__panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
}

.emoji-picker {
    display: flex;
    flex-direction: column;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.emoji-picker__search-row {
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--border);
}

.emoji-picker__search {
    width: 100%;
    padding: 5px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
}

.emoji-picker__search:focus {
    border-color: var(--border-strong);
    outline: none;
}

.emoji-picker__heading {
    padding: 8px 10px 2px;
    color: var(--muted);
    font-size: 11px;
}

.emoji-picker__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px 6px 6px;
}

.emoji-picker__categories {
    display: flex;
    gap: 2px;
    padding: 2px 6px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.emoji-picker__category {
    width: 28px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__category:hover {
    background: var(--faint);
}

.emoji-picker__category--active {
    border-bottom-color: var(--accent);
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    max-height: 240px;
    padding: 6px;
    overflow-y: auto;
}

.emoji-picker__item {
    width: 34px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__item:hover {
    background: var(--raised);
}


.mention-ask {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    margin: 0 12px 8px;
    background: var(--raised);
    border: 1px solid var(--accent-line);
    border-radius: 8px;
}

.mention-ask__note {
    flex: 1;
    color: var(--text-strong);
    font-size: 13px;
}

.mention-ask__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mention-ask__discard {
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.mention-ask__discard:hover:not(:disabled) {
    color: var(--text-strong);
}

.mention-ask__discard:disabled {
    cursor: default;
}

.composer {
    display: flex;
    padding: 16px 24px 22px;
}


.composer__field {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    padding: 8px 8px 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm), var(--edge-light);
}

.composer__field:focus-within {
    border-color: var(--accent);
}

.composer__input {
    flex: 1;
    min-width: 0;
    height: auto;
    max-height: 200px;
    field-sizing: content;
    padding: 9px 0;
    background: transparent;
    border: 0;
    outline: none;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
}

.composer__input::placeholder {
    color: var(--muted);
}

.composer__send {
    flex: 0 0 auto;
    margin-bottom: 1px;
    width: 32px;
    height: 32px;
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    color: var(--on-accent);
    font-size: 16px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
}

.composer__send:not(:disabled) {
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--accent-tint);
}

.composer__send:hover {
    background: var(--accent-hover);
}

.composer__send:disabled {
    background: var(--raised);
    color: var(--muted);
    cursor: default;
}


.empty-state {
    padding: 26px 0;
    color: var(--muted);
}

.empty-state h2 {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 17px;
}

.empty-state p {
    margin: 0;
    font-size: 13px;
}


.invitation {
    max-width: 540px;
    margin: 26px auto 0;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md), var(--edge-light);
}

.invitation__sigil {
    color: var(--muted);
    font-size: 15px;
}

.invitation__title {
    margin: 4px 0 8px;
    color: var(--text-strong);
    font-size: 18px;
}

.invitation__text {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.invitation__facts {
    display: grid;
    gap: 6px;
    margin: 0 0 18px;
}

.invitation__fact {
    display: flex;
    gap: 12px;
}

.invitation__fact dt {
    flex-shrink: 0;
    width: 100px;
    color: var(--muted);
    font-size: 13px;
}

.invitation__fact dd {
    margin: 0;
    color: var(--text);
    font-size: 13px;
}

.invitation__actions {
    display: flex;
    gap: 8px;
}

.invitation__hint {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 460px;
    padding: 10px 12px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}

.toast__message {
    flex: 1;
    color: var(--text);
    font-size: 13px;
}

.toast__close {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.toast__close:hover {
    background: var(--faint);
}


.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 18px 18px;
    background: var(--scrim);
    overflow-y: auto;
    /* The surface holds the focus itself, so Escape reaches it wherever the reader's
       pointer had left it (components/modal.rs) - and no ring is drawn round the page. */
    outline: none;
}

.settings {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 940px;
    /* A dialog with a long body - a consolidated unit's own text, a persona's whole
       definition - must never grow past the window: it is capped to what the overlay
       leaves after its own 60px top and 18px bottom padding, and it scrolls inside
       itself. `overflow: hidden` here used to cut the foot of such a dialog off, which
       took its Close with it and left the scrim behind it unclickable. */
    max-height: calc(100dvh - 78px);
    padding: 22px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.settings--narrow {
    max-width: 780px;
}

.settings--channel {
    max-width: 820px;
}

/* The channel setup wizard (ONB-2): the empty channel's own walkthrough, drawn in the chat
   body rather than over it, so it stands where the empty state would. */
.channel-setup {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 18px 18px;
    overflow-y: auto;
}

.settings--channel-setup {
    max-width: 540px;
}

.channel-setup__stepper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.channel-setup__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

.channel-setup__dot--on {
    background: var(--accent);
}

.channel-setup__dot--done {
    background: var(--border);
}

/* The joiner's walkthrough (SAL-2): the channels a person arriving in a workspace that already
   has work is offered, and the one real message it ends on. Every colour is a palette token. */
.joining__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.joining__row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.joining__row--picked {
    border-color: var(--accent);
    background: var(--raised);
}

.joining__tick {
    grid-row: span 2;
    align-self: center;
    accent-color: var(--accent);
}

.joining__name {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.joining__line {
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.joining__mine {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding-top: 4px;
}

.joining__note {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.joining__mention {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
}

.joining__sample {
    margin: 0;
    padding: 8px 10px;
    border-left: 2px solid var(--border);
    background: var(--surface);
}

.joining__words {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.settings--profile {
    max-width: 460px;
}


.profile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

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

.profile__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile__name {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.profile__alias {
    color: var(--muted);
    font-size: 12px;
}

.profile__about {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    white-space: pre-wrap;
}

.profile__fact {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.profile__fact-label {
    flex: 0 0 110px;
    color: var(--muted);
}

.profile__fact-value {
    color: var(--text);
}

.profile__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 2px;
}

.settings__body {
    display: flex;
    flex: 1;
    gap: 18px;
    min-height: 0;
}

.settings__tabs {
    display: flex;
    flex-direction: column;
    flex: 0 0 200px;
    gap: 3px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
}

/* The sub-tabs of one pane - the Artificial Intelligence page's Trigger / Tasks /
   ADRs: the rail's own tabs, laid along the top of what they switch rather than
   down the page, because they choose inside a category rather than between
   categories. */
.settings__subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.settings__tab {
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
    text-align: left;
    cursor: pointer;
}

.settings__tab:hover {
    background: var(--raised);
    color: var(--text);
}

.settings__tab--active {
  background: var(--raised);
  color: var(--text-strong);
  font-weight: 650;
}

/* The two acts on a channel's rail that are not settings - getting out of it, and (for a
   moderator) being rid of it - sit at the bottom, apart from the categories above, and in the
   danger colour, so the rail itself says which of its items is destructive (CHA-84). */
.settings__rail-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.settings__rail-question {
  padding: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}

.settings__panes {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.settings__header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.settings__titles {
    min-width: 0;
}

.settings__title {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 600;
}

.settings__subtitle {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.settings__close {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.settings__close:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.settings__error {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
}

.settings__error-text {
    flex: 1;
    color: var(--text);
    font-size: 13px;
}

.settings__notice {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.settings__notice-text {
    flex: 1;
    color: var(--text);
    font-size: 13px;
}

.settings__members {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.settings__member {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-top: 1px solid var(--border);
}

.settings__members .settings__member:first-child {
    border-top: 0;
}

/* The settings dialog's cards: one per model and one per agent, a head row that IS the toggle,
   and a dashed placeholder where a new one goes. A card sits ON the dialog's panel, so it is a
   raised surface with a hairline and no shadow - nothing gains a shadow or a scrim, which is
   what would make it read as a second dialog. The family is shared: a model's card and an
   agent's are the same drawing (ADR 0196). */
.settings__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.settings__card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--raised);
}

.settings__card-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
}

/* The control the head row carries: a model's default radio, an agent's on/off switch. */
.settings__card-mark {
    flex: none;
    margin: 0;
    accent-color: var(--accent);
}

.settings__card-toggle {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.settings__card-name {
    color: var(--text-strong);
    font-size: 13px;
}

.settings__card-meta {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.settings__card-badge {
    flex: none;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--faint);
    color: var(--text-strong);
    font-size: 11px;
}

.settings__card-caret {
    flex: none;
    color: var(--muted);
    font-size: 11px;
}

.settings__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 10px;
    border-top: 1px solid var(--border);
}

.settings__card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* The question a destructive action asks in place, before it will do it. */
.settings__card-question {
    color: var(--text);
    font-size: 12px;
}

/* The only way in: a placeholder that says what clicking it will open, in the same slot the
   first card would take. Dashed, because nothing is there yet. */
.settings__card-add-item {
    list-style: none;
}

.settings__card-add {
    width: 100%;
    padding: 9px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.settings__card-add:hover:not(:disabled) {
    border-color: var(--accent-line);
    color: var(--text);
}

.settings__card-add:disabled {
    cursor: default;
    opacity: 0.55;
}

.settings__model-note {
    color: var(--muted);
    font-size: 12px;
}

.settings__member-name {
    flex: 1;
    color: var(--text);
    font-size: 13px;
}

.settings__member-role {
    color: var(--muted);
    font-size: 12px;
}

.settings__member-when {
    color: var(--muted);
    font-size: 12px;
}

.settings__member-who {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.settings__member-email {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings__member .settings__member-role {
    flex: 0 0 auto;
    min-width: 130px;
}

.settings__member-role-name {
    color: var(--text);
    font-size: 13px;
}

.settings__member-role--provider {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 340px;
    text-align: right;
}

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

.settings__member-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.settings__member-asking {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 340px;
    text-align: right;
}

.settings__member-question {
    color: var(--text);
    font-size: 12px;
}

.settings__links {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.settings__link {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
}

.settings__links .settings__link:first-child {
    border-top: 0;
}

.settings__link-url {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
    word-break: break-all;
}

.settings__link-role {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.settings__link-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.settings__loading,
.settings__hint,
.settings__help {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.settings__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings__section .secret__form-actions,
.settings__section .hook__form-actions {
    padding-top: 4px;
}

.settings__section-title {
    margin: 0;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 600;
}

/* This channel's own page is a few named groups, each opened by its heading: a hairline above
   every heading but the pane's first is what tells one group from the next, rather than one
   flat sheet of label and value rows (CHA-84). */
.settings__section--channel > .settings__section-title:not(:first-child) {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.settings__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings__label {
    color: var(--muted);
    font-size: 12px;
}

.settings__facts {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 12px;
    align-items: baseline;
}

.settings__fact {
    display: contents;
}

.settings__fact-value {
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.settings__choices {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.settings__choice {
    display: flex;
    gap: 7px;
    align-items: baseline;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.settings__choice input,
.settings__choice span {
    flex-shrink: 0;
}

.settings__choice-note {
    color: var(--muted);
    font-size: 12px;
}

.working-day {
    display: flex;
    gap: 8px;
    align-items: center;
}

.working-day .select {
    flex: 0 0 118px;
}

.working-day .settings__input {
    flex: 0 0 84px;
}

.working-day .button {
    flex-shrink: 0;
}

.settings__input,
.settings__textarea {
    width: 100%;
    padding: 7px 9px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--edge-light);
}

.settings__textarea {
    font-family: inherit;
    resize: vertical;
}

.settings__slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.settings__slider-input {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

.settings__slider-ticks {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
}

.settings__slider-tick {
    flex: 1;
    text-align: center;
}

.settings__slider-tick.is-active {
    color: var(--text);
    font-weight: 600;
}

.settings__row .select,
.hook .select,
.field .select {
    width: 100%;
}

.secret,
.hook {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.secret__head,
.hook__head {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.secret__name,
.hook__url {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.hook__scope {
    padding: 1px 8px;
    background: var(--faint);
    border-radius: 10px;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}

.secret__hint,
.hook__hint {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.secret__events,
.hook__events,
.secret__checklist,
.hook__checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.secret__event-chip,
.hook__event-chip {
    padding: 1px 7px;
    background: var(--faint);
    border-radius: 10px;
    color: var(--text);
    font-size: 12px;
}

.secret__actions,
.hook__actions,
.secret__form-actions,
.hook__form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.secret__check,
.hook__check {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.secret__form,
.hook__form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.secret__form--new,
.hook__form--new {
    margin-top: 4px;
}

.secret__form-title,
.hook__form-title {
    margin: 0;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 650;
}

.secret__key {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    padding: 11px 12px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.secret__key-title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 650;
}

.secret__key-value {
    width: 100%;
    padding: 7px 9px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
    user-select: all;
}

.secret__key-note {
    margin: 0;
    color: var(--text);
    font-size: 12px;
}

.config__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
}

.config__tab {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.config__tab:hover {
    background: var(--raised);
    color: var(--text);
}

.config__tab--active {
    background: var(--raised);
    border-color: var(--accent);
    color: var(--text-strong);
    font-weight: 650;
}

.config {
    margin-top: 8px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.config__head {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
}

.config__file {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.config__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
}

.config__copy:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.config__icon {
    width: 14px;
    height: 14px;
}

.config__code {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
}


.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    flex: 1;
    gap: 10px;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
}

.theme-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--faint);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.theme-card:hover {
    background: var(--raised);
}

.theme-card--active {
    background: var(--raised);
    border-color: var(--accent-line);
}

.theme-card__preview {
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

.theme-card__meta {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.theme-card__name {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 650;
}

.theme-card__mark {
    margin-left: auto;
    color: var(--accent);
    font-size: 12px;
}

.theme-card__note {
    color: var(--muted);
    font-size: 12px;
}

.theme-mock {
    display: block;
    width: 100%;
    height: auto;
}

.theme-mock__page {
    fill: var(--canvas);
}

.theme-mock__rail,
.theme-mock__header {
    fill: var(--surface);
}

.theme-mock__hairline {
    fill: var(--border);
}

.theme-mock__title {
    fill: var(--text-strong);
}

.theme-mock__line {
    fill: var(--muted);
}

.theme-mock__line--active {
    fill: var(--accent);
}

.theme-mock__bubble {
    fill: var(--raised);
}

.theme-mock__bubble--mine {
    fill: var(--accent);
}

.theme-mock__ink {
    fill: var(--text);
}

.theme-mock__ink--on-accent {
    fill: var(--on-accent);
}

.theme-mock__field {
    fill: var(--raised);
    stroke: var(--border);
    stroke-width: 1;
}

.theme-mock__send {
    fill: var(--accent);
}


.task-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    margin: 0 12px 8px;
    background: var(--raised);
    border: 1px solid var(--accent-line);
    border-radius: 8px;
}

.task-bar__count {
    flex: 1;
    color: var(--text-strong);
    font-size: 13px;
}

.split-button {
    position: relative;
    display: inline-flex;
}

.split-button__main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.split-button__caret {
    padding: 6px 8px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.split-button__caret--on {
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.kind-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.kind-menu__heading {
    padding: 5px 8px 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.kind-menu__item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.kind-menu__item:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.kind-menu__glyph {
    display: inline-block;
    width: 18px;
    color: var(--muted);
}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin: 0 12px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    /* The editor a consolidated unit is written in, and the one place a long persona body
       is typed: it scrolls inside the composer rather than pushing the composer past the
       window, which used to carry its own Cancel and submit off the bottom of the screen. */
    max-height: min(70dvh, 720px);
    overflow-y: auto;
}

/* The form draws a pill field in its own column, so the filter row's own stretch - a
   horizontal `flex: 1` that in a column would be the field's height - is taken back. */
.task-form .pill-input {
    flex: none;
    min-width: 0;
}

.task-form__description {
    resize: vertical;
}

/* A goal's metrics: one row per metric-against-target, so a reader adds one and takes
   one away without a form of its own (TAS2-12 follow-up). */
.metric-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.metric-row__input {
    flex: 1 1 0;
}

.metric-row__drop {
    padding: 2px 9px;
}


.task-form--consolidate {
    gap: 10px;
}

.consolidate__head {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.consolidate__cancel {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.consolidate__cancel:hover {
    color: var(--text-strong);
}

.consolidate__list {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
}

.consolidate__row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.consolidate__row:hover {
    background: var(--hover);
}

.consolidate__row:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: -2px;
}

.consolidate__row:disabled {
    cursor: default;
    opacity: 0.6;
}

.consolidate__key {
    flex: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.consolidate__title {
    flex: 1;
    overflow: hidden;
    color: var(--text);
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consolidate__status {
    flex: none;
    color: var(--muted);
    font-size: 11.5px;
}

.task-form__hint {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.task-form__items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-form__item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--faint);
}

.task-form__item:first-child {
    border-top: 0;
}

.task-form__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-form__drop {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.task-form__drop:hover {
    color: var(--text-strong);
}

.task-form__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.task-form__error {
    padding: 9px 11px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 8px;
    font-size: 13px;
}

.task-card__context {
    width: 100%;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.task-card__context:hover {
    color: var(--text-strong);
}

.task-card__context-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--sunken);
    border-radius: 8px;
}

.task-card__context-note,
.task-card__context-error {
    margin: 0;
    font-size: 12px;
}

.task-card__context-note {
    color: var(--muted);
}

.task-card__context-error {
    color: var(--danger);
}

.context-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.context-line__main {
  flex: 1;
  min-width: 0;
}

.thread--context {
  margin: 2px 0 2px 4px;
}


@media (prefers-reduced-motion: no-preference) {
    .smart-form__option,
    .channel,
    .channel__join,
    .button,
    .icon-button,
    .menu__open,
    .menu__item,
    .assignee__option,
    .assignee__mine,
    .link-menu__item,
    .status-menu__item,
    .pill-input__option,
    .filter-chip,
    .filters__chevron,
    .filters__preset,
    .filters__segment-item,
    .summary__suggestion-apply,
    .sidebar__add,
    .composer__field,
    .settings__input,
    .settings__textarea,
    .pill-input__field-wrap,
    .dashboard__date,
    .new-channel__input,
    .sidebar__search,
    .auth__tab,
    .settings__tab,
    .task-card,
    .task-card__context,
    .task-icon,
    .editable,
    .pill__remove,
    .summary__hide,
    .dashboard__all,
    .filters__save,
    .select__button,
    .select__option {
        transition:
            background-color 120ms ease,
            border-color 120ms ease,
            color 120ms ease,
            box-shadow 120ms ease;
    }
}

/* What carries a raised edge is a token: the primary button takes the accent's tint as
   a lit top edge, because it is a thing you did. The row the reader is in no longer
   glows a hairline of its own - the tint and the weight say it is the one they are in. */
.button--primary {
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--accent-tint);
}

.task-card:hover {
    box-shadow: var(--shadow-md), var(--edge-light);
}

@media (prefers-reduced-motion: reduce) {
    .task-card:hover {
        box-shadow: var(--shadow-sm), var(--edge-light);
    }
}

.button:focus-visible,
.field__input:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
}

[data-compact="on"] .message .avatar,
[data-compact="on"] .context-line .avatar {
    display: none;
}

[data-compact="on"] .message {
    gap: 8px;
    padding: 2px 6px 2px 4px;
}

[data-compact="on"] .message--groupable {
    padding-left: 28px;
}

[data-compact="on"] .message-row + .message-row {
    margin-top: 2px;
}

[data-compact="on"] .chat__body {
    padding: 6px 12px 2px;
}

[data-compact="on"] .day-divider {
    margin: 8px 0 6px;
}

[data-compact="on"] .thread__reply {
    margin-top: 0;
}

.settings__toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.settings__toggle--off {
    cursor: not-allowed;
}

.settings__toggle--off .settings__toggle-name,
.settings__toggle--off .settings__toggle-note {
    color: var(--muted);
}

.settings__toggle input:disabled {
    cursor: not-allowed;
}

.settings__toggle input {
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.settings__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings__toggle-name {
    color: var(--text-strong);
    font-weight: 600;
}



.md-emoji {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
    object-fit: contain;
    border-radius: 3px;
}

.reaction__image {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    object-fit: contain;
    border-radius: 3px;
}

.md-emoji-text {
    font-size: 1.05em;
    line-height: 1;
}

.avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}


.emoji-picker__grid--custom {
    grid-template-columns: repeat(8, 1fr);
}

.emoji-picker__item--custom {
    padding: 4px;
}

.emoji-picker__image {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


.composer__emoji-suggestions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.composer__emoji-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.composer__emoji-suggestion:hover {
    background: var(--hover);
}

.composer__emoji-image {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.composer__emoji-glyph {
    width: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

.composer__emoji-name {
    font-size: 13px;
}

.composer__emoji-suggestion:first-child {
    color: var(--text-strong);
    background: var(--accent-tint);
}


.suggestions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.suggestions__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.suggestions__row:hover {
    background: var(--hover);
}

.suggestions__row:first-child {
    color: var(--text-strong);
    background: var(--accent-tint);
}

.suggestions__key {
    flex: none;
    min-width: 46px;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
}

.suggestions__key--channel {
    min-width: 0;
    color: var(--muted);
}

.suggestions__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suggestions__label {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.suggestions__note {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.suggestions__badge {
    flex: none;
    padding: 0 5px;
    color: var(--text-strong);
    font-size: 10px;
    background: var(--accent-tint);
    border-radius: 999px;
}

.suggestions .avatar {
    flex: none;
}


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

.settings__picture-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings__picture-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.settings__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings__logo-picture {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--faint);
    object-fit: contain;
}

.emoji-admin {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.emoji-admin__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.emoji-admin__image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.emoji-admin__facts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.emoji-admin__name {
    color: var(--text-strong);
    font-weight: 600;
}

.emoji-admin__size {
    color: var(--muted);
    font-size: 12px;
}

.emoji-admin__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


.task-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.task-card__tags > .pill-input {
    flex: 1 1 100%;
    min-width: 0;
}

.tag-admin {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.tag-admin__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.tag-admin__facts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.tag-admin__name {
    color: var(--text-strong);
    font-weight: 600;
}

.tag-admin__description {
    color: var(--muted);
    font-size: 12px;
}

.tag-admin__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}





.composer__staged {
    flex-basis: 100%;
    min-width: 0;
    margin-bottom: 6px;
}

.composer__hint {
    flex-basis: 100%;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
}

.composer__locked {
    flex-basis: 100%;
    margin-bottom: 6px;
    color: var(--danger);
    font-size: 12px;
}

.composer__field--drop {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.composer__attach {
    flex: 0 0 auto;
    margin-bottom: 1px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.composer__attach:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.composer__attach-input {
    display: none;
}

.attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The attachments a consolidation could carry, as something to pick from (TAS2-19): the
   attachment strip's own tile, plus one state - picked takes an accent hairline and a
   check badge in accent ink, never a fill; unpicked reads dimmed. */
.shared-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shared-strip__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.shared-strip__from {
    color: var(--muted);
    font-size: 12px;
}

.shared-strip__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shared-strip__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 4px 4px 4px 6px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    opacity: 0.55;
}

.shared-strip__tile:hover {
    opacity: 0.8;
}

.shared-strip__tile--on,
.shared-strip__tile--on:hover {
    border: 1.5px solid var(--accent-line);
    opacity: 1;
}

.shared-strip__thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
}

.shared-strip__thumb--waiting {
    background: var(--sunken);
    border: 1px solid var(--border);
}

.shared-strip__file {
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-strip__check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.shared-strip__all {
    align-self: center;
    padding: 2px 8px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.shared-strip__all:hover {
    color: var(--text-strong);
}

.shared-strip__count {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}




.attachment-strip__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 260px;
    padding: 4px 4px 4px 6px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.attachment-strip__thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
}

.attachment-strip__state {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}

.attachment-strip__state--failed {
    color: var(--danger);
}

.attachment-strip__state--broken {
    color: var(--muted);
}

.attachment-strip__why {
    flex-basis: 100%;
    min-width: 0;
    font-size: 11px;
    line-height: 1.4;
}

.attachment-strip__why--failed {
    color: var(--danger);
}

.attachment-strip__why--broken {
    color: var(--muted);
}

.attachment-strip__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-strip__size {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}

.attachment-strip__remove {
    flex: 0 0 auto;
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.attachment-strip__remove:hover {
    color: var(--text-strong);
}


.attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.attachments__carousel {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.attachments__picture {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: zoom-in;
}

.attachments__image {
    display: block;
    max-width: 320px;
    max-height: 200px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.attachments__image--waiting,
.lightbox__image--waiting,
.attachment-strip__thumb--waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
    background: var(--sunken);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.attachments__image--waiting {
    width: 160px;
    height: 110px;
}

.attachment-strip__thumb--waiting {
    width: 34px;
    height: 34px;
}

.attachments__files {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-file {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.attachment-file__ext {
    flex: 0 0 auto;
    padding: 2px 5px;
    background: var(--raised);
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.attachment-file__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-file__size {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}


.lightbox {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.lightbox__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
}

.lightbox__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lg), var(--edge-light);
}

.lightbox__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.lightbox__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox__count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.lightbox__close {
    flex: 0 0 auto;
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__close:hover {
    color: var(--text-strong);
}

.lightbox__image {
    display: block;
    margin: 8px;
    max-width: 86vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox__image--waiting {
    width: 320px;
    height: 200px;
}

.lightbox__step {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__step:hover {
    background: var(--raised);
    color: var(--text-strong);
}

.lightbox__step--back {
    left: 10px;
}

.lightbox__step--next {
    right: 10px;
}

.lightbox__step:focus-visible,
.lightbox__close:focus-visible,
.attachments__picture:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
}

.task-form__attach {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-form__attach-label {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--muted);
    font-size: 12px;
}



.quota {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quota__headline {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.quota__reassurance {
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}

.quota__panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.quota__panel-title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 650;
}

.quota__panel-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.quota__split {
    display: flex;
    height: 14px;
    margin-top: 2px;
    overflow: hidden;
    background: var(--faint);
    border-radius: 4px;
}

.quota__split-part {
    height: 100%;
    min-width: 2px;
}

.quota__split-part--images {
    background: var(--accent);
}

.quota__split-part--files {
    background: var(--accent-line);
}

.quota__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--muted);
    font-size: 12px;
}

.quota__legend-entry {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quota__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.quota__swatch--images {
    background: var(--accent);
}

.quota__swatch--files {
    background: var(--accent-line);
}

.quota__empty {
    color: var(--muted);
    font-size: 12px;
}

.quota__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.quota__label {
    flex: 0 0 130px;
    color: var(--text);
    font-size: 12px;
}

.quota__track {
    position: relative;
    flex: 1;
    min-width: 40px;
    height: 10px;
    background: var(--faint);
    border-radius: 3px;
}

.quota__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    min-width: 2px;
    background: var(--muted);
    border-radius: 3px;
}

.quota__bar--fine {
    background: var(--muted);
}

.quota__bar--nearly {
    background: var(--danger);
    opacity: 0.7;
}

.quota__bar--over {
    background: var(--danger);
}

.quota__bar--unlimited {
    background: var(--faint);
}

.quota__track-none {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}

.quota__reading {
    flex: 0 0 150px;
    color: var(--text);
    font-size: 12px;
    text-align: right;
}

.quota__verdict {
    flex: 0 0 80px;
    font-size: 11px;
    font-weight: 600;
}

.quota__verdict--nearly {
    color: var(--danger);
    opacity: 0.85;
}

.quota__verdict--over {
    color: var(--danger);
}

.quota__note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.quota__verdict--fine,
.quota__verdict--unlimited {
    color: var(--muted);
}


.activity {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* No side padding of its own: each part pads itself, so the filter row's hairline runs the
       full width of the pane the way the tracked drawing shows it (ACT-1). */
    padding: 0 0 60px;
}

/* The quick filters: one single-select chip row over the pages already loaded, with the span of
   days it is reading pushed right. The chips are the app's own, not a second vocabulary. */
.activity__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 8px;
    border-bottom: 1px solid var(--border);
}

.activity__range {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

/* A day of the timeline: pinned while its rows pass under it, so a reader always knows which day
   they are looking at. Opaque, because a translucent strip over rows is unreadable, with ONE
   hairline at its bottom - the chat's `.day-divider` draws two, and two here would box the day
   in. `--activity-day-top` is where it pins: below the "N new" pill when the pane is showing one,
   which is the ordering the tracked drawing asks for. */
.activity__day {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 8px 18px 6px;
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.activity__day-unread {
    position: absolute;
    right: 18px;
    font-weight: 400;
}

.activity__fresh {
    position: sticky;
    top: 0;
    align-self: center;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 14px;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.activity__fresh-dot {
    width: 7px;
    height: 7px;
    background: var(--on-accent);
    border-radius: 50%;
}

.activity__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 8px 18px 0;
    list-style: none;
    flex: none;
}

/* The pill is 28px tall (6px of padding either side of 13px text): while the pane is showing one,
   a day pins *under* it rather than over it, which is the ordering the tracked drawing asks for. */
.activity__list--fresh .activity__day {
    top: 28px;
}

.activity__row {
    margin: 0;
}

.activity__open {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

/* The timeline's spine: one hairline through the icon column, drawn by each row and reaching 2px
   past it so the gap between rows does not break it. It sits at 10px of row padding plus half the
   26px tile, and the tile's own background covers it where it passes behind. */
.activity__open::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 23px;
    width: 1px;
    background: var(--border);
}

/* What the divider counts, made visible per row: the reader's own act wears nothing. */
.activity__row--unread .activity__open {
    box-shadow: inset 2px 0 0 var(--accent-line);
}

.activity__open:hover {
    background: var(--hover);
}

.activity__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
}

.activity__glyph {
    width: 16px;
    height: 16px;
}

.activity__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.activity__head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.activity__who {
    color: var(--text-strong);
    font-weight: 600;
}

.activity__what {
    color: var(--muted);
    font-size: 13px;
}

.activity__when {
    flex: 0 0 64px;
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

/* Being caught up is a state, not an absence: it names the moment the reader last looked and
   offers the one way back to the history. */
.activity__caught-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 64px 18px;
    text-align: center;
}

.activity__caught-up-title {
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 600;
}

.activity__caught-up-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.activity__text {
    color: var(--text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.activity__more {
    display: flex;
    flex: none;
    justify-content: center;
    padding: 16px 0 0;
}

.activity__load {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.activity__load:hover {
    background: var(--hover);
}

.activity__loading {
    color: var(--muted);
    font-size: 13px;
}

.activity__empty {
    padding: 40px 18px;
    color: var(--muted);
    font-size: 13px;
}

.activity__error {
    padding: 12px 18px;
    color: var(--danger);
    font-size: 13px;
}

.search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 22px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.search__bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search__field {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    padding: 0 6px 0 12px;
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.search__field:focus-within {
    border-color: var(--accent);
}

.search__input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 14px;
}

.search__input:focus {
    outline: none;
}

.search__go {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
}

.search__go:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.search__close {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.search__close:hover {
    background: var(--hover);
}

.search__note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.search__error {
    margin: 0;
    color: var(--danger);
    font-size: 13px;
}

.search__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 45vh;
    overflow-y: auto;
}

.search__row {
    margin: 0;
}

.search__open {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.search__open:hover {
    background: var(--hover);
}

.search__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
}

.search__glyph {
    width: 16px;
    height: 16px;
}

.search__kind-glyph {
    font-size: 14px;
    line-height: 1;
}

.search__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.search__head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.search__kind {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.search__status {
    font-size: 11px;
}

.search__where {
    color: var(--muted);
    font-size: 13px;
}

.search__who {
    color: var(--text);
    font-size: 13px;
}

.search__snippet {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.search__key {
    margin-right: 6px;
    color: var(--accent);
    font-weight: 600;
}

.search__when {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.search__join {
    padding: 1px 6px;
    background: var(--accent);
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 11px;
}


.search__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* In the top bar the search is one control among the chrome, not a panel across the
   page: the field takes the room the chat column gives it - up to the bell, and no
   further - and its results drop out of the flow, so opening a search never pushes the
   conversation down. */
.topbar .search {
    position: relative;
    flex: 1;
    min-width: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.topbar .search__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.topbar__bell {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
}

.topbar__bell:hover {
    background: var(--hover);
    color: var(--text-strong);
}

.topbar__bell--active {
    color: var(--accent);
    border-color: var(--border);
}

.topbar__glyph {
    width: 18px;
    height: 18px;
    transform-origin: 50% 12%;
}

.topbar__bell--ringing .topbar__glyph {
    animation: bell-ring 2.4s ease-in-out infinite;
}

@keyframes bell-ring {
    0%,
    55%,
    100% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(12deg);
    }

    66% {
        transform: rotate(-10deg);
    }

    72% {
        transform: rotate(8deg);
    }

    78% {
        transform: rotate(-6deg);
    }

    84% {
        transform: rotate(3deg);
    }
}

.topbar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent);
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}


@media (max-width: 768px) {
    .app {
        display: flex;
        flex-direction: column;
    }

    /* The scratchpad is a pane of the stack here, not a column: it takes the conversation's place
       and its head carries the way back ("Back to the thread"), so no reader is stranded in it. */

    .chat__columns--padded .chat__thread {
        display: none;
    }

    .thread-pad {
        width: 100%;
        border-left: none;
    }

    .workspaces,
    .workspace,
    .workspace-rail,
    .app {
        height: 100dvh;
    }

    .sidebar,
    .chat {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .rail-resizer {
        display: none;
    }

    /* The columns are gone, so the zone the bar's own width reserved is too: the workspace's
       name goes with them (its gear stays - it is the only way to the workspace's settings
       now the sidebar's row is gone), and the channel's actions fold behind the bar's `⋯`
       rather than sitting beside the name on a handset. */
    .topbar {
        padding-left: 16px;
    }

    .topbar__brand {
        width: auto;
    }

    .topbar__brand-name {
        display: none;
    }

    /* The bar names the screen, and on a phone that screen is one pane at a time: while the
       channel LIST is the one the reader is looking at, the bar is the workspace's, exactly
       as it is over any pane that belongs to no channel. The rail read selects a channel
       underneath so the conversation is ready behind the list, which is why a zone would be
       drawn at all - and beside the field and the bell it has no room to spare (CHA-81). */
    .app:not(.app--mobile-chat) .topbar__channel,
    .app:not(.app--mobile-chat) .topbar__more,
    .app:not(.app--mobile-chat) .topbar__actions--open {
        display: none;
    }

    .topbar__more {
        display: flex;
    }

    .topbar__actions {
        display: none;
    }

    .topbar__actions--open {
        position: absolute;
        z-index: 30;
        top: calc(100% + 6px);
        right: 12px;
        display: flex;
        padding: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: var(--shadow-md);
    }

    .app:not(.app--mobile-chat) .chat,
    .app--mobile-chat .sidebar {
        display: none;
    }

    .workspaces:has(.app--mobile-chat) .workspace-rail {
        display: none;
    }

    .task-card {
        padding: 14px 16px;
    }

    .task-card__head {
        flex-wrap: wrap;
        row-gap: 8px;
        align-items: flex-start;
    }

    .task-card__title {
        flex: 1 1 60%;
    }

    .settings-overlay {
        padding: 12px;
        align-items: stretch;
    }

    .settings {
        max-width: none;
        padding: 16px;
    }

    .settings__body {
        flex-direction: column;
        gap: 12px;
    }

    .settings__tabs {
        flex: none;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding: 0 0 8px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .settings__tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* The filter bar is the same story as the task head above: its widths are a wide
       screen's - a 78px label column, two segments, a 150px period dropdown - and on a
       phone they add up to more than the card. The tools line ran 713px wide inside a
       352px card, and the two days of a range spilled past their column. So the card
       becomes a column: the strip is the presets on one line and the bar's own acts on
       the next, the sentence the bar answers with takes a line under both, every
       question's label sits above its answer rather than in a column beside it, and each
       control may shrink to the width it actually has. */
    .filters__tools {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .filters__request {
        flex: 1 1 100%;
        width: 100%;
    }

    /* One question per field: the label above its answers, both as wide as the card. The
       grid stops being a label column and a body column and becomes one column of stacked
       pairs, so on a phone every field reads alike. */
    .filters__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .pill-input {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .pill-input__label {
        width: auto;
    }

    /* A field keeps no 260px floor on a phone (which is wider than the card); the
       shortcut beside it stays a pill rather than stretching to the full width. */
    .pill-input {
        min-width: 0;
    }

    .dashboard__all {
        align-self: flex-start;
    }

    /* A range of two days may wrap and its days may shrink: the box is the row's own
       width, and a day a phone cannot show in full is still a day it can set. */
    .dashboard__range {
        flex-wrap: wrap;
        min-width: 0;
    }

    .dashboard__date {
        min-width: 0;
    }

    /* The period dropdown takes its own line rather than a fixed 150px. */
    .filters__field-body > .select {
        flex: 1 1 100%;
        width: auto;
        min-width: 0;
    }

    /* A phone has one row to spend on the bar, so the channel's zone may SHRINK rather than
       hold the width it reserves - a long name is cut with an ellipsis rather than pushing the
       field and the bell off the bar, which is what made the bar unusable. It may not GROW:
       the room left over is the field's, not the name's (CHA-81). */
    .topbar__channel {
        flex: 0 1 auto;
        min-width: 0;
    }

    .topbar__channel-name {
        min-width: 0;
        overflow: hidden;
    }

    .topbar__channel-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The channel's own facts line - the count, the day it was made, whether it is private -
       goes on a phone: beside the name, the fold and the field there is no room for it, and a
       line that cannot shrink does not vanish, it is drawn over the controls next to it, which
       is the bar reading as broken (CHA-81). Nothing is really lost: the whole line is still
       the meta's own `title`, and the sigil already says whether the channel is private. */
    .topbar__channel-meta {
        display: none;
    }

    /* The field is the one control the bar must keep usable on a phone, so it keeps a floor
       and the name gives way first: a box told only that it may shrink stops at its own
       padding, and is then drawn over the bell beside it - which is the bar with a hole in
       it (CHA-81). */
    .topbar__search {
        min-width: 64px;
    }

    /* A reply on a phone is the same flat line as on a desktop: there is no gutter to drop and
       no rail to hide, so a handset only loses the width the old indent took (CHA3-18). */
}

/* The plugins page is one master-detail: the plugins down the left, and the tools of
   the one that is open on the right. The list takes the third the reference gives it
   and the detail the rest, and the actions stay at the foot of the pane while the
   tools above them scroll - Save changes should never be what scrolling loses. */
.workbench {
    display: grid;
    grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

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

.workbench__add {
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.workbench__add:hover {
    color: var(--text-strong);
    border-color: var(--accent-line);
    background: var(--hover);
}

.workbench__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.workbench__row:hover {
    border-color: var(--border-strong);
    background: var(--raised);
}

.workbench__row--active {
    border-color: var(--accent-line);
    background: var(--accent-tint);
}

.workbench__row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.workbench__row-name {
    color: var(--text-strong);
    font-size: 12.5px;
    font-weight: 620;
    overflow-wrap: anywhere;
}

.workbench__row-note {
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* The row carries the kind's own mark at the size a list can afford rather than the
   size a catalog card can: the pane this sits in is a modal, not a page. */
.workbench__row .plugin-mark {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.workbench__row-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10.5px;
    white-space: nowrap;
}

.workbench__row-badge--on {
    color: var(--text-strong);
    border-color: var(--accent-line);
    background: var(--accent-tint);
}

.workbench__detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.workbench__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.workbench__title {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.workbench__note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.workbench__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 0 2px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.tool-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tool-row__name {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.tool-row__detail {
    color: var(--muted);
    font-size: 12px;
}

/* A switch rather than a ticked box, because the question each row asks is whether a
   tool is on, and the reference draws it as a track with a knob. */
.switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--sunken);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 140ms ease, background 140ms ease;
}

.switch:checked {
    background: var(--accent-tint);
    border-color: var(--accent-line);
}

.switch:checked::after {
    background: var(--accent);
    transform: translateX(14px);
}

.switch:disabled {
    opacity: 0.5;
    cursor: default;
}

.plugins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.plugin-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.plugin-card:hover {
    border-color: var(--border-strong);
    background: var(--raised);
}

.plugin-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.plugin-card__name {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 620;
}

.plugin-card__summary {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.plugin-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-tint);
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 700;
}

/* A logo is sized rather than left to the browser, and the tile it sits in is smaller in
   a workbench row (28px) than in a catalog card (32px). */
.plugin-mark__logo {
    width: 18px;
    height: 18px;
}

.workbench__row .plugin-mark__logo {
    width: 16px;
    height: 16px;
}

.plugin-mark--mcp {
    background: var(--faint);
}

.plugins__docs {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.plugins__docs:hover {
    text-decoration: underline;
}

.plugins__check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.plugins__webhook {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.plugins__webhook-url {
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
    word-break: break-all;
}

.plugins__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.plugins__tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.plugins__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.plugins__chosen-name {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 12px;
}

.plugins__tool {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.plugins__tool-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.msg-plugins {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 4px;
}

.msg-plugins__toggle {
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.msg-plugins__toggle:hover {
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.msg-plugins__names {
    color: var(--muted);
    font-size: 12px;
}

/* Smart forms: a message people fill in and then act on (crate::components::smart_form).
   A form is a **card of its own** inside the message column - the surface is what says
   "this is a thing rather than prose" - and every control in it is the design system's
   own: `.field__input` for a line, the app's dropdown for a choice, a row of ticks for a
   list, the primary button for the thing that sends it. A chart draws with the palette's
   series colours, which the component cycles (see `SERIES`). */
.smart-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--edge-light);
}

.smart-form__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smart-form__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
}

.smart-form__intro {
    font-size: 13px;
    color: var(--text);
}

.smart-form__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smart-form__text {
    font-size: 13px;
    color: var(--text);
}

/* What the reader may not touch says who may, at the control itself: a box that is simply
   dead reads as a form that is broken. */
.smart-form__lock {
    color: var(--muted);
    font-size: 11px;
}

.smart-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
}

.smart-form__required {
    color: var(--muted);
    font-size: 11px;
}

.smart-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.smart-form__choices {
    flex-wrap: wrap;
}

/* A poll: one option per line, the ticks on the left, and how many chose it behind. */
.smart-form__poll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
}

.smart-form__question {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.smart-form__tally {
    color: var(--muted);
    font-size: 11px;
}

.smart-form__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
}

.smart-form__option input {
    position: relative;
    z-index: 1;
}

.smart-form__option-label {
    position: relative;
    z-index: 1;
    flex: 1;
}

.smart-form__option-count {
    position: relative;
    z-index: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.smart-form__option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent-tint);
}

.smart-form__voters {
    color: var(--muted);
    font-size: 11px;
}

/* A chart is a reading rather than a control: nothing here is focusable. */
.smart-form__chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
}

.smart-form__bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smart-form__bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smart-form__bar-label {
    flex: 0 0 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
}

.smart-form__bar-track {
    flex: 1;
    height: 10px;
    border-radius: 6px;
    background: var(--sunken);
    overflow: hidden;
}

.smart-form__bar {
    height: 100%;
    border-radius: 6px;
}

.smart-form__bar-value {
    flex: 0 0 auto;
    color: var(--text-strong);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.smart-form__plot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smart-form__line {
    display: block;
    width: 100%;
    height: 64px;
}

.smart-form__line-shape {
    fill: none;
    stroke: var(--accent);
    /* The box is scaled, so the stroke has to be told not to scale with it. */
    vector-effect: non-scaling-stroke;
}

.smart-form__plot-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
}

.smart-form__pie-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.smart-form__pie {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
}

.smart-form__slice {
    stroke: var(--surface);
    stroke-width: 0.5;
}

.smart-form__legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smart-form__legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.smart-form__swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.smart-form__legend-label {
    flex: 1;
    color: var(--text);
}

.smart-form__legend-value {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.smart-form__caption,
.smart-form__empty,
.smart-form__unknown {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* A sent form is a record: one line per component, the label and what was answered. */
.smart-form__record {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
}

.smart-form__answer {
    color: var(--text-strong);
}

.smart-form__unanswered {
    color: var(--muted);
}

.smart-form__action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smart-form__what {
    color: var(--muted);
    font-size: 11px;
}

.smart-form__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.smart-form__foot--sent {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.smart-form__ask {
    margin: 0;
    white-space: pre-wrap;
    color: var(--text);
    font-size: 12px;
}

.smart-form__error {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
}

/* The ask a form sent: kept, and shut until it is wanted, the way a run's train of
   thought is (see ADR 0195). */
.smart-form__asked {
    color: var(--muted);
    font-size: 12px;
}

.smart-form__asked > summary {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Storage, Retention and Export (BIL-18)

   One lens over what a workspace keeps, drawn the way the defrag drafts draw it:
   three figures at the top, one bar per meter with the included allowance on the
   same bar, and under it the figures a reader can act on. Nothing here invents a
   colour - every rule asks the palette, and the age of a file is always one of
   the five ramp tokens above.
   --------------------------------------------------------------------------- */

.storage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.storage__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.storage__title {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 600;
}

.storage__subtitle {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.storage__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* One figure and the one line that says what it counts. The figure is the number a
   reader came for, so it is the only thing at headline weight. */
.storage__stat {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.storage__figure {
    margin: 0;
    color: var(--text-strong);
    font-size: 26px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.storage__figure--over {
    color: var(--danger);
}

.storage__caption {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.storage__card {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.storage__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.storage__card-title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.storage__card-note {
    color: var(--muted);
    font-size: 11px;
}

/* The dimension switcher and the chips that narrow what it counts. They sit on one
   row above the bar: the switcher says which dimension, the chips say which files. */
.lens {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.lens__switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.lens__option {
    padding: 5px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
}

.lens__option--on {
    background: var(--surface);
    color: var(--text-strong);
}

.lens__filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lens__chip {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
}

.lens__chip--on {
    background: var(--accent-tint);
    border-color: var(--accent-line);
    color: var(--text-strong);
}

/* The bar: one track, its segments in the order they are read, and the included
   allowance drawn as a boundary ON the same bar - composition and the free edge in
   one gesture, which two separate bars could not do. */
.stack {
    position: relative;
    display: flex;
    height: 34px;
    margin-top: 18px;
    overflow: hidden;
    background: var(--sunken);
    border-radius: 6px;
}

.stack__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    color: var(--on-accent);
    font-size: 11px;
    white-space: nowrap;
}

.stack__seg--a {
    background: var(--accent);
}

.stack__seg--b {
    background: var(--age-2);
}

.stack__seg--c {
    background: var(--age-3);
}

.stack__seg--d {
    background: var(--age-4);
}

.stack__seg--other {
    background: var(--age-pinned);
}

.stack__seg--over {
    background: var(--danger);
}

.stack__boundary {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text-strong);
}

.stack__boundary-label {
    position: absolute;
    top: -16px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.stack__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.stack__swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    background: var(--age-pinned);
    border-radius: 2px;
}

.stack__swatch--a {
    background: var(--accent);
}

.stack__swatch--b {
    background: var(--age-2);
}

.stack__swatch--c {
    background: var(--age-3);
}

.stack__swatch--d {
    background: var(--age-4);
}

/* A meter row: a fixed label, a 10px track, the reading hard right and one word
   saying whether it matters. The rows read down as a column, which is the whole
   point of fixing the label's width. */
.meter {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.meter__label {
    color: var(--text);
    font-size: 12px;
}

.meter__track {
    height: 10px;
    overflow: hidden;
    background: var(--sunken);
    border-radius: 999px;
}

.meter__fill {
    height: 100%;
    background: var(--text);
    border-radius: 999px;
}

.meter__fill--nearly,
.meter__fill--over {
    background: var(--danger);
}

.meter__reading {
    color: var(--text-strong);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.meter__verdict {
    min-width: 52px;
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.meter__verdict--nearly,
.meter__verdict--over {
    color: var(--danger);
}

/* The defrag grid: one square per file, its colour its age. A square selects, it
   never deletes - the deletion lives in the rule a selection leads to. */
.blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, 14px);
    gap: 3px;
}

.blocks__file {
    width: 14px;
    height: 14px;
    padding: 0;
    background: var(--age-1);
    border: 0;
    border-radius: 2px;
}

.blocks__file--1 {
    background: var(--age-1);
}

.blocks__file--2 {
    background: var(--age-2);
}

.blocks__file--3 {
    background: var(--age-3);
}

.blocks__file--4 {
    background: var(--age-4);
}

.blocks__file--pinned {
    background: var(--age-pinned);
}

.blocks__file--chosen {
    outline: 1px solid var(--text-strong);
    outline-offset: 1px;
}

.blocks__note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11px;
}

/* The legend: one swatch and its word per rung, in the order the grid reads them. The
   swatch is a small square so a reader matches a colour to its rung at a glance - and it
   carries the grid's own `blocks__file--N` class for its colour, so the key and the squares
   can never disagree. Without this rule the swatches had no size at all and the five words
   ran together. */
.blocks__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.blocks__legend-entry {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blocks__swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

/* A drawn figure row: the name at a fixed width, one bar against the same track,
   the figure hard right. Series here are rows, never a curve. */
.figure-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.figure-row__label {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.figure-row__track {
    height: 10px;
    overflow: hidden;
    background: var(--sunken);
    border-radius: 999px;
}

.figure-row__fill {
    height: 100%;
    background: var(--text-strong);
    border-radius: 999px;
}

.figure-row__value {
    color: var(--text-strong);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The foot a selection ends in: what is selected, and the two doors out of it. */
.selection {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.selection__what {
    color: var(--text);
    font-size: 12px;
}

.selection__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* A retention rule: one row, what it does, and what it would free. */
.rule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.rule-row + .rule-row {
    border-top: 1px solid var(--border);
}

.rule-row__state {
    min-width: 52px;
    color: var(--muted);
    font-size: 11px;
}

.rule-row__state--active {
    color: var(--age-2);
}

.rule-row__what {
    flex: 1;
    color: var(--text);
    font-size: 12px;
}

.rule-row__what b {
    color: var(--text-strong);
    font-weight: 600;
}

.rule-row__figures {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The composer: one labelled row per question, so a rule reads top to bottom as
   scope, then condition, then the chain, then what it would do. */
.rule-dialog__row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.rule-dialog__label {
    color: var(--muted);
    font-size: 12px;
}

.rule-dialog__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
}

.rule-dialog__chip {
    padding: 3px 8px;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-strong);
    font-size: 12px;
}

.rule-dialog__chip--add {
    background: transparent;
    border-style: dashed;
    color: var(--muted);
}

.rule-dialog__step {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: var(--raised);
    border-radius: 999px;
    color: var(--text-strong);
    font-size: 11px;
}

.rule-dialog__arrow {
    color: var(--muted);
}

.rule-dialog__note {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 11px;
}

/* The dry run: the estimate a rule is turned on by, never a promise. The accent
   edge is what makes it read as a quotation of what WOULD happen. */
.rule-dialog__dry {
    padding: 10px 12px;
    background: var(--raised);
    border-left: 2px solid var(--accent);
    border-radius: 6px;
}

.rule-dialog__dry-figure {
    color: var(--text-strong);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.rule-dialog__dry-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.rule-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.rule-dialog__foot-note {
    flex: 1;
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

/* A cap that has been reached: the one place the app says what has STOPPED and
   what has not. Reading and search are named in it, because a hard stop is the
   failure this whole feature exists to avoid. */
.cap-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 10px;
}

.cap-banner__what {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.cap-banner__line {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 12px;
}

.cap-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;
}

.cap-block {
    padding: 14px 16px;
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: 10px;
}

.cap-block__what {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.cap-block__checks {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 8px 0 0;
    padding: 0;
    color: var(--text);
    font-size: 12px;
    list-style: none;
}

/* A body that is a TOML document, drawn (ADM-22): a section is a tab, a key is a field, and a
   field whose value has left its default offers the way back. This is the card's form - the
   surface it is filled in on - so every field is its type's control. */
.body-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--sunken);
    border-radius: 8px;
}

.body-form__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.body-form__tab {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.body-form__tab--on {
    background: var(--surface);
    border-color: var(--accent-line);
    color: var(--text-strong);
    font-weight: 600;
}

.body-form__rows {
    display: grid;
    gap: 6px;
}

.body-form__row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 10px;
}

.body-form__row--plain {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
}

.body-form__label {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.body-form__value {
    color: var(--text);
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
}

.body-form__row--plain .body-form__value {
    text-align: left;
}

.body-form__input {
    width: 100%;
    padding: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
}

.body-form__check {
    justify-self: start;
}

.body-form__reset {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
}

/* The document a form is drawn from, edited as text: the panel's half of ADM-22. */
.task-form__definition {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    line-height: 1.45;
}




.funnel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--canvas);
}

.funnel__nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
}

.funnel__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-size: 16.5px;
  font-weight: 650;
  text-decoration: none;
}

.funnel__brand-mark {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--accent);
  transform: rotate(45deg);
}

.funnel__beta {
  margin-left: -4px;
  padding: 2px 7px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.funnel__nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.funnel__nav-link {
  color: var(--muted);
  font-size: 14.5px;
  text-decoration: none;
  transition: color 120ms ease;
}

.funnel__nav-link:hover {
  color: var(--text-strong);
}

.funnel__nav .button {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  text-decoration: none;
}

.funnel__main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.funnel__footer {
  padding: 56px 40px 44px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13.5px;
}

.funnel__mission {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 64px;
  max-width: 1160px;
  margin: 0 auto 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.funnel__mission-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.funnel__mission-title {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 640;
  line-height: 1.1;
}

.funnel__mission-title a {
  color: inherit;
  text-decoration: none;
}

.funnel__mission-title a:hover {
  color: var(--accent-hover);
}

.funnel__mission-line {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.funnel__mission-why {
  max-width: 54ch;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.funnel__footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 44px;
  max-width: 1160px;
  margin: 0 auto;
}

.funnel__footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-size: 16.5px;
  font-weight: 650;
}

.funnel__footer-mark {
  display: block;
  width: 11px;
  height: 11px;
  background: var(--accent);
  transform: rotate(45deg);
}

.funnel__footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}

.funnel__footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 132px;
}

.funnel__footer-col-title {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 620;
}

.funnel__footer-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms ease;
}

.funnel__footer-link:hover {
  color: var(--text-strong);
}

.funnel__footer-bottom {
  max-width: 1160px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}


/* The opening: the words on the left, the one screenshot on the right, and the four
   demos cycling behind both as the page's atmosphere. */
.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 124px) 40px clamp(48px, 6vw, 88px);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding-left: clamp(14px, 1.6vw, 22px);
  border-left: 3px solid var(--accent);
}

.hero__eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--canvas);
  opacity: 0.88;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.hero__slide--1 {
  background-image: url("/images/demo-1-b8d05a906cb827e1.png");
}

.hero__slide--2 {
  background-image: url("/images/demo-2-73e5ab358dea402f.png");
}

.hero__slide--3 {
  background-image: url("/images/demo-3-021e633459268f0c.png");
}

.hero__slide--4 {
  background-image: url("/images/demo-4-b2c5604bccd255a4.png");
}

@media (prefers-reduced-motion: no-preference) {
  .hero__slide {
    animation: hero-fade 32s linear infinite;
  }

  .hero__slide--2 {
    animation-delay: 8s;
  }

  .hero__slide--3 {
    animation-delay: 16s;
  }

  .hero__slide--4 {
    animation-delay: 24s;
  }
}

@keyframes hero-fade {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0.32;
  }

  22% {
    opacity: 0.32;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide--1 {
    opacity: 0.32;
  }
}

.hero__title {
  max-width: 16ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 650;
  line-height: 1.02;
}

.hero__mark {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.14em;
  background: var(--accent);
  transform: rotate(45deg);
}

.hero__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(16.5px, 1.4vw, 19.5px);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.hero__actions a {
  text-decoration: none;
}

.hero__frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), var(--edge-light);
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
}


.button--lg {
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15.5px;
}


.band {
  padding: clamp(84px, 10vw, 132px) 40px;
  border-bottom: 1px solid var(--border);
}

#contact,
#faq {
  background: var(--surface);
}

.band__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
  max-width: 1160px;
  margin: 0 auto;
}

.band__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.band__title {
  max-width: 24ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 640;
  line-height: 1.08;
}

.band__lede {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
}



.offer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

.offer__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.offer__block:not(.offer__block--muted) {
  border-color: var(--accent-line);
  background: var(--raised);
  box-shadow: var(--shadow-md), var(--edge-light);
}

.offer__block--muted {
  background: transparent;
}

.offer__title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 620;
}

.offer__price {
  margin: 4px 0 0;
  color: var(--text-strong);
  font-size: 40px;
  font-weight: 640;
  line-height: 1.05;
}

.offer__block--muted .offer__price {
  color: var(--muted);
  font-size: 31px;
}

.offer__text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.offer__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.offer__list li {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.offer__list li::before {
  content: "·";
  color: var(--accent);
}


.getapp {
  width: 100%;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--faint);
}

.getapp__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.getapp__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.getapp__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
}

.getapp__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 620;
  line-height: 1.2;
}

.getapp__detail {
  color: var(--muted);
  font-weight: 500;
}

.getapp__note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.getapp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.getapp .button {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  text-decoration: none;
}

.getapp__more {
  color: var(--text);
}


.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

.download {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm), var(--edge-light);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.download:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--edge-light);
  transform: translateY(-3px);
}

.download__platform {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 620;
}

.download__detail {
  color: var(--muted);
  font-size: 14.5px;
}

.download__file {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.downloads__note {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  text-align: center;
}



.faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::marker {
  content: "";
}

.faq__label {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  transition: color 140ms ease;
}

.faq__q:hover .faq__label {
  color: var(--text-strong);
}

.faq__mark {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 180ms ease, border-color 180ms ease;
}

.faq__item[open] .faq__mark {
  border-color: var(--accent);
  transform: rotate(-135deg);
}

.faq__a {
  max-width: 74ch;
  margin: 0;
  padding: 0 4px 28px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
}


.plan {
  display: contents;
}

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

.plan__tabs {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--canvas);
}

.plan__tab {
  padding: 9px 20px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

#plan-open-source:checked ~ .plan__tabs .plan__tab--open-source,
#plan-teams:checked ~ .plan__tabs .plan__tab--teams {
  background: var(--accent);
  color: var(--on-accent);
}

#plan-open-source:focus-visible ~ .plan__tabs .plan__tab--open-source,
#plan-teams:focus-visible ~ .plan__tabs .plan__tab--teams {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.plan__panel {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

#plan-open-source:checked ~ .plan__panel--open-source,
#plan-teams:checked ~ .plan__panel--teams {
  display: grid;
}



.field__label {
  font-size: 13px;
}

.field__input {
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 15px;
  transition: border-color 140ms ease;
}

.field__input:hover {
  border-color: var(--border-strong);
}

.field__hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}


.outcome {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
  background: var(--accent-tint);
}

.outcome--refused {
  border-color: var(--danger-line);
  background: var(--danger-tint);
}

.outcome__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 620;
}

.outcome__text {
  max-width: 70ch;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.outcome__note {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.outcome__action {
  margin: 4px 0 0;
}

.outcome__action a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}


.shots {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.shot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg), var(--edge-light);
}

.shot__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shot__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 19px;
  font-weight: 620;
}

.shot__text {
  max-width: 76ch;
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}


.prose {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.prose__title {
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 620;
  line-height: 1.25;
}

.prose__title:not(:first-child) {
  margin-top: 34px;
}

.prose p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.prose__lead {
  color: var(--text);
  font-size: 17px;
}

.prose__link {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.prose__link:hover {
  text-decoration-color: var(--accent-hover);
}


.funnel a:focus-visible,
.funnel button:focus-visible,
.funnel input:focus-visible,
.funnel textarea:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover {
    transform: none;
    transition: none;
  }

  .faq__mark {
    transition: none;
  }
}


.docs {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

.docs__side {
  position: sticky;
  top: 78px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.docs__side-title {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 620;
}

.docs__side-link {
  /* The 2px edge the row grows on hover is reserved here, so the rail never jumps a pixel
     sideways when the pointer crosses it. */
  padding: 3px 0 3px 8px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 120ms ease;
}

.docs__side-link:hover,
.docs__side-link:focus-visible {
  border-left-color: var(--accent);
  color: var(--text-strong);
}

.docs__body {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.help__title,
.help__lede,
.help__part,
.help__words,
.help__steps,
.help__note {
  max-width: 68ch;
}

.help__section {
  scroll-margin-top: 88px;
}

.help__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 24px;
  line-height: 1.25;
}

.help__lede {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.7;
}

.help__part {
  margin: 26px 0 0;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 620;
}

.help__words {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
}

/* A runbook's steps are numbered circles joined by a hairline, because the order is the
   instruction: the numeral in `--accent` is the only place the page spends that colour on a
   figure, and the line between two circles says the second follows the first. */
.help__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.help__step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  counter-increment: step;
}

.help__step::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  content: counter(step);
}

/* The hairline between two circles: it stops at the last step, so the run has an end. */
.help__step::after {
  position: absolute;
  top: 26px;
  bottom: -8px;
  left: 10px;
  width: 1px;
  background: var(--border);
  content: "";
}

.help__step:last-child::after {
  display: none;
}

.help__note {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.help__figure {
  margin: 28px 0 0;
}

.help__zoom {
  display: block;
  cursor: zoom-in;
  border-radius: 10px;
}

.help__zoom:hover .help__img {
  border-color: var(--accent-line);
}

.help__zoom:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.help__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 120ms ease;
}

.help__caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.help__zoom-link {
  margin-left: 8px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition:
    color 120ms ease,
    border-color 120ms ease;
}

.help__zoom-link:hover {
  color: var(--text-strong);
  border-color: var(--accent-line);
}


.api__section {
  margin-top: 64px;
  scroll-margin-top: 88px;
}

.api__section-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 26px;
  line-height: 1.25;
}

.api__words,
.api__note {
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
}

.api__note {
  color: var(--muted);
  font-size: 14.5px;
}

.api__events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 24px;
  max-width: 68ch;
  margin-top: 14px;
}

.api__event {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.api__event-label {
  color: var(--text);
  font-size: 14px;
}

.api__event-name {
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 12.5px;
  white-space: nowrap;
}


.code-wrap {
  position: relative;
  margin: 14px 0 0;
}

.code-block {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--sunken);
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}

.code__copy {
  display: none;
}

.js .code__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition:
    color 120ms ease,
    border-color 120ms ease;
}

.js .code__copy:hover {
  color: var(--text-strong);
  border-color: var(--accent-line);
}

.js .code__copy:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.js .is-copied {
  color: var(--accent);
  border-color: var(--accent-line);
}


.docs__anchor {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition:
    opacity 120ms ease,
    color 120ms ease;
}

.docs__anchor:focus-visible,
.is-copied {
  opacity: 1;
}

@media (hover: none) {
  .docs__anchor {
    opacity: 0.6;
  }
}

h2:hover .docs__anchor,
h3:hover .docs__anchor,
.docs__anchor:hover {
  color: var(--accent);
}

.api__section-title,
.api__group-title,
.api__start-title,
.help__title,
.help__part {
  scroll-margin-top: 88px;
}

.code__key,
.code__number {
  color: var(--text-strong);
}

.code__string {
  color: var(--accent);
}

.code__literal,
.code__punct {
  color: var(--muted);
}


.code__tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
}

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

.code__tab {
  position: relative;
  z-index: 1;
  order: 0;
  margin: 0 4px -1px 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.code__tab:hover {
  color: var(--text);
}

.code__lang:checked + .code__tab {
  background: var(--sunken);
  color: var(--text-strong);
}

.code__lang:focus-visible + .code__tab {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.code__panel {
  order: 1;
  flex-basis: 100%;
  display: none;
  border: 1px solid var(--border);
  border-radius: 0 8px 8px 8px;
  background: var(--sunken);
}

.code__lang:checked + .code__tab + .code__panel {
  display: block;
}

.code__panel .code-block {
  margin: 0;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: transparent;
}

.code__file {
  display: block;
  margin: 12px 16px 0;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 12.5px;
}

.api__start-title {
  margin: 34px 0 0;
  color: var(--text-strong);
  font-size: 17px;
  font-weight: 620;
}

.api__step {
  scroll-margin-top: 88px;
}


.api__group {
  margin-top: 54px;
  scroll-margin-top: 88px;
}

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

.api__group-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
}

.api__group-count {
  color: var(--muted);
  font-size: 12px;
}

.api__group-blurb {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.api__op {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.api__op:last-child {
  border-bottom: 0;
}

.api__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.api__method {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.api__method--get {
  color: var(--accent);
  border-color: var(--accent-line);
}

.api__method--post {
  color: var(--text-strong);
}

.api__path {
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 14px;
  word-break: break-all;
}

.api__open {
  color: var(--muted);
  font-size: 11.5px;
}

.api__summary {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--text-strong);
  font-size: 15.5px;
  line-height: 1.6;
}

.api__desc {
  max-width: 68ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}



.api__example {
  margin-top: 12px;
}

.api__example-head {
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.api__example-head:hover {
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   The manual's front page, its cost rows and its reference strips (ONB-6)

   The Encarta half is the grid of entry cards with three ways in under it; the Runbooks
   half is the sections themselves, each opening with what it costs and a numbered run of
   steps. `--accent` is structural here rather than decorative: the arrow on a card, the
   numeral in a step's circle, the edge of the row the pointer is on. Nothing in this block
   invents a colour - `--danger` is not used at all, because reading the manual cannot go
   wrong.
   --------------------------------------------------------------------------- */

.front {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 14px 26px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 120ms ease;
}

.entry:hover,
.entry:focus-visible {
  border-color: var(--border-strong);
  border-left-color: var(--accent);
}

.entry__tile,
.start__tile {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--raised);
  border-radius: 6px;
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1;
}

.entry__name,
.start__name {
  align-self: center;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
}

.entry__line,
.start__line {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.entry__arrow,
.start__arrow {
  position: absolute;
  top: 15px;
  right: 14px;
  color: var(--accent);
  font-size: 12px;
}

/* The three ways in, on the one wash the page allows: a band that says "begin here" without
   becoming a slab. */
.start {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--accent-tint);
  border-radius: 10px;
}

.start__title {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 620;
}

.start__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.start__card {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 12px 26px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  text-decoration: none;
}

.start__tile {
  background: var(--canvas);
}

/* What reading a section costs: the label column is fixed so the values line up down the
   page, which is what makes the row readable at a glance rather than a sentence. */
.help__cost {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 4px 16px;
  margin: 14px 0 0;
  font-size: 12.5px;
}

.help__cost dt {
  margin: 0;
  color: var(--muted);
}

.help__cost dd {
  margin: 0;
  color: var(--text);
}

/* A block a reader copies: mono so a schedule or a snippet keeps its shape, and it scrolls
   rather than wrapping, because a wrapped expression is the one thing that cannot be copied. */
.help__template {
  margin: 16px 0 0;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.help__template-label {
  margin: 0;
  padding: 8px 12px 0;
  color: var(--muted);
  font-size: 11px;
}

.help__template-body {
  margin: 0;
  padding: 6px 12px 12px;
  overflow-x: auto;
  color: var(--text-strong);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* The reference strip: the page's last word on "what does this do?", which is why it ends
   the page rather than sitting beside it. */
.manual__marks {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.marks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.marks li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
}

.marks__mark {
  color: var(--text-strong);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 13px;
}

.marks__name {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}

.marks__means {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.keys li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.keys__key {
  padding: 1px 6px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-strong);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.keys__means {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.docs__side-title:not(:first-child) {
  margin-top: 18px;
}

@media (max-width: 1040px) {
  .funnel__nav-link {
    display: none;
  }

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

  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .docs__side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    border-left: 0;
  }

  .docs__side-title {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .funnel__nav {
    padding: 14px 20px;
  }

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

  /* The cost row turns into a label above its value: 100px of label plus a sentence does not
     fit a phone, and a squeezed value is worse than a stacked one. */
  .help__cost {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .help__cost dd {
    margin-bottom: 6px;
  }

  .hero {
    padding: 96px 22px 0;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions a {
    flex: 1 1 100%;
  }

  .getapp {
    padding: 18px;
  }

  .getapp__actions {
    width: 100%;
  }

  .getapp__actions a {
    flex: 1 1 100%;
  }

  .band {
    padding: 72px 22px;
  }

  .outcome {
    padding: 22px;
  }

  .funnel__footer {
    padding: 32px 22px;
  }
}



/* The design's spine: five numbered rows, each one claim with the thing that shows it
   beside it, the fourth lit in the accent because it is the one an agent does. Every
   figure is drawn from the palette by a rule, never an invented screenshot. */
.features {
  margin: 0;
  padding: 0 40px;
  list-style: none;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 60px) 0;
  border-top: 1px solid var(--border);
}

.feature--flip .feature__figure {
  order: -1;
}

.feature--lit {
  padding-inline: clamp(18px, 2.6vw, 34px);
  border-top: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--accent-tint);
  box-shadow: var(--edge-light);
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.feature__index {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.feature__title {
  max-width: 22ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 640;
  line-height: 1.14;
}

.feature__text {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.feature__figure {
  min-width: 0;
}

.mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--canvas);
  box-shadow: var(--shadow-md), var(--edge-light);
}

.mock__line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.mock__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 620;
}

.mock__said {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.mock__who {
  display: block;
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 620;
}

.mock-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock--board {
  gap: 8px;
}

.mock__stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.mock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.mock__stage-name {
  color: var(--text);
  font-size: 13px;
}

.mock__ask {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 13.5px;
}

.mock__answer {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}

.mock__from {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.mock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
}

.artifact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--edge-light);
}

.artifact__kind {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.artifact__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 15.5px;
  font-weight: 620;
  line-height: 1.3;
}

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.closing__actions a {
  text-decoration: none;
}

.closing__invite {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(36px, 6vw, 96px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 100px) 40px;
}

.apply__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.apply__eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.apply__title {
  max-width: 22ch;
  margin: 4px 0 0;
  color: var(--text-strong);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 650;
  line-height: 1.05;
}

.apply__lede {
  max-width: 54ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
}

.apply__rule {
  height: 1px;
  margin: 10px 0 4px;
  background: var(--accent);
}

.apply__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
}

.apply__wide {
  grid-column: 1 / -1;
}

.apply__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.apply__note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.apply__note-mark {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

.apply__elsewhere {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.apply__next {
  padding-left: clamp(22px, 3vw, 40px);
  border-left: 1px solid var(--border);
}

.apply__next-title {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 640;
}

.apply__steps {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.apply__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.apply__step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apply__step-index {
  color: var(--muted);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 640;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.apply__step-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 16.5px;
  font-weight: 620;
  line-height: 1.3;
}

.apply__step-text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.apply__next-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.funnel__mail {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.funnel__mail:hover {
  color: var(--text-strong);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 24px;
  }

  .features {
    padding-inline: 24px;
  }

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

  .feature--flip .feature__figure {
    order: 0;
  }

  .apply {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 24px;
  }

  .apply__next {
    padding: 28px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}


/* FUN-13 — the page moves as the reader scrolls. Pure CSS, no script: a
   scroll-driven timeline turns the scroll position itself into the animation's
   progress. Two guards keep a still version of the page for whoever cannot play
   it - `@supports`, for a browser with no scroll-driven animations, and
   `prefers-reduced-motion`, for a reader who asked for no motion - and nothing
   outside them hides a section, so that version is the whole page.

   One thing needs more than a timeline can say - a pin that holds the diamond
   just long enough to spread out and come to a point - and that is GSAP
   ScrollTrigger, fetched by the loader below the fold and skipped whole when the
   reader asked for less motion. The bands it drives carry no `reveal` class and
   nothing in their own rules hides or moves them, so what the server wrote is
   the whole of the page for anyone else. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__slides {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 88vh;
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 36%;
    }
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .hero__slides,
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* An answer opens smoothly. The `details` element still opens and
   closes on its own, with no script at all; this only softens how the answer
   arrives, and only for a reader who asked for motion. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a {
    animation: faq-open 200ms ease;
  }
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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