/* OTN.world — EiaC. CSS knows tokens, never a route. */

:root {
  --bg: #0a0a0b;
  --fg: #e8e6e3;
  --muted: #8a8780;
  /* Mustard — action accent: CTAs, inline TSP links, list bullets, current-nav underline. */
  --accent: #FFDF73;
  /* Aqua source. Paragraph zones are near-black with a slight cyan cast — darker than #08423C, not the neutral gray. */
  --structure: #73FFDF;
  --structure-ground: #0E1615;
  /* Heliotrope — "Swiss patent pending." and the seeking-partners sentence. The wordmark stays foreground. */
  --signal: #DF73FF;
  --raised: #141416;
  --dim: var(--bg);

  --elevation-base: 0;
  --elevation-raised: 10;
  --elevation-overlay: 100;
  --elevation-modal: 1000;

  --gap-none: 0;
  --gap-tight: 0.5rem;
  --gap-normal: 1rem;
  --gap-loose: 2rem;

  --measure-reading: 42rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-elevation="base"]    { z-index: var(--elevation-base); }
[data-elevation="raised"]  { z-index: var(--elevation-raised); }
[data-elevation="overlay"] { z-index: var(--elevation-overlay); }
[data-elevation="modal"]   { z-index: var(--elevation-modal); }

[data-cmpt="surface"][data-elevation="overlay"] {
  position: fixed;
  inset: 0;
  background: var(--dim);
}

[data-cmpt="surface"][data-elevation="modal"] {
  position: fixed;
  inset: auto 1.5rem 28% 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--raised);
}

[data-cmpt="surface"][data-elevation="base"] {
  min-height: 100%;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
}

/* Footer slot. Free space above it when the page is shorter than the viewport;
   it follows the content when the page is longer. Not a fixed sticker.
   The loose pad is the rhythm that used to sit above the contact line. */
[data-slot="footer"] {
  margin-top: auto;
  padding-top: var(--gap-loose);
}

[data-cmpt="surface"][data-elevation="raised"] {
  padding: 1.25rem 1.5rem;
  background: var(--structure-ground);
}

[data-cmpt="stack"] {
  display: flex;
  flex-direction: column;
}

[data-cmpt="stack"][data-axis="block"] {
  flex-direction: column;
}

[data-cmpt="stack"][data-axis="inline"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

[data-cmpt="surface"][data-elevation="base"] > [data-cmpt="stack"] {
  max-width: var(--measure-reading);
  margin-inline: auto;
}

/* Text zone owns placement. Start sits on the surface padding edge. Middle is margin-inline: auto. */
[data-cmpt="text-zone"] {
  display: flex;
  flex-direction: column;
}

[data-cmpt="text-zone"][data-measure="reading"] {
  max-width: var(--measure-reading);
}

[data-cmpt="text-zone"][data-placement="start"] {
  margin-inline: 0;
}

[data-cmpt="text-zone"][data-placement="middle"] {
  margin-inline: auto;
}

[data-cmpt="text-zone"][data-placement="end"] {
  margin-left: auto;
  margin-right: 0;
}

/* Adapt::Display — one token, no media queries.
   Cap is Measure::Reading (42rem). Narrower viewports use the content box,
   already inset by the base surface's inline padding (2rem). Centered either way. */
[data-cmpt="text-zone"][data-adapt="display"] {
  width: min(100%, var(--measure-reading));
  max-width: var(--measure-reading);
  margin-inline: auto;
  min-width: 0;
  overflow-wrap: break-word;
}

[data-cmpt="text-zone"][data-adapt="display"] [data-cmpt="stack"],
[data-cmpt="text-zone"][data-adapt="display"] [data-cmpt="surface"],
[data-cmpt="text-zone"][data-adapt="display"] [data-cmpt="list"] {
  min-width: 0;
  max-width: 100%;
}

[data-cmpt="text-zone"][data-alignment="start"] {
  text-align: start;
}

[data-cmpt="text-zone"][data-alignment="middle"] {
  text-align: center;
}

[data-cmpt="text-zone"][data-alignment="end"] {
  text-align: end;
}

/* Justify is an Alignment token: Body + list rows only. Titles keep Appearance center. */
[data-cmpt="text-zone"][data-alignment="justify"] [data-appearance="body"],
[data-cmpt="text-zone"][data-alignment="justify"] [data-cmpt="list-item"] {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

[data-gap="none"]   { gap: var(--gap-none); }
[data-gap="tight"]  { gap: var(--gap-tight); }
[data-gap="normal"] { gap: var(--gap-normal); }
[data-gap="loose"]  { gap: var(--gap-loose); }

/* Display / Title / Heading sit centered on the reading column (and Raised block width).
   Body/list justify comes from Alignment::Justify on the zone — not a page CSS hack. */
[data-appearance="display"] {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-align: center;
}

[data-appearance="title"] {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.25;
  text-align: center;
}

[data-appearance="heading"] {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: center;
}

/* Heliotrope spark. Inline so it can color one sentence inside a paragraph. Not the wordmark. */
[data-appearance="spark"] {
  display: inline;
  color: var(--signal);
  font-size: 0.95rem;
}

/* Brand mark action is fit-content — center on the reading column (flex cross-axis). */
[data-cmpt="action"]:has(> [data-cmpt="text"][data-appearance="display"]),
[data-cmpt="action"]:has(> [data-cmpt="wordmark"]) {
  align-self: center;
}

/* Product nav under the title — same centered axis as the brand mark. */
[data-cmpt="action"][data-look="nav"] {
  align-self: center;
}

[data-appearance="body"] {
  color: var(--fg);
  font-size: 0.95rem;
}

/* Bullet list: classic mustard bullet (•) via CSS ::before. Adapts with gap token; no SVG, no "-" prefix. */
[data-cmpt="list"] {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-cmpt="list-item"] {
  display: grid;
  grid-template-columns: 0.85rem 1fr;
  column-gap: 0.55rem;
  align-items: start;
  color: var(--fg);
  font-size: 0.95rem;
}

/* Classic bullet marker in accent — not omicron, not Latin o, not a painted disc. */
[data-cmpt="list-item"]::before {
  content: "•";
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}

[data-appearance="muted"] {
  color: var(--muted);
  font-size: 0.95rem;
}

[data-cmpt="action"] {
  position: relative;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  width: fit-content;
  transition:
    color 120ms ease,
    letter-spacing 120ms ease,
    opacity 80ms ease;
}

/* Nested text inherits the action color (CTA / link). */
[data-cmpt="action"] [data-cmpt="text"] {
  color: inherit;
}

/* Wordmark line stays foreground and above the pill fill.
   The capsule stroke is the same ground as the fill — not the action accent.
   Licensing and other CTAs are not this selector (their path fill stays none). */
[data-cmpt="action"] > [data-cmpt="text"][data-appearance="display"] {
  position: relative;
  z-index: 1;
  color: var(--fg);
}

[data-cmpt="action"] > [data-cmpt="text"][data-appearance="display"] [data-cmpt="text"] {
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}

/* Wordmark outlines. Fill is the letter. O, o, and d holes are even-odd cutouts.
   Mustard stroke is the outer contour only (`data-contour="accent"`). */
[data-cmpt="wordmark"] {
  display: block;
  overflow: visible;
}

[data-cmpt="wordmark"] path {
  stroke: none;
}

[data-cmpt="wordmark"] [data-ink="fg"] {
  fill: var(--fg);
}

[data-cmpt="wordmark"] [data-ink="signal"] {
  fill: var(--signal);
}

[data-cmpt="wordmark"] [data-ink="accent"] {
  fill: var(--accent);
}

[data-cmpt="wordmark"] [data-ink="ground"] {
  fill: var(--structure-ground);
}

[data-cmpt="wordmark"] [data-contour="accent"] {
  stroke: var(--accent);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Product nav labels: white (`--fg`). Distinct from CTA/mailto accent. Frame stroke stays accent. */
[data-cmpt="action"][data-look="nav"] {
  color: var(--fg);
}

/* In-prose accent link (TSP → landing). Flows inside Body/list; not a framed CTA. */
[data-cmpt="action"][data-look="link"] {
  display: inline;
  width: auto;
  color: var(--accent);
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}

[data-cmpt="action"][data-look="link"]:active:not([aria-disabled="true"]) {
  letter-spacing: inherit;
}

/* Framed actions: padding so the traced SVG stroke clears the label. No CSS border.
   Center on the reading column, same axis as section titles. */
[data-cmpt="action"][data-framed="true"] {
  align-self: center;
  padding: 0.45rem 0.75rem;
}

/* SVG path is the formula evaluated in the action's CSS-pixel box (circular arcs).
   Width/height come from element attrs (measured px), not CSS 100% stretch. */
svg[data-cmpt="frame"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  color: var(--accent);
}

/* Product nav current: Trace box reserved; SVG path is bottom underline (accent stroke kept). */

[data-cmpt="action"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Momentary click: compress tracking + fade. */
[data-cmpt="action"]:active:not([aria-disabled="true"]) {
  opacity: 0.55;
  letter-spacing: 0.02em;
}

/* Held state (pressed signal): open tracking only — no underline. */
[data-cmpt="action"][aria-pressed="true"] {
  letter-spacing: 0.1em;
}

[data-cmpt="action"][aria-disabled="true"] {
  color: var(--muted);
  cursor: default;
}

[data-cmpt="anchor"] {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

[data-cmpt="field"] {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Holding gate form (Axum /login — not a Cmpt* page). Tokens only. */
[data-cmpt="form"] {
  display: flex;
  flex-direction: column;
}

[data-cmpt="form"][data-gap="normal"] {
  gap: var(--gap-normal);
}

[data-cmpt="label"] {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

[data-cmpt="secret"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--muted);
  font: inherit;
}

[data-cmpt="secret"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

button[data-cmpt="action"] {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  width: fit-content;
  transition:
    color 120ms ease,
    letter-spacing 120ms ease,
    opacity 80ms ease;
}

button[data-cmpt="action"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

button[data-cmpt="action"]:active:not(:disabled) {
  opacity: 0.55;
  letter-spacing: 0.02em;
}

button[data-cmpt="action"][aria-pressed="true"] {
  letter-spacing: 0.1em;
}

a[data-cmpt="action"] {
  text-decoration: none;
  color: var(--accent);
}

a[data-cmpt="action"]:visited,
a[data-cmpt="action"]:hover {
  color: var(--accent);
  text-decoration: none;
}