/* Multiscale Biological State Machine — explanatory, interactive and bounded. */

.state-machine-masthead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 20%, rgba(112, 155, 232, .38), transparent 26%),
    radial-gradient(circle at 71% 86%, rgba(82, 183, 176, .2), transparent 35%),
    linear-gradient(132deg, #0a2238, #173e66 58%, #226d78);
}

.state-machine-masthead::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -170px;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.026), 0 0 0 96px rgba(255,255,255,.016);
  pointer-events: none;
}

.state-section {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.observe-section { background: #f7fafc; }
.state-section-heading { display: grid; gap: 5px; }
.state-section-heading p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

.state-controls { display: grid; gap: 12px; }
.state-control { display: grid; gap: 7px; }
.state-control label { display: flex; justify-content: space-between; gap: 12px; color: #405b6d; font-size: .78rem; font-weight: 760; }
.state-control input { width: 100%; accent-color: #1763d6; }

.state-vector,
.state-flow,
.scale-lanes,
.attractor-grid,
.evidence-state-row,
.state-choice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.state-node,
.state-value,
.scale-lane,
.attractor-well,
.evidence-state,
.state-choice-row button {
  padding: 9px 11px;
  border: 1px solid #cbd6dc;
  border-radius: 9px;
  background: #fff;
  color: #486273;
  font-size: .76rem;
  font-weight: 760;
}

.state-node.active,
.state-choice-row button.active { border-color: #1763d6; background: #1763d6; color: #fff; }
.state-arrow { color: #879aa8; font-weight: 850; }
.state-value strong { display: block; color: #10283d; font-family: Georgia, serif; font-size: 1.25rem; }
.state-value span { display: block; margin-top: 3px; font-size: .68rem; }

.state-choice-row button { cursor: pointer; }
.state-choice-row button:hover,
.state-choice-row button:focus-visible { border-color: #1763d6; outline: 3px solid rgba(23,99,214,.12); outline-offset: 2px; }

.state-output {
  padding: 15px;
  border-left: 4px solid #52b7b0;
  border-radius: 8px;
  background: #edf8f5;
}
.state-output strong { display: block; color: #103d42; }
.state-output p { margin: 5px 0 0; color: #4d6a72; font-size: .82rem; line-height: 1.52; }

.state-trace { padding: 14px; border-radius: 10px; background: #0d2235; }
.state-trace svg { width: 100%; height: 170px; }
.state-trace polyline { fill: none; stroke: #66d1c6; stroke-width: 4; vector-effect: non-scaling-stroke; }
.state-trace .trace-reference { stroke: #8297e8; stroke-dasharray: 8 7; }
.trace-labels { display: flex; justify-content: space-between; margin-top: 7px; color: #b8cad5; font-size: .68rem; }

.attractor-grid { align-items: stretch; }
.attractor-well { flex: 1 1 120px; min-height: 100px; display: grid; place-items: center; text-align: center; }
.attractor-well.active { border-color: #52b7b0; background: #edf8f5; color: #205d56; }

.scale-lane { flex: 1 1 125px; min-height: 82px; display: grid; place-items: center; text-align: center; }
.scale-lane.active { border-color: #1763d6; background: #eef4fd; color: #123c75; }

.evidence-state.observed { border-color: #52b7b0; background: #edf8f5; color: #205d56; }
.evidence-state.inferred { border-color: #8297e8; background: #f0f3fd; color: #405394; }
.evidence-state.proposed { border-color: #d9a05e; background: #fff7ea; color: #7f5728; }

.inspect-list { display: grid; gap: 10px; margin: 12px 0 0; }
.inspect-list div { padding-top: 9px; border-top: 1px solid var(--line); }
.inspect-list dt { color: #1763d6; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.inspect-list dd { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.inspect-list a {
  color: #1763d6;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.inspect-list a:hover,
.inspect-list a:focus-visible { color: #0d4fab; }

.capstone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.capstone-card { padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.capstone-card strong { color: #10283d; font-size: .82rem; }
.capstone-card p { margin: 5px 0 0; color: #607583; font-size: .74rem; line-height: 1.45; }


.alc1-condition-row { margin-top: 4px; }

.alc1-control-label {
  margin: 12px 0 6px;
  color: #607583;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.alc1-tool-row button { border-style: dashed; }
.alc1-tool-row button.active { border-style: solid; }

.alc1-state-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.alc1-inspect-prompt {
  margin: 0 0 10px;
  color: #607583;
  font-size: .76rem;
  line-height: 1.45;
}

.alc1-inspect-prompt strong { color: #10283d; }

.alc1-state-step {
  width: 100%;
  min-height: 104px;
  padding: 11px;
  border: 1px solid #cbd6dc;
  border-radius: 9px;
  background: #fff;
  color: #607583;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.alc1-state-step > span,
.alc1-state-step > em,
.alc1-state-step > strong,
.alc1-state-step > small { display: block; }

.alc1-state-step > span {
  margin-bottom: 12px;
  color: #879aa8;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
}


.alc1-state-step > em {
  margin-bottom: 5px;
  color: #1763d6;
  font-size: .58rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
}

.alc1-state-step > strong {
  color: #405b6d;
  font-size: .76rem;
  line-height: 1.3;
}

.alc1-state-step > small {
  margin-top: 8px;
  color: #879aa8;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .04em;
}

.alc1-state-step:hover {
  border-color: #8297e8;
  box-shadow: 0 0 0 3px rgba(130,151,232,.12);
}

.alc1-state-step:focus-visible {
  outline: 3px solid rgba(23,99,214,.3);
  outline-offset: 2px;
}

.alc1-state-step.active {
  border-color: #1763d6;
  background: #eef4fd;
}

.alc1-state-step.active > span,
.alc1-state-step.active > strong { color: #123c75; }

.alc1-state-step.selected {
  border-color: #1763d6;
  box-shadow: inset 0 0 0 2px #1763d6;
}

.alc1-state-step.selected::after {
  content: "SELECTED";
  display: inline-block;
  margin-top: 9px;
  color: #1763d6;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .08em;
}


.alc1-coupling-map {
  display: grid;
  gap: 10px;
}

.alc1-coupling-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-left: 4px solid #8297e8;
  background: #f0f3fd;
  color: #405394;
}

.alc1-coupling-label strong {
  font-size: .67rem;
  letter-spacing: .08em;
}

.alc1-coupling-label span {
  color: #607583;
  font-size: .68rem;
}

.alc1-coupled-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px dashed #8297e8;
  border-radius: 10px;
  background: #f8f9fe;
}

.alc1-downstream-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.alc1-state-inspector {
  display: grid;
  grid-template-columns: minmax(0, .85fr) repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #b9c9d4;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.alc1-state-inspector > div {
  min-width: 0;
  padding: 12px 14px;
}

.alc1-state-inspector > div + div { border-left: 1px solid #d8e0e5; }

.alc1-state-inspector span {
  display: block;
  margin-bottom: 6px;
  color: #1763d6;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.alc1-state-inspector strong {
  display: block;
  color: #10283d;
  font-size: .79rem;
  line-height: 1.35;
}

.alc1-state-inspector small,
.alc1-state-inspector p {
  display: block;
  margin: 5px 0 0;
  color: #607583;
  font-size: .69rem;
  line-height: 1.45;
}

.alc1-mesoscale-field {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  border: 1px solid #cbd6dc;
  border-radius: 10px;
  background: #f7fafc;
}

.alc1-mesoscale-field span {
  min-height: 22px;
  border-radius: 6px;
  background: #e4eaee;
  transition: background-color .18s ease, transform .18s ease;
}

.alc1-mesoscale-field span.active {
  background: linear-gradient(135deg, #8297e8, #52b7b0);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .alc1-mesoscale-field span { transition: none; }
}

.alc1-evidence-row { margin-top: 10px; }

@media (max-width: 900px) {
  .alc1-state-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alc1-downstream-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alc1-state-inspector { grid-template-columns: 1fr; }
  .alc1-state-inspector > div + div { border-top: 1px solid #d8e0e5; border-left: 0; }
  .alc1-coupling-label { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 650px) {
  .capstone-grid,
  .alc1-state-path,
  .alc1-coupled-branches,
  .alc1-downstream-path { grid-template-columns: 1fr; }
}