/* shared/relay.css — the relay organism (Brief 03, WD-Q67, WD-Q79), one source for all four briefs (PR #41, PR41-Q2).
   Linked by Briefs 01–04 after shared/decoration.css. The base is Brief 03's: Act 05's two-segment track with the
   handoff baton, and the one-segment .relay--solo rows of Acts 01 and 06. RUN (core/decoration.js) plays on every
   .relay; reduced motion = final frame.
   .relay--sched is the phone schedule timeline of Briefs 01, 02 and 04 (PR #40, PR40-Q1, Q3): hidden from 768,
   a single vertical segment below. Its box resets the base's (grid, margin, border) at every width; its children
   restate every property they show, and the three the base sets that they don't (the track line's right edge and
   top border, the step padding) are reset by the base's own rules below 1024, so it computes as before PR #41. */

/* Act 05 · one relay track (WD-Q67, WD-Q79): my four stages in purple, the handoff baton, four stages after it, each with one line */
.relay{display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"mine baton after";
  margin-top:clamp(1.6rem,3vw,2.4rem); border:1px solid rgba(var(--ink),.5);}
.relay__seg{padding:1.2rem 1.2rem 1.4rem;}
.relay__seg--mine{grid-area:mine;} .relay__seg--after{grid-area:after; background:var(--surface-card);}
.relay__h{font-size:.66rem; font-weight:var(--fw-semibold); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-dim);}
.relay__seg--mine .relay__h{color:var(--color-purple-light);}
.relay__track{list-style:none; position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin-top:1.1rem;}
.relay__track::before{content:""; position:absolute; left:12.5%; right:12.5%; top:17px; border-top:2px solid var(--color-brand-purple);}
.relay__seg--after .relay__track::before{border-top:2px dashed rgba(var(--ink),.4);}
.relay__st{position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:0 .35rem; text-align:center;}
.relay__node{position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-size:.74rem; font-weight:var(--fw-bold); background:var(--color-brand-purple); color:var(--color-on-brand);}
.relay__seg--after .relay__node{background:var(--color-brand-black); border:1.5px solid rgba(var(--ink),.55); color:var(--color-text-muted);}
.relay__tx{display:flex; flex-direction:column; gap:.2rem;}
.relay__t{font-size:.92rem; font-weight:var(--fw-semibold); color:var(--color-brand-white); line-height:1.25;}
.relay__x{font-size:.74rem; line-height:1.4; color:var(--color-text-muted); font-weight:var(--fw-light);}
.relay__baton{grid-area:baton; position:relative; width:2.6rem; display:grid; place-items:center;}
.relay__baton::before{content:""; position:absolute; top:0; bottom:0; left:50%; border-left:2px solid var(--color-brand-purple);}
.relay__baton span{position:relative; writing-mode:vertical-rl; transform:rotate(180deg); padding:.6rem .25rem; font-size:.6rem; font-weight:var(--fw-bold);
  letter-spacing:.16em; text-transform:uppercase; background:var(--color-brand-purple); color:var(--color-on-brand);}
/* below desktop the tracks run top to bottom */
@media (max-width:1023px){
  .relay:not(.relay--solo) .relay__track{grid-template-columns:1fr; gap:.9rem;}
  .relay:not(.relay--solo) .relay__track::before{left:17px; right:auto; top:17px; bottom:17px; border-top:0; border-left:2px solid var(--color-brand-purple);}
  .relay:not(.relay--solo) .relay__seg--after .relay__track::before{border-top:0; border-left:2px dashed rgba(var(--ink),.4);}
  .relay:not(.relay--solo) .relay__st{flex-direction:row; align-items:flex-start; text-align:left; gap:.8rem; padding:0;}
  .relay:not(.relay--solo) .relay__tx{padding-top:.4rem;}
}
@media (max-width:767px){
  .relay:not(.relay--solo){grid-template-columns:1fr; grid-template-areas:"mine" "baton" "after";}
  .relay__baton{width:auto; height:2.6rem; place-items:center start; padding-left:1.2rem;}   /* left, in line with the stage column above and below */
  .relay__baton::before{top:50%; bottom:auto; left:0; right:0; border-left:0; border-top:2px solid var(--color-brand-purple);}
  .relay__baton span{writing-mode:horizontal-tb; transform:none; padding:.25rem .6rem;}
}

/* one-segment relays (Acts 01 and 06, iteration 5): Act 05's track and border, n stages in a row from 768, a column below */
.relay--solo{grid-template-columns:1fr; grid-template-areas:none; --relay-n:4;}
.relay--5{--relay-n:5;}
.relay--solo .relay__seg{grid-area:auto;}
.relay--solo .relay__track{grid-template-columns:repeat(var(--relay-n),1fr); margin-top:0;}
.relay--solo .relay__h + .relay__track{margin-top:1.1rem;}   /* the caption sits inside the box, as Act 05's "My part" (iteration 7) */
.relay--solo .relay__track::before{left:calc(50% / var(--relay-n)); right:calc(50% / var(--relay-n));}
.relay__d{font-size:.74rem; font-weight:var(--fw-semibold); letter-spacing:.04em; color:var(--color-purple-light); line-height:1.3;}   /* dates as written: "Feb 2001" / "feb 2001" */
@media (max-width:767px){
  .relay--solo .relay__track{grid-template-columns:1fr; gap:.9rem;}
  .relay--solo .relay__track::before{left:17px; right:auto; top:17px; bottom:17px; border-top:0; border-left:2px solid var(--color-brand-purple);}
  .relay--solo .relay__seg--after .relay__track::before{border-top:0; border-left:2px dashed rgba(var(--ink),.4);}
  .relay--solo .relay__st{flex-direction:row; align-items:flex-start; text-align:left; gap:.8rem; padding:0;}
  .relay--solo .relay__tx{padding-top:.4rem;}
}

/* Act 06 live flow: static lines under each node, as in Act 05 (iteration 6); the step the review never reached keeps a dashed node */
.relay__node--out{border-style:dashed !important;}

/* ---- The phone schedule timeline (Briefs 01, 02, 04; moved from shared/brief-charts.css) ---- */
.relay.relay--sched { display: none; grid-template: none; margin-top: 0; border: 0; }   /* nothing of the base box reaches it */

@media (max-width: 767px) {
  .relay.relay--sched { display: block; margin-top: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid rgba(var(--ink), .5); }
  .relay--sched .relay__seg { padding: 1.2rem 1.2rem 1.4rem; }
  .relay--sched .relay__track { list-style: none; position: relative; display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 0; padding: 0; }
  .relay--sched .relay__track::before { content: ""; position: absolute; left: 17px; top: 17px; bottom: 17px; border-left: 2px solid var(--color-brand-purple); }
  .relay--sched .relay__st { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: .8rem; text-align: left; }
  .relay--sched .relay__node { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
    font-size: .74rem; font-weight: var(--fw-bold); background: var(--color-brand-purple); color: var(--color-on-brand); }
  .relay--sched .relay__tx { display: flex; flex-direction: column; gap: .2rem; padding-top: .4rem; }
  .relay--sched .relay__t { font-size: .92rem; font-weight: var(--fw-semibold); color: var(--color-brand-white); line-height: 1.25; }
  .relay--sched .relay__x { font-size: .74rem; line-height: 1.4; color: var(--color-text-muted); font-weight: var(--fw-light); }
}