@import url("app.css");

/* GEN-DESIGN-008.R2 — semantic composition refinements.
   This layer remains intentionally narrow so every visual revision stays
   inspectable against the original high-fidelity candidate. */

body {
  overflow-x: clip;
}

.hero-context {
  display: grid;
  align-content: end;
  gap: clamp(42px, 8vh, 92px);
}

.hero-thesis {
  max-width: 420px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(24px, 2.7vw, 42px);
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* The opening reads as identity + state + causal instrument, not headline + sales copy. */
.hero-copy {
  align-self: end;
  min-width: 0;
}

.hero-copy h1 {
  margin-bottom: 0;
}

/* Observation is a crossing event. The vertical line is the physical /
   institutional boundary; the horizontal line materializes admission. */
.boundary::after {
  content: "";
  position: absolute;
  left: -34px;
  right: -34px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--information));
}

.boundary small {
  position: absolute;
  left: 50%;
  top: calc(50% - 25px);
  z-index: 2;
  transform: translateX(-50%);
  color: var(--information);
  background: var(--bg);
  padding: 2px 5px;
  font: 650 8px/1 "Cascadia Code", monospace;
  letter-spacing: .1em;
}

.boundary span {
  z-index: 3;
}

/* Authority is a gate in a causal field. The horizontal carrier terminates
   visually at the gate object instead of proposal and Action floating as
   unrelated columns. */
.authority-stage {
  position: relative;
}

.authority-stage::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--line-strong) 0 45%,
    transparent 45% 55%,
    var(--line-strong) 55% 100%
  );
  opacity: .72;
  pointer-events: none;
}

.authority-source,
.authority-gate,
.authority-result {
  position: relative;
  z-index: 1;
}

/* Authorization is not itself Action. The admitted Action receives a separate
   identity object after the one-time authorization state. */
.action-object {
  width: min(100%, 430px);
  margin-top: 32px;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.action-object span {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.action-object code {
  color: var(--code);
  font-size: 10px;
}

.authority-result h2 {
  margin-top: 42px;
}

/* Reconciliation is convergence of independent evidence. The wide carrier is
   intentionally visible even before animation so desktop negative space does
   not erase the causal relation. */
.reconcile-stage {
  position: relative;
}

.reconcile-stage::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--information),
    var(--line-strong) 32%,
    var(--line-strong) 68%,
    var(--positive)
  );
  opacity: .48;
  pointer-events: none;
}

.reconcile-column,
.reconcile-center {
  position: relative;
  z-index: 1;
}

.reconcile-column {
  background: var(--bg);
}

/* The thesis arrives as a consequence of the causal sequence. */
.thesis h2 {
  max-width: 1100px;
}

@media (max-width: 1050px) {
  .hero-context {
    gap: 38px;
  }

  .hero-thesis {
    max-width: 620px;
  }

  .boundary::after {
    left: 50%;
    right: auto;
    top: -10px;
    bottom: -10px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--line-strong), var(--information));
  }

  .boundary small {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .authority-stage::before,
  .reconcile-stage::before {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero-context {
    gap: 28px;
  }

  .hero-copy h1 {
    font-size: clamp(68px, 24vw, 108px);
    letter-spacing: -.065em;
    white-space: nowrap;
  }

  .hero-thesis {
    max-width: 320px;
    font-size: 26px;
  }

  .hero-status > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero-status strong {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .action-object {
    margin-top: 26px;
  }
}

/* On compact layouts the active research inspection becomes part of the
   selected record instead of living after the entire index. Without JS the
   canonical aside remains after the list, so content availability is unchanged. */
@media (max-width: 1050px) {
  .research-index li > .research-preview {
    margin-left: 60px;
    padding: 28px 0 34px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line);
  }

  .research-index li > .research-preview h3 {
    margin-top: 34px;
  }
}

@media (max-width: 700px) {
  .research-index li > .research-preview {
    margin-left: 50px;
    padding: 24px 0 30px;
  }

  .research-index li > .research-preview h3 {
    margin-top: 30px;
    font-size: 32px;
  }

  .research-index li > .research-preview .preview-diagram {
    margin: 36px 0 30px;
  }
}

/* R2 accessibility correction: micro labels remain visually secondary but must
   not become illegible simply because Genesis uses a dark institutional field. */
:root {
  --text-muted: #788490;
  --focus: #a8c7e2;
}

.rail a::before {
  color: var(--text-muted);
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.research-index button:focus-visible {
  outline-offset: -3px;
}