/* Playbook-library styles.
 *
 * Additive to styles.css and loaded ONLY on /playbooks/* pages. The library reuses the site's
 * existing vocabulary wherever it exists: .playbook-card, .phase-pill, .playbook-badge,
 * .guide-*, .container, .btn, so a card in the library reads as the same object as a card on the
 * homepage. Everything here is prefixed `pb-` and is genuinely new: facets, the code block, the
 * structure table, the submission form.
 *
 * Custom properties are inherited from styles.css rather than redeclared, so a brand change there
 * carries through here with no edit. */

/* Screen-reader-only label, used by the search input. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* NO LEADING DOT ON PILLS. Ever, on these pages.
 *
 * `.guide-kicker` draws an orange circle via ::before unless you remember to add `.no-dot` at every
 * call site. Remembering is not a mechanism: three of the five kickers in the generator were
 * missing it, so the library index, the creator page and every category page shipped with a dot
 * nobody wanted. This stylesheet loads ONLY on /playbooks/*, so suppressing it here is scoped: any
 * kicker added to the generator in future is correct by default, with or without the class.
 */
.guide-kicker {
  gap: 0;
}
.guide-kicker::before {
  display: none;
}

.pb-hero {
  padding-bottom: 1.5rem;
}
.pb-hero .guide-breadcrumbs {
  margin-bottom: 1.25rem;
}
/* The library index leads with the word itself, at poster size, under the hand-drawn
   megaphone from the icon set. One word carries no kicker, so the pill above it is gone:
   the mark does the labelling the pill used to do. */
.pb-hero-mark {
  display: block;
  color: var(--ico-navy);
  margin-bottom: 0.5rem;
}
.pb-hero-mark .pp-ico {
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);
}
.pb-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 11vw, 8.25rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--pp-ink);
  margin: 0;
}
.pb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.pb-section-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
/* A heading that carries its own count. The library is bigger than a two-up grid of tall
   cards makes it look, so the number is said out loud rather than left to be scrolled for. */
.pb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.pb-section-head .pb-section-title {
  margin-bottom: 0;
}
.pb-count {
  font-size: 0.9rem;
  color: rgba(10, 28, 76, 0.55);
  font-variant-numeric: tabular-nums;
}

/* --- The two tiers, explained once at the top ------------------------------------------- */
.pb-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.pb-tier {
  border: 1px solid rgba(10, 28, 76, 0.1);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.6);
}
.pb-tier p {
  margin: 0.75rem 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(10, 28, 76, 0.72);
}

/* The provenance lockup: a mark, then "By <name>" reading as one line.
   `baseline` rather than `center` so the two cards' names sit on the same line even though their
   marks are different heights — the eye reads the pair as a set, and a 2px drift breaks that. */
.pb-tier-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pb-tier-by {
  font-size: 0.9rem;
  color: rgba(10, 28, 76, 0.55);
}
/* The same treatment .nav-brand-name gives the wordmark — display face, 800, tight tracking — so
   "Plainpaper" here IS the brand lockup rather than a lookalike, and "the community" is set as its
   deliberate counterpart rather than as body copy that happens to sit next to a logo. */
.pb-tier-name {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pp-navy, #0a1c4c);
}
.pb-mark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.pb-mark-logo {
  color: var(--pp-navy, #0a1c4c);
}
.pb-mark-logo svg {
  width: 30px;
  height: 30px;
  display: block;
}
/* The face cluster is wider than it is tall; sized by height so it optically matches the logo mark
   beside it rather than matching it in raw pixels. */
.pb-mark-faces svg {
  height: 30px;
  width: auto;
  display: block;
  overflow: visible;
}

@media (max-width: 30rem) {
  .pb-tier-name {
    font-size: 1.02rem;
  }
  .pb-mark-logo svg,
  .pb-mark-faces svg {
    height: 26px;
    width: auto;
  }
}

/* --- Cards ------------------------------------------------------------------------------- */
.playbook-name a {
  color: inherit;
  text-decoration: none;
}
.playbook-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: rgba(10, 28, 76, 0.55);
}

/* --- Facets ------------------------------------------------------------------------------ */
.pb-filters {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(10, 28, 76, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.pb-search input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid rgba(10, 28, 76, 0.16);
  border-radius: 10px;
  background: #fff;
}
.pb-search input:focus-visible {
  outline: 2px solid #0a1c4c;
  outline-offset: 1px;
}
.pb-facet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pb-facet-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 28, 76, 0.5);
  min-width: 5.5rem;
}
.pb-facet {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 28, 76, 0.16);
  background: #fff;
  color: rgba(10, 28, 76, 0.8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pb-facet:hover {
  border-color: rgba(10, 28, 76, 0.35);
}
.pb-facet[aria-pressed="true"] {
  background: #0a1c4c;
  border-color: #0a1c4c;
  color: #fff;
}
.pb-clear {
  align-self: flex-start;
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  color: #b83a73;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The facet wrapper is the grid child, so without this the card inside it keeps its content
   height and rows of three end up ragged. Stretching the card to the row makes the shelf read
   as a shelf. */
.pb-item {
  display: flex;
}
.pb-item > .playbook-card {
  flex: 1;
}
.pb-item[hidden] {
  display: none;
}
/* Full listings (the whole library, one publisher's shelf) go three-up once there is room.
   Two columns of 250px-tall cards showed about two and a half rows per screen, which read as
   a short list rather than the fourteen playbooks actually sitting there. The featured pair
   keeps the two-up .playbook-grid: it is a pair, and a third column would leave a hole. */
@media (min-width: 1080px) {
  .pb-results {
    grid-template-columns: repeat(3, 1fr);
  }
  .pb-results .playbook-card {
    padding: 22px;
    gap: 13px;
  }
  .pb-results .playbook-name {
    font-size: 19px;
  }
  .pb-results .playbook-body {
    font-size: 0.92rem;
  }
}
.pb-empty {
  color: rgba(10, 28, 76, 0.6);
  font-size: 0.95rem;
}

/* --- Category cards ---------------------------------------------------------------------- */
.pb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
}
.pb-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(10, 28, 76, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pb-cat-card:hover {
  border-color: rgba(10, 28, 76, 0.3);
  transform: translateY(-2px);
}
.pb-cat-name {
  font-weight: 650;
}
.pb-cat-blurb {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(10, 28, 76, 0.62);
}

/* --- Detail page ------------------------------------------------------------------------- */
.pb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.pb-verified {
  color: #2a9d8f;
  font-weight: 700;
}
.pb-verified-lg {
  font-size: 0.7em;
  vertical-align: middle;
}

.pb-cta {
  margin: 2rem 0;
  padding: 1.5rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(10, 28, 76, 0.12);
  background: rgba(10, 28, 76, 0.035);
}
.pb-cta p {
  margin: 0 0 0.9rem;
  line-height: 1.6;
}

/* The disclosure trigger. A <summary> styled as a button: native keyboard and screen-reader
   behaviour, opens with no JavaScript, and its contents are in the DOM for crawlers either way. */
.pb-cta-trigger {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #0a1c4c;
}
/* Both are needed: WebKit uses the pseudo-element, everyone else honours list-style. */
.pb-cta-trigger::-webkit-details-marker {
  display: none;
}
.pb-cta-trigger::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* translateY comes FIRST so it applies in the unrotated frame. Written as
     `rotate() translate()` the shift happens in the ROTATED space and drags the chevron
     diagonally into the label: which is exactly what it did. */
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.55;
}
.pb-cta[open] > .pb-cta-trigger::after {
  transform: translateY(0.12em) rotate(-135deg);
}
.pb-cta-trigger:focus-visible {
  outline: 2px solid #0a1c4c;
  outline-offset: 3px;
  border-radius: 4px;
}
.pb-cta-body {
  padding-top: 1rem;
}
.pb-cta-body > :last-child {
  margin-bottom: 0;
}
.pb-cta-note {
  font-size: 0.9rem;
  color: rgba(10, 28, 76, 0.65);
}
.pb-cta-code {
  border-color: rgba(184, 58, 115, 0.25);
  background: rgba(184, 58, 115, 0.05);
}

/* Once revealed, the code has to be readable and transcribable at a glance, monospace, wide
   tracking, real size. It is the key to the playbook, not the subject of the page, which is why it
   now lives behind the disclosure rather than above the fold. */
.pb-code {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(10, 28, 76, 0.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}
.pb-code-copy {
  font: inherit;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(10, 28, 76, 0.18);
  background: #fff;
  cursor: pointer;
}
.pb-code-copy:hover {
  border-color: rgba(10, 28, 76, 0.4);
}

.pb-structure {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.25rem 0 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(10, 28, 76, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.pb-structure-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
}
@media (max-width: 34rem) {
  .pb-structure-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}
.pb-structure-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 28, 76, 0.5);
}
.pb-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pb-type-chip {
  font-size: 0.82rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 28, 76, 0.14);
  background: #fff;
}
/* A card type backed by a deliverable produces a real, shippable artifact (an email, an ad) rather
   than a note. Marked so the structure list distinguishes "this board holds thinking" from "this
   board produces things". */
.pb-type-chip[data-deliverable] {
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.07);
}

.pb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.25rem 0;
}
.pb-tools-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 28, 76, 0.5);
  margin-right: 0.25rem;
}
.pb-tool-chip {
  font-size: 0.82rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 28, 76, 0.14);
  background: #fff;
  text-transform: capitalize;
}

.pb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.75rem;
}
.pb-tag {
  font-size: 0.8rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(10, 28, 76, 0.06);
  color: rgba(10, 28, 76, 0.7);
}
.pb-back {
  margin-top: 2rem;
}


/* --- Example board embed (detail pages) ------------------------------------------------------
   The live shared board (entry.example_board) in the app's ?embed=1 mode. The frame is sized by
   aspect ratio so it tracks the container, clamped so a phone never gets a letterbox slit and a
   wide desktop never gets a wall. The app supplies its own click-to-interact gate and attribution
   pill inside the frame — nothing here needs to manage interaction. */
.pb-board-embed {
  border: 1px solid rgba(10, 28, 76, 0.1);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}
.pb-board-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  max-height: 640px;
}
.pb-board-embed-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(10, 28, 76, 0.55);
}