/* BuildBit site, in the application's own design: neumorphism on the Classic
   palette (BuildKit.App ThemePresets.Classic + wwwroot/app.css). Page and
   surfaces share one tone; every shape comes from two shadows mixed out of
   that tone. Status colours are the app's --bk-hue-* pipeline language. */

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

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

:root {
  --tone: #ecebf2;
  --text: #35314d;
  --muted: #5a5676;
  --primary: #594ae2;
  --primary-rgb: 89, 74, 226;
  --on-primary: #ffffff;
  --line: rgba(90, 86, 118, 0.22);
  --soft-hi: color-mix(in srgb, var(--tone) 25%, #ffffff);
  --soft-lo: color-mix(in srgb, var(--tone) 80%, #000000);
  --pill-fill: 18%;
  --pill-ink-mix: #000000;
  --pill-ink: 58%;

  --hue-draft: #888780;
  --hue-diagnosis: #b23b85;
  --hue-architecture: #6b62d6;
  --hue-approval: #ba7517;
  --hue-development: #378add;
  --hue-qa: #1d9e75;
  --hue-merge: #d4537e;
  --hue-done: #639922;
  --hue-paused: #e24b4a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --depth-inset-sm: inset 1px 1px 3px var(--soft-lo), inset -1px -1px 3px var(--soft-hi);
  --depth-inset: inset 3px 3px 7px var(--soft-lo), inset -3px -3px 7px var(--soft-hi);
  --depth-raised-sm: 3px 3px 8px var(--soft-lo), -3px -3px 8px var(--soft-hi);
  --depth-raised: 7px 7px 16px var(--soft-lo), -7px -7px 16px var(--soft-hi);
  --depth-lift: 10px 10px 22px var(--soft-lo), -10px -10px 22px var(--soft-hi);
  --depth-pressed-accent: inset 3px 3px 7px rgba(0, 0, 0, 0.28), inset -2px -2px 6px rgba(255, 255, 255, 0.18);
  --ring: 0 0 0 2px rgba(var(--primary-rgb), 0.4);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-code: ui-monospace, "Cascadia Code", Consolas, monospace;

  --wrap: 72rem;
  --gutter: 1.25rem;
  --space-section: clamp(4rem, 9vw, 7rem);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --tone: #262631;
  --text: #e4e1f5;
  --muted: #a9a4c6;
  --primary: #7b6cff;
  --primary-rgb: 123, 108, 255;
  --line: rgba(169, 164, 198, 0.18);
  --soft-hi: color-mix(in srgb, var(--tone) 90%, #ffffff);
  --soft-lo: color-mix(in srgb, var(--tone) 45%, #000000);
  --pill-fill: 30%;
  --pill-ink-mix: #ffffff;
  --pill-ink: 52%;
  color-scheme: dark;
}

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--tone);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 15ch;
}

h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--primary);
}

code {
  font-family: var(--font-code);
  font-size: 0.875em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--tone);
  box-shadow: var(--depth-raised);
  color: var(--text);
}

.skip-link:focus {
  top: 1rem;
}

/* --- Background bit field: the app's sign-in page backdrop (LoginLayout.razor.css),
   toned down. Raised tiles on a 64px pitch, faded out through the middle where
   the content sits; now and then a bit is pressed in and lit, like a key being
   typed. Built by site.js, so without scripting the page is just its tone. --- */
.bits {
  position: fixed;
  inset: -40px;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, 36px);
  grid-auto-rows: 36px;
  gap: 28px;
  justify-content: center;
  align-content: start;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0 30%, rgba(0, 0, 0, 0.35) 60%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0 30%, rgba(0, 0, 0, 0.35) 60%, #000 100%);
  transform: translate3d(calc(var(--bits-x, 0) * -10px), calc(var(--bits-y, 0) * -10px), 0);
  transition: transform 320ms var(--ease-out);
  will-change: transform;
}

.bits span {
  border-radius: var(--radius-md);
  background: var(--tone);
  box-shadow: var(--depth-raised-sm);
}

.bits span:nth-child(37n + 7) { animation: bit-press 8s ease-in-out infinite; }
.bits span:nth-child(41n + 3) { animation: bit-press 8s ease-in-out 2.1s infinite; }
.bits span:nth-child(43n + 13) { animation: bit-press 8s ease-in-out 4.3s infinite; }
.bits span:nth-child(47n + 22) { animation: bit-press 8s ease-in-out 6.2s infinite; }

/* Outer and inset shadows can't interpolate, so they swap at zero size. */
@keyframes bit-press {
  0%, 60%, 100% {
    background: var(--tone);
    box-shadow: var(--depth-raised-sm);
  }
  66% {
    box-shadow: 0 0 0 var(--soft-lo), 0 0 0 var(--soft-hi);
  }
  67% {
    box-shadow: inset 0 0 0 var(--soft-lo), inset 0 0 0 var(--soft-hi);
  }
  74%, 84% {
    background: color-mix(in srgb, var(--tone) 70%, var(--primary));
    box-shadow: var(--depth-inset);
  }
  90% {
    box-shadow: inset 0 0 0 var(--soft-lo), inset 0 0 0 var(--soft-hi);
  }
  91% {
    box-shadow: 0 0 0 var(--soft-lo), 0 0 0 var(--soft-hi);
  }
}

/* --- Pills: the app's status language (.bk-pill) --- */
.pill {
  --hue: var(--hue-draft);
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--hue) var(--pill-fill), var(--tone));
  color: color-mix(in srgb, var(--hue) var(--pill-ink), var(--pill-ink-mix));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.hue-you,
.hue-approval { --hue: var(--hue-approval); }
.hue-architect,
.hue-question { --hue: var(--hue-architecture); }
.hue-developer { --hue: var(--hue-development); }
.hue-qa { --hue: var(--hue-qa); }
.hue-diagnosis { --hue: var(--hue-diagnosis); }
.hue-resolution,
.hue-merge { --hue: var(--hue-merge); }
.hue-pass { --hue: var(--hue-done); }
.hue-fail { --hue: var(--hue-paused); }
.hue-system { --hue: var(--hue-draft); }

/* --- Buttons and fields --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 8px 18px -6px rgba(var(--primary-rgb), 0.6), -4px -4px 10px var(--soft-hi);
  color: var(--on-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.button:active:not(:disabled) {
  box-shadow: var(--depth-pressed-accent);
  transform: translateY(1px) scale(0.97);
}

.button:focus-visible {
  box-shadow: var(--ring), 0 8px 18px -6px rgba(var(--primary-rgb), 0.6);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.button-secondary {
  background: var(--tone);
  box-shadow: var(--depth-raised-sm);
  color: var(--text);
}

.button-secondary:active:not(:disabled) {
  box-shadow: var(--depth-inset);
}

.button-secondary:focus-visible {
  box-shadow: var(--ring), var(--depth-raised-sm);
}

.button-small {
  min-height: 2.25rem;
  padding: 0.35rem 0.95rem;
  font-size: 0.875rem;
}

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 32rem;
}

.signup-form input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--tone);
  box-shadow: var(--depth-inset);
  color: var(--text);
  font: inherit;
}

.signup-form input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.signup-form input:focus-visible {
  box-shadow: var(--depth-inset), var(--ring);
}

.form-status {
  flex-basis: 100%;
  min-height: 1.6em;
  font-size: 0.875rem;
  color: var(--muted);
}

.signup-form[data-state="sent"] .form-status {
  color: color-mix(in srgb, var(--hue-done) 70%, var(--text));
}

.signup-form[data-state="error"] .form-status {
  color: var(--hue-paused);
}

/* --- Header: the app bar, sitting on the page tone --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tone);
  box-shadow: 0 6px 18px -10px var(--soft-lo);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  box-shadow: var(--depth-raised-sm);
}

.site-nav {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}

.site-nav a,
.lang-switch {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.site-nav a:hover,
.lang-switch:hover {
  color: var(--text);
  box-shadow: var(--depth-raised-sm);
}

.site-nav a:active,
.lang-switch:active {
  box-shadow: var(--depth-inset);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* The app bar's round raised knob (app.css .bk-mobile-appbar .mud-icon-button). */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: var(--depth-raised-sm);
  color: var(--muted);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--text);
}

.theme-toggle:active {
  box-shadow: var(--depth-inset);
  transform: translateY(1px) scale(0.97);
}

.theme-toggle:focus-visible {
  box-shadow: var(--ring), var(--depth-raised-sm);
}

.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

@media (max-width: 56rem) {
  .site-nav {
    display: none;
  }
}

@media (max-width: 26rem) {
  .brand span {
    display: none;
  }
}

/* --- Hero --- */
.hero {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-section);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
  }
}

.hero-copy {
  display: grid;
  gap: 1.75rem;
}

.lead {
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* The one line under the lead that carries the data-protection promise. */
.hero-note {
  max-width: 34rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--depth-inset-sm);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
}

.fineprint {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* --- Demo run: a raised panel with a pressed-in log well --- */
.demo {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--tone);
  box-shadow: var(--depth-raised);
}

.demo.is-live {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 36rem;
  padding: 1.25rem;
}

@media (max-width: 30rem) {
  .demo.is-live {
    height: 34rem;
    padding: 1rem;
  }
}

.demo-head {
  display: grid;
  gap: 0.15rem;
  padding-inline: 0.25rem;
}

.demo-title {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.demo-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.demo-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.demo-track li {
  --hue: var(--hue-draft);
  position: relative;
  padding-top: 0.6rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-track li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: 3px;
  box-shadow: var(--depth-inset-sm);
  transition: background-color var(--dur-base) var(--ease-out);
}

.demo-track li:nth-child(2) { --hue: var(--hue-architecture); }
.demo-track li:nth-child(3) { --hue: var(--hue-approval); }
.demo-track li:nth-child(4) { --hue: var(--hue-development); }
.demo-track li:nth-child(5) { --hue: var(--hue-qa); }
.demo-track li:nth-child(6) { --hue: var(--hue-merge); }

.demo-track li[data-state="done"]::before {
  background: color-mix(in srgb, var(--hue) 45%, var(--tone));
}

.demo-track li[data-state="active"]::before {
  background: var(--hue);
}

.demo-track li[data-state="active"] {
  color: color-mix(in srgb, var(--hue) var(--pill-ink), var(--pill-ink-mix));
  font-weight: 600;
}

.demo-track li[data-state="fail"] {
  --hue: var(--hue-paused);
  color: var(--hue-paused);
  font-weight: 600;
}

.demo-track li[data-state="fail"]::before {
  background: var(--hue-paused);
}

.demo-log {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: 1.1rem 1.15rem;
  list-style: none;
  border-radius: var(--radius-md);
  box-shadow: var(--depth-inset);
}

.demo.is-live .demo-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.entry {
  display: grid;
  gap: 0.35rem;
  padding-left: 0.9rem;
  border-left: 3px solid color-mix(in srgb, var(--hue, var(--hue-draft)) 70%, var(--tone));
}

.entry.is-new {
  animation: entry-in var(--dur-base) var(--ease-out);
}

@keyframes entry-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.entry-actor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.entry-tag {
  font-weight: 500;
}

.entry-text {
  font-size: 0.9375rem;
}

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  min-height: 5.75rem;
  padding: 0.25rem 0.25rem 0;
}

.bar-text {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.875rem;
}

.bar-text.is-working::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  animation: working-dots 1.2s steps(4) infinite;
}

@keyframes working-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.run-plan {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0;
  font-size: 0.9375rem;
}

.run-plan dt {
  color: var(--muted);
}

.run-plan dd {
  margin: 0;
}

.run-checks {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.run-checks li {
  display: grid;
  grid-template-columns: 8.5rem 4.5rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
}

.check-result {
  justify-self: start;
}

.check-evidence {
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.8125rem;
}

@media (max-width: 36rem) {
  .run-checks li {
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.6rem;
    margin-bottom: 0.35rem;
  }
  .check-evidence {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .run-plan {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .run-plan dd + dt {
    margin-top: 0.4rem;
  }
}

/* --- Sections --- */
[id] {
  scroll-margin-top: 5.5rem;
}

.section {
  display: grid;
  gap: 2.5rem;
  padding-block: var(--space-section);
}

.section-intro {
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
}

.section-intro p {
  color: var(--muted);
  font-size: 1.0625rem;
}

/* Plain point lists: no panel, the text carries them. */
.points {
  display: grid;
  gap: 2rem 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .points {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.points li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.points p {
  color: var(--muted);
}

/* Guardrails: raised tiles, the app's cards. */
.points-three {
  gap: 1.5rem;
}

@media (min-width: 60rem) {
  .points-three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.points-three li {
  background: var(--tone);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--depth-raised);
}

/* --- Steps: a real sequence, numbered --- */
.steps {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  background: var(--tone);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--depth-raised);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  box-shadow: var(--depth-inset-sm);
  color: var(--muted);
  font-family: var(--font-heading);
  font-weight: 600;
}

.steps li.step-you::before {
  color: color-mix(in srgb, var(--hue-approval) var(--pill-ink), var(--pill-ink-mix));
}

.steps .pill {
  justify-self: start;
}

.steps p:not(.pill) {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- QA report --- */
.report {
  background: var(--tone);
  padding: 1.5rem;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--depth-raised);
}

.report-title {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

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

tbody tr:last-child > * {
  border-bottom: 0;
}

thead th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.report td:nth-child(3) {
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.8125rem;
}

.report-history {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--depth-inset-sm);
  color: var(--muted);
  font-size: 0.875rem;
}

.facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

/* --- Roles table --- */
.roles-panel {
  background: var(--tone);
  padding: 1.5rem;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--depth-raised);
}

.roles caption {
  padding-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
}

.roles th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.roles td:nth-child(3) {
  color: var(--muted);
}

@media (max-width: 40rem) {
  .roles thead {
    display: none;
  }
  .roles tr {
    display: grid;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
  }
  .roles tbody tr:last-child {
    border-bottom: 0;
  }
  .roles th,
  .roles td {
    padding: 0.1rem 0;
    border: 0;
  }
  .roles td:nth-child(2)::before {
    content: "Can: ";
    color: var(--muted);
  }
  .roles td:nth-child(3)::before {
    content: "Can't: ";
  }
  :lang(de) .roles td:nth-child(2)::before {
    content: "Darf: ";
  }
  :lang(de) .roles td:nth-child(3)::before {
    content: "Darf nicht: ";
  }
}

/* --- Where your data goes --- */
.dataflow caption {
  padding-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
}

.dataflow th[scope="row"] {
  font-weight: 600;
}

.dataflow td {
  color: var(--muted);
}

.dataflow .pill {
  margin-left: 0.4rem;
}

@media (max-width: 40rem) {
  .dataflow .pill {
    margin: 0.3rem 0 0;
    white-space: normal;
  }
}

/* --- Hosting options --- */
.options {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .options {
    grid-template-columns: 1fr 1fr;
  }
}

.option {
  background: var(--tone);
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--depth-raised);
}

.option p,
.option ul {
  color: var(--muted);
}

.option ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1.2rem;
}

/* --- FAQ: a rail of questions beside one answer panel ---
   Picking a question swaps the answer in one fixed place, so nothing folds
   and nothing below the section moves. The selected question is pressed in
   with the accent colour, like the app's current navigation entry. The
   radios are read by CSS (:checked), so it works without JavaScript. */
.faq {
  --faq-rows: 6; /* most questions in one topic; update when a topic grows */
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  gap: 0.35rem 3rem;
  align-items: start;
  align-content: start;
  /* Always as tall as the longest topic, so switching topics moves nothing below. */
  min-height: calc(var(--faq-rows) * 2.85rem + (var(--faq-rows) - 1) * 0.35rem);
}

.faq-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Topic tabs: the list only ever shows one topic, so it stays short. */
.faq-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.faq-topic {
  background: var(--tone);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--depth-raised-sm);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.faq-radio:checked + .faq-topic {
  box-shadow: var(--depth-inset);
  color: var(--primary);
  font-weight: 600;
}

.faq-radio:focus-visible + .faq-topic {
  box-shadow: var(--depth-raised-sm), var(--ring);
}

.faq-radio:checked:focus-visible + .faq-topic {
  box-shadow: var(--depth-inset), var(--ring);
}

#faq:has(#topic-control:checked) .faq :is(.faq-radio, .faq-q):not([data-group="control"]),
#faq:has(#topic-work:checked) .faq :is(.faq-radio, .faq-q):not([data-group="work"]),
#faq:has(#topic-setup:checked) .faq :is(.faq-radio, .faq-q):not([data-group="setup"]) {
  display: none;
}

.faq-q {
  background: var(--tone);
  grid-column: 1;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.faq-q:hover {
  box-shadow: var(--depth-raised-sm);
}

.faq-radio:checked + .faq-q {
  box-shadow: var(--depth-inset);
  color: var(--primary);
  font-weight: 600;
}

.faq-radio:focus-visible + .faq-q {
  box-shadow: var(--ring);
}

.faq-radio:checked:focus-visible + .faq-q {
  box-shadow: var(--depth-inset), var(--ring);
}

.faq-a {
  background: var(--tone);
  grid-column: 2;
  grid-row: 1 / span var(--faq-rows);
  align-self: start;
  position: sticky;
  top: 6.5rem;
  /* Every answer sits in the same cell and only the chosen one is visible, so
     the cell is always as tall as the tallest answer: switching questions or
     topics never changes the height of the section, at any width. */
  display: grid;
  visibility: hidden;
  gap: 0.85rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--depth-raised);
}

#faq:has(#topic-control:checked) .faq-radio[data-group="control"]:checked + .faq-q + .faq-a,
#faq:has(#topic-work:checked) .faq-radio[data-group="work"]:checked + .faq-q + .faq-a,
#faq:has(#topic-setup:checked) .faq-radio[data-group="setup"]:checked + .faq-q + .faq-a {
  visibility: visible;
  animation: faq-in var(--dur-base) var(--ease-out);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.faq-a h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.faq-a p {
  max-width: 62ch;
  color: var(--muted);
}

/* One column: the answer belongs right under its question. */
@media (max-width: 60rem) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .faq-a {
    display: none;
    grid-column: 1;
    grid-row: auto;
    position: static;
    margin: 0.35rem 0 0.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--depth-inset-sm);
  }
  #faq:has(#topic-control:checked) .faq-radio[data-group="control"]:checked + .faq-q + .faq-a,
  #faq:has(#topic-work:checked) .faq-radio[data-group="work"]:checked + .faq-q + .faq-a,
  #faq:has(#topic-setup:checked) .faq-radio[data-group="setup"]:checked + .faq-q + .faq-a {
    display: grid;
  }
  .faq-a h3 {
    display: none;
  }
}

/* --- Waitlist --- */
.waitlist {
  background: var(--tone);
  justify-items: start;
  gap: 1.25rem;
  margin-block: var(--space-section);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-xl);
  box-shadow: var(--depth-lift);
}

.waitlist > p {
  max-width: 36rem;
  color: var(--muted);
}

.waitlist .signup-form {
  width: 100%;
}

/* --- Footer --- */
.site-footer {
  color: var(--muted);
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem 2.5rem;
}

.footer-trademarks {
  order: 3;
  flex-basis: 100%;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-inner a {
  color: var(--muted);
}

.footer-inner a:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .bits {
    transform: none;
    transition: none;
  }
  .bits span {
    animation: none !important;
  }
  .entry.is-new,
  .faq .faq-a,
  .bar-text.is-working::after {
    animation: none !important;
  }
  .button,
  .theme-toggle,
  .site-nav a,
  .lang-switch,
  .faq-q,
  .faq-topic,
  .demo-track li::before {
    transition: none;
  }
}

/* --- Waitlist confirmation (verify.php) --- */
.confirm {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding-block: 2rem;
}

.confirm-panel {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  width: min(100%, 34rem);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--radius-xl);
  background: var(--tone);
  box-shadow: var(--depth-lift);
}

.confirm-panel h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
}

.confirm-panel p {
  color: var(--muted);
}

/* --- Site statistics (stats.php) --- */
.stats {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem 4rem;
}

.stats-login {
  margin: 12vh auto 0;
}

.stats-login .signup-form {
  width: 100%;
}

.stats-error {
  color: var(--hue-paused);
}

.stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.stats-head h1 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  max-width: none;
}

.stats-head p {
  color: var(--muted);
}

.stats-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.stats-periods button {
  border: 0;
  font: inherit;
  font-size: 0.875rem;
}

.stats-periods .is-current {
  box-shadow: var(--depth-inset);
  color: var(--primary);
  font-weight: 600;
}

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-tiles li {
  display: grid;
  gap: 0.2rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--tone);
  box-shadow: var(--depth-raised);
}

.stats-tiles span,
.stats-tiles small {
  color: var(--muted);
  font-size: 0.8125rem;
}

.stats-tiles strong {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.stats-panel {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--tone);
  box-shadow: var(--depth-raised);
}

.stats-panel h2 {
  font-size: 1.125rem;
}

.stats-panel > p,
.stats-empty {
  color: var(--muted);
  font-size: 0.875rem;
}

.stats-chart {
  width: 100%;
  height: 10rem;
  border-radius: var(--radius-md);
  box-shadow: var(--depth-inset-sm);
}

.stats-chart rect {
  fill: var(--primary);
}

.stats-bars {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-bars li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
}

.stats-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-bar {
  width: 100%;
  height: 0.5rem;
}

.stats-bar rect {
  fill: color-mix(in srgb, var(--primary) 70%, var(--tone));
}

.stats-bar-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stats-bar-value small {
  color: var(--muted);
}