/* BowlsSelect V3 branded transition + wizard shell — 2026-09-27
   Presentation only. No selection, save, sync, roster or BowlsLink behaviour is changed. */
:root{
  --bs-v3-backdrop:url('/app/assets/bowlsselect-branded-backdrop-20260926.webp');
  --bs-v3-panel:rgba(5,27,49,.96);
  --bs-v3-panel-soft:rgba(9,38,64,.90);
  --bs-v3-line:rgba(111,166,211,.44);
  --bs-v3-text:#f3f7fb;
  --bs-v3-muted:#b9c9d8;
  --bs-v3-blue:#4d9bea;
}

/*
   WIZARD SHELL
   Two selectors are intentionally carried in parallel:
   1) the JS-added class used by the signed-in and public flows; and
   2) :has() as a presentation-only fallback if the fixed V2 modal shell changes
      content without the class hook firing.
   This prevents the live application showing through behind setup screens.
*/
html body #modalBack.bs-branded-wizard-backdrop,
html body #modalBack:has(#modal.prototype-modal){
  position:fixed!important;
  inset:0!important;
  z-index:2000!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  overflow:auto!important;
  background-color:#061a2d!important;
  background-image:linear-gradient(90deg,rgba(3,19,38,.58),rgba(3,24,48,.30)),var(--bs-v3-backdrop)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body #modalBack.bs-branded-wizard-backdrop #modal.prototype-modal,
html body #modalBack:has(#modal.prototype-modal) #modal.prototype-modal{
  box-sizing:border-box!important;
  width:min(1060px,calc(100vw - 48px))!important;
  max-width:1060px!important;
  max-height:calc(100dvh - 48px)!important;
  overflow:auto!important;
  padding:30px 34px!important;
  margin:0!important;
  background:linear-gradient(145deg,rgba(8,31,53,.98),rgba(5,26,48,.96))!important;
  color:var(--bs-v3-text)!important;
  border:1px solid var(--bs-v3-line)!important;
  border-top:3px solid #78add5!important;
  border-radius:18px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.50)!important;
}

html body #modalBack.bs-board-preview-step #modal.prototype-modal,
html body #modalBack:has(#modal .proto-board) #modal.prototype-modal{
  width:min(1320px,calc(100vw - 48px))!important;
  max-width:1320px!important;
}

html body #modalBack.bs-competition-list-step #modal.prototype-modal,
html body #modalBack:has(#modal .competition-list) #modal.prototype-modal{
  width:min(1080px,calc(100vw - 48px))!important;
  max-width:1080px!important;
}

/* Shared wizard hierarchy. */
#modalBack .prototype-modal .proto{display:grid!important;gap:18px!important;min-width:0!important}
#modalBack .prototype-modal .proto-head{display:flex!important;align-items:flex-start!important;gap:16px!important;padding:4px 0 18px!important;border-bottom:1px solid rgba(135,173,205,.28)!important}
#modalBack .prototype-modal .proto-head>div{flex:1!important;min-width:0!important}
#modalBack .prototype-modal .proto-head h2{margin:4px 0 8px!important;font-size:30px!important;line-height:1.08!important;letter-spacing:-.5px!important;color:var(--bs-v3-text)!important}
#modalBack .prototype-modal .proto-head p:not(.eyebrow){margin:0!important;color:var(--bs-v3-muted)!important}
#modalBack .prototype-modal .eyebrow{color:#a9d1f2!important}
#modalBack .prototype-modal .proto-badge{flex:0 0 auto!important;background:rgba(14,47,76,.86)!important;border:1px solid rgba(113,167,210,.43)!important;color:#e6f2fb!important}
#modalBack .prototype-modal .proto-steps{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
#modalBack .prototype-modal .proto-steps span{display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:7px 12px!important;border-radius:999px!important;background:rgba(64,87,110,.48)!important;color:#becbd8!important;border:1px solid rgba(133,161,188,.16)!important;font-size:11px!important;font-weight:900!important;white-space:nowrap!important}
#modalBack .prototype-modal .proto-steps span.on,
#modalBack .prototype-modal .proto-steps span.active{background:#397bb6!important;color:#fff!important;border-color:#4f93cf!important}
#modalBack .prototype-modal .proto-callout,
#modalBack .prototype-modal .proto-status,
#modalBack .prototype-modal .owner-panel{background:rgba(11,39,64,.82)!important;color:#c8d7e4!important;border:1px solid rgba(85,135,176,.42)!important}
#modalBack .prototype-modal .proto-callout strong,
#modalBack .prototype-modal .proto-pool strong{color:#fff!important}
#modalBack .prototype-modal .proto-status{padding:14px 16px!important;border-radius:12px!important;line-height:1.45!important}

#modalBack .prototype-modal .proto-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#modalBack .prototype-modal .proto-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#modalBack .prototype-modal .proto-grid label,
#modalBack .prototype-modal .owner-grid label,
#modalBack .prototype-modal .structure-row label{color:#d7e3ed!important}
#modalBack .prototype-modal .proto-grid input,
#modalBack .prototype-modal .proto-grid select,
#modalBack .prototype-modal .owner-grid input,
#modalBack .prototype-modal .structure-row input,
#modalBack .prototype-modal .structure-row select{width:100%!important;min-width:0!important;min-height:46px!important;background:rgba(10,35,58,.92)!important;color:#f5f8fb!important;border-color:rgba(111,150,184,.54)!important}

/*
   EXISTING-COMPETITION RESULTS
   Deliberately resets layout/positioning so inherited app rules cannot collapse
   checkbox, title, metadata and CURRENT into the same line.
*/
#modalBack .prototype-modal .competition-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
  max-height:390px!important;
  overflow:auto!important;
  padding:2px 5px 2px 1px!important;
  margin:0!important;
}
#modalBack .prototype-modal .competition-item{
  position:relative!important;
  float:none!important;
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) auto!important;
  gap:13px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:70px!important;
  padding:13px 15px!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(90,132,166,.48)!important;
  border-radius:12px!important;
  background:rgba(10,34,56,.90)!important;
  color:#f3f7fb!important;
  cursor:pointer!important;
}
#modalBack .prototype-modal .competition-item:hover{border-color:#63a8e3!important;background:rgba(16,51,81,.96)!important}
#modalBack .prototype-modal .competition-item>input{
  position:static!important;
  float:none!important;
  display:block!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:0!important;
  padding:0!important;
  accent-color:#4d9bea!important;
}
#modalBack .prototype-modal .competition-item>span{
  position:static!important;
  float:none!important;
  transform:none!important;
  min-width:0!important;
  margin:0!important;
}
#modalBack .prototype-modal .competition-item>span:nth-child(2){display:block!important}
#modalBack .prototype-modal .competition-item strong{
  position:static!important;
  display:block!important;
  margin:0!important;
  color:#f6f9fc!important;
  font-size:15px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#modalBack .prototype-modal .competition-item small{
  position:static!important;
  display:block!important;
  margin:5px 0 0!important;
  color:#aebfd0!important;
  font-size:12px!important;
  line-height:1.4!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#modalBack .prototype-modal .competition-item .source{
  position:static!important;
  float:none!important;
  align-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:72px!important;
  min-height:28px!important;
  padding:5px 9px!important;
  margin:0!important;
  border:1px solid rgba(101,153,195,.40)!important;
  border-radius:999px!important;
  background:rgba(36,80,116,.58)!important;
  color:#d8e8f6!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.45px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Structure editor. */
#modalBack .prototype-modal .structure-list{display:grid!important;gap:10px!important}
#modalBack .prototype-modal .structure-row{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) 110px 96px!important;
  gap:10px!important;
  align-items:end!important;
  padding:12px!important;
  background:rgba(10,34,56,.88)!important;
  border:1px solid rgba(90,132,166,.46)!important;
  border-radius:12px!important;
}
#modalBack .prototype-modal .structure-row:has(label:nth-of-type(3)){grid-template-columns:minmax(220px,1fr) 110px 120px 44px!important}

/*
   BOARD PREVIEW
   Two columns are intentional in the signed-in wizard. The existing promotion /
   relegation controls require more room than the public first-onboarding preview.
*/
#modalBack .prototype-modal .proto-board{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 250px!important;
  gap:18px!important;
  align-items:start!important;
  min-width:0!important;
}
#modalBack .prototype-modal .proto-divisions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:start!important;
  min-width:0!important;
}
#modalBack .prototype-modal .proto-division{
  min-width:0!important;
  overflow:hidden!important;
  background:rgba(8,31,51,.90)!important;
  border:1px solid rgba(90,132,166,.48)!important;
  border-radius:12px!important;
}
#modalBack .prototype-modal .proto-div-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  min-height:58px!important;
  padding:10px 12px!important;
  background:#062744!important;
  color:#fff!important;
}
#modalBack .prototype-modal .proto-div-title{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:9px!important;
  align-items:center!important;
  min-width:0!important;
}
#modalBack .prototype-modal .proto-div-title strong{display:block!important;min-width:0!important;font-size:16px!important;line-height:1.2!important;overflow-wrap:anywhere!important}
#modalBack .prototype-modal .proto-div-head>small{display:block!important;color:#c1cfdb!important;font-size:10px!important;line-height:1.2!important;white-space:nowrap!important;text-align:right!important}
#modalBack .prototype-modal .proto-shift-controls{display:inline-flex!important;gap:6px!important;flex:0 0 auto!important}
#modalBack .prototype-modal .proto-shift{position:static!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;margin:0!important;border-radius:8px!important;font-size:16px!important;line-height:1!important;display:grid!important;place-items:center!important}
#modalBack .prototype-modal .proto-shift-up{background:#174b36!important;color:#a5f0c5!important;border-color:#4f9f73!important}
#modalBack .prototype-modal .proto-shift-down{background:#5a2630!important;color:#ffc5ce!important;border-color:#a9606b!important}
#modalBack .prototype-modal .proto-rink{display:grid!important;grid-template-columns:38px repeat(4,minmax(0,1fr))!important;min-width:0!important;border-bottom:1px solid rgba(93,128,158,.40)!important}
#modalBack .prototype-modal .proto-rink:last-child{border-bottom:0!important}
#modalBack .prototype-modal .proto-rink>span{display:grid!important;place-items:center!important;background:rgba(13,42,65,.94)!important;color:#d6e2ec!important;font-size:10px!important;font-weight:900!important}
#modalBack .prototype-modal .proto-slot{min-width:0!important;min-height:56px!important;padding:7px 5px!important;border-left:1px solid rgba(93,128,158,.40)!important;display:grid!important;align-content:center!important;gap:4px!important;text-align:center!important;color:#9db1c2!important}
#modalBack .prototype-modal .proto-slot small{display:block!important;color:#c9d8e4!important;font-size:8px!important;line-height:1.05!important;white-space:nowrap!important}
#modalBack .prototype-modal .proto-slot em{display:block!important;color:#8fa5b7!important;font-size:10px!important;line-height:1.2!important;font-style:normal!important}
#modalBack .prototype-modal .proto-pool{position:static!important;min-width:0!important;padding:16px!important;background:rgba(10,34,56,.88)!important;border:1px solid rgba(90,132,166,.48)!important;border-radius:12px!important}
#modalBack .prototype-modal .proto-pool p{color:var(--bs-v3-muted)!important;line-height:1.5!important}
#modalBack .prototype-modal .proto-empty{margin-top:13px!important;padding:24px 8px!important;border:1px dashed rgba(110,151,185,.56)!important;border-radius:10px!important;color:#9db1c2!important;text-align:center!important}

#modalBack .prototype-modal .btn{background:rgba(11,36,58,.92)!important;color:#e5edf5!important;border-color:rgba(91,133,168,.54)!important}
#modalBack .prototype-modal .btn:hover:not(:disabled){background:rgba(20,55,84,.98)!important}
#modalBack .prototype-modal .btn.primary{background:#2f83d4!important;border-color:#4597e6!important;color:#fff!important}
#modalBack .prototype-modal .btn.primary:hover:not(:disabled){background:#3c90df!important}

/*
   STARTUP / WORKING STATES
   These ID-heavy selectors intentionally outrank the later inherited V2 green
   !important rules without editing the protected Golden runtime itself.
*/
html body #boot.boot:not(.hidden),
html body #boot:not(.hidden),
html body .bs-work-overlay,
html body .bs-rankpipe-overlay{
  background:#061a2d linear-gradient(90deg,rgba(3,19,38,.54),rgba(3,25,49,.25)) center/cover no-repeat!important;
  background-image:linear-gradient(90deg,rgba(3,19,38,.54),rgba(3,25,49,.25)),var(--bs-v3-backdrop)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#fff!important;
}
html body #boot .bs-boot-card,
html body #boot .bs-work-card,
html body .bs-work-overlay .bs-work-card,
html body .bs-rankpipe-overlay .bs-rankpipe-card{
  background:linear-gradient(145deg,rgba(7,31,53,.97),rgba(4,25,47,.95))!important;
  border:1px solid rgba(111,166,211,.42)!important;
  color:#fff!important;
  box-shadow:0 28px 85px rgba(0,0,0,.46)!important;
}
html body #boot .bs-work-card strong,
html body #boot .bs-boot-card strong,
html body .bs-work-overlay .bs-work-card strong{color:#fff!important}
html body #boot .bs-work-card small,
html body .bs-work-overlay .bs-work-card small,
html body .bs-rankpipe-overlay .bs-rankpipe-status,
html body .bs-rankpipe-overlay .bs-rankpipe-meta{color:#c8d8e5!important}
html body #boot .bs-work-pulse,
html body .bs-work-overlay .bs-work-pulse{background:rgba(255,255,255,.15)!important}
html body #boot .bs-work-pulse:after,
html body .bs-work-overlay .bs-work-pulse:after{background:#74b7ef!important}

/* Keep the real staged bowl/jack progress mechanics; only restyle its field. */
html body .bs-rankpipe-overlay .bs-rankpipe-green{
  background:linear-gradient(90deg,rgba(22,71,70,.38),rgba(33,104,77,.30))!important;
  border:1px solid rgba(133,190,165,.28)!important;
  box-shadow:inset 0 0 55px rgba(0,0,0,.10)!important;
}
html body .bs-rankpipe-overlay .bs-rankpipe-green:before{background:rgba(223,244,234,.24)!important;box-shadow:0 -42px 0 rgba(223,244,234,.07),0 42px 0 rgba(223,244,234,.07)!important}

@media(max-width:1050px){
  html body #modalBack.bs-branded-wizard-backdrop,
  html body #modalBack:has(#modal.prototype-modal){padding:14px!important;background-position:60% center!important}
  html body #modalBack.bs-branded-wizard-backdrop #modal.prototype-modal,
  html body #modalBack:has(#modal.prototype-modal) #modal.prototype-modal,
  html body #modalBack.bs-board-preview-step #modal.prototype-modal,
  html body #modalBack:has(#modal .proto-board) #modal.prototype-modal{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 28px)!important;
    padding:24px!important;
  }
  #modalBack .prototype-modal .proto-board{grid-template-columns:minmax(0,1fr) 220px!important}
  #modalBack .prototype-modal .proto-divisions{grid-template-columns:1fr!important}
}

@media(max-width:760px){
  html body #modalBack.bs-branded-wizard-backdrop,
  html body #modalBack:has(#modal.prototype-modal){padding:8px!important;background-position:64% center!important}
  html body #modalBack.bs-branded-wizard-backdrop #modal.prototype-modal,
  html body #modalBack:has(#modal.prototype-modal) #modal.prototype-modal{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px)!important;
    padding:20px 17px!important;
    border-radius:15px!important;
  }
  #modalBack .prototype-modal .proto-head{display:grid!important}
  #modalBack .prototype-modal .proto-head h2{font-size:25px!important}
  #modalBack .prototype-modal .proto-grid,
  #modalBack .prototype-modal .proto-grid.two{grid-template-columns:1fr!important}
  #modalBack .prototype-modal .proto-board{grid-template-columns:1fr!important}
  #modalBack .prototype-modal .proto-divisions{grid-template-columns:1fr!important}
  #modalBack .prototype-modal .structure-row,
  #modalBack .prototype-modal .structure-row:has(label:nth-of-type(3)){grid-template-columns:1fr 92px 44px!important}
  #modalBack .prototype-modal .structure-row label:nth-of-type(3){display:none!important}
  #modalBack .prototype-modal .competition-item{grid-template-columns:22px minmax(0,1fr)!important;align-items:start!important}
  #modalBack .prototype-modal .competition-item .source{grid-column:2!important;justify-self:start!important;margin-top:4px!important}
  #modalBack .prototype-modal .modal-actions{display:grid!important;grid-template-columns:1fr!important}
  html body #boot.boot:not(.hidden),html body #boot:not(.hidden),html body .bs-work-overlay,html body .bs-rankpipe-overlay{background-position:65% center!important}
}