/* The coach's portal: the public site's look, laid out for one hand on a phone. */
#app { padding-block:20px 120px }
header .btn.sm { margin-left:auto }
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:6; background:var(--bg); border-top:1px solid var(--bd); display:grid; grid-template-columns:repeat(4,1fr);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)) }
.tabs button { height:52px; border-radius:12px; display:grid; place-items:center; align-content:center; gap:2px; color:var(--mfg); position:relative }
.tabs button b { font-family:var(--tf); font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.02em }
.tabs button[aria-current="page"] { color:var(--ac) }
.tabs span:not(:empty) { position:absolute; top:4px; right:calc(50% - 46px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ac); color:var(--acf); font-size:11px; font-weight:700; line-height:18px }
@media (min-width:900px) { .tabs { max-width:640px; margin:0 auto 12px; border:1px solid var(--bd); border-radius:16px } }

.h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px }
.h h2 { font-size:34px }
.seg { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px }
.list { display:grid; gap:10px }
.card { border:1px solid var(--bd); border-radius:var(--r); background:var(--sf); padding:14px; display:grid; gap:8px }
.card .row { display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.card .row b.t { font-family:var(--tf); font-weight:800; font-size:24px; line-height:1 }
.card .meta { font-size:13.5px; color:var(--mfg) }
.card .acts { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--bd); padding-top:10px }
.card .acts .btn { height:38px; font-size:15px; padding:0 14px }
.pill { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; background:var(--sf2); color:var(--mfg) }
.pill.ok { background:var(--acd); color:var(--ac) } .pill.warn { background:#3A2410; color:#FFB37A } .pill.off { text-decoration:line-through }
.grp { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mfg); margin:18px 0 6px }
.form { display:grid; gap:10px }
.form .two { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.form select { height:46px; border-radius:10px; width:100% ; font-size:16px }
.check { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--fg) }
.check input { width:22px; height:22px; accent-color:var(--ac) }
.danger { color:#FF9A7A !important; border-color:#5A2A20 !important }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px }
.login { max-width:380px; margin:12vh auto 0; display:grid; gap:14px }
.login h1 { font-size:48px }
.day .badge { position:absolute; top:4px; left:6px; font-size:10px; font-weight:700; color:var(--ac) }
.day[aria-pressed="true"] .badge { color:var(--acf) }
.btn.wrap { white-space:normal; height:auto; min-height:48px; padding-block:10px; text-align:center; max-width:100% }
.wkrow { display:grid; grid-template-columns:44px 1fr 1fr auto; gap:8px; align-items:center }
.wkrow input[type="time"] { height:42px; padding:0 8px }
.wkrow input:disabled { opacity:.35 }