/* Whiteboard — full-bleed Excalidraw canvas below the nav. */
.wb-main {
  height: calc(100vh - var(--nav-h));
  min-height: 0; position: relative;
}
.wb-canvas { position: absolute; inset: 0; }
/* Excalidraw paints its own UI; give it our sans font. */
.wb-canvas .excalidraw { --ui-font: var(--font-sans); }

/* Save/Open/Export sit close together in the nav. */
.pt-nav-right { gap: 8px; }

/* Unsaved badge (top-right pill in the nav). */
.wb-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 11.5px/1 var(--font-sans); white-space: nowrap;
  border: 1px solid var(--border-strong);
  color: var(--text-muted); background: var(--surface-2);
}
.wb-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--text-faint);
}
.wb-status[data-dirty="true"] {
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring);
}
.wb-status[data-dirty="true"]::before { background: var(--accent); }
@media (max-width: 860px) { .wb-status { display: none; } }

/* First-load + draft-restore modals. */
.wb-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, 0.55);
}
.wb-modal[hidden] { display: none; }
.wb-modal-card {
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 22px 22px 18px;
}
.wb-modal-title { margin: 0 0 8px; font: 700 16px/1.3 var(--font-display); color: var(--text); }
.wb-modal-body { margin: 0 0 18px; font: 400 13.5px/1.55 var(--font-sans); color: var(--text-muted); }
.wb-modal-body code {
  font: 500 12.5px var(--font-mono, monospace);
  background: var(--surface-3); padding: 1px 5px; border-radius: 5px;
}
.wb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* legacy hint (now unused) */
.wb-hint { color: var(--text-faint); font: 500 11.5px/1 var(--font-sans); white-space: nowrap; }
@media (max-width: 720px) { .wb-hint { display: none; } }