/* Home-page composition — the control-room layout.

   Loaded only on / so this denser instrument styling cannot leak into the
   simpler pages; a test asserts that /privacy does not receive this file.

   Every colour is a token from tokens.css, and every position is expressed in
   CSS: no inline style attribute is allowed by the content-security policy, so
   there is no per-element positioning anywhere in these templates. */

/* ---------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* A faint instrument grid. It is the only decorative element on the page and it
   fades out before it reaches the copy, so it never competes with the text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: var(--grid-mask);
  mask-image: var(--grid-mask);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.hero__copy { display: grid; gap: var(--sp-4); justify-items: start; }

.hero__title {
  font-size: var(--fs-mega);
  max-width: 22ch;
}

.hero__title-tail {
  display: block;
  font-style: normal;
  color: var(--text-2);
}

.hero__lede {
  color: var(--text-2);
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Stacked buttons share an edge rather than each being as wide as its own label. */
@media (max-width: 560px) {
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------- hero strip */

.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin-top: var(--sp-4);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.strip__cell { background: var(--panel); padding: var(--sp-3) var(--sp-4); }

.strip__key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.strip__value {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--text-1);
}

/* --------------------------------------------------------------- trace panel */

.trace {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.trace__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--panel-header);
}

.trace__run {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-1);
  margin-right: auto;
  overflow-wrap: anywhere;
}

.trace__objective {
  padding: var(--sp-4) var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.trace__rows { padding: var(--sp-2) var(--sp-4); }

/* Four columns on a wide screen, and the same four readings stacked two by two
   on a phone. Named areas rather than a column count: the elapsed time belongs
   beside the step that took it, and the status belongs beside the detail it is
   talking about, at every width. */
.trace__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 3.75rem auto;
  grid-template-areas: "step body dur chip";
  gap: var(--sp-3);
  align-items: center;
  padding-block: var(--sp-3);
  border-bottom: 1px dashed var(--border);
}

.trace__row:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  .trace__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "step dur" "body chip";
    gap: var(--sp-2) var(--sp-3);
    align-items: start;
  }
  .trace__row .status { align-self: start; }
}

.trace__step {
  grid-area: step;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.trace__dur {
  grid-area: dur;
  justify-self: end;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  color: var(--text-3);
  white-space: nowrap;
}

.trace__row > .status { grid-area: chip; justify-self: end; }

.trace__row--run .trace__step { color: var(--accent); }

.trace__body { grid-area: body; display: grid; gap: 2px; min-width: 0; }

.trace__tool {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.trace__detail { font-size: var(--fs-micro); color: var(--text-3); overflow-wrap: anywhere; }

.trace__foot {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--panel-header);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* --------------------------------------------------------------------- stats */

.band {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats { grid-template-columns: minmax(0, 1fr); } }

.stat { padding: var(--sp-5) var(--sp-4); background: var(--panel); }

.stat__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-1);
}

.stat__body { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }

/* ------------------------------------------------------------------ problems */

.problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 640px) { .problems { grid-template-columns: minmax(0, 1fr); } }

.problem {
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  background: var(--panel);
  border-left: 2px solid transparent;
}

.problem:hover { background: var(--panel-header); border-left-color: var(--accent); }

.problem__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.problem__title { margin-top: var(--sp-2); font-size: var(--fs-lg); }
.problem__failure { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }

.problem__fix {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.problem__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signal-ok);
}

/* --------------------------------------------------------------------- steps */

.steps { display: grid; border-top: 1px solid var(--border); }

.step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: clamp(1.15rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 640px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

.step__index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.1em;
}

.step__main { display: grid; gap: var(--sp-2); min-width: 0; }

.step__title {
  font-size: var(--fs-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
}

.step__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-3);
}

.step__body { color: var(--text-2); font-size: var(--fs-sm); max-width: 74ch; }

/* -------------------------------------------------------------- capabilities */

.caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 1040px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .caps { grid-template-columns: minmax(0, 1fr); } }

.cap {
  padding: var(--sp-5) var(--sp-4);
  background: var(--panel);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.cap:hover { background: var(--panel-header); }
.cap__glyph { display: block; }
.cap__title { font-size: var(--fs-body); }
.cap__body { color: var(--text-3); font-size: var(--fs-xs); }

/* ------------------------------------------------------------------- release */

.rel { display: grid; border-top: 1px solid var(--border); }

.rel__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: clamp(1.1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 700px) {
  .rel__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

.rel__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.rel__main { min-width: 0; }
.rel__body { color: var(--text-2); max-width: 76ch; }

/* ------------------------------------------------------------------ promises */

.promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 820px) { .promises { grid-template-columns: minmax(0, 1fr); } }

.promise { padding: clamp(1.15rem, 2.5vw, 1.6rem); background: var(--panel); }

.promise__never {
  display: flex;
  gap: var(--sp-3);
  color: var(--text-1);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.promise__mark { color: var(--signal-alert); flex: none; }
.promise__because { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------- start */

.start__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) { .start__grid { grid-template-columns: minmax(0, 1fr); } }

.reqs { display: grid; border-top: 1px solid var(--border); margin-top: var(--sp-5); }

.req {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 560px) { .req { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }

.req__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.req__value { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

/* ----------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }

.faq__q {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-1);
  line-height: var(--lh-head);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--fs-body);
  line-height: 1;
  flex: none;
}

details[open] > .faq__q::after { content: "\2212"; }

.faq__a {
  padding-bottom: var(--sp-5);
  color: var(--text-2);
  font-size: var(--fs-sm);
  max-width: 70ch;
}

/* ----------------------------------------------------------------------- cta */

.cta {
  background: var(--panel-header);
  border-top: 2px solid var(--accent);
}

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.cta__title { font-size: var(--fs-title); }
.cta__lede { color: var(--text-2); margin-top: var(--sp-2); max-width: 52ch; }
.cta__btn { flex: none; }

/* ---------------------------------------------------------------- gate rail */

/* The one element on the page that is a picture of what the product promises: a
   release gate, drawn with the states it can actually be in. Amber is reserved
   for the standing rule, never for decoration. */
.band--gates {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.gates__head {
  display: grid;
  gap: var(--sp-2);
  max-width: 78ch;
  margin-bottom: var(--sp-5);
}

.gates__title { font-size: var(--fs-lg); }
.gates__lede { color: var(--text-2); font-size: var(--fs-sm); }

.gates__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 1040px) { .gates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gates { grid-template-columns: minmax(0, 1fr); } }

.gate {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  background: var(--panel);
  border-left: 2px solid transparent;
}

.gate__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.gate__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.gate__detail { font-size: var(--fs-xs); color: var(--text-3); }
.gate .status { justify-self: start; }

.gate--ok { border-left-color: var(--signal-ok); }
.gate--idle { border-left-color: var(--border-strong); }
.gate--wait { border-left-color: var(--signal-warn); background: var(--panel-header); }

/* ------------------------------------------------- the worked-release table */

/* A label row above the list, so the section reads as a log rather than a set of
   cards. Hidden on a phone, where each row already names its own step. */
.rel__head {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

@media (max-width: 700px) { .rel__head { display: none; } }

.rel__num {
  margin-right: var(--sp-2);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The summary line of the sample run in the hero. */
.trace__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}