@profpowell/vb-project-planning 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -62,12 +62,14 @@ import '@profpowell/vb-project-planning/kanban-board';
62
62
  <user-persona name="Fred" role="Engineer">…</user-persona>
63
63
  ```
64
64
 
65
- ## Runtime peers: `<drag-surface>` and `<data-table>`
65
+ ## Runtime peers from Vanilla Breeze
66
66
 
67
- Two Vanilla Breeze core elements are used as runtime peers. Load VB on the page (the full bundle, or the per-component files under `dist/cdn/components/`) and they light up; without them the components still render, only the composed behaviour is unavailable.
67
+ Four Vanilla Breeze elements are used as runtime peers. Load VB on the page (the full bundle, or the per-component files under `dist/cdn/components/`) and they light up; without them the components still render, only the composed behaviour is unavailable.
68
68
 
69
69
  - `<drag-surface>` — the drag-to-reorder components (`kanban-board`, `quadrant-grid`, `impact-effort`, `story-map`). Without it, drag-reordering is off.
70
70
  - `<data-table>` — `risk-register` and `traceability-matrix` compose it for the severity rollup, heatmap, and sortable headers. Without it, the plain table renders but those features are inert.
71
+ - `<form-field>` — `iron-triangle` and `quality-target` (and `capacity-plan`, which embeds a quality target) wrap their dialog inputs in it for labels and validation messages. Without it, the inputs still work with native validation only.
72
+ - `<chart-wc>` — `burndown-chart` draws its chart with it. It ships in VB's optional charts bundle (`dist/cdn/vanilla-breeze-charts.js` + `.css`), not the main bundle. Without it no chart appears (the data lives in a `<template>`); only the scope-change notes render, so load the charts bundle wherever you use `burndown-chart`.
71
73
 
72
74
  ## Design-token contract
73
75
 
@@ -77,7 +79,7 @@ These components are **token-driven**: they read Vanilla Breeze CSS custom prope
77
79
  <link rel="stylesheet" href="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.css">
78
80
  ```
79
81
 
80
- `vanilla-breeze` is declared as an **optional peer dependency**: required if you want VB to supply tokens/themes and the `<drag-surface>` / `<data-table>` peers (most consumers do).
82
+ `vanilla-breeze` is declared as an **optional peer dependency**: required if you want VB to supply tokens/themes and the peers above (most consumers do).
81
83
 
82
84
  ## Relationship to Vanilla Breeze
83
85
 
@@ -335,9 +335,14 @@ risk-register {
335
335
  }
336
336
  .rr-layout {
337
337
  display: grid;
338
- grid-template-columns: 1fr;
338
+ grid-template-columns: minmax(0, 1fr);
339
339
  gap: var(--size-l, 1.5rem);
340
340
  }
341
+ .rr-layout > data-table {
342
+ display: block;
343
+ min-inline-size: 0;
344
+ overflow-x: auto;
345
+ }
341
346
  @media (width >= 64rem) {
342
347
  .rr-layout {
343
348
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
@@ -356,6 +361,11 @@ traceability-matrix {
356
361
  color: var(--color-text, #1a1a1a);
357
362
  }
358
363
  @scope (traceability-matrix) {
364
+ :scope > data-table {
365
+ display: block;
366
+ max-inline-size: 100%;
367
+ overflow-x: auto;
368
+ }
359
369
  .tm-label {
360
370
  display: block;
361
371
  font-size: var(--font-size-xs, 0.75rem);
@@ -1207,6 +1217,7 @@ gantt-chart:not([data-upgraded]) > table {
1207
1217
  }
1208
1218
  .gc-sr-only {
1209
1219
  position: absolute;
1220
+ table-layout: fixed;
1210
1221
  width: 1px;
1211
1222
  height: 1px;
1212
1223
  padding: 0;
@@ -1263,6 +1274,7 @@ gantt-chart[compact] .gc-group-spacer {
1263
1274
  }
1264
1275
  gantt-chart[data-upgraded] .gc-sr-only {
1265
1276
  position: static;
1277
+ table-layout: auto;
1266
1278
  width: auto;
1267
1279
  height: auto;
1268
1280
  margin: 0;
@@ -2274,7 +2274,10 @@ function viewTransitionSwap(host, swap, prefix = "vb-vt") {
2274
2274
  const name = `${prefix}-${++counter}`;
2275
2275
  host.style.viewTransitionName = name;
2276
2276
  const tx = document.startViewTransition(swap);
2277
- tx.finished.finally(() => {
2277
+ tx.ready.catch(() => {
2278
+ });
2279
+ tx.finished.catch(() => {
2280
+ }).finally(() => {
2278
2281
  if (host.style.viewTransitionName === name) {
2279
2282
  host.style.viewTransitionName = "";
2280
2283
  }
@@ -1 +1 @@
1
- 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:.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:.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, .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:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666);margin-bottom:var(--size-xs, 8px)}.ie-quadrant-desc{font-size:.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:.65rem;margin-bottom:var(--size-2xs, 4px)}impact-effort[compact] .ie-quadrant-desc{font-size:.6rem}impact-effort[compact] drag-surface{min-block-size:4rem}impact-effort[compact] .ie-y-label,impact-effort[compact] .ie-x-label{font-size:.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:.5pt solid #ccc;break-inside:avoid}impact-effort drag-surface{min-block-size:auto}impact-effort [draggable]{cursor:default}}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, .25rem);margin:0}.qg-y-label{grid-area:y-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);text-align:start;padding-inline-end:var(--size-xs, .5rem)}.qg-x-label{grid-area:x-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.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, .25rem);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:end;padding-inline-end:var(--size-xs, .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, .75rem);color:var(--color-text-muted, #666);padding-block-start:var(--size-2xs, .25rem)}.qg-grid{grid-area:grid;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--size-2xs, .25rem);min-block-size:var(--qg-min-size, 24rem);background:var(--color-border, oklch(85% 0 0));padding:1px;border-radius:var(--radius-m, .5rem)}.qg-quadrant{position:relative;background:var(--color-surface, #fff);padding:var(--size-s, .75rem);display:flex;flex-direction:column;gap:var(--size-xs, .5rem);overflow:hidden}.qg-quadrant[data-quadrant-zone="0"]{grid-row:1;grid-column:2;border-radius:0 var(--radius-m, .5rem) 0 0}.qg-quadrant[data-quadrant-zone="1"]{grid-row:1;grid-column:1;border-radius:var(--radius-m, .5rem) 0 0 0}.qg-quadrant[data-quadrant-zone="2"]{grid-row:2;grid-column:1;border-radius:0 0 0 var(--radius-m, .5rem)}.qg-quadrant[data-quadrant-zone="3"]{grid-row:2;grid-column:2;border-radius:0 0 var(--radius-m, .5rem) 0}.qg-quadrant-label{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.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, .25rem)}.qg-items>li{background:var(--color-surface-raised, oklch(96% 0 0));padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.qg-items>li.qg-pin-item{display:contents}.qg-pinned{position:absolute;inline-size:max-content;max-inline-size:calc(100% - var(--size-xs, .5rem));padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-xs, .75rem);inset-inline-start:clamp(var(--qg-pin-half-w, 1.5rem),calc(var(--qg-local-x, .5) * 100%),calc(100% - var(--qg-pin-half-w, 1.5rem)));inset-block-end:clamp(var(--qg-pin-half-h, .75rem),calc(var(--qg-local-y, .5) * 100%),calc(100% - var(--qg-pin-half-h, .75rem)));transform:translate(calc(-50% + var(--qg-fan-x, 0px)),calc(50% + var(--qg-fan-y, 0px)));box-shadow:0 1px 3px #00000026;filter:hue-rotate(var(--qg-pin-hue, 0deg));transition:transform .18s ease,box-shadow .18s 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 #00000040}}@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}}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, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .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}}}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, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.tm-empty{color:var(--color-text-muted, #666);font-style:italic}td[data-linked]{background:#d7f5d78c;text-align:center;font-weight:600;color:var(--color-accent, oklch(45% .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% .18 260));outline-offset:-2px}td[data-state-highlighted],th[data-state-highlighted]{background:#9be39db3}tr[data-orphan] th[scope=row]:after,th[data-orphan]:after{content:" \26a0";color:var(--color-warning, oklch(60% .15 60));font-weight:700}td,th{padding:var(--size-2xs, .25rem) var(--size-s, .75rem);border-block-end:var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));cursor:default}.tm-cell-btn{all:unset;box-sizing:border-box;display:block;inline-size:100%;min-block-size:1.5em;text-align:inherit;cursor:pointer}.tm-cell-btn:focus-visible{outline:2px solid var(--color-accent, oklch(45% .18 260));outline-offset:2px}}[data-state-highlighted]:not(traceability-matrix *){outline:2px solid var(--color-accent, oklch(45% .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}}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, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .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, .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% .15 60));border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.bdc-scope-changes h4{margin:0 0 var(--size-2xs, .25rem);font-size:var(--font-size-xs, .75rem);text-transform:uppercase;letter-spacing:.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, .125rem)}.bdc-scope-changes time{font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text-muted, #666)}}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, .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, .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, .25rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.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, .25rem);position:relative}.rm-lane{display:contents}.rm-lane-label{grid-column:1;font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-text, currentColor);padding:var(--size-xs, .5rem) var(--size-s, .75rem);background:var(--color-surface-raised, oklch(96% 0 0));border-radius:var(--radius-s, .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 / .4)) calc(var(--rm-tick-w, 25%) - 1px),var(--color-border, oklch(85% 0 0 / .4)) var(--rm-tick-w, 25%));border-radius:var(--radius-s, .25rem)}.rm-bar{position:absolute;inset-block:var(--size-2xs, .25rem);inset-inline-start:calc(var(--rm-x) * 100%);inline-size:calc(var(--rm-w) * 100%);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);padding:var(--size-2xs, .25rem) var(--size-s, .75rem);font-size:var(--font-size-sm, .875rem);line-height:1.2;overflow:hidden;box-shadow:0 1px 2px #00000026;cursor:grab;user-select:none;display:flex;align-items:center;gap:var(--size-2xs, .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, .5rem);background:#ffffff40;cursor:ew-resize;border-start-end-radius:var(--radius-s, .25rem);border-end-end-radius:var(--radius-s, .25rem)}.rm-bar:focus-visible{outline:var(--border-width-medium, 2px) solid var(--color-focus, var(--color-interactive, #0066cc));outline-offset:2px}.rm-bar[data-dragging]{cursor:grabbing;z-index:3;box-shadow:0 4px 10px #00000040}.rm-bar-status{flex:none;font-size:var(--font-size-xs, .75rem);font-weight:600;opacity:.9;white-space:nowrap;padding-inline-end:var(--size-xs, .5rem)}.rm-track[data-drop-target]{outline:var(--border-width-medium, 2px) dashed var(--color-interactive, #0066cc);outline-offset:-2px}.rm-sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.rm-bar[data-status=planned]{background:var(--color-info, oklch(60% .12 240))}.rm-bar[data-status=in-progress]{background:var(--color-accent, oklch(50% .16 260))}.rm-bar[data-status=at-risk]{background:var(--color-warning, oklch(65% .16 60));color:var(--color-text, #1a1a1a)}.rm-bar[data-status=shipped]{background:var(--color-success, oklch(55% .14 145))}.rm-bar[data-status=blocked]{background:var(--color-danger, oklch(55% .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% .18 60));pointer-events:none;z-index:2;transform:translate(0)}}product-roadmap:not([editable]) .rm-bar{cursor:default}product-roadmap:not([editable]) .rm-bar-handle{display:none}product-roadmap[editable] .rm-bar{touch-action:none}@media(prefers-reduced-motion:reduce){product-roadmap .rm-bar{transition:none}}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, .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:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a);display:flex;align-items:center;gap:.25em}.kb-count{font-size:.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:.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, .375rem);padding:var(--size-xs, 8px) var(--size-s, 12px);cursor:grab;font-size:var(--font-size-s, .875rem);line-height:1.4}kanban-board .kb-card:active{cursor:grabbing}.kb-empty{color:var(--color-text-muted, #888);font-size:.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:.75rem}kanban-board[compact] drag-surface{padding:var(--size-xs, 8px);min-block-size:4rem}kanban-board[compact] .kb-count{font-size:.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:.5pt solid #ccc;gap:0}.kb-column{border:.5pt solid #ccc;break-inside:avoid}.kb-column-header{position:static}kanban-board drag-surface{min-block-size:auto}kanban-board [draggable]{cursor:default}}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, .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:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a)}.sm-activity-count{font-size:.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:.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:.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}}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, .75rem)}.gc-container{border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-m, .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, .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-status{flex:none;margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--color-text-muted, #666666)}.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:.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 .15s 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:.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:translate(-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}.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:.22s;animation-timing-function:ease-out}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 .12s ease,stroke .12s 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:.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:.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:.65rem;font-weight:var(--font-weight-semibold, 600);fill:var(--color-interactive);text-transform:uppercase;letter-spacing:.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:.6rem;fill:var(--color-text-muted);pointer-events:none}iron-triangle svg .center .hit{fill:transparent;stroke:transparent;transition:fill .12s ease,stroke .12s 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>.iron-triangle-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-s, .75rem);margin-block-start:var(--size-xs, .5rem);font-size:var(--font-size-sm, .875rem)}iron-triangle>.iron-triangle-status .iron-triangle-readout{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}iron-triangle>.iron-triangle-status .iron-triangle-mode{font-size:inherit;font-weight:var(--font-weight-normal, 400);padding-block:0;padding-inline:var(--size-xs, .5rem);border-color:transparent;color:var(--color-text-muted)}iron-triangle>.iron-triangle-status .iron-triangle-mode:hover{color:var(--color-text)}iron-triangle>.iron-triangle-status .iron-triangle-mode[aria-pressed=true]{color:var(--color-interactive);text-decoration:underline;text-decoration-thickness:var(--border-width-medium, 2px);text-underline-offset:.25em}iron-triangle>.iron-triangle-status .iron-triangle-warning{margin:0;padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);border:var(--border-width-thin, 1px) solid var(--iron-triangle-warning-color, var(--color-warning));color:var(--iron-triangle-warning-color, var(--color-warning));font-weight:var(--font-weight-semibold, 600)}iron-triangle>.iron-triangle-status .iron-triangle-warning:before{content:"\26a0\fe0e "}iron-triangle>dialog.iron-triangle-dialog [hidden]{display:none}iron-triangle>dialog.iron-triangle-dialog .iron-triangle-dialog__hint{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm, .875rem)}iron-triangle:state(over-deadline) svg .triangle{stroke:var(--iron-triangle-warning-color, var(--color-warning))}iron-triangle:state(unbudgeted) svg .capacity{fill:var(--iron-triangle-warning-color, var(--color-warning))}iron-triangle[disabled],iron-triangle[locked]{opacity:.85;pointer-events:none}iron-triangle[locked]:not([disabled]) svg .center[data-target=quality]{pointer-events:auto}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, .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 / .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)}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, .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:.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 .2s 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)}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:.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 .12s ease,stroke .12s 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, .625rem);fill:var(--color-text-muted);letter-spacing:.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:.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:.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% .05 27));display:grid;gap:var(--size-2xs, .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, .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 / .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:.85;pointer-events:none}
1
+ 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:.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:.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, .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:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666);margin-bottom:var(--size-xs, 8px)}.ie-quadrant-desc{font-size:.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:.65rem;margin-bottom:var(--size-2xs, 4px)}impact-effort[compact] .ie-quadrant-desc{font-size:.6rem}impact-effort[compact] drag-surface{min-block-size:4rem}impact-effort[compact] .ie-y-label,impact-effort[compact] .ie-x-label{font-size:.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:.5pt solid #ccc;break-inside:avoid}impact-effort drag-surface{min-block-size:auto}impact-effort [draggable]{cursor:default}}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, .25rem);margin:0}.qg-y-label{grid-area:y-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);text-align:start;padding-inline-end:var(--size-xs, .5rem)}.qg-x-label{grid-area:x-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.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, .25rem);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:end;padding-inline-end:var(--size-xs, .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, .75rem);color:var(--color-text-muted, #666);padding-block-start:var(--size-2xs, .25rem)}.qg-grid{grid-area:grid;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--size-2xs, .25rem);min-block-size:var(--qg-min-size, 24rem);background:var(--color-border, oklch(85% 0 0));padding:1px;border-radius:var(--radius-m, .5rem)}.qg-quadrant{position:relative;background:var(--color-surface, #fff);padding:var(--size-s, .75rem);display:flex;flex-direction:column;gap:var(--size-xs, .5rem);overflow:hidden}.qg-quadrant[data-quadrant-zone="0"]{grid-row:1;grid-column:2;border-radius:0 var(--radius-m, .5rem) 0 0}.qg-quadrant[data-quadrant-zone="1"]{grid-row:1;grid-column:1;border-radius:var(--radius-m, .5rem) 0 0 0}.qg-quadrant[data-quadrant-zone="2"]{grid-row:2;grid-column:1;border-radius:0 0 0 var(--radius-m, .5rem)}.qg-quadrant[data-quadrant-zone="3"]{grid-row:2;grid-column:2;border-radius:0 0 var(--radius-m, .5rem) 0}.qg-quadrant-label{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.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, .25rem)}.qg-items>li{background:var(--color-surface-raised, oklch(96% 0 0));padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.qg-items>li.qg-pin-item{display:contents}.qg-pinned{position:absolute;inline-size:max-content;max-inline-size:calc(100% - var(--size-xs, .5rem));padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-xs, .75rem);inset-inline-start:clamp(var(--qg-pin-half-w, 1.5rem),calc(var(--qg-local-x, .5) * 100%),calc(100% - var(--qg-pin-half-w, 1.5rem)));inset-block-end:clamp(var(--qg-pin-half-h, .75rem),calc(var(--qg-local-y, .5) * 100%),calc(100% - var(--qg-pin-half-h, .75rem)));transform:translate(calc(-50% + var(--qg-fan-x, 0px)),calc(50% + var(--qg-fan-y, 0px)));box-shadow:0 1px 3px #00000026;filter:hue-rotate(var(--qg-pin-hue, 0deg));transition:transform .18s ease,box-shadow .18s 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 #00000040}}@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}}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, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.rr-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--size-l, 1.5rem)}.rr-layout>data-table{display:block;min-inline-size:0;overflow-x:auto}@media(width>=64rem){.rr-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}}}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){:scope>data-table{display:block;max-inline-size:100%;overflow-x:auto}.tm-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.tm-empty{color:var(--color-text-muted, #666);font-style:italic}td[data-linked]{background:#d7f5d78c;text-align:center;font-weight:600;color:var(--color-accent, oklch(45% .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% .18 260));outline-offset:-2px}td[data-state-highlighted],th[data-state-highlighted]{background:#9be39db3}tr[data-orphan] th[scope=row]:after,th[data-orphan]:after{content:" \26a0";color:var(--color-warning, oklch(60% .15 60));font-weight:700}td,th{padding:var(--size-2xs, .25rem) var(--size-s, .75rem);border-block-end:var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));cursor:default}.tm-cell-btn{all:unset;box-sizing:border-box;display:block;inline-size:100%;min-block-size:1.5em;text-align:inherit;cursor:pointer}.tm-cell-btn:focus-visible{outline:2px solid var(--color-accent, oklch(45% .18 260));outline-offset:2px}}[data-state-highlighted]:not(traceability-matrix *){outline:2px solid var(--color-accent, oklch(45% .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}}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, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .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, .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% .15 60));border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.bdc-scope-changes h4{margin:0 0 var(--size-2xs, .25rem);font-size:var(--font-size-xs, .75rem);text-transform:uppercase;letter-spacing:.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, .125rem)}.bdc-scope-changes time{font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text-muted, #666)}}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, .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, .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, .25rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.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, .25rem);position:relative}.rm-lane{display:contents}.rm-lane-label{grid-column:1;font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-text, currentColor);padding:var(--size-xs, .5rem) var(--size-s, .75rem);background:var(--color-surface-raised, oklch(96% 0 0));border-radius:var(--radius-s, .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 / .4)) calc(var(--rm-tick-w, 25%) - 1px),var(--color-border, oklch(85% 0 0 / .4)) var(--rm-tick-w, 25%));border-radius:var(--radius-s, .25rem)}.rm-bar{position:absolute;inset-block:var(--size-2xs, .25rem);inset-inline-start:calc(var(--rm-x) * 100%);inline-size:calc(var(--rm-w) * 100%);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);padding:var(--size-2xs, .25rem) var(--size-s, .75rem);font-size:var(--font-size-sm, .875rem);line-height:1.2;overflow:hidden;box-shadow:0 1px 2px #00000026;cursor:grab;user-select:none;display:flex;align-items:center;gap:var(--size-2xs, .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, .5rem);background:#ffffff40;cursor:ew-resize;border-start-end-radius:var(--radius-s, .25rem);border-end-end-radius:var(--radius-s, .25rem)}.rm-bar:focus-visible{outline:var(--border-width-medium, 2px) solid var(--color-focus, var(--color-interactive, #0066cc));outline-offset:2px}.rm-bar[data-dragging]{cursor:grabbing;z-index:3;box-shadow:0 4px 10px #00000040}.rm-bar-status{flex:none;font-size:var(--font-size-xs, .75rem);font-weight:600;opacity:.9;white-space:nowrap;padding-inline-end:var(--size-xs, .5rem)}.rm-track[data-drop-target]{outline:var(--border-width-medium, 2px) dashed var(--color-interactive, #0066cc);outline-offset:-2px}.rm-sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.rm-bar[data-status=planned]{background:var(--color-info, oklch(60% .12 240))}.rm-bar[data-status=in-progress]{background:var(--color-accent, oklch(50% .16 260))}.rm-bar[data-status=at-risk]{background:var(--color-warning, oklch(65% .16 60));color:var(--color-text, #1a1a1a)}.rm-bar[data-status=shipped]{background:var(--color-success, oklch(55% .14 145))}.rm-bar[data-status=blocked]{background:var(--color-danger, oklch(55% .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% .18 60));pointer-events:none;z-index:2;transform:translate(0)}}product-roadmap:not([editable]) .rm-bar{cursor:default}product-roadmap:not([editable]) .rm-bar-handle{display:none}product-roadmap[editable] .rm-bar{touch-action:none}@media(prefers-reduced-motion:reduce){product-roadmap .rm-bar{transition:none}}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, .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:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a);display:flex;align-items:center;gap:.25em}.kb-count{font-size:.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:.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, .375rem);padding:var(--size-xs, 8px) var(--size-s, 12px);cursor:grab;font-size:var(--font-size-s, .875rem);line-height:1.4}kanban-board .kb-card:active{cursor:grabbing}.kb-empty{color:var(--color-text-muted, #888);font-size:.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:.75rem}kanban-board[compact] drag-surface{padding:var(--size-xs, 8px);min-block-size:4rem}kanban-board[compact] .kb-count{font-size:.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:.5pt solid #ccc;gap:0}.kb-column{border:.5pt solid #ccc;break-inside:avoid}.kb-column-header{position:static}kanban-board drag-surface{min-block-size:auto}kanban-board [draggable]{cursor:default}}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, .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:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a)}.sm-activity-count{font-size:.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:.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:.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}}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, .75rem)}.gc-container{border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-m, .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, .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-status{flex:none;margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--color-text-muted, #666666)}.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:.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 .15s 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:.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:translate(-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}.gc-sr-only{position:absolute;table-layout:fixed;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;table-layout:auto;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}}::view-transition-old(*),::view-transition-new(*){animation-duration:.22s;animation-timing-function:ease-out}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 .12s ease,stroke .12s 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:.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:.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:.65rem;font-weight:var(--font-weight-semibold, 600);fill:var(--color-interactive);text-transform:uppercase;letter-spacing:.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:.6rem;fill:var(--color-text-muted);pointer-events:none}iron-triangle svg .center .hit{fill:transparent;stroke:transparent;transition:fill .12s ease,stroke .12s 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>.iron-triangle-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-s, .75rem);margin-block-start:var(--size-xs, .5rem);font-size:var(--font-size-sm, .875rem)}iron-triangle>.iron-triangle-status .iron-triangle-readout{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}iron-triangle>.iron-triangle-status .iron-triangle-mode{font-size:inherit;font-weight:var(--font-weight-normal, 400);padding-block:0;padding-inline:var(--size-xs, .5rem);border-color:transparent;color:var(--color-text-muted)}iron-triangle>.iron-triangle-status .iron-triangle-mode:hover{color:var(--color-text)}iron-triangle>.iron-triangle-status .iron-triangle-mode[aria-pressed=true]{color:var(--color-interactive);text-decoration:underline;text-decoration-thickness:var(--border-width-medium, 2px);text-underline-offset:.25em}iron-triangle>.iron-triangle-status .iron-triangle-warning{margin:0;padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);border:var(--border-width-thin, 1px) solid var(--iron-triangle-warning-color, var(--color-warning));color:var(--iron-triangle-warning-color, var(--color-warning));font-weight:var(--font-weight-semibold, 600)}iron-triangle>.iron-triangle-status .iron-triangle-warning:before{content:"\26a0\fe0e "}iron-triangle>dialog.iron-triangle-dialog [hidden]{display:none}iron-triangle>dialog.iron-triangle-dialog .iron-triangle-dialog__hint{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm, .875rem)}iron-triangle:state(over-deadline) svg .triangle{stroke:var(--iron-triangle-warning-color, var(--color-warning))}iron-triangle:state(unbudgeted) svg .capacity{fill:var(--iron-triangle-warning-color, var(--color-warning))}iron-triangle[disabled],iron-triangle[locked]{opacity:.85;pointer-events:none}iron-triangle[locked]:not([disabled]) svg .center[data-target=quality]{pointer-events:auto}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, .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 / .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)}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, .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:.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 .2s 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)}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:.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 .12s ease,stroke .12s 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, .625rem);fill:var(--color-text-muted);letter-spacing:.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:.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:.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% .05 27));display:grid;gap:var(--size-2xs, .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, .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 / .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:.85;pointer-events:none}
@@ -1133,7 +1133,7 @@ button.story-card--minimal {
1133
1133
  .journey__grid-wrap { overflow: visible; }
1134
1134
  .row-label, .corner { position: relative; }
1135
1135
  }
1136
- `;var Mr=0;function D(i,t,e="vb-vt"){if(!i?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let r=`${e}-${++Mr}`;i.style.viewTransitionName=r;let s=document.startViewTransition(t);return s.finished.finally(()=>{i.style.viewTransitionName===r&&(i.style.viewTransitionName="")}),s}var zr=[{key:"actions",label:"Actions"},{key:"thoughts",label:"Thoughts"},{key:"touchpoints",label:"Touchpoints"},{key:"painPoints",label:"Pain Points"},{key:"opportunities",label:"Opportunities"}],Jt=class extends P{static readyEvent="journey-ready";static get observedAttributes(){return["src","persona","persona-id","story-ids","compact"]}__phases=null;get phases(){return this.__phases}set phases(t){this.__phases!==t&&(this.__phases=t,this._isSetUp&&this._render(),this.dispatchEvent(new CustomEvent("user-journey:phases-changed",{detail:{phases:t,source:"property"},bubbles:!0,composed:!0})))}get data(){return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:I(this,"title")?.textContent?.trim()||void 0,summary:I(this,"summary")?.textContent?.trim()||void 0,phases:this.__phases||void 0}}set data(t){this._setData(t)}_applyData(t){t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),E(this,"title",t.title,{tag:"h2"}),E(this,"summary",t.summary),t.phases!=null&&(this.__phases=t.phases)}_readyDetail(){let t=this.__phases;return{title:this._slotText("title"),persona:this._resolve("persona"),phaseCount:Array.isArray(t)?t.length:0}}_resolve(t){return this.getAttribute(t)||this._slotCache.get(t)||""}#e(){return this._slotText("title")||"User Journey"}_renderLoading(){this.shadowRoot.innerHTML=`<style>${Nt}</style><div class="state-msg">Loading\u2026</div>`}_renderError(t){this.shadowRoot.innerHTML=`<style>${Nt}</style><div class="state-msg state-msg--error">Could not load journey: ${p(t.message)}</div>`}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",r=ot(this.getAttribute("story-ids")),s=this.hasAttribute("compact"),a=Array.isArray(this.__phases)?this.__phases:null,n=!!I(this,"summary")||this._slotCache.has("summary"),o=`<style>${Nt}</style>
1136
+ `;var Mr=0;function D(i,t,e="vb-vt"){if(!i?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let r=`${e}-${++Mr}`;i.style.viewTransitionName=r;let s=document.startViewTransition(t);return s.ready.catch(()=>{}),s.finished.catch(()=>{}).finally(()=>{i.style.viewTransitionName===r&&(i.style.viewTransitionName="")}),s}var zr=[{key:"actions",label:"Actions"},{key:"thoughts",label:"Thoughts"},{key:"touchpoints",label:"Touchpoints"},{key:"painPoints",label:"Pain Points"},{key:"opportunities",label:"Opportunities"}],Jt=class extends P{static readyEvent="journey-ready";static get observedAttributes(){return["src","persona","persona-id","story-ids","compact"]}__phases=null;get phases(){return this.__phases}set phases(t){this.__phases!==t&&(this.__phases=t,this._isSetUp&&this._render(),this.dispatchEvent(new CustomEvent("user-journey:phases-changed",{detail:{phases:t,source:"property"},bubbles:!0,composed:!0})))}get data(){return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:I(this,"title")?.textContent?.trim()||void 0,summary:I(this,"summary")?.textContent?.trim()||void 0,phases:this.__phases||void 0}}set data(t){this._setData(t)}_applyData(t){t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),E(this,"title",t.title,{tag:"h2"}),E(this,"summary",t.summary),t.phases!=null&&(this.__phases=t.phases)}_readyDetail(){let t=this.__phases;return{title:this._slotText("title"),persona:this._resolve("persona"),phaseCount:Array.isArray(t)?t.length:0}}_resolve(t){return this.getAttribute(t)||this._slotCache.get(t)||""}#e(){return this._slotText("title")||"User Journey"}_renderLoading(){this.shadowRoot.innerHTML=`<style>${Nt}</style><div class="state-msg">Loading\u2026</div>`}_renderError(t){this.shadowRoot.innerHTML=`<style>${Nt}</style><div class="state-msg state-msg--error">Could not load journey: ${p(t.message)}</div>`}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",r=ot(this.getAttribute("story-ids")),s=this.hasAttribute("compact"),a=Array.isArray(this.__phases)?this.__phases:null,n=!!I(this,"summary")||this._slotCache.has("summary"),o=`<style>${Nt}</style>
1137
1137
  <article class="journey${s?" journey--compact":""}">
1138
1138
 
1139
1139
  <header class="journey__header">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@profpowell/vb-project-planning",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "Project- and UX-planning Web Components for Vanilla Breeze: personas, stories, journeys, empathy maps, impact/effort and quadrant grids, risk and traceability matrices, burndown, roadmap, kanban, story map, gantt, review surface, work items, ADRs, iron triangle, capacity plans, quality targets, and requirement cards.",
5
5
  "license": "MIT",
6
6
  "author": "Thomas A. Powell",
@@ -35,7 +35,13 @@ export function viewTransitionSwap(host, swap, prefix = 'vb-vt') {
35
35
  const name = `${prefix}-${++counter}`;
36
36
  host.style.viewTransitionName = name;
37
37
  const tx = document.startViewTransition(swap);
38
- tx.finished.finally(() => {
38
+ // The browser aborts a transition when, e.g., the viewport resizes or
39
+ // another transition starts. That rejects `ready` (and can reject
40
+ // `finished`); unhandled, it surfaces as an uncaught exception even though
41
+ // the DOM swap itself already ran. The swap's own errors still reach
42
+ // callers through `updateCallbackDone`.
43
+ tx.ready.catch(() => {});
44
+ tx.finished.catch(() => {}).finally(() => {
39
45
  if (host.style.viewTransitionName === name) {
40
46
  host.style.viewTransitionName = '';
41
47
  }
@@ -303,8 +303,12 @@ gantt-chart:not([data-upgraded]) > table {
303
303
  }
304
304
 
305
305
  /* ── Visually hidden (original table + live region) ── */
306
+ /* Visually hidden, still read by screen readers. table-layout: fixed is
307
+ required: a table ignores width: 1px and grows to its content, which made
308
+ the page scroll sideways on phones. */
306
309
  .gc-sr-only {
307
310
  position: absolute;
311
+ table-layout: fixed;
308
312
  width: 1px;
309
313
  height: 1px;
310
314
  padding: 0;
@@ -377,6 +381,7 @@ gantt-chart[compact] .gc-group-spacer {
377
381
 
378
382
  gantt-chart[data-upgraded] .gc-sr-only {
379
383
  position: static;
384
+ table-layout: auto;
380
385
  width: auto;
381
386
  height: auto;
382
387
  margin: 0;
@@ -23,10 +23,18 @@ risk-register {
23
23
 
24
24
  .rr-layout {
25
25
  display: grid;
26
- grid-template-columns: 1fr;
26
+ grid-template-columns: minmax(0, 1fr);
27
27
  gap: var(--size-l, 1.5rem);
28
28
  }
29
29
 
30
+ /* The table scrolls inside its own box on narrow screens instead of
31
+ pushing the whole page sideways. */
32
+ .rr-layout > data-table {
33
+ display: block;
34
+ min-inline-size: 0;
35
+ overflow-x: auto;
36
+ }
37
+
30
38
  /* Table on top, quadrant below by default; side-by-side on wide screens */
31
39
  @media (width >= 64rem) {
32
40
  .rr-layout {
@@ -11,6 +11,14 @@ traceability-matrix {
11
11
  }
12
12
 
13
13
  @scope (traceability-matrix) {
14
+ /* Wide matrices scroll inside their own box instead of pushing the page
15
+ sideways on narrow screens. */
16
+ :scope > data-table {
17
+ display: block;
18
+ max-inline-size: 100%;
19
+ overflow-x: auto;
20
+ }
21
+
14
22
  .tm-label {
15
23
  display: block;
16
24
  font-size: var(--font-size-xs, 0.75rem);