:root{ --bg: #1B1E1F; --surface: #232728; --surface-raised: #2B2F30; --shelf: #1F2223; --hairline: #383D3E; --ink: #E9E5DC; --ink-dim: #9BA09E; --ink-faint: #656B69; /* Stage ramp: cool blue -> deep violet as work advances. Green/amber/orange are deliberately NOT stage colors — they're reserved as signals below. */ --s1: #6FA6C0; /* discovery — light cool blue */ --s2: #5A82C4; /* ideation — blue */ --s3: #6A67C7; /* planning — indigo */ --s3-dim: #2F3152; /* planning meter track — dim indigo */ --s4: #8659C2; /* execution — violet */ --s5: #A24FC0; /* iterate — magenta-violet, ramp's far end */ --up: #7FA98C; /* on track / momentum — signal, not a stage */ --up-dim: #1F2B25; --warn: #C9A23C; /* at risk — amber, open unresolved risk */ --warn-dim: #37301A; --danger: #D14B3C; /* delayed — red, known miss, breaks through hardest */ --danger-dim: #3F241F; --alert: #DD6B4A; /* destructive action (delete) */ --alert-dim: #43271F; --killed: #6B6F6D; --font-display: 'Fraunces', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-body: 'IBM Plex Sans', -apple-system, sans-serif; } /* Light theme — a warm cream/sepia base, not white. The stage ramp (--s1..--s5) is brand identity and stays constant across themes; only the neutrals, the dim signal backgrounds, and the signal text (darkened for contrast on cream) flip. Applied via [data-theme="light"] on ; the inline script sets it before first paint and theme.js owns the toggle. */ :root[data-theme="light"] { --bg: #EAE0CC; --surface: #F6F0E1; --surface-raised: #FCF8EE; --shelf: #E2D6BD; --hairline: #D5C8AE; --ink: #2C2822; --ink-dim: #675F52; --ink-faint: #968D7C; --s3-dim: #DCD6EF; /* planning meter track — light indigo */ --up: #3F7A54; --up-dim: #DCE8DD; --warn: #8A6410; --warn-dim: #EFE4C4; --danger: #B23524; --danger-dim: #F1D8CE; --alert: #B4431F; --alert-dim: #F1DACE; --killed: #8A8171; } @font-face { font-family: 'Fraunces'; src: local('Georgia'); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; padding-bottom: 60px; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } :focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; } button { font-family: inherit; } /* ---------- Header ---------- */ .topbar { display: flex; align-items: baseline; justify-content: space-between; padding: 28px 40px 20px; border-bottom: 1px solid var(--hairline); } .brand { display: flex; align-items: baseline; gap: 14px; } .brand-mark { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.01em; } .brand-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } .topbar-right { display: flex; align-items: center; gap: 14px; } .roll-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); padding: 6px 11px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .roll-btn:hover { border-color: var(--ink-dim); color: var(--ink); } .quarter-tag { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); border: 1px solid var(--hairline); padding: 5px 12px; border-radius: 3px; letter-spacing: 0.04em; } /* Three-way theme toggle: one icon button cycling light → dark → system. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-dim); } .theme-toggle svg { display: block; width: 16px; height: 16px; } /* ---------- Weekly review / reconciliation ---------- */ .review-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); padding: 6px 11px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .review-pill:hover { border-color: var(--ink-dim); color: var(--ink); } .review-pill.ok { color: var(--up); } .review-pill.due { color: var(--warn); border-color: var(--warn); } .review-pill.due:hover { background: var(--warn-dim); } .demo-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 1px dashed var(--hairline); padding: 5px 9px; border-radius: 3px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .demo-btn:hover { color: var(--ink-dim); border-color: var(--ink-dim); } .demo-btn.on { color: var(--warn); border-color: var(--warn); border-style: solid; } .nudge { margin: 16px 40px 0; padding: 14px 18px; border: 1px solid var(--warn); background: var(--warn-dim); border-radius: 4px; display: flex; align-items: center; gap: 16px; } .nudge-body { flex: 1; } .nudge-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .nudge-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; } .nudge-actions { display: flex; gap: 8px; flex-shrink: 0; } .nudge-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; padding: 8px 14px; border-radius: 3px; cursor: pointer; border: none; } .nudge-btn.primary { background: var(--ink); color: var(--bg); } .nudge-btn.primary:hover { opacity: 0.85; } .nudge-btn.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--hairline); } .nudge-btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); } .reconcile-bar { margin: 16px 40px 0; padding: 11px 16px; border: 1px solid var(--hairline); border-left: 3px solid var(--warn); background: var(--surface); border-radius: 3px; display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.02em; } .reconcile-bar.done { border-left-color: var(--up); } .reconcile-lead { flex-shrink: 0; } .reconcile-count { color: var(--ink); font-weight: 600; } .reconcile-track { flex: 1; max-width: 220px; height: 4px; background: var(--hairline); border-radius: 2px; overflow: hidden; } .reconcile-track > i { display: block; height: 100%; width: 0; background: var(--warn); transition: width 0.3s ease; } .reconcile-bar.done .reconcile-track > i { background: var(--up); } .reconcile-hint { color: var(--ink-faint); } .chip-review { color: var(--warn); } .chip-review::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--warn); } .chip-confirmed { color: var(--up); } .chip-confirmed::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--up); } .card-confirm { margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--up); background: transparent; border: 1px solid var(--hairline); padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .card-confirm:hover { border-color: var(--up); background: var(--up-dim); } .drawer-attest { width: 100%; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--up); background: transparent; border: 1px solid var(--hairline); padding: 10px; border-radius: 3px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .drawer-attest:hover { border-color: var(--up); background: var(--up-dim); } .drawer-attest.done { color: var(--ink-faint); cursor: default; } .drawer-attest.done:hover { border-color: var(--hairline); background: transparent; } .synth-caution { margin: 0 24px 4px; padding: 8px 12px; background: var(--warn-dim); border-radius: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--warn); letter-spacing: 0.02em; line-height: 1.5; } .finalize-btn { background: var(--up); color: var(--bg); } /* ---------- Region label ---------- */ .region-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 18px 40px 0; display: flex; align-items: center; gap: 10px; } .region-label .count { color: var(--ink-dim); } .add-btn { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); padding: 5px 11px; border-radius: 3px; cursor: pointer; text-transform: none; transition: border-color 0.15s ease, color 0.15s ease; } .add-btn:hover { border-color: var(--ink-dim); color: var(--ink); } /* ---------- Pipeline ---------- */ .pipeline { display: flex; align-items: stretch; gap: 0; padding: 14px 40px 8px; } .column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .flow { flex: 0 0 30px; display: flex; align-items: flex-start; justify-content: center; padding-top: 34px; color: var(--ink-faint); font-size: 18px; user-select: none; } .column-head { margin-bottom: 14px; } .column-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .stage-num { color: var(--stage-color); font-weight: 500; } .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .column-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; text-transform: uppercase; } .cards { display: flex; flex-direction: column; gap: 10px; min-height: 40px; } /* ---------- Cards ---------- */ .card { background: var(--surface); border-left: 3px solid var(--stage-color); border-radius: 2px; padding: 14px 15px; cursor: grab; transition: background 0.15s ease; } .card:hover { background: var(--surface-raised); } .card:active { cursor: grabbing; } .card.dragging, .benched.dragging { opacity: 0.35; } /* Drop indicator: a ghost card is inserted at the exact slot the dragged card would land in (see wireDnD in board.js), so the dashed outline traces the landing position — not the card already sitting there. */ .card-ghost { border: 2px dashed var(--stage-color); border-radius: 3px; min-height: 56px; background: var(--surface-raised); opacity: 0.55; pointer-events: none; } .bench.drag-over .bench-strip { outline: 2px dashed var(--killed); outline-offset: 8px; border-radius: 4px; } .card-title { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; } .card-status { font-size: 12px; color: var(--ink-dim); line-height: 1.5; } .card-flags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .chip { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 2px; } .chip-changed { color: var(--up); } .chip-changed::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--up); } .chip-health::before { content:''; width:5px; height:5px; border-radius:50%; } .chip-ontrack { color: var(--up); background: var(--up-dim); font-weight: 500; } .chip-ontrack::before { background: var(--up); } .chip-atrisk { color: var(--warn); background: var(--warn-dim); font-weight: 500; } .chip-atrisk::before { background: var(--warn); } .chip-delayed { color: var(--danger); background: var(--danger-dim); font-weight: 500; } .chip-delayed::before { background: var(--danger); } /* Execution cards carry their health color: green = on track, amber = watch, red = known miss (the loudest). Every Execution card shows where it stands. */ .card.health-ontrack { border-left-color: var(--up); background: linear-gradient(90deg, var(--up-dim) 0%, var(--surface) 60%); } .card.health-ontrack:hover { background: linear-gradient(90deg, var(--up-dim) 0%, var(--surface-raised) 60%); } .card.health-atrisk { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-dim) 0%, var(--surface) 55%); } .card.health-atrisk:hover { background: linear-gradient(90deg, var(--warn-dim) 0%, var(--surface-raised) 55%); } .card.health-delayed { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-dim) 0%, var(--surface) 55%); } .card.health-delayed:hover { background: linear-gradient(90deg, var(--danger-dim) 0%, var(--surface-raised) 55%); } /* momentum bar for design/rfc */ .meter { margin-top: 10px; } .meter-track { height: 4px; background: var(--s3-dim); border-radius: 2px; overflow: hidden; } .meter-fill { height: 100%; background: var(--s3); transition: width 0.3s ease; } .meter-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); margin-top: 5px; letter-spacing: 0.04em; } .card-link { display: inline-block; margin-top: 11px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .card-link:hover { color: var(--stage-color); border-bottom-color: var(--stage-color); } .card-date { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); } .card-date .cd-label { text-transform: uppercase; opacity: 0.65; } .card-date .cd-val { color: var(--stage-color); } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 6px; padding: 14px 40px 0; border-bottom: 1px solid var(--hairline); } .tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 6px 4px 9px; margin-bottom: -1px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tab:hover { color: var(--ink-dim); } .tab.sel { color: var(--ink); border-bottom-color: var(--s4); } .tab .tab-count { color: var(--ink-faint); margin-left: 3px; } /* ---------- Archive ---------- */ .archive-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 40px 44px; } .arch { background: var(--surface); border-left: 3px solid var(--hairline); border-radius: 2px; padding: 13px 14px; } .arch-reason { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; display: inline-block; margin-bottom: 8px; padding: 2px 7px; border-radius: 2px; } .arch-reason.completed { color: var(--up); border: 1px solid var(--up); } .arch-reason.retired { color: var(--killed); border: 1px solid var(--killed); } .arch-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink-dim); margin-bottom: 6px; } .arch-meta { font-size: 11px; color: var(--ink-faint); line-height: 1.5; } .archive-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; grid-column: 1 / -1; padding: 10px 0; } .archive-action { font-family: var(--font-mono); font-size: 11px; color: var(--up); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .archive-action:hover { color: var(--ink-dim); } /* ---------- Bench ---------- */ .bench { margin: 6px 40px 0; background: var(--shelf); border: 1px solid var(--hairline); border-radius: 4px; padding: 16px 18px 18px; } .bench-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .benched { background: var(--surface); border-left: 3px solid var(--killed); border-radius: 2px; padding: 13px 14px; cursor: grab; transition: background 0.15s ease; } .benched:active { cursor: grabbing; } .benched:hover { background: var(--surface-raised); } .benched-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink-dim); margin-bottom: 6px; } .bench-reason { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; font-style: italic; } .revive { margin-top: 11px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 5px 9px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .revive:hover { border-color: var(--revive-color); color: var(--revive-color); } .bench-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; grid-column: 1 / -1; padding: 4px 0; } /* ---------- Synthesize bar ---------- */ .update-bar { padding: 24px 40px 0; display: flex; align-items: center; gap: 14px; } .gen-btn { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; background: var(--ink); color: var(--bg); border: none; padding: 10px 18px; border-radius: 3px; cursor: pointer; transition: opacity 0.15s ease; } .gen-btn:hover { opacity: 0.85; } .gen-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.02em; } /* ---------- Synthesize panel ---------- */ .update-panel { max-width: 760px; margin: 20px auto 0; padding: 0 40px; display: none; } .update-panel.visible { display: block; } .synth { background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; } .synth-topline { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 24px 0; } .synth-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; } .synth-title .synth-sub { font-family: var(--font-body); font-size: 12px; color: var(--ink-faint); font-weight: 400; margin-left: 8px; } .synth-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.04em; } .sim-tag { border: 1px solid var(--hairline); padding: 2px 7px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; } .synth-stream { padding: 16px 24px 6px; min-height: 90px; } .gen-thinking { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); padding: 6px 0; letter-spacing: 0.02em; } .gen-dots { display: inline-flex; gap: 4px; } .gen-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: blink 1s infinite; } .gen-dots span:nth-child(2) { animation-delay: 0.2s; } .gen-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } } .usection { margin-bottom: 16px; opacity: 0; transform: translateY(4px); animation: rise 0.3s ease forwards; } @keyframes rise { to { opacity: 1; transform: none; } } .usection-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .usection-label .dot { width: 6px; height: 6px; } .usection-body { font-size: 13.5px; line-height: 1.7; color: var(--ink); } .u-line { margin-bottom: 7px; } .u-line:last-child { margin-bottom: 0; } .u-name { font-weight: 600; } .caret { display: inline-block; width: 6px; background: var(--ink); animation: caretblink 0.9s step-end infinite; } @keyframes caretblink { 50% { opacity: 0; } } .synth-foot { display: flex; align-items: center; gap: 12px; padding: 8px 24px 20px; } .mini-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--bg); background: var(--ink); border: none; padding: 8px 14px; border-radius: 3px; cursor: pointer; transition: opacity 0.15s ease; } .mini-btn:hover { opacity: 0.85; } .mini-btn.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--hairline); } .mini-btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); } .diff-box { padding: 0 24px 22px; } .prompt-box { width: 100%; min-height: 220px; background: var(--bg); color: var(--ink-dim); border: 1px solid var(--hairline); border-radius: 3px; padding: 14px 15px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; resize: vertical; white-space: pre-wrap; } @media (prefers-reduced-motion: reduce) { .gen-dots span, .caret, .usection { animation: none; opacity: 1; transform: none; } } /* ---------- Editor drawer ---------- */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; } .scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--hairline); transform: translateX(100%); transition: transform 0.22s ease; z-index: 50; display: flex; flex-direction: column; } .drawer.open { transform: translateX(0); } .drawer-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; } .drawer-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stage-color, var(--ink-faint)); } .drawer-close { background: transparent; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; line-height: 1; } .drawer-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .field { margin-bottom: 20px; } .field-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; display: block; } .field input[type=text], .field textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--hairline); border-radius: 3px; padding: 10px 11px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; resize: vertical; } .field textarea { min-height: 74px; } .lastweek { background: var(--bg); border: 1px dashed var(--hairline); border-radius: 3px; padding: 10px 11px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; font-style: italic; } .stage-picker { display: flex; gap: 6px; flex-wrap: wrap; } .stage-opt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 7px 10px; cursor: pointer; transition: all 0.12s ease; } .stage-opt.sel { color: var(--bg); border-color: var(--opt-color); background: var(--opt-color); } .health-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; } .health-opt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 6px 12px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .health-opt:hover { border-color: var(--h-color); color: var(--h-color); } .health-opt.sel { color: var(--bg); background: var(--h-color); border-color: var(--h-color); } .slider { width: 100%; accent-color: var(--s3); } .artifact-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; } .artifact-row { display: flex; align-items: center; gap: 8px; } .artifact-row .artifact-done { flex: none; width: 15px; height: 15px; accent-color: var(--s3); cursor: pointer; } .artifact-row .artifact-text { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--hairline); border-radius: 3px; padding: 8px 10px; font-family: var(--font-body); font-size: 13px; line-height: 1.4; } .artifact-row.done .artifact-text { color: var(--ink-faint); text-decoration: line-through; } .artifact-row .artifact-owner { flex: none; background: var(--bg); color: var(--ink-dim); border: 1px solid var(--hairline); border-radius: 3px; padding: 8px 6px; font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; } .artifact-row .artifact-del { flex: none; background: transparent; border: none; color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 3px; } .artifact-row .artifact-del:hover { color: var(--danger); } .artifact-add { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px dashed var(--hairline); border-radius: 3px; padding: 7px 11px; cursor: pointer; } .artifact-add:hover { border-color: var(--ink-dim); color: var(--ink); } .drawer-foot { padding: 16px 24px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; align-items: center; } .save-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--bg); background: var(--ink); border: none; padding: 10px 18px; border-radius: 3px; cursor: pointer; } .save-btn:hover { opacity: 0.85; } .foot-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } .bench-action { font-family: var(--font-mono); font-size: 11px; color: var(--killed); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .bench-action:hover { color: var(--ink-dim); } .del-action { font-family: var(--font-mono); font-size: 11px; color: var(--alert); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .del-action:hover { color: var(--ink); } /* ---------- Modal (confirm / prompt) ---------- */ /* Replaces the browser's confirm()/prompt() dialogs. Sits above the drawer (z 60/70 vs 40/50) so an action started in the drawer confirms in front of it. */ .modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 60; } .modal-scrim.open { opacity: 1; pointer-events: auto; } .modal { position: fixed; top: 50%; left: 50%; z-index: 70; width: 420px; max-width: 92vw; transform: translate(-50%, calc(-50% + 8px)); opacity: 0; pointer-events: none; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 6px; padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); transition: opacity 0.18s ease, transform 0.18s ease; } .modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 10px; } .modal-msg { font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); white-space: pre-line; } .modal-input-wrap { margin-top: 16px; } .modal-input-wrap input { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--hairline); border-radius: 3px; padding: 10px 11px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .modal-cancel { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 8px 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .modal-cancel:hover { color: var(--ink); border-color: var(--ink-dim); } .modal-confirm { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--bg); background: var(--ink); border: 1px solid transparent; border-radius: 3px; padding: 8px 14px; cursor: pointer; transition: opacity 0.15s ease; } .modal-confirm:hover { opacity: 0.85; } .modal-confirm.tone-alert { background: var(--alert); } .modal-confirm.tone-up { background: var(--up); } @media (max-width: 900px) { .pipeline { flex-direction: column; padding: 14px 20px; } .flow { display: none; } .column { margin-bottom: 20px; } .bench { margin: 6px 20px 0; } .bench-strip { grid-template-columns: 1fr; } .topbar, .region-label, .update-bar, .tabs { padding-left: 20px; padding-right: 20px; } .update-panel { padding: 0 20px; } .archive-list { grid-template-columns: 1fr; padding: 6px 20px 44px; } }