/* CHAIN — Studio Chain design system. Source of truth: docs/design/handover/Studio Chain.dc.html + BUILD-PLAN-CHAIN.md. Supersedes bench.css entirely as Studio's visual layer — Bench is a stale, voided design. Every value below is lifted from the approved design (§4 of BUILD-PLAN-CHAIN.md). Class prefix cn-. */ @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:200; font-display:swap; src:url('../assets/fonts/urbanist-200.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/urbanist-300.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/urbanist-400.woff2') format('woff2'); } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/urbanist-500.woff2') format('woff2'); } :root{ /* ── ground (byte-identical to Bench's — confirmed §4.1) ──────────────── */ --cn-page: #070D0E; --cn-shell: radial-gradient(80% 60% at 16% 90%, #16262A 0%, #0E1719 44%, #0B1214 100%); --cn-well: #08100F; /* ── ink ────────────────────────────────────────────────────────────── */ --cn-ink: #EEF2F1; --cn-ink-on-amber: #1A0D03; --cn-ink-on-knob: #0F1A1C; --cn-ink-on-white: #0B1214; /* ── amber / lime (unchanged from Bench) ──────────────────────────────── */ --cn-amber: #E8863A; /* THE LIME KILL. studio.html alone references var(--lime) 110 times — the onboarding tour's "STEP n OF 8" and Next button, the CLIP readout, the hero eyebrow, the cine/full-frame buttons, the processing spinner. chain.css re-tokened everything that reads --cn-*, but --lime was never remapped, so all 110 kept rendering in the retired #E7FE55 while the rest of the app moved to amber. That is the "old branding" that keeps showing up in screenshots. Remapped here rather than editing 110 call sites, so it cannot drift back. Safe for mono/print/restore: desktop-tokens.css records that those three reference --lime exactly zero times (they carry --safe), so this reaches only the lime-family pages. */ --lime: var(--cn-amber); --lime-ink: var(--cn-amber); --cn-amber-hi: #F5A44E; --cn-amber-glow: 0 0 34px -12px rgba(232,134,58,0.8); /* --cn-lime was a literal, un-rebranded lime green (#C6E848) still wired into filmstrip active-borders, the cached-CTA dot, histogram peak values, and every -chain.css bridge file's eyebrow/status dots — al flagged it as off-brand. Re-pointing it at amber here fixes every one of those call sites at once, the same way --lime already does above. */ --cn-lime: var(--cn-amber); --cn-lime-glow: 0 0 8px var(--cn-amber); /* ── the chain-gradient endpoints (§4.2) — every module/stage accent is mix(--cn-grad-a, --cn-grad-b, t) where t = position in the 01-23 chain ── */ --cn-grad-a: #B9C4C2; --cn-grad-b: #E8863A; /* ── surfaces ───────────────────────────────────────────────────────── */ --cn-surf: rgba(238,242,241,0.05); --cn-surf-off: rgba(238,242,241,0.028); --cn-surf-btn: rgba(238,242,241,0.08); --cn-surf-track: rgba(238,242,241,0.14); /* ── borders ────────────────────────────────────────────────────────── */ --cn-line-off: rgba(238,242,241,0.07); --cn-line-head: rgba(238,242,241,0.09); --cn-line-div: rgba(238,242,241,0.10); --cn-line: rgba(238,242,241,0.11); --cn-line-2: rgba(238,242,241,0.12); --cn-line-btn: rgba(238,242,241,0.14); --cn-line-chip: rgba(238,242,241,0.20); --cn-line-check: rgba(238,242,241,0.28); --cn-line-knob: rgba(238,242,241,0.30); --cn-line-marks: rgba(255,255,255,0.35); /* ── ink alpha ladder ───────────────────────────────────────────────── */ --cn-t-16: rgba(238,242,241,0.16); --cn-t-22: rgba(238,242,241,0.22); --cn-t-30: rgba(238,242,241,0.30); --cn-t-35: rgba(238,242,241,0.35); --cn-t-40: rgba(238,242,241,0.40); --cn-t-42: rgba(238,242,241,0.42); --cn-t-45: rgba(238,242,241,0.45); --cn-t-50: rgba(238,242,241,0.50); --cn-t-55: rgba(238,242,241,0.55); --cn-t-60: rgba(238,242,241,0.60); --cn-t-62: rgba(238,242,241,0.62); --cn-t-68: rgba(238,242,241,0.68); --cn-t-70: rgba(238,242,241,0.70); --cn-t-72: rgba(238,242,241,0.72); --cn-t-75: rgba(238,242,241,0.75); --cn-t-80: rgba(238,242,241,0.80); --cn-t-85: rgba(238,242,241,0.85); --cn-t-90: rgba(238,242,241,0.90); --cn-t-92: rgba(238,242,241,0.92); --cn-t-12: rgba(238,242,241,0.12); /* ── hover ladder ───────────────────────────────────────────────────── */ --cn-hov-08: rgba(238,242,241,0.08); --cn-hov-10: rgba(238,242,241,0.10); --cn-hov-12: rgba(238,242,241,0.12); --cn-hov-14: rgba(238,242,241,0.14); --cn-hov-16: rgba(238,242,241,0.16); --cn-hov-18: rgba(238,242,241,0.18); --cn-hov-20: rgba(238,242,241,0.20); /* ── type ───────────────────────────────────────────────────────────── */ --cn-font: 'Urbanist', system-ui, sans-serif; --cn-w-thin: 200; --cn-w-light: 300; --cn-w-reg: 400; --cn-w-med: 500; --cn-fs-7: 7px; --cn-ls-22: 0.22em; --cn-fs-75: 7.5px; --cn-ls-14: 0.14em; --cn-fs-8: 8px; --cn-ls-18: 0.18em; --cn-fs-85: 8.5px; --cn-ls-24: 0.24em; --cn-fs-9: 9px; --cn-ls-20: 0.20em; --cn-fs-95: 9.5px; --cn-ls-16: 0.16em; --cn-fs-10: 10px; --cn-ls-10: 0.10em; --cn-fs-105: 10.5px; --cn-ls-12: 0.12em; --cn-fs-11: 11px; --cn-ls-06: 0.06em; --cn-fs-115: 11.5px; --cn-fs-12: 12px; --cn-fs-125: 12.5px; --cn-fs-13: 13px; --cn-fs-15: 15px; --cn-fs-16: 16px; --cn-ls-n2: -0.02em; --cn-fs-21: 21px; --cn-ls-n3: -0.03em; --cn-fs-30: 30px; --cn-ls-n35: -0.035em; /* ── radius ─────────────────────────────────────────────────────────── */ --cn-r-5: 5px; --cn-r-7: 7px; --cn-r-8: 8px; --cn-r-9: 9px; --cn-r-10: 10px; --cn-r-11: 11px; --cn-r-12: 12px; --cn-r-13: 13px; --cn-r-14: 14px; --cn-r-15: 15px; --cn-r-16: 16px; --cn-r-18: 18px; --cn-r-pill: 999px; /* ── layout (§4.3) ──────────────────────────────────────────────────── */ --cn-bar-h: 62px; --cn-bar-pad: 18px; --cn-bar-gap: 16px; --cn-body-pad: 12px; --cn-body-gap: 12px; --cn-rail-w: 58px; /* LEFTPANEL.md §2 — reverted from the interim 78px, back to the spec's own number */ --cn-col-w: 366px; --cn-col-gap: 10px; --cn-vtool-h: 40px; --cn-exif-h: 34px; --cn-mod-gap: 6px; --cn-dial: 104px; --cn-hist-h: 44px; /* ── motion / disabled / focus — carried forward from Bench verbatim (decision #27) ── */ --cn-ease: cubic-bezier(0.22, 1, 0.36, 1); --cn-t-state: 180ms; --cn-t-needle: 70ms; /* was 260ms — al: dial needle visibly lagged the tick-strip during a live drag (wireChainSliderDrag's liveUpdate already rewrites #cnDialAnchorParent's innerHTML on every single pointermove, so the JS-side value/label were already instant — the whole "perceptible lag" was this CSS transition re-animating the needle's rotate() on every one of those rewrites). Kept non-zero (not 0ms) so chainDialClick's +/- stepper taps still read as a deliberate small nudge rather than a hard jump cut; 70ms is fast enough to feel like direct-manipulation during drag while still visible. */ --cn-disabled-alpha: 0.35; --cn-focus-ring: 2px solid rgba(232,134,58,0.6); --cn-focus-offset: 2px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── press/release choreography (shared by every clickable control) ───── One coherent press → release motion instead of an abrupt on/off state change: the same duration/easing token (--cn-t-state / --cn-ease) drives both directions, so pressing down and springing back read as a single gesture rather than two disconnected snaps. transform+filter opt into the transition here; each control's own :active rule (below, alongside its base styles) supplies the scale/brightness/background delta. */ .cn-cmdbtn, .cn-action, .cn-chip, .cn-cursor, .cn-mod-reset, .cn-picker-arrow, .cn-picker-val-btn, .cn-swatch{ transition: transform var(--cn-t-state) var(--cn-ease), filter var(--cn-t-state) var(--cn-ease), background var(--cn-t-state) var(--cn-ease), background-color var(--cn-t-state) var(--cn-ease), border-color var(--cn-t-state) var(--cn-ease); } .cn-cmdbtn:active, .cn-action:active, .cn-chip:active, .cn-cursor:active, .cn-picker-arrow:active, .cn-picker-val-btn:active, .cn-swatch:active{ transform: scale(0.94); filter: brightness(0.90); } /* al: "I want the animation removed" — .cn-switch AND .cn-checkrow (the checkbox-style toggle, e.g. Zones' "False colour") are both intentionally excluded from the shared transition rule above and carry none of their own. They flip state instantly, full stop; no press-scale, no colour fade, no knob slide, no checkmark fade-in. */ .cn-cmdbtn[disabled]:active, .cn-action[disabled]:active, .cn-chip[disabled]:active, .cn-cursor[disabled]:active, .cn-picker-arrow[disabled]:active, .cn-picker-val-btn[disabled]:active{ transform: none; filter: none; } /* .cn-mod-reset already animates a hover rotate() — its :active combines the press scale with that same rotation instead of overwriting it. */ .cn-mod-reset:active{ filter: brightness(0.90); } .cn-mod-reset:hover:active{ transform: rotate(-40deg) scale(0.90); } /* ══════════════════════════════════════════════════════════════════════ SHELL ══════════════════════════════════════════════════════════════════════ */ html.cn-app, html.cn-app body{ margin:0; padding:0; height:100%; background:var(--cn-page); overflow:hidden; } html.cn-app body{ font-family:var(--cn-font); -webkit-font-smoothing:antialiased; } html.cn-app *{ box-sizing:border-box; } html.cn-app a{ color:var(--cn-amber); text-decoration:none; } html.cn-app a:hover{ color:var(--cn-amber-hi); } html.cn-app :focus-visible{ outline:var(--cn-focus-ring); outline-offset:var(--cn-focus-offset); } /* Same "hide, never delete" treatment BUILD-PLAN.md §6.2 established for Bench, applied twice over here: the pre-Bench 19-stage card system AND Bench's own bn-* shell are both dead UI now, kept in the DOM because both still carry live ⌘K/tour anchors and side-effect-only functions (bindStageCard, initVolSliders, mountFilmBenchBody, renderBenchStack, syncGroundLine, etc). Chain hides both layers the same way Bench hid the original one. */ .nav{ display:none !important; } .preview-assetbar, .preview-head, .pv-ground{ display:none !important; } .preview-col{ display:none !important; } .cn-right > .studio{ flex:none; height:0; overflow:hidden; } /* Bench's own shell, now itself demolished-but-kept-hidden the same way it treated the original. */ .bn-bar, .bn-body{ display:none !important; } .cn-shell{ position:relative; display:flex; flex-direction:column; width:100%; height:100dvh; overflow:hidden; background:var(--cn-shell); color:var(--cn-ink); font-family:var(--cn-font); -webkit-font-smoothing:antialiased; animation:cnIn .7s var(--cn-ease) both; } .cn-grain{ position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation:cnGrain 8s steps(3) infinite; } @keyframes cnIn { from{opacity:0; filter:blur(10px)} to{opacity:1; filter:blur(0)} } @keyframes cnGrain{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(0,0)} } @keyframes cnPulse{ 0%,100%{opacity:1} 50%{opacity:.25} } ::-webkit-scrollbar{ width:5px; } ::-webkit-scrollbar-thumb{ background:rgba(238,242,241,0.16); border-radius:3px; } .cn-bar{ position:relative; flex:none; height:var(--cn-bar-h); display:flex; align-items:center; gap:var(--cn-bar-gap); padding:0 var(--cn-bar-pad); border-bottom:1px solid var(--cn-line-head); } .cn-bar .sp{ flex:1; } /* The bar had no shrink plan at all: every child was intrinsically sized, .sp collapsed to 0 and the overflow simply ran off the right edge — which is where the Render CTA lives, so on a narrower window the app's primary action was invisible with no scrollbar or hint that anything had been cut. Measured at 1121px: content wanted 1133px, and #cnRenderBtn sat at x=1043..1133. Priority under pressure, in order: the CTA and the command buttons are the tools, so they never shrink; the room links are navigation to OTHER pages, so they give way first (and can scroll if it ever comes to that); the wordmark is branding and yields before the tools do. */ .cn-bar{ overflow:hidden; } .cn-bar .cn-cta, .cn-bar .cn-cmdgrp, .cn-bar .cn-vrule{ flex:0 0 auto; } .cn-bar .cn-nav{ min-width:0; overflow-x:auto; scrollbar-width:none; } .cn-bar .cn-nav::-webkit-scrollbar{ display:none; } .cn-bar .cn-wordmark{ min-width:0; } /* Tighten before anything has to be clipped — the gap and side padding alone give back ~45px, which covers the ordinary laptop widths where the overflow showed up. */ @media (max-width: 1280px){ .cn-bar{ gap:9px; padding:0 12px; } .cn-bar .cn-nav{ gap:2px; } } .cn-body{ position:relative; flex:1; min-height:0; display:flex; gap:var(--cn-body-gap); padding:var(--cn-body-pad); } .cn-rail{ flex:none; width:var(--cn-rail-w); display:flex; flex-direction:column; gap:6px; min-height:0; } .cn-left { flex:none; width:var(--cn-col-w); min-height:0; display:flex; flex-direction:column; gap:var(--cn-col-gap); } .cn-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--cn-col-gap); } .cn-vtools{ flex:none; height:var(--cn-vtool-h); display:flex; align-items:center; gap:6px; padding:0 12px; border-radius:var(--cn-r-14); background:var(--cn-surf); border:1px solid var(--cn-line); } .cn-vtools .sp{ flex:1; } /* ══════════════════════════════════════════════════════════════════════ COMPONENT LAYER ══════════════════════════════════════════════════════════════════════ */ /* ── wordmark ─────────────────────────────────────────────────────────── */ .cn-wordmark{ font-size:var(--cn-fs-12); font-weight:var(--cn-w-med); letter-spacing:var(--cn-ls-18); padding-right:4px; display:flex; align-items:center; } .cn-wordmark i{ color:var(--cn-amber); font-style:normal; } .cn-wordmark img{ height:22px; width:auto; display:block; } /* ── command-bar button ───────────────────────────────────────────────── */ .cn-cmdbtn{ display:flex; flex-direction:column; align-items:center; gap:5px; width:52px; padding:6px 0; border-radius:var(--cn-r-10); background:transparent; border:0; cursor:pointer; color:inherit; font-family:inherit; } .cn-cmdbtn:hover{ background:var(--cn-hov-10); } .cn-cmdbtn svg{ width:19px; height:19px; fill:none; stroke:var(--cn-ink); stroke-linecap:round; stroke-linejoin:round; } .cn-cmdbtn span{ font-size:var(--cn-fs-75); letter-spacing:var(--cn-ls-14); color:var(--cn-t-55); } .cn-cmdbtn[aria-pressed="true"]{ background:var(--cn-hov-14); } .cn-cmdbtn[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } .cn-cmdbtn[disabled]:hover{ background:transparent; } a.cn-cmdbtn{ text-decoration:none; } .cn-cmdbtn.icon-only{ width:32px; padding:7px 0; } .cn-cmdgrp{ display:flex; align-items:center; gap:4px; } .cn-vrule{ width:1px; height:28px; background:var(--cn-line-div); flex:none; } /* ── status pill ──────────────────────────────────────────────────────── */ .cn-status{ display:flex; align-items:center; gap:9px; height:27px; padding:0 13px; border-radius:var(--cn-r-pill); background:var(--cn-hov-08); border:1px solid var(--cn-line-2); font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-18); color:var(--cn-t-70); } .cn-status i{ width:5px; height:5px; border-radius:50%; display:block; background:var(--cn-lime); box-shadow:var(--cn-lime-glow); animation:cnPulse 2.6s ease-in-out infinite; } /* ── nav links + primary CTA ──────────────────────────────────────────── */ .cn-nav{ display:flex; gap:4px; font-size:var(--cn-fs-95); letter-spacing:var(--cn-ls-20); color:var(--cn-t-45); } .cn-nav a{ color:inherit; text-decoration:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--cn-r-10); } .cn-nav a svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; } .cn-nav a:hover{ color:var(--cn-ink); background:var(--cn-hov-10); } /* QC sweep: was --cn-ink (white). Four page CSS files (print/credits/custom/about) each overrode this to --cn-amber while mono/gallery/studio kept white, so the "you are here" marker changed colour depending which room you stood in. Amber was the majority and is the stronger signal, so it wins here and the four local copies are deleted. */ /* Icon suite (ICON-SUITE.md): the room word is gone from the row, so "you are here" needs a background pill (not just an ink colour swap) to survive the icon-only change. */ .cn-nav a[aria-current="page"]{ color:var(--cn-amber); background:color-mix(in srgb, var(--cn-amber) 16%, transparent); } .cn-cta{ display:flex; align-items:center; gap:8px; height:31px; padding:0 18px; border:0; border-radius:var(--cn-r-pill); background:var(--cn-amber); color:var(--cn-ink-on-amber); font-family:inherit; font-size:var(--cn-fs-115); font-weight:var(--cn-w-med); box-shadow:var(--cn-amber-glow); cursor:pointer; transition:background var(--cn-t-fast, .14s) ease, box-shadow var(--cn-t-fast, .14s) ease, opacity var(--cn-t-fast, .14s) ease; } .cn-cta:hover:not(:disabled){ background:var(--cn-amber-hi); } .cn-cta:disabled{ opacity:.34; cursor:default; box-shadow:none; } /* Render CTA state dot — al: "render button needs to be visually connected to a function". The tier mirrors the legacy #flattenBtn's own perf classes (studio.html updatePerfIndicator): how long the last full-resolution pipeline pass took. Dark ink on amber, not the usual lime, because the pill's own background IS the accent — a coloured dot on a coloured pill needs contrast against the pill, not against the page. */ .cn-cta-dot{ width:6px; height:6px; border-radius:50%; display:block; flex:0 0 auto; background:color-mix(in srgb, var(--cn-ink-on-amber) 42%, transparent); } .cn-cta.perf-warn .cn-cta-dot, .cn-cta.perf-hot .cn-cta-dot{ background:var(--cn-ink-on-amber); animation:cnPulse 1.8s ease-in-out infinite; } /* A render checkpoint is live and still valid for the current chain — the button has nothing left to do, so it stops advertising itself: flat, quiet, no glow. */ .cn-cta.is-cached{ background:var(--cn-hov-08); color:var(--cn-t-70); border:1px solid var(--cn-line-2); box-shadow:none; } .cn-cta.is-cached:hover:not(:disabled){ background:var(--cn-hov-12, var(--cn-hov-08)); } .cn-cta.is-cached .cn-cta-dot{ background:var(--cn-lime); box-shadow:var(--cn-lime-glow); animation:none; } .cn-cta.is-busy{ pointer-events:none; } .cn-cta.is-busy .cn-cta-dot{ border-radius:50%; border:1.5px solid color-mix(in srgb, var(--cn-ink-on-amber) 30%, transparent); border-top-color:var(--cn-ink-on-amber); background:none; width:11px; height:11px; animation:cnSpin .7s linear infinite; } @keyframes cnSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .cn-cta-dot{ animation:none !important; } } /* ── card / panel base ─────────────────────────────────────────────────── */ .cn-card{ background:var(--cn-surf); border:1px solid var(--cn-line); } .cn-panel{ flex:none; border-radius:var(--cn-r-16); padding:12px 14px 11px; background:var(--cn-surf); border:1px solid var(--cn-line); } /* ── histogram panel (new — always visible above the stage title row) ───── */ .cn-hist-head{ display:flex; align-items:baseline; justify-content:space-between; } .cn-hist-head .l{ font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-24); color:var(--cn-t-60); } .cn-hist-head .r{ font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-14); color:var(--cn-t-60); } .cn-hist-head .r b{ color:var(--cn-lime); font-weight:inherit; } .cn-hist-bars{ display:flex; align-items:flex-end; height:var(--cn-hist-h); margin-top:9px; } .cn-hist-bars span{ flex:1; margin:0 0.5px; border-radius:1px 1px 0 0; background:var(--cn-t-42); } .cn-hist-zonestrip{ display:flex; margin-top:6px; } .cn-hist-zonestrip span{ flex:1; height:5px; display:block; } /* ── tick strip (one primitive, two configurations, index-positioned §5.9) ── */ .cn-ticks{ display:flex; align-items:flex-end; } /* :not(.cn-marker) — the slider's marker is a living inside this same container, so this base rule was giving it flex:1 and margin:0 1.5px. The margin is the one that shows: it pushed the 2px stem 1.5px right of the value it points at, on every slider on every page. Same trap as the .cn-ticks--slider span rules below; excluded in both places. */ .cn-ticks span:not(.cn-marker){ flex:1; margin:0 1.5px; border-radius:1px; background:var(--cn-t-16); } /* ── the ruler (site-standard slider, ported from Print Room) ────────────────────────────── al ruled Print Room's slider the better control and made it the standard everywhere. This is that look ported onto Chain's OWN markup and wiring — deliberately CSS-only, changing not a line of JS, so every behaviour the Chain slider already has survives intact: stepper nudges, the elastic drag curve, detents every 25, click-to-type, the colour ramps (Kelvin/LGG/film couplings), master-dial tracking, isDragging's proxy-render path, and pushUndo once per drag. Swapping in Print's own component wholesale would have cost all of that. Four things make Print's read as an instrument rather than a bar chart: 1 · HAIRLINES, not blocks. Each tick is 1px of ink with air around it. Drawn as a centred gradient inside the existing flex cell rather than by narrowing the cell, because the marker is positioned at (i + 0.5) * 100% / N — the cell centre. Narrowing the cells would desynchronise the marker from the ticks it points at. 2 · A BASELINE. A rule under the ticks. Forty-odd hairlines with nothing beneath them read as a barcode; one line under them and the same hairlines read as a graduated scale. 3 · MAJOR GRADUATIONS every 6th, taller and brighter, so the eye can count without counting. 4 · A PENNANT on a glowing stem, in amber, so the current value is findable at a glance in a column of identical hairlines. */ /* margin-top clears the pennant (7px) that sits above the track, plus a little air, so the marker never crowds the value box / steppers on the row above. */ /* 0 · THE RULER READS 0 / 25 / 50 / 75 / 100. al: "sliders are still not in the middle. 0 25 50 75 100 simples." The marker was already centred; the ruler was not. .cn-ticks is a flex row of N equal cells with the hairline drawn down the CENTRE of each cell, so hairline i sits at (i+0.5)/N — which can never be 0% or 100%, and at the old N=34 could never be 50% either (it wants index 16.5). The marker pointed at a middle the track had no mark for. This stretches the strip by exactly half a cell at each end and pulls it back left by the same amount, so hairline i lands on i/(N-1): tick 0 on 0%, tick 48 on 100%, tick 24 on exactly 50%. Nothing but transparent cell padding overflows — the hairlines are what move. Keep the two 48s in step with CHAIN_SLIDER_TICKS (49) in studio.html: they are N-1. */ .cn-ticks--slider{ position:relative; height:30px; margin-top:14px; width:calc(100% * 49 / 48); margin-left:calc(-50% / 48); } /* :not(.cn-marker) on EVERY tick rule below. The marker is itself a inside the strip, so these tick rules were matching it and winning on specificity (0-1-1 beats .cn-marker's 0-1-0). Three consequences, all live until now and all contributing to "the middle is not the middle": · margin:0 killed .cn-marker's own margin-left:-1px, so the 2px stem hung off the RIGHT of its left edge instead of straddling it — every marker in the app sat 1px right of its true position, permanently. Measured: marker centre 265.500px vs centre tick 264.535px. · height:14px overrode the stem's top:0/bottom:1px, so it never spanned the track. · the hairline gradient painted over the stem's amber. Measured after: marker centre 264.504px against an expected 264.504px. */ .cn-ticks--slider span:not(.cn-marker){ --tick: var(--cn-t-24, rgba(255,255,255,.24)); height:14px; margin:0; border-radius:0; background:linear-gradient(to right, transparent calc(50% - .5px), var(--tick) calc(50% - .5px), var(--tick) calc(50% + .5px), transparent calc(50% + .5px)); transition:height var(--cn-t-state, .16s) var(--cn-ease, ease), background .16s var(--cn-ease, ease); } /* Majors every 12th tick — children 1/13/25/37/49, i.e. indices 0/12/24/36/48 — which after the stretch above are exactly 0%, 25%, 50%, 75%, 100%. This was 6n+1 at N=34, giving 0/6/12/18/24/30: six majors that stopped short of both ends and straddled the middle. */ .cn-ticks--slider span:not(.cn-marker):nth-child(12n+1){ --tick: var(--cn-t-46, rgba(255,255,255,.46)); height:21px } .cn-ticks--slider span:not(.cn-marker).on{ --tick: var(--cn-t-78, rgba(255,255,255,.78)); height:17px } .cn-ticks--slider span:not(.cn-marker):nth-child(12n+1).on{ --tick: var(--cn-t-90, rgba(255,255,255,.9)); height:23px } /* THE HOME GRADUATION — the tick the value is measured FROM. This used to be :nth-child(25), the geometric centre, on the reasoning that "the centre tick is the one the eye checks a symmetric slider against". True — but only 95 of the app's 277 sliders ARE symmetric. On the other 182 the tallest, brightest mark on the ruler pointed at a value that means nothing: measured, "Vignette midpoint" (0..100) drew the identical 26px centre graduation as "Exposure" (±5 EV), which is a large part of why every slider read the same as every other. `home` is emitted by chainTickStripHTML at the control's own default (zeroAt), which is exactly where the `on` fill already grows from, so the ruler now states its own polarity: a bipolar control is tall in the middle and fills outward, a unipolar one is tall at its end and fills across. Nothing here is hard-coded to an index — retune a range in the manifest and the graduation follows it. */ .cn-ticks--slider span:not(.cn-marker).home{ --tick: var(--cn-t-60, rgba(255,255,255,.6)); height:25px } .cn-ticks--slider span:not(.cn-marker).home.on{ --tick: var(--cn-t-90, rgba(255,255,255,.9)); height:26px } .cn-ticks--slider.off span:not(.cn-marker){ --tick: var(--cn-t-12) } /* 2 · the baseline. Brightens while the ruler is in use, same as Print's. Inset by half a cell each side so it spans the real 0%..100% of the row, not the stretched box: half a cell of a 49-cell strip is 100%/98 of that strip's own width. */ .cn-ticks--slider::after{ content:''; position:absolute; left:calc(100% / 98); right:calc(100% / 98); bottom:0; height:1px; background:var(--cn-t-14, rgba(255,255,255,.14)); pointer-events:none; transition:background var(--cn-t-state, .16s) var(--cn-ease, ease); } .cn-ticks--slider:hover::after{ background:var(--cn-t-30, rgba(255,255,255,.3)); } .cn-ticks--slider:hover span:not(.cn-marker){ height:16px } .cn-ticks--slider:hover span:not(.cn-marker):nth-child(12n+1){ height:23px } .cn-ticks--slider:hover span:not(.cn-marker).home{ height:27px } /* Full opacity on the hue/ramp variant: the colour now arrives as a 1px hairline rather than a solid block, and a hairline dimmed to .85 reads as muddy rather than subtle. The thinness is what makes it a hint of colour — it doesn't need dimming on top. */ .cn-ticks--hue span:not(.cn-marker){ opacity:1 } .cn-hue-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:2px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); } /* pointer-events:auto (not none) — the marker sits above the track's own box (top:-10px), so a pointerdown aimed right at the visible triangle lands outside .cn-ticks--slider's rect and, with events disabled here, had nowhere delegated to bubble from: wireChainSliderDrag's pointerdown listener (studio.html) never saw it. The marker is a child of the [data-cn-slider] track (see chainSliderHTML), so re-enabling events on it still resolves correctly through e.target.closest('[data-cn-slider]') — grabbing the marker now works exactly like grabbing anywhere else on the track. */ /* 4 · the marker: a 2px stem carrying a pennant, both amber, both glowing — Print Room's own treatment. The bare lime triangle it replaces floated above the ruler with nothing tying it to a graduation, so at a glance you could see roughly where the value was but not which tick it actually sat on. The stem is what makes it readable; the glow is what makes it findable. */ /* top:0 — NOT a negative offset. The stem spans the track's own height and the pennant sits in the strip's margin-top above it, so the marker's total footprint is (track height + 7px) and nothing reaches into the value/stepper row above. An earlier top:-9px stacked the pennant's own 7px on top of a 9px overhang and bled ~16px into the row above it. */ .cn-marker{ position:absolute; top:0; bottom:1px; width:2px; margin-left:-1px; background:var(--cn-amber); border-radius:1px; box-shadow:0 0 14px 2px color-mix(in srgb, var(--cn-amber) 50%, transparent); pointer-events:auto; cursor:ew-resize; } .cn-marker i{ display:block; width:0; height:0; position:absolute; left:50%; margin-left:-5px; bottom:100%; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:0; border-top:7px solid var(--cn-amber); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--cn-amber) 55%, transparent)); } /* ── stage rail (58px, 5-up vertical — replaces Bench's 4-up horizontal tiles) ── */ .cn-stage{ flex:1; min-height:0; border-radius:var(--cn-r-15); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:11px 0 12px; border:1px solid var(--cn-line); font-family:inherit; transition:background var(--cn-t-state) var(--cn-ease), border-color var(--cn-t-state) var(--cn-ease); } /* Every tile's own background IS --wash (see the .cn-stage rule below), climbing from a near- neutral 10% tint to a near-solid 54% amber across the five tiles — but this text colour was a flat low-opacity white, so it read fine on tile 01's dark wash and nearly vanished on tile 05's bright one. Blending toward the same dark ink the fully-selected tile already uses, scaled by that tile's own --wash strength, keeps contrast roughly constant down the whole rail. */ /* --stage-ink is picked per tile in chainRailHTML by MEASURED contrast against that tile's own finished background, and every one of the three rows now uses it at full strength. What it replaces was a blend between the dark ink and a low-alpha white, weighted by the tile's wash alpha — which meant the text tracked toward mid-grey at exactly the point the background was also mid-brown. Measured against the composited backgrounds, all five tiles failed WCAG AA and tile 04 came out at 1.12:1 — text and background the same luminance, i.e. invisible. That is what al was seeing: "you cannot see the titles and you cannot see the icons". */ /* LEFTPANEL.md §2 table, applied exactly: index 9px/.14em/.75, count 8px/.10em/.8. */ .cn-stage-num{ font-size:9px; letter-spacing:var(--cn-ls-14); color:var(--stage-ink, var(--cn-t-40)); opacity:.75; } .cn-stage-title{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:var(--cn-fs-105); letter-spacing:0.26em; color:var(--stage-ink, var(--cn-t-70)); } .cn-stage-count{ font-size:8px; letter-spacing:var(--cn-ls-10); color:var(--stage-ink, var(--cn-t-42)); opacity:.8; } /* The icon is nested inside .cn-stage-title and inherits currentColor via stroke, so it moves with the ink automatically — it was invisible for the same reason the numbers were. */ .cn-stage-title svg{ stroke:currentColor; } /* Rail tile name is always visible (not a rollover-only reveal). LEFTPANEL.md §2 table pins this back down to 6px/height:8px — the rail reverted to 58px (was a 78px interim widening, also reverted), so the label goes back to the original hover-design's own box constraints, just permanently shown instead of fading in. Fixed width (not auto) so a long name like "OUTPUT" ellipsizes instead of stretching the 58px tile — the spec's own "nowrap; ellipsis" only means something against a real width cap. */ .cn-stage-mid{ display:flex; flex-direction:column; align-items:center; gap:2px; } .cn-stage-label{ display:block; width:44px; height:8px; line-height:8px; overflow:hidden; font-size:6px; letter-spacing:.06em; text-transform:uppercase; text-align:center; white-space:nowrap; text-overflow:ellipsis; color:inherit; opacity:.85; } /* --wash (always on, every tile — see chainRailHTML) is the grey→amber progression down the rail; --fill (selected tile only) is a near-opaque amber block, not just a highlighted edge. Both are set inline per-tile off the same stageIndex/4 mix chainModuleTint uses, so a card's own module colour and its rail tile read as the same position in the same gradient. */ .cn-stage{ background:var(--wash, var(--cn-surf)); border-color:var(--tint, var(--cn-line)); } /* Selected is no longer "the only bright tile" — every tile now sits on the real ramp, so the distinction is carried by the extra step to the undimmed colour plus a ring in the tile's own tint, rather than by being the one tile that isn't mud. */ .cn-stage[aria-selected="true"]{ background:var(--fill); border-color:transparent; box-shadow:0 0 0 1px var(--tint), 0 2px 10px -4px rgba(0,0,0,.55); } /* ── stage title row (replaces Bench's group-header row) ─────────────────── */ .cn-stagehead{ flex:none; display:flex; align-items:center; gap:10px; padding:0 4px; } .cn-stagehead .t{ font-size:var(--cn-fs-95); letter-spacing:var(--cn-ls-24); color:var(--cn-ink); } .cn-stagehead .sub{ font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-10); color:var(--cn-t-50); } .cn-stagehead .rule{ flex:1; height:1px; background:var(--cn-line); } .cn-stagehead button{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-14); color:var(--cn-t-50); display:inline-flex; align-items:center; justify-content:center; } .cn-stagehead button:hover{ color:var(--cn-ink); } .cn-stagehead button[aria-pressed="true"]{ color:var(--cn-ink); } /* ── module list + module card ────────────────────────────────────────── */ .cn-modlist{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--cn-mod-gap); padding-right:3px; scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:var(--cn-line-btn) transparent; } .cn-modlist::-webkit-scrollbar{ width:6px } .cn-modlist::-webkit-scrollbar-thumb{ background:var(--cn-line-btn); border-radius:3px } .cn-modlist::-webkit-scrollbar-track{ background:transparent } /* overflow:CLIP, not hidden — and the difference is the whole sticky header below. overflow:hidden makes the card a scroll container, which becomes the nearest scrollport for any position:sticky descendant; the head would then be sticky against a box that never scrolls, i.e. inert. overflow:clip clips identically (the edge bar and the wash still respect the 15px radius) without establishing a scrollport, so .cn-mod-head sticks against .cn-modlist where it belongs. */ .cn-mod{ position:relative; flex:none; border-radius:var(--cn-r-15); overflow:clip; background:var(--cn-surf-off); border:1px solid var(--cn-line-off); box-shadow:inset 0 0 0 999px var(--tint-wash-off, transparent); transition:box-shadow var(--cn-t-state) var(--cn-ease); } .cn-mod.on { background:var(--cn-surf); border-color:var(--cn-line); box-shadow:inset 0 0 0 999px var(--tint-wash-on, transparent); } .cn-mod.on.open { border-color:transparent; } .cn-mod-edge{ position:absolute; left:0; top:0; bottom:0; width:4px; display:block; background:var(--tint, var(--cn-line-off)); opacity:.55; transition:opacity var(--cn-t-state) var(--cn-ease); } /* --tint (and the two wash alphas above) are set inline per-card by chainModCardHTML (BUILD-PLAN-CHAIN.md §4.2's mix() formula, position 0-22 in the 01-23 chain). Previously this grey→amber drift only ever showed as a 2-3px edge bar on .on modules — most modules start OFF, so scrolling the list read as flat grey. Now every card carries a low-alpha background wash of its own tint (--tint-wash-off) regardless of state, the edge bar is always tinted (just dimmer until switched on), and the step number leans toward its tint even when off — so the gradient is legible module by module without competing with the module's own text. */ .cn-mod.on .cn-mod-edge{ opacity:1; } /* STICKY. Measured before this: scrolled 900px into an open module, nothing on screen named the module being edited — the head had simply left the viewport and the rulers below it are, by design, indistinguishable. It now rides the top of the list for as long as its own card is in view, so the module name, its number, its tint and its edit count are never more than a glance away. backdrop-filter rather than an opaque fill because the ground here is the shell's radial gradient, not a flat colour — a fixed hex would band against it at some scroll positions. */ .cn-mod-head{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:11px; padding:10px 12px 10px 14px; background:var(--cn-surf-off); box-shadow:inset 0 0 0 999px var(--tint-wash-off, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); } .cn-mod.on .cn-mod-head{ background:var(--cn-surf); box-shadow:inset 0 0 0 999px var(--tint-wash-on, transparent); } /* Only an open card needs the rule: it is the line the content scrolls under. */ .cn-mod.open > .cn-mod-head{ border-bottom:1px solid var(--cn-line-div); } /* Above the head's background so the tint bar is never painted over while stuck. */ .cn-mod-edge{ z-index:4; } .cn-mod-step{ font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-10); width:16px; color:var(--tint, var(--cn-t-22)); opacity:.75; } /* The edit count — a module's own "n frames worked", carried in the head so a COLLAPSED card still says whether there is anything of yours inside. This is the signal that makes the list scannable: without it, finding your own work meant opening 28 modules in turn. */ .cn-mod-edits{ flex:none; min-width:16px; padding:1px 5px; border-radius:9px; font-size:var(--cn-fs-9); font-variant-numeric:tabular-nums; text-align:center; letter-spacing:var(--cn-ls-06); line-height:1.5; color:var(--cn-amber); background:color-mix(in srgb, var(--cn-amber) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cn-amber) 34%, transparent); } /* Chain shell handover §1: replaces .cn-mod-edits in the row (kept above, unused, in case a denser numeric badge is wanted back later) — a plain dot instead of a numeric badge, freeing row width for the module name. The exact count is still on the title attribute (a real tooltip, not lost, just not spent on always-visible width). */ .cn-mod-dirty{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--cn-amber); box-shadow:0 0 6px 1px color-mix(in srgb, var(--cn-amber) 55%, transparent); } .cn-mod.on .cn-mod-step{ color:var(--tint, var(--cn-grad-b)); opacity:1; } /* Same flush-icon defect as .card-head .name, in the other component. Every .cn-mod-title in Mono carries an inline style="display:flex;..." with no gap, so its 21px glyph sat hard against the first letter of the title on all thirteen module cards. The earlier fix only covered the Print Room's .card-head .name and .panel-category-label; this is the same bug in the component Mono actually uses, and fixing it here covers every room at once. */ .cn-mod-title{ flex:1; min-width:0; font-size:var(--cn-fs-13); color:var(--cn-t-45); cursor:pointer; align-items:center; gap:9px; background:none; border:0; text-align:left; font-family:inherit; } .cn-mod-title > svg{ flex:none; } .cn-mod.on .cn-mod-title{ color:var(--cn-ink); } .cn-mod-state{ font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-12); color:var(--cn-t-50); } .cn-mod.on .cn-mod-state{ color:var(--cn-t-60); } .cn-mod-body{ padding:0 12px 13px 14px; } /* ── hero block (new — leads every open module's content) ────────────────── */ .cn-hero{ border-radius:var(--cn-r-14); padding:13px 14px 12px; background:var(--cn-surf); border:1px solid var(--cn-line-2); } .cn-hero-kicker{ font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-24); color:var(--cn-t-62); } .cn-hero-val{ display:flex; align-items:baseline; gap:8px; margin-top:6px; } .cn-hero-val b{ font-size:var(--cn-fs-30); font-weight:var(--cn-w-thin); letter-spacing:var(--cn-ls-n35); line-height:1.05; color:var(--cn-ink); } .cn-hero-val span{ font-size:var(--cn-fs-12); color:var(--cn-t-72); } .cn-hero-cap{ font-size:var(--cn-fs-11); line-height:1.35; margin-top:7px; color:var(--cn-t-60); } /* ── section header ────────────────────────────────────────────────────── */ .cn-sec{ margin-top:13px; } .cn-sec-head{ display:flex; align-items:center; gap:9px; } .cn-sec-head span{ font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-24); color:var(--cn-t-55); } .cn-sec-head .rule{ flex:1; height:1px; background:var(--cn-line-div); } /* ── per-module reset icon (item 15) ──────────────────────────────────── */ .cn-mod-reset{ display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:0; padding:3px; margin-left:2px; flex:none; border-radius:50%; transition:background-color var(--cn-t-state) var(--cn-ease), transform 0.25s var(--cn-ease); } .cn-mod-reset:hover{ background:var(--cn-surf-track); transform:rotate(-40deg); } .cn-mod-reset svg{ width:12px; height:12px; fill:none; stroke:var(--cn-t-70); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } /* ── Mask-routing step 3 (§3.1/§5.1/§5.2/§5.4) ──────────────────────────────────────────────── 7-hue fixed palette, one CSS custom property per hue, mirrored verbatim from studio.html's MASK_COLOR_PALETTE JS array (search that name) — the two must stay in lockstep since the JS array is what actually assigns colorIndex -> hex for JS-driven bits (dot swatches written via inline style), while these vars let pure-CSS chrome (the rail) reference the same values by var(--cn-mask-N) without round-tripping through an inline style for every property. Chosen to avoid pure red AND the CLIP indicator's own two colours (buildFullClipOverlay in studio.html: highlight blowout rgb(255,20,60), shadow crush rgb(20,140,255)) so a mask rail/dot can never be misread as a clipping warning. */ :root{ --cn-mask-0: #35C9A5; /* teal */ --cn-mask-1: #9B7BF0; /* violet */ --cn-mask-2: #E0B93D; /* gold */ --cn-mask-3: #E866B0; /* magenta */ --cn-mask-4: #4FB6E8; /* sky */ --cn-mask-5: #8CC152; /* sage green */ --cn-mask-6: #6C7FE0; /* indigo */ } /* Track selector — segmented control, sits directly under the tool name (§5.1). Built from the same flex-row-of-buttons idiom .cn-chip already uses (chip strip ~L660), not a new control family. `global` is always first and un-removable (no close affordance rendered on it, ever). */ /* The bar the selector and the mask-strength slider share. Recessed and ruled off top and bottom so it reads as a band the card is currently WORKING IN, not as another row of options — the old version floated bare in the gap under the head, in the same pill idiom as the option chips inside the body, so nothing said "everything below this belongs to Mask 01". */ .cn-trackbar{ display:flex; align-items:center; gap:14px; padding:7px 12px 7px 14px; background:var(--cn-well); border-top:1px solid var(--cn-line-div); border-bottom:1px solid var(--cn-line-div); } .cn-track-selector{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; flex:1; min-width:0; } .cn-track-seg{ display:flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--cn-r-8, 6px); background:transparent; border:1px solid transparent; cursor:pointer; font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-10); color:var(--cn-t-55); transition:background-color var(--cn-t-state) var(--cn-ease), border-color var(--cn-t-state) var(--cn-ease); } .cn-track-seg:hover{ background:var(--cn-surf-btn); color:var(--cn-t-72); } /* The selected segment is the only lit thing in the bar, and it is lit in the MASK'S OWN colour — the same colour as the 3px rail down the card edge and the glyph in the head, so the three agree at a glance about which mask you are editing. */ .cn-track-seg[aria-selected="true"]{ background:var(--cn-surf); color:var(--cn-ink); border-color:color-mix(in srgb, var(--seg-color, var(--cn-line)) 55%, transparent); } .cn-track-seg .dot{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--seg-color, var(--cn-t-45)); } .cn-track-seg .dot.filled{ box-shadow:0 0 0 2px color-mix(in srgb, var(--seg-color, var(--cn-t-45)) 35%, transparent); } .cn-track-seg.overflow-trigger{ color:var(--cn-t-55); } /* Tool-panel affordances when a maskable stage has 1+ routed masks (§5.2). Rail sits INSIDE .cn-mod-edge's 4px band, thinner (3px) and only present while a mask track is active — no rail at all on `global`, per spec ("neutral/no rail on global"). */ .cn-mask-rail{ position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1; background:var(--mask-color); } .cn-mask-glyph{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:14px; height:14px; opacity:.9; } .cn-mask-glyph svg{ width:12px; height:12px; fill:none; stroke:var(--mask-color); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* MASK STRENGTH readout, panel foot (§5.2) — reads/writes the SAME mask.strength the mask tool itself owns (studio.html's maskRegistry, step 4's future plug point), never a per-tool copy. */ .cn-mask-strength{ display:flex; align-items:center; gap:8px; flex:0 1 168px; min-width:118px; } .cn-mask-strength .lbl{ font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-24); color:var(--cn-t-45); flex:none; } .cn-mask-strength input[type="range"]{ flex:1; min-width:44px; accent-color:var(--mask-color); } .cn-mask-strength .val{ font-size:var(--cn-fs-9); color:var(--mask-color); min-width:30px; text-align:right; flex:none; } /* Narrow sidebar: the label is the first thing worth dropping — the slider is beside the segment that names the mask, and its thumb colour already matches. */ @media (max-width: 1180px){ .cn-mask-strength .lbl{ display:none; } } /* Signed value display for a mask track's own numerics (§5.4) — global stays unsigned. Applied via a `.signed` class on whatever element already renders a control's numeric readout. */ .cn-signed-val::before{ content:attr(data-sign); } /* ── chevron ───────────────────────────────────────────────────────────── */ .cn-chev{ display:flex; align-items:center; cursor:pointer; background:none; border:0; padding:0; transition:transform var(--cn-t-state) var(--cn-ease); } .cn-mod.open .cn-chev{ transform:rotate(180deg); } .cn-chev svg{ width:13px; height:13px; fill:none; stroke:var(--cn-t-70); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } /* ── module toggle switch ─────────────────────────────────────────────── */ /* NO TRANSITION ON THE SWITCH. al: "They are animating but not changing... just fix it, remove the animation just make it work." The knob used to slide and the track used to cross-fade. When a press failed to commit (see the one-shot suppression in wireChainDelegation), the animation still ran on the way in and snapped back — so the control looked alive while the module stayed off, which is worse than a dead button: it actively told you it had worked. A switch is a state readout, not a performance. It now moves only when the state moves, instantly, so what you see IS what happened. */ .cn-switch{ width:33px; height:18px; border-radius:var(--cn-r-pill); flex:none; padding:2px; box-sizing:border-box; display:block; position:relative; background:var(--cn-surf-track); border:0; cursor:pointer; } .cn-switch i{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; display:block; background:var(--cn-t-50); } .cn-switch[aria-checked="true"]{ background:var(--tint, var(--cn-grad-b)); } .cn-switch[aria-checked="true"] i{ transform:translateX(15px); background:#FFF7EF; } /* ── section label: small-caps sub-header + hairline divider above a logical group of tool rows in a dense multi-group module (Lenses' 7 groups, etc.) — opted into per-control via manifest.js's `sectionLabel`, see chainToolRowHTML's caller in studio.html. First one in a module (right under the widget/preset controls) gets no extra top gap beyond normal flow; later ones get a bit more breathing room than a plain .cn-tool so the new group reads as a fresh section, not just another row. */ .cn-section-label{ margin-top:20px; padding-top:12px; border-top:1px solid var(--cn-line-div); font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-20); text-transform:uppercase; color:var(--cn-t-55); } .cn-section-label:first-child{ margin-top:11px; padding-top:0; border-top:0; } /* ── collapsible group: a genuinely hide/show sub-section (not just a divider like .cn-section-label above), for a module whose secondary controls should stay out of the way until asked for — e.g. Facelift's Eyes & Lips beneath its primary Selection/Strength/range controls. Collapsed by default (chainGroupOpen, studio.html), toggled via the header button; chevron rotates open like .cn-chev already does for the module card itself. */ .cn-collapsible{ margin-top:20px; padding-top:12px; border-top:1px solid var(--cn-line-div); } .cn-collapsible-head{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-20); text-transform:uppercase; color:var(--cn-t-55); } .cn-collapsible-head:hover{ color:var(--cn-t-90); } .cn-collapsible-chev{ width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--cn-t-state) var(--cn-ease); } .cn-collapsible.open .cn-collapsible-chev{ transform:rotate(180deg); } .cn-collapsible-body{ display:none; } .cn-collapsible.open .cn-collapsible-body{ display:block; } /* ── tool row: 7 control kinds ─────────────────────────────────────────── */ .cn-tool{ margin-top:11px; } .cn-tool-head{ display:flex; align-items:center; gap:9px; } .cn-tool-name{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; font-size:var(--cn-fs-12); cursor:pointer; color:var(--cn-t-90); background:none; border:0; text-align:left; font-family:inherit; } .cn-tool-dot{ width:7px; height:7px; border-radius:50%; flex:none; display:block; } /* Boxed value readout — Print Room's own treatment, and the reason its rows read as instrument fields rather than loose text. tabular-nums so the digits don't jitter as the value changes during a drag. The box is always present (not only while editing) so the control advertises that it IS typeable; .cn-tool-val-input below inherits the same metrics, so swapping the span for the real on click causes no layout shift. */ .cn-tool-val{ font-size:var(--cn-fs-16); font-weight:var(--cn-w-thin); letter-spacing:var(--cn-ls-n2); color:var(--cn-ink); cursor:text; font-variant-numeric:tabular-nums; text-align:right; min-width:52px; padding:2px 7px; border-radius:var(--cn-r-8, 6px); border:1px solid var(--cn-t-16, rgba(255,255,255,.16)); background:var(--cn-t-6, rgba(255,255,255,.06)); transition:border-color var(--cn-t-state, .16s) var(--cn-ease, ease); } .cn-tool-val:hover{ border-color:var(--cn-t-30, rgba(255,255,255,.3)); } /* Metrics deliberately mirror .cn-tool-val above so click-to-type swaps in place with no shift. */ .cn-tool-val-input{ font:inherit; font-size:var(--cn-fs-16); font-weight:var(--cn-w-thin); letter-spacing:var(--cn-ls-n2); color:var(--cn-ink); background:var(--cn-t-6, rgba(255,255,255,.06)); border:1px solid var(--cn-amber); border-radius:var(--cn-r-8, 6px); width:52px; font-variant-numeric:tabular-nums; text-align:right; padding:2px 7px; -moz-appearance:textfield; } .cn-tool-val-input::-webkit-outer-spin-button,.cn-tool-val-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* Was --cn-t-50 at 9.5px: measured 4.0:1 against the panel ground, under AA's 4.5:1 for text this small. --cn-t-65 measures 5.6:1 and still reads as the quiet half of the value pair. */ .cn-tool-unit{ font-size:var(--cn-fs-95); letter-spacing:var(--cn-ls-10); width:26px; color:var(--cn-t-65, rgba(238,242,241,.65)); } /* ── THE EDITED ROW ──────────────────────────────────────────────────────── The one signal a column of identical rulers was missing: which of these have I moved? Answering it is what turns 30 rows into "the four I touched, and 26 I didn't", and it is the real content of "hard to know where I am" — position in a list matters far less than knowing which parts of the list are yours. Deliberately quiet, and deliberately NOT the marker: the marker is already amber on all 277 rows, so pushing more amber there says nothing. The signal is a small amber pip in the left margin — the same mark the filmstrip puts on a worked frame — plus the label lifting to full ink. Both are paint only; nothing here changes the row's box, so a module never reflows as you work down it. */ .cn-tool{ position:relative; } .cn-tool::before{ content:''; position:absolute; left:-9px; top:6px; width:3px; height:3px; border-radius:50%; background:var(--cn-amber); opacity:0; transform:scale(.4); transition:opacity var(--cn-t-state, .16s) var(--cn-ease, ease), transform var(--cn-t-state, .16s) var(--cn-ease, ease); pointer-events:none; } .cn-tool.is-set::before{ opacity:1; transform:scale(1); } .cn-tool.is-set .cn-tool-name{ color:var(--cn-ink); } .cn-tool.is-set .cn-tool-val{ border-color:color-mix(in srgb, var(--cn-amber) 42%, transparent); } /* Per-row reset. Panel mode's knobs have had one of these since they shipped (.pn-reset); the ruler rows never did, so the only way back to a default was the whole-module reset — all or nothing on a 30-parameter module. Held at width 0 rather than display:none when there is nothing to undo, so the row's rhythm is identical on a touched and an untouched row and the ten of them don't shout at once. */ /* margin-left:-9px cancels .cn-tool-head's own 9px flex gap while the button is collapsed. A zero-WIDTH flex item still earns a full gap on each side, so without this every untouched row carried 9px of dead space between the unit and the first stepper — measured: the unit ended at 357px and the stepper started at 375px. It returns to 0 when the row is edited, which is the one moment the button actually needs the room. */ .cn-ctlreset{ width:0; height:20px; padding:0; margin:0 0 0 -9px; border:0; background:none; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; opacity:0; color:var(--cn-t-55); pointer-events:none; transition:width var(--cn-t-state, .16s) var(--cn-ease, ease), margin-left var(--cn-t-state, .16s) var(--cn-ease, ease), opacity var(--cn-t-state, .16s) var(--cn-ease, ease), color .14s; } .cn-ctlreset svg{ width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .cn-tool.is-set .cn-ctlreset{ width:20px; margin-left:0; opacity:.6; pointer-events:auto; } .cn-tool.is-set .cn-ctlreset:hover{ opacity:1; color:var(--cn-amber); } .cn-ctlreset:focus-visible{ width:20px; margin-left:0; opacity:1; outline:2px solid var(--cn-amber); outline-offset:1px; border-radius:50%; pointer-events:auto; } @media (prefers-reduced-motion: reduce){ .cn-tool::before, .cn-ctlreset{ transition:none; } } /* 23px was under the 24px minimum target — measured, not estimated. */ .cn-step{ width:24px; height:24px; border-radius:var(--cn-r-8); display:flex; align-items:center; justify-content:center; font-family:inherit; font-size:var(--cn-fs-13); font-weight:var(--cn-w-light); background:var(--cn-surf-btn); border:1px solid var(--cn-line-btn); color:var(--cn-ink); cursor:pointer; } .cn-step:hover{ background:var(--cn-hov-20); } .cn-step[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } .cn-step[disabled]:hover{ background:var(--cn-surf-btn); } /* isChips */ .cn-tool-label{ font-size:var(--cn-fs-115); color:var(--cn-t-75); } .cn-chips{ display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; } .cn-chip{ font-family:inherit; font-size:var(--cn-fs-10); letter-spacing:var(--cn-ls-06); padding:7px 12px; border-radius:var(--cn-r-pill); cursor:pointer; background:transparent; border:1px solid var(--cn-line-chip); color:var(--cn-t-60); } .cn-chip[aria-selected="true"]{ background:var(--cn-ink); border-color:transparent; color:var(--cn-ink-on-white); } .cn-chip[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } /* accent chips — a selection that identifies WHAT you are editing rather than which view you are in. White (the default selected fill) reads as a tab; amber reads as "this is live and it is yours". Opt-in per control via `accent: true` in the manifest, so it stays rare enough to keep meaning something. First user of it: Facelift's face picker (al: "when the face button is selected ie face 1 it should turn orange"). */ .cn-chip.is-accent[aria-selected="true"]{ background:var(--cn-amber); border-color:transparent; color:var(--cn-ink-on-amber); box-shadow:var(--cn-amber-glow); } .cn-chip.is-accent[aria-selected="true"]:hover:not([disabled]){ background:var(--cn-amber-hi); } .cn-chip-tick{ vertical-align:-1px; margin-left:2px; } /* isPicker (new) */ .cn-picker{ display:flex; align-items:center; gap:10px; height:40px; padding:0 6px 0 13px; border-radius:var(--cn-r-13); background:rgba(238,242,241,0.045); border:1px solid var(--cn-line); } .cn-picker-label{ font-size:var(--cn-fs-85); letter-spacing:var(--cn-ls-20); color:var(--cn-t-50); } .cn-picker-val{ font-size:var(--cn-fs-12); color:var(--cn-ink); max-width:168px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:center; } .cn-picker-arrow{ width:22px; height:22px; border-radius:var(--cn-r-7); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--cn-t-60); background:none; border:0; } .cn-picker-arrow:hover{ background:var(--cn-hov-12); } .cn-picker-arrow[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } .cn-picker-arrow[disabled]:hover{ background:none; } .cn-picker-arrow svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .cn-picker-val-btn{ font:inherit; font-size:var(--cn-fs-12); color:var(--cn-ink); max-width:168px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:center; background:none; border:0; padding:2px 4px; border-radius:var(--cn-r-7); cursor:pointer; } .cn-picker-val-btn:hover{ background:var(--cn-hov-12); } .cn-picker-val-btn[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } .cn-picker-val-btn[disabled]:hover{ background:none; } /* Dropdown menu opened by clicking a picker's value text — jumps directly to any option instead of stepping one-at-a-time via the arrows. Styled to match .scope-menu (same z-index tier, same floating-card look) but under the cn- prefix and using Chain's own design tokens. */ .cn-picker-menu{ position:fixed; z-index:1000; background:color-mix(in srgb, var(--cn-well) 92%, white 8%); border:1px solid var(--cn-line); border-radius:var(--cn-r-12); padding:5px; min-width:180px; max-height:min(320px, 60vh); overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.55); } .cn-picker-menu-item{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border:0; border-radius:var(--cn-r-7); background:transparent; color:var(--cn-t-60); font-family:inherit; font-size:var(--cn-fs-12); cursor:pointer; text-align:left; } .cn-picker-menu-item:hover, .cn-picker-menu-item.cn-highlighted{ background:var(--cn-hov-12); color:var(--cn-ink); } .cn-picker-menu-item[aria-selected="true"]{ color:var(--cn-ink); font-weight:var(--cn-w-med); } .cn-picker-menu-item[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } .cn-picker-menu-item[disabled]:hover, .cn-picker-menu-item[disabled].cn-highlighted{ background:transparent; color:var(--cn-t-60); } /* isCheck (new) */ .cn-checkrow{ width:100%; display:flex; align-items:flex-start; gap:10px; cursor:pointer; background:none; border:0; padding:0; text-align:left; font-family:inherit; } .cn-checkbox{ width:15px; height:15px; border-radius:var(--cn-r-5); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--cn-line-check); } .cn-checkbox[aria-checked="true"]{ background:var(--cn-amber); border-color:transparent; } .cn-checkbox svg{ width:11px; height:11px; fill:none; stroke:var(--cn-ink-on-amber); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .cn-checklabel{ flex:1; font-size:var(--cn-fs-115); line-height:1.35; color:var(--cn-t-90); } .cn-checkrow[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } /* isColor (new) */ .cn-swatchrow{ display:flex; gap:6px; margin-top:8px; } .cn-swatch{ flex:1; height:26px; border-radius:var(--cn-r-9); cursor:pointer; display:block; border:1px solid var(--cn-line); } .cn-swatch[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; } /* isAction (new) */ /* §4.4 specs this as "a full-width button" — but a