/*
 * Lineage kit for data artifacts — the site's drafting language, without its
 * chrome. Tokens mirror src/app/globals.css (a vitest guard fails on drift).
 * Artifacts keep their own class names and read colours as rgb(var(--token)).
 *
 * Load order in an artifact's <head>:
 *   <script src="../_lineage/lineage.js"></script>   (sets data-theme pre-paint)
 *   <link rel="stylesheet" href="../_lineage/lineage.css">
 */
@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@87.5,400;87.5,500;87.5,700&family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap");

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: 236 233 224;
  --surface: 225 221 208;
  --surface-raised: 244 242 236;
  --fg: 21 23 27;
  --fg-muted: 74 77 83;
  --fg-faint: 138 133 119;
  --rule: 195 189 174;
  --trace: 35 67 176;
  /* Artifact-only: drafting redline, for faults and violations. Never decorative. */
  --redline: 170 38 28;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: 17 56 102;
  --surface: 12 45 84;
  --surface-raised: 26 66 114;
  --fg: 232 238 245;
  --fg-muted: 159 179 204;
  --fg-faint: 115 144 180;
  --rule: 58 95 140;
  --trace: 242 193 78;
  --redline: 255 158 140;
}

:root {
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: rgb(var(--bg));
  /* Faint construction grid — the drafting paper. */
  background-image:
    linear-gradient(rgb(var(--rule) / 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rule) / 0.28) 1px, transparent 1px);
  background-size: 24px 24px;
  color: rgb(var(--fg));
  font: 400 15px/1.55 var(--sans);
}

::selection { background: rgb(var(--trace) / 0.25); }
:focus-visible { outline: 2px solid rgb(var(--trace)); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: rgb(var(--trace)); text-underline-offset: 0.2em; }

/* Mono labels (refs, captions, column heads) run condensed, as on the site. */
.dg-mono,
code,
pre,
kbd { font-family: var(--mono); font-stretch: 87.5%; }

.dg-label {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--fg-muted));
}

/* Title block: every artifact opens as a drawing sheet with a named figure. */
.dg-titleblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: end;
  border-bottom: 1.5px solid rgb(var(--fg));
  padding-bottom: 16px;
}
.dg-titleblock h1 {
  margin: 4px 0 0;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.dg-titleblock p { margin: 10px 0 0; max-width: 68ch; color: rgb(var(--fg-muted)); }
.dg-titleblock p b { color: rgb(var(--fg)); font-weight: 600; }
.dg-titleblock dl {
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin: 0;
  border: 1.5px solid rgb(var(--fg));
  background: rgb(var(--surface));
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 11px;
}
.dg-titleblock dl div { padding: 6px 10px; border-right: 1px solid rgb(var(--rule)); }
.dg-titleblock dl div:last-child { border-right: 0; }
.dg-titleblock dt { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--fg-muted)); }
.dg-titleblock dd { margin: 2px 0 0; font-weight: 700; }
@media (max-width: 720px) {
  .dg-titleblock { grid-template-columns: 1fr; }
}

/* Panel: a detail on the sheet. Square corners, ink border. */
.dg-panel {
  border: 1.5px solid rgb(var(--fg));
  background: rgb(var(--bg));
}
.dg-panel > .dg-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid rgb(var(--fg));
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dg-panel > .dg-panel-head span + span { color: rgb(var(--fg-muted)); }

/* Segmented controls and chips: outline at rest, solid ink when on. */
.dg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-seg button,
.dg-chip {
  border: 1px solid rgb(var(--rule));
  background: transparent;
  padding: 5px 9px;
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 11px;
  color: rgb(var(--fg-muted));
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.dg-seg button:hover,
.dg-chip:hover { border-color: rgb(var(--fg)); color: rgb(var(--fg)); }
.dg-seg button.on,
.dg-seg button[aria-pressed="true"],
.dg-chip.active,
.dg-chip[aria-pressed="true"] { border-color: rgb(var(--fg)); background: rgb(var(--fg)); color: rgb(var(--bg)); }

/* Primary action: the one solid control on a sheet. */
.dg-btn {
  border: 1.5px solid rgb(var(--fg));
  background: rgb(var(--fg));
  color: rgb(var(--bg));
  padding: 10px 14px;
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.dg-btn:hover { background: rgb(var(--trace)); border-color: rgb(var(--trace)); color: rgb(var(--bg)); }
.dg-btn.outline { background: transparent; color: rgb(var(--fg)); }
.dg-btn.outline:hover { background: rgb(var(--fg)); border-color: rgb(var(--fg)); color: rgb(var(--bg)); }
.dg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

input[type="range"] { accent-color: rgb(var(--trace)); }

/* Status marks: shape + word, never colour alone. */
.dg-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-stretch: 87.5%; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.dg-status::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }
.dg-status.ok { color: rgb(var(--fg)); }
.dg-status.ok::before { background: currentColor; border-radius: 50%; }
.dg-status.warn { color: rgb(var(--fg)); }
.dg-status.warn::before { border-radius: 0; transform: rotate(45deg); }
.dg-status.fail { color: rgb(var(--redline)); }
.dg-status.fail::before { background: currentColor; }

/* Code: surface ground, ink hairline, keywords traced. */
.dg-code {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid rgb(var(--fg));
  background: rgb(var(--surface));
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.dg-code .kw { color: rgb(var(--trace)); }
.dg-code .fn { color: rgb(var(--fg)); font-weight: 700; }
.dg-code .num,
.dg-code .str { color: rgb(var(--fg-muted)); }
.dg-code .cm { color: rgb(var(--fg-faint)); font-style: italic; }

.dg-foot {
  margin-top: 32px;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--rule));
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--fg-muted));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}