/* The frame around the editor: a bar and a column. Colours are the dossier
   UI's tokens from ui/base.css, so both schemes come with them. */

body { display: block; height: auto; min-height: 100vh; }

#bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: 13px;
}
#bar .brand { font-weight: 600; }
#bar .path { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bar .grow { flex: 1; }
#who {
  font: inherit; color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
#who:disabled { cursor: default; }
#who:not(:disabled):hover { border-color: var(--accent); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; }
#notice {
  margin: 16px 0; padding: 10px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
}
#notice.warn { border-color: var(--del); color: var(--del); }