/* Nominal's look for Shibuya: the landing page's (landing/styles.css) fonts, dark palette, and
   header, on top of instro's docs styling. Project-specific styles stay in each project. */

:root {
  --sy-f-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sy-f-heading: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sy-f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --accent-9: #0b0b0b;
  --accent-10: #262626;
  --accent-a11: #0b0b0b;
  --accent-a12: #0b0b0b;
  --sy-c-link: #0b0b0b;
  --sy-c-link-hover: #525252;
}

/* The landing page's dark palette: neutral greys, white headings, hairline borders. */
html.dark {
  --accent-9: #ffffff;
  --accent-10: #e5e5e5;
  --accent-a11: #ffffff;
  --accent-a12: #ffffff;
  --sy-c-link: #ffffff;
  --sy-c-link-hover: #a3a3a3;
  --sy-c-background: #1f1f1f;
  --sy-c-surface: #222222;
  --sy-c-text: #d4d4d4;
  --sy-c-heading: #ffffff;
  --sy-c-bold: #ffffff;
  --sy-c-light: #a3a3a3;
  --sy-c-border: rgba(255, 255, 255, 0.08);
  --sy-c-divider: rgba(255, 255, 255, 0.08);
  --sy-c-foot-background: #181818;
  --nominal-header: #181818;
}

/* Header: a solid bar with a hairline border, like the landing page's (no blur). */
:root {
  --nominal-header: #ffffff;
}
.sy-head-blur {
  background-color: var(--nominal-header);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--sy-c-divider);
}

/* Nominal brand has hard edges — no rounded corners anywhere. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Mintlify-style links: text colour with an underline, not an accent colour. */
.yue a.reference,
.yue a.external {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The project's logo, or its name when it has none: uppercase mono, like the landing page's
   "DOCS / FOR DEVELOPERS". */
.sy-head-brand img {
  height: 28px;
  width: auto;
}
.sy-head-brand strong {
  font-family: var(--sy-f-mono);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--sy-c-heading);
}

/* The Nominal logo before the project's (templates/partials/site-head.html), linking to the docs
   landing page, then a divider, as on the landing page's header ("NOMINAL / DOCS"). */
.nominal-hub {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nominal-hub img {
  height: 18px;
  width: auto;
}
.nominal-hub .dark-logo,
.dark .nominal-hub .light-logo {
  display: none;
}
.dark .nominal-hub .dark-logo {
  display: inline;
}
.nominal-hub-divider {
  margin: 0 0.75rem;
  color: #7a7a7a;
  font-size: 1.25rem;
  font-weight: 300;
}
/* The tabs pad themselves, so the divider before them needs less space on that side. */
.nominal-tabs-divider {
  margin-right: 0.25rem;
}
/* On narrow screens the tabs fold into the menu: drop the divider before them, and keep the logos
   together on the left rather than spread across the bar. */
@media (max-width: 767px) {
  .nominal-tabs-divider {
    display: none;
  }
  .sy-head-inner {
    justify-content: flex-start;
  }
  .sy-head-actions {
    margin-left: auto;
  }
}

/* Tighter, Mintlify-like API blocks: indented members with a hairline rail
   so it's clear which members belong to which class. */
dl.py > dd {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--sy-c-divider);
}

dl.py.class > dt,
dl.py.function > dt,
dl.py.pydantic_model > dt {
  font-size: 0.95em;
}

/* Long method names in the on-page TOC wrap instead of clipping. */
.sy-rside .localtoc a,
.sy-rside a {
  overflow-wrap: anywhere;
}

.sy-lside .globaltoc a {
  overflow-wrap: anywhere;
}

/* Left nav: page entries a step smaller than body text and indented under
   their section captions (Library, Instruments, …), which keep their size. */
.sy-lside .globaltoc > ul {
  padding-left: 0.75rem;
}

.sy-lside .globaltoc > ul a {
  font-size: 0.8125rem;
}

/* Right "On this page" entries match the left nav: same size, and API entries
   (InstroPSU, open(), …) in the text font rather than monospace. */
.sy-rside .localtoc a {
  font-size: 0.8125rem;
}

.sy-rside .localtoc code,
.sy-rside .localtoc .pre {
  font-family: inherit;
  font-size: inherit;
}

/* Header rows of column-labelled tables a shade darker than the alternating
   rows (--gray-a2); the translucent step adapts to dark mode. */
:root {
  --yue-c-th-background: var(--gray-a4);
}

/* ---- Guides: elements ported from the Mintlify site ---- */

/* Page description under the title (Mintlify front-matter description). */
.yue p.lead {
  font-size: 1.125rem;
  color: var(--sy-c-light);
  margin-top: -0.5rem;
}

/* Cards: hairline border; in dark mode the landing page's card greys. */
.sd-card {
  border: 1px solid var(--sy-c-border);
  box-shadow: none !important;
  background: var(--sy-c-background);
}
.sd-card:hover {
  border-color: var(--sy-c-text);
}
html.dark .sd-card {
  background: #222222;
}
html.dark .sd-card:hover {
  background: #2d2d2d;
  border-color: rgba(255, 255, 255, 0.25);
}
.sd-card .sd-card-title {
  font-weight: 600;
  margin-bottom: 0;
}

/* Numbered steps (Mintlify <Steps>): a counter badge beside each step. */
.steps {
  counter-reset: step;
  margin: 1.5rem 0;
}
.steps > .step {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.75rem;
  border-left: 1px solid var(--sy-c-divider);
  margin-left: 0.875rem;
}
.steps > .step::before {
  content: counter(step);
  position: absolute;
  left: -0.875rem;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sy-c-background);
  background: var(--sy-c-heading);
}
.steps > .step:last-child {
  border-left-color: transparent;
}

/* "Request a demo" (outlined) and "Open app" (filled), the landing page's header buttons
   (templates/partials/nav-socials.html). */
.nominal-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  padding: 0.55rem 0.875rem;
  border: 1px solid var(--sy-c-heading);
  font-family: var(--sy-f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sy-c-heading) !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.nominal-btn:hover {
  background-color: var(--gray-a3);
}
.nominal-btn-filled {
  background-color: var(--sy-c-heading);
  color: var(--sy-c-background) !important;
}
.nominal-btn-filled:hover {
  background-color: var(--sy-c-light);
  border-color: var(--sy-c-light);
}

/* The overview video, centred and responsive. */
.yue iframe {
  max-width: 100%;
}

/* Tabs: uppercase mono, muted; the current one (templates/components/nav-links.html) is bright and
   underlined. */
.sy-head-links a {
  font-family: var(--sy-f-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--sy-c-light);
}
.sy-head-links a:hover,
.sy-head-links a.current {
  color: var(--sy-c-heading);
}
.sy-head-links a.current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Sidebar section titles: uppercase mono, like the tabs. */
.sy-lside .caption,
.sy-rside .localtoc > h3 {
  font-family: var(--sy-f-mono);
}

/* Current page in the left nav: shaded, as on Mintlify. */
.sy-lside .globaltoc a.current {
  background: var(--gray-a3);
  margin: 0 -0.5rem;
  padding: 0.25rem 0.5rem;
}