/* The shell every Snappy page shares in the glass look: the left rail
   (desktop), plus, on pages outside the app, the glass top bar and the phone
   tab bar. Loaded by the app (with glass.css) and by every other page (with
   glass-pages.css), so the menu is one piece of code everywhere. */

/* ── The admin's left rail (desktop). Phones keep the app's bottom bar. ── */
.g-rail { display: none; }
@media (min-width: 1100px) {
  .g-rail {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: fixed; z-index: 1001; left: 14px; top: 14px; bottom: 14px; width: 76px; padding: 14px 0;
    background: rgba(36, 38, 46, 0.66); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 26px;
    backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow-y: auto;
  }
  .g-rail .g-logo { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px; }
  .g-rail button {
    width: 62px; border: 0; border-radius: 14px; background: transparent; color: #a3a8b5; cursor: pointer;
    padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    font: 600 10px 'Plus Jakarta Sans', system-ui, sans-serif; transition: background .2s, color .2s;
  }
  .g-rail button svg { width: 20px; height: 20px; }
  .g-rail button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
  /* #2770c0, a shade under the brand blue: white 10.5px text on #2D7DD2 is
     4.2:1, under the 4.5:1 WCAG AA needs for small text; this is 5.0:1. */
  .g-rail button.on { background: #2770c0; color: #fff; box-shadow: 0 6px 20px rgba(45, 125, 210, 0.45); }

  .g-rail .g-logo-link { display: block; }

  /* The admin's 🛠 test panel (app.js, pinned bottom-left) sat on top of the
     rail's Account button: start it just past the rail's right edge instead. */
  #adminPanel { left: 106px !important; }
}

/* ── Top bar + phone tab bar for pages outside the app ── */
.g-top {
  position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: rgba(30, 31, 37, 0.62); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.g-top-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #f4f5f8; }
.g-top-brand img { width: 34px; height: 34px; border-radius: 10px; }
.g-top-brand b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.g-top-title { flex: 1; min-width: 0; color: #f4f5f8; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.g-top-cta { margin-left: auto; flex-shrink: 0; background: #2D7DD2; color: #fff !important; text-decoration: none !important;
  font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(45, 125, 210, 0.45); }
.g-top-cta:hover { background: #3a8ae0; }
@media (min-width: 1100px) {
  .g-top { left: 96px; padding: 0 22px 0 26px; }
  .g-top-brand { display: none; }
  .g-top-title { display: block; }
}
@media (max-width: 420px) { .g-top-cta { font-size: 12.5px; padding: 9px 12px; } }

.g-tabs {
  position: fixed; z-index: 999; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: 66px;
  display: flex; justify-content: space-around; align-items: center; gap: 2px; padding: 0 4px;
  background: rgba(32, 33, 40, 0.9); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px;
  backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.g-tabs button { flex: 1 1 0; height: 54px; border: 0; border-radius: 14px; background: transparent; color: #a3a8b5; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 0 5px !important;
  font: 600 10.5px 'Plus Jakarta Sans', system-ui, sans-serif; transition: background .2s, color .2s; }
.g-tabs button svg { width: 22px; height: 22px; }
.g-tabs button.on { background: #2D7DD2; color: #fff; box-shadow: 0 6px 20px rgba(45, 125, 210, 0.45); }
@media (min-width: 1100px) { .g-tabs { display: none; } }

/* Some pages set `body > * { position: relative }` (with an id selector, so it
   outranks a class); the shell must stay pinned. */
body > .g-top, body > .g-tabs, body > .g-rail { position: fixed !important; }
body > .g-top { z-index: 1000 !important; }
body > .g-tabs { z-index: 999 !important; }
body > .g-rail { z-index: 1001 !important; }

/* Pages with their own svg/button rules must not resize the shell's icons. */
.g-tabs button svg { width: 22px !important; height: 22px !important; flex-shrink: 0; display: block; }
.g-rail button svg { width: 20px !important; height: 20px !important; flex-shrink: 0; display: block; }
.g-tabs button, .g-rail button { margin: 0 !important; min-width: 0 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Rail: main tabs, a divider, then the rest; Account sits at the bottom */
.g-rail-div { display: block; width: 34px; height: 1px; margin: 8px 0; background: rgba(255,255,255,.12); flex: none; }
@media (min-width: 1100px) {
  .g-rail button[data-k="me"] { margin-top: auto !important; }
  .g-rail button span { font-size: 10.5px !important; }
}

@media (min-width: 1100px) {
  /* Other pages' top bar: greeting over the page name, credits on the right */
  .g-top-title { display: flex !important; flex-direction: column; line-height: 1.2; }
  .g-top-title b { font-size: 17px; font-weight: 800; color: #f4f5f8; }
  .g-top-title span { font-size: 12.5px; font-weight: 500; color: #a3a8b5; }
  .g-top-credits { margin-left: auto; flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25);
    color: #a3a8b5; font: 600 12.5px 'Plus Jakarta Sans', system-ui, sans-serif; }
  .g-top-credits b { color: #f4f5f8; font-weight: 800; }
  .g-top-credits:not([hidden]) + .g-top-cta { margin-left: 10px; }
}

/* The Install banner button: same contrast fix (white on #2D7DD2 is 4.2:1).
   Specific enough to beat dark.css's generated colour rule. */
html:root .install-banner .install-btn { background: #2770c0; color: #fff; }