/* ============================================================================
* LOOM Shell — App-spezifische Klassen
* ============================================================================
*
* Materialisiert ADR-0006 (App-Shell Layout) und ADR-0007 (List/Comments)
* Setzt iron-core.css und accent/loom.css voraus.
*
* Usage:
*
*
*
* ============================================================================ */
/* ----- Shell-Grundgerüst ------------------------------------------------ */
.app-shell {
display: grid;
grid-template-rows: 52px 44px 1fr 28px;
/* US-287 (FLOCK-166): pin the single column to the shell width. Without this the implicit
column grows to the widest row's content (top bar / beacons sub-bar reached ~1719px) and
overflow:hidden CLIPPED everything right of the viewport on 13" laptops. With minmax(0,1fr)
each row gets exactly the shell width and must shrink or scroll internally. */
grid-template-columns: minmax(0, 1fr);
height: 100vh;
overflow: hidden;
}
/* US-291 (FLOCK-173): the sub-bar row may GROW for the two-row beacons toolbar (and only grows —
minmax keeps the 44px floor, so sections without a wrapping sub-bar look exactly as before). */
.app-shell { grid-template-rows: 52px minmax(44px, auto) 1fr 28px; }
.app-topbar,
.app-subbar,
.app-statusbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-4);
}
/* US-142: pin every shell row explicitly. There are 5 sub-bars (one per section, all but the active
one display:none); a section without one (Dashboard) leaves row 2 empty, so without explicit rows
grid auto-placement slid .app-content AND .app-statusbar up into the wrong rows. */
.app-topbar { grid-row: 1; background: var(--surface-1); border-bottom: 0.5px solid var(--border-subtle); }
.app-subbar { grid-row: 2; background: var(--surface-page); border-bottom: 0.5px solid var(--border-subtle); padding-top: 8px; padding-bottom: 8px; }
.app-statusbar { grid-row: 4; background: var(--surface-1); border-top: 0.5px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-secondary); }
.app-content {
/* Pin to the 1fr content row (grid: topbar 52 · subbar 44 · content 1fr · statusbar 28).
US-142: a section without a sub-bar (Dashboard) leaves row 2 empty; without this, grid
auto-placement slid .app-content up into the 44px sub-bar row → content clipped to 44px. */
grid-row: 3;
overflow: auto;
background: var(--surface-page);
position: relative;
}
.spacer { flex: 1; }
/* ----- Top-Bar Elemente ------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.01em; }
.brand .sep { color: var(--border); }
.brand .board-switcher {
background: var(--surface-2);
color: var(--text-primary);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 10px;
font-family: var(--font-mono);
font-size: 12px;
display: flex; align-items: center; gap: 6px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.brand .board-switcher:hover { border-color: var(--border-strong); }
/* C15 rule: this element has an explicit `display`, so it needs its own [hidden] escape —
otherwise the author rule beats the UA default and the hidden attribute does nothing. */
.brand .board-switcher[hidden] { display: none; }
/* US-294: hosted mode keeps the vault NAME (identity.js and board.js read the slug from the label)
but drops the switch affordance entirely — no button, no chevron, no menu. */
.brand .board-switcher-pinned { cursor: default; }
.brand .board-switcher-pinned:hover { border-color: var(--border); }
.section-tabs { display: flex; gap: 2px; margin-left: 12px; }
.section-tabs a {
display: flex; align-items: center; gap: 6px;
font-size: 13px;
color: var(--text-secondary);
padding: 6px 10px;
border-radius: var(--radius-sm);
text-decoration: none;
border: 0.5px solid transparent;
transition: color var(--motion-fast) var(--ease-out);
}
.section-tabs a:hover { color: var(--text-primary); }
/* US-287 (FLOCK-166): the shell grid sizes its column to the widest row's min-content — the top bar
(~1540–1720px with text labels) CLIPPED the whole shell right of the viewport on 13" laptops
(.app-shell has overflow:hidden). Below 1560px the nav drops its labels (icon + title tooltip),
below 1300px the model switcher shows only its icon. Target stays laptop ≥ 1280 — LOOM is
deliberately not a mobile tool (CLAUDE.md §Was LOOM bewusst nicht ist). */
@media (max-width: 1560px) {
.section-tabs .tab-label { display: none; }
.section-tabs a { gap: 0; }
}
@media (max-width: 1300px) {
#model-switcher-label { display: none; }
}
.section-tabs a.active {
color: var(--text-primary);
background: var(--surface-2);
border-color: var(--border);
}
.section-tabs a.active .ti { color: var(--accent); }
.section-tabs .badge {
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
padding: 1px 6px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 11px;
}
.cycle-indicator {
display: flex; align-items: center; gap: 8px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-secondary);
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.cycle-indicator:hover { border-color: var(--border-strong); }
.cycle-indicator .dot { color: var(--color-success); font-size: 12px; }
/* US-277 (FLOCK-137): the split widget — cycle info + a labelled rituals entry, visually one control. */
.cycle-widget { display: flex; align-items: stretch; }
.cycle-widget .cycle-indicator {
border-top-right-radius: 0; border-bottom-right-radius: 0;
border-right: 0;
}
.rituals-btn {
display: flex; align-items: center; gap: 6px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-top-left-radius: 0; border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--accent);
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.rituals-btn:hover { border-color: var(--border-strong); }
.rituals-btn .ti-sparkles { font-size: 12px; }
.icon-toolbar { display: flex; gap: 2px; color: var(--text-tertiary); }
.icon-toolbar button {
background: none; border: 0; color: inherit; padding: 6px;
cursor: pointer; border-radius: var(--radius-sm);
transition: background var(--motion-fast) var(--ease-out);
}
.icon-toolbar button:hover { background: var(--surface-2); color: var(--text-primary); }
/* ----- Sub-Bar ---------------------------------------------------------- */
.lane-pills { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.lane-pill {
background: transparent;
/* US-264 (Maintainer-Befund Design-Runde): label always text-primary — dark mode read the old
secondary-grey row of (mostly inactive) pills as barely visible. State shows via bg + border. */
color: var(--text-primary);
border: 0.5px solid var(--border);
border-radius: var(--radius-pill);
padding: 4px 11px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
cursor: pointer;
white-space: nowrap;
transition: border-color var(--motion-fast) var(--ease-out);
}
.lane-pill:hover { border-color: var(--accent); }
.lane-pill.active {
background: var(--surface-1);
color: var(--text-primary);
border-color: var(--accent);
}
.lane-pill .count.warning { color: var(--color-warning); }
.lane-pill .count.success { color: var(--color-success); }
.lane-pill .count.accent { color: var(--accent); }
/* US-79: Lane-Pill-Counts in der jeweiligen Lane-Farbe (slug-basiert, Mockup-Form).
* ALL trägt keine Slug-Klasse → bleibt neutral. */
.lane-pill .count.triage { color: var(--color-warning); }
.lane-pill .count.candidates { color: var(--color-info); }
.lane-pill .count.backlog { color: var(--lane-backlog); }
.lane-pill .count.spinning { color: var(--color-success); }
.lane-pill .count.showcase { color: var(--accent); }
.lane-pill .count.woven { color: var(--woven); }
.lane-pill .count.cut { color: var(--color-error); }
.throw-flock-btn {
display: flex; align-items: center; gap: 6px;
background: var(--accent-fill);
color: var(--on-accent);
border: 0;
border-radius: var(--radius-sm);
padding: 6px 11px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: opacity var(--motion-fast) var(--ease-out);
}
.throw-flock-btn:hover { opacity: 0.9; }
.throw-flock-btn kbd {
font-family: var(--font-mono);
font-size: 11px;
opacity: 0.8;
background: rgba(255,255,255,0.15);
padding: 0 4px;
border-radius: 3px;
}
.search-field {
display: flex; align-items: center; gap: 6px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
}
.search-field input {
background: none; border: 0; color: var(--text-primary);
font-size: 13px; outline: none; width: 120px; font-family: inherit;
}
.search-field .ti { font-size: 12px; color: var(--text-tertiary); }
.view-toggle {
display: inline-flex;
align-items: center;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 9px;
gap: 6px;
cursor: pointer;
color: var(--text-secondary);
transition: border-color var(--motion-fast) var(--ease-out);
}
.view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.view-toggle .ti { font-size: 14px; }
.view-toggle .label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
}
/* ----- List-View Table ------------------------------------------------- */
.list-view { display: grid; grid-template-columns: 1fr 400px; height: 100%; }
.list-view.no-drawer { grid-template-columns: 1fr; }
.story-list { overflow-y: auto; }
.story-list-header,
.story-row {
display: grid;
grid-template-columns: 1fr 90px 60px 80px 96px 200px; /* US-77: +96px Counts-Spalte (💬/📎). ACTIONS 200 = 140px Button + Chevron-3-Dot */
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.story-list-header {
padding-top: 10px; padding-bottom: 10px;
border-bottom: 0.5px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-secondary);
}
.story-list-header .right { text-align: right; }
.story-row {
border-bottom: 0.5px solid var(--border-subtle);
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out);
}
.story-row:hover { background: var(--surface-2); }
.story-row.selected {
background: var(--surface-1);
border-left: 2px solid var(--accent);
padding-left: 14px;
}
.story-row .title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.story-row .meta {
font-size: 12px; color: var(--text-secondary);
margin-top: 4px;
display: flex; gap: 10px; align-items: center;
}
.story-row .meta .comment-btn,
.story-row .meta .attachment-info {
display: flex; align-items: center; gap: 3px;
background: transparent; border: 0;
color: inherit; cursor: pointer;
font-family: inherit; font-size: inherit;
padding: 0;
}
.story-row .meta .comment-btn:hover,
.story-row.selected .meta .comment-btn { color: var(--accent); }
.story-row .meta .ti { font-size: 13px; }
.lane-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
border-radius: var(--radius-pill);
text-align: center;
width: fit-content;
background: rgba(255,255,255,0.07);
color: var(--text-primary);
}
.lane-badge.triage { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.lane-badge.spinning { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.lane-badge.showcase { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
/* US-76: WOVEN im Spinning-Stil (getönt + 100%-Schrift), aber im GOOD-Grün —
* Erfolg, ohne so dominant wie ein gefülltes Badge zu wirken (Maintainer-Befund). */
.lane-badge.woven { background: color-mix(in srgb, var(--woven) 18%, transparent); color: var(--woven); }
/* US-79: Lückenschluss — jede Lane eine Farbe. candidates=Teal, backlog=Stahl-Blau,
* cut=Rot (für die spätere CUT-Sichtungsansicht). Alles getönter Spinning-Stil. */
.lane-badge.candidates{ background: color-mix(in srgb, var(--color-info) 18%, transparent); color: var(--color-info); }
.lane-badge.backlog { background: color-mix(in srgb, var(--lane-backlog) 18%, transparent); color: var(--lane-backlog); }
.lane-badge.cut { background: color-mix(in srgb, var(--color-error) 18%, transparent); color: var(--color-error); }
.size-letter {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
}
.size-letter.s { color: var(--color-warning); }
.size-letter.m { color: var(--color-info); }
.size-letter.l { color: var(--color-error); }
.estimate { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions .quick-move {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 4px;
width: 140px; /* Reicht für längstes Wort CANDIDATES */
height: 26px; /* Fixe Höhe — keine vertikale Verzerrung */
box-sizing: border-box;
background: transparent;
color: var(--accent); /* Glow: Text in Accent */
border: 0.5px solid color-mix(in srgb, var(--accent) 35%, transparent); /* Glow: subtile Accent-Border */
border-radius: var(--radius-sm);
padding: 0 8px;
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out),
color var(--motion-fast) var(--ease-out);
}
.row-actions .quick-move > span:first-child {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row-actions .quick-move:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
}
.row-actions .quick-move .ti {
color: var(--accent);
opacity: 0.7;
font-size: 12px;
}
.row-actions .quick-move:hover .ti { opacity: 1; }
.row-actions .quick-move:hover { border-color: var(--accent); color: var(--accent); }
.row-actions .quick-move .ti { font-size: 12px; opacity: 0.7; }
.row-actions .more-menu {
background: transparent;
color: var(--text-tertiary);
border: 0;
padding: 2px 4px;
cursor: pointer;
border-radius: 3px;
}
.row-actions .more-menu:hover { background: var(--surface-2); color: var(--text-primary); }
/* ----- Drawer ----------------------------------------------------------- */
.drawer {
background: var(--surface-1);
border-left: 0.5px solid var(--border);
display: flex; flex-direction: column;
overflow: hidden;
}
.drawer-header {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
border-bottom: 0.5px solid var(--border-subtle);
}
.drawer-header .story-id { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--text-secondary); }
.drawer-header button { background: transparent; color: var(--text-tertiary); border: 0; padding: 4px; cursor: pointer; }
.drawer-header button:hover { color: var(--text-primary); }
/* US-151/FLOCK-094: min-height:0 lets this flex child actually scroll in Safari (default min-height:auto
keeps it from shrinking below content → a resized textarea would overflow + get clipped by the
.drawer overflow:hidden, feeling "non-resizable"). Chromium is lenient; Safari needs this. */
.drawer-body { flex: 1; overflow-y: auto; min-height: 0; }
.drawer-title-block { padding: 14px 16px 8px; }
.drawer-title-block h2 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.drawer-title-block .meta { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.drawer-title-block .size-pill {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-info) 15%, transparent);
color: var(--color-info);
}
.drawer-title-block .estimate-text { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.drawer-title-block .quick-move {
background: transparent;
color: var(--accent);
border: 0.5px solid var(--accent);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-size: 12px;
font-family: var(--font-mono);
cursor: pointer;
}
.drawer section {
padding: 12px 16px;
border-top: 0.5px solid var(--border-subtle);
}
.drawer section .section-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--text-secondary);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.drawer section .section-label .kis { color: var(--accent); margin-left: auto; }
.drawer section p { font-size: 13px; color: var(--text-primary); line-height: 1.6; margin: 0; }
.drawer section ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-primary); line-height: 1.7; }
.comment-item {
background: var(--surface-2);
padding: 8px 10px;
border-radius: var(--radius-sm);
margin-bottom: 6px;
}
.comment-item:last-child { margin-bottom: 0; }
.comment-item .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.comment-item .body { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.conversation-distilled {
background: var(--surface-2);
border-left: 2px solid var(--accent);
padding: 10px 12px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 13px; color: var(--text-primary); line-height: 1.6;
}
.drawer-footer {
border-top: 0.5px solid var(--border);
padding: 10px 12px;
background: var(--surface-1);
}
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
flex: 1;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 7px 9px;
outline: none;
resize: vertical;
min-height: 28px;
transition: border-color var(--motion-fast) var(--ease-out);
}
.composer textarea:focus { border-color: var(--accent); }
.composer .send-btn {
background: var(--accent-fill);
color: var(--on-accent);
border: 0;
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
display: flex; align-items: center; gap: 4px;
transition: opacity var(--motion-fast) var(--ease-out);
}
.composer .send-btn:hover { opacity: 0.9; }
.composer-hints {
display: flex; gap: 12px; margin-top: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
/* ----- Inline Quick-Comment Popover ------------------------------------ */
.quick-comment-popover {
margin: 0 16px 0 32px;
background: var(--surface-2);
border: 0.5px solid var(--accent);
border-radius: var(--radius-md);
padding: 8px 10px;
box-shadow: var(--shadow-md);
}
.quick-comment-popover .header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-secondary);
}
.quick-comment-popover .header .ti { font-size: 13px; color: var(--accent); }
.quick-comment-popover .header .label { color: var(--text-tertiary); }
.quick-comment-popover .header .hint { color: var(--text-disabled); margin-left: auto; }
.quick-comment-popover textarea {
width: 100%;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
outline: none;
resize: vertical;
box-sizing: border-box;
}
/* ----- Cycle-Menu Popover ---------------------------------------------- */
.cycle-menu {
position: absolute;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 6px;
min-width: 240px;
z-index: 100;
}
.cycle-menu .menu-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-secondary);
padding: 6px 8px;
}
.cycle-menu button {
display: flex; align-items: center; gap: 10px;
width: 100%;
background: none; border: 0;
color: var(--text-primary);
font-size: 13px;
padding: 8px 10px;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--motion-fast) var(--ease-out);
}
.cycle-menu button:hover { background: var(--surface-2); }
.cycle-menu button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.cycle-menu button:disabled:hover { background: transparent; }
.cycle-menu button .ti { font-size: 14px; color: var(--accent); }
.cycle-menu .ritual-note {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.cycle-menu hr { border: 0; border-top: 0.5px solid var(--border-subtle); margin: 4px 0; }
/* ----- 3-Dot-Menu ------------------------------------------------------- */
.row-context-menu {
position: absolute;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 4px;
min-width: 180px;
z-index: 100;
}
.row-context-menu button {
display: flex; align-items: center; gap: 10px;
width: 100%;
background: none; border: 0;
color: var(--text-primary);
font-size: 13px;
padding: 8px 12px;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
}
.row-context-menu button:hover { background: var(--surface-2); }
.row-context-menu button.destructive { color: var(--color-error); }
.row-context-menu button .ti { font-size: 13px; color: var(--text-tertiary); }
.row-context-menu button.destructive .ti { color: var(--color-error); }
.row-context-menu hr { border: 0; border-top: 0.5px solid var(--border-subtle); margin: 4px 0; }
/* ----- Status-Bar ------------------------------------------------------- */
.vault-status { display: flex; align-items: center; gap: 6px; }
.vault-status .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-success);
}
/* ----- Kanban-View Drawer als Slide-Over (Revision 2026-05-29) ---------- */
/* Drawer in Kanban öffnet als rechtes Overlay, ohne dass das Board */
/* horizontal weichen muss (Spalten würden sonst abgeschnitten). */
.kanban-drawer-container {
position: relative;
height: 100%;
overflow: hidden;
}
.kanban-drawer-container > .drawer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 400px;
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--motion-medium) var(--ease-out);
z-index: 50;
}
.kanban-drawer-container.drawer-open > .drawer {
transform: translateX(0);
}
/* ----- US-62/US-64: Board Kanban-View (vendored from iron-labs loom-shell-preview) ----------- */
.kanban-view {
display: grid;
grid-template-columns: repeat(6, 240px); /* US-64: Triage | Candidates | Backlog | Spinning | Showcase | Woven (Cut excluded — D1) */
gap: 12px;
padding: 16px;
overflow-x: auto;
align-items: stretch; /* US-263: lanes fill the row height — the whole column is a drop surface */
}
/* US-263 (FLOCK-154): Trello-style lane container — visible surface over the full height, so a
drop can land anywhere in the lane (an empty lane used to offer only its header as a target). */
.kanban-column {
display: flex; flex-direction: column; gap: 8px; min-width: 0;
background: var(--surface-1);
border: 0.5px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 8px;
}
.kanban-column-header {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 4px 8px;
position: sticky; top: 0;
background: var(--surface-1); /* US-263: matches the lane container (was the undefined --surface-0) */
}
.kanban-column-header .name {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--text-secondary);
font-weight: 500;
}
.kanban-column-header .count { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.kanban-column-header .count.spinning { color: var(--color-success); }
.kanban-column-header .count.showcase { color: var(--accent); }
.kanban-column-header .count.woven { color: var(--woven); } /* US-76 */
.kanban-column-header .count.triage { color: var(--color-warning); } /* US-79 */
.kanban-column-header .count.candidates { color: var(--color-info); } /* US-79 */
.kanban-column-header .count.backlog { color: var(--lane-backlog); } /* US-79 */
.kanban-column-header .count.cut { color: var(--color-error); } /* US-79 */
.story-card {
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
padding: 10px;
transition: border-color var(--motion-fast) var(--ease-out);
}
.story-card:hover { border-color: var(--border-strong); cursor: pointer; }
.story-card.needs-triage { border-left: 2px solid var(--color-warning); padding-left: 8.5px; }
/* US-72: kanban drag-and-drop — dragged card dims; a valid drop column highlights in accent. */
.story-card[draggable="true"]:active { cursor: grabbing; }
.story-card.dragging { opacity: 0.45; }
.kanban-column.drop-target {
outline: 1px dashed var(--accent);
outline-offset: 3px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.story-card .title { font-size: 14px; color: var(--text-primary); font-weight: 500; margin-bottom: 6px; line-height: 1.35; overflow-wrap: anywhere; }
.story-card .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.story-card .meta .card-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.story-card .meta .est { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.story-card .meta .triage-badge {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
color: var(--color-warning);
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
padding: 1px 6px; border-radius: var(--radius-pill);
}
/* US-176: Sticky-Stories volume marker (§6) — gets "louder" as a card outlasts cycles.
Whispers = quiet/muted, Speaks = accent, Calls = strong + bordered (permanent, hard to miss). */
.story-card .meta .sticky {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
padding: 1px 6px; border-radius: var(--radius-pill);
}
.story-card .meta .sticky-whispers { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.story-card .meta .sticky-speaks { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.story-card .meta .sticky-calls { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 18%, transparent); font-weight: 700; border: 0.5px solid var(--color-error); }
/* US-263: an empty lane is an explicit drop zone — not a bare dash. Capped: with stretch the
column can be as tall as the fullest lane, and a 20k-px dashed box reads absurd; the drop
itself works on the WHOLE column (the drag wiring targets .kanban-column). */
.kanban-empty {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1.5px dashed var(--border);
border-radius: var(--radius-sm);
min-height: 72px;
max-height: 260px;
color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px;
}
/* US-77: Comment-/Attachment-Counts (💬/📎) — immer sichtbar (auch 0). In der Liste eine eigene
Spalte, im Kanban-Chip rechts im .ml-auto-Cluster (Mockup-Parität). */
.card-counts { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.card-counts .cnt { display: inline-flex; gap: 3px; align-items: center; }
.card-counts .cnt .ti { font-size: 13px; color: var(--text-tertiary); }
.story-list-header .comm-col { display: inline-flex; gap: 8px; align-items: center; }
.story-list-header .comm-col .ti { font-size: 13px; }
.story-card .meta .ml-auto { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
/* Kanban size-chip (vendored from mockup) — nur sichtbar, wenn die Story eine Size trägt (Weg 1). */
.story-card .meta .size { font-family: var(--font-mono); font-size: 11px; padding: 0 5px; border-radius: var(--radius-pill); }
.story-card .meta .size.s { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, transparent); }
.story-card .meta .size.m { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 15%, transparent); }
.story-card .meta .size.l { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); }
/* US-73 (FLOCK-031): the Card-Detail-Drawer lives IN the content area — a column beside the board,
not a viewport overlay. So topbar/sub-bar/footer stay visible. The board section is a grid that
shrinks the board content when the drawer opens. The .drawer-internals are vendored above. */
/* US-78: Diese Regel ist die Show-Regel der Board-Section (display: grid). Die Board-
Section ist DESHALB bewusst aus der generischen `display: block`-Section-Liste unten
ausgenommen — sonst überschrieb jene (gleich spezifisch, aber später in der Quelle)
das Grid auf block, die grid-template-columns blieben wirkungslos ("keine Story"). */
[data-section="board"] .section-board {
display: grid;
/* minmax(0, 1fr) statt nacktem 1fr — sonst bläht die flexible Spalte auf
Inhaltsbreite auf (die breite List-View) und drängt die Drawer-Spalte in eine
zweite Zeile. minmax(0,…) kappt das Track-Minimum hart. */
grid-template-columns: minmax(0, 1fr) 0;
grid-template-rows: 1fr;
transition: grid-template-columns var(--motion-medium) var(--ease-out);
height: 100%;
overflow: hidden;
}
.section-board.drawer-open { grid-template-columns: minmax(0, 1fr) 520px; } /* US-78: Maintainer-Override 400→520 (iron-labs 400 war der Story-Drawer-Default) */
/* US-78: beide Inhalts-Spalten fest in Zeile 1 — verbietet jeden Zeilen-Umbruch des Drawers. */
.section-board > .kanban-view,
.section-board > .list-view { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; }
#card-drawer { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; } /* US-82-Nachbesserung: Drawer-Body scrollt (siehe .section-setup) */
/* US-263 (FLOCK-044): the drawer separates itself from board/list with an accent edge — the
generic .drawer hairline (0.5px --border) was too subtle against the same-surface content. */
#card-drawer { border-left: 2px solid var(--accent); }
/* Closed: the 0-width column collapses it; this also stops .drawer's display:flex from showing. */
.section-board:not(.drawer-open) > #card-drawer { display: none; }
.drawer-backdrop { display: none; } /* US-73: the beside-layout doesn't dim the board */
/* US-74: drawer content parity — sharper section separators (FLOCK-032), empty-states for the
always-present Comments/Attachments (FLOCK-033), and an inert composer placeholder (D3). */
.drawer-body > section { border-top: 0.5px solid var(--border); }
/* US-78 (Showcase-Nachbesserung): CONVERSATION = narratives Herz der Story → dezent als
Callout hervorgehoben (Accent-Tint + linke Kante), ohne laut zu sein.
US-267: die Read-Sektionen sitzen jetzt in Zonen-Boxen — der Akzent trägt auf der ZONE
(die alte `.drawer-body > section.section-conversation`-Kante träfe das genestete Element
nicht mehr); beacon-/flock-Tend teilen die .tend-zone unangetastet. */
.tend-zone.zone-conversation {
border-left: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* US-267: inside a zone the section needs no own top separator (the box separates). */
.tend-zone .section-conversation { border-top: none; }
.drawer .empty-hint { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.drawer-footer .composer textarea:disabled,
.drawer-footer .composer .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.drawer-footer .composer-hints { color: var(--text-tertiary); }
/* US-75 (FLOCK-034): board-label chips — colour from the curated token palette (no free hex). */
.label-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.story-row .label-chips { margin: 5px 0 0; }
.drawer-title-block .label-chips { margin-top: 8px; }
.label-chip {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
padding: 1px 7px; border-radius: var(--radius-pill);
background: var(--surface-2); color: var(--text-secondary); /* neutral fallback */
}
.label-chip.c-info { background: color-mix(in srgb, var(--color-info) 18%, transparent); color: var(--color-info); }
.label-chip.c-accent { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.label-chip.c-success { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.label-chip.c-warning { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.label-chip.c-error { background: color-mix(in srgb, var(--color-error) 18%, transparent); color: var(--color-error); }
.label-chip.c-neutral { background: var(--surface-2); color: var(--text-secondary); }
/* US-261 (FLOCK-153/072): owner chip — initial-avatar + username, shared by kanban card, list row
and drawer meta (unscoped on purpose, C31). Avatar buckets reuse the semantic token palette. */
.owner-chip {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
color: var(--text-secondary);
}
.owner-avatar {
display: inline-flex; align-items: center; justify-content: center; flex: none;
position: relative; overflow: hidden; /* US-265: the woven img overlays the initials */
width: 16px; height: 16px; border-radius: 50%;
font-size: 8px; font-weight: 600; letter-spacing: 0;
}
.owner-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* US-265: member avatar preview in the Team dialog — the woven identity next to the fields. */
.member-avatar {
width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none;
background: var(--surface-2); border: 0.5px solid var(--border);
display: inline-flex; align-self: end; margin-bottom: 2px;
}
.member-avatar img { width: 100%; height: 100%; display: block; }
.owner-avatar.av-1 { background: color-mix(in srgb, var(--color-info) 22%, transparent); color: var(--color-info); }
.owner-avatar.av-2 { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.owner-avatar.av-3 { background: color-mix(in srgb, var(--color-success) 22%, transparent); color: var(--color-success); }
.owner-avatar.av-4 { background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning); }
.owner-avatar.av-5 { background: color-mix(in srgb, var(--color-error) 22%, transparent); color: var(--color-error); }
/* US-266: the CASTING zone — three compact measures side by side, dark token controls. */
.casting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.casting-grid label {
display: flex; flex-direction: column; gap: 4px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
color: var(--text-tertiary);
}
/* US-262 (FLOCK-153): sub-bar member filter — quiet next to the search, accented while it narrows. */
.member-filter {
background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm);
color: var(--text-secondary); font-family: inherit; font-size: 12px; padding: 5px 8px;
}
.member-filter.filter-on { border-color: var(--accent); color: var(--accent); }
/* US-67: view-toggle shows one view at a time (the .view-toggle / .list-view internals are vendored). */
.section-board[data-view="kanban"] .list-view { display: none; }
.section-board[data-view="list"] .kanban-view { display: none; }
/* US-71: the list ACTIONS column is back (write-side); the base 5-column grid applies.
The kebab trigger is a bordered button (present, not a faint glyph) — it opens the shared
actions menu. The menu is fixed-positioned (board.js) so the list scroll never clips it. */
.card-menu-btn {
background: transparent;
color: var(--text-secondary);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 9px;
cursor: pointer;
}
.card-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.card-menu-btn .ti { font-size: 15px; }
/* US-71: the drawer trigger is labelled + accent-coloured (the roomy detail view — more present). */
.card-menu-btn-labeled {
display: inline-flex; align-items: center; gap: 6px;
border-color: var(--accent);
color: var(--accent);
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 12px;
}
.card-menu-btn-labeled:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-actions-menu {
position: fixed;
width: 180px;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 4px;
z-index: 70;
}
.card-actions-menu .menu-group-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
color: var(--text-tertiary); padding: 6px 8px 4px;
}
.card-actions-menu .menu-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; border-radius: var(--radius-sm);
color: var(--text-primary); font-family: var(--font-mono); font-size: 12px;
padding: 7px 8px; cursor: pointer;
}
.card-actions-menu .menu-item:hover { background: var(--surface-2); color: var(--accent); }
/* US-100/US-101: STORY group — icons muted, destructive exits in error red (mockup .row-context-menu). */
.card-actions-menu .menu-item .ti { font-size: 13px; color: var(--text-tertiary); margin-right: 2px; }
.card-actions-menu .menu-item.destructive,
.card-actions-menu .menu-item.destructive .ti { color: var(--color-error); }
.card-actions-menu .menu-item.destructive:hover { background: var(--surface-2); color: var(--color-error); }
.card-actions-menu .menu-sep { border: 0; border-top: 0.5px solid var(--border-subtle); margin: 4px 0; }
/* Drawer LINKS section: simple mono reference rows. */
.drawer .card-links { display: flex; flex-direction: column; gap: 4px; }
.drawer .card-links .link-row { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.drawer .card-links .link-row .k { color: var(--text-tertiary); margin-right: 6px; }
.drawer section .conversation-raw { font-size: 13px; color: var(--text-primary); line-height: 1.6; white-space: pre-wrap; margin: 0; }
/* Selected-State für Kanban-Cards (parallel zu story-row.selected) */
.story-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
/* ============================================================================
* Section-Switching (Board / Flocks / Setup / Logbook)
* Materialisiert ADR-0009 Flocks + Sub-Bar-Kontext-Sensitivität (ADR-0006)
* ============================================================================ */
/* Alle Sub-Bars und Content-Sections per Default ausblenden,
* die zur aktiven Section gehörige wird via [data-section] eingeblendet. */
.app-subbar { display: none; }
.content-section { display: none; }
[data-section="board"] .subbar-board,
[data-section="flocks"] .subbar-flocks,
[data-section="setup"] .subbar-setup { display: flex; }
/* US-285/US-286 (FLOCK-159/160): Prompt-Lab + Documents got their own sub-bars. */
[data-section="prompt-lab"] .subbar-prompt-lab { display: flex; }
[data-section="documents"] .subbar-documents { display: flex; }
/* US-78/US-80/US-103: .section-board, .section-setup UND .section-flocks fehlen hier bewusst —
sie werden unten als `display: grid` gezeigt (Drawer als Spalte). Würden sie hier zusätzlich
auf block gesetzt, gewänne block (gleich spezifisch, später in der Quelle). */
[data-section="dashboard"] .section-dashboard { display: block; } /* US-142 */
/* US-103: flocks section = grid so the detail drawer opens as a column (US-73/80 pattern). */
[data-section="flocks"] .section-flocks {
display: grid;
grid-template-columns: minmax(0, 1fr) 0; /* minmax(0,…) — see .section-board note */
grid-template-rows: 1fr;
transition: grid-template-columns var(--motion-medium) var(--ease-out);
height: 100%;
overflow: hidden;
}
.section-flocks.drawer-open { grid-template-columns: minmax(0, 1fr) 520px; }
.section-flocks > .flocks-view { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; }
#flock-drawer { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.section-flocks:not(.drawer-open) > #flock-drawer { display: none; }
/* US-181 (KI-Tiefe): Prompt Lab — list + editor drawer (grid-column pattern like flocks). */
[data-section="prompt-lab"] .section-prompt-lab {
display: grid;
grid-template-columns: minmax(0, 1fr) 0;
grid-template-rows: 1fr;
transition: grid-template-columns var(--motion-medium) var(--ease-out);
height: 100%;
overflow: hidden;
}
.section-prompt-lab.drawer-open { grid-template-columns: minmax(0, 1fr) 560px; }
.section-prompt-lab > .prompt-lab-view { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; padding: var(--space-6); }
.section-prompt-lab > #prompt-lab-drawer { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; }
.section-prompt-lab:not(.drawer-open) > #prompt-lab-drawer { display: none; }
.prompt-lab-title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--space-2); }
.prompt-lab-sub { color: var(--text-secondary); max-width: 64ch; margin: 0; }
.prompt-lab-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.prompt-card {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-4); border: 0.5px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-1); cursor: pointer; transition: border-color var(--motion-medium) var(--ease-out);
}
.prompt-card:hover { border-color: var(--accent); }
.prompt-card-title { font-weight: 500; color: var(--text-primary); }
.prompt-card-id { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.8em; margin-left: var(--space-2); }
.prompt-card-purpose { display: block; color: var(--text-secondary); font-size: 0.85rem; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-card-text { min-width: 0; } /* lets the purpose line ellipsize instead of widening the card */
.pl-empty { color: var(--text-tertiary); }
.doc-list-empty { color: var(--text-tertiary); padding: 8px 4px; } /* US-286: honest empty-search hint */
.pl-badge { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.pl-badge-edited { color: var(--accent); font-weight: 500; }
.pl-label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin: var(--space-4) 0 var(--space-2); }
.pl-hint { color: var(--text-tertiary); font-weight: 400; }
/* US-248: the prompt Steckbrief — purpose, integration location, and the team note (prefs.yaml). */
.pl-about {
background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
}
.pl-about-head { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.pl-about-purpose { margin: var(--space-2) 0; color: var(--text-primary); line-height: 1.5; }
.pl-about-loc { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; }
.pl-loc-chip {
display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem;
padding: 2px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.pl-note-row {
display: flex; align-items: center; gap: var(--space-2);
margin-top: var(--space-3); padding-top: var(--space-3); border-top: 0.5px dashed var(--border);
color: var(--text-tertiary);
}
.pl-note-row input { flex: 1; min-width: 0; }
.pl-editor {
width: 100%; min-height: 220px; box-sizing: border-box; resize: vertical;
font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5;
color: var(--text-primary); background: var(--surface-2);
border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3);
}
.pl-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
/* US-249: the slot-autocomplete menu — floats right under the editor, scrolls past ~8 rows. */
.pl-editor-wrap { position: relative; }
.pl-slot-menu {
position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 2px;
background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
padding: var(--space-1); max-height: 240px; overflow: auto;
}
.pl-slot-menu[hidden] { display: none; } /* explicit display + [hidden] exception (C15 rule) */
.pl-slot-group { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-tertiary); padding: var(--space-2) var(--space-2) 2px; }
.pl-slot-item {
display: flex; gap: var(--space-3); align-items: baseline; cursor: pointer;
padding: var(--space-2); border-radius: var(--radius-sm);
}
.pl-slot-item code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
.pl-slot-item span { font-size: 0.78rem; color: var(--text-secondary); }
.pl-slot-item.selected, .pl-slot-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pl-transparency { margin-top: var(--space-5); border-top: 0.5px solid var(--border); padding-top: var(--space-4); }
.pl-trans-head { font-weight: 500; display: flex; gap: var(--space-2); align-items: baseline; color: var(--text-primary); }
.pl-meta { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.75rem; }
.pl-rendered, .pl-response {
white-space: pre-wrap; word-break: break-word; margin: var(--space-2) 0 0;
font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary);
background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: var(--space-3);
height: 180px; min-height: 64px; overflow: auto; resize: vertical; /* US-181: user-resizable height */
}
/* US-251 (BEACON-260 E1): Documents — template pills, live-render preview, export bar.
US-256 (FLOCK-150): the section carries the sibling views' padding — without it the title sticks
to the window edge (maintainer catch, C99 showcase). */
[data-section="documents"] .section-documents { display: block; height: 100%; overflow: auto; padding: var(--space-6); }
.documents-view { max-width: 900px; }
.documents-title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--space-2); }
.documents-sub { color: var(--text-secondary); max-width: 64ch; margin: 0; }
.documents-preview {
white-space: pre-wrap; word-break: break-word; margin: var(--space-4) 0 0;
font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; color: var(--text-primary);
background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: var(--space-4); min-height: 200px;
}
.documents-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.documents-actions[hidden] { display: none; } /* explicit display + [hidden] exception (C15 rule) */
.documents-hint { color: var(--text-tertiary); font-size: 0.78rem; }
/* US-258 (mockup-fixed): the Documents home — quick-access cards (pinned, max 3) + template list. */
/* Breathing room under the intro text — maintainer polish, C101 sign-off. */
.documents-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.doc-home-card {
position: relative; background: var(--surface-2); border: 0.5px solid var(--border);
border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); cursor: pointer;
display: flex; flex-direction: column; gap: 2px;
transition: border-color var(--motion-medium) var(--ease-out);
}
.doc-home-card:hover, .doc-home-card.active { border-color: var(--accent); }
.doc-home-card > .ti { font-size: 1.1rem; color: var(--accent); }
.doc-home-new { border-style: dashed; }
.doc-home-new > .ti { color: var(--text-tertiary); }
.doc-home-title { font-weight: 500; color: var(--text-primary); }
.doc-home-sub { font-size: 0.78rem; color: var(--text-secondary); }
.doc-pin-toggle {
background: none; border: none; color: var(--text-tertiary); cursor: pointer;
padding: 2px; font-size: 0.9rem;
}
.doc-pin-toggle:hover { color: var(--accent); }
.doc-home-card .doc-pin-toggle { position: absolute; top: var(--space-2); right: var(--space-2); }
.documents-list { margin-top: var(--space-4); background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.doc-list-row {
display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4);
border-top: 0.5px solid var(--border); cursor: pointer; font-size: 0.9rem;
}
.doc-list-row:first-child { border-top: none; }
.doc-list-row:hover, .doc-list-row.active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.doc-list-id { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); }
.doc-list-badge { font-size: 0.75rem; color: var(--text-secondary); margin-left: auto; }
/* US-257: the template editor card (new blank/copy · edit override/team); reuses the pl-editor and
pl-slot-menu styles — shared hooks stay shared (C36 rule). */
.documents-tpl-editor {
background: var(--surface-2); border: 0.5px solid var(--accent); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
}
.documents-tpl-editor[hidden] { display: none; } /* explicit display + [hidden] exception (C15 rule) */
.doc-tpl-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.doc-tpl-row input[type="text"] { flex: 1; min-width: 200px; }
/* US-252/253: the curation cards — frozen prose with a stamp, or the draft/edit flow (mockup-fixed). */
.documents-curation { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.doc-cur-card {
background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
}
.doc-cur-card.editing { border-color: var(--accent); }
.doc-cur-head { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.doc-cur-prose { margin: 0; color: var(--text-primary); line-height: 1.55; }
.doc-cur-empty { margin: 0; color: var(--text-tertiary); }
.doc-cur-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.doc-cur-stamp {
display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem;
padding: 2px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.doc-cur-editor {
width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical;
font-size: 0.9rem; line-height: 1.55; color: var(--text-primary); background: var(--surface-1);
border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3);
}
/* US-103: the open flock keeps its context mark in the list (mockup .story-row.selected). */
.flock-item.selected {
border-left: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* US-103: flock-detail drawer — meta rows, edit form, tag picker. */
#flock-drawer .meta-rows { display: flex; flex-direction: column; gap: 5px; }
#flock-drawer .meta-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
#flock-drawer .meta-row .k { width: 90px; color: var(--text-tertiary); }
#flock-drawer .flock-body-full { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
#flock-drawer .fd-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
#flock-drawer .fd-field > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-tertiary); }
#flock-drawer .fd-field textarea,
#flock-drawer .fd-field select {
background: var(--surface-2); color: var(--text-primary);
border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 9px; font-family: inherit; font-size: 13px;
}
#flock-drawer .fd-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
#flock-drawer .fd-field textarea:focus,
#flock-drawer .fd-field select:focus { outline: none; border-color: var(--accent); }
/* Tag picker: the curated label chips become toggle buttons (US-75 palette). */
#flock-drawer .tag-picker { display: flex; flex-wrap: wrap; gap: 5px; }
#flock-drawer .tag-pick { cursor: pointer; border: 1px solid transparent; opacity: 0.55; }
#flock-drawer .tag-pick:hover { opacity: 0.85; }
#flock-drawer .tag-pick.on { opacity: 1; border-color: currentColor; }
/* ----- Flocks-View: Throw-Composer (persistente Zone) ------------------ */
.flocks-view { padding: 16px; }
.throw-composer {
background: var(--surface-1);
border: 0.5px solid var(--accent);
border-radius: var(--radius-lg);
padding: 14px 16px;
margin-bottom: 16px;
}
.throw-composer .header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.throw-composer .header .ti-icon { font-size: 18px; color: var(--accent); }
.throw-composer .header .title {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.throw-composer .header .hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.throw-composer .header .shortcut {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.throw-composer textarea {
width: 100%;
min-height: 56px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
outline: none;
resize: vertical;
box-sizing: border-box;
margin-bottom: 8px;
transition: border-color var(--motion-fast) var(--ease-out);
}
.throw-composer textarea:focus { border-color: var(--accent); }
/* US-56 (FLOCK-018): right-aligned action cluster. The flex-growing tags-input
was replaced by a non-growing subtype-select in US-55, leaving a gap; we drop
the spacer and right-align the group instead. Carries the US-58 attach-btn
(cluster grows leftward from the right edge — no re-design). */
.throw-composer .composer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* US-56 (FLOCK-018): the subtype-select fell back to the light browser-default
look in dark theme. Align it to the token world like .form-field select. */
.throw-composer .composer-actions select {
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 6px 9px;
outline: none;
transition: border-color var(--motion-fast) var(--ease-out);
}
.throw-composer .composer-actions select:focus { border-color: var(--accent); }
/* US-68 (FLOCK-024): un-scoped from .throw-composer so the modal's #flock-attach button gets the
dark token styling too — scoped, it fell back to the light UA default (same family as US-59). */
.attach-btn {
display: flex; align-items: center; gap: 5px;
background: transparent;
color: var(--text-secondary);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.throw-composer .throw-btn {
display: flex; align-items: center; gap: 6px;
background: var(--accent-fill);
color: var(--on-accent);
border: 0;
border-radius: var(--radius-sm);
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: opacity var(--motion-fast) var(--ease-out);
}
.throw-composer .throw-btn:hover { opacity: 0.9; }
/* US-59 (FLOCK-021): .btn-primary was used (modal Throw button) but never defined,
so it fell back to the light UA default. Mirror the composer accent button. */
.btn-primary {
display: flex; align-items: center; gap: 6px;
background: var(--accent-fill);
color: var(--on-accent);
border: 0;
border-radius: var(--radius-sm);
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: opacity var(--motion-fast) var(--ease-out);
}
.btn-primary:hover { opacity: 0.9; }
/* C15 rule, 4th occurrence (US-302): the explicit `display: flex` above beats the [hidden] UA
default, so a hidden .btn-primary stayed visible AND clickable — a dead button answering 409. */
.btn-primary[hidden] { display: none; }
/* US-101: destructive primary (Cut story) — same shape, error red instead of accent. */
.btn-primary.btn-destructive { background: var(--color-error); }
/* US-101: cut modal details — the story id in the header, the hint turning into the error message. */
.modal .cut-story-ref { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.flock-modal-row .hint.cut-hint-error { color: var(--color-error); }
/* US-109 (improvement #2): the stage footer (with the decided-counter) stays visible on long
candidate lists. LOOM deviation from the vendored casting block. */
.casting-content .stage-footer {
position: sticky;
bottom: 0;
background: var(--surface-page);
padding-top: 10px;
padding-bottom: 10px;
border-top: 0.5px solid var(--border-subtle);
}
/* US-58 (ADR-0009): chosen-attachment chip, shared by composer + modal. Replaces the
paperclip button while a file is selected; the × clears it. */
/* The explicit display below would otherwise beat the [hidden] UA default — keep hidden hidden. */
.attach-chip[hidden] { display: none; }
.attach-chip {
display: inline-flex; align-items: center; gap: 5px;
max-width: 180px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 4px 3px 8px;
}
.attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .chip-remove {
display: inline-flex; align-items: center;
background: transparent; border: 0; color: var(--text-tertiary);
cursor: pointer; padding: 2px; border-radius: var(--radius-sm);
}
.attach-chip .chip-remove:hover { color: var(--color-error); }
/* ----- Flock-Liste & Items --------------------------------------------- */
.flock-list { display: flex; flex-direction: column; gap: 8px; }
.flock-item {
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.flock-item:hover { border-color: var(--border-strong); }
.flock-item[data-source="showcase"] { border-left: 2px solid var(--color-warning); padding-left: 12px; }
.flock-item[data-status="processed"] { opacity: 0.78; }
.flock-item[data-status="discarded"] { opacity: 0.75; }
.flock-item[data-status="deferred"] { opacity: 0.85; }
/* US-164: bug flock — distinct marker (red accent + badge) so bugs stand out + get casting priority.
.flock-type-bug is global (not scoped to .flock-item) so it also styles the casting-sighting line. */
.flock-item[data-type="bug"] { border-left: 2px solid var(--color-error); padding-left: 12px; }
.flock-type-bug { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--color-error); background: color-mix(in srgb, var(--color-error) 12%, transparent); border: 0.5px solid color-mix(in srgb, var(--color-error) 30%, transparent); padding: 1px 7px; border-radius: var(--radius-pill); }
.flock-type-bug .ti { font-size: 12px; }
/* US-208: feature flock — distinct marker (info accent) so feature requests stand out as roadmap/casting input.
.flock-type-feature is global (mirrors .flock-type-bug) so it also styles the casting-sighting line. */
.flock-item[data-type="feature"] { border-left: 2px solid var(--color-info); padding-left: 12px; }
.flock-type-feature { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--color-info); background: color-mix(in srgb, var(--color-info) 12%, transparent); border: 0.5px solid color-mix(in srgb, var(--color-info) 30%, transparent); padding: 1px 7px; border-radius: var(--radius-pill); }
.flock-type-feature .ti { font-size: 12px; }
.flock-item > header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.flock-item .flock-id {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.flock-item .status-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
border-radius: var(--radius-pill);
}
.status-fresh { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.status-processed { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.status-discarded { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); }
.status-deferred { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, transparent); }
/* US-52: real flock schema-v2 statuses (active/promoted/archived) — see BEACON-047 (status-vocab decision). */
.status-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.status-promoted { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.status-archived { color: var(--text-tertiary); background: rgba(255, 255, 255, 0.05); }
.source-showcase {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-warning);
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
padding: 2px 8px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
gap: 4px;
}
.source-showcase .ti { font-size: 12px; }
.flock-item .timestamp {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.flock-item .body {
font-size: 13px;
color: var(--text-primary);
line-height: 1.5;
}
.flock-item[data-status="processed"] .body,
.flock-item[data-status="deferred"] .body { color: var(--text-secondary); }
.flock-item .tags {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.flock-item .tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
background: var(--surface-2);
padding: 2px 7px;
border-radius: var(--radius-pill);
}
/* US-58 (ADR-0009): ATTACHMENTS row — each path links to the serve route. */
.flock-item .attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flock-item .attachment-link {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
background: var(--surface-2);
border: 0.5px solid var(--border);
padding: 3px 8px;
border-radius: var(--radius-sm);
text-decoration: none;
}
.flock-item .attachment-link:hover { color: var(--accent); border-color: var(--accent); }
.flock-item .processed-link {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.flock-item .processed-link strong { color: var(--text-primary); }
/* ----- Quick-Throw-Modal ----------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
z-index: 200;
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--surface-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 520px;
padding: 16px 18px;
border: 0.5px solid var(--border);
}
.modal header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.modal header .ti-icon { font-size: 18px; color: var(--accent); }
.modal header .title {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.modal header .spacer { flex: 1; }
.modal header .close {
background: transparent;
color: var(--text-secondary);
border: 0;
padding: 4px;
cursor: pointer;
border-radius: var(--radius-sm);
}
.modal header .close:hover { background: var(--surface-2); color: var(--text-primary); }
.modal textarea {
width: 100%;
min-height: 72px;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
outline: none;
resize: vertical;
box-sizing: border-box;
margin-bottom: 8px;
}
.modal textarea:focus { border-color: var(--accent); }
/* US-206: theme the Start-cycle inputs (number + theme) like the modal textareas — a bare input
defaults to a white background and breaks in dark mode (Maintainer-Live-Befund Cycle 73). */
#cycle-start-modal-overlay input {
width: 100%;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
outline: none;
box-sizing: border-box;
margin-bottom: 8px;
}
#cycle-start-modal-overlay input:focus { border-color: var(--accent); }
/* US-122: the assign-owner picker — match the modal's input look. */
.assign-select {
width: 100%;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
outline: none;
box-sizing: border-box;
margin-bottom: 8px;
}
.assign-select:focus { border-color: var(--accent); }
.modal .tags-input {
width: 100%;
background: var(--surface-2);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12px;
padding: 5px 8px;
outline: none;
box-sizing: border-box;
margin-bottom: 12px;
}
.modal footer {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.modal footer .spacer { flex: 1; }
.modal footer a {
color: var(--accent);
text-decoration: none;
font-family: inherit;
}
.modal footer a:hover { text-decoration: underline; }
.modal footer .throw-btn {
display: flex; align-items: center; gap: 6px;
background: var(--accent-fill);
color: var(--on-accent);
border: 0;
border-radius: var(--radius-sm);
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.modal footer .throw-btn kbd {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(255,255,255,0.18);
padding: 1px 5px;
border-radius: 3px;
margin-left: 4px;
}
/* ----- Stub-Sections (Setup, Logbook) ---------------------------------- */
.section-stub {
padding: 64px 16px;
text-align: center;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.1em;
}
.section-stub .ti { font-size: 32px; color: var(--text-disabled); display: block; margin: 0 auto 12px; }
/* ============================================================================
* Setup-View (ADR-0010)
* ============================================================================ */
.setup-view { padding: 16px; }
/* ----- Banners (Warnings + Suggestions) -------------------------------- */
.setup-banner {
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.setup-banner.warnings {
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
border: 0.5px solid var(--color-warning);
border-left: 2px solid var(--color-warning);
}
.setup-banner.suggestions {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border: 0.5px solid var(--accent);
border-left: 2px solid var(--accent);
padding: 10px 14px;
}
.setup-banner .ti-icon { flex-shrink: 0; font-size: 18px; }
.setup-banner.warnings .ti-icon { color: var(--color-warning); }
.setup-banner.suggestions .ti-icon { color: var(--accent); font-size: 16px; }
.setup-banner .text { flex: 1; }
.setup-banner.warnings .title {
font-size: 13px;
color: var(--color-warning);
font-weight: 500;
margin-bottom: 2px;
}
.setup-banner.warnings .detail {
font-size: 12px;
color: var(--text-secondary);
}
.setup-banner.suggestions .text {
font-size: 13px;
color: var(--text-primary);
}
.setup-banner .btn-review,
.setup-banner .btn-show {
background: transparent;
border-radius: var(--radius-sm);
padding: 4px 11px;
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
}
.setup-banner.warnings .btn-review {
color: var(--color-warning);
border: 0.5px solid var(--color-warning);
}
.setup-banner.suggestions .btn-show {
color: var(--accent);
border: 0;
}
.setup-banner .dismiss {
background: transparent;
color: var(--text-tertiary);
border: 0;
padding: 4px;
cursor: pointer;
}
/* ----- Setup-Cards ------------------------------------------------------ */
/* US-198: Overview-Landing als responsives Karten-Grid (Maintainer-Wunsch, Design-Runden-Mockup).
auto-fit + minmax wählt die Spaltenzahl nach Breite (2 im Fokus-Panel, 1 bei schmalem Viewport). */
.setup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-content: start; }
.setup-card {
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
transition: border-color var(--motion-fast) var(--ease-out);
}
.setup-card:hover { border-color: var(--border-strong); }
.setup-card[data-status="needs-attention"] { border-color: var(--accent); }
.setup-card[data-status="warning"] { border-color: var(--color-warning); }
.setup-card[data-status="incomplete"] { border-color: var(--color-error); } /* US-81 (FLOCK-039): unvollständig = rot hervorheben, nicht grau */
.setup-card .icon-box {
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.setup-card .icon-box i { font-size: 18px; }
.setup-card[data-status="complete"] .icon-box { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.setup-card[data-status="incomplete"] .icon-box { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); } /* US-81 */
.setup-card[data-status="needs-attention"] .icon-box { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.setup-card[data-status="warning"] .icon-box { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.setup-card .content { flex: 1; }
.setup-card .card-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
flex-wrap: wrap; /* US-198: im schmaleren Grid-Karten-Layout darf last-edit umbrechen */
}
.setup-card .title {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.setup-card .status-pill {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 7px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
gap: 3px;
}
.setup-card .status-pill .ti { font-size: 11px; }
.setup-card[data-status="complete"] .status-pill { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.setup-card[data-status="incomplete"] .status-pill { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 15%, transparent); } /* US-81 */
.setup-card[data-status="needs-attention"] .status-pill { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.setup-card[data-status="warning"] .status-pill { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, transparent); }
/* US-81 (FLOCK-010): Dark-Theme-Scrollbalken — der helle UA-Default stört auf dunklen Flächen.
scrollbar-color für Firefox, ::-webkit-scrollbar für Chromium/WebKit. Nur im Dark-Theme. */
[data-theme="dark"] textarea,
[data-theme="dark"] .drawer-body,
[data-theme="dark"] .setup-view,
[data-theme="dark"] .list-view,
[data-theme="dark"] .kanban-view { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-tertiary) 45%, transparent); border-radius: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
.setup-card .last-edit {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.setup-card .summary {
font-size: 12px;
color: var(--text-secondary);
}
.setup-card .edit-btn {
background: transparent;
color: var(--text-secondary);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 11px;
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.setup-card .edit-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ----- Setup-Sub-Bar Beacon-Counter & Generate-Button ------------------ */
.subbar-setup .setup-info {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 0.1em;
}
.subbar-setup .beacon-counter {
display: flex; align-items: center; gap: 4px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
padding: 3px 9px;
border-radius: var(--radius-pill);
cursor: pointer;
border: 0;
font-family: var(--font-mono);
font-size: 11px;
transition: opacity var(--motion-fast) var(--ease-out);
}
.subbar-setup .beacon-counter:hover { opacity: 0.85; }
.subbar-setup .beacon-counter .ti { font-size: 12px; }
/* US-293 (FLOCK-175): per-section save-reason history — a collapsed fold at the editor's end. */
.setup-history { margin-top: 18px; border-top: 0.5px solid var(--border-subtle); padding-top: 10px; }
.setup-history-toggle {
background: transparent; border: 0; padding: 2px 0;
color: var(--text-secondary);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.setup-history-toggle:hover { color: var(--text-primary); }
.setup-history-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.setup-history-list[hidden] { display: none; } /* C15 rule: explicit display needs its [hidden] escape */
.setup-history-row { display: flex; gap: 10px; align-items: baseline; font-size: var(--text-size-small); }
.setup-history-row .hist-when { flex: 0 0 70px; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.setup-history-row .hist-who { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.setup-history-row .hist-reason { min-width: 0; color: var(--text-secondary); }
.setup-history-empty { color: var(--text-tertiary); font-size: var(--text-size-small); }
/* ----- Toast (für Setup-Save / Beacon-Created) ------------------------- */
.toast-container {
position: fixed;
bottom: 36px;
right: 16px;
z-index: 300;
pointer-events: none;
}
.toast {
background: var(--surface-1);
border: 0.5px solid var(--color-success);
border-left: 2px solid var(--color-success);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
min-width: 280px;
max-width: 380px;
pointer-events: auto;
animation: slide-in var(--motion-medium) var(--ease-out);
}
.toast .ti-check { color: var(--color-success); font-size: 16px; }
.toast .text {
font-size: 13px;
color: var(--text-primary);
flex: 1;
}
.toast .text strong { color: var(--color-success); }
.toast a {
color: var(--accent);
text-decoration: none;
font-size: 12px;
font-family: var(--font-mono);
}
@keyframes slide-in {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ============================================================================
* KI-Action-Pattern (ADR-0011)
* ============================================================================ */
.ki-action {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
color: var(--accent);
border: 0.5px solid var(--accent);
border-radius: var(--radius-sm);
padding: 5px 11px;
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out);
}
.ki-action:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ki-action .ti { font-size: 14px; }
.ki-action.loading {
cursor: wait;
opacity: 0.7;
}
.ki-action .duration-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
margin-left: 4px;
}
.ti-spin { animation: spin 1s linear infinite; }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ki-suggestion-box {
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 0.5px solid var(--accent);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-top: 10px;
}
.ki-suggestion-box header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.ki-suggestion-box header .ti-sparkles { color: var(--accent); font-size: 14px; }
.ki-suggestion-box header .label {
font-size: 13px;
color: var(--accent);
font-weight: 500;
}
.ki-suggestion-box header .meta {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.ki-suggestion-box header .close {
background: transparent;
color: var(--text-tertiary);
border: 0;
padding: 4px;
cursor: pointer;
}
.ki-suggestion-box .content {
font-size: 13px;
color: var(--text-primary);
line-height: 1.5;
}
.ki-suggestion-box footer {
display: flex; gap: 8px; margin-top: 12px;
padding-top: 10px;
border-top: 0.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.ki-suggestion-box footer button {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: var(--radius-sm);
padding: 5px 11px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
border: 0.5px solid var(--border);
background: transparent;
color: var(--text-primary);
}
.ki-suggestion-box footer button .ti { font-size: 13px; }
.ki-suggestion-box footer button.apply {
background: var(--accent-fill);
color: var(--on-accent);
border-color: transparent;
}
/* SMART-Tabelle als Render-Template-Beispiel */
.smart-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0;
}
.smart-table td {
padding: 4px 8px;
border-bottom: 0.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
font-size: 12px;
}
.smart-table td:first-child {
font-family: var(--font-mono);
font-weight: 500;
color: var(--accent);
width: 24px;
}
.smart-table td:nth-child(2) {
width: 24px;
text-align: center;
font-family: var(--font-mono);
}
.smart-table tr:last-child td { border-bottom: 0; }
.smart-score {
margin-top: 6px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-primary);
}
.smart-score strong { color: var(--accent); font-size: 14px; }
.smart-suggestion-text {
margin-top: 12px;
padding: 12px 14px;
background: var(--surface-2);
border-left: 2px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.6;
white-space: pre-wrap; /* Zeilenumbrüche im Goal-Text erhalten */
word-wrap: break-word;
max-height: 240px; /* "Roman-Schutz" — bei extrem langen Zielen scrollbar */
overflow-y: auto;
}
.smart-suggestion-text::before {
content: "Suggested goal";
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
/* ----- Setup Drawer-Specifics ------------------------------------------ */
.setup-drawer-body { padding: 14px 16px; }
.setup-drawer-body h3 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin: 16px 0 8px;
}
.setup-drawer-body h3:first-child { margin-top: 0; }
.setup-drawer-body .goal-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: var(--surface-2);
border-radius: var(--radius-sm);
margin-bottom: 6px;
}
.setup-drawer-body .goal-row .goal-id {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.setup-drawer-body .goal-row .goal-text {
flex: 1;
font-size: 13px;
color: var(--text-primary);
}
.smart-bar {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.smart-bar .bar {
display: inline-block;
width: 50px;
height: 6px;
background: var(--surface-1);
border-radius: 3px;
overflow: hidden;
}
.smart-bar .bar-fill {
display: block;
height: 100%;
background: var(--accent);
}
/* US-134: the inline goal bar tints by the same traffic-light tier as the panel score. */
.smart-bar.bad .bar-fill { background: var(--color-error); }
.smart-bar.mid .bar-fill { background: var(--color-warning); }
.smart-bar.good .bar-fill { background: var(--color-success); }
/* ============================================================================
* Beacons-View (ADR-0012)
* Tab vormals "Logbook" — Tab-Name + Section ist jetzt "beacons"
* ============================================================================ */
/* Section-Switching ergänzen */
[data-section="beacons"] .subbar-beacons { display: flex; }
/* US-104: beacons section = grid so the detail drawer opens as a column (US-73/80/103 pattern —
the former display:block rule is gone on purpose, see the .section-board note). */
[data-section="beacons"] .section-beacons {
display: grid;
grid-template-columns: minmax(0, 1fr) 0;
grid-template-rows: 1fr;
transition: grid-template-columns var(--motion-medium) var(--ease-out);
height: 100%;
overflow: hidden;
}
.section-beacons.drawer-open { grid-template-columns: minmax(0, 1fr) 520px; }
.section-beacons > .beacons-view { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; }
#beacon-drawer { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.section-beacons:not(.drawer-open) > #beacon-drawer { display: none; }
/* US-104: the open beacon keeps its context mark (mockup .story-row.selected). */
.beacon-item.selected {
border-left: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* US-104: beacon-detail drawer — shares the flock drawer's meta/body shapes. */
#beacon-drawer .meta-rows { display: flex; flex-direction: column; gap: 5px; }
#beacon-drawer .meta-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
#beacon-drawer .meta-row .k { width: 90px; color: var(--text-tertiary); }
#beacon-drawer .beacon-body-full { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
/* The card's chip styles are scoped to .beacon-item — mirror them for the drawer (read + edit). */
#beacon-drawer .beacon-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#beacon-drawer .tag {
display: inline-flex; align-items: center; gap: 2px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-secondary); background: var(--surface-2);
padding: 2px 7px; border-radius: var(--radius-pill);
}
/* Tags editor: removable chips + free input with suggestions from the existing vocabulary. */
#beacon-drawer .bt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
#beacon-drawer .bt-chip button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 2px; }
#beacon-drawer .bt-input {
width: 100%; background: var(--surface-2); color: var(--text-primary);
border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 9px; font-family: inherit; font-size: 13px;
}
#beacon-drawer .bt-input:focus { outline: none; border-color: var(--accent); }
#beacon-drawer .bt-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
/* US-141: body editor textarea (mirrors .bt-input) + the read-only reason hint in the BODY label. */
#beacon-drawer .bb-input {
width: 100%; background: var(--surface-2); color: var(--text-primary);
border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 9px; font-family: inherit; font-size: 13px; line-height: 1.55;
min-height: 140px; resize: vertical;
}
#beacon-drawer .bb-input:focus { outline: none; border-color: var(--accent); }
#beacon-drawer .section-label .bb-lock {
margin-left: auto; font-family: var(--font-mono); font-size: 10px;
font-weight: 400; color: var(--text-tertiary); text-transform: none;
}
/* ── US-239/US-244 (FLOCK-141, BEACON-244): Read/Tend — the drawers' workflow split. The seg,
meta-line and tend-zone classes are shared by the beacon AND flock drawer (unscoped on purpose —
the C31 scoped-style trap); the remaining #beacon-drawer rules are genuinely beacon-specific. ── */
/* flex:none + nowrap: the segment control never shrinks or clips in the tight header row. */
.drawer-mode-seg { display: inline-flex; flex: none; border: 0.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.drawer-mode-seg button {
border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
}
.drawer-mode-seg button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
#beacon-drawer .drawer-status-chip {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
padding: 2px 8px; border-radius: var(--radius-pill);
background: var(--surface-2); color: var(--text-secondary);
}
#beacon-drawer .drawer-status-chip[data-status="accepted"],
#beacon-drawer .drawer-status-chip[data-status="sealed"] { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); }
#beacon-drawer .drawer-status-chip[data-status="proposed"],
#beacon-drawer .drawer-status-chip[data-status="draft"] { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
#beacon-drawer .drawer-status-chip[data-status="rejected"],
#beacon-drawer .drawer-status-chip[data-status="superseded"] { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, transparent); }
.beacon-meta-line {
display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0 2px;
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
#beacon-drawer .beacon-read-lead { font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--text-primary); margin-bottom: 4px; }
/* US-245 (Maintainer-Befund): the story drawer's CONTENT section labels carry the story colour —
analog to the beacon drawer's decision-green body headings. --color-info is the established
story-kind colour (thread chips, candidates lane); structural labels (LINKS/COMMENTS) stay muted. */
.drawer section.story-sec > .section-label { color: var(--color-info); } /* outweighs the generic .drawer section .section-label */
/* US-241: the forward pointer of a superseded decision — visible before the body is read. */
#beacon-drawer .superseded-pointer {
display: flex; align-items: center; gap: 6px; margin: 8px 0 2px;
font-family: var(--font-mono); font-size: 11px; color: var(--color-error);
}
/* Section headings in the decision green (#5DCAA5, the decision subtype colour) — easier to read
than indigo against the dark surface (Maintainer-Befund, US-239 showcase). */
#beacon-drawer .body-sec-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: #5DCAA5; margin: 10px 0 3px; }
.tend-zone { border: 0.5px solid var(--border); border-radius: var(--radius-md); margin: 10px 0; }
.tend-zone > section { border-top: 0; }
#beacon-drawer .bs-field { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
#beacon-drawer .bs-input {
display: block; width: 100%; margin-top: 3px; background: var(--surface-2); color: var(--text-primary);
border: 0.5px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 9px; font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
#beacon-drawer .bs-input:focus { outline: none; border-color: var(--accent); }
/* ── US-142: Dashboard — read-only overview landing (FLOCK-088) ── */
.dashboard-view { padding: 20px 24px; max-width: 920px; overflow-y: auto; }
.dash-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dash-metric { background: var(--surface-2); border-radius: var(--radius-md); padding: 14px 16px; }
.dash-metric-label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.dash-metric-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.dash-metric-sub { font-size: 12px; color: var(--text-tertiary); }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dash-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px 16px; }
.dash-card-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.dash-card-head > i { color: var(--accent); }
.dash-list { display: flex; flex-direction: column; gap: 8px; }
.dash-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dash-id { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.dash-row-title { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-assignee { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-pill); }
.dash-muted { color: var(--text-tertiary); font-size: 12px; }
.dash-pill { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-pill); }
.dash-clickable { cursor: pointer; }
.dash-clickable:hover .dash-row-title { color: var(--accent); }
.dash-empty { font-size: 13px; color: var(--text-tertiary); padding: 4px 0; }
.dash-bar { height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.dash-bar-fill { height: 100%; background: var(--accent); }
.dash-pulse-meta { margin-left: auto; }
.dash-pulse-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
/* ── US-156 (FLOCK-103): Setup-Nudge — fehlende/dünne Setup-Sektionen oben auf der Landing.
Reuse der mh-row-Nudge-Mechanik (getönte Zeile, Lead-Icon, Pfeil rechts, Klick → Dialog). ── */
/* US-313: the AI-setup nudge. Warning-toned, not error-toned — nothing is broken, something is
not set up yet, and the card says how. Shown only when the probe says so (nudge-not-score). */
.dash-ai-nudge { background: color-mix(in srgb, var(--color-warning) 7%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--color-warning) 28%, transparent); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; }
.dash-ai-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dash-ai-head > i { color: var(--color-warning); }
.dash-ai-sub { font-size: 12px; color: var(--text-secondary); margin: 3px 0 10px; }
.dash-ai-steps { display: flex; flex-direction: column; gap: 7px; margin-bottom: 11px; }
.dash-ai-step { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.dash-ai-step > b { min-width: 62px; color: var(--text-primary); font-weight: 600; }
.dash-ai-step code { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-primary); }
.dash-ai-step > span { flex: 1 1 240px; color: var(--text-tertiary); }
.dash-ai-recheck { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; cursor: pointer; padding: 6px 11px; border-radius: var(--radius-md); color: var(--text-primary); background: color-mix(in srgb, var(--color-warning) 12%, transparent); border: 0.5px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.dash-ai-recheck:hover { background: color-mix(in srgb, var(--color-warning) 20%, transparent); }
.dash-setup { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; }
.dash-setup-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dash-setup-head > i { color: var(--accent); }
.dash-setup-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.dash-setup-sub { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 11px; }
.dash-setup-list { display: flex; flex-direction: column; gap: 6px; }
.dash-setup-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; font: inherit; color: var(--text-primary); background: color-mix(in srgb, var(--accent) 7%, transparent); border: 0.5px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.dash-setup-row.warn { background: color-mix(in srgb, var(--color-warning) 8%, transparent); border-color: color-mix(in srgb, var(--color-warning) 24%, transparent); }
.dash-setup-row:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dash-setup-row.warn:hover { background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.dash-setup-ico { font-size: 16px; color: var(--text-tertiary); }
.dash-setup-row.warn .dash-setup-ico { color: var(--color-warning); }
.dash-setup-name { font-size: 13px; min-width: 150px; }
.dash-setup-detail { flex: 1; font-size: 12px; color: var(--text-tertiary); }
.dash-setup-row.warn .dash-setup-detail { color: var(--color-warning); }
.dash-setup-go { font-size: 15px; color: var(--text-tertiary); }
.dash-setup-row:hover .dash-setup-go { color: var(--accent); }
.dash-setup.done { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-success); }
/* ── US-268 (FLOCK-155, BEACON-281): identity greeting + personal lane. Accent-left card echoes
the beacon-drawer zones; identity is a plain token select — the picker writes through the
currentUser() seam, never straight to localStorage. ── */
.dash-greeting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-greeting-hi { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); }
.dash-greeting-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); }
.dash-identity-select { font: inherit; font-size: 13px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }
.dash-personal { background: var(--surface-1); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; }
.dash-personal-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 11px; }
.dash-personal-metrics { margin-bottom: 12px; }
.dash-personal-sub { font-size: 13px; color: var(--text-secondary); margin: 2px 0 11px; }
/* ── US-269 (FLOCK-155): project arc — roadmap versions as a bead ribbon + overall bar. Released =
success, current = indigo accent, planned = muted; all adaptive tokens (both themes). ── */
.dash-arc-sub { margin-left: auto; font-weight: 400; }
.dash-arc-track { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.dash-arc-ver { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 50px; }
.dash-arc-dot { width: 28px; height: 28px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--surface-2); color: var(--text-tertiary); border: 1px solid var(--border-subtle); }
.dash-arc-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.dash-arc-released .dash-arc-dot { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); border-color: transparent; }
.dash-arc-current .dash-arc-dot { background: var(--accent); color: #fff; border-color: transparent; }
.dash-arc-current .dash-arc-id { color: var(--accent); font-weight: 600; }
/* ── US-270 (FLOCK-123): roadmap/changelog condenser modal — range picker + curated proposal. ── */
.roadmap-digest-modal { max-width: 720px; width: 92vw; max-height: 88vh; overflow-y: auto; }
.roadmap-ki-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rd-hint, .rd-empty { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
.rd-picker { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rd-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-tertiary); }
.rd-field select { min-width: 120px; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 8px 10px; outline: none; }
.rd-field select:focus { border-color: var(--accent); }
.rd-feat-title, .rd-feat-desc, .rd-changelog { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; padding: 8px 10px; outline: none; box-sizing: border-box; }
.rd-feat-title:focus, .rd-feat-desc:focus, .rd-changelog:focus { border-color: var(--accent); }
.rd-arrow { color: var(--text-tertiary); margin-bottom: 8px; }
.rd-strip { font-size: 12px; color: var(--text-tertiary); background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.rd-col { margin-bottom: 16px; }
.rd-col-head { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.rd-mut { color: var(--text-tertiary); font-weight: 400; font-size: 12px; }
.rd-feats { display: flex; flex-direction: column; gap: 8px; }
.rd-feat { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; }
.rd-feat-on { margin-top: 5px; }
.rd-feat-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rd-feat-title { font-weight: 500; }
.rd-feat-desc { min-height: 42px; resize: vertical; }
.rd-changelog { width: 100%; min-height: 150px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.rd-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.rd-actions .spacer { flex: 1; }
.rd-degrade { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); border-radius: var(--radius-md); padding: 12px 14px; }
.beacons-view { padding: 16px; }
/* ----- Blocker-Banner (sehr prominent) --------------------------------- */
.blocker-banner {
background: color-mix(in srgb, var(--color-error) 14%, transparent);
border: 0.5px solid var(--color-error);
border-left: 2px solid var(--color-error);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.blocker-banner .ti-icon { font-size: 18px; color: var(--color-error); flex-shrink: 0; }
.blocker-banner .text { flex: 1; }
.blocker-banner .title {
font-size: 13px;
color: var(--color-error);
font-weight: 500;
margin-bottom: 2px;
}
.blocker-banner .detail {
font-size: 12px;
color: var(--text-secondary);
}
.blocker-banner .btn-review {
background: transparent;
color: var(--color-error);
border: 0.5px solid var(--color-error);
border-radius: var(--radius-sm);
padding: 4px 11px;
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
}
/* US-148/FLOCK-071: proposed-decision attention banner — mirrors the blocker banner, but indigo
(an open decision needs ratification: attention, not alarm). */
.proposed-banner {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 0.5px solid var(--accent);
border-left: 2px solid var(--accent);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.proposed-banner .ti-icon { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.proposed-banner .text { flex: 1; }
.proposed-banner .title { font-size: 13px; color: var(--accent); font-weight: 500; margin-bottom: 2px; }
.proposed-banner .detail { font-size: 12px; color: var(--text-secondary); }
.proposed-banner .btn-review {
background: transparent;
color: var(--accent);
border: 0.5px solid var(--accent);
border-radius: var(--radius-sm);
padding: 4px 11px;
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
}
/* US-284 (FLOCK-158): status-filter row — the AWAITING pill stays visible but quiet at zero. */
.lane-pill.quiet { opacity: 0.55; }
/* US-291 (FLOCK-173, Variante D — replaces the US-284 half/half rule): the beacons sub-bar wraps
into TWO rows. The subtype pills take the full first row (every pill readable — the visible row
teaches the taxonomy), status pills + cycle filter + search + actions share the second. The
groups keep overflow-x as a fallback for extreme narrowness; the shell grid row grows via
minmax(44px, auto) (see .app-shell). */
.subbar-beacons { flex-wrap: wrap; row-gap: 6px; }
.subbar-beacons #beacon-filter-pills { flex: 1 1 100%; }
.subbar-beacons #beacon-status-pills { flex: 0 1 auto; min-width: 0; }
.subbar-beacons .cycle-filter,
.subbar-beacons .search-field { flex-shrink: 0; }
/* US-284: chip on a current-cycle draft ritual — legitimately unsealed, distinct from overdue.
Own class (NOT .cycle-chip): cycle-group bodies hide .cycle-chip, this one must stay visible. */
.current-cycle-chip {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
border: 0.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 1px 6px;
flex-shrink: 0;
}
/* US-148/FLOCK-069: cycle chip on ritual beacon cards (casting/loomback/weekly). */
.cycle-chip {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: var(--radius-sm);
padding: 1px 6px;
flex-shrink: 0;
}
/* ----- Beacon-Stream --------------------------------------------------- */
.beacon-list { display: flex; flex-direction: column; gap: 8px; }
/* US-153: memory-at-a-glance — project state on the class level (Ritual · Ad-hoc · Auto), an
orientation header distinct from the subtype filter pills. */
.memory-glance { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; margin-bottom: 12px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.memory-glance b { font-weight: 500; color: var(--text-primary); }
.glance-total { font-size: 13px; color: var(--text-secondary); }
.glance-total .ti { font-size: 15px; color: var(--accent); vertical-align: -2px; margin-right: 2px; }
.glance-classes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.glance-class { font-family: var(--font-mono); font-size: 11px; padding: 2px 9px; border-radius: 20px; color: var(--text-tertiary); background: var(--surface-2); }
.glance-class[data-class="ritual"] { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 13%, transparent); }
.glance-class[data-class="adhoc"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.glance-class[data-class="auto"] { color: var(--text-tertiary); background: var(--surface-2); }
/* US-154: Memory Health — good signs + warnings from real invariants (BEACON-137). nudge-not-score:
warnings are clickable buttons, no number anywhere. Semantic tokens auto-adapt to dark mode. */
/* US-177 (FLOCK-121): Flock-Triage mini-dashboard — same language as memory-health (nudge-not-score). */
.flock-triage { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.ft-head { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.ft-head b { font-weight: 500; color: var(--text-primary); }
.ft-head .ti { color: var(--accent); vertical-align: -2px; margin-right: 4px; }
.ft-sub { color: var(--text-tertiary); font-size: 12px; margin-left: 6px; }
.ft-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-stat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); padding: 4px 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 0.5px solid var(--border); }
.ft-stat .ti { font-size: 14px; }
.ft-stat.good { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.ft-stat.nudge { cursor: pointer; color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.ft-stat.nudge:hover { background: color-mix(in srgb, var(--color-warning) 18%, transparent); }
.ft-stat.nudge.on { background: color-mix(in srgb, var(--color-warning) 22%, transparent); }
.ft-stat .ft-go { font-size: 13px; opacity: 0.7; }
.ft-mix { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ft-mix-chip { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.flock-quick { margin-left: auto; display: inline-flex; gap: 4px; }
.fq-btn { background: transparent; border: 0.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer; padding: 2px 6px; display: inline-flex; align-items: center; }
.fq-btn:hover { color: var(--text-primary); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fq-btn .ti { font-size: 15px; }
.memory-health { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.mh-head { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.mh-head b { font-weight: 500; color: var(--text-primary); }
.mh-head .ti { color: var(--accent); vertical-align: -2px; margin-right: 4px; }
.mh-sub { color: var(--text-tertiary); font-size: 12px; margin-left: 6px; }
.mh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .mh-cols { grid-template-columns: 1fr; } }
.mh-col-head { font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.mh-col.good .mh-col-head { color: var(--color-success); }
.mh-col.warn .mh-col-head { color: var(--color-warning); }
.mh-col-head .ti { font-size: 15px; vertical-align: -2px; margin-right: 4px; }
.mh-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-md); background: transparent; border: 0.5px solid transparent; }
.mh-row + .mh-row { margin-top: 6px; }
/* Good signs are cards too (transparent green) — students hunt the ✓ motivators (Maintainer, C45). */
.mh-col.good .mh-row { background: color-mix(in srgb, var(--color-success) 8%, transparent); border-color: color-mix(in srgb, var(--color-success) 22%, transparent); }
.mh-lead { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.mh-col.good .mh-lead { color: var(--color-success); }
.mh-col.warn .mh-lead { color: var(--color-warning); }
.mh-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.mh-row-label { font-size: 13px; color: var(--text-primary); }
.mh-row-detail { font-size: 11px; color: var(--text-tertiary); }
.mh-go { font-size: 14px; color: var(--text-tertiary); align-self: center; flex-shrink: 0; }
button.mh-row.nudge { cursor: pointer; background: color-mix(in srgb, var(--color-warning) 8%, transparent); border-color: color-mix(in srgb, var(--color-warning) 22%, transparent); font: inherit; }
button.mh-row.nudge:hover { background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
button.mh-row.nudge:hover .mh-go { color: var(--color-warning); }
.mh-empty { font-size: 12px; color: var(--text-tertiary); padding: 7px 8px; }
/* US-212 (FLOCK-138): shared "couldn't load" state — board / memory-health / loomback overview surface a
visible error instead of an empty view when a plan-dependent fetch fails. */
.load-error {
display: flex; gap: 10px; align-items: flex-start;
margin: 16px; padding: 14px 16px; border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
.load-error > .ti { color: var(--color-error); font-size: 18px; margin-top: 1px; }
.load-error b { display: block; font-size: 13px; color: var(--text-primary); }
.load-error span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
/* US-152: cycle-grouping — each cycle a collapsible card, the project memory as a narrative. */
.cycle-group { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; }
.cycle-group-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.cycle-group-header:hover { background: var(--surface-2); border-radius: var(--radius-md); }
.cycle-group-body > * + * { margin-top: 0; }
.cycle-group-body { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.cycle-group-header > .ti { font-size: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.cycle-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-primary); }
.cycle-theme { font-size: 13px; color: var(--text-secondary); }
.cycle-chips { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
/* US-152: per-subtype count chips in the cycle header. (Distinct from .cycle-chip, the per-beacon
cycle badge from US-148 — that one is redundant inside a group and hidden below.) */
.cycle-count-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 20px; color: var(--text-tertiary); background: var(--surface-2); }
.cycle-count-chip[data-subtype="casting"] { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 14%, transparent); }
.cycle-count-chip[data-subtype="decision"] { color: #5DCAA5; background: color-mix(in srgb, #5DCAA5 18%, transparent); }
.cycle-count-chip[data-subtype="loomback"] { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 16%, transparent); }
.cycle-count-chip[data-subtype="learnings"],
.cycle-count-chip[data-subtype="weekly"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cycle-count-chip[data-subtype="risk"] { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.cycle-count-chip[data-subtype="blocker"] { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 16%, transparent); }
/* The per-beacon cycle badge (US-148) is redundant inside a cycle group — the header states the cycle. */
.cycle-group-body .cycle-chip { display: none; }
.setup-edits-fold { padding-top: 2px; }
.setup-edits-toggle { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); cursor: pointer; padding: 4px 2px; }
.setup-edits-toggle:hover { color: var(--text-secondary); }
.setup-edits-toggle > .ti { font-size: 13px; vertical-align: -2px; }
.beacon-item {
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.beacon-item:hover { border-color: var(--border-strong); }
/* Subtyp-spezifische Border-Color für prominente Subtypes */
.beacon-item[data-subtype="blocker"] { border-color: var(--color-error); border-left: 2px solid var(--color-error); padding-left: 12px; }
/* Auto-Beacons (setup-edit) — gedämpft & kompakt */
.beacon-item.compact {
opacity: 0.75;
padding: 10px 14px;
}
.beacon-item.compact > .beacon-body,
.beacon-item.compact > .beacon-tags { display: none; }
.beacon-item > header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.beacon-item.compact > header { margin-bottom: 0; }
.beacon-item .beacon-id {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.beacon-item .subtype-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
gap: 4px;
}
.beacon-item .subtype-badge .ti { font-size: 11px; }
.beacon-item .source-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.beacon-item .more-menu {
background: transparent;
color: var(--text-tertiary);
border: 0;
padding: 2px 4px;
cursor: pointer;
}
.beacon-item .beacon-body {
font-size: 13px;
color: var(--text-primary);
line-height: 1.5;
}
.beacon-item .beacon-tags {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
align-items: center;
}
.beacon-item .beacon-tags .tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
background: var(--surface-2);
padding: 2px 7px;
border-radius: var(--radius-pill);
}
.beacon-item .beacon-tags .related {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
display: flex; align-items: center; gap: 4px;
}
.beacon-item .auto-summary {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
/* ----- Subtyp-Badge-Colors (3 Klassen, siehe loom-prozess.md §7) ------- */
/* Ritual */
.subtype-badge[data-subtype="casting"] { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 15%, transparent); }
.subtype-badge[data-subtype="loomback"] { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
.subtype-badge[data-subtype="weekly"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
/* Ad-hoc */
.subtype-badge[data-subtype="learnings"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.subtype-badge[data-subtype="decision"] { color: #5DCAA5; background: color-mix(in srgb, #5DCAA5 15%, transparent); }
.subtype-badge[data-subtype="risk"] { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, transparent); }
.subtype-badge[data-subtype="blocker"] { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 18%, transparent); }
.subtype-badge[data-subtype="insight"] { color: #5DCAA5; background: color-mix(in srgb, #5DCAA5 15%, transparent); }
/* Auto */
.subtype-badge[data-subtype="setup-edit"] { color: var(--text-tertiary); background: rgba(255,255,255,0.05); }
/* ----- Subtyp-Filter-Pills (extending .lane-pill für Beacons) --------- */
.subbar-beacons .lane-pill .count.mint { color: #5DCAA5; }
.subbar-beacons .lane-pill .count.error { color: var(--color-error); }
.subbar-beacons .lane-pill .count.neutral { color: var(--text-tertiary); }
/* US-86 (FLOCK-042-Muster): Beacon-Pill-Counts pro Subtype gefärbt (spiegelt die .subtype-badge-Farben). */
.subbar-beacons .lane-pill .count.learnings { color: var(--accent); }
.subbar-beacons .lane-pill .count.decision { color: #5DCAA5; }
.subbar-beacons .lane-pill .count.risk { color: var(--color-warning); }
.subbar-beacons .lane-pill .count.blocker { color: var(--color-error); }
.subbar-beacons .lane-pill .count.insight { color: #5DCAA5; }
.subbar-beacons .lane-pill .count.casting { color: var(--color-info); }
.subbar-beacons .lane-pill .count.loomback { color: var(--color-success); }
.subbar-beacons .lane-pill .count.weekly { color: var(--accent); }
.subbar-beacons .lane-pill .count.setup-edit { color: var(--text-tertiary); }
/* ----- US-221 (FLOCK-082): Browse-by-tag facet ----------------------------
A thematic wander-axis above the beacon list (subtype pills live in the sub-bar; tags wrap here
in the content area). Token-based, theme-aware. */
.beacon-tag-facet {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 14px;
}
/* US-15: an explicit display needs its own [hidden] exception, else the attribute is ignored. */
.beacon-tag-facet[hidden] { display: none; }
.beacon-tag-facet .beacon-tags-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-right: 4px;
}
.beacon-tag-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--surface-1);
color: var(--text-secondary);
border: 0.5px solid var(--border);
border-radius: var(--radius-pill);
padding: 4px 11px;
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out);
}
.beacon-tag-chip:hover { border-color: var(--accent); }
.beacon-tag-chip.active {
background: var(--accent-fill);
color: var(--on-accent);
border-color: var(--accent-fill);
}
.beacon-tag-chip .count { color: var(--text-tertiary); }
.beacon-tag-chip.active .count { color: var(--on-accent); opacity: 0.8; }
.beacon-tag-more,
.beacon-tag-clear {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
color: var(--text-tertiary);
border: none;
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
padding: 4px 6px;
}
.beacon-tag-more { text-decoration: underline; text-underline-offset: 2px; }
.beacon-tag-more:hover,
.beacon-tag-clear:hover { color: var(--accent); }
/* ----- US-222 (FLOCK-082): "tending" fold ---------------------------------
Hygiene (glance + Memory Health + proposed banner) collapses behind a summary chip so the browse
surface is the default face. The blocker banner stays above this, outside the fold. Token-based. */
.beacon-tending { margin: 0 0 16px; }
.beacon-tending[hidden] { display: none; } /* US-15: explicit-display elements need their own [hidden] rule */
.beacon-tending-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
color: var(--text-tertiary);
border: 0.5px solid var(--border-subtle);
border-radius: var(--radius-pill);
padding: 5px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.beacon-tending-toggle:hover { border-color: var(--border-strong); color: var(--text-secondary); }
/* US-234 (FLOCK-144): assertive entry when open nudges wait — discoverable without auto-expanding. */
.beacon-tending-toggle.has-nudges { border-color: var(--color-warning); color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.beacon-tending-toggle.has-nudges:hover { border-color: var(--color-warning); }
.beacon-tending-chevron { transition: transform var(--motion-fast) var(--ease-out); }
.beacon-tending.open .beacon-tending-chevron { transform: rotate(90deg); }
.beacon-tending-count { color: var(--text-tertiary); }
.beacon-tending-count.has-nudges { color: var(--color-warning); }
.beacon-tending-body { margin-top: 12px; }
.beacon-tending-body[hidden] { display: none; }
/* ----- US-223 (BEACON-228): woven threads in the drawer -------------------
related_* edges become rich, clickable threads (weaves to / woven from). Kind colours reuse the
semantic tokens — no invented brand colours. */
.thread-group { margin-bottom: 12px; }
.thread-group:last-child { margin-bottom: 0; }
.thread-group-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.thread-chip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out); }
.thread-chip:hover { border-color: var(--accent); }
.thread-chip > i { font-size: 14px; width: 20px; text-align: center; flex: none; color: var(--text-secondary); }
.thread-chip .thread-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); flex: none; }
.thread-chip .thread-label { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-chip[data-kind="decision"] > i { color: var(--accent); }
.thread-chip[data-kind="story"] > i { color: var(--color-info); }
.thread-chip[data-kind="flock"] > i,
.thread-chip[data-kind="risk"] > i { color: var(--color-warning); }
.thread-chip[data-kind="loomback"] > i,
.thread-chip[data-kind="insight"] > i { color: var(--color-success); }
.thread-chip[data-kind="blocker"] > i { color: var(--color-error); }
.thread-chip[data-kind="casting"] > i,
.thread-chip[data-kind="weekly"] > i { color: var(--color-info); }
.thread-peek { border: 0.5px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-top: 4px; background: var(--surface-2); }
.thread-peek-head { display: flex; align-items: center; gap: 7px; }
.thread-peek-head .thread-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.thread-peek-close { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; }
.thread-peek-label { font-size: 13px; color: var(--text-primary); margin-top: 5px; line-height: 1.45; }
.thread-crumb-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.thread-crumb { background: transparent; border: none; color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 11px; padding: 2px 3px; }
.thread-crumb.current { color: var(--text-secondary); cursor: default; }
.thread-crumb-bar > i { font-size: 12px; color: var(--text-disabled); }
/* ----- US-224 (BEACON-228): the constellation — the woven net made visible ------------------
Inline-SVG neighbourhood graph. Kind colours live on the node stroke (semantic tokens only). */
.constellation { display: block; margin-top: 4px; background: var(--surface-page); border: 0.5px solid var(--border-subtle); border-radius: 8px; }
.cst-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-disabled); letter-spacing: 0; }
.cst-edge { stroke: var(--border-strong); stroke-width: 1.3; }
.cst-edge.in { stroke-dasharray: 3 3; }
#cst-arrow path { fill: var(--border-strong); }
.cst-node { cursor: pointer; }
.cst-node circle { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: 1.5; transition: stroke-width var(--motion-fast) var(--ease-out); }
.cst-node:hover circle { stroke-width: 2.5; }
.cst-node text { font-family: var(--font-mono); font-size: 9px; fill: var(--text-secondary); text-anchor: middle; pointer-events: none; }
.cst-node.centre { cursor: default; }
.cst-node.centre circle { fill: var(--accent-fill); stroke: var(--accent-fill); }
.cst-node.centre text { fill: var(--on-accent); }
.cst-node[data-kind="decision"] circle { stroke: var(--accent); }
.cst-node[data-kind="story"] circle,
.cst-node[data-kind="casting"] circle,
.cst-node[data-kind="weekly"] circle { stroke: var(--color-info); }
.cst-node[data-kind="flock"] circle,
.cst-node[data-kind="risk"] circle { stroke: var(--color-warning); }
.cst-node[data-kind="loomback"] circle,
.cst-node[data-kind="insight"] circle { stroke: var(--color-success); }
.cst-node[data-kind="blocker"] circle { stroke: var(--color-error); }
.cst-more { font-family: var(--font-mono); font-size: 9px; fill: var(--text-tertiary); }
/* ----- US-227: weave-mode editor (curate related_* in the drawer) ----------------------------- */
.weave-entry { background: transparent; border: 0.5px solid var(--border); border-radius: var(--radius-pill); color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 2px 9px; cursor: pointer; margin-left: 4px; }
.weave-entry:hover { border-color: var(--accent); background: var(--surface-2); }
.thread-empty { font-size: 13px; color: var(--text-tertiary); padding: 4px 0; }
/* US-229: harvest a loomback learning into an insight — a row per bullet + a "→ insight" entry. */
.harvest-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 0.5px solid var(--border); }
.harvest-row:last-child { border-bottom: 0; }
.harvest-text { flex: 1; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.harvest-row .weave-entry { flex: none; margin-top: 2px; }
.weave-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.weave-empty { font-size: 12px; color: var(--text-tertiary); }
.weave-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: var(--radius-pill); border: 0.5px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
.weave-chip:hover { border-color: var(--color-error); color: var(--color-error); }
.weave-search { width: 100%; background: var(--surface-1); color: var(--text-primary); border: 0.5px solid var(--border); border-radius: var(--radius-pill); padding: 8px 13px; font-size: 13px; font-family: var(--font-sans); }
.weave-search:focus { outline: none; border-color: var(--accent); }
.weave-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow-y: auto; } /* US-244: unbounded hits scroll instead of a silent top-8 cap */
.weave-results[hidden] { display: none; }
.weave-result { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--surface-1); border: 0.5px solid var(--border-subtle); border-radius: 6px; padding: 6px 9px; cursor: pointer; font-size: 12px; color: var(--text-primary); }
.weave-result:hover { border-color: var(--accent); }
.weave-result .rel-kind { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.weave-actions { display: flex; align-items: center; margin-top: 12px; gap: 8px; }
/* Constellation legend — colours mirror the node strokes; edge keys mirror the line styles. */
.cst-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 9px; }
.cst-leg, .cst-leg-edge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.cst-leg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.cst-leg[data-kind="decision"] .cst-leg-dot { background: var(--accent); }
.cst-leg[data-kind="story"] .cst-leg-dot,
.cst-leg[data-kind="casting"] .cst-leg-dot,
.cst-leg[data-kind="weekly"] .cst-leg-dot { background: var(--color-info); }
.cst-leg[data-kind="flock"] .cst-leg-dot,
.cst-leg[data-kind="risk"] .cst-leg-dot { background: var(--color-warning); }
.cst-leg[data-kind="loomback"] .cst-leg-dot,
.cst-leg[data-kind="insight"] .cst-leg-dot { background: var(--color-success); }
.cst-leg[data-kind="blocker"] .cst-leg-dot { background: var(--color-error); }
.cst-edge-key { width: 16px; border-top: 1.5px solid var(--border-strong); display: inline-block; }
.cst-edge-key.dashed { border-top-style: dashed; }
/* ----- US-225 (Browse-Oase C-γ Zone B): spotlight + wander ----------------
The serendipity layer atop the browse surface — a featured decision + a random entry. */
.beacon-spotlight { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0 0 16px; }
.beacon-spotlight[hidden] { display: none; }
.spotlight-hero { flex: 1; min-width: 280px; background: var(--surface-1); border: 0.5px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 13px 16px; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out); }
.spotlight-hero:hover { border-color: var(--accent); }
.spotlight-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-success); margin-bottom: 8px; }
.spotlight-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.spotlight-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.spotlight-degree { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.spotlight-summary { font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-primary); }
.spotlight-open { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-top: 10px; }
.spotlight-wander { width: 180px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out); }
.spotlight-wander:hover { border-color: var(--accent); }
.spotlight-wander-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.spotlight-wander-label { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text-primary); }
.spotlight-wander-hint { font-size: 11px; color: var(--text-tertiary); text-align: center; }
/* US-85 (FLOCK-040a): custom dropdown — replaces the native