sits flush against its main row: drawer carries its own
spacing so the | doesn't need any. */
.pipeline-row-detail > td { padding: 0; }
.pipeline-drawer {
background: var(--gp-panel-bg);
border: 1px solid var(--gp-panel-border);
border-radius: 6px;
padding: 0.9rem 1.1rem;
margin: 0.25rem 0.4rem 0.6rem;
}
/* Placeholder shown while the lazy drawer frame fetches (#49). Same box as the
drawer so expanding a row doesn't make the table jump. */
.pipeline-drawer-loading {
background: var(--gp-panel-bg);
border: 1px solid var(--gp-panel-border);
border-radius: 6px;
padding: 0.9rem 1.1rem;
margin: 0.25rem 0.4rem 0.6rem;
color: var(--pico-muted-color);
font-size: 0.85rem;
}
.pipeline-drawer-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1.5rem;
}
@media (max-width: 900px) {
.pipeline-drawer-grid { grid-template-columns: 1fr; }
}
.pipeline-drawer-left,
.pipeline-drawer-right { min-width: 0; }
.pipeline-drawer h5 {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--pico-muted-color);
margin: 0 0 0.5rem;
}
.pipeline-drawer-subhead { margin-top: 1.25rem !important; }
/* The lead's Taken block under the drawer composer: its header reads like the
drawer's own h5 labels rather than a page-level card header. */
.pipeline-drawer .todos-section { margin-top: 1.25rem; }
.pipeline-drawer .todos-section .card-header { font-size: 0.7rem; margin-bottom: 0.5rem; }
.pipeline-drawer-contact {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem 0.75rem;
}
.pipeline-drawer-contact .span-2 { grid-column: span 3; }
.pipeline-drawer-contact label { margin: 0; font-size: 0.8rem; }
.pipeline-drawer-contact input,
.pipeline-drawer-contact select { margin-top: 0.15rem; }
@media (max-width: 700px) {
.pipeline-drawer-contact { grid-template-columns: 1fr; }
.pipeline-drawer-contact .span-2 { grid-column: span 1; }
}
.pipeline-drawer-link {
margin: 0.5rem 0 0;
font-size: 0.85rem;
}
.activity-feed-cap {
display: block;
margin-top: 0.5rem;
color: var(--pico-muted-color);
font-style: italic;
}
.activity-feed-empty {
list-style: none;
padding: 0.5rem 0;
color: var(--pico-muted-color);
font-size: 0.85rem;
font-style: italic;
border-bottom: none;
}
/* System-activity collapsible (stage/owner changes etc.) — collapsed by default
so the comments feed reads clean. */
.pipeline-system-activity {
margin-top: 1rem;
border-top: 1px dashed var(--gp-panel-border);
padding-top: 0.75rem;
}
.pipeline-system-activity > summary {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--pico-muted-color);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pipeline-system-activity > summary:hover { color: var(--pico-color); }
.pipeline-system-activity[open] > summary { margin-bottom: 0.5rem; }
.pipeline-system-count {
background: var(--gp-panel-bg-hover);
color: var(--pico-color);
border-radius: 999px;
padding: 0.05rem 0.5rem;
font-size: 0.7rem;
letter-spacing: 0;
text-transform: none;
}
.pipeline-system-activity .system-feed .activity-entry { padding: 0.35rem 0; }
/* Comment composer (right column of the drawer). */
.pipeline-comment-form { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pipeline-comment-form textarea { margin: 0; min-height: 8rem; }
/* Notitie|Gebeld toggle — CSS-only state, same input:checked+span idiom as the
ICP chips. The fieldset reset keeps Pico from block-stacking it. */
.comment-kind { display: flex; gap: 0.3rem; margin: 0; padding: 0; border: 0; }
.comment-kind-pill { margin: 0; cursor: pointer; }
.comment-kind-pill > span {
display: inline-flex; align-items: center;
padding: 0.22rem 0.7rem;
font-size: 0.8rem; line-height: 1.3;
background: #fff;
color: var(--pico-color);
border: 1px solid var(--gp-panel-border);
border-radius: 9999px;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.comment-kind-pill:hover > span { background: var(--gp-panel-bg-hover); }
.comment-kind-pill > input:checked + span {
background: var(--pico-primary);
border-color: var(--pico-primary);
color: #fff;
font-weight: 600;
}
.comment-kind-pill > input:focus-visible + span {
outline: 2px solid var(--pico-primary);
outline-offset: 2px;
}
.pipeline-comment-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.pipeline-comment-tip {
color: var(--pico-muted-color);
font-size: 0.75rem;
white-space: nowrap;
}
.pipeline-comment-tip kbd {
background: var(--pico-card-background-color);
color: var(--pico-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: 3px;
padding: 0 0.3rem;
font-size: 0.7rem;
font-family: inherit;
}
/* Override Pico's default full-width submit button — we want it sized to content. */
.pipeline-comment-form button[type="submit"] {
width: auto;
margin: 0;
padding: 0.4rem 1.2rem;
flex-shrink: 0;
}
/* Inspreken (dictated notes): the draft state of the composer. The mic button
and its recording state live with the dictation Stimulus controller. */
.dictation { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Pill button like the kind toggle. Explicit color: Pico's |