/* The one sidebar, on every page.

   These rules were `.sp-dispatch2 .rail` in dispatch.css — scoped to the
   dispatch board, which is exactly why the dashboard could never wear them.
   Moved here unscoped and renamed .side-rail so there is one definition;
   components/SideRail.tsx is the only thing that draws it. */
.side-rail{
  background:var(--graphite);display:flex;flex-direction:column;align-items:center;
  padding:16px 8px;gap:6px;font-family:var(--font-body);
}
.side-rail .mark{width:30px;height:30px;background:var(--yellow);border-radius:7px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--graphite,#1B2127);
  text-decoration:none;flex:none;}
.side-rail nav{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center;}
.side-rail nav a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:9px;color:#B9C2BC;text-decoration:none;font-size:15px;position:relative;}
.side-rail nav a:hover{background:#232A31;color:#fff;}
.side-rail nav a.active{background:#232A31;color:#fff;box-shadow:inset 3px 0 0 var(--yellow);}
.side-rail nav a .tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);
  background:var(--graphite-2,#262D34);color:#fff;font-size:11px;font-weight:600;padding:5px 9px;
  border-radius:6px;white-space:nowrap;display:none;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.side-rail nav a:hover .tip,.side-rail nav a:focus-visible .tip{display:block;}

/* The dashboard's shell was built around a 244px sidebar. The rail is 64px,
   and stays 64px at every width above the phone breakpoint — the old sidebar
   vanished entirely under 760px, which left that page with no navigation at
   all on a phone. */
.app-shell.app-shell-rail{grid-template-columns:64px minmax(0,1fr);}
@media(max-width:1050px){.app-shell.app-shell-rail{grid-template-columns:64px minmax(0,1fr);}}

/* ============================================================
   The phone: navigation moves to the bottom of the screen.

   THE PHONE BREAKPOINT IS 700px, everywhere. It is the one number this
   product should be adding new phone rules at — the estate had ten
   (560/600/620/700/760/820/900/950/1050/1100) and no two files agreed.

   Why the bottom and not the side: 64px is 16% of a 390px screen, and the
   rail names its items in a :hover tooltip, which a finger cannot produce.
   A column of ten unlabelled glyphs was the result. Along the bottom there
   is room for a label under each icon, it is where a thumb already is, and
   four items plus More is what fits without shrinking below a 44px target.
   ============================================================ */
.tabbar{display:none;}
.tabbar-sheet,.tabbar-backdrop{display:none;}

@media(max-width:700px){
  .app-shell.app-shell-rail{grid-template-columns:minmax(0,1fr);}
  .app-shell.app-shell-rail>.side-rail{display:none;}
  /* The dispatch board carries its own shell (.sp-dispatch2 .app) rather than
     .app-shell, and dispatch.css loads AFTER this file -- an equally specific
     rule here loses to it. Its phone shell therefore lives in dispatch.css,
     next to the board's own rules. Hiding the rail while leaving the 64px
     track in place puts <main> INTO that track: the page renders one word per
     line in a 64px column, which is how this was found. */

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--graphite);border-top:1px solid #2C343B;
    /* Home-indicator safe area on iOS: without it the last 34px of the bar
       sits under the system gesture strip and the icons are unpressable. */
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    font-family:var(--font-body);
  }
  .tabbar a,.tabbar button{
    flex:1 1 0;min-width:0;min-height:48px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:transparent;border:0;padding:4px 2px;cursor:pointer;
    color:#98A29B;text-decoration:none;font:inherit;
  }
  .tabbar a.active,.tabbar button.active{color:#fff;}
  .tabbar a.active .tabbar-icon,.tabbar button.active .tabbar-icon{
    background:#232A31;box-shadow:inset 0 2px 0 var(--yellow);
  }
  .tabbar-icon{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:26px;border-radius:8px;font-size:15px;line-height:1;
  }
  .tabbar-label{
    font-size:10px;font-weight:650;letter-spacing:.01em;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* Nothing may end up underneath the bar. Every shell that scrolls its own
     content needs the clearance, hence the list rather than one rule. */
  .app-shell.app-shell-rail .content,
  .app-shell.app-shell-rail .office-page,
  .sp-dispatch2 main,
  .jp-page{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));}

  .tabbar-backdrop{
    display:block;position:fixed;inset:0;z-index:61;background:rgba(18,24,29,.5);
  }
  .tabbar-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:62;
    background:var(--paper);border-radius:14px 14px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 30px rgba(18,24,29,.28);max-height:80vh;overflow-y:auto;
  }
  .tabbar-sheet h2{
    margin:0 0 10px;font:600 10px var(--font-display);
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .tabbar-sheet a{
    display:flex;align-items:center;gap:12px;min-height:48px;
    padding:0 6px;border-top:1px solid var(--line);
    color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;
  }
  .tabbar-sheet a:first-of-type{border-top:0;}
  .tabbar-sheet a.active{color:var(--ink);box-shadow:inset 3px 0 0 var(--yellow);}
  .tabbar-sheet a span{
    width:30px;text-align:center;color:var(--muted);font-size:15px;
  }
  .tabbar-sheet-close{
    width:100%;min-height:46px;margin-top:14px;border:1px solid var(--line);
    border-radius:10px;background:var(--paper);color:var(--ink);
    font:inherit;font-weight:700;cursor:pointer;
  }
}

/* ---- Who is signed in ----------------------------------------------------
   At the foot of the rail, pushed there rather than placed: margin-top:auto
   keeps it below however many nav items exist. Initials because the rail is
   64px; the name and email live in the panel. Renders only when somebody
   actually is signed in -- a book on the shared password has no person to
   name, and an empty circle on every existing deployment is worse than the
   gap it fills. */
.side-rail .rail-user{margin-top:auto;padding-top:10px;position:relative;}
.side-rail .rail-user-chip{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:#2C343C;color:#E7ECF2;font:800 11.5px/1 var(--font-body);letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;position:relative;}
.side-rail .rail-user-chip:hover{background:var(--yellow);color:var(--graphite,#1B2127);}
.side-rail .rail-user-chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}
/* Same hover label the nav items use, so the rail has one convention. */
.side-rail .rail-user-chip .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%);
  display:none;background:#232A31;color:#fff;padding:5px 9px;border-radius:6px;
  font:600 12px var(--font-body);white-space:nowrap;letter-spacing:0;z-index:60;}
.side-rail .rail-user-chip:hover .tip,
.side-rail .rail-user-chip:focus-visible .tip{display:block;}

/* Fixed, not absolute: the rail clips its own overflow, and a panel that is
   taller than a 34px circle would be cut off inside it. */
.side-rail .rail-user-backdrop{position:fixed;inset:0;z-index:70;}
.side-rail .rail-user-panel{position:fixed;left:72px;bottom:16px;z-index:71;
  background:var(--paper,#fff);border:1px solid var(--line,#DCE4EE);border-radius:11px;
  padding:14px 16px;min-width:210px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 10px 30px rgba(16,24,32,.18);}
.side-rail .rail-user-panel b{font-size:14px;color:var(--ink,#172B4D);}
.side-rail .rail-user-panel span{font-size:12.5px;color:var(--muted,#6B7C96);
  font-family:var(--font-mono),ui-monospace,monospace;word-break:break-all;}
.side-rail .rail-user-panel a{margin-top:9px;font-size:12.5px;color:var(--ink,#172B4D);
  text-decoration:none;border-bottom:1px solid var(--line,#DCE4EE);padding-bottom:7px;}
.side-rail .rail-user-panel a:hover{border-bottom-color:var(--ink,#172B4D);}
.side-rail .rail-user-panel button{margin-top:9px;border:1px solid var(--line,#DCE4EE);
  background:var(--paper,#fff);color:var(--ink,#172B4D);border-radius:7px;padding:7px 11px;
  font:600 12.5px var(--font-body);cursor:pointer;}
.side-rail .rail-user-panel button:hover{background:#F4F7FA;}