/* ─────────────────────────────────────────────────────────────────────────────
   Crypto Custody — partner docs theme polish over Material for MkDocs.
   Brand palette is deep purple. Hooks into Material's design tokens so both
   slate (dark) and default (light) schemes look right with one source of
   truth. The actual accent value can be overridden by brand.generated.css
   (produced by scripts/apply-branding.py from appsettings Branding:PrimaryColor).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --brand-accent:        #8b5cf6;        /* deep purple */
  --brand-accent-soft:   #a78bfa;
  --brand-grad-from:     #8b5cf6;
  --brand-grad-to:       #6366f1;
  --brand-grad: linear-gradient(135deg, var(--brand-grad-from), var(--brand-grad-to));

  /* Material primary tokens — apply our purple everywhere Material uses primary. */
  --md-primary-fg-color:        #0a0a0b;
  --md-primary-fg-color--light: #18181b;
  --md-primary-fg-color--dark:  #050506;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffcc;
  --md-accent-fg-color:         var(--brand-accent);
  --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.12);

  /* Typography. */
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0a0a0b;
  --md-default-bg-color--light:    #111114;
  --md-default-fg-color:           rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light:    rgba(255, 255, 255, 0.62);
  --md-default-fg-color--lighter:  rgba(255, 255, 255, 0.38);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.16);

  --md-typeset-a-color: var(--brand-accent-soft);

  --md-code-bg-color: rgba(255, 255, 255, 0.04);
  --md-code-fg-color: rgba(255, 255, 255, 0.88);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(180deg, #050506 0%, #0a0a0b 100%);
}
[data-md-color-scheme="default"] .md-header {
  background-color: #ffffff;
  color: #0c1019;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.md-header__title { font-weight: 600; letter-spacing: -0.01em; }
.md-header__topic:first-child { font-weight: 600; }

/* Logo: a touch larger than default. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.md-tabs {
  background: transparent;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
/* Material's stock CSS sets .md-tabs's background-color to
   var(--md-primary-fg-color) — which we point at near-black so the
   header reads correctly in dark mode. In light mode that same token
   leaks through and paints the tabs strip black under a white header.
   Mirror the .md-header scheme overrides so both stay in sync. */
[data-md-color-scheme="default"] .md-tabs {
  background-color: #ffffff;
  color: #0c1019;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-md-color-scheme="slate"] .md-tabs {
  background: linear-gradient(180deg, #050506 0%, #0a0a0b 100%);
}
.md-tabs__link {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.78;
  margin-top: 0.6rem;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--brand-accent-soft);
}

/* ─── Sidebar / nav ──────────────────────────────────────────────────────── */
.md-nav__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  opacity: 0.55;
}
.md-nav__link {
  font-size: 0.84rem;
  border-radius: 6px;
  padding: 0.32rem 0.55rem;
  margin: 0.04rem 0;
}
.md-nav__link:hover { background: var(--md-accent-fg-color--transparent); }
.md-nav__link--active {
  background: var(--md-accent-fg-color--transparent);
  color: var(--brand-accent-soft) !important;
  font-weight: 500;
}

/* ─── Body typography ────────────────────────────────────────────────────── */
.md-typeset {
  font-feature-settings: "ss01", "cv11";
  font-size: 0.86rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.5em;
}
.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.015em;
  font-size: 1.4rem;
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5em; }
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 1.05rem;
  margin-top: 1.8em;
}
.md-typeset h2 + p,
.md-typeset h3 + p { margin-top: 0.5em; }

/* Anchor permalink (¶) — show only on hover, in brand color. */
.md-typeset h1 .headerlink,
.md-typeset h2 .headerlink,
.md-typeset h3 .headerlink {
  color: var(--brand-accent);
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 0.4em;
  font-weight: 400;
}
.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink { opacity: 0.7; }

/* Inline `code` — faint brand-tinted background. */
.md-typeset :not(pre) > code {
  background: rgba(139, 92, 246, 0.10);
  color: var(--brand-accent);
  border: none;
  padding: 0.12em 0.4em;
  border-radius: 0.3em;
  font-size: 0.86em;
}
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  color: var(--brand-accent-soft);
  background: rgba(167, 139, 250, 0.12);
}

/* Code blocks — denser, tighter. */
.md-typeset .highlight {
  border-radius: 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .highlight pre { padding: 0.9rem 1.1rem; }
.md-typeset pre > code {
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ─── Tabbed code samples (Plaid-style) ──────────────────────────────────── */
.md-typeset .tabbed-set { border-radius: 0.5rem; }
.md-typeset .tabbed-labels {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.md-typeset .tabbed-labels > label {
  padding: 0.55rem 1rem;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.md-typeset .tabbed-labels > label:hover { opacity: 1; }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  opacity: 1;
}
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:checked + label {
  color: var(--brand-accent-soft);
  border-bottom-color: var(--brand-accent-soft);
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.82rem;
}
.md-typeset table:not([class]) th {
  background: rgba(139, 92, 246, 0.10);
  color: var(--md-default-fg-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { padding: 0.6em 0.9em; }
.md-typeset table:not([class]) td { border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.md-typeset table:not([class]) tbody tr:hover {
  background: rgba(139, 92, 246, 0.04);
}

/* ─── Admonitions / blockquotes ──────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 3px;
  font-size: 0.82rem;
  box-shadow: none;
}
.md-typeset blockquote {
  border-left: 3px solid var(--brand-accent);
  background: rgba(139, 92, 246, 0.04);
  padding: 0.6em 1em;
  border-radius: 0 0.4rem 0.4rem 0;
  color: var(--md-default-fg-color--light);
}
.md-typeset blockquote > p:first-child { margin-top: 0; }
.md-typeset blockquote > p:last-child { margin-bottom: 0; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.md-footer-meta { display: none; }
.md-footer {
  background: var(--md-default-bg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-footer-copyright { font-size: 0.72rem; opacity: 0.6; }

/* ─── Search ─────────────────────────────────────────────────────────────── */
.md-search__input {
  border-radius: 0.5rem;
  background: rgba(127, 127, 127, 0.08);
}
.md-search__input::placeholder { opacity: 0.5; }
.md-search__input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
  background: var(--md-default-bg-color);
}

/* ─── Scrollbars (dark) ──────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track { background: transparent; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* ─── Hero (landing) ─────────────────────────────────────────────────────── */
.hero {
  margin: 1rem 0 3rem;
  padding: 4rem 2.5rem 3.5rem;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 90%, rgba(99, 102, 241, 0.14), transparent 60%),
    linear-gradient(180deg, #0d0d10 0%, #0a0a0b 100%);
}
[data-md-color-scheme="default"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 90%, rgba(99, 102, 241, 0.10), transparent 60%),
    linear-gradient(180deg, #fafbff 0%, #f1f4fa 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
  pointer-events: none;
  border-radius: inherit;
}
[data-md-color-scheme="default"] .hero::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent-soft);
  background: rgba(139, 92, 246, 0.10);
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-size: 2.8rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  background: linear-gradient(180deg, currentColor 0%, color-mix(in srgb, currentColor 72%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: none;
  padding: 0;
}
[data-md-color-scheme="slate"] .hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-md-color-scheme="default"] .hero h1 {
  background: linear-gradient(180deg, #0c1019 0%, rgba(12,16,25,0.72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 42rem;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1.8rem;
}
.hero .cta-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
/* MkDocs wraps consecutive Markdown links in a <p>, so re-apply flex/gap. */
.hero .cta-row > p {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0;
}
.hero .cta-row a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 9px;
  font-weight: 500;
  font-size: 0.86rem;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, filter 0.15s;
}
.hero .cta-row a.btn-primary {
  background: var(--brand-grad);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 24px -8px rgba(139, 92, 246, 0.55);
}
.hero .cta-row a.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.hero .cta-row a.btn-secondary {
  background: var(--md-default-bg-color--light, rgba(127,127,127,0.08));
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.hero .cta-row a.btn-secondary:hover {
  background: var(--md-accent-fg-color--transparent);
  border-color: rgba(139, 92, 246, 0.30);
}

@media (max-width: 76.1875em) {
  .hero { padding: 2.4rem 1.5rem; }
  .hero h1 { font-size: 2rem; }
}

/* ─── Material .grid.cards (used on landing page) ────────────────────────── */
.md-typeset .grid.cards { margin-top: 2rem; margin-bottom: 2rem; }
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid.cards > :is(ul, ol) > li > div {
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: rgba(127, 127, 127, 0.04);
  padding: 1.2rem 1.4rem;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.04);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--brand-accent);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > :is(ul, ol) > li > p:first-child {
  color: var(--brand-accent-soft);
}
.md-typeset .grid.cards > :is(ul, ol) > li hr {
  margin: 0.4rem 0 0.6rem;
  border: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* ─── Reference page (Scalar) — flush layout, both nesting variants ──────── */
.md-content article.md-content__inner:has(> #scalar-mount) { padding: 0; max-width: none; }
.md-content article.md-content__inner:has(> div[markdown="0"] > #scalar-mount) { padding: 0; max-width: none; }
.md-content__inner:has(#scalar-mount) { padding: 0 !important; max-width: none !important; margin: 0 !important; }
.md-content:has(#scalar-mount) { padding: 0; max-width: none; }
/* Hide the "edit on git" pencil on the reference page since the spec is generated. */
.md-content article.md-content__inner:has(#scalar-mount) .md-content__button { display: none; }

/* Hide Material "edit on git" / source-file affordances we don't expose. */
.md-source-file__fact { display: none; }