style: polish layer (system type, soft fills, card zones, quiet timeline clips)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/ui/composer/composer.css

@@ -18,3 +18,4 @@
 @import "./elements/nle.css";
 @import "./elements/wheel.css";
 @import "./elements/settings.css";
+@import "./elements/polish.css";

app/ui/composer/elements/polish.css

@@ -0,0 +1,54 @@
+/* The finishing layer: lighter type, soft fills instead of outlines, rounded cards with hairlines and room to breathe.
+ * Kept in one file so the whole look can be tuned (or switched off) in one place. Last in the cascade on purpose. */
+
+:root {
+  /* system face first: San Francisco on a Mac (the Apple look), Inter everywhere else */
+  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
+  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Inter", system-ui, sans-serif;
+  --fw-medium: 450; --fw-semibold: 560; --fw-bold: 640;
+  --fs-5: 12.5px; --lh-5: 16px;
+  --fs-6: 11.5px; --lh-6: 15px;
+  --ctl-r: var(--r-4);
+  --ctl-h-sm: 24px; --ctl-h-md: 28px; --ctl-h-lg: 32px;
+  --ctl-pad-x-sm: 10px; --ctl-pad-x-md: 12px;
+  --grain-opacity: .018;
+  --card-r: 14px;
+}
+body { -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
+
+/* panels: a card, not a bordered strip */
+.cx-panel-head { background: transparent; border-bottom: var(--bw) solid var(--line); padding: var(--sp-3) var(--sp-7); }
+.cx-panel-title { font-size: var(--fs-4); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -.01em; }
+.cx-panel-title::before { display: none; }
+.cx-panel-status { color: var(--muted); }
+.cx-panel-body { padding: var(--sp-7); gap: var(--sp-6); }
+
+/* buttons: soft fill, no outline; the one primary is solid */
+.cx-btn { background: var(--elev-2); border-color: transparent; font-weight: var(--fw-medium); }
+.cx-btn:hover:not(:disabled) { background: var(--hover); border-color: transparent; }
+.cx-btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: var(--fw-semibold); box-shadow: none; }
+.cx-btn-primary:hover:not(:disabled) { background: var(--accent-hi); border-color: transparent; }
+.cx-btn-ghost { background: transparent; }
+.cx-btn-ghost:hover:not(:disabled) { background: var(--hover); }
+.cx-btn.cx-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-hi); }
+.cx-btn-danger { border-color: transparent; background: color-mix(in srgb, var(--danger) 12%, var(--elev-2)); }
+.cx-btn-render { border-color: transparent; font-weight: var(--fw-semibold); }
+.cx-btn-menu { background: transparent; }
+.cx-btn-menu:hover:not(:disabled) { background: var(--hover); }
+
+/* fields: filled, borderless until focused */
+.cx-input, .cx-textarea, .cx-select { border-color: transparent; background: var(--elev-2); }
+.cx-input:hover:not(:disabled), .cx-textarea:hover:not(:disabled), .cx-select:hover:not(:disabled) { border-color: var(--line-2); }
+.cx-step-btn { border-color: transparent; }
+.cx-filter-list { border-color: var(--line); border-radius: var(--r-4); }
+
+/* hairlines are quieter, rows roomier */
+.cx-segmented { border-color: transparent; background: var(--elev-2); border-radius: var(--r-4); padding: 2px; }
+.cx-segmented .cx-segment { border-radius: var(--r-3); }
+
+/* timeline: quiet clips, the selected one speaks */
+:root { --line-hover: color-mix(in srgb, var(--accent) 14%, var(--line)); }
+.cx-nle-clip { border-color: var(--line); border-radius: var(--r-4); background: var(--elev-2); }
+.cx-nle-clip:hover { border-color: var(--line-hover); }
+.cx-nle-clip.cx-on { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--elev-2)); }
+.cx-nle-clip-title { font-weight: var(--fw-medium); }

app/ui/frame.css

@@ -1,12 +1,12 @@
 /* The frame's proportions, as v4 had them: fixed side columns and a fixed-height timeline across the bottom. */
-:root { --media-w: 280px; --properties-w: 340px; --timeline-h: 320px; }
-.fp-main { flex-direction: column; }
-.fp-row { flex: 1 1 auto; flex-direction: row; min-block-size: 0; }
-.fp-row > * { min-inline-size: 0; border-inline-end: var(--bw) solid var(--line); }
+:root { --media-w: 280px; --properties-w: 340px; --timeline-h: 320px; --pad: 10px; --pgap: 10px; }
+.fp-main { flex-direction: column; padding: 0 var(--pad) var(--pad); gap: var(--pgap); }
+.fp-row { flex: 1 1 auto; flex-direction: row; min-block-size: 0; gap: var(--pgap); }
+.fp-row > *, .fp-main > :nth-child(2) { min-inline-size: 0; border: var(--bw) solid var(--line); border-radius: var(--card-r); overflow: hidden; background: var(--elev-1); }
 .fp-row > :first-child { flex: 0 0 var(--media-w); }
 .fp-row > :nth-child(2) { flex: 1 1 auto; }
-.fp-row > :nth-child(3) { flex: 0 0 var(--properties-w); border-inline-end: 0; }
-.fp-main > :nth-child(2) { flex: 0 0 var(--timeline-h); min-block-size: 200px; border-block-start: var(--bw) solid var(--line); }
+.fp-row > :nth-child(3) { flex: 0 0 var(--properties-w); }
+.fp-main > :nth-child(2) { flex: 0 0 var(--timeline-h); min-block-size: 200px; }
 .cx-frame-head { padding-inline: calc(var(--sp-6) + var(--sp-1)); }
 .cx-frame-head > .cx-toolbar { gap: calc(var(--sp-6) + var(--sp-3)); }
 /* A zone body is a scroller of rows: they keep their height instead of squashing, and a tab strip spans the zone. */
@@ -38,9 +38,9 @@
 .fp-split { position: absolute; z-index: 20; background: transparent; touch-action: none; }
 .fp-split:hover { background: var(--accent, var(--line)); opacity: .5; }
 .fp-split-left, .fp-split-right { top: 0; bottom: 0; inline-size: 7px; cursor: col-resize; }
-.fp-split-left { left: calc(var(--media-w) - 3px); }
-.fp-split-right { right: calc(var(--properties-w) - 3px); }
-.fp-split-bottom { left: 0; right: 0; block-size: 7px; bottom: calc(var(--timeline-h) - 3px); cursor: row-resize; }
+.fp-split-left { left: calc(var(--pad) + var(--media-w) + var(--pgap) / 2 - 3.5px); }
+.fp-split-right { right: calc(var(--pad) + var(--properties-w) + var(--pgap) / 2 - 3.5px); }
+.fp-split-bottom { left: 0; right: 0; block-size: 7px; bottom: calc(var(--pad) + var(--timeline-h) + var(--pgap) / 2 - 3.5px); cursor: row-resize; }
 :root[data-ui-mode="simple"] .fp-split { display: none; }
 
 /* Dock: a hidden zone leaves the row (and the splitter beside it); Simple mode ignores the dock. */