@webship.co/workspace 0.0.0-stage → 1.0.0-alpha1

package/public/css/components/commands-center.css

@@ -0,0 +1,139 @@
+/* The Commands page (core/workspace-app/commands-page.js): the catalog, a command's own page, and its run form. */
+
+.cc-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+
+.cc-command-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+
+.cc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0 0 1rem; }
+.cc-dl dt { color: var(--text-subtle); font-weight: 600; }
+.cc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+
+.cc-target,
+.cc-options,
+.cc-kind {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.5rem 0.75rem;
+  min-width: 0;
+  margin: 0 0 0.75rem;
+  padding: 0.5rem 0.75rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+}
+.cc-target legend,
+.cc-options legend,
+.cc-kind legend { padding: 0 0.25rem; }
+
+.cc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
+.cc-form-grid label,
+.cc-target label,
+.cc-options label,
+.cc-kind label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
+.cc-form-grid .cc-inline,
+.cc-kind .cc-inline { flex-direction: row; align-items: center; gap: 0.5rem; }
+.cc-wide { grid-column: 1 / -1; }
+.cc-code { font-family: var(--font-code); }
+
+.cc-yaml { max-height: 28rem; overflow: auto; }
+.cc-manage { margin: 0.75rem 0; }
+.cc-new-other { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
+
+@media (max-width: 40em) {
+  .cc-dl { grid-template-columns: minmax(0, 1fr); }
+  .cc-dl dd { margin-bottom: 0.375rem; }
+}
+
+/* A link inside a block of text has to be distinguishable from that text by something other than
+   colour: the command titles sit beside their description and file name, and brand blue against the
+   body ink is 1.52:1 — far under the 3:1 axe (and WCAG 1.4.1) asks for. Underlined, quietly, which is
+   the convention for a link in prose and the one cue that survives being colour-blind or printing it. */
+.cmd-title a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--line-strong);
+}
+.cmd-title a:hover { text-decoration-color: currentColor; }
+
+/* ---------- Commands → Rail: the actions rail, arranged ----------
+ * The same shape as the Buttons pane, because it is the same question about a different strip of the
+ * screen: a list per group, drag by a handle, and a Hidden list at the end. */
+.nav-scopes { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+.nav-groups { list-style: none; margin: 0; padding: 0; }
+
+.nav-group {
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem 0.75rem;
+  margin-bottom: 0.5rem;
+  background: var(--surface-card);
+}
+.nav-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
+.nav-group-hidden { border-style: dashed; }
+
+.nav-entries { list-style: none; margin: 0; padding: 0; min-height: 2rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.nav-entry {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--line);
+  border-radius: 62.4375rem;
+  background: var(--surface);
+  font-size: 0.8125rem;
+}
+/* An empty group still takes a drop: a list with no height is a target nothing can be dragged into. */
+.nav-entries:empty::after {
+  content: "drag an entry here";
+  color: var(--text-subtle);
+  font-size: 0.75rem;
+  padding: 0.35rem 0.25rem;
+}
+
+.nav-handle { cursor: grab; color: var(--line-strong); }
+.nav-handle:active { cursor: grabbing; }
+.nav-yours { font-size: 0.625rem; }
+.nav-remove { padding: 0; color: var(--danger); }
+.nav-save { position: sticky; bottom: 0; padding: 0.5rem 0; background: var(--surface); }
+.nav-add { margin-top: 1rem; }
+
+/* The navigation editor's two places: the top bar's three regions, then the sidebar's groups. */
+.nav-place-head { display: flex; align-items: baseline; gap: 0.4rem; margin: 1rem 0 0.4rem; }
+.nav-place-topbar { margin-bottom: 0.5rem; }
+.nav-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
+@media (max-width: 47.9375em) { .nav-regions { grid-template-columns: 1fr; } }
+.nav-region {
+  border: 1px dashed var(--line);
+  border-radius: 10px;
+  padding: 0.5rem;
+  background: var(--surface-muted);
+}
+html.dark .nav-region { background: transparent; }
+.nav-region-label {
+  display: block;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-subtle);
+  margin-bottom: 0.35rem;
+}
+
+/* UIKit hardcodes .uk-form-label to a dark grey, and uikit.min.css is linked AFTER this stylesheet — so
+   a rule of ours at the same specificity loses the tie silently. On a dark card that label measured
+   1.28:1, which is a WCAG AA failure nobody put there. Two classes out-specify it, in both halves of
+   the theme. */
+html .uk-form-label { color: var(--text-subtle); }
+html.dark .uk-form-label { color: var(--text-light); }
+
+/* How much of an entry is shown, on the chip itself: icon + text, icon only, or text only. */
+.nav-entry-show {
+  font-size: 0.625rem;
+  line-height: 1;
+  padding: 0.15rem 0.2rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-subtle);
+  max-width: 6.5rem;
+}
+.nav-entry-show:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

package/public/css/components/confirm-dialog.css

@@ -0,0 +1,40 @@
+/* The one confirm dialog every important action goes through. It is small on purpose: a question
+   with two answers, never a panel. Tokens only, so both themes and dark mode follow. */
+
+#confirm-modal .uk-modal-dialog {
+  width: min(26rem, 92vw);
+  background: var(--surface-card);
+  color: var(--text-default);
+  border: 1px solid var(--line);
+  border-radius: 0.875rem;
+  box-shadow: var(--shadow-float);
+}
+
+/* "Wait!" is the alarm, so it is the loudest thing in the dialog — and the only one that shouts. */
+#confirm-modal .uk-modal-title {
+  color: var(--danger-ink);
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+#confirm-modal #confirm-text {
+  color: var(--text-default);
+  margin: 0 0 0.25rem;
+}
+
+/* What is about to happen, named. Empty when the button said nothing beyond its own label, and an
+   empty line of margin under the question reads as a rendering fault — so it collapses. */
+#confirm-modal .confirm-what {
+  color: var(--text-subtle);
+  margin: 0;
+  word-break: break-word;
+}
+#confirm-modal .confirm-what:empty { display: none; }
+
+/* No first and Yes last: the safe answer is the one under the thumb, and the one Escape gives. */
+#confirm-modal .confirm-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin: 1rem 0 0;
+}

package/public/css/components/create-card.css

@@ -0,0 +1,8 @@
+/* The build card: "What would you like to create?", the builder form, New folder, and Claude Code after the build. */
+.create-head { gap: 0.75rem; flex-wrap: wrap; }
+.build-form .build-ai-prompt { display: none; }
+.build-form:has(input[name="ai_after"]:checked) .build-ai-prompt { display: block; }
+/* A files workspace's create actions, as a row of buttons under the heading rather than tiles above the card. */
+.create-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 1.25rem; }
+.create-head .action-btn.uk-button,
+.create-actions .action-btn.uk-button { width: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.9rem; line-height: 2rem; font-size: 0.875rem; }

package/public/css/components/ddev-menu.css

@@ -0,0 +1,23 @@
+/* A project's row menus: one narrow column, a long one's groups folded (ui.js), each entry on one line. */
+.project-row .act-menu .uk-dropdown { min-width: 0; width: 18rem; max-height: min(34rem, 70vh); overflow-y: auto; padding: 0.5rem; }
+.project-row .act-menu .uk-dropdown-nav > li > a { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
+/* A long entry ellipsises its text, never its icon. */
+.project-row .act-menu .uk-dropdown-nav > li > a > .uk-icon { flex: none; }
+.project-row .act-menu .uk-dropdown-nav > li[hidden] { display: none; }
+.project-row .act-menu .uk-nav-header.ddev-fold { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-top: 0.25rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; }
+.project-row .act-menu .uk-nav-header.ddev-fold::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
+.project-row .act-menu .uk-nav-header.ddev-fold[aria-expanded="true"]::after { transform: rotate(45deg); }
+.project-row .act-menu .uk-nav-header.ddev-fold:hover { background: var(--subtle-brand); }
+.project-row .act-menu .uk-nav-header.ddev-fold:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
+
+/* The list is a size container, so it is its own stacking layer, under the assistant panel (z 30). While a
+   menu inside it is open it rises above the panel and stays under the top bar (z 40). */
+#webship-workspace-projects:has(.uk-dropdown.uk-open) { position: relative; z-index: 35; }
+/* The folded menu is one column: the two-column layout split the groups and cut the entries. */
+.act-menu-ddev .ddev-nav-columns { column-count: 1; }
+
+/* COMPOSER and NODE drew two 20rem columns side by side, 640px wide; folded, one column is enough. */
+.project-row .act-menu :is(.composer-columns, .node-columns) { display: block; }
+.project-row .act-menu :is(.composer-columns, .node-columns) > ul + ul { border-left: 0; border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.25rem; }
+/* A long note in a menu wraps; it is a sentence, not an entry. */
+.project-row .act-menu .uk-nav-header:not(.ddev-fold) { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 0.75rem; line-height: 1.35; }

package/public/css/components/deep-chat.css

@@ -0,0 +1,17 @@
+/* ---------- The assistant, as a deep-chat component ---------- */
+/*
+ * deep-chat renders its own transcript and input inside a shadow root, so it is styled through the
+ * properties ui.js sets and through the few parts that live outside it: the intro template, the
+ * reply wrapper, and the command picker that ui.js moves into deep-chat's input toolbar.
+ */
+
+
+
+/* The host element carries the brand face and the theme's own tokens INTO the shadow root:
+ * custom properties inherit across a shadow boundary, so every var() ui.js hands the component
+ * resolves against the page's theme and follows the light/dark toggle without a second config.
+ * Set on the host and not only inside, because deep-chat's own parts inherit from here. */
+deep-chat {
+  font-family: var(--font-primary);
+  color: var(--text-default);
+}

package/public/css/components/density.css

@@ -0,0 +1,11 @@
+/* Project rows, comfortable or compact (ui.js, the density switch beside the page width).
+ *
+ * Compact keeps every button and folds away only the small caption under each ("36 commands", "linked",
+ * "locked"). The caption stays in the page for a screen reader and becomes the button's tooltip, so nothing
+ * is lost to a pointer or to assistive technology. Measured on the maintainer's Dev page: a card is 20 to 40px
+ * shorter, and three rows of buttons read as three rows of buttons rather than as buttons and notes. */
+html[data-density="compact"] .act-with-status > .act-status {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+html[data-density="compact"] .act-with-status { display: inline-flex; align-items: center; }

package/public/css/components/floating-assistant-workspace-pages.css

@@ -0,0 +1,55 @@
+/* ---------- Floating assistant (workspace pages) ---------- */
+
+.assistant-launcher {
+  position: fixed;
+  left:1.375rem;
+  bottom:1.375rem;
+  width:3.75rem;
+  height:3.75rem;
+  border-radius: 50%;
+  padding: 0;
+  font-size:1.75rem;
+  line-height:3.75rem;
+  z-index: 30;
+  box-shadow: 0 8px 22px rgba(30, 135, 240, .45);
+}
+
+.assistant-float {
+  display: none;
+  position: fixed;
+  left:1.375rem;
+  bottom:5.875rem;
+  width:min(31.25rem, calc(100vw - 2.75rem));
+  max-height:min(40rem, calc(100vh - 8.125rem));
+  overflow-y: auto;
+  z-index: 30;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, .25);
+  border-radius:0.5rem;
+}
+
+.assistant-float.open { display: block; }
+
+/* UIKit icons inside the round hero logo render white on the blue circle */
+.logo { color: var(--text-inverse); }
+
+/* Mic button while recording */
+.mic-btn.listening {
+  background: var(--danger) !important;
+  color: var(--text-inverse) !important;
+  border-color: var(--danger) !important;
+  animation: mic-pulse 1.2s infinite;
+}
+
+@keyframes mic-pulse {
+  50% { box-shadow: 0 0 0 6px rgba(240, 80, 110, .25); }
+}
+
+/* With the assistant open on a wide screen, shift the page content left so the widget never
+ * covers a button; collapsing it back to the launcher restores normal centring. Layout, not
+ * palette — it was in the default theme's file, so it only applied on one of the three themes. */
+@media (min-width: 75em) {
+  body:has(.assistant-float.open) .page-body.webship-workspace-page {
+    margin-right: auto;
+    margin-left: 33.75rem;
+  }
+}

package/public/css/components/folders.css

@@ -0,0 +1,5 @@
+/* New folder form: the Claude Code message only matters when Claude Code is what starts. */
+.folder-new-form .folder-prompt { display: none; }
+.folder-new-form:has(input[name="then"][value="claude"]:checked) .folder-prompt { display: block; }
+.folder-new-form .folder-ddev-type { display: none; }
+.folder-new-form:has(.folder-setup input:checked) .folder-ddev-type { display: block; }

package/public/css/components/full-height-left-assistant-sidebar-all-pages.css

@@ -0,0 +1,39 @@
+/* ---------- Full-height left assistant sidebar (all pages) ---------- */
+
+.assistant-side {
+  position: fixed;
+  top:4.0625rem;
+  left: 0;
+  bottom: 0;
+  width:25rem;
+  /* border-box, so the declared width IS the footprint. UIKit sets border-box on
+     its own components but not on a bare aside, so this was 424px wide against
+     the 400px margin on .app-content — a 24px overlap that only stayed invisible
+     because it landed in the container's own padding. */
+  box-sizing: border-box;
+  padding:1rem 0.5rem 1rem 1rem;
+  display: flex;
+  z-index: 30;
+}
+
+.assistant-side .assistant-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.assistant-side .assistant-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.assistant-side .chat-log {
+  flex: 1;
+  max-height: none;
+  min-height: 0;
+}
+
+.app-content { margin-left:25rem; }

package/public/css/components/full-height-right-actions-rail-pages-that-have-actions.css

@@ -0,0 +1,267 @@
+/* ---------- Full-height right actions rail (pages that have actions) ---------- */
+
+/* Page actions used to sit in a row under the list, which on a long workspace put
+   them a hundred rows below the fold. Fixed on the right they stay reachable at
+   any scroll position, and the collapse gives the table back its width. */
+.actions-side {
+  position: fixed;
+  top:4.0625rem;
+  right: 0;
+  bottom: 0;
+  width:15.5rem;
+  box-sizing: border-box;      /* the declared width is the footprint */
+  padding:0 1rem 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap:0.625rem;
+  overflow-y: auto;
+  z-index: 30;
+  background: var(--surface);
+  border-left: 1px solid var(--line);
+  transition: width .18s ease;
+}
+
+.app-content.has-actions { margin-right:15.5rem; transition: margin-right .18s ease; }
+
+.actions-toggle {
+  display: flex;
+  align-items: center;
+  gap:0.5rem;
+  background: none;
+  border: 1px solid var(--line);
+  border-radius:31.25rem;
+  padding:0.3125rem 0.75rem;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-size: .8125rem;
+  font-weight: 600;
+  align-self: flex-start;
+}
+
+.actions-toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
+.actions-toggle-icon { transition: transform .18s ease; }
+
+.actions-rail-inner { display: flex; flex-direction: column; gap:0.875rem; }
+.actions-group { display: flex; flex-direction: column; gap:0.375rem; }
+
+.actions-group-label {
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  /* No opacity on top of the token: --text-subtle is ALREADY the quiet one, and fading it again put
+     these labels at 4.4:1 on the dark rail — under the 4.5:1 a 11px bold label needs. Quiet is the
+     token's job; dimming it twice is how a colour that was checked stops being the colour rendered. */
+  color: var(--text-subtle);
+}
+
+/* Full-width, icon then label — a stacked rail reads as a list of actions, not a
+   toolbar of equal-weight buttons. */
+.actions-side .action-btn {
+  display: flex;
+  align-items: center;
+  gap:0.5625rem;
+  width: 100%;
+  text-align: left;
+  padding:0 0.75rem;
+  line-height:2.125rem;
+  font-size: .82rem;
+}
+
+/* Collapsed: icons only, centred, labels hidden but still announced by title. */
+html.actions-collapsed .actions-side { width:3.5rem; padding:0 0.5rem 1rem; }
+html.actions-collapsed .app-content.has-actions { margin-right:3.5rem; }
+html.actions-collapsed .actions-side .action-label,
+html.actions-collapsed .actions-group-label { display: none; }
+html.actions-collapsed .actions-toggle-icon { transform: rotate(180deg); }
+
+/* Collapsed, an action is a square icon button: at 36px it is a comfortable
+   target, and square tiles in a column read as a toolbar, where the pill shape
+   of an expanded row would just look like a truncated button. */
+html.actions-collapsed .actions-side .action-btn {
+  width:2.25rem;
+  height:2.25rem;
+  min-width:2.25rem;
+  padding: 0;
+  gap: 0;
+  line-height:2.25rem;
+  border-radius:0.5rem;
+  justify-content: center;
+  align-self: center;
+}
+
+html.actions-collapsed .actions-toggle {
+  align-self: center;
+  width:2.25rem;
+  height:2.25rem;
+  padding: 0;
+  border-radius:0.5rem;
+  justify-content: center;
+}
+
+/* No labels to separate the groups, so a hairline does it instead. */
+html.actions-collapsed .actions-group + .actions-group {
+  border-top: 1px solid var(--line);
+  padding-top:0.625rem;
+}
+
+/* Workspace navigation, present on every page. Quieter than the page's own
+   actions — it is how you leave, not what you do here. */
+.actions-nav .action-btn {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text-subtle);
+}
+
+/* --link, not --brand-primary: Webship blue as TEXT on the dark rail tint is 3.4:1, and --link is the
+   one brand value the themes lighten in their dark half for exactly this reason. */
+.actions-nav .action-btn:hover {
+  background: var(--subtle-brand);
+  color: var(--link);
+}
+
+/* The page you are on, so a column of nineteen icons still says where you are. */
+.actions-nav .action-btn.is-current {
+  background: var(--subtle-brand);
+  color: var(--link);
+  font-weight: 600;
+}
+
+html.actions-collapsed .actions-nav .action-btn.is-current {
+  box-shadow: inset 2px 0 0 var(--brand-primary);
+}
+
+/* Nineteen workspaces plus the page's actions will outrun a short viewport, so
+   the rail scrolls its own content rather than the page. */
+.actions-side { scrollbar-width: thin; }
+
+/* Stack on tablets/phones: the rail becomes a normal block above the content. */
+@media (max-width: 59.9375em) {
+  .actions-side,
+  html.actions-collapsed .actions-side {
+    position: static;
+    width: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    border-left: 0;
+    border-bottom: 1px solid var(--line);
+    padding:0.75rem 0.875rem;
+  }
+  .app-content.has-actions,
+  html.actions-collapsed .app-content.has-actions { margin-right: 0; }
+  html.actions-collapsed .actions-side .action-label,
+  html.actions-collapsed .actions-group-label { display: inline; }
+  .actions-rail-inner { flex-direction: row; flex-wrap: wrap; gap:0.625rem; }
+  .actions-side .action-btn { width: auto; }
+  .actions-toggle { display: none; }
+
+  /* Workspace navigation goes icon-only here. Twenty labelled links laid out
+     horizontally made the rail 893px tall on a 900px viewport — the whole first
+     screen before any content. The page's own actions keep their labels. */
+  .actions-nav { flex-direction: row; flex-wrap: wrap; gap:0.375rem; }
+  .actions-nav .actions-group-label,
+  html.actions-collapsed .actions-nav .actions-group-label,
+  .actions-nav .action-label,
+  html.actions-collapsed .actions-nav .action-label { display: none; }
+  .actions-nav .action-btn,
+  html.actions-collapsed .actions-nav .action-btn {
+    width:2.125rem;
+    min-width:2.125rem;
+    height:2.125rem;
+    padding: 0;
+    gap: 0;
+    justify-content: center;
+    border-radius:0.5rem;
+    border-color: var(--line);
+  }
+}
+
+/* The release this machine runs, last in the Go group. Quiet, and not a link: it is reference, read
+   when someone asks what you are on. The monospace is the same one a version has everywhere else in
+   this dashboard, and the row keeps the group's geometry so it lines up with the links above it —
+   collapsed, the tag icon is what is left, and the title still answers the question. */
+.actions-nav .actions-version {
+  font-family: var(--font-code, ui-monospace, monospace);
+  font-size: .6875rem;
+  color: var(--text-subtle);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+  box-shadow: none;
+}
+.actions-nav .actions-version:hover { background: transparent; color: var(--text-subtle); }
+
+/* Unknown has to look deliberate rather than like a missing value, but still quiet. */
+.actions-nav .actions-version.is-unknown { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
+
+/* The toggle stays put: it is the one control that is needed exactly when the rail is long. */
+.actions-head {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 1rem 0 0.5rem;
+  background: var(--surface);
+}
+html.actions-collapsed .actions-head { display: flex; justify-content: center; }
+
+/* More below the fold? A soft fade at the foot says so, and goes once the end is in view. */
+.actions-fade {
+  position: sticky;
+  bottom: -1rem;
+  flex: none;
+  height: 2rem;
+  margin: -1rem -1rem -1rem -0.5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--surface));
+  opacity: 0;
+  transition: opacity .15s ease;
+}
+.actions-side.can-scroll .actions-fade { opacity: 1; }
+
+/* A group of one that repeats its own heading is just the tile; and collapsed, neighbouring singles
+   sit together rather than as islands each fenced by a hairline. */
+.actions-group.is-repeat > .actions-group-label { display: none; }
+html.actions-collapsed .actions-group.is-single + .actions-group.is-single:not(.actions-nav) {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: -0.5rem;
+}
+
+/* Three states, three looks. Hover is a tint; the page you are on is a tint with the bar and a weight;
+   keyboard focus is a solid ring that no tint can hide. */
+.actions-side .action-btn:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+.actions-side .actions-toggle:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
+.actions-nav .action-btn.is-current { box-shadow: inset 3px 0 0 var(--brand-primary); }
+
+/* The tooltip is one element outside the rail, so the rail's scrolling cannot clip it. */
+#rail-tip {
+  position: fixed;
+  z-index: 1100;
+  max-width: 20rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.4rem 0.65rem;
+  border-radius: 0.5rem;
+  background: var(--ink);
+  color: var(--surface);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  pointer-events: none;
+  box-shadow: var(--shadow-float, 0 4px 14px rgb(0 0 0 / 20%));
+}
+#rail-tip strong { font-weight: 600; }
+#rail-tip span { opacity: 0.85; }
+#rail-tip[hidden] { display: none; }
+
+@media (max-width: 59.9375em) {
+  .actions-head, .actions-fade { display: none; }
+}