/* Proactive IHT method walkthrough — deliberately structured as readable layers. */
.method-player {
  max-width: 1320px;
  margin: 60px auto 0;
  overflow: hidden;
  border: 1px solid #dfe1e7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 42px #2027350a;
}

.flow-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 24px;
  border-bottom: 1px solid #e4e5e9;
  background: #fbfbfc;
}

.flow-tab {
  position: relative;
  border: 0;
  background: transparent;
  padding: 17px 10px 15px;
  color: #858994;
  font: 650 .76rem var(--mono);
  text-align: left;
  cursor: pointer;
}

.flow-tab span {
  margin-right: 7px;
  color: #afb2ba;
  font-size: .65rem;
}

.flow-tab::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: transparent;
}

.flow-tab.active,
.flow-tab.active span { color: #5d3dbd; }
.flow-tab.active::after { background: #7651db; }

.method-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: stretch;
}

.flow-board {
  min-width: 0;
  padding: 28px 30px 30px;
  background: #fff;
}

.method-stage,
.evidence-gate {
  opacity: .68;
  transition: opacity .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.method-stage.is-active,
.evidence-gate.is-active {
  opacity: 1;
}

.method-stage {
  padding: 19px 20px;
  border: 1px solid #e6e7eb;
  border-radius: 14px;
  background: #fdfdfd;
}

.method-stage + .method-stage,
.method-stage + .evidence-gate,
.evidence-gate + .method-stage {
  margin-top: 12px;
}

.method-stage.is-active {
  border-color: #c7bae9;
  background: #fdfcff;
  box-shadow: 0 10px 26px #4b328f0d;
}

.stage-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.stage-heading > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #f0ecfb;
  color: #6847bf;
  font: 800 .66rem var(--mono);
}

.stage-heading b,
.stage-heading small { display: block; }
.stage-heading b { color: #30343c; font-size: .94rem; }
.stage-heading small { margin-top: 2px; color: #7a7f89; font: 500 .67rem var(--mono); }

.observe-row,
.activation-row,
.shared-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.method-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
  padding: 14px 16px;
  border: 1px solid #d8dbe2;
  border-radius: 11px;
  background: #fff;
}

.method-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #fff5e6;
  color: #ae6c12;
  font: 800 1.25rem var(--serif);
}

.auditor-card .method-icon {
  background: #f0ecfb;
  color: #6746bd;
  font-family: var(--sans);
}

.method-card small,
.method-card strong,
.method-card p { display: block; }
.method-card small { color: #7a6a52; font: 800 .58rem var(--mono); letter-spacing: .06em; }
.auditor-card small { color: #6847bf; }
.method-card strong { margin-top: 3px; color: #292d34; font-size: .88rem; }
.method-card p { margin: 3px 0 0; color: #777d87; font: 500 .64rem var(--mono); }

.clean-arrow {
  position: relative;
  width: 34px;
  min-width: 34px;
  align-self: center;
  height: 1px;
  background: #b7bcc6;
}

.clean-arrow::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  border-width: 4px 0 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #8f96a3;
}

.is-active .clean-arrow {
  background: #7651db;
  background-image: linear-gradient(90deg, transparent 0 50%, #7651db 50% 100%);
  background-size: 12px 1px;
  animation: arrowTravel .8s linear infinite;
}

.is-active .clean-arrow::after { border-left-color: #7651db; }

.route-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.route-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  min-width: 0;
  padding: 14px 13px 42px;
  border: 1px solid;
  border-radius: 11px;
  background: #fff;
}

.route-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  font-weight: 850;
}

.route-card small,
.route-card strong { display: block; }
.route-card small { font: 800 .56rem var(--mono); letter-spacing: .05em; }
.route-card strong { margin-top: 4px; color: #292d34; font-size: .88rem; }
.route-card p { margin: 4px 0 0; color: #737985; font: 500 .65rem var(--mono); line-height: 1.35; }
.route-l1 { border-color: #e6b3ba; background: #fffafa; }
.route-l1 .route-mark { background: #fce7e9; color: #b94554; }
.route-l1 small { color: #b24a58; }
.route-l2 { border-color: #e6c993; background: #fffcf6; }
.route-l2 .route-mark { background: #fff0d4; color: #a36815; }
.route-l2 small { color: #9a651b; }
.route-l3 { border-color: #c6b8e8; background: #fcfbff; }
.route-l3 .route-mark { background: #eee9fb; color: #6644bd; }
.route-l3 small { color: #6746bd; }

.route-action {
  position: absolute;
  right: 13px;
  bottom: 12px;
  left: 62px;
  font: 800 .57rem var(--mono);
  letter-spacing: .08em;
}

.route-action.ready { color: #3464bd; }
.route-action.probe { color: #6847bf; }

.activation-stage { border-color: #d9cff0; background: #fefcff; }
.compact-card {
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 13px 12px 12px 43px;
  border: 1px solid #d8cdeb;
  border-radius: 10px;
  background: #fff;
}

.compact-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 7px;
  background: #eee8fa;
  color: #6543bd;
  font: 800 .62rem var(--mono);
}

.compact-card small,
.compact-card strong { display: block; }
.compact-card small { color: #775bc0; font: 800 .55rem var(--mono); }
.compact-card strong { margin-top: 4px; color: #2d3038; font-size: .83rem; }
.compact-card p { margin: 4px 0 0; color: #737985; font: 500 .6rem var(--mono); line-height: 1.35; }
.compact-card p b { color: #565d68; }
.compact-card p i { color: #b6bac2; font-style: normal; }

.evidence-gate {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border: 1px solid #aebfe5;
  border-radius: 12px;
  background: #f7f9ff;
}

.evidence-gate.is-active {
  border-color: #4c75cc;
  box-shadow: 0 9px 23px #3762bc14;
}

.gate-icon {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #e5edff;
  color: #2f63c5;
  font: 850 .88rem var(--mono);
}

.evidence-gate small,
.evidence-gate strong { display: block; }
.evidence-gate small { color: #3a69c4; font: 800 .57rem var(--mono); letter-spacing: .07em; }
.evidence-gate strong { margin-top: 3px; color: #2d3139; font-size: .83rem; }
.gate-routes { display: flex; gap: 5px; margin-left: auto; }
.gate-routes span { padding: 4px 7px; border-radius: 999px; font: 800 .58rem var(--mono); }
.gate-l1 { background: #fce7e9; color: #b94554; }
.gate-l2 { background: #fff0d4; color: #a36815; }
.gate-l3 { background: #eee9fb; color: #6644bd; }

.shared-stage { border-color: #c9d5ee; background: #fbfcff; }
.shared-row { gap: 8px; }
.shared-row .clean-arrow { width: 21px; min-width: 21px; }
.shared-card {
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 14px 10px 12px;
  border: 1px solid #ccd7eb;
  border-radius: 10px;
  background: #fff;
}

.shared-card > span {
  display: block;
  margin-bottom: 8px;
  color: #5672ac;
  font: 800 .58rem var(--mono);
}

.shared-card small,
.shared-card strong { display: block; }
.shared-card small { color: #5672ac; font: 800 .53rem var(--mono); }
.shared-card strong { margin-top: 4px; color: #2d3038; font-size: .78rem; }
.shared-card p { margin: 4px 0 0; color: #7a808a; font: 500 .57rem var(--mono); line-height: 1.35; }

.validation-gate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "check copy promote" "check copy revise";
  align-items: center;
  gap: 0 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d3c7ef;
  border-radius: 10px;
  background: #fdfbff;
}

.validation-gate.is-active { border-color: #7651db; box-shadow: 0 8px 20px #6b49c515; }
.validation-check { grid-area: check; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: #ebe5fa; color: #6746bd; font-weight: 850; }
.validation-gate div { grid-area: copy; }
.validation-gate small,
.validation-gate strong { display: block; }
.validation-gate small { color: #6b4abe; font: 800 .55rem var(--mono); }
.validation-gate strong { margin-top: 3px; color: #2f3239; font-size: .76rem; }
.promote-label { grid-area: promote; color: #4f32a2; font: 850 .61rem var(--mono); letter-spacing: .08em; text-align: right; }
.revise-label { grid-area: revise; margin-top: 3px; color: #898e97; font: 500 .55rem var(--mono); text-align: right; }

.flow-inspector {
  display: flex;
  min-height: 720px;
  flex-direction: column;
  padding: 30px 27px;
  border-left: 1px solid #e4e5e9;
  background: #fff;
}

.flow-inspector .inspector-tag { margin: 0 0 16px; }
.flow-inspector h3 { margin: 0 0 18px; color: #252931; font-size: 1.5rem; line-height: 1.04; letter-spacing: -.05em; }
.flow-inspector blockquote { margin: 0; padding: 5px 0 5px 16px; border-left: 3px solid var(--purple); color: #454955; font-family: var(--serif); font-size: 1.02rem; line-height: 1.43; }
.flow-inspector > p:not(.inspector-tag):not(.inspector-foot) { margin: 18px 0 0; color: #69707b; font-family: var(--serif); font-size: .95rem; line-height: 1.46; }
.inspector-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }
.inspector-pills span { padding: 4px 7px; border: 1px solid #d4d8e1; border-radius: 999px; color: #59616f; font: 700 .63rem var(--mono); }
.inspector-foot { margin-top: auto !important; padding-top: 25px; color: #8a909a !important; font: 500 .7rem var(--mono) !important; }

.flow-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 22px;
  border-top: 1px solid #e4e5e9;
  background: #fcfcfd;
}

.flow-footer .loop-controls { position: static; margin: 0; }
.flow-footer .loop-controls button { font-size: .68rem; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 14px; color: #737883; font-size: .7rem; }
.flow-legend span { display: flex; align-items: center; gap: 5px; }
.flow-legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend-repair { background: #6843c8; }

@keyframes arrowTravel { to { background-position: 12px 0; } }

@media (max-width: 1120px) {
  .method-layout { grid-template-columns: 1fr; }
  .flow-inspector { min-height: 0; border-top: 1px solid #e4e5e9; border-left: 0; }
  .flow-inspector .inspector-foot { margin-top: 22px !important; }
}

@media (max-width: 760px) {
  .method-player { margin-top: 42px; }
  .flow-tabs { display: flex; overflow-x: auto; padding-inline: 10px; }
  .flow-tab { min-width: max-content; padding-inline: 12px; }
  .flow-board { padding: 18px; }
  .method-stage { padding: 16px; }
  .route-cards { grid-template-columns: 1fr; }
  .observe-row,
  .activation-row,
  .shared-row { flex-direction: column; }
  .clean-arrow { width: 1px !important; min-width: 1px !important; height: 24px; align-self: center; }
  .clean-arrow::after { top: auto; right: -4px; bottom: -1px; border-width: 7px 4px 0; border-color: #8f96a3 transparent transparent; }
  .is-active .clean-arrow { background: #7651db; animation: none; }
  .is-active .clean-arrow::after { border-top-color: #7651db; border-left-color: transparent; }
  .evidence-gate { align-items: flex-start; }
  .gate-routes { margin-left: 0; }
  .validation-gate { grid-template-columns: auto 1fr; grid-template-areas: "check copy" "promote promote" "revise revise"; }
  .promote-label,
  .revise-label { margin-top: 8px; text-align: left; }
  .flow-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .method-player { margin-inline: -10px; border-radius: 12px; }
  .flow-board { padding: 12px; }
  .stage-heading small { line-height: 1.4; }
  .evidence-gate { flex-wrap: wrap; }
  .flow-inspector { padding: 25px 22px; }
  .flow-footer { padding: 14px 17px; }
}