/*
  The site's look: a code editor's. Dark by default, with a light scheme behind the toggle; the header stays dark in
  both, like an editor's chrome. Colours are set through Material's own variables, so every component follows them.
*/

:root > * {
  --rp-gold: #e6b34a;
  --rp-wine: #d4577f;
  --rp-chrome: #151920;
  --rp-chrome-raised: #1b2029;
  --rp-chrome-line: #262c37;
  --rp-chrome-fg: #d8dde6;
  --rp-chrome-muted: #8892a3;

  --md-primary-fg-color: var(--rp-chrome);
  --md-primary-fg-color--light: var(--rp-chrome-raised);
  --md-primary-fg-color--dark: #0e1014;
  --md-primary-bg-color: var(--rp-chrome-fg);
  --md-primary-bg-color--light: var(--rp-chrome-muted);
}

[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --rp-line: #262c37;
  --rp-raised: #1b2029;
  --rp-callout: rgba(230, 179, 74, 0.07);
  --rp-callout-line: rgba(230, 179, 74, 0.35);

  --md-default-bg-color: #0e1014;
  --md-default-fg-color: #d8dde6;
  --md-default-fg-color--light: #b4bccb;
  --md-default-fg-color--lighter: #8892a3;
  --md-default-fg-color--lightest: #262c37;
  --md-accent-fg-color: var(--rp-gold);
  --md-typeset-color: #c9d0db;
  --md-typeset-a-color: var(--rp-gold);
  --md-code-bg-color: #151920;
  --md-code-fg-color: #d8dde6;
  --md-code-hl-color: rgba(230, 179, 74, 0.12);
  --md-code-hl-keyword-color: #d4577f;
  --md-code-hl-string-color: #9fd8a7;
  --md-code-hl-number-color: #e6b34a;
  --md-code-hl-constant-color: #e6b34a;
  --md-code-hl-function-color: #8cb4ff;
  --md-code-hl-name-color: #d8dde6;
  --md-code-hl-variable-color: #d8dde6;
  --md-code-hl-operator-color: #9aa3b2;
  --md-code-hl-punctuation-color: #9aa3b2;
  --md-code-hl-comment-color: #6b7487;
  --md-code-hl-generic-color: #8892a3;
  --md-code-hl-special-color: #e6b34a;
  --md-footer-bg-color: #0b0d10;
  --md-footer-bg-color--dark: #08090b;
}

[data-md-color-scheme="default"] {
  --rp-line: #e2e5ea;
  --rp-raised: #f3f4f7;
  --rp-callout: #fbf5e8;
  --rp-callout-line: #e5c98c;

  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #161a21;
  --md-accent-fg-color: #a8771f;
  --md-typeset-color: #262b33;
  --md-typeset-a-color: #8a5a12;
  --md-code-bg-color: #f6f7f9;
  --md-code-fg-color: #1d222a;
  --md-code-hl-color: rgba(168, 119, 31, 0.12);
  --md-code-hl-keyword-color: #a3214d;
  --md-code-hl-string-color: #1f6b35;
  --md-code-hl-number-color: #9a5b00;
  --md-code-hl-constant-color: #9a5b00;
  --md-code-hl-function-color: #1554a8;
  --md-code-hl-name-color: #1d222a;
  --md-code-hl-variable-color: #1d222a;
  --md-code-hl-operator-color: #59616d;
  --md-code-hl-punctuation-color: #59616d;
  --md-code-hl-comment-color: #8a919a;
  --md-code-hl-generic-color: #59616d;
  --md-code-hl-special-color: #9a5b00;
  --md-footer-bg-color: var(--rp-chrome);
  --md-footer-bg-color--dark: #0e1014;
}

/* The chrome: header and tabs read as an editor's title bar. */
.md-header,
.md-tabs {
  background-color: var(--rp-chrome);
  color: var(--rp-chrome-fg);
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--rp-chrome-line);
}

.md-header--shadow {
  box-shadow: none;
}

.md-tabs {
  border-bottom: 1px solid var(--rp-chrome-line);
}

.md-tabs__link {
  font-family: var(--md-code-font-family);
  font-size: 0.66rem;
  opacity: 0.75;
}

.md-tabs__item--active .md-tabs__link {
  color: var(--rp-gold);
  opacity: 1;
}

.md-header__title {
  font-weight: 600;
}

.md-search__form {
  background-color: var(--rp-chrome-raised);
  border: 1px solid var(--rp-chrome-line);
  border-radius: 6px;
}

/* Headings: tight and plain, as on the home page. */
.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Navigation: the current page is marked as an editor marks the open file. */
.md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 500;
}

/* Code blocks: editor panes, with the file's name as a tab when the block names one. */
.md-typeset .highlight,
.md-typeset pre {
  border-radius: 10px;
}

.md-typeset .highlight {
  border: 1px solid var(--rp-line);
  overflow: hidden;
}

.md-typeset .highlight pre {
  margin: 0;
  border-radius: 0;
}

.md-typeset .highlight span.filename {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.55em 1em;
  border-bottom: 1px solid var(--rp-line);
  border-radius: 0;
  background-color: var(--rp-raised);
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family);
  font-size: 0.7rem;
  font-weight: 400;
  box-shadow: inset 0 -2px 0 var(--rp-gold);
}

.md-typeset .highlight span.filename + pre {
  margin-top: 0;
}

.md-typeset :not(pre) > code {
  border: 1px solid var(--rp-line);
  border-radius: 4px;
  background-color: var(--rp-raised);
}

/* Callouts: a gold note, never a coloured box per kind. */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--rp-callout-line);
  border-radius: 10px;
  background-color: var(--rp-callout);
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: var(--md-accent-fg-color);
}

/* Tables: ruled, with a quiet head. */
.md-typeset table:not([class]) {
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--rp-raised);
  color: var(--md-default-fg-color--light);
  font-weight: 500;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rp-line);
}

/* Footer: the editor's status bar. */
.md-footer-meta {
  border-top: 1px solid var(--rp-chrome-line);
  font-family: var(--md-code-font-family);
}

/* A name in a table cell stays whole: package and member names do not break mid-word. */
.md-typeset table:not([class]) code {
  white-space: nowrap;
}

/*
  What an example sets: the page the guide tests rendered from it (docs/javascripts/output-panel.js). Under the
  example by default; on a screen wide enough for the right-hand column, in a panel there that follows the reading.
*/
[data-md-color-scheme="slate"] {
  --rp-canvas: #2a2f39;
}

[data-md-color-scheme="default"] {
  --rp-canvas: #e7e9ee;
}

.md-typeset p:has(> img.rp-output) {
  margin-top: -0.4em;
  text-align: center;
  padding: 1.2rem;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background-color: var(--rp-canvas);
}

.md-typeset img.rp-output {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rp-panel {
  margin: 0.2rem 0.6rem 1rem;
  overflow: hidden;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background-color: var(--rp-canvas);
}

.rp-panel__bar {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rp-line);
  background-color: var(--rp-raised);
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
}

.rp-panel__canvas {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.rp-panel__canvas img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  object-fit: contain;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Wide enough for the right-hand column: the panel takes it, so the outputs under the examples and the contents give way. */
@media screen and (min-width: 76.25em) {
  .rp-has-output .md-grid {
    max-width: 72rem;
  }

  .rp-has-output .md-sidebar--secondary {
    width: 19rem;
  }

  /* Material keeps a sidebar's content 11.5rem wide whatever the sidebar's width; the panel takes it all. */
  .rp-has-output .md-sidebar--secondary .md-sidebar__inner {
    padding-right: 0;
    padding-left: 0;
  }

  .rp-has-output .md-sidebar--secondary .md-nav--secondary,
  .rp-has-output .md-typeset p:has(> img.rp-output) {
    display: none;
  }
}

/* Too narrow for it: the panel is not shown, and each output stays under its example. */
@media screen and (max-width: 76.234375em) {
  .rp-panel {
    display: none;
  }
}

/* ---------- The home page (docs/overrides/home.html, docs/README.md) ---------- */

/* The hero continues the editor's chrome below the header, in both schemes. */
.rp-hero {
  border-bottom: 1px solid var(--rp-chrome-line);
  background-color: var(--md-primary-fg-color--dark);
  color: var(--rp-chrome-fg);
}

.rp-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  padding: 2.8rem 0.8rem 2.2rem;
}

.rp-hero__text {
  max-width: 34rem;
}

.rp-hero h1 {
  margin: 0 0 0.8rem;
  color: var(--rp-chrome-fg);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rp-hero h1 span {
  color: var(--rp-gold);
}

.rp-hero p {
  margin: 0 0 1.4rem;
  color: var(--rp-chrome-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.rp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* The hero sits outside the page's content, where Material does not style buttons, so they are styled here in full. */
.rp-hero .md-button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rp-chrome-line);
  border-radius: 8px;
  color: var(--rp-chrome-fg);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.rp-hero .md-button--primary {
  border-color: var(--rp-gold);
  background-color: var(--rp-gold);
  color: #1b1405;
}

.rp-hero .md-button:hover {
  border-color: var(--rp-gold);
  background-color: var(--rp-gold);
  color: #1b1405;
}

.rp-install {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem 0.55rem 0.8rem;
  border: 1px solid var(--rp-chrome-line);
  border-radius: 8px;
  background-color: var(--rp-chrome);
  font-family: var(--md-code-font-family);
  font-size: 0.7rem;
}

.rp-install__prompt {
  color: var(--rp-gold);
}

.rp-install code {
  background: none;
  color: var(--rp-chrome-fg);
}

.rp-install .md-clipboard {
  position: static;
  color: var(--rp-chrome-muted);
}

/* The editor: tabs for files, the code on the left, the page it sets on the right. */
.md-typeset .rp-editor .tabbed-set {
  margin: 0 0 1.2rem;
  overflow: hidden;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background-color: var(--md-code-bg-color);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.md-typeset .rp-editor .tabbed-labels {
  padding-left: 3.6rem;
  border-bottom: 1px solid var(--rp-line);
  background:
    radial-gradient(circle, var(--rp-line) 0.22rem, transparent 0.24rem) 0.9rem 50% / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle, var(--rp-line) 0.22rem, transparent 0.24rem) 1.7rem 50% / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle, var(--rp-line) 0.22rem, transparent 0.24rem) 2.5rem 50% / 0.8rem 0.8rem no-repeat,
    var(--rp-raised);
  box-shadow: none;
}

.md-typeset .rp-editor .tabbed-labels > label {
  padding: 0.75rem 0.9rem;
  font-family: var(--md-code-font-family);
  font-size: 0.65rem;
  font-weight: 400;
}

.md-typeset .rp-editor .tabbed-block {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

/* Material shows the chosen tab's block with display: block; the editor's is a grid, by Material's own selectors. */
.md-typeset .rp-editor .tabbed-set > input:nth-child(1):checked ~ .tabbed-content > :nth-child(1),
.md-typeset .rp-editor .tabbed-set > input:nth-child(2):checked ~ .tabbed-content > :nth-child(2),
.md-typeset .rp-editor .tabbed-set > input:nth-child(3):checked ~ .tabbed-content > :nth-child(3),
.md-typeset .rp-editor .tabbed-set > input:nth-child(4):checked ~ .tabbed-content > :nth-child(4) {
  display: grid;
}

.md-typeset .rp-editor .tabbed-block > .highlight {
  margin: 0;
  border: 0;
  border-right: 1px solid var(--rp-line);
  border-radius: 0;
}

.md-typeset .rp-editor .tabbed-block > .highlight pre > code {
  max-height: 30rem;
}

.md-typeset .rp-editor .tabbed-block > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 1.6rem;
  background-color: var(--rp-canvas);
}

.md-typeset .rp-editor img.rp-page {
  max-width: 100%;
  max-height: 26rem;
  height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.md-typeset .rp-editor .rp-caption {
  color: var(--md-default-fg-color--lighter);
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
}

/* The facts and the packages: rows of plain cells, ruled like the tables. */
.md-typeset .rp-facts,
.md-typeset .rp-packages {
  display: grid;
  gap: 1px;
  margin: 1.2rem 0 2rem;
  overflow: hidden;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background-color: var(--rp-line);
}

.md-typeset .rp-facts {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.md-typeset .rp-packages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 60em) {
  .md-typeset .rp-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 30em) {
  .md-typeset .rp-packages {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The core package across the top; the four that add to it in the row below. */
.md-typeset .rp-packages > div:first-child {
  grid-column: 1 / -1;
}

.md-typeset .rp-facts > div,
.md-typeset .rp-packages > div {
  padding: 0.9rem 1rem;
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
}

.md-typeset .rp-facts strong,
.md-typeset .rp-packages strong {
  color: var(--md-default-fg-color);
}

.md-typeset .rp-packages strong code {
  border: 0;
  background: none;
  color: var(--md-accent-fg-color);
}

@media screen and (max-width: 60em) {
  .md-typeset .rp-editor .tabbed-block {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .rp-editor .tabbed-block > .highlight {
    border-right: 0;
    border-bottom: 1px solid var(--rp-line);
  }

  .rp-hero h1 {
    font-size: 2rem;
  }
}

/* The inspector: the frames of the invoice's page on the left, the page on the right with the chosen one outlined. */
.md-typeset .rp-inspector {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 32rem);
  margin: 1.2rem 0 2rem;
  overflow: hidden;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
}

.md-typeset .rp-inspector__tree {
  padding: 0.6rem 0;
  overflow-y: auto;
  border-right: 1px solid var(--rp-line);
  background-color: var(--md-code-bg-color);
}

.md-typeset .rp-inspector__row {
  display: block;
  width: 100%;
  padding: 0.15rem 0.8rem 0.15rem calc(0.8rem + var(--depth, 0) * 0.8rem);
  border: 0;
  background: none;
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family);
  font-size: 0.65rem;
  text-align: left;
  cursor: pointer;
}

.md-typeset .rp-inspector__row[aria-pressed="true"] {
  background-color: var(--md-code-hl-color);
  color: var(--md-default-fg-color);
  box-shadow: inset 2px 0 var(--md-accent-fg-color);
}

.md-typeset .rp-inspector__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 1.6rem;
  background-color: var(--rp-canvas);
}

.md-typeset .rp-inspector__page {
  position: relative;
  max-width: 100%;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.md-typeset .rp-inspector__page img {
  max-width: 100%;
  max-height: 26rem;
  height: auto;
}

.md-typeset .rp-inspector__outline {
  position: absolute;
  outline: 2px solid var(--rp-gold);
  background-color: rgba(230, 179, 74, 0.14);
  pointer-events: none;
  transition: left 0.12s, top 0.12s, width 0.12s, height 0.12s;
}

.md-typeset .rp-inspector__label {
  color: var(--md-default-fg-color--lighter);
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .rp-inspector__outline {
    transition: none;
  }
}

@media screen and (max-width: 45em) {
  .md-typeset .rp-inspector {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .md-typeset .rp-inspector__tree {
    max-height: 12rem;
    border-right: 0;
    border-bottom: 1px solid var(--rp-line);
  }
}