/* Coach dashboard layout. Desk work on a wide screen — the one part of
   Ascend that genuinely wants a browser rather than a phone. */

.shell { max-width:1560px; margin:0 auto; padding:0 24px 64px }

.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:linear-gradient(to bottom, var(--bg) 70%, transparent);
  backdrop-filter:blur(8px);
}
.brand { display:flex; align-items:center; gap:11px }
.mark {
  width:26px; height:26px; display:grid; place-items:center;
  border:1.5px solid var(--acc); border-radius:var(--r);
  color:var(--acc); font-weight:600; font-size:13px; letter-spacing:-.02em;
}
.topright { display:flex; align-items:center; gap:16px }
.temp { display:inline-flex; gap:3px; padding:3px; background:var(--surf); border:1px solid var(--line); border-radius:var(--pill) }
.temp button {
  padding:6px 13px; border-radius:var(--pill); font-size:11px; font-weight:500;
  color:var(--mut); border:1px solid transparent;
  text-transform:var(--up); letter-spacing:var(--tr);
}
.temp button[aria-pressed="true"] { border-color:var(--acc); background:var(--acc-lo); color:var(--acc); box-shadow:var(--glow) }
.who { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--mut) }
.avatar {
  width:30px; height:30px; display:grid; place-items:center; border-radius:999px;
  background:var(--acc-lo); border:1px solid var(--acc-mid);
  color:var(--acc); font-size:10px; font-weight:500;
}

.grid {
  display:grid; grid-template-columns:300px minmax(0,1fr) 400px;
  gap:22px; align-items:start; padding-top:24px;
}
.col { min-width:0 }
.colhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px }

/* ── Roster ─────────────────────────────────────────────────── */

.athleteRow {
  width:100%; display:flex; align-items:center; gap:11px; text-align:left;
  padding:12px 13px; margin-bottom:7px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r2);
  transition:border-color .15s ease, background .15s ease;
}
.athleteRow:hover { border-color:var(--line2) }
.athleteRow[aria-current="true"] { border-color:var(--acc); background:var(--acc-lo); box-shadow:var(--glow) }
.athleteRow .ini {
  width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:999px;
  background:var(--surf2); color:var(--mut); font-size:10px; font-weight:500;
}
.athleteRow[aria-current="true"] .ini { background:var(--acc-mid); color:var(--acc-hi) }
.athleteRow .meta { min-width:0; flex:1 }
.athleteRow .nm { font-size:13px; font-weight:500; color:var(--txt) }
.athleteRow .sub { font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.athleteRow .pct { font-size:15px; font-weight:var(--hw) }
.dot { width:6px; height:6px; border-radius:999px; background:var(--acc); flex:none }

/* ── Athlete panel ──────────────────────────────────────────── */

.stack { display:flex; flex-direction:column; gap:14px }
.row { display:flex; gap:14px; flex-wrap:wrap }
.tile { flex:1; min-width:130px; background:var(--surf); border:1px solid var(--line); border-radius:var(--r2); padding:13px 14px }
.tile .big { font-size:26px; font-weight:var(--hw); letter-spacing:-.01em; line-height:1.1; margin:4px 0 2px }

.weekbars { display:flex; flex-direction:column; gap:9px }
.weekbar { display:grid; grid-template-columns:56px 1fr 62px; align-items:center; gap:11px; font-size:11px }
.weekbar .lab { color:var(--mut) }
.weekbar .num { color:var(--mut); text-align:right; font-variant-numeric:tabular-nums }

.dashed { border:1px dashed var(--line2); border-radius:var(--r2); padding:15px; background:transparent }

.action {
  width:100%; display:flex; align-items:flex-start; gap:11px; text-align:left;
  padding:13px 14px; margin-bottom:7px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r2);
}
.action:hover:not(:disabled) { border-color:var(--acc-mid) }
.action:disabled { opacity:.55; cursor:default }
.action .t { font-size:12.5px; font-weight:500; color:var(--txt) }
.action .d { font-size:11px; color:var(--mut); margin-top:3px; line-height:1.45 }

.small { font-size:11.5px; line-height:1.5 }

/* ── Calendar ───────────────────────────────────────────────── */

.day { margin-bottom:9px }
.dayhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px }
.appt {
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:5px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r2);
  border-left:2px solid var(--acc-mid);
}
.appt.cancelled { border-left-color:var(--line2); opacity:.6 }
.appt.cancelled .nm { text-decoration:line-through }
.appt .time { font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; width:42px; flex:none }
.appt .nm { font-size:12.5px; font-weight:500 }
.appt .kind { font-size:10.5px; color:var(--mut) }

@media (max-width:1200px) {
  .grid { grid-template-columns:1fr; }
  .col.week { order:3 }
}

.toast {
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(12px);
  background:var(--surf2); border:1px solid var(--acc-mid); color:var(--txt);
  padding:12px 20px; border-radius:var(--pill); font-size:13px;
  opacity:0; pointer-events:none; transition:all .22s ease; z-index:50;
}
.toast.on { opacity:1; transform:translateX(-50%) translateY(0) }


/* ── Wired to the database ──────────────────────────────────────
   Added when coach.js stopped importing demo data and started
   reading coach_roster(), coach_adherence() and coach_review().
   Every colour resolves from tokens.css; a raw hex here is a bug. */

.card { background:var(--surf); border:1px solid var(--line); border-radius:var(--r2); padding:15px 16px }
.muted { color:var(--mut) }

/* Sign-in, which this page never had because it never signed anybody in. */
.fieldlabel { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.13em;
              color:var(--mut); margin:12px 0 5px }
.field { width:100%; padding:10px 12px; background:var(--surf2); color:var(--txt);
         border:1px solid var(--line2); border-radius:var(--r2); font:inherit; font-size:13px }
.field:focus { outline:2px solid var(--acc); outline-offset:1px }
.primary { width:100%; margin-top:16px; padding:11px 14px; border-radius:var(--pill);
           background:var(--acc-lo); border:1px solid var(--acc); color:var(--acc);
           font-size:12px; font-weight:500; text-transform:var(--up); letter-spacing:var(--tr) }
.primary:disabled { opacity:.6 }
.ghost { padding:9px 13px; border-radius:var(--pill); border:1px solid var(--line2);
         color:var(--mut); font-size:11.5px; font-weight:500 }
.ghost:hover { color:var(--txt); border-color:var(--txt) }
.ghost:disabled { opacity:.55; cursor:default; color:var(--mut); border-color:var(--line2) }

/* Roster rows, now built from coach_roster() rather than a constant. */
.rosterrow { width:100%; display:flex; align-items:center; gap:11px; text-align:left;
             padding:12px 13px; margin-bottom:7px; background:var(--surf);
             border:1px solid var(--line); border-radius:var(--r2);
             transition:border-color .15s ease, background .15s ease }
.rosterrow:hover { border-color:var(--line2) }
.rosterrow.on { border-color:var(--acc); background:var(--acc-lo); box-shadow:var(--glow) }
.ravatar { width:32px; height:32px; flex:none; display:grid; place-items:center;
           border-radius:999px; background:var(--surf2); color:var(--mut);
           font-size:10px; font-weight:500 }
.rosterrow.on .ravatar { background:var(--acc-mid); color:var(--acc-hi) }
.rmid { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px }
.rname { font-size:13px; font-weight:500; color:var(--txt) }
.rsub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.acard { display:flex; align-items:center; gap:13px }
.aavatar { width:40px; height:40px; flex:none; display:grid; place-items:center;
           border-radius:999px; background:var(--acc-lo); border:1px solid var(--acc-mid);
           color:var(--acc); font-size:12px; font-weight:500 }
.aname { font-size:16px; font-weight:var(--hw); letter-spacing:-.01em }

/* A window and its state. Three fields, because the function returns three
   columns — there is deliberately nowhere here to put a compound. */
.windows { display:flex; flex-direction:column; gap:5px }
.win { display:grid; grid-template-columns:1fr 58px 74px; align-items:center; gap:10px;
       padding:9px 11px; background:var(--surf2); border:1px solid var(--line);
       border-radius:var(--r2); border-left:2px solid var(--line2); font-size:11.5px }
.win.logged { border-left-color:var(--acc) }
.win.missed { border-left-color:var(--acc-dim) }
.win.held   { border-left-color:var(--line2); opacity:.7 }
.wday { color:var(--txt); font-variant-numeric:tabular-nums }
.wtime { color:var(--mut); font-variant-numeric:tabular-nums }
.wstate { color:var(--mut); text-transform:uppercase; font-size:9px; letter-spacing:.12em; text-align:right }

.reason { display:flex; gap:11px; padding:9px 11px; margin-bottom:5px; font-size:11.5px;
          background:var(--surf2); border:1px solid var(--line); border-radius:var(--r2) }

.dhead { font-size:11px; color:var(--mut); margin-bottom:6px; font-variant-numeric:tabular-nums }
.strip { display:flex; gap:5px; flex-wrap:wrap }
.strip .dot { width:11px; height:11px; border-radius:var(--r); background:var(--surf2);
              border:1px solid var(--line2); position:relative }
.strip .dot.logged { background:var(--acc); border-color:var(--acc) }
.strip .dot.missed { background:var(--acc-lo); border-color:var(--acc-dim) }
.strip .dot.held   { background:var(--surf2); border-style:dashed }

/* Visible to a screen reader, not to a sighted reader: the dots above are
   colour alone otherwise, which is no information at all to some people. */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }


/* The topbar laid out as one row at any width, so below about 380px the
   temperament switch and the account chip pushed the page sideways. Desk
   software does not get an exemption from the page not scrolling. */
@media (max-width:640px) {
  .topbar { flex-wrap:wrap; gap:12px }
  .topright { flex-wrap:wrap; gap:10px }
  .shell { padding:0 14px 64px }
  .win { grid-template-columns:1fr 52px; }
  .wstate { grid-column:2; text-align:right }
}


/* `hidden` is an attribute at the same specificity as a class, so any
   `.thing { display:flex }` later in this file silently beats the browser's
   `[hidden] { display:none }`. The account chip is display:flex, so hiding
   it left an empty avatar circle sitting in the top right — visible only by
   looking at the page, which is how it was found. */
[hidden] { display:none !important }


.signout { margin-left:10px; padding:5px 11px; border-radius:var(--pill);
           border:1px solid var(--line2); color:var(--mut); font-size:10.5px;
           text-transform:var(--up); letter-spacing:var(--tr) }
.signout:hover { color:var(--txt); border-color:var(--txt) }

/* ── Goals and the month ───────────────────────────────────────────── */
.goal { display:flex; align-items:flex-start; gap:10px; padding:9px 0;
        border-bottom:1px solid var(--line) }
.goal:last-child { border-bottom:0 }
.goal > div { flex:1; min-width:0 }
.gtitle { font-size:14px; color:var(--txt) }
.gdot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none }
.gdot.done { background:var(--acc) }
.gdot.open { background:transparent; border:1px solid var(--line2) }
.gstate { font-size:11px; color:var(--mut); white-space:nowrap }

.suggest { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.suggest input { flex:1 1 180px; min-width:0; padding:9px 11px; font:inherit;
                 font-size:13px; color:var(--txt); background:var(--surf2);
                 border:1px solid var(--line); border-radius:var(--r) }
.suggest input:focus-visible { outline:2px solid var(--acc); outline-offset:1px }
.suggest button { padding:9px 16px; font:inherit; font-size:13px; font-weight:500;
                  color:var(--acc); background:var(--acc-lo);
                  border:1px solid var(--acc-mid); border-radius:var(--r);
                  cursor:pointer }
.suggest button:hover { background:var(--acc-mid); color:var(--txt) }

/* One bar per week. Drawn with divs because the CSP is script-src 'self'
   and a chart library would be the only build step in this directory. */
.chart { display:flex; align-items:flex-end; gap:8px; height:110px;
         margin:4px 0 16px }
.bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
       align-items:center; gap:5px; height:100% }
.bfill { width:100%; height:var(--h); background:var(--acc-mid);
         border-top:2px solid var(--acc); border-radius:2px 2px 0 0 }
.blabel { font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums }

.mtable { font-size:12.5px; font-variant-numeric:tabular-nums }
.mrow { display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:8px;
        padding:7px 0; border-bottom:1px solid var(--line) }
.mrow:last-child { border-bottom:0 }
.mhead { color:var(--mut); font-size:11px; text-transform:var(--up);
         letter-spacing:var(--tr) }