@felloinnovations/brand-kit 0.5.1 → 0.5.3

package/design-system/components/bundle.css

@@ -402,6 +402,27 @@ body { margin: 0; background: var(--color-bg-page); color: var(--color-text-body
 .ws-btn-split { display: flex; flex-wrap: wrap; gap: var(--space-xs); width: 100%; }
 .ws-btn-split > .ws-btn { flex: 1 1 var(--space-8xl); min-width: fit-content; }
 
+/* An act with a menu of its other forms (#22): the act and a caret joined into one shape, the caret opening a Menu of
+   the same act done another way ("Approve and post now", "Approve and schedule"). Not ws-btn-split (two different acts
+   side by side). The inner corners go square; a hairline in the words' colour at 35 % parts the halves, inset 6 from the
+   top and bottom (on navy, the white words' line; two outlined halves share one edge instead); the caret is a square of
+   its height with a 16 px chevron (28 at small and medium, 40 large). The pair gives to a press as one: neither half
+   moves alone, so the join never opens. Each half takes its own focus ring. */
+.ws-btn-join { display: inline-flex; flex-shrink: 0; max-width: 100%; }
+.ws-btn-join > .ws-btn { --ws-press: 1; }
+.ws-btn-join > .ws-btn:first-child { min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
+.ws-btn-join > .ws-btn:last-child { --ws-btn-pad: var(--space-xxs-plus); border-start-start-radius: 0; border-end-start-radius: 0; }
+.ws-btn-join > .ws-btn--lg:last-child { --ws-btn-pad: var(--space-sm); }
+@media (pointer: coarse) { .ws-btn-join > .ws-btn:last-child { --ws-btn-pad: var(--space-sm); } }
+.ws-btn-join > .ws-btn:last-child > svg { width: var(--ws-icon); height: var(--ws-icon); }
+.ws-btn-join > .ws-btn + .ws-btn::after { content: ""; position: absolute; inset-block: var(--space-xxs-plus); inset-inline-start: 0; width: var(--ws-hairline); background: currentColor; opacity: 0.35; pointer-events: none; }
+.ws-btn-join > .ws-btn--secondary + .ws-btn--secondary { margin-inline-start: calc(var(--ws-hairline) * -1); }
+.ws-btn-join > .ws-btn--secondary + .ws-btn--secondary::after { content: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-btn-join { transition: scale var(--ws-spring-press-duration) var(--ws-spring-press); }
+  .ws-btn-join:active { scale: var(--ws-press-scale); }
+}
+
 /* LinkPending: a link card or a ButtonLink whose page is on its way. Its 1 px navy edge arrives after a beat (a quick
    answer shows nothing) and breathes until the page answers; it leaves at once. The link holds it (position: relative). */
 .ws-link-pending { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
@@ -466,10 +487,15 @@ body { margin: 0; background: var(--color-bg-page); color: var(--color-text-body
 .ws-chip--live { background: var(--ws-tint-live); color: var(--ws-word-positive); box-shadow: none; }
 .ws-chip--navy { background: var(--ws-surface-sunk); color: var(--color-text-heading); font-weight: 600; box-shadow: none; }
 .ws-chip--needs { background: var(--ws-tint-needs); color: var(--ws-word-needs); box-shadow: none; }
+.ws-chip--alert { background: var(--ws-tint-alert); color: var(--ws-word-alert); box-shadow: none; } /* an error status (#15) */
 /* Rating tones (D10): strong is --live; the middle band ("Getting there") is mid blue; needs work is Seth's pink as a
    20% tint, its words the AA step (#B42D68, 301:2018). */
 .ws-chip--middle { background: var(--ws-card-tint-blue); color: var(--ws-rating-middle); box-shadow: none; }
 .ws-chip--needs-work { background: var(--ws-tint-needs-work); color: var(--ws-word-needs-work); box-shadow: none; }
+/* Small (#30): the dense step for several tags in one place (a board card, a table cell, a list row): 20 tall, 12 / 16
+   medium words, 6 px sides, the 12 px icon 4 before them. A fact only, never a control: a chip that acts keeps 24. Any
+   tone. */
+.ws-chip--sm { height: calc(var(--space-md) + var(--space-xxs)); padding: 0 var(--space-xxs-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); }
 /* Example (issue #8, Seth's v7 first open): made-up numbers are chipped. A 1 px dashed edge, 11 px semibold, a round tag. */
 .ws-chip--example { border-radius: var(--ws-radius-bubble); background: transparent; color: var(--color-text-muted); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 600; box-shadow: none; outline: var(--ws-line) dashed var(--color-text-muted); outline-offset: calc(var(--ws-line) * -1); }
 /* ---- Badge: a count or a dot on a face, a row or a button (and the kit's marketing pill). North's count (0.5.0, D1;
@@ -515,9 +541,21 @@ body { margin: 0; background: var(--color-bg-page); color: var(--color-text-body
 .ws-search-wrap { position: relative; display: flex; min-width: 0; }
 .ws-search-wrap svg { position: absolute; left: var(--space-xs); top: 50%; width: var(--ws-icon); height: var(--ws-icon); transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
 .ws-search { height: var(--ws-control-h-md); padding: 0 var(--space-sm) 0 var(--space-xl); }
+/* The colour field (#29): a swatch that opens the browser's colour picker (a native <input type="color">) and the hex
+   field beside it, 8 apart. The swatch is a square the field's height, its 4 px corners and 0.5 px edge drawn inside, so
+   a white or cream colour still shows its edge; its fill is the input's own value, the one colour the kit paints that
+   no token sets. An invalid hex marks the field and leaves the swatch on the last good colour. */
+.ws-colour-field { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
+.ws-colour-field__swatch { flex-shrink: 0; width: var(--ws-control-h); height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; cursor: pointer; }
+.ws-colour-field__swatch::-webkit-color-swatch-wrapper { padding: 0; }
+/* The edge sits on the swatch itself: the browser paints the colour over anything drawn on the input's own box. */
+.ws-colour-field__swatch::-webkit-color-swatch { border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: inherit; }
+.ws-colour-field__swatch::-moz-color-swatch { border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: inherit; }
+.ws-colour-field__swatch:disabled { cursor: not-allowed; opacity: 0.5; }
+.ws-colour-field .ws-input { font-variant-numeric: tabular-nums; }
 /* Touch: 40 tall (the house's touch height, restated after the field's own so it still wins), the words 16 so a phone
    does not zoom the page into the field when it takes focus (iOS zooms any field under 16 px). */
-@media (pointer: coarse) { .ws-input, .ws-search { height: var(--ws-touch); font-size: var(--ws-text-value); } }
+@media (pointer: coarse) { .ws-input, .ws-search { height: var(--ws-touch); font-size: var(--ws-text-value); } .ws-colour-field__swatch { width: var(--ws-touch); height: var(--ws-touch); } }
 /* ---- Select: a native select dressed as the house field (0.5.0, restated so the house's Fields copy can go): Input's
    ground, edge, hover, focus ring and error, a 16 px navy chevron at the right (Seth's chevrons are navy), the chosen
    option cut with an ellipsis when it is longer than the field. --sm: Seth's chip select (319:3460), 28 tall on the
@@ -792,6 +830,25 @@ a.ws-card[aria-busy="true"]::before { content: ""; position: absolute; inset: ca
 /* Selected, in a row of cards (North): the rim darkens and a 2 px navy tab sits 8 under the card, 16 in from each side. */
 .ws-card--selected { position: relative; border-color: var(--ws-well-hover); box-shadow: none; }
 .ws-card--selected::after { content: ""; position: absolute; left: var(--space-md); right: var(--space-md); top: calc(100% + var(--ws-rim) + var(--space-xs)); height: var(--ws-ring); border-radius: var(--ws-radius-chip); background: var(--color-text-heading); }
+/* A picture in a card (ws-card__media, its first part: an image tile, a template or asset choice): edge to edge, its top
+   corners rounded to the cream's own (7), so the card is never clipped (K9) and a menu, a tip or the selected tab still
+   shows. The sunk cream behind it while it loads; a logo on a checker is the app's own ground. */
+:where(button).ws-card { padding: 0; } /* the browser's button padding is not the card's: a picture runs edge to edge; the padding steps below still win */
+.ws-card__media ~ .ws-card__body { display: block; padding: var(--space-xs) var(--space-sm) var(--space-sm); } /* a caption under a picture: 8 above, 12 round */
+.ws-card__media { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ws-radius-card-inner) var(--ws-radius-card-inner) 0 0; background: var(--ws-surface-sunk); }
+/* Selected in a grid, or on a card that clips its content (--ring): the tab under the card would fall in the gap above
+   the next row, so the choice is drawn on the card itself. The rim turns navy with a hairline more outside it, a 2 px
+   ring, flush (the focus ring stands 2 off, so the two never look alike), and a tick (ws-card__tick, in the markup at
+   rest and shown only when selected) sits on the top right corner, on a cream ring so it reads over a photo. */
+.ws-card--ring { position: relative; }
+.ws-card--ring.ws-card--selected, .ws-card--ring.ws-card--selected:hover { border-color: var(--color-text-heading); box-shadow: 0 0 0 calc(var(--ws-ring) - var(--ws-rim)) var(--color-text-heading); }
+.ws-card--ring.ws-card--selected::after { content: none; }
+.ws-card__tick { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1; display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full); background: var(--color-text-heading); color: var(--ws-on-act); box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); opacity: 0; transform: scale(var(--ws-pop-scale)); pointer-events: none; }
+.ws-card__tick svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-card--selected > .ws-card__tick { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-card__tick { transition: opacity var(--ws-duration-instant) var(--ws-ease-soft), transform var(--ws-duration-settle) var(--ws-ease-pop); }
+}
 /* The card's own padding steps. */
 .ws-card--pad-sm { padding: var(--ws-card-padding); }
 .ws-card--pad-md { padding: var(--ws-card-padding-lg); }
@@ -940,6 +997,9 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
    house fade of the whole disc left them at 3.7:1); a photo in it fades to 60 %. */
 .ws-avatar--dim { opacity: 1; color: var(--color-text-muted); }
 .ws-avatar--dim > img { opacity: 0.6; }
+/* Extra small (#16): 20, a line of words' height, for a face inside a chip, a dense picker's row or a task row's
+   assignee: initials 11 px semibold. A stack of them overlaps 4, as every stack. */
+.ws-avatar--xs { width: calc(var(--space-md) + var(--space-xxs)); height: calc(var(--space-md) + var(--space-xxs)); font-size: var(--ws-text-micro); }
 /* "+N" in a stack: the same disc, tabular figures, so +9 and +12 sit alike. */
 .ws-avatar-stack__more { font-variant-numeric: tabular-nums; }
 /* ---- ActionList: a card's ranked list of next acts: who or what, the reason in words, the one act at the right. --brief
@@ -1080,6 +1140,35 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
 /* A row's count: Seth's navy pill, 18 tall, its figure on the act fill's word colour. */
 .ws-app-shell__count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--space-md) + var(--space-3xs)); height: calc(var(--space-md) + var(--space-3xs)); padding: 0 var(--space-xxs); border-radius: var(--radius-full); background: var(--color-text-heading); color: var(--ws-on-act); font-size: var(--ws-text-micro); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
 
+/* A section: a row that folds its pages open in place (North "Sidebar sections open / close", the house's fold on every
+   kit <details>). The row is the <summary>, wearing __row, its chevron at the end turning down as it opens; its pages sit
+   one level in, the icon box and its gap (24), so their words start on the section's words. A closed section that holds
+   the current page wears the current pill itself, so the page is never lost behind a fold. */
+.ws-app-shell__section > summary { list-style: none; }
+.ws-app-shell__section > summary::-webkit-details-marker { display: none; }
+.ws-app-shell__section > .ws-app-shell__rows { margin-inline-start: calc(var(--ws-icon-lg) + var(--space-xxs)); padding-block-start: var(--space-3xs); }
+.ws-app-shell__row > .ws-app-shell__chevron { color: var(--ws-mark-muted); }
+.ws-app-shell__section[open] > summary > .ws-app-shell__chevron { transform: rotate(90deg); }
+.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary { border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); color: var(--color-text-brand-strong); }
+.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary > svg:first-child { color: var(--ws-chart-under-half); }
+/* Folded, a section cannot open in 64 px: its row (__fly, a button) opens its pages as a menu panel beside the rail
+   (__panel, a native popover: the top layer, light dismiss, Escape back to the button). The <details> leaves the rail.
+   The panel names the section (its eyebrow, which the rail hides) over its pages as menu rows. */
+.ws-app-shell__fly { display: none; }
+.ws-app-shell--folded .ws-app-shell__section { display: none; }
+.ws-app-shell--folded .ws-app-shell__fly { display: flex; }
+.ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) { border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); color: var(--color-text-brand-strong); }
+.ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) > svg { color: var(--ws-chart-under-half); }
+.ws-app-shell--folded .ws-app-shell__panel .ws-app-shell__eyebrow { display: block; }
+.ws-app-shell__panel > .ws-app-shell__eyebrow { margin: 0; }
+.ws-app-shell__panel > ul { display: flex; flex-direction: column; gap: var(--space-3xs); }
+/* Beside the rail, its top on the button's, 8 past the rail's edge (the button sits 12 inside it); it flips up when the
+   room below runs out. It grows from that corner. */
+.ws-app-shell__panel { --ws-menu-from: 0px; transform-origin: top left; }
+@supports (position-area: block-end) {
+  .ws-app-shell__panel.ws-menu[popover] { margin: 0 var(--space-xs) 0 calc(var(--space-sm) + var(--space-xs)); position-area: inline-end span-block-end; justify-self: auto; position-try-fallbacks: flip-block; }
+}
+
 /* The person, pinned at the foot under a full-width rule. */
 .ws-app-shell__foot { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-xs-plus); margin-top: auto; padding: var(--space-sm) var(--space-xs) var(--space-xxs-plus) var(--space-sm); border-top: var(--ws-line) solid var(--ws-edge-card); }
 .ws-app-shell__foot > :first-child { margin-inline-start: var(--space-xs-plus); }
@@ -1091,6 +1180,14 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > :is(.ws-app-shell__wordmark, .ws-app-shell__foot) { position: sticky; z-index: 1; background: var(--ws-frame); background-attachment: fixed; }
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > .ws-app-shell__wordmark { top: 0; min-height: calc(var(--ws-header-h) + var(--ws-line)); margin-inline: 0; padding: var(--ws-line) var(--space-xs) 0 calc(var(--space-sm) + var(--space-xs-plus)); }
 .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)) > .ws-app-shell__foot { bottom: 0; padding-bottom: var(--space-sm-plus); }
+/* The person as a button (__me) that opens the account menu (Menu, above it once it flips): the foot keeps its height and
+   edges, the button takes a row's 10 sides and 6 px corners, so the avatar stays 22 in and the wash reads as a row's. */
+.ws-app-shell__me { display: flex; flex: 1; align-items: center; gap: var(--space-xs-plus); min-width: 0; margin-block: calc(var(--space-3xs) * -1); padding: var(--space-3xs) var(--space-xs-plus); border: 0; border-radius: var(--ws-radius-row); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
+.ws-app-shell__foot > .ws-app-shell__me { margin-inline: 0; }
+.ws-app-shell__me:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-app-shell__me:hover { background: var(--ws-hover); } }
+.ws-app-shell__me:active { background: var(--ws-hover-strong); }
+.ws-app-shell--folded .ws-app-shell__me { flex: 0 0 auto; gap: 0; }
 .ws-app-shell__foot-words { display: flex; flex-direction: column; min-width: 0; }
 .ws-app-shell__foot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ws-text-control); line-height: var(--space-md); font-weight: 500; color: var(--color-text-heading); }
 
@@ -1180,6 +1277,9 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
   :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))) { position: relative; anchor-scope: --ws-app-shell-current; }
   :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups)))::before { content: ""; position: absolute; position-anchor: --ws-app-shell-current; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); border-radius: var(--ws-radius-control); background: var(--color-surface); box-shadow: var(--ws-float-rim), 0 var(--ws-line) var(--ws-ring) color-mix(in srgb, var(--ws-shade) 6%, transparent), 0 0 0 var(--ws-hairline) color-mix(in srgb, var(--ws-shade) 4%, transparent); opacity: 0; pointer-events: none; }
   .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { anchor-name: --ws-app-shell-current; }
+  /* A closed section, or a folded section's button, stands in for the current page it holds (the page itself has no box). */
+  .ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary,
+  .ws-app-shell--folded .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current)) { anchor-name: --ws-app-shell-current; }
   .ws-app-shell__eyebrow { position: relative; } /* a group's name stays over the pill as it passes, as the rows do */
 }
 
@@ -1188,10 +1288,17 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
   .ws-app-shell > .ws-app-shell__nav { transition: width var(--ws-duration-shift) var(--ws-ease-shift); }
   .ws-app-shell :is(.ws-app-shell__wordmark, .ws-app-shell__name, .ws-app-shell__foot-words) { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
   .ws-app-shell__row { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-app-shell__me { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-app-shell__chevron { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
+  @supports (position-area: block-end) {
+    .ws-app-shell__panel.ws-menu[popover]:not(:popover-open) { margin-block-start: 0; }
+    @starting-style { .ws-app-shell__panel.ws-menu[popover]:popover-open { margin-block-start: 0; } }
+  }
   .ws-app-shell__bar { transition: box-shadow var(--ws-duration-settle) var(--ws-ease-soft); }
   @supports (anchor-name: --a) {
     :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))):is(:hover, :focus-within)::before { opacity: 1; transition: inset var(--ws-spring-nav-duration) var(--ws-spring-nav); }
     :is(.ws-app-shell__groups, .ws-app-shell__nav:not(:has(> .ws-app-shell__groups))):is(:hover, :focus-within) .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { background: none; box-shadow: none; }
+    .ws-app-shell__groups:is(:hover, :focus-within) :is(.ws-app-shell__section:not([open]):has(.ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"])) > summary, .ws-app-shell__fly:has(+ .ws-app-shell__panel :is([aria-current="page"], .ws-menu-item--current))) { background: none; box-shadow: none; }
     .ws-app-shell__row:is(.ws-app-shell__row--current, [aria-current="page"]) { transition: color var(--ws-duration-hover) var(--ws-ease-soft); }
   }
 }
@@ -1213,6 +1320,9 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
 .ws-banner--positive .ws-banner__mark, .ws-banner--positive .ws-banner__lead { color: var(--ws-word-positive); }
 .ws-banner--working { background: var(--ws-card-tint-blue); }
 .ws-banner--working .ws-banner__mark, .ws-banner--working .ws-banner__lead { color: var(--color-text-interactive); }
+/* An error status (#15): something wrong now, the alert red's tint and words. */
+.ws-banner--alert { background: var(--ws-tint-alert); }
+.ws-banner--alert .ws-banner__mark, .ws-banner--alert .ws-banner__lead { color: var(--ws-word-alert); }
 @media (pointer: coarse) { .ws-banner { --ws-banner-band: var(--ws-touch); } }
 /* ---- Breadcrumb: where a page sits, Seth's North crumbs (D1): 14 px words in the body grey, a muted "/" between, the
    current page navy medium; one line. The root crumb never shrinks, the current page gives way first, every link's
@@ -1231,6 +1341,67 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
 .ws-breadcrumb__ellipsis { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--space-lg); min-height: var(--space-lg); margin-inline: calc((var(--space-xxs-plus) + var(--ws-line)) * -1); padding: 0 var(--space-xxs); border: 0; border-radius: var(--ws-radius-control); background: none; font-size: inherit; color: inherit; cursor: pointer; }
 @media (hover: hover) { .ws-breadcrumb__ellipsis:hover { background: var(--ws-hover-strong); color: var(--color-text-heading); text-decoration: none; } }
 @media (prefers-reduced-motion: no-preference) { .ws-breadcrumb :is(a, .ws-breadcrumb__ellipsis) { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft); } }
+/* ---- Calendar: things on dates. A month (or a week) of days, Monday first, each day holding its items as rows that
+   open; the steps and the view switch over it. The days abut on 0.5 px lines; today's number is ringed in the needs
+   step, as DateInput's is. Under 40rem of its own width the month reads as an agenda: a row a day, the days with
+   nothing hidden, today kept. ---- */
+.ws-calendar { container: ws-calendar / inline-size; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
+.ws-calendar__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
+.ws-calendar__title { margin-right: auto; }
+.ws-calendar__steps { display: flex; align-items: center; gap: var(--space-xxs); }
+/* The key: what each item's tone means, in the meta words, each beside its mark (__item-mark with the item's tone class). */
+/* Fixed 160 columns, so a key that wraps keeps its marks on shared edges. */
+.ws-calendar__key { display: grid; grid-template-columns: repeat(auto-fill, var(--space-8xl)); gap: var(--space-xxs) var(--space-sm); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-calendar__key > span { display: inline-flex; align-items: center; gap: var(--space-xxs-plus); }
+/* The lit period's swatch in the key: the tint on a 0.5 px edge. */
+.ws-calendar__key-lit { flex: none; width: var(--space-sm); height: var(--space-sm); border-radius: var(--ws-radius-chip); background: var(--ws-tint-accent); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
+/* Weekday names once over the grid, 11 px medium muted, centred over their days as the numbers are; read aloud with
+   each day instead. */
+.ws-calendar__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); text-align: center; }
+/* The days: the 0.5 px lines are the grid's own ground showing between them. */
+.ws-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ws-hairline); overflow: hidden; border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: var(--ws-radius-control); background: var(--ws-edge-card); }
+.ws-calendar__day { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; min-height: var(--space-7xl); padding: var(--space-xxs); background: var(--color-bg-page); }
+/* Days in a period the view is about (the launch week, the phase in hand): one quiet tint, named in the key. */
+.ws-calendar__day--lit { background: var(--ws-tint-accent); }
+.ws-calendar__day-head { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--space-lg); }
+.ws-calendar__weekday { display: none; }
+.ws-calendar__date { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: var(--space-lg); height: var(--space-lg); padding: 0 var(--space-xxs); border-radius: var(--radius-full); font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-calendar__day--outside .ws-calendar__date { color: var(--color-text-muted); font-weight: 400; }
+/* Today: a 1 px ring and the number in the salmon's AA step (the salmon itself is 2.6:1 on the cream). */
+.ws-calendar__date[aria-current="date"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); color: var(--ws-word-needs); font-weight: 600; }
+.ws-calendar__items { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
+/* An item: a 24 px row on the sunk cream, its tone a 6 px dot (a milestone a diamond), its words one line, whole in
+   its title. A link or a button when it opens the thing; hover is the wash, never a lift. */
+.ws-calendar__item { --ws-calendar-tone: var(--tone, var(--color-text-heading)); display: flex; align-items: center; gap: var(--space-xxs-plus); min-width: 0; min-height: var(--space-lg); padding: 0 var(--space-xxs-plus); border-radius: var(--ws-radius-control); background-color: var(--ws-surface-sunk); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-heading); text-align: left; text-decoration: none; }
+.ws-calendar__item::before, .ws-calendar__item-mark { content: ""; flex: none; width: var(--space-xxs-plus); height: var(--space-xxs-plus); border-radius: var(--radius-full); background: var(--ws-calendar-tone, var(--color-text-heading)); }
+.ws-calendar__item > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.ws-calendar__item--2 { --ws-calendar-tone: var(--tone, var(--ws-chart-finished)); }
+.ws-calendar__item--3 { --ws-calendar-tone: var(--tone, var(--ws-chart-past-half)); }
+.ws-calendar__item--needs { --ws-calendar-tone: var(--tone, var(--ws-chart-under-half)); }
+.ws-calendar__item--milestone::before, .ws-calendar__item-mark.ws-calendar__item--milestone { border-radius: var(--ws-radius-bar); transform: rotate(45deg); }
+.ws-calendar__item--milestone { font-weight: 500; }
+:is(a, button).ws-calendar__item { cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { :is(a, button).ws-calendar__item:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
+:is(a, button).ws-calendar__item:active { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); }
+/* Touch: an item is a boxed control, so 40 tall (K10). */
+@media (pointer: coarse) { .ws-calendar__item { min-height: var(--ws-touch); } }
+.ws-calendar__item:focus-visible { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-calendar__more { align-self: flex-start; justify-self: start; margin-left: 0; font-size: var(--ws-text-dense); }
+.ws-calendar__empty { padding: var(--space-xxs) var(--space-xxs-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+/* Week: one row of seven taller days. */
+.ws-calendar--week .ws-calendar__day { min-height: var(--space-9xl); }
+/* Agenda: a narrow column (a phone) reads the same markup as a list of the days that hold something. */
+@container ws-calendar (width < 40rem) {
+  .ws-calendar__weekdays { display: none; }
+  .ws-calendar__days { grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; border-radius: 0; background: none; }
+  .ws-calendar__days > .ws-calendar__day { display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); align-items: start; gap: var(--space-3xs) var(--space-sm); min-height: 0; padding: var(--space-xs) 0; }
+  .ws-calendar__items, .ws-calendar__more, .ws-calendar__empty { grid-column: 2; }
+  .ws-calendar__day + .ws-calendar__day { border-top: var(--ws-hairline) solid var(--ws-edge-card); }
+  .ws-calendar__day--outside, .ws-calendar__day:not(:has(.ws-calendar__item, [aria-current="date"])) { display: none; }
+  .ws-calendar__day--lit { background: none; }
+  .ws-calendar__day-head { flex-direction: column; gap: 0; }
+  .ws-calendar__weekday { display: block; font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); }
+}
 /* ---- ChatCard: a card the agent brings into the chat (North's chat card: at most 556, 20 inside, the 80 px tray): a door on the left of its band, its acts on the right ---- */
 /* North's chat card keeps the 0.5 px card edge on the chat's glass (the page's tray rim is for page cards). It
    measures itself, so a narrow chat gets the narrow band. */
@@ -1248,6 +1419,12 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
 .ws-chat-card:has(> .ws-chat-card__close) > .ws-chat-card__head { padding-right: var(--space-xl); }
 .ws-chat-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-md); font-size: var(--ws-text-dense); color: var(--color-text-body); }
 .ws-chat-card__facts b { font-weight: 600; color: var(--color-text-heading); }
+/* An email, a call or a text: when it happened sits at the head's end, one line, in the meta words. */
+.ws-chat-card__when { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Its own words (an email's opening lines, a text) quoted on a sunk plate, never adopted: at most three lines, the door
+   opens the rest. The clamp sits on the words, not the plate, so a fourth line never shows in the plate's padding. */
+.ws-chat-card__quote { margin: 0; }
+.ws-chat-card__quote > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
 /* A chart answer's drawing: the dotted field runs to the card's edges and sits only behind the drawing, 24 under it. */
 .ws-chat-card__graph { margin: var(--space-xs) calc(var(--ws-card-inset) * -1) 0; padding: var(--space-md) var(--ws-card-inset) var(--space-lg); }
 /* A breakdown under the answer: rows edge to edge, 44 tall, 0.5 px rules, the label left and the figure right. */
@@ -1522,7 +1699,13 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
    (never cut, never scrolled sideways); one line is 32 tall. */
 .ws-combobox__option { display: block; padding: calc((var(--ws-combobox-row, var(--ws-control-h)) - var(--space-md) - var(--space-xxs)) / 2) var(--space-sm); border-radius: var(--ws-radius-row); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); cursor: pointer; }
 @media (hover: hover) { .ws-combobox__option:hover { background: var(--ws-hover); } }
-.ws-combobox__option--active, .ws-combobox__option[aria-selected="true"] { background: var(--ws-surface-sunk); }
+/* Two marks that never look alike (#19): the keyboard's row is the sunk cream; the chosen row carries Menu's tick, 16 px
+   navy at its end, centred on its first line, so a list that opens on the current value and is then walked with the
+   arrows says which is which. A list of several choices (aria-multiselectable) ticks each one. The tick is a mask, so
+   the app's markup does not change. */
+.ws-combobox__option--active { background: var(--ws-surface-sunk); }
+.ws-combobox__option[aria-selected="true"] { --ws-combobox-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); position: relative; padding-inline-end: calc(var(--space-sm) + var(--ws-icon) + var(--space-xs)); }
+.ws-combobox__option[aria-selected="true"]::after { content: ""; position: absolute; top: calc((var(--ws-combobox-row, var(--ws-control-h)) - var(--ws-icon)) / 2); right: var(--space-sm); width: var(--ws-icon); height: var(--ws-icon); background: var(--color-text-heading); -webkit-mask: var(--ws-combobox-tick) center / contain no-repeat; mask: var(--ws-combobox-tick) center / contain no-repeat; }
 .ws-combobox__match { font-weight: 500; color: var(--color-text-heading); }
 /* pre-wrap keeps the rest's leading space (" Street") and still wraps a long one. */
 .ws-combobox__rest { color: var(--color-text-body); white-space: pre-wrap; }
@@ -1558,6 +1741,47 @@ a.ws-card__list-row:focus-visible, button.ws-card__list-row:focus-visible { outl
   .ws-combobox__chip button { min-height: 0; }
   .ws-combobox__chip button::after { inset: calc((var(--space-md) - var(--ws-touch)) / 2); }
 }
+/* ---- CommentThread: people commenting on a thing (a brief's section, a line of copy, a task). Threads in a list,
+   divided by the full-width hairline: the quote of what each is on, its first remark, its replies one level in under the
+   words' column, the acts (Reply, Resolve) in the meta size. A remark is a 28 px avatar beside its name, its time and
+   its words. A mention of someone is their name in the link's mid blue; a mention of you is on the needs tint, since it
+   waits on you. On the content, a commented stretch wears the blue card tint, a step stronger while its thread is the
+   one open. ---- */
+.ws-comments { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
+.ws-comments__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
+.ws-comments__list { display: flex; flex-direction: column; }
+.ws-comment { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) 0; border-top: var(--ws-divider); }
+.ws-comment:last-child { border-bottom: var(--ws-divider); }
+/* The thread open beside its content: the blue card tint, the rows' 12 px sides so its words do not touch the edge. */
+.ws-comment[aria-current="true"] { margin: 0 calc(var(--space-sm) * -1); padding: var(--space-sm); border-radius: var(--ws-radius-control); background: var(--ws-card-tint-blue); }
+/* What the thread is on: its words quoted on the sunk plate (as ChatCard quotes a message), two lines at most, the
+   whole quote a button that brings the content into view. */
+.ws-comment__anchor { display: block; width: 100%; padding: var(--space-xxs) var(--space-xs); border: 0; border-radius: var(--ws-radius-control); background: var(--ws-surface-sunk); color: var(--color-text-body); font: inherit; font-size: var(--ws-text-meta); line-height: var(--space-md); text-align: start; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-comment__anchor > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+@media (pointer: coarse) { .ws-comment__anchor { min-height: var(--ws-touch); } }
+@media (hover: hover) { .ws-comment__anchor:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
+/* A remark: the avatar, then everything else in the words' column. */
+.ws-comment__remark { display: grid; grid-template-columns: var(--ws-control-h-sm) minmax(0, 1fr); column-gap: var(--space-xs); row-gap: var(--space-xxs); }
+.ws-comment__remark > :not(.ws-avatar) { grid-column: 2; }
+.ws-comment__head { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--ws-control-h-sm); min-width: 0; }
+.ws-comment__name { overflow: hidden; color: var(--color-text-heading); font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); text-overflow: ellipsis; white-space: nowrap; }
+.ws-comment__head > .ws-icon-btn { margin-inline-start: auto; }
+.ws-comment__body { overflow-wrap: anywhere; white-space: pre-line; }
+.ws-comment__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--ws-text-meta); line-height: var(--space-md); }
+.ws-comment__replies { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-xs); }
+/* Resolved: the words step back to muted; a meta line says who resolved it and when, Reopen in the acts. */
+.ws-comment--resolved .ws-comment__body { color: var(--color-text-muted); }
+/* Mentions inside a remark's words or the composer's preview. */
+.ws-mention { color: var(--color-text-interactive); font-weight: 500; }
+.ws-mention--you { padding: 0 var(--space-3xs); border-radius: calc(var(--ws-radius-control) / 2); background: var(--ws-tint-needs); color: var(--ws-word-needs); }
+/* The composer: the house textarea, then a foot with the hint and its acts. */
+.ws-comments__composer { display: flex; flex-direction: column; gap: var(--space-xs); }
+.ws-comments__composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
+/* The acts keep to the end even when the hint wraps above them. */
+.ws-comments__composer-foot > :last-child { margin-inline-start: auto; }
+/* On the content: the stretch a thread is on. */
+.ws-comment-mark { border-radius: calc(var(--ws-radius-control) / 2); background: var(--ws-card-tint-blue); color: inherit; }
+.ws-comment-mark[aria-current="true"] { background: color-mix(in srgb, var(--ws-rating-middle) 20%, var(--color-surface)); }
 /* ---- Composer: the one chat box (North's): a square-cornered field 52 tall that grows with the words, its tools on the bottom line, a context tab riding on top ---- */
 /* The field: white, the 0.5 px card edge, 4 px corners, 52 at least, 8 inside (16 on the left of the words). It grows
    with the words and its tools stay on the bottom line. Focus draws the kit's 2 px navy ring on the box's own edge
@@ -1677,6 +1901,12 @@ input.ws-composer__words { text-overflow: ellipsis; }
 .ws-menu.ws-date-input__picker { transform-origin: top left; }
 .ws-date-input__head { display: flex; align-items: center; justify-content: space-between; height: var(--ws-control-h); padding: 0 var(--space-xxs); }
 .ws-date-input__month { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+/* A far month or year (#20): the month words become two small selects between the arrows (Seth's chip select), so a
+   date years away is one choice, and the native list types ahead ("2045"). */
+.ws-date-input__jump { display: flex; align-items: center; gap: var(--space-xxs); min-width: 0; }
+.ws-date-input__jump > .ws-select-wrap { align-self: center; }
+/* The foot, under Menu's line: Today at the start, Clear at the end for a date that may be left empty. */
+.ws-date-input__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: 0 var(--space-xxs) var(--space-3xs); }
 .ws-date-input__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs) 0; padding: var(--space-xxs); }
 .ws-date-input__letter { text-align: center; font-size: var(--ws-text-micro); line-height: var(--space-md); color: var(--color-text-muted); }
 .ws-date-input__cell { position: relative; display: flex; align-items: center; justify-content: center; height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-heading); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
@@ -1711,6 +1941,12 @@ input.ws-composer__words { text-overflow: ellipsis; }
 .ws-dialog { --ws-dialog-inset: var(--ws-band-inset); display: flex; flex-direction: column; width: calc(100% - var(--space-xl)); max-width: 42rem; /* raw: Ignite's Dialog cap (max-w-2xl); no width token */ max-height: calc(100dvh - var(--space-xl)); padding: 0; overflow: visible; border: var(--ws-rim) solid var(--ws-tray); border-radius: var(--ws-radius-drawer); background: var(--ws-raised); color: var(--color-text-body); box-shadow: var(--ws-shadow-float); }
 dialog.ws-dialog:not([open]) { display: none; }
 .ws-dialog::backdrop { background: var(--ws-scrim); }
+/* Mounted by the app (--mounted: a library such as Radix renders the pane as a div in a portal, for its focus trap or a
+   test runner with no showModal()). The scrim is its own element before the pane (__scrim, Radix's Overlay), the pane
+   fixed over the window and centred by its auto margins (a drawer keeps its own), both on z-modal. No translate of the
+   app's own: the motion moves the pane. Before the drawer's rules, so its height and margins win. */
+.ws-dialog__scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--ws-scrim); }
+.ws-dialog--mounted { position: fixed; inset: 0; z-index: var(--z-modal); height: fit-content; margin: auto; }
 /* The compact head (K6): one title, at most one line under it, the close and at most two icon acts. Facts, chips and
    buttons go in the content. It never wraps (a card's head drops its aside under a short title; here the close stays
    top right and the title wraps beside it). The close is Seth's 32 px tray square, centred on the title's first line
@@ -1754,9 +1990,20 @@ dialog.ws-dialog:not([open]) { display: none; }
    content and the foot rise 6 px out of a 3 px blur over .32 s soft, .08 s after it and 22 ms apart, as North's opened
    tile's details). It leaves faster and shorter: 8 px down to .98 over .12 s. A drawer slides in from its edge on the
    grow curve over .55 s ("Card grows open") and goes back over .4 s ("Card closes back into place"). Native <dialog>
-   only: @starting-style for the entrance, display and overlay allow-discrete so the exit plays. With reduced motion it
-   simply appears and goes. */
-dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (open.content delay) */ }
+   only: @starting-style for the entrance, display and overlay allow-discrete so the exit plays. A mounted pane
+   (--mounted) plays the same as keyframes, below. With reduced motion it simply appears and goes. */
+dialog.ws-dialog, .ws-dialog--mounted { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (open.content delay) */ }
+/* A mounted pane has no [open] to transition: it plays the same moves as keyframes on mount, and on its way out once the
+   app marks it leaving (Radix sets data-state="closed" on the pane and the scrim and waits for their animations to end
+   before it unmounts them; anything else sets data-leaving and removes them when theirs end, as Menu and Toast do). */
+.ws-dialog--mounted.ws-dialog--drawer { --ws-dialog-edge: calc(100% + var(--ws-stage-inset)); }
+.ws-dialog--mounted.ws-dialog--drawer-start { --ws-dialog-edge: calc(-100% - var(--ws-stage-inset)); }
+@keyframes ws-dialog-in { from { opacity: 0; transform: translateY(var(--space-sm-plus)) scale(var(--ws-open-scale-pane)); } }
+@keyframes ws-dialog-out { to { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-pane)); } }
+@keyframes ws-dialog-edge-in { from { transform: translateX(var(--ws-dialog-edge)); } }
+@keyframes ws-dialog-edge-out { to { transform: translateX(var(--ws-dialog-edge)); } }
+@keyframes ws-dialog-fade-in { from { opacity: 0; } }
+@keyframes ws-dialog-fade-out { to { opacity: 0; } }
 @media (prefers-reduced-motion: no-preference) {
   dialog.ws-dialog, dialog.ws-dialog::backdrop { transition: opacity var(--ws-duration-exit) var(--ws-ease-exit), transform var(--ws-duration-exit) var(--ws-ease-exit), overlay var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete, display var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete; }
   dialog.ws-dialog:not([open]) { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-pane)); }
@@ -1766,6 +2013,14 @@ dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (
   dialog.ws-dialog--drawer[open] { transition: opacity var(--ws-duration-grow) var(--ws-ease-grow), transform var(--ws-duration-grow) var(--ws-ease-grow), overlay 0s allow-discrete, display 0s allow-discrete; }
   dialog.ws-dialog--drawer:not([open]) { transform: translateX(calc(100% + var(--ws-stage-inset))); transition-duration: var(--ws-duration-shrink); transition-timing-function: var(--ws-ease-grow); }
   dialog.ws-dialog--drawer-start:not([open]) { transform: translateX(calc(-100% - var(--ws-stage-inset))); }
+  .ws-dialog--mounted { animation: ws-dialog-in var(--ws-spring-settle-duration) var(--ws-spring-settle) backwards; }
+  .ws-dialog--mounted.ws-dialog--drawer { animation: ws-dialog-edge-in var(--ws-duration-grow) var(--ws-ease-grow) backwards; }
+  .ws-dialog--mounted:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; pointer-events: none; }
+  .ws-dialog--mounted.ws-dialog--drawer:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-edge-out var(--ws-duration-shrink) var(--ws-ease-grow) forwards; }
+  .ws-dialog__scrim { animation: ws-dialog-fade-in var(--ws-duration-hover) var(--ws-ease-soft) backwards; }
+  .ws-dialog__scrim:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-fade-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; }
+  .ws-dialog--mounted:not([data-leaving], [data-state="closed"]) > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) var(--ws-dialog-after) backwards; }
+  @supports (animation-delay: calc(sibling-index() * 1ms)) { .ws-dialog--mounted:not([data-leaving], [data-state="closed"]) > * { animation-delay: calc(var(--ws-dialog-after) + (sibling-index() - 1) * var(--ws-stagger-detail)); } }
   dialog.ws-dialog[open] > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) var(--ws-dialog-after) backwards; }
   @supports (animation-delay: calc(sibling-index() * 1ms)) { dialog.ws-dialog[open] > * { animation-delay: calc(var(--ws-dialog-after) + (sibling-index() - 1) * var(--ws-stagger-detail)); } }
   @starting-style {
@@ -1874,6 +2129,8 @@ dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (
 /* Card look: the summary is 44 tall, 4 / 16 (16 all round made it 48 and more); the body 4 / 16 / 16 under it. */
 .ws-fold__summary--card { min-height: calc(var(--space-2xl) + var(--space-xxs)); flex-wrap: wrap; gap: var(--space-xs); border-radius: var(--ws-radius-card-inner); padding: var(--space-xxs) var(--ws-card-padding-lg); }
 .ws-fold__summary--card > .ws-fold__title { flex: 1 1 0; min-width: min(100%, var(--space-8xl)); }
+/* The note or end status keeps to the far end, on the title's line or, with no room, on its own line under it. */
+.ws-fold__summary--card > :not(.ws-fold__chevron, .ws-fold__title, .ws-fold__peek) { margin-left: auto; }
 details[open] > .ws-fold__summary--card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .ws-fold__summary--card:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
 .ws-fold__body--card { padding: var(--space-xxs) var(--ws-card-padding-lg) var(--ws-card-padding-lg); }
@@ -1916,6 +2173,34 @@ details[open] > summary > .ws-fold__chevron--down { transform: rotate(180deg); }
 @media (prefers-reduced-motion: no-preference) {
   .ws-fold__chevron { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
 }
+/* A card fold with more in its head (Madan, Marketing OS): acts that must not toggle it, words that show only while it
+   is folded, and a tone for the whole block.
+   Acts (ws-fold, the card around the details, and ws-fold__act after it): a button may not sit inside a summary (one
+   control inside another), so the acts sit beside it in the card's own grid. The details is a subgrid of the card's two
+   columns and rows: the summary takes the first column, the acts the second on the summary's row (filling it, so
+   its tint is whole; the acts centred on the summary's first 44, the title's band, not on a peek under it), the body
+   both columns under them. A long title wraps beside the acts instead of running under them. The acts' room tints with the summary under the pointer. */
+.ws-fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+.ws-fold > details { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1 / -1; grid-row: 1 / span 2; border-radius: inherit; }
+.ws-fold > details > summary { grid-column: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.ws-fold > details > :not(summary), .ws-fold > details::details-content { grid-column: 1 / -1; }
+.ws-fold__act { display: grid; grid-auto-flow: column; grid-template-rows: calc(var(--space-2xl) + var(--space-xxs)); grid-column: 2; grid-row: 1; align-content: start; align-items: center; gap: var(--space-xs); padding-right: var(--ws-card-padding-lg); border-top-right-radius: var(--ws-radius-card-inner); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-fold:has(> details:not([open])) > .ws-fold__act { border-bottom-right-radius: var(--ws-radius-card-inner); }
+@media (hover: hover) { .ws-fold:has(> details > summary:hover) > .ws-fold__act { background-color: var(--ws-fold-hover, var(--ws-surface-sunk)); } }
+/* Folded words (ws-fold__peek, the summary's last part): a line under the title, past the chevron, that shows only while
+   the fold is shut (a strip of variant chips). It is inside the summary, so it holds words and marks, never an act. */
+.ws-fold__peek { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--space-xxs); padding: 0 0 var(--space-sm) calc(var(--ws-icon) + var(--space-xs)); }
+details[open] > summary > .ws-fold__peek { display: none; }
+/* Tone (ws-fold--needs, --positive, --working on the card): Banner's three tints and words, for a fold that is a notice
+   (three checks failed, the import finished). The ground takes the tint, the title and the chevron the tone's words; a
+   hover is the navy wash over the tint, not the sunk cream. */
+.ws-fold--needs { --ws-fold-tint: var(--ws-tint-needs); --ws-fold-word: var(--ws-word-needs); }
+.ws-fold--positive { --ws-fold-tint: var(--ws-tint-live); --ws-fold-word: var(--ws-word-positive); }
+.ws-fold--working { --ws-fold-tint: var(--ws-card-tint-blue); --ws-fold-word: var(--color-text-interactive); }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) { --ws-fold-hover: var(--ws-hover); background-color: var(--ws-fold-tint); }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary :is(.ws-fold__title, .ws-fold__chevron) { color: var(--ws-fold-word); }
+@media (hover: hover) { :is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary--card:hover { background-color: var(--ws-hover); } }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary--card:active { background-color: var(--ws-hover-strong); }
 /* ---- Footer: the public site's navy footer, the wordmark, link columns and the legal line ---- */
 /* The band is navy in every theme, so its focus ring is white: the house navy ring would vanish on it. */
 .ws-footer { --ws-focus-color: var(--ws-on-inverse); width: 100%; background: var(--ws-inverse); padding: var(--space-4xl) var(--layout-margin); }
@@ -2267,6 +2552,40 @@ a.ws-goal-bars__label { border-radius: var(--ws-radius-chip); }
   .ws-hover-card[data-leaving] { animation: ws-hover-card-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; pointer-events: none; }
   .ws-hover-card--follow { transition: left var(--ws-spring-follow-duration) var(--ws-spring-follow), top var(--ws-spring-follow-duration) var(--ws-spring-follow); }
 }
+/* ---- InlineEdit: words that become a field in place. The rest state is a button holding the words, the editing state
+   an input or a textarea; both are __value, so they share one box (4 / 8 inside, pulled back 8 at the sides so the words
+   stay on the content edge) and the words' own type (the wrapper wears ws-section, ws-title or ws-body), and nothing jumps when
+   one turns into the other. At rest: no ground, a navy wash under the pointer, a pencil mark that shows on hover and
+   focus (always on touch, where there is no hover). Editing: the field's white ground, its fine edge and the focus
+   ring, the words keeping their own colour and weight. ---- */
+.ws-inline-edit { display: grid; gap: var(--space-3xs); min-width: 0; }
+.ws-inline-edit__value { display: block; box-sizing: border-box; width: calc(100% + var(--space-xs) * 2); min-width: 0; margin: 0 calc(var(--space-xs) * -1); padding: var(--space-xxs) var(--space-xs); border: 0; border-radius: var(--ws-radius-control); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; text-wrap: inherit; overflow-wrap: anywhere; }
+button.ws-inline-edit__value { cursor: text; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover { background: var(--ws-hover); } }
+button.ws-inline-edit__value:active { background: var(--ws-hover-strong); }
+/* No value yet: the placeholder's words, still the target. */
+.ws-inline-edit__value[data-empty] { color: var(--color-text-placeholder); }
+/* The pencil after the words (a ws-icon at the words' size, 16 at most, so it sits on their line): a hint, never the only
+   target (the whole box is). */
+.ws-inline-edit__mark { width: min(1em, var(--ws-icon)); height: min(1em, var(--ws-icon)); margin-inline-start: var(--space-xxs); color: var(--color-text-muted); opacity: 0; transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover .ws-inline-edit__mark { opacity: 1; } }
+button.ws-inline-edit__value:focus-visible .ws-inline-edit__mark { opacity: 1; }
+@media (pointer: coarse) { .ws-inline-edit__mark { opacity: 1; } }
+/* Editing: the same box as a field. A textarea grows with its words where the browser can (field-sizing). */
+.ws-inline-edit__value:is(input, textarea) { background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); }
+/* The ring is drawn inside the box, so it never crosses a label or a line 4 above or below. */
+.ws-inline-edit__value:focus-visible, .ws-inline-edit__value--typing { outline-offset: calc(var(--ws-focus-width) * -1); }
+textarea.ws-inline-edit__value { resize: none; field-sizing: content; }
+.ws-inline-edit__value:is(input, textarea)::placeholder { color: var(--color-text-placeholder); }
+.ws-inline-edit__value:is(input, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
+/* Touch: the box is 40 tall at least, at rest and editing alike (so it still does not jump), and the editing words are
+   16 at least: a field under 16 px makes iOS zoom the page. */
+@media (pointer: coarse) {
+  .ws-inline-edit__value { min-height: var(--ws-touch); }
+  .ws-inline-edit__value:is(input, textarea) { font-size: max(1em, var(--ws-text-value)); }
+}
+/* The editing state drawn still, for a preview or a mockup: the focus ring a real focus draws. */
+.ws-inline-edit__value--typing { outline: var(--ws-focus-width) solid var(--ws-focus-color); }
 /* ---- KanbanBoard: stages as equal 280 px columns on the sunk plate; the board scrolls sideways inside itself, a stage
    at a time on touch, the next stage peeking in; --fill makes it the page's remaining height with each column scrolling,
    so the sideways bar sits at the foot of the window (K16) ---- */
@@ -2298,9 +2617,40 @@ a.ws-goal-bars__label { border-radius: var(--ws-radius-chip); }
 .ws-kanban-board__card--dragging { box-shadow: var(--ws-shadow-pop); transform: rotate(-1deg); }
 .ws-kanban-board__who { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
 .ws-kanban-board__meta { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
+/* The standard card: one anatomy for every board (a ticket, an onboarding, a deal), its slots in a fixed order: the head
+   (the kind and its figure, the time in stage), the title, the meta, the chips, the foot (people, a tally, one act), an
+   optional act under it. A card with acts is an article: its title is the link and covers the whole card (__open), the
+   acts sit above that cover. */
+.ws-kanban-board__card { position: relative; }
+.ws-kanban-board__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); }
+.ws-kanban-board__kind { min-width: 0; overflow: hidden; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
+.ws-kanban-board__kind > strong { font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* Time in stage, muted; a stall takes the needs words and the pause mark, never a coloured rail. */
+.ws-kanban-board__age { display: inline-flex; flex: none; align-items: center; gap: var(--space-xxs); margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-kanban-board__age > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-kanban-board__age--stalled { font-weight: 500; color: var(--ws-word-needs); }
+/* The title: 14 / 20 medium navy, two lines at most (whole in its title), never underlined. Its cover is the card's
+   target and carries the focus ring, 2 px out as an a.ws-card's does. */
+.ws-kanban-board__open { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--ws-text-body); line-height: var(--ws-leading-row); font-weight: 500; color: var(--color-text-heading); text-decoration: none; overflow-wrap: anywhere; }
+.ws-kanban-board__open::after { content: ""; position: absolute; inset: calc(var(--ws-rim) * -1); border-radius: var(--ws-radius-card); }
+.ws-kanban-board__open:focus-visible { outline: 0; }
+.ws-kanban-board__open:focus-visible::after { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+.ws-kanban-board__chips { display: flex; flex-wrap: wrap; gap: var(--space-xxs); min-width: 0; margin-top: var(--space-xxs); }
+.ws-kanban-board__chips > .ws-chip { max-width: 100%; }
+.ws-kanban-board__card-foot { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; min-height: var(--ws-control-h-sm); margin-top: var(--space-xxs); }
+.ws-kanban-board__card-foot > .ws-kanban-board__who { flex: 1; }
+.ws-kanban-board__name { min-width: 0; overflow: hidden; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-body); white-space: nowrap; text-overflow: ellipsis; }
+.ws-kanban-board__card-end { display: flex; flex: none; align-items: center; gap: var(--space-xs); margin-left: auto; }
+.ws-kanban-board__tally { display: inline-flex; align-items: center; gap: var(--space-xxs); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-kanban-board__tally > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+/* Acts sit above the title's cover, so a press on one is the act, not the card. */
+.ws-kanban-board__card :is(.ws-icon-btn, .ws-btn) { position: relative; z-index: 1; }
+.ws-kanban-board__card-act { width: 100%; margin-top: var(--space-xxs); }
 .ws-kanban-board__empty { padding: var(--space-md) var(--space-xs); text-align: center; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
 /* Loading: a ghost the height of a card under the shimmer (add ws-shimmer). */
 .ws-kanban-board__ghost { display: block; height: calc(var(--ws-card-padding) * 2 + var(--ws-control-h-sm) + var(--space-xxs) + var(--ws-leading-control)); border-radius: var(--ws-radius-card); background: var(--ws-track); }
+/* The standard card's ghost: the height of a head, two title lines, a meta line and the foot. */
+.ws-kanban-board__ghost--card { height: calc(var(--ws-card-padding) * 2 + var(--ws-leading-control) * 2 + var(--ws-leading-row) * 2 + var(--ws-control-h-sm) + var(--space-xxs) * 4); }
 .ws-kanban-board__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* A board page (K16): the board takes the rest of a height-bound column (the shell's body, a fill page), every column
    runs its full height and scrolls on its own with its head stuck, so the sideways bar is always on screen. */
@@ -3151,6 +3501,70 @@ a.ws-leaderboard__row:focus-visible, button.ws-leaderboard__row:focus-visible {
 .ws-password-input__strength--fair .ws-password-input__segment:nth-child(-n + 2),
 .ws-password-input__strength--good .ws-password-input__segment:nth-child(-n + 3),
 .ws-password-input__strength--strong .ws-password-input__segment { background: var(--ws-password-tone); }
+/* ---- PlanTimeline: a plan's phases and tasks as bars across its dates. A row a phase (a task one step in), its name and
+   dates stuck at the left; each bar from its start to its end on one scale (--days in the window, --start and --span in
+   days from its first day); the phase in hand navy, done teal, late salmon, to come on the track; milestones diamonds;
+   today one fine line in the needs step through every row. Past its box (a phone) it scrolls sideways inside itself, the
+   names staying put. ---- */
+.ws-plan-timeline { --ws-plan-timeline-name: var(--space-8xl); --ws-plan-timeline-day: var(--space-xs); container: ws-plan-timeline / inline-size; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) 0; margin: calc(var(--space-xxs) * -1) calc(var(--space-xxs) * -1) calc(var(--space-xxs) * -1) 0; }
+/* 4 px of room above, below and at the far end (pulled back by the margin) so a bar's focus ring is never cut; none at
+   the start, where the names stick. */
+.ws-plan-timeline:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* A bar reached by Tab scrolls clear of the stuck names (the wider name column, so it holds on a phone too). */
+.ws-plan-timeline { scroll-padding-inline-start: calc(var(--space-8xl) + var(--space-xxs)); }
+/* The plot: the names' column and the window, never narrower than a day at 8 px, so a long plan scrolls rather than
+   squeezing its bars to slivers. */
+.ws-plan-timeline__plot { position: relative; min-width: calc(var(--ws-plan-timeline-name) + var(--days) * var(--ws-plan-timeline-day)); }
+@container ws-plan-timeline (width < 40rem) { .ws-plan-timeline__plot { --ws-plan-timeline-name: var(--space-7xl); } }
+/* The scale: a tick per month (or week) at its first day, 11 px medium muted, over the window only. Rows and the scale
+   are flex rows, not grids, so the stuck names can travel the whole row (a grid item sticks only inside its cell). */
+.ws-plan-timeline__scale { position: relative; display: flex; height: var(--space-lg); }
+.ws-plan-timeline__tick { position: absolute; top: 0; bottom: 0; left: calc(var(--ws-plan-timeline-name) + (100% - var(--ws-plan-timeline-name)) * var(--at) / var(--days)); display: flex; align-items: center; padding-left: var(--space-xxs); border-left: var(--ws-hairline) solid var(--ws-edge-card); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
+.ws-plan-timeline__rows { display: flex; flex-direction: column; }
+.ws-plan-timeline__row { display: flex; border-top: var(--ws-hairline) solid var(--ws-edge-card); }
+/* The name and its dates, stuck at the left on the card's cream. */
+.ws-plan-timeline__name { position: sticky; left: 0; z-index: 2; display: flex; flex: 0 0 var(--ws-plan-timeline-name); flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+/* Names and dates wrap rather than cut: the column is narrow on a phone and a plan's names are its whole point. */
+.ws-plan-timeline__title { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-heading); overflow-wrap: anywhere; }
+.ws-plan-timeline__when { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-plan-timeline__row:has([aria-current]) .ws-plan-timeline__title { font-weight: 600; }
+/* A late phase or task says so under its name, in needs-you words. */
+.ws-plan-timeline__when--late { font-weight: 500; color: var(--ws-word-needs); }
+/* A task: one step in under its phase, its name in the body words, its bar thinner. */
+.ws-plan-timeline__row--task .ws-plan-timeline__name { padding-left: var(--space-md); }
+.ws-plan-timeline__row--task .ws-plan-timeline__title { font-weight: 400; color: var(--color-text-body); }
+.ws-plan-timeline__track { position: relative; flex: 1; min-width: 0; min-height: var(--space-2xl); }
+/* A bar: 4 px corners, at least 24 wide so a one-day task is still a target; a link when it opens the phase. */
+.ws-plan-timeline__bar { --ws-plan-timeline-tone: var(--tone, var(--ws-track)); position: absolute; top: 50%; left: calc(var(--start) / var(--days) * 100%); width: max(calc(var(--span) / var(--days) * 100%), var(--space-lg)); height: var(--space-lg); border-radius: var(--ws-radius-control); background-color: var(--ws-plan-timeline-tone); transform: translateY(-50%); }
+.ws-plan-timeline__bar--wait { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
+.ws-plan-timeline__bar--done { --ws-plan-timeline-tone: var(--tone, var(--ws-chart-finished)); }
+.ws-plan-timeline__bar[aria-current] { --ws-plan-timeline-tone: var(--tone, var(--color-text-heading)); }
+.ws-plan-timeline__bar--late { --ws-plan-timeline-tone: var(--tone, var(--ws-chart-under-half)); }
+.ws-plan-timeline__row--task .ws-plan-timeline__bar { height: var(--space-md); }
+/* Every bar that opens keeps a 24 px target (a task's 16 px bar too), 40 on touch (K10). */
+a.ws-plan-timeline__bar::after { content: ""; position: absolute; inset: calc((100% - var(--ws-plan-timeline-hit, var(--space-lg))) / 2) 0; }
+@media (pointer: coarse) { .ws-plan-timeline { --ws-plan-timeline-hit: var(--ws-touch); } }
+a.ws-plan-timeline__bar { color: var(--color-text-heading); cursor: pointer; }
+@media (hover: hover) { a.ws-plan-timeline__bar:hover { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); } }
+a.ws-plan-timeline__bar:focus-visible { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+/* A milestone: a 10 px diamond on the day it falls, the cream inside a navy edge until it is reached, teal after. It
+   opens nothing (its phase's bar does); its name and date are in its label and title. */
+.ws-plan-timeline__milestone { position: absolute; z-index: 1; top: 50%; left: calc(var(--at) / var(--days) * 100%); width: var(--space-xs-plus); height: var(--space-xs-plus); border-radius: var(--ws-radius-chip); background: var(--color-bg-page); box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 3) var(--color-text-heading); transform: translate(-50%, -50%) rotate(45deg); }
+.ws-plan-timeline__milestone--done { background: var(--ws-chart-finished); box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 3) var(--color-bg-page); }
+/* Today: its word over the window and one 1 px line down through every row, in the salmon's AA step; under the stuck
+   names when the plan scrolls. Leave it out when today is outside the window. */
+.ws-plan-timeline__now { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--ws-plan-timeline-name) + (100% - var(--ws-plan-timeline-name)) * var(--at) / var(--days)); display: flex; flex-direction: column; align-items: center; font-size: var(--ws-text-micro); line-height: var(--space-lg); font-weight: 600; color: var(--ws-word-needs); transform: translateX(-50%); pointer-events: none; }
+/* On a track that scrolls (a phone) the plan opens on today: the browser scrolls to it once, on load. */
+.ws-plan-timeline__now { scroll-snap-align: center; scroll-initial-target: nearest; }
+.ws-plan-timeline__now > span { padding: 0 var(--space-xxs); background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+.ws-plan-timeline__now::after { content: ""; flex: 1; width: var(--ws-line); background: var(--ws-word-needs); }
+/* The names' column over the scale, so a tick scrolled under it hides. */
+.ws-plan-timeline__scale::before { content: ""; position: sticky; z-index: 2; left: 0; flex: 0 0 var(--ws-plan-timeline-name); background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+/* The far edge fades while days are hidden past it, lifting at the end; a focused plan drops it (the ring says it scrolls). */
+@supports (animation-timeline: scroll()) {
+  .ws-plan-timeline { mask-image: linear-gradient(90deg, currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+  .ws-plan-timeline:focus-visible { mask-image: none; }
+}
 /* ---- Plate: a card's facts set apart on the sunk cream (Seth's facts plate): label and value rows, stats, a track, a foot ---- */
 /* Seth's plate is 14 / 16 inside (the house had 12 all round). */
 .ws-plate { padding: var(--space-sm-plus) var(--space-md); }
@@ -3761,6 +4175,35 @@ a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width)
 .ws-stepper__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding-top: var(--space-3xs); }
 .ws-stepper__title { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
 
+/* A stall in words: the in-hand step's note when it has sat too long ("40 days in this stage"), and a milestone past its target. */
+.ws-stepper__late { color: var(--ws-word-needs); }
+/* Across: stages left to right, each mark over its words, the line running mark to mark. Equal columns (so the line
+   can reach the next mark's centre from its own item), each at least 120; past that the track scrolls inside and fades
+   at the edge that hides stages, like Segmented's stages. */
+.ws-stepper--across { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--space-7xl), 1fr); overflow-x: auto; scrollbar-width: none; }
+.ws-stepper--across::-webkit-scrollbar { display: none; }
+.ws-stepper--across > .ws-stepper__item { flex-direction: column; align-items: center; gap: var(--space-xs); padding: 0 var(--space-xxs); text-align: center; }
+.ws-stepper--across .ws-stepper__line { top: calc(var(--space-lg) / 2 - var(--ws-hairline)); bottom: auto; left: calc(50% + var(--space-lg) / 2); right: calc(var(--space-lg) / 2 - 50%); width: auto; height: calc(var(--ws-hairline) * 2); }
+.ws-stepper--across .ws-stepper__line-fill { transform-origin: left; }
+.ws-stepper--across .ws-stepper__body { align-items: center; padding-top: 0; }
+.ws-stepper--across .ws-stepper__title { text-wrap: balance; }
+/* The in-hand stage opens in view on a track that scrolls (a phone): the browser scrolls to it once, on load. */
+.ws-stepper--across > [aria-current="step"] { scroll-snap-align: center; scroll-initial-target: nearest; }
+/* Milestones: dated points on one row, an 8 px dot and its words, the line between them taking the room left. The
+   measure sits on the milestone (a date, or days since the start), so the line carries no words. 4 px of room on every
+   side, pulled back by a margin, so an act's focus ring and a text button's bleed are never cut by the scroll box. */
+.ws-stepper--milestones { flex-direction: row; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; padding: var(--space-xxs); margin: calc(var(--space-xxs) * -1); }
+.ws-stepper--milestones::-webkit-scrollbar { display: none; }
+.ws-stepper--milestones > .ws-stepper__item { flex: 1 0 auto; align-items: center; gap: var(--space-xs); padding: 0; }
+.ws-stepper--milestones > .ws-stepper__item:last-child { flex-grow: 0; }
+.ws-stepper--milestones .ws-stepper__line { position: relative; inset: auto; order: 1; flex: 1 0 var(--space-lg); width: auto; height: calc(var(--ws-hairline) * 2); }
+.ws-stepper--milestones .ws-stepper__line-fill { transform-origin: left; }
+.ws-stepper--milestones .ws-stepper__mark { width: var(--space-xs); height: var(--space-xs); }
+.ws-stepper--milestones .ws-stepper__mark--wait { box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 2) var(--ws-edge-card); }
+.ws-stepper--milestones .ws-stepper__body { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: var(--space-xxs-plus); padding-top: 0; white-space: nowrap; }
+@supports (animation-timeline: scroll()) {
+  .ws-stepper--across, .ws-stepper--milestones { mask-image: linear-gradient(90deg, transparent, currentColor var(--ws-fade-start), currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+}
 /* ---- StreakCalendar: one person's weeks as day cells, a navy dot a day done, today ringed in salmon ---- */
 .ws-streak-calendar__body { padding: 0 var(--ws-card-inset) var(--space-md); }
 .ws-streak-calendar__grid { display: grid; width: 100%; max-width: calc(var(--space-9xl) * 2 + var(--space-6xl) - var(--space-lg) - var(--space-sm)); grid-template-columns: calc(var(--space-4xl) - var(--space-xxs)) repeat(7, minmax(0, 1fr)); align-items: center; column-gap: var(--space-xxs); row-gap: var(--space-xxs); padding-top: var(--space-sm-plus); }
@@ -3814,6 +4257,8 @@ a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width)
 .ws-table tr > :first-child { padding-left: var(--ws-card-inset); }
 .ws-table tr > :last-child { padding-right: var(--ws-card-inset); }
 .ws-table .ws-table__wrap { white-space: normal; min-width: var(--space-9xl); }
+/* A short prose cell (a note, a reason) that wraps at whatever width its column gets, with no floor (#21). */
+.ws-table .ws-table__prose { white-space: normal; text-wrap: pretty; }
 /* Head: 13 / 18 medium muted labels, stuck to the top of the scroller. */
 .ws-table thead th { position: sticky; top: 0; z-index: 2; height: var(--ws-row-h-dense); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); border-bottom: var(--ws-divider); }
 .ws-table thead th[aria-sort="ascending"], .ws-table thead th[aria-sort="descending"] { color: var(--color-text-heading); }
@@ -3953,6 +4398,27 @@ a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width)
 .ws-testimonial__person { min-width: 0; }
 .ws-testimonial__name { font-size: var(--font-size-sm); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
 .ws-testimonial__role { font-size: var(--font-size-2xs); line-height: var(--space-md); color: var(--color-text-muted); }
+/* ---- TextDiff: two versions of a text, what was removed and what was added, told apart by more than colour. By line
+   (`ws-diff`): a framed block, each changed line on its tint with a sign in a 16 px gutter (minus removed, plus added),
+   unchanged runs folded behind a quiet act. Inline (`ws-diff__del`, `ws-diff__ins` in running words): removed words on
+   the needs tint and struck, added words on the live tint and underlined. Every change also says itself to a screen
+   reader (a ws-sr word inside the del or the ins). ---- */
+.ws-diff { display: grid; min-width: 0; overflow: clip; border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); color: var(--color-text-body); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); }
+.ws-diff__line { display: grid; grid-template-columns: var(--space-md) minmax(0, 1fr); column-gap: var(--space-xs); padding: var(--space-3xs) var(--space-sm); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
+.ws-diff__sign { font-weight: 600; text-align: center; user-select: none; }
+.ws-diff__line--removed { background: var(--ws-tint-needs); color: var(--ws-word-needs); }
+.ws-diff__line--added { background: var(--ws-tint-live); color: var(--ws-word-positive); }
+/* An unchanged run folded: the row itself is the act (it opens the run), on the sunk ground, its words in the text
+   column saying how many lines it holds, the wash under the pointer. */
+.ws-diff__skip { display: grid; grid-template-columns: var(--space-md) minmax(0, 1fr); column-gap: var(--space-xs); width: 100%; min-height: var(--space-lg); padding: var(--space-3xs) var(--space-sm); border: 0; background: var(--ws-surface-sunk); color: var(--color-text-heading); font: inherit; font-size: var(--ws-text-meta); font-weight: 500; text-align: start; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-diff__skip > * { grid-column: 2; }
+@media (pointer: coarse) { .ws-diff__skip { min-height: var(--ws-touch); } }
+@media (hover: hover) { .ws-diff__skip:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
+.ws-diff__skip:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* Inline: changed words inside a sentence. */
+.ws-diff__del, .ws-diff__ins { border-radius: calc(var(--ws-radius-control) / 2); text-decoration-thickness: var(--ws-line); }
+.ws-diff__del { background: var(--ws-tint-needs); color: var(--ws-word-needs); text-decoration-line: line-through; }
+.ws-diff__ins { background: var(--ws-tint-live); color: var(--ws-word-positive); text-decoration-line: underline; text-underline-offset: var(--space-3xs); }
 /* ---- ThemeSwitch: System, Light or Dark (D12), from gtm-ai-impact's switch (ds-dark.css:181-188): the word "Theme" in
    the muted words and a small Segmented of three icon radios (System, Light, Dark), the chosen one the navy act. It
    sits at the foot of the app's nav. The head script in its README sets <html data-theme> before the page paints. ---- */
@@ -4328,6 +4794,16 @@ a.ws-timeline__title { display: block; font-weight: 500; text-decoration: none;
 .ws-trend-line__lines path { fill: none; stroke: var(--ws-trend-line-tone); stroke-width: var(--ws-chart-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
 /* What is still to come (a projection): a dotted 1 px line. */
 .ws-trend-line__lines .ws-trend-line__ahead { stroke-width: var(--ws-line); stroke-dasharray: 0.1 calc(var(--ws-hairline) * 5); }
+/* Several series (up to 3, one unit, one axis): the first is the figure's own __draw and points; each other is a
+   __series box (display: contents, so its points still sit on the plot) holding its own __draw (the path only) and its
+   points. The tones run navy, teal, purple (salmon is the reference's), each series' own --tone over it; the key's
+   __key--2 and __key--3 match. With several series: no hatch (one area claims a whole, two areas cover each other), and
+   the period in progress keeps its series' tone (its name and the dotted __ahead say it). */
+.ws-trend-line__series { display: contents; }
+.ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--2 { --ws-trend-line-tone: var(--tone, var(--ws-chart-finished)); }
+.ws-trend-line__series ~ .ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--3 { --ws-trend-line-tone: var(--tone, var(--ws-chart-past-half)); }
+.ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__hatch { display: none; }
+.ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__point--now { --ws-trend-line-mark: var(--ws-trend-line-tone); }
 /* A point: its period's slot, from 12 above its value (the pointer's room) to the baseline. The column (::before) runs
    from the value to the baseline, its corners 1 px, cut by the grid's lines (set --ticks on the figure to the number of
    even steps the grid has; 1 cuts only at the top line); the dot (::after) is 8 on the value, ringed in the ground so the
@@ -4358,14 +4834,14 @@ a.ws-timeline__title { display: block; font-weight: 500; text-decoration: none;
   .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on) { anchor-name: --ws-trend-line-at; }
   .ws-trend-line__band { position-anchor: --ws-trend-line-at; left: anchor(left); right: anchor(right); width: auto; top: calc(anchor(top) + var(--ws-trend-line-hit)); background: repeating-linear-gradient(to bottom, var(--ws-trend-line-tone) 0 var(--ws-ring), transparent 0 calc(var(--ws-ring) * 2)) center / var(--ws-line) 100% no-repeat; }
   .ws-trend-line--bars .ws-trend-line__band { top: 0; background: var(--ws-hover); }
-  .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
+  .ws-trend-line__area:has(.ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
 }
 .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
 .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__point:not(:focus-visible, .ws-trend-line__point--on)::before { opacity: var(--ws-dim); }
 @media (hover: hover) {
   @supports (anchor-name: --a) {
     .ws-trend-line__point:hover { anchor-name: --ws-trend-line-at; }
-    .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
+    .ws-trend-line__area:has(.ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
   }
   .ws-trend-line__point:hover::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
   .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__point:not(:hover)::before { opacity: var(--ws-dim); }