/* The Claude Playbook: dark field-manual skin.
   Layers on site.css and uses its dark tokens, so the guide reads as the same
   publication as the essays, just in a different register. Phase 1 is teal,
   phase 2 is gold, because the guide's whole argument is that the second half
   is useless without the first. */

.pb {
  --p1: var(--accent);
  --p2: var(--gold);
  position: relative;
}

/* Atmosphere: a fine grain and one soft light source, so the dark ground has
   depth instead of reading as a flat black rectangle. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 78% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 5% 8%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.nav, .wrap, footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- THE MAP */
.pb-map { margin: clamp(30px, 5vw, 52px) 0 0; }
.pb-map-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.pb-map-title {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.pb-legend { display: flex; gap: 18px; font-size: 0.74rem; color: var(--ink-3); }
.pb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pb-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pb-legend .l1 { background: var(--p1); }
.pb-legend .l2 { background: var(--p2); }

.pb-track {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  padding-top: 26px;
}
/* the rail the stops sit on, drawn in on load */
.pb-track::before {
  content: "";
  position: absolute;
  top: 30px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--p1) 55%, transparent) 0%,
    color-mix(in srgb, var(--p1) 55%, transparent) 46%,
    var(--line-strong) 50%,
    color-mix(in srgb, var(--p2) 55%, transparent) 54%,
    color-mix(in srgb, var(--p2) 55%, transparent) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: pb-rail 1.1s cubic-bezier(.2, .7, .2, 1) 0.15s forwards;
}
@keyframes pb-rail { to { transform: scaleX(1); } }

/* the gate between chapter 4 and 5: the guide's own dependency claim, made visible */
.pb-gate {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); background: var(--ground); padding: 0 10px;
  border: 1px solid var(--line); border-radius: 100px; line-height: 1.9;
  white-space: nowrap; z-index: 2;
}

.pb-stop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; text-align: center;
  padding-top: 4px;
  opacity: 0; transform: translateY(10px);
  animation: pb-pop .5s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes pb-pop { to { opacity: 1; transform: none; } }
.pb-stop:nth-child(1) { animation-delay: .30s; }
.pb-stop:nth-child(2) { animation-delay: .38s; }
.pb-stop:nth-child(3) { animation-delay: .46s; }
.pb-stop:nth-child(4) { animation-delay: .54s; }
.pb-stop:nth-child(5) { animation-delay: .66s; }
.pb-stop:nth-child(6) { animation-delay: .74s; }
.pb-stop:nth-child(7) { animation-delay: .82s; }
.pb-stop:nth-child(8) { animation-delay: .90s; }

.pb-dot {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.02rem;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--stop-c, var(--line-strong));
  box-shadow: 0 0 0 6px var(--ground);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .18s;
}
.pb-stop[data-phase="foundation"] { --stop-c: var(--p1); }
.pb-stop[data-phase="leverage"]   { --stop-c: var(--p2); }
.pb-stop-label {
  font-size: 0.78rem; line-height: 1.35; color: var(--ink-2);
  transition: color .18s;
}
.pb-stop:hover .pb-dot {
  transform: translateY(-4px);
  background: var(--stop-c);
  color: #06100D;
  box-shadow: 0 0 0 6px var(--ground), 0 8px 22px -6px var(--stop-c);
}
.pb-stop:hover .pb-stop-label { color: var(--ink); }

.pb-stop.is-current .pb-dot {
  background: var(--stop-c); color: #06100D;
  box-shadow: 0 0 0 6px var(--ground), 0 0 0 8px color-mix(in srgb, var(--stop-c) 30%, transparent);
}
.pb-stop.is-current .pb-stop-label { color: var(--ink); font-weight: 600; }
.pb-stop.is-done .pb-dot { opacity: 0.72; }

/* compact variant used at the top of every chapter */
.pb-map.is-mini { margin: 22px 0 clamp(38px, 5vw, 58px); }
.pb-map.is-mini .pb-dot { width: 34px; height: 34px; font-size: 0.82rem; }
.pb-map.is-mini .pb-track { padding-top: 18px; }
.pb-map.is-mini .pb-track::before { top: 21px; }
.pb-map.is-mini .pb-stop-label { display: none; }
.pb-map.is-mini .pb-gate { display: none; }

@media (max-width: 760px) {
  .pb-track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  .pb-track::before { display: none; }
  .pb-gate { display: none; }
}

/* ---------------------------------------------------------------- CHAPTER CARDS */
.pb-phase-label {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(34px, 5vw, 52px) 0 18px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.pb-phase-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pb-phase-label b { color: var(--ph, var(--p1)); font-weight: 600; }

.pb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .pb-cards { grid-template-columns: 1fr; } }

.pb-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  text-decoration: none; color: inherit;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s;
}
.pb-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ph, var(--p1)); opacity: .55; transition: opacity .2s, width .2s;
}
.pb-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface-2); }
.pb-card:hover::after { opacity: 1; width: 5px; }
.pb-card-num {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 2rem; line-height: 1; color: var(--ph, var(--p1));
  opacity: .9;
}
.pb-card-title {
  display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.16rem; line-height: 1.25; margin-bottom: 7px;
}
.pb-card:hover .pb-card-title { color: var(--ph, var(--p1)); }
/* both are spans inside a span, so they must be told to be blocks or the read
   time runs on from the end of the description */
.pb-card-dek { display: block; color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; }
.pb-card-meta { display: block; margin-top: 12px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- CHAPTER PAGE */
.pb-chapter-head { position: relative; }
/* The ghost numeral sits behind the title. Note the :not() below: a bare
   `.pb-chapter-head > *` rule out-specifies `.pb-ghost` and silently drags it
   back into the flow, which pushes the whole header down the page. */
.pb-ghost {
  position: absolute; right: -8px; top: -30px;
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: clamp(5rem, 11vw, 8.5rem); line-height: 1;
  color: var(--ph, var(--p1)); opacity: .09; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  z-index: 0;
}
.pb-chapter-head > *:not(.pb-ghost) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- PROSE BLOCKS */
.prose h2 {
  font-size: clamp(1.32rem, 2.4vw, 1.62rem);
  margin: 2.1em 0 0.6em;
  padding-left: 14px;
  border-left: 3px solid var(--ph, var(--p1));
}
.prose h3 { font-size: 1.12rem; margin: 1.7em 0 0.5em; color: var(--ink); }

.g-note {
  margin: 2em 0; padding: 20px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ph, var(--p1));
  border-radius: 4px;
}
.g-note-label {
  display: block; margin-bottom: 9px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ph, var(--p1));
}
.g-note p { font-size: 1.01rem; line-height: 1.68; color: var(--ink-2); margin: 0 0 .7em; }
.g-note p:last-child { margin-bottom: 0; }

.g-paste {
  margin: 2.2em 0; border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--band); overflow: hidden;
}
.g-paste-head {
  padding: 12px 18px; background: color-mix(in srgb, var(--ph, var(--p1)) 12%, var(--band));
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ph, var(--p1));
}
.g-paste-body { padding: 18px; }
.g-paste-body p {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
  font-size: 0.9rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 .9em;
}
.g-paste-body p:last-child { margin-bottom: 0; }

.g-fig { margin: 2.2em 0; }
.g-fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2);
}
.g-fig figcaption { margin-top: 10px; font-size: 0.82rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- CHAPTER NAV */
.g-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: clamp(30px,4vw,44px) 0 0; }
@media (max-width: 640px) { .g-nav { grid-template-columns: 1fr; } }
.g-nav a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 5px;
  text-decoration: none; color: inherit; background: var(--surface);
  transition: border-color .18s, transform .18s, background .18s;
}
.g-nav a:hover { border-color: var(--line-strong); transform: translateY(-2px); background: var(--surface-2); }
.g-nav .g-nav-next { text-align: right; }
.g-nav-dir { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.g-nav-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) {
  .pb-track::before { animation: none; transform: scaleX(1); }
  .pb-stop { animation: none; opacity: 1; transform: none; }
}

/* Screenshot slot: a figure whose image has not been captured yet. Deliberately
   visible rather than an empty gap, so the shot list is legible on the page. */
.g-fig.is-pending .g-shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px;
  border: 1px dashed var(--line-strong); border-radius: 5px;
  background: repeating-linear-gradient(45deg,
    var(--surface) 0 12px, var(--surface-2) 12px 24px);
  text-align: center;
}
.g-shot-tag {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ph, var(--accent));
  border: 1px solid color-mix(in srgb, var(--ph, var(--accent)) 40%, var(--line));
  border-radius: 100px; padding: 4px 12px;
}
.g-shot-brief {
  max-width: 46ch; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2);
}