anentrypoint-design 0.0.219 → 0.0.221

package/app-shell.css

@@ -1,7 +1,8 @@
 /* ============================================================
    247420 design system — component sheet
-   Tonal surfaces over borders. Indicator rails over hairlines.
-   Friendly rounded sans body; mono only on real code.
+   "Acid Editorial": Space Grotesk display + Inter body + JetBrains code.
+   Confident hierarchy, asymmetric grid tension, print texture over glow,
+   one electric lead accent. Indicator rails over hairlines.
    ============================================================ */
 
 /* ============================================================
@@ -54,10 +55,10 @@ body {
 /* ============================================================
    Typography
    ============================================================ */
-h1, .t-h1 { font-family: var(--ff-body); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
-h2, .t-h2 { font-family: var(--ff-body); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
-h3, .t-h3 { font-family: var(--ff-body); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
-h4, .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
+h1, .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
+h2, .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
+h3, .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
+h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
 
 /* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
 [data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
@@ -65,10 +66,10 @@ h4, .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: v
 [data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
 [data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
 
-.t-hero    { font-family: var(--ff-body); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
-.t-mega    { font-family: var(--ff-body); font-size: var(--fs-mega); line-height: 0.95;            letter-spacing: var(--tr-tighter); font-weight: 600; margin: 0; }
+.t-hero    { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
+.t-mega    { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92;            letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
 
-.t-display { font-family: var(--ff-body); font-weight: 600; letter-spacing: var(--tr-tight); }
+.t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); }
 .t-mono    { font-family: var(--ff-mono); }
 .t-body    { font-family: var(--ff-body); }
 
@@ -83,17 +84,18 @@ h4, .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: v
 }
 
 .eyebrow {
-  font-family: var(--ff-body);
+  font-family: var(--ff-mono);
   font-size: var(--fs-tiny);
   font-weight: 600;
-  letter-spacing: var(--tr-caps);
+  letter-spacing: var(--tr-label);
   text-transform: uppercase;
-  color: var(--accent);
-  display: inline-flex; align-items: center; gap: 10px;
+  color: var(--accent-ink);
+  display: inline-flex; align-items: center; gap: 12px;
 }
+/* Editorial kicker mark — a short solid ink rule, the print-byline tell. */
 .eyebrow::before {
   content: '';
-  width: 18px; height: 2px; background: currentColor;
+  width: 28px; height: 3px; background: currentColor;
 }
 
 .ds-prose {
@@ -113,7 +115,7 @@ h4, .t-h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: v
 /* Links */
 a { color: inherit; text-decoration: none; }
 a.ds-link-accent, .ds-prose a {
-  color: var(--accent);
+  color: var(--accent-ink);
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
@@ -253,18 +255,19 @@ body.canvas-host { background: transparent !important; }
    as misaligned. Same height as the inactive links — only the tint + underline
    change. */
 .app-topbar nav a.active {
-  color: var(--accent);
+  color: var(--accent-ink);
   background: color-mix(in oklab, var(--accent) 16%, transparent);
   box-shadow: inset 0 -2px 0 0 var(--accent);
   font-weight: 600;
 }
 
 .brand {
-  font-family: var(--ff-body);
-  font-weight: 700; font-size: var(--fs-sm);
-  letter-spacing: -0.01em;
+  font-family: var(--ff-display);
+  font-weight: 700; font-size: var(--fs-lg);
+  letter-spacing: var(--tr-tight);
 }
-.brand .slash { color: var(--fg-3); font-weight: 400; margin: 0 2px; }
+/* The wordmark separator printed in the electric lead — the brand tell. */
+.brand .slash { color: var(--accent-ink); font-weight: 700; margin: 0 3px; }
 
 .app-search {
   display: inline-flex; align-items: center; gap: 10px;
@@ -353,7 +356,7 @@ body.canvas-host { background: transparent !important; }
    failure mode any long-scroll page (a marketing/landing route) hits. Grow
    children (.chat/.grow/etc.) re-assert flex:1 1 auto below via higher
    specificity, so a single full-height pane still fills the region. */
-.app-main > * { min-height: 0; flex-shrink: 0; }
+.app-main > * { min-height: 0; flex: none; }
 /* The main region scrolls its own overflow at every breakpoint (previously
    only ≥901px), so a fixed-height .app never clips route content and inner
    panels don't fight the page scroll. */
@@ -393,7 +396,7 @@ body.canvas-host { background: transparent !important; }
   border-top: 1px solid var(--rule);
 }
 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.app-status .item:first-of-type { color: var(--accent); }
+.app-status .item:first-of-type { color: var(--accent-ink); }
 .app-status .spread { flex: 1; }
 /* The status bar NEVER wraps: at narrow widths the trailing items (hints,
    agent target) drop in priority order instead of breaking mid-word onto a
@@ -416,15 +419,20 @@ body.canvas-host { background: transparent !important; }
   /* Rounded-rect app chrome, not a marketing-page stadium CTA. */
   border-radius: var(--r-1);
   border: 0;
-  transition: transform var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .btn { background: var(--bg-2); color: var(--fg); }
 .btn:hover { background: var(--bg-3); color: var(--fg); }
-.btn-primary { background: var(--accent); color: var(--accent-fg); }
-.btn-primary:hover { background: var(--fg); color: var(--bg); }
-.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
-.btn-ghost:hover { background: var(--bg-2); }
-.btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); }
+/* Primary CTA — the electric lead as a solid editorial block; hover inverts to
+   an ink block with the lead as text, a confident two-tone flip. */
+.btn-primary {
+  background: var(--accent); color: var(--accent-fg);
+  font-weight: 700; letter-spacing: var(--tr-caps);
+}
+.btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
+.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
+.btn-ghost:hover { background: var(--fg); color: var(--bg); }
+.btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(2px); }
 .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
@@ -520,6 +528,17 @@ body.canvas-host { background: transparent !important; }
   padding: var(--space-3);
   position: relative;
 }
+/* Editorial accent spine — an opt-in printed-ink rule down the left edge that
+   reads as a magazine pull-quote bar, not a glow card. */
+.panel.panel-spine {
+  border-radius: 0 var(--r-2) var(--r-2) 0;
+  padding-left: calc(var(--space-3) + var(--bw-chunk));
+}
+.panel.panel-spine::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: var(--bw-chunk); background: var(--accent);
+  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
+}
 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
 .panel.panel-wide   { background: transparent; }
 .panel-head {
@@ -594,9 +613,13 @@ body.canvas-host { background: transparent !important; }
    row should not signal an affordance it does not have. */
 .row[role="button"]:hover, a.row:hover { background: var(--bg-2); }
 .row[role="button"]:hover::before, a.row:hover::before { height: 56%; opacity: 1; }
+/* Editorial hover-reveal — the row's meta (cta) slides toward the lead accent
+   and nudges right, the printed-index "open ->" affordance. */
+.row .meta { transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); }
+a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); transform: translateX(3px); }
 .row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
 .row.active::before { height: 64%; opacity: 1; background: var(--accent); }
-.row.active .title { color: var(--accent); }
+.row.active .title { color: var(--accent-ink); }
 .row.row-state-disabled { opacity: 0.5; pointer-events: none; }
 .row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
 .row.row-state-error::before { height: 64%; opacity: 1; background: var(--flame); }
@@ -638,24 +661,43 @@ a.row { text-decoration: none; }
 /* ============================================================
    Hero
    ============================================================ */
+/* Signature hero — asymmetric editorial header. Title spans wide; the body +
+   actions sit offset in a narrower right column on desktop, stacked on mobile.
+   No centered stack. */
 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: grid; gap: var(--space-5);
+  display: grid; gap: var(--space-5) var(--space-6);
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  grid-template-areas: 'title title' 'body actions';
+  align-items: end;
   max-width: var(--measure-wide);
 }
+.ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
+.ds-hero-body  { grid-area: body; }
+.ds-hero-actions { grid-area: actions; }
+.ds-hero-badge { grid-area: actions; }
 .ds-hero-title {
-  font-family: var(--ff-body); font-weight: 600;
-  font-size: clamp(34px, 6.4cqi, 80px);
-  line-height: 1.05; letter-spacing: var(--tr-tight);
-  margin: 0; max-width: 18ch;
+  font-family: var(--ff-display); font-weight: 700;
+  font-size: clamp(40px, 9cqi, 116px);
+  line-height: 0.96; letter-spacing: var(--tr-tighter);
+  margin: 0; max-width: 16ch; text-wrap: balance;
 }
 .ds-hero-body {
   font-family: var(--ff-body); font-size: var(--fs-xl);
-  line-height: 1.45; margin: 0; max-width: 52ch;
+  line-height: 1.45; margin: 0; max-width: 46ch;
   color: var(--fg-2);
 }
-.ds-hero-accent { color: var(--accent); font-weight: 500; }
-.ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; margin-top: var(--space-2, 8px); }
+/* The lead phrase in the title — printed in the electric lead, not glowing. */
+.ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
+.ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; align-self: end; }
+@media (max-width: 900px) {
+  .ds-hero {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: 'title' 'body' 'actions';
+    align-items: start;
+    padding: var(--space-7) 0 var(--space-6);
+  }
+}
 .ds-chat-title { margin: 0; font-size: inherit; }
 
 /* ============================================================
@@ -675,6 +717,59 @@ a.row { text-decoration: none; }
   .ds-section { margin: var(--space-4) 0; }
 }
 
+/* ============================================================
+   Print texture — the signature surface treatment. Opt-in overlay that
+   reads as risograph/newsprint grain, layered above the surface fill but
+   below content. Faint by default so type stays crisp; reduced-data and
+   reduced-motion are unaffected (texture is static).
+   ============================================================ */
+.ds-grain { position: relative; isolation: isolate; }
+.ds-grain::after {
+  content: ''; position: absolute; inset: 0; z-index: -1;
+  pointer-events: none;
+  background-image: var(--grain);
+  background-size: 160px 160px;
+  opacity: var(--grain-opacity);
+  mix-blend-mode: var(--grain-blend);
+}
+/* Halftone dot screen — a heavier print tell for accent panels/hero. */
+.ds-halftone { position: relative; isolation: isolate; }
+.ds-halftone::after {
+  content: ''; position: absolute; inset: 0; z-index: -1;
+  pointer-events: none;
+  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
+  background-size: var(--halftone-size) var(--halftone-size);
+  opacity: 0.12;
+}
+
+/* ============================================================
+   Marquee / ticker — brand kinetic device ("always open 24/7"). The track
+   holds two identical runs so the loop is seamless; reduced-motion freezes it
+   to a single static run. Editorial, not a decorative flourish.
+   ============================================================ */
+.ds-marquee {
+  overflow: hidden; width: 100%;
+  border-block: var(--bw-rule) solid var(--fg);
+  padding: var(--space-2) 0;
+  font-family: var(--ff-display); font-weight: 600;
+  text-transform: uppercase; letter-spacing: var(--tr-caps);
+}
+.ds-marquee-track {
+  display: inline-flex; gap: var(--space-5);
+  white-space: nowrap; will-change: transform;
+  animation: ds-marquee-run 28s linear infinite;
+}
+.ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
+.ds-marquee-sep { color: var(--accent-ink); }
+.ds-marquee:hover .ds-marquee-track { animation-play-state: paused; }
+@keyframes ds-marquee-run {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-marquee-track { animation: none; }
+}
+
 /* ============================================================
    Install — single CLI command card
    ============================================================ */
@@ -1126,7 +1221,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    ============================================================ */
 .ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
 .ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
-.ds-chat-msg.user { background: var(--accent); color: var(--accent-fg); align-self: flex-end; }
+.ds-chat-msg.user { background: var(--accent-tint); color: var(--fg); align-self: flex-end; }
 .ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
 .ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
 .ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
@@ -1165,7 +1260,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--r-1);
 }
 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
-.ds-file-sort-btn.active { color: var(--accent); }
+.ds-file-sort-btn.active { color: var(--accent-ink); }
 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 
 /* Skeleton shimmer rows shown while a directory loads. */
@@ -1253,7 +1348,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   width: 26px; height: 26px; font-size: 15px; line-height: 1;
   color: var(--fg-2);
 }
-.ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent); }
+.ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
 .ds-file-row[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
 .ds-file-row[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
 .ds-file-row[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
@@ -1311,7 +1406,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
-.ds-file-check.is-marked { color: var(--accent); }
+.ds-file-check.is-marked { color: var(--accent-ink); }
 .ds-file-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
@@ -1404,7 +1499,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
 /* Per-type icon tints on thumb tiles so the grid keeps the colour-coding the
    list rows already carry (mirrors .ds-file-row[data-file-type] .ds-file-icon). */
-.ds-file-cell[data-file-type="dir"]      .ds-file-icon { color: var(--accent); }
+.ds-file-cell[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
 .ds-file-cell[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
 .ds-file-cell[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
 .ds-file-cell[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
@@ -1531,7 +1626,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   .ds-dropzone.dragover { animation: ds-dropzone-pulse 1.1s var(--ease) infinite; }
 }
 .ds-dropzone.dragover .ds-dropzone-glyph,
-.ds-dropzone.dragover .ds-dropzone-label { color: var(--accent); }
+.ds-dropzone.dragover .ds-dropzone-label { color: var(--accent-ink); }
 @keyframes ds-dropzone-pulse {
   0%, 100% { border-color: var(--accent); }
   50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
@@ -1894,7 +1989,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
 .chat-msg.you .chat-avatar {
   background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
-  color: var(--accent);
+  color: var(--accent-ink);
 }
 .chat-msg.aicat .chat-avatar {
   background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
@@ -1917,7 +2012,8 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
-.chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
+/* Own bubble — calm tinted lead, not a full electric fill (chat stays readable). */
+.chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
 .chat-msg.aicat .chat-bubble {
   background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
   border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
@@ -1927,7 +2023,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   background: color-mix(in oklab, var(--fg) 10%, transparent);
   padding: 1px 6px; border-radius: 4px;
 }
-.chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--accent-fg) 18%, transparent); }
+.chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--fg) 10%, transparent); }
 .chat-bubble a {
   color: inherit; text-decoration: underline;
   text-underline-offset: 2px; text-decoration-thickness: 1px;
@@ -2011,7 +2107,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
   font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
 }
-.chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
+.chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.06em; }
 .chat-code-head .filename,
 .chat-code-head .name { color: var(--fg-2); font-weight: 500; }
 .chat-code-head .spread { flex: 1; }
@@ -2023,7 +2119,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-bubble.chat-code code { background: transparent; padding: 0; font-size: inherit; }
 .chat-bubble.chat-code .token.keyword,
 .chat-bubble.chat-code .token.atrule,
-.chat-bubble.chat-code .token.selector { color: var(--accent); }
+.chat-bubble.chat-code .token.selector { color: var(--accent-ink); }
 .chat-bubble.chat-code .token.string,
 .chat-bubble.chat-code .token.attr-value { color: var(--code-str-alt, var(--mascot)); }
 .chat-bubble.chat-code .token.comment { color: var(--fg-3); font-style: italic; }
@@ -2064,7 +2160,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
+  color: var(--accent-ink); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
 }
 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .chat-file .name {
@@ -2074,7 +2170,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-file .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
 .chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
 .chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
-.chat-file:hover .go { color: var(--accent); }
+.chat-file:hover .go { color: var(--accent-ink); }
 
 .chat-msg.you .chat-pdf,
 .chat-msg .chat-pdf,
@@ -2094,7 +2190,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
 .chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.chat-pdf-head a { color: var(--accent); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
+.chat-pdf-head a { color: var(--accent-ink); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
 .chat-pdf embed,
 .chat-pdf iframe,
 .chat-pdf object { width: 100%; height: 360px; border: 0; display: block; }
@@ -2131,7 +2227,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
 .chat-meta .t { color: var(--fg-3); }
 .chat-meta .tick { color: var(--fg-3); margin-left: 2px; letter-spacing: -2px; font-family: var(--ff-mono); }
-.chat-meta .tick.read { color: var(--accent); }
+.chat-meta .tick.read { color: var(--accent-ink); }
 
 .chat-reactions {
   display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
@@ -2149,11 +2245,11 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
-  color: var(--accent);
+  color: var(--accent-ink);
 }
 .chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
-.chat-reactions .rxn.you .n { color: var(--accent); }
+.chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
 .chat-typing { display: inline-flex; gap: 4px; align-items: center; }
 .chat-typing span {
@@ -2292,7 +2388,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .app-side a:has(> .count:empty) > .count,
 .app-side .count:empty { display: none; }
 .app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
-.app-side a.active .glyph { color: var(--accent); }
+.app-side a.active .glyph { color: var(--accent-ink); }
 
 /* -- select primitive --------------------------------------------------- */
 .ds-select {
@@ -2476,7 +2572,7 @@ input[type="checkbox"], input[type="radio"] {
 .drop-zone.active {
   border-color: var(--accent);
   background: color-mix(in oklab, var(--accent) 10%, var(--bg));
-  color: var(--accent);
+  color: var(--accent-ink);
 }
 
 /* List item reorder indicator */
@@ -2539,7 +2635,7 @@ input[type="checkbox"], input[type="radio"] {
 }
 .ds-context-menu-item:hover {
   background: var(--bg-3);
-  color: var(--accent);
+  color: var(--accent-ink);
 }
 .ds-context-menu-item:active {
   background: color-mix(in oklab, var(--accent) 20%, var(--bg-3));
@@ -2631,9 +2727,13 @@ textarea::placeholder {
   color: var(--fg);
   background: var(--bg-2);
   border: 0;
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  /* Editorial field — tonal fill with a printed baseline rule that thickens to
+     the electric lead on focus, instead of a uniform hairline box. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
   border-radius: var(--r-2, 10px);
   padding: 10px 14px;
+  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
 .ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
 .ds-search-input::placeholder { color: var(--fg-3); }
@@ -2643,7 +2743,10 @@ textarea::placeholder {
 .ds-field .ds-select:focus-visible,
 .ds-search-input:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring-inset);
+  background: var(--bg);
+  /* Focus thickens the baseline to the lead accent — the printed-rule tell. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
 }
 .ds-field input:disabled,
 .ds-field textarea:disabled,