/* Baxter: charcoal channel, plum actions, explicit verification states. */
:root {
    color-scheme:dark;
    --page:#17151c;
    --rail:#201d26;
    --channel:#26222d;
    --panel:#2d2835;
    --ink:#f0edf5;
    --muted:#b1a7be;
    --line:#423a4e;
    --accent:#c4aceb;
    --good:#a2d7bb;
    --bad:#f0aaa6;
    --mono:ui-monospace,Consolas,monospace
}
* {
    box-sizing:border-box
}
html {
    background:var(--page);
    scroll-behavior:smooth
}
body {
    margin:0;
    color:var(--ink);
    font:14px/1.5 "Segoe UI",Arial,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button,select,input,textarea {
    font:inherit;
    color:inherit
}
button,select {
    min-height:40px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#29242f;
    padding:8px 12px
}
button {
    cursor:pointer;
    font-weight:600;
    transition:background 140ms
}
button:hover:not(:disabled) {
    background:#39313f
}
button:disabled {
    opacity:.45;
    cursor:default
}
button.primary {
    background:var(--accent);
    color:#251c34;
    border-color:var(--accent)
}
button.primary:hover:not(:disabled) {
    background:#d3bef3
}
textarea {
    width:100%;
    padding:12px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#1b1820;
    resize:vertical;
    font:12px/1.6 var(--mono)
}
:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:4px
}
[hidden] {
    display:none!important
}
.app-header {
    height:68px;
    padding:0 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:16px
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:750;
    letter-spacing:-.5px
}
.brand-mark {
    display:grid;
    place-items:center;
    background:var(--accent);
    color:#271d34;
    border-radius:10px;
    width:32px;
    height:32px;
    font-size:25px;
    font-weight:800
}
.brand-divider {
    margin:0 6px;
    color:#655970;
    font-weight:400
}
.brand-context {
    color:var(--muted);
    font-size:13px;
    font-weight:400;
    letter-spacing:0
}
.header-links {
    display:flex;
    align-items:center;
    gap:22px;
    font-size:12px;
    color:var(--muted)
}
.local-badge {
    display:flex;
    align-items:center;
    gap:7px
}
.local-badge:before,.local-dot {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--good)
}
.workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 326px;
    max-width:1800px;
    margin:auto;
    min-height:calc(100vh - 68px)
}
.scope-rail {
    padding:26px 18px;
    background:var(--rail);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column
}
.workspace-name {
    display:flex;
    gap:11px;
    align-items:center;
    margin-bottom:36px
}
.room-icon {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:#3a3048;
    color:var(--accent);
    font-weight:800
}
.workspace-name strong {
    font-size:14px
}
.workspace-name small {
    display:block;
    font-size:11px;
    color:var(--muted)
}
.eyebrow {
    font:10px/1.5 var(--mono);
    letter-spacing:.1em;
    color:var(--muted);
    margin:0 0 12px
}
.channel-link {
    display:flex;
    gap:9px;
    align-items:center;
    background:#3c3149;
    color:#e1cef8;
    border-radius:7px;
    padding:10px;
    font-size:12px;
    font-weight:600
}
.channel-link>span:first-child {
    font-size:20px;
    color:var(--accent)
}
.live-dot {
    width:5px;
    height:5px;
    background:var(--accent);
    border-radius:50%;
    margin-left:auto
}
.scope {
    margin-top:42px
}
.scope h2 {
    font-size:20px;
    line-height:1.35;
    letter-spacing:-.5px;
    margin:0 0 14px
}
.scope>p:not(.eyebrow) {
    font-size:12px;
    color:var(--muted);
    line-height:1.7
}
.scope dl {
    border-top:1px solid var(--line);
    margin-top:23px;
    padding-top:9px
}
.scope dl div {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    font-size:11px
}
.scope dt {
    color:var(--muted)
}
.scope dd {
    margin:0
}
.rail-footer {
    margin-top:auto;
    padding-top:55px;
    color:var(--muted);
    font:11px/1.6 var(--mono)
}
.rail-footer p {
    font:11px/1.5 "Segoe UI",sans-serif
}
.channel {
    min-width:0;
    background:var(--channel)
}
.channel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:22px 28px;
    border-bottom:1px solid var(--line)
}
h1 {
    margin:0;
    font-size:19px;
    letter-spacing:-.4px
}
h1 span {
    color:var(--muted);
    font-weight:400;
    margin-right:8px
}
.channel-head p {
    margin:3px 0 0;
    color:var(--muted);
    font-size:12px
}
.channel-label {
    font:9px/1.3 var(--mono);
    letter-spacing:.1em;
    color:var(--muted)
}
.conversation {
    padding:22px 28px 36px
}
.thread-divider {
    display:flex;
    align-items:center;
    gap:14px;
    color:#a494b6;
    font:9px/1.5 var(--mono);
    letter-spacing:.12em;
    margin:0 0 24px
}
.thread-divider:after {
    content:"";
    height:1px;
    background:var(--line);
    flex:1
}
.request-message {
    display:flex;
    gap:14px;
    align-items:flex-start
}
.atul-avatar {
    flex:none;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:#806d91;
    color:white;
    font-weight:650
}
.request-message>div {
    min-width:0;
    flex:1
}
.message-author {
    display:flex;
    gap:9px;
    align-items:center
}
.message-author strong {
    font-size:13px
}
.message-author span {
    font-size:10px;
    color:var(--muted)
}
.message-author small {
    font:8px/1 var(--mono);
    color:var(--accent);
    background:#40334e;
    padding:4px;
    border-radius:3px
}
.request-message p {
    margin:5px 0 14px;
    color:#e1d9ea
}
.attachment {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid #51435f;
    border-radius:9px;
    background:#2f2939;
    padding:13px;
    max-width:420px
}
.file-icon {
    display:grid;
    place-items:center;
    flex:none;
    height:36px;
    width:33px;
    border-radius:5px;
    border:1px solid #7b668e;
    background:#46364f;
    color:var(--accent);
    font:9px/1 var(--mono)
}
.attachment>div {
    min-width:0;
    flex:1
}
.attachment strong {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere
}
.attachment small {
    display:block;
    font-size:10px;
    color:var(--muted)
}
.attach-action {
    position:relative;
    font-size:11px;
    color:var(--accent);
    cursor:pointer;
    padding:8px 3px
}
.attach-action input {
    position:absolute;
    opacity:0;
    inset:0;
    width:100%;
    cursor:pointer
}
.attach-action:focus-within {
    outline:2px solid var(--accent);
    outline-offset:2px
}
#input-status {
    margin:7px 0 0;
    font-size:11px;
    color:var(--bad)
}
.run-bar {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:15px 0;
    margin-top:26px;
    border-block:1px solid var(--line)
}
.slash-command {
    display:flex;
    gap:10px;
    align-items:center
}
.slash-command>span {
    display:grid;
    place-items:center;
    border-radius:6px;
    background:#443451;
    color:var(--accent);
    width:30px;
    height:30px;
    font-size:18px;
    font-weight:650
}
.slash-command strong {
    font:12px/1.5 var(--mono)
}
.slash-command small {
    display:block;
    font-size:10px;
    color:var(--muted)
}
.run-bar label {
    display:flex;
    gap:7px;
    align-items:center;
    font-size:10px;
    color:var(--muted)
}
.run-bar select {
    padding:7px
}
.primary span {
    margin-left:14px
}
#progress {
    display:none
}
.workflow-map {
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:20px;
    font:10px/1.5 var(--mono);
    color:#a99cb5
}
.workflow-map i {
    font-style:normal;
    color:#74647e
}
.workflow-map span[data-state=passed] {
    color:var(--good)
}
.workflow-map span[data-state=failed] {
    color:var(--bad)
}
.workflow-map span[data-state=running] {
    color:var(--accent)
}
.run-ledger {
    display:flex;
    gap:15px;
    justify-content:space-between;
    margin-top:9px;
    font-size:11px
}
.run-ledger #run-count {
    color:var(--muted);
    font:10px/1.7 var(--mono)
}
#status {
    font-size:11px;
    color:var(--muted);
    min-height:16px;
    margin:8px 0 14px
}
.section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:22px 0 12px
}
.section-title h2 {
    font-size:12px;
    margin:0
}
.section-title>span {
    font:9px/1.3 var(--mono);
    color:var(--muted)
}
#tasks {
    border-left:1px solid #53445f;
    margin-left:17px
}
.task {
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:11px 0 11px 14px;
    margin-left:-18px
}
.task .avatar,.baxter-avatar {
    position:relative;
    flex:none;
    display:block;
    width:34px;
    height:34px;
    background:var(--accent);
    border:4px solid var(--channel);
    border-radius:12px
}
.avatar:before,.baxter-avatar:before {
    content:"";
    position:absolute;
    inset:5px 3px;
    border:1.5px solid #302239;
    border-radius:5px
}
.avatar:after,.baxter-avatar:after {
    content:"";
    position:absolute;
    top:10px;
    left:7px;
    width:2px;
    height:3px;
    background:#302239;
    box-shadow:7px 0 #302239
}
.avatar.product-manager {
    background:#d6ba91
}
.avatar.developer {
    background:#aab8da
}
.avatar.verifier {
    background:var(--good)
}
.task .role {
    font-size:10px;
    color:var(--muted)
}
.task h3 {
    font-size:12px;
    font-weight:500;
    margin:1px 0 0;
    color:#e5dfed
}
.task p {
    font-size:10px;
    line-height:1.5;
    margin:3px 0 0;
    color:var(--muted);
    overflow-wrap:anywhere
}
.state {
    font:9px/1 var(--mono);
    text-transform:uppercase;
    color:var(--muted)
}
.state.running {
    color:var(--accent)
}
.state.passed {
    color:var(--good)
}
.state.failed,.state.blocked {
    color:var(--bad)
}
.task[data-state=running] {
    background:#352b40;
    border-radius:7px
}
.report-preview {
    margin-top:22px;
    padding:16px;
    border:1px solid #56445f;
    border-radius:10px;
    background:#302739
}
.report-intro {
    display:flex;
    align-items:flex-start;
    gap:11px
}
.report-intro p {
    margin:4px 0;
    font-size:12px;
    color:var(--muted)
}
.report-preview table {
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    margin-top:16px
}
.report-preview th,.report-preview td {
    text-align:right;
    padding:8px 5px;
    border-bottom:1px solid var(--line)
}
.report-preview th:first-child,.report-preview td:first-child {
    text-align:left
}
.report-preview th {
    color:var(--muted);
    font-weight:400
}
.report-preview tbody tr:last-child td {
    border:0
}
.proof-rail {
    padding:30px 20px;
    border-left:1px solid var(--line);
    min-width:0;
    background:#1d1923
}
.proof-heading h2 {
    margin:0 0 9px;
    font-size:20px;
    letter-spacing:-.5px
}
.proof-heading p {
    font-size:12px;
    color:var(--muted);
    margin:0 0 22px
}
.proof-rail details {
    border-top:1px solid var(--line);
    padding:0 0 18px
}
summary {
    cursor:pointer;
    min-height:44px;
    padding:14px 0;
    color:#dfd3ec;
    font-size:12px;
    font-weight:600
}
.tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    margin-bottom:14px
}
.tabs button {
    border:0;
    background:none;
    border-radius:0;
    font-size:11px;
    color:var(--muted)
}
.tabs button[aria-pressed=true] {
    border-bottom:2px solid var(--accent);
    color:var(--accent)
}
#file {
    width:100%;
    font:11px/1.4 var(--mono);
    margin-bottom:9px
}
.proof-rail textarea {
    margin-bottom:8px
}
.proof-rail button {
    font-size:11px
}
.export-button {
    display:flex;
    justify-content:space-between;
    width:100%;
    margin-top:12px;
    color:var(--accent)
}
.detail-note {
    font-size:11px;
    color:var(--muted);
    margin:0 0 12px
}
.receipt {
    border-bottom:1px solid var(--line);
    padding:12px 0;
    font-size:10px;
    overflow-wrap:anywhere
}
.receipt b {
    font:11px/1.5 var(--mono)
}
.receipt p {
    color:var(--muted);
    margin:5px 0
}
.receipt time {
    font:9px/1.5 var(--mono);
    color:var(--muted)
}
#task-error {
    color:var(--bad);
    font-size:11px
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
@media(min-width:1600px) {
    .conversation {
        padding-inline:44px
    }
    .channel-head {
        padding-inline:44px
    }
}
@media(max-width:1180px) {
    .workspace {
        grid-template-columns:minmax(0,1fr) 285px
    }
    .scope-rail {
        padding-inline:14px
    }
    .conversation,.channel-head {
        padding-inline:20px
    }
    .run-bar {
        grid-template-columns:1fr auto
    }
    .slash-command {
        grid-column:1/-1
    }
    .run-bar button {
        justify-self:end
    }
}
@media(max-width:950px) {
    .workspace {
        grid-template-columns:minmax(0,1fr)
    }
    .proof-rail {
        grid-column:1;
        border-top:1px solid var(--line);
        border-left:0
    }
    .scope-rail {
        grid-row:1/3
    }
    .proof-rail textarea {
        max-height:220px
    }
    .channel-label {
        display:none
    }
}
@media(max-width:600px) {
    .app-header {
        height:62px;
        padding:0 17px
    }
    .brand {
        gap:8px;
        font-size:18px
    }
    .brand-divider,.brand-context,.local-badge {
        display:none
    }
    .workspace {
        display:block
    }
    .scope-rail {
        padding:14px 17px;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .workspace-name {
        margin:0
    }
    .room-icon {
        display:none
    }
    .scope-rail>.eyebrow,.scope,.rail-footer {
        display:none
    }
    .channel-link {
        font-size:10px;
        padding:6px 10px
    }
    .channel-link .live-dot {
        display:none
    }
    .channel-head {
        padding:19px 17px
    }
    .conversation {
        padding:20px 17px 24px
    }
    .request-message {
        gap:10px
    }
    .attachment {
        padding:10px;
        gap:9px
    }
    .attachment small {
        font-size:9px
    }
    .run-bar {
        gap:9px;
        grid-template-columns:1fr auto
    }
    .run-bar label {
        justify-content:flex-start
    }
    .run-bar button {
        font-size:12px
    }
    .primary span {
        margin-left:6px
    }
    .workflow-map {
        gap:8px
    }
    .run-ledger {
        gap:8px;
        font-size:10px
    }
    .run-ledger #run-count {
        font-size:9px
    }
    .task {
        gap:8px
    }
    .task h3 {
        font-size:11px
    }
    .state {
        font-size:8px
    }
    .task .proof {
        font-size:9px
    }
    .section-title>span {
        font-size:8px
    }
    .proof-rail {
        padding:24px 17px;
        border-left:0
    }
    .report-preview {
        padding:13px
    }
    .report-preview td,.report-preview th {
        font-size:10px;
        padding-inline:3px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,html {
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
    }
}