@import url("/site-v12-1.css");

/* v12.2 keeps the approved v12.1 system and adds only cache-safe depth fixes. */
.site-header .site-logo {
  min-block-size: 58px;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(13, 31, 45, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.site-header .site-logo__rabet {
  inline-size: min(156px, 34vw);
  max-block-size: 48px;
  object-fit: contain;
}

.site-header .parent-endorsement {
  opacity: 0.78;
}

.site-header .parent-endorsement img {
  inline-size: 42px;
}

.page--home {
  padding-block-start: clamp(1rem, 2vw, 1.5rem);
}

.page--home .hero {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.page--home .hero h1 {
  max-inline-size: 20ch;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.12;
}

.locale-en .hero h1 {
  max-inline-size: 23ch;
  font-size: clamp(2rem, 3.45vw, 3.25rem);
  line-height: 1.08;
}

.persona-grid > li > .persona-start {
  margin-block-start: auto;
  border: 1px solid var(--green);
  border-radius: var(--radius-control);
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.home-case-study ul {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.25rem;
}

.journey-context__group {
  margin: 0 !important;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--canvas);
}

.journey-context__group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.journey-context__group button {
  flex: 1 1 9rem;
  background: #ffffff;
  color: var(--navy);
}

.journey-context__group button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--soft-gold);
  box-shadow: inset 0 -3px var(--gold);
}

.journey-context__group button[aria-disabled="true"] {
  border-style: dashed;
  color: var(--muted);
  cursor: not-allowed;
}

.journey-context__summary,
[data-lab-context-status] {
  margin-block: 0.5rem;
  padding: 0.8rem 1rem;
  border-inline-start: 4px solid var(--green);
  background: var(--soft-green);
}

.journey-terminal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-terminal li {
  padding: 0.62rem 0.9rem;
  border-block-end: 1px solid #24394c;
  animation: terminal-reveal 260ms ease-out both;
}

.journey-terminal li:last-child {
  border-block-end: 0;
}

.journey-terminal li:nth-child(2) { animation-delay: 60ms; }
.journey-terminal li:nth-child(3) { animation-delay: 120ms; }
.journey-terminal li:nth-child(4) { animation-delay: 180ms; }
.journey-terminal li:nth-child(5) { animation-delay: 240ms; }

@keyframes terminal-reveal {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

.journey-diff__files,
.journey-webhook__pipeline {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  list-style: none;
}

.journey-diff__files li,
.journey-webhook__pipeline li {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: #ffffff;
}

[data-diff="add"] {
  display: inline-flex;
  margin-inline-end: 0.4rem;
  padding-inline: 0.45rem;
  border-radius: 6px;
  background: var(--green);
  color: #ffffff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

[data-hitl],
.journey-result {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.journey-webhook__pipeline [data-webhook-stage="idempotency"] {
  border-inline-start: 4px solid var(--gold);
}

.journey-webhook__pipeline [data-webhook-stage="verify"] {
  border-inline-start: 4px solid var(--green);
}

.journey-noscript > ol {
  grid-template-columns: minmax(0, 1fr);
}

/* /start uses the approved v12 colors, radii, typography, and real brand header. */
.page--start {
  padding-block-start: clamp(1rem, 2vw, 1.5rem);
}

.page--start .hero {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.page--start .hero h1 {
  max-inline-size: 21ch;
  font-size: clamp(2rem, 4vw, 3.55rem);
}

.page--start .hero .status-badge {
  margin-block: 0 1rem;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.65fr);
  align-items: start;
  gap: 1rem;
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
}

.wizard-card,
.wizard-trust,
.wizard-output {
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.wizard-card h2,
.wizard-trust h2,
.wizard-output h2 {
  margin-block-end: 1rem;
}

.wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.wizard-field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.wizard-field label {
  color: var(--navy);
  font-weight: 700;
}

.wizard-field input,
.wizard-field select {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: #ffffff;
  color: var(--text);
}

.wizard-field input:focus-visible,
.wizard-field select:focus-visible {
  border-color: var(--green);
}

.wizard-note {
  margin-block: 1rem;
  padding: 0.85rem 1rem;
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--radius-control);
  background: var(--soft-gold);
}

.wizard-error {
  margin-block: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #a73535;
  border-inline-start-width: 5px;
  border-radius: var(--radius-control);
  background: #fff0f0;
  color: #762323;
  font-weight: 700;
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wizard-actions button {
  min-block-size: 48px;
}

.wizard-actions .button-secondary {
  border-color: var(--navy);
  background: #ffffff;
  color: var(--navy);
}

.wizard-actions .button-secondary:hover {
  background: var(--navy);
  color: #ffffff;
}

.wizard-trust {
  border-block-start: 5px solid var(--gold);
}

.wizard-trust ol {
  display: grid;
  gap: 0.65rem;
  padding-inline-start: 1.35rem;
}

.wizard-output {
  margin-block-start: 1rem;
  border-block-start: 5px solid var(--green);
  scroll-margin-block-start: 1rem;
}

.wizard-output pre {
  max-block-size: 28rem;
}

@media (max-width: 760px) {
  .site-header .site-logo {
    min-block-size: 52px;
    padding: 0.34rem 0.5rem;
  }

  .site-header .site-logo__rabet {
    inline-size: min(132px, 38vw);
  }

  .journey-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-layout,
  .wizard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-case-study ul {
    inline-size: 100%;
  }
}

@media (max-width: 480px) {
  .site-header .site-logo__rabet {
    inline-size: min(112px, 38vw);
  }

  .page--home .hero h1,
  .locale-en .hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }

  .journey-context__group button,
  .home-case-study li,
  .home-case-study a,
  .wizard-actions button {
    inline-size: 100%;
  }
}