/* ============================================================
   Playflow docs, layer on top of site.css. Loaded only by
   pages under /docs/. Tokens and chrome come from site.css.
   ============================================================ */

:root { --docs-header: 73px; --docs-gap: 24px; }
.docs { display: grid; grid-template-columns: 244px minmax(0,1fr); gap: 48px; align-items: start;
  max-width: var(--max); margin: 0 auto; padding: 40px var(--pad) 96px; }
.docs--article { grid-template-columns: 244px minmax(0,1fr) 196px; }

/* --- sidebar --- */
.docs-nav { position: sticky; top: calc(var(--docs-header) + var(--docs-gap)); max-height: calc(100vh - var(--docs-header) - var(--docs-gap) * 2); overflow-y: auto;
  padding-right: 8px; font-size: 14.5px; }
.docs-nav h2 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-teal); margin: 22px 0 8px; }
.docs-nav h2:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.docs-nav a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; line-height: 1.45; }
.docs-nav a:hover { background: rgba(27,47,56,.06); text-decoration: none; }
.docs-nav a[aria-current="page"] { background: var(--teal-tint); color: var(--deep-teal); font-weight: 600; }
/* Pages in the information architecture that aren't written yet. Shown so the
   shape of the docs is legible, but never as a link that 404s. */
.docs-nav span.soon { display: flex; align-items: center; gap: 7px; padding: 6px 10px; margin-left: -10px;
  color: var(--slate-teal); line-height: 1.45; }
.docs-nav span.soon::after { content: "soon"; margin-left: 8px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  /* Ink, not slate-teal: slate-teal on Dune is 4.45:1. 11px is the bottom of the ladder. */
  color: var(--ink); background: var(--dune); border-radius: 3px; padding: 1px 5px; }

/* --- on-page contents --- */
.docs-toc { position: sticky; top: 96px; font-size: 13.5px; }
.docs-toc h2 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-teal); margin: 0 0 10px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--driftwood); }
.docs-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--slate-teal); text-decoration: none; line-height: 1.4; }
.docs-toc a:hover { color: var(--ink); text-decoration: none; }

/* --- prose --- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 20px; }
.prose h1 { font-family: var(--font-display); font-size: 38px; line-height: 1.1; letter-spacing: -.025em;
  font-weight: 700; margin: 0; text-wrap: balance; }
.prose h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: -.02em;
  font-weight: 700; margin-top: 48px; scroll-margin-top: 96px; }
.prose h3 { font-size: 18px; font-weight: 600; margin-top: 32px; scroll-margin-top: 96px; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.prose > p:first-of-type { font-size: 18px; line-height: 1.6; color: var(--slate-teal); }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose ol { counter-reset: step; list-style: none; padding-left: 0; gap: 16px; }
.prose ol > li { counter-increment: step; position: relative; padding-left: 40px; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--teal-tint); color: var(--deep-teal); font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.prose strong { font-weight: 700; }
.prose hr { border: none; border-top: 1px solid var(--driftwood); margin-top: 40px; }
.prose code { font-family: var(--font-mono); font-size: .875em; background: var(--dune);
  padding: 2px 6px; border-radius: var(--r-sm); overflow-wrap: anywhere; }
.prose kbd { font-family: var(--font-mono); font-size: .8em; background: var(--shell);
  border: 1px solid var(--driftwood); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; }

/* --- code blocks --- */
.code { position: relative; background: var(--canvas); border-radius: var(--r-lg); overflow: hidden; }
.code__bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(236,224,217,.65); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.code code { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; background: none;
  padding: 0; color: var(--sand); white-space: pre; }
.code .t-key { color: var(--seafoam); }
.code .t-str { color: #E0B99B; }
.code .t-com { color: rgba(236,224,217,.45); }
.code .t-num { color: #8DD1D6; }

/* --- callouts --- */
.note { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.55; border: 1px solid; }
.note .i { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.note--info { background: var(--info-subtle); border-color: rgba(79,174,181,.45); color: var(--info-text); }
.note--warn { background: var(--warning-subtle); border-color: rgba(198,135,58,.45); color: var(--warning-text); }
.note--tip { background: var(--success-subtle); border-color: rgba(95,154,111,.45); color: var(--success-text); }

/* --- tables --- */
.docs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px;
  border: 1px solid var(--driftwood); border-radius: var(--r-lg); overflow: hidden; background: var(--shell); }
.docs-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--slate-teal); padding: 11px 14px; background: rgba(27,47,56,.03);
  border-bottom: 1px solid var(--driftwood); white-space: nowrap; }
.docs-table td { padding: 12px 14px; border-bottom: 1px solid var(--driftwood); vertical-align: top; line-height: 1.5; }
.docs-table tr:last-child td { border-bottom: none; }
.docs-table td code { white-space: nowrap; }
.docs-table .req-dot { color: var(--coral-deep); font-weight: 700; }

/* --- API endpoint --- */
.endpoint { border: 1px solid var(--driftwood); border-radius: var(--r-lg); background: var(--shell);
  overflow: hidden; }
.endpoint__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; flex-wrap: wrap; }
.endpoint__method { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 9px; border-radius: var(--r-sm); color: #fff; flex: none; }
.endpoint__method[data-m="GET"] { background: var(--deep-teal); }
.endpoint__method[data-m="POST"] { background: var(--seagrass); }
.endpoint__method[data-m="PATCH"] { background: var(--sunlit); }
.endpoint__method[data-m="DELETE"] { background: var(--coral-deep); }
.endpoint__path { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.endpoint__body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.endpoint__body > p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--slate-teal); }

/* --- docs landing cards --- */
.docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 16px; }
.docs-card { display: flex; flex-direction: column; gap: 9px; padding: 22px; border-radius: var(--r-xl);
  background: var(--shell); border: 1px solid var(--driftwood); text-decoration: none; color: var(--ink);
  transition: border-color 140ms var(--ease), transform 140ms var(--ease); }
.docs-card:hover { border-color: var(--deep-teal); transform: translateY(-2px); text-decoration: none; }
.docs-card h3 { font-size: 17px; font-weight: 600; margin: 4px 0 0; }
.docs-card p { font-size: 14.5px; line-height: 1.55; color: var(--slate-teal); margin: 0; }
.docs-card ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.docs-card li { font-size: 13.5px; color: var(--deep-teal); }
/* The badge alone signals "planned". Container opacity composited the body copy
   to 3.28:1, and a Dune ground still landed at 4.45:1, so the surface stays
   Shell and nothing about the text changes. */
.docs-card--soon { cursor: default; }
.docs-card--soon:hover { border-color: var(--driftwood); transform: none; }
.docs-card--soon h3::after { content: "soon"; margin-left: 8px; vertical-align: 2px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); background: var(--dune);
  border-radius: 3px; padding: 1px 5px; }
.docs-card--soon .card__icon { background: var(--dune); color: var(--slate-teal); }

/* --- search --- */
.docs-search { position: relative; margin-bottom: 4px; }
.docs-search input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px 10px 38px;
  border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--shell); color: var(--ink);
  font: inherit; font-size: 15px; }
.docs-search input::placeholder { color: var(--slate-teal); }
.docs-search input:focus { outline: none; border-color: var(--deep-teal); box-shadow: 0 0 0 3px rgba(60,104,118,.22); }
.docs-search .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--slate-teal); pointer-events: none; }

/* --- page footer of an article --- */
.docs-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--driftwood); }
.docs-foot a { font-weight: 600; }

@media (max-width: 1180px) {
  .docs--article { grid-template-columns: 244px minmax(0,1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 900px) {
  .docs, .docs--article { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 28px 20px 72px; }
  .docs-nav { position: static; max-height: none; border: 1px solid var(--driftwood);
    border-radius: var(--r-lg); padding: 16px; background: var(--shell); }
  .prose h1 { font-size: 30px; }
  .prose h2 { font-size: 22px; margin-top: 36px; }
}

/* An unwritten page referenced inside prose. Same convention as the sidebar:
   visible, labelled, never a link, so the docs show their shape with no 404s. */
.soon-inline { color: var(--ink); font-weight: 600; }
.soon-inline::after { content: "soon"; margin-left: 6px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--dune); border-radius: 3px; padding: 1px 5px;
  vertical-align: 1px; }
.docs-foot .soon-inline { font-weight: 500; }