/* =============================================================
   crew.css — components for the crew / spectator tab.
   Requires feel-fuller-tokens.css to be loaded first.
   Declares NO raw colors, sizes, or spacing. Tokens only.

   NOTE ON flex `gap`: deliberately avoided. iOS Safari < 14.1
   ignores it and items collide. Margins are used instead.
   ============================================================= */

.crew{max-width:var(--ff-maxw);margin:0 auto;padding:var(--ff-s3) var(--ff-s2) var(--ff-s5)}
.crew section{margin-top:var(--ff-s4)}
.crew section > .ff-sub{margin-bottom:var(--ff-s2)}
.crew .ff-h1{margin:var(--ff-s1) 0}
.crew .ff-h2{margin-bottom:6px}

/* Integration reset — re-assert token text colors inside .crew so the host app's
   global element rules (h1/h2/h3/dd colored for its own theme) and its own
   .ff-eyebrow primitive can't override the inherited --ff-ink. Scoped to .crew,
   so no other tab is touched. Tokens only. */
.crew{color:var(--ff-ink)}
.crew h1,.crew h2,.crew h3,.crew .pass__name,.crew .spot__fact dd,.crew .cheer__msg{color:var(--ff-ink)}
.crew .ff-eyebrow{color:var(--ff-low)}


/* ---------- SPOT ME ------------------------------------------- */

.spot{display:flex}
.spot__shot{
  flex:0 0 88px; height:116px;
  margin-right:var(--ff-s2);
  border-radius:var(--ff-r-sm); overflow:hidden; position:relative;
  border:1px solid var(--ff-line);
  background:linear-gradient(160deg,#3a2a1e,#1a120c);
  display:flex; align-items:center; justify-content:center;
}
.spot__shot img{width:100%;height:100%;object-fit:cover}

.spot__facts{flex:1;min-width:0}
.spot__fact{display:flex;align-items:baseline}
.spot__fact + .spot__fact{margin-top:10px}
.spot__fact dt{
  flex:0 0 58px; margin-right:10px;
  font-size:var(--ff-t-cap); color:var(--ff-low);
}
.spot__fact dd{
  flex:1; min-width:0;
  font-size:var(--ff-t-sub); font-weight:500; line-height:1.35;
}
.spot__fact dd b{color:var(--ff-accent);font-weight:700}

/* Colour chip for kit items. Set --c inline per item. */
.spot__sw{
  display:inline-block; width:9px; height:9px;
  border-radius:2px; margin-right:6px;
  background:var(--c, var(--ff-low));
}


/* ---------- COURSE SPINE  (signature element) -----------------
   The vertical ombre IS the course. This is the tab's one
   ombre usage — don't add a second on this surface.            */

.spine{position:relative;padding-left:56px;margin-top:var(--ff-s2)}
.spine::before{
  content:""; position:absolute; left:21px; top:18px; bottom:34px;
  width:3px; border-radius:2px;
  background:var(--ff-ombre-v);
}

.stop{position:relative;margin-bottom:var(--ff-s3)}
.stop:last-child{margin-bottom:0}

/* node on the spine — aligned to the card's time row, not its top */
.stop::before{
  content:""; position:absolute; left:-42px; top:44px;
  width:15px; height:15px; border-radius:50%;
  background:var(--ff-bg); border:3px solid var(--ff-accent);
}
.stop--seen::before{background:var(--ff-accent)}
.stop--finish::before{
  border-color:#D62A6B; background:#D62A6B;
  box-shadow:0 0 0 5px rgba(214,42,107,.16);
}

.stop__mile{position:absolute;left:-56px;top:8px;width:44px;text-align:center}
.stop__mile b{
  display:block; font-family:var(--ff-font-num);
  font-size:var(--ff-n-md); line-height:1; color:var(--ff-ink);
}
.stop__mile span{display:block;font-size:var(--ff-t-cap);color:var(--ff-low);line-height:1.2}

.stop__card{
  background:var(--ff-card); border:1px solid var(--ff-line);
  border-radius:var(--ff-r); padding:var(--ff-s2);
  position:relative; overflow:hidden;
}
.stop__name{font-size:var(--ff-t-body);font-weight:700;letter-spacing:-.2px}
.stop__where{font-size:var(--ff-t-cap);color:var(--ff-low);margin-top:2px}

/* Label ABOVE the number. Label beside a big numeral reads as a ticker. */
.stop__when{margin-top:12px;padding-top:12px;border-top:1px solid var(--ff-line)}
.stop__when span{display:block;font-size:var(--ff-t-cap);color:var(--ff-low);margin-bottom:3px}
.stop__when b{
  display:block; font-family:var(--ff-font-num);
  font-size:var(--ff-n-lg); line-height:1; color:var(--ff-accent);
}

/* Sentences, not a label column. A caps-label column reads as a terminal. */
.stop__notes{margin-top:12px}
.stop__note{
  display:flex; font-size:var(--ff-t-cap);
  color:var(--ff-mid); line-height:var(--ff-lh-body);
}
.stop__note + .stop__note{margin-top:var(--ff-s1)}
.stop__note::before{
  content:""; flex:0 0 4px; height:4px; border-radius:50%;
  background:var(--ff-low); opacity:.7; margin:8px 11px 0 0;
}
.stop__note b{color:var(--ff-ink);font-weight:500}

.stop__who{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--ff-line)}
.avatar{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--ff-card); margin-left:-7px;
  font-size:var(--ff-t-cap); font-weight:700; color:#2a1a10;
  display:flex; align-items:center; justify-content:center;
  background:var(--c, var(--ff-low));
}
.avatar:first-child{margin-left:0}
.stop__whotext{font-size:var(--ff-t-cap);color:var(--ff-mid);margin-left:10px}
.stop__whotext i{font-style:normal;color:var(--ff-ok)}


/* ---------- CHEERS -------------------------------------------- */

.cheer{
  background:var(--ff-card); border:1px solid var(--ff-line);
  border-radius:var(--ff-r); padding:var(--ff-s2); margin-bottom:10px;
}
.cheer__top{display:flex;align-items:center;margin-bottom:10px}
.cheer__mile{
  font-family:var(--ff-font-num); font-size:15px; letter-spacing:.8px;
  color:var(--ff-accent); border:1px solid var(--ff-accent-line);
  border-radius:7px; padding:2px 8px; margin-right:10px;
}
.cheer__state{font-size:var(--ff-t-cap);color:var(--ff-low)}
.cheer__msg{font-size:var(--ff-t-sub);line-height:var(--ff-lh-loose)}
.cheer__from{font-size:var(--ff-t-cap);color:var(--ff-low);margin-top:10px}

/* Locked message: blurred, and hidden from screen readers in the markup. */
.cheer__msg--locked{filter:blur(4.5px);opacity:.5;user-select:none}

.cheer__write{
  display:flex; align-items:center; width:100%;
  border:1px dashed rgba(255,255,255,.18); border-radius:var(--ff-r);
  padding:14px var(--ff-s2);
  color:var(--ff-low); font-size:var(--ff-t-sub);
  font-family:inherit; background:none; text-align:left; cursor:pointer;
}
.cheer__write b{margin-left:auto;color:var(--ff-accent)}


/* ---------- CREW KIT ------------------------------------------ */

.kit__head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--ff-t-cap); color:var(--ff-low); margin-bottom:var(--ff-s1);
}
.kit__head em{font-style:normal;color:var(--ff-accent)}
.kit__bar{margin-bottom:var(--ff-s2)}

.kit{display:flex;flex-wrap:wrap;margin:-5px}
.kit__item{
  width:calc(50% - 10px); margin:5px;
  display:flex; align-items:center;
  background:var(--ff-card); border:1px solid var(--ff-line);
  border-radius:var(--ff-r-sm); padding:12px 11px;
  font-size:var(--ff-t-cap); color:var(--ff-ink);
  font-family:inherit; text-align:left; cursor:pointer;
}
.kit__box{
  width:16px; height:16px; flex:0 0 auto; margin-right:10px;
  border-radius:4px; border:1.5px solid var(--ff-low);
}
.kit__item[aria-pressed="true"]{color:var(--ff-low)}
.kit__item[aria-pressed="true"] .kit__box{background:var(--ff-ok);border-color:var(--ff-ok)}


/* ---------- CREW PASS ----------------------------------------- */

.pass{
  border:1px solid rgba(255,106,43,.32); border-radius:var(--ff-r);
  overflow:hidden; background:linear-gradient(150deg,#2a1c10,#170f09);
}
.pass__top{
  padding:var(--ff-s2); display:flex; align-items:center;
  justify-content:space-between;
  border-bottom:1px dashed rgba(255,255,255,.16);
}
.pass__name{font-family:var(--ff-font-num);font-size:var(--ff-n-lg);line-height:1;margin-top:4px}
.pass__no{
  flex:0 0 auto; margin-left:var(--ff-s2);
  font-family:var(--ff-font-mono); font-size:var(--ff-t-head); letter-spacing:1px;
  background:var(--ff-ombre);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pass__bot{display:flex;padding:12px var(--ff-s2);font-size:var(--ff-t-cap);color:var(--ff-low)}
.pass__bot > div{margin-right:var(--ff-s3)}
.pass__bot b{display:block;color:var(--ff-ink);font-size:var(--ff-t-sub);font-weight:500;margin-top:2px}


/* ---------- NARROW PHONES ------------------------------------- */
@media (max-width:360px){
  .kit__item{width:calc(100% - 10px)}
  .spine{padding-left:48px}
  .spine::before{left:17px}
  .stop::before{left:-38px}
  .stop__mile{left:-48px;width:38px}
}