/* Coach shell. Target device is the iPad (1032 landscape / 834 portrait), so
   the rail stays a real sidebar at every working width — no floating
   hamburger, ever. It collapses from a control inside itself. */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(circle at 86% 0,rgba(185,120,0,.14),transparent 28rem),var(--ffz-bg);
  color:var(--ffz-text);
  font-family:var(--ffz-font);
  font-size:14px;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ffz-gold-light);outline-offset:3px}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
del{color:var(--ffz-muted)}

.app{display:grid;grid-template-columns:var(--ffz-rail) minmax(0,1fr);min-height:100vh}
.app.is-collapsed{grid-template-columns:var(--ffz-rail-collapsed) minmax(0,1fr)}

/* ---- left rail ---------------------------------------------------- */
.rail{
  position:sticky;top:0;height:100vh;overflow:auto;z-index:5;
  display:flex;flex-direction:column;gap:var(--ffz-gap);
  padding:20px 16px;
  border-right:1px solid rgba(255,189,22,.22);
  background:linear-gradient(180deg,#0c0b08 0,#050505 55%,#090704 100%);
}
.rail-brand{display:flex;align-items:center;gap:11px;min-height:56px;padding:0 4px}
.rail-brand img{width:48px;height:48px;object-fit:contain}
.rail-brand strong{display:block;font-size:15px;letter-spacing:.03em}
.rail-brand small{display:block;color:var(--ffz-gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

.rail-toggle{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;
  width:100%;min-height:52px;padding:6px 11px;
  border:1px solid #343434;border-radius:13px;
  background:#080808;color:var(--ffz-muted);
  font-weight:600;font-size:13px;text-align:left;
}
.rail-toggle i{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid #5f4710;border-radius:11px;
  color:var(--ffz-gold-light);font-style:normal;line-height:0;
}
.rail-toggle svg{transition:transform .16s}
.app.is-collapsed .rail-toggle svg{transform:rotate(180deg)}
.rail-label{margin:2px 8px 0;color:#736d63;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

.nav{display:grid;gap:6px}
.nav button{
  position:relative;
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;
  width:100%;min-height:56px;padding:9px 11px;
  border:1px solid transparent;border-radius:var(--ffz-radius-control);
  background:transparent;color:#d6d2c9;
  font-weight:600;font-size:16px;text-align:left;
}
.nav button i{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid #383838;border-radius:11px;
  color:#bbb;font-style:normal;line-height:0;
}
.nav button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button.is-active{
  border-color:#a97608;background:var(--ffz-surface-gold);color:var(--ffz-gold-light);
  box-shadow:inset 4px 0 var(--ffz-gold);
}
.nav button.is-active i{border-color:#76550d;color:var(--ffz-gold-light)}

/* Who is signed in — coaches share iPads, so the rail always says whose
   diary is on screen. */
.rail-who{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px;
  border:1px solid var(--ffz-line);border-radius:var(--ffz-radius-control);
  background:#080808;
}
.rail-photo-edit{display:grid;place-items:center;flex:none;width:44px;height:44px;overflow:hidden;padding:0;border:1px solid var(--ffz-line-gold);border-radius:50%;background:#090909;color:var(--ffz-gold);font-size:9px}
.rail-photo-edit img{width:100%;height:100%;object-fit:cover}
.rail-who b{display:block;font-size:13px}
.rail-who small{display:block;color:var(--ffz-muted);font-size:10px}

.app.is-collapsed .rail{padding-inline:10px}
.app.is-collapsed .rail-brand strong,
.app.is-collapsed .rail-brand small,
.app.is-collapsed .rail-toggle span,
.app.is-collapsed .rail-label,
.app.is-collapsed .rail-who div,
.app.is-collapsed .nav button span{display:none}
.app.is-collapsed .rail-brand,
.app.is-collapsed .rail-who{justify-content:center}
.app.is-collapsed .rail-toggle,
.app.is-collapsed .nav button{grid-template-columns:1fr;justify-items:center}

/* ---- main column --------------------------------------------------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;gap:var(--ffz-gap-sm);
  padding:12px 18px;
  border-bottom:1px solid var(--ffz-line);
  background:rgba(2,2,2,.92);
}
.topbar-title{min-width:0}
.topbar-title b{display:block;font-size:15px}
.topbar-title small{display:block;color:var(--ffz-muted);font-size:11px}
.topbar-spacer{flex:1}
.topbar-clock{font-family:var(--ffz-font-num);font-size:22px;color:var(--ffz-gold-light);white-space:nowrap}

.screen{flex:1;min-width:0;padding:18px}
.stack{display:grid;gap:12px}
/* Grid items default to min-width:auto, so a nowrap strip inside a card widens
   the whole page instead of scrolling in place. */
.stack>*,.grid-2>*,.grid-3>*,.split>*{min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* The coach dashboard reads as "what is happening now" on the left and
   "what needs me" on the right. */
.split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}

/* iPad portrait (834) — one column, rail stays */
@media (max-width:900px){
  .split,.grid-3{grid-template-columns:minmax(0,1fr)}
  .grid-2{grid-template-columns:minmax(0,1fr)}

  /* While a session is open on the narrower iPad the rail gives its width to
     the split view — at 834 a full rail leaves the sets column around 200px,
     which is too narrow to type into. Icons stay, so every screen is still
     one tap away. */
  .app.in-session{grid-template-columns:var(--ffz-rail-collapsed) minmax(0,1fr)}
  .app.in-session .rail{padding-inline:10px}
  .app.in-session .rail-brand strong,
  .app.in-session .rail-brand small,
  .app.in-session .rail-toggle span,
  .app.in-session .rail-label,
  .app.in-session .rail-who div,
  .app.in-session .nav button span{display:none}
  .app.in-session .rail-brand,
  .app.in-session .rail-who{justify-content:center}
  .app.in-session .rail-toggle,
  .app.in-session .nav button{grid-template-columns:1fr;justify-items:center}
}

/* Phone fallback: the coach phone build is not designed yet, but the shell
   must not break if someone opens it — rail drops to a bottom bar. */
@media (max-width:680px){
  .app,.app.is-collapsed{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;border-top:1px solid rgba(255,189,22,.22);
    z-index:30;
  }
  .rail-brand,.rail-toggle,.rail-label,.rail-who{display:none}
  .nav{grid-template-columns:repeat(5,1fr);gap:4px}
  .nav button{grid-template-columns:1fr;justify-items:center;gap:3px;min-height:58px;padding:7px 2px}
  .nav button.is-active{box-shadow:inset 0 3px var(--ffz-gold)}
  .nav button span{display:block;width:100%;font-size:10px;text-align:center}
  .nav button i{width:30px;height:30px;border-radius:9px}
  .screen{padding:14px 14px 86px}
}