:root{
  --bg:#0d1016;
  --panel:#151a24;
  --panel2:#10151e;
  --text:#e8e9ec;
  --muted:#969ba6;
  --line:#2a303a;
  --accent:#a91f31;
  --accent-dark:#851827;
  --good:#4f9d69;
  --maybe:#b99143;
  --bad:#a85757;

  font-family:"Trebuchet MS",Verdana,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
  color-scheme:dark;
}

body{
  margin:0;
  background:
    linear-gradient(
      180deg,
      #10151e 0,
      #0d1016 45%,
      #0b0e13 100%
    );
  color:var(--text);
}

button,
input,
select{
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}

button{
  cursor:pointer;
}

.hidden{
  display:none!important;
}


/* ==================================================
   PAGE
================================================== */

.app-shell{
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:20px 14px 46px;
}


/* ==================================================
   HEADER
================================================== */

.portal-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  margin-bottom:12px;
}

.portal-logo{
  max-height:68px;
  max-width:210px;

}

.portal-title{
  margin:0;
  font-size:1.25rem;
  letter-spacing:.18em;
}

.portal-meta{
  max-width:470px;
  margin:2px auto 0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}


/* ==================================================
   SHARE / INSTALL
================================================== */

.header-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;

  width:100%;
  max-width:430px;

  margin-top:10px;
}

.share-button,
.install-button{
  min-height:44px;
  margin:0;
  padding:8px 10px;

  border-radius:10px;

  font-size:.84rem;
  font-weight:700;
}

.share-button{
  border:1px solid #3e4552;
  background:#151a24;
  color:#fff;
}

.install-button{
  border:1px solid #454c59;
  background:#1b222e;
  color:#e8e9ec;
}

.share-status,
.install-status{
  min-height:0;
  margin:3px 0 0;

  color:var(--muted);

  font-size:.76rem;
  line-height:1.3;
}

@media(display-mode:standalone){
  #installBtn{
    display:none;
  }
}


/* ==================================================
   CARDS
================================================== */

.utility-card{
  margin-bottom:22px;
  padding:15px;

  border:1px solid #353c48;
  border-radius:14px;

  background:var(--panel2);
}

.block-label{
  margin-bottom:7px;

  color:#8f939e;

  font-size:.66rem;
  font-weight:800;
  letter-spacing:.15em;
}

.utility-card h2,
.section-heading h2{
  margin:0 0 5px;
  font-size:1.05rem;
}

.block-help,
.section-help{
  margin:0 0 13px;

  color:var(--muted);

  font-size:.84rem;
  line-height:1.45;
}


/* ==================================================
   INPUTS
================================================== */

input,
select,
button{
  min-height:44px;

  border:1px solid #3a404d;
  border-radius:10px;

  padding:9px 11px;

  color:var(--text);
}

input,
select{
  width:100%;
  background:#080b10;
  font-size:16px;
  outline:none;
}

input:focus,
select:focus{
  border-color:#737987;
}

.row{
  display:flex;
  gap:8px;
}

.row input{
  flex:1;
  min-width:0;
}

.primary{
  background:var(--accent);
  border-color:#dc2a41;
  color:#fff;
}

.primary:hover{
  background:var(--accent-dark);
}

.full{
  width:100%;
  margin-top:10px;
}

.secondary-small{
  min-height:38px;
  padding:7px 11px;
  background:#171c26;
}

.back-link,
.link-button{
  min-height:auto;
  padding:2px;

  border:0;
  background:transparent;

  color:#d3d5da;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ==================================================
   SEARCH RESULTS
================================================== */

.result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 0;

  border-bottom:1px solid var(--line);
}

.result:last-child{
  border-bottom:0;
}

.no-match{
  margin-top:12px;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.no-match span{
  display:block;
  margin-top:4px;

  color:var(--muted);
  font-size:.84rem;
}

.mini-message,
.error-text,
.status{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.85rem;
}

.error-text{
  color:#df8d8d;
}

.utility-foot{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;

  margin-top:13px;
  padding-top:12px;

  border-top:1px solid var(--line);

  color:var(--muted);
  font-size:.81rem;
}


/* ==================================================
   ADD WRESTLER
================================================== */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.form-grid label{
  color:var(--muted);
  font-size:.78rem;
}

.form-grid label input,
.form-grid label select{
  margin-top:5px;
}

.form-grid .span{
  grid-column:1/-1;
}

.optional{
  color:#737783;
  font-weight:400;
}


/* ==================================================
   CONNECTED WRESTLER
================================================== */

.connected-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.connected-status{
  margin-bottom:3px;

  color:#78b68b;

  font-size:.64rem;
  letter-spacing:.1em;
}

.connected-row strong{
  font-size:1.02rem;
}


/* ==================================================
   PRACTICE AREA
================================================== */

.practice-area{
  margin-top:0;
}

.section-heading{
  margin:0 2px 10px;
}

.section-heading .block-label{
  margin-bottom:4px;
}

.section-heading .section-help{
  margin-bottom:0;
}


/* ==================================================
   WEEK TABS
================================================== */

.week-tabs{
  position:sticky;
  top:0;
  z-index:15;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;

  padding:7px 0;
  margin-bottom:10px;

  background:var(--bg);
}

.week-tab{
  min-height:52px;
  margin:0;
  padding:7px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  border:1px solid #343b48;
  border-radius:10px;

  background:#151a24;
  color:#aeb2bb;

  font-weight:700;
}

.week-tab.active{
  background:#1b2230;
  border-color:#444c59;
  color:#fff;
}

.week-tab-small{
  font-size:.57rem;
  line-height:1;
  letter-spacing:.12em;
  opacity:.65;
}

.week-panel[hidden]{
  display:none!important;
}


/* ==================================================
   DAY GROUP
================================================== */

.practice-day{
  overflow:hidden;

  margin-bottom:11px;

  border:1px solid var(--line);
  border-radius:13px;

  background:var(--panel);
}

.practice-day.day-tone-b{
  background:#151a24;
}

.practice-day-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 13px;

  border-bottom:1px solid var(--line);

  background:#544820!important;
}

.practice-day-name{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  color:#ffffff;
}

.practice-day-date{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#ffffff;
}


/* ==================================================
   SESSION
================================================== */

.session{
  padding:14px;
}

.session + .session{
  border-top:1px solid var(--line);
}

.session.cancelled{
  opacity:.58;
}

.session-main{
  margin-bottom:10px;
}

.session-name{
  margin:0 0 3px;

  font-size:1.04rem;
  font-weight:800;
}

.session-meta{
  color:var(--muted);

  font-size:.84rem;
  line-height:1.4;
}

.session-note{
  margin-top:7px;

  color:#d2d3d7;

  font-size:.84rem;
}

.cancelled-label{
  display:block;

  margin-top:9px;

  color:#dc8994;
}


/* ==================================================
   RSVP
================================================== */

.choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;

  margin-top:11px;
}

.choice{
  min-height:41px;
  padding:7px 3px;

  background:#10141c;

  font-size:.84rem;
}

.choice[data-status="going"].active{
  background:var(--good);
  border-color:var(--good);
}

.choice[data-status="maybe"].active{
  background:var(--maybe);
  border-color:var(--maybe);
}

.choice[data-status="not_going"].active{
  background:var(--bad);
  border-color:var(--bad);
}

.rsvp-prompt{
  margin-top:10px;
  padding:9px 11px;

  border:1px solid #2a303b;
  border-radius:9px;

  color:var(--muted);

  font-size:.84rem;
  text-align:center;
}


/* ==================================================
   ATTENDEES
================================================== */

.attendee-block{
  margin-top:11px;
  padding-top:10px;

  border-top:1px solid var(--line);
}

.attendee-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.attendee-head strong{
  font-size:.7rem;
  letter-spacing:.09em;
}

.attendee-head span{
  color:var(--muted);
  font-size:.72rem;
}

.attendee-summary{
  margin-top:3px;
  margin-bottom:7px;

  color:var(--muted);

  font-size:.73rem;
}

.attendee-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.attendee-cell{
  display:grid;
  grid-template-columns:.75fr .9fr 1.35fr;
  gap:3px;

  min-width:0;
  padding:7px 5px;

  border:1px solid #2d3340;
  border-radius:8px;

  background:#0d1118;

  text-align:center;
}

.attendee-cell div{
  min-width:0;
}

.attendee-cell span{
  display:block;

  color:#777d88;

  font-size:.5rem;
  font-weight:800;
  letter-spacing:.08em;
}

.attendee-cell b{
  display:block;

  font-size:.73rem;
  line-height:1.25;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.attendee-cell .exp b{
  font-size:.66rem;
}

.attendee-empty{
  padding:5px 0 2px;

  color:var(--muted);

  font-size:.78rem;
}


/* ==================================================
   EMPTY / FOOTER
================================================== */

.week-empty{
  padding:18px;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--panel);

  color:var(--muted);
  text-align:center;
}

.footer{
  margin-top:25px;

  color:#9ea1a9;

  font-size:.7rem;
  text-align:center;
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:520px){

  .app-shell{
    padding:16px 12px 38px;
  }

  .portal-logo{
    max-height:58px;
  }

  .row{
    display:block;
  }

  .row button{
    width:100%;
    margin-top:7px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid .span{
    grid-column:auto;
  }

  .utility-card{
    padding:14px;
  }

  .header-actions{
    gap:6px;
  }

  .share-button,
  .install-button{
    font-size:.8rem;
  }

  .practice-day-header{
    padding:9px 11px;
  }

  .session{
    padding:12px;
  }

  .choices{
    gap:5px;
  }

  .choice{
    font-size:.8rem;
  }
}


@media(min-width:560px){

  .attendee-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

}

/* final dark-theme tuning */
.portal-title{color:#e2e4e8}
.share-button:hover,.install-button:hover{background:#202836}
.practice-day{box-shadow:0 1px 0 rgba(255,255,255,.015)}
.practice-day-header{background:#111722}
.week-tab{background:#121822}
.week-tab.active{background:#1b2230}
.block-label{color:#7f8590}