/* Public Home plus the current member's own organizations. Separate from each
   organization's navigation, so collapsing that sidebar never hides Home. */
.org-rail {
  width: 64px; flex: 0 0 64px; height: 100dvh; min-height: 0;
  position: sticky; top: 0; align-self: flex-start; z-index: 41;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 8px; overflow-y: auto; background: var(--surface-sunken);
  border-right: 1px solid var(--border-default); font-family: var(--font-sans);
}
.org-rail .org-rail-item {
  position: relative; display: flex; flex: none; align-items: center;
  justify-content: center; flex-direction: column; gap: 4px; width: 46px;
  min-height: 46px; padding: 8px 4px; border: 1px solid var(--border-default);
  border-radius: 12px; background: var(--surface-primary); color: var(--text-secondary);
  text-decoration: none; cursor: pointer; transition: background .12s, border-radius .12s;
}
.org-rail .org-rail-item:hover, .org-rail .org-rail-item:focus-visible {
  border-radius: 8px; background: var(--surface-raised); color: var(--text-primary);
}
.org-rail .org-rail-item:focus-visible { outline: 2px solid var(--status-warn); outline-offset: 2px; }
.org-rail .org-rail-item.active { color: var(--text-primary); border-color: var(--status-warn); }
.org-rail .org-rail-item.active::before {
  content: ''; position: absolute; left: -9px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--status-warn);
}
.org-rail-mark { display: flex; align-items: center; justify-content: center; width: 32px; }
.org-rail-mark svg { display: block; width: 30px; height: auto; }
.org-rail-mark .b-grid { display: none; }
/* the caption sits centered under the mark whatever its width (roneil 2026-10-05) */
.org-rail-caption { font-size: 10px; line-height: 14px; font-weight: 500; width: 100%; text-align: center; }
.org-rail-initial { font-size: 13px; line-height: 20px; font-weight: 600; }
.org-rail-divider { width: 24px; height: 1px; flex: none; background: var(--border-default); }
/* an organization's own mark (Settings → Organization, app/org_logo_api.py):
   the tile IS the image — no padding, the item's radius clips it, the
   active ring and hover radius still read on the border */
.org-rail .org-rail-item.has-logo { padding: 0; overflow: hidden; background: var(--surface-primary); }
.org-rail .org-rail-item.has-logo .org-rail-initial { display: none; }
.org-rail-logo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: inherit; }
.org-rail .org-rail-create { border-style: dashed; background: transparent; }
.org-rail-create svg { flex: none; }
/* the account tile (roneil 2026-10-05 evening; v2 mihai 2026-10-06): the member's
   own square at the rail's foot — the person mark in the organization tile's dress
   (roneil 2026-10-05: "the little guy", never the account's initial), the same mark
   for a signed-out visitor (the door); the menu itself is the sidebar macro's popover
   (#user-menu, _sidebar.html .user-pop) beside it. Open = the amber ring an active
   organization wears. */
.org-rail-foot { margin-top: auto; flex: none; display: flex; flex-direction: column;
  align-items: center; padding-top: 10px; }
.org-rail .org-rail-user { font: inherit; appearance: none; background: var(--surface-primary);
  color: var(--text-primary); }
.org-rail .org-rail-user svg { display: block; width: 22px; height: 22px; flex: none; }
.org-rail .org-rail-user[aria-expanded="true"] { border-color: var(--status-warn);
  color: var(--text-primary); background: var(--surface-raised); }
/* under the drawer breakpoint (<=900px since 2026-10-06; _sidebar.html owns
   the number): the rail rides INSIDE the navigation drawer (roneil 2026-10-05)
   — parked off-canvas with the sidebar and sliding in beside it on the
   hamburger (body.side-open, _sidebar.html sideNav), so every page keeps the
   whole viewport width; the menubar still names the organization. Before,
   the rail held 56px of every phone screen. */
@media (max-width: 900px) {
  .org-rail { position: fixed; top: 0; left: 0; z-index: 61; height: 100dvh;
    width: 56px; flex-basis: 56px; padding-top: 10px;
    transform: translateX(-100%); transition: transform .18s ease; }
  body.side-open .org-rail { transform: none; }
  .org-rail .org-rail-item { width: 40px; min-height: 40px; }
  /* the sidebar drawer sits to the rail's right; at least 44px of scrim
     stays tappable past the pair (which fits a 320px screen) */
  /* a general sibling, not adjacent: the account popover's card sits
     between the rail and the sidebar in the layout (v2, mihai 2026-10-06) */
  .layout > .org-rail ~ aside { --drawer-offset: 56px;
    width: min(296px, calc(100vw - 56px - 44px)); }
}
/* touch, in the drawer (roneil 2026-10-06): 44px tiles; the desktop rail's
   46px already clear the finger size */
@media (pointer: coarse) and (max-width: 900px) {
  .org-rail { padding-inline: 6px; }
  .org-rail .org-rail-item { width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .org-rail .org-rail-item { transition: none; } }