1/* OpenSpec dashboard plugin styles. Loaded via manifest "css" field.2 Uses the dashboard's --color-* shadcn tokens + --midground / --background-base3 so it reskins with the active theme automatically (see extending-the-dashboard docs). */45.os-page { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; min-height: calc(100vh - 4rem); }6.os-loading { color: var(--color-muted-foreground, #888); }78/* Toolbar */9.os-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }10.os-toolbar label { font-size: 0.75rem; color: var(--color-muted-foreground, #aaa); margin-right: 0.25rem; }11.os-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }1213/* Shrink Select dropdowns to fit their text content instead of stretching14 (the SDK Select trigger has w-full, which over-sizes in flex toolbars). */15.os-page div.relative:has(> button[role="combobox"]) { width: fit-content; }16.os-page [role="listbox"] { width: min-content; }1718.os-icon-btn {19 display: inline-flex; align-items: center; justify-content: center;20 width: 2rem; height: 2rem; border-radius: var(--radius-sm, 0.375rem);21 border: 1px solid var(--color-border, #333); background: transparent;22 color: var(--color-muted-foreground, #aaa); cursor: pointer; transition: background 0.12s;23}24.os-icon-btn:hover:not(:disabled) { background: var(--color-secondary, rgba(255,255,255,0.06)); color: var(--color-foreground, #eee); }25.os-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }2627/* View switch */28.os-view-switch { display: flex; gap: 0.25rem; }2930/* Board */31.os-board { display: flex; flex-direction: column; gap: 0.75rem; }32.os-board-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }33.os-board-filter { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }34.os-filter-input { flex: 1; max-width: 24rem; font-size: 0.8rem; }35.os-repo-name { font-weight: 600; font-size: 0.95rem; color: var(--color-foreground, #eee); }36.os-repo-path { font-size: 0.75rem; color: var(--color-muted-foreground, #777); font-family: var(--theme-font-mono, monospace); }3738.os-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }39.os-col { display: flex; flex-direction: column; max-height: calc(100vh - 16rem); min-height: 7rem; border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius, 0.5rem); background: var(--color-card, #161616); }40.os-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--color-border, #2a2a2a); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-foreground, #aaa); }41.os-col-list { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.5rem; overflow-y: auto; min-height: 0; flex: 1; }42.os-col-empty { color: var(--color-muted-foreground, #555); font-size: 0.75rem; text-align: center; padding: 0.5rem; }4344.os-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border-radius: var(--radius-sm, 0.375rem); border: 1px solid var(--color-border, #2a2a2a); background: var(--color-popover, #1a1a1a); text-align: left; cursor: pointer; transition: border-color 0.12s; }45.os-card:hover { border-color: var(--color-primary, #555); }46.os-card-title { display: flex; align-items: baseline; gap: 0.375rem; font-size: 0.82rem; font-weight: 500; line-height: 1.3; color: var(--color-foreground, #eee); }47.os-card-seq { flex: 0 0 auto; font-family: var(--theme-font-mono, monospace); font-size: 0.65rem; color: var(--color-muted-foreground, #777); }48.os-card-foot { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }49.os-card-copy { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: none; background: transparent; color: var(--color-muted-foreground, #777); cursor: pointer; border-radius: var(--radius-sm, 0.25rem); }50.os-card-copy:hover { color: var(--color-foreground, #eee); background: var(--color-secondary, rgba(255,255,255,0.06)); }51.os-card-artifacts { display: inline-flex; align-items: center; gap: 0.25rem; }52.os-card-dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c, transparent); }53.os-card-dot:nth-child(1) { --c: #60a5fa; }54.os-card-dot:nth-child(2) { --c: #34d399; }55.os-card-dot:nth-child(3) { --c: #a78bfa; }56.os-card-dot:nth-child(4) { --c: #fbbf24; }57.os-card-dot-off { --c: var(--color-muted-foreground, #555); opacity: 0.4; }58.os-card-progress { display: flex; align-items: center; gap: 0.25rem; }59.os-card-progress-track { width: 2.5rem; height: 0.25rem; border-radius: 0.125rem; background: var(--color-border, rgba(255,255,255,0.15)); overflow: hidden; }60.os-card-progress-fill { display: block; height: 100%; border-radius: 0.125rem; background: var(--color-primary, #60a5fa); }61.os-card-stats { font-size: 0.68rem; color: var(--color-muted-foreground, #aaa); }6263.os-tone-ideas { border-left: 3px solid #c084fc; }64.os-tone-draft { border-left: 3px solid var(--color-muted-foreground, #6b7280); }65.os-tone-todo { border-left: 3px solid #38bdf8; }66.os-tone-progress { border-left: 3px solid #fb923c; }67.os-tone-done { border-left: 3px solid #2dd4bf; }68.os-tone-archived { border-left: 3px solid var(--color-muted-foreground, #4b5563); opacity: 0.7; }6970/* Chip */71.os-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm, 0.25rem); border: 1px solid var(--color-border, #333); background: transparent; font-size: 0.65rem; font-family: var(--theme-font-mono, monospace); color: var(--color-muted-foreground, #aaa); cursor: pointer; transition: background 0.1s; }72.os-chip:hover { background: var(--color-secondary, rgba(255,255,255,0.06)); }73.os-chip-ico { display: inline-flex; opacity: 0.6; }7475/* Modal */76.os-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; background: rgba(0,0,0,0.6); overflow-y: auto; }77.os-modal { width: 100%; max-width: 36rem; background: var(--color-card, #161616); border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius, 0.5rem); }78.os-modal-wide { max-width: 56rem; }79.os-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border, #2a2a2a); }80.os-modal-title { font-weight: 600; font-size: 0.95rem; color: var(--color-foreground, #eee); }81.os-modal-body { padding: 1rem; max-height: calc(100vh - 12rem); overflow-y: auto; }8283.os-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }84.os-field label { font-size: 0.75rem; color: var(--color-muted-foreground, #aaa); }85.os-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }8687.os-err { color: #f87171; font-size: 0.8rem; }88.os-empty { color: var(--color-muted-foreground, #777); font-size: 0.85rem; padding: 0.5rem 0; }89.os-empty-state { text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--color-muted-foreground, #777); }90.os-invalid-state { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 0; }9192.os-detail-chip { margin-bottom: 0.75rem; }9394/* Custom tabs (replaces Radix Tabs — not all hosts expose TabsContent) */95.os-tabs-bar { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border, #2a2a2a); margin-bottom: 0.75rem; }96.os-tab-btn { padding: 0.375rem 0.75rem; font-size: 0.8rem; font-weight: 500; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--color-muted-foreground, #aaa); cursor: pointer; transition: color 0.12s, border-color 0.12s; }97.os-tab-btn:hover { color: var(--color-foreground, #eee); }98.os-tab-btn-active { color: var(--color-foreground, #eee); border-bottom-color: var(--color-primary, var(--midground, #eee)); }99.os-tab-panel { padding-top: 0.25rem; }100101/* Tasks */102.os-tasks { display: flex; flex-direction: column; gap: 0.75rem; }103.os-tasks-progress { display: flex; align-items: center; gap: 0.5rem; }104.os-tasks-bar { flex: 1; height: 0.375rem; border-radius: 0.1875rem; background: var(--color-secondary, rgba(255,255,255,0.06)); overflow: hidden; }105.os-tasks-bar-fill { height: 100%; border-radius: 0.1875rem; background: var(--color-primary, #60a5fa); transition: width 0.2s; }106.os-tasks-count { font-size: 0.7rem; color: var(--color-muted-foreground, #888); white-space: nowrap; }107.os-tasks-section { display: flex; flex-direction: column; gap: 0.125rem; }108.os-tasks-section-title { font-size: 0.82rem; font-weight: 600; color: var(--color-foreground, #eee); margin: 0; }109.os-task-item { display: flex; align-items: flex-start; gap: 0.375rem; padding: 0.1875rem 0; font-size: 0.78rem; line-height: 1.4; }110.os-task-check { flex-shrink: 0; width: 1rem; text-align: center; font-size: 0.72rem; color: var(--color-muted-foreground, #888); }111.os-task-text { flex: 1; }112.os-task-done .os-task-check { color: var(--color-primary, #60a5fa); }113.os-task-done .os-task-text { color: var(--color-muted-foreground, #888); text-decoration: line-through; }114115/* Markdown */116.os-md { font-size: 0.85rem; line-height: 1.6; color: var(--color-foreground, #eee); }117.os-md h1, .os-md h2, .os-md h3, .os-md h4 { margin: 0.75rem 0 0.375rem; font-weight: 600; color: var(--color-foreground, #eee); }118.os-md h1 { font-size: 1.15rem; } .os-md h2 { font-size: 1.05rem; } .os-md h3 { font-size: 0.95rem; } .os-md h4 { font-size: 0.88rem; }119.os-md p { margin: 0.375rem 0; }120.os-md ul, .os-md ol { margin: 0.375rem 0; padding-left: 1.25rem; }121.os-md li { margin: 0.125rem 0; }122.os-md .os-code { font-family: var(--theme-font-mono, monospace); font-size: 0.82em; color: color-mix(in srgb, var(--midground, var(--color-foreground, inherit)) 90%, transparent); background: var(--color-secondary, color-mix(in srgb, var(--midground-base, currentColor) 8%, transparent)); padding: 0.0625rem 0.25rem; border-radius: var(--radius-sm, 0.1875rem); }123.os-md .os-pre { background: var(--color-secondary, #0e0e0e); border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); padding: 0.625rem; overflow-x: auto; margin: 0.5rem 0; }124.os-md .os-pre code { font-family: var(--theme-font-mono, monospace); font-size: 0.78rem; color: var(--color-foreground, #eee); background: unset; }125.os-md .os-hr { border: none; border-top: 1px solid var(--color-border, #2a2a2a); margin: 0.75rem 0; }126.os-md a { color: var(--color-primary, #60a5fa); text-decoration: underline; }127128.os-spec-block { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border, #2a2a2a); }129.os-spec-block:last-child { border-bottom: none; }130.os-spec-block h4 { font-size: 0.82rem; font-family: var(--theme-font-mono, monospace); color: var(--color-muted-foreground, #aaa); margin-bottom: 0.375rem; }131132/* Specs view */133.os-specs { display: flex; flex-direction: column; gap: 0.75rem; }134.os-specs-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }135.os-specs-title { font-weight: 600; font-size: 0.9rem; color: var(--color-foreground, #eee); }136.os-specs-modes { display: flex; gap: 0.25rem; }137.os-specs-diff-modes { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }138.os-refs-inputs { display: flex; gap: 0.375rem; align-items: center; }139.os-ref-input { width: 9rem; font-size: 0.75rem; }140.os-specs-changed { font-size: 0.78rem; color: #fbbf24; }141142.os-specs-grid { display: grid; grid-template-columns: 16rem 1fr; gap: 0.75rem; min-height: calc(100vh - 18rem); }143.os-specs-list { display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius, 0.5rem); padding: 0.5rem; overflow-y: auto; max-height: calc(100vh - 14rem); }144.os-spec-item { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm, 0.375rem); border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; font-size: 0.78rem; color: var(--color-muted-foreground, #aaa); }145.os-spec-item:hover { background: var(--color-secondary, rgba(255,255,255,0.05)); }146.os-spec-item-active { border-color: var(--color-primary, #555); background: var(--color-secondary, rgba(255,255,255,0.08)); color: var(--color-foreground, #eee); }147.os-spec-item-changed { color: #fbbf24; }148.os-spec-item-path { flex: 1; font-family: var(--theme-font-mono, monospace); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }149.os-spec-status { font-size: 0.6rem; text-transform: uppercase; }150.os-status-added { color: #34d399; } .os-status-modified { color: #fbbf24; } .os-status-deleted { color: #f87171; }151152.os-specs-detail { border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius, 0.5rem); padding: 0.75rem; overflow-y: auto; max-height: calc(100vh - 14rem); }153.os-specs-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }154.os-specs-detail-path { font-family: var(--theme-font-mono, monospace); font-size: 0.8rem; font-weight: 500; color: var(--color-foreground, #eee); }155.os-specs-meta { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.7rem; color: var(--color-muted-foreground, #888); }156157/* Structured spec content */158.os-spec-content { display: flex; flex-direction: column; gap: 1rem; }159.os-spec-purpose { border-left: 3px solid var(--color-primary, #60a5fa); padding-left: 0.625rem; }160.os-spec-purpose-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted-foreground, #777); margin-bottom: 0.25rem; }161.os-spec-purpose p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--color-foreground, #eee); }162.os-spec-req { border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); overflow: hidden; }163.os-spec-req-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: var(--color-secondary, rgba(255,255,255,0.04)); }164.os-spec-req-num { font-size: 0.65rem; font-weight: 700; font-family: var(--theme-font-mono, monospace); color: var(--color-primary, #60a5fa); background: color-mix(in srgb, var(--color-primary, #60a5fa) 12%, transparent); padding: 0.0625rem 0.3125rem; border-radius: var(--radius-sm, 0.25rem); }165.os-spec-req-name { font-size: 0.82rem; font-weight: 600; color: var(--color-foreground, #eee); }166.os-spec-req-desc { margin: 0; padding: 0.5rem 0.625rem; font-size: 0.8rem; line-height: 1.5; color: var(--color-muted-foreground, #bbb); }167.os-spec-scn { margin: 0 0.625rem 0.5rem; padding: 0.5rem; border-left: 2px solid var(--color-border, #333); border-radius: 0 0.25rem 0.25rem 0; background: color-mix(in srgb, var(--color-secondary, rgba(255,255,255,0.03)) 50%, transparent); }168.os-spec-scn-name { font-size: 0.75rem; font-weight: 600; color: var(--color-foreground, #ddd); margin-bottom: 0.375rem; }169.os-spec-step { display: flex; align-items: flex-start; gap: 0.375rem; padding: 0.125rem 0; font-size: 0.76rem; line-height: 1.4; }170.os-spec-step-label { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; font-family: var(--theme-font-mono, monospace); min-width: 2.5rem; text-align: right; }171.os-spec-step-text { flex: 1; color: var(--color-foreground, #ddd); }172.os-spec-step-when .os-spec-step-label { color: #38bdf8; }173.os-spec-step-then .os-spec-step-label { color: #2dd4bf; }174.os-spec-step-and .os-spec-step-label { color: var(--color-muted-foreground, #888); }175.os-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }176.os-diff-col { border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); padding: 0.5rem; overflow-x: auto; }177.os-diff-col-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-foreground, #777); margin-bottom: 0.375rem; }178.os-diff-unified { background: var(--color-secondary, #0e0e0e); border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); padding: 0.625rem; font-family: var(--theme-font-mono, monospace); font-size: 0.72rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }179180/* Semantic spec delta view */181.os-spec-delta { display: flex; flex-direction: column; gap: 0.75rem; }182.os-delta-summary { padding: 0.5rem 0.625rem; background: var(--color-secondary, #0e0e0e); border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); }183.os-delta-summary-text { font-size: 0.8rem; font-weight: 600; }184.os-delta-unchanged { color: var(--color-muted-foreground, #777); }185.os-delta-section { border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-sm, 0.375rem); padding: 0.5rem; }186.os-delta-section-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted-foreground, #777); margin-bottom: 0.375rem; }187.os-spec-req-delta { margin-bottom: 0.5rem; }188.os-spec-req-delta:last-child { margin-bottom: 0; }189.os-spec-scn-added { border-left: 2px solid #22c55e; padding-left: 0.5rem; }190.os-spec-scn-removed { border-left: 2px solid #ef4444; padding-left: 0.5rem; opacity: 0.7; }191.os-spec-scn-modified { border-left: 2px solid #f59e0b; padding-left: 0.5rem; }192.os-delta-desc-change { margin: 0.25rem 0; padding: 0.375rem; background: var(--color-secondary, #0e0e0e); border-radius: var(--radius-sm, 0.375rem); font-size: 0.8rem; }193.os-delta-before { color: var(--color-muted-foreground, #999); text-decoration: line-through; }194.os-delta-after { color: var(--color-foreground, #e0e0e0); }195.os-delta-label { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }196.os-delta-scenarios { margin-top: 0.25rem; }197.os-delta-scenario-change { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.25rem; }198.os-delta-unchanged-section { margin-top: 0.25rem; }199.os-delta-unchanged-section summary { cursor: pointer; font-size: 0.78rem; color: var(--color-muted-foreground, #777); }200.os-delta-unchanged-list { padding: 0.375rem 0 0 1rem; }201.os-delta-unchanged-req { font-size: 0.78rem; color: var(--color-muted-foreground, #777); }202.os-delta-raw-section { margin-top: 0.5rem; }203.os-delta-raw-section summary { cursor: pointer; font-size: 0.78rem; color: var(--color-muted-foreground, #777); }204205/* Spec list semantic summary */206.os-spec-item-summary { font-size: 0.65rem; font-family: var(--theme-font-mono, monospace); color: var(--color-muted-foreground, #999); margin-left: auto; white-space: nowrap; }207208/* Mobile: the spec browser's desktop two-pane view is too wide for phones. */209@media (max-width: 760px) {210 .os-page {211 padding: 0.5rem;212 gap: 0.625rem;213 overflow-x: hidden;214 }215216 .os-toolbar,217 .os-specs-toolbar,218 .os-board-head,219 .os-board-filter {220 align-items: stretch;221 }222223 .os-toolbar label,224 .os-specs-title,225 .os-repo-name,226 .os-repo-path,227 .os-specs-changed {228 min-width: 0;229 overflow-wrap: anywhere;230 }231232 .os-toolbar label,233 .os-specs-title,234 .os-repo-name {235 width: 100%;236 }237238 .os-toolbar-actions {239 margin-left: 0;240 }241242 .os-page div.relative:has(> button[role="combobox"]) {243 width: 100%;244 min-width: 0;245 }246247 .os-view-switch,248 .os-specs-modes,249 .os-specs-diff-modes {250 width: 100%;251 overflow-x: auto;252 padding-bottom: 0.125rem;253 -webkit-overflow-scrolling: touch;254 }255256 .os-view-switch button,257 .os-specs-modes button,258 .os-specs-diff-modes button {259 flex: 0 0 auto;260 white-space: nowrap;261 }262263 .os-refs-inputs,264 .os-board-filter {265 width: 100%;266 flex-wrap: wrap;267 }268269 .os-ref-input,270 .os-filter-input {271 flex: 1 1 9rem;272 width: auto;273 min-width: 0;274 max-width: none;275 }276277 .os-specs-grid {278 display: flex;279 flex-direction: column;280 min-height: 0;281 }282283 .os-specs-list {284 flex-direction: row;285 max-height: none;286 overflow-x: auto;287 overflow-y: hidden;288 padding: 0.375rem;289 -webkit-overflow-scrolling: touch;290 }291292 .os-spec-item {293 flex: 0 0 13rem;294 min-width: 0;295 }296297 .os-spec-item-path,298 .os-specs-detail-path,299 .os-spec-req-name,300 .os-spec-scn-name,301 .os-spec-step-text,302 .os-card-title {303 min-width: 0;304 white-space: normal;305 overflow-wrap: anywhere;306 }307308 .os-specs-detail {309 max-height: none;310 min-width: 0;311 padding: 0.625rem;312 }313314 .os-specs-detail-head,315 .os-specs-meta,316 .os-spec-req-head {317 flex-wrap: wrap;318 align-items: flex-start;319 }320321 .os-chip {322 max-width: 100%;323 overflow: hidden;324 text-overflow: ellipsis;325 }326327 .os-spec-scn {328 margin-left: 0.5rem;329 margin-right: 0.5rem;330 }331332 .os-spec-step {333 gap: 0.25rem;334 }335336 .os-spec-step-label {337 min-width: 2.1rem;338 text-align: left;339 }340341 .os-diff-cols,342 .os-delta-scenario-change {343 grid-template-columns: 1fr;344 }345346 .os-diff-col,347 .os-diff-unified {348 min-width: 0;349 max-width: 100%;350 }351352 .os-overlay {353 padding: 0.5rem;354 }355356 .os-modal-body {357 max-height: calc(100vh - 6rem);358 }359}