/*
 * App screens outside the editor: sign-in, invitation, workspace shell.
 * Depends on tokens.css and base.css.
 */

/* ---------- auth layout: one centred column ---------- */
.auth { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-subtle); }
.auth-top { display: flex; align-items: center; height: 56px; padding: 0 var(--space-6); }
.auth-main { display: grid; place-items: center; padding: var(--space-6); }
.auth-card { width: 400px; background: var(--bg-chrome); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1); padding: var(--space-8); display: grid; gap: var(--space-5); }
.auth-card h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.auth-card .lede { color: var(--fg-muted); }
.auth-foot { padding: var(--space-4) var(--space-6); text-align: center; font-size: var(--text-xs); color: var(--fg-subtle); }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); color: var(--fg-subtle); font-size: var(--text-xs); }
.or::before, .or::after { content: ""; height: 1px; background: var(--border); }
.big-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent-fg); }
.big-icon .icon { width: 20px; height: 20px; }
.big-icon.is-success { background: var(--success-subtle); color: var(--success-fg); }
.big-icon.is-warning { background: var(--warning-subtle); color: var(--warning-fg); }
.invite-from { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--bg-subtle); border: 1px solid var(--border); }

/* ---------- workspace shell: sidebar + main ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; min-width: 1280px; }
.sidebar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--border); background: var(--bg-subtle); }
.ws-switch { display: flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); }
.ws-mark { width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; background: #3d6fd6; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.nav { padding: var(--space-2); display: grid; gap: 1px; align-content: start; overflow: auto; }
.nav-item { display: flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--fg-muted); font-weight: var(--weight-medium); }
.nav-item:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.nav-item.is-active { background: var(--bg-chrome); color: var(--fg); box-shadow: var(--shadow-1); }
.nav-item .badge { margin-left: auto; }
.nav-label { padding: var(--space-4) var(--space-2) var(--space-1); }
.sidebar-foot { padding: var(--space-2); border-top: 1px solid var(--border); }
.main { overflow: auto; background: var(--bg-chrome); }
.page { max-width: 1120px; margin: 0 auto; padding: var(--space-8) var(--space-8) var(--space-12); display: grid; gap: var(--space-6); }
.page-head { display: flex; align-items: flex-end; gap: var(--space-3); }
.page-head h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.page-head .sub { color: var(--fg-muted); margin-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.pcard { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-2); background: var(--bg-chrome); color: var(--fg); }
.pcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); text-decoration: none; }
.pcard h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.pcard .meta { display: flex; gap: var(--space-3); color: var(--fg-subtle); font-size: var(--text-sm); }
.doc-icon { width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--fg-muted); }
.doc-icon.dbml { color: #2f6fde; }
.doc-icon.mermaid { color: #b04ec2; }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-8); display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.empty .big-icon { width: 48px; height: 48px; }
.filterbar { display: flex; align-items: center; gap: var(--space-2); }
.role-select { height: var(--control-h-sm); font-size: var(--text-sm); padding: 0 var(--space-6) 0 var(--space-2); }