/* The Brandip standalone page's editor screen for Nike SB's "Need That" (Figma 411:3028).
   Scoped by .bw-nt, which both pages' screens carry; pellmell-intro-brandip.css stays the base under it.
   Every value is the frame's. */

/* Spacing: 8 between the title row, the player and the panel; 8 between the tracks. The
   panel is 240 wide, under the 232 player, so the tracks start at 272 */
.bw-nt .bw-panel-left,
.bw-nt .bw-influences { width: 240px; }
.bw-nt .bw-player { height: 260.385px; }
.bw-nt .bw-panel-left { gap: 8px; }
.bw-nt .bw-tracks { gap: 8px; }

/* The hero (411:3055): the frame's crop of its 452 × 248 still, under a 10% black overlay */
.bw-nt .bw-hero-img {
  position: absolute;
  left: -130.42px;
  top: -17.07px;
  width: 452.052px;
  height: 248.04px;
  max-width: none;
  object-fit: fill;
}
.bw-nt .bw-hero-tint { background: rgba(0, 0, 0, 0.1); }

/* The labels are 18 tall, so a track is 98 and they fall 106 apart */
.bw-nt .bw-track-label { box-sizing: border-box; height: 18px; }

/* The video track (411:3272). Its 110.22-tall content is centred in the 127, so the
   timeline starts 8.39 down: labels at 10.39, ticks at 27.39, the line 3.73 under them,
   the 80.52 playhead at 38.09 and the 76-tall clips at 42.61, 1 apart */
.bw-nt .bw-track-selected { --bw-strip-h: 76px; }
.bw-nt .bw-ruler-row { top: -0.57px; }
.bw-nt .bw-marker { top: 16.43px; }
.bw-nt .bw-ruler-line { top: 20.16px; left: 0; width: 794.597px; }
.bw-nt .bw-thumbs { margin-left: 1.864px; gap: 1px; }
.bw-nt .bw-thumb { position: relative; height: 76px; aspect-ratio: auto; }
.bw-nt .bw-thumb--seq { width: 139.81px; }
/* each clip's crop inside its 139 × 76 frame, as the frame has it */
.bw-nt .bw-thumb [data-clip] { position: absolute; left: 0; width: 139px; }
.bw-nt .bw-thumb [data-clip="1"] { top: 0; height: 102.57%; }
.bw-nt .bw-thumb [data-clip="2"] { top: -19.74%; height: 121.21%; }
.bw-nt .bw-thumb [data-clip="3"],
.bw-nt .bw-thumb [data-clip="4"] { top: 0; height: 100%; object-fit: cover; }
.bw-nt .bw-thumb [data-clip="5"] { top: -0.51%; height: 110.08%; }
.bw-nt .bw-thumb [data-clip="6"] { top: -1.25%; width: 100.58%; height: 103.37%; }

/* The tracklist (411:4600): the dots 4 in from the gutter, then the tracks, 40 apart;
   name over time, 2 between, both centred, cream at 40% and the time at .8 of that */
.bw-nt-tracklist {
  position: absolute;
  left: var(--bw-gutter);
  top: 4px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 4px;
}
.bw-nt-tune {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 28px;
  font-size: 8px;
  font-weight: 300;
  line-height: normal;
  color: rgba(246, 235, 228, 0.4);
  text-align: center;
  white-space: nowrap;
}
.bw-nt-tune span + span { display: flex; align-items: center; height: 12.583px; opacity: 0.8; }

/* The panel (411:3088) */
.bw-nt .bw-projtitle { height: 48.92px; }
.bw-nt .bw-projtitle-note { display: flex; align-items: center; height: 14.46px; }
.bw-nt .bw-chip {
  box-sizing: border-box;
  height: 14.46px;
  line-height: normal;
  opacity: 1;                             /* the frame's .8 is on the text alone, so a fill stays full */
  color: rgba(246, 235, 228, 0.48);
}
.bw-nt .bw-inf-title { box-sizing: border-box; height: 14.46px; line-height: normal; }
.bw-nt .bw-chip--on { color: rgba(246, 235, 228, 0.8); }
/* the highlights: Realization (earned) and Surprise in ancillary blue, Awe in secondary yellow.
   Only once the tags have landed (.bw-nt-tags, js tagged()), so the default pass shows them plain;
   they fade back to plain and arrive at once, under the pills that land on them */
.bw-nt-tags .bw-chip--blue { background: rgba(80, 75, 239, 0.4); color: rgba(246, 235, 228, 0.8); }
.bw-nt-tags .bw-chip--awe { background: #e0ef4a; color: rgba(34, 16, 22, 0.8); }
.bw-nt [data-carry] { transition: background-color 0.6s ease, color 0.6s ease; }
.bw-nt-tags [data-carry] { transition: none; }
.bw-nt .bw-nt-chip14 { height: 14px; }
.bw-nt .bw-chip--lg { font-size: 8.389px; }
.bw-nt .bw-nt-box {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7.457px;
  padding: 8px;
  border-radius: 8px;
}
/* Emotions (411:3102): four groups, 8 apart; each a heading over rows 7.457 apart. A row
   doesn't wrap: Contrasting runs 3.75 past its 224, into the box's right padding */
.bw-nt .bw-nt-box--emo { gap: 8px; }
.bw-nt-emo { display: flex; flex-direction: column; gap: 7.457px; align-items: flex-start; }
.bw-nt-emo .bw-chip-row { flex-wrap: nowrap; align-items: flex-start; height: 14px; }
.bw-nt-emo .bw-nt-gap7 { gap: 7px; height: 14.457px; }
.bw-nt-emo-head {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5.592px;
  font-size: 8px;
  font-weight: 300;
  line-height: normal;
  color: rgba(246, 235, 228, 0.8);
  white-space: nowrap;
}
/* the outlined boxes, Influences and Collaborations: no fill, no glass */
.bw-nt .bw-nt-box--line {
  padding: 7px 4.592px 7px 7px;           /* 8 / 5.592 in the frame, its stroke inside them */
  border: 1px solid #403e3c;
  border-radius: 11.185px;
  background: none;
  box-shadow: none;
}
.bw-nt .bw-nt-box--tall {
  justify-content: center;
  height: 50.6px;
  padding: 0 8px;
  border-radius: 16px;
}
.bw-nt-inf-head { display: flex; align-items: flex-start; gap: 7px; }
.bw-nt-select {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4.66px;
  height: 14.46px;
  padding: 4.66px;
  border: 1px solid rgba(246, 235, 228, 0.1);
  border-radius: 8px;
  font-size: 8px;
  font-weight: 300;
  line-height: normal;
  color: rgba(246, 235, 228, 0.8);
  white-space: nowrap;
}
.bw-nt-select img { display: block; width: 5px; height: 10px; }

/* The pills carried from the film to the left pane's tags (js, THE TAGS CARRY): over the
   film, the Figma pill's label over its tag's, centred */
.bw-nt-carry {
  position: absolute;
  z-index: 301;
  overflow: hidden;
  pointer-events: none;
}
.bw-nt-carry span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: normal;
  white-space: nowrap;
}
.bw-nt-carry span:first-child { font-family: Inter, sans-serif; font-weight: 400; }
.bw-nt-carry span:last-child { font-weight: 300; }