/* FSMA 204 / Traceability solution page.
   Companion to home-v2.css: reuses its tokens (--green-2, --page, --line,
   --surface, etc.) and components (.hero, .section-kicker, .spec-panel,
   .why-card, .button). This sheet only adds what's specific to the page:
   the recall-trace graph, the buyer-mandate cards, the capture split, the
   KDE panel, and the page footnote. */

/* ── Section rhythm ── */
.fsma-section {
  position: relative;
  padding: clamp(70px, 8.5vw, 116px) clamp(18px, 4vw, 48px);
}

.fsma-section + .fsma-section {
  border-top: 1px solid var(--line);
}

.fsma-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Feature section (the recall trace) gets a faint lit backdrop so it reads
   as the centerpiece of the page. */
.fsma-section--feature {
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 197, 94, 0.08), transparent 46%),
    radial-gradient(circle at 88% 104%, rgba(59, 130, 246, 0.09), transparent 50%);
}

/* ── Hero overrides ── the home hero h1 is 64–108px, too large for a
   sentence headline. Scope a calmer size and let the screenshot sit right. */
.fsma-hero h1 {
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.0;
  letter-spacing: -0.04em;
}

.fsma-hero .hero-product {
  width: min(100%, 560px);
}

/* ── 3-up card grid (buyer mandate, operator wedge) ── reuses .why-card. */
.fsma-grid-3 {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fsma-grid-3 .why-card p:last-child {
  margin-bottom: 0;
}

/* ── Recall-trace graph (the centerpiece) ── */
.trace {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 10% -10%, rgba(34, 197, 94, 0.09), transparent 55%),
    rgba(17, 27, 41, 0.74);
  box-shadow: var(--shadow);
}

.trace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.trace-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.trace-tag::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
}

.trace-query {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.1);
}

.trace-query span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trace-query code {
  color: var(--text);
  font-family: "Space Grotesk", "Inter", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.trace-chain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trace-node {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.trace-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent, var(--green));
}

.trace-node.is-output {
  --accent: var(--green);
}

.trace-node.is-source {
  --accent: var(--blue-2);
}

.trace-role {
  display: block;
  margin-bottom: 6px;
  color: var(--accent, var(--text));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trace-node h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.trace-kv {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trace-kv > div {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.trace-kv dt {
  margin: 0;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.trace-kv dd {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
}

/* Connector between nodes: a centered line with a label pill that "cuts"
   the line, and a downward chevron. */
.trace-step {
  position: relative;
  display: grid;
  place-items: center;
  height: 58px;
}

.trace-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--green), var(--blue-2));
}

.trace-step span {
  position: relative;
  z-index: 1;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--page-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Blast radius ── */
.blast {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
}

.blast-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #fca5a5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blast-label::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--red);
}

.blast-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.blast-stat {
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(239, 68, 68, 0.05);
  text-align: center;
}

.blast-stat strong {
  display: block;
  color: var(--text);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.blast-stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.blast-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.trace-caption {
  max-width: 620px;
  margin: 18px auto 0;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Receiving Log panel ── a faithful, generic rendering of the app's
   on-floor capture modal. Replaces the partial screenshot so it stays
   legible at any width and carries no third-party names. */
.rcv {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #1b2533, #131c28);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rcv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.rcv-kicker {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rcv-bar strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rcv-count {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rcv-body {
  padding: 16px 18px;
  display: grid;
  gap: 13px;
}

/* Grid/flex children default to min-width:auto, which refuses to shrink
   below the long scan placeholder and clips against the panel's
   overflow:hidden on narrow screens. Let them shrink + ellipsis instead. */
.rcv-body > *,
.rcv-grid3 > *,
.rcv-grid2 > * {
  min-width: 0;
}

.rcv-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcv-input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rcv-input--ph {
  color: var(--faint);
  font-weight: 500;
}

.rcv-input--accent {
  color: var(--green-2);
  border-color: rgba(34, 197, 94, 0.36);
  background: rgba(34, 197, 94, 0.08);
}

.rcv-scan {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.34);
  background: rgba(59, 130, 246, 0.06);
}

.rcv-scan-label {
  display: block;
  margin-bottom: 9px;
  color: var(--blue-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rcv-scan-row {
  display: flex;
  gap: 9px;
}

.rcv-scan-row .rcv-input {
  flex: 1;
  min-width: 0;
}

.rcv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0 15px;
  min-height: 38px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.rcv-hint {
  margin: 9px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.4;
}

.rcv-item {
  display: grid;
  gap: 11px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.rcv-grid3 {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 1fr;
  gap: 9px;
}

.rcv-grid2 {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 9px;
}

/* Bottom-align the two inputs even when one label wraps to a second line
   on narrow screens (e.g. "On the FDA Traceability List?" vs "Temp °F") —
   grid stretches both cells to equal height, so margin-top:auto pins each
   input to the bottom and they line up. */
.rcv-grid2 .rcv-field {
  display: flex;
  flex-direction: column;
}

.rcv-grid2 .rcv-input {
  margin-top: auto;
}

.rcv-captured {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 7px;
  color: var(--green-2);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.rcv-captured::before {
  content: "";
  flex: none;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--green-2);
  border-bottom: 2px solid var(--green-2);
  transform: translateY(-1px) rotate(-45deg);
}

.rcv-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
}

.rcv-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
}

.rcv-btn--go {
  color: #071018;
  border-color: transparent;
  background: var(--green);
}

/* ── KDE panel ── reuses .spec-panel / .spec-tiles / .spec-rows from
   home-v2.css. Sized to its content (the deliverable lines), not the full
   1120 grid, so the pills don't stretch the box far wider than its text. */
.kde-panel {
  max-width: 860px;
  margin: 0 auto;
}

.kde-panel .spec-rows {
  margin-top: 8px;
}

/* ── Footnote ── */
.fsma-footnote {
  max-width: 820px;
  margin: clamp(36px, 5vw, 60px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
  line-height: 1.6;
}

.fsma-footnote a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.fsma-footnote a:hover {
  color: var(--green-2);
  border-bottom-color: currentColor;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .fsma-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .trace {
    padding: 18px 14px;
  }

  .trace-node {
    padding: 16px;
  }

  .blast-stats {
    gap: 8px;
  }

  .blast-stat {
    padding: 12px 6px;
  }

  .blast-stat strong {
    font-size: 26px;
  }

  .rcv-grid3 {
    grid-template-columns: 1.6fr 0.7fr 1fr;
  }
}