/* Clarity Orbital's palette and type (clarityorbital.com) on the PyData theme. */

html {
  --pst-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pst-font-family-heading: "Space Grotesk", system-ui, sans-serif;
  --pst-font-family-monospace: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --pc-accent: #3b82f6;
  --pc-accent-glow: rgba(59, 130, 246, 0.15);
}

html[data-theme="dark"] {
  --pst-color-background: #050810;
  --pst-color-on-background: #0a0f1e;
  --pst-color-surface: #0f1629;
  --pst-color-on-surface: #f1f5f9;
  --pst-color-text-base: #f1f5f9;
  --pst-color-text-muted: #94a3b8;
  --pst-color-border: rgba(255, 255, 255, 0.08);
  --pst-color-shadow: rgba(0, 0, 0, 0.5);
  --pst-color-primary: #3b82f6;
  --pst-color-primary-bg: rgba(59, 130, 246, 0.15);
  --pst-color-secondary: #60a5fa;
  --pst-color-link: #60a5fa;
  --pst-color-link-hover: #93c5fd;
  --pst-color-inline-code: #93c5fd;
  --pst-color-inline-code-links: #93c5fd;
  --pst-color-target: rgba(59, 130, 246, 0.2);
  --pst-color-table-row-hover-bg: rgba(59, 130, 246, 0.08);
}

html[data-theme="light"] {
  --pst-color-primary: #2563eb;
  --pst-color-secondary: #1d4ed8;
  --pst-color-link: #2563eb;
  --pst-color-link-hover: #1e40af;
  --pst-color-inline-code: #1d4ed8;
  --pst-color-inline-code-links: #1d4ed8;
}

h1, h2, h3, h4, .navbar-brand .title {
  font-family: var(--pst-font-family-heading);
  letter-spacing: -0.01em;
}
h1 { font-weight: 700; }

html[data-theme="dark"] .bd-header {
  background: rgba(5, 8, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pst-color-border);
}
html[data-theme="dark"] .bd-footer { border-top: 1px solid var(--pst-color-border); }

html[data-theme="dark"] div.highlight,
html[data-theme="dark"] .cell_input {
  background: #0a0f1e;
}
html[data-theme="dark"] div.highlight pre { background: transparent; }
div.highlight, .cell_input, div.cell div.cell_input { border-radius: 10px; }
html[data-theme="dark"] div.cell div.cell_input { border: 1px solid var(--pst-color-border); border-left: 2px solid var(--pc-accent); }

/* Example pages: the whole width for the viewers. */
.bd-page-width { max-width: 92rem; }

/* ── Live examples (_static/pc-docs.js) ── */

/* The theme puts dark-mode HTML outputs and images on a light card: not the examples. */
html[data-theme] .bd-content div.cell_output .output.text_html:has(.pc-example),
html[data-theme] .bd-content div.cell_output .pc-example img.pc-poster {
  background: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.bd-content div.cell_output:has(.pc-example) { padding-left: 0; }

.pc-example {
  position: relative;
  margin: 0.75rem 0 1.75rem;
  border: 1px solid var(--pst-color-border);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0f1e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .pc-example { background: #f1f5f9; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); }

/* Its light or dark theme: set inside from the docs' (_ext/pc_docs.py). */
.pc-example .pc-frame { display: block; width: 100%; border: 0; height: var(--pc-height, 560px); }

.pc-example .pc-poster {
  display: block;
  width: 100%;
  height: var(--pc-height, 560px);
  object-fit: cover;
  object-position: top left;
  cursor: pointer;
}

.pc-example .pc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(5, 8, 16, 0) 40%, rgba(5, 8, 16, 0.45));
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
}
.pc-example .pc-play:hover { background: linear-gradient(180deg, rgba(5, 8, 16, 0.05) 30%, rgba(5, 8, 16, 0.55)); }
.pc-example .pc-play span {
  font: 600 0.95rem/1 var(--pst-font-family-heading);
  color: #f1f5f9;
  background: rgba(15, 22, 41, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  box-shadow: 0 0 0 6px var(--pc-accent-glow);
  backdrop-filter: blur(6px);
}
.pc-example .pc-play span::before { content: "▶"; margin-right: 0.55rem; color: var(--pc-accent); }

.pc-example .pc-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.8rem;
  font: 0.78rem/1.4 var(--pst-font-family-base);
  color: var(--pst-color-text-muted);
  border-top: 1px solid var(--pst-color-border);
  background: var(--pst-color-on-background);
}
.pc-example .pc-bar a { color: var(--pst-color-link); text-decoration: none; }
.pc-example .pc-bar a:hover { text-decoration: underline; }
.pc-example .pc-missing { display: flex; align-items: center; justify-content: center; color: var(--pst-color-text-muted); }

@media (max-width: 720px) {
  .pc-example .pc-frame, .pc-example .pc-poster { height: min(var(--pc-height, 560px), 75vh); }
}

/* Pictures a cell saved and shows (Saving pictures): as they are, not on the theme's light card. */
html[data-theme] .bd-content div.cell_output a.image-reference img {
  background: none;
  padding: 0;
  max-width: 100%;
  border: 1px solid var(--pst-color-border);
  border-radius: 8px;
}

/* Stills of table viewers. */
html[data-theme] .bd-content div.cell_output .output.text_html:has(.pc-still) { background: none; padding: 0; border-radius: 0; }
.bd-content div.cell_output:has(.pc-still) { padding-left: 0; }
.pc-still { margin: 0.75rem 0 1.75rem; }
.pc-still img {
  display: block;
  width: 100%;
  border: 1px solid var(--pst-color-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .pc-still img { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); }

/* ── The topics list on the left (_templates/sidebar-all.html) ── */
.bd-sidebar-primary { width: 17rem; flex-basis: 17rem; border-right: 1px solid var(--pst-color-border); }
.pc-nav ul { list-style: none; margin: 0; padding: 0; }
.pc-nav p.caption {
  font: 600 0.72rem/1 var(--pst-font-family-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pst-color-text-muted);
  margin: 1.5rem 0 0.45rem;
}
.pc-nav p.caption:first-child { margin-top: 0.25rem; }
.pc-nav a {
  display: block;
  padding: 0.28rem 0.6rem;
  border-left: 2px solid transparent;
  color: var(--pst-color-text-base);
  text-decoration: none;
  font-size: 0.93rem;
  line-height: 1.35;
}
.pc-nav a:hover { color: var(--pst-color-link-hover); text-decoration: none; }
.pc-nav li.toctree-l1.current > a { color: var(--pst-color-primary); border-left-color: var(--pst-color-primary); font-weight: 600; }
.pc-nav .toctree-l2 > a { padding: 0.2rem 0.6rem 0.2rem 1.4rem; font-size: 0.84rem; color: var(--pst-color-text-muted); }
.pc-nav .toctree-l2 > a:hover { color: var(--pst-color-link-hover); }
.pc-nav .toctree-l2 { border-left: 1px solid var(--pst-color-border); margin-left: 0.6rem; }
.pc-nav .toctree-l2 > a { padding-left: 0.8rem; border-left: 0; }
.pc-nav .toctree-l3 { display: none; }

/* A page's introduction: what it covers. */
.pc-lead { font-size: 1.12rem; color: var(--pst-color-text-muted); line-height: 1.65; }

/* Tables of keywords: the keyword on one line. */
.bd-content table td:first-child code { white-space: nowrap; }