/* The IBB on the Home page (Step 10c), inside the iPhone screen, from Figma (DESIGN.md,
   "IBB"): the Home page (8952:90593) as a screenshot, its chips (8952:90721) rebuilt over
   it, and the live IBB card in its slot, the station card (8958:92122) or the podcast
   card (8997:92258). Ported from the IBB fork's HomePhone.css, HomeChips.css, IBB.css and
   the reset in its index.css, with the class names prefixed ibb-, every colour in OKLCH
   and nothing marked important.

   Colours: the card's background is --player-bg, which colour.js sets on .ibb-screen from
   the artwork. Its text is the IBB's own white or dark, picked by data-text on
   .ibb-screen: white with the gradient, otherwise Color Thief's pick (surfaces.js). The
   rest of the page is fixed. The Plain card (.is-plain) is white, with dark text and a
   blue call to action.

   The IBB is one of the stage's surfaces, so every rule here is nested in
   [data-surface="ibb"], the stage's attribute while it shows the IBB (main.js). The
   screen's geometry is in app.css, with the Playbar's. */

[data-surface="ibb"] {

/* The fork's reset, which was global, kept to the IBB's screen. :where() keeps it below
   every rule here */
:where(.ibb-screen *) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- The screen --------------------------------------------------------------- */

.ibb-screen {
  /* The fork's colours, each the same sRGB colour in OKLCH (DESIGN.md, "IBB") */
  --ibb-white: oklch(0.97 0 0); /* the card's text on a dark colour or the gradient */
  --ibb-dark: oklch(0.296 0.03 273.6); /* … on a light colour, and on the Plain card */
  --ibb-blue: oklch(0.575 0.225 259.2); /* the Plain card's call to action */
  --ibb-page: oklch(0.951 0.015 277.8); /* the Home page's background in the screenshot */
  --ibb-chip: oklch(0.534 0.045 270.9); /* the chips' text and outline */
  --ibb-chip-selected: oklch(0.391 0.04 273.1); /* the selected chip */
  --ibb-text: var(--ibb-white);

  background: oklch(1 0 0);
  font: 16px -apple-system, BlinkMacSystemFont, "SF Pro", "Open Sans", "Segoe UI", sans-serif; /* the fork's page font */
  -webkit-font-smoothing: antialiased;
}

.ibb-screen[data-text="black"],
.ibb-screen.is-plain { --ibb-text: var(--ibb-dark); }

/* The Figma frame is 393 × 852: scaled up to the screen's height, 2 pt under the bezel
   at the top and the bottom, and centred */
.ibb-page {
  position: absolute;
  top: 0;
  left: 50%;
  width: 393px;
  height: 852px;
  transform: translateX(-50%) scale(1.0305);
  transform-origin: top center;
}

.ibb-design {
  display: block;
  width: 393px;
  height: 852px;
}

/* --- The chips, over the pills in the screenshot: Figma's Chips at y 88, 393 × 66 ---- */

.ibb-chips {
  position: absolute;
  top: 88px;
  left: 0;
  width: 393px;
  height: 66px;
  padding: 16px;
  overflow: hidden;
  background: var(--ibb-page);
}

.ibb-chips-list {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ibb-chip {
  flex-shrink: 0;
  /* Figma's 8 / 16 padding includes its inside 1 pt stroke */
  padding: 7px 15px;
  border: 1px solid var(--ibb-chip);
  border-radius: 24px;
  background: oklch(1 0 0);
  color: var(--ibb-chip);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.ibb-chip.is-selected {
  border-color: var(--ibb-chip-selected);
  background: var(--ibb-chip-selected);
  color: oklch(1 0 0);
  line-height: 18px;
}

/* --- The slot: where the card sits in the screenshot ---------------------------- */

.ibb-slot {
  position: absolute;
  top: 473px;
  left: 16px;
  isolation: isolate;
}

/* Hides the card baked into the screenshot while the colour fades in. It reaches 2 pt
   past the card so the card's anti-aliased edge sits on the page's colour; if the edges
   lined up, the dark card underneath would show as a faint grey border */
.ibb-slot::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 6px;
  background: var(--ibb-page);
}

/* The podcast card is 8 pt taller than the slot, so it overhangs 4 pt at the top and the
   bottom (12 pt gaps instead of 16) */
.ibb-slot.is-podcast { top: 469px; }

/* --- The card ----------------------------------------------------------------- */

/* The colour and the text fade over the Playbar's 500 ms; the fork's colour took 300 */
.ibb-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 361px;
  min-width: 280px;
  max-width: 599px;
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  color: var(--ibb-text);
  background-color: var(--player-bg);
  transition: background-color 500ms ease, color 500ms ease;
}

/* The gradient (Figma "Gradient", 8958:92108): a black radial overlay from the top right,
   over the colour and under the content, on with the Gradient setting (B), on by default
   (surfaces.js). Black at 30% out to 0.348 of its radius, then to 100% at 0.904. It's
   skewed, which a CSS radial-gradient can't draw, so it stays Figma's SVG, stretched to
   the card. Its lightest stop, 0.3, is the IBB's gradientLightest (surfaces.js). It fades
   with the colour */
.ibb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 361 124' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-34.31 12.4 -34.31 -11.504 343.1 -0.000010894)'><stop stop-color='black' stop-opacity='0.3' offset='0.34808'/><stop stop-color='black' offset='0.90381'/></radialGradient></defs></svg>") 0 0 / 100% 100%;
  opacity: 0;
  transition: opacity 500ms ease;
}

.ibb-screen.has-gradient .ibb-card::before { opacity: 1; }

.ibb-screen.is-plain .ibb-card { background-color: oklch(1 0 0); }

/* Podcast card (Figma 8997:92258): 132 pt tall, the Plus badge over the artwork's top
   right corner */
.ibb-card.is-podcast { height: 132px; }

.ibb-artwork {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 4px;
  object-fit: cover;
}

.ibb-artwork-wrap {
  position: relative;
  flex-shrink: 0;
  padding-top: 8px;
}

.ibb-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 33px;
  height: 32px;
}

.ibb-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.ibb-text {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 4px;
}

/* The text and the call to action are centred as one block, so the space above and
   below is always equal */
.ibb-action {
  display: flex;
  align-items: center;
}

.ibb-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibb-description {
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
}

/* The call to action keeps its 44 pt touch target but takes up only its 20 pt of text in
   the layout */
.ibb-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -12px 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.ibb-screen.is-plain .ibb-cta { color: var(--ibb-blue); }

/* The chevron SVG is a mask filled with the call to action's colour, so the two always
   match. The station's is Chevron Down turned to point right, at 60% */
.ibb-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: var(--chevron) center / contain no-repeat;
}

.ibb-chevron-down {
  --chevron: url("../assets/ibb/chevron-down.svg");
  transform: rotate(-90deg) scale(0.6);
}

.ibb-chevron-right { --chevron: url("../assets/ibb/chevron-right.svg"); }

} /* [data-surface="ibb"] */