body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

/* The pages behind the login carry a lot on screen at once, so they read a
   step smaller than the front page and the login forms. */
.app-page {
  font-size: 0.8125rem;
}

main {
  flex: 1;
}

/* Primary navigation. These sit next to the brand and are the main way around
   the app, so they read larger and more obviously clickable than plain links. */
.navbar .nav-link-main {
  padding: 0.25rem 0.65rem;
  border-radius: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pal-text, var(--bs-body-color));
  opacity: 0.8;
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.navbar .nav-link-main:hover,
.navbar .nav-link-main:focus-visible {
  opacity: 1;
  background-color: var(--pal-border, rgba(128, 128, 128, 0.2));
}

/* The section you are already in. */
.navbar .nav-link-main.active {
  opacity: 1;
  color: var(--pal-accent, var(--bs-primary));
}

/* --- the "All" menu ------------------------------------------------------ */

.nav-all-menu {
  min-width: 15rem;
  /* Wide enough for the longest name in it, so nothing is broken across two
     lines — but never wider than the screen it drops onto. Past that the menu
     scrolls sideways rather than hanging off the edge. */
  width: max-content;
  max-width: calc(100vw - 1rem);
  max-height: 80vh;
  overflow: auto;
}

/* Names stay on one line; the menu takes the width they need. Each row is at
   least as wide as the menu and as wide as its own text, so the hover highlight
   still covers the row when a long name has made the menu scroll. */
.nav-all-menu .dropdown-item,
.nav-all-menu .dropdown-item-text,
.nav-all-menu .nav-section-toggle {
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
}

/* A section heading that opens and closes its own items. */
.nav-section-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 1rem;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nav-section-toggle:hover,
.nav-section-toggle:focus-visible {
  background: var(--bs-tertiary-bg, rgba(128, 128, 128, 0.15));
}

/* Points right when the section is closed, down when it is open. */
.nav-caret {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-section-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(90deg);
}

/* Indented, so an item reads as belonging to the section above it. */
.nav-subitem {
  padding-left: 2.4rem;
}

/* A heading one level in: its label lines up with the items above it, and the
   chevron hangs out to the left the way a tree branch does. */
.nav-subheading-toggle {
  padding-left: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
}

/* An item belonging to that nested heading, indented once more. */
.nav-subitem--nested {
  padding-left: 3.4rem;
}

/* --- small screens -------------------------------------------------------- */

/* Who is signed in, beside the buttons. It gives way first: the buttons keep
   their size and the name is cut short rather than pushing them off-screen. */
.nav-whoami {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .nav-whoami {
    max-width: 55vw;
  }

  /* The heading and its buttons stack instead of squeezing into one line. */
  .page-head {
    row-gap: 0.5rem;
  }

  .page-head h1 {
    font-size: 1.35rem;
  }

  /* A toolbar that has wrapped below the heading starts at the left edge. */
  .page-head .page-head__actions {
    margin-left: 0 !important;
  }
}

/* --- the note ink picker -------------------------------------------------- */

/* One colour to write notes in. Shaped like the palette options above it, but
   carrying a single dot rather than a three-part swatch. */
.ink-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.4));
  border-radius: 2rem;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.8125rem;
}

.ink-option:hover,
.ink-option:focus-visible {
  border-color: var(--pal-accent, var(--bs-primary));
}

.ink-option--active {
  border-color: var(--pal-accent, var(--bs-primary));
  box-shadow: inset 0 0 0 1px var(--pal-accent, var(--bs-primary));
}

.ink-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* The one ink that cannot be a fixed colour: a grey dark enough to read on the
   light ground would vanish into the dark one, so it follows the theme. */
:root {
  --note-ink-graphite: #495057;
}

:root[data-bs-theme="dark"] {
  --note-ink-graphite: #aeb6bf;
}

/* --- the overdue bell ----------------------------------------------------- */

/* Always present, so nothing has to be read into its absence. */
.nav-bell {
  position: relative;
  color: var(--bs-body-color);
  opacity: 0.75;
}

.nav-bell:hover,
.nav-bell:focus-visible {
  opacity: 1;
}

/* Something is overdue: the bell itself takes the warning colour, so the page
   says it twice — colour and a count — rather than relying on either alone. */
.nav-bell--ringing {
  color: var(--bs-danger, #dc3545);
  opacity: 1;
}

.nav-bell__count {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 1rem;
  font-size: 0.65rem;
  line-height: 1.1;
}

.nav-overdue-menu {
  min-width: 20rem;
  max-width: min(26rem, calc(100vw - 1rem));
  max-height: 70vh;
  overflow-y: auto;
}

/* Two lines per entry, so the name is not crowded by where it belongs. */
.nav-overdue-item {
  white-space: normal;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}