@skillcdn/console 0.4.2 → 0.4.4

package/src/styles/console.css

@@ -465,7 +465,9 @@ table {
   align-items: center;
   gap: var(--sc-space-2);
   padding: var(--sc-space-2) 0 var(--sc-space-3);
+  border: 0;
   border-bottom: 2px solid transparent;
+  background: none;
   color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
   font-weight: var(--sc-weight-medium);
@@ -506,14 +508,44 @@ table {
   top: 100%;
 }
 
-/* The sub-tabs of a plugin with several pages, above its frame. */
+/* The pages of a plugin: the header's tabs going on a row lower, on the same gutters, the line
+   under them where the page begins. The line is a shadow, so that the current tab's underline lies
+   on it, as the header's does on its own line, in a row that scrolls sideways. */
+.sc-page-tabs {
+  display: flex;
+  flex: none;
+  gap: var(--sc-space-5);
+  margin: calc(var(--sc-main-top) * -1) calc(var(--sc-main-side) * -1) var(--sc-space-5);
+  padding: var(--sc-space-1) var(--sc-main-side) 0;
+  background: color-mix(in srgb, var(--sc-color-bg) 45%, transparent);
+  box-shadow: inset 0 -1px 0 var(--sc-color-border);
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
 
+/* The views within a page, as a plugin has in its frame: the console's view switch, in a tab's
+   words, so that the row reads as a level below the tabs. What stands around it is the page's. */
 .sc-subtabs {
   display: flex;
-  gap: var(--sc-space-4);
-  margin-bottom: var(--sc-space-4);
-  border-bottom: var(--sc-border);
-  overflow: auto hidden;
+  flex-wrap: wrap;
+  gap: var(--sc-space-1);
+}
+
+.sc-subtabs .sc-tab {
+  padding: var(--sc-space-1) var(--sc-space-3);
+  border-bottom: 0;
+  border-radius: var(--sc-radius-full);
+  cursor: pointer;
+}
+
+.sc-subtabs .sc-tab:hover {
+  background: var(--sc-color-bg-inset);
+}
+
+.sc-subtabs .sc-tab-current {
+  background: var(--sc-color-bg-raised);
+  box-shadow: 0 0 0 1px var(--sc-color-border);
+  color: var(--sc-color-text);
 }
 
 /* A plugin's frame: the width of the page, as tall as the frame says. */
@@ -527,6 +559,14 @@ table {
   background: transparent;
 }
 
+/* A page pads itself by a step, for the shadows of what is in it, which the frame would cut. The
+   frame stands that step outside the page's column, so that the page's first words line up with
+   the tabs above it, and with every other page's. */
+.sc-plugin-frame-page {
+  width: calc(100% + 2 * var(--sc-space-4));
+  margin: calc(var(--sc-space-4) * -1);
+}
+
 /* A plugin's frame document, which the console serves marked with data-console: it paints no
    background and is as tall as its content, so that the box the console draws shows through and
    the frame shrinks as well as grows; no room is kept for a scrollbar it never shows. */
@@ -541,50 +581,11 @@ html[data-console] body {
   background: transparent;
 }
 
-/* The widgets of the front page: a grid of six columns, above or below the projects. The page's
-   head keeps its own distance above the top ones. */
-
-.sc-widgets {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: var(--sc-space-4);
-}
-
-.sc-widgets-top {
-  margin: 0 0 var(--sc-space-5);
-}
-
-.sc-widgets-bottom {
-  margin: var(--sc-space-5) 0 0;
-}
-
-.sc-widget {
-  grid-column: span 6;
-  padding: var(--sc-space-3) var(--sc-space-4);
-  border: var(--sc-border);
-  border-radius: var(--sc-radius-lg);
-  background: var(--sc-color-bg-raised);
-}
-
-.sc-widget-title {
-  margin: 0 0 var(--sc-space-2);
-  font-size: var(--sc-text-sm);
-  font-weight: var(--sc-weight-medium);
+/* What stands in for a frame that has nothing to show. */
+.sc-plugin-frame-unavailable {
+  margin: 0;
   color: var(--sc-color-text-muted);
-}
-
-@media (min-width: 48rem) {
-  .sc-widget-third {
-    grid-column: span 2;
-  }
-
-  .sc-widget-half {
-    grid-column: span 3;
-  }
-
-  .sc-widget-full {
-    grid-column: span 6;
-  }
+  font-size: var(--sc-text-sm);
 }
 
 /* What waits, beside a tab's name: a count in the point colour, so it reads before the words. */
@@ -772,18 +773,20 @@ html[data-console] body {
 /* The page is a column of blocks that fills the window below the header, so that a block which
    wants the rest of the height, the board, can take it. */
 .sc-main {
+  --sc-main-top: var(--sc-space-6);
+  --sc-main-side: var(--sc-gutter);
   display: flex;
   flex: 1;
   flex-direction: column;
   width: 100%;
-  padding: var(--sc-space-6) var(--sc-gutter) var(--sc-space-8);
+  padding: var(--sc-main-top) var(--sc-main-side) var(--sc-space-8);
 }
 
 /* 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-6) var(--sc-gutter);
+  padding: var(--sc-main-top) var(--sc-main-side);
 }
 
 /* A page that takes the whole window takes the header with it, so that the lockup, the tabs and
@@ -884,7 +887,9 @@ html[data-console] body {
 
 .sc-panel,
 .sc-column,
-.sc-project,
+.sc-tile-pane,
+.sc-home-bar,
+.sc-person-card,
 .sc-decision,
 .sc-run,
 .sc-comment,
@@ -2528,14 +2533,128 @@ select.sc-input {
   user-select: all;
 }
 
-/* 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. */
+/* People: everyone of the board as cards in a grid. The person at the head, their account and
+   where it came from under the name; what they are as rows of one shape, so that the cards read
+   alike down a column; the ways to their work at the foot. */
 
 .sc-people {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: var(--sc-space-4);
+}
+
+.sc-person-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-space-4);
+  min-width: 0;
+  padding: var(--sc-space-5);
+  border-radius: var(--sc-radius-xl);
+}
+
+.sc-person-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-3);
+  min-width: 0;
+}
+
+.sc-person-card-head .sc-avatar {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--sc-text-lg);
+}
+
+.sc-person-card-who {
+  display: grid;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.sc-person-card-name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sc-space-1) var(--sc-space-2);
+  color: var(--sc-color-text);
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+  line-height: var(--sc-leading-snug);
+  overflow-wrap: anywhere;
+}
+
+.sc-person-card-name .sc-person-you {
+  margin: 0;
+  font-weight: var(--sc-weight-normal);
+}
+
+.sc-person-card-note {
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  overflow-wrap: anywhere;
+}
+
+.sc-person-facts {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding-top: var(--sc-space-3);
+  border-top: var(--sc-hairline);
+}
+
+.sc-person-fact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--sc-space-3);
+  min-height: 2rem;
+}
+
+.sc-person-fact dt {
+  flex: none;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-person-fact dd {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--sc-text-sm);
+}
+
+/* The ways to a person's work at the foot of the card, the way out across from them. */
+.sc-person-card-ways {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-1);
+  margin-top: auto;
+  margin-inline: calc(var(--sc-space-2) * -1);
+}
+
+.sc-person-card-ways button {
+  margin-inline-start: auto;
+}
+
+/* A select that reads as the value it holds, until the pointer or the focus is on it. */
+select.sc-input-quiet {
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 2rem;
+  padding-block: 0;
+  padding-inline-start: var(--sc-space-2);
+  border-color: transparent;
+  background-color: transparent;
+  text-overflow: ellipsis;
+}
+
+select.sc-input-quiet:hover,
+select.sc-input-quiet:focus-visible {
+  border-color: var(--sc-color-border);
+  background-color: var(--sc-color-sheet);
 }
 
 .sc-person-row {
@@ -2596,118 +2715,11 @@ select.sc-input {
   font-size: var(--sc-text-sm);
 }
 
-/* Projects: what a person may see, each with what they are in it and what waits in it. */
-
-.sc-projects {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-  gap: var(--sc-space-4);
-}
-
-.sc-project {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-space-2);
-  padding: var(--sc-space-5);
-  border-radius: var(--sc-radius-xl);
-  transition:
-    border-color var(--sc-transition),
-    background var(--sc-transition),
-    box-shadow var(--sc-transition);
-}
-
-.sc-project:hover,
-.sc-project:focus-within {
-  border-color: var(--sc-color-accent);
-  background: var(--sc-glass-surface-hover);
-  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: 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 {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-
-.sc-project-name:hover {
-  color: var(--sc-color-text);
-}
-
-.sc-project-name:focus-visible {
-  outline: none;
-}
-
 .sc-project-key {
   color: var(--sc-color-text-faint);
   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);
-}
-
-.sc-project-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sc-space-2);
-  margin-top: auto;
-  padding-top: var(--sc-space-3);
-  border-top: var(--sc-hairline);
-}
-
-.sc-project-meta:empty {
-  display: none;
-}
-
 .sc-members {
   display: grid;
   gap: var(--sc-space-4);
@@ -2980,7 +2992,8 @@ select.sc-input {
   }
 }
 
-.sc-comment-files {
+.sc-comment-files,
+.sc-decision-files {
   display: grid;
   gap: var(--sc-space-2);
   margin: 0;
@@ -2990,6 +3003,7 @@ select.sc-input {
 }
 
 .sc-comment-picture,
+.sc-decision-picture,
 .sc-artifact-picture {
   display: grid;
   gap: var(--sc-space-1);
@@ -3828,11 +3842,12 @@ select.sc-input {
 
 /* 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. */
+   the one under the pointer included, and under the cards and the header, which the page scrolls
+   beneath; 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;
+  z-index: 2;
   flex: none;
   max-width: calc(var(--sc-span, 1) * 100% - 2.25rem);
   pointer-events: none;
@@ -3916,14 +3931,6 @@ select.sc-input {
 
 /* 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;
@@ -4559,7 +4566,13 @@ select.sc-input {
   }
 
   .sc-main {
-    padding: var(--sc-space-5) var(--sc-space-4) var(--sc-space-7);
+    --sc-main-top: var(--sc-space-5);
+    --sc-main-side: var(--sc-space-4);
+    padding-bottom: var(--sc-space-7);
+  }
+
+  .sc-page-tabs {
+    gap: var(--sc-space-4);
   }
 
   .sc-page-title,
@@ -5153,13 +5166,14 @@ select.sc-input {
 }
 
 /* A goal's page reads as the board does: the facts in a row at its head, then a switch between
-   the views of its tasks, then the view, which takes the rest of the height as the board does. */
+   the views of its tasks, then the view, which takes the rest of the height as the board does. A
+   view that needs more makes the page longer, as on any page: held to the window, it would run out
+   of the shell, and the header, which stays within the shell, would go with the scrolling. */
 .sc-goal-page {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
   gap: var(--sc-space-4);
-  min-height: 0;
 }
 
 .sc-goal-header {
@@ -5249,7 +5263,6 @@ select.sc-input {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
-  min-height: 0;
 }
 
 .sc-goal-view-list {
@@ -5893,27 +5906,140 @@ select.sc-input {
   margin-top: 0.25em;
 }
 
-.sc-plugin-tick-words {
-  display: grid;
-  gap: 2px;
+/* One the plugin requires: on, and not the person's to change, so it does not read as a control. */
+.sc-plugin-tick-locked {
+  background: transparent;
+  cursor: default;
 }
 
-.sc-plugin-tick-name {
-  font-weight: var(--sc-weight-medium);
+/* What a plugin asks, in two lists: what it requires, and what it can go without. */
+.sc-plugin-capabilities {
+  display: grid;
+  gap: var(--sc-space-2);
 }
 
-.sc-plugin-tick-under {
-  color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
+.sc-plugin-capabilities + .sc-plugin-capabilities {
+  margin-top: var(--sc-space-3);
 }
 
-/* The capabilities an enabled plugin holds, one a line; its commands as words side by side. */
-.sc-plugin-held {
-  display: grid;
-  gap: var(--sc-space-1);
+.sc-plugin-capabilities-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sc-space-1) var(--sc-space-2);
   margin: 0;
-  padding: 0;
-  list-style: none;
+}
+
+.sc-plugin-capabilities-name {
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-bold);
+}
+
+.sc-plugin-capabilities-head .sc-settings-hint {
+  margin: 0;
+}
+
+/* What it can go without, on the page of a plugin that is on: under what it requires, each a box. */
+.sc-plugin-optional {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin-top: var(--sc-space-3);
+}
+
+.sc-plugin-tick-words {
+  display: grid;
+  gap: 2px;
+}
+
+.sc-plugin-tick-name {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-plugin-tick-under {
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+/* A setting of several choices (a list of an enum): a pill per choice, lit while chosen. */
+.sc-toggle-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.sc-toggle-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+  min-height: var(--sc-control-size);
+  padding: 0 var(--sc-space-3);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-bg-inset);
+  font-size: var(--sc-text-sm);
+  cursor: pointer;
+}
+
+.sc-toggle-chip input {
+  margin: 0;
+}
+
+.sc-toggle-chip:has(input:checked) {
+  border-color: var(--sc-color-point);
+  background: var(--sc-color-point-subtle);
+  color: var(--sc-color-point);
+}
+
+/* A list of several choices too long for pills: a column of boxes. */
+.sc-check-list {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A list of items typed one by one: the field and its button on one line, the items as chips above. */
+.sc-chip-input {
+  display: flex;
+  gap: var(--sc-space-2);
+  width: 100%;
+}
+
+.sc-chip-input .sc-input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The settings form divided into groups: each a titled block after the ungrouped settings. */
+.sc-settings-group {
+  padding-top: var(--sc-space-5);
+}
+
+.sc-settings-group-title {
+  margin: 0;
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-settings-group > .sc-settings-row:first-of-type {
+  border-top: 0;
+}
+
+/* The capabilities an enabled plugin holds, one a line; its commands as words side by side. */
+.sc-plugin-held {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .sc-plugin-codes {
@@ -6026,3 +6152,449 @@ select.sc-input {
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* The front page (ADR-0061): one grid of square cells, each as wide as the page gives it, a
+   tile's place and shape numbers on its style. A tile stands where a transform puts it, so that
+   it glides to a new place and the frame in it stays loaded. */
+
+.sc-home {
+  container-type: inline-size;
+}
+
+.sc-home-grid {
+  --sc-home-columns: 8;
+  --sc-home-rows: 1;
+  --sc-home-gap: var(--sc-space-4);
+  --sc-home-cell: calc(
+    (100cqi - (var(--sc-home-columns) - 1) * var(--sc-home-gap)) /
+    var(--sc-home-columns)
+  );
+  --sc-home-step: calc(var(--sc-home-cell) + var(--sc-home-gap));
+  position: relative;
+  height: calc(var(--sc-home-rows) * var(--sc-home-step) - var(--sc-home-gap));
+  row-gap: var(--sc-home-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-home-grid[data-columns="4"] {
+  --sc-home-gap: var(--sc-space-3);
+}
+
+.sc-tile {
+  container: sc-tile / size;
+  --sc-tile-x: 0;
+  --sc-tile-y: 0;
+  --sc-tile-w: 1;
+  --sc-tile-h: 1;
+  --sc-tile-left: 0px;
+  --sc-tile-top: 0px;
+  --sc-tile-wait: 0ms;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--sc-tile-w) * var(--sc-home-step) - var(--sc-home-gap));
+  height: calc(var(--sc-tile-h) * var(--sc-home-step) - var(--sc-home-gap));
+  /* The property of its own and not `transform`, which the `scale` of a tile in hand would multiply. */
+  translate: calc(var(--sc-tile-x) * var(--sc-home-step))
+    calc(var(--sc-tile-y) * var(--sc-home-step));
+}
+
+.sc-tile-pane {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--sc-radius-xl);
+  transition:
+    border-color var(--sc-transition),
+    background var(--sc-transition),
+    box-shadow var(--sc-transition);
+}
+
+/* A project as an icon: its mark and its name in the middle of the cell, what waits in the corner.
+   The mark and the room around it follow the cell. What still does not fit stands whole or not at
+   all: its row goes to a second column, past the room the tile cuts off, so that no line of words
+   is ever cut across. */
+.sc-tile-project {
+  --sc-tile-mark: clamp(1.75rem, 47cqh, 3.25rem);
+  display: flex;
+  flex-flow: column wrap;
+  gap: clamp(0.125rem, 4cqh, 0.5rem) var(--sc-space-7);
+  align-content: flex-start;
+  justify-content: center;
+  padding: clamp(0.25rem, 8cqh, 0.75rem);
+  overflow: hidden;
+  color: var(--sc-color-text);
+  text-align: center;
+  text-decoration: none;
+}
+
+.sc-tile-project > :not(.sc-tile-count) {
+  flex: none;
+  width: 100%;
+}
+
+.sc-tile-mark {
+  display: flex;
+  justify-content: center;
+}
+
+a.sc-tile-project:hover,
+a.sc-tile-project:focus-visible {
+  border-color: var(--sc-color-accent);
+  background: var(--sc-glass-surface-hover);
+  color: var(--sc-color-text);
+  box-shadow: var(--sc-glass-sheen), var(--sc-glass-lift), var(--sc-glow);
+}
+
+.sc-tile-project .sc-mark {
+  width: var(--sc-tile-mark);
+  height: var(--sc-tile-mark);
+  font-size: calc(var(--sc-tile-mark) * 0.42);
+}
+
+.sc-tile-name {
+  display: -webkit-box;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-medium);
+  line-height: var(--sc-leading-snug);
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+/* What waits, in the corner: the count a tab shows, where it stands on a tile. */
+.sc-tile-count {
+  position: absolute;
+  top: var(--sc-space-2);
+  right: var(--sc-space-2);
+}
+
+/* On a low cell the name keeps to one line, on the lowest in smaller words. */
+@container sc-tile (height < 7.75rem) {
+  .sc-tile-project:not(.sc-tile-project-card) .sc-tile-name {
+    -webkit-line-clamp: 1;
+  }
+}
+
+@container sc-tile (height < 5.5rem) {
+  .sc-tile-project:not(.sc-tile-project-card) {
+    border-radius: var(--sc-radius-lg);
+  }
+
+  .sc-tile-project:not(.sc-tile-project-card) .sc-tile-name {
+    font-size: var(--sc-text-xs);
+    line-height: var(--sc-leading-tight);
+  }
+}
+
+/* A project as a card, read from the corner: its name, what it is at a glance, and as much of its
+   description as the card has room for, the rows lost from the last up. */
+.sc-tile-project-card {
+  --sc-tile-mark: clamp(2.25rem, 22cqh, 3.25rem);
+  justify-content: flex-start;
+  padding: clamp(0.75rem, 8cqh, 1.25rem);
+  text-align: start;
+}
+
+.sc-tile-project-card .sc-tile-mark {
+  justify-content: flex-start;
+}
+
+.sc-tile-project-card .sc-tile-name {
+  font-size: var(--sc-text-lg);
+  font-weight: var(--sc-weight-bold);
+}
+
+.sc-tile-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-1) var(--sc-space-2);
+  align-items: center;
+}
+
+.sc-tile-about {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+@container sc-tile (height < 15rem) {
+  .sc-tile-project-card .sc-tile-name {
+    -webkit-line-clamp: 1;
+  }
+
+  .sc-tile-about {
+    -webkit-line-clamp: 2;
+  }
+}
+
+@container sc-tile (height < 13rem) {
+  .sc-tile-about {
+    -webkit-line-clamp: 1;
+  }
+}
+
+/* A widget: its name, and its frame filling the cells its size gives it. */
+.sc-tile-widget {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  padding: var(--sc-space-3) var(--sc-space-4);
+  overflow: hidden;
+}
+
+.sc-tile-title {
+  margin: 0 0 var(--sc-space-2);
+  overflow: hidden;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-tile-widget .sc-plugin-frame-widget {
+  height: 100%;
+  min-height: 0;
+}
+
+/* While the page is arranged: the cells show as dots, every tile is a thing to take hold of, and
+   what is in a frame stays out of the pointer's way. The bar stays in reach, just under the header
+   and above the tiles that pass beneath it. */
+.sc-home-bar {
+  position: sticky;
+  top: calc(var(--sc-header-height) + 2.75rem + var(--sc-space-3));
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2) var(--sc-space-4);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sc-space-4);
+  padding: var(--sc-space-2) var(--sc-space-2) var(--sc-space-2) var(--sc-space-4);
+  border-radius: var(--sc-radius-lg);
+}
+
+.sc-home-hint {
+  margin: 0;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-home-bar-actions {
+  display: flex;
+  gap: var(--sc-space-2);
+  align-items: center;
+}
+
+.sc-home-tray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  align-items: center;
+  margin-bottom: var(--sc-space-4);
+}
+
+.sc-home-add {
+  padding: var(--sc-space-1) var(--sc-space-3);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-sheet);
+  color: var(--sc-color-text);
+  font: inherit;
+  font-size: var(--sc-text-sm);
+  cursor: pointer;
+}
+
+.sc-home-add:hover {
+  border-color: var(--sc-color-accent);
+}
+
+.sc-home-editing .sc-home-grid {
+  background-image: radial-gradient(circle, var(--sc-color-text-faint) 1px, transparent 1.5px);
+  background-position: calc(var(--sc-home-cell) / 2) calc(var(--sc-home-cell) / 2);
+  background-size: var(--sc-home-step) var(--sc-home-step);
+}
+
+/* A tile moves with a little give, overshooting its cell and settling on it, and those in the way
+   start one after another, each as the wait in its style says. One put down keeps its place above
+   the others until it has landed. */
+.sc-home-editing .sc-tile {
+  z-index: 1;
+  cursor: grab;
+  transition:
+    translate 360ms cubic-bezier(0.25, 1.35, 0.4, 1) var(--sc-tile-wait),
+    scale 160ms ease-out,
+    z-index 0s linear 360ms;
+  user-select: none;
+}
+
+.sc-home-editing .sc-tile:focus-visible {
+  outline: var(--sc-focus-ring);
+  outline-offset: 2px;
+}
+
+.sc-home-editing .sc-tile:hover .sc-tile-pane {
+  border-color: var(--sc-color-accent);
+}
+
+.sc-home-editing .sc-plugin-frame {
+  pointer-events: none;
+}
+
+/* A finger resting on a tile is neither selecting its words nor asking for the page's menu. */
+@media (pointer: coarse) {
+  .sc-home-editing .sc-tile {
+    -webkit-touch-callout: none;
+  }
+}
+
+/* The tile in hand: lifted off the page, and under the pointer with no delay. */
+.sc-home-editing .sc-tile-held {
+  z-index: 10;
+  translate: var(--sc-tile-left) var(--sc-tile-top);
+  scale: 1.04;
+  transition: scale 160ms ease-out;
+}
+
+.sc-tile-held .sc-tile-pane {
+  box-shadow: var(--sc-glass-sheen), var(--sc-glass-lift), var(--sc-glow);
+}
+
+.sc-home-held,
+.sc-home-held .sc-tile,
+.sc-home-held .sc-tile * {
+  cursor: grabbing;
+}
+
+/* Where it would land: the tile itself, faint, on a pane of the accent's glass, beneath those on
+   their way out of it. */
+.sc-home-editing .sc-tile-slot {
+  z-index: 0;
+  animation: sc-tile-slot-in 160ms ease-out;
+  pointer-events: none;
+}
+
+.sc-tile-slot .sc-tile-pane {
+  border-color: color-mix(in srgb, var(--sc-color-accent-solid) 45%, transparent);
+  background: color-mix(in srgb, var(--sc-color-accent-subtle) 50%, transparent);
+  box-shadow: none;
+}
+
+.sc-tile-slot .sc-tile-pane > * {
+  opacity: 0.4;
+}
+
+.sc-tile-slot .sc-tile-count {
+  display: none;
+}
+
+@keyframes sc-tile-slot-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* The ways on a tile while the page is arranged: off the page at its corner, the sizes across. */
+.sc-tile-remove {
+  position: absolute;
+  top: calc(var(--sc-space-2) * -1);
+  left: calc(var(--sc-space-2) * -1);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-bg-raised);
+  color: var(--sc-color-text);
+  font-size: var(--sc-text-sm);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.sc-tile-remove:hover {
+  border-color: var(--sc-color-accent);
+}
+
+.sc-tile-sizes {
+  position: absolute;
+  top: var(--sc-space-1);
+  right: var(--sc-space-1);
+  z-index: 1;
+  display: inline-flex;
+  gap: 1px;
+  margin: 0;
+  padding: 1px;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-raised);
+}
+
+.sc-tile-size {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 3px;
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
+  color: var(--sc-color-text-muted);
+  cursor: pointer;
+}
+
+.sc-tile-size:hover {
+  background: var(--sc-color-bg-inset);
+}
+
+.sc-tile-size-on {
+  background: var(--sc-color-accent-subtle);
+  color: var(--sc-color-accent);
+}
+
+/* Under the sizes, a widget's name ends short of them; on small cells a project stands lower. */
+.sc-home-editing .sc-tile-title {
+  padding-inline-end: 4.5rem;
+}
+
+.sc-home-editing .sc-home-grid[data-columns="4"] .sc-tile-size,
+.sc-home-editing .sc-home-grid[data-columns="6"] .sc-tile-size {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 2px;
+}
+
+.sc-home-editing .sc-home-grid[data-columns="4"] .sc-tile-project:not(.sc-tile-project-card),
+.sc-home-editing .sc-home-grid[data-columns="6"] .sc-tile-project:not(.sc-tile-project-card) {
+  justify-content: flex-end;
+}
+
+/* The size's shape in small: the cells it takes, a few pixels each. */
+.sc-tile-size-glyph {
+  display: block;
+  width: calc(var(--sc-tile-w) * 2px + 4px);
+  height: calc(var(--sc-tile-h) * 2px + 4px);
+  border: 1.5px solid currentcolor;
+  border-radius: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-home-editing .sc-tile,
+  .sc-home-editing .sc-tile-held {
+    transition: none;
+  }
+
+  .sc-home-editing .sc-tile-slot {
+    animation: none;
+  }
+}