/* ========================================================================= BRANDIP2 — LIGHT VARIANT. INTRO-1 (index.html) ONLY. The FIFTH project screen, directly below the dark Brandip screen. AN OVERRIDE SHEET, NOT A SECOND COPY. Loads AFTER css/pellmell-intro-brandip.css and contains ONLY what differs, every rule scoped under .bw-project-screen--light. The base sheet is LOCKED (Docs/RULES.md, 2026-08-06) and is not touched — so the dark screen above renders byte-identically, and this file IS the list of what the variant changes. The portfolio index-portfolio-archived.html, css/styles.css and the portfolio's own Brandip row are untouched; v2/v3 never load this. DESIGN GUIDE, NOT A SOURCE, AND IT IS TWO NODES: the frame + tracks column 2082:7503 "Brandip2.1" (2082:7504 / 2082:7733) THE LEFT PANEL 2089:13608 "Panel-left-2" The panel has been re-authored under a new id five times during this build (2067:1783 -> 2082:7534 -> 2080:4265 -> 2086:13234 -> 2089:13608). Do not trust a panel value quoted anywhere in this repo's history without re-reading it; several of them reversed and then reversed back. ========================================================================= */ /* ========================================================================= THE SURFACE LANGUAGE — four tiers, and this is the part that inverted. The dark screen has ONE ground and everything else is a white-alpha lift off it. Brandip2.1 has four distinct tiers, and two of them are DARKER than their parent: ground rgba(119,104,104,0.4) the frame (2082:7504, read) cards rgba(246,235,228,0.4) BOTH columns (2082:7733 / 2089:13608) dark blocks #776868 Player, Track-selected panels rgba(255,255,255,0.2) the six influences boxes rows #F6EBE4 + white 20% the four track rows -> #F8EFE9 NOTHING HERE IS SOLVED OFF PIXELS ANY MORE. Both values that were — the ground and the tracks card's radius — are now read: 2082:7504 and 2082:7733 exceed get_design_context at the root, but `forceCode` persists the full output to a file and the root className can be extracted from it without loading the subtree. Both came back different from the solved versions. The ground is TRANSLUCENT, not the opaque #C3BBB9 that was reverse-engineered from the render (see .bw-screen), and the tracks card rounds only its LEFT corners. THE TWO COLUMNS ARE A MATCHED PAIR AGAIN. 2089:13608 puts Panel-left back on the same rgba(246,235,228,0.4) the tracks column carries, so both columns are pale cards and the dark #776868 sits on the PLAYER and the filmstrip panel inside them. EXACTLY ONE OF PANEL/PLAYER IS DARK, AND WHICH ONE HAS CHANGED THREE TIMES. That is the invariant to hold, not either value: give both the same fill and whichever sits on the other vanishes into it. A pass of this sheet shipped the panel as #776868 after measuring the column at a point the player covered, and a later one gave the PLAYER #776868 while the panel was also #776868. Check the pair, not the value. Only the top corners are ever visible — both columns run past the 600 fold — so the panel rounding top-left only against the tracks column's top-left-and-bottom-left is a difference that never renders. ========================================================================= */ /* ========================================================================= THE SPACING PASS — 2082:7503. Both columns are cards; the frame divides in four: 16 + 248 (panel card) + 16 (gap) + 813 (tracks card) = 1093 The panel is 248 = 232 of content + 8 of padding a side. The tracks column is 813 with 16 of padding LEFT and TOP, its rows 797 inside it. THE TWO 16s BOTH MOVED, AND NEITHER IS NEW: · the column gap came back (an earlier read had it at 0, the panel absorbing it) · the tracks column's own 16 moved from BETWEEN Track-selected and Track-secondary to ABOVE them — the node runs Track-selected y16..143 and Track-secondary from y143, flush. So .bw-tracks goes gap:16 -> gap:0 plus padding-top:16. In this port, with the 2.8909 width absorption still landing on the tracks column (the panel is fixed-content and still cannot take it): tracks column 815.8909 = 813 + 2.8909 track rows 807.8909 = column - --bw-column-pad-x (8) soundwave field 777.8909 = rows - --bw-gutter (30) body 16 + 248 + 16 + 815.8909 = 1095.8909 exact That field width drives the six re-derived wave constants — see the GEOM table in js/pellmell-intro-brandip-wave.js. The motion itself is NOT retuned. ========================================================================= */ .bw-project-screen--light .bw-screen { /* READ off 2082:7504, not solved. An earlier pass shipped an opaque #C3BBB9 here, reverse-engineered from the guide's render; the node authors a TRANSLUCENT taupe. THE TWO ARE NOT THE SAME PIXEL, AND THAT IS EXPECTED. 40% taupe composites against whatever is behind it: over Figma's ~#F5F5F5 canvas it lands on the #C3BBB9 the render shows, over this page's white .bw-project-screen it lands on #C9C3C3 — about six levels lighter. The authored value is shipped rather than the baked one, because the alpha is the intent and the white page is ours, not the guide's. If the screen reads too pale beside the others, that gap is the reason and #C3BBB9 is the fix. */ background: rgba(119, 104, 104, 0.4); /* 2082:7504 carries a 0.25px hairline. Painted as an inset shadow, NOT a border: a real border on a fixed-width box either eats 0.5px of the internal 1095.8909 or has to be added back to it, and both break the body sum for a hairline. */ box-shadow: inset 0 0 0 0.25px rgba(34, 16, 22, 0.4); /* THE NODE'S 24 CORNER IS DELIBERATELY NOT TAKEN — the base's 48 is inherited. Same judgment the base sheet documents for its own 16 -> 48: 24 x 1.1 renders 26.4, and a 26.4px corner beside the three 52.8px ones on the EF, 7-Eleven and Matey screens reads as a defect. The deviation buys screen-to-screen consistency and is stated here so it is a decision, not a drift. */ /* 2091:15464 — the selected pill carries the SAME white-40% as every other button, so it is not marked by fill at all: the #FF3567 ink and the Regular weight are the whole of it. Read off the node each time rather than assumed to track the buttons — this value has moved with them twice and diverged from them twice. */ --bw-active-fill: rgba(255, 255, 255, 0.5); /* THE TWO COLUMNS' TOP PADDING, DECLARED ONCE. Panel-left and Wrapper-tracks both open at the same distance below the header, so their first children — the player and the filmstrip panel — sit on one line. They had drifted to 8 and 16 because each column was read off a different node, and nothing in either rule said they were meant to agree. Spending one custom property is what makes that intent enforceable: change this and both columns move together, or neither does. LIGHT SCREEN ONLY. The dark screen declares no such token and no base rule reads it; its two columns genuinely do differ (panel pt-24, filters pt-24 inside a 48 box). This is vertical only — it does NOT touch the tracks column's LEFT padding, which is what the soundwave field width derives from. The six wave constants in js/pellmell-intro-brandip-wave.js are unaffected by this change. */ --bw-column-pad-top: 8px; /* THE TRACK ROW GAP, DECLARED ONCE. Track-selected sat flush against Track-secondary (gap 0) while the four secondary rows were 8 apart, so the filmstrip read as joined to the Voiceover row while the audio rows breathed. All four rows are one rhythm now, and both consumers spend this — change it and every gap moves, or none does. An override: the node runs Track-selected y16..143 with Track-secondary starting at y143. */ --bw-track-gap: 8px; /* THE ROW CORNER, DECLARED ONCE. The wave rows take this; the Text track takes HALF of it — 2067:7320 authors rounded-tl/bl-8 against the wave rows' 16, and the Text track is the short row (36 against 80), so the smaller corner goes with the smaller box. Deriving it means the two cannot drift apart: change the row corner and the text corner follows, which is what "equivalent to the node's 8" has to mean in a port that scales 1.1. */ --bw-row-radius: 16px; /* THE COLUMNS' INNER PADDING, DECLARED ONCE. The panel insets its content 8 a side; the tracks column insets its rows by the same amount off the left. They were 8 and 16 — each right against its own node, and nothing said they were meant to agree, which is how they drifted. Kept SEPARATE from --bw-column-pad-top even though both are 8: those are two independent decisions that happen to share a value, and merging them would couple them. THIS FEEDS THE WAVE. Row width = the tracks column less this padding, and the soundwave field is that less --bw-gutter, so changing it re-derives the six constants in js/pellmell-intro-brandip-wave.js. Do not move it without them. */ --bw-column-pad-x: 8px; /* THE PLAYER'S INNER WIDTH, DECLARED ONCE. The window row, the video still and the transport row are all this wide and all centred by .bw-player's align-items, so their left and right edges coincide by construction rather than by three matching numbers. THIS IS WHAT THE TRANSPORT ROW WAS MISSING. The base gives .bw-controls align-self:flex-start, so it hugged the player's PADDING box while the still beside it was a centred 216 — putting the rewind disc ~2px into the left margin, outside the image's edge. Spending one width and centring it puts the glyph's edge on the image's edge, by the same mechanism that already makes the window icons flush right. */ --bw-player-inner: 216px; /* EVERY BUTTON IN THE PANEL IS THIS TALL — titles, chips, name pills and the selected one. They were three different heights, and none of them was set: each fell out of its own padding and line-height. .bw-chip carries line-height:1 in the base and .bw-name does not, so a name inherited `normal` (~9.6px for 8px type) and stood ~1.6 taller than the chip beside it; the selected pill's 4.66 padding put it ~3.7 taller again. That is why "Lacey Baker" and "Nyjah Huston" sat proud of their own row. Declaring the height makes it the governed value and the padding merely an inset, so a line-height or padding difference between the three classes cannot resurface as a height difference. 14.457 is the node's own chip height (2091:15456). */ --bw-button-h: 14.457px; /* THE HANDLE-DOT BLOCK'S INSET, DECLARED ONCE. The dots are centred in the gutter, so their left edge is (gutter - 9) / 2 = 10.5 — and the track LABEL above each row is supposed to start on that same edge, not on the row's. The base indents the label 24, which lined it up with nothing. Both spend this now, so the label cannot drift off the dots if the gutter or the handle size moves. */ --bw-handle-inset: calc((var(--bw-gutter) - 9px) / 2); } /* ========================================================================= HEADER — 2082:7505, x16 y8, 404.44 x 40. The node lifts the title row and the filters out of the two columns into one shared header above the body, which is what lets both columns become cards starting at y48. Content sits at y16..40; the 8 bottom margin puts the Body on the node's y48. ========================================================================= */ .bw-project-screen--light .bw-header { display: flex; align-items: center; gap: 12px; /* the node's 264 - 252 (was 20 at 2067:1781) */ height: 24px; /* THE HEADER IS INDENTED BY THE COLUMNS' OWN INNER PADDING. It sat at 16, which is where the two CARDS begin — so the menu button lined up with the panel's edge rather than the PLAYER below it, and the filter pill with the tracks container rather than the track ROWS inside it. Both were out by exactly --bw-column-pad-x, because that is what each column insets its content by. One value fixes both: the title row shifts 16 -> 24, which is the player's left edge, and the filters ride along on the unchanged 252 + 12 to land on 288, which is the rows'. Spending the token rather than writing 24 keeps the header tied to the thing it is supposed to line up with. */ margin: 16px 0 8px calc(16px + var(--bw-column-pad-x)); } /* THE WORDMARK BOTTOM-ALIGNS WITH THE MENU CHIP, not centred on it. The base centres the row (align-items:center), which floats the 16px wordmark against the 24px chip and leaves it sitting slightly high — the two read as unrelated objects rather than as one lockup. flex-end puts the type's box bottom on the chip's bottom edge. */ .bw-project-screen--light .bw-titlerow { width: 252px; padding-left: 0; align-self: center; align-items: flex-end; } /* The wordmark inverts: cream on the dark ground, the node's primary dark ink here. THE TITTLE DOES NOT MOVE — #F63A65 reads on both grounds, and the dotless-i plus overlaid-real-i construction is untouched. */ .bw-project-screen--light .bw-logo { color: #2f1d22; } .bw-project-screen--light .bw-filters { height: 24px; padding-top: 0; gap: 0; } /* 2082:7520 — an opaque #776868 pill where the dark screen has rgba(64,62,60,0.4), left padding 8 -> 7. This #776868 is the dark-block tier, not a token shared with the panel: they are independent literals that happen to agree. */ .bw-project-screen--light .bw-filter-pill { background: #776868; padding: 2.796px 5.592px 2.796px 7px; } /* ========================================================================= PANEL-LEFT — 2089:13608 "Panel-left-2". A pale card, the twin of the tracks column. ========================================================================= */ /* THE FULL STACK IS BUILT AND ALLOWED TO CLIP. Six boxes plus the player run the panel well past the 600 frame, so the last box and part of the one above it are cut by .bw-screen's overflow. That is authored, exactly as it is on the dark screen — do not shrink the stack, drop a box, or grow the frame to "fix" it. The last figure quoted for it was 817.423, against 2086:13234, which had NO bottom padding on the panel; 2089:13608 restores pb-16, so the built stack should land ~16 higher. Treat any of these numbers as a CHECK, not a constraint — the series has run 646.16 -> 765.36 -> 822.102 -> 817.423 across revisions. If the built stack measures something unexpected, a box treatment is wrong rather than the clip being wrong. */ .bw-project-screen--light .bw-panel-left { width: 248px; box-sizing: border-box; /* 2089:13608 flips the panel back to the PALE card — the same rgba(246,235,228,0.4) the tracks column carries, so the two columns are a matched pair again and the PLAYER is the dark block instead. See .bw-player: the two must never hold the same value, or whichever sits on the other disappears into it. Which one is dark has now changed three times; what has not changed is that exactly one of them is. */ background: rgba(246, 235, 228, 0.4); /* BOTH TOP CORNERS, OVERRIDING THE NODE. 2089:13608 rounds top-left only, which leaves the panel's top-right a square corner butting into the 16 column gap while its top-left carries the frame's curve — the asymmetry reads as an unfinished edge rather than an intention. Bottom corners stay square: the panel runs past the 600 fold, so they never render either way. */ border-radius: 16px 16px 0 0; padding: var(--bw-column-pad-top) var(--bw-column-pad-x) 16px; gap: 8px; /* The pale card's own shadow: half the scale of --bw-glass-shadow plus a 5px bloom. Not the shared token — a 248-wide surface with the 1px/2px edge reads as a chip. */ box-shadow: inset 0.5px 0.5px 1px 0 rgba(255, 255, 255, 0.3), inset -0.5px -1px 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 5px 0 rgba(255, 255, 255, 0.3); } /* 2089:13609 — the player is the DARK BLOCK now: opaque #776868 on the pale panel, where the base has it as a rgba(255,255,255,0.01) ghost. It also tightens: padding 0/8 -> 4.66 all round, radius 16 -> 8. It is emphatically NOT the panel's fill — see the pair invariant at the top of this sheet. The hero, its overlay tint, the window icons and the transport discs are untouched: .bw-hero-tint blends with the photo inside its own box, not with the surroundings, and every icon asset is a cream glyph on a dark chip — which the panel still is. No asset needed forking. */ .bw-project-screen--light .bw-player { background: #776868; /* 2091:15380 — NO TOP PADDING, and the height is fixed. This is what put the icon row 4.66 too low and the video still at y25 instead of y21: with an auto-height player the padding simply pushed everything down. Fixed height + no pt seats the row flush at the top of the container, and .bw-window's own 24 IS the band between the container top and the still, so the icons centre in it by align-items alone. The stack then overruns the bottom and is clipped — authored, and why the node sets overflow-clip. */ height: 261.939px; padding: 0 4.66px 4.66px; border-radius: 8px; align-items: center; overflow: hidden; box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.3), inset -1px -2px 2px 0 rgba(255, 255, 255, 0.1), inset 1px 1px 2px 0 rgba(255, 255, 255, 0.3); } /* THE TRANSPORT ROW HAS TWO ALIGNMENT AUTHORITIES, and the node uses both (2067:1812). Controls (2067:1813) is a fixed 218 box with justify-center — that centres the BUTTONS. Timestamp (2067:1822) is absolutely positioned at left:0.34 inside it, so it is out of that flow entirely and sits at the row's left edge. Neither authority can do both jobs: a single flex row either centres everything or left-aligns everything, which is why the timestamp trailed the buttons here before. Ported as: the group fills the player's inner width and centres its one in-flow child, and the timestamp is taken out of flow to the left edge. The node's 4px row padding and 0.34 offset are dropped — together they are what would keep the timestamp 4.34 short of the still's left edge, and flush is the ask. */ .bw-project-screen--light .bw-controls-group { position: relative; width: 100%; justify-content: center; } .bw-project-screen--light .bw-timestamp { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /* All three of the player's rows share one width and one centring — see --bw-player-inner. .bw-window and .bw-hero are already 216 in the base; they are restated here so the relationship is enforced from one place rather than being three numbers that happen to agree. .bw-controls is the one that actually moves: its base align-self is flex-start. */ .bw-project-screen--light .bw-window, .bw-project-screen--light .bw-hero, .bw-project-screen--light .bw-controls { width: var(--bw-player-inner); } .bw-project-screen--light .bw-controls { align-self: center; } /* 2091:15381 — the band. The group stays flush right with the still below it (both are 216 wide and centred), and the close icon keeps its ASYMMETRIC padding so its disc, not its box, lands on that right edge. Do not normalise it to match min/max. */ .bw-project-screen--light .bw-window { height: 24px; } /* 2091:15390's own export — see the asset's header for why the shared icon cannot be used. RENDERED AT ITS NATURAL WIDTH, 17.1963 rather than the node's 17 box: the node gets there with an img inset of right:-1.15% (17 x 1.0115 = 17.196), which is the same thing said twice. At 17 the SVG is squashed 1.1% horizontally and its disc paints as an ellipse. THE NEGATIVE RIGHT MARGIN IS THE FLUSH-RIGHT SEATING. The disc was redrawn to match min/max (r 6 -> 5.46057), so it no longer reaches the artwork's right edge; -0.5394 is exactly that shortfall, pulling the box right so the DISC — not the icon box — lands on the image's edge below. Close's padding stays asymmetric by design; this is what makes it so, and it lives here rather than baked into the asset. */ .bw-project-screen--light .bw-win-icon:last-child { width: 17.1963px; height: 21.3207px; margin-right: -0.5394px; } /* 2091:15413 — the dots centre in the visible corner tab: centre (8.18, 9.18) from the player's corner, which is left 9.746 / top 10.393 inside .bw-player-handle (-6.07,-5.13). */ .bw-project-screen--light .bw-hdots { left: 9.746px; top: 10.393px; width: 9.00832px; height: 7.8343px; } .bw-project-screen--light .bw-timestamp { color: rgba(234, 229, 225, 0.85); } /* ========================================================================= INFLUENCES BOXES — and the reason this is not one uniform recolour. THE NODE REWORKED BOXES 1 AND 2 AND LEFT 3, 4 AND 5 ALONE. The same two boxes take the new geometry AND the new ink, so ONE class carries both — that is the authored story, not a convenience: box 1 Dream Crazy 2089:13656 the project title, now a box of its own box 2 Athletes/Brands 2089:13669 box 3 Collaborations 2082:7671 unchanged: #cfc8c2 border, 8/5.592, r11.185 box 4 Personal Brand 2082:7707 unchanged: #cfc8c2 border, 11.185/7.457 box 5 Cultural 2082:7720 unchanged: #ada6a1 border, 11.185/7.457 Boxes 3-5 keep the base sheet's #f6ebe4 titles, rgba(64,62,60,0.4) chips and rgba(246,235,228,0.6) chip text verbatim — they need no ink rule here at all. Do not "finish the job" by pushing --n8 onto them; the split is in the guide. ========================================================================= */ .bw-project-screen--light .bw-inf-box { border: 0.5px solid #cfc8c2; /* box 3; boxes 4/5 keep their own via --ghost/--ghost2 */ } .bw-project-screen--light .bw-inf-box--ghost2 { border: 0.5px solid #ada6a1; } /* EVERY BOX IN THE STACK IS THE SAME OBJECT — 2091:15428/15442/15495/15518/15555/15569. THE HAZE IS GONE. 2091:15378 is the flat, crisp treatment: the boxes are an OPAQUE #E5DCDB with no inset shadow at all, where they were a white-20% wash under the triple inset. Same for the chips. What survives is the palette's lightness, not the simulated depth — the only shadows left on this panel are the card's own edge and the player's. The base no longer draws a border at all — it moved these boxes onto the tracks' glass surface (0.01 white fill + inset pair, radius 16). Every one of those five properties is still restated below, on --ghost and --ghost2 as well as the base class: this sheet must not depend on what the base happens to leave unset, and zeroing `border` alone would let the base's fill and inset shadow through. What varies between boxes here is only the TITLE ink, in two steps. */ .bw-project-screen--light .bw-inf-box, .bw-project-screen--light .bw-inf-box--ghost, .bw-project-screen--light .bw-inf-box--ghost2 { border: 0; padding: 4.66px 0 4.66px 4.66px; border-radius: 8px; background: #e5dcdb; box-shadow: none; } /* TITLE PILLS INVERT AGAINST THE BUTTONS. They take a translucent #776868 at 30% with #F8EFE9 text — a darker pill carrying light type, where the buttons around them are a white wash carrying dark type. So the two are told apart by polarity rather than by weight, which is what stops a title reading as just another button. 30%, UP FROM 20% (2091:15435): at 20% the pill sat 18 levels under the box, which held the polarity but read faint against buttons that are 11 levels over it. 30% takes it to 26 and balances the two sides. The text is unchanged. THE INK IS UNIFORM: #F8EFE9 on every title in the stack. The old two-tier scheme (#F8EFE9 boxes 1-3, #F6EBE4 boxes 4-6) is gone, so --n8 carries nothing. */ .bw-project-screen--light .bw-inf-title { background: rgba(119, 104, 104, 0.3); color: #f8efe9; box-shadow: none; } /* Chips AND name pills are one object — the name pills give up the glass-pill treatment entirely and take the chip's geometry and fill. WHITE AT 50%. The separation from the #E5DCDB box has been walked up 20% -> 40% -> 50%; at 20% the buttons were four levels off the box and did not read as objects at all. Still translucent, so they pick the box up rather than sitting on it as a second opaque tone. SCOPED TO THE LEFT PANEL, deliberately. These classes appear only in the panel today (25 chips and 7 name pills, none in the tracks column), so the .bw-panel-left qualifier changes nothing now — it is there so the rule cannot follow the class if a chip is ever added to a track row. */ /* HEIGHT IS GOVERNED, NOT INHERITED — see --bw-button-h. Vertical padding is zeroed on all three so the token is the only thing setting it; line-height:1 stops the type box from pushing past it. The base centres each of these with align-items, so the text still sits on the middle. */ .bw-project-screen--light .bw-panel-left .bw-inf-title, .bw-project-screen--light .bw-panel-left .bw-chip, .bw-project-screen--light .bw-panel-left .bw-name { height: var(--bw-button-h); box-sizing: border-box; line-height: 1; } .bw-project-screen--light .bw-panel-left .bw-inf-title { padding: 0 4.66px; } .bw-project-screen--light .bw-panel-left .bw-chip, .bw-project-screen--light .bw-panel-left .bw-name { padding: 0 5.592px; border-radius: 11.185px; background: rgba(255, 255, 255, 0.5); color: #9e9393; box-shadow: none; } /* --n8 AND --ab NOW CARRY NOTHING. Both survive in the markup only as a record of how the node groups its boxes — --n8 the three that once had brighter ink, --ab the two that pair a name with an attribute. Neither has a rule any more: the box treatment, the button fill and the title ink are all uniform across the stack. Do not delete them from the markup without checking the node has not re-tiered; it has done so twice. */ /* SELECTED NAME — 2089:13691. The one place the chip treatment is dropped: the selected name goes back to PILL geometry (4.66 padding, radius 8) with a SOLID #F8EFE9 fill and #FF3567 ink at Regular. So against a row of translucent chips it reads as the only opaque object, and the accent sits on the brightest thing on the panel rather than competing with it. Its sport chip is left completely ordinary — the mark is carried by the name alone here, unlike the base where both members move. */ .bw-project-screen--light .bw-pair--active .bw-name { padding: 0 4.66px; /* horizontal only — the height comes from --bw-button-h */ border-radius: 8px; background: var(--bw-active-fill); color: #ff3567; font-weight: 400; /* Bricolage Grotesque Regular */ } /* ========================================================================= VIDEO TRACKS — 2082:7733. A card, 16 narrower, with its rows inset inside it. ========================================================================= */ /* WRAPPER-TRACKS RUNS TO THE BOTTOM OF THE SCREEN, OVERRIDING THE NODE. Its rows stop well above the fold and the node lets the card end with them, which leaves a pale card floating in the lower third of the frame. Stretched, it is cut by .bw-screen's overflow instead, so it reads as a column continuing past the fold. THE STRETCH IS ON THIS ELEMENT. An earlier pass put align-items:stretch on .bw-body, which produced the same picture for the wrong reason: it stretched BOTH columns to the body's height, and the body was only tall enough because the panel's stack overflows. Shrink the panel and the tracks card would have quietly stopped short again. align-self puts the rule on Wrapper-tracks itself; the min-height then makes it independent of the panel altogether — 600 frame less the 48 the header occupies (16 margin + 24 row + 8). Neither line touches Track-selected, Track-secondary or the per-row wrappers. */ .bw-project-screen--light .bw-tracks { align-self: stretch; min-height: calc(600px - 48px); width: 815.8909px; /* 813 + the 2.8909 absorption, which still lands here */ box-sizing: border-box; /* Top comes from the shared token — it was the node's 16 against the panel's 8, which is exactly the drift the token exists to stop. Left and bottom are still 2082:7733's own; only the top is tied. */ padding: var(--bw-column-pad-top) 0 16px var(--bw-column-pad-x); background: rgba(246, 235, 228, 0.4); /* READ, not matched: rounded-bl/tl only. An earlier pass guessed 16 on all four by analogy with the panel card; the card runs to the frame's right edge, so its right corners are square and rounding them would round nothing while implying otherwise. */ border-radius: 16px 0 0 16px; gap: var(--bw-track-gap); } .bw-project-screen--light .bw-track-secondary { gap: var(--bw-track-gap); } /* The rows FOLLOW the column's content box rather than restating a width. The base pins them at 831.8909px, which would have to be re-derived by hand every time the padding moves — the exact drift the token above exists to stop. 100% makes the row width a consequence of --bw-column-pad-x, and .bw-wave-gl is already calc(100% - --bw-gutter), so the wave field follows too. */ .bw-project-screen--light .bw-track-selected, .bw-project-screen--light .bw-track-secondary, .bw-project-screen--light .bw-track { width: 100%; } /* THE PLAYHEAD SITS AT THE NODE'S OWN TOP, NOT THE DERIVED ONE. The base computes thumb-top + (strip-h - playhead-h)/2 = 31.03 and its own comment records that the node is 0.43 lower at 31.46. That 0.43 is the difference between clearing the timeline markers and touching them: the markers end at 10.96 + 16.15 + 3.73 = 30.84, so 31.03 leaves 0.19 and reads as an overlap at this scale, where the node's 31.46 leaves the 0.62 it authors (Progress-bar/verticle mt-20.5 against Markers mt-16.15 + h-3.73, both in the Video group's coordinates — 2067:2088 / 2067:2046). Read off the node rather than nudged. */ /* The HEIGHT is stated, not inherited. The base sheet's .bw-playhead is now the dark screen's strip box (top = --bw-thumb-top, height = --bw-strip-h); this screen kept the node's taller Progress-bar and was silently riding the base for it, so it lost 8.58px the moment that rule changed. --bw-playhead-h is unchanged and still declared on .bw-screen — this restates it, it does not move it. Screens 3 and 4 do the same. */ .bw-project-screen--light .bw-playhead { top: 31.46px; height: var(--bw-playhead-h); } /* 2082:7734 — the filmstrip panel is a DARK BLOCK, the same tier as the player, so this screen inverts twice: a dark panel inside a pale card on a grey ground. The ruler's own ink (labels, line, dot run, markers) and the #F63A65 playhead are the base sheet's and are carried unchanged — the ground under them went from #221016 to #776868, which is still dark enough for cream. */ .bw-project-screen--light .bw-track-selected { background: #776868; } /* THE HANDLE CONTAINER. The base has no such element — the handle is a bare absolutely-positioned SVG, so there was nothing to carry a fill. This screen wraps each of the four in a .bw-handle-box, and all four take the same treatment: white at 30% with the inset stack off 2114:17374. ONE RULE, NO MODIFIER. Voiceover and Sound briefly carried a separate class while Music and Text went bare; now that every row is filled that class is gone from both the sheet and the markup rather than left applied to all four, which would read as a distinction that no longer exists. */ .bw-project-screen--light .bw-handle-box { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw-gutter); box-sizing: border-box; padding: 4.66px; display: flex; align-items: center; justify-content: center; /* NO RADIUS OF ITS OWN — the row clips it, so its outer corners ARE the row's corners. Giving it 8 of its own put an 8 curve inside the row's 16 and left a crescent of row showing at each corner. See the clip on .bw-wave-row below. */ border-radius: 0; background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.3), inset -1px -2px 2px 0 rgba(255, 255, 255, 0.1), inset 1px 1px 2px 0 rgba(255, 255, 255, 0.3); } /* The dots are laid out by the box now, so the base's absolute placement comes off. */ .bw-project-screen--light .bw-handle-box .bw-handle { position: static; transform: none; } /* The label starts on the dot block's left edge — see --bw-handle-inset. The base's 24 indent aligned it with neither the row nor the dots. */ .bw-project-screen--light .bw-track-label { padding-left: var(--bw-handle-inset); } /* THE ROW BODY AND THE HANDLE ARE TWO DIFFERENT SURFACES — do not conflate them. Read off one live node (2067:2094 Soundwave-voiceover) so the distinction is from source: row body 2067:2094 #F6EBE4, glass-PAIR shadow, 16 on the left corners soundwave area 2067:2110 white 20%, and ONLY from the gutter rightward handle box 2114:17374 white 40%, TRIPLE shadow, 8 on the left corners The white-20% is the SOUNDWAVE's, not the row's. This sheet used to put it across the whole row, which meant the handle box sat on #F8EFE9 instead of #F6EBE4 and composited a couple of levels too light — the two surfaces quietly adding up. The hard-stop gradient keeps the first --bw-gutter transparent so the handle has the row's own cream behind it, exactly as the node stacks them, and the stop is the same token the handle and the canvas spend rather than a repeated 30. The rows still paint their own #F6EBE4 rather than inheriting: the screen ground is rgba(119,104,104,0.4) and these are cream islands on it. */ .bw-project-screen--light .bw-wave-row, .bw-project-screen--light .bw-track--text .bw-text-row { background: linear-gradient(90deg, transparent 0 var(--bw-gutter), rgba(255, 255, 255, 0.2) var(--bw-gutter)) #f6ebe4; /* The rows clip, which is what makes the handle box take their corners — see .bw-handle-box. The node's row is overflow-clip for the same reason; the base sets no overflow on .bw-wave-row, which is why the handle's corners were showing through. */ overflow: hidden; } .bw-project-screen--light .bw-wave-row { border-radius: var(--bw-row-radius) 0 0 var(--bw-row-radius); } .bw-project-screen--light .bw-track--text .bw-text-row { /* SQUARE AND FLUSH AT THE RIGHT. This carried radius 8 on all four corners, so its right end curved away from the screen edge while every wave row above it ran square into it. The corner is owned by the ELEMENT here, not by a clip: the handle box takes its left corner from this row's overflow, but nothing clips the row itself, so the radius had to change on the row. Left corners keep the wave rows' 16. */ /* HALF the row corner, derived — see --bw-row-radius. Right end stays square and flush with the screen edge. */ border-radius: calc(var(--bw-row-radius) / 2) 0 0 calc(var(--bw-row-radius) / 2); } /* Labels drop to the node's secondary dark ink — the same #776868 its caption timestamps use, at the 0.8 the base already applies. */ .bw-project-screen--light .bw-track-label { color: #776868; } /* VOICEOVER IS NO LONGER THE ACTIVE TRACK LABEL. The node moves the active marker off the label and onto the filmstrip panel's handle (2082:7736, "Icon-handle-active") and paints all four labels alike, so the base's weight/colour/opacity step is neutralised rather than recoloured — an active state pointing at nothing is worse than none. The markup change that goes with it: all four handles here use #bw-handle-dark. */ .bw-project-screen--light .bw-track-label--active { font-weight: 300; color: #776868; opacity: 0.8; } /* Captions 2082:9069 / timestamps 2082:9070. Gaps (89/27/27/27) and pair widths are unchanged — they are time positions and the node did not move them. */ .bw-project-screen--light .bw-cap { color: #2f1d22; } .bw-project-screen--light .bw-cap-time { color: #776868; } /* EVERY CAPTION PAIR GETS ONE TREATMENT. The node's caption block is items-center + text-center, and three of the four pairs carry it; the "Good." pair alone is items-start (2082:9074). Its caption is min-content width and its timestamp is wider, so items-start pins the short word to the left edge of the wider line under it and "Good." reads visibly off-centre against the three beside it that are centred. The base sheet inherits the same exception from the dark screen (.bw-cap-group--start, plus an auto-height timestamp that only that pair gets). Both are normalised here, so all four pairs share one alignment AND one line-box. Applied as a rule over the class rather than by removing it from the markup: the class still records which pair the node authored differently, and the sheet records that this screen does not take it. */ .bw-project-screen--light .bw-cap-group--start { align-items: center; } .bw-project-screen--light .bw-cap-group--start .bw-cap-time { height: 12.583px; } /* The three-dot run is DERIVED, not read: the base paints it in the row's own ink at 0.6, so this keeps that relationship against the new ink rather than inventing a value. Pitch, radius and extent are the base's and must stay — a repeating tile must divide its box (Docs/RULES.md). */ .bw-project-screen--light .bw-text-dots { background-image: radial-gradient(circle at 1.05285px 1.04857px, rgba(47, 29, 34, 0.6) 1.04857px, transparent 1.14857px); }