/* Landing page styles. Every colour, size and space comes from tokens.css. */

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

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

p {
  margin: 0;
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-navy);
  outline-offset: var(--focus-ring-offset);
}

.container {
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ---------- header ---------- */

/* 60px bar plus the 3px border */
:root {
  --header-height: 63px;
}

html {
  scroll-padding-top: var(--header-height);
}

.header {
  position: sticky;
  top: 0;
  z-index: 9;
  border-bottom: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--color-navy);
  text-decoration: none;
}

.logo-light {
  font-weight: 400;
}

.logo-bold {
  font-weight: var(--font-weight-semibold);
}

/* The "O" in ZERO is the mark: seven navy dots and one teal. */
.logo-o {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.105em;
}

.logo-o-accent {
  fill: var(--color-teal);
}

.nav {
  display: flex;
  gap: var(--space-2);
}

.nav-link {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  text-decoration: none;
}

.nav-link:hover {
  background: var(--color-teal);
}

/* ---------- shared pieces ---------- */

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.section {
  padding: var(--space-20) 0;
}

.section-tinted {
  border-top: var(--border-width) solid var(--color-ink);
  border-bottom: var(--border-width) solid var(--color-ink);
  background: var(--color-white-translucent);
}

.section-heading {
  margin-bottom: var(--space-10);
}

.section-title {
  margin-top: var(--space-4);
  font-size: var(--font-size-3xl);
  line-height: 1.1;
}

.card {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-hard);
}

.card-title {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-2xl);
  line-height: 1.15;
}

.card-text {
  color: var(--color-ink-soft);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}

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

.hero {
  padding: var(--space-24) 0;
}

.hero-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-14);
  align-items: center;
}

.hero-eyebrow {
  margin-bottom: var(--space-5);
}

.headline {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-hero);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.headline-accent {
  color: var(--color-teal);
}

.lede {
  max-width: 480px;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.status-box {
  max-width: 500px;
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.status-label {
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-medium);
}

.hint {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ---------- terminal sample ---------- */

.terminal {
  overflow: hidden;
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-hard);
}

.terminal-title-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-ink);
  background: var(--color-navy-pale);
}

.terminal-block {
  width: 12px;
  height: 12px;
  background: var(--color-ink);
}

.terminal-title {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.terminal-body {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.9;
  color: var(--color-ink-soft);
}

.tone-score {
  color: var(--color-navy);
  font-weight: var(--font-weight-medium);
}

.tone-critical,
.tone-warning,
.tone-safe,
.tone-neutral {
  font-weight: var(--font-weight-medium);
}

/* Risk colours mark findings only, here the sample findings in the terminal. */
.tone-critical { color: var(--color-risk-critical); }
.tone-warning { color: var(--color-risk-warning); }
.tone-safe { color: var(--color-risk-safe); }
.tone-neutral { color: var(--color-risk-neutral); }

/* ---------- what it shows ---------- */

.card-label {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-medium);
}

/* ---------- how it works ---------- */

.step-number {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-medium);
}

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

.promise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.promise {
  padding: var(--space-5);
  border: var(--border-width-thin) solid var(--color-ink);
  background: var(--color-white);
}

.promise-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
}

/* ---------- footer ---------- */

.footer {
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-ink);
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-navy-pale);
}

.footer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.footer-link {
  color: inherit;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .nav-link-optional {
    display: none;
  }

  .hero,
  .section {
    padding: var(--space-14) 0;
  }
}

/* ---------- coming soon page ---------- */

.coming-soon-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.coming-soon {
  display: flex;
  flex: 1;
  align-items: center;
  padding: var(--space-14) 0;
}

.coming-soon-card {
  padding: var(--space-10);
}

.coming-soon-card .tag {
  margin-bottom: var(--space-5);
}

.coming-soon-card .lede {
  max-width: 520px;
}

/* ---------- redesigned home page ---------- */

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

.section-lede {
  max-width: 640px;
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
}

.plain-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-ink-soft);
}

.plain-list li {
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--color-teal);
}

/* flow diagram (hero): a hub, the gateway in the middle, six numbered arrows.
   Built from HTML and CSS so the text stays at its real size; phones get a
   stacked version instead of a shrunken one. */

.flow-body {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.flow-hub {
  display: grid;
  --ret-w: 64px;
  --box-w: 92px;
  --cp-w: 152px;
  grid-template-columns: var(--ret-w) var(--box-w) minmax(84px, 1fr) var(--cp-w);
  grid-template-rows: auto minmax(88px, 1fr) auto minmax(88px, 1fr) auto;
  grid-template-areas:
    "ret agent . ."
    "ret v1 t1 ."
    "ret gw pair cp"
    "ret v3 t3 logs"
    "ret tool . .";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  flex: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.35;
  color: var(--color-ink);
}

.fh-box {
  display: grid;
  place-items: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.fh-gate {
  background: var(--color-navy);
  color: var(--color-white);
}

.fh-gate-name {
  font-weight: var(--font-weight-semibold);
}

.fh-agent { grid-area: agent; }
.fh-gw { grid-area: gw; align-self: center; }
.fh-gate { grid-area: cp; align-self: stretch; }
.fh-tool { grid-area: tool; }
.fh-v1 { grid-area: v1; }
.fh-t1 { grid-area: t1; }
.fh-v3 { grid-area: v3; }
.fh-t3 { grid-area: t3; }
.fh-pair { grid-area: pair; }
.fh-logs { grid-area: logs; }

/* Return line: from the tool's left edge, up the side, and into the agent's left
   edge. Both ends sit level with the box centres (boxes are 52px tall, so the
   line is 24px in). Drawn as dashed strips so the dashes can flow along it. */
.fh-return {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 6;
  margin: 24px calc(-1 * var(--space-3)) 24px 0;
  background-image:
    linear-gradient(90deg, var(--color-risk-safe-dark) 8px, transparent 8px),
    linear-gradient(90deg, var(--color-risk-safe-dark) 8px, transparent 8px),
    linear-gradient(180deg, var(--color-risk-safe-dark) 8px, transparent 8px);
  background-size: 14px 3px, 14px 3px, 3px 14px;
  background-repeat: repeat-x, repeat-x, repeat-y;
  background-position: 0 0, 0 100%, 0 0;
}

.fh-return::before {
  content: "";
  position: absolute;
  top: -4.5px;
  right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-risk-safe-dark);
}

.fh-return .fh-tag {
  position: absolute;
  top: 50%;
  left: calc(3px + var(--space-2));
  transform: translateY(-50%);
}

.fh-vert {
  display: flex;
  justify-content: center;
  align-self: stretch;
}

.fh-tag {
  align-self: center;
}

.fh-pair {
  display: grid;
  align-self: center;
  gap: var(--space-1);
}

.fh-tag-c {
  text-align: center;
}

.fh-logs {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
}

.fh-logs .arr {
  height: 28px;
  min-height: 0;
}

.fh-logs .fh-box {
  width: 100%;
  min-height: 44px;
}

/* Deny line: from the top of the checkpoint, up, then left into the agent's right
   edge. Starts at the middle of the checkpoint column, ends level with the agent. */
.fh-deny {
  position: relative;
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  margin: 24px calc(var(--cp-w) / 2) calc(-1 * var(--space-1)) calc(-1 * var(--space-3));
  background-image:
    linear-gradient(90deg, var(--color-risk-critical) 3px, transparent 3px),
    linear-gradient(180deg, var(--color-risk-critical) 3px, transparent 3px);
  background-size: 9px 3px, 3px 9px;
  background-repeat: repeat-x, repeat-y;
  background-position: 0 0, 100% 0;
}

.fh-deny::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid var(--color-risk-critical);
}

.fh-deny .fh-note {
  position: absolute;
  top: var(--space-5);
  left: calc(100% + var(--space-2));
  white-space: nowrap;
}

.fh-note {
  align-self: center;
  font-size: var(--font-size-sm);
}

.fh-verdict {
  font-weight: var(--font-weight-semibold);
}

/* Arrows: a 3px line of dashes and a sharp triangle head. The dashes flow in the
   direction of the arrow (see the end of this file). Colour says what the arrow
   carries: ink for a request, dark green for the allow path, red for deny, and
   alternating green and red for the answer, which is either one. Request arrows
   have long dashes, return arrows have short ones. */

.arr {
  --arr: var(--color-ink);
  --on: 10px;
  --p: 14px;
  position: relative;
  display: block;
  flex: none;
}

.arr-allow { --arr: var(--color-risk-safe-dark); }
.arr-deny { --arr: var(--color-risk-critical); }
.arr-dash { --on: 6px; }

.arr-both {
  --arr: var(--color-risk-safe-dark);
  --p: 24px;
}

.arr-r,
.arr-l {
  height: 12px;
}

.arr-u,
.arr-d {
  width: 12px;
  min-height: 40px;
}

.arr::before,
.arr::after {
  content: "";
  position: absolute;
}

.arr::before {
  background-image: linear-gradient(var(--dir), var(--arr) var(--on), transparent var(--on));
}

.arr-r,
.arr-l {
  --dir: 90deg;
}

.arr-u,
.arr-d {
  --dir: 180deg;
}

.arr-both::before {
  /* allow is a long green dash, deny is two red dots, so they differ in shape too */
  background-image: linear-gradient(
    90deg,
    var(--color-risk-safe-dark) 8px,
    transparent 8px 12px,
    var(--color-risk-critical) 12px 15px,
    transparent 15px 18px,
    var(--color-risk-critical) 18px 21px,
    transparent 21px
  );
}

.arr-r::before,
.arr-l::before {
  top: 50%;
  height: 3px;
  background-size: var(--p) 3px;
  background-repeat: repeat-x;
  transform: translateY(-50%);
}

.arr-u::before,
.arr-d::before {
  left: 50%;
  width: 3px;
  background-size: 3px var(--p);
  background-repeat: repeat-y;
  transform: translateX(-50%);
}

.arr-r::before { left: 0; right: 6px; }
.arr-l::before { left: 6px; right: 0; }
.arr-u::before { top: 6px; bottom: 0; }
.arr-d::before { top: 0; bottom: 6px; }

.arr-r::after,
.arr-l::after {
  top: 50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}

.arr-u::after,
.arr-d::after {
  left: 50%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transform: translateX(-50%);
}

.arr-r::after { right: 0; border-left: 9px solid var(--arr); }
.arr-l::after { left: 0; border-right: 9px solid var(--arr); }
.arr-u::after { top: 0; border-bottom: 9px solid var(--arr); }
.arr-d::after { bottom: 0; border-top: 9px solid var(--arr); }

/* Small words stay ink for contrast; the risk colour shows as a swatch. */
.flow-verdict::before,
.fh-verdict::before,
.chain-state::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  background: var(--swatch);
}

.fh-verdict {
  --swatch: var(--color-risk-critical);
}

.flow-caption {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-width-thin) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}

@media (min-width: 861px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

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

/* Narrow desktop windows: the diagram gets a bigger share and tighter columns so
   it always fits inside its card. */
@media (min-width: 861px) and (max-width: 1099px) {
  .hero-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-10);
  }

  .flow-hub {
    --ret-w: 56px;
    --box-w: 84px;
    --cp-w: 136px;
  }
}

/* On windows tall enough, the diagram card is about 80% of the window height and
   never taller than the space under the header, so it is always fully visible. */
@media (min-width: 53.8em) and (min-height: 43.75em) {
  .hero {
    padding: var(--space-10) 0;
  }

  .flow {
    display: flex;
    flex-direction: column;
    max-height: min(80vh, calc(100vh - var(--header-height) - var(--space-20)));
  }

  .flow .flow-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }
}

/* rules section */

.rules-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-14);
  align-items: center;
}

.rule-fields {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.rule-fields div {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-ink);
}

.rule-fields dt {
  flex: none;
  min-width: 128px;
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-medium);
}

.rule-fields dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.seal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.seal-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border: var(--border-width) solid var(--color-white);
  background: var(--color-teal);
}

.seal-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.seal-note {
  display: block;
  color: var(--color-navy-pale);
}

/* hash chain */

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-6);
}

.chain-block {
  display: grid;
  gap: var(--space-1);
  min-width: 140px;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.chain-id {
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
}

.chain-state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.chain-ok { --swatch: var(--color-risk-safe); }
.chain-bad { --swatch: var(--color-risk-critical); }
.chain-neutral { --swatch: var(--color-risk-neutral); }

.chain-block-bad {
  border-color: var(--color-risk-critical);
  box-shadow: 8px 8px 0 var(--color-risk-critical);
}

.chain-link {
  width: var(--space-8);
  height: var(--border-width);
  margin: 0 var(--space-1);
  background: var(--color-ink);
}

.chain-link-broken {
  background: repeating-linear-gradient(90deg, var(--color-risk-critical) 0 4px, transparent 4px 8px);
}

.chain-check {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

/* SBOM */

.sbom-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.sbom-meta .status-box {
  max-width: none;
}

.table-wrap {
  padding: 0;
  overflow-x: auto;
}

.sbom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: left;
}

.sbom-table th,
.sbom-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-ink);
}

.sbom-table th {
  background: var(--color-navy-pale);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.sbom-table tbody tr:last-child td {
  border-bottom: 0;
}

.sbom-empty td {
  color: var(--color-ink-soft);
}

/* status */


@media (max-width: 520px) {
  .chain {
    flex-direction: column;
    align-items: stretch;
  }

  .chain-link {
    width: var(--border-width);
    height: var(--space-6);
    margin: 0 0 0 var(--space-8);
  }

  .chain-link-broken {
    background: repeating-linear-gradient(180deg, var(--color-risk-critical) 0 4px, transparent 4px 8px);
  }
}

/* SBOM extras */

.sbom-dev {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.sbom-dev summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
}

.sbom-dev summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-navy);
  outline-offset: var(--focus-ring-offset);
}

.sbom-dev .card-text {
  margin: var(--space-4) 0;
  font-family: var(--font-body);
}

.sbom-dev-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbom-dev-list span {
  color: var(--color-teal-dark);
}

.sbom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.sbom-actions .hint {
  margin-top: 0;
}

.sbom-download:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-navy);
  outline-offset: var(--focus-ring-offset);
}

/* ---------- header: compact or full menu, primary button ---------- */

.header[data-menu="compact"] .nav-link-optional {
  display: none;
}

.nav {
  align-items: center;
}

.button-primary {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-thin) solid var(--color-ink);
  background: var(--color-navy);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  text-decoration: none;
}

.button-primary:hover {
  background: var(--color-teal);
  color: var(--color-ink);
}


.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.button-large {
  min-height: 52px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  color: var(--color-ink-soft);
}

.footer-end {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.footer .button-primary {
  border-color: var(--color-navy-pale);
}

.gloss {
  max-width: 720px;
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}

/* Page-flow hooks: neutral in the static layout, see motion.css */
.nav-story,
.story-mark {
  display: none;
}

/* The two long arrows flow in the direction of travel. Time-based, not scroll
   based, and switched off for reduced motion. */
@keyframes flow-return {
  to { background-position: 14px 0, -14px 100%, 0 -14px; }
}

@keyframes flow-deny {
  to { background-position: -9px 0, 100% -9px; }
}

@keyframes flow-r { to { background-position: var(--p) 0; } }
@keyframes flow-l { to { background-position: calc(-1 * var(--p)) 0; } }
@keyframes flow-d { to { background-position: 0 var(--p); } }
@keyframes flow-u { to { background-position: 0 calc(-1 * var(--p)); } }

@media (prefers-reduced-motion: no-preference) {
  .fh-return {
    animation: flow-return 0.8s linear infinite;
  }

  .fh-deny {
    animation: flow-deny 0.8s linear infinite;
  }

  .arr-r::before { animation: flow-r 0.7s linear infinite; }
  .arr-l::before { animation: flow-l 0.7s linear infinite; }
  .arr-d::before { animation: flow-d 0.7s linear infinite; }
  .arr-u::before { animation: flow-u 0.7s linear infinite; }
}

/* Phones: the same diagram, compressed so it fits down to 320px wide while the text
   stays at 12px or more. The result line gets a vertical label, the row gaps shrink,
   and the card padding is smaller. */
@media (max-width: 520px) {
  .flow-body {
    padding: var(--space-3);
  }

  .flow-hub {
    --ret-w: 26px;
    --box-w: 72px;
    --cp-w: 92px;
    grid-template-columns: var(--ret-w) var(--box-w) minmax(56px, 1fr) var(--cp-w);
    grid-template-rows: auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto;
    column-gap: var(--space-1);
    font-size: var(--font-size-xs);
  }

  .fh-box {
    padding: var(--space-1);
    font-size: var(--font-size-xs);
  }

  .fh-tag {
    font-size: var(--font-size-xs);
  }

  .fh-return .fh-tag {
    left: 5px;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }

  .fh-return {
    margin-right: calc(-1 * var(--space-1));
  }

  .fh-deny {
    margin-left: calc(-1 * var(--space-1));
  }

  .fh-deny .fh-note {
    left: calc(100% + var(--space-1));
    font-size: var(--font-size-xs);
  }

  .fh-verdict::before {
    display: none;
  }

  .fh-logs .fh-box {
    min-height: 36px;
  }

  .flow-caption {
    font-size: var(--font-size-sm);
  }
}

/* Touch: every link and button is at least 44px tall. */
@media (max-width: 520px), (pointer: coarse) {
  .nav-link {
    padding-block: 13px;
  }

  .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .logo {
    padding: var(--space-4) 0;
  }

  .sbom-dev summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Phones: the rules rows stack, and the SBOM table becomes one card per component
   with each value labelled, so nothing needs sideways scrolling. */
@media (max-width: 520px) {
  .rule-fields div {
    flex-direction: column;
    gap: var(--space-1);
  }

  .rule-fields dt {
    min-width: 0;
  }

  .table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .sbom-table,
  .sbom-table tbody {
    display: block;
  }

  .sbom-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sbom-table tbody tr {
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-hard);
  }

  .sbom-table td {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
  }

  .sbom-table tbody tr td::before {
    content: attr(data-label);
    color: var(--color-teal-dark);
    font-weight: var(--font-weight-medium);
  }

  .sbom-empty td {
    display: block;
  }

  .sbom-empty td::before {
    content: none;
  }
}

/* allow is a solid square, deny a hollow one: shapes as well as colours */
.sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-1);
  box-sizing: border-box;
}

.sw-allow {
  background: var(--color-risk-safe-dark);
}

.sw-deny {
  border: var(--border-width-thin) solid var(--color-risk-critical);
}

.fh-verdict::before {
  box-sizing: border-box;
  border: var(--border-width-thin) solid var(--color-risk-critical);
  background: transparent;
}

/* Diagram labels sit next to their arrows */
.fh-t1,
.fh-t3 {
  margin-left: calc(var(--box-w) / -2);
}

/* Definitions are for first-time readers, so they are not fine print */
.gloss {
  margin-top: var(--space-6);
  font-size: var(--font-size-base);
  line-height: 1.55;
}

/* Hints and small labels: nothing below 13px */
.hint,
.fv-line {
  font-size: var(--font-size-md);
}

.seal-note,
.card-label,
.chain-state,
.tag {
  font-size: var(--font-size-sm);
}

/* Logo mark: slightly larger so it holds up at small size */
.logo-o {
  width: 1em;
  height: 1em;
  vertical-align: -0.13em;
}

/* Facts: numbers on top, the rest as a list */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.stat {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-hard);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-navy);
}

.stat-label {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  color: var(--color-ink-soft);
}

/* The log entry, one labelled row per field */
.entry {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.entry div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-3);
}

.entry dt {
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-medium);
}

.entry dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Page indicator and scroll cue: hidden unless the page flow is on (see motion.css) */
.pager,
.scroll-cue {
  display: none;
}

@media (min-width: 861px) {
  .chain-block {
    flex: 1 1 0;
    min-width: 0;
  }

  .status-card .plain-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
}

@media (max-width: 520px) {
  .nav .button-primary {
    display: none;
  }

  .chain-link {
    height: var(--space-8);
  }

  .entry div {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: var(--space-2);
  }
}