:root{
  font-family:Arial,Helvetica,sans-serif;
  color:#0c1d36;
  background:#f8fbfd;
  font-synthesis:none;
  --blue:#155ea6;
  --line:#a8bfd4;
  --soft:#eaf3fb;
  --ink:#0c1d36
}

.order-notices{
  border:1px solid #cadcec;
  border-left:3px solid #6c96bc;
  background:#f1f7fc;
  border-radius:5px;
  padding:12px 15px;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.5;
}
.notice-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.notice-heading h3{margin:0;font-size:14px}
.notice-heading span{color:#526477;font-size:12px;white-space:nowrap}
.order-notices ul{margin:7px 0 0;padding-left:18px}
.order-notices p{margin:6px 0 0;color:#526477}
*{
  box-sizing:border-box
}
body{
  margin:0
}
.page{
  max-width:1240px;
  margin:auto;
  padding:0 30px;
  background:linear-gradient(115deg,#fff,#fbfdff)
}
button,input,select,textarea{
  font:inherit
}
button{
  cursor:pointer;
  color:#135798;
  border:1px solid #9bb8d2;
  background:linear-gradient(#fff,#f4f8fc);
  border-radius:5px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  min-height:34px
}
button:hover:not(:disabled){
  background:#e4effa;
  border-color:#477fae
}
button:disabled{
  opacity:.5;
  cursor:not-allowed
}
button.primary{
  background:linear-gradient(#216fb9,#13579b);
  color:white;
  border-color:#155ea6;
  padding:10px 23px
}
.danger{
  color:#a52a35
}
input,select,textarea,summary{
  border:1px solid #b0c6da;
  border-radius:5px;
  background:linear-gradient(110deg,#eaf4fc,#e2eef8);
  color:#102039;
  min-height:35px;
  padding:7px 10px;
  width:100%;
  font-size:14px
}
input[type=checkbox]{
  width:16px;
  height:16px;
  min-height:16px;
  padding:0;
  accent-color:var(--blue);
  flex-shrink:0
}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #69b3ef;
  outline-offset:2px
}
header{
  display:flex;
  align-items:center;
  gap:25px;
  min-height:72px;
  border-bottom:1px solid #7e9bb6
}
header b{
  font-size:13px;
  border-left:1px solid #8fa7bd;
  padding-left:25px
}
header .text-button{
  margin-left:auto
}
.wordmark{
  font-style:italic;
  font-size:39px;
  font-weight:800;
  letter-spacing:-1.4px;
  color:#4285bd;
  text-decoration:none
}
.intro{
  padding-top:25px
}
.intro h1{
  font-size:32px;
  letter-spacing:-.8px;
  margin:0 0 8px
}
.intro p{
  color:#526071;
  font-size:16px;
  margin:0 0 16px
}
.preview-notice{
  font-size:12px;
  padding:9px 12px;
  background:#f1f5f9;
  border-left:3px solid #7a9cbb;
  color:#526071;
  margin-bottom:17px
}
h2{
  font-size:20px;
  letter-spacing:-.4px;
  margin:0 0 13px
}
h3{
  font-size:14px;
  margin:12px 0 8px
}
.contact{
  padding-bottom:22px;
  border-bottom:1px solid var(--line)
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:600;
  min-width:0
}
.field input,.field select,.field textarea,.field summary{
  font-weight:400
}
.workspace{
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  gap:25px;
  padding-top:23px
}
aside{
  background:linear-gradient(110deg,#f0f6fc,#eaf2f9);
  padding:18px 10px;
  border:1px solid #e8eff6;
  border-radius:9px
}
aside h2{
  font-size:16px;
  margin:0 8px 20px
}
aside nav{
  display:grid;
  gap:8px;
  margin-bottom:20px
}
.order-tab{
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
  font-size:14px;
  padding:11px 9px;
  border-color:#d9e4ef
}
.order-tab.active{
  background:linear-gradient(90deg,#e2f0ff,#cce3f9);
  border-left:4px solid var(--blue);
  color:#0c2849
}
aside>button{
  width:100%
}
.hint{
  color:#5f6875;
  font-size:12px;
  line-height:1.5;
  font-weight:400
}
.order-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:3px 0 13px
}
.order-heading h2{
  font-size:26px;
  margin:0;
  overflow-wrap:anywhere
}
.order-heading>div{
  display:flex;
  gap:6px;
  flex-shrink:0
}
.form-section{
  border-top:1px solid #8fa9c1;
  padding:15px 0 19px
}
.form-section h2{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:19px
}
.form-section em{
  font-weight:400;
  font-size:16px;
  color:#4d5660
}
.section-number{
  border-radius:50%;
  background:#bfe5fa;
  color:#123a60;
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  letter-spacing:0;
  flex-shrink:0
}
.profile-heading{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.range-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  margin-top:18px
}
.range-grid .field:nth-child(2n){
  padding-right:14px;
  border-right:1px solid #b9cbdc
}
.range-grid .field:last-child{
  border:0;
  padding-right:0
}
.league-search{
  display:flex;
  gap:12px
}
.league-search input{
  background:#f4f8fc
}
.league-search button{
  white-space:nowrap
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px
}
.chip{
  font-size:12px;
  background:#e7f2fc;
  font-weight:400;
  padding:6px 9px
}
.text-button{
  border:0;
  background:none;
  text-decoration:underline;
  padding:4px;
  color:#175d9f
}
.league-picker{
  background:#e7f2fb;
  border:1px solid #d5e4f1;
  border-radius:6px;
  padding:10px
}
.picker-heading{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:11px;
  margin-bottom:7px;
  flex-wrap:wrap
}
.picker-heading b{
  margin-right:auto
}
.check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:400
}
.country{
  border:0;
  padding:0;
  margin:5px 0
}
.country legend{
  font-size:10px;
  color:#5d7186;
  padding:2px 0
}
.league{
  padding:5px 7px;
  background:#f7fbff;
  border:1px solid #cfdfed;
  border-radius:3px
}
.availability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 20px
}
.availability-grid>.check{
  align-self:end;
  min-height:35px
}
.multiselect{
  position:relative
}
.multiselect summary{
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  padding-right:24px
}
.multiselect summary:after{
  content:'⌄';
  position:absolute;
  right:10px
}
.choices{
  position:absolute;
  z-index:3;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 20px #122b4820;
  min-width:100%;
  max-height:230px;
  overflow:auto;
  padding:8px;
  border-radius:5px
}
.choices .check{
  padding:7px;
  white-space:nowrap
}
.phase-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px
}
.phase-grid label{
  font-size:11px
}
.phase-grid input{
  padding:6px
}
.metric-list{
  display:grid;
  gap:8px
}
.metric-row{
  background:#e7f1fa;
  border:1px solid #c6d8e7;
  border-radius:5px;
  padding:8px;
  display:grid;
  grid-template-columns:1fr 1.7fr .85fr .85fr auto;
  gap:12px;
  align-items:end
}
.metric-row label{
  font-size:10px
}
.metric-row button{
  border:0;
  background:none;
  font-size:20px;
  padding:3px 7px
}
.metric-foot{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:9px
}
.reference-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.notes{
  margin-top:14px
}
.review-bar{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 8px;
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:0
}
.review-bar strong{
  border-left:4px solid var(--blue);
  padding-left:10px;
  font-size:17px
}
.review-bar span{
  font-size:12px;
  color:#526071
}
.review-bar button{
  margin-left:auto
}
footer{
  display:flex;
  justify-content:space-between;
  padding:15px 9px;
  font-size:11px;
  color:#5c6c7e
}
footer b{
  color:var(--blue);
  font-size:15px;
  font-style:italic
}
dialog{
  border:1px solid var(--line);
  border-radius:10px;
  max-width:760px;
  width:calc(100% - 32px);
  max-height:85vh;
  color:var(--ink);
  padding:26px
}
dialog::backdrop{
  background:#0c1d3680
}
.dialog-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:20px
}
.review-order{
  border-top:1px solid var(--line);
  padding:14px 0
}
.review-order dl{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  font-size:13px;
  gap:6px
}
.review-order dd{
  margin:0;
  overflow-wrap:anywhere
}
.valid{
  color:#247347
}
.error{
  color:#a12d37;
  line-height:1.6
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
[hidden]{
  display:none!important
}

@media(min-width:1150px){
  .page{
  padding-left:35px;
  padding-right:35px
}
.form-section{
  padding-top:18px;
  padding-bottom:22px
}

}

@media(max-width:950px){
  .page{
  padding:0 20px
}
.workspace{
  grid-template-columns:195px minmax(0,1fr);
  gap:20px
}
.range-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.range-grid .field:nth-child(2n){
  padding-right:0;
  border:0
}
.phase-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.order-heading h2{
  font-size:23px
}
.metric-row{
  grid-template-columns:1fr 1.5fr
}
.metric-row button{
  justify-self:start
}
.availability-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}

@media(max-width:650px){
  .page{
  padding:0 15px
}
header{
  gap:12px;
  min-height:65px
}
.wordmark{
  font-size:29px
}
header b{
  font-size:10px;
  padding-left:12px
}
header .text-button{
  font-size:11px;
  padding:0
}
.intro h1{
  font-size:27px
}
.contact-grid{
  grid-template-columns:1fr 1fr;
  gap:14px
}
.workspace{
  grid-template-columns:1fr;
  padding-top:16px;
  gap:18px
}
aside{
  padding:12px
}
aside h2{
  margin-bottom:10px
}
aside nav{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:10px
}
.order-tab{
  flex:1;
  min-width:140px
}
aside>button{
  width:auto
}
aside .hint{
  display:none
}
.order-heading{
  flex-wrap:wrap
}
.profile-heading{
  grid-template-columns:1fr;
  gap:12px
}
.range-grid{
  gap:10px
}
.form-section h2{
  font-size:17px
}
.form-section em{
  font-size:13px
}
.reference-grid{
  grid-template-columns:1fr;
  gap:12px
}
.phase-grid{
  gap:10px
}
.metric-foot{
  flex-wrap:wrap;
  gap:6px
}
.review-bar{
  flex-wrap:wrap;
  gap:10px
}
.review-bar span{
  display:none
}
.review-bar button{
  margin-left:0
}
.review-bar strong{
  font-size:15px
}
.league-search{
  flex-wrap:wrap
}
.league-search input{
  flex:1;
  min-width:160px
}
footer{
  gap:20px;
  line-height:1.5
}
.choices{
  max-width:85vw
}
dialog{
  padding:18px
}

}


/* Connected lifecycle; the approved form grid remains unchanged. */
.access-card{max-width:480px;margin:8vh auto;padding:28px;border:1px solid #c2d2e5;border-radius:8px;background:#fff}
.access-card .field{margin:18px 0}.access-card h1{font-size:26px}
.connection-bar{max-width:1240px;margin:12px auto;padding:14px 20px;background:#eef5fc;border:1px solid #c2d2e5;border-radius:6px}
.connection-bar:empty{display:none}.connection-bar .dialog-actions{justify-content:flex-start;flex-wrap:wrap}
.connection-bar p{margin:8px 0}.connected-editor{border:0;padding:0;margin:0;min-width:0}
.connected-editor:disabled{opacity:.75}.connection-bar button:disabled{opacity:.5}
@media(max-width:600px){.access-card{margin:20px 12px;padding:18px}.connection-bar{margin:8px}}