/* shell: sticky top bar, left rail, main column */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 0.75rem; z-index: 100; background: var(--surface); padding: 0.375rem 0.75rem; border-radius: var(--radius-md); }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 0.625rem; height: var(--topbar-h); max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.topbar-inner .spacer { flex: 1; }
.topbar .topbar-menu { display: none; }
.topbar-sep { color: var(--border-strong); font-size: 1.25rem; font-weight: 300; margin: 0 0.125rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.org-chip { display: inline-flex; align-items: center; gap: 0.4375rem; max-width: 16rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-md);
  color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-chip svg { color: var(--ink-3); flex: none; }
.org-chip .role { padding: 0 0.4375rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.6875rem; font-weight: 500; }

.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 2.5rem; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.rail { position: sticky; top: var(--topbar-h); align-self: start; display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 1.5rem 0 1rem; }
.version { margin: auto 0 0; padding: 1.5rem 0.625rem 0; color: var(--ink-3); font-size: 0.75rem; }
.nav { display: flex; flex-direction: column; gap: 1.25rem; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-heading { padding: 0 0.625rem 0.375rem; color: var(--ink-3); font-size: 0.75rem; font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md);
  color: var(--ink-2); text-decoration: none; font-weight: 450; }
.nav-item svg { color: var(--ink-3); flex: none; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--surface-2); color: var(--ink); font-weight: 550; }
.nav-item.active svg { color: var(--ink); }
.main { min-width: 0; width: 100%; max-width: 76rem; padding: 2rem 0 4rem; outline: none; }

/* account menu */
.account { position: relative; }
.avatar { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); padding: 0; cursor: pointer; overflow: hidden; display: block; }
.avatar img { width: 100%; height: 100%; display: block; }
.menu { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 60; width: 15rem; padding: 0.3125rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.menu-who { padding: 0.5rem 0.625rem 0.5rem; }
.menu-who b { display: block; font-weight: 600; }
.menu-who span { color: var(--ink-3); font-size: 0.8125rem; }
.menu-sep { height: 1px; background: var(--border); margin: 0.3125rem 0; }
.menu-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.4375rem 0.625rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item svg { color: var(--ink-3); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card + .card, .section + .section { margin-top: 1rem; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); }
.card-head .spacer { flex: 1; }
.card-body { padding: 1.25rem; }
.section { margin-top: 1.5rem; }

/* drawers: right for details and editors, left for the phone navigation */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-backdrop, .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(860px, 100%); background: var(--bg); border-left: 1px solid var(--border);
  overflow-y: auto; padding: 24px 28px 60px; }
.drawer-left .drawer-panel { left: 0; right: auto; width: min(18rem, 86vw); border-left: 0; border-right: 1px solid var(--border); padding: 1rem 0.75rem; }
.drawer-close { position: absolute; top: 14px; right: 14px; }

/* modals */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; }
.modal-panel { position: relative; width: min(28.75rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 3.125rem 7.5rem -1.875rem rgba(10, 14, 22, 0.55), 0 1.25rem 3.75rem -1.25rem rgba(10, 14, 22, 0.35); }
.modal-panel.lg { width: min(35rem, 100%); }
.modal-head { padding: 1.125rem 1.25rem 0.25rem; }
.modal-head .eyebrow { color: var(--ink-3); font-size: 0.8125rem; }
.modal-head p { margin: 0.25rem 0 0; color: var(--ink-2); }
.modal-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); }

/* sign-in */
body.signed-out .topbar, body.signed-out .rail { display: none; }
body.signed-out .shell { display: block; }
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 1rem; }
.auth-brand { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; font-size: 1.125rem; }
.auth-brand .tag { padding-left: 0.625rem; border-left: 1px solid var(--border-strong); color: var(--ink-2); font-weight: 500; }
.auth-card { width: min(24rem, 100%); display: flex; flex-direction: column; gap: 1.125rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -16px rgba(0, 0, 0, 0.12); }
.auth-card h1 { font-size: 1.25rem; }
.auth-card p { margin: 0; color: var(--ink-2); }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-card .fine { font-size: 0.75rem; color: var(--ink-3); }
.auth-foot { color: var(--ink-3); font-size: 0.75rem; }