.ramp-model {
  --ramp-established: #315f49;
  --ramp-conditional: #8a5d17;
  --ramp-unknown: #5f6b75;
  --ramp-contradicted: #853c36;
}

.ramp-model .ramp-layout {
  max-width: 1620px;
  grid-template-columns: 190px minmax(0, 1040px) 230px;
}

.ramp-model .ramp-document {
  min-width: 0;
  padding-inline: clamp(28px, 4vw, 58px);
  overflow-wrap: anywhere;
}

.ramp-model .ramp-document > h1 {
  max-width: 980px;
  font-size: clamp(2.45rem, 5vw, 4.6rem);
  line-height: 1.02;
}

.ramp-model .ramp-document > .dek {
  max-width: 860px;
  font-size: clamp(18px, 2vw, 23px);
}

.ramp-model #decision:focus,
.ramp-model .ramp-document:focus {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.ramp-decision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-top: 5px solid var(--ramp-conditional);
  background: #fff;
}

.ramp-decision article {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--line);
}

.ramp-decision article:last-child { border-right: 0; }

.ramp-decision span,
.ramp-practitioner-grid article > span,
.reversal-grid article > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ramp-decision strong {
  display: block;
  font: 600 18px/1.4 var(--serif);
}

.ramp-decision p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ramp-state,
.confidence-state,
.evidence-state,
.gate-state,
.constraint-state,
.comparison-state {
  display: inline-block;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid currentColor;
  color: var(--ramp-unknown);
  overflow-wrap: anywhere;
  font: 700 10px/1.3 var(--mono);
  letter-spacing: .03em;
}

.ramp-state[data-state="USABLE_ACCEPTED_OUTPUT_OBSERVED"],
.confidence-state[data-state="OBSERVED_EVIDENCE"],
.evidence-state[data-state="OBSERVED"],
.gate-state[data-state="SATISFIED"],
.constraint-state[data-state="SATISFIED"],
.comparison-state[data-state="COMPARABLE"] { color: var(--ramp-established); }

.ramp-state[data-state="PHYSICALLY_REAL_DOWNSTREAM_UNCLOSED"],
.ramp-state[data-state="PLAUSIBLE_PENDING_DECISIVE_GATES"],
.confidence-state[data-state="BOUNDED_CONDITIONAL"],
.confidence-state[data-state="ANNOUNCEMENT_DEPENDENT"] { color: var(--ramp-conditional); }

.ramp-state[data-state="CLAIM_CONTRADICTED"],
.evidence-state[data-state="CONTRADICTED"],
.gate-state[data-state="CONTRADICTED"],
.constraint-state[data-state="CONTRADICTED"] { color: var(--ramp-contradicted); }

.ramp-practitioner-grid {
  margin-bottom: 26px;
}

.horizon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}

.horizon-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ramp-conditional);
  background: #fff;
}

.horizon-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--muted);
  font: 700 10px/1.4 var(--mono);
  text-transform: uppercase;
}

.horizon-card h3 {
  margin: 16px 0 8px;
  font-size: 1.2rem;
}

.horizon-card > p {
  min-height: 78px;
  color: var(--muted);
  font-size: 12px;
}

.horizon-card dl div {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.horizon-card dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.horizon-card dd {
  margin: 4px 0 0;
  font-size: 11px;
}

.ramp-ladder {
  display: grid;
  gap: 0;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.ramp-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(210px, .75fr);
  gap: 16px;
  align-items: start;
  padding: 17px 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.ramp-step > span {
  color: var(--muted);
  font: 17px var(--mono);
}

.ramp-step strong {
  font: 700 12px/1.35 var(--sans);
  letter-spacing: .04em;
}

.ramp-step p,
.ramp-step small {
  display: block;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.ramp-step > div:last-child { text-align: right; }

.ramp-ladder > .not-equal {
  margin: -1px 0;
  padding-left: 17px;
  color: var(--ramp-contradicted);
  font: 700 18px/1 var(--serif);
  z-index: 1;
}

.gate-grid,
.constraint-grid,
.reversal-grid,
.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.gate-card,
.constraint-grid article,
.reversal-grid article,
.control-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.gate-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gate-card header code,
.constraint-grid code {
  overflow-wrap: anywhere;
  font-size: 10px;
}

.gate-card h3 {
  margin: 13px 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.gate-card dl div {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.gate-card dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gate-card dd {
  margin: 3px 0 0;
  font-size: 11px;
}

.constraint-grid .constraint-state { margin-left: 8px; }
.constraint-grid p,
.control-grid p,
.control-grid small { color: var(--muted); font-size: 11px; }

.reversal-grid article > h3 {
  margin: 7px 0;
  font-size: 1rem;
}

.reversal-grid article > p { font-size: 11px; }
.reversal-grid ul { margin: 10px 0 0; padding-left: 18px; }
.reversal-grid li { margin-bottom: 7px; font-size: 11px; }

.ramp-model .reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ramp-model .reference-links a {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: #f7f9fb;
  text-decoration: none;
}

.ramp-model .reference-links code { font-size: 9px; overflow-wrap: anywhere; }

.ramp-model .source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 23px 0;
}

.ramp-model .source-record {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  background: #fff;
}

.ramp-model .source-record code,
.ramp-model .source-record h3,
.ramp-model .internal-record-label { overflow-wrap: anywhere; }

.ramp-model .source-record code { color: var(--muted); font-size: 9px; }
.ramp-model .source-record h3 { margin: 8px 0; }
.ramp-model .source-record p,
.ramp-model .internal-record-label { color: var(--muted); font-size: 11px; }

.ramp-model .internal-record-label {
  display: block;
  padding: 7px 8px;
  border-left: 3px solid var(--ramp-unknown);
  background: #f3f5f7;
}

.ramp-model .right-rail.meta .scope { font-size: 11px; }

@media (max-width: 1180px) {
  .ramp-model .ramp-layout { grid-template-columns: 170px minmax(0, 1fr); }
  .ramp-model .right-rail.meta { position: static; grid-column: 2; border-left: 0; background: #e9edf1; }
  .horizon-grid { grid-template-columns: 1fr; }
  .horizon-card > p { min-height: 0; }
}

@media (max-width: 900px) {
  .ramp-model .ramp-layout { display: block; }
  .ramp-model .model-nav { display: none; }
  .ramp-model .ramp-document { padding: 28px 18px 60px; }
  .ramp-model .ramp-document > h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .ramp-model .control-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramp-model .control-strip div { min-width: 0; border-bottom: 1px solid var(--line); }
  .ramp-model .control-strip b { overflow-wrap: anywhere; }
  .ramp-decision { grid-template-columns: 1fr; }
  .ramp-decision article { border-right: 0; border-bottom: 1px solid var(--line); }
  .ramp-decision article:last-child { border-bottom: 0; }
  .gate-grid,
  .constraint-grid,
  .reversal-grid,
  .control-grid,
  .ramp-model .source-grid { grid-template-columns: 1fr; }
  .ramp-step { grid-template-columns: 40px minmax(0, 1fr); }
  .ramp-step > div:last-child { grid-column: 2; text-align: left; }
}

@media (max-width: 520px) {
  .ramp-model .ramp-document { padding-inline: 18px; }
  .ramp-model .ramp-document > h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ramp-step { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding-inline: 12px; }
  .gate-card header { display: block; }
  .gate-card header .gate-state { margin-top: 8px; }
}