/* The documentation wears kosmos.law's clothes.

   Night is the landing page's own palette (Kosmos-Law/web,
   src/styles/global.css): Nord, Polar Night ground and Snow Storm text. The
   landing page has no day side, so day borrows the application's nord-light
   theme (static/css/colors.css and palette.css): Snow Storm ground, Polar
   Night text, the deep frost blue for links. Both are set in Schibsted
   Grotesk. If either source changes, change the tokens below to match;
   everything else follows from them.

   Sizes: the theme sets the root font size to 20px, where the landing page
   uses 16px. A length here is the landing page's value in px divided by
   20 (its 12px card radius is 0.6rem), not its rem value. */

/* --- Tokens ------------------------------------------------------------ */

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --color-ground: #2e3440; /* nord0 */
  --color-panel: #3b4252; /* nord1 */
  --color-rule: #434c5e; /* nord2 */
  --color-strong: #eceff4; /* nord6: headings, hover */
  --color-text: #d8dee9; /* nord4 */
  --color-dim: #aab3c5; /* nord4 ↔ nord3 brightened */
  --color-link: #88c0d0; /* nord8, frost */
  --color-note: #88c0d0;
  --color-amber: #ebcb8b; /* nord13 */

  /* The landing page's cards: a translucent step up from the night. */
  --panel-fill: rgb(59 66 82 / 0.55);

  /* Syntax, from Nord's Frost and Aurora. */
  --hl-keyword: #81a1c1; /* nord9 */
  --hl-string: #a3be8c; /* nord14 */
  --hl-number: #b48ead; /* nord15 */
  --hl-function: #88c0d0;
  --hl-variable: #98c2c5;
  --hl-comment: #8792a8;

  /* The theme's newer surface tokens, as RGB triplets. */
  --color-foreground: 236 239 244;
  --color-background: 46 52 64;
  --color-background-subtle: 59 66 82;
  --color-backdrop: 36 41 51;

  --md-shadow-z1: none;
  --md-shadow-z2: 0 0.2rem 0.8rem rgb(0 0 0 / 0.25);
  --md-shadow-z3: 0 0.4rem 1.6rem rgb(0 0 0 / 0.3);
}

[data-md-color-scheme="default"] {
  color-scheme: light;

  --color-ground: oklch(0.951 0.007 261); /* nord6 */
  --color-panel: oklch(0.933 0.01 262); /* nord5 */
  --color-rule: oklch(0.868 0.021 262); /* below nord4: borders on snow */
  --color-strong: oklch(0.324 0.023 264); /* nord0 */
  --color-text: oklch(0.379 0.029 266); /* nord1 */
  --color-dim: oklch(0.537 0.044 264); /* nord3 brightened */
  --color-link: oklch(0.527 0.072 254); /* below nord10: link ink on snow */
  --color-note: oklch(0.594 0.077 254); /* nord10 */
  --color-amber: oklch(0.625 0.109 86); /* nord13 at ink weight */

  /* The same step up, here toward white. */
  --panel-fill: oklch(0.975 0.005 258 / 0.7);

  --hl-keyword: oklch(0.527 0.072 254);
  --hl-string: oklch(0.55 0.12 133); /* nord14 at ink weight */
  --hl-number: oklch(0.523 0.204 337.7); /* nord15 at ink weight */
  --hl-function: oklch(0.594 0.077 254);
  --hl-variable: oklch(0.55 0.06 200);
  --hl-comment: oklch(0.625 0.041 263);

  --color-foreground: 46 52 64;
  --color-background: 236 239 244;
  --color-background-subtle: 229 233 240;
  --color-backdrop: 216 222 233;

  --md-shadow-z1: none;
  --md-shadow-z2: 0 0.2rem 0.8rem rgb(46 52 64 / 0.12);
  --md-shadow-z3: 0 0.4rem 1.6rem rgb(46 52 64 / 0.16);
}

/* --- The header's controls share one height and one gap ----------------- */

:root {
  /* The landing page's corner button: a 15px line at 1.25, 8px of padding
     above and below, a 1px rule. The theme toggle and the search field
     take the same height so the three sit on one line. */
  --control-height: calc(0.75rem * 1.25 + 0.8rem + 2px);
  /* The space between the search field, the GitHub button and the toggle. */
  --control-gap: 1.4rem;
}

/* --- The theme's own variables, pointed at the tokens ------------------- */

[data-md-color-scheme] {
  --md-default-bg-color: var(--color-ground);
  --md-default-bg-color--light: color-mix(
    in srgb,
    var(--color-ground) 54%,
    transparent
  );
  --md-default-bg-color--lighter: color-mix(
    in srgb,
    var(--color-ground) 26%,
    transparent
  );
  --md-default-bg-color--lightest: color-mix(
    in srgb,
    var(--color-ground) 7%,
    transparent
  );

  --md-default-fg-color: var(--color-text);
  --md-default-fg-color--light: var(--color-dim);
  --md-default-fg-color--lighter: color-mix(
    in srgb,
    var(--color-dim) 50%,
    transparent
  );
  --md-default-fg-color--lightest: var(--color-rule);

  --md-primary-fg-color: var(--color-ground);
  --md-primary-fg-color--light: var(--color-panel);
  --md-primary-fg-color--dark: var(--color-ground);
  --md-primary-bg-color: var(--color-text);
  --md-primary-bg-color--light: var(--color-dim);

  --md-accent-fg-color: var(--color-strong);
  --md-accent-fg-color--transparent: color-mix(
    in srgb,
    var(--color-strong) 10%,
    transparent
  );
  --md-typeset-a-color: var(--color-link);

  --md-code-fg-color: var(--color-text);
  --md-code-bg-color: var(--color-panel);
  --md-code-bg-color--light: color-mix(
    in srgb,
    var(--color-panel) 90%,
    transparent
  );
  --md-code-bg-color--lighter: color-mix(
    in srgb,
    var(--color-panel) 54%,
    transparent
  );

  --md-code-hl-color: var(--color-link);
  --md-code-hl-color--light: color-mix(
    in srgb,
    var(--color-link) 15%,
    transparent
  );
  --md-code-hl-number-color: var(--hl-number);
  --md-code-hl-special-color: var(--color-amber);
  --md-code-hl-function-color: var(--hl-function);
  --md-code-hl-constant-color: var(--hl-number);
  --md-code-hl-keyword-color: var(--hl-keyword);
  --md-code-hl-string-color: var(--hl-string);
  --md-code-hl-name-color: var(--color-text);
  --md-code-hl-operator-color: var(--color-dim);
  --md-code-hl-punctuation-color: var(--color-dim);
  --md-code-hl-comment-color: var(--hl-comment);
  --md-code-hl-generic-color: var(--color-dim);
  --md-code-hl-variable-color: var(--hl-variable);

  --md-typeset-mark-color: color-mix(
    in srgb,
    var(--color-amber) 30%,
    transparent
  );
  --md-typeset-kbd-color: var(--color-panel);
  --md-typeset-kbd-accent-color: var(--color-rule);
  --md-typeset-kbd-border-color: var(--color-ground);
  --md-typeset-table-color: var(--color-rule);
  --md-typeset-table-color--light: color-mix(
    in srgb,
    var(--color-panel) 40%,
    transparent
  );

  --md-admonition-fg-color: var(--color-text);
  --md-admonition-bg-color: var(--panel-fill);

  --md-footer-fg-color: var(--color-text);
  --md-footer-fg-color--light: var(--color-dim);
  --md-footer-fg-color--lighter: var(--color-dim);
  --md-footer-bg-color: var(--color-ground);
  --md-footer-bg-color--dark: var(--color-ground);
}

/* --- Type -------------------------------------------------------------- */

/* Hierarchy comes from size, colour and space. 500 is the heaviest weight
   the landing page uses, so it is the heaviest here. */
[data-md-color-scheme] .md-typeset h1,
[data-md-color-scheme] .md-typeset h2,
[data-md-color-scheme] .md-typeset h3,
[data-md-color-scheme] .md-typeset h4,
[data-md-color-scheme] .md-typeset h5,
[data-md-color-scheme] .md-typeset h6,
[data-md-color-scheme] .md-header__title {
  font-weight: 500;
  color: var(--color-strong);
}

.md-typeset strong,
.md-typeset b,
.md-typeset th,
.md-nav__title,
.md-nav__item--section > .md-nav__link,
.md-nav__link--active,
.md-tabs__item--active .md-tabs__link,
.md-header__topic:first-child {
  font-weight: 500;
}

.md-typeset strong,
.md-typeset b {
  color: var(--color-strong);
}

/* Links: no underline, the strongest ink on hover, as on the landing
   page. */
.md-typeset a {
  color: var(--color-link);
  text-decoration: none;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--color-strong);
}

.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Header and tabs: the ground itself, ruled off below --------------- */

.md-header,
.md-tabs {
  background: var(--color-ground);
  color: var(--color-text);
  box-shadow: none;
}

.md-tabs {
  border-bottom: 1px solid var(--color-rule);
}

/* A little more air between the tabs. Added between them, not around
   them, so the first tab stays in line with the mark above it. */
.md-tabs__item + .md-tabs__item {
  margin-left: 0.4rem;
}

.md-tabs__link {
  color: var(--color-dim);
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  color: var(--color-strong);
}

/* The kit's inline mark: the kappa with its sparkle. It is painted through
   a mask so that it takes the text colour of whichever scheme is showing;
   an <img> could only ever be one colour. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  display: none;
}

.md-logo::before {
  content: "";
  display: block;
  height: 1.4rem;
  aspect-ratio: 94.79 / 70.01;
  background: var(--color-text);
  mask: url("../assets/kosmos-mark-inline.svg") center / contain no-repeat;
}

/* The search field, as the landing page's corner button: a ruled,
   translucent panel. */
.md-search__button,
.md-search__form {
  border: 1px solid var(--color-rule);
  border-radius: 0.4rem;
  background: var(--panel-fill);
  color: var(--color-text);
}

.md-search {
  padding: 0;
}

.md-search__button {
  box-sizing: border-box;
  height: var(--control-height);
}

.md-search__button:hover {
  border-color: var(--color-dim);
  color: var(--color-strong);
}

/* --- The theme toggle: the same button, square ------------------------- */

/* It comes first in the markup; `order` puts it last, to the right of the
   GitHub button. */
.md-header__option {
  order: 1;
  width: auto;
  height: auto;
  margin: 0 0 0 var(--control-gap);
}

/* Only the label for the scheme not showing is visible; the other carries
   the hidden attribute and must stay hidden. */
.md-header__option > label.md-header__button:not([hidden]) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: 0.4rem;
  background: var(--panel-fill);
  color: var(--color-text);
  opacity: 1;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.md-header__option > label.md-header__button:not([hidden]):hover {
  border-color: var(--color-dim);
  color: var(--color-strong);
  opacity: 1;
}

.md-header__option > label.md-header__button svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Below the width where the search field and the GitHub button appear,
   the toggle sits beside icon buttons: no wide gap, so the title keeps
   its room. */
@media screen and (max-width: 59.984375em) {
  .md-header__option {
    margin-left: 0.2rem;
  }
}

/* --- The repository link: the landing page's GitHub button -------------- */

/* Its values there: 18px mark, 15px text at weight 500, 8px gap, padding
   8px 14px, 1px rule, 8px radius, the translucent panel behind. */
.md-header__source {
  width: auto;
  max-width: none;
  margin-left: var(--control-gap);
}

.md-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 0.4rem;
  background: var(--panel-fill);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
  opacity: 1;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.md-source:hover {
  border-color: var(--color-dim);
  color: var(--color-strong);
  opacity: 1;
}

.md-source__icon {
  display: inline-flex;
  width: auto;
  height: auto;
}

/* The mark itself is the landing page's own drawing, painted through a
   mask so it takes the button's text colour. */
.md-source .md-source__icon svg {
  display: none;
}

.md-source__icon::before {
  content: "";
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  mask: url("../assets/github-mark.svg") center / contain no-repeat;
}

.md-source__repository {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/* Star and fork counts are noise beside a button. */
.md-source__facts {
  display: none;
}

/* --- Navigation -------------------------------------------------------- */

.md-nav__link {
  color: var(--color-dim);
}

.md-nav__link:hover,
.md-nav__link--active,
.md-nav__item--section > .md-nav__link,
.md-nav__title {
  color: var(--color-strong);
}

/* --- Panels: code, tables, callouts and the home page's cards ---------- */

.md-typeset pre > code,
.md-typeset .highlight pre {
  border-radius: 0.6rem;
}

.md-typeset code {
  border-radius: 0.2rem;
}

/* Tables at the size of the text around them, and a variable or command
   name in the first column kept on one line. */
.md-typeset table:not([class]) {
  border: 1px solid var(--color-rule);
  border-radius: 0.6rem;
  background: var(--panel-fill);
  font-size: 1em;
}

.md-typeset table:not([class]) th {
  color: var(--color-strong);
}

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

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--color-rule);
  border-radius: 0.6rem;
  background: var(--panel-fill);
  box-shadow: none;
  font-size: 1em;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 500;
  color: var(--color-strong);
}

.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset .admonition.attention {
  border-color: color-mix(in srgb, var(--color-amber) 45%, transparent);
  background: color-mix(in srgb, var(--color-amber) 7%, transparent);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .attention > .admonition-title::before {
  background-color: var(--color-amber);
}

.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.tip {
  border-color: color-mix(in srgb, var(--color-note) 40%, transparent);
  background: color-mix(in srgb, var(--color-note) 6%, transparent);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .tip > .admonition-title::before {
  background-color: var(--color-note);
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--color-rule);
  border-radius: 0.6rem;
  background: var(--panel-fill);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--color-dim);
  box-shadow: none;
}

.md-typeset hr {
  border-color: var(--color-rule);
}

/* --- Footer: ruled off above, quiet ------------------------------------ */

.md-footer {
  border-top: 1px solid var(--color-rule);
}

.md-footer-meta {
  background: var(--color-ground);
}

.md-copyright {
  font-size: 0.75rem;
}

.md-copyright,
.md-copyright a {
  color: var(--color-dim);
}

.md-copyright a:hover {
  color: var(--color-strong);
}

/* --- The home page ------------------------------------------------------ */

/* Each card's way in: a small link mark opposite its title. The link is
   stretched over the whole card, so the card itself is the target. */
.md-typeset .grid.cards > ul > li {
  position: relative;
}

.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.md-typeset .card-link {
  display: inline-flex;
  color: var(--color-dim);
}

.md-typeset .card-link .twemoji,
.md-typeset .card-link svg {
  width: 0.9rem;
  height: 0.9rem;
}

.md-typeset .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.6rem;
}

.md-typeset .grid.cards > ul > li:hover .card-link,
.md-typeset .card-link:focus-visible {
  color: var(--color-strong);
}