/* =========================================================================
   BRANDIP5 — INTRO-1's SEVENTH project screen, at the bottom below Brandip4.
   The fifth Brandip design iteration.

   DESIGN GUIDE, NOT A SOURCE: Figma LrUdy5WZmi3n2gkRz9SEC2 node 2129:3368
   "Brandip5-1093x600" (wrapper 2137:5311, Body 2129:3380, panel-left 2142:6270,
   Player 2142:6271, influences 2142:6318, Panel-main 2129:3575).

   A FORK ON BRANDIP4'S PATTERN: its own modifier over the LOCKED base, its own root in
   the wave GEOM table, and no relationship to either variant sheet. Three screens now
   share css/pellmell-intro-brandip.css and nothing else, so none can move the others.
   ========================================================================= */

/* =========================================================================
   WHAT RESTRUCTURES AGAINST BRANDIP4

   THE HEADER IS INSIDE A WRAPPER, not a sibling of the body. 2137:5311 holds the header
   and the Body on a gap-16, where Brandip4 has both as children of the frame and the
   header carries its own bottom margin. So the header-to-body distance is owned by ONE
   value here instead of being a margin that has to agree with something.

   THE PLAYER LEAVES THE PANEL. In Brandip4 the player is a 232-wide box inside a
   248-wide padded panel. Here 2142:6270 is a bare 248 column holding two 248-wide
   siblings stacked flush:

     Player            2142:6271   #776868, px-8, rounded TOP corners only
     influences panel  2142:6318   #F8EFE9, p-8,  rounded BOTTOM corners only

   They read as one card split in two — a dark head over a cream body — which is why
   neither rounds the edge where they meet, and why the column itself has no fill or
   padding. Brandip4's single pale card with a wash-filled player is gone.

   THE TRACK-VIDEO PANEL INVERTS. 2129:3576 is #776868 where Brandip4's is cream. Its
   column (Panel-main 2129:3575) has NO fill on either screen — the ground shows between
   the rows.

   THE INFLUENCES BOXES GO UNIFORM. All six are white-40% at p-8 with no borders. Brandip4
   splits them 1-3 filled / 4-6 bordered, and Brandip2 splits them differently again; this
   node draws no distinction at all, so --n8 and --ghost/--ghost2 all resolve to one rule.

   WHAT IS INHERITED: the whole markup contract, the player's internals, the ruler and
   Text-strip geometry, the row and handle treatment, and the frame — #D3CCC7 with the
   0.25px hairline, pl-16 pt-16, and the same 16 + 248 + 8 + 845 body that overflows and
   clips by 24.
   ========================================================================= */

.bw-project-screen--b5 .bw-screen {
  background: #d3ccc7;
  /* 2129:3368's hairline, as an inset shadow — a border on a fixed-width box would eat
     0.5px of the internal 1095.8909 or have to be added back to it. */
  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 both variants for theirs. */

  --bw-active-fill: rgba(255, 255, 255, 0.6);
  /* The columns' inner inset — the influences card and the player both spend it. */
  --bw5-pad: 8px;
  /* The soundwave area's own inset (px-4), which FEEDS THE WAVE: the field is the row
     less --bw-gutter less twice this, so moving it re-derives the six constants in
     js/pellmell-intro-brandip-wave.js. */
  --bw5-wave-inset: 4px;
  /* The card corner, spent by the player's top and the influences card's bottom so the
     two halves cannot round differently. */
  --bw5-card-radius: 16px;
  /* THE PLAYER'S OWN BOX, and its inner width DERIVED from it. The window row, the still
     and the transport row all span the inner width, so their edges are the player's edges
     by construction — the icons land on its right inset, the controls centre on its middle,
     and none of the three restates a position. The base pins all three at 216 as
     independent literals, which is 16 short of this player's content box. */
  --bw5-player-w: 248px;
  --bw5-player-inner: calc(var(--bw5-player-w) - var(--bw5-pad) * 2);
  /* The corner handle's box — the base's own 24.692, named here so the dot centring can
     derive from it instead of restating the number. */
  --bw5-handle-size: 24.692px;
  /* The window icons' box — the base's 21 for the last child, named so the close icon's
     flush-right pull can derive from it rather than restating a number. */
  --bw5-win-size: 21px;
}

/* =========================================================================
   WRAPPER + HEADER — 2137:5311 / 2129:3369.
   ========================================================================= */
.bw-project-screen--b5 .bw-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;                 /* the node's own; it owns the header-to-body distance */
  padding: 16px 0 0 16px;    /* the frame's pl-16 / pt-16 */
}
.bw-project-screen--b5 .bw-titlerow {
  /* 2129:3370 sits at x8 inside a header that starts at the frame's 16, so the logo lands
     on 24. The wrapper supplies the 16; this supplies the 8. */
  margin: 0 0 0 var(--bw5-pad);
  padding-left: 0;
  height: 24px;
  align-items: flex-end;     /* the wordmark sits on the chip's bottom edge */
}
.bw-project-screen--b5 .bw-menu { transform: scaleY(-1); }
.bw-project-screen--b5 .bw-logo { color: #221016; }

/* =========================================================================
   BODY — 2129:3380. Gap 8, and it overflows the frame; the clip is authored.
   ========================================================================= */
.bw-project-screen--b5 .bw-body {
  gap: 8px;
  padding-left: 0;           /* the wrapper carries the frame's 16 now */
  align-items: stretch;
}

/* THE LEFT COLUMN IS BARE — 2142:6270. It holds one child now, the card below. */
.bw-project-screen--b5 .bw-panel-left {
  width: 248px;
  box-sizing: border-box;
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  box-shadow: none;
}

/* THE PLAYER IS AN ITEM IN THE INFLUENCES STACK — 2148:6638. It is no longer a sibling
   above the card, and no longer the card's dark head: it sits INSIDE the stack as its first
   entry, the same 232 width as the boxes below it, sharing the stack's 4px gap and taking a
   radius of its own on all four corners. So the split-card construction shipped at dc016ff
   is gone — the card is whole again and the player is one of its contents. */
.bw-project-screen--b5 .bw-player {
  width: var(--bw5-player-inner);
  height: 261.939px;
  box-sizing: border-box;
  background: #776868;
  border-radius: 8px;
  padding: 0 4.66px 4.66px;
  align-items: center;
  box-shadow: none;
  overflow: hidden;
}
/* Its three rows still span its own inner box, derived — see --bw5-player-inner. The box is
   narrower now (232 less 2 x 4.66) because the player's own padding changed with it. */
.bw-project-screen--b5 .bw-window,
.bw-project-screen--b5 .bw-hero { width: 216px; }
/* THE CLOSE ICON LOSES ITS RIGHT PADDING so the icon SET is flush with the still below it.
   Both are 216 and centred, so their BOXES already align — but the close icon's disc is
   centred in a square box and leaves 5.084 of empty box to its right, which made the row
   read short of the still. The pull-back is exactly that gap, derived from the asset: the
   disc ends at (10.3232 + 5.59239) of a 21-unit viewBox rendered into --bw5-win-size, and
   the remainder is what to take back. Change the icon size and the pull follows. */
.bw-project-screen--b5 .bw-win-icon:last-child {
  margin-right: calc(var(--bw5-win-size) * -1 * (1 - 15.91559 / 21));
}
.bw-project-screen--b5 .bw-controls { width: 216px; align-self: center; }
.bw-project-screen--b5 .bw-timestamp { color: #928686; }
/* The transport row centres on the player and the readout sits at its left edge — two
   authorities, as on Brandip2. */
.bw-project-screen--b5 .bw-controls-group {
  position: relative;
  width: 100%;
  justify-content: center;
}
.bw-project-screen--b5 .bw-timestamp {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
/* THE HANDLE'S BACKGROUND CIRCLE IS #403E3C AT 40% — the same fill the window icons' discs
   carry, so every chrome element on this player is one treatment. */
.bw-project-screen--b5 .bw-player-handle {
  background: rgba(64, 62, 60, 0.4);
  box-shadow: none;
}
/* AND ITS DOTS CENTRE ON THE VISIBLE TAB, which is not the same as centring on the circle.
   The player clips the handle: it is seated at left -6.07 / top -5.13, so only the part from
   6.07 / 5.13 rightward and downward survives. Centring on the circle's own middle therefore
   reads UP-LEFT, and the base's original offset reads slightly down-right. The centre of
   what is actually on screen is ((6.07 + 24.692) / 2, (5.13 + 24.692) / 2) in handle
   coordinates, less half the 9 x 8 dot block. Derived from the seat and the two box sizes,
   so it follows if any of them move. */
.bw-project-screen--b5 .bw-hdots {
  left: calc((6.07px + var(--bw5-handle-size)) / 2 - 4.5px);
  top: calc((5.13px + var(--bw5-handle-size)) / 2 - 4px);
}

/* THE CARD — 2142:6318. p-8, #F8EFE9, and the node still rounds its BOTTOM corners only. */
.bw-project-screen--b5 .bw-inf-panel {
  width: 248px;
  box-sizing: border-box;
  background: #f8efe9;
  /* ALL FOUR CORNERS. The node rounds the bottom two only, left over from the split
     construction; with the player back inside the card there is nothing above it, so a
     square top would leave the column starting on a hard edge. */
  border-radius: var(--bw5-card-radius);
  padding: var(--bw5-pad);
  overflow: hidden;
}
.bw-project-screen--b5 .bw-influences { gap: 4px; width: 100%; }

/* =========================================================================
   INFLUENCES BOXES — ALL SIX ARE ONE OBJECT. 2142:6320/6333/6378/6400/6436/6449 are each
   white-40% at p-8 with no border, so the class distinctions the other two screens carry
   (--n8, --ghost, --ghost2) all resolve to the same rule here. They stay in the markup as
   a record of how the node groups its boxes; only box 1's corner differs.
   ========================================================================= */
.bw-project-screen--b5 .bw-inf-box,
.bw-project-screen--b5 .bw-inf-box--ghost,
.bw-project-screen--b5 .bw-inf-box--ghost2,
.bw-project-screen--b5 .bw-inf-box--n8 {
  border: 0;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.bw-project-screen--b5 .bw-inf-box--r8 { border-radius: 8px; }

/* Title pills carry NO fill at all here — 2142:6321 is bare, where Brandip4 gives its
   titles a near-nothing white and Brandip2 an opaque one. Ink only. */
.bw-project-screen--b5 .bw-inf-title {
  background: none;
  color: rgba(34, 16, 22, 0.85);
  box-shadow: none;
}
/* Chips and name pills are one object: white-60%, radius 8 (not the base's 11.185). */
.bw-project-screen--b5 .bw-chip,
.bw-project-screen--b5 .bw-name {
  padding: 2.796px 5.592px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  color: #928686;
  box-shadow: none;
}
/* SELECTED — same fill as its neighbours; the accent ink and the Regular weight are the
   whole of the mark. Read off the node rather than assumed to track the chips. */
.bw-project-screen--b5 .bw-pair--active .bw-name {
  background: var(--bw-active-fill);
  color: #ff3567;
  font-weight: 400;
}

/* =========================================================================
   PANEL-MAIN — 2129:3575. No fill; the ground shows between the rows.
   ========================================================================= */
.bw-project-screen--b5 .bw-tracks {
  width: 847.8909px;         /* 845 + the base's 2.8909 absorption; clips 24 at the frame */
  flex-shrink: 0;
  background: none;
  gap: 4.66px;
  padding: 0;
}
.bw-project-screen--b5 .bw-track-selected,
.bw-project-screen--b5 .bw-track-secondary,
.bw-project-screen--b5 .bw-track { width: 100%; }
.bw-project-screen--b5 .bw-track-secondary { gap: 8px; }

/* THE FILMSTRIP PANEL INVERTS — 2129:3576 is #776868 where Brandip4's is cream, so its
   ruler keeps the base's cream ink rather than taking the dark ink Brandip4 needs. */
.bw-project-screen--b5 .bw-track-selected {
  background: #776868;
  box-shadow: none;
}
/* The HEIGHT is stated, not inherited — same correction as the light sheet. The base's
   .bw-playhead is the dark screen's strip box now, so riding it for the height cost this
   screen 8.58px. --bw-playhead-h is unchanged and still lives on .bw-screen. */
.bw-project-screen--b5 .bw-playhead {
  top: 31.46px;
  height: var(--bw-playhead-h);
}

/* Track labels sit on the #D3CCC7 ground, outside the rows — near-white, Regular. */
.bw-project-screen--b5 .bw-track-label,
.bw-project-screen--b5 .bw-track-label--active {
  padding-left: var(--bw-gutter);
  color: #f8efe9;
  font-weight: 400;
  opacity: 1;
}

/* The rows paint their own cream; the white-20% belongs to the SOUNDWAVE area only, from
   the gutter rightward, so the handle box has the row's own cream behind it. */
.bw-project-screen--b5 .bw-wave-row,
.bw-project-screen--b5 .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--b5 .bw-wave-row {
  border-radius: var(--bw5-card-radius) 0 0 var(--bw5-card-radius);
}
/* The Text track takes HALF the row corner, as on both other variants. */
.bw-project-screen--b5 .bw-track--text .bw-text-row {
  border-radius: calc(var(--bw5-card-radius) / 2) 0 0 calc(var(--bw5-card-radius) / 2);
}

/* The handle container: white-40%, the triple inset, no radius of its own — the row clips
   it, so its outer corners ARE the row's. */
.bw-project-screen--b5 .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--b5 .bw-handle-box .bw-handle {
  position: static;
  transform: none;
}

/* The wave canvas and the Text strip both take the soundwave area's own inset. */
.bw-project-screen--b5 .bw-wave-gl {
  left: calc(var(--bw-gutter) + var(--bw5-wave-inset));
  width: calc(100% - var(--bw-gutter) - (var(--bw5-wave-inset) * 2));
}
.bw-project-screen--b5 .bw-text-content {
  left: calc(var(--bw-gutter) + var(--bw5-wave-inset));
}

/* Captions and timestamps — the gaps (89/27/27/27) and pair widths are the base's; they
   are TIME positions and the node did not move them. */
.bw-project-screen--b5 .bw-cap { color: #2f1d22; }
.bw-project-screen--b5 .bw-cap-time { color: #776868; }
.bw-project-screen--b5 .bw-text-dots {
  background-image: radial-gradient(circle at 1.05285px 1.04857px,
                                    rgba(47, 29, 34, 0.6) 1.04857px, transparent 1.14857px);
}
.bw-project-screen--b5 .bw-cap-group--start { align-items: center; }
.bw-project-screen--b5 .bw-cap-group--start .bw-cap-time { height: 12.583px; }