/*
  jjultralab.uk

  The palette is the product's, taken from src/Ultralab.Desktop/App.axaml and
  src/Ultralab.Web/Stylesheet.cs hex for hex, so the site somebody downloads from looks like
  the thing they are downloading. Square corners, hairline borders, no shadows, no rounded
  cards pretending to float.

  No build step and no framework, for the same reason ADR 0003 gives: this is a file, it is
  served as it is, and anybody can read the whole of it before trusting it.
*/

:root {
  color-scheme: dark;
  --ground:     #070B12;
  --panel:      #0C121D;
  --panel-hi:   #111927;
  --panel-lift: #16202F;
  --line:       #1E2A3E;
  --line-soft:  #151E2C;
  --ink:        #E6EDF7;
  --ink-dim:    #8FA0B8;
  --ink-faint:  #5C6B84;
  --accent:     #2DD4BF;
  --accent-dim: #0D9488;
  --on-accent:  #04211D;
  --good:       #34D399;
  --warn:       #F5B547;
  --bad:        #F87171;
  --warn-back:  #2A2107;
  --warn-line:  #6B5518;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Same hues turned over. Contrast is raised, not lowered: manuals get read in daylight. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground:     #F2F5F9;
    --panel:      #FFFFFF;
    --panel-hi:   #F7F9FC;
    --panel-lift: #EEF2F8;
    --line:       #C7D2E1;
    --line-soft:  #DDE4EE;
    --ink:        #0A101A;
    --ink-dim:    #46566E;
    --ink-faint:  #67778F;
    --accent:     #0F766E;
    --accent-dim: #0D9488;
    --on-accent:  #FFFFFF;
    --good:       #047857;
    --warn:       #92600A;
    --bad:        #B91C1C;
    --warn-back:  #FEF6E7;
    --warn-line:  #E4C77E;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* ── Chrome ─────────────────────────────────────────────────────────────────────── */

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

header.top .inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
}

.brand {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  font-size: 1.05rem;
}

.brand span { color: var(--accent); }

header.top nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 1.1rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

header.top nav a:hover,
header.top nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

main {
  max-width: 78rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.narrow { max-width: 46rem; }

footer {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 2rem 1.5rem 3rem;
  max-width: 78rem;
  margin: 0 auto;
}

footer a { color: var(--ink-dim); }

/* ── Type ───────────────────────────────────────────────────────────────────────── */

h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; margin: 3rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--accent); text-underline-offset: 0.15em; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}

.lede { font-size: 1.15rem; color: var(--ink-dim); }

.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); font-size: 0.9rem; }
.mono { font-family: var(--mono); font-size: 0.85em; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--panel-hi);
  border: 1px solid var(--line-soft);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ── Surfaces ───────────────────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
}

.panel > :last-child { margin-bottom: 0; }

.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  padding: 1rem 1.2rem;
  margin: 0 0 1.25rem;
  color: var(--ink-dim);
}

.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.warn {
  background: var(--warn-back);
  border: 1px solid var(--warn-line);
  border-left-width: 2px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.warn > :last-child { margin-bottom: 0; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: 1.5rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
}

.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ── Bits ───────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 0.15rem 0.45rem;
  vertical-align: middle;
}

.badge.accent { border-color: var(--accent-dim); color: var(--accent); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.btn:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn.ghost:hover { background: var(--panel-hi); color: var(--ink); }

.btnrow { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

th { color: var(--ink-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; }

.tablewrap { overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ── Manual layout ──────────────────────────────────────────────────────────────── */

.withrail { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }

.rail { position: sticky; top: 5rem; font-size: 0.9rem; }
.rail ol { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: none; }
.rail li { margin-bottom: 0.3rem; }
.rail a { color: var(--ink-dim); text-decoration: none; display: block; padding: 0.15rem 0; }
.rail a:hover { color: var(--accent); }
.rail .here > a { color: var(--ink); border-left: 2px solid var(--accent); padding-left: 0.6rem; margin-left: -0.75rem; }

@media (max-width: 60rem) {
  .withrail { grid-template-columns: 1fr; gap: 1.5rem; }
  .rail { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
}

/* Numbered steps, matching the app's step blocks. */
ol.steps { list-style: none; counter-reset: step; padding: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.anchor { color: var(--ink-faint); text-decoration: none; font-weight: 400; opacity: 0; margin-left: 0.4rem; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }