/* Shared workspace navigation — top company picker + section rail */

body.ws-page-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ws-page-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  flex: none;
}
.ws-page-topbar .brand-sub { margin-left: 4px; }
a.brand-home { text-decoration: none; color: inherit; display: inline-flex; align-items: baseline; gap: 4px; }
a.brand-home:hover { opacity: 0.88; }
.ws-top-div {
  width: 1px;
  height: 22px;
  background: var(--border-2);
  flex: none;
}
.ws-top-spacer { flex: 1; }

.co-picker {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 180px;
  color: var(--ink-0);
  font-size: 13px;
  font-family: inherit;
}
.co-picker:focus { outline: none; border-color: var(--accent-cyan); }

.add-co {
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.add-co:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.ws-page-shell-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--ws-rail-w, 52px) 1fr;
  min-height: 0;
  overflow: hidden;
}
.ws-page-shell-main.ws-rail-expanded { --ws-rail-w: 212px; }
.ws-page-shell-main > * { min-height: 0; min-width: 0; }

/* CONTRACT: this pane is height-locked, so every page inside the shell MUST
   supply its own scroller. overflow:hidden is deliberate — the topbar and rail
   stay put while the page scrolls beneath them — but it means content taller
   than the pane is silently UNREACHABLE, with no scrollbar and no touch scroll.
   Nothing fails loudly; it just gets cut off, and it bites hardest on short
   viewports (an iPad) and in the workspace iframe, where the frame is a fixed
   height the parent .center-scroll cannot grow.
   Adopt the shell, add a scroller in the same PR. Three shapes are in use:
     - a wrapper inside the pane   → board-prep.css .bp-scroll
     - the pane itself, co-classed → today.css .tdy-shell, deliverables.css .dlv-page
     - the pane, page-scoped       → metrics-coverage.css .ws-page-content
   #244 adopted the shell and touched only the .html/.js, never the .css — that
   stranded every alpha reviewer past the fold of the Metrics page. */
.ws-page-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ws-section-rail .rail-pct {
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
}

.ws-rail-nav-count {
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(52, 211, 153, .15);
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.ws-section-rail.expanded .ws-rail-nav-count { margin-left: auto; }

/* Workspace iframe embed — hide chrome, keep page content */
body.yel-workspace-embed > header.topbar,
body.yel-workspace-embed .ws-page-topbar,
body.yel-workspace-embed .ws-section-rail { display: none !important; }
body.yel-workspace-embed .ws-page-shell-main { grid-template-columns: 1fr; }
body.yel-workspace-embed .ws-page-content { min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════
   Mobile-only injected elements — hidden on desktop
═══════════════════════════════════════════════════════════ */
.mob-menu-btn    { display: none; }
.mob-avatar-btn  { display: none; }
.mob-feedback-btn { display: none; }
.mob-topbar-right { display: none; }
.mob-account-wrap { display: none; }
.mob-account-menu { display: none; }
.mob-nav-overlay { display: none; }
.mob-nav-drawer  { display: none; }

/* ═══════════════════════════════════════════════════════════
   Mobile — iPhone (≤ 430 px)
   Applies to all ws-page-shell pages:
   today, scenario, history, settings, connections, etc.
═══════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── topbar: first row = hamburger | brand | avatar ── */
  .ws-page-topbar {
    flex-wrap: wrap;
    padding: 0;
    min-height: 52px;
    gap: 0;
    align-items: center;
  }

  /* hide desktop chrome from topbar row 1 */
  .ws-page-topbar > .ws-top-div,
  .ws-page-topbar > .ws-top-spacer,
  .ws-page-topbar > .add-co,
  .ws-page-topbar > .meta,
  .ws-page-topbar > form,
  .ws-page-topbar > [data-global-nav],
  .ws-page-topbar > .brand-sub,
  .ws-page-topbar > .share-fb-btn { display: none !important; }

  /* brand fills the center of row 1 */
  .ws-page-topbar > .brand,
  .ws-page-topbar > a.brand-home {
    flex: 1;
    text-align: center;
    height: 52px;
    line-height: 52px;
    pointer-events: none;
  }
  .ws-page-topbar a.brand-home { display: inline-flex; justify-content: center; }

  /* co-picker wraps to its own full-width row 2 */
  .ws-page-topbar > .co-picker {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    border-top: 1px solid var(--border-2);
    border-left: none;
    border-right: none;
    padding: 12px 16px;
    font-size: 15px;
  }

  /* ── hamburger button (injected by nav.js) ── */
  .mob-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 52px;
    flex: none;
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-size: 18px;
    cursor: pointer;
    padding: 0 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-menu-btn:active { color: var(--ink-0); }

  /* ── topbar right cluster: share feedback (alpha) + account menu ── */
  .mob-topbar-right {
    display: flex;
    align-items: center;
    flex: none;
    margin-left: auto;
    height: 52px;
    padding-right: 4px;
  }

  .mob-feedback-btn,
  .mob-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    background: transparent;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
  }
  .mob-feedback-btn { display: none; }
  html.alpha-mode .mob-feedback-btn { display: flex; }
  .mob-feedback-btn:active,
  .mob-avatar-btn:active { color: var(--ink-0); background: var(--bg-2); }

  .mob-account-wrap {
    display: block;
    position: relative;
  }

  .mob-account-menu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    z-index: 210;
    overflow: hidden;
  }
  .mob-account-menu[hidden] { display: none !important; }

  .mob-account-item {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--ink-1);
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
  }
  .mob-account-item:active { background: var(--bg-2); color: var(--ink-0); }
  .mob-account-signout {
    color: var(--ink-3);
    border-top: 1px solid var(--border-2);
  }

  /* ── hide the section rail (it lives in the nav drawer instead) ── */
  .ws-section-rail { display: none !important; }

  /* ── single-column content layout ── */
  .ws-page-shell-main { grid-template-columns: 1fr !important; }

  /* ── allow body to scroll on mobile ── */
  body.ws-page-shell { overflow: auto; }

  /* ── nav overlay backdrop ── */
  .mob-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .mob-nav-overlay.open { opacity: 1; pointer-events: auto; }

  /* ── slide-in nav drawer ── */
  .mob-nav-drawer {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 85vw);
    background: var(--bg-1);
    border-right: 1px solid var(--border-2);
    z-index: 201;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .mob-nav-drawer.open { transform: translateX(0); }

  .mob-nav-head {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--border-2);
    flex: none;
  }
  .mob-nav-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-2);
    letter-spacing: 0.06em;
  }
  .mob-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-close:active { color: var(--ink-0); }

  .mob-nav-items {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
  }
  .mob-nav-group-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 14px 16px 4px;
  }
  .mob-nav-link {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    font-size: 14px;
    color: var(--ink-2);
    text-decoration: none;
    border-left: 3px solid transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-link.on { color: var(--ink-0); background: var(--bg-2); border-left-color: var(--accent); }
  .mob-nav-link:active { background: var(--bg-2); color: var(--ink-0); }
}