/* /setup/<platform> pages and the "Get the files" kit on /buddy. Same rules as bb.css: paper and ink, the
   buddies bring the colour, no borders. The previews are <canvas>, drawn by kit.js, so what you see is the file. */

/* ---------------------------------------------------------------- hero */
.bb-setup__hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(16px, 4vw, 48px); }
.bb-setup__title { font-weight: 700; font-size: clamp(40px, 6vw, 76px); line-height: .92; letter-spacing: -.045em; margin: 0 0 18px; max-width: 12ch; text-wrap: balance; }
.bb-setup__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; margin: 0; max-width: 40ch; text-wrap: pretty; }
.bb-setup__fig { margin: 0; min-width: 0; }
.bb-setup__cap { margin: 12px 0 0; font-size: 13px; color: var(--bb-ink-2); }

.bb-setup__name { display: grid; gap: 8px; margin: 32px 0 0; max-width: 420px; }
.bb-setup__label { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.bb-setup__field { min-height: 48px; font-size: 18px; }
.bb-setup__field::placeholder { color: var(--bb-ink-2); opacity: .7; }
.bb-setup__field:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 2px; }
.bb-setup__hint { margin: 0; font-size: 13px; color: var(--bb-ink-2); }

/* the stage: the buddy in the platform's crop, then the same face where people meet it, small, beside a message */
.bb-stage { background: var(--bb-tint); border-radius: 16px; padding: clamp(24px, 4vw, 40px) 20px; display: grid; justify-items: center; gap: 28px; }
.bb-stage--three { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; }
.bb-crop { display: block; flex: none; line-height: 0; overflow: hidden; width: 96px; height: 96px; }
.bb-crop canvas, .bb-pv { display: block; width: 100%; height: 100%; }
.bb-crop[data-role='hero'] { width: 208px; height: 208px; }
.bb-crop--circle { border-radius: 50%; }
.bb-crop--squircle { border-radius: 22%; }   /* a stand-in for the host's own mask; the file itself is square */
.bb-mock { display: flex; align-items: center; gap: 12px; background: var(--bb-paper); border-radius: 12px; padding: 10px 16px 10px 10px; width: min(100%, 320px); }
.bb-mock__av.bb-crop { width: 44px; height: 44px; }
.bb-mock__txt { display: grid; min-width: 0; line-height: 1.3; }
.bb-mock__txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-mock__msg { font-size: 14px; color: var(--bb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-shape { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bb-shape__k { font: 12px/1.2 var(--bb-mono); color: var(--bb-ink-2); }

/* ---------------------------------------------------------------- files */
.bb-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.bb-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--bb-tint); border-radius: 12px; padding: 12px; }
.bb-file__pv { display: block; width: 44px; height: 44px; line-height: 0; }
.bb-file__pv--pad, .bb-file__pv--bleed { border-radius: 4px; overflow: hidden; }   /* the file is square: a thumbnail, not a crop */
.bb-file__txt { display: grid; gap: 2px; min-width: 0; }
.bb-file__txt b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.bb-file__txt .bb-mono { overflow-wrap: anywhere; }
.bb-file__spec { font-size: 13px; color: var(--bb-ink-2); }

.bb-dl {
  font: 600 15px/1 var(--bb-sans); color: var(--bb-paper); background: var(--bb-ink); border: 0; border-radius: 10px;
  min-height: 44px; min-width: 112px; padding: 0 18px; cursor: pointer; white-space: nowrap;
  transition: opacity 150ms var(--bb-ease-out), transform 100ms var(--bb-ease-out);
}
.bb-dl:hover { opacity: .88; }
.bb-dl:active { transform: scale(.98); }
.bb-dl:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.bb-dl[data-busy] { cursor: progress; }
.bb-dl--size { font: 500 13px/1 var(--bb-mono); color: var(--bb-ink); background: var(--bb-paper); min-width: 60px; padding: 0 12px; border-radius: 8px; }
.bb-dl--size:hover { opacity: 1; background: var(--bb-tint-2); }

/* the full kit: one card per crop */
.bb-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-kit__card { background: var(--bb-tint); border-radius: 16px; padding: 20px; display: grid; grid-template-rows: auto auto 1fr; gap: 16px; align-content: start; min-width: 0; }
.bb-kit__pv.bb-crop { width: 112px; height: 112px; }
.bb-kit__name { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bb-kit__name .bb-mono { font-weight: 400; color: var(--bb-ink-2); font-size: 12px; }
.bb-kit__txt p { margin: 0; font-size: 14px; color: var(--bb-ink-2); line-height: 1.45; }
.bb-kit__sizes { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.bb-setup__with { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 20px 0 0; font-size: 15px; }
.bb-setup__with span { color: var(--bb-ink-2); }
.bb-setup__with a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ---------------------------------------------------------------- steps, agents, limits */
.bb-steps { list-style: none; counter-reset: bb-step; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 64ch; }
.bb-steps li { counter-increment: bb-step; position: relative; padding-left: 44px; min-height: 28px; padding-top: 2px; }
.bb-steps li::before {
  content: counter(bb-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 13px/1 var(--bb-mono); background: var(--bb-ink); color: var(--bb-paper);
}
.bb-agents .bb-snip { max-width: 760px; }
.bb-agents .bb-snip + .bb-snip { margin-top: 12px; }
.bb-agents pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.bb-limits { width: 100%; }
.bb-section .bb-table-wrap:has(.bb-limits) { max-width: 760px; }
.bb-limits th[scope='row'] { font: 500 12px/1.3 var(--bb-mono); color: var(--bb-ink-2); text-align: left; vertical-align: top; padding: 11px 18px 9px 12px; width: 150px; white-space: nowrap; }
.bb-limits tbody tr:nth-child(odd) th { background: var(--bb-tint); border-radius: 8px 0 0 8px; }
.bb-limits tbody tr td:last-child { border-radius: 0 8px 8px 0; }
.bb-quick code { white-space: nowrap; }
.bb-stamp { margin: 16px 0 0; font-size: 13px; color: var(--bb-ink-2); max-width: 72ch; }
.bb-stamp a { color: var(--bb-ink-2); }

/* other platforms */
.bb-setup__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-setup__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bb-tint);
  text-decoration: none; font-size: 15px; transition: background-color 150ms var(--bb-ease-out);
}
.bb-setup__links a:hover { background: var(--bb-tint-2); }
.bb-setup__links a[aria-current='page'] { background: var(--bb-ink); color: var(--bb-paper); }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 900px) {
  .bb-setup__hero { grid-template-columns: minmax(0, 1fr); }
  .bb-kit { grid-template-columns: minmax(0, 1fr); }
  .bb-kit__card { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto; }
  .bb-kit__pv.bb-crop { width: 88px; height: 88px; }
  .bb-kit__sizes { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .bb-crop[data-role='hero'] { width: 160px; height: 160px; }
  .bb-file { grid-template-columns: 44px minmax(0, 1fr); }
  .bb-file .bb-dl { grid-column: 1 / -1; width: 100%; }
  .bb-limits th[scope='row'] { width: auto; white-space: normal; }
  .bb-stage--three .bb-crop { width: 72px; height: 72px; }
  .bb-stage--three { gap: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-dl, .bb-setup__links a { transition: none; }
  .bb-dl:active { transform: none; }
}

/* v1.2: the bleed file is a hard square. Show it square, with a faint dashed squircle over it where the
   host app will round it, so it can't be mistaken for the tile (which is rounded by itself). */
.bb-crop--bleed { position: relative; border-radius: 0; overflow: visible; }
.bb-crop--bleed::after { content: ''; position: absolute; inset: 0; border-radius: 22%; border: 1.5px dashed var(--bb-paper); opacity: .85; pointer-events: none; mix-blend-mode: normal; }
.bb-crop--bleed::before { content: ''; position: absolute; inset: 0; border-radius: 22%; border: 1.5px dashed var(--bb-ink); opacity: .35; pointer-events: none; transform: translate(.75px, .75px); }