/* Notepad - what the pad alone wears; the window, the menus and the
   dialogs come from the system sheet. */

#app-notepad {
  padding: calc(10 * var(--u));
}

#note-area {
  display: block;
  width: calc(330 * var(--u));
  height: calc(210 * var(--u));
  border: 1px solid #000;
  background: #fff;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  font: inherit;
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  resize: none;
}

/* The status line: the note's name, and the count against the limit,
   drawn in reverse once the thousand is reached. */
#note-status {
  display: flex;
  justify-content: space-between;
  margin-top: calc(6 * var(--u));
  font-size: calc(11 * var(--u));
}

#note-count.full { background: #000; color: #fff; padding: 0 calc(3 * var(--u)); }