/* ==========================================================================
   Trilocore documentation — design system
   --------------------------------------------------------------------------
   STRUCTURE is adopted from the Anthropic platform docs (three-pane layout,
   896px measure, hairline-only borders, surface-elevation model, pill inline
   code, 32px nav controls, card grids, no prev/next). Those are layout
   decisions and they port.

   SKIN is Trilocore's own, lifted from trilocore-site/assets/css/styles.css so
   the docs read as the same product as trilocore.com: #ea580c accent, Inter +
   JetBrains Mono, slate-based neutrals. We deliberately do NOT port Anthropic's
   greys, their blue accent, their clay brand fill, or their serif headings —
   copying a palette and a typeface is how a docs site stops looking like its
   own product and starts looking like a clone.

   Measured source: .claude/squad-runs/research/claude-platform-docs-ia.md
   (headless-Chrome + CDP computed styles, both colour schemes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

/* THE ROOT SIZE. Everything below is written in rem, so this line decides what
   every other number in this file actually means.

   Material sets `html { font-size: 125% }` and then scales it UP by viewport:
   137.5% at >=100em (1600px) and 150% at >=125em (2000px). So `1rem` is 20px on
   a laptop and 22px on a 1600px monitor — not the 16px this sheet was written
   against. Measured on /docs/en/audits/ before this rule: h1 35px (comment says
   28px), h2 30px (says 24px), prose 20px (says 16px), nav 17.5px (says 14px) —
   every value exactly 1.25x its label, and 1.375x on a wide monitor. The
   reference we are matching runs a 100% root with 16px prose, which is why the
   docs read noticeably heavier than it side by side at the same zoom.

   Pinning 100% makes the rem values in this file mean their comments. It is a
   deliberate departure from Material's default, not an oversight — remove it
   and every size below silently inflates again. */
html,
:root { font-size: 100%; }

@media screen and (min-width: 100em) { html { font-size: 100%; } }
@media screen and (min-width: 125em) { html { font-size: 100%; } }

:root {
  /* Structural — identical in both schemes */
  --tc-sidebar-w:    264px;   /* left nav      */
  --tc-toc-w:        288px;   /* right TOC     */
  --tc-measure:      896px;   /* content column */
  --tc-radius:       8px;
  --tc-radius-card:  12px;
  --tc-control-h:    32px;
}

/* Light — the default scheme. Neutrals from trilocore.com. */
[data-md-color-scheme="default"] {
  --md-default-bg-color:        #ffffff;
  --md-default-fg-color:        #0f172a;
  --md-default-fg-color--light: #475569;
  --md-default-fg-color--lighter: #94a3b8;
  --md-default-fg-color--lightest: #cbd5e1;

  --md-primary-fg-color:        #ffffff;
  --md-primary-bg-color:        #0f172a;
  --md-accent-fg-color:         #c2410c;

  --md-typeset-color:           #0f172a;
  --md-typeset-a-color:         #0f172a;

  --md-code-bg-color:           #f8fafc;
  --md-code-fg-color:           #0f172a;

  --tc-surface-page:            #ffffff;
  --tc-surface-sunken:          #f8fafc;
  --tc-surface-card:            #ffffff;
  --tc-hairline:                rgba(15, 23, 42, .10);
  --tc-hairline-strong:         rgba(15, 23, 42, .16);
  --tc-accent:                  #ea580c;
  --tc-selected:                rgba(15, 23, 42, .06);
  --tc-inline-code-bg:          #f1f5f9;
}

/* Dark — the toggle. Console-dark, matching the site's --d-* console cards. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #0d1117;
  --md-default-fg-color:        #d7dde5;
  --md-default-fg-color--light: #a8b3c1;
  --md-default-fg-color--lighter: #8b949e;
  --md-default-fg-color--lightest: #6b7684;

  --md-primary-fg-color:        #0d1117;
  --md-primary-bg-color:        #d7dde5;
  --md-accent-fg-color:         #fb923c;

  --md-typeset-color:           #d7dde5;
  --md-typeset-a-color:         #d7dde5;

  --md-code-bg-color:           #11161d;
  --md-code-fg-color:           #d7dde5;

  --tc-surface-page:            #0d1117;
  --tc-surface-sunken:          #11161d;
  --tc-surface-card:            #11161d;
  --tc-hairline:                rgba(255, 255, 255, .10);
  --tc-hairline-strong:         rgba(255, 255, 255, .16);
  --tc-accent:                  #fb923c;
  --tc-selected:                rgba(255, 255, 255, .08);
  --tc-inline-code-bg:          #1a212b;
}

/* --------------------------------------------------------------------------
   2. Three-pane layout
   Material centres one grid; Anthropic pins a fixed sidebar + fixed TOC and
   centres only the measure between them. We keep Material's grid but widen it
   and constrain the article, which gets the same optical result without
   fighting the theme's scroll handling.
   -------------------------------------------------------------------------- */

.md-grid {
  max-width: 1600px;
}

/* Desktop only. Below the layout breakpoint `.md-sidebar--primary` is not a
   column at all — it is the off-canvas drawer, `position: fixed` with a
   negative `left` that Material derives from ITS OWN drawer width. Setting our
   wider 264px here unconditionally left 22px of the drawer protruding into
   every phone-width page (measured: width 264, left -242), which rendered as a
   strip of sliced nav text down the left edge. Pre-existing since the sheet was
   written; found by rendering at 390px, invisible at every desktop size. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { width: var(--tc-sidebar-w); }
}

.md-sidebar--secondary { width: var(--tc-toc-w); }

.md-content {
  max-width: var(--tc-measure);
  margin-inline: auto;
}

.md-content__inner {
  margin-inline: 1.5rem;
  padding-top: 1.25rem;
}

/* Material prints an h1-sized top margin that fights the breadcrumb row. */
.md-content__inner > :first-child { margin-top: 0; }

/* Hide the auto-generated "Edit this page" pencil — the repo is private. */
.md-content__button { display: none; }

/* --------------------------------------------------------------------------
   3. Header — 56px, hairline, no shadow
   -------------------------------------------------------------------------- */

.md-header {
  height: 56px;
  background: var(--tc-surface-page);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--tc-hairline);
  box-shadow: none;
}

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

.md-header__title { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }

/* Product-switcher tab row, styled as text tabs rather than a filled bar. */
.md-tabs {
  background: var(--tc-surface-page);
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--tc-hairline);
}

.md-tabs__link {
  font-size: .875rem;
  opacity: 1;
  color: var(--md-default-fg-color--light);
  margin-top: .55rem;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--md-default-fg-color);
}

.md-tabs__item--active .md-tabs__link {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--tc-accent);
}

/* --------------------------------------------------------------------------
   4. Sidebar — 32px controls, 14px, no icons, ghost-selected current page
   -------------------------------------------------------------------------- */

.md-sidebar { padding-top: 1rem; }

.md-nav { font-size: .875rem; }

.md-nav__title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  padding-top: 1.1rem;
  box-shadow: none;
}

.md-nav__link {
  min-height: var(--tc-control-h);
  display: flex;
  align-items: center;
  padding: 0 .6rem;
  border-radius: var(--tc-radius);
  color: var(--md-default-fg-color--light);
  transition: background-color .1s, color .1s;
}

.md-nav__link:hover {
  background: var(--tc-selected);
  color: var(--md-default-fg-color);
}

.md-nav__link--active,
.md-nav__link[aria-current="page"] {
  background: var(--tc-selected);
  color: var(--md-default-fg-color);
  font-weight: 500;
}

.md-sidebar--primary { border-right: 1px solid var(--tc-hairline); }

/* --------------------------------------------------------------------------
   5. Right-hand TOC — sticky, flat, no chrome
   -------------------------------------------------------------------------- */

.md-sidebar--secondary .md-nav__title { display: none; }

.md-sidebar--secondary .md-nav__link {
  min-height: 0;
  padding: .2rem 0 .2rem .75rem;
  border-radius: 0;
  border-left: 1px solid transparent;
}

.md-sidebar--secondary .md-nav__link--active {
  background: none;
  border-left-color: var(--tc-accent);
  color: var(--md-default-fg-color);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Typography — 16/24 prose, 14px chrome, tight headings
   -------------------------------------------------------------------------- */

.md-typeset {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-typeset-color);
}

.md-typeset h1 {
  font-size: 1.75rem;      /* 28px */
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--md-default-fg-color);
  margin-bottom: .6rem;
}

.md-typeset h2 {
  font-size: 1.5rem;       /* 24px */
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--tc-hairline);
}

.md-typeset h3 {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 1.9rem;
}

.md-typeset h4 {
  font-size: .9375rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

/* Prose links are text-coloured + underlined, not accent-coloured. Anthropic's
   pattern, and it keeps a paragraph readable when half of it is API nouns. */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--md-default-fg-color--lightest);
}

.md-typeset a:hover {
  color: var(--tc-accent);
  text-decoration-color: var(--tc-accent);
}

/* Nav and TOC links are chrome, not prose — never underline them. */
.md-nav a, .md-tabs a, .md-header a, .md-footer a { text-decoration: none; }

/* --------------------------------------------------------------------------
   7. Code — pill inline, 12px-radius blocks on a hairline
   -------------------------------------------------------------------------- */

.md-typeset code {
  font-size: .875em;
  padding: .1em .4em;
  border-radius: var(--tc-radius);
  background: var(--tc-inline-code-bg);
  color: var(--md-code-fg-color);
}

.md-typeset pre > code {
  padding: 1rem;
  border-radius: var(--tc-radius-card);
  background: var(--md-code-bg-color);
  border: 1px solid var(--tc-hairline);
  font-size: .8125rem;     /* 13px */
  line-height: 1.5;
}

.md-typeset .highlight > pre > code { border-radius: var(--tc-radius-card); }

/* Language tabs above a code group — pill tablist, not Material's underline. */
.md-typeset .tabbed-labels > label {
  font-size: .8125rem;
  font-weight: 500;
  padding: .3rem .7rem;
  border-radius: var(--tc-radius);
  color: var(--md-default-fg-color--light);
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--md-default-fg-color);
  background: var(--tc-selected);
}

.md-typeset .tabbed-labels { box-shadow: none; border-bottom: 1px solid var(--tc-hairline); }

/* --------------------------------------------------------------------------
   8. Cards, callouts, tables — one hairline vocabulary
   -------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--tc-hairline);
  border-radius: var(--tc-radius-card);
  background: var(--tc-surface-card);
  padding: 1.1rem 1.2rem;
  box-shadow: none;
  transition: border-color .12s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--tc-hairline-strong);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li > :first-child { margin-top: 0; }

.md-typeset .grid.cards h3 {
  font-size: .9375rem;
  margin: 0 0 .35rem;
}

.md-typeset .grid.cards p {
  font-size: .875rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--tc-hairline);
  border-left-width: 1px;
  border-radius: var(--tc-radius-card);
  box-shadow: none;
  font-size: .875rem;
  background: var(--tc-surface-sunken);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-size: .875rem;
  font-weight: 600;
  background: transparent;
}

.md-typeset table:not([class]) {
  font-size: .875rem;
  border: 1px solid var(--tc-hairline);
  border-radius: var(--tc-radius);
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--tc-surface-sunken);
  font-weight: 600;
  color: var(--md-default-fg-color);
}

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

/* --------------------------------------------------------------------------
   9. HTTP method badges for the API reference
   Usage in markdown:  ### :material-circle:{ .m-get } `GET /api/v1/...`
   or simply:          <span class="m m-get">GET</span>
   -------------------------------------------------------------------------- */

.md-typeset .m {
  display: inline-block;
  font-family: var(--md-code-font-family, monospace);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: .3em .5em;
  border-radius: 5px;
  border: 1px solid currentColor;
  vertical-align: .12em;
  margin-right: .45em;
}

.md-typeset .m-get    { color: #0369a1; }
.md-typeset .m-post   { color: #15803d; }
.md-typeset .m-patch  { color: #a16207; }
.md-typeset .m-put    { color: #a16207; }
.md-typeset .m-delete { color: #b91c1c; }
.md-typeset .m-ws     { color: #6d28d9; }

[data-md-color-scheme="slate"] .md-typeset .m-get    { color: #38bdf8; }
[data-md-color-scheme="slate"] .md-typeset .m-post   { color: #4ade80; }
[data-md-color-scheme="slate"] .md-typeset .m-patch  { color: #fbbf24; }
[data-md-color-scheme="slate"] .md-typeset .m-put    { color: #fbbf24; }
[data-md-color-scheme="slate"] .md-typeset .m-delete { color: #f87171; }
[data-md-color-scheme="slate"] .md-typeset .m-ws     { color: #c4b5fd; }

/* An endpoint heading is a landmark, not prose — give it room and a hairline. */
.md-typeset h3:has(> .m) {
  border-top: 1px solid var(--tc-hairline);
  padding-top: 1.4rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 1rem;
  letter-spacing: -.005em;
}

/* --------------------------------------------------------------------------
   10. Search — sidebar field-button, Ctrl-K affordance
   -------------------------------------------------------------------------- */

.md-search__form {
  border-radius: var(--tc-radius);
  background: var(--tc-surface-sunken);
  border: 1px solid var(--tc-hairline);
  box-shadow: none;
  height: var(--tc-control-h);
}

.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--tc-surface-page);
}

/* --------------------------------------------------------------------------
   11. Footer — a hairline and a line of text. No prev/next by design:
   the Anthropic docs have none, and `navigation.footer` is deliberately
   omitted from mkdocs.yml to match.
   -------------------------------------------------------------------------- */

.md-footer { background: var(--tc-surface-page); }

.md-footer-meta {
  background: var(--tc-surface-page);
  border-top: 1px solid var(--tc-hairline);
  color: var(--md-default-fg-color--light);
  font-size: .8125rem;
}

.md-copyright { color: var(--md-default-fg-color--lighter); }

/* --------------------------------------------------------------------------
   12. Landing page — `hide: navigation` pages get a wider, centred measure
   -------------------------------------------------------------------------- */

.md-typeset .tc-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  max-width: 62ch;
}

/* Reflow: never let a table or code block force horizontal page scroll. */
@media screen and (max-width: 76.1875em) {
  .md-content { max-width: 100%; }
  .md-sidebar--primary { border-right: none; }
}

/* --------------------------------------------------------------------------
   13. API-reference readability
   Three defects measured in headless Chrome at 1280x720 on
   /docs/en/api/reference/bevm-targets/, all invisible to `--strict` and to
   tools/verify-docs.py because none of them is a broken link or a bad fact.
   -------------------------------------------------------------------------- */

/* 13a. THE TOC WAS UNUSABLE ON REFERENCE PAGES.
   Every entry on a page is an HTTP path sharing a long prefix, and Material
   ellipsises a TOC label that overflows. Three consecutive entries rendered
   as the identical string "GET /api/v1/bevm/compila…". The generator now
   strips the page-constant prefix (data-toc-label), which shortens them — but
   a path is ONE unbreakable token, so the discriminating tail is still exactly
   what the ellipsis eats: "/contracts/{address}/…" three times over.
   Wrapping beats truncating here: a reference TOC exists to tell endpoints
   apart, and two short lines do that where one clipped line cannot. Scoped to
   the secondary sidebar so prose TOCs elsewhere keep Material's behaviour. */
.md-sidebar--secondary .md-nav__link .md-ellipsis {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;   /* paths have no spaces to break at */
}

.md-sidebar--secondary .md-nav__link {
  line-height: 1.35;
  padding-block: .3rem;
}

/* 13b. THE STICKY "Docs" LABEL GHOSTED THE ROW BENEATH IT — so it is gone.
   Because everything lives under one top-level section, Material lifts that
   section into a sticky header (`.md-nav--lifted`) and masks the scrolling
   list behind it with `box-shadow: 0 0 8px 8px <page-bg>` — a BLURRED spread.
   Measured at 1280x720: the label sits at 106–138px with rows at 130–162, so
   the row below it was overlapped by 8px of soft gradient and rendered as
   half-faded text. It read as a font-rendering bug; three separate captures
   showed it, on every reference page.
   A hard-edged mask would fix the ghosting but keep a redundant 32px band:
   the label's only text is "Docs", which the "Guides" tab directly above it
   already says. Deleting it removes the artifact AND the redundancy, and
   returns 32px to the nav list.
   Desktop only — below 76.25em the same element is the drawer's section
   control and genuinely navigational, so it stays. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--lifted
    > .md-nav__list > .md-nav__item--section > label.md-nav__link {
    display: none;
  }
}

/* 13c. The fact table is a key/value list, so its first column is a label.
   Keep it from stretching to half the table — but ONLY where there is room.
   A flat `width: 12rem` reserved 192px of a 390px phone viewport and squeezed
   `Authorization: Bearer` down to one character per line; measured, not
   assumed. Above the layout breakpoint the pane is ~680px, so 12rem is safe. */
@media screen and (min-width: 76.25em) {
  .md-typeset table:not([class]) th:first-child { width: 12rem; }
}

/* An endpoint's path is the thing readers scan for — never let it wrap
   mid-token in the heading, and keep the method badge on the same line. */
.md-typeset h3:has(> .m) > code { overflow-wrap: anywhere; }