/* The site's type system, shared by the landing page and the manual.
   Families: Libre Baskerville regular for the site title; Source Serif 4 bold (display), Libre Franklin (text), monospace (code).
   One accent, Yale Blue; code always bold in the lighter blue. */

html[data-theme="light"] {
  --pst-color-primary: #00356B;
  --pst-color-primary-highlight: #286DC0;
  --pst-color-secondary: #286DC0;
  --pst-color-accent: #286DC0;
  --pst-color-link: #00356B;
  --pst-color-link-hover: #286DC0;
  --pst-color-background: #FFFFFF;
  --pst-color-on-background: #FFFFFF;
  --pst-color-surface: #F4F4F4;
  --pst-color-on-surface: #222222;
  --pst-color-text-base: #222222;
  --pst-color-text-muted: #5F5F5F;
  --pst-color-border: #DDDDDD;
  --pst-color-inline-code: #286DC0;
  --pst-color-inline-code-links: #286DC0;
  --pst-color-target: #E6EDF6;
  --pst-color-warning: #6E5316;
  --pst-color-success: #1E5E32;
  --site-code: #286DC0;
  --site-gray: #5F5F5F;
}
html[data-theme="dark"] {
  --pst-color-primary: #8FB3E0;
  --pst-color-primary-highlight: #B8CFEC;
  --pst-color-secondary: #B8CFEC;
  --pst-color-link: #8FB3E0;
  --pst-color-link-hover: #B8CFEC;
  --pst-color-inline-code: #8FB3E0;
  --site-code: #8FB3E0;
  --site-gray: #A0A0A0;
}

html {
  --pst-font-family-base: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pst-font-family-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pst-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pst-font-weight-heading: 600;
  --pst-font-size-base: 17px;
  --pst-font-size-h1: 53px;
  --pst-font-size-h2: 36px;
  --pst-font-size-h3: 26px;
  --pst-font-size-h4: 23px;
  --pst-font-size-milli: 15px;
  --pst-sidebar-font-size: 15px;
  --pst-header-height: 0px;
}

/* The header is the site band (band.css), not the theme's; it scrolls away with the page, so the sidebars stick
   at the top of the window. */
.pst-sticky-header { position: static; }
html[data-theme="dark"] .site { background: #0B2340; }
/* the sidebar's logo at its full width */
.sidebar-logo { padding: 0 0 1rem; }
.sidebar-logo img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 4px; }
.bd-sidebar-primary { width: 22%; min-width: 14rem; max-width: 18rem; }
/* The page's columns share the band's width and gutter (1400px, 20px), so the sidebar's logo starts under the band's
   title; the sidebar is a little narrower so its dividing line stays where it was. */
@media (min-width: 960px) {
  .bd-container__inner.bd-page-width { max-width: 1400px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .bd-sidebar-primary { padding-left: 0; width: 15.5rem; min-width: 15.5rem; max-width: 15.5rem; }
}
/* The arrows that open a page's sub-pages, set in from the dividing line, with the text clear of them. */
.bd-sidebar-primary li.has-children > details > summary .toctree-toggle { right: 14px; }
.bd-sidebar-primary li.has-children > .reference { margin-right: calc(44px + .1875rem); }

/* Headings: the display role in blue. */
h1, h2, h3, h4 { color: var(--pst-color-primary); }
h2 { margin-top: 2rem; }

/* The lead role: the first paragraph after a page title. */
section > h1 + p, article > h1 + p { font-size: 19px; color: #444444; }

/* The small role: captions, the footer, the sidebar. */
figcaption, .bd-footer, .bd-sidebar-primary, .bd-sidebar-secondary { font-size: 15px; color: var(--site-gray); }

/* Code: always bold, always the lighter blue, on the panel; comments in gray. */
code, kbd, samp, pre, .highlight, .sd-card code {
  font-family: var(--pst-font-family-monospace);
  font-weight: 600;
  font-size: 15px;
  color: var(--site-code);
}
code.literal { background: var(--pst-color-surface); border: 1px solid var(--pst-color-border); padding: 0 .3em; }
div.highlight { background: var(--pst-color-surface); }
div.highlight pre { border: 1px solid var(--pst-color-border); border-radius: 6px; color: var(--site-code); }
div.highlight pre span { color: var(--site-code); font-weight: 600; }
div.highlight pre span.c, div.highlight pre span.c1, div.highlight pre span.cm, div.highlight pre span.ch { color: var(--site-gray); font-weight: 400; }
/* the notebooks' outputs are not code: plain text, ink */
.cell_output pre, .cell_output pre span { color: var(--pst-color-text-base); font-weight: 400; }

/* Cards: the panel, display titles. */
.sd-card { background: var(--pst-color-surface); border: 1px solid var(--pst-color-border); border-radius: 8px; box-shadow: none; }
.sd-card .sd-card-title { font-family: var(--pst-font-family-heading); font-size: 26px; font-weight: 600; color: var(--pst-color-primary); }
.sd-card:hover { border-color: var(--pst-color-primary-highlight); }

/* The accuracy tables: one cell format (max, median, tier), the tier tinted; on a narrow screen the table scrolls
   in its own box with the row names held in place. */
.acc-title { font-size: 23px; margin-top: 2.2rem; }
.acc-lead { color: var(--site-gray); font-size: 15px; }
.acc-wrap { overflow-x: auto; border: 1px solid var(--pst-color-border); border-radius: 6px; margin-bottom: 1rem; }
table.acc { border-collapse: collapse; font-size: 12.5px; line-height: 1.3; width: 100%; margin: 0; }
table.acc th, table.acc td { border: 1px solid var(--pst-color-border); padding: 3px 4px; vertical-align: top; }
table.acc thead th { font-weight: 600; text-align: center; background: var(--pst-color-surface); }
table.acc tbody th { font-weight: 500; text-align: left; min-width: 6.5rem; position: sticky; left: 0;
  background: var(--pst-color-surface); z-index: 1; }
table.acc td { text-align: center; white-space: nowrap; }
table.acc td span { display: block; }
table.acc .acc-max { font-weight: 600; color: var(--pst-color-text-base); }
table.acc .acc-med, table.acc .acc-tier, table.acc .acc-name { color: var(--site-gray); }
table.acc .acc-word, table.acc .acc-note { font-style: italic; color: var(--site-gray); }
table.acc .acc-note { white-space: normal; font-size: 11.5px; }
table.acc .acc-name { white-space: normal; font-size: 12px; }
table.acc .acc-flag { color: #A6192E; font-weight: 700; }
table.acc td.acc-recorded { background: #F7F1DC; }
table.acc td.acc-warned { background: #FBE6CF; }
table.acc td.acc-refused { background: #F6D9D9; }
table.acc td.acc-refusal { background: #EFEFEF; }
html[data-theme="dark"] table.acc td.acc-recorded { background: #3A3520; }
html[data-theme="dark"] table.acc td.acc-warned { background: #46321C; }
html[data-theme="dark"] table.acc td.acc-refused { background: #4A2525; }
html[data-theme="dark"] table.acc td.acc-refusal { background: #2E2E2E; }
html[data-theme="dark"] table.acc .acc-flag { color: #F08A96; }

/* The settings tables on a narrow screen: each row stacks (the field, then its
   two values on one line, then what it controls), so nothing runs off the page. */
@media (max-width: 720px) {
  table.settings-table, table.settings-table tbody, table.settings-table tr, table.settings-table td { display: block; width: 100% !important; }
  table.settings-table colgroup, table.settings-table thead { display: none; }
  table.settings-table tr { border-bottom: 1px solid var(--pst-color-border); padding: .6em 0; }
  table.settings-table td { border: 0 !important; padding: .1em 0 !important; background: none !important; }
  table.settings-table td:nth-child(2), table.settings-table td:nth-child(3) { display: inline-block; width: auto !important; margin-right: 1.2em; color: var(--site-gray); font-size: 15px; }
  table.settings-table td:nth-child(2) p, table.settings-table td:nth-child(3) p { display: inline; }
  table.settings-table td:nth-child(2)::before { content: "Default: "; }
  table.settings-table td:nth-child(3)::before { content: "Quick: "; }
}

/* The install page's chain table: a cell whose stage the code pins to the CPU shows its number grayed. */
/* the computing-time table: a stage without GPU acceleration is a blacked-out cell in the GPU column;
   its words stay for screen readers only */
table.chain-table td:has(.nogpu) { background: #222222; }
html[data-theme="dark"] table.chain-table td:has(.nogpu) { background: #000000; }
table.chain-table .nogpu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "What PIANISTpy does": each feature's name, a link to its guide page, in bold as on the landing page. */
ul.features > li > p > a:first-child { font-weight: 700; }

/* An inline formula and the punctuation that touches it stay on one line (assemble_site.glue_math). */
.nobr { white-space: nowrap; }