/*
  Shared docs theme ("Glow"). The chrome, type, code, admonition and API
  furniture styling for every nanoblox docs site. Colour comes entirely from
  the --hd-* knobs each project defines in its own stylesheet (see
  projects/hd-admin/docs/stylesheets/hd-admin.css for the reference set), so
  retinting one site never touches this file.

  Synced into each project's docs/_shared/ by build.sh. Edit HERE, not the
  copies
*/
body[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-default-bg-color: #0e1119;
  --md-default-fg-color: rgba(234, 240, 255, 0.92);
  --md-default-fg-color--light: #c3cde6;
  --md-default-fg-color--lighter: #8b9ab3;
  --md-default-fg-color--lightest: #232c3e;
  --md-primary-fg-color: #0e1119;
  --md-primary-fg-color--dark: #1a2560; /* mobile drawer repo card */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #c3cde6;
  --md-accent-fg-color: var(--hd-accent);
  --md-accent-fg-color--transparent: rgba(var(--hd-tint), 0.14);
  --md-typeset-a-color: var(--hd-link);
  --md-code-bg-color: #182030;
  --md-code-fg-color: #e6ecff;
  --md-typeset-mark-color: rgba(var(--hd-tint), 0.28);
  --md-admonition-bg-color: #151a24;
  --md-footer-bg-color: #0a0e16;
  --md-footer-bg-color--dark: #070a10;
  --md-shadow-z1: none;
  --md-shadow-z2: 0 8px 30px rgba(0, 0, 0, 0.5);
  --hd-radius: 12px;
  color-scheme: dark;

  /* Luau-flavoured syntax colours */
  --md-code-hl-keyword-color: var(--hd-keyword);
  --md-code-hl-string-color: #a5e6a1;
  --md-code-hl-number-color: #ffcb6b;
  --md-code-hl-comment-color: #6b7894;
  --md-code-hl-function-color: var(--hd-function);
  --md-code-hl-constant-color: #f78c6c;
  --md-code-hl-operator-color: #89ddff;
  --md-code-hl-punctuation-color: #8b9ab3;
  --md-code-hl-special-color: #f07178;
  --md-code-hl-name-color: #e6ecff;
  --md-code-hl-variable-color: #e6ecff;
  --md-code-hl-generic-color: #e6ecff;
}

/* Announcement bar */

html.hda-announce-dismissed .md-banner {
  display: none;
}

.md-banner {
  background: linear-gradient(90deg, var(--hd-bgrad-1), var(--hd-bgrad-2) 60%, var(--hd-bgrad-3));
  color: #c3cde6;
  border-bottom: 1px solid rgba(var(--hd-tint), 0.25);
}

.md-banner a {
  color: var(--hd-pill-text);
  font-weight: 700;
}

.md-banner a:hover {
  color: #ffffff;
}

/* The family signature strip below every footer, in the slot the removed
   "Made with Material" meta bar used to occupy */
/* Near-black on doc pages. The landing instead continues its own navy so the
   bar never reads as a darker band under the CTA */
.nb-signature {
  background: rgba(5, 8, 14, 0.8);
  padding: 18px 0 22px;
}

.hda-home .nb-signature {
  background: #0b1120;
}

/* Signature left, legal links right, on the same measure as the page content */
.nb-signature-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0.6rem;
}

.nb-signature-legal {
  display: flex;
  gap: 18px;
}

.nb-signature-legal a {
  font-size: 13px;
  color: var(--md-default-fg-color--lighter);
  transition: color 150ms ease;
}

.nb-signature-legal a:hover {
  color: #ffffff;
}

.nb-signature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--md-default-fg-color--lighter);
  transition: color 150ms ease;
}

.nb-signature-link:hover {
  color: #ffffff;
}

.nb-signature-link img {
  width: 16px;
  height: 16px;
  display: block;
}

.nb-signature-link strong {
  font-weight: 700;
}

/* Header + tabs */

/* No "Made with Material for MkDocs" strip */
.md-footer-meta {
  display: none;
}

/* Pull the logo and site title together */
.md-header__button.md-logo {
  padding-right: 0.1rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

.md-header {
  background: linear-gradient(
    90deg,
    var(--hd-grad-1) 0%,
    var(--hd-grad-2) 55%,
    var(--hd-grad-3) 100%
  );
  border-bottom: 1px solid rgba(var(--hd-tint), 0.25);
  box-shadow: 0 4px 24px rgba(var(--hd-strong-tint), 0.15);
}

.md-tabs {
  background: rgba(14, 17, 25, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #232c3e;
}

.md-tabs__link--active {
  color: var(--hd-link);
  font-weight: 700;
}

/* Off-site links (like the Dashboard tab and hero button) carry Remixicon's
   external-link-line, drawn in the text colour via mask so it tints with state */
.hda-external-link::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.4em;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.md-search__form {
  background: rgba(var(--hd-tint), 0.1);
  border: 1px solid rgba(var(--hd-tint), 0.2);
  border-radius: 8px;
}

/* Left nav. Every link gets the same padding so the active pill never shifts
   or clips, the background alone marks it */

/* Mobile drawer. Material paints the logo + title block in the flat primary
   colour, a stark black slab against the drawer. The same navy as the rest
   of the chrome sits softer here */
@media screen and (max-width: 76.1875em) {
  /* The [for] variant outguns Material's own attribute selector on the outer
     title block; the source card is the repo widget below it */
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"],
  .md-nav--primary .md-nav__source {
    background: var(--md-primary-fg-color--dark);
    color: #ffffff;
  }

  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.md-nav__link {
  border-radius: 8px;
  padding: 0.15em 0.6em;
  /* Plain entries sit a step greyer than the bold group headings */
  color: var(--md-default-fg-color--light);
}

/* Group headings ("Setup", "Using HD Admin") keep the full-strength colour */
.md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color);
}

.md-nav__link--active {
  color: var(--hd-link);
  font-weight: 700;
}

/* A loose page following a nav group otherwise inherits the group's full
   section margin and reads as a detached orphan */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section + .md-nav__item:not(.md-nav__item--section) {
    margin-top: -0.6em;
  }
}

/* The sidebar repeats the active tab's name ("Get Started") as its first row,
   which is redundant next to the group headings. Desktop only, the mobile
   drawer needs that row for its back navigation */
@media screen and (min-width: 76.25em) {
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none;
  }
}

/* Type */

.md-typeset h1,
.md-typeset h2 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Code */

.md-typeset code {
  border-radius: 6px;
  padding: 0.15em 0.4em;
}

.md-typeset pre > code {
  border-radius: var(--hd-radius);
  padding: 1em 1.2em;
  border: 1px solid rgba(var(--hd-tint), 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Admonitions, in the Fusion docs style: full coloured outline with a soft
   outer + inset glow, no title band, and the faintest tint of the type colour
   over the surface (adapted from dphfox/Fusion docs/assets/theme/admonition.css) */

.md-typeset .admonition-title,
.md-typeset summary {
  background: none !important;
}

.md-typeset :is(.admonition, details) {
  --admonition-color: #448aff;
  border-radius: 0.25rem;
  border-width: 0.1rem !important;
  box-shadow: 0 0.25em 1.5em -0.75em var(--admonition-color), inset 0 1em 2em -2.25em
    var(--admonition-color) !important;
  background: linear-gradient(var(--admonition-color) -99999%, transparent 5000%),
    var(--md-admonition-bg-color);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  background-color: currentColor;
}

.md-typeset .note {
  --admonition-color: #448aff;
}
.md-typeset .abstract {
  --admonition-color: #00b0ff;
}
.md-typeset .info {
  --admonition-color: #00b8d4;
}
.md-typeset .tip {
  --admonition-color: #00bfa5;
}
.md-typeset .success {
  --admonition-color: #00c853;
}
.md-typeset .question {
  --admonition-color: #64dd17;
}
.md-typeset .warning {
  --admonition-color: #ff9100;
}
.md-typeset .failure {
  --admonition-color: #ff5252;
}
.md-typeset .danger {
  --admonition-color: #ff1744;
}
.md-typeset .bug {
  --admonition-color: #f50057;
}
.md-typeset .example {
  --admonition-color: #7c4dff;
}
.md-typeset .quote {
  --admonition-color: #9e9e9e;
}

/* Our own type. Material has no colour for it, so give it the brand blue */
.md-typeset .important {
  --admonition-color: #5c7cff;
  border-color: #5c7cff;
}

/* The copy button only appears while hovering a code block (Fusion-style) */

.md-typeset .highlight .md-clipboard {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.md-typeset .highlight:hover .md-clipboard {
  opacity: 0.5;
}

.md-typeset .highlight .md-clipboard:hover {
  opacity: 1;
}

/* Smooth in-page scrolling. landing.js inhibits it for ordinary navigation so
   it only animates anchor jumps */

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }

  :root.hda-inhibit-smooth-scrolling {
    scroll-behavior: auto;
  }
}

.md-typeset img {
  border-radius: 0.25rem;
}

/* Content tabs sit on the code-block surface with an accent underline, so
   tabbed code reads as one connected component (Fusion-style) */

.md-typeset .tabbed-labels {
  background-color: var(--md-code-bg-color);
  box-shadow: none;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.js .md-typeset .tabbed-labels::before {
  background-color: transparent;
  height: 100%;
  box-shadow: 0 -0.325rem var(--md-code-bg-color) inset, 0 -0.4rem var(--hd-accent) inset;
}

.md-typeset .tabbed-labels > label {
  color: var(--md-code-fg-color);
  font-weight: 400;
  padding: 0;
  margin: 0.78125em 1.25em 0.625em;
}

.md-typeset .tabbed-set {
  box-shadow: var(--md-shadow-z2);
  border-radius: 0.25rem;
}

.tabbed-set .highlight > pre {
  box-shadow: none;
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  color: var(--hd-accent);
  font-weight: 700;
}

/* API reference furniture (Fusion-style): breadcrumbs, inline type signatures
   and the bento card grid on the API index */

.hd-api-breadcrumbs {
  display: flex;
  align-items: center;
  height: 2rem;
  opacity: 0.8;
}

.hd-api-breadcrumbs > *:not(:last-child)::after {
  content: "›";
  margin: 0 0.25rem;
}

/* Buttons in page content. Material paints these with the primary color,
   which is near-black in this theme, so restyle them from the accent knobs */
.md-typeset .md-button {
  border-radius: 10px;
  padding: 0.5em 1.6em;
  font-weight: 700;
  color: var(--hd-link, #7d97ff);
  border: 2px solid rgba(var(--hd-tint, 92, 124, 255), 0.45);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: rgba(var(--hd-tint, 92, 124, 255), 0.12);
  color: var(--hd-link, #7d97ff);
  border-color: var(--hd-accent, #5c7cff);
}
.md-typeset .md-button--primary {
  background-color: var(--hd-accent-strong, #335fff);
  border-color: var(--hd-accent-strong, #335fff);
  color: #fff;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--hd-accent, #5c7cff);
  border-color: var(--hd-accent, #5c7cff);
  color: #fff;
}

.hd-api-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hd-api-tag--available {
  background: rgba(0, 200, 83, 0.15);
  color: #4ade80;
  border: 1px solid rgba(0, 200, 83, 0.35);
}

.hd-api-tag--soon {
  background: rgba(var(--hd-tint), 0.12);
  color: var(--hd-pill-text);
  border: 1px solid rgba(var(--hd-tint), 0.3);
}

.hd-api-tag--server {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.hd-api-tag--client {
  background: rgba(0, 200, 83, 0.12);
  color: #4ade80;
  border: 1px solid rgba(0, 200, 83, 0.3);
}

.hd-api-tag--both {
  background: rgba(192, 132, 252, 0.12);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.3);
}

.hd-api-bento {
  column-width: 12rem;
  column-gap: 0.5rem;
}

.hd-api-bento > * {
  break-inside: avoid;
  background-color: var(--md-admonition-bg-color);
  border: 1px solid rgba(var(--hd-tint), 0.14);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem 0.35rem;
  margin: 0 0 0.5rem;
}

.hd-api-bento > * > h4 {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4em;
}

.hd-api-bento ul {
  list-style: none;
  margin: 0 0 0.6em;
  padding: 0;
}

.hd-api-bento li {
  margin: 0.25em 0;
}

/* Tables + rules */

.md-typeset table:not([class]) {
  border-radius: var(--hd-radius);
  overflow: hidden;
}

.md-typeset hr {
  border-bottom-width: 1px;
}

/* Scrollbars */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #39414f;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Flat mobile navigation. Material renders nested nav levels as sliding
   panels on phones, so reaching a page takes a tap per level. Our navs are
   small enough to show the whole outline at once, like the desktop sidebar.
   Group labels become headers and their children render inline beneath */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav {
    position: static;
    height: auto;
    background-color: transparent;
  }

  /* Defeats the off-canvas slide and the collapsed-grid accordion in one go */
  .md-nav--primary .md-nav__toggle ~ .md-nav {
    display: block;
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: none;
  }

  /* Nested panels carried a sticky back-header each. The root drawer title
     with the logo sits directly under .md-nav--primary, so it survives */
  .md-nav--primary .md-nav .md-nav__title {
    display: none;
  }

  /* Group labels read as headers now, not buttons: no drill arrow, no tap */
  .md-nav--primary .md-nav__item--nested > .md-nav__link {
    pointer-events: none;
    font-weight: 700;
    color: var(--md-default-fg-color);
  }

  .md-nav--primary .md-nav__item--nested > .md-nav__link .md-nav__icon {
    display: none;
  }

  /* Indentation carries the hierarchy the sliding panels used to */
  .md-nav--primary .md-nav .md-nav__link {
    padding-left: 1.4rem;
  }

  .md-nav--primary .md-nav .md-nav .md-nav__link {
    padding-left: 2rem;
  }

  /* One list means one scroll. Item snapping fought it on long outlines */
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    scroll-snap-type: none;
  }

  /* The drawer lists pages only. The active page's own headings and the
     old slide-to-contents icon stay out of it */
  .md-nav--primary .md-nav__link[for="__toc"] .md-icon {
    display: none;
  }

  .md-nav--primary .md-nav__link[for="__toc"] ~ .md-nav {
    display: none;
  }
}