@skillcdn/console 0.4.3 → 0.4.5

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,10 @@ html[data-console] body {
 
 .sc-panel,
 .sc-column,
-.sc-project,
+.sc-tile-pane,
+.sc-home-bar,
+.sc-person-card,
+.sc-team-card,
 .sc-decision,
 .sc-run,
 .sc-comment,
@@ -1391,24 +1397,72 @@ select.sc-input {
   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. */
+/* Chips: things named among others in a row, a person, a team, an item of a list, a holder of
+   a role, each as low as a line of text and round at its ends, so that a row of them stays light
+   beside the fields of a form; the way to take one out in its end where it can be, a person's
+   face in its start. `Chip` writes one, and every row of things a person adds to and takes from
+   is made of them; the way to add one more stands at the end of the row as one more chip, a
+   picker with `sc-picker-add`. */
 .sc-chips {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--sc-space-2);
+  min-width: 0;
 }
 
 .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);
+  max-width: 100%;
+  min-height: 1.75rem;
+  padding: 0 var(--sc-space-3);
   border: var(--sc-border);
-  border-radius: var(--sc-radius-md);
-  background: var(--sc-color-bg-inset);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-sheet);
+  color: var(--sc-color-text);
   font-size: var(--sc-text-sm);
+  line-height: var(--sc-leading-snug);
+  white-space: nowrap;
+}
+
+/* What a chip names, cut short where the row has no room for it whole. */
+.sc-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sc-chip-label:has(> .sc-person) {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+}
+
+.sc-chip-label > .sc-person {
+  min-width: 0;
+}
+
+.sc-chip-label .sc-person-login {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: var(--sc-weight-normal);
+  text-overflow: ellipsis;
+}
+
+/* A person's face in the chip's rounded start, and the way out in its end, a hair inside. */
+.sc-chip:has(.sc-avatar) {
+  padding-inline-start: 0.1875rem;
+}
+
+.sc-chip:has(> .sc-chip-remove) {
+  padding-inline-end: 0.1875rem;
+}
+
+.sc-chip .sc-avatar-sm {
+  width: 1.375rem;
+  height: 1.375rem;
 }
 
 .sc-chip-remove,
@@ -1416,20 +1470,25 @@ select.sc-input {
   display: inline-grid;
   flex: none;
   place-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0;
   border: 0;
-  border-radius: var(--sc-radius-sm);
+  border-radius: var(--sc-radius-full);
   background: transparent;
-  color: var(--sc-color-text-muted);
+  color: var(--sc-color-text-faint);
   font-size: var(--sc-text-md);
   line-height: 1;
   cursor: pointer;
+  transition:
+    background var(--sc-transition),
+    color var(--sc-transition),
+    opacity var(--sc-transition);
 }
 
 .sc-chip-remove:hover:not(:disabled),
 .sc-picker-clear:hover:not(:disabled) {
-  background: var(--sc-color-bg-raised);
+  background: var(--sc-color-bg-inset);
   color: var(--sc-color-text);
 }
 
@@ -1438,9 +1497,10 @@ select.sc-input {
   outline: var(--sc-focus-ring);
 }
 
-.sc-chips .sc-chip-add {
-  width: auto;
-  min-width: 10rem;
+.sc-chip-remove:disabled,
+.sc-picker-clear:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
 /* A picker: the field that searches a listing, its page of results under it, and the choice in its place. */
@@ -1510,6 +1570,107 @@ select.sc-input {
   padding: var(--sc-space-2);
 }
 
+/* A picker in the board's filters, in the form that adds a member, or among chips without being
+   the way to add to them: wide enough for a name, never the whole row. */
+.sc-chips .sc-picker:not(.sc-picker-add),
+.sc-filters .sc-picker,
+.sc-member-form .sc-picker {
+  flex: 0 1 14rem;
+  min-width: 11rem;
+}
+
+/* A picker that reads as what it holds, until the pointer or the focus is on it: a fact changed
+   in place, as low as a line of the facts, as a quiet field is. Its way out stands while the
+   pointer or the focus is on it, where there is a pointer to hover. */
+.sc-picker-quiet > .sc-input,
+.sc-picker-quiet.sc-picker-chosen {
+  min-height: 2rem;
+  padding-block: 0;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.sc-picker-quiet > .sc-input {
+  padding-inline: var(--sc-space-2);
+}
+
+.sc-picker-quiet.sc-picker-chosen {
+  padding-inline: var(--sc-space-2) 0.1875rem;
+  transition:
+    border-color var(--sc-transition),
+    background var(--sc-transition);
+}
+
+.sc-picker-quiet > .sc-input:hover:not(:disabled),
+.sc-picker-quiet > .sc-input:focus,
+.sc-picker-quiet.sc-picker-chosen:hover,
+.sc-picker-quiet.sc-picker-chosen:focus-within {
+  border-color: var(--sc-color-border);
+  background-color: var(--sc-color-sheet);
+}
+
+.sc-picker-quiet > .sc-input:focus {
+  border-color: var(--sc-color-accent);
+}
+
+@media (hover: hover) {
+  .sc-picker-quiet.sc-picker-chosen:not(:hover):not(:focus-within) .sc-picker-clear {
+    opacity: 0;
+  }
+}
+
+/* A picker that adds one more to a row of chips: a chip itself, its line dashed, as wide as its
+   words until it is typed in, and its list as wide as a name needs. */
+.sc-picker-add {
+  flex: none;
+}
+
+.sc-picker.sc-picker-add > .sc-input {
+  width: 8.5rem;
+  min-height: 1.75rem;
+  padding-block: 0;
+  padding-inline: var(--sc-space-3);
+  border-style: dashed;
+  border-radius: var(--sc-radius-full);
+  background: transparent;
+  line-height: var(--sc-leading-snug);
+  transition:
+    width var(--sc-transition),
+    border-color var(--sc-transition),
+    background var(--sc-transition);
+}
+
+.sc-picker.sc-picker-add > .sc-input::placeholder {
+  color: var(--sc-color-text-muted);
+}
+
+.sc-picker.sc-picker-add > .sc-input:hover:not(:disabled) {
+  background: var(--sc-color-sheet);
+}
+
+.sc-picker.sc-picker-add > .sc-input:focus {
+  border-style: solid;
+  background: var(--sc-color-sheet);
+}
+
+/* Where the browser sizes a field by what it holds, the way to add is as wide as its words, and
+   grows as a name is typed into it. */
+@supports (field-sizing: content) {
+  .sc-picker.sc-picker-add > .sc-input {
+    width: auto;
+    min-width: 6rem;
+    max-width: 100%;
+    field-sizing: content;
+  }
+}
+
+.sc-picker-add > .sc-picker-list {
+  right: auto;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(22rem, calc(100vw - 2rem));
+}
+
 /* The workers of a task on a card or a row: pictures side by side, and how many more. */
 .sc-workers {
   display: inline-flex;
@@ -2528,184 +2689,317 @@ 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));
-  gap: var(--sc-space-3);
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: var(--sc-space-4);
 }
 
-.sc-person-row {
+.sc-person-card {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sc-space-2) var(--sc-space-3);
-  padding: var(--sc-space-4);
-  border-radius: var(--sc-radius-lg);
+  flex-direction: column;
+  gap: var(--sc-space-4);
+  min-width: 0;
+  padding: var(--sc-space-5);
+  border-radius: var(--sc-radius-xl);
 }
 
-.sc-person-row > .sc-person {
-  flex: 0 1 auto;
+.sc-person-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-3);
   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-card-head .sc-avatar {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--sc-text-lg);
 }
 
-.sc-person-name {
-  flex: 1 1 100%;
+.sc-person-card-who {
+  display: grid;
+  gap: 0.125rem;
   min-width: 0;
-  color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
 }
 
-/* What let a person in, when they were deactivated, when a login was let in: beside the name, smaller. */
-.sc-person-note {
-  font-size: var(--sc-text-xs);
+.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;
 }
 
-/* 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);
+.sc-person-card-name .sc-person-you {
+  margin: 0;
+  font-weight: var(--sc-weight-normal);
 }
 
-/* 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-card-note {
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  overflow-wrap: anywhere;
 }
 
-.sc-person-row-out .sc-person {
-  opacity: 0.55;
+/* A person's facts: a column of names and a column of values, every value starting on one line
+   down the card, so that the cards read alike. A fact changed in place is a quiet field whose
+   words stand where a value's words stand, its box drawn out into the gap while the pointer or
+   the focus is on it. */
+.sc-person-facts {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--sc-space-1) var(--sc-space-4);
+  margin: 0;
+  padding-top: var(--sc-space-3);
+  border-top: var(--sc-hairline);
 }
 
-.sc-listing-form .sc-field-row {
-  align-items: end;
+.sc-person-fact {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: start;
 }
 
-.sc-field-hint {
-  margin-top: var(--sc-space-2);
+/* A fact's name stands on the first line of its value, however many lines the value takes. */
+.sc-person-fact dt,
+.sc-person-fact dd {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+}
+
+.sc-person-fact dt {
   color: var(--sc-color-text-muted);
   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-person-fact dd {
+  min-width: 0;
+  margin: 0;
+  font-size: var(--sc-text-sm);
 }
 
-.sc-project {
-  display: flex;
-  flex-direction: column;
+/* Whom a person manages: their faces side by side, and how many. */
+.sc-person-reports {
+  display: inline-flex;
+  align-items: center;
   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);
+.sc-person-fact dd > .sc-input-quiet,
+.sc-person-fact dd > .sc-picker-quiet {
+  width: calc(100% + var(--sc-space-2));
+  max-width: none;
+  margin-inline-start: calc(var(--sc-space-2) * -1);
 }
 
-/* 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-person-fact dd > .sc-chips {
+  padding-block: 0.125rem;
 }
 
-.sc-project-head::after {
-  content: "";
-  display: block;
-  clear: both;
+.sc-person-email {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-.sc-project-head > :first-child {
-  float: left;
-  margin-inline-end: var(--sc-space-3);
+/* 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-project-head > .sc-badge {
-  margin-top: var(--sc-space-3);
-  margin-inline-end: var(--sc-space-1);
+.sc-person-card-ways button {
+  margin-inline-start: auto;
 }
 
-/* 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;
+/* A field that reads as the value it holds, until the pointer or the focus is on it: a fact
+   changed in place, as low as a line of the facts, its box drawn only then. A select keeps the
+   room for its chevron, drawn only then too where there is a pointer to hover. */
+.sc-input-quiet {
+  min-height: 2rem;
+  padding-block: 0;
+  padding-inline: var(--sc-space-2);
+  border-color: transparent;
+  background-color: transparent;
+  text-overflow: ellipsis;
 }
 
-.sc-project-name::after {
-  content: "";
-  position: absolute;
-  inset: 0;
+select.sc-input-quiet {
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  padding-inline-end: calc(var(--sc-space-3) * 2 + 0.625rem);
 }
 
-.sc-project-name:hover {
-  color: var(--sc-color-text);
+.sc-input-quiet:hover:not(:disabled),
+.sc-input-quiet:focus {
+  background-color: var(--sc-color-sheet);
 }
 
-.sc-project-name:focus-visible {
-  outline: none;
+.sc-input-quiet:hover:not(:disabled):not(:focus) {
+  border-color: var(--sc-color-border);
+}
+
+@media (hover: hover) {
+  select.sc-input-quiet:not(:hover):not(:focus) {
+    background-image: none;
+  }
+}
+
+.sc-person-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  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;
 }
 
-.sc-project-key {
+/* 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);
 }
 
-/* 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-person-name {
+  flex: 1 1 100%;
+  min-width: 0;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
 }
 
-.sc-project-head > .sc-project-key::after {
-  content: "";
-  display: block;
-  clear: both;
+/* What let a person in, when they were deactivated, when a login was let in: beside the name, smaller. */
+.sc-person-note {
+  font-size: var(--sc-text-xs);
 }
 
-.sc-project-description {
+/* 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.55;
+}
+
+.sc-listing-form .sc-field-row,
+.sc-team-form .sc-field-row {
+  align-items: end;
+}
+
+/* The two views of the people's page, the people and the teams: the page's view switch, with how
+   many each holds beside its name. */
+.sc-people-views {
+  margin-bottom: var(--sc-space-5);
+}
+
+.sc-people-views .sc-tab {
+  align-items: baseline;
+}
+
+.sc-tab-count {
+  color: var(--sc-color-text-faint);
+  font-size: var(--sc-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-tab-current .sc-tab-count {
   color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
 }
 
-.sc-project-meta {
+/* The teams (ADR-0073): a card each in a grid, as the people are; the name and how many at the
+   head, who is in it as chips with the way to add one at the end, the way to delete it at the
+   foot. The name, for an administrator, is a quiet field in the name's own words. */
+.sc-teams {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  gap: var(--sc-space-4);
+}
+
+.sc-team-card {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: var(--sc-space-3);
+  min-width: 0;
+  padding: var(--sc-space-4) var(--sc-space-5);
+  border-radius: var(--sc-radius-xl);
+}
+
+.sc-team-head {
+  display: flex;
+  align-items: center;
   gap: var(--sc-space-2);
-  margin-top: auto;
+  min-width: 0;
+}
+
+/* The team's name, and under it its key, what it is called by (ADR-0074). */
+.sc-team-title {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+
+.sc-team-name {
+  min-width: 0;
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-bold);
+  line-height: var(--sc-leading-snug);
+  overflow-wrap: anywhere;
+}
+
+.sc-team-name.sc-input-quiet {
+  margin-inline-start: calc(var(--sc-space-2) * -1);
+  color: var(--sc-color-text);
+}
+
+.sc-team-members {
   padding-top: var(--sc-space-3);
   border-top: var(--sc-hairline);
 }
 
-.sc-project-meta:empty {
-  display: none;
+.sc-team-ways {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+  margin-inline: calc(var(--sc-space-2) * -1);
+}
+
+.sc-field-hint {
+  margin-top: var(--sc-space-2);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-project-key,
+.sc-team-key {
+  color: var(--sc-color-text-faint);
+  font-size: var(--sc-text-xs);
 }
 
 .sc-members {
@@ -3830,11 +4124,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;
@@ -3918,14 +4213,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;
@@ -4561,7 +4848,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,
@@ -5155,13 +5448,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 {
@@ -5251,7 +5545,6 @@ select.sc-input {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
-  min-height: 0;
 }
 
 .sc-goal-view-list {
@@ -5337,6 +5630,11 @@ select.sc-input {
   width: 100%;
 }
 
+/* A person or a project chosen in a setting: a field as wide as the others. */
+.sc-settings-control > .sc-picker:not(.sc-picker-add) {
+  justify-self: stretch;
+}
+
 .sc-settings-form .sc-form-actions {
   padding-top: var(--sc-space-4);
   border-top: var(--sc-border);
@@ -5895,128 +6193,249 @@ select.sc-input {
   margin-top: 0.25em;
 }
 
-.sc-plugin-tick-words {
-  display: grid;
-  gap: 2px;
-}
-
-.sc-plugin-tick-name {
-  font-weight: var(--sc-weight-medium);
-}
-
-.sc-plugin-tick-under {
-  color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-sm);
+/* 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;
 }
 
-/* The capabilities an enabled plugin holds, one a line; its commands as words side by side. */
-.sc-plugin-held {
+/* 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-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  gap: var(--sc-space-2);
 }
 
-.sc-plugin-codes {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--sc-space-2);
+.sc-plugin-capabilities + .sc-plugin-capabilities {
+  margin-top: var(--sc-space-3);
 }
 
-/* A field with its buttons on one line: a secret to set, the key to type before a purge. */
-.sc-plugin-line {
+.sc-plugin-capabilities-head {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sc-space-2);
-  width: 100%;
+  align-items: baseline;
+  gap: var(--sc-space-1) var(--sc-space-2);
+  margin: 0;
 }
 
-.sc-plugin-line-input {
-  flex: 1 1 8rem;
-  width: auto;
+.sc-plugin-capabilities-name {
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-bold);
 }
 
-/* The roles: one a row, its name and what it is for beside who holds it and the way to grant it. */
-.sc-plugin-roles {
-  display: grid;
+.sc-plugin-capabilities-head .sc-settings-hint {
   margin: 0;
-  padding: 0;
-  list-style: none;
 }
 
-.sc-plugin-role {
+/* 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;
-  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
-  gap: var(--sc-space-2) var(--sc-space-5);
-  padding: var(--sc-space-4) 0;
-  border-top: var(--sc-hairline);
-}
-
-.sc-plugin-role:first-child {
-  padding-top: 0;
-  border-top: 0;
+  gap: var(--sc-space-1);
+  margin-top: var(--sc-space-3);
 }
 
-.sc-plugin-role:last-child {
-  padding-bottom: 0;
+.sc-plugin-tick-words {
+  display: grid;
+  gap: 2px;
 }
 
-.sc-plugin-role-name {
-  display: flex;
+.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-role-key {
+.sc-plugin-tick-under {
   color: var(--sc-color-text-muted);
-  font-weight: normal;
+  font-size: var(--sc-text-sm);
 }
 
-.sc-plugin-holders {
+/* 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;
-  align-items: center;
   gap: var(--sc-space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
 
-/* Who holds a role, a chip each, with the way to revoke a grant in it. */
-.sc-plugin-holder {
+/* A choice is a chip that is its own box: the browser's square kept for the keyboard and a
+   screen reader, out of sight; a choice made is lit in the accent, a tick drawn before its word. */
+.sc-toggle-chip {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: var(--sc-space-1);
+  gap: var(--sc-space-2);
   min-height: 2rem;
-  padding-inline: var(--sc-space-3) var(--sc-space-1);
+  padding: 0 var(--sc-space-3);
   border: var(--sc-border);
   border-radius: var(--sc-radius-full);
   background: var(--sc-color-sheet);
+  color: var(--sc-color-text-muted);
   font-size: var(--sc-text-sm);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--sc-transition),
+    border-color var(--sc-transition),
+    color var(--sc-transition);
 }
 
-.sc-plugin-holder-fixed {
-  padding-inline-end: var(--sc-space-3);
+.sc-toggle-chip:hover {
+  border-color: var(--sc-color-border-strong);
+  color: var(--sc-color-text);
 }
 
-.sc-plugin-holder .sc-button {
-  min-height: 1.5rem;
-  padding-inline: var(--sc-space-2);
-  font-size: var(--sc-text-md);
-  line-height: 1;
+.sc-toggle-chip input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.sc-plugin-grant {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sc-space-2);
-  margin-top: var(--sc-space-3);
+.sc-toggle-chip:has(input:focus-visible) {
+  outline: var(--sc-focus-ring);
+  outline-offset: 2px;
 }
 
-.sc-plugin-grant-input {
-  flex: 0 1 20rem;
-  width: auto;
-}
+.sc-toggle-chip:has(input:checked) {
+  border-color: color-mix(in srgb, var(--sc-color-accent) 40%, transparent);
+  background: var(--sc-color-accent-subtle);
+  color: var(--sc-color-accent);
+}
+
+.sc-toggle-chip:has(input:checked)::before {
+  content: "";
+  width: 0.3125rem;
+  height: 0.5625rem;
+  margin-inline: 0.125rem 0.0625rem;
+  border: solid currentColor;
+  border-width: 0 1.5px 1.5px 0;
+  transform: translateY(-0.0625rem) rotate(45deg);
+}
+
+.sc-toggle-chip:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* 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 {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+}
+
+/* A field with its buttons on one line: a secret to set, the key to type before a purge. */
+.sc-plugin-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  width: 100%;
+}
+
+.sc-plugin-line-input {
+  flex: 1 1 8rem;
+  width: auto;
+}
+
+/* The roles: one a row, its name and what it is for beside who holds it and the way to grant it. */
+.sc-plugin-roles {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-plugin-role {
+  display: grid;
+  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
+  gap: var(--sc-space-2) var(--sc-space-5);
+  padding: var(--sc-space-4) 0;
+  border-top: var(--sc-hairline);
+}
+
+.sc-plugin-role:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.sc-plugin-role:last-child {
+  padding-bottom: 0;
+}
+
+.sc-plugin-role-name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-plugin-role-key {
+  color: var(--sc-color-text-muted);
+  font-weight: normal;
+}
+
+.sc-plugin-grant {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  margin-top: var(--sc-space-3);
+}
+
+.sc-plugin-grant-input {
+  flex: 0 1 20rem;
+  width: auto;
+}
 
 .sc-plugin-problems {
   margin: 0;
@@ -6028,3 +6447,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;
+  }
+}