/* The athlete's own view. A reading column rather than a control surface —
   this is where you check in from a laptop, not where you run a business. */

.shell { max-width:820px; margin:0 auto; padding:0 24px 80px }

.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0 18px;
  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:14px }
.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;
}

.tabs {
  display:flex; gap:3px; padding:3px; margin-bottom:26px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--pill);
  overflow-x:auto;
}
.tabs button {
  flex:1; white-space:nowrap; padding:9px 16px; border-radius:var(--pill);
  font-size:11.5px; font-weight:500; color:var(--mut);
  text-transform:var(--up); letter-spacing:var(--tr);
}
.tabs button[aria-selected="true"] { background:var(--acc-lo); color:var(--acc) }

h1 { font-size:26px; font-weight:var(--hw); letter-spacing:-.02em; margin-bottom:5px }
.stack { display:flex; flex-direction:column; gap:16px }
.row { display:flex; gap:8px; flex-wrap:wrap }
.tile { flex:1; min-width:140px; background:var(--surf); border:1px solid var(--line); border-radius:var(--r2); padding:14px 15px }
.tile .big { font-size:28px; font-weight:var(--hw); letter-spacing:-.01em; line-height:1.15; margin:5px 0 3px }

.dose {
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r2);
}
.dose.logged { border-color:var(--acc-mid); background:var(--acc-lo) }
.dose.due { border-color:color-mix(in srgb, var(--acc) 55%, transparent) }
.dose .nm { font-size:13px; font-weight:500 }
.dose .meta { font-size:11px; color:var(--mut) }
.dose .state { margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--mut) }
.dose.logged .state { color:var(--acc) }
/* The other two states in the enum. Both drew as `due` — there was no rule
   for either, so a missed window looked still open. Same tokens as the
   coach page's window list, for the same two words. */
.dose.missed { border-color:var(--acc-dim) }
.dose.missed .state { color:var(--acc-dim) }
.dose.held { border-color:var(--line2); opacity:.7 }

.lab { display:flex; align-items:center; gap:12px; padding:12px 15px; background:var(--surf); border:1px solid var(--line); border-radius:var(--r2) }
.lab.out { border-color:var(--acc-mid); background:var(--acc-lo) }
.lab .val { margin-left:auto; font-size:13px; font-weight:500 }
.lab.out .val { color:var(--acc) }

.bubble { max-width:78%; padding:12px 14px; border-radius:var(--r2); border:1px solid var(--line); background:var(--surf2) }
.bubble.mine { margin-left:auto; background:var(--acc-lo); border-color:var(--acc-mid) }
.bubble .time { font-size:9.5px; color:var(--mut); margin-top:5px }

.calc { display:grid; grid-template-columns:1fr auto auto auto; gap:11px; align-items:center }
.calc label { font-size:11.5px; color:var(--mut) }
.calc input {
  width:88px; padding:9px 11px; text-align:right;
  background:var(--surf2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--txt); font-size:14px; font-variant-numeric:tabular-nums;
}
.calc input:focus { outline:none; border-color:var(--acc); box-shadow:var(--glow) }
.working { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:2 }
.working b { color:var(--mut); font-weight:400; display:inline-block; width:132px }

.foot { margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px }
.foot strong { color:var(--txt); font-weight:500 }
.small { font-size:12px; line-height:1.65 }

.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) }

@media (max-width:640px) {
  .shell { padding:0 16px 60px }
  .topright .who span:last-child { display:none }
}


/* `hidden` is an attribute at the same specificity as a class, so a later
   `.who { display:flex }` silently beats the browser's `[hidden]` rule and
   leaves an empty avatar in the corner. Same bug the coach page had. */
[hidden] { display:none !important }

/* And the topbar laid out as one row at any width, pushing the page
   sideways on a narrow screen. */
@media (max-width:640px) {
  .topbar { flex-wrap:wrap; gap:12px }
  .topright { flex-wrap:wrap; gap:10px }
}


.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) }