/*
  Screen 01 — Acquisition Strategy Builder.
  Layout traces to SCREEN_01_ACQUISITION_STRATEGY_BUILDER_VISUAL_CONCEPT.md
  Regions A–I. No pixel spec existed in the frozen documents; proportions
  below are this prototype's own smallest-consistent decision.
*/

.view { display: none; }
.view.active { display: block; }

/* ---------- Region A — Hero ---------- */

.hero {
  padding: var(--space-9) var(--space-6) var(--space-8);
  text-align: center;
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--size-hero);
  line-height: var(--leading-tight);
  font-weight: 500;
  max-width: 42rem;
  margin: 0 auto var(--space-5);
}

.hero__support {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--colour-text-muted);
  max-width: 34rem;
  margin: 0 auto;
  line-height: var(--leading-loose);
}

/* ---------- Builder grid ---------- */

.builder {
  padding: 0 var(--space-6) var(--space-9);
}

.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--space-8);
  align-items: start;
  max-width: var(--page-max);
  margin: 0 auto;
}

.builder-main { min-width: 0; }

/* Region B — Sector */
.sector-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sector-chip { min-width: 11rem; }

/* Region C — Geography & scale */
.scale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Region D — Founder & Ownership */
.founder-block + .founder-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--colour-hairline);
}

.founder-block__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-4);
}

.ownership-note {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
  margin: var(--space-4) 0 var(--space-2);
}

/* Region E — Live match rail */
.match-rail {
  position: sticky;
  top: var(--space-6);
  border: 1px solid var(--colour-hairline);
  padding: var(--space-5);
}

.match-rail__figure {
  font-family: var(--font-mono);
  font-size: var(--size-figure);
  line-height: 1;
  color: var(--colour-text);
  font-variant-numeric: tabular-nums;
}

.match-rail__label {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}

.match-rail__breakdown {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-hairline);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Region H — Recap */
.recap {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  color: var(--colour-text);
}
.recap em { font-style: normal; color: var(--colour-accent-strong); border-bottom: 1px solid var(--colour-accent-low-border); }

/* Region I — Commit */
.commit-region {
  border-bottom: none;
  padding-top: var(--space-7);
  text-align: center;
}

.commit-region__note {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--colour-text-faint);
}

/* ---------- Confirmation view ---------- */

.confirmation {
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--space-9) var(--space-6) var(--space-8);
  text-align: center;
}

.confirmation__market-label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-3);
}

.confirmation__market-name {
  border: none;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid var(--colour-hairline);
  padding: var(--space-2) 0 var(--space-5);
  margin-bottom: var(--space-6);
}
.confirmation__market-name:focus-visible { outline: none; border-color: var(--colour-accent-low-border); }

.confirmation__statement {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: var(--leading-loose);
  margin-bottom: var(--space-7);
}

.confirmation__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--colour-hairline);
  border-bottom: 1px solid var(--colour-hairline);
  margin-bottom: var(--space-7);
}

.stat__figure {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-top: var(--space-2);
}

.confirmation__promise {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.04em;
  color: var(--colour-text-faint);
  line-height: var(--leading-normal);
  max-width: 26rem;
  margin: 0 auto var(--space-7);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .builder-grid { grid-template-columns: 1fr; }
  .match-rail { position: static; margin-bottom: var(--space-6); }
  .scale-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .page, .hero, .builder { padding-left: var(--space-4); padding-right: var(--space-4); }
  .scale-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .confirmation__stats { gap: var(--space-5); flex-wrap: wrap; }
  .identity-bar { padding: var(--space-3) var(--space-4); }
  .hero { padding-top: var(--space-8); padding-bottom: var(--space-7); }
}

@media (max-width: 420px) {
  .sector-chip { min-width: 100%; }
}