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;
  /* One size for a menu and for the label in the bar that opens it: the label
     below reads this same value, so the two cannot drift apart. Bootstrap's own
     default for a dropdown, kept because a menu is pointed at and read in one
     go rather than scanned like the page behind it. */
  --bs-dropdown-font-size: 1rem;
}

/* Bootstrap declares that same variable on the menu itself, which would shadow
   the one above and let the two sizes drift apart after all. inherit sends the
   menu back to the page's value. */
.app-page .dropdown-menu {
  --bs-dropdown-font-size: inherit;
}

main {
  flex: 1;
}

/* Primary navigation. These sit next to the brand and are the main way around
   the app, so they are given room and a hover of their own - but no extra
   weight: quiet labels beside the brand rather than a second heading.

   Their size is the menus' own size, read from the one variable above, so a
   label and the items it opens match whatever that is set to. */
.navbar .nav-link-main {
  padding: 0.25rem 0.65rem;
  border-radius: 0.35rem;
  font-size: var(--bs-dropdown-font-size, 1rem);
  font-weight: 400;
  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. Marked with an accent rule under the label and
   the text at full strength, rather than by colouring the label itself: now that
   it is neither bold nor large, an accent some palettes keep deliberately soft
   would be the hardest word in the navbar to read. */
.navbar .nav-link-main.active {
  opacity: 1;
  color: var(--pal-text, var(--bs-body-color));
  box-shadow: inset 0 -2px 0 var(--pal-accent, var(--bs-primary));
}

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

.nav-all-menu {
  /* Roomy enough that the names sit well clear of the edges even when they are
     short; wider still if something in it needs the room, and never wider than
     the screen it drops onto. Past that the menu scrolls sideways rather than
     hanging off the edge. */
  min-width: 21rem;
  width: max-content;
  max-width: calc(100vw - 1rem);
  max-height: 80vh;
  overflow: auto;
  padding-bottom: 0.35rem;
}

/* --- the menu docked to the side ----------------------------------------- */

/* How much of the left of the screen the docked menu takes, and therefore how
   far the page beside it is pushed across. One value so the two cannot
   disagree. */
:root {
  --nav-dock-width: 21rem;
}

/* The pin that docks it. Styled here rather than borrowed from the bookmark
   pages, because the navbar is on every page and their stylesheet is not. */
.nav-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--pal-sunk-muted, var(--pal-muted, #9aa4ae));
  line-height: 1;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.nav-dock-btn:hover,
.nav-dock-btn:focus-visible {
  color: var(--pal-text, var(--bs-body-color));
  background: var(--pal-sunk-hover, rgba(0, 0, 0, 0.25));
}

.nav-dock-pin {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.12s ease;
}

/* Docked: the pin lies over, the way a pin pulled out of the board would. */
.nav-dock-btn[aria-pressed="true"] {
  color: var(--pal-accent, var(--bs-primary));
}

.nav-dock-btn[aria-pressed="true"] .nav-dock-pin {
  transform: rotate(45deg);
}

/* Too narrow to give a panel the room: the menu stays a dropdown, and the pin
   is not offered. */
@media (max-width: 991.98px) {
  .nav-dock-btn {
    display: none;
  }
}

@media (min-width: 992px) {
  /* A column down the left of the screen rather than a menu hanging off a
     button - the side the "All" button it belongs to is on. Placed here, so the
     inline position an open dropdown is given has to be overruled. */
  .nav-all-menu--docked {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    transform: none !important;
    width: var(--nav-dock-width);
    min-width: 0;
    max-width: none;
    max-height: none;
    margin: 0 !important;
    border-width: 0 1px 0 0;
    border-radius: 0;
    overflow-y: auto;
    z-index: 1035;
  }

  /* The page gives up exactly the width the panel took, so nothing ends up
     underneath it - the navbar and the footer included. */
  body.nav-docked {
    padding-left: var(--nav-dock-width);
  }
}

/* The filter box sits at the top of the menu and stays there while the rest
   scrolls under it. */
.nav-find {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 0.6rem 0.45rem;
  background: var(--bs-dropdown-bg, var(--pal-surface, #2b3035));
  border-bottom: 1px solid var(--pal-border, rgba(128, 128, 128, 0.3));
}

.nav-find input {
  /* Takes the row and leaves the pin beside it its own small square. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
}

/* While something is typed, a folded-away section is shown anyway: a match
   should never be hidden behind a closed heading. */
.nav-filtering .collapse {
  display: block !important;
  height: auto !important;
}

/* 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. Hovering it darkens the
   row the way hovering an item does, rather than lifting it to the surface colour
   the menu is deliberately sunk below. */
.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(--pal-sunk-hover, rgba(0, 0, 0, 0.25));
}

/* 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;
}