/* Sport solutions pages (baseball, softball): the three story sections (2026-10-26).
   Run the whole camp (before / camp day / after), the Lineup Builder pitch, and email marketing.
   Stripe rules: pale #f6f9fc frames with white UI cropped at the edge and a soft wide shadow, site teal
   only, art on one frame (the Lineup Builder sweep). Every label in the drawn UI is from the shipped app. */

.bb-run,.bb-lu,.bb-mk{--ink:#0b1a24; --text:#56677a; --muted:#62707c; --edge:#e1e7ed; --teal:#007a76; --tint:#e3f4f2; --pale:#f6f9fc;}
.bb-lu{background:var(--pale); border-top:1px solid #edf1f4; border-bottom:1px solid #edf1f4;}

/* shared drawn UI */
.bb-ui{background:#fff; border-radius:12px; box-shadow:0 0 0 1px rgba(13,27,42,.06),0 30px 60px -30px rgba(13,40,60,.35),0 2px 6px rgba(13,40,60,.05);
  font-size:12.5px; color:var(--ink);}
.bb-ui i,.bb-ui em,.bb-ui u{font-style:normal; text-decoration:none;}
.bb-ui-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--edge);}
.bb-ui-h b{font-size:13.5px; font-weight:600;} .bb-ui-h i{font-size:11.5px; color:var(--muted);}
.bb-ui-h strong{color:var(--teal); font-weight:600;}
.bb-more{display:inline-flex; gap:6px; margin-top:28px; font-weight:600; font-size:15px; color:var(--teal); text-decoration:none;}
.bb-more:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---- 1. run the whole camp ---- */
.bb-stages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:48px 0 0; padding:0; list-style:none; counter-reset:st;}
.bb-st{display:flex; flex-direction:column; counter-increment:st;}
.bb-st-t{position:relative; padding-top:22px; border-top:1px solid var(--edge);}
.bb-st-t::before{content:""; position:absolute; top:-1px; left:0; width:48px; height:2px; background:var(--teal);}
.bb-k{display:block; font-size:13px; font-weight:600; color:var(--teal);}
.bb-k::before{content:"0" counter(st) "  "; white-space:pre; color:var(--muted); font-variant-numeric:tabular-nums;}
.bb-st h3{margin:8px 0 8px; font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.bb-st p{margin:0; font-size:15px; line-height:1.55; color:var(--text);}
.bb-fr{flex:1; display:flex; align-items:flex-end; margin-top:24px; min-height:270px; padding:28px 28px 0; border-radius:16px; background:var(--pale); overflow:hidden; border:1px solid #edf1f4;}
.bb-fr .bb-ui{width:100%; padding:16px 16px 18px; border-radius:12px 12px 0 0; box-shadow:0 0 0 1px rgba(13,27,42,.06),0 -10px 40px -20px rgba(13,40,60,.25);}

.bb-opt{display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 12px; border:1px solid var(--edge); border-radius:8px; font-weight:500;}
.bb-opt u{width:14px; height:14px; border-radius:50%; border:1.5px solid #c3ccd3;}
.bb-opt b{margin-left:auto; font-weight:600;}
.bb-opt.on{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal);} .bb-opt.on u{border:4px solid var(--teal);}
.bb-opt.add u{border-radius:3px;}
.bb-ver{display:block; margin-top:12px; font-size:11.5px; color:var(--teal); font-weight:600;}
.bb-ver::before{content:"\2713  "; white-space:pre;}
.bb-btn{display:block; margin-top:10px; padding:10px; border-radius:8px; background:var(--teal); color:#fff; text-align:center; font-weight:600;}

.bb-tabs{display:flex; gap:6px; margin:4px 0 6px; flex-wrap:wrap;}
.bb-tabs i{padding:4px 9px; border-radius:99px; background:var(--pale); font-size:11px; font-weight:600; color:var(--text);}
.bb-tabs i.on{background:var(--tint); color:var(--teal);}
.bb-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #eef2f5;}
.bb-row em{display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--teal); font-size:10.5px; font-weight:700;}
.bb-row > span{flex:1; min-width:0; font-weight:600;} .bb-row small{display:block; font-size:11px; font-weight:400; color:var(--muted);}
.bb-row u{padding:5px 10px; border-radius:7px; background:var(--teal); color:#fff; font-size:11.5px; font-weight:600;}
.bb-row u.done{background:var(--tint); color:var(--teal);}

.bb-after strong{display:block; margin-top:4px; font-size:26px; font-weight:400; letter-spacing:-.01em;}
.bb-bars{display:flex; align-items:flex-end; gap:6px; height:52px; margin:10px 0 12px;}
.bb-bars i{flex:1; height:var(--h); border-radius:3px 3px 0 0; background:var(--teal); opacity:.85;}
.bb-line{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid #eef2f5;}
.bb-line i{color:var(--muted);} .bb-line b{font-weight:600; color:var(--teal);}
.bb-file{display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center; padding:9px 10px; margin-top:4px; border:1px solid var(--edge); border-radius:8px; font-weight:600;}
.bb-file em{grid-row:span 2; display:grid; place-items:center; height:34px; border-radius:6px; background:var(--tint); color:var(--teal); font-size:10px; font-weight:700;}
.bb-file small{font-size:10.5px; font-weight:400; color:var(--muted);}

/* ---- 2. lineup builder ---- */
.bb-lu-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:center;}
.bb-lede{margin:18px 0 0; max-width:520px; font-size:17px; line-height:1.6; color:var(--text);}
.bb-vs{margin-top:28px; border-top:1px solid var(--edge); font-size:14px;}
.bb-vs-h,.bb-vs-r{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:20px; padding:11px 0; border-bottom:1px solid var(--edge);}
.bb-vs-h span{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.bb-vs-h span + span{color:var(--teal);}
.bb-vs-r span:first-child{color:var(--muted); text-decoration:line-through; text-decoration-color:#c3ccd3;}
.bb-vs-r span + span{color:var(--ink); font-weight:500; padding-left:22px; position:relative;}
.bb-vs-r span + span::before{content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:700;}

.bb-calc{margin-top:28px; padding:18px 20px; border-radius:14px; background:#fff; border:1px solid var(--edge);}
.bb-calc-h{margin:0 0 12px; font-size:13px; font-weight:600; color:var(--ink);}
.bb-calc-in{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.bb-calc label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted);}
.bb-calc input{width:100%; padding:9px 10px; border:1px solid var(--edge); border-radius:8px; font:500 16px/1.2 inherit; color:var(--ink); background:var(--pale); font-variant-numeric:tabular-nums;}
.bb-calc input:focus{outline:2px solid var(--teal); outline-offset:1px; background:#fff;}
.bb-calc-out{margin:14px 0 0; font-size:14.5px; line-height:1.5; color:var(--text);}
.bb-calc-out b{font-size:18px; font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums;}

.bb-lu-v{position:relative; padding:40px 0 40px 40px; border-radius:20px; overflow:hidden;
  background:var(--sweep-tr) right top/100% 100% no-repeat,#eef4f6;}
.bb-lb{margin-right:-2px; padding:0 0 0; border-radius:12px 0 0 12px; overflow:hidden;}
.bb-lb-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--edge);}
.bb-lb-h b{font-weight:600;} .bb-lb-h i{color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bb-lb-h em{margin-left:auto; flex:none; padding:4px 9px; border-radius:99px; background:var(--tint); color:var(--teal); font-size:11px; font-weight:600;}
.bb-lb table{width:100%; border-collapse:collapse; font-size:12px;}
.bb-lb th{padding:8px 4px; font-size:11px; font-weight:600; color:var(--muted); text-align:center; border-bottom:1px solid var(--edge);}
.bb-lb th:first-child,.bb-lb td:first-child{padding-left:16px; text-align:left;}
.bb-lb td{padding:6px 4px; text-align:center; color:#c3ccd3; border-bottom:1px solid #f0f3f5;}
.bb-lb td:first-child{color:var(--ink); font-weight:600; white-space:nowrap;}
.bb-lb td:first-child small{margin-left:6px; font-weight:400; font-size:10.5px; color:var(--muted);}
.bb-lb td:last-child{color:var(--text);}
.bb-lb td u{display:inline-block; min-width:28px; padding:3px 0; border-radius:5px; background:#eef3f6; color:var(--ink); font-size:11px; font-weight:600;}
.bb-lb td u.p{background:var(--tint); color:var(--teal);}
.bb-lb-f{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:var(--pale); font-size:12px;}
.bb-lb-f span{color:var(--teal); font-weight:600;} .bb-lb-f span::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--teal);}
.bb-lb-f button{padding:7px 12px; border:0; border-radius:7px; background:var(--teal); color:#fff; font:600 12px/1 inherit; cursor:default;}

/* ---- 3. email marketing ---- */
.bb-mk-in{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:center;}
.bb-mk-v{padding:40px 40px 0; border-radius:20px; background:var(--pale); border:1px solid #edf1f4; overflow:hidden;}
.bb-cmp{padding:18px 18px 0; border-radius:12px 12px 0 0;}
.bb-cmp-camp{display:block; padding:10px 12px; margin:6px 0 10px; border-radius:8px; background:var(--pale); font-weight:600;}
.bb-cmp-camp small{display:block; font-size:11px; font-weight:500; color:var(--muted);}
.bb-cmp-camp em{display:block; margin-top:3px; font-size:11.5px; font-weight:500; color:var(--teal);}
.bb-list{display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid #eef2f5;}
.bb-list u{flex:none; width:15px; height:15px; border-radius:4px; border:1.5px solid #c3ccd3;}
.bb-list.on u{background:var(--teal); border-color:var(--teal); box-shadow:inset 0 0 0 2.5px #fff;}
.bb-list > span{flex:1; font-weight:600;} .bb-list small{display:block; font-size:11px; font-weight:400; color:var(--muted);}
.bb-list b{font-weight:600; font-variant-numeric:tabular-nums;} .bb-list:not(.on) b{color:#b5c0c8;}
.bb-cmp-f{display:flex; align-items:center; justify-content:space-between; margin:4px -18px 0; padding:14px 18px; background:var(--pale); border-top:1px solid var(--edge);}
.bb-cmp-f b{color:var(--teal);} .bb-cmp-f i{padding:8px 14px; border-radius:8px; background:var(--teal); color:#fff; font-weight:600;}
.bb-steps{margin:28px 0 0; padding:0; list-style:none; counter-reset:s; border-top:1px solid var(--edge);}
.bb-steps li{position:relative; padding:14px 0 14px 40px; border-bottom:1px solid var(--edge); font-size:15px; line-height:1.55; color:var(--text); counter-increment:s;}
.bb-steps li::before{content:counter(s); position:absolute; left:0; top:14px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--tint); color:var(--teal); font-size:12px; font-weight:700;}
.bb-steps b{font-weight:600; color:var(--ink);}

/* ---- phones and tablets ---- */
@media (max-width:1000px){
  .bb-stages{grid-template-columns:1fr; gap:48px; max-width:560px;}
  .bb-lu-in,.bb-mk-in{grid-template-columns:minmax(0,1fr);}
  .bb-mk-v{order:2;}
}
@media (max-width:560px){
  .bb-fr{min-height:0; padding:20px 16px 0;}
  .bb-lu-v{padding:24px 0 24px 16px;}
  .bb-lb th:nth-child(6),.bb-lb td:nth-child(6),.bb-lb-h i{display:none;}
  .bb-mk-v{padding:24px 16px 0;}
  .bb-vs-h,.bb-vs-r{grid-template-columns:1fr; gap:4px;}
  .bb-vs-h span:first-child{display:none;}
}

/* secondary colour (Mehul 2026-10-26: one colour everywhere felt flat; sand/clay tried and swapped).
   Soft indigo: a cool neighbour to teal, so the page gets a second note without warming up or fighting
   the brand. A few surfaces only, never on product UI states (those stay teal).
   tint #f3f4fc / #e9ebf9, edge #dcdff3, indigo #4a55c4 (fills, lines), indigo text #3d47a8 (7.2:1 on tint). */
:root{
  --alt:#f3f4fc; --alt-2:#e9ebf9; --alt-edge:#dcdff3; --alt-a:#4a55c4; --alt-ink:#3d47a8;
  --sweep-alt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.4'%3E%3Cstop offset='0' stop-color='%23e9ebf9' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23aab1ea'/%3E%3Cstop offset='1' stop-color='%234a55c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M110 0H400V150C320 92 220 40 110 0Z' fill='url(%23g)'/%3E%3C/svg%3E");
}
/* the Lineup Builder band, the page's one indigo section */
.bb-lu{background:var(--alt); border-color:#e6e8f7;}
.bb-lu-v{background:var(--sweep-alt) right top/100% 100% no-repeat,var(--alt-2);}
.bb-vs,.bb-vs-h,.bb-vs-r{border-color:var(--alt-edge);}
.bb-vs-h span:first-child{color:var(--alt-ink);}
.bb-vs-r span:first-child{text-decoration-color:rgba(74,85,196,.4);}
.bb-calc{border-color:var(--alt-edge);}
.bb-calc input{background:#fbfbff; border-color:var(--alt-edge);}
/* camp day frame, so the three stages don't read as one colour */
.bb-st:nth-child(2) .bb-fr{background:var(--alt); border-color:#e6e8f7;}
.bb-st:nth-child(2) .bb-st-t::before{background:var(--alt-a);}


/* ---- recruiting (cheer, dance): same band and frame as the Lineup Builder, applicant dashboard inside.
   Labels from the shipped Recruiting screen: Applicants, No decision, Interested, Maybe, Watch, Email recruits. */
.bb-feat{margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--alt-edge);}
.bb-feat li{position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--alt-edge); font-size:15px; line-height:1.55; color:var(--text);}
.bb-feat li::before{content:"\2713"; position:absolute; left:0; top:12px; color:var(--teal); font-weight:700;}
.bb-feat b{font-weight:600; color:var(--ink);}
.bb-ap-s{display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; border-bottom:1px solid var(--edge);}
.bb-ap-s span{display:flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:8px; background:var(--pale); font-size:11.5px; color:var(--text);}
.bb-ap-s b{font-size:15px; font-weight:600; color:var(--ink);}
.bb-ap-s span.in{background:var(--tint); color:var(--teal);} .bb-ap-s span.in b{color:var(--teal);}
.bb-ap td{color:var(--text); padding-top:9px; padding-bottom:9px;}
.bb-ap td:first-child em{display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:50%; background:var(--tint); color:var(--teal); font-size:9.5px; font-weight:700; vertical-align:middle;}
.bb-ap td u{display:inline-block; min-width:0; padding:3px 8px; border-radius:99px; background:#eef3f6; color:var(--text); font-size:11px; font-weight:600;}
.bb-ap td u.w{background:none; color:var(--teal); text-decoration:underline; text-underline-offset:2px; padding:0;}
.bb-ap td u.in{background:var(--tint); color:var(--teal);}
.bb-ap td u.mb{background:var(--alt-2); color:var(--alt-ink);}
.bb-ap td u.no{background:#f4f6f8; color:var(--muted);}
@media (max-width:560px){ .bb-ap th:nth-child(3),.bb-ap td:nth-child(3){display:none;} }

/* ---- recruiting deck: four real screens that flip in turn (Mehul 2026-10-26: "multiple cards, flip them").
   Cards behind sit straight under the front one (no tilt, rejected 2026-10-26). Tabs pick a card; it also
   advances on its own while in view, pauses on hover/focus, and stays still with reduced motion. */
.bb-flip{padding-top:20px;}
.bb-ft{display:flex; gap:6px; margin:0 40px 16px 0; flex-wrap:wrap;}
.bb-ft button{padding:7px 13px; border:1px solid var(--alt-edge); border-radius:99px; background:rgba(255,255,255,.7); font:600 12.5px/1 inherit; color:var(--text); cursor:pointer;}
.bb-ft button:hover{color:var(--ink); border-color:#c9cdee;}
.bb-ft button.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.bb-ft button:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.bb-deck{position:relative; display:grid; perspective:1400px; padding-bottom:20px;}
.bb-deck::before,.bb-deck::after{content:""; position:absolute; left:20px; right:-2px; bottom:10px; height:30px; border-radius:0 0 0 12px; background:#fff; opacity:.75;
  box-shadow:0 0 0 1px rgba(13,27,42,.05),0 18px 30px -20px rgba(13,40,60,.3); z-index:0;}
.bb-deck::after{left:40px; bottom:0; opacity:.5;}
.bb-fc{grid-area:1 / 1; position:relative; z-index:1; min-height:330px; margin-right:-2px; border-radius:12px 0 0 12px; overflow:hidden;
  backface-visibility:hidden; transform-origin:50% 50%; transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s;
  opacity:0; transform:rotateY(-80deg); pointer-events:none;}
.bb-fc.on{opacity:1; transform:none; z-index:2;}
.bb-fc.out{opacity:0; transform:rotateY(80deg);}
@media (prefers-reduced-motion:reduce){ .bb-fc{transition:opacity .2s; transform:none !important;} }

/* card 2: application form */
.bb-form{padding-bottom:0;}
.bb-fs{display:flex; gap:6px; padding:12px 16px 4px;}
.bb-fs i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#eef3f6; color:var(--muted); font-size:10.5px; font-weight:700;}
.bb-fs i.d{background:var(--teal); color:#fff;} .bb-fs i.on{background:#fff; color:var(--teal); box-shadow:inset 0 0 0 1.5px var(--teal);}
.bb-ff{display:flex; gap:8px; padding:6px 16px;}
.bb-ff span{flex:1; min-width:0; padding:7px 10px; border:1px solid var(--edge); border-radius:7px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bb-ff small{display:block; font-size:10.5px; color:var(--muted); font-weight:400;}
.bb-ff em{margin-left:8px; color:var(--teal); font-size:11px; font-weight:600;}
.bb-fn{margin:6px 16px 10px; font-size:11px; color:var(--muted);}
/* card 3: applicant profile */
.bb-vid{position:relative; display:flex; align-items:flex-end; height:120px; padding:12px 16px; background:#14212b; color:#fff;}
.bb-vid i{position:absolute; left:50%; top:42%; width:38px; height:38px; margin:-19px; border-radius:50%; background:#fff;}
.bb-vid i::after{content:""; position:absolute; left:15px; top:12px; border-left:11px solid #14212b; border-top:7px solid transparent; border-bottom:7px solid transparent;}
.bb-vid span{font-size:12px; font-weight:600;} .bb-vid small{display:block; font-weight:400; color:#9fb3c0;}
.bb-pf-h{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--edge);}
.bb-pf-h em{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--tint); color:var(--teal); font-size:11px; font-weight:700;}
.bb-pf-h span{flex:1;} .bb-pf-h small{display:block; color:var(--muted); font-size:11px;}
.bb-pf-h u{padding:6px 11px; border:1px solid var(--edge); border-radius:7px; font-weight:600; font-size:11.5px;}
.bb-pf-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 16px;}
.bb-pf-g span{padding:7px 10px; border-radius:7px; background:var(--pale); font-weight:600;} .bb-pf-g small{display:block; font-size:10.5px; font-weight:400; color:var(--muted);}
.bb-pf-n{margin:0 16px; padding:8px 10px; border:1px dashed var(--edge); border-radius:7px; color:var(--text);} .bb-pf-n small{display:block; font-size:10.5px; color:var(--muted);}
.bb-pf-d{display:flex; gap:6px; padding:12px 16px 14px;}
.bb-pf-d u{padding:6px 11px; border-radius:99px; background:#eef3f6; color:var(--text); font-size:11.5px; font-weight:600;}
.bb-pf-d u.in{background:var(--teal); color:#fff;}
/* card 4: email recruits */
.bb-ml{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid #eef2f5;}
.bb-ml small{width:56px; color:var(--muted);}
.bb-ml b{margin-left:auto; font-weight:600; color:var(--teal);}
.bb-pill{padding:4px 10px; border-radius:99px; background:#eef3f6; font-size:11.5px; font-weight:600;} .bb-pill.in{background:var(--tint); color:var(--teal);}
.bb-mb{padding:14px 16px 18px;} .bb-mb i{display:block; height:7px; margin-top:9px; border-radius:4px; background:#edf1f4;} .bb-mb i.s{width:55%;}
.bb-mail .bb-lb-f span::before{display:none;} .bb-mail .bb-lb-f span{color:var(--muted); font-weight:500;}
@media (max-width:560px){ .bb-ft{margin-right:16px;} .bb-fc{min-height:310px;} }
.bb-fc{display:flex; flex-direction:column;}
.bb-fc .bb-lb-f{margin-top:auto;}
.bb-mb{flex:1;} .bb-mb i:nth-child(n){height:7px;}
.bb-deck::before,.bb-deck::after{content:none;} /* stacked card edges removed (Mehul 2026-10-26) */
.bb-deck{padding-bottom:0;}
/* Lineup Builder and recruiting screens sit straight on the band, no frame behind them (Mehul 2026-10-26) */
.bb-lu .bb-lu-v{padding:0; background:none; border-radius:0; overflow:visible;}
.bb-lu .bb-lb{margin-right:0; border-radius:12px;}
.bb-rc .bb-fc{margin-right:0; border-radius:12px;}
.bb-rc .bb-ft{margin-right:0;}

/* no frames behind any drawn screen in the story sections (Mehul 2026-10-26): run-the-camp stages and the
   email campaign now match the Lineup Builder and recruiting screens, a whole card on the page background */
.bb-st .bb-fr,.bb-st:nth-child(2) .bb-fr{min-height:0; padding:0; background:none; border:0; border-radius:0; overflow:visible; align-items:flex-start;}
.bb-fr .bb-ui{border-radius:12px; box-shadow:0 0 0 1px rgba(13,27,42,.06),0 30px 60px -30px rgba(13,40,60,.35),0 2px 6px rgba(13,40,60,.05);}
.bb-mk-v{padding:0; background:none; border:0; border-radius:0; overflow:visible;}
.bb-cmp{border-radius:12px; overflow:hidden;}
.bb-cmp-f{border-radius:0 0 12px 12px;}
@media (max-width:560px){ .bb-fr,.bb-mk-v{padding:0;} }



/* readability pass (2026-10-26): muted grey to #5f6c79 (AA on every surface here), 11px floor on labels,
   no near-invisible greys for real values */
.bb-run,.bb-lu,.bb-mk,.so-fx{--muted:#5f6c79;}
.bb-vs-r span:first-child{color:#56677a;}
.bb-lb td{color:#5f6c79;}
.bb-list:not(.on) b{color:#5f6c79;}
.bb-row em,.bb-file em,.bb-tabs i,.bb-row small,.bb-list small,.bb-cmp-camp small,.bb-file small,
.bb-lb th,.bb-lb td:first-child small,.bb-lb-h em,.bb-ap td u,.bb-ap-s span,.bb-ff small,.bb-pf-g small,
.bb-pf-n small,.bb-fn,.tk-l em,.bb-ap td:first-child em{font-size:11px;}
.bb-ver{font-size:12px;}
.bb-fs i,.bb-vid small,.bb-ml small{font-size:11px;}


/* sports with no middle story section (soccer, football, lacrosse, basketball, volleyball, track): the
   email section follows run-the-camp directly, so it takes the indigo band to keep sections alternating */
.bb-run + .bb-mk{background:var(--alt); border-top:1px solid #e6e8f7; border-bottom:1px solid #e6e8f7;}
.bb-run + .bb-mk .bb-steps,.bb-run + .bb-mk .bb-steps li{border-color:var(--alt-edge);}