/* Layout shell */
body.pg-shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-height: 100vh;
  margin: 0;
}

.pg-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--size-5) var(--size-4);
  border-right: 1px solid var(--line);
  background: var(--soft);
  font-size: var(--text-sm);
}

.pg-sidebar h1 {
  font-size: var(--text-lg);
  margin: 0 0 var(--size-1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pg-sidebar h1 a { color: var(--fg); text-decoration: none; }
.pg-sidebar h2 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: var(--size-4) 0 var(--size-2);
  font-weight: 700;
}

.pg-sidebar nav { display: flex; flex-direction: column; gap: 1px; }

.pg-sidebar a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-1);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.3;
}

.pg-sidebar a:hover {
  background: var(--bg);
  color: var(--fg);
}

.pg-sidebar a[aria-current="page"] {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.pg-sidebar__footer {
  margin-top: var(--size-5);
  padding-top: var(--size-3);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--size-2);
}

.pg-sidebar__footer-link {
  padding: 0.25rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-1);
}

.pg-sidebar__footer-link:hover {
  color: var(--fg);
  background: var(--bg);
}

/* Main area */
.pg-main {
  padding: var(--size-6) var(--size-6) var(--size-8);
  max-width: 68rem;
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}

.pg-main > header {
  margin-bottom: var(--size-6);
  padding-bottom: var(--size-4);
  border-bottom: 1px solid var(--line);
}

.pg-main > header h1 {
  font-size: var(--text-4xl);
  margin: 0 0 var(--size-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pg-main > header p {
  color: var(--muted);
  margin: 0;
  font-size: var(--text-lg);
}

.pg-main h2 {
  font-size: var(--text-2xl);
  margin: var(--size-6) 0 var(--size-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Example card — note: overflow is NOT hidden so tooltips escape. */
.pg-example {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  margin-block: var(--size-3);
  background: var(--bg);
  box-shadow: var(--shadow-xs);
}

.pg-example__title {
  font-weight: 600;
  padding: var(--size-2) var(--size-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  background: var(--soft);
  color: var(--muted);
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}

.pg-example__preview {
  padding: var(--size-6) var(--size-5);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  /* overflow: visible so tooltips and floating UI aren't clipped */
}

/* Round top corners when preview is the first child (no title above) */
.pg-example__preview:first-child {
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
}

/* Round bottom corners when preview is the last child (no code below) */
.pg-example__preview:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}

.pg-example__preview--soft {
  background: var(--soft);
}

.pg-example__preview--pad-lg { padding: var(--size-8) var(--size-5); }

/* Preview content can flex-wrap on small screens but keep full width */
.pg-example__preview > * { max-width: 100%; }

/* Code block — bg + fg set by JS to match the active theme (via --code-bg/--code-fg). */
.pg-example__code {
  margin: 0;
  padding: 0;
  background: var(--code-bg, #0d1117);
  overflow-x: auto;
  border-radius: 0 0 var(--radius-2) var(--radius-2);
}

.pg-example__code code {
  display: block;
  padding: var(--size-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--code-fg, #e6edf3);
  background: transparent;
}

/* Floating settings switcher (top-right) */
.pg-themer {
  position: fixed;
  top: var(--size-3);
  right: var(--size-3);
  z-index: 50;
  display: flex;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
}

.pg-themer label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  font-weight: 600;
}

.pg-themer select {
  font: inherit;
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--soft);
  color: var(--fg);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Reference tables for modifiers/props */
.pg-ref {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--size-3);
  font-size: var(--text-sm);
}

.pg-ref th,
.pg-ref td {
  padding: var(--size-2) var(--size-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pg-ref thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.pg-ref code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--soft);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-1);
  white-space: nowrap;
}

.pg-ref td:first-child { white-space: nowrap; }

/* Mobile */
@media (max-width: 900px) {
  body.pg-shell { grid-template-columns: 1fr; }
  .pg-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pg-themer { top: auto; bottom: var(--size-3); right: var(--size-3); }
}