/* `@import` has to come before every other rule in the file. Space Grotesk is
   the heading face of the brand; the body and code faces are requested by the
   theme itself, from `font` in "zensical.toml". */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

/* ---------------------------------------------------------------------------
   Brand palette
   ---------------------------------------------------------------------------
   The same tokens the application declares in its own stylesheet, so the docs
   and the product read as one thing. The values are duplicated here rather
   than imported: NexCTF ships them inside a bundled Tailwind theme, which this
   site does not build.

   Both palette entries are declared as `custom` in "zensical.toml", so the
   theme applies no color set of its own and these are the only definitions.
--------------------------------------------------------------------------- */

:root {
  --nex-bg: #0b1210;          /* page background, dark scheme */
  --nex-surface: #132420;     /* cards, code blocks, footer */
  --nex-accent: #3b82f6;      /* electric blue, the brand accent */
  --nex-accent-hover: #60a0fa;
  --nex-accent-strong: #306ac9; /* the accent, darkened to stay readable on white */
  --nex-accent-on: #04122b;    /* ink placed on an accent fill */
  --nex-text-primary: #edefed;
  --nex-text-secondary: #8c948f;
}

/* The header and its tab bar are painted with the brand near-black in both
   schemes, the way the application paints its own navigation bar. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--nex-bg);
  --md-primary-fg-color--light: var(--nex-surface);
  --md-primary-fg-color--dark: #050908;
  --md-primary-bg-color: var(--nex-text-primary);
  --md-primary-bg-color--light: var(--nex-text-secondary);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--nex-accent);
  --md-accent-fg-color--transparent: rgba(59, 130, 246, 0.1);
  --md-accent-bg-color: var(--nex-accent-on);
  --md-accent-bg-color--light: rgba(4, 18, 43, 0.7);
}

/* Links default to the primary color, which is the near-black above. Point
   them at the accent instead, per scheme: the plain accent clears 4.5:1 on the
   dark surface but not on white, where the darkened shade is what the app
   itself falls back to. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--nex-accent-strong);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--nex-accent);

  --md-default-bg-color: var(--nex-bg);
  --md-default-bg-color--light: rgba(11, 18, 16, 0.7);
  --md-default-bg-color--lighter: rgba(11, 18, 16, 0.3);
  --md-default-bg-color--lightest: rgba(11, 18, 16, 0.12);

  --md-default-fg-color: var(--nex-text-primary);
  --md-default-fg-color--light: var(--nex-text-secondary);
  --md-default-fg-color--lighter: rgba(237, 239, 237, 0.32);
  --md-default-fg-color--lightest: rgba(237, 239, 237, 0.12);

  --md-code-bg-color: var(--nex-surface);
  --md-code-fg-color: var(--nex-text-primary);

  --md-footer-bg-color: var(--nex-surface);
  --md-footer-bg-color--dark: var(--nex-bg);
}

/* Headings take the brand display face, as they do in the application. The
   site title in the header is a heading in everything but markup. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__topic:first-child > .md-ellipsis {
  font-family: "Space Grotesk", var(--md-text-font-family), sans-serif;
  font-weight: 600;
}

/* The mark is a rounded square that reads as a solid block at header size, so
   it needs the room the theme gives a wordmark rather than an icon. */
.md-header__button.md-logo :is(img, svg) {
  height: 1.4rem;
  width: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Page status: "wip"
   ---------------------------------------------------------------------------
   The theme ships icons for `new`, `deprecated` and `encrypted` only, so a
   custom `status: wip` front-matter value renders an empty badge until the
   mask image is defined here. Same shape as the theme's own definitions:
   a lucide glyph as a data URI, masked by `.md-status--<type>:after`.
--------------------------------------------------------------------------- */

:root {
  --md-status--wip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M17 12h.01M12 12h.01M7 12h.01"/></svg>');
}

.md-status--wip:after {
  -webkit-mask-image: var(--md-status--wip);
  mask-image: var(--md-status--wip);
}

/* ---------------------------------------------------------------------------
   Code spans in tables
   ---------------------------------------------------------------------------
   Long values in a narrow table column break mid-token by default
   ("/api/v1/oauth2/.well-known/oauth-authorizat ion-server"), which makes them
   unreadable and awkward to select. Keep code spans in a table cell on one
   line; the theme already scrolls a table that ends up too wide.
--------------------------------------------------------------------------- */

.md-typeset table:not([class]) td > code {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Embedded OpenAPI viewer
   ---------------------------------------------------------------------------
   RapiDoc defaults to filling the viewport height. Inside a docs page it has
   to flow with the content instead, or the page gets a second scrollbar.
--------------------------------------------------------------------------- */

rapi-doc.nex-rapidoc {
  display: block;
  width: 100%;
  height: auto;
  min-height: 20rem;

  /* RapiDoc declares its palette as custom properties on its own `:host`.
     Properties set on the host from the outer document win over those, which
     is how the viewer is repainted in the theme's colours without touching
     the component. Doing it here rather than through its `bg-color` attribute
     also means it follows the palette toggle for free: Material redefines
     these tokens per colour scheme.

     `--bg` is transparent on purpose. RapiDoc's own dark default is a mid grey
     that reads as a slab sitting on the near-black page. */
  --bg: transparent;
  --bg2: var(--md-code-bg-color);
  --bg3: var(--md-default-fg-color--lightest);
  --light-bg: var(--md-default-fg-color--lightest);
  --fg: var(--md-typeset-color);
  --fg2: var(--md-default-fg-color--light);
  --fg3: var(--md-default-fg-color--light);
  --primary-color: var(--md-typeset-a-color);
  /* `--border-color` draws only the rule under each tag section and the
     tooltip outlines. The section rule reads as a divider bar and the coloured
     headings already separate the groups, so it goes; the tooltips keep their
     own background and stay legible without an outline.

     `--light-border-color` is the one that separates endpoint rows, so it
     keeps the weight the theme uses for its own rules and table borders. */
  --border-color: transparent;
  --light-border-color: var(--md-default-fg-color--lightest);
}

/* Shown in place of the viewer when the CDN script cannot be fetched. */
.nex-rapidoc-error {
  border-left: 0.2rem solid var(--md-typeset-color);
  opacity: 0.75;
  padding-left: 0.8rem;
}