/* V11 page 03: a staged vertical chain, not a compressed horizontal diagram. */
:root {
  --v11-ink:#0b3036;
  --v11-paper:#f4efe4;
  --v11-gold:#e3bd6b;
  --v11-red:#8c3633;
  --v11-line:rgba(236,205,142,.55);
  --v11-enter:cubic-bezier(.16,.88,.24,1);
}

.agreement-choice-screen[data-relation-sequence] {
  height:100%;
  min-height:0!important;
  padding:101px 14px max(34px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:44px auto minmax(178px,1fr) 210px;
  gap:7px;
  overflow:hidden;
  color:#fff8e9;
}
.agreement-choice-screen[data-relation-sequence]::after {
  background:
    linear-gradient(180deg,rgba(2,20,24,.42),rgba(2,24,29,.76) 48%,rgba(2,21,26,.98)),
    linear-gradient(90deg,rgba(4,31,36,.56),transparent 72%);
}
.relation-stage-head {
  min-height:44px;
  padding:0 0 7px;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.relation-stage-head span { font-size:12px; font-weight:700; }
.relation-skip {
  min-width:88px;
  min-height:44px;
  padding:0 4px;
  border:0;
  color:rgba(255,248,233,.7);
  background:transparent;
  font-size:11px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .16s ease,opacity .2s ease;
}
.relation-skip::before { content:""; display:inline-block; width:17px; margin:0 7px 3px 0; border-top:1px solid currentColor; vertical-align:middle; }
.relation-skip:hover { color:#fff8e9; }
.relation-skip:focus-visible { outline:2px solid #fff2d2; outline-offset:2px; }
.relation-skip:disabled { opacity:0; pointer-events:none; }

.relation-prompt { padding:4px 2px 2px; }
.relation-prompt .judgement-kicker { margin-bottom:4px; font-size:12px; }
.relation-prompt h2 {
  margin:0;
  max-width:12em;
  font-family:"STSong","Songti SC",serif;
  font-size:clamp(30px,8.5vw,36px);
  line-height:1.1;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.relation-prompt h2 em::after { height:7px; background:rgba(227,189,107,.52); }

.relation-chain {
  position:relative;
  z-index:3;
  min-height:0;
  display:grid;
  grid-template-rows:auto 12px auto 12px auto minmax(0,1fr);
  align-content:center;
  padding:4px 2px 2px;
}
.relation-node {
  min-height:48px;
  display:grid;
  grid-template-columns:37px minmax(0,1fr) 50px;
  align-items:center;
  gap:9px;
  padding:8px 11px 8px 8px;
  border:1px solid rgba(255,255,255,.25);
  border-left:3px solid rgba(227,189,107,.82);
  border-radius:6px 14px 14px 6px;
  background:rgba(5,36,41,.78);
  box-shadow:0 9px 24px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(13px);
  transition:opacity .32s ease,transform .52s var(--v11-enter),border-color .2s ease;
}
.relation-node.is-visible { opacity:1; transform:none; }
.relation-index {
  color:var(--v11-gold);
  font:700 17px/1 "Times New Roman",serif;
  text-align:center;
}
.relation-node div { min-width:0; }
.relation-node small { display:block; margin-bottom:2px; color:rgba(255,248,233,.58); font-size:10px; letter-spacing:.05em; }
.relation-node b { display:block; color:#fff8e9; font-size:17px; line-height:1.18; }
.relation-node > i {
  min-height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:rgba(255,248,233,.7);
  font-size:10px;
  font-style:normal;
}
.relation-identity {
  border-color:rgba(241,203,139,.56);
  border-left-color:#f1cd83;
  background:linear-gradient(105deg,rgba(151,55,50,.96),rgba(91,37,40,.92));
  box-shadow:0 12px 30px rgba(35,5,8,.28);
}
.relation-identity .relation-index,.relation-identity small { color:#f4d598; }
.relation-identity b { font-size:18px; }
.relation-identity > i { color:#fff1d3; border-color:rgba(255,231,181,.38); }
.relation-link {
  position:relative;
  justify-self:start;
  width:2px;
  height:12px;
  margin-left:25px;
  background:rgba(227,189,107,.24);
  overflow:visible;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .3s ease;
}
.relation-link.is-visible { transform:scaleY(1); }
.relation-link::after {
  content:"";
  position:absolute;
  left:-3px;
  bottom:-1px;
  width:8px;
  height:8px;
  border-right:2px solid var(--v11-gold);
  border-bottom:2px solid var(--v11-gold);
  transform:rotate(45deg);
}
.relation-link i {
  position:absolute;
  left:-2px;
  top:-1px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f2ce86;
  box-shadow:0 0 0 4px rgba(227,189,107,.12);
  opacity:0;
}
.relation-link.is-visible i { animation:v11Flow 1.1s ease-in-out infinite; }
.relation-conclusion {
  align-self:center;
  margin:6px 0 0;
  padding:7px 0 4px 12px;
  border-left:3px solid var(--v11-gold);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .28s ease,transform .42s var(--v11-enter);
}
.relation-conclusion.is-visible { opacity:1; transform:none; }
.relation-conclusion small { display:block; margin-bottom:2px; color:var(--v11-gold); font-size:10px; font-weight:700; }
.relation-conclusion b { display:block; font-family:"STSong","Songti SC",serif; font-size:17px; line-height:1.27; }

.relation-choice-panel {
  position:relative;
  z-index:5;
  min-height:210px;
  margin:0;
  padding:9px;
  overflow:hidden;
  background:rgba(244,239,228,.98);
}
.relation-lock {
  position:absolute;
  inset:9px;
  z-index:2;
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--v11-ink);
  transition:opacity .24s ease,transform .34s var(--v11-enter);
}
.relation-lock::before {
  content:"";
  width:46px;
  height:46px;
  margin:0 auto 11px;
  border:1px solid rgba(11,48,54,.28);
  border-radius:50%;
  background:radial-gradient(circle at center,var(--v11-gold) 0 4px,transparent 5px),linear-gradient(90deg,transparent 49%,rgba(11,48,54,.25) 50%,transparent 51%);
}
.relation-lock small { margin-bottom:4px; color:#9a7440; font-size:11px; font-weight:700; }
.relation-lock b { font-size:16px; }
.relation-choice-panel .choice-grid {
  gap:7px;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .32s ease,transform .46s var(--v11-enter);
}
.relation-choice-panel .choice {
  min-height:58px;
  padding:7px 9px 7px 12px;
  border-radius:9px;
}
.relation-choice-panel .choice strong { font-size:16px; }
.relation-choice-panel .choice small { margin-top:1px; font-size:11px; }
.relation-choice-panel .choice-arrow { width:34px; height:34px; flex-basis:34px; }
.agreement-choice-screen.is-question-ready .relation-lock { opacity:0; transform:translateY(-8px); pointer-events:none; }
.agreement-choice-screen.is-question-ready .relation-choice-panel .choice-grid { opacity:1; transform:none; pointer-events:auto; }

@keyframes v11Flow { 0%{transform:translateY(0);opacity:0} 22%{opacity:1} 72%{opacity:1} 100%{transform:translateY(9px);opacity:0} }

@media (max-height:740px) {
  .agreement-choice-screen[data-relation-sequence] {
    padding-top:94px;
    grid-template-rows:40px auto minmax(166px,1fr) 184px;
    gap:5px;
  }
  .relation-stage-head { min-height:40px; }
  .relation-prompt { padding-top:1px; }
  .relation-prompt .judgement-kicker { font-size:10px; }
  .relation-prompt h2 { font-size:28px; line-height:1.06; }
  .relation-chain { grid-template-rows:auto 9px auto 9px auto minmax(0,1fr); }
  .relation-node { min-height:43px; padding-top:6px; padding-bottom:6px; }
  .relation-node b { font-size:15px; }
  .relation-identity b { font-size:16px; }
  .relation-link { height:9px; }
  .relation-conclusion { margin-top:3px; padding-top:4px; padding-bottom:2px; }
  .relation-conclusion b { font-size:15px; }
  .relation-choice-panel { min-height:184px; padding:7px; }
  .relation-choice-panel .choice-grid { gap:5px; }
  .relation-choice-panel .choice { min-height:52px; padding-top:5px; padding-bottom:5px; }
  .relation-choice-panel .choice strong { font-size:15px; }
  .relation-choice-panel .choice small { font-size:10px; }
}

@media (max-width:370px) {
  .agreement-choice-screen[data-relation-sequence] { padding-left:10px; padding-right:10px; }
  .relation-node { grid-template-columns:34px minmax(0,1fr) 46px; gap:7px; }
  .relation-node b { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .relation-node,.relation-link,.relation-conclusion,.relation-lock,.relation-choice-panel .choice-grid { transition:none!important; }
  .relation-link.is-visible i { animation:none!important; opacity:1; transform:translateY(4px); }
}