/* ============================================================================
   BW_HEROES · the hero chain UI · FABLE · July 14, 2026
   NEW FILE: safe to deploy, nothing references it until Opus adds
     <link rel="stylesheet" href="fable_ui_jul14_heroes/bw_heroes.css?v=1">
   Three boxes:
     1 .bwh-strip   · "who's on this so far" · receiver/forward flow
     2 .bwh-add     · add your name + optional dept + optional # + own @name/link
     3 .bwh-locked  · the owner's locked, ordered hero list · dashboard
   Palette law: indigo #2f3150, mint #69dcb0, teal #54bcc3, ice #d7ffff, bg #f2f2f2.
   No gold, no purple. Motion under 350ms, disabled by reduced-motion.
   Data is write-once-read-free: these boxes only DISPLAY a stored array.
   ========================================================================== */

:root{
  --bw-navy:#2f3150; --bw-mint:#69dcb0; --bw-teal:#54bcc3; --bw-ice:#d7ffff;
  --bw-bg:#f2f2f2; --bw-paper:#ffffff; --bw-ink:#2c3154; --bw-muted:#6a7086;
  --bw-line:#e4e6ee; --bw-mintt:#e6faf2; --bw-cyt:#e0f7f8;
  --bw-mintd:#17805e; --bw-teald:#22757b;
}

/* ---------- shared card shell -------------------------------------------- */
.bwh-card{background:var(--bw-paper);border:1.5px solid var(--bw-line);border-radius:16px;
  padding:16px 18px;font-family:inherit;color:var(--bw-ink);max-width:640px}
.bwh-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--bw-teald);
  text-transform:uppercase;margin:0 0 4px}
.bwh-title{font-size:16.5px;font-weight:900;margin:0 0 2px;letter-spacing:-.01em}
.bwh-sub{font-size:12.5px;color:var(--bw-muted);margin:0 0 12px;line-height:1.45}

/* ---------- 1 · THE CHAIN STRIP · who's on this so far -------------------- */
/* A ladder that climbs: 1st at the bottom, latest on top, your slot above it. */
.bwh-strip{border-top:4px solid var(--bw-teal)}
.bwh-rows{display:flex;flex-direction:column-reverse;gap:0;margin:0;padding:0;list-style:none}
.bwh-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;position:relative}
.bwh-row + .bwh-row::after{ /* the rail between rungs (column-reverse: draws downward) */
  content:"";position:absolute;left:12px;top:100%;width:2px;height:14px;
  background:var(--bw-line);margin-top:-7px}
.bwh-ord{background:var(--bw-mintt);color:var(--bw-mintd);border:1.5px solid var(--bw-mint);
  border-radius:50%;width:25px;height:25px;min-width:25px;display:grid;place-items:center;
  font-size:10.5px;font-weight:900;z-index:1}
.bwh-row--you .bwh-ord{background:var(--bw-ice);border-color:var(--bw-teal);
  color:var(--bw-teald);border-style:dashed}
.bwh-who{min-width:0}
.bwh-name{font-size:13.5px;font-weight:800;line-height:1.3}
.bwh-dept{font-size:11.5px;color:var(--bw-muted);font-weight:600}
.bwh-dept::before{content:"· "}
.bwh-tags{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}
.bwh-tag{background:var(--bw-cyt);color:var(--bw-teald);border-radius:50px;
  padding:1.5px 8px;font-size:11px;font-weight:800;white-space:nowrap}
.bwh-row--you .bwh-name{color:var(--bw-teald)}
.bwh-more{background:none;border:none;color:var(--bw-teald);font-weight:800;font-size:12px;
  cursor:pointer;padding:4px 0 4px 35px;font-family:inherit;text-align:left}
.bwh-strip__empty{font-size:13px;color:var(--bw-ink);background:var(--bw-mintt);
  border-radius:10px;padding:10px 12px;font-weight:700}

/* ---------- 2 · THE ADD-YOURSELF BLOCK ------------------------------------ */
.bwh-add{border-top:4px solid var(--bw-mint)}
.bwh-field{margin:0 0 10px}
.bwh-label{display:block;font-size:11.5px;font-weight:800;color:var(--bw-ink);margin:0 0 4px}
.bwh-label small{color:var(--bw-muted);font-weight:600}
.bwh-input{width:100%;box-sizing:border-box;border:1.5px solid var(--bw-line);border-radius:10px;
  padding:9px 12px;font-size:14px;font-family:inherit;color:var(--bw-ink);background:var(--bw-paper)}
.bwh-input:focus{outline:none;border-color:var(--bw-teal)}
.bwh-pills{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.bwh-pill{border:1.5px solid var(--bw-line);background:var(--bw-paper);color:var(--bw-ink);
  border-radius:50px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.bwh-pill[aria-pressed="true"]{background:var(--bw-mintt);border-color:var(--bw-mint);color:var(--bw-mintd)}
.bwh-noemail{font-size:12px;color:var(--bw-muted);margin:10px 0 12px;line-height:1.45}
.bwh-offer{border:1.5px dashed var(--bw-line);border-radius:12px;padding:10px 12px;margin:0 0 8px}
.bwh-offer__t{font-size:12.5px;font-weight:800;margin:0 0 6px}
.bwh-offer__row{display:flex;gap:8px;flex-wrap:wrap}
.bwh-offer__row .bwh-input{flex:1;min-width:150px;width:auto}
.bwh-btn{border:none;border-radius:50px;background:var(--bw-mint);color:var(--bw-navy);
  padding:9px 18px;font-size:13px;font-weight:900;cursor:pointer;font-family:inherit}
.bwh-btn:active{transform:scale(.97)}
.bwh-btn--ghost{background:none;border:1.5px solid var(--bw-teal);color:var(--bw-teald)}
.bwh-skip{background:none;border:none;color:var(--bw-muted);font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;text-decoration:underline;padding:6px 0}
/* 2b · the moment after (post-share takeover; the offer lives here only) */
.bwh-sent{border-top:4px solid var(--bw-mint)}
.bwh-sent__top{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:900;
  margin:0 0 4px;color:var(--bw-ink)}
.bwh-sent__check{background:var(--bw-mint);color:var(--bw-navy);border-radius:50%;
  width:26px;height:26px;min-width:26px;display:grid;place-items:center;font-weight:900;
  animation:bwh-pop .35s cubic-bezier(.5,1.8,.6,1)}
@keyframes bwh-pop{from{transform:scale(0)}to{transform:scale(1)}}
.bwh-done__dash{color:var(--bw-teald);font-weight:900;text-decoration:underline;white-space:nowrap}
.bwh-friends .bwh-friend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.bwh-friends .bwh-friend .bwh-input{flex:1;min-width:150px;width:auto}
.bwh-friend__done{font-size:12.5px;font-weight:800;color:var(--bw-mintd)}
.bwh-expand{background:var(--bw-cyt);border-radius:10px;padding:10px 12px;margin-top:8px}
.bwh-expand__why{font-size:12px;color:var(--bw-teald);font-weight:700;margin:0 0 8px;line-height:1.45}
.bwh-expand__err{font-size:12px;color:#c0432a;font-weight:700;margin:6px 0 0}
.bwh-done{background:var(--bw-mintt);border:1.5px solid var(--bw-mint);border-radius:10px;
  padding:10px 12px;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--bw-mintd);line-height:1.45}
.bwh-done__check{background:var(--bw-mint);color:var(--bw-navy);border-radius:50%;width:18px;height:18px;
  display:inline-grid;place-items:center;font-size:11px;margin-right:2px}
.bwh-actbar{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:14px}
.bwh-btn--big{width:100%;text-align:center;padding:13px 18px;font-size:14.5px}

/* ---------- 2b · THE MOMENT AFTER THE SHARE ----------------------------- */
.bwh-after{border-top:4px solid var(--bw-mint)}
.bwh-after__seal{display:flex;align-items:flex-start;gap:11px;margin-bottom:6px}
.bwh-after__check{background:var(--bw-mint);color:var(--bw-navy);border-radius:50%;width:30px;height:30px;
  min-width:30px;display:grid;place-items:center;font-weight:900;font-size:15px;
  animation:bwh-pop .35s cubic-bezier(.5,1.8,.6,1)}
@keyframes bwh-pop{from{transform:scale(0)}to{transform:scale(1)}}
.bwh-after__t{font-size:15.5px;font-weight:900;margin:2px 0 1px;color:var(--bw-ink)}
.bwh-after__s{font-size:12.5px;color:var(--bw-muted);margin:0;line-height:1.45}
.bwh-stage{border-top:1.5px solid var(--bw-line);margin-top:14px;padding-top:14px}
.bwh-friends{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.bwh-friendrow{display:inline-flex}
.bwh-chip{display:inline-flex;align-items:center;border-radius:50px;padding:6px 13px;
  font-size:12.5px;font-weight:800}
.bwh-chip--pending{background:#f4f4f7;color:var(--bw-muted);animation:bwh-breathe .9s ease-in-out infinite alternate}
.bwh-chip--held{background:var(--bw-mintt);color:var(--bw-mintd);border:1.5px solid var(--bw-mint)}
@keyframes bwh-breathe{from{opacity:.55}to{opacity:1}}

/* ---------- 3 · THE LOCKED LIST · owner's dashboard ----------------------- */
.bwh-locked{border-top:4px solid var(--bw-navy)}
.bwh-locked .bwh-rows{flex-direction:column} /* dashboard reads 1st -> last, how it climbed */
.bwh-locked .bwh-row + .bwh-row::after{top:auto;bottom:100%;margin:0 0 -7px}
.bwh-lockline{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:var(--bw-muted);margin:10px 0 0;letter-spacing:.04em}
.bwh-lockline svg{flex:none}
.bwh-locked__empty{font-size:13px;color:var(--bw-muted);line-height:1.5}

@media(max-width:480px){
  .bwh-card{padding:14px;border-radius:14px}
  .bwh-tags{margin-left:0;display:flex;padding-left:35px;margin-top:2px}
  .bwh-row{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .bwh-btn:active{transform:none}
}