@profpowell/vb-project-planning 0.1.0

package/dist/vb-project-planning.css

@@ -0,0 +1,1603 @@
+/* src/web-components/impact-effort/styles.css */
+impact-effort {
+  display: block;
+  container-type: inline-size;
+}
+impact-effort:not(:defined) {
+  display: block;
+}
+.ie-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+.ie-y-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  text-align: center;
+  padding: 0 var(--size-xs, 8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.ie-x-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  text-align: center;
+  padding: var(--size-xs, 8px) 0;
+  user-select: none;
+}
+.ie-grid {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1px;
+  background: var(--color-border, #e0e0e0);
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-l, 0.75rem);
+  overflow: hidden;
+  min-height: 24rem;
+  display: grid;
+  flex: 1;
+}
+.ie-quadrant {
+  background: var(--color-surface, #fff);
+  padding: var(--size-m, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs, 8px);
+}
+.ie-quadrant-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted, #666);
+  margin-bottom: var(--size-xs, 8px);
+}
+.ie-quadrant-desc {
+  font-size: 0.65rem;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--color-text-muted, #999);
+  display: block;
+}
+[data-quadrant-zone=quick-wins] {
+  background: color-mix(in oklch, var(--color-success, #22c55e) 6%, var(--color-surface, #fff));
+}
+[data-quadrant-zone=big-bets] {
+  background: color-mix(in oklch, var(--color-warning, #f59e0b) 6%, var(--color-surface, #fff));
+}
+[data-quadrant-zone=fill-ins] {
+  background: color-mix(in oklch, var(--color-info, #3b82f6) 6%, var(--color-surface, #fff));
+}
+[data-quadrant-zone=money-pit] {
+  background: color-mix(in oklch, var(--color-error, #ef4444) 6%, var(--color-surface, #fff));
+}
+impact-effort drag-surface {
+  min-block-size: 6rem;
+  flex: 1;
+}
+.ie-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+}
+impact-effort[compact] .ie-grid {
+  min-height: 16rem;
+}
+impact-effort[compact] .ie-quadrant {
+  padding: var(--size-xs, 8px);
+  gap: var(--size-2xs, 4px);
+}
+impact-effort[compact] .ie-quadrant-label {
+  font-size: 0.65rem;
+  margin-bottom: var(--size-2xs, 4px);
+}
+impact-effort[compact] .ie-quadrant-desc {
+  font-size: 0.6rem;
+}
+impact-effort[compact] drag-surface {
+  min-block-size: 4rem;
+}
+impact-effort[compact] .ie-y-label,
+impact-effort[compact] .ie-x-label {
+  font-size: 0.6rem;
+}
+@container (max-width: 30rem) {
+  .ie-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  impact-effort,
+  impact-effort * {
+    transition: none;
+  }
+}
+@media print {
+  .ie-grid {
+    border: 1px solid #ccc;
+    gap: 0;
+    min-height: auto;
+  }
+  .ie-quadrant {
+    border: 0.5pt solid #ccc;
+    break-inside: avoid;
+  }
+  impact-effort drag-surface {
+    min-block-size: auto;
+  }
+  impact-effort [draggable] {
+    cursor: default;
+  }
+}
+
+/* src/web-components/quadrant-grid/styles.css */
+quadrant-grid:not(:defined) {
+  display: block;
+}
+quadrant-grid {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (quadrant-grid) {
+  .qg-wrapper {
+    display: grid;
+    grid-template-columns: max-content max-content 1fr;
+    grid-template-rows: max-content 1fr max-content max-content;
+    grid-template-areas: "y-label . ." "y-scale grid grid" ". x-scale x-scale" ". x-label x-label";
+    gap: var(--size-2xs, 0.25rem);
+    margin: 0;
+  }
+  .qg-y-label {
+    grid-area: y-label;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    text-align: start;
+    padding-inline-end: var(--size-xs, 0.5rem);
+  }
+  .qg-x-label {
+    grid-area: x-label;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    text-align: end;
+  }
+  .qg-y-scale {
+    grid-area: y-scale;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-block: var(--size-2xs, 0.25rem);
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: var(--font-size-xs, 0.75rem);
+    color: var(--color-text-muted, #666);
+    text-align: end;
+    padding-inline-end: var(--size-xs, 0.5rem);
+    min-inline-size: 3rem;
+  }
+  .qg-x-scale {
+    grid-area: x-scale;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: var(--font-size-xs, 0.75rem);
+    color: var(--color-text-muted, #666);
+    padding-block-start: var(--size-2xs, 0.25rem);
+  }
+  .qg-grid {
+    grid-area: grid;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: var(--size-2xs, 0.25rem);
+    min-block-size: var(--qg-min-size, 24rem);
+    background: var(--color-border, oklch(85% 0 0));
+    padding: 1px;
+    border-radius: var(--radius-m, 0.5rem);
+  }
+  .qg-quadrant {
+    position: relative;
+    background: var(--color-surface, #fff);
+    padding: var(--size-s, 0.75rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-xs, 0.5rem);
+    overflow: hidden;
+  }
+  .qg-quadrant[data-quadrant-zone="0"] {
+    grid-row: 1;
+    grid-column: 2;
+    border-radius: 0 var(--radius-m, 0.5rem) 0 0;
+  }
+  .qg-quadrant[data-quadrant-zone="1"] {
+    grid-row: 1;
+    grid-column: 1;
+    border-radius: var(--radius-m, 0.5rem) 0 0 0;
+  }
+  .qg-quadrant[data-quadrant-zone="2"] {
+    grid-row: 2;
+    grid-column: 1;
+    border-radius: 0 0 0 var(--radius-m, 0.5rem);
+  }
+  .qg-quadrant[data-quadrant-zone="3"] {
+    grid-row: 2;
+    grid-column: 2;
+    border-radius: 0 0 var(--radius-m, 0.5rem) 0;
+  }
+  .qg-quadrant-label {
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    margin: 0;
+  }
+  .qg-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2xs, 0.25rem);
+  }
+  .qg-items > li {
+    background: var(--color-surface-raised, oklch(96% 0 0));
+    padding: var(--size-2xs, 0.25rem) var(--size-xs, 0.5rem);
+    border-radius: var(--radius-s, 0.25rem);
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+  .qg-pinned {
+    position: absolute;
+    inline-size: max-content;
+    max-inline-size: calc(100% - var(--size-xs, 0.5rem));
+    padding: var(--size-3xs, 0.125rem) var(--size-xs, 0.5rem);
+    background: var(--color-accent, oklch(45% 0.18 260));
+    color: var(--color-text-on-primary, #fff);
+    border-radius: var(--radius-s, 0.25rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    inset-inline-start: clamp(var(--qg-pin-half-w, 1.5rem), calc(var(--qg-local-x, 0.5) * 100%), calc(100% - var(--qg-pin-half-w, 1.5rem)));
+    inset-block-end: clamp(var(--qg-pin-half-h, 0.75rem), calc(var(--qg-local-y, 0.5) * 100%), calc(100% - var(--qg-pin-half-h, 0.75rem)));
+    transform: translate(calc(-50% + var(--qg-fan-x, 0px)), calc(50% + var(--qg-fan-y, 0px)));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    filter: hue-rotate(var(--qg-pin-hue, 0deg));
+    transition:
+      transform 180ms ease,
+      box-shadow 180ms ease,
+      z-index 0s;
+  }
+  .qg-quadrant:hover .qg-pinned.qg-clustered,
+  .qg-quadrant:focus-within .qg-pinned.qg-clustered {
+    --qg-fan-angle: calc((var(--qg-cluster-i, 0) / var(--qg-cluster-n, 1)) * 360deg);
+    --qg-fan-radius: calc(var(--qg-pin-half-w, 1.5rem) * 1.4);
+    --qg-fan-x: calc(cos(var(--qg-fan-angle)) * var(--qg-fan-radius));
+    --qg-fan-y: calc(sin(var(--qg-fan-angle)) * var(--qg-fan-radius) * -1);
+  }
+  .qg-pinned.qg-clustered:hover,
+  .qg-pinned.qg-clustered:focus-visible {
+    z-index: 2;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  quadrant-grid * {
+    transition: none !important;
+  }
+}
+@media print {
+  quadrant-grid .qg-y-label,
+  quadrant-grid .qg-x-label,
+  quadrant-grid .qg-y-scale,
+  quadrant-grid .qg-x-scale {
+    color: #000;
+  }
+}
+
+/* src/web-components/risk-register/styles.css */
+risk-register:not(:defined) {
+  display: block;
+}
+risk-register {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (risk-register) {
+  .rr-label {
+    display: block;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    margin-block-end: var(--size-s, 0.75rem);
+  }
+  .rr-layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--size-l, 1.5rem);
+  }
+  @media (width >= 64rem) {
+    .rr-layout {
+      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+}
+
+/* src/web-components/traceability-matrix/styles.css */
+traceability-matrix:not(:defined) {
+  display: block;
+}
+traceability-matrix {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (traceability-matrix) {
+  .tm-label {
+    display: block;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    margin-block-end: var(--size-s, 0.75rem);
+  }
+  .tm-empty {
+    color: var(--color-text-muted, #666);
+    font-style: italic;
+  }
+  td[data-linked] {
+    background: oklch(94% 0.05 145 / 0.55);
+    text-align: center;
+    font-weight: 600;
+    color: var(--color-accent, oklch(45% 0.18 260));
+  }
+  td:not([data-linked]) {
+    color: var(--color-text-muted, #666);
+    text-align: center;
+  }
+  th[scope=row] {
+    text-align: start;
+    font-weight: 600;
+    background: var(--color-surface-raised, oklch(96% 0 0));
+    white-space: nowrap;
+  }
+  tr[data-state-highlighted] {
+    outline: 2px solid var(--color-accent, oklch(45% 0.18 260));
+    outline-offset: -2px;
+  }
+  td[data-state-highlighted],
+  th[data-state-highlighted] {
+    background: oklch(85% 0.12 145 / 0.7);
+  }
+  tr[data-orphan] th[scope=row]::after,
+  th[data-orphan]::after {
+    content: " \26a0";
+    color: var(--color-warning, oklch(60% 0.15 60));
+    font-weight: 700;
+  }
+  td,
+  th {
+    padding: var(--size-2xs, 0.25rem) var(--size-s, 0.75rem);
+    border-block-end: var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));
+    cursor: default;
+  }
+  td[data-linked] {
+    cursor: pointer;
+  }
+}
+[data-state-highlighted]:not(traceability-matrix *) {
+  outline: 2px solid var(--color-accent, oklch(45% 0.18 260));
+  outline-offset: 2px;
+  scroll-margin-block: var(--size-l, 1.5rem);
+}
+@media print {
+  traceability-matrix td[data-state-highlighted],
+  traceability-matrix tr[data-state-highlighted] {
+    outline: none;
+    background: none;
+  }
+}
+
+/* src/web-components/burndown-chart/styles.css */
+burndown-chart:not(:defined) {
+  display: block;
+}
+burndown-chart {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (burndown-chart) {
+  .bdc-label {
+    display: block;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    margin-block-end: var(--size-s, 0.75rem);
+  }
+  chart-wc {
+    display: block;
+    min-block-size: var(--burndown-min-height, 18rem);
+  }
+  .bdc-scope-changes {
+    margin-block-start: var(--size-m, 1rem);
+    padding: var(--size-s, 0.75rem) var(--size-m, 1rem);
+    background: var(--color-surface-raised, oklch(96% 0 0));
+    border-inline-start: var(--border-width-medium, 3px) solid var(--color-warning, oklch(70% 0.15 60));
+    border-radius: var(--radius-s, 0.25rem);
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+  .bdc-scope-changes h4 {
+    margin: 0 0 var(--size-2xs, 0.25rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+  }
+  .bdc-scope-changes ul {
+    margin: 0;
+    padding-inline-start: var(--size-m, 1rem);
+  }
+  .bdc-scope-changes li {
+    margin-block: var(--size-3xs, 0.125rem);
+  }
+  .bdc-scope-changes time {
+    font-family: var(--font-mono, ui-monospace, monospace);
+    color: var(--color-text-muted, #666);
+  }
+}
+
+/* src/web-components/product-roadmap/styles.css */
+product-roadmap:not(:defined) {
+  display: block;
+}
+product-roadmap {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+product-roadmap > section[data-lane] {
+  display: none;
+}
+@scope (product-roadmap) {
+  .rm-wrapper {
+    display: grid;
+    grid-template-columns: minmax(8rem, max-content) 1fr;
+    gap: var(--size-2xs, 0.25rem);
+  }
+  .rm-axis {
+    grid-column: 2;
+    position: relative;
+    block-size: var(--size-l, 1.5rem);
+    border-block-end: var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));
+    margin-block-end: var(--size-2xs, 0.25rem);
+  }
+  .rm-tick {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--rm-x) * 100%);
+    inline-size: calc(var(--rm-w) * 100%);
+    border-inline-end: var(--border-width-thin, 1px) dashed var(--color-border, oklch(85% 0 0));
+    padding-inline: var(--size-2xs, 0.25rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rm-lanes {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    gap: var(--size-2xs, 0.25rem);
+    position: relative;
+  }
+  .rm-lane {
+    display: contents;
+  }
+  .rm-lane-label {
+    grid-column: 1;
+    font-size: var(--font-size-sm, 0.875rem);
+    font-weight: 600;
+    color: var(--color-text, currentColor);
+    padding: var(--size-xs, 0.5rem) var(--size-s, 0.75rem);
+    background: var(--color-surface-raised, oklch(96% 0 0));
+    border-radius: var(--radius-s, 0.25rem);
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+  }
+  .rm-track {
+    grid-column: 2;
+    position: relative;
+    min-block-size: var(--size-2xl, 3rem);
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--color-surface, transparent),
+        var(--color-surface, transparent) calc(var(--rm-tick-w, 25%) - 1px),
+        var(--color-border, oklch(85% 0 0 / 0.4)) calc(var(--rm-tick-w, 25%) - 1px),
+        var(--color-border, oklch(85% 0 0 / 0.4)) var(--rm-tick-w, 25%));
+    border-radius: var(--radius-s, 0.25rem);
+  }
+  .rm-bar {
+    position: absolute;
+    inset-block: var(--size-2xs, 0.25rem);
+    inset-inline-start: calc(var(--rm-x) * 100%);
+    inline-size: calc(var(--rm-w) * 100%);
+    background: var(--color-accent, oklch(45% 0.18 260));
+    color: var(--color-text-on-primary, #fff);
+    border-radius: var(--radius-s, 0.25rem);
+    padding: var(--size-2xs, 0.25rem) var(--size-s, 0.75rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: 1.2;
+    overflow: hidden;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    cursor: grab;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: var(--size-2xs, 0.25rem);
+  }
+  .rm-bar:active {
+    cursor: grabbing;
+  }
+  .rm-bar-title {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rm-bar-handle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--size-xs, 0.5rem);
+    background: rgba(255, 255, 255, 0.25);
+    cursor: ew-resize;
+    border-start-end-radius: var(--radius-s, 0.25rem);
+    border-end-end-radius: var(--radius-s, 0.25rem);
+  }
+  .rm-bar[data-status=planned] {
+    background: var(--color-info, oklch(60% 0.12 240));
+  }
+  .rm-bar[data-status=in-progress] {
+    background: var(--color-accent, oklch(50% 0.16 260));
+  }
+  .rm-bar[data-status=at-risk] {
+    background: var(--color-warning, oklch(65% 0.16 60));
+    color: var(--color-text, #1a1a1a);
+  }
+  .rm-bar[data-status=shipped] {
+    background: var(--color-success, oklch(55% 0.14 145));
+  }
+  .rm-bar[data-status=blocked] {
+    background: var(--color-danger, oklch(55% 0.18 25));
+  }
+  .rm-today {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--rm-x) * 100%);
+    inline-size: 0;
+    border-inline-start: var(--border-width-medium, 2px) solid var(--color-warning, oklch(60% 0.18 60));
+    pointer-events: none;
+    z-index: 2;
+    transform: translateX(0);
+  }
+}
+product-roadmap:not([editable]) .rm-bar {
+  cursor: default;
+}
+product-roadmap:not([editable]) .rm-bar-handle {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  product-roadmap .rm-bar {
+    transition: none;
+  }
+}
+
+/* src/web-components/kanban-board/styles.css */
+kanban-board {
+  display: block;
+  container-type: inline-size;
+}
+kanban-board:not(:defined) {
+  display: block;
+}
+.kb-columns {
+  display: flex;
+  gap: 1px;
+  background: var(--color-border, #e0e0e0);
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-l, 0.75rem);
+  overflow: hidden;
+  flex-wrap: wrap;
+}
+.kb-column {
+  min-inline-size: 14rem;
+  flex: 1 1 14rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+  margin-block: 0 !important;
+  padding-block-start: 0 !important;
+  border-block-start: 0 !important;
+}
+.kb-column-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  padding: var(--size-s, 12px) var(--size-m, 16px);
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 2px solid var(--color-border, #e0e0e0);
+}
+.kb-column-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text, #1a1a1a);
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+.kb-count {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  background: var(--color-border, #e0e0e0);
+  border-radius: var(--radius-full, 9999px);
+  padding: 1px 8px;
+  margin-inline-start: 4px;
+}
+.kb-wip {
+  font-size: 0.65rem;
+  font-weight: 400;
+  color: var(--color-text-muted, #999);
+}
+[data-wip-exceeded] .kb-column-header {
+  border-block-end-color: var(--color-error, #ef4444);
+}
+[data-wip-exceeded] .kb-count {
+  background: color-mix(in oklch, var(--color-error, #ef4444) 15%, var(--color-surface, #fff));
+  color: var(--color-error, #ef4444);
+}
+[data-column-tint=success] {
+  background: color-mix(in oklch, var(--color-success, #22c55e) 6%, var(--color-surface, #fff));
+}
+[data-column-tint=warning] {
+  background: color-mix(in oklch, var(--color-warning, #f59e0b) 6%, var(--color-surface, #fff));
+}
+[data-column-tint=error] {
+  background: color-mix(in oklch, var(--color-error, #ef4444) 6%, var(--color-surface, #fff));
+}
+[data-column-tint=info] {
+  background: color-mix(in oklch, var(--color-info, #3b82f6) 6%, var(--color-surface, #fff));
+}
+[data-column-tint=interactive] {
+  background: color-mix(in oklch, var(--color-interactive, #3b82f6) 6%, var(--color-surface, #fff));
+}
+kanban-board drag-surface {
+  padding: var(--size-s, 12px);
+  min-block-size: 6rem;
+  flex: 1;
+}
+kanban-board .kb-card {
+  background: var(--color-surface, #fff);
+  border: var(--border-width-thin, 1px) solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-s, 0.375rem);
+  padding: var(--size-xs, 8px) var(--size-s, 12px);
+  cursor: grab;
+  font-size: var(--font-size-s, 0.875rem);
+  line-height: 1.4;
+}
+kanban-board .kb-card:active {
+  cursor: grabbing;
+}
+.kb-empty {
+  color: var(--color-text-muted, #888);
+  font-size: 0.8rem;
+  font-style: italic;
+  padding: var(--size-s, 12px);
+  margin: 0;
+}
+.kb-title {
+  margin-block-end: var(--size-s, 12px);
+}
+.kb-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+}
+kanban-board[compact] .kb-column {
+  min-inline-size: 11rem;
+  flex: 1 1 11rem;
+}
+kanban-board[compact] .kb-column-header {
+  padding: var(--size-xs, 8px) var(--size-s, 12px);
+}
+kanban-board[compact] .kb-column-header h3 {
+  font-size: 0.75rem;
+}
+kanban-board[compact] drag-surface {
+  padding: var(--size-xs, 8px);
+  min-block-size: 4rem;
+}
+kanban-board[compact] .kb-count {
+  font-size: 0.6rem;
+}
+@container (max-width: 30rem) {
+  .kb-columns {
+    flex-direction: column;
+  }
+  .kb-column {
+    min-inline-size: unset;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  kanban-board,
+  kanban-board * {
+    transition: none;
+  }
+}
+@media print {
+  .kb-columns {
+    flex-wrap: wrap;
+    border: 0.5pt solid #ccc;
+    gap: 0;
+  }
+  .kb-column {
+    border: 0.5pt solid #ccc;
+    break-inside: avoid;
+  }
+  .kb-column-header {
+    position: static;
+  }
+  kanban-board drag-surface {
+    min-block-size: auto;
+  }
+  kanban-board [draggable] {
+    cursor: default;
+  }
+}
+
+/* src/web-components/story-map/styles.css */
+story-map {
+  display: block;
+  container-type: inline-size;
+}
+story-map:not(:defined) {
+  display: block;
+}
+.sm-scroll {
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+}
+.sm-columns {
+  display: flex;
+  gap: 1px;
+  background: var(--color-border, #e0e0e0);
+  min-inline-size: min-content;
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-l, 0.75rem);
+  overflow: hidden;
+}
+.sm-column {
+  min-inline-size: 14rem;
+  max-inline-size: 22rem;
+  flex: 1 0 14rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+}
+.sm-activity-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  padding: var(--size-s, 12px) var(--size-m, 16px);
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 2px solid var(--color-border, #e0e0e0);
+}
+.sm-activity-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text, #1a1a1a);
+}
+.sm-activity-count {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  background: var(--color-border, #e0e0e0);
+  border-radius: var(--radius-full, 9999px);
+  padding: 1px 8px;
+  margin-inline-start: 8px;
+}
+story-map drag-surface {
+  padding: var(--size-s, 12px);
+  min-block-size: 8rem;
+  flex: 1;
+}
+story-map drag-surface > * {
+  margin-block-end: var(--size-xs, 8px);
+}
+story-map drag-surface > *:last-child {
+  margin-block-end: 0;
+}
+.sm-empty {
+  color: var(--color-text-muted, #888);
+  font-size: 0.8rem;
+  font-style: italic;
+  padding: var(--size-s, 12px);
+  margin: 0;
+}
+.sm-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+story-map[compact] .sm-column {
+  min-inline-size: 11rem;
+  flex: 1 0 11rem;
+}
+story-map[compact] .sm-activity-header {
+  padding: var(--size-xs, 8px) var(--size-s, 12px);
+}
+story-map[compact] .sm-activity-header h3 {
+  font-size: 0.75rem;
+}
+story-map[compact] drag-surface {
+  padding: var(--size-xs, 8px);
+}
+@container (max-width: 30rem) {
+  .sm-columns {
+    flex-direction: column;
+  }
+  .sm-column {
+    max-inline-size: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sm-scroll {
+    scroll-behavior: auto;
+  }
+}
+@media print {
+  .sm-scroll {
+    overflow: visible;
+  }
+  .sm-activity-header {
+    position: static;
+  }
+  .sm-columns {
+    flex-wrap: wrap;
+  }
+  .sm-column {
+    break-inside: avoid;
+  }
+}
+
+/* src/web-components/gantt-chart/styles.css */
+gantt-chart {
+  display: block;
+  container-type: inline-size;
+  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  line-height: 1.5;
+  color: var(--color-text, #1a1a1a);
+}
+gantt-chart:not([data-upgraded]) > table {
+  width: 100%;
+}
+.gc-title {
+  font-size: var(--font-size-xl, 1.25rem);
+  font-weight: 700;
+  margin-block-end: var(--size-s, 0.75rem);
+}
+.gc-container {
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-m, 0.5rem);
+  overflow: hidden;
+  background: var(--color-surface, #ffffff);
+}
+.gc-timeline-header {
+  display: flex;
+  position: relative;
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+  background: var(--color-surface-raised, #f8f9fa);
+  min-height: 32px;
+}
+.gc-timeline-spacer {
+  flex: 0 0 var(--gc-task-width, 180px);
+  border-inline-end: 1px solid var(--color-border, #e0e0e0);
+}
+.gc-timeline-dates {
+  flex: 1;
+  position: relative;
+  min-height: 32px;
+}
+.gc-date-label {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted, #666666);
+  padding-inline-start: 6px;
+  white-space: nowrap;
+  border-inline-start: 1px solid var(--color-border, #e0e0e0);
+}
+.gc-date-label:first-child {
+  border-inline-start: none;
+}
+.gc-body {
+  display: flex;
+  min-height: 0;
+}
+.gc-task-list {
+  flex: 0 0 var(--gc-task-width, 180px);
+  border-inline-end: 1px solid var(--color-border, #e0e0e0);
+  overflow: hidden;
+}
+.gc-task-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--gc-row-height, 36px);
+  padding-inline: 12px;
+  border-block-end: 1px solid color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+  font-size: var(--font-size-sm, 0.875rem);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gc-task-row:last-child {
+  border-block-end: none;
+}
+.gc-task-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gc-task-dates {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+.gc-group-header {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding-inline: 12px;
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+}
+.gc-group-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted, #666666);
+}
+.gc-group-spacer {
+  height: 28px;
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+}
+.gc-bars {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  overflow-x: auto;
+}
+.gc-grid-lines {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.gc-grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+}
+.gc-bar-row {
+  position: relative;
+  height: var(--gc-row-height, 36px);
+  border-block-end: 1px solid color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+}
+.gc-bar-row:last-child {
+  border-block-end: none;
+}
+.gc-bar {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  border-radius: var(--radius-s, 4px);
+  background: var(--gc-bar-color, var(--color-interactive, #0066cc));
+  cursor: pointer;
+  min-width: 4px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  transition: filter 150ms ease;
+}
+.gc-bar:hover {
+  filter: brightness(1.1);
+}
+.gc-bar:focus-visible {
+  outline: 2px solid var(--color-interactive, #0066cc);
+  outline-offset: 2px;
+}
+.gc-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--gc-bar-color, var(--color-interactive, #0066cc)) 65%, white);
+  pointer-events: none;
+}
+.gc-bar-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding-inline: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.gc-bar[data-status=done] {
+  --gc-bar-color: var(--color-success, #16a34a);
+}
+.gc-bar[data-status=blocked] {
+  --gc-bar-color: var(--color-error, #dc2626);
+}
+.gc-bar[data-status=not-started] {
+  --gc-bar-color: var(--color-text-muted, #666666);
+  opacity: 0.6;
+}
+.gc-milestone {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: var(--gc-bar-color, var(--color-interactive, #0066cc));
+  border: 2px solid var(--color-surface, #ffffff);
+  cursor: pointer;
+}
+.gc-milestone:focus-visible {
+  outline: 2px solid var(--color-interactive, #0066cc);
+  outline-offset: 3px;
+}
+.gc-milestone[data-status=done] {
+  --gc-bar-color: var(--color-success, #16a34a);
+}
+.gc-today-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--color-error, #dc2626);
+  z-index: 5;
+  pointer-events: none;
+}
+.gc-today-label {
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-error, #dc2626);
+  white-space: nowrap;
+}
+.gc-deps {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+.gc-dep-line {
+  fill: none;
+  stroke: var(--color-text-muted, #666666);
+  stroke-width: 1.5;
+  marker-end: url(#gc-arrowhead);
+}
+.gc-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+gantt-chart[compact] {
+  --gc-row-height: 28px;
+  --gc-task-width: 140px;
+}
+gantt-chart[compact] .gc-task-row {
+  font-size: 12px;
+  padding-inline: 8px;
+}
+gantt-chart[compact] .gc-bar {
+  top: 5px;
+  bottom: 5px;
+}
+gantt-chart[compact] .gc-group-header {
+  height: 24px;
+}
+gantt-chart[compact] .gc-group-spacer {
+  height: 24px;
+}
+@container (max-width: 30rem) {
+  .gc-body {
+    flex-direction: column;
+  }
+  .gc-task-list {
+    flex: none;
+    border-inline-end: none;
+    border-block-end: 1px solid var(--color-border, #e0e0e0);
+  }
+  .gc-task-row {
+    height: auto;
+    padding-block: 4px;
+  }
+  .gc-timeline-spacer {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gc-bar {
+    transition: none;
+  }
+}
+@media print {
+  gantt-chart[data-upgraded] .gc-container,
+  gantt-chart[data-upgraded] .gc-title {
+    display: none;
+  }
+  gantt-chart[data-upgraded] .gc-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 220ms;
+  animation-timing-function: ease-out;
+}
+
+/* src/web-components/iron-triangle/styles.css */
+iron-triangle {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--iron-triangle-max, 26rem);
+  margin-inline: auto;
+  container-type: inline-size;
+}
+iron-triangle > svg {
+  inline-size: 100%;
+  block-size: auto;
+  display: block;
+}
+iron-triangle svg .triangle {
+  fill: var(--iron-triangle-fill, color-mix(in oklab, var(--color-interactive) 8%, transparent));
+  stroke: var(--iron-triangle-stroke, var(--color-interactive));
+  stroke-width: var(--iron-triangle-stroke-width, 1.5);
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+iron-triangle svg .vertex,
+iron-triangle svg .center {
+  cursor: pointer;
+  outline: none;
+}
+iron-triangle svg .vertex .hit,
+iron-triangle svg .center .hit {
+  fill: transparent;
+  stroke: transparent;
+  transition: fill 120ms ease, stroke 120ms ease;
+}
+iron-triangle svg .vertex:hover .hit,
+iron-triangle svg .vertex:focus-visible .hit,
+iron-triangle svg .center:hover .hit,
+iron-triangle svg .center:focus-visible .hit {
+  fill: color-mix(in oklab, var(--color-interactive) 8%, transparent);
+  stroke: var(--color-interactive);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 3;
+}
+iron-triangle svg .vertex-name {
+  font-size: 0.85rem;
+  font-weight: var(--font-weight-semibold, 600);
+  fill: var(--color-text);
+  pointer-events: none;
+}
+iron-triangle svg .vertex:hover .vertex-name,
+iron-triangle svg .vertex:focus-visible .vertex-name {
+  fill: var(--color-interactive);
+}
+iron-triangle svg .vertex-summary {
+  font-size: 0.7rem;
+  fill: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+iron-triangle svg .capacity-backdrop {
+  fill: var(--color-surface);
+  stroke: var(--color-border-muted, var(--color-border, #e5e7eb));
+  stroke-width: 1;
+  pointer-events: none;
+}
+iron-triangle svg .quality-label {
+  font-size: 0.65rem;
+  font-weight: var(--font-weight-semibold, 600);
+  fill: var(--color-interactive);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  pointer-events: none;
+}
+iron-triangle svg .capacity {
+  font-size: var(--iron-triangle-capacity-size, 1.6rem);
+  font-weight: var(--font-weight-bold, 700);
+  fill: var(--color-text);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+iron-triangle svg .capacity-unit {
+  font-size: 0.6rem;
+  fill: var(--color-text-muted);
+  pointer-events: none;
+}
+iron-triangle svg .center .hit {
+  fill: transparent;
+  stroke: transparent;
+  transition: fill 120ms ease, stroke 120ms ease;
+}
+iron-triangle svg .center:hover .hit,
+iron-triangle svg .center:focus-visible .hit {
+  fill: color-mix(in oklab, var(--color-interactive) 8%, transparent);
+  stroke: var(--color-interactive);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 3;
+}
+iron-triangle svg .center:hover .quality-label,
+iron-triangle svg .center:focus-visible .quality-label {
+  fill: var(--color-interactive);
+}
+iron-triangle:state(over-deadline) svg .triangle {
+  stroke: var(--color-warning);
+}
+iron-triangle:state(unbudgeted) svg .capacity {
+  fill: var(--color-warning);
+}
+iron-triangle:state(manual) svg .quality-label::after {
+  content: " (manual)";
+}
+iron-triangle[disabled],
+iron-triangle[locked] {
+  opacity: 0.85;
+  pointer-events: none;
+}
+iron-triangle > dialog.iron-triangle-dialog {
+  inline-size: min(28rem, 92vw);
+  border: var(--border-width-thin, 1px) solid var(--color-border);
+  border-radius: var(--radius-l, 0.75rem);
+  padding: var(--size-l, 1.5rem);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+iron-triangle > dialog.iron-triangle-dialog::backdrop {
+  background: oklch(from var(--color-surface) l c h / 0.5);
+  backdrop-filter: blur(2px);
+}
+iron-triangle > dialog.iron-triangle-dialog h3 {
+  margin: 0 0 var(--size-m) 0;
+  font-size: var(--font-size-l, 1.125rem);
+}
+
+/* src/web-components/capacity-plan/styles.css */
+capacity-plan {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--capacity-plan-max, 32rem);
+  margin-inline: auto;
+}
+capacity-plan .capacity-ledger {
+  display: grid;
+  grid-template-columns: minmax(8rem, 14rem) 1fr;
+  gap: var(--size-2xs, 0.25rem) var(--size-m, 1rem);
+  margin: 0;
+}
+capacity-plan .capacity-ledger > div {
+  display: contents;
+}
+capacity-plan .capacity-ledger dt {
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text);
+}
+capacity-plan .capacity-ledger .num {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+  text-align: end;
+  padding-inline-end: var(--size-s);
+}
+capacity-plan .capacity-ledger .bar {
+  margin: 0;
+  align-self: center;
+}
+capacity-plan .bar-track {
+  display: block;
+  inline-size: 100%;
+  block-size: 0.6rem;
+  background: var(--color-surface-raised, color-mix(in oklab, var(--color-surface) 92%, currentColor 8%));
+  border-radius: var(--radius-pill, 999px);
+  overflow: hidden;
+}
+capacity-plan .bar-fill {
+  display: block;
+  block-size: 100%;
+  inline-size: var(--w, 0%);
+  border-radius: inherit;
+  transition: inline-size 200ms ease;
+}
+capacity-plan .bar-capacity {
+  background: color-mix(in oklab, var(--color-text) 25%, transparent);
+}
+capacity-plan .bar-quality {
+  background: var(--color-interactive);
+}
+capacity-plan .bar-features {
+  background: var(--color-success);
+}
+capacity-plan .bar-slack {
+  background: color-mix(in oklab, var(--color-text-muted) 35%, transparent);
+}
+capacity-plan [data-row=slack][data-state=over] .num {
+  color: var(--color-error);
+  font-weight: var(--font-weight-semibold, 600);
+}
+capacity-plan [data-row=slack][data-state=over] .bar-slack {
+  background: var(--color-error);
+}
+capacity-plan:state(overdrawn) .capacity-ledger {
+  outline: 2px solid var(--color-error);
+  outline-offset: var(--size-2xs);
+  border-radius: var(--radius-m);
+}
+
+/* src/web-components/quality-target/styles.css */
+quality-target {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--quality-target-max, 36rem);
+  margin-inline: auto;
+  container-type: inline-size;
+}
+quality-target > svg {
+  inline-size: 100%;
+  block-size: auto;
+  display: block;
+}
+quality-target svg .ring {
+  fill: none;
+  stroke: var(--color-border-muted, var(--color-border, #e5e7eb));
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+quality-target svg .ring-critical {
+  stroke: color-mix(in oklab, var(--color-error) 60%, transparent);
+}
+quality-target svg .ring-important {
+  stroke: color-mix(in oklab, var(--color-warning) 50%, transparent);
+}
+quality-target svg .ring-acceptable {
+  stroke: color-mix(in oklab, var(--color-success) 50%, transparent);
+}
+quality-target svg .spoke {
+  stroke: var(--color-border, #e5e7eb);
+  stroke-width: 0.75;
+  stroke-dasharray: 1 4;
+  pointer-events: none;
+}
+quality-target svg .vector {
+  fill: var(--quality-target-vector-fill, color-mix(in oklab, var(--color-interactive) 22%, transparent));
+  stroke: var(--quality-target-vector-stroke, var(--color-interactive));
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+quality-target svg .vector-spoke {
+  stroke: var(--quality-target-vector-stroke, var(--color-interactive));
+  stroke-width: 2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+quality-target svg .axis {
+  cursor: pointer;
+  outline: none;
+}
+quality-target svg .axis .hit {
+  fill: transparent;
+  stroke: transparent;
+  transition: fill 120ms ease, stroke 120ms ease;
+}
+quality-target svg .axis:hover .hit,
+quality-target svg .axis:focus-visible .hit {
+  fill: color-mix(in oklab, var(--color-interactive) 8%, transparent);
+  stroke: var(--color-interactive);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+quality-target svg .axis-label {
+  font-size: var(--quality-target-label-size, 0.625rem);
+  fill: var(--color-text-muted);
+  letter-spacing: 0.02em;
+  pointer-events: none;
+  font-weight: var(--font-weight-regular, 400);
+}
+quality-target svg .axis[data-level] .axis-label {
+  font-weight: var(--font-weight-semibold, 600);
+}
+quality-target svg .axis[data-level=critical] .axis-label {
+  fill: var(--color-error, #dc2626);
+}
+quality-target svg .axis[data-level=important] .axis-label {
+  fill: var(--color-warning, #b45309);
+}
+quality-target svg .axis[data-level=acceptable] .axis-label {
+  fill: var(--color-success, #15803d);
+}
+quality-target svg .axis[data-level=not-relevant] .axis-label {
+  fill: var(--color-text-muted, #6b7280);
+  text-decoration: line-through;
+  font-weight: var(--font-weight-regular, 400);
+}
+quality-target svg .axis .marker {
+  fill: var(--color-interactive);
+  stroke: var(--color-surface);
+  stroke-width: 1;
+  pointer-events: none;
+}
+quality-target svg .axis[data-level=critical] .marker {
+  fill: var(--color-error, #dc2626);
+}
+quality-target svg .axis[data-level=important] .marker {
+  fill: var(--color-warning, #b45309);
+}
+quality-target svg .axis[data-level=acceptable] .marker {
+  fill: var(--color-success, #16a34a);
+}
+quality-target svg .axis[data-level=not-relevant] .marker {
+  fill: var(--color-text-muted, #6b7280);
+  opacity: 0.5;
+}
+quality-target svg .capacity-backdrop {
+  fill: var(--color-surface);
+  stroke: var(--color-border-muted, var(--color-border, #e5e7eb));
+  stroke-width: 1;
+  pointer-events: none;
+}
+quality-target svg .capacity-sum {
+  font-size: var(--quality-target-capacity-size, 1.25rem);
+  font-weight: var(--font-weight-bold, 700);
+  fill: var(--color-text);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+quality-target svg .capacity-denom {
+  font-size: 0.55rem;
+  fill: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+quality-target svg .center[data-over] .capacity-sum {
+  fill: var(--color-error);
+}
+quality-target:state(over-budget) svg .vector {
+  stroke: var(--color-warning);
+}
+quality-target .quality-footer {
+  margin-block-start: var(--size-m, 1rem);
+}
+quality-target [data-quality-overrun] {
+  padding: var(--size-m, 1rem);
+  border: var(--border-width-thin, 1px) solid var(--color-error);
+  border-radius: var(--radius-m);
+  background: var(--color-error-subtle, oklch(95% 0.05 27));
+  display: grid;
+  gap: var(--size-2xs, 0.25rem);
+}
+quality-target [data-quality-overrun][hidden] {
+  display: none;
+}
+quality-target [data-quality-errors] {
+  display: none;
+}
+quality-target:state(missing-rationale) [data-quality-errors] {
+  display: block;
+}
+quality-target > dialog.quality-dialog {
+  inline-size: min(28rem, 92vw);
+  border: var(--border-width-thin, 1px) solid var(--color-border);
+  border-radius: var(--radius-l, 0.75rem);
+  padding: var(--size-l, 1.5rem);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+quality-target > dialog.quality-dialog::backdrop {
+  background: oklch(from var(--color-surface) l c h / 0.5);
+  backdrop-filter: blur(2px);
+}
+quality-target > dialog.quality-dialog h3 {
+  margin: 0 0 var(--size-m) 0;
+  font-size: var(--font-size-l, 1.125rem);
+}
+quality-target > dialog.quality-dialog fieldset {
+  border: 1px solid var(--color-border-muted, var(--color-border));
+}
+quality-target[disabled],
+quality-target[locked] {
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+/* src/index.css */