/* PoreStore brand colours and the styles for inline diagrams and figures on the documentation site. */
/* Colours for the inline diagrams and result charts, in both schemes; the page palette itself lives in theme.css. */
:root,
[data-md-color-scheme="default"] {
  --ps-ink: #0B0B0B;
  --ps-ink2: #52514E;
  --ps-line: rgba(11, 11, 11, 0.14);
  --ps-solid: #8A8984;
  --ps-solid-soft: #E7E5DF;
  --ps-pore: #FFFFFF;
  --ps-fluid: #0E7478;
  --ps-fluid-soft: #DCEEEB;
  --ps-hot: #B3301F;
  --ps-cold: #2C6E9B;
  --ps-warn: #9A6212;
  --ps-card: #FFFFFF;
  --ps-hot-soft: #F8E6E2;
  --ps-cold-soft: #E3EDF6;
  --ps-chart-1: #0E9F9A;
  --ps-chart-2: #E8553E;
  --ps-chart-3: #3D6FE0;
  --ps-chart-4: #E9A100;
  /* Flow diagrams: a box sits on --ps-node inside a --ps-group panel, joined by --ps-arrow connectors. */
  --ps-node: #FFFFFF;
  --ps-node-line: rgba(11, 11, 11, 0.14);
  --ps-group: rgba(11, 11, 11, 0.04);
  --ps-arrow: #8A8984;
}

[data-md-color-scheme="slate"] {
  --ps-ink: #F0EFEC;
  --ps-ink2: #C3C2B7;
  --ps-line: rgba(255, 255, 255, 0.14);
  --ps-solid: #8C8B85;
  --ps-solid-soft: #33322F;
  --ps-pore: #1A1A19;
  --ps-fluid: #45B8AD;
  --ps-fluid-soft: #13302E;
  --ps-hot: #F08A77;
  --ps-cold: #7FB0E0;
  --ps-warn: #E0B062;
  --ps-card: #1A1A19;
  --ps-hot-soft: #3A211C;
  --ps-cold-soft: #1B2A38;
  --ps-chart-1: #3CCFC4;
  --ps-chart-2: #FF7A5C;
  --ps-chart-3: #7EA6FF;
  --ps-chart-4: #FFC94D;
  /* Boxes are lifted above the card rather than cut into it, with outlines and connectors bright enough to read. */
  --ps-node: #2A2A27;
  --ps-node-line: rgba(255, 255, 255, 0.26);
  --ps-group: rgba(255, 255, 255, 0.025);
  --ps-arrow: #A3A29A;
}

/* Inline SVG diagrams take their colours from the tokens above, so they follow the light and dark schemes. */
.md-typeset figure.ps-diagram {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 1.5em 0;
  padding: 1em;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  background: var(--ps-card);
  text-align: center;
}
.ps-diagram svg {
  display: block;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  height: auto;
  color: var(--ps-ink);
  font-family: var(--md-text-font-family, "IBM Plex Sans", sans-serif);
}
/* App screenshots are light captures; a hairline frame separates them from the page in either theme. */
.md-typeset .ps-figure img[src*="assets/screenshots/"] {
  display: block;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
}
.ps-diagram figcaption,
.ps-figure figcaption {
  margin-top: 0.75em;
  font-size: var(--ps-fs-small);
  color: var(--ps-ink2);
  text-align: left;
}

/* Flow diagrams (diagrams/*.d2) draw at their own size, never larger, and shrink only to fit the column. */
.ps-flow svg {
  width: auto;
  max-width: 100%;
}

/* Result charts, drawn by docs/javascripts/charts.js from the data scripts/make_charts.py writes. A figure's panels
   sit in one row, in the widths its data gives, and wrap onto more rows in a narrow column. */
.md-typeset figure.ps-figure {
  display: block;
  width: 100%;
  margin: 1.5em 0;
  container-type: inline-size;
}
.ps-chart {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 16rem;
  padding: 1rem 1rem 0.75rem;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: var(--ps-card);
}
.ps-chart__row {
  display: grid;
  grid-template-columns: var(--ps-chart-columns);
  gap: 1.25rem;
}
@container (max-width: 640px) {
  .ps-chart__row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.ps-chart--error {
  display: block;
  min-height: 0;
  color: var(--ps-hot);
  font-size: var(--ps-fs-small);
}

/* Wide tables scroll inside their own box rather than the page. */
.md-typeset__table {
  max-width: 100%;
}
.md-typeset table:not([class]) {
  font-size: var(--ps-fs-table);
}

/* Small coloured pill for the backend and status labels used in tables. */
.ps-tag {
  display: inline-block;
  padding: 0 0.45em;
  border-radius: 4px;
  font-size: 0.85em;
  background: var(--ps-fluid-soft);
  color: var(--ps-fluid);
  white-space: nowrap;
}

/* On phones, wide diagrams keep a readable size and scroll sideways inside their frame. */
@media screen and (max-width: 44.9375em) {
  .md-typeset figure.ps-diagram {
    overflow-x: auto;
  }
  .ps-diagram svg {
    min-width: 560px;
  }
  /* Flow diagrams keep their own size, which the floor above would enlarge for the narrow ones. */
  .ps-flow svg {
    min-width: 0;
    max-width: none;
  }
}

/* Work in progress: something the docs will show but can't yet state from the code, as a block (a figure or a
   section still being prepared) or as an inline tag (a table cell or a list item). One look for both. */
.md-typeset .ps-pending {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1.2em 0;
  padding: 0.9rem 1.1rem 0.95rem;
  border: 1px dashed var(--ps-faint);
  border-radius: 12px;
  background:
    linear-gradient(var(--ps-raised), var(--ps-raised)) padding-box,
    repeating-linear-gradient(135deg, var(--ps-fill) 0 6px, transparent 6px 12px);
  color: var(--ps-muted);
  font-size: 0.72rem;
}
.md-typeset .ps-pending--figure {
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  text-align: center;
  background: repeating-linear-gradient(135deg, var(--ps-fill) 0 6px, transparent 6px 12px), var(--ps-raised);
}
.md-typeset .ps-pending > p {
  margin: 0;
}
.md-typeset .ps-pending > p.ps-pending__title,
.md-typeset .ps-pending-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  width: max-content;
  color: var(--ps-text);
  font-size: 0.68rem;
  font-weight: 600;
}
.md-typeset .ps-pending-tag {
  padding: 0.05em 0.55em;
  border: 1px dashed var(--ps-faint);
  border-radius: 999px;
  color: var(--ps-muted);
  font-size: 0.62rem;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: 0.08em;
}
.md-typeset .ps-pending > p.ps-pending__title::before,
.md-typeset .ps-pending-tag::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--ps-fluid);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ps-fluid) 45%, transparent);
  animation: ps-pending-pulse 2.4s ease-out infinite;
}
@keyframes ps-pending-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ps-fluid) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.45em transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .ps-pending > p.ps-pending__title::before,
  .md-typeset .ps-pending-tag::before {
    animation: none;
  }
}

/* Beta features: hidden unless the sidebar switch "Include beta features" is on (javascripts/beta.js). */
[data-ps-beta="off"] .ps-beta,
[data-ps-beta="off"] .ps-beta-nav,
[data-ps-beta="off"] tr:has(.ps-beta-tag),
[data-ps-beta="off"] li:has(> .ps-beta-tag),
[data-ps-beta="off"] li:has(> p > .ps-beta-tag),
[data-ps-beta="off"] dt:has(.ps-beta-tag),
[data-ps-beta="off"] dt:has(.ps-beta-tag) + dd {
  display: none !important;
}
/* The version of something drawn without its beta parts, replaced by a "ps-beta" version when beta is on. */
[data-ps-beta="on"] .ps-beta-off {
  display: none !important;
}

.ps-beta-tag,
.ps-beta-badge {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: 4px;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  background: var(--ps-warn);
  color: var(--md-default-bg-color);
}

div.ps-beta {
  border-left: 3px solid var(--ps-warn);
  padding-left: 0.9em;
}

.ps-beta-banner {
  border-color: var(--ps-warn);
}
.ps-beta-banner > .admonition-title {
  background: color-mix(in srgb, var(--ps-warn) 14%, transparent);
}

/* The switch sits under the search box in the left sidebar of the sections that have beta content. */
.ps-beta-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: -0.35rem 0 0.9rem;
  padding: 0.25rem 0.3rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--ps-hairline);
  background: none;
  color: var(--ps-muted);
  font: inherit;
  font-size: 0.7rem;
  text-align: left;
  cursor: pointer;
}
.ps-beta-toggle:hover,
.ps-beta-toggle[aria-checked="true"] {
  color: var(--ps-text);
}
.ps-beta-toggle svg {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
}
.ps-beta-toggle__switch {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 0.85rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--ps-fill-strong);
  transition: background 0.15s;
}
.ps-beta-toggle__switch::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--ps-raised);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.ps-beta-toggle[aria-checked="true"] .ps-beta-toggle__switch {
  background: var(--ps-warn);
}
.ps-beta-toggle[aria-checked="true"] .ps-beta-toggle__switch::after {
  transform: translateX(0.65rem);
}

/* OpenAPI reference: an endpoint's method and path (scripts/make_api_reference.py). */
.md-typeset .ps-endpoint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ps-hairline);
  border-radius: 10px;
  background: var(--ps-raised);
  overflow-x: auto;
}
.md-typeset .ps-endpoint code {
  padding: 0;
  border: none;
  background: none;
  color: var(--ps-text);
  font-size: 0.7rem;
  white-space: nowrap;
}
.ps-method {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 5px;
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ps-method--get {
  background: color-mix(in srgb, var(--md-code-hl-function-color) 14%, transparent);
  color: var(--md-code-hl-function-color);
}
.ps-method--post {
  background: color-mix(in srgb, var(--md-code-hl-string-color) 14%, transparent);
  color: var(--md-code-hl-string-color);
}
.ps-method--delete {
  background: color-mix(in srgb, var(--md-code-hl-keyword-color) 14%, transparent);
  color: var(--md-code-hl-keyword-color);
}