/* CHAIN — chain of custody, with the questions that interrogate each link. */

.chn{display:grid;gap:0;padding:clamp(1.1rem,2.6vw,2rem);--tone:var(--text-2)}

/* ------------------------------------------------------------- the chain */
.chn__flow{
  display:grid;gap:.55rem .95rem;
  grid-template-columns:minmax(0,1fr) minmax(3rem,4.5rem) minmax(0,1fr) minmax(9rem,13rem) minmax(0,1fr);
  grid-template-rows:1fr auto 1fr auto;
  grid-template-areas:
    "est c1 ven badge goo"
    "est c1 ven c2    goo"
    "est c1 ven aud   goo"
    "rail rail rail rail rail";
}
.chn__node.is-est{grid-area:est}
.chn__node.is-ven{grid-area:ven}
.chn__node.is-goo{grid-area:goo}
.chn__c1{grid-area:c1}
.chn__c2{grid-area:c2}
.chn__badges{grid-area:badge;align-self:end}
.chn__slot{grid-area:aud;align-self:stretch}
.chn__rail{grid-area:rail}
.chn__node,.chn__c1,.chn__c2{align-self:center}

/* connectors: drawn, because the fonts carry no arrow glyph */
.chn__conn{display:grid;place-items:center;color:var(--line-2)}
.chn__arw{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chn__arw--h{width:100%;max-width:4.5rem;height:1.5rem}
.chn__arw--v{display:none;width:1.5rem;height:2.4rem}

.chn__node{
  display:grid;gap:.28rem;align-content:start;min-width:0;
  padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);
  transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.chn__node-k{font-size:.6rem;color:var(--text-4)}
.chn__node-t{font-family:var(--mono);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--text)}
.chn__node-d{font-size:.76rem;line-height:1.45;color:var(--text-3)}
.chn__node-tag{
  justify-self:start;margin-top:.2rem;padding:.16rem .38rem;border-radius:2px;
  border:1px dashed var(--slate);color:var(--slate);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;
}

/* an unnamed party is drawn as unnamed: hollow, dashed, no fill */
.chn__node.is-ven{background:transparent;border-style:dashed;border-color:var(--slate)}
.chn__node.is-ven .chn__node-t{color:var(--slate)}
.chn__node.is-goo{border-color:var(--cyan-deep);background:linear-gradient(180deg,rgba(90,210,255,.07),transparent)}
.chn__node.is-goo .chn__node-t{color:var(--cyan)}

/* the check that is not in the filing: an empty slot, not a filled box */
.chn__slot{
  display:grid;gap:.22rem;align-content:center;padding:.6rem .7rem;
  border:1px dashed var(--slate);border-radius:var(--radius);
  background-image:repeating-linear-gradient(45deg,rgba(138,147,165,.07) 0 3px,transparent 3px 8px);
  transition:box-shadow var(--dur-2) var(--ease);
}
.chn__slot-k{font-size:.55rem;color:var(--text-4)}
.chn__slot-t{font-family:var(--mono);font-size:.6rem;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}

/* the two named standards, stamped on the handoff they govern */
.chn__badges{display:grid;gap:.32rem}
.chn__badge{
  display:grid;gap:.12rem;padding:.45rem .55rem;border-radius:2px;
  border:1px solid var(--text-3);box-shadow:inset 0 0 0 3px var(--surface);
  background:var(--surface-3);transform:rotate(-1.3deg);
  transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.chn__badge:last-child{transform:rotate(1deg)}
.chn__badge b{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.chn__badge span{font-size:.6rem;line-height:1.35;color:var(--text-3)}

/* the requirement that runs the length of the chain */
.chn__rail{
  position:relative;margin-top:.7rem;padding-top:.45rem;border-top:1px dashed var(--red);
  opacity:.6;transition:opacity var(--dur-2) var(--ease);
}
.chn__rail::before,.chn__rail::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--red)}
.chn__rail::before{left:0}
.chn__rail::after{right:0}
.chn__rail-l{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red);line-height:1.4}

/* highlight: the party that answers the selected question */
.chn__node.is-hot,.chn__slot.is-hot{box-shadow:0 0 0 1px var(--tone),0 0 22px -8px var(--tone);border-color:var(--tone)}
.chn__badges.is-hot .chn__badge{border-color:var(--tone);box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1px var(--tone)}
.chn__rail.is-hot{opacity:1}
.chn__rail.is-hot::before,.chn__rail.is-hot::after{height:13px;top:-6px}

/* ------------------------------------------------ questions and answer */
.chn__body{
  display:grid;gap:clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  margin-top:clamp(1.3rem,2.8vw,2rem);padding-top:clamp(1.1rem,2.4vw,1.6rem);
  border-top:1px solid var(--line);
}
.chn__col{display:grid;gap:.75rem;align-content:start;min-width:0}
.chn__hd{color:var(--text-4)}

.chn__qs{display:grid;gap:.2rem}
.chn__q{
  display:grid;align-items:center;gap:.6rem;grid-template-columns:1.4rem .55rem minmax(0,1fr);
  text-align:left;min-height:40px;padding:.44rem .6rem;border-radius:var(--radius);
  border:1px solid transparent;border-left:2px solid transparent;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.chn__q:hover{background:var(--surface-2)}
.chn__q.is-on{background:var(--surface-2);border-color:var(--line);border-left-color:var(--tone)}
.chn__q-n{font-size:.6rem;color:var(--text-4)}
.chn__q-t{font-size:.85rem;line-height:1.35;color:var(--text-2)}
.chn__q.is-on .chn__q-t{color:var(--text)}

.chn__dot{
  width:.55rem;height:.55rem;border-radius:100px;flex:none;font-style:normal;display:block;
  background:var(--tone);
}
.chn__q[data-tone="gap"] .chn__dot,
.chn__key span[data-tone="gap"] .chn__dot,
.chn[data-tone="gap"] .chn__ans-t .chn__dot{background:transparent;border:1px dashed var(--slate)}
.chn__q[data-tone="ok"] .chn__dot,
.chn__key span[data-tone="ok"] .chn__dot,
.chn[data-tone="ok"] .chn__ans-t .chn__dot{background:transparent;box-shadow:inset 0 0 0 1px var(--text-3)}

.chn__key{margin-top:.35rem;gap:.4rem 1.1rem;font-size:.64rem}
.chn__key span{align-items:center}
.chn__key i.chn__dot{width:.55rem;height:.55rem;border-radius:100px}

.chn__ans{align-self:start;position:sticky;top:1.2rem;
  display:flex;flex-direction:column;gap:.5rem;min-width:0;
  padding:clamp(.95rem,2vw,1.35rem);border:1px solid var(--line);border-left:2px solid var(--tone);
  border-radius:var(--radius);background:var(--surface-2);min-height:12rem;
}
/* the tone strip is pinned to the foot of the pane, so the panel reads as a
   finished card at any answer length rather than a half-filled box */
.chn__ans-t{margin-top:auto}
.chn__ans-c{margin-left:auto}
.chn__ans-k{color:var(--text-4);font-size:.58rem}
.chn__ans-who{font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--tone);line-height:1.35}
.chn__ans-q{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-4);line-height:1.5;padding-top:.35rem;
}
.chn__ans-a{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,1.65rem);line-height:1.28;color:var(--text)}
.chn__ans.is-long .chn__ans-a{font-size:clamp(1.02rem,1.8vw,1.2rem);line-height:1.4}
.chn__ans-t{
  display:flex;align-items:center;gap:.55rem;padding-top:.75rem;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}

/* ------------------- narrow: the chain stands up, columns stack ---------- */
@media (max-width:860px){
  .chn__flow{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-template-areas:"est" "c1" "ven" "aud" "badge" "c2" "goo" "rail";
    gap:.3rem;justify-items:stretch;
  }
  .chn__badges,.chn__slot{align-self:auto;justify-self:stretch}
  .chn__slot{padding-block:.7rem}
  .chn__badges{grid-template-columns:1fr 1fr;gap:.35rem;margin-block:.35rem}
  .chn__arw--h{display:none}
  .chn__arw--v{display:block}
  .chn__body{grid-template-columns:minmax(0,1fr)}
  .chn__ans{align-self:start;position:static;min-height:0;order:-1}
  .chn__ans-t{margin-top:.3rem}
  .chn__rail{margin-top:.85rem}
}
@media (max-width:480px){
  .chn__badges{grid-template-columns:1fr}
  .chn__q{grid-template-columns:1.3rem .55rem minmax(0,1fr);gap:.5rem;padding:.5rem .45rem}
  .chn__q-t{font-size:.82rem}
  .chn__key{font-size:.62rem}
}