:root {
  /* One cool base hue (250), a cyan accent (205) for links and icons, and its
     warm complement (60) kept for the call to action alone. Status hues share
     one lightness and chroma so none shouts louder than another. */
  --hue: 250;
  --bg: oklch(16% 0.02 var(--hue));
  --bg-deep: oklch(13% 0.02 var(--hue));
  --panel: oklch(20.5% 0.025 var(--hue));
  --panel-hi: oklch(24% 0.03 var(--hue));
  --line: oklch(30% 0.03 var(--hue));
  --field-line: oklch(52% 0.03 var(--hue)); /* form field borders: at least 3:1, so the field can be seen */
  --text: oklch(94% 0.01 var(--hue));
  --muted: oklch(74% 0.025 var(--hue));
  --accent: oklch(80% 0.12 205);
  --accent-soft: oklch(80% 0.12 205 / 0.14);
  --warm: oklch(78% 0.15 60);
  --warm-ink: oklch(22% 0.04 60);
  --st-l: 86%; --st-c: 0.13; /* status chips: at least 5.5:1 on panels */
  --max: 1080px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

/* Focused items scroll clear of the sticky header (WCAG 2.4.11); full-width bands never add a sideways scrollbar. */
html { scroll-padding-top: 8.5rem; overflow-x: clip; }
@media (max-width: 800px) { html { scroll-padding-top: 1rem; } }

/* The skip link: first on every page, shown when it has focus. */
a.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--accent); color: var(--bg-deep); font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 6px; }
a.skip:focus { top: 0.6rem; text-decoration: none; }

/* One focus ring for every control. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.button:focus-visible, header.site a.cta:focus-visible { outline-color: var(--text); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.site {
  border-bottom: 1px solid var(--line);
  background: oklch(13% 0.02 250 / 0.92);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* On phones the header fills a third of the screen, so it scrolls away with the page. */
@media (max-width: 800px) { header.site { position: static; } }

header.site .bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
}

header.site .brand {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-right: auto;
}

header.site nav a { color: var(--muted); font-size: 0.95rem; }
header.site nav a.here { color: var(--text); }
header.site nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }

main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: 2.2rem; line-height: 1.2; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.45rem; margin: 2.6rem 0 0.8rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
h3 { font-size: 1.12rem; margin: 1.6rem 0 0.4rem; }

.lede { font-size: 1.2rem; color: var(--muted); max-width: 46rem; }

figure { margin: 1.6rem 0; }
figure img { height: auto; width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.card h3 { margin-top: 0; }
.card p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.95rem; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 0.94rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; background: var(--panel); }
@media (max-width: 800px) { table { display: block; overflow-x: auto; } }

.s { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.06rem 0.55rem; border-radius: 999px; white-space: nowrap;
  --h: 250; color: oklch(var(--st-l) var(--st-c) var(--h)); background: oklch(var(--st-l) var(--st-c) var(--h) / 0.10); border: 1px solid oklch(var(--st-l) var(--st-c) var(--h) / 0.45); }
.s.built { --h: 155; }
.s.progress { --h: 90; }
.s.planned { --h: 245; }
.s.proposed { --h: 250; --st-c: 0.02; }
.s.draft { --h: 305; }

.legend { color: var(--muted); font-size: 0.9rem; }
.legend .s { margin-right: 0.3rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } h1 { font-size: 1.8rem; } }

.note { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; color: var(--muted); }

pre { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.45; }
code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9em; }

footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
footer.site div { max-width: var(--max); margin: 0 auto; padding: 1.2rem 1.25rem 2rem; }

header.site a.cta { order: 1; font-size: 0.95rem; color: var(--warm-ink); background: var(--warm); padding: 0.1rem 0.7rem; border-radius: 999px; font-weight: 600; }
header.site a.cta:hover { text-decoration: none; filter: brightness(1.1); }

.action { margin-top: 3rem; background: linear-gradient(135deg, oklch(24% 0.04 60 / 0.55), var(--panel) 60%); border: 1px solid var(--line); border-left: 4px solid var(--warm); border-radius: 8px; padding: 1.2rem 1.4rem; }
.action h2 { border: 0; padding: 0; margin: 0 0 0.4rem; }
.action p { margin: 0.3rem 0 0.9rem; }
.button { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--warm); color: var(--warm-ink); font-weight: 700; padding: 0.55rem 1.1rem; border-radius: 6px; border: 0; font-size: 1rem; cursor: pointer; }
.button:hover { text-decoration: none; filter: brightness(1.1); }

form.info { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1.4rem; }
form.info label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; }
form.info .optional { color: var(--muted); font-weight: 400; }
form.info input, form.info select, form.info textarea { font: inherit; color: var(--text); background: var(--bg-deep); border: 1px solid var(--field-line); border-radius: 6px; padding: 0.5rem 0.6rem; }
form.info textarea { min-height: 7rem; resize: vertical; }
form.info fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 0.8rem 1rem; }
form.info legend { font-weight: 600; font-size: 0.95rem; padding: 0 0.3rem; }
form.info fieldset label { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; }
.sent { display: none; }
.sent.shown { display: block; }

body { background: radial-gradient(ellipse 80% 40% at 50% -10%, oklch(30% 0.06 205 / 0.35), transparent 70%), var(--bg); }

.card { transition: border-color 0.15s, background 0.15s; }
.card:hover { border-color: oklch(80% 0.12 205 / 0.5); background: var(--panel-hi); }

svg.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex: none; }
svg.i.end { margin-left: 0.1rem; }
.card h3 { display: flex; align-items: center; gap: 0.6rem; }
.card h3 svg.i { width: 2rem; height: 2rem; padding: 0.38rem; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
h2 > svg.i { color: var(--accent); margin-right: 0.5rem; }
.action h2 > svg.i { color: var(--warm); }

.heritage { display: flex; gap: 1.2rem; align-items: flex-start; margin: 1.8rem 0; padding: 1.2rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; }
.heritage h2 { border: 0; padding: 0; margin: 0 0 0.4rem; font-size: 1.25rem; }
.heritage p { margin: 0.4rem 0 0; }
.heritage svg.i.big { width: 2.6rem; height: 2.6rem; padding: 0.5rem; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }

.keybox { margin: 1.1rem 0 0; padding: 0.9rem 1.1rem; background: linear-gradient(135deg, var(--accent-soft), transparent 75%); border: 1px solid oklch(80% 0.12 205 / 0.45); border-radius: 8px; }
.keybox :is(h2, h3) { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 1.12rem; border: 0; padding: 0; }
.keybox :is(h2, h3) svg.i { color: var(--accent); }
.keybox ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.keybox li { margin: 0.3rem 0; }

/* Second row of tabs: the standards */
header.site .bar.std { padding-top: 0; padding-bottom: 0.55rem; gap: 0.3rem 1.1rem; }
header.site .bar.std .label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
header.site .bar.std a { color: var(--muted); font-size: 0.88rem; padding: 0.05rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; }
header.site .bar.std a.here { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
header.site .bar.std a:hover { text-decoration: none; color: var(--text); }

/* Diagrams: inline SVG, styled here so the content security policy holds */
figure.diagram { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1rem 0.8rem; }
svg.dg { width: 100%; height: auto; display: block; font-family: inherit; }
svg.dg.inset { max-width: 560px; margin: 0.6rem 0; }
svg.dg text { fill: var(--text); font-size: 15px; }
svg.dg text.m { fill: var(--muted); font-size: 13px; }
svg.dg text.h { font-weight: 700; font-size: 16px; }
svg.dg text.a { fill: var(--accent); }
svg.dg text.w { fill: var(--warm); }
svg.dg .box { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
svg.dg .box.a { stroke: var(--accent); }
svg.dg .box.w { stroke: var(--warm); }
svg.dg .box.hi { fill: var(--panel-hi); }
svg.dg .soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
svg.dg .softw { fill: oklch(78% 0.15 60 / 0.14); stroke: var(--warm); stroke-width: 1.5; }
svg.dg .ln { stroke: var(--muted); stroke-width: 1.6; fill: none; }
svg.dg .ln.a { stroke: var(--accent); }
svg.dg .ln.w { stroke: var(--warm); }
svg.dg .ln.d { stroke-dasharray: 5 4; }
svg.dg .ln.thick { stroke-width: 2.6; }
svg.dg .tip { fill: var(--muted); }
svg.dg .tip.a { fill: var(--accent); }
svg.dg .tip.w { fill: var(--warm); }
svg.dg .grid line { stroke: var(--line); stroke-width: 1; }

/* Account page */
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.account-head h2 { border: 0; padding: 0; margin: 0 0 0.3rem; }
.account-head .legend { margin: 0; }
.account-head .user-id code { user-select: all; }
.account-head .user-id .button { padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.account-actions { display: flex; align-items: center; gap: 0.8rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 1rem 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
#clerk-profile { margin: 1rem 0; }
.note.error { border-left-color: var(--warm); color: var(--text); }
.button.quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.thread { display: grid; gap: 0.6rem; margin: 0.8rem 0 1rem; }
.thread .msg { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.9rem; }
.thread .msg.staff { border-left: 3px solid var(--accent); }
.thread .msg p { margin: 0.3rem 0; white-space: pre-wrap; }
section.admin { margin-top: 2.5rem; padding-top: 0.5rem; border-top: 2px solid var(--warm); }
#clerk-auth { margin: 1.2rem 0; }
section.admin > h2:first-child { border-top: 0; }

/* The header's account link: "Sign in", or the signed-in person's avatar (Clerk's account menu on the account page). */
/* Top row: brand on the left, the account link on the right; the page links get their own row below. */
header.site .bar > a.who { order: 1; color: var(--muted); font-size: 0.95rem; display: inline-flex; align-items: center; min-height: 32px; }
header.site .bar > a.who.here { color: var(--text); }
header.site .bar:not(.std) > nav { order: 2; flex-basis: 100%; align-items: center; }
header.site a.who.avatar { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid var(--line); }
header.site a.who.avatar:hover { text-decoration: none; border-color: var(--accent); }
header.site a.who.avatar.here { border-color: var(--accent); }
header.site a.who.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
header.site a.who .face { width: 100%; height: 100%; fill: var(--muted); }
header.site a.who .who-menu { display: inline-flex; }

/* The front page: short blocks with room around them */
main.landing { padding-top: 1rem; }
main.landing section { margin: 5rem 0; }
main.landing h2 { border: 0; padding: 0; margin: 0 0 1.4rem; font-size: 1.6rem; }
.hero { padding: 4.5rem 0 1rem; max-width: 46rem; }
.hero .eyebrow { color: var(--accent); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.4rem; }
.hero .lede { font-size: 1.25rem; line-height: 1.55; margin: 0 0 2rem; }
.buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; }
figure.shot { margin: 3.5rem 0 0; }
figure.shot img { border-radius: 10px; box-shadow: 0 30px 80px -30px oklch(60% 0.12 205 / 0.35); }
ol.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: step; }
ol.steps li { counter-increment: step; padding: 1.2rem 1.3rem 1.3rem; border-top: 3px solid var(--line); background: var(--panel); border-radius: 0 0 8px 8px; }
ol.steps li:nth-child(2) { border-top-color: var(--accent); }
ol.steps li:nth-child(3) { border-top-color: var(--warm); }
ol.steps h3 { margin: 0 0 0.4rem; }
ol.steps h3::before { content: counter(step) "  "; color: var(--muted); font-weight: 400; }
ol.steps h3.a { color: var(--accent); }
ol.steps h3.w { color: var(--warm); }
ol.steps p { margin: 0; color: var(--muted); }
p.more { margin: 1.2rem 0 0; }
p.more a { display: inline-flex; align-items: center; gap: 0.4rem; }
main.landing .grid { gap: 1.2rem; }
a.card.link { color: inherit; display: block; padding: 1.2rem 1.3rem; }
a.card.link:hover { text-decoration: none; }
ul.proof { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
ul.proof a { display: grid; gap: 0.2rem; padding: 1.6rem 0.4rem; color: var(--muted); }
ul.proof a:hover { text-decoration: none; color: var(--text); }
ul.proof b { color: var(--text); font-size: 1.35rem; }
main.landing .action { margin-top: 5rem; padding: 2rem 2.2rem; }
@media (max-width: 800px) { ol.steps, ul.proof { grid-template-columns: 1fr; } .hero { padding-top: 2.5rem; } main.landing section { margin: 3.5rem 0; } }

/* The front page's backdrop: the app flying over Trazore, muted, dimmed and blurred, full width behind the headline */
.hero-band { position: relative; width: 100vw; margin: -1rem 0 0 calc(50% - 50vw); padding: 0 max(1.25rem, calc(50vw - var(--max) / 2 + 1.25rem)); overflow: hidden; isolation: isolate; }
.hero-band .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, oklch(16% 0.02 250 / 0.9) 0%, oklch(16% 0.02 250 / 0.55) 55%, oklch(16% 0.02 250 / 0.25) 100%),
              linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.hero-band .hero { margin: 0; padding: 7rem 0 5rem; }
.hero-band .credit { position: absolute; right: max(1.25rem, calc(50vw - var(--max) / 2 + 1.25rem)); bottom: 0.6rem; margin: 0; font-size: 0.72rem; color: oklch(74% 0.025 250 / 0.7); }
/* No player chrome on the backdrop, ever; where it can't play (or the visitor prefers less motion) the still stands in. */
.hero-band .hero-bg { pointer-events: none; }
.hero-band .hero-bg::-webkit-media-controls, .hero-band .hero-bg::-webkit-media-controls-panel,
.hero-band .hero-bg::-webkit-media-controls-start-playback-button, .hero-band .hero-bg::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.hero-band.still .hero-bg { display: none; }
.hero-band.still { background: url("images/hero-trazore.jpg") center / cover; }
@media (prefers-reduced-motion: reduce) {
  .hero-band .hero-bg { display: none; }
  .hero-band { background: url("images/hero-trazore.jpg") center / cover; }
}
@media (max-width: 800px) { .hero-band .hero { padding: 4rem 0 4.5rem; } .hero-band .credit { left: 1.25rem; } }