/* ═══════════ the rail: the dashboard's, and every page inside the app's ═══════════
   (shell.js builds it on the pages inside the app; dash.html has its own copy of the
   markup.) The rail is fixed, the content scrolls beside it, and on a phone the rail
   becomes a bottom bar — the shape every product of this kind converged on, for the
   reason that the primary action has to be reachable without reading anything. */
.rail{position:fixed;left:0;top:0;bottom:0;width:232px;z-index:40;display:flex;
  flex-direction:column;gap:6px;padding:18px 14px;background:var(--panel);
  border-right:1px solid var(--line)}
.rail[hidden]{display:none}
.raillogo{display:flex;align-items:center;gap:9px;padding:4px 8px 14px;text-decoration:none}
.raillogo img{width:26px;height:26px;display:block}
/* [stated, 2026-11-09] "LOGO MISSING FROM DASH": the mark alone read as an icon, not the name.
   The wordmark beside it, white on the dark rail and ink on the light one. */
.raillogo img.railwm{width:auto;height:13px}
.raillogo img.railwm-d{display:none}
:root[data-theme="light"] .raillogo img.railwm-w{display:none}
:root[data-theme="light"] .raillogo img.railwm-d{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .raillogo img.railwm-w{display:none}
  :root:not([data-theme="dark"]) .raillogo img.railwm-d{display:block}
}

/* The one thing this product is for, at the top of the rail and impossible to miss. */
.railnew{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;
  background:#1256E8;color:#fff;border-radius:11px;padding:11px 14px;font-size:14px;
  font-weight:600;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.railnew:hover{background:#1B61F5}
.railnew svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;flex:none}

.railnav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto}
.railitem{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;color:var(--mid);font-size:13.5px;
  transition:background .12s,color .12s}
.railitem:hover{background:var(--field);color:var(--ink)}
.railitem.on{background:var(--field);color:var(--ink);font-weight:600}
.railitem svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.85}
.railitem span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railc{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  background:var(--sunk,rgba(255,255,255,.06));border-radius:6px;padding:2px 6px}
.railitem.on .railc{color:var(--ink)}
.railfoot{display:flex;flex-direction:column;gap:6px;padding-top:10px;
  border-top:1px solid var(--line)}
.railfoot .acct-btn{width:100%;box-sizing:border-box}
/* An item that is a link (Booking link, Developers, Feedback — and every item on a page inside
   the app) looks like the rest: `body.doc a` would paint it the link blue and underline it. */
body.doc .rail a.railitem{color:var(--mid);text-decoration:none}
body.doc .rail a.railitem:hover,body.doc .rail a.railitem.on{color:var(--ink);text-decoration:none}
body.doc .rail a.raillogo:hover{text-decoration:none}


/* A page inside the app (shell.js): the rail's room kept from the first frame, the
   marketing site's top menu not drawn. The page's own column centres in what is left. */
html.withrail body{padding-left:232px}
html.withrail body > nav.docnav{display:none}
.raillogo-m{display:none}
.apprail .railitem{box-sizing:border-box}

/* ═══════════ the phone ═══════════
   Five destinations in a bottom bar and the primary action as a floating button above
   it — the shape every phone app of this kind uses, and for the reason that a bar
   trying to hold seven items plus a labelled button either scrolls (so the first item
   is invisible, which is what happened to Home) or wraps onto two rows. The overflow
   destinations live under More, where a list can be read. */
@media (max-width:900px){
  .rail{left:0;right:0;top:auto;bottom:0;width:auto;flex-direction:row;flex-wrap:nowrap;
    align-items:center;gap:4px;padding:6px 10px 6px 4px;
    border-right:0;border-top:1px solid var(--line);overflow:visible}
  /* Own declaration, with a fallback argument: a browser that doesn't know env()
     drops this line and keeps the plain padding above rather than dropping both. */
  .rail{padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .raillogo{display:none}
  .railnav{flex-direction:row;flex:1;min-width:0;overflow:visible;gap:0}
  .railitem{flex:1;min-width:0;flex-direction:column;gap:3px;padding:6px 2px;
    font-size:10px;border-radius:9px}
  .railitem span{max-width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis}
  .railc{display:none}
  /* Past the fifth, destinations move under More rather than shrinking to nothing.
     They are hidden in the bar and shown again once they are inside the sheet. */
  .railitem.overflow{display:none}
  .railmore .railitem.overflow{display:flex}
  .railmore{position:fixed;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));
    z-index:41;background:var(--panel);border:1px solid var(--line);border-radius:16px;
    padding:8px;box-shadow:0 -10px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:2px}
  .railmore[hidden]{display:none}
  .railmore .railitem{flex-direction:row;flex:none;font-size:14px;padding:11px 13px;gap:11px}
  .railmore .railitem span{text-align:left}

  /* The primary action floats clear of the bar so it never competes for it for width.
     Not on Home, though — Home already leads with a full-width "Start a meeting", and a
     floating button on top of it is the same action twice. */
  .railnew{position:fixed;right:16px;bottom:118px;z-index:42;margin:0;padding:14px 18px;
    border-radius:999px;font-size:14px;box-shadow:0 10px 30px rgba(18,86,232,.42)}
  .railnew{bottom:calc(118px + env(safe-area-inset-bottom, 0px))}
  .railfoot{position:static;flex-direction:row;padding:0;border:0;margin:0;flex:none;
    align-items:center}
  .railfoot #railImport{display:none}
  .railfoot .acct-btn{padding:6px;border:0}
  .railfoot .acct-btn span:not(.initial){display:none}
  .railitem span{flex:none}
  /* the logo, at the top left, where the rail's was */
  html.withrail body{padding-left:0;padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
  body.hasrail > .raillogo-m{display:block;width:30px;height:30px;margin:14px 0 0 15px}
  .raillogo-m img{display:block;width:30px;height:30px}
  /* "← Dashboard" says what the logo above it and Home under the thumb already do */
  html.withrail a.back[href="/dash"]{display:none}
  /* the floating New meeting is the dashboard Home's; a page inside the app has the bar */
  .apprail .railnew{display:none}
  .apprail .railimport{display:none}
}