/* =========================================================================
   BRANDIP4 — INTRO-1's SIXTH project screen, directly below Brandip2.
   The fourth Brandip design iteration.

   DESIGN GUIDE, NOT A SOURCE: Figma LrUdy5WZmi3n2gkRz9SEC2 node 2067:5808
   "Brandip4-1093x600" (Title 2069:11567, Body 2067:5809, Panel-left 2069:11566,
   Video-tracks 2067:6010).

   THE LEFT PANEL HAS ITS OWN, LATER SOURCE: 2140:6073, which supersedes 2069:11566 and
   the two-card 2140:6074 before it. Anything about the panel's construction, its fill,
   its player or its six chip boxes comes off 2140:6073; the ids in the panel sections
   below are that node's. The rest of the screen is still 2067:5808's.

   AN OVERRIDE SHEET OVER THE LOCKED BASE — the same contract
   css/pellmell-intro-brandip-light.css has. It loads after
   css/pellmell-intro-brandip.css and carries only what differs from it, every rule
   scoped under .bw-project-screen--b4.

   IT DOES NOT INHERIT BRANDIP2. This screen carries its own modifier, not
   --light, so none of the Brandip2 sheet reaches it and nothing here can reach
   Brandip2. That is deliberate: the two share a base and nothing else, so a future
   edit to either cannot silently move the other. The cost is that this sheet
   restates layout Brandip2 also restates; the alternative — stacking --light and
   --b4 on one element — would have made every Brandip2 change a Brandip4 change.

   WHAT IS INHERITED FROM THE BASE, AND IT IS MORE THAN IT LOOKS: the whole markup
   contract, the player's internals, the influences stack's structure, the ruler's
   dot-run geometry, the Text strip's time-spacing (89/27/27/27 and the pair widths),
   the wave canvas's placement rule, and — see "BOXES 4-6" below — the bordered box
   treatment, which this node returns to unchanged.
   ========================================================================= */

/* =========================================================================
   WHAT MOVED SINCE BRANDIP2 — the three the brief names, and the rest.

   GEOMETRY. Brandip2 divides the frame in four (16 + 248 + 16 + 813 = 1093) and
   fits. Brandip4 does not fit and is not meant to:

     16 (frame pl) + 248 (panel) + 8 (gap) + 845 (tracks) = 1117  in a 1093 frame

   The tracks column runs 24 past the right edge and the frame clips it
   (overflow-clip on 2067:5808). The Body is authored 1138.788 wide — wider than the
   frame — so the overflow is the design, not an accident of hug widths.

   In this port the internal frame is 1095.8909 (the base's 2.8909 absorption) and
   that absorption goes to the tracks column exactly as it does on the other two —
   the panel is fixed-content and cannot take it. So the tracks column is 847.8909
   and the clip comes out at 24.0000, the node's own figure:

     16 + 248 + 8 + 847.8909 = 1119.8909   against 1095.8909   ->  clips 24.0000

   THE HANDLE'S POSITION. Brandip2 insets its track rows 8 inside the tracks column
   and the wave field starts at the gutter. Brandip4 does neither: the rows are the
   full 845, so the handle sits on the tracks column's own left edge, and the
   soundwave area carries px-4 (2077:3454), so the wave starts 4 further in again.
   Field = 845 - 30 (gutter) - 8 (the two 4s) = 807, +2.8909 = 809.8909.

   THE PALETTE. Brandip2 is a translucent taupe ground with cream cards; Brandip4 is
   an OPAQUE warm grey with cream cards, and the panel is opaque where Brandip2's is
   a 40% wash. See the surface table below.

   THE HEADER LOST THE FILTERS. Brandip2 hoists the title row AND the filter pill
   into a shared header; 2069:11567 is the title row alone, 104 wide. The filter
   pill does not exist on this screen — it is removed from the markup, not hidden.

   THE TIMESTAMP MOVED to the LEFT of the transport buttons (2069:11605, absolutely
   positioned at left:-68.82 relative to the Controls group).
   ========================================================================= */

/* =========================================================================
   THE SURFACE LANGUAGE

     ground        #D3CCC7                 OPAQUE warm grey + a 0.25px hairline
     panel         #F8EFE9                 opaque cream card
     tracks column  none                   NOT a card — the ground shows between rows
     filmstrip     #F8EFE9                 a cream island on the ground
     rows          #F6EBE4                 a half-step warmer than the cards
     player         none                   no surface of its own — the panel's cream shows
     boxes 1-6      rgba(255,255,255,0.4)  one wash, all six, over the panel's cream

   THE GROUND IS OPAQUE HERE. Brandip2's is rgba(119,104,104,0.4), which composites
   differently over Figma's canvas than over this page's white — a documented gap in
   that sheet. 2067:5808 authors a flat #D3CCC7, so the value that ships is the value
   that paints, and this screen has no such gap.
   ========================================================================= */

.bw-project-screen--b4 .bw-screen {
  background: #d3ccc7;
  /* 2067:5808's hairline, painted as an inset shadow rather than a border: a 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 16 corner is NOT taken — the base's 48 is inherited, the same
     judgment the base sheet documents for its own 16 -> 48 and Brandip2 for its 24.
     16 x 1.1 renders 17.6 beside three 52.8px corners on the other screens. */

  /* The selected name pill's fill, and it TRACKS the buttons deliberately. The node gives
     it the same white as every other chip, so the #FF3567 ink and the Regular weight are
     the whole of the mark; leaving it at 30% while the buttons went to 50% would have made
     the selected pill the DARKEST thing in the box — a distinction the node does not draw,
     and the opposite of the one it does. Raised with them, not inferred to have moved:
     stated here so a future button change re-reads this rather than assuming it follows. */
  --bw-active-fill: rgba(255, 255, 255, 0.6);

  /* THE PANEL'S INNER INSET, declared once and spent on three sides — top and both
     sides. The node authors px-8 and pt-20; the 20 is reduced to match (see
     .bw-panel-left), so the one value now governs the whole visible frame around the
     player. It also sets the header's indent, which has to line up with the panel's
     inner edge. Kept as a token for the reason Brandip2 keeps its own: values meant to
     agree drift apart when nothing governs them. */
  --bw4-pad-x: 8px;
  /* THE SOUNDWAVE AREA'S OWN INSET — 2077:3454 px-4. It exists on this screen and
     not on Brandip2, and it FEEDS THE WAVE: the field is the row less the gutter
     less twice this, so moving it re-derives the six constants in
     js/pellmell-intro-brandip-wave.js. */
  --bw4-wave-inset: 4px;
  /* The still's width — the window row above it spends the same value so the two cannot
     drift apart. The base gives both 216 as independent literals. */
  --bw4-still-w: 232px;
  /* The window icons' box, so the close icon's flush-right pull can derive from it. */
  --bw-win-size: 20.5px;
  /* 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;
}

/* =========================================================================
   HEADER — 2069:11567, the title row alone. No filters.
   Frame pl-16 pt-16 with a 16 gap to the Body, so the row occupies y16..40 and the
   Body starts on the node's y56.
   ========================================================================= */
.bw-project-screen--b4 .bw-titlerow {
  /* 16 (frame) + 8 (the node's own pl) = the logo's x24 */
  margin: 16px 0 16px calc(16px + var(--bw4-pad-x));
  padding-left: 0;
  height: 24px;
  /* The wordmark bottom-aligns with the menu chip rather than centring on it — see the
     same override on Brandip2. */
  align-items: flex-end;
}
/* 2069:11571 — the node mirrors the menu glyph vertically, so the long bar sits over
   the short one. The flip is here rather than baked into the asset: the artwork is a
   fork of the shared icon and should stay a one-fill diff from it. */
.bw-project-screen--b4 .bw-menu { transform: scaleY(-1); }
/* The wordmark inverts to the node's primary dark ink. THE TITTLE DOES NOT MOVE —
   #F63A65 reads on this ground, and the dotless-i + overlaid-real-i construction is
   untouched. */
.bw-project-screen--b4 .bw-logo { color: #221016; }

/* =========================================================================
   BODY — 2067:5809. Gap 8, and it overflows; see the geometry note above.
   ========================================================================= */
.bw-project-screen--b4 .bw-body {
  gap: 8px;
  padding-left: 16px;
  align-items: stretch;      /* both columns run to the fold and are clipped */
}

/* =========================================================================
   PANEL-LEFT — 2140:6073. ONE CARD, ONE FILL, NOTHING STACKED INSIDE IT.

   THE RESTRUCTURE, AND WHY IT ENDS THE SEAM RATHER THAN PATCHING IT. Up to 2140:6074
   this column was two cards butted together — a player rounded 16/16/0/0 over a chips
   card rounded 0/0/16/16 — and every fix had to defend the join between them. The
   player's bottom lands on a fractional device pixel and it clipped to its own rounded
   path, so its bottom edge antialiased against whatever was behind it; filling the
   column cream made that sliver blend cream into cream. That worked, and it was still a
   seam being hidden.

   2140:6073 removes the join instead. Panel-wrapper (2140:6121) is the ONLY painted
   surface: #F8EFE9, radius 16 on all four corners, px-8 pb-8. Inside it Content
   (2140:6122) is a flat column, gap 4, and the Player (2156:6730) is one more child in
   it with NO fill, NO radius and NO padding of its own. The player is not a card sitting
   on the panel; it is content printed on the panel. There is no divider because there
   are no longer two edges to divide.

   THE COLUMN'S OWN BOX. Panel-left (2140:6073) itself paints nothing — its job is
   rounded-tl/tr-16 plus overflow-clip, and the wrapper's radius 16 is what shows. The
   two are merged into this one rule: the fill and padding are the wrapper's, the clip is
   Panel-left's, and the clip is load-bearing — it is what cuts the corner handle down to
   a tab (see .bw-player-handle below). */
.bw-project-screen--b4 .bw-panel-left {
  width: 248px;
  box-sizing: border-box;
  background: #f8efe9;
  border-radius: 16px;
  /* No top pad: Content sits on the wrapper's top edge (2140:6122 y0). */
  padding: 0 var(--bw4-pad-x) var(--bw4-pad-x);
  gap: 4px;
  box-shadow: none;
  overflow: hidden;
}
/* THE PLAYER IS BARE. Everything that made it a card comes off — fill, radius, padding,
   shadow — and the panel's px-8 is now the only inset it has. Its window row and still
   are 232, which is the panel's content width, so both are simply full-bleed within it.

   overflow: visible UNDOES THE BASE's clip deliberately. The base clips the player so
   the corner handle reads as a tab; in this node the clip belongs to Panel-left, one
   level up, and it is a ROUNDED clip. Leaving the base's on would cut the handle to the
   player's square corner instead and the tab would come out the wrong shape. */
.bw-project-screen--b4 .bw-player {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border-radius: 0;
  padding: 0;
  align-items: center;
  box-shadow: none;
  overflow: visible;
}
.bw-project-screen--b4 .bw-controls { width: var(--bw4-still-w); align-self: center; }
/* .bw-inf-panel HAS NO COUNTERPART IN 2140:6073 — the six chips are Content's own
   children, siblings of the Player. The markup keeps the wrapper (it is where the
   two-card build put the chips card) and it is flattened to nothing here rather than
   removed, so the chips inherit Panel-left's gap-4 through it. */
.bw-project-screen--b4 .bw-inf-panel {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border-radius: 0;
  padding: 0;
}
.bw-project-screen--b4 .bw-influences { gap: 4px; width: 100%; }

/* PLAYER — 2069:11578. A white wash on the card, where the base has a
   near-transparent ghost on the ground. It is NOT #F8EFE9: that is the panel's own
   fill and the two would collapse into one surface. */
/* THE CORNER HANDLE'S SEAT — 2156:6836, and it is measured from THE COLUMN, not the
   player. In 2140:6073 Icon-handle is a child of Panel-left, sibling of Panel-wrapper, at
   (-4, -5). The markup keeps it inside .bw-player, so the seat has to be restated in the
   player's coordinates: the player's left edge is the column's content edge, i.e. one
   --bw4-pad-x in, so the column's -4 is the player's -(pad + 4). The top edges coincide
   (no top padding), so -5 carries across unchanged.

   Written as the subtraction so it follows the panel's inset rather than freezing -12. */
.bw-project-screen--b4 .bw-player-handle {
  top: -5px;
  left: calc((var(--bw4-pad-x) + 4px) * -1);
}
/* The dots are internal to the handle, so they no longer depend on where it is seated —
   2156:6839 centres the 9.008 x 7.834 block at (50% + 2, 50% + 2.45) of the 24.692 ellipse,
   i.e. (14.346, 14.796) from its corner. Less half the block: (9.842, 10.879). */
.bw-project-screen--b4 .bw-hdots {
  left: 9.842px;
  top: 10.879px;
}
/* THE WINDOW ROW AND THE STILL SHARE ONE WIDTH, so their right edges coincide by
   construction rather than by two numbers that happen to match — the base gives both 216
   independently. --bw4-still-w is that width, spent by both.

   AND THE CLOSE ICON'S RIGHT PADDING COMES OFF (2069:11579). Its mark is centred in a
   square box, so the box's right edge sits beyond the ink and the row looked short of the
   still even when the two boxes aligned. The negative margin is that inset, derived from
   the asset's own geometry rather than measured.

   THE NUMBER IS THE X's RIGHT EDGE, NOT A DISC's. This icon has no disc — its X is a
   positively drawn mark like every other graphic on the screen — so the rightmost ink is
   the mark itself, at 12.702 of the 21-unit viewBox rendered into --bw-win-size. The
   remainder is what to pull back, and changing the icon size moves it correctly. */
.bw-project-screen--b4 .bw-window,
.bw-project-screen--b4 .bw-hero { width: var(--bw4-still-w); }
.bw-project-screen--b4 .bw-win-icon:last-child {
  margin-right: calc(var(--bw-win-size) * -1 * (1 - 15.91559 / 21));
}

/* THE CLOSE ICON IS NOT GIVEN THE NODE'S 12 x 21 BOX, and that is the squash fix. Its
   artwork is a round disc in a 21-unit square viewBox; 2069:11588 renders it into a
   12-wide by 21-tall frame, which stretches the circle into an ellipse — the node
   compensates with an img inset of left:-4.17%, i.e. it draws the artwork wider than
   its own box. Rather than reproduce a box and then undo it, this screen simply lets
   close take the same square 20.5 its two siblings get from the base, so all three are
   one size and one shape. No rule needed — the override is its ABSENCE, recorded here
   so nobody restores the node's box without knowing what it does.

   All three assets are forked: min and max to a #D3CCC7 disc with a #FBF5F2 glyph, close
   to the inverse. See the asset headers. */

/* TWO AUTHORITIES, because one flex row cannot both centre the buttons and pin the readout
   left. The group centres its one IN-FLOW child — the transport — and the timestamp comes
   out of flow. The previous arrangement (row-reverse + justify-end) packed BOTH to the
   left, which is why the controls were not centred.

   THE TIMESTAMP ALIGNS WITH "Dream Crazy", AND THE DERIVATION GOT SHORTER. Under 2140:6073
   the player and the chips are children of one column with one inset, so both start at the
   panel's content edge and that edge cancels out of the sum:

     title TEXT = box pad 8 + the pill's own 4.66   -> 12.66 from the panel's content edge
     group      =                                       0    from the panel's content edge

   so the readout needs 12.66 inside the group. The number is what it was under the stacked
   build, but it no longer counts the player's own padding, because the player no longer has
   any. It aligns TEXT TO TEXT, not box to box: the title pill's fill is
   rgba(255,255,255,0.01), so the pill itself is invisible and the glyphs are the only edge
   there is to line up with. Expressed as the sum rather than as 12.66, so it follows if the
   box padding or the pill's own moves. */
.bw-project-screen--b4 .bw-controls-group {
  position: relative;
  width: 100%;
  justify-content: center;
}
.bw-project-screen--b4 .bw-timestamp {
  position: absolute;
  left: calc(var(--bw4-pad-x) + 4.66px);
  top: 50%;
  transform: translateY(-50%);
}
/* 2069:11606 — the readout takes the panel's mid-grey, a step lighter than the caption ink
   it used, so it sits back from the transport rather than competing with it. */
.bw-project-screen--b4 .bw-timestamp { color: #928686; }
/* THE PLAYER HANDLE IS FLAT #D3CCC7. The base gives the corner tab rgba(64,62,60,0.4) and
   an inset highlight, both authored to lift it off the #221016 ground; on this player they
   read as a smudge with a bevel. Flat fill, no shadow — the same tone the transport and
   window icons carry, so the player's whole chrome is one colour. */
.bw-project-screen--b4 .bw-player-handle {
  background: #d3ccc7;
  box-shadow: none;
}

/* THE TRANSPORT GLYPHS ARE FORKED DARK. The shared button-*.svg are #F6EBE4 at 40% —
   cream, authored for the #221016 ground — and vanish on this player (#FBF5F2). The b4
   forks are flat #D3CCC7 with their inner-shadow filters stripped — one tone, no effects,
   matching the window icons' discs and the handle. Same fork-not-edit reasoning as the menu
   and close icons. */

/* =========================================================================
   INFLUENCES — 2140:6123 / 6136 / 6181 / 6203 / 6239 / 6252. SIX BOXES, ONE TREATMENT.

   THE 1-3 / 4-6 SPLIT IS GONE. It was real under 2067:5808, where boxes 4-6 kept the
   base's bordered-no-fill treatment and only 1-3 took the wash — that inheritance is
   what gave --n8 a job on this screen. 2140:6073 paints all six the same:
   rgba(255,255,255,0.4), p-8, radius 16, the glass inset pair, no border. So the class
   that carried the split is dropped from this screen's markup rather than shipped with
   no rule behind it, exactly as --ab was.

   The chips follow the boxes. Boxes 4-6 were inheriting the base's dark chips —
   rgba(64,62,60,0.4) at radius 11.185 with cream ink, authored for the #221016 ground —
   and the node gives every chip in the panel the white-60% pill instead, so the chip
   rule below drops its --n8 scope with them.

   Only the corner still varies: box 1 rounds at 8, boxes 2-6 at 16.
   ========================================================================= */
/* All six. The inset pair is 2140's own (inset 1px 1px 2px white-30 over
   inset -1px -2px 2px white-10) — a lit top-left edge and a soft bottom-right one, which
   is what separates one wash from the next now that no border does. */
.bw-project-screen--b4 .bw-inf-box {
  border: 0;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 1px 1px 2px 0 rgba(255, 255, 255, 0.3),
    inset -1px -2px 2px 0 rgba(255, 255, 255, 0.1);
}
/* Box 1 alone — 2140:6123 rounds it 8 where the other five are 16. */
.bw-project-screen--b4 .bw-inf-box--r8 { border-radius: 8px; }

/* Title pills, every box: the node's near-nothing fill with dark ink, and no glass.
   The base's triple inset was authored to lift cream off #221016; on cream it only
   fogs the edge. */
.bw-project-screen--b4 .bw-inf-title {
  background: rgba(255, 255, 255, 0.01);
  color: rgba(34, 16, 22, 0.85);
  box-shadow: none;
}
/* Chips and name pills, EVERY BOX — one object, radius 8 (NOT the base's 11.185: this
   node squares them up), dark-grey ink. The name pills give up the glass-pill treatment
   entirely and take the chip's geometry. Scoped through .bw-inf-box rather than to the
   screen, so it cannot reach a .bw-chip that turns up elsewhere on it. */
.bw-project-screen--b4 .bw-inf-box .bw-chip,
.bw-project-screen--b4 .bw-inf-box .bw-name {
  padding: 2.796px 5.592px;
  border-radius: 8px;
  /* WHITE AT 60%. Walked up from the node's 30% through 50%: at 30% these composited to
     #FCF8F5 against the box's #FBF5F2, three levels apart and under what an 8px pill needs
     to hold an edge. Still translucent, so they pick the box up rather than sitting on it
     as a second opaque tone. */
  background: rgba(255, 255, 255, 0.6);
  color: #928686;
  box-shadow: none;
}
/* SELECTED — 2128:1800. Same fill as its neighbours; the accent ink and the Regular
   weight are the whole of the mark. */
.bw-project-screen--b4 .bw-pair--active .bw-name {
  background: var(--bw-active-fill);
  color: #ff3567;
  font-weight: 400;
}

/* =========================================================================
   VIDEO-TRACKS — 2067:6010. The overflowing column.
   ========================================================================= */
.bw-project-screen--b4 .bw-tracks {
  width: 847.8909px;         /* 845 + the 2.8909 absorption; clips 24 at the frame */
  flex-shrink: 0;
  /* NO FILL ON THE COLUMN. 2067:6010 paints nothing — the cream in that region is the
     filmstrip panel and the four rows, each an island on the #D3CCC7 ground, and the
     gaps between them show the ground through. Giving the column a fill also hides the
     track labels, which are near-white and rely on sitting ON the ground. */
  background: none;
  gap: 4.66px;               /* the node's Track-selected -> Track-secondary gap */
  padding: 0;
}
/* THE ROWS ARE THE FULL COLUMN — no inset. This is the handle-position change: with
   no left padding on the column, the handle sits on the column's own left edge. */
.bw-project-screen--b4 .bw-track-selected,
.bw-project-screen--b4 .bw-track-secondary,
.bw-project-screen--b4 .bw-track { width: 100%; }
.bw-project-screen--b4 .bw-track-secondary { gap: 8px; }

/* The filmstrip panel is the same cream as its column — 2067:6011. */
.bw-project-screen--b4 .bw-track-selected {
  background: #f8efe9;
  box-shadow: none;
}
/* THE PLAYHEAD CLEARS THE MARKERS — the same fix Brandip2 took at ead151b, and this
   screen's own height. The base derives top = thumb-top + (strip-h - playhead-h)/2 and
   sizes the bar 84.581; 2067:6090 is 82.402 tall here, and the markers end at
   10.96 + 16.15 + 3.73 = 30.84 in row coordinates. Setting the top to 31.46 leaves the
   0.62 gap Brandip2's node authors between Progress-bar/verticle and Markers; the derived
   value put the bar at 31.03, i.e. 0.19 clear, which reads as touching at this scale.

   The height is read off this node rather than inherited: 82.402 against Brandip2's
   84.581. Two screens, two bars, one clearance rule. */
.bw-project-screen--b4 .bw-playhead {
  top: 31.46px;
  height: 82.402px;
}

/* Its ruler inverts with the ground it sits on: the base paints cream ink for
   #221016, the node paints #221016 for cream. The dot run's PITCH, radius and extent
   are the base's and must stay — a repeating tile must divide its box
   (Docs/RULES.md); only the ink changes. */
.bw-project-screen--b4 .bw-time { color: #221016; }
.bw-project-screen--b4 .bw-ruler-line,
.bw-project-screen--b4 .bw-marker { background: #221016; }
.bw-project-screen--b4 .bw-ruler-dots {
  background-image: radial-gradient(circle at 1.04857px 1.04857px,
                                    #221016 1.04857px, transparent 1.14857px);
}

/* TRACK LABELS — 2077:3436. Indented by the FULL gutter, not half of it, and in
   near-white: they sit on the #D3CCC7 ground, outside the cream rows, where
   Brandip2's sit on its cards. Regular weight, not Light. */
.bw-project-screen--b4 .bw-track-label {
  padding-left: var(--bw-gutter);
  color: #f8efe9;
  font-weight: 400;
  opacity: 1;
}
/* No active label on this screen — all four are painted alike. */
.bw-project-screen--b4 .bw-track-label--active {
  font-weight: 400;
  color: #f8efe9;
  opacity: 1;
}

/* THE ROWS — 2077:3438. #F6EBE4, a half-step warmer than the cards around them, and
   they clip so the handle box takes their corner. */
.bw-project-screen--b4 .bw-wave-row,
.bw-project-screen--b4 .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;
  box-shadow: none;
  overflow: hidden;
}
.bw-project-screen--b4 .bw-wave-row {
  border-radius: var(--bw-row-radius) 0 0 var(--bw-row-radius);
}
/* HALF the row corner, derived — see --bw-row-radius. */
.bw-project-screen--b4 .bw-track--text .bw-text-row {
  border-radius: calc(var(--bw-row-radius) / 2) 0 0 calc(var(--bw-row-radius) / 2);
}

/* THE HANDLE CONTAINER — 2077:3440. White-40% with the triple inset stack, no radius
   of its own (the row clips it, so its outer corners ARE the row's). */
.bw-project-screen--b4 .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;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.4);
  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);
}
.bw-project-screen--b4 .bw-handle-box .bw-handle {
  position: static;
  transform: none;
}

/* THE WAVE CANVAS TAKES THE SOUNDWAVE AREA'S OWN INSET. Brandip2's starts at the
   gutter; this node's Soundwave frame carries px-4, so the canvas starts 4 later and
   ends 4 early. Both sides spend --bw4-wave-inset, and the six wave constants are
   derived from the width this leaves. */
.bw-project-screen--b4 .bw-wave-gl {
  left: calc(var(--bw-gutter) + var(--bw4-wave-inset));
  width: calc(100% - var(--bw-gutter) - (var(--bw4-wave-inset) * 2));
}
/* The Text strip's content follows the same inset so its dot run lines up with the
   wave above it. */
.bw-project-screen--b4 .bw-text-content {
  left: calc(var(--bw-gutter) + var(--bw4-wave-inset));
}

/* Captions and their timestamps — 2077:3xxx. The gaps (89/27/27/27) and the pair
   widths are the base's: they are TIME positions and the node did not move them. */
.bw-project-screen--b4 .bw-cap { color: #2f1d22; }
.bw-project-screen--b4 .bw-cap-time { color: #776868; }
.bw-project-screen--b4 .bw-text-dots {
  background-image: radial-gradient(circle at 1.05285px 1.04857px,
                                    rgba(47, 29, 34, 0.6) 1.04857px, transparent 1.14857px);
}
/* All four caption pairs share one alignment — the node's caption block is
   items-center, and the base carries a --start exception for "Good." alone that
   would read as an off-centre word here. */
.bw-project-screen--b4 .bw-cap-group--start { align-items: center; }
.bw-project-screen--b4 .bw-cap-group--start .bw-cap-time { height: 12.583px; }