/* ProcessWeave Design System — base, application shell and components. * * Sprint 9A introduced it; Sprint 9E made it the only stylesheet besides the * tokens (the legacy app.css and its variable aliases are gone). It consumes * semantic --pw-* tokens only: no raw colours, no primitive palette tokens, * spacing from the --pw-space-* scale (enforced by test_design_system.py), so * both themes come from design_tokens.css alone. * * Sections * 1. Base & icons 6. Badges & status 11. Tabs * 2. Application shell 7. Forms 12. Alerts & toasts * 3. Page header 8. Tables 13. Empty state * 4. Buttons 9. Dialogs & menus 14. Utilities * 5. Cards & metrics 10. Lists & key-value 15. Explorer, tree, search, bin * 16. Process workspace * 17. Enterprise screens * 18. Modeller * 19. BPMN import * 20. BPMN viewer * 21. Version comparison * 22. Checkout & editing lock * 23. BPMN editor * 24. Governance lifecycle * 25. Responsive & print * Guides: docs/design-system/COMPONENT_GUIDE.md, LAYOUT_GUIDE.md. */ /* 1. Base & icons ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute must win over component display rules (e.g. .pill, .btn). */ [hidden] { display: none !important; } html { font-family: var(--pw-font-sans); line-height: var(--pw-line-height-normal); color: var(--pw-color-text); background: var(--pw-color-canvas); } body { margin: 0; min-height: 100vh; font-size: var(--pw-font-size-md); color: var(--pw-color-text); background: var(--pw-color-canvas); -webkit-font-smoothing: antialiased; } h1 { margin: 0 0 var(--pw-space-1); font-size: var(--pw-font-size-2xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-tight); letter-spacing: var(--pw-letter-spacing-tight); } h2 { margin: 0 0 var(--pw-space-3); font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } h3 { margin: 0 0 var(--pw-space-2); font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-semibold); } a { color: var(--pw-color-link); text-underline-offset: 2px; } a:hover { color: var(--pw-color-link-hover); } code { font-family: var(--pw-font-mono); font-size: 0.85em; } :focus-visible { outline: none; box-shadow: var(--pw-shadow-focus); border-radius: var(--pw-radius-xs); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: var(--pw-space-2); z-index: var(--pw-z-skip-link); padding: var(--pw-space-2) var(--pw-space-3); border-radius: var(--pw-radius-sm); background: var(--pw-color-surface); color: var(--pw-color-link); font-weight: var(--pw-font-weight-semibold); } .skip-link:focus { left: var(--pw-space-2); } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 22px; height: 22px; } .icon-xl { width: 32px; height: 32px; stroke-width: 1.5; } /* 2. Application shell ======================================================= */ .app-shell { display: grid; grid-template-columns: var(--pw-sidebar-width) minmax(0, 1fr); min-height: 100vh; } .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--pw-z-sticky); display: flex; flex-direction: column; gap: var(--pw-space-2); background: var(--pw-color-chrome-strong); color: var(--pw-color-chrome-text); padding: var(--pw-space-4) var(--pw-space-3); } .app-sidebar .brand { display: flex; align-items: center; gap: var(--pw-space-3); padding: var(--pw-space-2) var(--pw-space-2) var(--pw-space-4); color: var(--pw-color-chrome-text-strong); text-decoration: none; font-weight: var(--pw-font-weight-semibold); font-size: var(--pw-font-size-md); letter-spacing: 0.01em; } .brand-tagline { display: block; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-regular); color: var(--pw-color-chrome-text-muted); letter-spacing: 0; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-section { margin: var(--pw-space-4) var(--pw-space-2) var(--pw-space-1); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-chrome-text-muted); } .sidebar-nav a { display: flex; align-items: center; gap: var(--pw-space-3); min-height: 36px; padding: 0 var(--pw-space-3); border-radius: var(--pw-radius-sm); color: var(--pw-color-chrome-text); text-decoration: none; font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-medium); transition: background-color var(--pw-duration-fast) var(--pw-ease-standard); } .sidebar-nav a:hover { background: var(--pw-color-chrome-hover); color: var(--pw-color-chrome-text-strong); } .sidebar-nav a[aria-current="page"] { background: var(--pw-color-chrome-active); color: var(--pw-color-chrome-text-strong); box-shadow: inset 3px 0 0 var(--pw-color-primary); } .sidebar-nav a .icon { opacity: 0.9; } .sidebar-footer { margin-top: auto; padding: var(--pw-space-3) var(--pw-space-2) 0; border-top: 1px solid var(--pw-color-chrome-divider); font-size: var(--pw-font-size-xs); color: var(--pw-color-chrome-text-muted); } .app-frame { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .app-topbar { position: sticky; top: 0; z-index: var(--pw-z-topbar); display: flex; align-items: center; gap: var(--pw-space-4); height: var(--pw-topbar-height); padding: 0 var(--pw-space-8); background: var(--pw-color-topbar); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--pw-color-border); } .topbar-search { position: relative; flex: 0 1 480px; } .topbar-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--pw-color-text-muted); pointer-events: none; } .topbar-search input { width: 100%; height: var(--pw-control-height); padding: 0 var(--pw-space-3) 0 calc(var(--pw-space-8) + var(--pw-space-1)); font: inherit; font-size: var(--pw-font-size-md); color: var(--pw-color-text); background: var(--pw-color-surface-sunken); border: 1px solid transparent; border-radius: var(--pw-radius-md); } .topbar-search input:hover { border-color: var(--pw-color-border-strong); } .topbar-search input:focus { outline: none; background: var(--pw-color-surface); border-color: var(--pw-color-primary); box-shadow: var(--pw-shadow-focus); } .topbar-spacer { flex: 1; } .user-chip { display: flex; align-items: center; gap: var(--pw-space-3); } .user-chip form { margin: 0; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pw-radius-full); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; } .user-chip-name { display: flex; flex-direction: column; line-height: var(--pw-line-height-tight); } .user-chip-name strong { font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-semibold); } .user-chip-name span { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .app-content { flex: 1; width: 100%; padding: var(--pw-space-8); } .app-content.page { max-width: none; margin: 0; } .app-content.page > * { max-width: var(--pw-content-max); margin-left: auto; margin-right: auto; } .app-content.page-wide > * { max-width: none; } .app-content.page-auth > * { width: 100%; max-width: 440px; } .app-footer { display: flex; flex-wrap: wrap; gap: var(--pw-space-2) var(--pw-space-6); justify-content: space-between; padding: var(--pw-space-5) var(--pw-space-8); border-top: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } /* Unauthenticated pages: centred card on a quiet canvas */ .auth-shell { min-height: 100vh; display: flex; flex-direction: column; } .auth-topbar { display: flex; align-items: center; padding: var(--pw-space-5) var(--pw-space-8); } .auth-topbar .brand { display: inline-flex; align-items: center; gap: var(--pw-space-3); color: var(--pw-color-text); text-decoration: none; font-weight: var(--pw-font-weight-semibold); } .auth-shell .app-content { display: flex; justify-content: center; align-items: flex-start; } .auth-card { box-shadow: var(--pw-shadow-2); border: 1px solid var(--pw-color-border); padding: var(--pw-space-8); } /* 3. Page header ============================================================= */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-4) var(--pw-space-6); margin-bottom: var(--pw-space-6); } .page-header-text { min-width: 0; max-width: 72ch; } .page-eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: var(--pw-space-1); margin: 0 0 var(--pw-space-1); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-primary); } .page-eyebrow a, .eyebrow a { color: inherit; text-decoration: none; } .page-eyebrow a:hover, .eyebrow a:hover { text-decoration: underline; } .page-title { margin: 0; font-size: var(--pw-font-size-2xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-tight); letter-spacing: var(--pw-letter-spacing-tight); } .page-subtitle { margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-md); color: var(--pw-color-text-muted); line-height: var(--pw-line-height-normal); } .page-meta { display: flex; flex-wrap: wrap; gap: var(--pw-space-2) var(--pw-space-4); margin: var(--pw-space-3) 0 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .page-meta > span { display: inline-flex; align-items: center; gap: var(--pw-space-1); } .page-actions, .action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .action-bar { justify-content: space-between; padding: var(--pw-space-3) var(--pw-space-4); margin-bottom: var(--pw-space-4); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-1); margin: 0 0 var(--pw-space-4); padding: 0; list-style: none; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .breadcrumbs li + li::before { content: "/"; margin: 0 var(--pw-space-2) 0 var(--pw-space-1); color: var(--pw-color-border-strong); } .breadcrumbs a { color: var(--pw-color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--pw-color-link); text-decoration: underline; } .breadcrumbs [aria-current] { color: var(--pw-color-text); font-weight: var(--pw-font-weight-medium); } /* 4. Buttons ================================================================= */ .btn { /* never `button.btn`: it would out-rank the variant classes (UI_AUDIT F-1) */ display: inline-flex; align-items: center; justify-content: center; gap: var(--pw-space-2); min-height: var(--pw-control-height); padding: 0 var(--pw-space-4); font: inherit; font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-semibold); line-height: 1; border-radius: var(--pw-radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--pw-duration-fast) var(--pw-ease-standard), border-color var(--pw-duration-fast) var(--pw-ease-standard), box-shadow var(--pw-duration-fast) var(--pw-ease-standard); } .btn-sm { min-height: var(--pw-control-height-sm); padding: 0 var(--pw-space-3); font-size: var(--pw-font-size-sm); } .btn-primary { background: var(--pw-color-primary); color: var(--pw-color-on-primary); box-shadow: var(--pw-shadow-button); } .btn-primary:hover { background: var(--pw-color-primary-hover); color: var(--pw-color-on-primary); } .btn-secondary { background: var(--pw-color-surface); color: var(--pw-color-secondary); border-color: var(--pw-color-border-strong); } .btn-secondary:hover { background: var(--pw-color-surface-subtle); border-color: var(--pw-color-text-disabled); color: var(--pw-color-secondary); } .btn-danger { background: var(--pw-color-danger); color: var(--pw-color-on-primary); } .btn-danger:hover { background: var(--pw-color-danger-hover); color: var(--pw-color-on-primary); } .btn-danger-subtle { background: var(--pw-color-surface); color: var(--pw-color-danger); border-color: var(--pw-color-danger-border); } .btn-danger-subtle:hover { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger-hover); } .btn-ghost, .btn-text { background: transparent; color: var(--pw-color-secondary); } .btn-ghost:hover { background: var(--pw-color-neutral-subtle); color: var(--pw-color-secondary); } .btn-text { color: var(--pw-color-link); padding-left: var(--pw-space-2); padding-right: var(--pw-space-2); } .btn-text:hover { background: var(--pw-color-primary-subtle); color: var(--pw-color-link-hover); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; } .btn:focus-visible { box-shadow: var(--pw-shadow-focus); outline: none; } .btn-icon { width: var(--pw-control-height); padding: 0; } /* 5. Cards & metrics ========================================================= */ .card { background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); padding: var(--pw-space-6); margin-bottom: var(--pw-space-6); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-3); margin: 0 0 var(--pw-space-4); } .card-title { display: flex; align-items: center; gap: var(--pw-space-2); margin: 0; font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } .card-title .icon { color: var(--pw-color-text-muted); } .card-count { font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); } .card-description { margin: calc(-1 * var(--pw-space-2)) 0 var(--pw-space-4); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .card-footer { margin: var(--pw-space-4) calc(-1 * var(--pw-space-6)) calc(-1 * var(--pw-space-6)); padding: var(--pw-space-3) var(--pw-space-6); border-top: 1px solid var(--pw-color-border); background: var(--pw-color-surface-subtle); border-radius: 0 0 var(--pw-radius-lg) var(--pw-radius-lg); font-size: var(--pw-font-size-sm); } .card-flush { padding: 0; } .card-flush > .card-header { padding: var(--pw-space-5) var(--pw-space-6) 0; } .card-flush > .card-description { padding: 0 var(--pw-space-6); margin-top: calc(-1 * var(--pw-space-2)); } .card-flush .table-wrap { border-top: 1px solid var(--pw-color-border); } .card-flush > .empty-state { border-top: 1px solid var(--pw-color-border); } .dashboard-card { display: flex; flex-direction: column; margin-bottom: 0; } .dashboard-card .card-body { flex: 1; } .info-card { border-left: 3px solid var(--pw-color-primary); } .info-card.is-warning { border-left-color: var(--pw-color-warning); } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pw-space-4); margin-bottom: var(--pw-space-8); } .metric-card { position: relative; display: flex; flex-direction: column; gap: var(--pw-space-1); padding: var(--pw-space-5); margin: 0; background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); color: inherit; text-decoration: none; } .metric-label { display: flex; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); } .metric-label .icon { color: var(--pw-color-primary); } .metric-value { margin-top: auto; padding-top: var(--pw-space-2); font-size: var(--pw-font-size-3xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-tight); letter-spacing: var(--pw-letter-spacing-tight); color: var(--pw-color-text); font-variant-numeric: tabular-nums; } .metric-hint { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } a.metric-card:hover { border-color: var(--pw-color-primary-border); box-shadow: var(--pw-shadow-2); } a.metric-card:hover .metric-value { color: var(--pw-color-primary-hover); } .metric-card.is-attention .metric-value { color: var(--pw-color-warning); } .metric-card.is-critical .metric-value { color: var(--pw-color-danger); } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pw-space-3); margin: 0 0 var(--pw-space-4); } .section-title { margin: 0; font-size: var(--pw-font-size-xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } .section-link { display: inline-flex; align-items: center; gap: var(--pw-space-1); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); text-decoration: none; } .section-link:hover { text-decoration: underline; } /* Split layout: primary column + 360px context rail (forms, explanations) */ .split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--pw-space-6); align-items: start; } .split-aside { position: sticky; top: calc(var(--pw-topbar-height) + var(--pw-space-6)); } .split-layout > * > .card:last-child { margin-bottom: 0; } .subject-choice { display: grid; grid-template-columns: 1fr; gap: 0; padding: var(--pw-space-4) var(--pw-space-4) 0; margin: 0 0 var(--pw-space-5); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-md); } .subject-choice legend { padding: 0 var(--pw-space-1); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); } .subject-choice .field { margin-bottom: var(--pw-space-4); } .or-divider { display: flex; align-items: center; gap: var(--pw-space-3); margin: 0 0 var(--pw-space-4); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--pw-color-border); } .level-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-3); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .level-list-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-space-6); } .level-list strong { display: block; color: var(--pw-color-text); font-size: var(--pw-font-size-md); } .dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pw-space-5); align-items: start; margin-bottom: var(--pw-space-8); } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; } .form-card { max-width: 560px; margin: var(--pw-space-6) auto; } .widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pw-space-5); } .widget { margin-bottom: 0; } /* 6. Badges & status ========================================================= */ .badge { display: inline-flex; align-items: center; gap: var(--pw-space-1); padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); line-height: 1.4; font-variant-numeric: tabular-nums; vertical-align: middle; } .badge-admin { background: var(--pw-color-highlight); color: var(--pw-color-on-highlight); } .badge-primary { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); } .pill { font-size: var(--pw-font-size-xs); padding: 2px var(--pw-space-2); line-height: 1.4; } .status { display: inline-flex; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-secondary); white-space: nowrap; } .status::before { content: ""; width: 8px; height: 8px; border-radius: var(--pw-radius-full); background: var(--pw-color-text-disabled); flex: 0 0 auto; } .status-success::before { background: var(--pw-color-success); } .status-warning::before { background: var(--pw-color-warning-accent); } .status-danger::before { background: var(--pw-color-danger); } .status-info::before { background: var(--pw-color-primary); } .role-badge { display: inline-flex; align-items: center; padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-sm); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); letter-spacing: 0.02em; border: 1px solid transparent; } .role-owner { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); border-color: var(--pw-color-warning-border); } .role-editor { background: var(--pw-color-info-subtle); color: var(--pw-color-info); border-color: var(--pw-color-info-border); } .role-viewer { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); border-color: var(--pw-color-border); } /* Model health chip: grade letter in a circle + score (includes/health_badge.html) */ .health { display: inline-flex; align-items: center; gap: var(--pw-space-1); vertical-align: middle; padding: 2px var(--pw-space-3) 2px 3px; border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-bold); } .health-grade { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--pw-radius-full); background: var(--pw-color-surface); font-size: var(--pw-font-size-xs); } .health-a { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .health-b { background: var(--pw-color-positive-subtle); color: var(--pw-color-positive); } .health-c { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .health-d, .health-e { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .health-none { padding: 2px var(--pw-space-3); } /* 7. Forms =================================================================== */ .field { margin-bottom: var(--pw-space-5); } .field label, .form-label { display: block; margin-bottom: var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text); } .input, .select, .textarea, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select, .inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .inline-form select { min-height: var(--pw-control-height); padding: var(--pw-space-2) var(--pw-space-3); font: inherit; font-size: var(--pw-font-size-md); color: var(--pw-color-text); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); transition: border-color var(--pw-duration-fast) var(--pw-ease-standard), box-shadow var(--pw-duration-fast) var(--pw-ease-standard); } .field textarea, .textarea { min-height: 88px; line-height: var(--pw-line-height-normal); resize: vertical; } .input:hover, .select:hover, .textarea:hover, .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--pw-color-text-disabled); } .input:focus, .select:focus, .textarea:focus, .field input:focus, .field textarea:focus, .field select:focus, .inline-form input:focus, .inline-form select:focus { outline: none; border-color: var(--pw-color-primary); box-shadow: var(--pw-shadow-focus); } .select, .field select, .inline-form select { appearance: none; padding-right: var(--pw-space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .field-invalid input, .field-invalid textarea, .field-invalid select, [aria-invalid="true"] { border-color: var(--pw-color-danger); } .field-error { display: flex; align-items: center; gap: var(--pw-space-1); margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-danger); } .help, .field-help { margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .checkbox { display: inline-flex; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-regular); cursor: pointer; } .checkbox input, input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pw-color-primary); } .form-actions, .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pw-space-2); margin-top: var(--pw-space-6); } .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: auto; min-width: 240px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pw-space-4); } .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select { width: 100%; } .req { color: var(--pw-color-danger); } .inline-form label { font-weight: var(--pw-font-weight-semibold); } .help ul { margin: var(--pw-space-1) 0 0; padding-left: var(--pw-space-5); } /* 8. Tables ================================================================== */ .table-wrap { overflow-x: auto; } .data-table, .process-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pw-font-size-md); } .data-table th, .process-table th { position: sticky; top: 0; z-index: 1; padding: var(--pw-space-3) var(--pw-space-4); text-align: left; white-space: nowrap; background: var(--pw-color-surface-subtle); border-bottom: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pw-color-text-muted); } .data-table td, .process-table td { padding: var(--pw-space-3) var(--pw-space-4); border-bottom: 1px solid var(--pw-color-border); vertical-align: middle; } .data-table tbody tr:last-child td, .process-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover, .process-row:hover { background: var(--pw-color-surface-subtle); } .data-table-compact th { padding: var(--pw-space-2) var(--pw-space-3); } .data-table-compact td { padding: var(--pw-space-2) var(--pw-space-3); font-size: var(--pw-font-size-sm); } .data-table a:not(.btn), .timeline a { text-decoration: none; font-weight: var(--pw-font-weight-medium); } .data-table a:not(.btn):hover, .timeline a:hover { text-decoration: underline; } .cell-primary { font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text); text-decoration: none; } a.cell-primary:hover { color: var(--pw-color-link); text-decoration: underline; } .cell-secondary { display: block; margin-top: 2px; white-space: nowrap; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .cell-numeric { text-align: right; font-variant-numeric: tabular-nums; } .cell-nowrap { white-space: nowrap; } .cell-user { display: flex; align-items: center; gap: var(--pw-space-3); } .cell-user .avatar { width: 28px; height: 28px; font-size: var(--pw-font-size-xs); flex: 0 0 auto; } .cell-user .cell-secondary { white-space: normal; } .row-actions { white-space: nowrap; text-align: right; } .row-actions form { display: inline; margin: 0; } .row-actions > * + * { margin-left: var(--pw-space-2); } /* 9. Dialogs & menus ========================================================= */ .dialog { width: min(520px, calc(100vw - 32px)); padding: var(--pw-space-6); border: 0; border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-4); color: var(--pw-color-text); } .dialog-lg { width: min(680px, calc(100vw - 32px)); } .dialog::backdrop { background: var(--pw-color-backdrop); } .dialog h2, .dialog-title { margin: 0 0 var(--pw-space-2); font-size: var(--pw-font-size-xl); font-weight: var(--pw-font-weight-semibold); } .dialog-description { margin: 0 0 var(--pw-space-5); font-size: var(--pw-font-size-md); color: var(--pw-color-text-muted); } .dialog-danger h2 { display: flex; align-items: center; gap: var(--pw-space-2); color: var(--pw-color-danger); } .dialog .widget-list { max-height: 320px; overflow-y: auto; margin: var(--pw-space-4) 0 0; } .dialog-actions { padding-top: var(--pw-space-4); border-top: 1px solid var(--pw-color-border); } /* Menus:
…
… */ .menu { position: relative; display: inline-block; } .menu summary { list-style: none; } .menu summary::-webkit-details-marker { display: none; } .menu .menu-panel { position: absolute; right: 0; top: calc(100% + var(--pw-space-1)); text-align: left; } .menu-panel a, .menu-panel button { width: 100%; border: 0; background: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .menu-panel form { margin: 0; } .danger-text, .menu-panel .danger-text { color: var(--pw-color-danger); } /* 10. Lists & key-value ====================================================== */ .widget-list li, .activity-list li { padding: var(--pw-space-3) 0; border-bottom: 1px solid var(--pw-color-border); } .item-list { list-style: none; margin: 0; padding: 0; } .item-list li { display: flex; align-items: center; gap: var(--pw-space-3); padding: var(--pw-space-3) 0; border-bottom: 1px solid var(--pw-color-border); } .item-list li:last-child { border-bottom: 0; } .item-main { flex: 1; min-width: 0; } .item-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text); text-decoration: none; } a.item-title:hover { color: var(--pw-color-link); text-decoration: underline; } .item-meta { display: block; margin-top: 2px; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pw-radius-md); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); flex: 0 0 auto; } .item-icon.is-neutral { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .item-trailing { flex: 0 0 auto; display: flex; align-items: center; gap: var(--pw-space-2); } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: var(--pw-space-4); padding: var(--pw-space-2) 0 var(--pw-space-3); } .timeline time { font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); font-variant-numeric: tabular-nums; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--pw-space-2) var(--pw-space-6); margin: 0; font-size: var(--pw-font-size-md); } .kv dt { color: var(--pw-color-text-muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .widget-list, .activity-list { list-style: none; margin: 0; padding: 0; } .widget-list li:last-child, .activity-list li:last-child { border-bottom: 0; } .activity-list time { margin-right: var(--pw-space-2); } /* 11. Tabs =================================================================== */ .tabs { display: flex; flex-wrap: wrap; gap: var(--pw-space-1); margin: 0 0 var(--pw-space-6); border-bottom: 1px solid var(--pw-color-border); } .tabs a { display: inline-flex; align-items: center; gap: var(--pw-space-2); padding: var(--pw-space-3) var(--pw-space-3); margin-bottom: -1px; font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; } .tabs a:hover { color: var(--pw-color-text); border-bottom-color: var(--pw-color-border-strong); } .tabs a[aria-current="page"] { color: var(--pw-color-primary-hover); border-bottom-color: var(--pw-color-primary); font-weight: var(--pw-font-weight-semibold); } /* 12. Alerts & toasts ======================================================== */ .alert { display: flex; align-items: flex-start; gap: var(--pw-space-3); padding: var(--pw-space-3) var(--pw-space-4); border-radius: var(--pw-radius-md); border: 1px solid transparent; font-size: var(--pw-font-size-md); } .alert-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); border-color: var(--pw-color-info-border); } .alert-success { background: var(--pw-color-success-subtle); color: var(--pw-color-success); border-color: var(--pw-color-success-border); } .alert-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); border-color: var(--pw-color-warning-border); } .alert-error { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); border-color: var(--pw-color-danger-border); } .app-frame .flash-stack { position: sticky; top: calc(var(--pw-topbar-height) + var(--pw-space-3)); z-index: var(--pw-z-toast); width: 100%; max-width: var(--pw-content-max); margin: var(--pw-space-4) auto 0; padding: 0 var(--pw-space-8); } .app-frame .flash-stack .alert { box-shadow: var(--pw-shadow-2); margin-bottom: var(--pw-space-2); } .callout { display: flex; gap: var(--pw-space-3); padding: var(--pw-space-4); border-radius: var(--pw-radius-md); background: var(--pw-color-surface-sunken); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); margin: 0 0 var(--pw-space-5); } .callout .icon { color: var(--pw-color-primary); margin-top: 1px; } .callout-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .callout-warning .icon { color: var(--pw-color-warning); } .callout p { margin: 0; } .card .level-list + .callout { margin: var(--pw-space-5) 0 0; } .alert { margin: 0 0 var(--pw-space-3); } .alert p { margin: 0; } .flash-stack { width: 100%; max-width: var(--pw-content-max); margin: var(--pw-space-4) auto 0; padding: 0 var(--pw-space-8); } /* 13. Empty state ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--pw-space-2); padding: var(--pw-space-10) var(--pw-space-6); text-align: center; color: var(--pw-color-text-secondary); } .empty-state h2, .empty-state-title { margin: 0; font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text); } .empty-state p { margin: 0; max-width: 46ch; font-size: var(--pw-font-size-md); color: var(--pw-color-text-muted); } .empty-state .icon { color: var(--pw-color-text-disabled); margin-bottom: var(--pw-space-2); } .empty-inline { margin: 0; padding: var(--pw-space-4) 0; font-size: var(--pw-font-size-md); color: var(--pw-color-text-muted); } /* 14. Utilities ============================================================== */ .stack > * + * { margin-top: var(--pw-space-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .text-muted { color: var(--pw-color-text-muted); } .text-sm { font-size: var(--pw-font-size-sm); } .text-xs { font-size: var(--pw-font-size-xs); } .nowrap { white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } form.inline, .inline { display: inline; margin: 0; } .hash { word-break: break-all; } .favorite-form { display: inline; margin: 0; } /* 15. Explorer, tree, search, recycle bin (Sprint 9B) ======================== */ /* Explorer: sticky tree rail + main column */ .explorer { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--pw-space-6); align-items: start; } .explorer-sidebar { position: sticky; top: calc(var(--pw-topbar-height) + var(--pw-space-6)); max-height: calc(100vh - var(--pw-topbar-height) - var(--pw-space-12)); overflow-y: auto; padding: var(--pw-space-4) var(--pw-space-3); margin: 0; background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); } .explorer-main { min-width: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; min-height: 0; } .sidebar-heading { display: flex; align-items: center; gap: var(--pw-space-2); margin: 0 var(--pw-space-2) var(--pw-space-3); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } /* Repository tree nodes */ .repo-tree { font-size: var(--pw-font-size-md); } .rt-list { list-style: none; margin: 0; padding: 0; } .rt-nested { margin-left: calc(var(--pw-space-3) - 1px); padding-left: var(--pw-space-2); border-left: 1px solid var(--pw-color-border); } .rt-row { display: flex; align-items: center; gap: 2px; min-height: 32px; } .rt-toggle { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--pw-radius-xs); background: none; color: var(--pw-color-text-muted); cursor: pointer; } .rt-toggle:hover { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text); } .rt-toggle .icon { width: 14px; height: 14px; transition: transform var(--pw-duration-fast) var(--pw-ease-standard); } .rt-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); } .rt-spacer { flex: 0 0 22px; } .rt-link, .rt-label { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--pw-space-2); padding: var(--pw-space-1) var(--pw-space-2); border-radius: var(--pw-radius-sm); color: var(--pw-color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-link:hover { background: var(--pw-color-surface-subtle); color: var(--pw-color-text); } .rt-link.is-current { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); font-weight: var(--pw-font-weight-semibold); box-shadow: inset 2px 0 0 var(--pw-color-primary); } .rt-link .rt-text { overflow: hidden; text-overflow: ellipsis; } .rt-icon { display: inline-flex; flex: 0 0 auto; color: var(--pw-color-text-muted); } .rt-icon .icon { width: 16px; height: 16px; } .rt-folder .rt-icon { color: var(--pw-color-favorite); } .rt-link.is-current .rt-icon { color: var(--pw-color-primary); } .rt-process { font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .rt-process .rt-icon { color: var(--pw-color-primary); } .rt-section { padding: var(--pw-space-1) var(--pw-space-2); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .rt-empty { padding: var(--pw-space-1) var(--pw-space-2) var(--pw-space-1) calc(var(--pw-space-6) + var(--pw-space-1)); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .rt-more a { display: inline-block; padding: var(--pw-space-1) var(--pw-space-2) var(--pw-space-1) calc(var(--pw-space-6) + var(--pw-space-1)); font-size: var(--pw-font-size-sm); text-decoration: none; } .rt-more a:hover { text-decoration: underline; } /* Folder tiles */ .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pw-space-3); padding: var(--pw-space-4) var(--pw-space-6) var(--pw-space-6); } .folder-tile { display: flex; align-items: center; gap: var(--pw-space-3); padding: var(--pw-space-3) var(--pw-space-4); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-md); background: var(--pw-color-surface); color: var(--pw-color-text); text-decoration: none; transition: border-color var(--pw-duration-fast) var(--pw-ease-standard), box-shadow var(--pw-duration-fast) var(--pw-ease-standard); } .folder-tile:hover { border-color: var(--pw-color-primary-border); box-shadow: var(--pw-shadow-2); color: var(--pw-color-text); } .folder-tile .item-icon { background: var(--pw-color-warning-subtle); color: var(--pw-color-favorite); } .folder-tile-name { display: block; font-weight: var(--pw-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-tile-meta { display: block; font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } /* Explorer rows (process table) */ .process-row:focus-visible { box-shadow: inset var(--pw-shadow-focus); } .process-name { font-weight: var(--pw-font-weight-semibold); text-decoration: none; } .explorer-row-name { display: flex; align-items: flex-start; gap: var(--pw-space-3); min-width: 0; } .explorer-row-name .item-icon { margin-top: 2px; } .explorer-row-name { min-width: 200px; } .explorer-row-name .item-main { min-width: 0; } .explorer-row-name .cell-secondary { max-width: 52ch; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pw-space-1); } .fav-mark { display: inline-flex; color: var(--pw-color-favorite); vertical-align: -2px; } .fav-mark .icon, .favorite-on .icon { fill: currentColor; } .favorite-on { color: var(--pw-color-favorite); } .menu-panel { z-index: var(--pw-z-dropdown); min-width: 200px; padding: var(--pw-space-1); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-md); box-shadow: var(--pw-shadow-3); } .menu-panel a, .menu-panel button { display: flex; align-items: center; gap: var(--pw-space-2); padding: var(--pw-space-2) var(--pw-space-3); border-radius: var(--pw-radius-sm); font-size: var(--pw-font-size-md); color: var(--pw-color-text); } .menu-panel a:hover, .menu-panel button:hover { background: var(--pw-color-surface-subtle); } .menu-panel .icon { color: var(--pw-color-text-muted); } .menu-panel .danger-text .icon { color: var(--pw-color-danger); } .menu-separator { height: 1px; margin: var(--pw-space-1) 0; background: var(--pw-color-border); } .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-4); margin: 0; padding: var(--pw-space-3) var(--pw-space-6); background: var(--pw-color-surface-subtle); border-top: 1px solid var(--pw-color-border); border-radius: 0; font-size: var(--pw-font-size-sm); } .select-cell { width: 44px; } /* Status chips: pill + leading icon (checkout, publication, recycle bin) */ .pill { display: inline-flex; align-items: center; gap: var(--pw-space-1); border-radius: var(--pw-radius-full); font-weight: var(--pw-font-weight-semibold); white-space: nowrap; } .pill .icon { width: 13px; height: 13px; stroke-width: 2; } .pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--pw-radius-full); background: currentColor; } .pill-neutral { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .pill-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .pill-success { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .pill-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .pill-danger { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } /* Filter chips (search): the checkbox is visually hidden; the span is the chip */ .chip { position: relative; } .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; } .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: 0; padding: 0; border: 0; } .filter-group legend { float: left; margin-right: var(--pw-space-2); padding: 0; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .chip span { display: inline-flex; align-items: center; gap: var(--pw-space-1); padding: var(--pw-space-1) var(--pw-space-3); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-full); background: var(--pw-color-surface); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-secondary); cursor: pointer; } .chip span:hover { border-color: var(--pw-color-text-disabled); } .chip input:checked + span { background: var(--pw-color-primary-subtle); border-color: var(--pw-color-primary); color: var(--pw-color-primary-hover); } .chip input:checked + span::before { content: ""; width: 6px; height: 6px; border-radius: var(--pw-radius-full); background: currentColor; } .chip input:focus-visible + span { box-shadow: var(--pw-shadow-focus); } /* Search */ .search-panel { display: grid; gap: var(--pw-space-4); } .search-box { position: relative; display: flex; gap: var(--pw-space-2); } .search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pw-color-text-muted); pointer-events: none; } .search-box input { flex: 1; min-height: 44px; padding: 0 var(--pw-space-4) 0 calc(var(--pw-space-10) + var(--pw-space-1)); font: inherit; font-size: var(--pw-font-size-lg); color: var(--pw-color-text); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); } .search-box input:focus { outline: none; border-color: var(--pw-color-primary); box-shadow: var(--pw-shadow-focus); } .search-box .btn { min-height: 44px; padding: 0 var(--pw-space-6); } .search-filters { display: flex; flex-wrap: wrap; gap: var(--pw-space-3) var(--pw-space-8); } .results-summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pw-space-3); margin: 0 0 var(--pw-space-3); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .results-summary strong { color: var(--pw-color-text); } .result-list { list-style: none; margin: 0 0 var(--pw-space-6); padding: 0; display: grid; gap: var(--pw-space-3); } .result-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pw-space-2) var(--pw-space-4); align-items: start; padding: var(--pw-space-4) var(--pw-space-5); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); transition: border-color var(--pw-duration-fast) var(--pw-ease-standard); } .result-card:hover { border-color: var(--pw-color-primary-border); } .result-title { margin: 0; font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } .result-title a { color: var(--pw-color-text); text-decoration: none; } .result-title a:hover { color: var(--pw-color-link); text-decoration: underline; } .result-description { margin: var(--pw-space-1) 0 0; font-size: var(--pw-font-size-md); color: var(--pw-color-text-secondary); } .result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-4); margin-top: var(--pw-space-3); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .result-meta > span, .result-meta > a { display: inline-flex; align-items: center; gap: var(--pw-space-1); } .result-meta a { color: var(--pw-color-text-secondary); text-decoration: none; } .result-meta a:hover { color: var(--pw-color-link); text-decoration: underline; } .result-actions { display: flex; align-items: center; gap: var(--pw-space-2); } .badge.match { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); font-weight: var(--pw-font-weight-medium); } mark, .highlight { padding: 0; border-radius: 2px; background: var(--pw-color-warning-subtle); color: inherit; box-shadow: inset 0 -2px 0 var(--pw-color-warning-border); } .pagination { display: flex; align-items: center; justify-content: center; gap: var(--pw-space-3); margin: var(--pw-space-6) 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .card-flush > .pagination { margin: 0; padding: var(--pw-space-4); border-top: 1px solid var(--pw-color-border); } /* Recycle bin */ .bin-summary { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); } .item-icon.is-process { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); } .item-icon.is-folder { background: var(--pw-color-warning-subtle); color: var(--pw-color-favorite); } .path-cell { display: flex; align-items: flex-start; gap: var(--pw-space-2); min-width: 180px; color: var(--pw-color-text-muted); } .path-cell .icon { margin-top: 2px; } .action-group { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--pw-space-2); } .data-table td.row-actions.is-wrapping { white-space: normal; min-width: 220px; } .blocked-note { display: inline-flex; align-items: center; gap: var(--pw-space-1); max-width: 24ch; font-size: var(--pw-font-size-sm); color: var(--pw-color-warning); white-space: normal; text-align: left; } /* 16. Process workspace (Sprint 9C) ========================================== */ /* Header: identity + status chips + actions, shared by all seven tabs */ .process-header { margin-bottom: var(--pw-space-4); } .process-header .page-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-3); } .process-header .page-title .pill, .process-header .page-title .health { font-size: var(--pw-font-size-xs); letter-spacing: 0; } .process-id { font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); letter-spacing: 0; text-transform: none; font-weight: var(--pw-font-weight-medium); } .process-meta { align-items: center; } .process-meta .avatar { width: 22px; height: 22px; font-size: var(--pw-font-size-xs); } .process-meta a { color: var(--pw-color-text-secondary); text-decoration: none; } .process-meta a:hover { color: var(--pw-color-link); text-decoration: underline; } .process-description { margin: var(--pw-space-2) 0 0; max-width: 80ch; font-size: var(--pw-font-size-md); color: var(--pw-color-text-secondary); } /* Workspace tabs: tabs + counts + status dots */ .workspace-tabs { margin-bottom: var(--pw-space-6); overflow-x: auto; flex-wrap: nowrap; } .workspace-tabs a { white-space: nowrap; } .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 calc(var(--pw-space-1) + 2px); border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); font-variant-numeric: tabular-nums; } .tabs a[aria-current="page"] .tab-count { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); } .tab-status { width: 8px; height: 8px; padding: 0; border-radius: var(--pw-radius-full); } .tab-status.pill-info { background: var(--pw-color-primary); } .tab-status.pill-success { background: var(--pw-color-success); } .tab-status.pill-warning { background: var(--pw-color-warning-accent); } /* Process status cards (Overview) */ .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--pw-space-4); margin-bottom: var(--pw-space-6); } .process-status-card { display: flex; flex-direction: column; gap: var(--pw-space-2); padding: var(--pw-space-5); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); color: inherit; text-decoration: none; transition: border-color var(--pw-duration-fast) var(--pw-ease-standard), box-shadow var(--pw-duration-fast) var(--pw-ease-standard); } a.process-status-card:hover { border-color: var(--pw-color-primary-border); box-shadow: var(--pw-shadow-2); color: inherit; } .status-card-label { display: flex; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); } .status-card-label .icon { color: var(--pw-color-primary); } .status-card-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } .status-card-detail { font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .status-card-link { margin-top: auto; padding-top: var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-link); } .process-status-card.is-attention { border-top: 3px solid var(--pw-color-warning-accent); } .process-status-card.is-critical { border-top: 3px solid var(--pw-color-danger); } .process-status-card.is-good { border-top: 3px solid var(--pw-color-success); } /* Progress (documentation completeness, review approvals) */ /* Native — accessible, no inline styles */ progress.progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--pw-radius-full); overflow: hidden; background: var(--pw-color-neutral-subtle); color: var(--pw-color-primary); } progress.progress::-webkit-progress-bar { background: var(--pw-color-neutral-subtle); border-radius: var(--pw-radius-full); } progress.progress::-webkit-progress-value { background: var(--pw-color-primary); border-radius: var(--pw-radius-full); } progress.progress::-moz-progress-bar { background: var(--pw-color-primary); border-radius: var(--pw-radius-full); } progress.progress.is-good { color: var(--pw-color-success); } progress.progress.is-good::-webkit-progress-value { background: var(--pw-color-success); } progress.progress.is-good::-moz-progress-bar { background: var(--pw-color-success); } progress.progress.is-warning::-webkit-progress-value { background: var(--pw-color-warning-accent); } progress.progress.is-warning::-moz-progress-bar { background: var(--pw-color-warning-accent); } .progress-label { display: flex; justify-content: space-between; font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } /* Native (legacy analytics bars) follows the palette */ meter { accent-color: var(--pw-color-primary); } /* Vertical timeline (versions, reviews, revisions) */ .vtimeline { list-style: none; margin: 0; padding: 0; } .vtimeline > li { position: relative; padding: 0 0 var(--pw-space-5) var(--pw-space-8); } .vtimeline > li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--pw-color-border); } .vtimeline > li:last-child { padding-bottom: 0; } .vtimeline > li:last-child::before { display: none; } .timeline-marker { position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--pw-radius-full); background: var(--pw-color-surface); border: 2px solid var(--pw-color-border-strong); color: var(--pw-color-text-muted); } .timeline-marker .icon { width: 12px; height: 12px; stroke-width: 2.5; } .timeline-marker.is-primary { border-color: var(--pw-color-primary); background: var(--pw-color-primary); color: var(--pw-color-on-primary); } .timeline-marker.is-success { border-color: var(--pw-color-success); background: var(--pw-color-success); color: var(--pw-color-on-primary); } .timeline-marker.is-warning { border-color: var(--pw-color-warning-accent); background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .timeline-card { padding: var(--pw-space-4) var(--pw-space-5); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-md); } .timeline-card.is-current { border-color: var(--pw-color-primary-border); box-shadow: 0 0 0 1px var(--pw-color-primary-border); } .timeline-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pw-space-2) var(--pw-space-4); } .timeline-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: 0; font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-semibold); } .timeline-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-1) var(--pw-space-4); margin-top: var(--pw-space-2); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .timeline-card-meta > span { display: inline-flex; align-items: center; gap: var(--pw-space-1); } .timeline-card-meta .avatar { width: 20px; height: 20px; font-size: var(--pw-font-size-xs); } .timeline-card-body { margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-md); color: var(--pw-color-text-secondary); } .hash-chip { font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } /* Reviews */ .review-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-3); } .review-hero .pill { font-size: var(--pw-font-size-sm); padding: var(--pw-space-1) var(--pw-space-3); } .review-message { margin: var(--pw-space-4) 0; padding: var(--pw-space-3) var(--pw-space-4); border-left: 3px solid var(--pw-color-primary-border); border-radius: 0 var(--pw-radius-sm) var(--pw-radius-sm) 0; background: var(--pw-color-surface-sunken); color: var(--pw-color-text-secondary); } .reviewer-list .item-main { white-space: normal; } .reviewer-comment { display: block; margin-top: var(--pw-space-1); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); white-space: normal; } .decision-form { margin-top: var(--pw-space-5); padding-top: var(--pw-space-5); border-top: 1px solid var(--pw-color-border); } /* Discussion */ .request-review summary, .reply-box summary, .edit-box summary { display: inline-flex; list-style: none; cursor: pointer; } .request-review summary::-webkit-details-marker, .reply-box summary::-webkit-details-marker, .edit-box summary::-webkit-details-marker { display: none; } .comment-actions, .thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .comment-body { overflow-wrap: anywhere; } .thread-resolved .comment-body { color: var(--pw-color-text-muted); } .reply-box form, .edit-box form { min-width: min(420px, 80vw); } .new-comment { margin-top: var(--pw-space-3); padding-top: var(--pw-space-3); border-top: 1px solid var(--pw-color-border); } .thread { margin: 0 0 var(--pw-space-4); padding: var(--pw-space-4) var(--pw-space-5); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); } .thread-resolved { background: var(--pw-color-surface-subtle); box-shadow: none; } .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .comment-meta strong { color: var(--pw-color-text); font-size: var(--pw-font-size-md); } .comment-meta .avatar { width: 26px; height: 26px; font-size: var(--pw-font-size-xs); } .comment-body { margin: var(--pw-space-2) 0 0 calc(var(--pw-space-8) + 2px); } .comment-actions { margin-left: calc(var(--pw-space-8) + 2px); } .reply { margin: var(--pw-space-3) 0 0 calc(var(--pw-space-8) + 2px); padding-left: var(--pw-space-4); border-left: 2px solid var(--pw-color-border); } .thread-actions { margin-top: var(--pw-space-3); padding-top: var(--pw-space-3); border-top: 1px solid var(--pw-color-border); } .badge.element-anchor { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .reply-box form, .edit-box form { display: grid; gap: var(--pw-space-2); margin-top: var(--pw-space-2); } .reply-box textarea, .edit-box textarea, .new-comment textarea, .decision-form textarea { font: inherit; padding: var(--pw-space-2) var(--pw-space-3); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); width: 100%; } /* Dependencies */ .impact-callout { margin-bottom: var(--pw-space-6); } .dependency-list .item-main { white-space: normal; } .dependency-form { display: grid; grid-template-columns: 1fr; gap: var(--pw-space-3); } .dependency-form select, .dependency-form input { width: 100%; } /* Documentation panels */ .doc-summary { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--pw-space-6); align-items: center; } .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--pw-space-4); margin-bottom: var(--pw-space-6); } .doc-panel { margin: 0; } .doc-panel h3 { display: flex; align-items: center; gap: var(--pw-space-2); margin: 0 0 var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .doc-panel p { margin: 0; } .doc-panel.is-empty p { color: var(--pw-color-text-disabled); font-style: italic; } /* Quality */ .severity-group + .severity-group { margin-top: var(--pw-space-2); } /* 17. Enterprise screens (Sprint 9D) ======================================== */ /* Shared: avatars with decision rings, metric icon tiles, page sections */ .avatar-sm { width: 24px; height: 24px; font-size: var(--pw-font-size-xs); } .avatar-lg { width: 44px; height: 44px; font-size: var(--pw-font-size-lg); } .avatar.is-approved { box-shadow: 0 0 0 2px var(--pw-color-surface), 0 0 0 4px var(--pw-color-success); } .avatar.is-changes { box-shadow: 0 0 0 2px var(--pw-color-surface), 0 0 0 4px var(--pw-color-warning-accent); } .avatar.is-pending { box-shadow: 0 0 0 2px var(--pw-color-surface), 0 0 0 4px var(--pw-color-border-strong); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .avatar-stack { display: flex; align-items: center; gap: var(--pw-space-2); flex-wrap: wrap; padding: var(--pw-space-1); } .timeline-card-title .avatar, .review-card-meta .avatar { margin-right: var(--pw-space-1); } .page-section { margin-bottom: var(--pw-space-8); } .metric-grid-wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--pw-radius-md); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); flex: 0 0 auto; } .metric-label .metric-icon .icon { color: inherit; } .metric-icon.is-success { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .metric-icon.is-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .metric-icon.is-danger { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .metric-icon.is-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .metric-icon.is-folder { background: var(--pw-color-warning-subtle); color: var(--pw-color-favorite); } .metric-card.is-good .metric-value { color: var(--pw-color-success); } .metric-card .metric-value .health { font-size: var(--pw-font-size-xs); vertical-align: middle; letter-spacing: 0; } .metric-card progress.progress { margin: var(--pw-space-2) 0 var(--pw-space-1); } .item-icon.is-danger { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } progress.progress.is-danger::-webkit-progress-value { background: var(--pw-color-danger); } progress.progress.is-danger::-moz-progress-bar { background: var(--pw-color-danger); } /* Reviews inbox: review cards + requested-by-me board */ .review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-3); } .review-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--pw-space-5); padding: var(--pw-space-5); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-left: 3px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); } .review-card.is-waiting, .review-card.is-open { border-left-color: var(--pw-color-primary); } .review-card.is-approved { border-left-color: var(--pw-color-success); } .review-card.is-changes { border-left-color: var(--pw-color-warning-accent); } .review-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .review-card-title { margin: 0; font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-snug); } .review-card-title a, a.review-card-title { color: var(--pw-color-text); text-decoration: none; } .review-card-title a:hover, a.review-card-title:hover { color: var(--pw-color-link); text-decoration: underline; } .review-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-1) var(--pw-space-4); margin-top: var(--pw-space-2); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .review-card-meta > span, .review-card-meta > a { display: inline-flex; align-items: center; gap: var(--pw-space-1); } .review-card-meta > a { font-weight: var(--pw-font-weight-medium); text-decoration: none; } .review-card-meta > a:hover { text-decoration: underline; } .review-card-meta strong { color: var(--pw-color-text); font-weight: var(--pw-font-weight-medium); } .review-card-message { margin: var(--pw-space-3) 0 0; padding: var(--pw-space-2) var(--pw-space-3); border-left: 3px solid var(--pw-color-primary-border); border-radius: 0 var(--pw-radius-sm) var(--pw-radius-sm) 0; background: var(--pw-color-surface-sunken); font-size: var(--pw-font-size-md); color: var(--pw-color-text-secondary); } .review-card-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-3) var(--pw-space-5); margin-top: var(--pw-space-4); } .review-card-approvals { flex: 1; min-width: 160px; max-width: 280px; } .review-card-decision { display: flex; flex-direction: column; gap: var(--pw-space-2); padding-left: var(--pw-space-5); border-left: 1px solid var(--pw-color-border); } .review-card-decision .form-label { margin: 0; } .review-card-decision textarea { width: 100%; min-height: 64px; padding: var(--pw-space-2) var(--pw-space-3); font: inherit; font-size: var(--pw-font-size-md); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); resize: vertical; } .review-card-decision textarea:focus { outline: none; border-color: var(--pw-color-primary); box-shadow: var(--pw-shadow-focus); } .review-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pw-space-2); margin-top: auto; } .review-card.is-compact { display: block; padding: var(--pw-space-4); box-shadow: none; } .review-card.is-compact .review-card-title { font-size: var(--pw-font-size-md); } .review-card.is-compact .review-card-progress { margin-top: var(--pw-space-3); } .review-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-space-4); align-items: start; margin-bottom: var(--pw-space-4); } .review-lane { padding: var(--pw-space-3); background: var(--pw-color-surface-sunken); border-radius: var(--pw-radius-lg); } .review-lane-title { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-2); margin: 0 0 var(--pw-space-3); padding: 0 var(--pw-space-1); } .review-lane-empty { margin: 0; padding: var(--pw-space-4); text-align: center; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); border: 1px dashed var(--pw-color-border-strong); border-radius: var(--pw-radius-md); } .review-closed summary { display: flex; align-items: center; gap: var(--pw-space-2); cursor: pointer; list-style: none; font-weight: var(--pw-font-weight-semibold); } .review-closed summary::-webkit-details-marker { display: none; } .review-closed summary .icon { transition: transform var(--pw-duration-fast) var(--pw-ease-standard); } .review-closed[open] summary .icon { transform: rotate(90deg); } .review-closed[open] summary { margin-bottom: var(--pw-space-4); } /* Activity: filter pills + day-grouped timeline of event cards */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin: calc(-1 * var(--pw-space-2)) 0 var(--pw-space-6); } .filter-pill { display: inline-flex; align-items: center; gap: var(--pw-space-2); min-height: var(--pw-control-height-sm); padding: 0 var(--pw-space-3); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-full); background: var(--pw-color-surface); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-secondary); text-decoration: none; } .filter-pill:hover { border-color: var(--pw-color-text-disabled); color: var(--pw-color-text); } .filter-pill[aria-current="true"] { background: var(--pw-color-primary-subtle); border-color: var(--pw-color-primary); color: var(--pw-color-primary-hover); } .timeline-day { position: sticky; top: var(--pw-topbar-height); z-index: 1; margin: 0 0 var(--pw-space-3); padding: var(--pw-space-2) 0; background: var(--pw-color-canvas); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .activity-timeline { margin-bottom: var(--pw-space-6); } .activity-timeline > li { padding-bottom: var(--pw-space-3); } .activity-timeline .timeline-card { padding: var(--pw-space-3) var(--pw-space-4); box-shadow: var(--pw-shadow-1); } .activity-timeline .timeline-card-title { font-weight: var(--pw-font-weight-regular); } .activity-timeline .timeline-card-title strong { font-weight: var(--pw-font-weight-semibold); } .activity-timeline .timeline-card-meta { margin-top: var(--pw-space-1); } .activity-event.tone-danger .timeline-card { border-left: 3px solid var(--pw-color-danger); } .activity-event.tone-warning .timeline-card { border-left: 3px solid var(--pw-color-warning-accent); } .event-action { color: var(--pw-color-text-secondary); } .event-target { color: var(--pw-color-text); font-weight: var(--pw-font-weight-medium); } .timeline-marker.is-info { border-color: var(--pw-color-primary-border); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); } .timeline-marker.is-danger { border-color: var(--pw-color-danger); background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .kind-badge.kind-publication { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .kind-badge.kind-review { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .kind-badge.kind-governance { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } /* Analytics: insight widgets */ .analytics-grid { gap: var(--pw-space-4); margin-bottom: var(--pw-space-8); } .widget > .card-title { margin-bottom: var(--pw-space-4); } .mini-table { width: 100%; border-collapse: collapse; font-size: var(--pw-font-size-md); } .mini-table th, .mini-table td { padding: var(--pw-space-2) var(--pw-space-1); border-bottom: 1px solid var(--pw-color-border); text-align: left; } .mini-table thead th { font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pw-color-text-muted); } .mini-table tbody tr:last-child th, .mini-table tbody tr:last-child td { border-bottom: 0; } .mini-table .cell-numeric { text-align: right; } .bar-cell { width: 45%; } .bar-cell meter { display: block; width: 100%; height: 10px; } /* Users: filterable table with profile summaries and role chips */ .list-filter { position: relative; flex: 0 1 320px; } .list-filter .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--pw-color-text-muted); pointer-events: none; } .list-filter input { width: 100%; min-height: var(--pw-control-height-sm); padding: 0 var(--pw-space-3) 0 var(--pw-space-8); font: inherit; font-size: var(--pw-font-size-sm); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); } .list-filter input:focus { outline: none; border-color: var(--pw-color-primary); box-shadow: var(--pw-shadow-focus); } .list-filter-empty { padding: var(--pw-space-4) var(--pw-space-6); border-top: 1px solid var(--pw-color-border); } .user-summary { display: flex; flex-direction: column; min-width: 0; } .user-summary .cell-secondary { white-space: normal; } .role-chips { display: inline-flex; flex-wrap: wrap; gap: var(--pw-space-1); } .role-badge .icon { width: 13px; height: 13px; margin-right: 2px; } .role-admin { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary-hover); border-color: var(--pw-color-primary-border); } .role-modeler { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); border-color: var(--pw-color-border); } #users-table .inline-form { flex-wrap: nowrap; } .group-names { max-width: 28ch; white-space: normal; } .group-names a { color: var(--pw-color-text-secondary); font-weight: var(--pw-font-weight-regular); } .is-muted-row td { color: var(--pw-color-text-muted); } .is-muted-row .avatar { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-muted); } /* Checkouts: lock ownership, idle meter, stale rows */ .checkout-row.is-expired { background: var(--pw-color-danger-subtle); } .checkout-row.is-expired:hover { background: var(--pw-color-danger-subtle); } .checkout-row.is-stale td:first-child { box-shadow: inset 3px 0 0 var(--pw-color-warning-accent); } .checkout-row.is-expired td:first-child { box-shadow: inset 3px 0 0 var(--pw-color-danger); } .idle-meter { display: grid; gap: var(--pw-space-1); min-width: 120px; font-size: var(--pw-font-size-sm); } /* Sign-in and registration */ .auth-header { margin-bottom: var(--pw-space-6); } .auth-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--pw-space-4); border-radius: var(--pw-radius-lg); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); } .auth-title { margin: 0; font-size: var(--pw-font-size-2xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-tight); letter-spacing: var(--pw-letter-spacing-tight); } .auth-lede { margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-md); color: var(--pw-color-text-muted); } .form-section { margin: 0 0 var(--pw-space-2); padding: 0; border: 0; } .form-section legend { margin: 0 0 var(--pw-space-3); padding: 0 0 var(--pw-space-2); width: 100%; border-bottom: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .form-note { margin: 0 0 var(--pw-space-4); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .form-summary { margin-bottom: var(--pw-space-5); } .form-summary p, .field-error p { margin: 0; } .form-summary p + p { margin-top: var(--pw-space-1); } .field-error { align-items: flex-start; } .field-error .icon { margin-top: 1px; } .help-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pw-space-1); } .help-list li { display: flex; gap: var(--pw-space-2); } .help-list li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: calc(var(--pw-line-height-normal) * 0.5em - 2.5px); border-radius: var(--pw-radius-full); background: var(--pw-color-text-disabled); } .btn-block { width: 100%; } .auth-switch { margin: var(--pw-space-5) 0 0; text-align: center; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .auth-benefits { list-style: none; display: grid; gap: var(--pw-space-2); margin: var(--pw-space-6) 0 0; padding: var(--pw-space-4) 0 0; border-top: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .auth-benefits li { display: flex; align-items: center; gap: var(--pw-space-2); } .auth-benefits .icon { color: var(--pw-color-primary); } /* Error and state pages (403 / 404 / 500) */ .state-card, .app-content.page > .state-card { max-width: 560px; margin: var(--pw-space-12) auto; padding: var(--pw-space-10) var(--pw-space-8); text-align: center; box-shadow: var(--pw-shadow-2); } .state-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--pw-space-4); border-radius: var(--pw-radius-full); background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); } .state-card .state-icon .icon { color: inherit; } .state-icon.is-danger { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .state-code { margin: 0 0 var(--pw-space-2); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .state-card h1 { margin-top: 0; } .state-message { margin: var(--pw-space-3) auto 0; max-width: 46ch; font-size: var(--pw-font-size-md); color: var(--pw-color-text-secondary); } .state-path { margin: var(--pw-space-3) 0 0; } .state-path code { padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-sm); background: var(--pw-color-surface-sunken); font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); word-break: break-all; } .state-search { margin: var(--pw-space-6) 0 0; } .state-search input { min-height: var(--pw-control-height); font-size: var(--pw-font-size-md); } .state-search .btn { min-height: var(--pw-control-height); } .state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pw-space-2); margin-top: var(--pw-space-6); } .state-help { margin-top: var(--pw-space-8); padding-top: var(--pw-space-5); border-top: 1px solid var(--pw-color-border); text-align: left; } .state-help h2 { margin: 0 0 var(--pw-space-3); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text); } .state-help ul { list-style: none; display: grid; gap: var(--pw-space-2); margin: 0; padding: 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .state-help li { display: flex; align-items: flex-start; gap: var(--pw-space-2); } .state-help .icon { margin-top: 1px; color: var(--pw-color-primary); } /* 18. Modeller (Sprint 9E) ================================================== */ /* Identity bar + tool bar on the application tokens; the BPMN canvas is paper * (white in every theme) so diagrams keep their notation colours. */ .modeler-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--pw-color-canvas); } .modeler-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-3) var(--pw-space-4); min-height: 64px; padding: var(--pw-space-2) var(--pw-space-6); background: var(--pw-color-surface); border-bottom: 1px solid var(--pw-color-border); } .modeler-brand { display: inline-flex; flex: 0 0 auto; border-radius: var(--pw-radius-md); } .modeler-title { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; min-width: 0; } .modeler-breadcrumbs { display: flex; align-items: center; gap: var(--pw-space-2); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .modeler-breadcrumbs a { display: inline-flex; align-items: center; gap: var(--pw-space-1); color: var(--pw-color-text-muted); text-decoration: none; } .modeler-breadcrumbs a:hover { color: var(--pw-color-link); text-decoration: underline; } .modeler-breadcrumbs .icon { width: 14px; height: 14px; } .modeler-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); min-width: 0; } .modeler-heading h1 { margin: 0; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pw-font-size-xl); line-height: var(--pw-line-height-snug); } .modeler-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .modeler-actions .tool-group { display: flex; gap: var(--pw-space-2); } .checkout-status { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); white-space: nowrap; } .checkout-status.is-warning { color: var(--pw-color-warning); font-weight: var(--pw-font-weight-semibold); } .modeler-toolbar { display: flex; align-items: center; gap: var(--pw-space-2); overflow-x: auto; padding: var(--pw-space-1) var(--pw-space-6); background: var(--pw-color-surface-subtle); border-bottom: 1px solid var(--pw-color-border); } .modeler-toolbar .tool-group { display: flex; flex: 0 0 auto; gap: 2px; padding-right: var(--pw-space-2); border-right: 1px solid var(--pw-color-border); } .modeler-toolbar .tool-group:last-child { border-right: 0; } .modeler-toolbar .btn { color: var(--pw-color-text-secondary); } .modeler-toolbar .btn:hover { color: var(--pw-color-text); } .modeler-toolbar .btn[disabled] { opacity: 0.45; } .modeler-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-3); padding: var(--pw-space-3) var(--pw-space-6); border-bottom: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-md); } .banner-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .banner-success { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .banner-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .banner-error { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .modeler-banner .btn { min-height: var(--pw-control-height-sm); padding: 0 var(--pw-space-3); font-size: var(--pw-font-size-sm); } .modeler-body { position: relative; flex: 1 1 auto; min-height: 0; } .modeler-canvas { position: absolute; inset: 0; background: var(--pw-color-diagram-paper); } .modeler-overlay { position: absolute; inset: 0; z-index: var(--pw-z-raised); display: flex; align-items: center; justify-content: center; gap: var(--pw-space-3); background: var(--pw-color-overlay); color: var(--pw-color-text); font-weight: var(--pw-font-weight-semibold); } .spinner { width: 20px; height: 20px; border-radius: var(--pw-radius-full); border: 3px solid var(--pw-color-border-strong); border-top-color: var(--pw-color-primary); animation: pw-spin 0.8s linear infinite; } @keyframes pw-spin { to { transform: rotate(360deg); } } .modeler-page.is-view-only .djs-palette { display: none; } /* Validation panel (modeller) */ .validation-panel { position: absolute; top: var(--pw-space-3); right: var(--pw-space-3); bottom: var(--pw-space-3); z-index: var(--pw-z-raised); width: min(380px, 90vw); overflow-y: auto; padding: var(--pw-space-4); background: var(--pw-color-surface); color: var(--pw-color-text); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-3); } .validation-head { display: flex; align-items: center; justify-content: space-between; } .validation-head h2 { display: flex; align-items: center; gap: var(--pw-space-2); margin: 0; font-size: var(--pw-font-size-lg); } .validation-head h2 .icon { color: var(--pw-color-text-muted); } .validation-summary { margin: var(--pw-space-2) 0 var(--pw-space-3); font-weight: var(--pw-font-weight-semibold); } .validation-list { list-style: none; margin: 0 0 var(--pw-space-3); padding: 0; } .validation-item { display: flex; align-items: flex-start; gap: var(--pw-space-2); padding: var(--pw-space-2) 0; border-bottom: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-md); } .validation-severity { flex: 0 0 auto; padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-bold); text-transform: uppercase; } .severity-error .validation-severity { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .severity-warning .validation-severity { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } button.validation-message { padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--pw-color-link); text-decoration: underline; text-decoration-color: var(--pw-color-primary-border); cursor: pointer; } .validation-note { margin: 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .djs-element.pw-issue-error .djs-visual > :first-child { stroke: var(--pw-color-diagram-error) !important; stroke-width: 3px !important; } .djs-element.pw-issue-warning .djs-visual > :first-child { stroke: var(--pw-color-diagram-warning) !important; stroke-width: 3px !important; } /* 19. BPMN import (Sprint 10A) ============================================== */ /* Wizard steps: numbered markers joined by a rule; state by colour + icon + hidden text */ .wizard-steps { display: flex; flex-wrap: wrap; gap: var(--pw-space-2) 0; list-style: none; margin: 0 0 var(--pw-space-6); padding: 0; } .wizard-step { display: flex; flex: 1 1 0; align-items: center; gap: var(--pw-space-2); min-width: 120px; font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); } .wizard-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 var(--pw-space-3); border-radius: var(--pw-radius-full); background: var(--pw-color-border); } .wizard-step.is-done:not(:last-child)::after { background: var(--pw-color-success); } .wizard-step-marker { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--pw-radius-full); border: 2px solid var(--pw-color-border-strong); background: var(--pw-color-surface); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-bold); font-variant-numeric: tabular-nums; } .wizard-step.is-done .wizard-step-marker { border-color: var(--pw-color-success); background: var(--pw-color-success); color: var(--pw-color-on-primary); } .wizard-step.is-current { color: var(--pw-color-text); font-weight: var(--pw-font-weight-semibold); } .wizard-step.is-current .wizard-step-marker { border-color: var(--pw-color-primary); background: var(--pw-color-primary); color: var(--pw-color-on-primary); } .wizard-step.is-failed { color: var(--pw-color-danger); font-weight: var(--pw-font-weight-semibold); } .wizard-step.is-failed .wizard-step-marker { border-color: var(--pw-color-danger); background: var(--pw-color-danger); color: var(--pw-color-on-primary); } .wizard-step-marker .icon { width: 14px; height: 14px; stroke-width: 2.5; } .wizard-step-label { white-space: nowrap; } /* File selection: a dashed drop area labelling the native input */ .file-drop { display: flex; align-items: center; gap: var(--pw-space-4); padding: var(--pw-space-5); border: 2px dashed var(--pw-color-border-strong); border-radius: var(--pw-radius-lg); background: var(--pw-color-surface-subtle); color: var(--pw-color-text-secondary); cursor: pointer; transition: border-color var(--pw-duration-fast) var(--pw-ease-standard), background-color var(--pw-duration-fast) var(--pw-ease-standard); } .file-drop:hover { border-color: var(--pw-color-primary); background: var(--pw-color-primary-subtle); } .file-drop .icon { color: var(--pw-color-primary); } .file-drop-text { display: flex; flex-direction: column; gap: 2px; font-weight: var(--pw-font-weight-regular); } .file-drop-text strong { color: var(--pw-color-text); } .file-drop-text span { font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .field .file-input { width: 100%; margin-top: var(--pw-space-2); padding: var(--pw-space-2); font-size: var(--pw-font-size-sm); } /* Validation Result Card: every check with its outcome */ .validation-card.is-valid { border-left: 3px solid var(--pw-color-success); } .validation-card.is-invalid { border-left: 3px solid var(--pw-color-danger); } .check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--pw-space-2) var(--pw-space-6); list-style: none; margin: 0; padding: 0; } .check-item { display: flex; align-items: flex-start; gap: var(--pw-space-3); padding: var(--pw-space-2) 0; } .check-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-muted); } .check-icon .icon { width: 13px; height: 13px; stroke-width: 2.5; } .check-item.is-pass .check-icon { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .check-item.is-fail .check-icon { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .check-label { display: block; font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text); } .check-item.is-skipped .check-label { color: var(--pw-color-text-muted); font-weight: var(--pw-font-weight-medium); } .check-message { display: block; margin-top: 2px; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); overflow-wrap: anywhere; } .check-item.is-fail .check-message { color: var(--pw-color-danger); } /* BPMN Metadata Panel: count tiles + facts */ .bpmn-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--pw-space-3); margin: 0 0 var(--pw-space-5); } .bpmn-count { padding: var(--pw-space-3) var(--pw-space-4); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-md); background: var(--pw-color-surface-subtle); } .bpmn-count dt { font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .bpmn-count dd { margin: var(--pw-space-1) 0 0; font-size: var(--pw-font-size-2xl); font-weight: var(--pw-font-weight-semibold); line-height: var(--pw-line-height-tight); font-variant-numeric: tabular-nums; } .bpmn-facts dd .hash-chip { overflow-wrap: anywhere; } /* Import Warning Card */ .import-warnings.is-clear { border-left: 3px solid var(--pw-color-success); } .import-warning-list { display: grid; gap: var(--pw-space-2); list-style: none; margin: 0 0 var(--pw-space-3); padding: 0; } .import-warning { display: flex; align-items: flex-start; gap: var(--pw-space-3); padding: var(--pw-space-3) var(--pw-space-4); border-radius: var(--pw-radius-md); font-size: var(--pw-font-size-md); } .import-warning p { margin: 0; } .import-warning.is-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .import-warning.is-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .import-warning-icon { display: inline-flex; margin-top: 2px; } /* Import Summary Card */ .import-summary { border-left: 3px solid var(--pw-color-success); } .import-summary-status { display: flex; align-items: center; gap: var(--pw-space-4); margin-bottom: var(--pw-space-5); } .import-summary-status .state-icon { width: 48px; height: 48px; margin: 0; } .import-summary-status .card-description { margin: var(--pw-space-1) 0 0; } .state-icon.is-success { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .import-summary-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } /* Confirm card */ .import-target { margin: var(--pw-space-2) 0 0; font-size: var(--pw-font-size-sm); } .duplicate-options ul { margin: var(--pw-space-2) 0 0; padding-left: var(--pw-space-5); } .duplicate-options li + li { margin-top: var(--pw-space-1); } /* 20. BPMN viewer (Sprint 10B) ============================================== */ /* Facts strip, tool bar, canvas + metadata column, unavailable states, XML source */ .diagram-info { padding: var(--pw-space-4) var(--pw-space-5); margin-bottom: var(--pw-space-4); } .diagram-facts { display: flex; flex-wrap: wrap; gap: var(--pw-space-3) var(--pw-space-8); margin: 0; } .diagram-facts dt { font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .diagram-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: var(--pw-space-1) 0 0; font-size: var(--pw-font-size-md); } .diagram-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-4); margin-bottom: var(--pw-space-4); padding: var(--pw-space-2) var(--pw-space-3); background: var(--pw-color-surface); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); } .diagram-toolbar .tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .diagram-toolbar .diagram-downloads { gap: var(--pw-space-2); margin-left: auto; } .diagram-version-form label { font-size: var(--pw-font-size-sm); } .diagram-version-form select { min-height: var(--pw-control-height-sm); } .diagram-zoom { min-width: 56px; text-align: center; font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text-secondary); font-variant-numeric: tabular-nums; } .diagram-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--pw-space-5); align-items: start; margin-bottom: var(--pw-space-6); } .diagram-layout.is-full-width { grid-template-columns: minmax(0, 1fr); } .diagram-main { min-width: 0; } .diagram-layout.is-full-width .diagram-aside { display: none; } .diagram-aside { position: sticky; top: calc(var(--pw-topbar-height) + var(--pw-space-4)); } .diagram-aside > .card { margin-bottom: 0; } .diagram-aside .card-header { flex-wrap: wrap; } .diagram-canvas { position: relative; height: clamp(420px, 68vh, 900px); overflow: hidden; background: var(--pw-color-diagram-paper); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow-1); } .diagram-canvas:focus-visible { box-shadow: var(--pw-shadow-focus); } .diagram-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--pw-space-3); margin: 0; background: var(--pw-color-diagram-paper); color: var(--pw-color-text-muted); font-weight: var(--pw-font-weight-medium); } .diagram-unavailable { display: flex; align-items: flex-start; gap: var(--pw-space-6); padding: var(--pw-space-8); border-left: 3px solid var(--pw-color-warning-accent); } .diagram-unavailable.is-danger { border-left-color: var(--pw-color-danger); } .diagram-unavailable.is-neutral { border-left-color: var(--pw-color-border-strong); } .diagram-unavailable .state-icon { flex: 0 0 auto; width: 64px; height: 64px; margin: 0; } .diagram-unavailable.is-warning .state-icon { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .diagram-unavailable.is-neutral .state-icon { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-muted); } .diagram-unavailable-body { min-width: 0; } .diagram-unavailable .state-message { margin: var(--pw-space-2) 0 0; max-width: 72ch; } .diagram-unavailable .state-actions { justify-content: flex-start; } .diagram-problem { margin: var(--pw-space-3) 0 0; } .diagram-problem code { display: inline-block; padding: var(--pw-space-1) var(--pw-space-2); border-radius: var(--pw-radius-sm); background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); overflow-wrap: anywhere; } .diagram-guidance { display: grid; gap: var(--pw-space-2); list-style: none; margin: var(--pw-space-4) 0 0; padding: 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .diagram-guidance li { display: flex; align-items: flex-start; gap: var(--pw-space-2); } .diagram-guidance .icon { margin-top: 1px; color: var(--pw-color-success); } .xml-source { max-height: 70vh; margin: 0; overflow: auto; padding: var(--pw-space-4) var(--pw-space-6); border-top: 1px solid var(--pw-color-border); background: var(--pw-color-surface-sunken); font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); line-height: var(--pw-line-height-normal); color: var(--pw-color-text); white-space: pre; tab-size: 2; border-radius: 0 0 var(--pw-radius-lg) var(--pw-radius-lg); } .xml-source code { font-size: inherit; } .xml-source:focus-visible { box-shadow: inset var(--pw-shadow-focus); } /* 21. Version comparison (Sprint 10C) ======================================= */ /* Change chips: icon + word (+ signed number), never colour alone */ .change-chip { display: inline-flex; align-items: center; gap: var(--pw-space-1); padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-full); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); white-space: nowrap; background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .change-chip .icon { width: 13px; height: 13px; stroke-width: 2.25; } .change-chip.is-added { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .change-chip.is-removed, .change-chip.is-unreadable { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .change-chip.is-changed { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .change-chip.is-first { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .change-chip.is-unchanged { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .change-delta { font-variant-numeric: tabular-nums; font-weight: var(--pw-font-weight-bold); } /* Selector and actions */ .compare-heading { margin-top: var(--pw-space-2); } .compare-heading .section-title { display: flex; align-items: center; gap: var(--pw-space-2); } .compare-selector { padding: var(--pw-space-4) var(--pw-space-5); margin-bottom: var(--pw-space-4); } .compare-selector-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pw-space-3); } .compare-selector-fields .field { margin: 0; min-width: 160px; } .compare-swap { margin-bottom: 2px; } .compare-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-4); margin: var(--pw-space-3) 0 0; font-size: var(--pw-font-size-sm); } .compare-actions { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin-bottom: var(--pw-space-6); } /* Version summary panel */ .compare-summary { margin-bottom: var(--pw-space-6); } .compare-summary > .section-title { margin-bottom: var(--pw-space-3); } .compare-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-4); margin-bottom: var(--pw-space-4); } .compare-version { margin: 0; border-top: 3px solid var(--pw-color-border-strong); } .compare-version.is-b { border-top-color: var(--pw-color-primary); } .compare-version-letter { margin: 0; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .compare-version-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: var(--pw-space-2) 0 var(--pw-space-4); } .compare-version .kv dd { overflow-wrap: anywhere; } .compare-totals { margin-bottom: 0; } .compare-analysis { margin-bottom: var(--pw-space-6); } /* Metadata table + complexity */ .compare-row.is-added th, .compare-row.is-removed th, .compare-row.is-changed th { box-shadow: inset 3px 0 0 var(--pw-color-warning-accent); } .compare-row.is-added th { box-shadow: inset 3px 0 0 var(--pw-color-success); } .compare-row.is-removed th { box-shadow: inset 3px 0 0 var(--pw-color-danger); } .compare-table tbody th, .evolution-table tbody th { position: static; background: none; text-transform: none; letter-spacing: 0; white-space: normal; font-size: var(--pw-font-size-md); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text); border-bottom: 1px solid var(--pw-color-border); } .complexity-card .card-header { flex-wrap: wrap; } .compare-table thead th.cell-numeric, .evolution-table thead th.cell-numeric, .complexity-formula thead th.cell-numeric { text-align: right; } .complexity-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-space-3); margin: 0 0 var(--pw-space-4); } .complexity-scores dt { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .complexity-scores dd { margin: var(--pw-space-1) 0 0; font-size: var(--pw-font-size-2xl); font-weight: var(--pw-font-weight-semibold); font-variant-numeric: tabular-nums; } .complexity-formula { margin-bottom: var(--pw-space-3); } .complexity-formula caption { padding-bottom: var(--pw-space-2); text-align: left; font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .complexity-formula th[scope="row"] { font-weight: var(--pw-font-weight-medium); } /* Element changes */ .element-group { border-top: 1px solid var(--pw-color-border); } .element-group > summary { display: flex; align-items: center; gap: var(--pw-space-3); padding: var(--pw-space-3) 0; cursor: pointer; } .element-group-count { font-size: var(--pw-font-size-sm); color: var(--pw-color-text-muted); } .element-group .table-wrap { margin-bottom: var(--pw-space-3); } /* Side-by-side diagrams: two independent viewers; full width spans both columns */ .compare-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-4); align-items: start; } .compare-pane { margin: 0; overflow: hidden; } .compare-pane.is-full-width { grid-column: 1 / -1; } .compare-pane-header { flex-wrap: wrap; padding-bottom: var(--pw-space-3); } .compare-pane .tool-group { display: flex; align-items: center; gap: 2px; } .compare-canvas { height: clamp(360px, 58vh, 760px); border: 0; border-top: 1px solid var(--pw-color-border); border-radius: 0; box-shadow: none; } .compare-pane .diagram-unavailable { margin: 0; border-radius: 0; box-shadow: none; } .compare-pane-note { display: flex; align-items: flex-start; gap: var(--pw-space-2); margin: 0; padding: var(--pw-space-6); border-top: 1px solid var(--pw-color-border); color: var(--pw-color-text-secondary); } .compare-pane-note.is-danger { color: var(--pw-color-danger); } /* XML difference viewer */ .xml-diff-counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: 0 0 var(--pw-space-3); } .card-header .xml-diff-counts { margin: 0; } .xml-legend { margin-left: var(--pw-space-2); font-family: var(--pw-font-mono); } .xml-diff { max-height: 72vh; overflow: auto; border-top: 1px solid var(--pw-color-border); } .xml-diff:focus-visible { box-shadow: inset var(--pw-shadow-focus); } .xml-diff-table { width: 100%; border-collapse: collapse; font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); line-height: var(--pw-line-height-normal); } .xml-diff-table thead th { position: sticky; top: 0; z-index: 1; padding: var(--pw-space-1) var(--pw-space-2); background: var(--pw-color-surface-subtle); border-bottom: 1px solid var(--pw-color-border); font-family: var(--pw-font-sans); text-align: left; color: var(--pw-color-text-muted); } .xml-row td { padding: 0 var(--pw-space-2); vertical-align: top; } .xml-ln { width: 1%; min-width: 44px; text-align: right; color: var(--pw-color-text-muted); user-select: none; font-variant-numeric: tabular-nums; } .xml-sign { width: 1%; min-width: 16px; font-weight: var(--pw-font-weight-bold); text-align: center; } .xml-code code { font-size: inherit; white-space: pre; } .xml-row.is-insert { background: var(--pw-color-success-subtle); } .xml-row.is-insert .xml-sign { color: var(--pw-color-success); } .xml-row.is-delete { background: var(--pw-color-danger-subtle); } .xml-row.is-delete .xml-sign { color: var(--pw-color-danger); } .xml-diff-collapsed td { padding: 0; } .xml-diff-collapsed summary { display: flex; align-items: center; gap: var(--pw-space-2); padding: var(--pw-space-1) var(--pw-space-3); background: var(--pw-color-surface-sunken); color: var(--pw-color-link); font-family: var(--pw-font-sans); font-size: var(--pw-font-size-sm); cursor: pointer; list-style: none; } .xml-diff-collapsed summary::-webkit-details-marker { display: none; } .xml-diff-collapsed details[open] summary .icon { transform: rotate(90deg); } .xml-diff-limited, .xml-diff-truncated { margin: var(--pw-space-4) var(--pw-space-6); } .xml-tag { color: var(--pw-color-primary-hover); font-weight: var(--pw-font-weight-semibold); } .xml-attr { color: var(--pw-color-warning); } .xml-value { color: var(--pw-color-success); } .xml-comment, .xml-decl { color: var(--pw-color-text-muted); font-style: italic; } .xml-punct { color: var(--pw-color-text-muted); } /* Evolution */ .evolution-intro { margin: calc(-1 * var(--pw-space-2)) 0 var(--pw-space-5); } .evolution-bar { min-width: 180px; } .evolution-meter { display: flex; align-items: center; gap: var(--pw-space-3); } .evolution-meter meter { flex: 1; height: 10px; } /* 22. Checkout & editing lock (Sprint 11A) ================================= */ /* Lock status panel: state = icon + words (never colour alone), facts, actions */ .lock-panel { margin-bottom: var(--pw-space-5); border-left: 4px solid var(--pw-color-border-strong); } .lock-panel.is-info { border-left-color: var(--pw-color-info); } .lock-panel.is-warning { border-left-color: var(--pw-color-warning-accent); } .lock-panel.is-danger { border-left-color: var(--pw-color-danger); } .lock-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pw-space-4); } .lock-panel-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pw-radius-md); background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .lock-panel-icon.is-info { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .lock-panel-icon.is-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .lock-panel-icon.is-danger { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .lock-panel-text { flex: 1 1 280px; min-width: 0; } .lock-panel-eyebrow { margin: 0; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .lock-panel-title { margin: var(--pw-space-1) 0; font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); } .lock-panel-description { margin: 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .lock-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .lock-panel-actions form { margin: 0; } .lock-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pw-space-3) var(--pw-space-5); margin: var(--pw-space-4) 0 0; padding-top: var(--pw-space-4); border-top: 1px solid var(--pw-color-border); } .lock-facts dt { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .lock-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-1); margin: var(--pw-space-1) 0 0; font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-medium); } .lock-facts .avatar { width: 20px; height: 20px; font-size: var(--pw-font-size-xs); } .lock-note { display: flex; align-items: flex-start; gap: var(--pw-space-2); margin: var(--pw-space-3) 0 0; padding: var(--pw-space-3); border-radius: var(--pw-radius-md); background: var(--pw-color-warning-subtle); font-size: var(--pw-font-size-sm); color: var(--pw-color-text); } .split-aside .lock-panel-head { flex-direction: column; } .split-aside .lock-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .text-danger { color: var(--pw-color-danger); } /* Sprint 11B readiness hooks: shown, deliberately disabled */ .readiness { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-4); margin-top: var(--pw-space-4); padding-top: var(--pw-space-3); border-top: 1px dashed var(--pw-color-border); } .readiness-title { margin: 0; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .readiness-list { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin: 0; padding: 0; list-style: none; } .readiness-item { display: inline-flex; align-items: center; gap: var(--pw-space-1); padding: 2px var(--pw-space-2); border-radius: var(--pw-radius-full); background: var(--pw-color-neutral-subtle); font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .readiness-item.is-on { background: var(--pw-color-success-subtle); color: var(--pw-color-success); font-weight: var(--pw-font-weight-semibold); } .readiness .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .readiness-note { flex-basis: 100%; margin: 0; } /* Checkout pages, dialogs and the working copy */ .checkout-page { display: grid; gap: var(--pw-space-5); max-width: 1040px; } .checkout-card { margin: 0; } .checkout-card.is-danger { border-top: 3px solid var(--pw-color-danger); } .checkout-card .card-title, .dialog-title-icon { display: flex; align-items: center; gap: var(--pw-space-2); } .checkout-effects { display: grid; gap: var(--pw-space-3); margin: var(--pw-space-4) 0 0; padding: 0; list-style: none; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .checkout-effects li { display: flex; align-items: flex-start; gap: var(--pw-space-2); } .checkout-effects .icon { flex: none; margin-top: 2px; color: var(--pw-color-primary); } .checkout-kv { margin: var(--pw-space-4) 0; } .working-copy { margin: 0; } .working-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-4) var(--pw-space-8); } .working-copy-actions { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin-top: var(--pw-space-5); padding-top: var(--pw-space-4); border-top: 1px solid var(--pw-color-border); } .item-icon.is-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .notice-list { margin-top: var(--pw-space-3); padding-top: var(--pw-space-3); border-top: 1px solid var(--pw-color-border); } /* Recovered drafts (Sprint 11D): drafts kept from checkouts that ended involuntarily */ .recovered-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-4); } .recovered-list > li { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pw-space-3); padding-top: var(--pw-space-4); border-top: 1px solid var(--pw-color-border); } .recovered-list > li:first-child { padding-top: 0; border-top: 0; } /* 23. BPMN editor (Sprint 11B) ============================================== */ /* One editor on two surfaces: .editor-surface.is-tab (Diagram tab, Edit mode) * and .is-page (full-screen modeller). The canvas stays paper in every theme; * palette, context pad and popup menus follow the theme through diagram-js's * own custom properties, mapped to semantic tokens here. */ .modeler-page .editor-surface { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .editor-surface.is-tab { display: flex; flex-direction: column; height: clamp(560px, 78vh, 1040px); border: 1px solid var(--pw-color-border); border-radius: var(--pw-radius-lg); overflow: hidden; background: var(--pw-color-surface); box-shadow: var(--pw-shadow-1); } .editor-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pw-space-2) var(--pw-space-4); padding: var(--pw-space-2) var(--pw-space-6); background: var(--pw-color-surface); border-bottom: 1px solid var(--pw-color-border); } .editor-surface.is-tab .editor-bar, .editor-surface.is-tab .modeler-toolbar, .editor-surface.is-tab .modeler-banner { padding-left: var(--pw-space-4); padding-right: var(--pw-space-4); } .editor-status, .editor-actions, .editor-actions .tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .editor-zoom { align-self: center; min-width: 48px; font-size: var(--pw-font-size-xs); font-variant-numeric: tabular-nums; color: var(--pw-color-text-muted); text-align: center; } .save-status { display: inline-flex; align-items: center; gap: var(--pw-space-1); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-medium); color: var(--pw-color-text-muted); white-space: nowrap; } .save-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--pw-radius-full); background: var(--pw-color-success); } .save-status[data-state="unsaved"]::before { background: var(--pw-color-warning-accent); } .save-status[data-state="saving"]::before { background: var(--pw-color-info); } .save-status[data-state="failed"] { color: var(--pw-color-danger); font-weight: var(--pw-font-weight-semibold); } .save-status[data-state="failed"]::before { background: var(--pw-color-danger); } .edit-mode-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-4); margin: 0 0 var(--pw-space-3); padding: var(--pw-space-2) var(--pw-space-4); border-radius: var(--pw-radius-md); background: var(--pw-color-info-subtle); color: var(--pw-color-text); font-size: var(--pw-font-size-sm); } .edit-mode-note .icon { color: var(--pw-color-info); } .edit-mode-note span { flex: 1 1 320px; } /* Side panels: validation, changes since checkout, properties (one open at a time) */ .side-panel h2 { font-size: var(--pw-font-size-md); } .validation-commit { margin: var(--pw-space-2) 0 0; padding: var(--pw-space-2) var(--pw-space-3); border-radius: var(--pw-radius-md); background: var(--pw-color-neutral-subtle); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); } .validation-commit:empty { display: none; } .validation-commit[data-state="allowed"] { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .validation-commit[data-state="blocked"] { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .changes-panel .validation-summary { font-weight: var(--pw-font-weight-medium); } .changes-content { overflow-wrap: anywhere; } .changes-group { margin-bottom: var(--pw-space-4); } .changes-group-title { margin: 0 0 var(--pw-space-2); font-size: var(--pw-font-size-sm); font-weight: var(--pw-font-weight-semibold); } .changes-group.is-added .changes-group-title { color: var(--pw-color-success); } .changes-group.is-removed .changes-group-title { color: var(--pw-color-danger); } .changes-group.is-changed .changes-group-title { color: var(--pw-color-warning); } .changes-list { margin: 0; padding: 0; list-style: none; } .changes-item { display: flex; flex-direction: column; gap: 2px; padding: var(--pw-space-1) 0; border-bottom: 1px solid var(--pw-color-border); font-size: var(--pw-font-size-sm); } .changes-detail { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .changes-metrics { font-size: var(--pw-font-size-sm); } .properties-kv { margin: var(--pw-space-3) 0; font-size: var(--pw-font-size-sm); } .properties-form .field { margin-bottom: var(--pw-space-3); } .commit-summary { margin: 0 0 var(--pw-space-4); padding: var(--pw-space-3); border-radius: var(--pw-radius-md); background: var(--pw-color-surface-sunken); font-size: var(--pw-font-size-sm); } .commit-line { margin: 0 0 var(--pw-space-1); } .commit-line:last-child { margin-bottom: 0; } .commit-line.is-allowed { color: var(--pw-color-success); font-weight: var(--pw-font-weight-semibold); } .commit-line.is-blocked { color: var(--pw-color-danger); font-weight: var(--pw-font-weight-semibold); } .recovery-kv { margin: 0 0 var(--pw-space-2); } .keyboard-table kbd { padding: 0 var(--pw-space-1); border: 1px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-sm); background: var(--pw-color-surface-subtle); font-family: var(--pw-font-mono); font-size: var(--pw-font-size-xs); } /* bpmn-js chrome on tokens (theme-aware); visible focus for keyboard users */ .editor-surface .djs-container { --palette-background-color: var(--pw-color-surface); --palette-border-color: var(--pw-color-border); --palette-entry-color: var(--pw-color-text); --palette-entry-hover-color: var(--pw-color-primary); --palette-entry-selected-color: var(--pw-color-primary); --palette-separator-color: var(--pw-color-border); --palette-toggle-hover-background-color: var(--pw-color-primary-subtle); --context-pad-entry-background-color: var(--pw-color-surface); --context-pad-entry-hover-background-color: var(--pw-color-primary-subtle); --popup-background-color: var(--pw-color-surface); --popup-border-color: var(--pw-color-border); --popup-entry-title-color: var(--pw-color-text-muted); --popup-entry-selected-background-color: var(--pw-color-primary-subtle); --popup-entry-selected-color: var(--pw-color-text); } .editor-surface .djs-palette { box-shadow: var(--pw-shadow-2); } .editor-surface .djs-context-pad .entry { color: var(--pw-color-text); box-shadow: var(--pw-shadow-1); } .editor-surface .djs-popup { color: var(--pw-color-text); } .editor-surface .djs-palette .entry:focus-visible, .editor-surface .djs-context-pad .entry:focus-visible, .editor-surface .djs-popup .entry:focus-visible, .editor-surface .modeler-canvas:focus-visible { outline: 3px solid var(--pw-color-focus-ring); outline-offset: 2px; } .editor-surface .modeler-canvas:focus-visible { outline-offset: -3px; } .editor-surface .djs-element.selected .djs-outline { stroke: var(--pw-color-primary); stroke-width: 2px; } @media (forced-colors: active) { .editor-surface .djs-palette .entry:focus-visible, .editor-surface .djs-context-pad .entry:focus-visible, .editor-surface .modeler-canvas:focus-visible { outline-color: Highlight; } .editor-surface .djs-context-pad .entry, .editor-surface .djs-palette { border: 1px solid CanvasText; } .save-status::before { forced-color-adjust: none; border: 1px solid CanvasText; } } /* 24. Governance lifecycle (Sprint 11C) ===================================== */ /* Lifecycle badge: icon + words (never colour alone), one tone per state */ .lifecycle-badge { display: inline-flex; align-items: center; gap: var(--pw-space-1); padding: 2px var(--pw-space-2); border: 1px solid transparent; border-radius: var(--pw-radius-full); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); white-space: nowrap; vertical-align: middle; background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .lifecycle-badge .icon { width: 13px; height: 13px; } .lifecycle-badge.is-in_review { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .lifecycle-badge.is-approved { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .lifecycle-badge.is-rejected { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .lifecycle-badge.is-published { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); border-color: var(--pw-color-primary-border); } .lifecycle-badge.is-archived { background: var(--pw-color-surface-sunken); color: var(--pw-color-text-muted); border-color: var(--pw-color-border); } @media (forced-colors: active) { .lifecycle-badge { border-color: CanvasText; } } /* Notification bell (top bar) and list */ .notification-bell { position: relative; } .notification-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 var(--pw-space-1); border-radius: var(--pw-radius-full); background: var(--pw-color-danger); color: var(--pw-color-on-primary); font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-bold); line-height: 18px; text-align: center; } .notification-bell.has-unread .icon { color: var(--pw-color-text); } .notification-list { margin: 0; padding: 0; list-style: none; } .notification-item { display: flex; align-items: flex-start; gap: var(--pw-space-3); padding: var(--pw-space-4) var(--pw-space-5); border-bottom: 1px solid var(--pw-color-border); } .notification-item.is-unread { background: var(--pw-color-info-subtle); box-shadow: inset 3px 0 0 var(--pw-color-info); } .notification-main { flex: 1 1 auto; min-width: 0; } .notification-kind { margin: 0; font-size: var(--pw-font-size-xs); font-weight: var(--pw-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--pw-letter-spacing-caps); color: var(--pw-color-text-muted); } .notification-message { margin: var(--pw-space-1) 0; } /* Versions page governance record */ .governance-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pw-space-2) var(--pw-space-4); margin: var(--pw-space-3) 0 0; padding: var(--pw-space-3); border-radius: var(--pw-radius-md); background: var(--pw-color-surface-subtle); font-size: var(--pw-font-size-sm); } .governance-facts dt { font-size: var(--pw-font-size-xs); color: var(--pw-color-text-muted); } .governance-facts dd { margin: 0; } .governance-actions { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); margin-top: var(--pw-space-3); } .governance-actions form { margin: 0; } /* Review workspace */ .review-hero-card { margin-bottom: var(--pw-space-5); } .review-hero-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pw-space-3); } .review-hero-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: var(--pw-space-1) 0; font-size: var(--pw-font-size-xl); } .review-hero-meta { margin: 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .review-hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); } .snapshot-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2); margin: var(--pw-space-3) 0 0; font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } .text-success { color: var(--pw-color-success); } .review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--pw-space-5); align-items: start; margin-bottom: var(--pw-space-5); } .review-main, .review-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-5); min-width: 0; } .review-main > *, .review-aside > * { min-width: 0; } .review-aside .form-actions { flex-wrap: wrap; } .review-diagram { margin: 0; overflow: hidden; } .review-canvas { height: clamp(360px, 55vh, 680px); border: 0; border-top: 1px solid var(--pw-color-border); border-radius: 0; box-shadow: none; } .review-diagram-links { display: flex; flex-wrap: wrap; gap: var(--pw-space-2); padding: var(--pw-space-3) var(--pw-space-5); border-top: 1px solid var(--pw-color-border); } .review-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pw-space-4); } .review-facts-grid .card { margin: 0; } .review-issues { display: grid; gap: var(--pw-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--pw-font-size-sm); } .validation-severity.severity-error { background: var(--pw-color-danger-subtle); color: var(--pw-color-danger); } .validation-severity.severity-warning { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .review-decision, .review-aside .card { margin: 0; } .assign-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pw-space-2); margin-top: var(--pw-space-4); } .assign-form .field { flex: 1 1 180px; margin: 0; } .review-history { display: grid; gap: var(--pw-space-3); margin: 0; padding: 0; list-style: none; } .review-history-item { padding: var(--pw-space-3) var(--pw-space-4); border: 1px solid var(--pw-color-border); border-left: 3px solid var(--pw-color-border-strong); border-radius: var(--pw-radius-md); } .review-history-item.is-approved { border-left-color: var(--pw-color-success); } .review-history-item.is-changes_requested { border-left-color: var(--pw-color-warning-accent); } .review-history-item.is-open { border-left-color: var(--pw-color-info); } .review-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-space-2) var(--pw-space-3); } .review-history-title { font-weight: var(--pw-font-weight-semibold); } .review-history-decisions { margin: var(--pw-space-2) 0 0; padding-left: var(--pw-space-5); font-size: var(--pw-font-size-sm); color: var(--pw-color-text-secondary); } /* Governance dashboard and dashboard widget */ .lifecycle-metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .lifecycle-metric .metric-icon { background: var(--pw-color-neutral-subtle); color: var(--pw-color-text-secondary); } .lifecycle-metric.is-in_review .metric-icon { background: var(--pw-color-info-subtle); color: var(--pw-color-info); } .lifecycle-metric.is-approved .metric-icon { background: var(--pw-color-success-subtle); color: var(--pw-color-success); } .lifecycle-metric.is-rejected .metric-icon { background: var(--pw-color-warning-subtle); color: var(--pw-color-warning); } .lifecycle-metric.is-published .metric-icon { background: var(--pw-color-primary-subtle); color: var(--pw-color-primary); } .governance-table .lifecycle-badge { margin-left: var(--pw-space-1); } .lifecycle-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-2); margin: 0; padding: 0; list-style: none; } .lifecycle-summary a { display: flex; align-items: center; justify-content: space-between; gap: var(--pw-space-2); padding: var(--pw-space-2) var(--pw-space-3); border-radius: var(--pw-radius-md); background: var(--pw-color-surface-subtle); color: var(--pw-color-text); text-decoration: none; } .lifecycle-summary a:hover { background: var(--pw-color-primary-subtle); } .lifecycle-summary-count { font-size: var(--pw-font-size-lg); font-weight: var(--pw-font-weight-semibold); font-variant-numeric: tabular-nums; } .choice-list { display: grid; gap: var(--pw-space-2); margin-top: var(--pw-space-2); } .choice { display: flex; align-items: center; gap: var(--pw-space-2); cursor: pointer; } /* 25. Responsive & print ===================================================== */ @media (max-width: 1180px) { .doc-summary { grid-template-columns: minmax(0, 1fr); } .review-card { grid-template-columns: minmax(0, 1fr); } .diagram-layout { grid-template-columns: minmax(0, 1fr); } .compare-versions, .compare-diagrams { grid-template-columns: minmax(0, 1fr); } .review-layout { grid-template-columns: minmax(0, 1fr); } .diagram-aside { position: static; } .review-card-decision { padding: var(--pw-space-4) 0 0; border-left: 0; border-top: 1px solid var(--pw-color-border); } .split-layout { grid-template-columns: minmax(0, 1fr); } .split-aside { position: static; } .level-list-row { grid-template-columns: minmax(0, 1fr); } .span-4, .span-6, .span-8 { grid-column: span 12; } .dashboard-grid .span-6 { grid-column: span 6; } } @media (max-width: 960px) { .explorer { grid-template-columns: minmax(0, 1fr); } .explorer-sidebar { position: static; max-height: none; } .result-card { grid-template-columns: auto minmax(0, 1fr); } .result-actions { grid-column: 1 / -1; } .app-shell { grid-template-columns: minmax(0, 1fr); } .app-sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: var(--pw-space-2) var(--pw-space-4); gap: var(--pw-space-4); } .app-sidebar .brand { padding: 0; } .brand-tagline, .sidebar-section, .sidebar-footer { display: none; } .sidebar-nav { flex-direction: row; gap: var(--pw-space-1); } .sidebar-nav a { white-space: nowrap; } .sidebar-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--pw-color-primary); } .app-topbar, .app-content, .app-footer { padding-left: var(--pw-space-4); padding-right: var(--pw-space-4); } .app-frame .flash-stack { padding: 0 var(--pw-space-4); } .dashboard-grid .span-6 { grid-column: span 12; } .review-board { grid-template-columns: minmax(0, 1fr); } .modeler-header, .modeler-toolbar, .modeler-banner { padding-left: var(--pw-space-4); padding-right: var(--pw-space-4); } .modeler-actions .btn-label { white-space: normal; } } @media (max-width: 640px) { .user-chip-name { display: none; } .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-1); } .page-header { align-items: flex-start; } .data-table thead, .process-table thead { display: none; } .data-table tr, .process-table tr { display: block; padding: var(--pw-space-2) 0; border-bottom: 1px solid var(--pw-color-border); } .data-table td, .process-table td { display: flex; justify-content: space-between; gap: var(--pw-space-3); padding: var(--pw-space-2) var(--pw-space-4); border: 0; } .row-actions { justify-content: flex-start; } .fav-text { display: none; } .modeler-heading h1 { max-width: 100%; } .data-table td[data-label]::before, .process-table td[data-label]::before { content: attr(data-label); font-weight: var(--pw-font-weight-semibold); color: var(--pw-color-text-muted); font-size: var(--pw-font-size-sm); } .inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-width: 0; width: 100%; } .card-header:has(.list-filter) { flex-wrap: wrap; } .list-filter { flex-basis: 100%; } .state-card { margin: var(--pw-space-6) auto; padding: var(--pw-space-8) var(--pw-space-5); } .timeline-day { top: 0; } .diagram-unavailable { flex-direction: column; padding: var(--pw-space-5); } .diagram-toolbar .diagram-downloads { margin-left: 0; } .diagram-canvas { height: 60vh; } .working-copy-grid, .split-aside .lock-facts { grid-template-columns: minmax(0, 1fr); } .editor-surface.is-tab { height: 82vh; } .editor-bar { padding-left: var(--pw-space-3); padding-right: var(--pw-space-3); } .lock-panel-actions { width: 100%; } .wizard-step { flex: 0 0 auto; min-width: 0; } .wizard-step:not(:last-child)::after { flex: 0 0 var(--pw-space-4); } .wizard-step-label { display: none; } .wizard-step.is-current .wizard-step-label, .wizard-step.is-failed .wizard-step-label { display: inline; } } @media print { /* theme.js switches to the light theme for printing */ .app-sidebar, .app-topbar, .app-footer, .flash-stack, .no-print, .skip-link, .theme-toggle { display: none !important; } .app-shell { display: block; } .card, .metric-card { box-shadow: none; break-inside: avoid; } .card { border: 1px solid var(--pw-color-border-strong); } a { color: inherit; text-decoration: none; } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }