/* Layout.
   Coach: a side rail with the five places a coach goes (icon + word), and a wide working area.
   Runner: one column, a photo header, and on phones a bottom tab bar within thumb reach. */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.side{background:var(--navy);color:var(--navy-ink);padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh;align-self:start}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.brand b{font-family:var(--font-brand);font-size:2.4rem;font-weight:700;line-height:.9;letter-spacing:.02em}
.brand b em{font-style:normal;color:var(--energy)}
.brand span{font-size:.8rem;opacity:.7}
.lanes{display:flex;flex-direction:column;gap:4px}
.lane{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:0;background:none;cursor:pointer;text-align:start;color:inherit;opacity:.78;font-weight:600;font-size:.98rem;min-height:44px}
.lane span:first-of-type{flex:1}
.lane:hover{opacity:1;background:rgb(255 255 255 / .07)}
.lane[aria-current="page"]{opacity:1;background:rgb(79 174 224 / .18);color:var(--navy-ink);box-shadow:inset -3px 0 0 var(--sky)} /* the bar sits on the start (right) side */
.lane .count{font-family:var(--font-data);font-size:.78rem;background:var(--energy);color:var(--energy-ink);border-radius:99px;padding:1px 8px;font-weight:700}
.side-foot{margin-top:auto;font-size:.85rem;opacity:.75;padding:0 10px;display:flex;align-items:center;gap:10px}
.main{padding-block:28px 72px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));min-width:0}
.wrap{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:30px}

/* runner: one column */
.solo{max-width:780px;margin:0 auto;padding-block:20px 72px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:24px}
.preview-bar{background:var(--energy);color:var(--energy-ink);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:.9rem;font-weight:600}
.preview-bar .btn{background:var(--energy-ink);color:#fff;border-color:var(--energy-ink)}

/* tabs: a segmented bar of places inside a page */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:12px;overflow-x:auto;scrollbar-width:none;align-self:stretch}
.tab{border:0;background:none;padding:8px 14px;cursor:pointer;color:var(--muted);font-weight:600;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:40px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.back{align-self:flex-start}

/* runner bottom bar (phones) */
.bottom-nav{display:none}
@media (max-width:760px){
  .runner-tabs{display:none}
  .bottom-nav{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);
    padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));justify-content:space-around}
  .bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--muted);font-size:.72rem;font-weight:600;padding:6px 2px;border-radius:10px;min-height:52px;position:relative}
  .bottom-nav button[aria-selected="true"]{color:var(--accent)}
  .bottom-nav .dot{position:absolute;top:6px;inset-inline-end:calc(50% - 16px)}
  .solo{padding-bottom:96px}
}

/* coach on narrow screens: the rail becomes a top bar */
@media (max-width:900px){
  .shell{display:block}
  .side{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;height:auto;flex-direction:row;align-items:center;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));gap:10px}
  .brand{padding:0 4px}
  .brand b{font-size:1.7rem}
  .brand span{display:none}
  /* only the sign-out button stays, at the end of the bar */
  .side-foot{margin:0;padding:0;opacity:1;flex-shrink:0}
  .side-foot>:not([data-act="signOut"]){display:none}
  .lanes{flex-direction:row;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .lane{white-space:nowrap;padding:8px 10px}
  .main{padding-block:18px 56px}
}
@media (max-width:520px){.lane span:first-of-type{display:none}.lane{gap:6px}}