/* Playbook pages: the index of playbooks and the articles. Loaded after home.css, which carries the
   shared tokens, navigation, links and reveal classes. An article has three columns: a route rail with
   one stop per chapter, the chapters themselves, and an aside with deliverables and sources. */
#robin-workshop .pb-hero { max-width: 900px; padding-block: 54px 40px; }
#robin-workshop .pb-back { display: inline-flex; gap: 8px; margin-bottom: 26px; font-size: 12.5px; color: var(--rv-muted); transition: color .25s; }
#robin-workshop .pb-back:hover { color: var(--rv-teal); }
#robin-workshop .pb-title { font-size: clamp(36px, 5cqi, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -.055em; }
#robin-workshop .pb-lead { max-width: 62ch; margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--rv-muted); }
#robin-workshop .pb-link { border-bottom: 1px solid var(--rv-line); transition: color .25s, border-color .25s; }
#robin-workshop .pb-link:hover { color: var(--rv-teal); border-color: var(--rv-teal); }

/* ---- Index: one row per playbook ---- */
#robin-workshop .pb-list { margin-bottom: 64px; border-bottom: 1px solid var(--rv-line); }
#robin-workshop .pb-item { position: relative; display: grid; grid-template-columns: 44px 1.1fr 1.3fr 30px; gap: 26px; align-items: start; padding: 30px 0; border-top: 1px solid var(--rv-line); transition: background-color .3s, padding-inline .3s var(--rv-ease); }
#robin-workshop .pb-item:hover, #robin-workshop .pb-item:focus-visible { padding-inline: 12px; background: color-mix(in srgb, var(--rv-soft) 65%, transparent); }
#robin-workshop .pb-item > .rv-mono { padding-top: 9px; color: var(--rv-gold); }
#robin-workshop .pb-item h2 { font-size: 30px; transition: color .25s; }
#robin-workshop .pb-item:hover h2, #robin-workshop .pb-item:focus-visible h2 { color: var(--rv-teal); }
#robin-workshop .pb-item p { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--rv-muted); }
#robin-workshop .pb-item > b { padding-top: 6px; color: var(--rv-teal); font-size: 22px; font-weight: 400; text-align: right; transition: translate .3s; }
#robin-workshop .pb-item:hover > b, #robin-workshop .pb-item:focus-visible > b { translate: 4px -4px; }
/* The chapters of each playbook as a small route: the line draws when the row is hovered or focused. */
#robin-workshop .pb-route { position: relative; margin: 6px 0 0; padding: 0; list-style: none; }
#robin-workshop .pb-route::before { content: ''; position: absolute; top: 9px; bottom: 9px; left: 5px; width: 1px; background: var(--rv-line); }
#robin-workshop .pb-route::after { content: ''; position: absolute; top: 9px; bottom: 9px; left: 5px; width: 1px; background: var(--rv-teal); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--rv-ease-cam); }
#robin-workshop .pb-item:hover .pb-route::after, #robin-workshop .pb-item:focus-visible .pb-route::after { transform: scaleY(1); }
#robin-workshop .pb-route li { position: relative; padding: 0 0 7px 26px; font-size: 13px; line-height: 1.5; color: var(--rv-muted); transition: color .3s; transition-delay: calc(var(--i, 0) * 90ms); }
#robin-workshop .pb-route li::before { content: ''; position: absolute; top: 5px; left: 1px; z-index: 1; width: 9px; height: 9px; border: 1px solid var(--rv-line); border-radius: 50%; background: var(--rv-paper); transition: border-color .3s, background-color .3s; transition-delay: inherit; }
#robin-workshop .pb-item:hover .pb-route li, #robin-workshop .pb-item:focus-visible .pb-route li { color: var(--rv-ink); }
#robin-workshop .pb-item:hover .pb-route li::before, #robin-workshop .pb-item:focus-visible .pb-route li::before { border-color: var(--rv-teal); background: var(--rv-teal); }

/* ---- Article ---- */
#robin-workshop .pb-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 56px; align-items: start; margin-bottom: 64px; padding-top: 34px; border-top: 1px solid var(--rv-line); }
/* Route rail: the chapters as stops on a line that fills as the page is read. playbook.js sets
   --pb-progress (0..1), marks the stop being read and the ones passed. */
#robin-workshop .pb-rail { position: sticky; top: 96px; }
#robin-workshop .pb-rail > .rv-mono { display: block; margin-bottom: 14px; color: var(--rv-gold); }
#robin-workshop .pb-stops { position: relative; margin: 0; padding: 0; list-style: none; }
#robin-workshop .pb-stops::before, #robin-workshop .pb-stops::after { content: ''; position: absolute; top: 10px; bottom: 26px; left: 6px; width: 1px; background: var(--rv-line); }
#robin-workshop .pb-stops::after { background: var(--rv-teal); transform: scaleY(var(--pb-progress, 0)); transform-origin: top; }
#robin-workshop .pb-stops a { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding-bottom: 20px; font-size: 13px; line-height: 1.5; color: var(--rv-muted); transition: color .3s; }
#robin-workshop .pb-stops a::before { content: ''; position: relative; z-index: 1; top: 4px; width: 11px; height: 11px; border: 1px solid var(--rv-line); border-radius: 50%; background: var(--rv-paper); transition: border-color .3s, background-color .3s, scale .3s var(--rv-ease); }
#robin-workshop .pb-stops a.is-passed::before { border-color: var(--rv-teal); background: var(--rv-teal); }
#robin-workshop .pb-stops a[aria-current] { color: var(--rv-ink); }
#robin-workshop .pb-stops a[aria-current]::before { border-color: var(--rv-gold); background: var(--rv-gold); scale: 1.35; }
#robin-workshop .pb-stops a:hover { color: var(--rv-teal); }
#robin-workshop .pb-stops .rv-mono { display: block; color: inherit; opacity: .75; }

#robin-workshop .pb-step { padding-block: 0 44px; scroll-margin-top: 8px; }
#robin-workshop .pb-step + .pb-step { padding-top: 40px; border-top: 1px solid var(--rv-line); }
#robin-workshop .pb-step > .rv-mono { color: var(--rv-gold); }
#robin-workshop .pb-step h2 { margin: 8px 0 6px; font-size: 30px; }
#robin-workshop .pb-gist { max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--rv-ink); }
#robin-workshop .pb-points { margin: 14px 0 0; padding: 0; list-style: none; }
#robin-workshop .pb-points li { position: relative; padding: 13px 0 13px 22px; border-top: 1px solid var(--rv-line); font-size: 14.5px; line-height: 1.7; color: var(--rv-muted); }
#robin-workshop .pb-points li::before { content: '+'; position: absolute; left: 0; color: var(--rv-gold); font: 400 14px/1.5 ui-monospace, monospace; }
#robin-workshop .pb-points strong { color: var(--rv-ink); font-weight: 500; }
/* The model a playbook starts from: its named parts side by side. */
#robin-workshop .pb-model { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin: 16px 0 0; }
#robin-workshop .pb-model > div { padding: 13px 0; border-top: 1px solid var(--rv-line); }
#robin-workshop .pb-model dt { color: var(--rv-gold); font: 500 10px/2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
#robin-workshop .pb-model dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--rv-muted); }
#robin-workshop .pb-next { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--rv-line); }
#robin-workshop .pb-next > .rv-mono { display: block; margin-bottom: 6px; color: var(--rv-gold); }
#robin-workshop .pb-next > div { display: flex; flex-wrap: wrap; gap: 6px 30px; }

#robin-workshop .pb-aside { position: sticky; top: 96px; display: grid; gap: 26px; }
#robin-workshop .pb-aside h2 { margin-bottom: 8px; color: var(--rv-gold); font: 500 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
#robin-workshop .pb-aside ul { margin: 0; padding: 0; list-style: none; }
#robin-workshop .pb-aside li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--rv-line); font-size: 13px; line-height: 1.5; }
/* A deliverable is ticked once the chapter that produces it (data-step) has been reached. */
#robin-workshop .pb-aside li::before { content: ''; position: absolute; top: 13px; left: 1px; width: 8px; height: 8px; border: 1px solid var(--rv-muted); border-radius: 2px; transition: background-color .3s, border-color .3s; }
#robin-workshop .pb-aside li.is-done::before { border-color: var(--rv-teal); background: var(--rv-teal); }
#robin-workshop .pb-aside p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--rv-muted); }
#robin-workshop .pb-aside a { font-size: 13.5px; }
#robin-workshop .pb-sources { display: grid; gap: 9px; justify-items: start; }
#robin-workshop .pb-sources + p, #robin-workshop .pb-aside p + .pb-sources { margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  /* The page title rises out of a mask on load. */
  #robin-workshop.rv-motion-ready .pb-title > span { display: inline-block; clip-path: inset(-.1em -.1em -.22em -.1em); }
  #robin-workshop.rv-motion-ready .pb-title > span > span { display: inline-block; animation: rv-line-rise .9s var(--rv-ease) 60ms both; }
}
@media (prefers-reduced-motion: reduce) {
  #robin-workshop .pb-item, #robin-workshop .pb-item > b, #robin-workshop .pb-route::after, #robin-workshop .pb-route li, #robin-workshop .pb-route li::before,
  #robin-workshop .pb-stops a::before, #robin-workshop .pb-aside li::before { transition: none !important; }
  #robin-workshop .pb-item:hover, #robin-workshop .pb-item:focus-visible { padding-inline: 0; }
  #robin-workshop .pb-item:hover > b, #robin-workshop .pb-item:focus-visible > b { translate: 0 0; }
}

@container rv (max-width: 1100px) {
  #robin-workshop .pb-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  #robin-workshop .pb-aside { position: static; grid-column: 2; grid-template-columns: 1fr 1fr; padding-top: 30px; border-top: 1px solid var(--rv-line); }
}
@container rv (max-width: 760px) {
  #robin-workshop .pb-hero { padding-block: 34px 28px; }
  #robin-workshop .pb-item { grid-template-columns: 30px 1fr 24px; gap: 14px; padding: 24px 0; }
  #robin-workshop .pb-item .pb-route { grid-column: 2 / -1; grid-row: 2; }
  #robin-workshop .pb-item > b { grid-column: 3; grid-row: 1; }
  #robin-workshop .pb-item h2 { font-size: 25px; }
  #robin-workshop .pb-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  /* The rail turns into a slim progress strip pinned to the top of the screen. Each stop keeps a
     finger-sized target and its name for screen readers; only the dot is shown. The strip reaches
     the screen edges by undoing the page gutter (.rv-wrap in home.css: 4.5%, and 6% at 500px and below). */
  #robin-workshop .pb-rail { position: sticky; top: 0; z-index: 6; margin-inline: -4.5cqi; padding: 4px 4.5cqi; border-bottom: 1px solid var(--rv-line); background: color-mix(in srgb, var(--rv-paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  #robin-workshop .pb-rail > .rv-mono { display: none; }
  #robin-workshop .pb-stops { display: flex; justify-content: space-between; }
  #robin-workshop .pb-stops::before, #robin-workshop .pb-stops::after { top: 50%; bottom: auto; left: 18px; right: 18px; width: auto; height: 1px; }
  #robin-workshop .pb-stops::after { transform: scaleX(var(--pb-progress, 0)); transform-origin: left; }
  #robin-workshop .pb-stops a { display: grid; grid-template-columns: none; place-items: center; width: 36px; height: 36px; padding: 0; }
  #robin-workshop .pb-stops a::before { top: 0; }
  #robin-workshop .pb-stops a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #robin-workshop .pb-content { padding-top: 30px; }
  #robin-workshop .pb-step { scroll-margin-top: 60px; }
  #robin-workshop .pb-step h2 { font-size: 26px; }
  #robin-workshop .pb-aside { position: static; grid-column: 1; grid-template-columns: 1fr; }
}
@container rv (max-width: 500px) {
  #robin-workshop .pb-rail { margin-inline: -6cqi; padding-inline: 6cqi; }
  #robin-workshop .pb-model { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  #robin-workshop .pb-back, #robin-workshop .pb-sources a { display: inline-flex; align-items: center; min-height: 32px; }
  #robin-workshop .pb-next a { min-height: 44px; }
}

/* ---- Print: the text of the playbook, without navigation, rail or motion ---- */
@media print {
  @page { margin: 14mm; }
  .skip-link, #robin-workshop .rv-nav, #robin-workshop .rv-scroll-progress, #robin-workshop .rv-footer,
  #robin-workshop .pb-rail, #robin-workshop .pb-back, #robin-workshop .pb-next, #robin-workshop .pb-item > b { display: none !important; }
  html, body { background: #fff !important; }
  #robin-workshop { color-scheme: light !important; background: #fff; }
  #robin-workshop .rv-wrap { padding-inline: 0; }
  #robin-workshop .pb-main, #robin-workshop .pb-main * { opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important; clip-path: none !important; }
  #robin-workshop .pb-hero { padding-block: 0 18px; }
  #robin-workshop .pb-title { font-size: 28px; }
  #robin-workshop .pb-layout { display: block; margin-bottom: 0; padding-top: 18px; }
  #robin-workshop .pb-step { padding-bottom: 22px; break-inside: avoid; }
  #robin-workshop .pb-step + .pb-step { padding-top: 20px; }
  #robin-workshop .pb-step h2 { font-size: 20px; }
  #robin-workshop .pb-aside { position: static; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 18px; border-top: 1px solid var(--rv-line); break-inside: avoid; }
  #robin-workshop .pb-aside li.is-done::before { border-color: var(--rv-muted); background: none; }
  #robin-workshop .pb-item { break-inside: avoid; }
  #robin-workshop .pb-main a { border: 0; }
}