@skillcdn/console 0.3.1 → 0.4.0

package/src/styles/console.css

@@ -3,98 +3,77 @@
  * per building block, all prefixed `sc-` so that a custom console's own styles never collide
  * with them. Re-skinning starts and mostly ends with the tokens.
  *
- * The look is SkillCDN's own: dark only, one blue accent and one warm point colour, the page a
- * dark field with a soft light high in it, and the surfaces panes of glass over that field, so
- * that the console reads as part of the same product as the site it is built for.
+ * The look is SkillCDN's own, on a light ground: one blue accent and one warm point colour, the
+ * page a pale field, and the surfaces panes of frosted glass over it, so that the console reads as
+ * part of the same product as the site it is built for (ADR-0040).
  */
 
 :root {
-  color-scheme: dark;
+  color-scheme: light;
 
-  /* Surfaces: the page's own dark, and the steps above it. */
-  --sc-color-bg: #0b1019;
-  --sc-color-bg-subtle: #0f1520;
-  --sc-color-bg-inset: #151d2b;
-  --sc-color-bg-raised: #192232;
-  --sc-color-border: #263042;
-  --sc-color-border-strong: #3b4960;
+  /* Surfaces: the page's own pale ground, the step into it, and white above it. */
+  --sc-color-bg: #f7f8fc;
+  --sc-color-bg-inset: #edf0f6;
+  --sc-color-bg-raised: #ffffff;
+  --sc-color-border: #e4e8ef;
+  --sc-color-border-strong: #7d899e;
 
-  /* Text. */
-  --sc-color-text: #e8ebf0;
-  --sc-color-text-muted: #9aa4b2;
-  --sc-color-text-faint: #8b97a9;
+  /* Text: the site's own ink on white. */
+  --sc-color-text: #14141a;
+  --sc-color-text-muted: #4b5563;
+  --sc-color-text-faint: #666c7c;
 
   /* The one accent: the blue that text and lines are drawn in, and the deeper blue a surface
-     is filled with so that a white label reads on it. */
-  --sc-color-accent: #6ea1ff;
-  --sc-color-accent-hover: #8fb6ff;
+     is filled with so that a white label reads on it. Under the pointer each is mixed a little
+     towards black where it is drawn. */
+  --sc-color-accent: #2c5bc4;
   --sc-color-accent-solid: #3b6fd4;
-  --sc-color-accent-solid-hover: #4171d8;
   --sc-color-accent-contrast: #ffffff;
-  --sc-color-accent-subtle: #111a2b;
+  --sc-color-accent-subtle: #dbe6ff;
   /* The point: the only warm colour, for what should be looked at first, never for a control. */
-  --sc-color-point: #ffb13a;
-  --sc-color-point-subtle: #2a1a0e;
-  --sc-color-selection: color-mix(in srgb, var(--sc-color-accent-solid) 60%, transparent);
+  --sc-color-point: #c2410c;
+  --sc-color-point-subtle: #fff1e6;
 
   /* Status. */
-  --sc-color-success: #4cc38a;
-  --sc-color-success-subtle: #0d1a13;
-  --sc-color-warning: #e3b341;
-  --sc-color-warning-subtle: #201a0c;
-  --sc-color-danger: #ff7b85;
-  --sc-color-danger-subtle: #230f12;
-
-  /* The ground: a dark field with two lights in it, a far one low and wide and a near one high
-     and soft, and the corners taken down, so the field has distance in it. The default UI
-     provides the field's face (the shell); a custom console may paint its own. */
-  --sc-color-sky: #0d1730;
-  --sc-color-far: #2b4d9455;
-  --sc-color-far-turn: #3c3f8e3d;
-  --sc-color-vignette: #04071199;
-  --sc-color-light-core: #dbe7ff;
-  --sc-color-light-body: #93b4f2;
-  --sc-color-light-mid: #7f7ae8b8;
-  --sc-color-light-halo: #3a5fd488;
-  --sc-light-strength: 0.3;
-  --sc-light-top: -18rem;
-  --sc-light-height: 34rem;
-  --sc-light-inset: 8%;
-  --sc-light-blur: 4rem;
-
-  /* Glass: what a pane over the field is made of. A wide blur with the colour behind pushed, an
-     even veil of the page's own dark, a thin lit edge, and a soft stand-off from the field. */
-  --sc-glass-backdrop: blur(24px) saturate(1.8);
-  --sc-color-glass: #111a2e66;
-  --sc-color-glass-hover: #18243f73;
-  --sc-color-glass-edge: #ffffff1c;
-  --sc-glass-surface: linear-gradient(var(--sc-color-glass), var(--sc-color-glass)) padding-box;
-  --sc-glass-surface-hover: linear-gradient(
-      var(--sc-color-glass-hover),
-      var(--sc-color-glass-hover)
-    )
-    padding-box;
-  --sc-glass-sheen: inset 0 1px 0 #ffffff4d, inset 0 0 0 1px #ffffff10, inset 0 3px 6px #ffffff12;
-  --sc-glass-lift: 0 0.75rem 2rem -0.75rem #00000059;
-  --sc-glass-lens: blur(4px) brightness(1.4) saturate(1.5) hue-rotate(-6deg);
-  --sc-glass-lens-width: 2px;
-  --sc-glass-lens-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  /* A surface inside a pane: no blur of its own, a little of the page's dark let through. */
-  --sc-color-sheet: color-mix(in srgb, var(--sc-color-bg) 72%, transparent);
-  --sc-color-sheet-hover: color-mix(in srgb, var(--sc-color-bg-raised) 80%, transparent);
-  --sc-color-field: color-mix(in srgb, var(--sc-color-bg) 78%, transparent);
-
-  /* Light falls from above: a lit thing spills downward, in the accent's own colour, in layers
-     that fall off the way brightness does. */
+  --sc-color-success: #146b44;
+  --sc-color-success-subtle: #d4efe1;
+  --sc-color-warning: #8f6100;
+  --sc-color-warning-subtle: #fff4cc;
+  --sc-color-danger: #b0273a;
+  --sc-color-danger-subtle: #fadadf;
+
+  /* The ground: a pale field, one gradient from the top. The default UI provides the field's
+     face (the shell); a custom console may paint its own. */
+  --sc-field-gradient: linear-gradient(160deg, #e3e9f7 0%, #eef1f9 42%, #f9fafd 100%);
+
+  /* Glass: what a pane over the field is made of. A wide blur with the colour behind pushed, a
+     white veil, a bright edge, and a soft stand-off from the field. */
+  --sc-glass-backdrop: blur(20px) saturate(1.6);
+  --sc-color-glass: #ffffff99;
+  --sc-color-glass-hover: #ffffffbf;
+  /* The rim: a hair of white along a pane's edge, its border. */
+  --sc-color-glass-edge: #ffffff;
+  /* The light that falls down a pane's face, from its top edge. */
+  --sc-glass-highlight: #ffffffb3;
+  --sc-glass-surface:
+    linear-gradient(170deg, var(--sc-glass-highlight), transparent 38%) padding-box,
+    linear-gradient(var(--sc-color-glass), var(--sc-color-glass)) padding-box;
+  --sc-glass-surface-hover:
+    linear-gradient(170deg, var(--sc-glass-highlight), transparent 38%) padding-box,
+    linear-gradient(var(--sc-color-glass-hover), var(--sc-color-glass-hover)) padding-box;
+  --sc-glass-sheen: inset 0 1px 0 #ffffff;
+  --sc-glass-lift: 0 0.5rem 1.5rem #1f268714, 0 1px 2px #1f26870f;
+  /* A surface inside a pane: no blur of its own, white with a little of the pane let through. */
+  --sc-color-sheet: color-mix(in srgb, var(--sc-color-bg-raised) 82%, transparent);
+  --sc-color-sheet-hover: color-mix(in srgb, var(--sc-color-bg-raised) 96%, transparent);
+
+  /* A lit thing casts the accent's own colour downward, in layers that fall off the way
+     brightness does. */
   --sc-glow:
-    0 0.125rem 0.5rem -0.25rem color-mix(in srgb, var(--sc-color-accent-hover) 38%, transparent),
-    0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--sc-color-accent) 22%, transparent),
-    0 1.25rem 3rem -1rem color-mix(in srgb, var(--sc-color-accent) 11%, transparent);
-  --sc-glow-bright:
-    0 0.125rem 0.5rem -0.25rem color-mix(in srgb, var(--sc-color-accent-hover) 70%, transparent),
-    0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--sc-color-accent) 45%, transparent),
-    0 1.25rem 3rem -1rem color-mix(in srgb, var(--sc-color-accent) 24%, transparent);
-  --sc-shadow-stage: 0 1.5rem 5rem #00000033;
+    0 0.125rem 0.5rem -0.25rem color-mix(in srgb, var(--sc-color-accent-solid) 40%, transparent),
+    0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--sc-color-accent-solid) 22%, transparent),
+    0 1.25rem 3rem -1rem color-mix(in srgb, var(--sc-color-accent-solid) 11%, transparent);
+  --sc-shadow-stage: 0 1.25rem 3.5rem #1a2b552e;
 
   /* Type. The Korean face comes first where the page provides it; the Latin stays with the
      system's faces. */
@@ -105,8 +84,8 @@
     ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "D2Coding",
     monospace;
 
-  --sc-text-xs: 0.75rem;
-  --sc-text-sm: 0.875rem;
+  --sc-text-xs: 0.8125rem;
+  --sc-text-sm: 0.9375rem;
   --sc-text-md: 1rem;
   --sc-text-lg: 1.125rem;
   --sc-text-xl: 1.375rem;
@@ -114,6 +93,10 @@
   --sc-leading-tight: 1.2;
   --sc-leading-normal: 1.6;
   --sc-leading-code: 1.7;
+  --sc-leading-snug: 1.45;
+  --sc-tracking-tight: -0.02em;
+  --sc-tracking-wide: 0.04em;
+  --sc-tracking-code: 0.12em;
   --sc-weight-normal: 400;
   --sc-weight-medium: 500;
   --sc-weight-bold: 650;
@@ -139,20 +122,39 @@
   --sc-radius-xl: 20px;
   --sc-radius-full: 999px;
   --sc-border: 1px solid var(--sc-color-border);
+  --sc-hairline: 1px solid color-mix(in srgb, var(--sc-color-border) 70%, transparent);
+  --sc-border-strong: 1px solid var(--sc-color-border-strong);
 
   /* Layout. */
-  --sc-width-page: 84rem;
+  --sc-gutter: var(--sc-space-7);
   --sc-width-prose: 46rem;
   --sc-width-aside: 18rem;
   --sc-column-width: 13.5rem;
   --sc-header-height: 3.75rem;
-  --sc-brand-size: 1rem;
-  --sc-brand-size-compact: 0.875rem;
+  /* The lockup: the symbol's size, and the wordmark's height and the room between them as
+     fractions of it, the fractions those of the brand's lockup file (the wordmark 73.77 tall
+     on a symbol of 100, 31.98 between them). */
+  --sc-brand-size: 1.375rem;
+  --sc-brand-size-compact: 1.25rem;
+  --sc-brand-wordmark-ratio: 0.7377;
+  --sc-brand-gap-ratio: 0.3198;
   --sc-control-size: 2.5rem;
   --sc-focus-ring: 2px solid var(--sc-color-accent);
+  /* A scrollbar's thumb: a light grey, there when it is needed and quiet otherwise. */
+  --sc-scrollbar-thumb: color-mix(in srgb, var(--sc-color-border-strong) 45%, transparent);
+  /* A select's chevron: a thin stroke in a grey that reads on a light field and a dark one. */
+  --sc-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6371' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --sc-transition: 120ms ease-out;
 }
 
+/* A page in Korean (the pages say their language on <html>): Hangul fills more of its box than
+   Latin capitals and sits higher in it, so a label is lifted less, and the tracking is off. */
+:root:lang(ko) {
+  --sc-label-lift: -0.083em;
+  --sc-tracking-tight: 0;
+  --sc-tracking-wide: 0;
+}
+
 /* Reset: only what the pages need. */
 
 *,
@@ -164,6 +166,10 @@
 html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  /* The room for a scrollbar is kept on every page, so that a page that scrolls and one that does
+     not put the header and the page at the same place. */
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--sc-scrollbar-thumb) transparent;
   scroll-padding-top: calc(var(--sc-header-height) + var(--sc-space-6));
 }
 
@@ -205,7 +211,7 @@ h3,
 h4 {
   line-height: var(--sc-leading-tight);
   font-weight: var(--sc-weight-bold);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--sc-tracking-tight);
   text-wrap: balance;
 }
 
@@ -222,7 +228,7 @@ a {
 }
 
 a:hover {
-  color: var(--sc-color-accent-hover);
+  color: color-mix(in srgb, var(--sc-color-accent) 85%, #000);
 }
 
 code,
@@ -262,7 +268,7 @@ table {
 }
 
 ::selection {
-  background: var(--sc-color-selection);
+  background: color-mix(in srgb, var(--sc-color-accent-solid) 25%, transparent);
   color: var(--sc-color-accent-contrast);
 }
 
@@ -319,53 +325,12 @@ table {
   flex-direction: column;
   min-height: 100dvh;
   overflow-x: clip;
-  background-color: var(--sc-color-sky);
-  /* The far light: low, wide and vague, which is what distance does to a light. */
-  background-image: radial-gradient(
-    ellipse 120% 64% at 50% 92%,
-    var(--sc-color-far),
-    var(--sc-color-far-turn) 48%,
-    transparent 72%
-  );
+  background-color: var(--sc-color-bg);
+  /* Fixed to the window, so that the page travels over the field and the field stays. */
+  background-image: var(--sc-field-gradient);
   background-attachment: fixed;
 }
 
-/* The near light, high behind the header: an ellipse that is blurred rather than a gradient,
-   because a blur falls off the way light does. Fixed to the window, so that the page travels
-   through the light and the light stays where it is. */
-.sc-shell::before {
-  content: "";
-  position: fixed;
-  z-index: -1;
-  top: var(--sc-light-top);
-  left: var(--sc-light-inset);
-  right: var(--sc-light-inset);
-  height: var(--sc-light-height);
-  background: radial-gradient(
-    ellipse closest-side,
-    var(--sc-color-light-core) 0%,
-    var(--sc-color-light-body) 14%,
-    var(--sc-color-light-mid) 42%,
-    var(--sc-color-light-halo) 70%,
-    transparent 100%
-  );
-  filter: blur(var(--sc-light-blur));
-  opacity: var(--sc-light-strength);
-  pointer-events: none;
-}
-
-/* The air over both lights: the corners and the foot of the window taken down. */
-.sc-shell::after {
-  content: "";
-  position: fixed;
-  z-index: -1;
-  inset: 0;
-  background-image:
-    linear-gradient(to bottom, transparent 60%, var(--sc-color-vignette)),
-    radial-gradient(ellipse 130% 110% at 50% 30%, transparent 36%, var(--sc-color-vignette) 100%);
-  pointer-events: none;
-}
-
 .sc-skip {
   position: absolute;
   top: var(--sc-space-2);
@@ -388,8 +353,8 @@ table {
   top: 0;
   z-index: 10;
   border-bottom: var(--sc-border);
-  background: color-mix(in srgb, var(--sc-color-bg) 82%, transparent);
-  backdrop-filter: blur(12px) saturate(1.4);
+  background: color-mix(in srgb, var(--sc-color-bg) 70%, transparent);
+  backdrop-filter: var(--sc-glass-backdrop);
 }
 
 .sc-header-inner {
@@ -397,22 +362,21 @@ table {
   align-items: center;
   gap: var(--sc-space-4);
   width: 100%;
-  max-width: var(--sc-width-page);
   height: var(--sc-header-height);
-  margin-inline: auto;
-  padding-inline: var(--sc-space-5);
+  padding-inline: var(--sc-gutter);
 }
 
 /* The brand: the lockup of the symbol and the wordmark where the console has marks, the name
-   of the workspace where it has none. The lockup stands as tall as the words beside it. */
+   of the workspace where it has none. The symbol, the wordmark and the room between them keep
+   the proportions of the brand's lockup file. */
 .sc-brand {
   display: inline-flex;
   flex: none;
   align-items: center;
-  gap: var(--sc-space-2);
+  gap: calc(var(--sc-brand-size) * var(--sc-brand-gap-ratio));
   color: var(--sc-color-text);
   font-weight: var(--sc-weight-bold);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--sc-tracking-tight);
   text-decoration: none;
   white-space: nowrap;
 }
@@ -428,7 +392,7 @@ table {
 
 .sc-brand-wordmark {
   width: auto;
-  height: var(--sc-brand-size);
+  height: calc(var(--sc-brand-size) * var(--sc-brand-wordmark-ratio));
 }
 
 .sc-brand-name {
@@ -473,10 +437,8 @@ table {
    the tabs scroll sideways where they do not fit, and nothing in the bar ever scrolls down. */
 .sc-tabs {
   width: 100%;
-  max-width: var(--sc-width-page);
-  margin-inline: auto;
   margin-bottom: -1px;
-  padding-inline: var(--sc-space-5);
+  padding-inline: var(--sc-gutter);
   overflow: auto hidden;
   scrollbar-width: none;
 }
@@ -531,7 +493,7 @@ table {
   display: flex;
   flex: none;
   align-items: center;
-  gap: var(--sc-space-3);
+  gap: 0;
   margin-left: auto;
 }
 
@@ -543,9 +505,9 @@ table {
 .sc-menu-summary {
   display: flex;
   align-items: center;
-  gap: var(--sc-space-2);
+  gap: 0.375rem;
   min-height: var(--sc-control-size);
-  padding-inline: var(--sc-space-2);
+  padding-inline: var(--sc-space-1) var(--sc-space-2);
   border-radius: var(--sc-radius-md);
   color: var(--sc-color-text-muted);
   list-style: none;
@@ -641,16 +603,32 @@ table {
   border-top: var(--sc-border);
 }
 
-.sc-menu-heading {
-  display: block;
-  padding: var(--sc-space-1) var(--sc-space-3);
+/* The small capitals over a group: a menu's heading, a field's label, a fact's name, a day of the
+   feed, a table's head. `.sc-eyebrow` is the class for a label of your own. */
+.sc-eyebrow,
+.sc-menu-heading,
+.sc-field-label,
+.sc-facts dt,
+.sc-feed-day-title,
+.sc-report > .sc-time,
+.sc-task-aside .sc-section-title,
+.sc-decision-label,
+.sc-calendar-grid th,
+.sc-workload thead th,
+.sc-goal-tasks-state,
+.sc-facts-row dt {
   color: var(--sc-color-text-faint);
   font-size: var(--sc-text-xs);
   font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
+  letter-spacing: var(--sc-tracking-wide);
   text-transform: uppercase;
 }
 
+.sc-menu-heading {
+  display: block;
+  padding: var(--sc-space-1) var(--sc-space-3);
+}
+
 .sc-menu-chosen {
   color: var(--sc-color-accent);
   font-weight: var(--sc-weight-medium);
@@ -667,13 +645,12 @@ table {
 .sc-live {
   width: 0.5rem;
   height: 0.5rem;
-  border-radius: 50%;
+  border-radius: var(--sc-radius-full);
   background: var(--sc-color-text-faint);
 }
 
 .sc-live-on {
   background: var(--sc-color-success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-color-success) 25%, transparent);
 }
 
 /* The page. */
@@ -685,29 +662,32 @@ table {
   flex: 1;
   flex-direction: column;
   width: 100%;
-  max-width: var(--sc-width-page);
-  margin-inline: auto;
-  padding: var(--sc-space-6) var(--sc-space-5) var(--sc-space-8);
+  padding: var(--sc-space-6) var(--sc-gutter) var(--sc-space-8);
 }
 
-/* A page as wide as the window: the board, whose columns want every bit of it. */
+/* A page as wide as the window: the board, whose columns want every bit of it. It starts at the
+   same height as the other pages and, being as tall as the window, ends with the same room. */
 .sc-main-wide {
   max-width: none;
-  padding: var(--sc-space-5) var(--sc-space-4) var(--sc-space-4);
+  padding: var(--sc-space-6) var(--sc-gutter);
 }
 
+/* A page that takes the whole window takes the header with it, so that the lockup, the tabs and
+   the page start on one line, as they do on every other page. */
 .sc-page-head {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
   gap: var(--sc-space-3);
-  margin-bottom: var(--sc-space-4);
+  margin-bottom: var(--sc-space-5);
+  padding-bottom: var(--sc-space-4);
+  border-bottom: var(--sc-hairline);
 }
 
 .sc-page-title {
   font-size: var(--sc-text-2xl);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--sc-tracking-tight);
 }
 
 /* The ways a page offers at its head, side by side. */
@@ -755,6 +735,8 @@ table {
 /* On the wide page the head and the lead keep out of the board's way. */
 .sc-main-wide .sc-page-head {
   margin-bottom: var(--sc-space-3);
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
 .sc-main-wide .sc-lead {
@@ -770,6 +752,15 @@ table {
   font-size: var(--sc-text-lg);
 }
 
+/* After the name of a section a line runs to the end: the section starts here. */
+.sc-section-title::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  margin-inline-start: var(--sc-space-2);
+  background: var(--sc-color-border);
+}
+
 /*
  * Panes: the surfaces of the page are glass over the field. A pane is a veil of the page's own
  * dark over a blur of what is behind it, with a thin lit edge; two panes differ only in what
@@ -787,37 +778,17 @@ table {
 .sc-facts {
   position: relative;
   isolation: isolate;
-  border: 1px solid transparent;
+  border: 1px solid var(--sc-color-glass-edge);
   background: var(--sc-glass-surface);
   backdrop-filter: var(--sc-glass-backdrop);
   box-shadow: var(--sc-glass-sheen), var(--sc-glass-lift);
 }
 
-.sc-panel::before,
-.sc-column::before,
-.sc-project::before,
-.sc-decision::before,
-.sc-run::before,
-.sc-comment::before,
-.sc-sign-in::before,
-.sc-facts::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  padding: var(--sc-glass-lens-width);
-  border-radius: inherit;
-  background: var(--sc-color-glass-edge);
-  backdrop-filter: var(--sc-glass-lens);
-  mask: var(--sc-glass-lens-mask);
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
-/* A column's frame stands in front of what scrolls within it: a card scrolling out goes under
-   the lit edge, never over it. The other panes do not scroll, and keep the rim under the content. */
-.sc-column::before {
-  z-index: 1;
+/* A column of the board has no rim and no lift: its glass alone parts it from the field, so that
+   no line runs down its sides and the gaps between columns stay as light as the field. */
+.sc-column {
+  border-color: transparent;
+  box-shadow: var(--sc-glass-sheen);
 }
 
 .sc-panel {
@@ -836,13 +807,13 @@ table {
 .sc-person-row,
 .sc-skill,
 .sc-doc-row,
-.sc-feed-item,
 .sc-card,
 .sc-option,
 .sc-answer,
 .sc-report-list {
   border: var(--sc-border);
   background: var(--sc-color-sheet);
+  box-shadow: 0 1px 2px #1f26870f;
 }
 
 .sc-loading {
@@ -894,18 +865,19 @@ table {
 }
 
 .sc-button-primary:hover:not(:disabled) {
-  background: var(--sc-color-accent-solid-hover);
+  background: color-mix(in srgb, var(--sc-color-accent-solid) 90%, #000);
   color: var(--sc-color-accent-contrast);
-  box-shadow: var(--sc-glow-bright);
+  box-shadow: var(--sc-glow);
 }
 
 .sc-button-secondary {
-  background: var(--sc-color-field);
-  border-color: var(--sc-color-border-strong);
+  background: var(--sc-color-bg-raised);
+  border-color: var(--sc-color-border);
   color: var(--sc-color-text);
 }
 
 .sc-button-secondary:hover:not(:disabled) {
+  border-color: var(--sc-color-border-strong);
   background: var(--sc-color-bg-raised);
   color: var(--sc-color-text);
 }
@@ -933,24 +905,45 @@ table {
 
 /* Badges: a pill on the grid, its label lifted to the middle of it. */
 
+/* A badge is a small pill: a hair of room above and below its word, a little more at its sides,
+   so that a row of them on a card stays low. */
 .sc-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--sc-space-1);
-  padding-inline: var(--sc-space-2);
-  padding-block: calc(var(--sc-space-1) - var(--sc-label-lift))
-    calc(var(--sc-space-1) + var(--sc-label-lift));
-  border: 1px solid var(--sc-color-border);
+  padding-inline: calc(var(--sc-space-1) * 1.5);
+  padding-block: calc(var(--sc-space-1) / 2 - var(--sc-label-lift))
+    calc(var(--sc-space-1) / 2 + var(--sc-label-lift));
+  border: var(--sc-border);
   border-radius: var(--sc-radius-full);
   font-size: var(--sc-text-xs);
   font-weight: var(--sc-weight-medium);
-  line-height: 1.25;
+  line-height: var(--sc-leading-snug);
   white-space: nowrap;
 }
 
+/* Where the browser can fit a line box to the glyphs, a badge's words are centred on their
+   cap height and baseline, whatever script they are in; the lift above is for where it cannot. */
+@supports (text-box: trim-both cap alphabetic) {
+  .sc-badge {
+    padding-block: var(--sc-space-1) calc(var(--sc-space-1) - 1px);
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+  }
+}
+
+/*
+ * The tones of a badge, each a meaning: neutral for what merely is; accent (blue) for what is at
+ * work; success (green) for what is done; warning (amber) for what wants attention soon; point
+ * (orange) for what presses now, or is someone's; danger (red) for what is late or has failed.
+ * Each is a soft fill with its words in the same hue and no line around it, the categories
+ * alike, so that every badge on a page is one kind of pill; the fills are deep enough to stand
+ * off the sheet on their own.
+ */
 .sc-badge-neutral {
-  background: var(--sc-color-bg-subtle);
-  color: var(--sc-color-text-muted);
+  border-color: transparent;
+  background: #dfe3eb;
+  color: #3f4756;
 }
 
 .sc-badge-accent {
@@ -972,11 +965,11 @@ table {
   color: var(--sc-color-success);
 }
 
-/* A state and not a fill: the warm colour is on the words and the line stays a line. */
+/* Words on a yellow fill are a warm charcoal: a dark yellow reads as a muddy brown. */
 .sc-badge-warning {
-  background: var(--sc-color-bg-subtle);
-  border-color: var(--sc-color-border-strong);
-  color: var(--sc-color-warning);
+  background: var(--sc-color-warning-subtle);
+  border-color: transparent;
+  color: #44403c;
 }
 
 .sc-badge-danger {
@@ -992,7 +985,7 @@ table {
   aspect-ratio: 1;
   object-fit: cover;
   border: var(--sc-border);
-  border-radius: 22%;
+  border-radius: var(--sc-radius-full);
   background: var(--sc-color-bg-inset);
 }
 
@@ -1037,6 +1030,12 @@ table {
   font-weight: var(--sc-weight-medium);
 }
 
+/* The picture in the menu's label sits in the control with a little room around it. */
+.sc-menu-summary .sc-avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
 /* In the menu's label a long name gives way before the header runs out of room. */
 .sc-menu-summary .sc-person-login {
   max-width: 11rem;
@@ -1053,7 +1052,7 @@ table {
   gap: var(--sc-space-4);
   margin-bottom: var(--sc-space-4);
   padding: var(--sc-space-4);
-  border: 1px solid var(--sc-color-border-strong);
+  border: var(--sc-border);
   border-radius: var(--sc-radius-md);
   background: var(--sc-color-sheet);
   font-size: var(--sc-text-sm);
@@ -1087,7 +1086,7 @@ table {
 
 .sc-empty {
   padding: var(--sc-space-7) var(--sc-space-5);
-  border: 1px dashed var(--sc-color-border-strong);
+  border: 1px dashed var(--sc-color-border);
   border-radius: var(--sc-radius-lg);
   text-align: center;
 }
@@ -1116,7 +1115,7 @@ table {
   height: 1.25rem;
   border: 2px solid var(--sc-color-border-strong);
   border-top-color: var(--sc-color-accent);
-  border-radius: 50%;
+  border-radius: var(--sc-radius-full);
 }
 
 /* The ring turns whatever the motion preference: it says that the page still waits, and a ring
@@ -1167,10 +1166,6 @@ table {
 
 .sc-field-label {
   color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
 }
 
 .sc-field-row {
@@ -1184,9 +1179,9 @@ table {
   width: 100%;
   min-height: var(--sc-control-size);
   padding: var(--sc-space-2) var(--sc-space-3);
-  border: 1px solid var(--sc-color-border-strong);
+  border: var(--sc-border-strong);
   border-radius: var(--sc-radius-md);
-  background: var(--sc-color-field);
+  background: var(--sc-color-bg-raised);
   color: var(--sc-color-text);
   font-size: var(--sc-text-sm);
   transition:
@@ -1198,6 +1193,38 @@ table {
   color: var(--sc-color-text-faint);
 }
 
+/* A file field: as tall as any other field, what it holds on one line with its button, and
+   the button the browser gives it drawn as a small button of the console's own. */
+.sc-input[type="file"] {
+  display: flex;
+  align-items: center;
+  padding-block: 0;
+  color: var(--sc-color-text-muted);
+  line-height: var(--sc-leading-snug);
+  cursor: pointer;
+}
+
+.sc-input[type="file"]::file-selector-button {
+  margin-inline-end: var(--sc-space-3);
+  padding: calc(var(--sc-space-1) + 1px) var(--sc-space-3);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-sm);
+  background: var(--sc-color-sheet);
+  color: var(--sc-color-text);
+  font: inherit;
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+  cursor: pointer;
+  transition:
+    background var(--sc-transition),
+    border-color var(--sc-transition);
+}
+
+.sc-input[type="file"]:hover::file-selector-button {
+  border-color: var(--sc-color-border-strong);
+  background: var(--sc-color-sheet-hover);
+}
+
 .sc-input:hover:not(:disabled) {
   border-color: color-mix(in srgb, var(--sc-color-border-strong) 60%, var(--sc-color-accent));
 }
@@ -1209,10 +1236,22 @@ table {
 }
 
 .sc-input:disabled {
-  opacity: 0.6;
+  opacity: 0.55;
   cursor: not-allowed;
 }
 
+/* A select draws the browser's chevron itself, a thin stroke, as far from the edge as the words
+   are from the other one: the browser's own arrow sits on the border and takes no padding. The
+   chevron is a picture held in a token, so that a console of its own may draw its own. */
+select.sc-input {
+  appearance: none;
+  padding-right: calc(var(--sc-space-3) * 2 + 0.625rem);
+  background-image: var(--sc-select-chevron);
+  background-position: right var(--sc-space-3) center;
+  background-size: 0.625rem 0.375rem;
+  background-repeat: no-repeat;
+}
+
 /* What people write is prose first, so the box they write in is set in the page's own face. */
 .sc-textarea {
   min-height: 6rem;
@@ -1238,6 +1277,150 @@ table {
   justify-self: start;
 }
 
+/* The workers of a task on its form: each a chip with the way to take them off, and the way to add one. */
+.sc-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+}
+
+.sc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+  min-height: var(--sc-control-size);
+  padding: 0 var(--sc-space-1) 0 var(--sc-space-2);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-chip-remove,
+.sc-picker-clear {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.sc-chip-remove:hover:not(:disabled),
+.sc-picker-clear:hover:not(:disabled) {
+  background: var(--sc-color-bg-raised);
+  color: var(--sc-color-text);
+}
+
+.sc-chip-remove:focus-visible,
+.sc-picker-clear:focus-visible {
+  outline: var(--sc-focus-ring);
+}
+
+.sc-chips .sc-chip-add {
+  width: auto;
+  min-width: 10rem;
+}
+
+/* A picker: the field that searches a listing, its page of results under it, and the choice in its place. */
+.sc-picker {
+  position: relative;
+  min-width: 0;
+}
+
+.sc-picker-chosen {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-2);
+  min-height: var(--sc-control-size);
+  padding: var(--sc-space-1) var(--sc-space-1) var(--sc-space-1) var(--sc-space-3);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-raised);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-picker-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-picker-list {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + var(--sc-space-1));
+  right: 0;
+  left: 0;
+  max-height: 18rem;
+  margin: 0;
+  padding: var(--sc-space-1);
+  overflow-y: auto;
+  list-style: none;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  box-shadow: var(--sc-shadow-stage);
+  font-size: var(--sc-text-sm);
+}
+
+/* Where the window has no room below the field, and more above, the list stands above it. */
+.sc-picker-list-above {
+  top: auto;
+  bottom: calc(100% + var(--sc-space-1));
+}
+
+.sc-picker-option {
+  padding: var(--sc-space-2);
+  overflow: hidden;
+  border-radius: var(--sc-radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sc-picker-option-active {
+  background: var(--sc-color-bg-raised);
+}
+
+.sc-picker-note {
+  padding: var(--sc-space-2);
+}
+
+/* The workers of a task on a card or a row: pictures side by side, and how many more. */
+.sc-workers {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sc-workers > * + * {
+  margin-left: -0.375rem;
+}
+
+.sc-workers-more {
+  margin-inline: var(--sc-space-1);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-worker-list {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .sc-form-actions {
   display: flex;
   flex-wrap: wrap;
@@ -1254,22 +1437,22 @@ table {
    scroll sideways when it is not, and each column scrolls within itself. */
 
 .sc-board {
-  display: grid;
+  display: flex;
   flex: 1 1 0;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(var(--sc-column-width), 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  align-items: stretch;
   gap: var(--sc-space-3);
   min-height: 24rem;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: thin;
-  scrollbar-color: var(--sc-color-border-strong) transparent;
+  scrollbar-color: var(--sc-scrollbar-thumb) transparent;
 }
 
 .sc-column {
   display: flex;
+  flex: 1 0 var(--sc-column-width);
   flex-direction: column;
+  min-width: 0;
   min-height: 0;
   /* The body scrolls; the column clips, so that nothing of it reaches the board's own scrolling. */
   overflow: hidden;
@@ -1287,27 +1470,76 @@ table {
 }
 
 .sc-column-header h2 {
-  font-size: var(--sc-text-xs);
+  font-size: var(--sc-text-sm);
   font-weight: var(--sc-weight-bold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
 }
 
-.sc-column-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  padding-inline: var(--sc-space-2);
-  border-radius: var(--sc-radius-full);
-  background: var(--sc-color-bg-inset);
+/* The name of a column stands first; its count and the way to fold it keep to the end. */
+.sc-column-header > .sc-column-title {
+  margin-inline-end: auto;
+}
+
+/* The way to fold a column of finished work, or to open it again. */
+.sc-column-toggle {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
   color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  line-height: 1.5rem;
+  transition:
+    background var(--sc-transition),
+    color var(--sc-transition);
 }
 
-.sc-column-in_progress .sc-column-title,
+.sc-column-toggle:hover {
+  background: var(--sc-color-bg-inset);
+  color: var(--sc-color-text);
+}
+
+.sc-column-toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* A folded column is a strip: the way to open it on top, its name down its length, its count. */
+/* A folded column is its header alone, the height of a header and as wide as its name: the way
+   to open it, the name and the count in a row, at the top of the board. */
+.sc-column-folded {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  width: auto;
+}
+
+.sc-column-folded .sc-column-header {
+  gap: var(--sc-space-2);
+  padding: var(--sc-space-3) var(--sc-space-4) var(--sc-space-3) var(--sc-space-3);
+  border-bottom: 0;
+}
+
+.sc-column-folded .sc-column-toggle {
+  order: -1;
+}
+
+.sc-column-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding-inline: var(--sc-space-2);
+  border-radius: var(--sc-radius-full);
+  background: color-mix(in srgb, var(--sc-color-text-muted) 12%, transparent);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+  line-height: 1.5rem;
+}
+
+.sc-column-in_progress .sc-column-title,
 .sc-column-in_review .sc-column-title {
   color: var(--sc-color-accent);
 }
@@ -1320,22 +1552,38 @@ table {
   color: var(--sc-color-text-faint);
 }
 
+.sc-column-folded .sc-column-header > .sc-column-title {
+  margin-inline-end: 0;
+}
+
+/* The cards of a column scroll within it; where more of them are below, the last one in view
+   fades at the foot rather than being cut, the room below the cards keeping a whole one clear. */
 .sc-column-body {
   display: grid;
   flex: 1;
   align-content: start;
   gap: var(--sc-space-2);
   min-height: 0;
-  padding: var(--sc-space-2);
+  padding: var(--sc-space-2) var(--sc-space-2) var(--sc-space-6);
   overflow-y: auto;
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sc-space-6)), transparent);
   scrollbar-width: thin;
-  scrollbar-color: var(--sc-color-border-strong) transparent;
+  scrollbar-color: transparent transparent;
+}
+
+/* The scrollbar of a column shows only while the pointer is over the column; the fade at the foot
+   says there is more. */
+.sc-column:hover .sc-column-body,
+.sc-column-body:focus-within {
+  scrollbar-color: var(--sc-scrollbar-thumb) transparent;
 }
 
+/* A card is compact, since a column holds many: the number, the title and one row of badges, with
+   the people at its end, and no line between them; what is due reads from the badges as before. */
 .sc-card {
   display: grid;
   gap: var(--sc-space-1);
-  padding: var(--sc-space-3);
+  padding: var(--sc-space-2) var(--sc-space-3);
   border-radius: var(--sc-radius-lg);
   transition:
     border-color var(--sc-transition),
@@ -1354,7 +1602,7 @@ table {
   color: var(--sc-color-text);
   font-size: var(--sc-text-sm);
   font-weight: var(--sc-weight-medium);
-  line-height: 1.4;
+  line-height: var(--sc-leading-snug);
   text-decoration: none;
   overflow-wrap: anywhere;
 }
@@ -1366,10 +1614,17 @@ table {
 .sc-card-number {
   color: var(--sc-color-text-faint);
   font-family: var(--sc-font-mono);
-  font-size: 0.9em;
+  font-size: var(--sc-text-xs);
   font-weight: var(--sc-weight-normal);
 }
 
+/* On a card the number stands on a line of its own above the title, rather than in its run. */
+.sc-card-title .sc-card-number {
+  display: block;
+  margin-bottom: var(--sc-space-1);
+  line-height: 1;
+}
+
 .sc-card-meta {
   display: flex;
   flex-wrap: wrap;
@@ -1386,6 +1641,12 @@ table {
   flex: 1;
 }
 
+/* The people at work stay at the end of the row, also when the badges push them onto a line of
+   their own. */
+.sc-card-meta .sc-workers {
+  margin-inline-start: auto;
+}
+
 /* One task, and a page of the documents: the text in a column for reading, the facts beside it
    where the window is wide enough, under it where it is not. */
 
@@ -1432,8 +1693,20 @@ table {
 }
 
 .sc-task-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sc-space-3) var(--sc-space-5);
+  padding-bottom: var(--sc-space-4);
+  border-bottom: var(--sc-hairline);
+}
+
+.sc-task-heading {
   display: grid;
+  flex: 1 1 28rem;
   gap: var(--sc-space-2);
+  min-width: 0;
 }
 
 .sc-task-parent {
@@ -1443,12 +1716,12 @@ table {
 
 .sc-task-title {
   font-size: var(--sc-text-2xl);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--sc-tracking-tight);
   overflow-wrap: anywhere;
 }
 
 .sc-task-title .sc-card-number {
-  font-size: 0.8em;
+  font-size: var(--sc-text-xl);
 }
 
 .sc-task-badges {
@@ -1467,14 +1740,6 @@ table {
   font-size: var(--sc-text-sm);
 }
 
-.sc-facts dt {
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 .sc-facts dd {
   margin-top: var(--sc-space-1);
 }
@@ -1486,18 +1751,47 @@ table {
   gap: var(--sc-space-2);
 }
 
+.sc-task-header > .sc-task-actions {
+  flex: none;
+}
+
 .sc-task-section {
   display: grid;
   gap: var(--sc-space-3);
 }
 
-.sc-link-list li + li,
-.sc-subtasks li + li {
-  margin-top: var(--sc-space-2);
+.sc-link-list,
+.sc-subtasks {
+  display: grid;
+  gap: var(--sc-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-link-list > li,
+.sc-subtasks > li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2) var(--sc-space-3);
+  padding: var(--sc-space-3) var(--sc-space-4);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-sheet);
+  font-size: var(--sc-text-sm);
+  overflow-wrap: anywhere;
+}
+
+.sc-subtasks .sc-badge {
+  margin-inline-start: auto;
 }
 
 .sc-subtasks a {
+  flex: 1 1 14rem;
+  min-width: 0;
   color: var(--sc-color-text);
+  font-weight: var(--sc-weight-medium);
   text-decoration: none;
 }
 
@@ -1510,7 +1804,20 @@ table {
 .sc-decisions {
   display: grid;
   gap: var(--sc-space-6);
-  max-width: var(--sc-width-prose);
+  align-items: start;
+}
+
+@media (min-width: 64rem) {
+  .sc-decisions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* A person's own decisions: the sections of what waits, stacked in the first column. */
+.sc-decisions-waiting {
+  display: grid;
+  gap: var(--sc-space-6);
+  align-content: start;
 }
 
 .sc-decision {
@@ -1545,9 +1852,8 @@ table {
   width: 0.5rem;
   height: 0.5rem;
   margin-right: var(--sc-space-2);
-  border-radius: 50%;
+  border-radius: var(--sc-radius-full);
   background: var(--sc-color-point);
-  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--sc-color-point) 60%, transparent);
   vertical-align: 0.1em;
 }
 
@@ -1561,6 +1867,29 @@ table {
   font-size: var(--sc-text-sm);
 }
 
+/* The task a decision is about: a chip in the line, cut short where it is long. */
+.sc-decision-meta > a {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 var(--sc-space-2);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-sheet);
+  color: var(--sc-color-text);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+  line-height: 1.5rem;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sc-decision-meta > a:hover {
+  border-color: var(--sc-color-accent);
+  color: var(--sc-color-accent);
+}
+
 .sc-decision-waiting {
   color: var(--sc-color-warning);
   font-size: var(--sc-text-sm);
@@ -1570,7 +1899,7 @@ table {
   display: grid;
   gap: var(--sc-space-1);
   padding: var(--sc-space-3) var(--sc-space-4);
-  border-left: 3px solid var(--sc-color-success);
+  border-left: 2px solid var(--sc-color-accent);
   border-radius: 0 var(--sc-radius-md) var(--sc-radius-md) 0;
 }
 
@@ -1638,38 +1967,107 @@ table {
 
 /* The feed: a line per event, newest first. */
 
+/* The feed by days: a heading per day with a line after it; under it, runs of events by the
+   same hands, each headed once by the person and the agent, with a row per event under the name,
+   the hour and the sentence, parted by hairlines rather than boxed. */
 .sc-feed {
+  display: grid;
+  gap: var(--sc-space-5);
+}
+
+.sc-feed-day {
   display: grid;
   gap: var(--sc-space-2);
-  max-width: var(--sc-width-prose);
 }
 
-.sc-feed-item {
+.sc-feed-day-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-3);
+  margin: 0;
+  color: var(--sc-color-text-muted);
+}
+
+.sc-feed-day-title::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--sc-color-border);
+}
+
+.sc-feed-day-list,
+.sc-feed-run-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-feed-day-list {
+  gap: var(--sc-space-3);
+}
+
+.sc-feed-run {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--sc-space-1);
+}
+
+/* The rows of a run line up under the name, past the picture of the person. */
+.sc-feed-run-list {
+  padding-inline-start: calc(1.5rem + var(--sc-space-2));
+}
+
+.sc-feed-actor {
+  display: inline-flex;
   align-items: center;
+  gap: var(--sc-space-2);
+  min-width: 0;
+}
+
+.sc-feed-agent {
+  margin-inline-start: var(--sc-space-2);
+  color: var(--sc-color-text-faint);
+  font-size: var(--sc-text-xs);
+}
+
+/* Where the agent is laid out beside the name by a gap, it needs no margin of its own. */
+.sc-feed-actor .sc-feed-agent,
+.sc-doc-meta .sc-feed-agent {
+  margin-inline-start: 0;
+}
+
+.sc-feed-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: baseline;
   gap: var(--sc-space-3);
-  padding: var(--sc-space-2) var(--sc-space-3);
-  border-radius: var(--sc-radius-md);
+  padding: var(--sc-space-1) 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--sc-color-border) 60%, transparent);
   font-size: var(--sc-text-sm);
 }
 
+.sc-feed-item:last-child {
+  border-bottom: 0;
+}
+
+.sc-feed-clock {
+  color: var(--sc-color-text-faint);
+  font-size: var(--sc-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
 .sc-feed-words {
   overflow-wrap: anywhere;
 }
 
 .sc-feed-words a {
   color: var(--sc-color-text);
+  text-decoration: none;
 }
 
 .sc-feed-words a:hover {
   color: var(--sc-color-accent);
-}
-
-.sc-feed-agent {
-  margin-left: var(--sc-space-2);
-  color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
+  text-decoration: underline;
 }
 
 /* Signing in: one pane in the light, with the mark on a small stage of its own. */
@@ -1697,7 +2095,7 @@ table {
   position: absolute;
   width: 14rem;
   height: 14rem;
-  border-radius: 50%;
+  border-radius: var(--sc-radius-full);
   background: radial-gradient(
     circle,
     color-mix(in srgb, var(--sc-color-accent) 35%, transparent),
@@ -1712,17 +2110,17 @@ table {
   place-items: center;
   width: 3.5rem;
   height: 3.5rem;
-  border: 1px solid var(--sc-color-border-strong);
-  border-radius: 28%;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-xl);
   background: var(--sc-color-bg);
-  box-shadow: 0 0.5rem 2rem -0.25rem color-mix(in srgb, var(--sc-color-accent) 55%, transparent);
+  box-shadow: var(--sc-glass-lift);
 }
 
 .sc-sign-in-badge::after {
   content: "";
   position: absolute;
   inset: 0;
-  border: 1px solid var(--sc-color-accent);
+  border: 2px solid var(--sc-color-accent);
   border-radius: inherit;
   opacity: 0;
   pointer-events: none;
@@ -1737,7 +2135,7 @@ table {
 @keyframes sc-ring {
   0% {
     transform: scale(1);
-    opacity: 0.6;
+    opacity: 0.55;
   }
   100% {
     transform: scale(2.6);
@@ -1788,6 +2186,11 @@ table {
   overflow-wrap: anywhere;
 }
 
+/* The text of a task and of a page is read at length: at the size of reading. */
+.sc-task-main > .sc-prose {
+  font-size: var(--sc-text-md);
+}
+
 .sc-prose > * + * {
   margin-top: var(--sc-space-4);
 }
@@ -1923,12 +2326,24 @@ table {
 .sc-token-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sc-space-3);
+  gap: var(--sc-space-1) var(--sc-space-3);
   margin-top: var(--sc-space-1);
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
 }
 
+.sc-token-meta > span {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-1);
+}
+
+.sc-token-meta > span + span {
+  padding-inline-start: var(--sc-space-3);
+  border-inline-start: var(--sc-hairline);
+}
+
 .sc-secret {
   display: flex;
   flex-wrap: wrap;
@@ -1947,24 +2362,40 @@ table {
   user-select: all;
 }
 
-/* People: everyone of the board, with what each may do. */
+/* People: everyone of the board, with what each may do, as cards in a grid: the person on the
+   first line, the account and where it came from on the second, what they are and the ways to
+   their work on the third. */
 
 .sc-people {
   display: grid;
-  gap: var(--sc-space-2);
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: var(--sc-space-3);
 }
 
 .sc-person-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--sc-space-3);
-  padding: var(--sc-space-3) var(--sc-space-4);
+  gap: var(--sc-space-2) var(--sc-space-3);
+  padding: var(--sc-space-4);
   border-radius: var(--sc-radius-lg);
 }
 
+.sc-person-row > .sc-person {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* That this person is the reader: beside the name on the first line. */
+.sc-person-you {
+  margin-inline-start: calc(var(--sc-space-1) - var(--sc-space-3));
+  color: var(--sc-color-text-faint);
+  font-size: var(--sc-text-xs);
+}
+
 .sc-person-name {
-  flex: 1;
+  flex: 1 1 100%;
+  min-width: 0;
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
 }
@@ -1974,13 +2405,19 @@ table {
   font-size: var(--sc-text-xs);
 }
 
+/* What a person is, or the way to change it: the last line, a step under the account. */
+.sc-person-row > .sc-badge,
+.sc-person-row > .sc-field-inline {
+  margin-top: var(--sc-space-1);
+}
+
 /* Those let in and not signed in yet, and those deactivated: sections below everyone in. */
 .sc-people-section {
   margin-top: var(--sc-space-6);
 }
 
 .sc-person-row-out .sc-person {
-  opacity: 0.7;
+  opacity: 0.55;
 }
 
 .sc-listing-form .sc-field-row {
@@ -2020,19 +2457,38 @@ table {
   box-shadow: var(--sc-glass-sheen), var(--sc-glass-lift), var(--sc-glow);
 }
 
+/* The head of a project reads on three lines: the mark with the name beside it, the key under
+   the name, and the badges on a line of their own; the mark floats so that the name and the key
+   stack beside it without a box around them. */
 .sc-project-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sc-space-2) var(--sc-space-3);
+  display: block;
+}
+
+.sc-project-head::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.sc-project-head > :first-child {
+  float: left;
+  margin-inline-end: var(--sc-space-3);
+}
+
+.sc-project-head > .sc-badge {
+  margin-top: var(--sc-space-3);
+  margin-inline-end: var(--sc-space-1);
 }
 
 /* The whole pane is the way in: the name's link stretches over it. */
 .sc-project-name {
+  display: block;
   color: var(--sc-color-text);
   font-size: var(--sc-text-lg);
   font-weight: var(--sc-weight-bold);
+  line-height: var(--sc-leading-snug);
   text-decoration: none;
+  overflow-wrap: anywhere;
 }
 
 .sc-project-name::after {
@@ -2054,7 +2510,21 @@ table {
   font-size: var(--sc-text-xs);
 }
 
+/* Under the name, and past the mark: the key ends below the mark, so that the badges after it
+   start at the edge. */
+.sc-project-head > .sc-project-key {
+  display: block;
+  margin-top: var(--sc-space-1);
+}
+
+.sc-project-head > .sc-project-key::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
 .sc-project-description {
+  margin-top: var(--sc-space-1);
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
 }
@@ -2064,7 +2534,8 @@ table {
   flex-wrap: wrap;
   gap: var(--sc-space-2);
   margin-top: auto;
-  padding-top: var(--sc-space-2);
+  padding-top: var(--sc-space-3);
+  border-top: var(--sc-hairline);
 }
 
 .sc-project-meta:empty {
@@ -2076,6 +2547,14 @@ table {
   gap: var(--sc-space-4);
 }
 
+/* What a member is in the project, and their office in the organization beside it, small. */
+.sc-member-role {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-2);
+  font-size: var(--sc-text-sm);
+}
+
 .sc-member-form .sc-field-row {
   align-items: end;
 }
@@ -2084,11 +2563,14 @@ table {
 
 .sc-skills {
   display: grid;
-  gap: var(--sc-space-2);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+  gap: var(--sc-space-3);
 }
 
 .sc-skill {
-  padding: var(--sc-space-3) var(--sc-space-4);
+  display: grid;
+  align-content: start;
+  padding: var(--sc-space-4) var(--sc-space-5);
   border-radius: var(--sc-radius-lg);
 }
 
@@ -2101,8 +2583,16 @@ table {
 }
 
 .sc-skill-name {
-  font-weight: var(--sc-weight-medium);
-}
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+}
+
+/* The folder a skill is in: a line of its own under the name, in the code face. */
+.sc-skill-head > .sc-muted {
+  flex: 1 1 100%;
+  font-family: var(--sc-font-mono);
+  font-size: var(--sc-text-xs);
+}
 
 .sc-skill-description {
   margin: var(--sc-space-2) 0 0;
@@ -2112,7 +2602,9 @@ table {
 
 .sc-skill-uri {
   display: block;
-  margin-top: var(--sc-space-2);
+  margin-top: var(--sc-space-3);
+  padding-top: var(--sc-space-2);
+  border-top: var(--sc-hairline);
   color: var(--sc-color-text-faint);
   font-size: var(--sc-text-xs);
   word-break: break-all;
@@ -2136,18 +2628,30 @@ table {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--sc-space-2);
+  gap: var(--sc-space-1) var(--sc-space-2);
+  padding-bottom: var(--sc-space-3);
+  border-bottom: var(--sc-hairline);
 }
 
 .sc-run-agent {
-  font-weight: var(--sc-weight-medium);
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+}
+
+/* The way to end a run stands at the end of the first line. */
+.sc-run-header > .sc-button {
+  order: 1;
+  margin-inline-start: auto;
 }
 
+/* Who the run is for and since when: the second line of the head. */
 .sc-run-meta {
-  display: inline-flex;
+  display: flex;
+  flex: 1 1 100%;
   flex-wrap: wrap;
+  order: 2;
   align-items: center;
-  gap: var(--sc-space-1);
+  gap: var(--sc-space-1) var(--sc-space-2);
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
 }
@@ -2168,10 +2672,11 @@ table {
   display: grid;
   gap: var(--sc-space-1);
   padding-left: var(--sc-space-3);
-  border-left: 2px solid var(--sc-color-border-strong);
+  border-left: 2px solid var(--sc-color-accent);
   font-size: var(--sc-text-sm);
 }
 
+/* The hour of a report heads it, small and apart from its words. */
 .sc-run-summary {
   padding-top: var(--sc-space-3);
   border-top: var(--sc-border);
@@ -2199,6 +2704,7 @@ table {
 }
 
 .sc-comment-meta {
+  margin-inline-start: auto;
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
 }
@@ -2217,7 +2723,7 @@ table {
 }
 
 .sc-picture-thumb:focus-visible {
-  outline: 2px solid var(--sc-color-accent);
+  outline: var(--sc-focus-ring);
   outline-offset: 2px;
 }
 
@@ -2245,7 +2751,7 @@ table {
   grid-template-rows: auto minmax(0, 1fr) auto;
   inset: 0;
   background: color-mix(in srgb, var(--sc-color-bg) 90%, transparent);
-  backdrop-filter: blur(12px);
+  backdrop-filter: var(--sc-glass-backdrop);
 }
 
 .sc-overlay-bar {
@@ -2391,7 +2897,7 @@ table {
   padding: var(--sc-space-3) var(--sc-space-4);
   border: var(--sc-border);
   border-radius: var(--sc-radius-md);
-  background: var(--sc-color-field);
+  background: var(--sc-color-bg-raised);
   font-family: var(--sc-font-mono);
   font-size: var(--sc-text-sm);
   line-height: var(--sc-leading-code);
@@ -2418,13 +2924,13 @@ table {
   max-width: 12rem;
   font-family: var(--sc-font-mono);
   font-size: var(--sc-text-lg);
-  letter-spacing: 0.12em;
+  letter-spacing: var(--sc-tracking-code);
   text-transform: uppercase;
 }
 
 .sc-code-shown {
   font-size: var(--sc-text-md);
-  letter-spacing: 0.1em;
+  letter-spacing: var(--sc-tracking-code);
 }
 
 /* Documents: a folder's pages, one page with its versions, its links both ways and its files. */
@@ -2511,11 +3017,13 @@ table {
   list-style: none;
 }
 
+/* A page in a list reads on two lines: its title, with a mark if it is archived, and under it
+   where it lives, its version, who wrote it last and when, each a step apart. */
 .sc-doc-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--sc-space-2) var(--sc-space-3);
+  align-items: center;
+  gap: var(--sc-space-1) var(--sc-space-2);
   padding: var(--sc-space-3) var(--sc-space-4);
   border-radius: var(--sc-radius-lg);
   transition: border-color var(--sc-transition);
@@ -2527,7 +3035,9 @@ table {
 
 .sc-doc-title {
   color: var(--sc-color-text);
-  font-weight: var(--sc-weight-medium);
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+  line-height: var(--sc-leading-snug);
   text-decoration: none;
 }
 
@@ -2536,8 +3046,17 @@ table {
 }
 
 .sc-doc-meta {
+  display: flex;
+  flex: 1 1 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-1) var(--sc-space-2);
   color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
+  font-size: var(--sc-text-xs);
+}
+
+.sc-doc-meta .sc-person-login {
+  font-weight: var(--sc-weight-normal);
 }
 
 .sc-doc-path {
@@ -2560,7 +3079,7 @@ table {
 }
 
 .sc-doc-archived .sc-prose {
-  opacity: 0.85;
+  opacity: 0.55;
 }
 
 /* The pictures for a page, under its body: the way to add one, and what becomes of it. */
@@ -2571,30 +3090,86 @@ table {
   gap: var(--sc-space-2);
 }
 
+/* The attach form: a button to choose the file with the chosen file's name beside it, the
+   name to call it under that, and the attach button across the bottom, all one height. */
 .sc-doc-attach {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: var(--sc-space-2);
   margin-top: var(--sc-space-3);
 }
 
+.sc-doc-attach-file {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-3);
+  min-width: 0;
+}
+
+.sc-doc-attach-file > .sc-button {
+  flex: none;
+}
+
+.sc-doc-attach-chosen {
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--sc-text-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sc-doc-attach > .sc-button {
+  width: 100%;
+}
+
 .sc-versions {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+.sc-version {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--sc-space-3);
+  row-gap: var(--sc-space-1);
+  align-items: baseline;
+  padding-block: var(--sc-space-2);
+  font-size: var(--sc-text-sm);
+}
+
 .sc-version + .sc-version {
-  margin-top: var(--sc-space-2);
+  border-top: var(--sc-hairline);
 }
 
 .sc-version-number {
-  display: inline-block;
-  min-width: 2.5rem;
+  min-width: 2rem;
   font-family: var(--sc-font-mono);
   font-size: var(--sc-text-sm);
 }
 
+.sc-version-title {
+  font-weight: var(--sc-weight-medium);
+  overflow-wrap: anywhere;
+}
+
+.sc-version-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-1) var(--sc-space-2);
+  grid-column: 2;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+}
+
+.sc-version-meta .sc-person-login {
+  font-weight: var(--sc-weight-normal);
+}
+
+.sc-version-meta .sc-feed-agent {
+  margin-inline-start: 0;
+}
+
 /* In the aside of a task or a page, the facts stack and the sections are small. */
 
 .sc-task-aside .sc-facts {
@@ -2603,11 +3178,6 @@ table {
 
 .sc-task-aside .sc-section-title {
   margin-bottom: var(--sc-space-1);
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
 }
 
 .sc-task-aside .sc-task-section {
@@ -2627,11 +3197,6 @@ table {
 
 .sc-decision-label {
   margin: 0 0 var(--sc-space-1);
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
 }
 
 .sc-outcome-form {
@@ -2639,11 +3204,20 @@ table {
   gap: var(--sc-space-2);
 }
 
-/* Under the wide layout a task's facts come first: changing its state and reaching its forms is
-   what a phone is opened for, and two to a row they stay short. A document keeps its text first. */
+/* Under the wide layout a task reads its text first, then its facts and the ways to its forms, two
+   to a row so that they stay short, then the discussion and what happened: the text says what the
+   task is, and its state is changed right under it. A document keeps its text first. */
 @media (max-width: 63.99rem) {
+  .sc-task .sc-task-main {
+    display: contents;
+  }
+
   .sc-task .sc-task-aside {
-    order: -1;
+    order: 1;
+  }
+
+  .sc-task .sc-task-main > .sc-task-section {
+    order: 2;
   }
 
   .sc-task .sc-task-aside .sc-facts {
@@ -2654,61 +3228,158 @@ table {
 /* The schedule, the roadmap and the categories (ADR-0019). */
 
 /* The colours a category may be shown in: names, painted here and nowhere else. Each is a
-   dark fill with a light line and text, so that a badge reads on the glass. */
+   light fill with its words dark in the same hue, and a mark, a clear mid-tone of the hue, for
+   the dots, flags and bars where the colour stands alone; the eight hues spread around the
+   wheel so that no two are taken for each other at a glance. A console that sets only the line
+   and the fill gets its line where the mark would be. */
 .sc-category-gray {
-  --sc-category-line: #aeb7c4;
-  --sc-category-fill: #2a3240;
+  --sc-category-line: #4a5468;
+  --sc-category-fill: #e0e4eb;
+  --sc-category-mark: #7b8597;
 }
 
 .sc-category-blue {
-  --sc-category-line: #8fb6ff;
-  --sc-category-fill: #1a2d52;
+  --sc-category-line: #1d4fcb;
+  --sc-category-fill: #d2e0ff;
+  --sc-category-mark: #2f6ae8;
 }
 
 .sc-category-green {
-  --sc-category-line: #6fd3a0;
-  --sc-category-fill: #143326;
+  --sc-category-line: #176d26;
+  --sc-category-fill: #cdf0cc;
+  --sc-category-mark: #22a04a;
 }
 
 .sc-category-orange {
-  --sc-category-line: #ffb77a;
-  --sc-category-fill: #3a2414;
+  --sc-category-line: #b83c00;
+  --sc-category-fill: #ffe6d1;
+  --sc-category-mark: #f0731a;
 }
 
 .sc-category-pink {
-  --sc-category-line: #ff9ac2;
-  --sc-category-fill: #3b1a2b;
+  --sc-category-line: #b2176a;
+  --sc-category-fill: #fdd2e5;
+  --sc-category-mark: #e63d94;
 }
 
 .sc-category-purple {
-  --sc-category-line: #c4a4ff;
-  --sc-category-fill: #2b1f4a;
+  --sc-category-line: #6434c2;
+  --sc-category-fill: #e6d8fc;
+  --sc-category-mark: #8457e6;
 }
 
 .sc-category-teal {
-  --sc-category-line: #7ad7d4;
-  --sc-category-fill: #10343a;
+  --sc-category-line: #08667a;
+  --sc-category-fill: #c6edf4;
+  --sc-category-mark: #0f9bb0;
 }
 
 .sc-category-yellow {
-  --sc-category-line: #f0d36a;
-  --sc-category-fill: #3a3012;
+  --sc-category-line: #44403c;
+  --sc-category-fill: #fbe9b2;
+  --sc-category-mark: #e6b42c;
 }
 
 .sc-badge-category {
-  border-color: color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-color: transparent;
   background: var(--sc-category-fill);
   color: var(--sc-category-line);
 }
 
+/* A badge's kind in how it is filled, so that a plain badge, a category, a state, a priority
+   and a due day beside each other are kinds and not five of one thing; the pill is the shape
+   of them all and nothing stands before the words:
+   - a plain badge (a role, a count, public or private): a soft fill with a line of its hue;
+   - a category and a state: a soft fill, no line;
+   - a priority: a soft fill with dark words of its hue, low a grey, high an orange, urgent a red;
+   - a due day: a line, a very light fill and bold words, all in the hue of how near the day
+     is. */
+.sc-badge:not(.sc-badge-category) {
+  border-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+.sc-badge.sc-badge-kind-state {
+  border-color: transparent;
+}
+
+.sc-badge.sc-badge-kind-priority {
+  border-color: transparent;
+  background: #e1e6ee;
+  color: #3a4558;
+}
+
+.sc-badge.sc-badge-kind-priority.sc-badge-point {
+  background: #ffd4a8;
+  color: #7a3300;
+}
+
+.sc-badge.sc-badge-kind-priority.sc-badge-danger {
+  background: #fdbcc3;
+  color: #7d0e1d;
+}
+
+/* A due day: one line weight for every one; the line, a very light fill and the words are
+   all in the hue of how near the day is. */
+.sc-badge.sc-badge-kind-due {
+  border: 1.5px solid #a3acba;
+  background: #f4f6f9;
+  color: #4b5563;
+  font-weight: var(--sc-weight-bold);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-badge.sc-badge-kind-due.sc-badge-accent {
+  border-color: #6f93e8;
+  background: #f0f5ff;
+  color: #1d4ed8;
+}
+
+.sc-badge.sc-badge-kind-due.sc-badge-success {
+  border-color: #5fb488;
+  background: #effaf4;
+  color: #146b44;
+}
+
+/* Within the week. */
+.sc-badge.sc-badge-kind-due.sc-badge-warning {
+  border-color: #e0b100;
+  background: #fffae6;
+  color: #8a6500;
+}
+
+/* Tomorrow. */
+.sc-badge.sc-badge-kind-due.sc-badge-point {
+  border-color: #f59e3c;
+  background: #fff4ea;
+  color: #b45309;
+}
+
+/* Today. */
+.sc-badge.sc-badge-kind-due.sc-badge-due-today {
+  border-color: #f26b4a;
+  background: #fff1ec;
+  color: #c2330f;
+}
+
+/* Late. */
+.sc-badge.sc-badge-kind-due.sc-badge-danger {
+  border-color: #d33a47;
+  background: #fff0f1;
+  color: #c0262f;
+}
+
+.sc-badge-kind-count {
+  font-variant-numeric: tabular-nums;
+}
+
 .sc-category-swatch,
 .sc-calendar-dot {
   display: inline-block;
   flex: none;
   width: 0.625rem;
   height: 0.625rem;
-  border-radius: 50%;
-  background: var(--sc-category-line, var(--sc-color-text-faint));
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-category-mark, var(--sc-category-line, var(--sc-color-text-faint)));
 }
 
 /* The filters above the board: a quiet row of controls, as wide as its words. */
@@ -2730,10 +3401,38 @@ table {
   font-size: var(--sc-text-sm);
 }
 
+/* The words the board is narrowed by: a field that takes what room the row has, up to a point. */
+.sc-filters-words {
+  flex: 1 1 12rem;
+  max-width: 22rem;
+}
+
+.sc-filters-words .sc-input {
+  width: 100%;
+}
+
 .sc-filters-count {
   font-size: var(--sc-text-sm);
 }
 
+@media (max-width: 40rem) {
+  .sc-filters {
+    flex-wrap: nowrap;
+    margin-inline: calc(-1 * var(--sc-space-4));
+    padding-inline: var(--sc-space-4);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .sc-filters > * {
+    flex: none;
+  }
+
+  .sc-filters-count {
+    white-space: nowrap;
+  }
+}
+
 /* Tasks as rows, where the columns are not the point. */
 .sc-task-rows {
   display: grid;
@@ -2744,11 +3443,11 @@ table {
 }
 
 .sc-task-row {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: var(--sc-space-2) var(--sc-space-3);
-  padding: var(--sc-space-2) var(--sc-space-3);
+  gap: var(--sc-space-1) var(--sc-space-3);
+  padding: var(--sc-space-3) var(--sc-space-4);
   border: var(--sc-border);
   border-radius: var(--sc-radius-md);
   background: var(--sc-color-sheet);
@@ -2756,7 +3455,7 @@ table {
 }
 
 .sc-task-row-title {
-  flex: 1 1 14rem;
+  grid-column: 1;
   min-width: 0;
   color: var(--sc-color-text);
   font-weight: var(--sc-weight-medium);
@@ -2769,6 +3468,7 @@ table {
 }
 
 .sc-task-row-project {
+  grid-column: 1;
   color: var(--sc-color-text-faint);
   font-size: var(--sc-text-xs);
 }
@@ -2776,11 +3476,27 @@ table {
 .sc-task-row-meta {
   display: flex;
   flex-wrap: wrap;
+  grid-row: 1 / span 2;
+  grid-column: 2;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--sc-space-1);
   margin-left: auto;
 }
 
+@media (max-width: 40rem) {
+  .sc-task-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sc-task-row-meta {
+    grid-row: auto;
+    grid-column: 1;
+    justify-content: flex-start;
+    margin-left: 0;
+  }
+}
+
 /* The calendar: the month as a table, a cell a day, the tasks due in it one line each. */
 .sc-calendar {
   display: grid;
@@ -2813,12 +3529,7 @@ table {
 
 .sc-calendar-grid th {
   padding: var(--sc-space-1);
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
   text-align: left;
-  text-transform: uppercase;
 }
 
 .sc-calendar-cell {
@@ -2837,7 +3548,6 @@ table {
 
 .sc-calendar-cell-today {
   border-color: var(--sc-color-accent);
-  box-shadow: inset 0 0 0 1px var(--sc-color-accent);
 }
 
 .sc-calendar-day {
@@ -2851,6 +3561,26 @@ table {
   color: var(--sc-color-accent);
 }
 
+.sc-calendar-more {
+  display: block;
+  width: 100%;
+  margin-top: 2px;
+  padding: 1px var(--sc-space-1);
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+  line-height: var(--sc-leading-snug);
+  text-align: start;
+}
+
+.sc-calendar-more:hover {
+  background: var(--sc-color-bg-inset);
+  color: var(--sc-color-text);
+}
+
 .sc-calendar-task {
   display: flex;
   align-items: center;
@@ -2860,7 +3590,7 @@ table {
   border-radius: var(--sc-radius-sm);
   color: var(--sc-color-text);
   font-size: var(--sc-text-xs);
-  line-height: 1.4;
+  line-height: var(--sc-leading-snug);
   text-decoration: none;
 }
 
@@ -2897,7 +3627,8 @@ table {
 .sc-calendar-bar {
   margin-inline: calc(-1 * var(--sc-space-2) - 0.125rem - 1px);
   padding-inline: var(--sc-space-2);
-  border-block: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-block: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   background: var(--sc-category-fill);
   color: var(--sc-category-line);
   font-size: var(--sc-text-xs);
@@ -2906,32 +3637,57 @@ table {
   white-space: nowrap;
 }
 
-/* Lit a little under the pointer by its colour, not by a filter, which would light the card within it too. */
-.sc-calendar-bar:hover {
-  background: color-mix(in srgb, var(--sc-category-fill), white 12%);
+/* The task under the pointer is lit a little by its colour, in every piece of its bar and in
+   every week it crosses, never one piece alone; by its colour and not by a filter, which would
+   light the card within it too. */
+.sc-calendar-bar-pointed {
+  background: color-mix(in srgb, var(--sc-category-fill), var(--sc-category-line) 14%);
 }
 
 .sc-calendar-bar-begins {
   margin-left: 0;
-  border-left: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-left: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   border-start-start-radius: var(--sc-radius-full);
   border-end-start-radius: var(--sc-radius-full);
 }
 
 .sc-calendar-bar-ends {
   margin-right: 0;
-  border-right: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-right: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   border-start-end-radius: var(--sc-radius-full);
   border-end-end-radius: var(--sc-radius-full);
 }
 
+/* The title of a bar with more days in the week runs along the bar as far as its days reach,
+   less the room of its end, instead of stopping at the first day's edge: above every piece,
+   the one under the pointer included, and under the cards; the pointer goes through it to the
+   piece of the day beneath. The days are the first piece's own custom property. */
+.sc-calendar-task-title-spanning {
+  position: relative;
+  z-index: 25;
+  flex: none;
+  max-width: calc(var(--sc-span, 1) * 100% - 2.25rem);
+  pointer-events: none;
+}
+
 .sc-calendar-bar.sc-calendar-late {
   border-color: color-mix(in srgb, var(--sc-color-danger) 70%, transparent);
   color: var(--sc-color-danger);
 }
 
+/* A bar of a task that is over: paler in its own colour, not see-through, so that every piece
+   of it is one shade whatever lies under it, and the card of the task under the pointer,
+   which lies within the piece, stays solid. */
 .sc-calendar-bar.sc-calendar-over {
-  opacity: 0.55;
+  border-color: color-mix(
+    in srgb,
+    var(--sc-category-mark, var(--sc-category-line)) 30%,
+    transparent
+  );
+  background: color-mix(in srgb, var(--sc-category-fill) 50%, var(--sc-color-bg-raised));
+  color: color-mix(in srgb, var(--sc-category-line) 55%, var(--sc-color-bg-raised));
 }
 
 .sc-calendar-legend {
@@ -2992,6 +3748,16 @@ table {
   font-size: var(--sc-text-sm);
 }
 
+/* The mark hangs in the margin, so that what wraps onto a second line, a badge most often,
+   starts under the name rather than under the mark. */
+.sc-project-head:has(> .sc-mark-md) {
+  padding-inline-start: calc(2rem + var(--sc-space-3));
+}
+
+.sc-project-head > .sc-mark-md {
+  margin-inline-start: calc(-2rem - var(--sc-space-3));
+}
+
 .sc-mark-lg {
   width: 3rem;
   height: 3rem;
@@ -3020,10 +3786,11 @@ table {
 }
 
 .sc-input-file {
-  padding-block: calc(var(--sc-space-2) - 2px);
   font-size: var(--sc-text-sm);
 }
 
+/* Under the month: what is late and who has what on the left, one under the other, and what
+   has no day yet, the long list, down the right; one column where the window is narrow. */
 .sc-calendar-below {
   display: grid;
   align-items: start;
@@ -3034,6 +3801,12 @@ table {
 @media (min-width: 64rem) {
   .sc-calendar-below {
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .sc-calendar-below > :last-child {
+    grid-column: 2;
+    grid-row: 1 / span 2;
   }
 }
 
@@ -3085,6 +3858,26 @@ table {
   color: var(--sc-color-text-muted);
 }
 
+/* Who asked and who answers (ADR-0042): the two people side by side, an arrow from the one to
+   the other, so that the asker and the decider are never read as one. */
+.sc-decision-people,
+.sc-decision-for {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+  white-space: nowrap;
+}
+
+.sc-decision-arrow {
+  color: var(--sc-color-text-faint);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-decision-row-answer {
+  color: var(--sc-color-text);
+  font-weight: var(--sc-weight-medium);
+}
+
 /* The record of the decisions: a row each, what was asked on the left and what was answered on
    the right, each with who and when under it; one column where the window is narrow. */
 .sc-decision-record {
@@ -3138,12 +3931,26 @@ table {
   margin-left: var(--sc-space-2);
 }
 
+/* The answer a decision took, marked in green before its words. */
+.sc-decision-record-chosen::before {
+  content: "";
+  position: absolute;
+  top: calc(0.8em - 0.25rem);
+  left: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-success);
+}
+
 .sc-decision-record-chosen {
+  position: relative;
+  padding-left: var(--sc-space-4);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--sc-space-2);
-  color: var(--sc-color-success);
+  color: var(--sc-color-text);
   font-weight: var(--sc-weight-medium);
   overflow-wrap: anywhere;
 }
@@ -3182,31 +3989,44 @@ table {
   font-size: var(--sc-text-sm);
 }
 
-/* Who has what: a small table, the late numbers in the danger colour. */
+/* Who has what: a table on a sheet of its own, a quiet band for the headings, a hairline
+   between people, the numbers in columns of their own on the right in the display size; the
+   one due this week and the one late carry a dot of their colour before them. */
 .sc-workload {
   width: 100%;
   max-width: var(--sc-width-prose);
-  border-collapse: collapse;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-lg);
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--sc-color-sheet);
+  box-shadow: var(--sc-glass-lift);
   font-size: var(--sc-text-sm);
 }
 
 .sc-workload th,
 .sc-workload td {
-  padding: var(--sc-space-2) var(--sc-space-3);
-  border-bottom: var(--sc-border);
+  padding: var(--sc-space-3) var(--sc-space-4);
   text-align: left;
 }
 
 .sc-workload thead th {
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  padding-block: var(--sc-space-2);
+  border-bottom: var(--sc-border);
+  background: var(--sc-color-bg-inset);
+  white-space: nowrap;
+}
+
+.sc-workload thead th:first-child {
+  border-start-start-radius: var(--sc-radius-lg);
+}
+
+.sc-workload thead th:last-child {
+  border-start-end-radius: var(--sc-radius-lg);
 }
 
 .sc-workload tbody th {
-  font-weight: var(--sc-weight-normal);
+  font-weight: var(--sc-weight-medium);
 }
 
 .sc-workload tbody th a {
@@ -3218,24 +4038,86 @@ table {
   color: var(--sc-color-accent);
 }
 
+/* The numbers: a narrow column each, lined up on the right. */
+.sc-workload th:not(:first-child),
 .sc-workload td {
-  font-variant-numeric: tabular-nums;
+  width: 6.5rem;
+  text-align: right;
 }
 
-.sc-workload-soon {
-  color: var(--sc-color-warning);
+.sc-workload td {
+  font-size: var(--sc-text-md);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
+.sc-workload-soon,
 .sc-workload-late {
-  color: var(--sc-color-danger);
   font-weight: var(--sc-weight-bold);
 }
 
-/* The roadmap: a goal a pane, with how far it is as a bar. */
+.sc-workload-soon::before,
+.sc-workload-late::before {
+  content: "";
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-inline-end: var(--sc-space-2);
+  border-radius: var(--sc-radius-full);
+  background: currentColor;
+  vertical-align: 0.1em;
+}
+
+.sc-workload-soon {
+  color: var(--sc-color-warning);
+}
+
+.sc-workload-late {
+  color: var(--sc-color-danger);
+}
+
+/* A hairline between people, and the row under the pointer lit a little. */
+.sc-workload tbody tr + tr > th,
+.sc-workload tbody tr + tr > td {
+  border-top: var(--sc-hairline);
+}
+
+.sc-workload tbody tr:hover > th,
+.sc-workload tbody tr:hover > td {
+  background: color-mix(in srgb, var(--sc-color-accent) 4%, transparent);
+}
+
+@media (max-width: 40rem) {
+  .sc-workload th:not(:first-child),
+  .sc-workload td {
+    width: auto;
+  }
+
+  .sc-workload th,
+  .sc-workload td {
+    padding-inline: var(--sc-space-2);
+  }
+
+  .sc-workload thead th {
+    white-space: normal;
+    word-break: keep-all;
+    line-height: var(--sc-leading-tight);
+  }
+
+  .sc-workload tbody th {
+    word-break: keep-all;
+  }
+
+  .sc-workload td {
+    font-size: var(--sc-text-sm);
+  }
+}
+
+/* The roadmap: a goal a pane, with how far it is as a bar. */
 .sc-goals {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
   gap: var(--sc-space-3);
-  max-width: var(--sc-width-prose);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -3252,7 +4134,7 @@ table {
 }
 
 .sc-goal-done {
-  opacity: 0.75;
+  opacity: 0.55;
 }
 
 .sc-goal-dropped {
@@ -3267,7 +4149,7 @@ table {
 }
 
 .sc-goal-title {
-  flex: 1 1 12rem;
+  flex: 1 1 100%;
   color: var(--sc-color-text);
   font-size: var(--sc-text-lg);
   font-weight: var(--sc-weight-medium);
@@ -3311,11 +4193,6 @@ table {
 
 .sc-goal-tasks-state {
   margin-bottom: var(--sc-space-2);
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  font-weight: var(--sc-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
 }
 
 /* The categories: a row each, with its name and its colour open to an administrator. */
@@ -3344,6 +4221,10 @@ table {
   background: var(--sc-color-sheet);
 }
 
+.sc-category-row > .sc-project-key {
+  margin-inline-start: auto;
+}
+
 .sc-category-form {
   display: flex;
   flex: 1;
@@ -3365,29 +4246,23 @@ table {
   position: relative;
 }
 
-/* The item under the pointer rises above its neighbours, which would otherwise paint over its card. */
-.sc-calendar-task:hover,
-.sc-calendar-task:focus-visible,
-.sc-calendar-bar:hover,
-.sc-calendar-bar:focus-visible {
-  z-index: 20;
-}
-
+/* The card rises above its neighbours and above a title running along a bar; the item under the
+   pointer itself stays in its layer, so that nothing of it covers such a title. */
 .sc-task-tip {
   position: absolute;
   left: 0;
-  z-index: 20;
+  z-index: 30;
   width: max-content;
   max-width: 20rem;
   padding: var(--sc-space-2) var(--sc-space-3);
   border: var(--sc-border);
   border-radius: var(--sc-radius-md);
-  background: var(--sc-color-bg-inset);
+  background: var(--sc-color-bg-raised);
   box-shadow: var(--sc-shadow-stage);
   color: var(--sc-color-text);
   font-size: var(--sc-text-xs);
   font-weight: var(--sc-weight-normal);
-  line-height: 1.4;
+  line-height: var(--sc-leading-snug);
   text-align: left;
   text-decoration: none;
   white-space: normal;
@@ -3477,13 +4352,17 @@ table {
     padding-inline: var(--sc-space-4);
   }
 
-  .sc-brand-symbol,
-  .sc-brand-wordmark {
-    height: var(--sc-brand-size-compact);
+  .sc-brand {
+    gap: calc(var(--sc-brand-size-compact) * var(--sc-brand-gap-ratio));
   }
 
   .sc-brand-symbol {
     width: var(--sc-brand-size-compact);
+    height: var(--sc-brand-size-compact);
+  }
+
+  .sc-brand-wordmark {
+    height: calc(var(--sc-brand-size-compact) * var(--sc-brand-wordmark-ratio));
   }
 
   .sc-crumb-link {
@@ -3495,15 +4374,18 @@ table {
     display: none;
   }
 
-  /* Tabs that do not fit wrap, so that none is hidden off the edge. */
+  /* Tabs that do not fit stay on one line and scroll sideways, the edge fading where more of them
+     are; the current one is brought into view by the shell. */
   .sc-tabs {
     padding-inline: var(--sc-space-4);
-    overflow: visible;
+    mask-image: linear-gradient(to right, #000 calc(100% - var(--sc-space-6)), transparent);
   }
 
   .sc-tabs-inner {
-    flex-wrap: wrap;
-    gap: 0 var(--sc-space-4);
+    gap: var(--sc-space-4);
+    /* As wide as the tabs and some room past the last, so that it scrolls clear of the fading edge. */
+    width: max-content;
+    padding-inline-end: var(--sc-space-6);
   }
 
   .sc-menu-summary .sc-person-login {
@@ -3591,9 +4473,9 @@ table {
     position: static;
   }
 
-  .sc-feed-item {
-    grid-template-columns: 1fr;
-    gap: var(--sc-space-1);
+  /* The rows of a run use the whole width. */
+  .sc-feed-run-list {
+    padding-inline-start: 0;
   }
 
   .sc-sign-in {
@@ -3622,10 +4504,10 @@ table {
   display: inline-flex;
   align-items: center;
   padding: 0 var(--sc-space-3);
-  border: 1px solid var(--sc-color-border-strong);
+  border: var(--sc-border-strong);
   border-right: 0;
   border-radius: var(--sc-radius-md) 0 0 var(--sc-radius-md);
-  background: color-mix(in srgb, var(--sc-color-field) 60%, var(--sc-color-border));
+  background: color-mix(in srgb, var(--sc-color-bg-raised) 60%, var(--sc-color-border));
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
   white-space: nowrap;
@@ -3655,7 +4537,12 @@ table {
 }
 
 /* The facts of a thing inside a panel: a list in the panel, not a pane of their own. */
+/* The facts on a settings page, inside a pane of their own: a table, a row per fact with its
+   name in a column on the left and its value beside it, a hairline between rows; the name over
+   the value where the window is narrow. */
 .sc-facts-plain {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -3668,6 +4555,44 @@ table {
   content: none;
 }
 
+.sc-facts-plain > * {
+  display: grid;
+  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
+  gap: var(--sc-space-1) var(--sc-space-5);
+  align-items: baseline;
+  padding: var(--sc-space-3) 0;
+  border-top: var(--sc-hairline);
+}
+
+.sc-facts-plain > :first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.sc-facts-plain > :last-child {
+  padding-bottom: 0;
+}
+
+.sc-facts-plain dt {
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-medium);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.sc-facts-plain dd {
+  margin-top: 0;
+  font-size: var(--sc-text-md);
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 40rem) {
+  .sc-facts-plain > * {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 /* A fact that needs the whole row: a description. */
 .sc-facts-wide {
   grid-column: 1 / -1;
@@ -3723,7 +4648,7 @@ table {
 
 .sc-timeline-title {
   margin: 0;
-  font-size: var(--sc-text-base);
+  font-size: var(--sc-text-md);
   font-weight: var(--sc-weight-medium);
 }
 
@@ -3740,14 +4665,19 @@ table {
   gap: var(--sc-space-2);
 }
 
+/* A label keeps to one line, so that every row is as tall as its bar and the labels line up with
+   the bars: a long title is cut short, said in full on hover, and the state stays beside it. */
 .sc-timeline-label {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: var(--sc-space-2);
   min-width: 0;
 }
 
+.sc-timeline-label .sc-badge {
+  flex: none;
+}
+
 .sc-timeline-goal {
   color: var(--sc-color-text);
   font-size: var(--sc-text-sm);
@@ -3755,6 +4685,13 @@ table {
   overflow-wrap: anywhere;
 }
 
+.sc-timeline-label .sc-timeline-goal {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sc-timeline-goal:hover {
   color: var(--sc-color-accent);
 }
@@ -3794,7 +4731,7 @@ table {
   width: 2px;
   margin-left: -1px;
   background: var(--sc-color-accent);
-  opacity: 0.7;
+  opacity: 0.55;
 }
 
 .sc-timeline-today-mark {
@@ -3810,7 +4747,8 @@ table {
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-block: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-block: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   background: var(--sc-category-fill);
   color: var(--sc-category-line);
   font-size: var(--sc-text-xs);
@@ -3819,17 +4757,19 @@ table {
 }
 
 .sc-timeline-bar:hover {
-  background: color-mix(in srgb, var(--sc-category-fill), white 12%);
+  background: color-mix(in srgb, var(--sc-category-fill), var(--sc-category-line) 14%);
 }
 
 .sc-timeline-bar.sc-timeline-bar-begins {
-  border-left: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-left: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   border-start-start-radius: var(--sc-radius-full);
   border-end-start-radius: var(--sc-radius-full);
 }
 
 .sc-timeline-bar.sc-timeline-bar-ends {
-  border-right: 1px solid color-mix(in srgb, var(--sc-category-line) 45%, transparent);
+  border-right: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 60%, transparent);
   border-start-end-radius: var(--sc-radius-full);
   border-end-end-radius: var(--sc-radius-full);
 }
@@ -3839,7 +4779,7 @@ table {
   top: 0;
   bottom: 0;
   left: 0;
-  background: color-mix(in srgb, var(--sc-category-line) 35%, transparent);
+  background: color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 40%, transparent);
 }
 
 .sc-timeline-words {
@@ -3854,18 +4794,19 @@ table {
   height: 0.75rem;
   margin-left: -0.375rem;
   transform: translateY(-50%) rotate(45deg);
-  border: 1px solid color-mix(in srgb, var(--sc-category-line) 60%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--sc-category-mark, var(--sc-category-line)) 75%, transparent);
   background: var(--sc-category-fill);
 }
 
 .sc-goal-done .sc-timeline-bar,
 .sc-goal-done .sc-timeline-point {
-  opacity: 0.6;
+  opacity: 0.55;
 }
 
 .sc-goal-dropped .sc-timeline-bar,
 .sc-goal-dropped .sc-timeline-point {
-  opacity: 0.4;
+  opacity: 0.55;
 }
 
 .sc-timeline-undated {
@@ -3874,6 +4815,7 @@ table {
 }
 
 .sc-goal-days {
+  margin-inline-start: auto;
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-xs);
 }
@@ -3887,7 +4829,7 @@ table {
   color: var(--sc-category-line, var(--sc-color-text));
   font-size: var(--sc-text-xs);
   font-weight: var(--sc-weight-medium);
-  line-height: 1.2;
+  line-height: var(--sc-leading-tight);
   text-decoration: none;
 }
 
@@ -3901,13 +4843,18 @@ table {
   width: 0.5rem;
   height: 0.5rem;
   transform: rotate(45deg);
-  background: var(--sc-category-line, var(--sc-color-text-faint));
+  background: var(--sc-category-mark, var(--sc-category-line, var(--sc-color-text-faint)));
 }
 
 @media (max-width: 40rem) {
   .sc-timeline-row {
     grid-template-columns: minmax(6rem, 8rem) minmax(16rem, 1fr);
   }
+
+  /* A narrow label is the title's: the goal's state is on its card below the months. */
+  .sc-timeline-label .sc-badge {
+    display: none;
+  }
 }
 
 /* A card is dragged to another column from anywhere on it but its menu, its title included: with
@@ -3931,7 +4878,7 @@ table {
 }
 
 .sc-card-dragging {
-  opacity: 0.4;
+  opacity: 0.55;
 }
 
 .sc-board-dragging,
@@ -3986,7 +4933,7 @@ table {
 }
 
 .sc-card-menu-button:focus-visible {
-  outline: 2px solid var(--sc-color-accent);
+  outline: var(--sc-focus-ring);
   outline-offset: 1px;
 }
 
@@ -4020,7 +4967,7 @@ table {
 }
 
 .sc-column-over {
-  outline: 2px solid var(--sc-color-accent);
+  outline: var(--sc-focus-ring);
   outline-offset: -2px;
 }
 
@@ -4062,26 +5009,37 @@ table {
   font-size: var(--sc-text-sm);
 }
 
+.sc-goal-progress .sc-progress-words {
+  display: none;
+}
+
 .sc-facts-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sc-space-2) var(--sc-space-5);
+  align-items: stretch;
+  gap: var(--sc-space-3) 0;
   margin: 0;
   font-size: var(--sc-text-sm);
 }
 
 .sc-facts-row > div {
-  display: flex;
-  align-items: center;
-  gap: var(--sc-space-2);
+  display: grid;
+  align-content: start;
+  gap: var(--sc-space-1);
+  padding-inline: var(--sc-space-4);
+  border-inline-start: var(--sc-hairline);
 }
 
-.sc-facts-row dt {
-  color: var(--sc-color-text-muted);
+.sc-facts-row > div:first-child {
+  padding-inline-start: 0;
+  border-inline-start: 0;
 }
 
 .sc-facts-row dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
   margin: 0;
 }
 
@@ -4272,7 +5230,7 @@ table {
 
 .sc-pack-code {
   font-size: var(--sc-text-xl);
-  letter-spacing: 0.12em;
+  letter-spacing: var(--sc-tracking-code);
 }
 
 .sc-pack-connect-waiting {
@@ -4286,3 +5244,406 @@ table {
 .sc-pack-actions {
   margin-top: var(--sc-space-5);
 }
+
+/* Beside a task the facts stand in one column, a hairline between each. */
+.sc-task-aside .sc-facts {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  padding-block: var(--sc-space-2);
+}
+
+.sc-task-aside .sc-facts > * {
+  padding: var(--sc-space-2) 0;
+}
+
+.sc-task-aside .sc-facts > * + * {
+  border-top: var(--sc-hairline);
+}
+
+/* A phone's pages, one by one. */
+@media (max-width: 40rem) {
+  /* The board: a column nearly as wide as the window, so that a card's title has room and one
+     column is read at a time, the next peeking in from the side. */
+  .sc-column {
+    flex-basis: min(18rem, 82vw);
+  }
+
+  /* The filters scroll as a row; a select with long choices keeps to a width of its own. */
+  .sc-filters .sc-input {
+    max-width: 11rem;
+  }
+
+  /* A task's facts: one to a row, as on the wide layout's side, instead of two abreast with
+     the select and the dates pressed against each other. */
+  .sc-task .sc-task-aside .sc-facts {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sc-facts .sc-input {
+    max-width: 100%;
+  }
+
+  /* A goal's card: the badges on one line, the span of days on a line of its own. */
+  .sc-goal-days {
+    flex: 1 1 100%;
+    margin-inline-start: 0;
+  }
+
+  /* The goal page's progress: the words under the bar. */
+  .sc-goal-progress {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sc-space-1);
+  }
+
+  /* The roadmap's months: too narrow for the year and the month on one line, so the two
+     stand one over the other, small. */
+  .sc-timeline-month {
+    padding-inline: 2px;
+    font-size: 0.6rem;
+    line-height: var(--sc-leading-tight);
+    white-space: normal;
+    word-break: keep-all;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  /* A bar on the month reaches over the gap between the cells, which is narrower here. */
+  .sc-calendar-bar {
+    margin-inline: calc(-1 * var(--sc-space-1) - 2px - 1px);
+  }
+
+  .sc-calendar-bar-begins {
+    margin-left: 0;
+  }
+
+  .sc-calendar-bar-ends {
+    margin-right: 0;
+  }
+
+  /* "N more" on a day keeps to one line, small enough for the cell. */
+  .sc-calendar-more {
+    padding-inline: 0;
+    font-size: 0.65rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* A bar reaching past the week stops at the edge of the month. */
+  .sc-calendar-grid {
+    clip-path: inset(0);
+  }
+}
+
+/* A phone's pages as one design. */
+@media (max-width: 40rem) {
+  /* Every page's head: the name, a word about it under the name, and the ways the page offers
+     as a row of equal buttons under those, so that no head differs from another. */
+  .sc-page-head {
+    display: grid;
+    justify-content: stretch;
+    gap: var(--sc-space-3);
+    margin-bottom: var(--sc-space-5);
+  }
+
+  .sc-page-heading {
+    display: grid;
+    row-gap: var(--sc-space-1);
+  }
+
+  .sc-page-lead {
+    flex: none;
+  }
+
+  .sc-page-actions {
+    flex-wrap: nowrap;
+    width: 100%;
+  }
+
+  .sc-page-actions > * {
+    flex: 1 1 0;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  /* A head with one way alone gives it the whole width too. */
+  .sc-page-head > .sc-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* The tabs snap tab by tab, the first keeping its room from the edge. */
+  .sc-tabs {
+    scroll-snap-type: x proximity;
+    scroll-padding-inline: var(--sc-space-4);
+  }
+
+  .sc-tab {
+    scroll-snap-align: start;
+  }
+
+  /* The panes: one padding and one radius for all of them. */
+  .sc-project,
+  .sc-goal,
+  .sc-skill,
+  .sc-run,
+  .sc-decision,
+  .sc-comment,
+  .sc-facts {
+    padding: var(--sc-space-4);
+    border-radius: var(--sc-radius-lg);
+  }
+
+  /* The board scrolls from edge to edge of the window, its columns snapping into place. */
+  .sc-board {
+    min-height: 0;
+    margin-inline: calc(-1 * var(--sc-space-4));
+    padding-inline: var(--sc-space-4);
+    scroll-padding-inline: var(--sc-space-4);
+  }
+
+  .sc-filters {
+    margin-bottom: var(--sc-space-4);
+  }
+
+  /* A task's head: the parent on one line, the title, the badges, then the ways as a row of
+     equal buttons. */
+  .sc-task-header {
+    display: grid;
+    justify-content: stretch;
+    gap: var(--sc-space-3);
+  }
+
+  .sc-task-parent {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .sc-task-actions {
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  .sc-task-actions > * {
+    flex: 1 1 0;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  /* The calendar's legend, tighter; what is under the month, further apart. */
+  .sc-calendar-legend {
+    gap: var(--sc-space-1) var(--sc-space-3);
+  }
+
+  .sc-calendar-below {
+    gap: var(--sc-space-6);
+  }
+
+  /* The roadmap's label column, narrower, so that the months have the room. */
+  .sc-timeline-row {
+    grid-template-columns: minmax(5.5rem, 7rem) minmax(14rem, 1fr);
+  }
+}
+
+/* A phone's month: a dot per task per day. */
+@media (max-width: 40rem) {
+  .sc-calendar-cell {
+    height: auto;
+    min-height: 3.25rem;
+    padding: 2px var(--sc-space-1) var(--sc-space-1);
+    /* The rows of dots as tall as the dots, not as tall as a line of text. */
+    line-height: 0;
+  }
+
+  .sc-calendar-day,
+  .sc-calendar-more {
+    line-height: var(--sc-leading-snug);
+  }
+
+  .sc-calendar-lane {
+    display: none;
+  }
+
+  /* A task planned across days: a dot on each of its days, in its category's colour, the
+     late one in the danger colour; nothing of the bar remains. */
+  .sc-calendar-bar,
+  .sc-calendar-bar-begins,
+  .sc-calendar-bar-ends {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    margin: 2px 3px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-full);
+    background: var(--sc-category-mark, var(--sc-category-line));
+    vertical-align: top;
+  }
+
+  .sc-calendar-bar.sc-calendar-late {
+    background: var(--sc-color-danger);
+  }
+
+  /* A task on its day: the same dot. */
+  .sc-calendar-task {
+    margin: 2px 3px 0 0;
+    vertical-align: top;
+  }
+
+  .sc-calendar-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  .sc-calendar-more {
+    margin-top: 2px;
+    text-align: left;
+  }
+}
+
+/* A day's number is a button: pressed, the day's tasks are listed under the month. */
+.sc-calendar-day[type="button"] {
+  width: auto;
+  margin-inline-start: calc(-1 * var(--sc-space-1));
+  padding: 0 var(--sc-space-1);
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+  line-height: var(--sc-leading-snug);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sc-calendar-day[type="button"]:hover {
+  background: var(--sc-color-sheet-hover);
+}
+
+.sc-calendar-day[aria-pressed="true"] {
+  background: var(--sc-color-accent);
+  color: #ffffff;
+}
+
+.sc-calendar-cell-picked {
+  border-color: var(--sc-color-accent);
+  background: color-mix(in srgb, var(--sc-color-accent) 6%, var(--sc-color-sheet));
+}
+
+/* The tasks of the picked day, under the month: a pane with the day over the rows. */
+.sc-calendar-day-list {
+  display: grid;
+  gap: var(--sc-space-3);
+  margin-top: var(--sc-space-4);
+  padding: var(--sc-space-4);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-lg);
+  background: var(--sc-color-sheet);
+}
+
+.sc-calendar-day-list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sc-space-2);
+}
+
+.sc-calendar-day-list-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-2);
+  margin: 0;
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+}
+
+/* How many a day holds: said on a phone, where the day shows three dots and no more. */
+.sc-calendar-count {
+  display: none;
+}
+
+@media (max-width: 40rem) {
+  /* The number covers the whole day, so that a finger anywhere on it lists the day's tasks;
+     the dots and the count under it are a picture, not targets. */
+  .sc-calendar-cell {
+    position: relative;
+    padding-top: 1.375rem;
+  }
+
+  .sc-calendar-day[type="button"] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: auto;
+    margin: 0;
+    padding: 2px var(--sc-space-1);
+    border-radius: var(--sc-radius-md);
+  }
+
+  /* No pointer rests on a phone; a finger that tapped must not leave a sheet over the dots. */
+  .sc-calendar-day[type="button"]:hover {
+    background: transparent;
+  }
+
+  .sc-calendar-day[aria-pressed="true"] {
+    background: transparent;
+    color: var(--sc-color-accent);
+    font-weight: var(--sc-weight-bold);
+  }
+
+  .sc-calendar-cell > a,
+  .sc-calendar-cell > .sc-calendar-more {
+    pointer-events: none;
+  }
+
+  .sc-calendar-cell > a:nth-of-type(n + 4),
+  .sc-calendar-cell > .sc-calendar-more {
+    display: none;
+  }
+
+  .sc-calendar-count {
+    display: block;
+    width: fit-content;
+    min-width: 1rem;
+    margin-top: 3px;
+    padding: 0 4px;
+    border-radius: var(--sc-radius-full);
+    background: color-mix(in srgb, var(--sc-color-text-muted) 14%, transparent);
+    color: var(--sc-color-text-muted);
+    font-size: 0.625rem;
+    font-weight: var(--sc-weight-medium);
+    line-height: 1rem;
+    text-align: center;
+  }
+
+  .sc-calendar-day-list {
+    margin-top: var(--sc-space-3);
+  }
+}
+
+/* The end of a phone's header: the live dot, the avatar and the caret close together. */
+@media (max-width: 40rem) {
+  .sc-header-end {
+    gap: 0;
+  }
+
+  .sc-menu-summary {
+    gap: var(--sc-space-1);
+    padding-inline: var(--sc-space-1);
+  }
+}
+
+/* The ways under a comment's field stand on one row at one height, the small file button
+   included, so that none sits lower than the one beside it. */
+.sc-comment-form-actions > .sc-button,
+.sc-comment-form-actions > label {
+  min-height: var(--sc-control-size);
+  padding-inline: var(--sc-space-4);
+  font-size: var(--sc-text-sm);
+}