@bongos/core 1.24.46 → 1.24.48

package/modules/hall-ui/public/collab.css

@@ -201,16 +201,8 @@
    capitals — .btn-ghost lowercases its label, and this one is a named action the
    owner wrote, so it does not borrow that class. */
 .cb-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 7px 0 0; }
-.cb-ask__door {
-  font: inherit;
-  font-size: 12.5px;
-  color: var(--accent-ink);
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-.cb-ask__door:hover { text-decoration: underline; }
+/* .cb-ask__door is the shared text button (controls.css, task 1005084): it
+   measured 19px tall as a bare text control, under the 24px floor. */
 .cb-ask__copy {
   font: inherit;
   font-size: 12px;
@@ -290,22 +282,11 @@
    condensed to three rows precisely so the page stays readable. */
 .cb-reply-form { margin: 9px 0 0; max-width: var(--measure); }
 .cb-reply-input {
+  /* the shared textarea (controls.css, task 1005084); the form only sizes it */
   width: 100%;
-  font: inherit;
-  font-size: 13px;
   line-height: 1.55;
-  color: var(--ink);
-  background: var(--glass);
-  border: 1px solid var(--rule);
-  border-radius: var(--radius-sm);
-  padding: 9px 11px;
   resize: vertical;
 }
-/* NO `outline: none` HERE. The shell already draws the hall's one focus ring on
-   :focus-visible, and dropping it to style a field is exactly what the hall's
-   own audit refuses — it caught this line. The border tint is an ADDITION to
-   that ring, not a replacement for it. */
-.cb-reply-input:focus { border-color: var(--accent-ink); }
 .cb-reply-actions { display: flex; gap: 8px; margin: 7px 0 0; }
 
 /* ---- the archive (task 1004224) -------------------------------------------

package/modules/hall-ui/public/controls.css

@@ -0,0 +1,223 @@
+/* modules/hall-ui/public/controls.css — THE HALL'S ONE BUTTON AND ONE FIELD
+   (task 1005084, goal 1000138 "One Cloud Bongos design system").
+
+   The UI audit counted eight main-button heights (24 / 26 / 30 / 34 / 36 / 38 /
+   40 / 46px) and five field styles in the hall. This sheet is the one of each
+   that replaces them. style.css @imports it right after the shared token sheet,
+   so a page sheet can still place a button (margin, align-self, width) but no
+   longer re-draws one.
+
+   THE BUTTON — `.btn` and three modifiers:
+     .btn            primary: the accent fill with --accent-on, the DARK ink.
+                     White on the salmon fails AA and DESIGN.md bans it.
+                     46px, a full pill: DESIGN.md's door height.
+     .btn--ghost     the quiet sibling: no fill, one hairline, soft ink.
+     .btn--sm        the row size, for a button that repeats down a list or
+                     sits in a table: 30px, still over the 24px floor.
+     .btn--text      a button that reads as a link: no fill, no edge, the
+                     accent ink, underlined on hover; 24px so it keeps the floor.
+   Two sizes, not eight. A page picks the size by where the button lives: once
+   on the page → the default; once per row → --sm.
+
+   THE NAMES PAGES ALREADY WRITE. Markup across ~40 scripts and a dozen tests
+   spells the older vocabularies (.btn-accent, .btn-ghost, .td-btn, .pbtn …).
+   Renaming them would move nothing on screen, so each joins the shared rule it
+   always meant instead, by size and by fill:
+     primary  .btn-accent .landing__btn .task__claim .td-btn--primary
+              .setup-gate__save .pbtn--save .craft-save
+     ghost    .btn--quiet .btn-ghost .landing__btn--quiet .td-btn .wip__release
+              .pbtn .settings-btn .sessions-row__end .event-sound-preview
+     small    .btn-ghost .task__claim .td-btn .wip__release
+     text     .cb-ask__door
+   A new page writes `.btn` and its modifiers, never a new name.
+
+   THE FIELD — one text input / select / textarea, `.input` for a field the
+   element selectors do not reach. 40px, a pill (a textarea takes the tile
+   corner), an edge that clears 3:1 against the card in both modes so the
+   field is findable (WCAG 1.4.11), the ink edge on focus inside DESIGN.md's
+   two-tone ring.
+
+   Every colour here is a token or a color-mix of tokens; both terms of every
+   mix flip with the mode, so nothing here needs a dark twin.
+   tests/hall_controls.mjs measures the pairs in both modes. */
+
+/* ---------- the button ---------- */
+.btn, .btn-accent, .btn-ghost, .btn--text,
+.landing__btn, .task__claim, .td-btn, .wip__release, .setup-gate__save,
+.pbtn, .settings-btn, .sessions-row__end, .event-sound-preview, button.craft-save,
+.cb-ask__door {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-hair);
+  box-sizing: border-box;
+  min-height: 46px;
+  min-width: 46px;
+  padding: 0 var(--ds-space-md);
+  font-family: var(--font-body);
+  font-size: var(--ds-text-lg);
+  font-weight: 500;
+  line-height: 1.2;
+  text-transform: lowercase;
+  text-decoration: none;
+  white-space: nowrap;
+  /* transparent rather than absent: a modifier that sets only a border COLOUR
+     (collab.css's .btn--quiet) cannot paint an edge that was never reserved. */
+  border: var(--line) solid transparent;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease),
+              border-color var(--ds-dur-fast) var(--ds-ease),
+              color var(--ds-dur-fast) var(--ds-ease);
+}
+
+/* primary — the accent door */
+.btn, .btn-accent, .landing__btn, .task__claim, .setup-gate__save {
+  color: var(--accent-on);
+  background: var(--accent);
+}
+
+.btn:hover:not(:disabled), .btn-accent:hover:not(:disabled), .landing__btn:hover,
+.task__claim:hover:not(:disabled), .setup-gate__save:hover:not(:disabled) {
+  color: var(--accent-on);
+  background: var(--accent-lift);
+  text-decoration: none;
+}
+.btn:disabled, .btn-accent:disabled, .task__claim:disabled, .setup-gate__save:disabled {
+  color: var(--ink-faint);
+  background: var(--glass);
+  border-color: transparent;
+  cursor: default;
+}
+
+/* ghost — after primary, so `.btn btn--ghost` takes it. Each state is written
+   in the same three layers (primary, ghost, primary-on-a-ghost-base) and with
+   no :not() in the selector, so a page's own modifier at one class
+   (record.css's .td-btn--danger) still wins on source order. */
+.btn--ghost, .btn--quiet, .btn-ghost, .landing__btn--quiet, .td-btn, .wip__release,
+.pbtn, .settings-btn, .sessions-row__end, .event-sound-preview {
+  color: var(--ink-soft);
+  background: transparent;
+  border-color: var(--rule);
+}
+.btn--ghost:hover:not(:disabled), .btn--quiet:hover:not(:disabled), .btn-ghost:hover:not(:disabled),
+.landing__btn--quiet:hover, .td-btn:hover:not(:disabled), .wip__release:hover:not(:disabled),
+.pbtn:hover:not(:disabled), .settings-btn:hover:not(:disabled),
+.sessions-row__end:hover:not(:disabled), .event-sound-preview:hover:not(:disabled) {
+  color: var(--ink);
+  background: transparent;
+  border-color: var(--ink-faint);
+  text-decoration: none;
+}
+.btn--ghost:disabled, .btn--quiet:disabled, .btn-ghost:disabled, .td-btn:disabled,
+.wip__release:disabled, .pbtn:disabled, .settings-btn:disabled, .sessions-row__end:disabled,
+.pbtn[aria-disabled="true"], .settings-btn[aria-disabled="true"] {
+  color: var(--ink-faint);
+  background: transparent;
+  border-color: var(--rule-soft);
+  cursor: default;
+}
+
+/* primary on a ghost base — after ghost, so `.td-btn td-btn--primary` takes it */
+.td-btn--primary, .pbtn--save, .craft-save {
+  color: var(--accent-on);
+  background: var(--accent);
+  border-color: transparent;
+}
+.td-btn--primary:hover:not(:disabled), .pbtn--save:hover:not(:disabled),
+.craft-save:hover:not(:disabled) {
+  color: var(--accent-on);
+  background: var(--accent-lift);
+  border-color: transparent;
+}
+.td-btn--primary:disabled, .pbtn--save:disabled, .craft-save:disabled {
+  color: var(--ink-faint);
+  background: var(--glass);
+  border-color: transparent;
+}
+
+/* small — the row size */
+.btn--sm, .btn-ghost, .task__claim, .td-btn, .wip__release {
+  min-height: 30px;
+  min-width: 30px;
+  padding: 0 var(--ds-space-sm);
+  font-size: var(--ds-text-sm);
+}
+
+/* text — a button that reads as a link: the sentence's own size and case, the
+   accent ink, underlined on hover; 24px so it keeps the floor in a line that
+   has no rhythm of its own. collab's "Reply" door is one. */
+.btn--text, .cb-ask__door {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0 2px;
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: none;
+  color: var(--accent-ink);
+  background: transparent;
+  border-color: transparent;
+}
+.btn--text:hover:not(:disabled), .cb-ask__door:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: transparent;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.btn--text:disabled { color: var(--ink-faint); background: transparent; }
+
+/* Focus keeps the pill. The shell's two-tone ring (style.css :focus-visible)
+   sets the tile corner for the general case; a pill under it would square off. */
+.btn:focus-visible, .btn-accent:focus-visible, .btn-ghost:focus-visible,
+.landing__btn:focus-visible, .task__claim:focus-visible, .td-btn:focus-visible,
+.wip__release:focus-visible, .setup-gate__save:focus-visible, .pbtn:focus-visible,
+.settings-btn:focus-visible, .sessions-row__end:focus-visible,
+.event-sound-preview:focus-visible, button.craft-save:focus-visible {
+  border-radius: var(--radius-pill);
+}
+
+/* ---------- the field ----------
+   The four element selectors the hall always styled keep their weight (0,1,1),
+   so nothing that leaned on them moves in the cascade. The other text types
+   join inside :where(), as a floor a page's own class can still sit on. */
+select, input[type="text"], input[type="search"], textarea,
+:where(input[type="email"], input[type="url"], input[type="number"], input[type="password"]),
+.input {
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 0 var(--ds-space-sm);
+  font-family: var(--font-body);
+  font-size: var(--ds-text-md);
+  line-height: 1.4;
+  color: var(--ink);
+  background: transparent;
+  /* the edge clears 3:1 on both grounds in both modes; --rule (1.6:1) did not */
+  border: var(--line) solid color-mix(in srgb, var(--ink) 60%, var(--bg-card));
+  border-radius: var(--radius-pill);
+  transition: border-color var(--ds-dur-fast) var(--ds-ease);
+}
+textarea {
+  padding: var(--ds-space-xs) var(--ds-space-sm);
+  border-radius: var(--radius-sm);
+}
+select:hover, input[type="text"]:hover, input[type="search"]:hover, textarea:hover,
+:where(input[type="email"], input[type="url"], input[type="number"], input[type="password"]):hover,
+.input:hover {
+  border-color: var(--ink-faint);
+}
+/* Focus: the ink edge inside the shell's two-tone ring, keeping the field's
+   own corner (the ring's rule sets the tile corner for the general case). */
+select:focus-visible, input[type="text"]:focus-visible, input[type="search"]:focus-visible,
+:where(input[type="email"], input[type="url"], input[type="number"], input[type="password"]):focus-visible,
+.input:focus-visible {
+  border-color: var(--ink);
+  border-radius: var(--radius-pill);
+}
+textarea:focus-visible { border-color: var(--ink); border-radius: var(--radius-sm); }
+select:disabled, input[type="text"]:disabled, input[type="search"]:disabled, textarea:disabled,
+:where(input[type="email"], input[type="url"], input[type="number"], input[type="password"]):disabled,
+.input:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+select option { background: var(--bg-card); color: var(--ink); }

package/modules/hall-ui/public/goals.css

@@ -92,25 +92,9 @@
 .goal-conflicts-card--live .count-pill { background: var(--warn-weak); color: var(--warn); }
 #goal-conflicts-view-card.goal-conflicts-card--live { background: var(--bg-card); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
 
-/* task 1828 — inline Claim on a ready To-do row + the conflicts "view all". */
-.goal-claim-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
-  border: var(--line) solid var(--accent); background: var(--accent); color: var(--accent-on);
-  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
-}
-.goal-claim-btn:hover:not(:disabled) { background: var(--accent-lift); }
-.goal-claim-btn:disabled { opacity: 0.55; cursor: default; }
-/* task 1828 — Release on the viewer's OWN active claim (ghost, not accent —
-   it's the undo of a claim); a muted label for another builder's claim. */
-.goal-release-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
-  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink-soft);
-  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
-}
-.goal-release-btn:hover:not(:disabled) { background: var(--glass); color: var(--ink); }
-.goal-release-btn:disabled { opacity: 0.55; cursor: default; }
+/* The To-do row's Claim and Release are the shared .task__claim / .wip__release
+   (controls.css, task 1005084); the old .goal-claim-btn / .goal-release-btn had
+   no markup left. */
 .ledger__claimed { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
 .ledger__action { text-align: right; white-space: nowrap; }
 /* task 1828 — shared "View all N →" foot under a capped band column. */
@@ -211,10 +195,7 @@
 .uat-form { display: flex; flex-direction: column; gap: 8px; }
 .uat-field { display: flex; flex-direction: column; gap: 4px; }
 .uat-field input[type="file"] { min-height: 24px; font: inherit; font-size: 12px; }
-.uat-field textarea {
-  font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius);
-  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink); resize: vertical;
-}
+.uat-field textarea { resize: vertical; } /* the shared field (controls.css) */
 .uat-check-input { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
 .uat-check-input input { width: 16px; height: 16px; margin: 0; }
 .uat-hint { margin: 0; }

package/modules/hall-ui/public/my-agents.css

@@ -260,32 +260,10 @@ html[data-theme="dark"] body[data-page="my-agents"] {
 .ma-know .prow__hint { margin: 4px 0 0; max-width: var(--measure); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
 .ma-know .prow__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
 .ma-know .speciality-create__h { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
-.ma-know .btn,
-.ma-know .pbtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  min-width: 30px;
-  padding: 0 14px;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-  background: none;
-  color: var(--ink-soft);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 400;
-  text-transform: lowercase;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.ma-know .btn:hover:not(:disabled),
-.ma-know .pbtn:hover:not(:disabled) { background: none; color: var(--ink); border-color: var(--ink-faint); }
-.ma-know .btn:disabled,
-.ma-know .pbtn:disabled { background: none; color: var(--ink-faint); border-color: var(--rule-soft); cursor: default; }
+/* the row's buttons are the shared ghost at the row size (controls.css, task
+   1005084): speciality-tools.js writes btn--sm on them */
 /* the walkthrough's answer you gave, and its one commit, read as a chosen chip */
-.ma-know .pbtn[aria-pressed="true"],
-.ma-know .pbtn--save:not(:disabled) { background: var(--glass-strong); color: var(--ink); border-color: var(--ink-soft); }
+.ma-know .pbtn[aria-pressed="true"] { background: var(--glass-strong); color: var(--ink); border-color: var(--ink-soft); }
 /* the 24px floor, drawn in ink: the create form's "for sale" box and the skill picker */
 .ma-know input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
 .ma-know .speciality-field > span { color: var(--ink-soft); }

package/modules/hall-ui/public/oversight.css

@@ -249,23 +249,9 @@ a.fact-chip:hover { color: var(--accent-ink); border-color: var(--accent-ink); t
   text-transform: var(--label-case);
   color: var(--ink-faint);
 }
-/* The shell styles text and search inputs; a number input (the builder id) would
-   otherwise render at the browser's 21px and fail the 24px floor, so the field
-   restates the shell's hairline pill for every control it holds. */
-.ov-field input, .ov-field select, .ov-field textarea {
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 30px;
-  padding: 5px 12px;
-  font-family: var(--font-body);
-  font-size: 14px;
-  color: var(--ink);
-  background: none;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-}
-.ov-field textarea { border-radius: var(--radius-sm); }
-.ov-field input:hover, .ov-field select:hover, .ov-field textarea:hover { border-color: var(--ink-faint); }
+/* The field is the shared one (controls.css, task 1005084) — it covers the
+   number input (the builder id) too; the form only stretches it to the row. */
+.ov-field input, .ov-field select, .ov-field textarea { width: 100%; box-sizing: border-box; }
 .ov-field input::placeholder, .ov-field textarea::placeholder { color: var(--ink-faint); }
 /* The one line under the row. A max-width here would cap the flex basis and let
    the line ride beside the button, so the line takes the full row instead. */

package/modules/hall-ui/public/panel.css

@@ -109,42 +109,8 @@
 .craft-actions .settings-status { margin: 0; }
 
 /* ---- the controls: every one clears 24px on both axes ------------------- */
-/* the family button: a glass pill, 38px, quiet by default. `--save` is the
-   accent door — the panel's one primary act — and takes --accent-on, the dark
-   ink for the salmon; white on it fails AA and DESIGN.md bans it. */
-.pbtn,
-.settings-btn, .sessions-row__end, .event-sound-preview {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  min-height: 38px;
-  min-width: 38px;
-  padding: 0 15px;
-  border: var(--line) solid var(--glass-edge);
-  border-radius: var(--radius-pill);
-  background: var(--glass);
-  color: var(--ink);
-  font: inherit;
-  font-size: 14px;
-  line-height: 1.2;
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms cubic-bezier(.2,.7,.3,1), color 200ms cubic-bezier(.2,.7,.3,1);
-}
-.pbtn:hover:not(:disabled), .settings-btn:hover:not(:disabled), .sessions-row__end:hover:not(:disabled),
-.event-sound-preview:hover:not(:disabled) { background: var(--glass-strong); color: var(--ink); text-decoration: none; }
-.pbtn:disabled, .settings-btn:disabled, .sessions-row__end:disabled,
-.pbtn[aria-disabled="true"], .settings-btn[aria-disabled="true"] { color: var(--ink-faint); background: var(--glass); cursor: default; }
-.pbtn--quiet, .settings-btn--quiet, .sessions-row__end, .event-sound-preview { background: transparent; }
-.pbtn--save,
-.craft-save { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 500; }
-.pbtn--save:hover:not(:disabled), .craft-save:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); color: var(--accent-on); }
-.craft-save:disabled, .pbtn--save:disabled { background: var(--glass); border-color: var(--glass-edge); color: var(--ink-faint); }
-/* the shell's `.craft-save` was a bordered box; it is the family's save button
-   now, so it carries the pill's own box model too */
-button.craft-save { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; min-width: 38px; padding: 0 15px; border-radius: var(--radius-pill); font: inherit; font-size: 14px; cursor: pointer; }
+/* the family button (.pbtn / .settings-btn, ghost; --save the accent door) is
+   the hall's shared button, default size (controls.css, task 1005084). */
 
 /* the field: label above, input and its button on one line */
 .field-label,
@@ -160,28 +126,20 @@ button.craft-save { display: inline-flex; align-items: center; justify-content:
 .field,
 .display-name-row, .artkey-entry-row, .join { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: 0; }
 .field .field-label { flex: 1 1 100%; margin-top: 0; }
+/* the input is the shared field (controls.css, task 1005084); the family only
+   sizes it on the row */
 .pinput,
 .display-name-input, .artkey-input, .join input, .join-note {
   flex: 1 1 260px;
   max-width: 420px;
-  min-height: 38px;
-  padding: 0 16px;
-  font: inherit;
-  font-size: 15px;
-  color: var(--ink);
-  background: var(--glass);
-  border: var(--line) solid var(--glass-edge);
-  border-radius: var(--radius-pill);
-  transition: border-color 200ms cubic-bezier(.2,.7,.3,1);
 }
 .pinput::placeholder, .display-name-input::placeholder, .artkey-input::placeholder, .join input::placeholder, .join-note::placeholder { color: var(--ink-faint); }
-.pinput:hover, .display-name-input:hover, .artkey-input:hover, .join input:hover, .join-note:hover { border-color: var(--rule); }
 .pinput[aria-invalid="true"], .display-name-input[aria-invalid="true"] { border-color: var(--danger); }
 /* a secret is typed in the mono face so a pasted key reads as what it is */
 .artkey-input { font-family: var(--font-mono); font-size: 13.5px; }
+/* the select is the shared field too (controls.css) */
 .psel,
-.event-sound-select, .voices__select { min-height: 38px; padding: 0 var(--sp-xs); font: inherit; font-size: 14px; color: var(--ink); background: var(--glass); border: var(--line) solid var(--glass-edge); border-radius: var(--radius-pill); cursor: pointer; }
-.psel:hover, .event-sound-select:hover, .voices__select:hover { border-color: var(--rule); }
+.event-sound-select, .voices__select { cursor: pointer; }
 .prange,
 .sound-volume input[type="range"] { flex: 1 1 200px; max-width: 260px; height: 38px; margin: 0; accent-color: var(--accent); cursor: pointer; }
 .pradio { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }

package/modules/hall-ui/public/speciality-tools.js

@@ -159,9 +159,9 @@
       ${guessed}
       ${was ? '<p class="prow__hint">You have this one on at the moment.</p>' : ''}
       <div class="speciality-actions skill-walk__actions">
-        ${i > 0 ? '<button type="button" class="pbtn pbtn--quiet" data-walk="back">Back</button>' : ''}
-        <button type="button" class="pbtn" data-walk="off" aria-pressed="${decided === false}">Leave it off</button>
-        <button type="button" class="pbtn" data-walk="on" aria-pressed="${decided === true}">Turn it on</button>
+        ${i > 0 ? '<button type="button" class="pbtn pbtn--quiet btn--sm" data-walk="back">Back</button>' : ''}
+        <button type="button" class="pbtn btn--sm" data-walk="off" aria-pressed="${decided === false}">Leave it off</button>
+        <button type="button" class="pbtn btn--sm" data-walk="on" aria-pressed="${decided === true}">Turn it on</button>
       </div>`;
   }
 
@@ -181,8 +181,8 @@
       </ul>
       ${gone.length ? `<p class="prow__hint">Also offered, but no longer on this project, so it cannot be turned on: ${gone.map((k) => `<code>${escapeHtml(k.name)}</code>`).join(', ')}.</p>` : ''}
       <div class="speciality-actions skill-walk__actions">
-        <button type="button" class="pbtn pbtn--quiet" data-walk="restart">Go through them again</button>
-        <button type="button" class="pbtn pbtn--save" data-walk="save" ${w.saving ? 'disabled' : ''}>Save my choices</button>
+        <button type="button" class="pbtn pbtn--quiet btn--sm" data-walk="restart">Go through them again</button>
+        <button type="button" class="pbtn pbtn--save btn--sm" data-walk="save" ${w.saving ? 'disabled' : ''}>Save my choices</button>
       </div>`;
   }
 
@@ -298,7 +298,7 @@
         <h4 class="speciality-create__h">What ${escapeHtml(s.name)} offers</h4>
         <div class="speciality-offer__choices">${state.offerChoices || '<p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p>'}</div>
         <div class="speciality-actions">
-          <button type="submit" class="btn" ${state.offerChoices ? '' : 'disabled'}>Save what it offers</button>
+          <button type="submit" class="btn btn--ghost btn--sm" ${state.offerChoices ? '' : 'disabled'}>Save what it offers</button>
         </div>
       </form>`;
   }
@@ -357,12 +357,12 @@
           </p>
         </div>
         <div class="prow__actions">
-          ${s.active && offered && !walking ? `<button type="button" class="btn btn--quiet" data-act="walk" data-id="${escapeHtml(String(s.id))}">Choose its skills</button>` : ''}
-          ${s.mine ? `<button type="button" class="btn btn--quiet" data-act="train" data-id="${escapeHtml(String(s.id))}">${open ? 'Close' : 'Train'}</button>` : ''}
-          ${s.mine ? `<button type="button" class="btn btn--quiet" data-act="offer" data-id="${escapeHtml(String(s.id))}" aria-expanded="${offering}">${offering ? 'Close' : 'Offered skills'}</button>` : ''}
+          ${s.active && offered && !walking ? `<button type="button" class="btn btn--ghost btn--sm" data-act="walk" data-id="${escapeHtml(String(s.id))}">Choose its skills</button>` : ''}
+          ${s.mine ? `<button type="button" class="btn btn--ghost btn--sm" data-act="train" data-id="${escapeHtml(String(s.id))}">${open ? 'Close' : 'Train'}</button>` : ''}
+          ${s.mine ? `<button type="button" class="btn btn--ghost btn--sm" data-act="offer" data-id="${escapeHtml(String(s.id))}" aria-expanded="${offering}">${offering ? 'Close' : 'Offered skills'}</button>` : ''}
           ${s.active
-            ? `<button type="button" class="btn btn--quiet" data-act="abandon" data-id="${escapeHtml(String(s.id))}">Stop using</button>`
-            : `<button type="button" class="btn" data-act="adopt" data-id="${escapeHtml(String(s.id))}" ${s.adoptable ? '' : 'disabled'}>Use this</button>`}
+            ? `<button type="button" class="btn btn--ghost btn--sm" data-act="abandon" data-id="${escapeHtml(String(s.id))}">Stop using</button>`
+            : `<button type="button" class="btn btn--ghost btn--sm" data-act="adopt" data-id="${escapeHtml(String(s.id))}" ${s.adoptable ? '' : 'disabled'}>Use this</button>`}
         </div>
         ${open ? trainHtml(s) : ''}
         ${offering ? offerFormHtml(s) : ''}
@@ -386,7 +386,7 @@
           <textarea name="body_md" rows="6" required placeholder="Paste or write it here."></textarea>
         </label>
         <div class="speciality-actions">
-          <button type="submit" class="btn">Add to what it knows</button>
+          <button type="submit" class="btn btn--ghost btn--sm">Add to what it knows</button>
         </div>
       </form>`;
   }
@@ -423,7 +423,7 @@
           ${contractHtml(s)}
         </div>
         <div class="prow__actions">
-          <button type="button" class="btn" data-act="adopt" data-id="${escapeHtml(String(s.id))}">Use this</button>
+          <button type="button" class="btn btn--ghost btn--sm" data-act="adopt" data-id="${escapeHtml(String(s.id))}">Use this</button>
         </div>
       </li>`;
   }
@@ -655,7 +655,7 @@
                   <div id="speciality-create-skills"><p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p></div>
                 </details>
                 <div class="speciality-actions">
-                  <button type="submit" class="btn">Create speciality</button>
+                  <button type="submit" class="btn btn--ghost btn--sm">Create speciality</button>
                 </div>
               `;
   }