base site: claude design plus some tweaks

1 files changed, 202 insertions, 0 deletions

diff --git a/_shared/docs.css b/_shared/docs.css
new file mode 100644
index 0000000..bfa1e44
--- /dev/null
+++ b/_shared/docs.css
@@ -0,0 +1,202 @@
+/* ============================================================
+   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; }
+}