/* ============================================================
   panto docs — shared documentation chrome.
   Built on the Pantograph design system tokens. Class prefix: pd-
   ============================================================ */

body { margin: 0; background: var(--surface-page); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pd-app { min-height: 100vh; }

/* ---- Header ---------------------------------------------------------- */
.pd-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-5);
  height: 60px; padding: 0 var(--space-6);
  background: color-mix(in srgb, var(--paper-1) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-thin) solid var(--border-hairline);
}
.pd-header__left { display: flex; align-items: center; gap: var(--space-3); }
.pd-menu { display: none; background: none; border: 0; cursor: pointer; color: var(--ink-2); font-size: 20px; padding: 4px; }
.pd-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.pd-brand:hover { text-decoration: none; }
.pd-brand__word { font: 700 20px var(--font-display); letter-spacing: -0.01em; color: var(--ink-0); }
.pd-brand__div { color: var(--paper-4); font: 400 18px var(--font-display); }
.pd-brand__sub { font: 600 18px var(--font-display); color: var(--ink-3); }
.pd-nav { display: flex; gap: 2px; margin-left: var(--space-4); }
.pd-nav__link {
  font: 500 var(--text-sm)/1 var(--font-sans); color: var(--ink-3);
  padding: 8px 11px; border-radius: var(--radius-xs); text-decoration: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.pd-nav__link:hover { color: var(--ink-1); background: var(--paper-2); text-decoration: none; }
.pd-nav__link--active { color: var(--ink-0); font-weight: 600; }
.pd-header__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.pd-ghlink { display: inline-flex; align-items: center; gap: 7px; font: 500 var(--text-sm) var(--font-mono); color: var(--ink-2); text-decoration: none; }
.pd-ghlink:hover { color: var(--ink-0); text-decoration: none; }
.pd-ghlink svg { font-size: 16px; }

/* ---- Shell grid ------------------------------------------------------ */
.pd-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 220px;
  max-width: 1340px; margin: 0 auto;
  align-items: start;
}
.pd-sidebar {
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); overflow: hidden;
  border-right: var(--border-thin) solid var(--border-hairline);
}
.pd-sidebar__scroll { height: 100%; overflow-y: auto; padding: var(--space-5) var(--space-4) var(--space-8); }
.pd-navsec { margin-bottom: var(--space-5); }
.pd-navsec__title {
  display: flex; align-items: center; gap: 7px;
  font: 600 var(--text-2xs) var(--font-display); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 var(--space-2); padding-left: 10px;
}
.pd-navsec__title svg { font-size: 13px; }
.pd-navsec--current .pd-navsec__title { color: var(--red-deep); }
.pd-navsec__list { list-style: none; margin: 0; padding: 0; }
.pd-navsec__link {
  display: block; font: 400 var(--text-sm)/1.2 var(--font-sans); color: var(--ink-2);
  text-decoration: none; padding: 7px 10px; border-radius: var(--radius-xs);
  border-left: 2px solid transparent; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.pd-navsec__link:hover { color: var(--ink-0); background: var(--paper-2); text-decoration: none; }
.pd-navsec__link--active {
  color: var(--red-deep); font-weight: 600; background: var(--paper-0);
  border-left-color: var(--red);
}
.pd-navsec__link code { background: none; border: 0; padding: 0; color: inherit; font-size: 0.92em; }

/* ---- Main ------------------------------------------------------------ */
.pd-main { padding: var(--space-6) var(--space-7) var(--space-9); min-width: 0; }
.pd-doc { max-width: 800px; }
.pd-eyebrow { display: block; margin-bottom: var(--space-2); }
.pd-doc__h1 { font: 700 var(--text-3xl) var(--font-display); color: var(--ink-0); letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
.pd-doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.pd-lead { font: 400 var(--text-md)/1.6 var(--font-serif); color: var(--ink-1); margin: 0 0 var(--space-6); max-width: 66ch; }

.pd-h2 {
  font: 600 var(--text-xl) var(--font-sans); color: var(--ink-0);
  margin: var(--space-8) 0 var(--space-4); padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--border-hairline);
  scroll-margin-top: 76px;
}
.pd-h3 { font: 600 var(--text-lg) var(--font-sans); color: var(--ink-0); margin: var(--space-6) 0 var(--space-3); scroll-margin-top: 76px; }
.pd-body { font: 400 var(--text-base)/1.65 var(--font-sans); color: var(--ink-1); max-width: 66ch; }
.pd-body + .pd-body { margin-top: var(--space-4); }
.pd-doc a { text-decoration-thickness: 1px; }
.pd-doc > .pg-callout, .pd-doc .pd-callout { margin: var(--space-5) 0; }
.pd-doc .pg-code, .pd-doc .pg-term { margin: var(--space-4) 0; max-width: 800px; }
.pd-section { margin-bottom: var(--space-2); }

/* ---- Command signature header --------------------------------------- */
.pd-cmd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-2); scroll-margin-top: 76px;
}
.pd-cmd__sig {
  font: 600 var(--text-md) var(--font-mono); color: var(--ink-0);
  background: var(--surface-code); border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-sm); padding: 5px 10px;
}
.pd-cmd__sig .opt { color: var(--ink-3); }
.pd-cmd__note { font: 400 var(--text-sm) var(--font-sans); color: var(--ink-3); }

/* ---- Option / parameter list ---------------------------------------- */
.pd-opts { display: flex; flex-direction: column; gap: 0; margin: var(--space-4) 0; border-top: var(--border-thin) solid var(--border-hairline); }
.pd-opt {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: var(--space-4);
  padding: var(--space-4) var(--space-2); border-bottom: var(--border-thin) solid var(--border-hairline);
}
.pd-opt__key { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pd-opt__name { font: 500 var(--text-sm) var(--font-mono); color: var(--ink-0); }
.pd-opt__type { font: 400 var(--text-xs) var(--font-mono); color: var(--green-deep); }
.pd-opt__desc { font: 400 var(--text-sm)/1.6 var(--font-sans); color: var(--ink-1); }
.pd-opt__desc code { font-size: 0.9em; }
.pd-opt__desc p { margin: 0 0 var(--space-2); }
.pd-opt__desc p:last-child { margin: 0; }
@media (max-width: 640px) { .pd-opt { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---- Table ----------------------------------------------------------- */
.pd-table-wrap { border: var(--border-thin) solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
.pd-table { width: 100%; border-collapse: collapse; font: 400 var(--text-sm) var(--font-sans); }
.pd-table th {
  text-align: left; font: 600 var(--text-2xs) var(--font-display); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-3); background: var(--paper-2);
  padding: 10px 14px; border-bottom: var(--border-thin) solid var(--border-hairline);
}
.pd-table td { padding: 11px 14px; border-bottom: var(--border-thin) solid var(--paper-2); color: var(--ink-1); vertical-align: top; }
.pd-table tr:last-child td { border-bottom: 0; }
.pd-table tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2) 40%, transparent); }
.pd-table td code { font-size: 0.9em; }
.pd-table .mono { font-family: var(--font-mono); }
.pd-table .t-type { font: 400 var(--text-xs) var(--font-mono); color: var(--green-deep); }
.pd-table .t-def { font: 400 var(--text-xs) var(--font-mono); color: var(--ink-3); }

/* ---- Keycaps --------------------------------------------------------- */
.pd-kbd {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 var(--text-xs) var(--font-mono); color: var(--ink-1);
  background: var(--paper-0); border: var(--border-thin) solid var(--paper-4);
  border-bottom-width: 2px; border-radius: var(--radius-sm);
  padding: 3px 7px; white-space: nowrap;
}
.pd-keytable .pd-kbd { font-size: var(--text-sm); }

/* ---- Inline tick rule ------------------------------------------------ */
.pd-rule { margin: var(--space-7) 0; }

/* ---- TOC ------------------------------------------------------------- */
.pd-toc { position: sticky; top: 60px; padding: var(--space-6) var(--space-4); align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; }
.pd-toc__title { font: 600 var(--text-2xs) var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-4); margin: 0 0 var(--space-3); }
.pd-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-toc__link { display: block; font: 400 var(--text-sm)/1.3 var(--font-sans); color: var(--ink-3); text-decoration: none; padding: 5px 10px; border-left: 2px solid var(--paper-3); transition: color var(--dur-fast), border-color var(--dur-fast); }
.pd-toc__link:hover { color: var(--ink-0); border-left-color: var(--ink-3); text-decoration: none; }
.pd-toc__link--active { color: var(--red-deep); border-left-color: var(--red); font-weight: 600; }

/* ---- Prev / next footer --------------------------------------------- */
.pd-prevnext {
  display: flex; gap: var(--space-4); margin-top: var(--space-8);
  padding-top: var(--space-5); border-top: var(--border-thin) solid var(--border-hairline);
}
.pd-pn {
  flex: 1; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: var(--space-4); border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.pd-pn:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); text-decoration: none; }
.pd-pn--next { text-align: right; }
.pd-pn__dir { font: 600 var(--text-2xs) var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-4); }
.pd-pn__title { font: 600 var(--text-base) var(--font-sans); color: var(--ink-0); }

/* ---- Footnote / source line ----------------------------------------- */
.pd-srcnote { font: 400 var(--text-xs)/1.6 var(--font-sans); color: var(--ink-3); margin-top: var(--space-6); }
.pd-srcnote code { font-size: 0.92em; }

.pd-scrim { display: none; position: fixed; inset: 60px 0 0; z-index: 35; background: rgba(22,27,39,0.28); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1120px) {
  .pd-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .pd-toc { display: none; }
}
@media (max-width: 860px) {
  .pd-shell { grid-template-columns: minmax(0, 1fr); }
  .pd-nav { display: none; }
  .pd-menu { display: inline-flex; }
  .pd-sidebar {
    position: fixed; top: 60px; left: 0; z-index: 40; width: var(--sidebar-width);
    background: var(--paper-1); transform: translateX(-105%);
    transition: transform var(--dur-base) var(--ease-slide);
  }
  .pd-sidebar--open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .pd-sidebar--open ~ .pd-scrim { display: block; }
  .pd-main { padding: var(--space-5) var(--space-5) var(--space-8); }
  .pd-prevnext { flex-direction: column; }
}