/**
 * Brand-kit surfaces in the image picker (LN-10 slice A).
 *
 * TWO THINGS, both inside the picker's collection scroller:
 *   • `.pb-kit-head`     — the open kit's header card, a sibling ABOVE the grid
 *   • `.pb-kit-palette`  — the swatch strip on a kit FOLDER's poster
 *
 * Everything here reads `--pb-*` tokens and nothing mints a value. The card is
 * built from `--pb-surface-2` + `--pb-border-soft` rather than `--pb-surface` +
 * `--pb-border`, so it reads as a raised region INSIDE the dialog rather than
 * as a second dialog stacked in the scroller.
 *
 * Loaded after `collection.css` and `media-kit.css` in index.html: the folder
 * poster rules below layer on top of the collection poster, and source order is
 * what settles that rather than a specificity contest.
 */

/* ── The header card ────────────────────────────────────────────────────── */

.pb-kit-head {
  display: grid;
  /* Mark, then the flexible identity column, then the action stack. The action
     column is `auto` so the button sizes to its label — a percentage track
     would wrap "Apply this kit to the project…" at the first narrow dialog. */
  grid-template-columns: 84px 1fr auto;
  gap: var(--pb-space-6);
  align-items: start;
  padding: var(--pb-space-6);
  margin-bottom: var(--pb-space-6h);
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-border-soft);
  border-radius: var(--pb-radius-lg);
}

/* A narrowed picker (purpose: og / logo / app-icon) borders in the accent,
   because in that context the card is an OFFER the user did not come for and
   has to be findable without competing with the grid it sits above. */
.pb-kit-head.is-narrowed {
  border-color: var(--pb-accent);
}

.pb-kit-head-mark {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pb-space-5);
  border-radius: var(--pb-radius-md);
  box-shadow: var(--pb-shadow-thumb);
  overflow: hidden;
}

/* `contain`, and never past natural size. A kit mark is a wordmark as often as
   it is a glyph, and cropping one to a square is the failure the shared
   asset-fit rule exists to prevent. */
.pb-kit-head-mark img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pb-kit-head-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
}

.pb-kit-head-name {
  font-size: var(--pb-font-2xl);
  font-weight: 600;
  color: var(--pb-text-bright);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pb-kit-head-facts {
  display: flex;
  align-items: center;
  gap: var(--pb-space-3);
  flex-wrap: wrap;
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
  font-variant-numeric: tabular-nums;
}

.pb-kit-head-facts .sep {
  color: var(--pb-text-faint);
}

/* ── Palette swatches ───────────────────────────────────────────────────── */

.pb-kit-swatches {
  display: flex;
  gap: var(--pb-space-3);
  flex-wrap: wrap;
}

.pb-kit-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--pb-space-3);
  padding: var(--pb-space-1) var(--pb-space-3) var(--pb-space-1) var(--pb-space-1);
  background: var(--pb-surface);
  border: 1px solid var(--pb-border-soft);
  border-radius: var(--pb-radius-pill);
  font-family: var(--pb-font-family-mono);
  font-size: var(--pb-font-xs);
  color: var(--pb-text-dim);
}

/* The inset ring rather than a border: a border on a light swatch in the light
   register is invisible against the chip, and #ffffff is a colour a brand
   palette really carries. */
.pb-kit-swatch i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--pb-border-strong);
}

/* ── The action stack ───────────────────────────────────────────────────── */

.pb-kit-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pb-space-3);
  text-align: right;
}

.pb-kit-fills {
  margin: 0;
  max-width: 24ch;
  font-size: var(--pb-font-sm);
  line-height: 1.5;
  color: var(--pb-text-dim);
}

.pb-kit-head.is-narrowed .pb-kit-fills {
  color: var(--pb-text);
}

/* ── The turntable preview (LN-10 slice B) ──────────────────────────────────
   A PLAYER in the header's action column, never a grid card: the byte proxy
   refuses the key (no Range support), so a card would be an affordance offered
   where it cannot act. It plays from LogoNuri's public origin. The frame is
   deliberately dark in BOTH registers — turntables are rendered against a dark
   stage, and a theme-following background would put a dark video in a light
   box in the light register. */

.pb-kit-turntable {
  position: relative;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: var(--pb-radius-md);
  overflow: hidden;
  background: #0d1117;
  box-shadow: var(--pb-shadow-thumb);
}

.pb-kit-turntable video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-kit-turntable-label {
  position: absolute;
  inset: auto 0 0 0;
  font-size: var(--pb-font-xs);
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 0;
  pointer-events: none;
}

/* ── The folder poster's palette strip ──────────────────────────────────── */

/* Pinned to the poster's bottom edge so it reads as a property OF the folder
   rather than as a row beside it. The palette is the recognition cue at
   thumbnail size — a mark is small and often monochrome; the colours are not.

   `aria-hidden` in the DOM, and no text: the same colours are already stated
   as hexes in the header card once the folder is open, and announcing five
   unnamed swatches before the kit's name is noise. */
.pb-kit-palette {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  height: 10px;
  pointer-events: none;
}

.pb-kit-palette > span {
  flex: 1;
  min-width: 0;
}

/* ── Narrow dialogs and phones ──────────────────────────────────────────── */

/* The three-column grid cannot survive a phone sheet: 84px + identity + a
   full-width button leaves the action column about six characters wide. It
   becomes one column, and the action stack un-right-aligns — a right-aligned
   button under left-aligned text reads as belonging to neither. */
@media (max-width: 640px) {
  .pb-kit-head {
    grid-template-columns: 56px 1fr;
    gap: var(--pb-space-5);
    padding: var(--pb-space-5);
  }

  .pb-kit-head-mark {
    width: 56px;
    height: 56px;
    padding: var(--pb-space-3);
  }

  /* In the stacked phone layout the player joins the full-width action column;
     left-anchored like the text, and smaller — it is an ornament there. */
  .pb-kit-turntable {
    width: 56px;
    height: 56px;
    align-self: flex-start;
  }

  .pb-kit-head-actions {
    grid-column: 1 / -1;
    align-items: stretch;
    text-align: left;
  }

  .pb-kit-fills {
    max-width: none;
  }
}