anentrypoint-design 0.0.379 → 0.0.381

package/src/css/app-shell/kits-appended.css

@@ -17,11 +17,115 @@
 /* == appended: ui-kits == */
 /* ============================================================
    ui_kit responsive helpers (kits-grids sweep) */
-.ds-section-pad { padding: clamp(6px, 1.2vw, 16px); }
-.ds-panel-gap { margin: var(--space-2) 0; }
-.ds-panel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
+/* App-surface root. .ds-section carries a --space-8 (96px) editorial rhythm
+   that is correct between landing-page sections and wrong as the ROOT wrapper
+   of an Operate surface, where .app-main has already padded the region — used
+   there it just pushes the page heading a screen-inch down and adds dead space
+   below the last panel. This is the app-mode counterpart: no outer margin, and
+   it owns the heading -> lede -> first-panel cadence so each kit stops
+   re-deriving it. Pair with .ds-section-pad for the shadow inset. */
+.ds-app-surface { margin: 0; display: flow-root; }
+/* Operate surfaces run the compact heading ceiling. --fs-h1 tops out at 64px,
+   a display size that makes the page TITLE outweigh the data it labels; the
+   app scale (--fs-h1-app, 22-30px) is what these tokens exist for. Applied
+   here rather than as a data-attribute on each kit shell so any surface using
+   this root gets the app voice without a per-kit opt-in that kits forget. */
+.ds-app-surface > h1, .ds-app-surface > .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
+.ds-app-surface > h2, .ds-app-surface > .t-h2 { font-size: var(--fs-h2-app); }
+.ds-app-surface > h3, .ds-app-surface > .t-h3 { font-size: var(--fs-h3-app); }
+/* The lede is supporting chrome under an app title, not a marketing stand-first:
+   it drops to body size and keeps a readable measure instead of --fs-xl. */
+.ds-app-surface > .lede, .ds-app-surface > .t-lede { font-size: var(--fs-body); max-width: 60ch; }
+.ds-app-surface > h1,
+.ds-app-surface > h2 { margin-bottom: var(--space-2); }
+/* The lede belongs to the heading above it, so it sits tight to that heading
+   and separates generously from the content it introduces. */
+.ds-app-surface > .lede,
+.ds-app-surface > .t-lede { margin-bottom: calc(var(--space-6) * var(--density)); }
+/* No leading margin on the first block or trailing margin on the last — the
+   shell owns the region's outer edges. */
+.ds-app-surface > :first-child { margin-top: 0; }
+.ds-app-surface > :last-child { margin-bottom: 0; }
+
+/* Section padding is the shell's job (.app-main owns --pad-x). This only adds
+   the small inset a kit root needs so panel shadows are not clipped by the
+   scroll container, and it scales with density like every other app metric —
+   the old clamp(6px,1.2vw,16px) sized against the VIEWPORT inside a
+   container-query layout that measures everything else in cqi. */
+.ds-section-pad { padding: calc(var(--space-1) * var(--density)); }
+
+/* Separation between sibling panels. This is the OUTER rhythm: it must exceed
+   .panel-body's 16px inner sibling gap, otherwise proximity says two unrelated
+   panels belong together more tightly than two rows inside one panel. The old
+   value was --space-2 (8px), which inverted exactly that relationship and made
+   the class named "gap" the only rule in the system that removed separation. */
+.ds-panel-gap { margin: calc(var(--space-5) * var(--density)) 0; }
+/* Density-scaled sibling rhythm for any run of stacked panels, so the cadence
+   holds without each kit re-declaring a margin per panel. */
+.ds-panel-gap + .ds-panel-gap { margin-top: calc(var(--space-5) * var(--density)); }
+
+/* A panel inside a gap-owning parent (grid/flex row). .panel ships a 24px
+   bottom margin for the stacked case; inside a row that margin fights the
+   parent's gap and makes the last row of a wrapping grid sit on a different
+   rhythm than the columns. The container owns separation, so the panel drops
+   its own. Also stretches to the row's height so a short panel next to a tall
+   one does not leave a ragged bottom edge. */
+/* Drops only the panel's own bottom margin — the row container owns separation.
+   Height is deliberately NOT forced here: whether panels in a row should match
+   heights depends on whether they are a SET (trio: equal peers, matching edge
+   reads as one band) or a PAIR of different things (duo: a 4-bar chart beside a
+   5-row table, where forcing equality just relocates the dead space inside the
+   shorter panel). Each container decides via align-items below. */
+.ds-panel-flush { margin-bottom: 0; }
+
+/* Paired panels. Container-relative (the shell is the CQ container), so the
+   split collapses when the PANELS are cramped rather than when the viewport
+   crosses an arbitrary width — with a sidebar open those are far apart.
+   minmax(0,1fr) lets a scrolling table shrink instead of forcing overflow. */
+.ds-panel-duo {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: calc(var(--space-3) * var(--density));
+  margin: calc(var(--space-5) * var(--density)) 0;
+  /* A duo pairs two DIFFERENT things (a 4-bar chart beside a 5-row table).
+     Stretching them to a common height does not create equality, it just moves
+     the shorter panel's dead space inside its own body. Each takes its natural
+     height and they align at the top, where the eye actually starts. */
+  align-items: start;
+}
+@container (max-width: 900px) {
+  .ds-panel-duo { grid-template-columns: minmax(0, 1fr); }
+}
+/* Fallback for kit roots that are not themselves a container (older kit shells
+   mount outside .app/.ds-stage); harmless where the CQ rule already applies. */
+@media (max-width: 760px) {
+  .ds-panel-duo { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* Three equal reference panels. Real grid tracks, NOT percentage flex-basis:
+   three 33.33% bases plus two gaps exceed 100% and wrap the last panel onto
+   its own row. Steps 3 -> 2 -> 1 on container width so the panels reflow when
+   they are actually cramped rather than at a viewport number that ignores how
+   much chrome the shell is holding. */
+.ds-panel-trio {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: calc(var(--space-3) * var(--density));
+  margin: calc(var(--space-5) * var(--density)) 0;
+  /* A trio IS a set of equal peers, so a shared bottom edge reads as one band
+     rather than three ragged cards — the opposite call from .ds-panel-duo
+     above, and the reason these are two classes and not one. */
+  align-items: stretch;
+}
+.ds-panel-trio > .panel { height: 100%; }
+@container (max-width: 1100px) {
+  .ds-panel-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@container (max-width: 720px) {
+  .ds-panel-trio { grid-template-columns: minmax(0, 1fr); }
+}
 @media (max-width: 760px) {
-  .ds-panel-duo { grid-template-columns: 1fr; }
+  .ds-panel-trio { grid-template-columns: minmax(0, 1fr); }
 }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@@ -56,9 +160,28 @@
 @media (pointer: coarse) {
   .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
 }
+/* Kit small-label voice — one local composition of the house `.t-label` recipe
+   (base.css) for every eyebrow/label in the appended kit blocks below. These
+   previously each restated the four declarations with drifted tracking
+   (0.1em / 0.06em / --tr-label) and drifted size (11px / --fs-micro); they now
+   share --fs-nano + --tr-label. Members declare only their real differences.
+   --fs-nano because these are dense kit chrome, never body or UI text. */
+.ds-slide-eyebrow,
+.ds-field-eyebrow,
+.ds-auth-field-label,
+.ds-lightbox-tag {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-nano);
+  letter-spacing: var(--tr-label);
+  text-transform: uppercase;
+  color: var(--panel-text-3);
+}
+
+/* Deliberate overrides: the deck slide eyebrow sits on the app --fg ramp (it is
+   full-bleed slide chrome, not panel chrome) and owns its own bottom gutter. */
 .ds-slide-eyebrow {
-  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
-  text-transform: uppercase; color: var(--fg-3); margin-bottom: clamp(12px, 2.5cqw, 24px);
+  color: var(--fg-3);
+  margin-bottom: clamp(12px, 2.5cqw, 24px);
 }
 .ds-slide-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.5cqw, 24px); min-width: 0; }
 .ds-slide-col--start { align-items: flex-start; }
@@ -95,10 +218,24 @@
   .ds-slide-split { grid-template-columns: 1fr; }
 }
 .ds-slide-split-cell {
-  padding: 18px; background: var(--bg-2); border-radius: var(--r-2);
+  padding: var(--space-3-5); background: var(--bg-2); border-radius: var(--r-2);
   color: var(--fg-2); font-size: var(--fs-lg); line-height: var(--lh-base); min-width: 0;
 }
-.ds-slide-split-cell--accent { border-left: 3px solid var(--slide-accent, var(--accent)); }
+/* DELIBERATE accent spine — this modifier's only job is to mark the emphasized
+   half of a split slide (see ui_kits/slide_deck/app.js), so the rule is the
+   whole component, not decoration on a card. Routed through the house
+   .panel-spine idiom (::before rail at --bw-chunk, squared leading corners)
+   instead of an off-scale 3px border-left. */
+.ds-slide-split-cell--accent {
+  position: relative;
+  padding-left: calc(var(--space-3-5) + var(--bw-chunk));
+  border-radius: 0 var(--r-2) var(--r-2) 0;
+}
+.ds-slide-split-cell--accent::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: var(--bw-chunk); background: var(--slide-accent, var(--accent));
+  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
+}
 
 /* --- error 404 --------------------------------------------- */
 .ds-err-hero {
@@ -144,7 +281,7 @@
   display: flex; align-items: center; justify-content: center;
   padding: clamp(12px, 4vw, 32px);
   padding-bottom: max(clamp(12px, 4vw, 32px), env(safe-area-inset-bottom));
-  z-index: 50;
+  z-index: var(--z-modal);
 }
 .ds-lightbox-card {
   background: var(--panel-0); border-radius: var(--r-2); padding: clamp(16px, 4vw, 28px);
@@ -258,15 +395,29 @@
 
 /* == appended: settings kit cleanup == */
 /* == appended: settings kit == */
-.ds-settings-main { padding: var(--space-2, 8px); }
-.ds-settings-body { padding: 14px 18px; }
-.ds-settings-body-stack { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); }
-.ds-field-block { margin: var(--space-2-5, 10px) 0; }
-.ds-field-eyebrow {
-  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
-  text-transform: uppercase; color: var(--panel-text-3);
-}
-.ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
+/* .app-main already owns this region's padding; this only supplies the inset
+   that keeps panel shadows off the scroll edge (see .ds-section-pad). */
+.ds-settings-main { padding: calc(var(--space-1) * var(--density)); }
+/* .panel-body already pads the panel interior — this sat inside it and
+   double-padded every field, on an off-scale 14/18 pair. The body is now a
+   flow container that owns only the RHYTHM between fields, not a second inset. */
+.ds-settings-body { padding: 0; }
+.ds-settings-body-stack { display: flex; flex-direction: column; gap: calc(var(--space-2-5) * var(--density)); }
+/* Field rhythm: the label/control/hint cluster is tight internally, so fields
+   need a clearly larger interval between them than within them, or the whole
+   form reads as one undifferentiated column. Margin-collapse-free (flow root
+   siblings) — first/last are zeroed so the panel body sets the outer edge. */
+.ds-field-block { display: flex; flex-direction: column; gap: var(--space-1-75); margin: calc(var(--space-4) * var(--density)) 0 0; }
+.ds-settings-body > .ds-field-block:first-child { margin-top: 0; }
+/* Field width is a hint about expected input length. A name or handle stretched
+   across a 1000px desktop column tells the user to type a paragraph and leaves
+   the eye no left-to-right anchor; capping the control (not the row) keeps the
+   label/hint full-width for wrapping while the input reads as the right size.
+   Textareas keep a wider cap since prose genuinely uses the room. */
+.ds-field-block > .input { max-width: 44ch; width: 100%; }
+.ds-field-block > textarea.input { max-width: 72ch; }
+/* .ds-field-eyebrow joins the kit small-label voice above with no overrides. */
+.ds-hint-sm { font-size: var(--fs-xs); color: var(--panel-text-2); }
 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
 .ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
@@ -277,21 +428,31 @@
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
    the text-safe tone, same accent/accent-ink split used everywhere else. */
 .ds-btn-mascot { color: var(--mascot-deep); }
+/* Sticky commit bar. It floats OVER the form it commits, so it needs real
+   elevation and a larger top margin than the form's own field rhythm —
+   otherwise it reads as one more field rather than as the action for all of
+   them. Spacing is density-scaled like the rest of the surface. */
 .ds-savebar {
-  position: sticky; bottom: 8px; display: flex; align-items: center;
-  justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px;
-  background: var(--panel-2); border-radius: var(--r-1); margin: 8px 0;
+  position: sticky; bottom: var(--space-2); z-index: var(--z-sticky);
+  display: flex; align-items: center;
+  justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
+  padding: calc(var(--space-2-75) * var(--density)) calc(var(--space-3) * var(--density));
+  background: var(--panel-2); border-radius: var(--r-1);
+  margin: calc(var(--space-5) * var(--density)) 0 var(--space-2);
+  box-shadow: var(--shadow-2, var(--shadow-1));
 }
 .ds-savebar-note { flex: 1 1 160px; min-width: 0; color: var(--panel-text-2); }
-.ds-settings-modal { min-width: min(320px, calc(100vw - 32px)); max-width: 480px; }
-.ds-modal-body-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
-.ds-modal-note { margin: 0 0 8px; color: var(--panel-text-2); font-size: 14px; }
+.ds-settings-modal { min-width: min(320px, calc(100vw - var(--space-5))); max-width: 480px; }
+.ds-modal-body-form { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2-75); }
+.ds-modal-note { margin: 0; color: var(--panel-text-2); font-size: var(--fs-xs); }
 .ds-draft-preview {
-  background: var(--panel-1); padding: 12px; border-radius: var(--r-0);
-  font-size: 13px; color: var(--panel-text-2); max-height: 120px;
+  background: var(--panel-1); padding: var(--space-2-75); border-radius: var(--r-0);
+  font-size: var(--fs-micro); color: var(--panel-text-2); max-height: 120px;
   overflow-y: auto; font-family: var(--ff-mono); overflow-wrap: anywhere;
 }
-.ds-modal-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: space-between; flex-wrap: wrap; }
+/* Destructive-choice actions get a clearly larger interval than the body's own
+   gap — the decision must not read as the next line of the explanation. */
+.ds-modal-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); justify-content: space-between; flex-wrap: wrap; }
 
 /* == appended: signin kit cleanup == */
 /* -- signin kit (ui_kits/signin) -- */
@@ -303,7 +464,7 @@
 .ds-auth-sent-title { margin: 0; font-weight: 600; }
 .ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
 .ds-auth-field { display: flex; flex-direction: column; gap: 4px; }
-.ds-auth-field-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+/* .ds-auth-field-label joins the kit small-label voice above, no overrides. */
 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
 .ds-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
 .ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
@@ -335,7 +496,7 @@
 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
 .ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
-.ds-lightbox-tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+/* .ds-lightbox-tag joins the kit small-label voice above, no overrides. */
 
 /* --- error_404 kit --- */
 .ds-err-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@@ -351,10 +512,18 @@
 .ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-deep); }
 .ds-cli-log .prompt { color: var(--fg-3); }
 .ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
-.ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: var(--r-1); }
+.ds-term-body { padding: var(--space-2-75) var(--space-3-5); display: flex; flex-direction: column; gap: var(--space-1); background: var(--bg-2); border-radius: var(--r-1); }
 .ds-term-body--tall { min-height: 280px; }
-.ds-term-input-row { margin-top: 6px; }
-.ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: 13px; color: var(--fg); }
+.ds-term-input-row { margin-top: var(--space-1-75); }
+.ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg); }
+/* The input itself is a prompt line, not a form control, so it is NOT floored
+   to 44px (that would break the terminal's line rhythm). Instead the whole
+   prompt ROW becomes the tap target, and the font goes to 16px so focusing it
+   does not trigger iOS zoom — a sub-16px input is what causes that. */
+@media (pointer: coarse) {
+  .ds-term-input-row { min-height: 44px; align-items: center; }
+  .ds-term-input { font-size: max(16px, var(--fs-micro)); }
+}
 /* full-viewport render root (community-app) */
 .ds-root-viewport { height: 100vh; height: 100dvh; }
 
@@ -418,7 +587,7 @@
 }
 .ds-sheet-preview-table thead th {
   position: sticky; top: 0; background: var(--bg-2); color: var(--fg-3);
-  font-weight: 600; z-index: 1;
+  font-weight: 600; z-index: var(--z-sticky);
 }
 .ds-sheet-preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
 .ds-sheet-preview-empty { padding: var(--space-3, 16px); color: var(--fg-3); }
@@ -429,3 +598,188 @@
 }
 .ds-sheet-preview-error-action:hover { background: var(--bg-2); }
 .ds-sheet-preview-error-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
+
+/* == appended: community kit message list == */
+/* ui_kits/community mounts CommunityShell (the .cm-* family) but renders its
+   OWN message list in ds-* markup, and its index.html links app-shell.css
+   WITHOUT community.css. So these live here, not in community.css: the .cm-*
+   sheet never reaches this page, and .ds-community-* is ds-family markup by
+   the lint-classes taxonomy anyway. Every rule below deliberately mirrors the
+   .chat-msg / .chat-avatar / .chat-stack primitives in chat-polish.css so the
+   community thread and the chat kit read as one message language. */
+
+/* Page root — owns the full viewport column so CommunityShell's own 100dvh
+   flex shell has a height to resolve against, with the topbar/status chrome
+   stacked around it. */
+.ds-community-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+  min-width: 0;
+}
+/* Main column inside the shell — .cm-main's ds-family counterpart: header
+   pinned, message list taking the remaining height and doing the scrolling. */
+.ds-community-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Thread scroller. Same rhythm as .chat-thread (column + --space-3 gap +
+   own overflow), so messages breathe on the same interval as the chat kit. */
+.ds-community-messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-3);
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-3) transparent;
+}
+.ds-community-messages::-webkit-scrollbar { width: 8px; }
+.ds-community-messages::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-0); }
+
+/* One message — avatar rail + body stack, matching .chat-msg's flex/gap and
+   its quiet tonal hover (no border, per the zero-border aesthetic). */
+.ds-community-msg {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2-75);
+  padding: var(--space-1-75) var(--space-2);
+  margin: 0;
+  border-radius: var(--r-1);
+  min-width: 0;
+  transition: background var(--dur-base) var(--ease);
+}
+.ds-community-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); }
+
+/* Identity disc. The inline `background:` from app.js supplies the per-author
+   tone; this owns the SHAPE — a circle, which is the whole reason the avatar
+   was rendering as a coloured bar with no rule. Footprint + type match
+   .chat-avatar exactly. */
+.ds-community-avatar {
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--ink);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-micro);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+
+/* Body stack — name + time on one baseline, text beneath. .chat-stack's
+   column/gap idiom, without the bubble max-width (this is a flat list row,
+   not a two-sided bubble thread). */
+.ds-community-msg-body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-1) var(--space-2);
+  flex: 1;
+  min-width: 0;
+}
+/* Author. The inline `color:` from app.js carries the per-author tone; weight
+   and size are what make it read as the row's title. */
+.ds-community-msg-name {
+  font-weight: 600;
+  font-size: var(--fs-sm);
+  line-height: 1.3;
+}
+/* Timestamp — the quiet mono meta voice used by .cm-user-tag / row .meta. */
+.ds-community-msg-time {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-micro);
+  color: var(--fg-3);
+  line-height: 1.3;
+}
+/* Message body claims the full second line of the wrapping body row. */
+.ds-community-msg-text {
+  flex: 1 0 100%;
+  margin: 0;
+  min-width: 0;
+  color: var(--fg-2);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-base);
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-community-msg { transition: none; }
+}
+
+/* == appended: cross-kit note / swatch / chat-page / caret == */
+
+/* "about this kit" explanatory block — 8 kits render a run of <p> lines here
+   (often carrying inline Chip()/<code>) inside a .panel body. This is
+   SECONDARY copy annotating the demo above it, so it takes the quiet voice:
+   one step down from body, on the --fg-2 ramp, with a comfortable reading
+   line-height. It owns only the RHYTHM between its lines; the panel body still
+   owns the inset, so this must not re-pad. */
+.ds-pattern-notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  color: var(--fg-2);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-base);
+  max-width: var(--measure);
+  min-width: 0;
+}
+.ds-pattern-notes p { margin: 0; overflow-wrap: anywhere; }
+/* Inline literals inside a note read as quoted machinery, not as body copy —
+   same tonal chip treatment .chat-bubble code uses. */
+.ds-pattern-notes code {
+  font-family: var(--ff-mono);
+  font-size: 0.92em;
+  background: color-mix(in oklab, var(--fg) 8%, transparent);
+  padding: 0 var(--space-1);
+  border-radius: var(--r-hair);
+}
+.ds-pattern-notes strong { color: var(--fg); font-weight: 600; }
+
+/* Swatch cell wrapper (system_primer pairs it with .ds-swatch-col, which owns
+   the column/gap). This adds only what the wrapper itself needs: a minimum-zero
+   track so long token names ellipsize inside the grid instead of widening it. */
+.ds-swatch { min-width: 0; }
+.ds-swatch .ds-swatch-name { overflow-wrap: anywhere; }
+
+/* Chat kit page root — the thread must own the leftover column height rather
+   than growing the page, so the composer stays on screen. Pairs with
+   .ds-chat-layout (flex column, flex:1) which is already defined above. */
+.chat-kit-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Terminal caret — a solid block that sits on the last demo line. Sized in ch
+   so it tracks the mono column it follows. The blink is motion, so it is
+   declared ONLY inside prefers-reduced-motion: no-preference (the same
+   opt-in shape .cm-ch-spinner / .cm-vs-label::before use); with reduced
+   motion the caret is a steady block, still marking the cursor position. */
+.cursor-blink {
+  display: inline-block;
+  width: 1ch;
+  height: 1em;
+  margin-left: var(--space-1);
+  background: var(--accent);
+  vertical-align: text-bottom;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .cursor-blink { animation: ds-cursor-blink 1s step-end infinite; }
+  @keyframes ds-cursor-blink { 50% { opacity: 0; } }
+}

package/src/css/app-shell/panel-row.css

@@ -55,7 +55,12 @@
 }
 .panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
 .panel-body > * { margin: 0; }
-.panel-body > * + * { margin-top: var(--space-3); }
+/* Inner sibling rhythm scales with density like the outer panel rhythm, so a
+   compact/spacious surface stays proportional instead of only its outer
+   intervals moving while the panel interiors hold still. Kept strictly below
+   the outer .ds-panel-gap interval at every density — that ordering is what
+   makes proximity report grouping truthfully. */
+.panel-body > * + * { margin-top: calc(var(--space-3) * var(--density)); }
 .panel.panel-wide .panel-body { padding: 0; }
 
 /* ============================================================

package/src/css/app-shell/plugins-config.css

@@ -3,7 +3,7 @@
    ============================================================ */
 
 .ds-plugins-overlay {
-  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
+  position: fixed; inset: 0; z-index: var(--z-modal);
   background: color-mix(in oklab, var(--ink) 35%, transparent);
   display: flex; align-items: center; justify-content: center;
   padding: var(--space-3);

package/src/css/app-shell/responsive2-workspace.css

@@ -22,8 +22,9 @@
     width: 280px; max-width: 80%;
     transform: translateX(-100%);
     transition: transform var(--dur-base, 240ms) var(--ease, ease);
-    /* Above the sticky chrome (z-header): scrim > chrome > content budget. */
-    z-index: calc(var(--z-header, 100) + 2);
+    /* Drawer rung, above the sticky chrome it slides over. +1 puts the panel
+       itself over its own scrim (--z-drawer), which is the layer below it. */
+    z-index: calc(var(--z-drawer) + 1);
     background: var(--bg);
     border-right: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
     overflow-y: auto;
@@ -64,8 +65,9 @@
   display: none;
   position: absolute; inset: 0;
   background: color-mix(in oklab, var(--bg) 60%, transparent);
-  /* Above the sticky chrome so nav behind an open drawer is not clickable. */
-  z-index: calc(var(--z-header, 100) + 1);
+  /* Above the sticky chrome so nav behind an open drawer is not clickable.
+     Base of the drawer rung — the panel itself sits one above this. */
+  z-index: var(--z-drawer);
 }
 @container (max-width: 900px) {
   .app-body.side-open .app-side-scrim { display: block; }
@@ -77,9 +79,10 @@
 .app-side-toggle {
   display: none;
   position: absolute; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
-  /* Above the sticky topbar/chrome (z-header) and the drawer/scrim so the
-     translucent blurred chrome never paints over or intercepts the toggle. */
-  z-index: calc(var(--z-header, 100) + 3);
+  /* Above the sticky topbar/chrome and the drawer/scrim so the translucent
+     blurred chrome never paints over or intercepts the toggle. Top of the
+     drawer rung: scrim < panel < toggle. */
+  z-index: calc(var(--z-drawer) + 2);
   /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
      reliable-tap threshold on touch. */
   width: 44px; height: 44px;
@@ -181,7 +184,7 @@
 /* Column resize handles: a thin keyboard-accessible separator pinned to the
    right edge of each chrome track; drag (or ArrowLeft/Right) writes a clamped
    inline --ws-*-w. */
-.ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
+.ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
 .ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); }
 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
@@ -370,7 +373,7 @@
   .ws-pane {
     position: fixed; inset: 0 0 0 auto;
     width: min(340px, 85vw);
-    z-index: 42; transform: translateX(110%);
+    z-index: calc(var(--z-drawer) + 1); transform: translateX(110%);
     transition: transform var(--dur-base) var(--ease);
   }
   .ws-shell.ws-pane-open .ws-pane { transform: translateX(0); width: min(340px, 85vw); }
@@ -379,7 +382,7 @@
   .ws-pane-drawer-toggle { display: inline-flex; }
   /* Scrim is always present from this stage down so it FADES with the drawer
      instead of hard-appearing; pointer-events gate keeps it inert while closed. */
-  .ws-scrim { display: block; opacity: 0; pointer-events: none; position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--fg) 38%, transparent); transition: opacity var(--dur-base) var(--ease); }
+  .ws-scrim { display: block; opacity: 0; pointer-events: none; position: fixed; inset: 0; z-index: var(--z-drawer); background: color-mix(in srgb, var(--fg) 38%, transparent); transition: opacity var(--dur-base) var(--ease); }
   .ws-shell.ws-sessions-open .ws-scrim, .ws-shell.ws-pane-open .ws-scrim { opacity: 1; pointer-events: auto; }
 }
 
@@ -401,7 +404,7 @@
     /* Immune to the desktop collapse var (--ws-sessions-w:0px persisted from
        a desktop session would open an invisible 0-width drawer). */
     width: min(max(var(--ws-sessions-w), 280px), 80vw);
-    z-index: 42; transform: translateX(-110%);
+    z-index: calc(var(--z-drawer) + 1); transform: translateX(-110%);
     transition: transform var(--dur-base) var(--ease);
     border-right: var(--bw-hair) solid var(--bg-3);
     overscroll-behavior: contain;
@@ -428,7 +431,9 @@
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas: "content";
   }
-  .ws-rail { position: fixed; inset: 0 auto 0 0; width: var(--ws-rail-w-collapsed); z-index: 40; }
+  /* Persistent chrome, not a drawer: it stays put while the session/pane
+     drawers slide over it, so it sits on the header rung below them. */
+  .ws-rail { position: fixed; inset: 0 auto 0 0; width: var(--ws-rail-w-collapsed); z-index: var(--z-header); }
   .ws-rail .ws-rail-brand,
   .ws-rail .ws-rail-action-label,
   .ws-rail .ws-rail-item-label,

package/src/css/app-shell/states-interactions.css

@@ -147,7 +147,12 @@ input[type="checkbox"], input[type="radio"] {
   min-height: 120px;
   display: flex; align-items: center; justify-content: center;
   text-align: center; color: var(--fg-3);
-  transition: all var(--dur-snap) var(--ease);
+  /* Explicit list, never `all` — the only things `.drop-zone.active` changes
+     are the dashed border tone, the tinted fill and the label colour. `all`
+     also animated padding/min-height/border-width, so a drop target visibly
+     resized mid-drag instead of snapping. */
+  transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease),
+    color var(--dur-snap) var(--ease);
 }
 .drop-zone.active {
   border-color: var(--accent);
@@ -187,7 +192,7 @@ input[type="checkbox"], input[type="radio"] {
   border-radius: var(--r-2);
   box-shadow: var(--shadow-overlay);
   min-width: 160px;
-  z-index: calc(var(--z-overlay, 1000) + 1);
+  z-index: var(--z-dropdown);
   padding: 4px 0;
 }
 
@@ -566,7 +571,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   position: absolute; top: -40px; left: 0;
   background: var(--fg); color: var(--bg);
   padding: 8px 16px; border-radius: var(--r-1);
-  text-decoration: none; z-index: var(--z-overlay, 1000);
+  text-decoration: none; z-index: var(--z-top);
 }
 .skip-to-main:focus { top: 10px; }
 
@@ -689,7 +694,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   padding: var(--space-3) var(--space-4);
   max-width: 320px;
   box-shadow: var(--shadow-overlay);
-  z-index: calc(var(--z-overlay, 1000) + 10);
+  z-index: var(--z-toast);
 }
 
 @keyframes toast-slide-in {

package/src/kits/os/launcher.css

@@ -15,7 +15,7 @@
     padding: var(--space-2, 8px) 0;
     padding-left: env(safe-area-inset-left, 0px);
     gap: var(--space-2, 8px);
-    z-index: 10000;
+    z-index: var(--z-dock);
     pointer-events: auto;
     font: 11px var(--os-mono);
     color: var(--os-fg);