/* 10-layout.css — app shell: header, breadcrumb zoom-spine, content area.
 * Role visibility is driven by a body class (role-pm|gf|f|l|t); elements opt in
 * via [data-min-role] handled in 70-roles.js. Placeholder shell for now.
 */
#datum-root { min-height: 100%; display: flex; flex-direction: column; }
.boot { padding: 40px; color: var(--ink-dim); font-family: var(--mono); }

.appbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.appbar .brand { font-weight: 700; letter-spacing: .12em; }
.appbar .brand .dot { color: var(--accent); }
.appbar .spacer { flex: 1; }
.appbar .who { font-size: 13px; color: var(--ink-dim); }
.appbar .role-chip {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--accent); background: var(--surface-2);
}

.content { flex: 1; padding: 20px 16px; max-width: 1100px; width: 100%; margin: 0 auto; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--pad); box-shadow: var(--shadow);
}
.muted { color: var(--ink-dim); }
.scaffold-note {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim);
  border-left: 2px solid var(--accent); padding-left: 12px; margin-top: 16px;
}