/* PQBlocks brand layer on Material for MkDocs. Tokens first; components use only tokens. */
:root,
[data-md-color-scheme="default"] {
  --pqb-cyan: #0891b2;
  --pqb-violet: #7c3aed;
  --pqb-ink: #0f172a;
  --pqb-muted: #475569;
  --pqb-line: #e2e8f0;
  --pqb-panel: #f8fafc;
  --md-primary-fg-color: #0b1220;
  --md-primary-fg-color--light: #1e293b;
  --md-primary-fg-color--dark: #020617;
  --md-primary-bg-color: #e2e8f0;
  --md-accent-fg-color: var(--pqb-cyan);
  --md-typeset-a-color: #0e7490;
}
[data-md-color-scheme="slate"] {
  --pqb-cyan: #22d3ee;
  --pqb-violet: #a78bfa;
  --pqb-ink: #e2e8f0;
  --pqb-muted: #94a3b8;
  --pqb-line: #1e293b;
  --pqb-panel: #0f172a;
  --md-default-bg-color: #0b1220;
  --md-primary-fg-color: #0b1220;
  --md-accent-fg-color: var(--pqb-cyan);
  --md-typeset-a-color: #67e8f9;
  --md-code-bg-color: #0f172a;
}

.md-header, .md-tabs { background: linear-gradient(90deg, #0b1220 0%, #111a2e 100%); }
.md-header { box-shadow: 0 1px 0 rgba(148, 163, 184, .15); }
.md-tabs__link { font-weight: 500; }

.md-typeset h1 { font-weight: 800; letter-spacing: -.02em; color: var(--pqb-ink); }
.md-typeset h2 { font-weight: 700; letter-spacing: -.01em; }
.md-typeset .pqb-lead { font-size: 1.12rem; line-height: 1.6; color: var(--pqb-muted); max-width: 48rem; margin-top: -.4rem; }


/* cards: hierarchy and depth, not uniform boxes */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--pqb-line); border-radius: .7rem; background: var(--pqb-panel);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--pqb-cyan);
  box-shadow: 0 10px 30px -12px rgba(8, 145, 178, .45);
}
.md-typeset .grid.cards .lg { color: var(--pqb-cyan); }

/* hero */
.pqb-hero { padding: 1.2rem 0 .4rem; }
.pqb-hero h1 { font-size: 2.6rem; line-height: 1.12; margin-bottom: .6rem; }
.pqb-hero .pqb-kicker {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pqb-cyan); margin-bottom: .6rem;
}
.pqb-hero .md-button { margin: .3rem .4rem .3rem 0; }
.md-typeset .md-button--primary {
  background: linear-gradient(90deg, var(--pqb-cyan), var(--pqb-violet)); border: 0; color: #fff;
}
.md-typeset .md-button:focus-visible { outline: 2px solid var(--pqb-violet); outline-offset: 2px; }

/* stat strip */
.pqb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.pqb-stats div { border: 1px solid var(--pqb-line); border-radius: .7rem; padding: .8rem 1rem; background: var(--pqb-panel); }
.pqb-stats strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--pqb-ink); line-height: 1.1; }
.pqb-stats span { font-size: .78rem; color: var(--pqb-muted); }

.md-typeset img[src*="diagrams/"] { width: 100%; height: auto; border-radius: .9rem; }
.md-typeset img[src*="shields.io"] { margin: 0 .15rem .2rem 0; }
.md-typeset table:not([class]) { font-size: .74rem; border-radius: .5rem; }

@media screen and (max-width: 44.9375em) {
  .pqb-hero h1 { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { transition: none; }
}

/* secondary buttons stay visible in both schemes */
.md-typeset .md-button:not(.md-button--primary) { color: var(--pqb-cyan); border-color: var(--pqb-cyan); }
.md-typeset .md-button:not(.md-button--primary):hover { background: var(--pqb-cyan); color: #0b1220; }

/* abbreviations: keep the tooltip, drop the dotted underline noise */
.md-typeset abbr { text-decoration: none; border-bottom: 0; cursor: help; }

/* two-column grids for paired content */
.md-typeset .grid.pqb-two { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
@media screen and (min-width: 60em) { .md-typeset .grid.pqb-two { grid-template-columns: repeat(2, 1fr); } }

/* interactive line figures (hairline): one per section page, beside the lead */
.pqb-figure { float: right; width: 15rem; margin: 0 0 1rem 1.5rem; --hairline-plate: var(--md-default-bg-color); }
[data-md-color-scheme="default"] .pqb-figure { --hairline-plate: #ffffff; }
[data-md-color-scheme="slate"] .pqb-figure { --hairline-plate: #0b1220; }
@media screen and (max-width: 44.9375em) {
  .pqb-figure { float: none; width: 100%; max-width: 18rem; margin: 0 auto 1rem; }
}

/* home: text and the figure side by side, stacked on small screens */
.md-typeset .pqb-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; padding: .6rem 0 1.4rem; }
.md-typeset .pqb-hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }
.md-typeset .pqb-hero__text > p:first-of-type { font-size: 1.15rem; color: var(--pqb-ink); margin-top: 0; }
.md-typeset .pqb-hero__figure { margin: 0; width: 100%; display: block; }
.md-typeset .pqb-hero__figure figcaption { font-size: .72rem; color: var(--pqb-muted); margin-top: .2rem; max-width: none; }
.md-typeset .pqb-figure--hero { float: none; width: 100%; max-width: 30rem; margin: 0 auto; }
.md-typeset .pqb-standards { font-size: .7rem; color: var(--pqb-muted); margin-top: 1.2rem; }
.md-typeset .pqb-standards a { color: inherit; text-decoration: underline; text-decoration-color: var(--pqb-line); }
@media screen and (max-width: 59.9375em) {
  .md-typeset .pqb-hero { grid-template-columns: 1fr; gap: 1rem; }
}

/* home feature rows: text beside an interactive figure, alternating sides */
.md-typeset .pqb-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; margin: 1rem 0 2.4rem; }
.md-typeset .pqb-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.md-typeset .pqb-feature__figure { margin: 0; width: 100%; display: block; }
.md-typeset .pqb-feature__figure figcaption { font-size: .72rem; color: var(--pqb-muted); max-width: none; }
.md-typeset .pqb-figure--wide { float: none; width: 100%; max-width: 28rem; margin: 0 auto; }
@media screen and (max-width: 59.9375em) {
  .md-typeset .pqb-feature, .md-typeset .pqb-feature--flip { grid-template-columns: 1fr; gap: 1rem; }
  .md-typeset .pqb-feature--flip .pqb-feature__figure { order: 2; }
}

/* FAQ: answer cards under question headings, and a section index */
.md-typeset .pqb-answer { border-left: 3px solid var(--pqb-cyan); background: var(--pqb-panel); border-radius: 0 .6rem .6rem 0; padding: .1rem 1rem; margin: -.2rem 0 1.6rem; }
.md-typeset .pqb-answer p { margin: .7rem 0; }
.md-typeset .pqb-faq-index { margin-bottom: 2rem; }
.md-typeset .pqb-faq-index li p:last-child { font-size: .72rem; color: var(--pqb-muted); }
.md-typeset details.question { border-color: var(--pqb-line); border-left: 3px solid var(--pqb-cyan); }
.md-typeset details.question > summary { font-weight: 600; }

/* large figure: centred under the title (catalog, security) */
.md-typeset .pqb-figure--large { float: none; width: 100%; max-width: 34rem; margin: .4rem auto 1.6rem; }

/* home FAQ: a quiet numbered list that opens in place; no icons, no tinted boxes */
.md-typeset { counter-reset: pqb-faq; }
.md-typeset details.pqb-faq {
  counter-increment: pqb-faq; background: none; border: 0; border-top: 1px solid var(--pqb-line);
  border-radius: 0; box-shadow: none; margin: 0; padding: 0; font-size: .82rem;
}
.md-typeset details.pqb-faq:last-of-type { border-bottom: 1px solid var(--pqb-line); }
.md-typeset details.pqb-faq > summary {
  background: none; border: 0; padding: 1rem 2.4rem 1rem 3rem; font-weight: 600; color: var(--pqb-ink); cursor: pointer;
}
.md-typeset details.pqb-faq > summary::before {
  content: counter(pqb-faq, decimal-leading-zero); -webkit-mask-image: none; mask-image: none; background: none;
  font-family: var(--md-code-font-family); font-weight: 500; font-size: .72rem; color: var(--pqb-muted);
  width: auto; height: auto; left: .2rem; top: 1.12rem;
}
.md-typeset details.pqb-faq > summary::after {
  content: "+"; -webkit-mask-image: none; mask-image: none; background: none; transform: none;
  font-weight: 300; font-size: 1.2rem; color: var(--pqb-muted); width: auto; height: auto; right: .4rem; top: .78rem;
}
.md-typeset details.pqb-faq[open] > summary::after { content: "−"; transform: none; }
.md-typeset details.pqb-faq > summary:hover, .md-typeset details.pqb-faq[open] > summary { color: var(--md-typeset-a-color); }
.md-typeset details.pqb-faq > :not(summary) { margin: 0 2.4rem 1.1rem 3rem; color: var(--pqb-muted); }
