anentrypoint-design 0.0.379 → 0.0.381

package/community.css

@@ -4,6 +4,25 @@
    All tokens sourced from colors_and_type.css.
    ============================================================ */
 
+/* ============================================================
+   Small-label voice — the local composition of the house `.t-micro`
+   recipe (src/css/app-shell/base.css). This sheet is a standalone
+   published export consumed via its own <link>, so it cannot join the
+   `.t-micro` selector list; it composes by referencing the identical
+   token set instead. Every selector below that needs the label voice
+   JOINS this rule and declares only what it deliberately differs on —
+   never a second copy of these four declarations.
+   ============================================================ */
+.cm-vs-label,
+.vx-section-label,
+.vx-chip-tag {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-micro);
+  text-transform: uppercase;
+  letter-spacing: var(--tr-label);
+  color: var(--fg-3);
+}
+
 /* ============================================================
    Shell — top-level flex container for the community layout
    ============================================================ */
@@ -42,8 +61,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 12px 0;
+  gap: var(--space-2);
+  padding: var(--space-2-75) 0;
   background: color-mix(in oklab, var(--bg) 70%, var(--ink));
   overflow-y: auto;
   overflow-x: hidden;
@@ -112,7 +131,7 @@
   right: -2px;
   min-width: 18px;
   height: 18px;
-  padding: 0 5px;
+  padding: 0 var(--space-1-5);
   background: var(--warn);
   color: var(--paper);
   font-family: var(--ff-mono);
@@ -157,7 +176,7 @@
   height: 2px;
   background: color-mix(in oklab, var(--fg) 12%, transparent);
   border-radius: var(--r-hair);
-  margin: 4px 0;
+  margin: var(--space-1) 0;
   flex-shrink: 0;
 }
 
@@ -178,8 +197,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 14px 16px;
+  gap: var(--space-2);
+  padding: var(--space-2-75) var(--space-3);
   background: var(--bg-2);
   box-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 8%, transparent);
   font-weight: 600;
@@ -206,10 +225,10 @@
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 8px 0 16px;
+  padding: var(--space-2) 0 var(--space-3);
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-hair);
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 18%, transparent) transparent;
 }
@@ -226,15 +245,15 @@
 .cm-channel-category {
   display: flex;
   flex-direction: column;
-  margin-top: 12px;
+  margin-top: var(--space-2-75);
 }
-.cm-channel-category:first-child { margin-top: 4px; }
+.cm-channel-category:first-child { margin-top: var(--space-1); }
 
 .cm-category-header {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px 4px 8px;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
   font-family: var(--ff-body);
   font-size: var(--fs-micro);
   font-weight: 600;
@@ -268,6 +287,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Deliberately NOT the small-label voice: this is the `+` affordance sitting
+   inside .cm-category-header, which IS uppercase + tracked. The zeroed
+   letter-spacing and text-transform are resets of that inherited voice, not a
+   copy of it — a bare glyph must not be tracked apart or case-folded. */
 .cm-cat-extra {
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
@@ -282,7 +305,7 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  padding: 4px;
+  padding: var(--space-1);
   border: 0;
   background: transparent;
   color: var(--fg-3);
@@ -304,8 +327,11 @@
 .cm-cat-channels {
   display: flex;
   flex-direction: column;
+  /* gap:1px is OFF-SCALE ON PURPOSE — channel rows are meant to read as one
+     near-continuous stack with only a hairline seam between them. --space-hair
+     (2px) doubles the seam and breaks the rows into visibly separate pills. */
   gap: 1px;
-  padding: 2px 0;
+  padding: var(--space-hair) 0;
 }
 
 /* ============================================================
@@ -313,15 +339,15 @@
    ============================================================ */
 .cm-channel-item-wrap {
   position: relative;
-  padding: 0 8px;
+  padding: 0 var(--space-2);
 }
 
 .cm-channel-item {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
+  gap: var(--space-2);
+  padding: var(--space-1-75) var(--space-2);
   border-radius: var(--r-1);
   color: var(--fg-3);
   cursor: pointer;
@@ -437,7 +463,7 @@
   flex-shrink: 0;
   min-width: 16px;
   height: 16px;
-  padding: 0 5px;
+  padding: 0 var(--space-1-5);
   background: var(--warn);
   color: var(--paper);
   font-family: var(--ff-mono);
@@ -453,7 +479,7 @@
 .cm-ch-actions {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--space-hair);
   opacity: 0;
   transition: opacity var(--dur-snap) var(--ease);
   flex-shrink: 0;
@@ -463,7 +489,7 @@
 .cm-ch-action-btn {
   width: 28px;
   height: 28px;
-  padding: 4px;
+  padding: var(--space-1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -488,15 +514,16 @@
 .cm-ch-voice-users {
   display: flex;
   flex-direction: column;
+  /* gap:1px — same hairline-seam rationale as .cm-cat-channels above. */
   gap: 1px;
-  padding: 2px 8px 4px 32px;
+  padding: var(--space-hair) var(--space-2) var(--space-1) var(--space-5);
 }
 
 .cm-ch-voice-user {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 3px 6px;
+  gap: var(--space-2);
+  padding: var(--space-half) var(--space-1-75);
   border-radius: var(--r-1);
   color: var(--fg-2);
   font-size: var(--fs-xs);
@@ -550,8 +577,8 @@
 .cm-voice-strip {
   display: none;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: var(--space-2);
+  padding: var(--space-2-5) var(--space-2-75);
   background: color-mix(in oklab, var(--green) 18%, var(--bg-2));
   color: var(--fg);
   box-shadow: 0 -1px 0 color-mix(in oklab, var(--fg) 10%, transparent);
@@ -559,16 +586,15 @@
 }
 .cm-voice-strip.open { display: flex; }
 
+/* Joins the small-label voice above. Deliberate overrides: --green (this is a
+   live-recording indicator, not neutral chrome) and weight 700 (it sits next to
+   a pulsing dot and must read as the loudest thing in the strip). */
 .cm-vs-label {
-  font-family: var(--ff-mono);
-  font-size: var(--fs-micro);
-  text-transform: uppercase;
-  letter-spacing: var(--tr-caps);
   color: var(--green);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-1-75);
 }
 .cm-vs-label::before {
   content: '';
@@ -602,7 +628,7 @@
   color: var(--fg-2);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-1-75);
   flex-wrap: wrap;
 }
 
@@ -610,9 +636,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: var(--space-1-75);
   height: 28px;
-  padding: 0 10px;
+  padding: 0 var(--space-2-5);
   background: color-mix(in oklab, var(--fg) 10%, transparent);
   color: var(--fg);
   border: 0;
@@ -640,8 +666,8 @@
 .cm-user-panel {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 8px;
+  gap: var(--space-2);
+  padding: var(--space-2);
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
   flex-shrink: 0;
 }
@@ -694,6 +720,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Deliberately NOT the small-label voice: a user's handle/tag is content, not
+   chrome, so it stays sentence-case and untracked. Mono + micro + --fg-3 only. */
 .cm-user-tag {
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
@@ -706,7 +734,7 @@
 .cm-user-controls {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--space-hair);
 }
 
 .cm-user-btn {
@@ -741,8 +769,8 @@
 .cm-chat-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
+  gap: var(--space-2-5);
+  padding: var(--space-2-75) var(--space-3);
   background: var(--bg);
   box-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 8%, transparent);
   flex-shrink: 0;
@@ -772,8 +800,8 @@
 .cm-chat-header-topic {
   flex: 1;
   min-width: 0;
-  padding-left: 12px;
-  margin-left: 4px;
+  padding-left: var(--space-2-75);
+  margin-left: var(--space-1);
   border-left: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
   color: var(--fg-3);
   font-size: var(--fs-xs);
@@ -785,7 +813,7 @@
 .cm-chat-header-toolbar {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-1);
   flex-shrink: 0;
 }
 
@@ -801,7 +829,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   background: var(--bg-2);
-  padding: 16px 0;
+  padding: var(--space-3) 0;
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 18%, transparent) transparent;
   transition: width var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease);
@@ -823,7 +851,7 @@
 }
 
 .cm-member-category {
-  padding: 12px 16px 6px;
+  padding: var(--space-2-75) var(--space-3) var(--space-1-75);
   font-family: var(--ff-body);
   font-size: var(--fs-micro);
   font-weight: 600;
@@ -835,9 +863,9 @@
 .cm-member-item {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 6px 12px;
-  margin: 0 8px;
+  gap: var(--space-2-5);
+  padding: var(--space-1-75) var(--space-2-75);
+  margin: 0 var(--space-2);
   border-radius: var(--r-1);
   color: var(--fg-2);
   cursor: pointer;
@@ -902,8 +930,8 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
-  padding: 10px;
+  gap: var(--space-1-75);
+  padding: var(--space-2-5);
   border-radius: var(--r-2);
   background: var(--bg-2);
   transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
@@ -953,7 +981,7 @@
 @media (max-width: 900px) {
   .cm-channel-sidebar {
     position: absolute;
-    z-index: 20;
+    z-index: calc(var(--z-drawer) + 1);
     top: 0;
     left: 72px;
     bottom: 0;
@@ -966,7 +994,7 @@
   .cm-member-list.open {
     display: flex;
     position: absolute;
-    z-index: 20;
+    z-index: calc(var(--z-drawer) + 1);
     top: 0;
     right: 0;
     bottom: 0;
@@ -986,7 +1014,7 @@
     content: '';
     position: absolute;
     inset: 0;
-    z-index: 15;
+    z-index: var(--z-drawer);
     background: color-mix(in oklab, var(--ink) 40%, transparent);
     pointer-events: none;
   }
@@ -1002,7 +1030,7 @@
   .cm-server-back {
     width: 44px;
     height: 44px;
-    padding: 4px;
+    padding: var(--space-1);
   }
   .cm-channel-sidebar,
   .cm-channel-sidebar.open {
@@ -1148,7 +1176,12 @@
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
   background: var(--bg-2);
-  border-left: 3px solid var(--accent);
+  /* Hairline, not a 3px accent bar. This is a transient status strip pinned
+     above the composer (role=status, "Replying to <author>"), not a card or a
+     callout — the tinted fill already carries the attachment. A chunky left
+     bar here was the generic accent-stripe tell; the real accent still lands
+     on .cm-rb-author. */
+  border-left: var(--bw-hair) solid var(--rule-strong);
   font-size: 0.85rem;
 }
 .cm-rb-label { flex: none; color: var(--fg-2); }
@@ -1196,7 +1229,7 @@
   color: inherit;
   font: inherit;
   font-weight: 600;
-  padding: 2px var(--space-2);
+  padding: var(--space-hair) var(--space-2);
   border-radius: var(--r-1);
   cursor: pointer;
 }
@@ -1279,6 +1312,14 @@
      the glow's -4px bleed without overflowing the viewport edge. */
   .vx-ptt-glow { inset: -4px 0; }
 }
+@media (max-height: 420px) {
+  /* Phone-in-landscape: topbar + chat-head + user-identity bar alone can
+     consume most of a ~320px-tall viewport, leaving no room for the fixed
+     120px .vx-ptt plus the voice grid above it -- shrink the PTT button so
+     both remain visible instead of the label clipping off-screen. */
+  .vx-ptt { min-width: 88px; min-height: 64px; padding: var(--space-2); }
+  .vx-ptt-icon { font-size: var(--fs-lg); }
+}
 .vx-ptt-recording, .vx-ptt-live {
   background: var(--accent);
   color: var(--accent-fg);
@@ -1418,13 +1459,7 @@
   border-top: var(--bw-hair) solid var(--rule);
 }
 .vx-section { display: flex; flex-direction: column; gap: var(--space-2); }
-.vx-section-label {
-  font-family: var(--ff-mono);
-  font-size: var(--fs-micro);
-  letter-spacing: var(--tr-label);
-  text-transform: uppercase;
-  color: var(--fg-3);
-}
+/* Joins the small-label voice above with no overrides — it IS the plain voice. */
 .vx-segmented { display: flex; gap: var(--space-1); }
 .vx-seg {
   flex: 1;
@@ -1473,7 +1508,7 @@
   display: flex; gap: var(--space-2);
   overflow-x: auto;
   flex: 1;
-  padding-bottom: 2px;
+  padding-bottom: var(--space-hair);
 }
 .vx-chip {
   display: inline-flex; align-items: center; gap: var(--space-1);
@@ -1492,9 +1527,11 @@
 .vx-chip-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-3); flex-shrink: 0; }
 .vx-chip-name { font-weight: 600; }
 .vx-chip-dur { font-family: var(--ff-mono); color: var(--fg-3); }
+/* Joins the small-label voice above. Deliberate overrides: --green + weight 700
+   because this is the "LIVE" badge on a session chip, same signal role as
+   .cm-vs-label. */
 .vx-chip-tag {
-  font-family: var(--ff-mono); font-size: var(--fs-micro);
-  color: var(--green); font-weight: 700; letter-spacing: var(--tr-caps);
+  color: var(--green); font-weight: 700;
 }
 
 /* VoiceControls — vx-vc-* */
@@ -1529,7 +1566,7 @@
 @media (max-width: 900px) {
   .cm-thread-panel {
     position: absolute;
-    z-index: 20;
+    z-index: calc(var(--z-drawer) + 1);
     top: 0; right: 0; bottom: 0;
     height: auto;
     width: min(320px, 90vw);
@@ -1550,7 +1587,7 @@
 .cm-tp-list { flex: 1; min-height: 0; overflow-y: auto; }
 .cm-tp-item {
   position: relative; /* anchors .cm-tp-dot to the row, not the panel */
-  display: flex; flex-direction: column; gap: 2px;
+  display: flex; flex-direction: column; gap: var(--space-hair);
   width: 100%; text-align: left; cursor: pointer;
   padding: var(--space-2); border: none; background: transparent;
   border-bottom: var(--bw-hair) solid var(--rule);
@@ -1575,7 +1612,7 @@
    list surface in the kit uses one shimmer language, never a bare spinner. */
 .cm-channel-item-skeleton, .cm-member-item-skeleton {
   display: flex; align-items: center; gap: var(--space-2);
-  padding: var(--space-2); margin: 2px var(--space-1);
+  padding: var(--space-2); margin: var(--space-hair) var(--space-1);
 }
 .cm-channel-item-skeleton .ds-skel-icon, .cm-member-item-skeleton .ds-skel-icon {
   width: 20px; height: 20px; border-radius: var(--r-round, 50%); flex: none; background: var(--bg-3);
@@ -1584,7 +1621,7 @@
   height: 12px; width: 60%; border-radius: var(--r-1); background: var(--bg-3);
 }
 .cm-list-item-skeleton {
-  display: flex; flex-direction: column; gap: 6px;
+  display: flex; flex-direction: column; gap: var(--space-1-75);
   padding: var(--space-2) var(--space-3); border-bottom: var(--bw-hair) solid var(--rule);
 }
 .cm-list-item-skeleton .ds-skel-title { height: 12px; width: 55%; border-radius: var(--r-1); background: var(--bg-3); }
@@ -1618,8 +1655,10 @@
 .cm-forum-item-replies { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
 .cm-forum-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .85; }
 .cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
-.cm-forum-item-tags { display: inline-flex; gap: 4px; }
-.cm-forum-tag { padding: 1px 6px; border-radius: var(--r-1); background: var(--bg-3); border: var(--bw-hair) solid var(--rule); }
+.cm-forum-item-tags { display: inline-flex; gap: var(--space-1); }
+/* 1px vertical is OFF-SCALE ON PURPOSE — the tag is an inline chip inside the
+   forum meta row; --space-hair (2px) tips it past the row height. */
+.cm-forum-tag { padding: 1px var(--space-1-75); border-radius: var(--r-1); background: var(--bg-3); border: var(--bw-hair) solid var(--rule); }
 
 /* PageView — cm-page / cm-page-* */
 .cm-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
@@ -1646,6 +1685,9 @@
 .fd-chat-thread { flex: 1 1 auto; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2, 10px); padding: var(--space-2, 10px); }
 .fd-page-error { white-space: pre-wrap; overflow-wrap: anywhere; }
 /* Visually-hidden polite live region — announces async busy/done to SR users. */
+/* margin:-1px is OFF-SCALE ON PURPOSE — the canonical visually-hidden idiom;
+   the negative margin cancels the 1px box so the live region contributes zero
+   layout. A --space-* rung would reintroduce a measurable gap. */
 .fd-sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 /* page-level responsive: tighten padding on narrow viewports */
 @media (max-width: 640px) {