/* ===========================================================================
   Owner/Coach app — light redesign (athlete-app DNA, light theme).
   Self-contained: this page (owner.html) loads ONLY this stylesheet, so it can't
   touch the live app.js views. Phase 1 shell. 2026-06-30.
   =========================================================================== */
:root{
  --bg:#eef1f5; --surface:#ffffff; --panel:#f7f9fb; --line:#e3e7ed; --line2:#eef1f5;
  --ink:#1b2027; --ink2:#3a424d; --muted:#727c89;
  --red:#c8102e; --gold:#b8860b; --green:#1f9d6b; --blue:#2f6fd0; --amber:#d98a1f; --purple:#7a5bd0; --teal:#129b8b;
  --hi:#fdecef; --hiamb:#fdf3e2; --higrn:#e9f7f0; --hiblu:#eaf1fc;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--surface)}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 12px) 16px 11px;display:flex;align-items:center;gap:10px;flex:none}
.top .brand{font-size:.66rem;letter-spacing:.13em;font-weight:800;color:var(--ink2)}.top .brand b{color:var(--red)}
.top .ttl{font-size:1.32rem;font-weight:900;margin-top:1px;letter-spacing:-.01em}
.av{margin-left:auto;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c8102e,#7a0f20);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 2px 6px rgba(200,16,46,.3);cursor:pointer}
.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(70px + env(safe-area-inset-bottom))}
.body::-webkit-scrollbar{width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.sec-h{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:16px 2px 8px}
.sec-h:first-child{margin-top:2px}
.muted{color:var(--muted)} .sm{font-size:.78rem} .center{text-align:center}
.seg{display:flex;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px}
.seg button{flex:1;padding:8px 0;border-radius:8px;background:transparent;border:0;color:var(--muted);font-weight:800;font-size:.74rem;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,30,50,.12)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;margin-bottom:4px}
.chips::-webkit-scrollbar{height:0}
.chip{white-space:nowrap;font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink2);cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.kpis{display:flex;gap:8px;flex-wrap:wrap}
.kpi{flex:1;min-width:78px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 6px}
.kpi b{display:block;font-size:1.3rem;font-weight:900;letter-spacing:-.02em}
.kpi span{font-size:.56rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.flag{display:flex;gap:11px;background:var(--surface);border:1px solid var(--line);border-left-width:4px;border-radius:13px;padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.flag.sev-red{border-left-color:var(--red)} .flag.sev-amb{border-left-color:var(--amber)} .flag.sev-grn{border-left-color:var(--green)} .flag.sev-blu{border-left-color:var(--blue)}
.flag .fic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.flag .fic svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fic.red{background:var(--hi);stroke:var(--red)} .fic.amb{background:var(--hiamb);stroke:var(--amber)} .fic.grn{background:var(--higrn);stroke:var(--green)} .fic.blu{background:var(--hiblu);stroke:var(--blue)}
.flag .ft{font-weight:800;font-size:.9rem}
.flag .fs{color:var(--muted);font-size:.75rem;margin-top:2px;line-height:1.35}
.flag .fix{font-size:.75rem;margin-top:7px;line-height:1.4;background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:7px 9px}
.flag .fix b{color:var(--ink)}
.facts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.btn{font-weight:800;font-size:.74rem;padding:7px 12px;border-radius:9px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.rrow{display:flex;align-items:center;gap:11px;padding:11px;background:var(--surface);border:1px solid var(--line);border-radius:13px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.avs{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;color:#fff}
.rrow .nm{font-weight:800;font-size:.92rem}.rrow .sub{color:var(--muted);font-size:.72rem;margin-top:1px}
.pill{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:7px}
.pill.owe{color:#9a1228;background:var(--hi);border:1px solid #f3c6cf} .pill.ok{color:#157a52;background:var(--higrn);border:1px solid #bfe6d5}
.pill.flag{color:#9a6512;background:var(--hiamb);border:1px solid #f0d8ad}
.gpanel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:9px}
.gpanel .gh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.gpanel .gn{font-weight:800;font-size:.82rem}.gpanel .gv{font-weight:900;font-size:.92rem}
.gtrend{font-size:.66rem;font-weight:800} .up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--muted)}
.gband{font-size:.6rem;color:var(--muted);margin-top:3px}
.screen{position:fixed;inset:0;background:var(--bg);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;z-index:30}
.screen.on{transform:translateX(0)}
.sback{background:var(--surface);border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;display:flex;align-items:center;gap:10px;flex:none}
.loginwrap{padding:calc(env(safe-area-inset-top) + 12px) 6px 14px}
.body.logincenter{display:flex;flex-direction:column;justify-content:center}
.sback .b{font-size:1.4rem;cursor:pointer;color:var(--red);font-weight:800;line-height:1}
.sback .t{font-weight:900;font-size:1.05rem}
.ai{background:linear-gradient(180deg,#eaf1fc,#f7faff);border:1px solid #cfe0f6;border-radius:13px;padding:12px;font-size:.82rem;line-height:1.5;color:#243140;margin-bottom:12px}
.ai .tag{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:5px}
.placeholder{color:var(--muted);font-size:.82rem;text-align:center;padding:20px 14px;background:var(--panel);border:1px solid var(--line);border-radius:13px}
/* pinned to the REAL screen bottom (position:fixed) like the portal tab bar —
   this avoids the iOS standalone dvh gap that a flex child leaves at the bottom. */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(env(safe-area-inset-bottom) + 8px)}
.nav button{position:relative;flex:1;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:.56rem;font-weight:700;cursor:pointer;padding:3px 0}
.ndot{position:absolute;top:2px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--surface)}
.ndot.inline{position:static;display:inline-block;box-shadow:none;vertical-align:1px;margin-right:5px}
.nav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:var(--red)}
.nav .badge{position:relative}
.nav .badge::after{content:attr(data-n);position:absolute;top:-3px;right:-9px;background:var(--red);color:#fff;font-size:.5rem;font-weight:800;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.check{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:.9rem;cursor:pointer;background:var(--surface)}
.check.in{background:var(--green);border-color:var(--green)}
.check.out{background:var(--amber);border-color:var(--amber)}
.check.late{background:var(--red);border-color:var(--red)}
.check.lock{opacity:.45;cursor:default}
.ciflag{font-size:.5rem;font-weight:800;color:#8a6510;background:#fdf1dc;border:1px solid #ecd9a0;border-radius:4px;padding:1px 4px;margin-left:5px;letter-spacing:.02em}
.citri{width:18px;height:18px;vertical-align:-3px;margin-left:5px;flex:none}
.cisheet{background:#fff;border-radius:18px 18px 0 0;max-width:430px;width:100%;padding:18px 16px calc(env(safe-area-inset-bottom) + 22px);max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* long sheets (payment/smoothie history) scroll inside instead of running off-screen */
.paydot{width:9px;height:9px;border-radius:50%;flex:none;margin-right:2px}
.bstrip{display:flex;align-items:center;gap:10px;border:1px solid #eccf74;border-radius:11px;padding:9px 12px;margin-bottom:12px;background:linear-gradient(100deg,#fff7de 0,#fceeb9 100%);box-shadow:0 1px 4px rgba(184,134,11,.14)}
.bstrip .bcake{font-size:1.15rem;flex:none}
.bstrip .bmain{min-width:0;flex:1;display:flex;flex-direction:column}
.bstrip .bname{font-weight:800;font-size:.85rem;line-height:1.2;color:#5c4406}
.bstrip .bwhen{font-size:.68rem;font-weight:700;color:#a07a16;margin-top:1px}
.bdaytag{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#e0313f 0,#ff9d2e 100%);border-radius:999px;padding:3px 10px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 4px rgba(224,49,63,.3)}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:#1b2027;color:#fff;padding:10px 16px;border-radius:10px;font-size:.82rem;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.search{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-size:16px;margin-bottom:12px;color:var(--ink);-webkit-appearance:none;appearance:none} /* 16px stops iOS focus auto-zoom */
.search::placeholder{color:var(--muted)}
select.fld{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:12px} /* 16px stops iOS focus auto-zoom */
.spin{text-align:center;color:var(--muted);padding:30px;font-size:.85rem}
.keyb{font-size:1.3rem;font-weight:800;padding:16px 0;border-radius:12px}
.pindot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.pindot.on{background:var(--red);border-color:var(--red)}
a.plain{color:var(--blue);text-decoration:none;font-weight:700}