create-pmos 0.52.0 → 0.53.1

package/workspace/public/pm/components.css

@@ -0,0 +1,3135 @@
+/* pm/components.css — the R27 primitives and the Breakdown layouts (pm-os-absorb Run 1).
+ *
+ * Linked at run time by primitives.js `ensureComponentsCss()`, the first time a Breakdown is drawn; index.html does not
+ * link it, so no pinned screen changes. Two sections, in this order:
+ *   primitives  `.pmc-*` — written only by primitives.js and icons.js (R28-9)
+ *   layouts     `.bd-*`  — the Breakdown's own arrangement of those primitives
+ * Every selector starts with `.pmc-` or `.bd-`. Colours are tokens.css variables only; there is no hex and no oklch here.
+ * Radius is 0 (a dot is the one round shape). Hover rules sit inside (hover: hover). Under a coarse pointer every
+ * control is at least 44px and every row and card at least 48px.
+ */
+
+/* == primitives == */
+
+/* the overlay layer: zero-size and fixed, so it never takes clicks; the sheet, menus and toasts render in the top layer */
+.pmc-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 60;
+}
+.pmc-layer__theme {
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--foreground);
+}
+.pmc-sprite {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.pmc-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  stroke: currentColor;
+  fill: none;
+}
+
+/* button */
+.pmc-btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: none;
+  height: 32px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+.pmc-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.pmc-btn--primary {
+  background: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+.pmc-btn--outline {
+  border-color: var(--border);
+}
+.pmc-btn--ghost {
+  border-color: transparent;
+}
+.pmc-btn--danger {
+  border-color: transparent;
+  color: var(--destructive);
+}
+.pmc-btn--sm {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 10px;
+}
+.pmc-btn--block {
+  display: flex;
+  width: 100%;
+}
+.pmc-btn--icon {
+  width: 32px;
+  padding: 0;
+  letter-spacing: 0;
+  color: var(--muted-foreground);
+}
+.pmc-btn--icon.pmc-btn--sm {
+  width: 28px;
+}
+.pmc-btn__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pmc-btn--block .pmc-btn__label {
+  flex: 0 1 auto;
+}
+.pmc-btn:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+.pmc-btn[aria-haspopup="menu"][aria-expanded="true"] {
+  color: var(--foreground);
+  background: var(--accent);
+}
+
+/* field */
+.pmc-field[hidden],
+.pmc-check[hidden] {
+  display: none;
+}
+.pmc-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.pmc-field__label {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.pmc-field__label--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.pmc-field__input {
+  appearance: none;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  min-height: 36px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--input);
+  border-radius: 0;
+  background: transparent;
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+}
+.pmc-field__input::placeholder {
+  color: var(--muted-foreground);
+}
+.pmc-field__input--title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.pmc-field__input--area {
+  height: auto;
+  min-height: 72px;
+  padding: 8px 0;
+  resize: vertical;
+}
+.pmc-field__input--select {
+  padding-right: 22px;
+  cursor: pointer;
+  background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+  background-position: calc(100% - 10px) 52%, calc(100% - 6px) 52%;
+  background-size: 4px 4px;
+  background-repeat: no-repeat;
+}
+.pmc-field__input--select option {
+  background: var(--card);
+  color: var(--foreground);
+}
+.pmc-field__input[type="date"]::-webkit-calendar-picker-indicator {
+  opacity: 0.6;
+  cursor: pointer;
+}
+.pmc-field__input.pmc-field__input:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+  border-bottom-color: var(--ring);
+}
+.pmc-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.pmc-check__box {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid var(--muted-foreground);
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.pmc-check__box:checked {
+  background: var(--foreground);
+  border-color: var(--foreground);
+}
+.pmc-check__box:checked::after {
+  content: "";
+  width: 8px;
+  height: 4px;
+  border-left: 2px solid var(--background);
+  border-bottom: 2px solid var(--background);
+  transform: translateY(-1px) rotate(-45deg);
+}
+.pmc-check__box:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+
+/* badge, signal, dots */
+.pmc-badge {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+  border: 1px solid transparent;
+}
+.pmc-badge--outline {
+  border-color: var(--border);
+  color: var(--foreground);
+}
+.pmc-badge--warning {
+  color: var(--warning);
+}
+.pmc-badge--destructive {
+  color: var(--destructive);
+}
+.pmc-signal {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+  font-weight: 500;
+}
+.pmc-signal--warning {
+  color: var(--warning);
+}
+.pmc-signal--destructive {
+  color: var(--destructive);
+}
+.pmc-signal__dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: 50%;
+  background: currentColor;
+}
+.pmc-needs-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--brand-mark);
+}
+/* The Today count: the number beside the dot. With the dot, the only place the brand colour appears (R28-8). */
+.pmc-needs-count {
+  color: var(--brand-mark);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.pmc-sep {
+  color: var(--muted-foreground);
+  flex: none;
+}
+
+/* drag handle: pointer only, never focusable */
+.pmc-drag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  min-height: 24px;
+  align-self: stretch;
+  color: var(--muted-foreground);
+  cursor: grab;
+  /* a vertical swipe that starts on the grip still scrolls; Sortable takes the touch only after the 150 ms hold */
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+/* row: lead · title over one meta line · trail */
+.pmc-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+  color: var(--foreground);
+  text-align: left;
+}
+.pmc-row__lead {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  align-self: stretch;
+  color: var(--muted-foreground);
+}
+.pmc-row__open,
+.pmc-row__main {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 2px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.pmc-row__open {
+  cursor: pointer;
+}
+.pmc-row__title,
+.pmc-card__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.pmc-title__text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.pmc-row__meta,
+.pmc-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 6px;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.pmc-row__trail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  margin-right: -8px;
+  color: var(--muted-foreground);
+}
+.pmc-row--done .pmc-row__title {
+  color: var(--muted-foreground);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+.pmc-row--proposed .pmc-row__title {
+  color: var(--muted-foreground);
+}
+.pmc-row--owed {
+  background: transparent;
+}
+.pmc-row--owed .pmc-row__title {
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.pmc-row--owed .pmc-row__lead::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  margin: 0 2px;
+  border: 1px dashed var(--muted-foreground);
+}
+.pmc-row__open:focus-visible,
+.pmc-card__open:focus-visible {
+  outline: none;
+}
+.pmc-row:focus-visible,
+.pmc-row:has(.pmc-row__open:focus-visible) {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: -2px;
+}
+
+/* card: raised, one open button that covers the card */
+.pmc-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  min-height: 36px;
+  padding: 10px 12px;
+  border-radius: 0;
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 9%, transparent),
+    0 1px 3px 0 color-mix(in oklab, var(--term-bg) 10%, transparent),
+    0 1px 2px -1px color-mix(in oklab, var(--term-bg) 10%, transparent);
+}
+.pmc-card__top {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+.pmc-card__lead {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  flex: none;
+  min-height: 20px;
+  margin-left: -6px;
+}
+.pmc-card__open {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.pmc-card__open::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.pmc-card__trail {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  margin: -6px -8px -6px 0;
+}
+.pmc-card--muted .pmc-card__title {
+  color: var(--muted-foreground);
+}
+.pmc-card:focus-visible,
+.pmc-card:has(.pmc-card__open:focus-visible) {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+
+/* tabs: segmented (a muted track, the chosen tab lifted) and line */
+.pmc-tabs {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  max-width: 100%;
+  height: 32px;
+  padding: 2px;
+  background: var(--muted);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.pmc-tabs--full {
+  display: flex;
+  width: 100%;
+}
+.pmc-tabs--full .pmc-tabs__tab {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0 8px;
+}
+.pmc-tabs__tab {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 1 0 auto;
+  min-height: 26px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: color-mix(in oklab, var(--foreground) 68%, transparent);
+  font-family: var(--sans);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.pmc-tabs__tab[aria-selected="true"],
+.pmc-tabs__tab[aria-checked="true"] {
+  background: var(--background);
+  border-color: var(--input);
+  color: var(--foreground);
+}
+.pmc-tabs__count {
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+  letter-spacing: 0;
+}
+.pmc-tabs__tab[aria-selected="true"] .pmc-tabs__count,
+.pmc-tabs__tab[aria-checked="true"] .pmc-tabs__count {
+  color: var(--muted-foreground);
+}
+.pmc-tabs__tab:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: -2px;
+}
+.pmc-tabs--line {
+  height: 36px;
+  gap: 20px;
+  padding: 0;
+  background: transparent;
+  border-bottom: 1px solid var(--border);
+}
+.pmc-tabs--line .pmc-tabs__tab {
+  flex: 0 0 auto;
+  padding: 0;
+  border: 0;
+}
+.pmc-tabs--line .pmc-tabs__tab[aria-selected="true"] {
+  background: transparent;
+  box-shadow: inset 0 -2px 0 var(--foreground);
+}
+
+/* menu: one floating surface, positioned by primitives.js */
+.pmc-menu {
+  position: fixed;
+  inset: auto;
+  left: var(--pmc-x, 16px);
+  top: var(--pmc-y, 16px);
+  margin: 0;
+  min-width: 200px;
+  max-width: calc(100vw - 32px);
+  max-height: min(70dvh, 480px);
+  overflow: auto;
+  padding: 4px;
+  border: 0;
+  border-radius: 0;
+  background: var(--card);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent),
+    0 6px 16px -4px color-mix(in oklab, var(--term-bg) 28%, transparent);
+}
+.pmc-menu__item {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.pmc-menu__item--danger {
+  color: var(--destructive);
+}
+.pmc-menu__item:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: -2px;
+  background: var(--muted);
+}
+.pmc-menu__sep {
+  height: 1px;
+  margin: 4px -4px;
+  background: var(--border);
+}
+
+/* sheet: a modal <dialog>, 420px at the side or a bottom sheet that follows the on-screen keyboard */
+.pmc-sheet {
+  position: fixed;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--card);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent),
+    0 12px 32px -8px color-mix(in oklab, var(--term-bg) 40%, transparent);
+}
+.pmc-sheet[open] {
+  display: flex;
+  flex-direction: column;
+}
+.pmc-sheet::backdrop {
+  background: var(--background);
+  opacity: 0.6;
+}
+.pmc-sheet--side {
+  inset: 0 0 0 auto;
+  width: min(420px, 100vw);
+  height: 100dvh;
+}
+.pmc-sheet--bottom {
+  inset: auto 0 0 0;
+  bottom: var(--pmc-kb, 0px);
+  width: 100vw;
+  height: auto;
+  max-height: calc(var(--pmc-vvh, 100dvh) - 24px);
+}
+.pmc-sheet__handle {
+  flex: none;
+  width: 36px;
+  height: 4px;
+  margin: 8px auto 0;
+  background: var(--border);
+}
+.pmc-sheet__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: none;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.pmc-sheet__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.pmc-sheet__title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
+}
+.pmc-sheet__sub {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.pmc-sheet__head .pmc-btn--icon {
+  margin: -4px -8px 0 0;
+}
+.pmc-sheet__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 16px;
+}
+.pmc-sheet__body > * {
+  flex: none;
+}
+.pmc-sheet__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex: none;
+  padding: 10px 16px;
+  padding-bottom: max(10px, env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border);
+  background: var(--card);
+}
+
+/* meter: a 2px bar and its label */
+.pmc-meter {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.pmc-meter__track {
+  position: relative;
+  width: 64px;
+  height: 2px;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--foreground) 12%, transparent);
+}
+.pmc-meter__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--pmc-value, 0%);
+  background: color-mix(in oklab, var(--foreground) 72%, transparent);
+}
+
+/* toast: bottom right on a desktop, bottom centre on a phone; stacked by --pmc-toast-i */
+.pmc-toast {
+  position: fixed;
+  inset: auto;
+  right: 24px;
+  bottom: calc(24px + var(--pmc-toast-i, 0) * 52px);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
+  min-height: 44px;
+  padding: 4px 4px 4px 16px;
+  border: 0;
+  border-radius: 0;
+  background: var(--card);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent),
+    0 6px 16px -4px color-mix(in oklab, var(--term-bg) 28%, transparent);
+}
+.pmc-toast--error {
+  color: var(--destructive);
+}
+.pmc-toast__text {
+  min-width: 0;
+}
+@media (max-width: 760px) {
+  /* above the 64px bottom nav, so neither the nav nor the status line is covered for the 8 seconds of an Undo */
+  .pmc-toast {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    bottom: calc(72px + env(safe-area-inset-bottom) + var(--pmc-toast-i, 0) * 56px);
+  }
+  /* inside a bottom sheet: above its sticky action row (and above the keyboard) */
+  .pmc-sheet--bottom > .pmc-toast {
+    bottom: calc(var(--pmc-kb, 0px) + 76px + env(safe-area-inset-bottom) + var(--pmc-toast-i, 0) * 56px);
+  }
+}
+
+.pmc-empty {
+  padding: 16px;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* hover: pointer devices only */
+@media (hover: hover) {
+  .pmc-btn:hover:not(:disabled) {
+    background: var(--accent);
+    color: var(--foreground);
+  }
+  .pmc-btn--primary:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--foreground) 86%, var(--background));
+    color: var(--background);
+  }
+  .pmc-btn--danger:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--destructive) 12%, transparent);
+    color: var(--destructive);
+  }
+  .pmc-tabs__tab:hover {
+    color: var(--foreground);
+  }
+  .pmc-menu__item:hover {
+    background: var(--muted);
+  }
+  .pmc-row:has(.pmc-row__open:hover) {
+    background: color-mix(in oklab, var(--muted) 45%, var(--background));
+  }
+  .pmc-card:has(.pmc-card__open:hover) {
+    background: color-mix(in oklab, var(--muted) 35%, var(--card));
+  }
+}
+
+/* coarse pointers: 44px controls, 48px rows and cards */
+@media (pointer: coarse) {
+  .pmc-btn,
+  .pmc-tabs__tab,
+  .pmc-menu__item,
+  .pmc-drag,
+  .pmc-field__input {
+    min-height: 44px;
+  }
+  .pmc-btn--sm {
+    height: 44px;
+  }
+  .pmc-btn--icon,
+  .pmc-btn--icon.pmc-btn--sm,
+  .pmc-drag {
+    min-width: 44px;
+  }
+  /* a short tab word ("All" is 24px wide) is still a 44px target both ways: the palette's scope tabs are short */
+  .pmc-tabs__tab {
+    min-width: 44px;
+  }
+  .pmc-btn {
+    height: 44px;
+  }
+  .pmc-tabs {
+    height: 48px;
+  }
+  .pmc-row,
+  .pmc-card {
+    min-height: 48px;
+  }
+  .pmc-row__open,
+  .pmc-card__open {
+    min-height: 44px;
+    justify-content: center;
+  }
+  .pmc-field__input {
+    font-size: 16px;
+  }
+  .pmc-check {
+    min-height: 44px;
+  }
+  .pmc-check__box {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* A paragraph of a dialog sheet (dialogs.js): the question's own words, line breaks kept. */
+.pmc-dialog__text {
+  margin: 0 0 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+/* -- end of the primitives 3D owns: 3D writes above this line, never below it -- */
+
+
+/* -- primitives · the Timeline bar .pmc-tlbar (Run 4, slice 4B): its rules go below this line -- */
+/* timeline bar: grey segments on a track; colour only for health (R8); a ◆ per milestone; a 1px line for today.
+ * Geometry comes from primitives.js as --pmc-tl-left and --pmc-tl-width (percent of the axis). */
+.pmc-tlbar {
+  position: relative;
+  height: 36px;
+  min-width: 0;
+}
+.pmc-tlbar__seg {
+  appearance: none;
+  position: absolute;
+  top: 50%;
+  left: var(--pmc-tl-left, 0);
+  width: var(--pmc-tl-width, 0);
+  min-width: 4px;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  transform: translateY(-50%);
+}
+.pmc-tlbar__fill {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: color-mix(in oklab, var(--foreground) 24%, transparent);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.pmc-tlbar__seg--done .pmc-tlbar__fill {
+  background: color-mix(in oklab, var(--foreground) 56%, transparent);
+}
+/* a split bar: each stage after the first starts with a 2px gap in the page colour, so touching or overlapping stages
+ * read as separate parts */
+.pmc-tlbar__seg ~ .pmc-tlbar__seg .pmc-tlbar__fill {
+  border-left: 2px solid var(--background);
+}
+/* a proposal nobody kept: lighter, with a dashed edge */
+.pmc-tlbar__seg--muted .pmc-tlbar__fill {
+  background: color-mix(in oklab, var(--foreground) 10%, transparent);
+  outline: 1px dashed color-mix(in oklab, var(--foreground) 48%, transparent);
+  outline-offset: -1px;
+}
+.pmc-tlbar__seg--risk .pmc-tlbar__fill {
+  box-shadow: inset 0 0 0 1px var(--warning);
+}
+.pmc-tlbar__seg--off .pmc-tlbar__fill {
+  box-shadow: inset 0 0 0 1px var(--destructive);
+}
+.pmc-tlbar--drag .pmc-tlbar__seg {
+  height: 24px;
+  cursor: grab;
+  touch-action: pan-y;
+}
+.pmc-tlbar__seg--moving {
+  cursor: grabbing;
+}
+.pmc-tlbar__seg--moving .pmc-tlbar__fill {
+  background: color-mix(in oklab, var(--foreground) 48%, transparent);
+}
+.pmc-tlbar__seg:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+/* the end of a movable bar: drag it to change the due date. Always drawn, never shown only on hover. At most a third
+ * of the bar, so a short bar still moves when it is dragged from its middle. */
+.pmc-tlbar__end {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 12px;
+  max-width: 33%;
+  border-right: 2px solid color-mix(in oklab, var(--foreground) 64%, transparent);
+  cursor: ew-resize;
+}
+.pmc-tlbar__milestone {
+  position: absolute;
+  top: 50%;
+  left: var(--pmc-tl-left, 0);
+  width: 10px;
+  height: 10px;
+  margin: -5px 0 0 -5px;
+  background: var(--foreground);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.pmc-tlbar__milestone--risk {
+  background: var(--warning);
+}
+.pmc-tlbar__milestone--off {
+  background: var(--destructive);
+}
+.pmc-tlbar__today {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--pmc-tl-left, 0);
+  width: 1px;
+  background: var(--foreground);
+  pointer-events: none;
+}
+@media (hover: hover) {
+  .pmc-tlbar--drag .pmc-tlbar__seg:hover .pmc-tlbar__fill {
+    background: color-mix(in oklab, var(--foreground) 36%, transparent);
+  }
+}
+@media (pointer: coarse) {
+  .pmc-tlbar {
+    height: 48px;
+  }
+  .pmc-tlbar__seg {
+    min-height: 44px;
+  }
+  /* a one-day bar is a few pixels wide: its touch area is at least 44px wide, centred on it */
+  .pmc-tlbar--drag .pmc-tlbar__seg::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: max(100%, 44px);
+    transform: translateX(-50%);
+  }
+  .pmc-tlbar__end {
+    width: 24px;
+  }
+}
+
+/* signal({ wrap: true }): the Timeline's health reason wraps inside its name cell, never cut; the dot stays on line 1 */
+.pmc-signal--wrap {
+  align-items: flex-start;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.pmc-signal--wrap .pmc-signal__dot {
+  margin-top: calc(0.5lh - 3px);
+}
+/* -- end of the Timeline bar slot (4B writes above this line) -- */
+
+/* == layouts == */
+
+/* the detail's entry row: a block outline button(), title and count on the left, the chevron on the right */
+.bd-entry {
+  justify-content: space-between;
+  gap: 10px;
+  height: auto;
+  min-height: 44px;
+  padding: 8px 12px;
+  text-align: left;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--foreground);
+}
+.bd-entry__title {
+  margin-right: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.bd-entry__meta {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.bd-entry-wrap--legacy {
+  padding: 12px 14px 0;
+}
+
+/* the pane in its tab */
+.bd-pane {
+  container-type: inline-size;
+  container-name: bd-pane;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+}
+.bd-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.bd-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-bottom: 48px;
+}
+.bd-note {
+  padding: 16px;
+  color: var(--muted-foreground);
+}
+.bd-note--error {
+  color: var(--destructive);
+}
+.bd-note--flags {
+  color: var(--foreground);
+  border-left: 2px solid var(--warning);
+}
+.bd-flags {
+  margin: 4px 0 0;
+  padding-left: 16px;
+  color: var(--muted-foreground);
+}
+
+/* keep card (tree and Today) */
+.bd-keep {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 12px 16px;
+  padding: 10px 12px;
+  background: var(--muted);
+}
+.bd-keep__text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.bd-keep__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+.bd-keep--today {
+  margin: 0;
+  background: var(--card);
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+/* tree */
+.bd-stage {
+  display: block;
+}
+.bd-stage__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 10px 8px 6px 16px;
+  border-bottom: 1px solid var(--border);
+  -webkit-user-select: none;
+  user-select: none;
+}
+.bd-stage__name {
+  font-weight: 600;
+}
+.bd-stage__count {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.bd-stage__current {
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.bd-stage__toggle {
+  margin-left: auto;
+}
+.bd-stage__head > .bd-trow {
+  display: none;
+}
+.bd-stage__head:has(> .bd-trow) {
+  background: color-mix(in oklab, var(--foreground) 5%, transparent);
+  outline: 1px dashed var(--ring);
+  outline-offset: -1px;
+}
+.bd-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 8px;
+}
+.bd-trow {
+  padding-left: 8px;
+}
+.bd-fold {
+  justify-content: flex-start;
+  gap: 6px;
+  height: auto;
+  min-height: 36px;
+  padding: 0 16px 0 52px;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+}
+.bd-add {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 16px 0 44px;
+  border-bottom: 1px solid var(--border);
+}
+.bd-add__btn {
+  color: var(--muted-foreground);
+  letter-spacing: 0.02em;
+  text-transform: none;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 0 8px;
+}
+.bd-add__field {
+  flex: 1 1 auto;
+}
+.bd-add__input {
+  border-bottom: 0;
+}
+
+/* board */
+.bd-board {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 16px;
+  align-items: stretch;
+}
+.bd-switch {
+  display: none;
+}
+.bd-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.bd-col__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.bd-col__n {
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+.bd-col__list {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 120px;
+  padding-bottom: 8px;
+}
+.bd-col__older {
+  margin-top: -4px;
+  padding: 0 2px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.bd-card {
+  cursor: pointer;
+}
+@container bd-pane (max-width: 599px) {
+  .bd-switch {
+    display: flex;
+    width: auto;
+    margin: 16px 16px 0;
+  }
+  .bd-board {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .bd-col__head {
+    display: none;
+  }
+  .bd-col:not(.bd-col--shown) {
+    display: none;
+  }
+}
+
+/* drag states (Sortable's classes) */
+.bd-ghost {
+  opacity: 0.4;
+}
+.bd-chosen {
+  background: var(--accent);
+}
+/* Sortable writes an inline opacity: 0.8 on the fallback clone (_appendGhost); only !important overrides an inline style */
+.bd-fallback,
+.bd-dragging {
+  opacity: 1 !important;
+  background: var(--card);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent),
+    0 8px 20px -6px color-mix(in oklab, var(--term-bg) 35%, transparent);
+}
+
+/* item sheet */
+.bd-grid2 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+}
+.bd-checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 24px;
+}
+.bd-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.bd-group__label {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.bd-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.bd-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 28px;
+  padding-left: 8px;
+  background: var(--muted);
+  font-size: 12px;
+}
+.bd-after-add {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+.bd-after-add__field {
+  flex: 1 1 auto;
+}
+.bd-muted {
+  color: var(--muted-foreground);
+}
+.bd-proposed {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.bd-handoff {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: var(--card);
+  box-shadow: inset 0 0 0 1px var(--border);
+  scroll-margin: 16px 0 88px;
+}
+.bd-handoff__line {
+  overflow-wrap: anywhere;
+}
+.bd-handoff__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.bd-handoff__details {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.bd-handoff__details summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  cursor: pointer;
+}
+.bd-handoff__details summary:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+.bd-handoff__prompt {
+  margin: 8px 0 0;
+  padding: 8px;
+  max-height: 200px;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--foreground);
+  background: var(--background);
+}
+.bd-handoff__facts {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 2px 12px;
+  margin: 8px 0 0;
+}
+.bd-handoff__facts dd {
+  margin: 0;
+  font-family: var(--mono);
+  overflow-wrap: anywhere;
+}
+.bd-handoff__error {
+  color: var(--destructive);
+}
+.bd-hist__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.bd-hist {
+  display: flex;
+  flex-direction: column;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.bd-hist__row {
+  display: grid;
+  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto;
+  gap: 12px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  line-height: 16px;
+}
+.bd-hist__by,
+.bd-hist__when {
+  color: var(--muted-foreground);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+  .bd-fold:hover {
+    color: var(--foreground);
+  }
+}
+@media (pointer: coarse) {
+  .bd-fold,
+  .bd-add {
+    min-height: 48px;
+  }
+  .bd-entry {
+    min-height: 48px;
+  }
+  .bd-stage__head {
+    min-height: 48px;
+  }
+  .bd-handoff__details summary {
+    min-height: 44px;
+  }
+}
+@media (max-width: 760px) {
+  .bd-grid2 {
+    gap: 12px;
+  }
+}
+
+/* ── one layout section per surface (pm-os-absorb seams) ──────────────────────────────────────────────────────────────
+ * Runs 2 to 5 build at the same time. Each surface writes its rules directly below its own marker, with its own prefix
+ * (conformance-gate.js LAYOUT_PREFIXES), and never edits another section or appends at the end of the file. A blank
+ * line stays above the next marker, so two sections never touch and never merge into one conflict. */
+
+/* -- layouts · .in- Initiatives: Roadmap, List, the initiative sheet (Run 2, slice 2D) -- */
+
+.in-dest {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+.in-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.in-head__title {
+  flex: 1 1 auto;
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.in-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.in-note {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.in-note--inline {
+  padding: 8px 16px;
+}
+.in-note--error,
+.in-error {
+  margin: 0;
+  padding: 8px 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--destructive);
+}
+
+/* the Roadmap */
+.in-roadmap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px 24px;
+}
+.in-nowline {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+.in-cols {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+.in-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.in-col__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.in-col__count {
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+.in-col__empty {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.in-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 24px;
+}
+.in-list--dormant {
+  opacity: 0.8;
+}
+.in-card {
+  cursor: pointer;
+}
+.in-grip {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-self: stretch;
+}
+
+/* the List */
+.in-list-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px 16px 24px;
+}
+.in-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.in-bulk {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.in-bulk__count {
+  margin-right: auto;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.in-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.in-group__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+.in-group__name {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.in-group__period {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.in-anchor {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.in-anchor__head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  padding: 4px 0;
+}
+.in-anchor__id {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+}
+.in-anchor__title {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.in-anchor__value {
+  margin-left: auto;
+  font-size: 12px;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+.in-rows {
+  display: flex;
+  flex-direction: column;
+}
+.in-row {
+  min-width: 0;
+}
+.in-attn {
+  display: inline-flex;
+  flex: none;
+}
+
+/* the initiative sheet: about 70% of the width at a desk, the whole screen on a phone */
+.in-sheet.in-sheet {
+  width: min(70vw, 100vw);
+}
+.in-sheet__crumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.in-sheet__spacer {
+  flex: 1 1 auto;
+}
+.in-sheet__stepper-host,
+.in-sheet__waiting-host,
+.in-sheet__tabs {
+  min-width: 0;
+}
+.in-sheet__panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 160px;
+  min-width: 0;
+}
+.in-sheet__rows {
+  display: flex;
+  flex-direction: column;
+}
+.in-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.in-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.in-stepper__step[data-state="current"] {
+  color: var(--foreground);
+  font-weight: 600;
+}
+.in-stepper__step[data-state="done"] {
+  color: var(--foreground);
+}
+.in-waiting {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+}
+.in-waiting[data-on="pm"] {
+  border-color: var(--ring);
+}
+.in-waiting__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Today cards and the Cycle review */
+.in-today-card {
+  min-width: 0;
+}
+.in-cycle {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.in-cycle__title {
+  margin: 8px 0 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.in-starters {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 16px;
+}
+.in-starters__list {
+  margin: 0;
+  padding-left: 16px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* The ⋯ button is the phone's path to the card menu; on a desk the menu opens from the context menu (right click, menu key). */
+.in-more {
+  display: none;
+}
+@media (any-pointer: coarse) {
+  .in-more {
+    display: inline-flex;
+  }
+  .in-hint {
+    display: none;
+  }
+}
+@media (hover: hover) {
+  .in-card:hover {
+    background: color-mix(in oklab, var(--foreground) 4%, transparent);
+  }
+}
+@media (pointer: coarse) {
+  .in-card {
+    min-height: 48px;
+  }
+  .in-anchor__head {
+    min-height: 44px;
+  }
+}
+@media (max-width: 760px) {
+  .in-cols {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .in-head,
+  .in-roadmap,
+  .in-list-view {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .in-sheet.in-sheet {
+    inset: 0;
+    width: 100vw;
+    height: 100dvh;
+    max-height: none;
+  }
+}
+
+
+/* -- layouts · .fr- the frame: top bar, dock, Settings (Run 3, slice 3A) -- */
+/* The frame's root: the top bar over the body. app.js drops the cockpit's inline geometry when the frame is on. */
+.fr-root {
+  display: grid;
+  grid-template-rows: 48px minmax(0, 1fr);
+  height: 100vh;
+  overflow: hidden;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.45;
+}
+.fr-end {
+  display: none;
+}
+.fr-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+}
+.fr-bar__repo {
+  display: flex;
+  flex: none;
+  min-width: 0;
+  max-width: 240px;
+}
+.fr-repo {
+  max-width: 100%;
+  font-weight: 600;
+}
+.fr-nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+.fr-link {
+  color: var(--muted-foreground);
+}
+.fr-link[aria-current="page"] {
+  color: var(--foreground);
+  box-shadow: inset 0 -2px 0 var(--foreground);
+}
+.fr-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.fr-mark[hidden] {
+  display: none;
+}
+.fr-search {
+  margin-left: auto;
+  min-width: 220px;
+  justify-content: flex-start;
+  color: var(--muted-foreground);
+}
+.fr-kbd {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 11px;
+}
+/* The body: the destination, then (when open) the detail, the dock's rail and the dock. One row, columns in order. */
+.fr-body {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-columns: auto;
+  grid-template-rows: minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.fr-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.fr-dest {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+.fr-dest[hidden] {
+  display: none;
+}
+.fr-detail {
+  display: flex;
+  flex-direction: column;
+  width: min(470px, 36vw);
+  min-height: 0;
+  border-left: 1px solid var(--border);
+  background: var(--sidebar);
+}
+.fr-detail[hidden] {
+  display: none;
+}
+.fr-detail__bar {
+  display: flex;
+  justify-content: flex-end;
+  flex: none;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+}
+.fr-detail > #pm-detail {
+  flex: 1;
+}
+.fr-dock-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 44px;
+  padding-top: 8px;
+  border-left: 1px solid var(--border);
+  background: var(--sidebar);
+}
+.fr-dock {
+  width: var(--fr-dock-w, clamp(360px, 36vw, 640px));
+  max-width: calc(100vw - 280px);
+  border-left: 1px solid var(--border);
+}
+/* 0.53.1: while the dock is open its rail is a thin grip on the dock's left edge that resizes it (dock.js dockGrip). */
+.fr-dock-grip {
+  display: none;
+}
+.fr-body[data-fr-dock="open"] > .fr-dock-rail {
+  width: 6px;
+  padding: 0;
+  border-left: 0;
+  align-items: stretch;
+  background: transparent;
+}
+.fr-body[data-fr-dock="open"] > .fr-dock-rail > :not(.fr-dock-grip) {
+  display: none;
+}
+.fr-body[data-fr-dock="open"] .fr-dock-grip {
+  display: block;
+  flex: 1;
+  cursor: col-resize;
+  touch-action: none;
+  outline: none;
+}
+/* The grip shows a 1px line without hover (a touch screen has none); a press, a drag or the keyboard focus fills it. */
+.fr-body[data-fr-dock="open"] .fr-dock-grip {
+  border-left: 1px solid var(--border);
+}
+.fr-dock-grip:focus-visible,
+.fr-dock-grip[data-dragging] {
+  background: var(--ring);
+}
+@media (hover: hover) {
+  .fr-dock-grip:hover {
+    background: var(--ring);
+  }
+}
+/* 0.53.1 Focus: the dock has the whole window; the page, the detail and the rail step aside (they stay mounted). */
+.fr-body[data-fr-dock="max"] > .fr-main,
+.fr-body[data-fr-dock="max"] > .fr-detail,
+.fr-body[data-fr-dock="max"] > .fr-dock-rail {
+  display: none;
+}
+.fr-body[data-fr-dock="max"] > .fr-dock {
+  width: auto;
+  max-width: none;
+  border-left: 0;
+}
+.fr-body[data-fr-dock="rail"] > .fr-dock {
+  display: none !important;
+}
+/* The pinned ⌘K on a phone. .pmc-btn--block sets width: 100%, which with the side margins runs 32px past the place
+ * (and .fr-main clips it). The column's stretch gives the width inside the margins. */
+.fr-pin {
+  flex: none;
+  align-self: stretch;
+  width: auto;
+  justify-content: flex-start;
+  margin: 12px 16px 0;
+  color: var(--muted-foreground);
+}
+/* Settings: one column of five sections. */
+.fr-set {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 720px;
+  padding: 24px 16px 48px;
+}
+.fr-set__intro {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.fr-set__h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+.fr-set__note {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+.fr-set__section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.fr-set__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+}
+.fr-set__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.fr-set__fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.fr-set__line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.fr-set__add {
+  padding: 12px 0;
+}
+@media (max-width: 760px) {
+  .fr-detail,
+  .fr-dock {
+    width: auto;
+    max-width: none;
+    border-left: 0;
+  }
+  .fr-set {
+    padding: 16px 16px 48px;
+  }
+}
+@media (pointer: coarse) {
+  .fr-set__head {
+    min-height: 44px;
+  }
+  /* The dock's own strip and bottom bar (panel-tabs.js) size their controls inline at 22-30px; under touch each is a
+   * 44px target. The strip's fixed height yields to them. */
+  .fr-dock [data-tabs="bar"] {
+    height: auto !important;
+  }
+  .fr-dock [data-tabs="bar"] button,
+  .fr-dock [data-tabs="bottom"] button {
+    min-width: 44px !important;
+    min-height: 44px !important;
+  }
+}
+
+/* -- layouts · .td- Today (Run 3, slice 3B) -- */
+.td-board {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 16px;
+}
+.td-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+.td-count {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--foreground);
+}
+.td-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+/* today-goals (G6): the goals for today, above what is owed */
+.td-goals {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  background: var(--card);
+}
+.td-goals__head { display: flex; align-items: center; }
+.td-goals__list, .td-goal__steps, .td-goal__ctx-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.td-goals__list { counter-reset: goal; }
+.td-goal { display: flex; flex-direction: column; gap: 4px; }
+.td-goal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.td-goal__text { color: var(--foreground); font-weight: 500; }
+.td-goal__text::before { counter-increment: goal; content: counter(goal) ". "; color: var(--muted-foreground); }
+.td-goal--closed .td-goal__text { color: var(--muted-foreground); text-decoration: line-through; }
+.td-goal__ctrls { display: inline-flex; gap: 4px; margin-left: auto; }
+.td-goal__body { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
+.td-goal__step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.td-goal__step-title { color: var(--foreground); }
+.td-goal__meta, .td-goal__ctx, .td-goal__none, .td-goals__note, .td-goal__prep-text {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+  margin: 0;
+}
+.td-goal__prep { display: inline-flex; align-items: center; gap: 8px; }
+.td-goals__bar { display: flex; gap: 8px; }
+.td-goals__sub { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
+.td-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px 12px;
+  border-radius: 0;
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--border);
+}
+.td-card[hidden] {
+  display: none;
+}
+.td-card--host {
+  padding: 0;
+  box-shadow: none;
+  background: transparent;
+}
+.td-card__host {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+}
+.td-card__face {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.td-card__host > [data-today-more] {
+  flex: none;
+}
+.td-card__top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+.td-card__text {
+  display: flex;
+  flex: 1 1 220px;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.td-card__cause {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.td-card__evidence {
+  padding-left: 14px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+  overflow-wrap: anywhere;
+}
+.td-card__acts {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+}
+.td-accept {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+.td-accept__line,
+.td-accept__q {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+.td-accept__ask {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+.td-accept__acts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.td-accept__error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--destructive);
+}
+.td-health {
+  padding: 8px 12px;
+  border-radius: 0;
+  background: var(--muted);
+  box-shadow: inset 2px 0 0 var(--warning);
+  font-size: 12px;
+  line-height: 16px;
+}
+.td-health__title {
+  margin: 0 0 4px;
+  font-weight: 600;
+}
+.td-health__list {
+  margin: 0;
+  padding-left: 16px;
+  color: var(--muted-foreground);
+  overflow-wrap: anywhere;
+}
+@media (max-width: 560px) {
+  .td-board {
+    padding: 12px 16px;
+  }
+  .td-card__acts {
+    margin-left: auto;
+  }
+}
+
+/* -- layouts · .pl- the command palette and capture (Run 3, slice 3C) -- */
+.pl-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 50vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.pl-item[aria-selected="true"] {
+  background: var(--accent);
+}
+.pl-cli {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.pl-note {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--muted-foreground);
+}
+.pl-note--error {
+  color: var(--destructive);
+}
+/* the terminal's compose line (phone): one message field and Send, in the bottom bar */
+.pl-compose {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.pl-compose__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.pl-compose__input {
+  height: 44px;
+  min-height: 44px;
+  resize: none;
+}
+
+/* -- layouts · .tl- Breakdown › Timeline (Run 4, slice 4B) -- */
+/* the chart scrolls sideways inside itself only; the name column stays put while it scrolls */
+.tl-hint {
+  margin: 0 0 8px;
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.tl-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.tl-chart {
+  position: relative;
+  min-width: 640px;
+}
+.tl-row {
+  display: grid;
+  grid-template-columns: 216px minmax(0, 1fr);
+  align-items: center;
+  min-height: 36px;
+  padding-right: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.tl-row--head {
+  min-height: 40px;
+  align-items: end;
+}
+.tl-name {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 0;
+  padding: 4px 12px 4px 16px;
+  background: var(--background);
+}
+.tl-title {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tl-row--all .tl-title,
+.tl-row--stage .tl-title {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.tl-meta {
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--muted-foreground);
+}
+/* the health reason (R8) and "Proposed": each on its own line under the dates, wrapped, never cut */
+.tl-flag {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.tl-track {
+  position: relative;
+  min-width: 0;
+}
+.tl-axis {
+  position: relative;
+  height: 40px;
+}
+.tl-month,
+.tl-today {
+  position: absolute;
+  bottom: 4px;
+  left: var(--tl-x, 0);
+  font-size: 11px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+.tl-month {
+  padding-left: 4px;
+  border-left: 1px solid var(--border);
+  color: var(--muted-foreground);
+}
+/* the today label is on its own line above the month labels, so the two never cover each other. It starts at its line,
+ * or ends at it in the second half of the axis */
+.tl-today {
+  bottom: 22px;
+  padding-left: 4px;
+  border-left: 1px solid var(--foreground);
+  font-weight: 600;
+  color: var(--foreground);
+}
+.tl-today--end {
+  padding: 0 4px 0 0;
+  border-left: 0;
+  border-right: 1px solid var(--foreground);
+  transform: translateX(calc(-100% + 1px));
+}
+.tl-note {
+  margin: 8px 0 0;
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+@media (pointer: coarse) {
+  .tl-row {
+    min-height: 48px;
+  }
+}
+@media (max-width: 760px) {
+  .tl-row {
+    grid-template-columns: 144px minmax(0, 1fr);
+  }
+}
+
+/* -- layouts · .tl-init- Initiatives › Timeline (Run 4, slice 4C) -- */
+
+.tl-init-root {
+  --tl-init-name: 360px;
+  --tl-init-mw: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+  padding: 0 0 24px;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 20px;
+}
+/* only the chart scrolls sideways: the page never does */
+.tl-init-chart {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  container-type: inline-size;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.tl-init-chart:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: -2px;
+}
+.tl-init-inner {
+  position: relative;
+  width: max(100%, calc(var(--tl-init-name) + var(--tl-init-months) * var(--tl-init-mw)));
+}
+.tl-init-head,
+.tl-init-group,
+.tl-init-row {
+  display: grid;
+  grid-template-columns: var(--tl-init-name) minmax(0, 1fr);
+  border-bottom: 1px solid var(--border);
+}
+.tl-init-head {
+  height: 32px;
+  align-items: end;
+}
+.tl-init-months {
+  display: grid;
+  grid-template-columns: var(--tl-init-cols);
+  height: 100%;
+}
+.tl-init-month {
+  align-self: end;
+  padding: 0 0 6px 6px;
+  border-left: 1px solid var(--border);
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+/* the name of a row stays at the left edge while the months scroll under it */
+.tl-init-corner,
+.tl-init-gname,
+.tl-init-name {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: var(--background);
+}
+.tl-init-gname {
+  padding: 12px 8px 4px 16px;
+  color: var(--foreground);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+.tl-init-name {
+  min-width: 0;
+  border-bottom: 0;
+}
+/* a row with no stages keeps the place ▸ would take, so every title starts at the same left edge */
+.tl-init-lead-gap {
+  flex: none;
+  width: 28px;
+}
+.tl-init-sub {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 8px 0 76px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+}
+.tl-init-row--stage {
+  min-height: 32px;
+}
+.tl-init-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  min-width: 0;
+}
+.tl-init-sub__none {
+  padding-left: 8px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+}
+.tl-init-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 8px;
+}
+/* the line for today, over the month columns only */
+.tl-init-plot {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--tl-init-name);
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.tl-init-today {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--tl-init-today);
+  border-left: 2px solid var(--foreground);
+}
+.tl-init-today__label {
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  padding: 0 4px;
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 11px;
+  line-height: 16px;
+}
+/* the initiatives with no dated item: names only, in the order they carry */
+.tl-init-undated {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tl-init-undated__title {
+  margin: 0;
+  padding: 0 16px;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+.tl-init-undated__note {
+  margin: 0;
+  padding: 4px 16px 8px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+}
+.tl-init-undated .tl-init-row {
+  display: block;
+}
+.tl-init-undated .tl-init-name {
+  position: static;
+  max-width: 480px;
+}
+.tl-init-note {
+  margin: 0;
+  padding: 0 16px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+}
+/* drag states (Sortable's classes) */
+.tl-init-ghost {
+  opacity: 0.4;
+}
+.tl-init-chosen .tl-init-name {
+  background: var(--accent);
+}
+/* Sortable writes an inline opacity: 0.8 on the fallback clone; only !important overrides an inline style */
+.tl-init-fallback,
+.tl-init-dragging {
+  opacity: 1 !important;
+  background: var(--card);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent),
+    0 8px 20px -6px color-mix(in oklab, var(--term-bg) 35%, transparent);
+}
+/* a phone: each row is its name over its months, and the name is as wide as the chart's box */
+@media (max-width: 760px) {
+  .tl-init-inner {
+    width: max(100%, calc(var(--tl-init-months) * var(--tl-init-mw)));
+  }
+  .tl-init-head,
+  .tl-init-group,
+  .tl-init-row {
+    display: block;
+  }
+  .tl-init-corner {
+    display: none;
+  }
+  .tl-init-gname,
+  .tl-init-name {
+    width: 100cqw;
+  }
+  .tl-init-sub {
+    padding-left: 60px;
+  }
+  .tl-init-plot {
+    left: 0;
+  }
+}
+@media (pointer: coarse) {
+  .tl-init-sub,
+  .tl-init-row--stage {
+    min-height: 44px;
+  }
+  .tl-init-lead-gap {
+    width: 44px;
+  }
+}
+
+/* -- layouts · .bo- Board (Run 4, slice 4D) -- */
+.bo-head {
+  flex-wrap: wrap;
+}
+.bo-head__filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+.bo-head__pick {
+  min-width: 160px;
+}
+.bo-head__end {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+}
+.bo-head__n {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+.bo-releases {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 16px 16px 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 0;
+}
+.bo-releases__head {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.bo-releases__note {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+}
+.bo-rel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-top: 1px solid var(--border);
+}
+.bo-rel--today {
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--card);
+}
+.bo-rel__main {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.bo-rel__title {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.bo-rel__meta,
+.bo-rel__wait {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 16px;
+  overflow-wrap: anywhere;
+}
+.bo-card__note {
+  padding: 0 12px 8px;
+  color: var(--warning);
+  font-size: 12px;
+  line-height: 16px;
+}
+@media (pointer: coarse) {
+  .bo-rel {
+    min-height: 48px;
+  }
+  .bo-head__pick {
+    min-width: 0;
+    flex: 1 1 160px;
+  }
+}
+
+/* -- layouts · .rp- Reports (Run 5, slice 5C) -- */
+.rp-page {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 16px;
+  min-width: 0;
+  min-height: 100%;
+  padding: 16px;
+  background: var(--background);
+  color: var(--foreground);
+}
+.rp-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.rp-head__title {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 500;
+}
+.rp-cols {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+.rp-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.rp-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+.rp-section__title {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.rp-section__empty {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--muted-foreground);
+}
+.rp-section__empty--bad {
+  color: var(--destructive);
+}
+.rp-list {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  border-top: 1px solid var(--border);
+}
+.rp-list__row--on {
+  background: color-mix(in oklab, var(--muted) 45%, var(--background));
+}
+.rp-flag {
+  margin: 0;
+}
+.rp-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-self: stretch;
+}
+.rp-toolbar__title {
+  flex: 1 1 160px;
+}
+.rp-toolbar__acts {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.rp-viewer {
+  align-items: stretch;
+}
+.rp-viewer__state {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--muted-foreground);
+}
+.rp-sheet__msg {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 20px;
+}
+.rp-sheet__msg--bad {
+  color: var(--destructive);
+}
+.rp-sheet__headline {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--muted-foreground);
+}
+.rp-sheet__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+/* the report text, on screen and on paper */
+.rp-doc {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+.rp-doc__h1 {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 500;
+}
+.rp-doc__h2 {
+  margin: 16px 0 0;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.rp-doc__h3 {
+  margin: 8px 0 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.rp-doc__p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.rp-doc__strong {
+  font-weight: 500;
+}
+.rp-doc__list {
+  margin: 0;
+  padding-left: 20px;
+}
+.rp-doc__li {
+  overflow-wrap: anywhere;
+}
+.rp-doc__note {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 12px;
+  border-left: 2px solid var(--border);
+  background: color-mix(in oklab, var(--muted) 35%, var(--background));
+}
+.rp-doc__p--note {
+  white-space: pre-wrap;
+}
+.rp-doc__scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+.rp-doc__table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+}
+.rp-doc__th,
+.rp-doc__td {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+.rp-doc__th {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+/* the printed copy lives in the body, outside every panel; print.css shows only it, and a screen never shows it */
+@media screen {
+  .rp-print {
+    display: none;
+  }
+}
+.rp-copy-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+@container (min-width: 720px) {
+  .rp-cols {
+    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+  }
+}
+@media (pointer: coarse) {
+  .rp-doc__scroll {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* -- layouts · .lg- the legacy and fixture shells (Run 3, slice 3D) -- */
+/* The legacy and fixture cockpit's two columns: the list head (a stack) and the rail's tile column. */
+.lg-stack {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.lg-rail-col {
+  flex: 0 1 auto;
+  min-height: 0;
+  align-self: stretch;
+  margin-top: -3px;
+  padding-top: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  overflow-y: auto;
+}
+
+/* The legacy cockpit's repository rail: one 36px tile per repository (the open one inverted), a dashed tile to add one. */
+.lg-rail-tile {
+  box-sizing: content-box;
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  font: 600 14px var(--sans);
+  background: var(--secondary);
+  color: var(--foreground);
+  border: 1px solid transparent;
+}
+.lg-rail-tile[data-active="1"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.lg-rail-tile--add {
+  background: transparent;
+  border: 1px dashed var(--input);
+  color: var(--muted-foreground);
+}
+.lg-rail-tile__dot {
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 9px;
+  height: 9px;
+  background: var(--warning);
+  border: 2px solid var(--sidebar);
+}
+@media (hover: hover) {
+  .lg-rail-tile--add:hover {
+    color: var(--foreground);
+    background: var(--accent);
+  }
+}
+.lg-rail-tile:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+}
+@media (pointer: coarse) {
+  .lg-rail-tile {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* The dock (panel 4): its strip and bottom bar are chrome and follow the theme; only the terminal pane inside it is dark. */
+.lg-dock {
+  background: var(--background);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.lg-dock-bottom {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 5px 12px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.lg-dock-bottom__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono);
+  color: var(--foreground);
+}
+
+/* R27: the dock draws no rounded corner. The tab strip and the scratchpad were drawn with inline radii (workspace-cockpit-nav);
+   this rule wins over them, so the strip is sharp like every other surface. A tab's colour dot is a dot and keeps its circle. */
+.lg-dock *:not([data-tab-dot]) {
+  border-radius: 0 !important;
+}
+
+/* -- end of the layout sections: add nothing below this line -- */