/*
 * nexus-raw docs: a small design system on top of Material.
 *
 * Tokens first (palette, type, rhythm), then the landing shell (hero, strip,
 * cards), then the page furniture (images, tables, console blocks).
 *
 * Fonts are vendored, no runtime CDN: Space Grotesk for headings, Inter for
 * body. Both are SIL OFL 1.1 (space-grotesk: Florian Karsten; inter: Rasmus
 * Andersson); the files came from an earlier in-house docs build.
 */

/* ---- fonts ---- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */

:root {
  --nxr-teal: oklch(0.62 0.1 195);
  --nxr-teal-bright: oklch(0.78 0.11 190);
  --nxr-amber: oklch(0.8 0.14 78);
  --nxr-amber-dim: oklch(0.62 0.13 75);
  --nxr-ink: oklch(0.2 0.015 210);
  --nxr-radius: 0.75rem;
  --nxr-lift: 150ms ease;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: oklch(0.26 0.028 200);
  --md-accent-fg-color: oklch(0.52 0.1 195);
  --md-typeset-a-color: oklch(0.48 0.1 200);
  --nxr-hero-teal: var(--nxr-teal);
  --nxr-hero-amber: var(--nxr-amber-dim);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: oklch(0.19 0.014 210);
  --md-accent-fg-color: var(--nxr-teal-bright);
  --md-typeset-a-color: var(--nxr-teal-bright);
  --nxr-hero-teal: var(--nxr-teal-bright);
  --nxr-hero-amber: var(--nxr-amber);
}

/* ---- type ---- */

.md-typeset {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: -0.015em;
}

.md-typeset h2 {
  margin-top: 3rem;
  font-size: 1.5rem;
}

.md-typeset h3 {
  margin-top: 2.2rem;
  font-size: 1.15rem;
}

.md-typeset .md-button {
  border-radius: 2rem;
  transition: transform var(--nxr-lift), box-shadow var(--nxr-lift);
}

.md-typeset .md-button--primary {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  color: var(--nxr-ink);
}

.md-typeset .md-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--md-accent-fg-color) 35%, transparent);
}

/* ---- landing: hero ---- */

.md-typeset .nxr-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2rem;
  margin: 0 0 1.4rem;
  padding: 2.2rem 2.4rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 1rem;
  background:
    radial-gradient(36rem 20rem at 8% -20%, color-mix(in oklch, var(--nxr-hero-teal) 22%, transparent), transparent 62%),
    radial-gradient(28rem 16rem at 98% 120%, color-mix(in oklch, var(--nxr-hero-amber) 16%, transparent), transparent 62%);
}

.md-typeset .nxr-hero h1 {
  grid-column: 1;
  margin: 0 0 0.6rem;
  font-size: 2rem;
  line-height: 1.15;
  width: fit-content;
  background: linear-gradient(100deg, var(--nxr-hero-teal), var(--nxr-hero-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.md-typeset .nxr-hero .headerlink {
  display: none;
}

.md-typeset .nxr-hero > p {
  grid-column: 1;
  max-width: 32rem;
  margin: 0 0 1.2rem;
  font-size: 0.84rem;
}

.md-typeset .nxr-hero > p:last-child {
  margin-bottom: 0;
}

.md-typeset .nxr-hero > p:has(.hero-mark) {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin: 0;
}

.md-typeset .nxr-hero .hero-mark {
  height: 7rem;
  width: auto;
  float: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 18px color-mix(in oklch, var(--nxr-hero-teal) 30%, transparent));
}

@media screen and (max-width: 56em) {
  .md-typeset .nxr-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.6rem 1.4rem;
  }

  .md-typeset .nxr-hero > p:has(.hero-mark) {
    grid-column: 1;
    grid-row: 1;
  }

  .md-typeset .nxr-hero .hero-mark {
    height: 4.5rem;
    margin: 0 0 1rem;
  }

  .md-typeset .nxr-hero h1 {
    font-size: 1.6rem;
  }
}

/* ---- landing: cards ---- */

.md-typeset .nxr-cards > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .nxr-cards > ul > li {
  margin: 0;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--nxr-radius);
  background: color-mix(in oklch, var(--md-default-fg-color) 3%, transparent);
  font-size: 0.72rem;
  line-height: 1.6;
  transition:
    transform var(--nxr-lift),
    border-color var(--nxr-lift),
    box-shadow var(--nxr-lift);
}

.md-typeset .nxr-cards > ul > li:hover {
  border-color: color-mix(in oklch, var(--md-accent-fg-color) 65%, transparent);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--md-accent-fg-color) 18%, transparent);
  transform: translateY(-2px);
}

.md-typeset .nxr-cards .twemoji,
.md-typeset .nxr-cards svg {
  color: var(--md-accent-fg-color);
}

/* ---- landing: where to go ---- */

/*
 * Intent cards, not a link table: the two people this tool has (the one who
 * publishes and the one who fetches) get the wide cards, the situational ones
 * sit under them, and reference stays a quiet line. The link is the card.
 */

.md-typeset .nxr-go > ul {
  display: grid;
  /* Auto-fit: four comfortable columns on a wide screen, reflowing down to
     one on a phone, and never overflowing the reading column. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.md-typeset .nxr-go > ul > li {
  margin: 0;
  padding: 0;
}

.md-typeset .nxr-go > ul > li > p {
  margin: 0;
}

/* The card is a three-row grid.
   The header row holds the badge and the title side by side.
   The description runs full width below the header.
   The command chip sits pinned at the bottom-right. */
.md-typeset .nxr-go > ul > li a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "icon title"
    "desc desc"
    ". cmd";
  column-gap: 0.7rem;
  row-gap: 0.5rem;
  align-items: start;
  height: 100%;
  padding: 0.95rem 1.1rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--nxr-radius);
  background: color-mix(in oklch, var(--md-default-fg-color) 3%, transparent);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition:
    transform var(--nxr-lift),
    border-color var(--nxr-lift),
    box-shadow var(--nxr-lift);
}

.md-typeset .nxr-go > ul > li a:hover {
  border-color: color-mix(in oklch, var(--md-accent-fg-color) 65%, transparent);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--md-accent-fg-color) 18%, transparent);
  transform: translateY(-2px);
}

/* The icon badge fills the header row left cell. */
.md-typeset .nxr-go > ul > li a .twemoji,
.md-typeset .nxr-go > ul > li a .md-icon {
  grid-area: icon;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  background: color-mix(in oklch, var(--md-accent-fg-color) 14%, transparent);
  color: var(--md-accent-fg-color);
}

.md-typeset .nxr-go > ul > li a .twemoji svg,
.md-typeset .nxr-go > ul > li a .md-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* The title is a bold gradient from the foreground into the accent.
   The juiciest text on the page. */
.md-typeset .nxr-go > ul > li a strong {
  grid-area: title;
  align-self: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--md-default-fg-color) 45%, var(--md-accent-fg-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The description is the full-width row under the header. */
.md-typeset .nxr-go > ul > li a em {
  grid-area: desc;
  font-style: normal;
}

/* The command chip is the one accent.
   It sits at the bottom-right because it is what the reader runs. */
.md-typeset .nxr-go > ul > li a code {
  grid-area: cmd;
  justify-self: end;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--nxr-teal) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in oklch, var(--nxr-teal) 12%, transparent);
  color: var(--nxr-hero-teal);
  white-space: nowrap;
}

/* The hover affordance: a gradient hairline across the card top fades in.
   No floating arrows. */
.md-typeset .nxr-go > ul > li a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--md-accent-fg-color), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity var(--nxr-lift),
    transform var(--nxr-lift);
}

.md-typeset .nxr-go > ul > li a:hover::before {
  opacity: 1;
  transform: none;
}

.md-typeset .nxr-go__under {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
}

@media screen and (max-width: 60em) {

  /* the persona cards' span outranks a bare li selector, so it is named here too */
  .md-typeset .nxr-go > ul > li,
  .md-typeset .nxr-go > ul > li:nth-child(-n + 2) {
    grid-column: auto;
  }
}

/* ---- page furniture ---- */

/*
 * Images: framed and rounded (the terminal hero, page screenshots).
 */

.md-typeset img {
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

[data-md-color-scheme="slate"] .md-typeset img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* ---- inline diagrams ---- */

/* The svg is a block that fills the figure: without this an inline svg
   collapses to zero width and the figure collapses with it. */
.md-typeset figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The figure carries the card treatment: a quiet frame, not a bare float.
   The theme defaults a figure to fit-content, which starves a
   width: 100% svg down to zero; own the width explicitly. */
.md-typeset figure {
  margin: 1.4rem 0;
  padding: 0.6rem 0.6rem 0.4rem;
  width: 100%;
  border: 1px solid var(--dg-line);
  border-radius: var(--nxr-radius);
  background: color-mix(in oklch, var(--md-default-fg-color) 2%, transparent);
}

/* ---- diagrams ---- */

:root {
  --dg-ink: var(--md-default-fg-color);
  --dg-muted: var(--md-default-fg-color--light);
  --dg-faint: var(--md-default-fg-color--lighter);
  --dg-line: var(--md-default-fg-color--lightest);
  --dg-accent: var(--md-accent-fg-color);
  --dg-ok: oklch(0.72 0.13 155);
  --dg-warn: oklch(0.75 0.13 80);
  --dg-err: oklch(0.68 0.16 25);
  --dg-card: var(--md-default-bg-color);
  --dg-band: color-mix(in oklch, var(--md-default-fg-color) 4%, transparent);
}

/*
 * Console blocks: a quiet frame around real transcripts.
 */

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

[data-md-color-scheme="slate"] .md-typeset pre > code {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * Tables: rows answer the pointer.
 */

.md-typeset table tbody tr {
  transition: background-color 0.2s;
}

.md-typeset table tbody tr:hover {
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
}

/*
 * The recorded session: a terminal window that replays a real run.
 *
 * The frame is a screen, so its type is a fraction of its own width: at
 * --nxr-term-font the window holds the same number of lines at every size, the
 * SVG drawn by examples/demo/svg.py carries the same fractions, and swapping
 * the picture for the player moves nothing. The fallback is the old absolute
 * size, for browsers without container queries. Everything inside is em, so
 * one variable sizes the card; svg.py's constants are these numbers times 860.
 */

.md-typeset .nxr-term {
  --nxr-term-font: 0.66rem;
  --nxr-term-font: 1.85cqw;
  position: relative;
  margin: 1.6rem 0 1.2rem;
  padding: 0;
  border: 1px solid oklch(0.32 0.02 210);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--nxr-ink);
  box-shadow: 0 12px 32px oklch(0.2 0.02 210 / 0.35);
  /* The screen is dark in both schemes, so its ink is baked here, not taken
   * from the theme: a light scheme would otherwise paint dark text on it. */
  color: oklch(0.88 0.01 210);
  /* Fluid, not shrink-to-fit: inline-size containment would collapse a figure
   * sized by its contents, and the column is the width this screen has. */
  width: 100%;
  container-type: inline-size;
}

.md-typeset .nxr-term img {
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.md-typeset .nxr-term[data-ready="true"] img {
  display: none;
}

.nxr-term__bar {
  display: flex;
  font-size: var(--nxr-term-font);
  align-items: center;
  gap: 0.45em;
  padding: 0.78em 1.32em;
  background: oklch(0.25 0.018 210);
  border-bottom: 1px solid oklch(0.32 0.02 210);
}

.nxr-term__dots {
  flex: none;
  width: 4.03em;
  height: 1.16em;
  background-image:
    radial-gradient(circle at 0.58em 50%, oklch(0.72 0.16 25) 0.465em, transparent 0.5em),
    radial-gradient(circle at 2.02em 50%, oklch(0.82 0.14 85) 0.465em, transparent 0.5em),
    radial-gradient(circle at 3.45em 50%, oklch(0.78 0.15 150) 0.465em, transparent 0.5em);
}

.nxr-term__title {
  flex: 1;
  font-size: 0.93em;
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  letter-spacing: 0.02em;
  color: oklch(0.72 0.015 210);
}

.nxr-term__replay {
  flex: none;
  padding: 0.23em 0.85em;
  font-family: inherit;
  font-size: 0.93em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.85 0.02 210);
  background: transparent;
  border: 1px solid oklch(0.42 0.02 210);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--nxr-lift), color var(--nxr-lift);
}

.nxr-term__replay:hover {
  color: var(--nxr-teal-bright);
  border-color: var(--nxr-teal);
}

.nxr-term__body {
  /* As tall as the recording; the cap turns a long cast into a terminal that
   * scrolls (the player follows its tail) instead of stretching the page. */
  max-height: 45em;
  text-align: left;
  overflow: hidden;
  padding: 1.24em 1.55em 1.55em;
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: var(--nxr-term-font);
  line-height: 1.5;
}

.nxr-l {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A blank line is a beat between commands, and an empty div has no line box:
 * without a height of its own the pauses the session took would vanish. */
.nxr-l:empty {
  min-height: 1.5em;
  min-height: 1lh;
}

.nxr-l--comment {
  color: oklch(0.66 0.015 210);
  font-style: italic;
}

.nxr-l--cmd {
  color: oklch(0.96 0.005 210);
  font-weight: 600;
}

.nxr-l--ok {
  color: var(--nxr-teal-bright);
}

.nxr-l--warn {
  color: var(--nxr-amber);
}

.nxr-l--err {
  color: oklch(0.75 0.16 25);
}

.nxr-l--hint {
  color: oklch(0.7 0.06 60);
  padding-left: 1.24em;
}

.nxr-l--dim {
  color: oklch(0.66 0.015 210);
}

.nxr-l--note {
  color: oklch(0.82 0.02 200);
}

.nxr-term__cursor {
  display: inline-block;
  /* An author `display` outranks the UA `[hidden]` rule: the JS toggles the
   * attribute, so the attribute needs its own rule. */
  width: 0.6em;
  height: 1.2em;
  margin-top: 0.1em;
  background: var(--nxr-teal-bright);
  animation: nxr-blink 1.05s steps(1, end) infinite;
}

.nxr-term__cursor[hidden] {
  display: none;
}

@keyframes nxr-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nxr-term__cursor {
    animation: none;
  }
}