/* Text sizes are relative to the browser's own text-size setting (normally 16px), so
   people who set a larger default get larger text everywhere: 87.5% of it on phones
   (14px by default), all of it from tablet width up. */
html {
  font-size: 87.5%;
}

@media (min-width: 768px) {
  html {
    font-size: 100%;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

/* "Skip to main content": hidden until keyboard focus reaches it, then a clear button
   at the top left. */
.skip-link:focus {
  position: fixed !important;
  z-index: 1080;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: #0b5a78;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px #258cfb;
}

/* The skip link moves focus to <main>, which needs no ring of its own. */
#main-content:focus {
  outline: none;
}

.site-navbar {
  background-color: var(--bs-body-bg);
}

html {
  position: relative;
  min-height: 100%;
}

/* Text is 87.5% size below tablet width, but phones (iPhone Safari especially) zoom the
   page in on any text box under 16px when it's tapped. So text boxes stay at 16px or
   more (more when the browser's text size is set larger). */
@media (max-width: 767.98px) {
  .form-control:not(.form-control-lg), .form-select {
    font-size: max(16px, 1rem);
  }
}

@media (max-width: 575.98px) {
  .form-control-lg {
    font-size: max(16px, 1rem);
  }
}

/* Orbitron (SIL Open Font License, see fonts/orbitron/OFL.txt), served from this site so
   the content-security policy can stay "fonts from this site only". Latin letters only. */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/orbitron/orbitron-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/orbitron/orbitron-latin-700-normal.woff2") format("woff2");
}

/* Navbar title: Orbitron, shaded from the logo's deep teal to its green. Browsers that
   can't clip a background to text just show the teal. */
.brand-name {
  color: #0b5a78;
  font-family: "Orbitron", "Segoe UI", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #0b5a78 0%, #2f8fb4 55%, #4fc3a1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navbar tabs. The current section's tab sits in a soft pill, tinted in the logo's teal
   to green, with a faint glow beneath it. */
.site-nav {
  --bs-nav-link-padding-y: 0.4rem;
  --bs-nav-link-padding-x: 0.85rem;
  --bs-navbar-nav-link-padding-x: 0.85rem;
}

.site-nav .nav-link {
  color: var(--bs-body-color);
  border-radius: 999px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible {
  color: #0b6e8c;
  background-color: rgba(47, 143, 180, 0.06);
}

.site-nav .nav-link.active {
  color: #0b5a78;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(47, 143, 180, 0.1), rgba(79, 195, 161, 0.12));
  box-shadow: 0 0 0 1px rgba(47, 143, 180, 0.18), 0 4px 16px -4px rgba(47, 143, 180, 0.35);
}

.dropdown-item.active {
  background: #e6f3f7;
  color: #0b6e8c;
  font-weight: 600;
}

/* A menu item with an icon before its text. */
.dropdown-item.has-icon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Admin, in the Account menu, is styled apart from the other items: red with a shield,
   solid red when you're in the admin pages. Only admins ever see it. */
.dropdown-item.nav-admin {
  color: #b42318;
  font-weight: 600;
}

.dropdown-item.nav-admin:hover, .dropdown-item.nav-admin:focus-visible {
  background: #fdecea;
  color: #8f1c13;
}

.dropdown-item.nav-admin.active {
  background: #b42318;
  color: #fff;
}

/* In the stacked phone menu, each tab is only as wide as its text, so the pill fits it. */
@media (max-width: 575.98px) {
  .site-nav .nav-link {
    display: inline-block;
    margin: 0.1rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-link {
    transition: none;
  }
}

/* Pop-up confirmations float just below the navbar, over the page. */
.status-toast-container {
  top: 4.25rem;
}

/* Welcome page (logged out). Light, in the logo's teal and green, to suit its light artwork. */
.welcome-hero {
  background: linear-gradient(135deg, #eaf4f7 0%, #f7fbfb 55%, #e8f6f0 100%);
  border: 1px solid #dcebef;
  color: #23404d;
  padding: 3rem 2.5rem;
}

.welcome-title {
  color: #0b5a78;
  font-size: calc(1.6rem + 1.6vw);
  font-weight: 600;
  line-height: 1.15;
}

.welcome-lead {
  color: #3d5866;
}

.welcome-cta {
  background: #0b6e8c;
  border-color: #0b6e8c;
  color: #fff;
  font-weight: 600;
}

.welcome-cta:hover, .welcome-cta:focus {
  background: #095a73;
  border-color: #095a73;
  color: #fff;
}

.welcome-cta-secondary {
  border-color: #0b6e8c;
  color: #0b6e8c;
  font-weight: 600;
}

.welcome-cta-secondary:hover, .welcome-cta-secondary:focus {
  background: #0b6e8c;
  border-color: #0b6e8c;
  color: #fff;
}

.welcome-image {
  max-width: min(100%, 440px);
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #e7effc;
  color: #1b6ec2;
}

.welcome-closing {
  background: #f6f7fa;
  padding: 2.5rem 1.5rem;
}

@media (max-width: 767.98px) {
  .welcome-hero {
    padding: 2rem 1.25rem;
  }

  .welcome-image {
    max-width: min(100%, 300px);
  }
}

/* My Notes (logged in). */
/* A drop-down whose empty first choice acts as a placeholder: grey until something is
   chosen, like the placeholder text in the inputs beside it. */
.placeholder-select:has(option[value=""]:checked) {
  color: var(--bs-secondary-color);
}

.placeholder-select option {
  color: var(--bs-body-color);
}

/* Read-only boxes (such as a locked selector) look different from editable ones. */
.form-control[readonly] {
  background-color: var(--bs-secondary-bg);
}

/* Admin page drag-and-drop reordering. touch-action: none lets a finger drag the handle
   instead of scrolling the page. */
.drag-cell {
  width: 1%;
  padding-right: 0;
}

.drag-handle {
  color: var(--bs-secondary-color);
  cursor: grab;
  line-height: 1;
  padding: 0.35rem 0.25rem;
  touch-action: none;
}

/* Prompts: the up and down buttons beside each drag handle, stacked, 24px each. */
.move-buttons {
  display: flex;
  flex-direction: column;
}

.move-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  color: var(--bs-secondary-color);
  line-height: 1;
}

.move-button:hover:not(:disabled), .move-button:focus-visible {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.move-button:disabled {
  opacity: 0.25;
}

.drag-handle:hover, .drag-handle:focus-visible {
  background: #f1f3f5;
  color: var(--bs-body-color);
}

/* While dragging: the cursor stays a closed hand and text isn't selected. */
body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

/* The floating copy of the picked-up row. It lifts (grows a little, casts a shadow),
   follows the pointer, then glides into place when dropped. */
.drag-ghost {
  position: fixed;
  z-index: 1070;
  pointer-events: none;
  table-layout: fixed;
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 40, 60, 0.1);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.drag-ghost > tbody > tr > td {
  border-bottom: 0;
  background-color: #f7fbff;
}

.drag-ghost.lifted {
  transform: scale(1.025);
  box-shadow: 0 16px 32px rgba(16, 40, 60, 0.22), 0 3px 8px rgba(16, 40, 60, 0.12);
}

.drag-ghost.dropping {
  transition: top 180ms ease-out, left 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

/* The picked-up row's place in the table: an empty, dashed slot showing where it will land. */
tr.drag-placeholder {
  outline: 2px dashed #7fb6d8;
  outline-offset: -3px;
}

tr.drag-placeholder > td {
  background-color: #eef6fb;
  color: transparent;
}

tr.drag-placeholder > td > * {
  visibility: hidden;
}

/* A brief highlight where a moved row lands. */
@keyframes drop-flash {
  from {
    background-color: #d3f1e2;
  }

  to {
    background-color: transparent;
  }
}

tr.just-dropped > td {
  animation: drop-flash 900ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .drag-ghost,
  .drag-ghost.dropping {
    transition: none;
  }

  tr.just-dropped > td {
    animation: none;
  }
}

/* My Notes: the camera button beside "Remember it", which starts a note from photos. */
.note-camera {
  display: inline-flex;
  align-items: center;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

/* A note's photos in the list: small square thumbnails. */
.note-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.note-photo,
.note-photo-more {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.4rem;
}

.note-photo {
  object-fit: cover;
  background: #eef2f5;
}

.note-photo-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f5;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 600;
}

/* The edit popup's photos: thumbnails with a remove button in the corner. */
.edit-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edit-photos:not(:empty) {
  margin-bottom: 0.6rem;
}

.edit-photo {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}

.edit-photo img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
  background: #eef2f5;
}

/* 26px including its border, so the target is over WCAG 2.2's 24px minimum at any text size. */
.edit-photo-remove {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--bs-body-bg);
  border-radius: 50%;
  background: #4a5560;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
}

.edit-photo-remove:hover, .edit-photo-remove:focus-visible {
  background: var(--bs-danger);
}

.edit-photo-new {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  margin: 0;
}

/* "Choose from Media": the user's photos; chosen ones are outlined and ticked. */
.photo-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid #dee2e6;
  border-radius: 0.6rem;
}

.photo-picker-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.45rem;
  background: #eef2f5;
}

.photo-picker-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-picker-tile[aria-pressed="true"] {
  outline: 3px solid #2f8fb4;
  outline-offset: -3px;
}

.photo-picker-tile[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #2f8fb4;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.photo-picker-tile:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 1px;
}

/* Media page: the drop zone. It's the file picker's label, so clicking or tapping it opens
   the picker; the picker itself is visually hidden but still takes keyboard focus, which
   lights up the zone. */
.media-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  border: 2px dashed #b9d7e3;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(47, 143, 180, 0.05), rgba(79, 195, 161, 0.06));
  color: #3d5866;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.media-drop:hover,
.media-drop.is-dragover,
input[type="file"]:focus-visible + .media-drop {
  border-color: #2f8fb4;
  background-color: rgba(47, 143, 180, 0.08);
  box-shadow: 0 6px 20px -8px rgba(47, 143, 180, 0.45);
}

.media-drop.is-dragover {
  border-style: solid;
}

.media-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background: #e6f3f7;
  color: #0b6e8c;
}

.media-drop-title {
  font-weight: 600;
}

.media-drop-link {
  color: #0b6e8c;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.media-drop-hint {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

/* Uploads in progress, under the drop zone. */
.media-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.media-queue-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-queue-status {
  color: var(--bs-secondary-color);
}

.media-queue-row .progress {
  grid-column: 1 / -1;
  height: 0.35rem;
}

.media-queue-row .progress-bar {
  width: 0;
  background: linear-gradient(90deg, #2f8fb4, #4fc3a1);
  transition: width 0.15s linear;
}

.media-queue-row.is-done .media-queue-status {
  color: #1d6b52;
  font-weight: 600;
}

.media-queue-row.is-error .media-queue-status {
  grid-column: 1 / -1;
  color: var(--bs-danger);
}

/* The photo grid: square tiles, three across on a phone and more on wider screens. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30%, 160px), 1fr));
  gap: 0.5rem;
}

.media-tile {
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.6rem;
  background: #eef2f5;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .media-tile:hover img {
    transform: scale(1.04);
  }
}

.media-tile:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* The viewer shows the whole photo, as large as fits while leaving room for the caption
   (the viewer's middle scrolls, so its header and buttons stay on screen). */
.media-viewer-frame {
  display: flex;
  justify-content: center;
  border-radius: 0.5rem;
  background: #f1f4f6;
}

.media-viewer-image {
  max-width: 100%;
  max-height: calc(100vh - 24rem);
  min-height: 8rem;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .media-viewer-image {
    max-height: calc(100vh - 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-drop,
  .media-tile img,
  .media-queue-row .progress-bar {
    transition: none;
  }
}

/* Admin landing page: each tool is a large clickable card. */
.admin-tool {
  color: inherit;
  text-decoration: none;
  border: 1px solid #dcebef;
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.admin-tool:hover, .admin-tool:focus-visible {
  color: inherit;
  border-color: #9fcbe0;
  box-shadow: 0 8px 22px rgba(16, 40, 60, 0.12);
  transform: translateY(-2px);
}

.admin-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  background: #e6f3f7;
  color: #0b6e8c;
}

.admin-tool-count {
  color: #0b6e8c;
  font-weight: 600;
}

/* Admin → Reporting: one card per total, in the admin tools' style but not clickable. */
.report-stat {
  border: 1px solid #dcebef;
}

/* Each card's label comes before its number in the page, for screen readers; on screen
   the number shows first, large, then the label. */
.report-stat .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.report-stat .card-body > .report-stat-value {
  order: 1;
}

.report-stat .card-body > .report-stat-label {
  order: 2;
}

.report-stat .card-body > .small {
  order: 3;
}

.report-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 0.6rem;
}

.report-stat-value {
  color: #0b5a78;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.report-stat-label {
  font-size: 1rem;
  font-weight: 600;
}

.report-limit .progress {
  height: 0.6rem;
}

.report-limit-bar {
  width: 0;
  background: linear-gradient(90deg, #2f8fb4, #4fc3a1);
}

@media (prefers-reduced-motion: reduce) {
  .admin-tool {
    transition: none;
  }

  .admin-tool:hover, .admin-tool:focus-visible {
    transform: none;
  }
}

.builtin-badge {
  background: #eef0f3;
  color: #5c6670;
  font-weight: 500;
  margin-left: 0.25rem;
}

.note-actions {
  width: 1%;
}

/* The whole row opens the edit popup. The hover shade is only for a mouse: on a touch
   screen it would stay on the last row tapped. */
.note-row {
  cursor: pointer;
}

@media (hover: hover) {
  .note-row:hover > td {
    background-color: #f8f9fb;
  }
}

/* For name cells: wraps between words and keeps each word whole. (Bootstrap's text-break
   lets a table squeeze the column until words split, like "Matthe / w".) */
.cell-wrap {
  overflow-wrap: break-word;
}

.note-action {
  line-height: 1;
  padding: 0.35rem;
}

.note-action:hover, .note-action:focus-visible {
  background: #f1f3f5;
}

/* Bigger buttons for fingers: about 40px square, up from 29px. */
@media (pointer: coarse) {
  .note-action {
    padding: 0.6rem;
  }

  .drag-handle {
    padding: 0.6rem 0.45rem;
  }
}

/* The phone-only "More filters" button on My Notes names what it will do next. */
[aria-expanded="true"] > .more-filters-closed,
[aria-expanded="false"] > .more-filters-open {
  display: none;
}

.note-description {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  margin-top: 0.15rem;
  white-space: pre-line;
}

.notes-filter {
  background: #f6f7fa;
  border-radius: 0.75rem;
  padding: 1rem;
}

.filter-person {
  cursor: pointer;
}

.note-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.note-person {
  background: #e7effc;
  color: #1b4f8a;
  font-weight: 500;
}

/* Tags are green with a faint "#" in front, so they read differently from connections. */
.note-tag {
  background: #e3f5ee;
  color: #1d6b52;
  font-weight: 500;
}

.note-tag::before {
  content: "#";
  margin-right: 0.1em;
  opacity: 0.55;
}

/* The edit popup's tag box: looks like a text box, holds the chosen tags as chips with a
   text field after them that grows to fill the rest of the line. */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  cursor: text;
}

.tag-editor:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.tag-editor-input {
  flex: 1 1 8rem;
  min-width: 6rem;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;
  padding-right: 0.3rem;
}

/* At least 24×24px (WCAG 2.2's minimum target size), whatever the text size; the chip
   grows to fit it. */
.tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin: -0.2rem -0.2rem -0.2rem 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.7;
}

.tag-chip-remove:hover, .tag-chip-remove:focus-visible {
  background: rgba(29, 107, 82, 0.15);
  opacity: 1;
}

/* The suggestions float under the tag box. */
.tag-suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  background: var(--bs-body-bg);
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px rgba(16, 40, 60, 0.14);
}

.tag-suggestion {
  padding: 0.45rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.tag-suggestion:hover, .tag-suggestion[aria-selected="true"] {
  background: #e3f5ee;
  color: #1d6b52;
}

/* Keeps a long list of people from making the edit popup taller than the screen.
   A scrolling box clips whatever pokes out of it, so the list reaches 0.5rem past
   the popup's content on each side and each row is padded back by the same amount:
   the checkboxes stay aligned with the heading, and their border and 0.25rem focus
   ring stay inside the box. */
.edit-people {
  max-height: 14rem;
  overflow-y: auto;
  margin: -0.35rem -0.5rem;
  padding: 0.35rem 0;
}

/* Each row is a label wrapping its checkbox, so the whole line is clickable. */
.edit-person {
  display: block;
  margin-bottom: 0;
  padding: 0.3rem 0.5rem 0.3rem calc(1.5em + 0.5rem);
  border-radius: 0.375rem;
  cursor: pointer;
}

.edit-person:hover {
  background: #f1f3f5;
}

.edit-person .form-check-label {
  cursor: pointer;
}

/* An empty list (no people yet) would otherwise leave its negative margin behind. */
.edit-people:not(:has(.edit-person)) {
  display: none;
}

.new-person-badge {
  background: #fdf3dc;
  color: #7a5a14;
  font-weight: 500;
  margin-left: 0.25rem;
}

.notes-empty {
  border: 2px dashed #dee2e6;
  border-radius: 0.75rem;
  padding: 2.5rem 1rem;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Windows high contrast (forced colours) replaces the site's colours with the user's own
   and removes shadows and backgrounds, which the site uses for focus rings and for marking
   the current tab. These put back visible outlines in the system's highlight colour. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }

  .site-nav .nav-link.active,
  .dropdown-item.active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .tag-editor:focus-within {
    outline: 2px solid Highlight;
  }

  .photo-picker-tile[aria-pressed="true"] {
    outline: 3px solid Highlight;
  }

  .media-drop.is-dragover,
  input[type="file"]:focus-visible + .media-drop {
    border-color: Highlight;
  }

  /* Progress bars are only a coloured fill, which would otherwise disappear. */
  .progress-bar,
  .report-limit-bar {
    forced-color-adjust: none;
    background: Highlight;
  }
}

/* Dark theme (theme.js sets data-bs-theme="dark" on <html>). Bootstrap darkens its own
   parts; these are the site's own colours, lightened so they keep their contrast on dark
   backgrounds. */
[data-bs-theme="dark"] {
  --site-accent: #8fd3ea;
  --site-accent-tint: rgba(108, 196, 224, 0.15);
  --site-green: #8fe0bf;
  --site-green-tint: rgba(79, 195, 161, 0.17);
}

[data-bs-theme="dark"] .brand-name {
  color: var(--site-accent);
  background: linear-gradient(90deg, #6cc4e0 0%, #7fd6e6 55%, #7fe0b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-bs-theme="dark"] .site-nav .nav-link:hover,
[data-bs-theme="dark"] .site-nav .nav-link:focus-visible {
  color: var(--site-accent);
  background-color: rgba(108, 196, 224, 0.08);
}

[data-bs-theme="dark"] .site-nav .nav-link.active {
  color: var(--site-accent);
  background: linear-gradient(135deg, rgba(108, 196, 224, 0.16), rgba(79, 195, 161, 0.16));
  box-shadow: 0 0 0 1px rgba(108, 196, 224, 0.3), 0 4px 16px -4px rgba(108, 196, 224, 0.35);
}

[data-bs-theme="dark"] .dropdown-item.active {
  background: var(--site-accent-tint);
  color: var(--site-accent);
}

[data-bs-theme="dark"] .dropdown-item.nav-admin {
  color: #ff9a8f;
}

[data-bs-theme="dark"] .dropdown-item.nav-admin:hover,
[data-bs-theme="dark"] .dropdown-item.nav-admin:focus-visible {
  background: rgba(255, 138, 128, 0.14);
  color: #ffb8b0;
}

[data-bs-theme="dark"] .dropdown-item.nav-admin.active {
  background: #b42318;
  color: #fff;
}

[data-bs-theme="dark"] .welcome-hero {
  background: linear-gradient(135deg, #1d323d 0%, #1b2a30 55%, #1c3329 100%);
  border-color: #2e4650;
  color: #d4e4ea;
}

[data-bs-theme="dark"] .welcome-title,
[data-bs-theme="dark"] .welcome-cta-secondary {
  color: var(--site-accent);
}

[data-bs-theme="dark"] .welcome-lead {
  color: #b9ccd4;
}

[data-bs-theme="dark"] .welcome-cta-secondary {
  border-color: var(--site-accent);
}

[data-bs-theme="dark"] .welcome-cta-secondary:hover,
[data-bs-theme="dark"] .welcome-cta-secondary:focus {
  background: #0b6e8c;
  border-color: #0b6e8c;
  color: #fff;
}

[data-bs-theme="dark"] .benefit-icon {
  background: rgba(110, 168, 254, 0.16);
  color: #a9c8ff;
}

/* Panels and photo backgrounds use Bootstrap's dark surface colours. */
[data-bs-theme="dark"] .welcome-closing,
[data-bs-theme="dark"] .notes-filter,
[data-bs-theme="dark"] .media-viewer-frame,
[data-bs-theme="dark"] .note-photo,
[data-bs-theme="dark"] .note-photo-more,
[data-bs-theme="dark"] .edit-photo img,
[data-bs-theme="dark"] .photo-picker-tile,
[data-bs-theme="dark"] .media-tile,
[data-bs-theme="dark"] .drag-handle:hover,
[data-bs-theme="dark"] .drag-handle:focus-visible,
[data-bs-theme="dark"] .note-action:hover,
[data-bs-theme="dark"] .note-action:focus-visible,
[data-bs-theme="dark"] .edit-person:hover {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .photo-picker,
[data-bs-theme="dark"] .tag-suggestions,
[data-bs-theme="dark"] .admin-tool,
[data-bs-theme="dark"] .report-stat {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .notes-empty {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .tag-suggestions {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) {
  [data-bs-theme="dark"] .note-row:hover > td {
    background-color: rgba(255, 255, 255, 0.04);
  }
}

[data-bs-theme="dark"] .drag-ghost > tbody > tr > td {
  background-color: #24303a;
}

[data-bs-theme="dark"] tr.drag-placeholder > td {
  background-color: rgba(108, 196, 224, 0.08);
}

@keyframes drop-flash-dark {
  from {
    background-color: rgba(79, 195, 161, 0.3);
  }

  to {
    background-color: transparent;
  }
}

[data-bs-theme="dark"] tr.just-dropped > td {
  animation-name: drop-flash-dark;
}

[data-bs-theme="dark"] .note-person {
  background: rgba(110, 168, 254, 0.17);
  color: #b3ceff;
}

[data-bs-theme="dark"] .note-tag,
[data-bs-theme="dark"] .tag-suggestion:hover,
[data-bs-theme="dark"] .tag-suggestion[aria-selected="true"] {
  background: var(--site-green-tint);
  color: var(--site-green);
}

[data-bs-theme="dark"] .tag-chip-remove:hover,
[data-bs-theme="dark"] .tag-chip-remove:focus-visible {
  background: rgba(143, 224, 191, 0.2);
}

[data-bs-theme="dark"] .new-person-badge {
  background: rgba(255, 193, 7, 0.17);
  color: #ffd677;
}

[data-bs-theme="dark"] .builtin-badge {
  background: #3a4148;
  color: #c9d0d6;
}

[data-bs-theme="dark"] .edit-photo-remove {
  background: #6c757d;
}

[data-bs-theme="dark"] .media-drop {
  border-color: #3d6475;
  background: rgba(108, 196, 224, 0.06);
  color: #b9ccd4;
}

[data-bs-theme="dark"] .media-drop:hover,
[data-bs-theme="dark"] .media-drop.is-dragover,
[data-bs-theme="dark"] input[type="file"]:focus-visible + .media-drop {
  border-color: #6cc4e0;
  background-color: rgba(108, 196, 224, 0.1);
}

[data-bs-theme="dark"] .media-drop-icon,
[data-bs-theme="dark"] .admin-tool-icon {
  background: var(--site-accent-tint);
  color: var(--site-accent);
}

[data-bs-theme="dark"] .media-drop-link,
[data-bs-theme="dark"] .admin-tool-count,
[data-bs-theme="dark"] .report-stat-value {
  color: var(--site-accent);
}

[data-bs-theme="dark"] .media-queue-row.is-done .media-queue-status {
  color: var(--site-green);
}

[data-bs-theme="dark"] .admin-tool:hover,
[data-bs-theme="dark"] .admin-tool:focus-visible {
  border-color: #4f8aa3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .skip-link:focus {
  background: #6cc4e0;
  color: #10242c;
}

/* The logo's deep teal is made for light backgrounds; brightened a little on dark. */
[data-bs-theme="dark"] .navbar-brand img,
[data-bs-theme="dark"] .welcome-image {
  filter: brightness(1.5) saturate(1.1);
}

/* Games catalog (/Games): cards like the admin tools, with the game's icon. */
.game-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.9rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #e6f3f7;
  color: #0b6e8c;
}

.game-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-bs-theme="dark"] .game-card-icon {
  background: var(--site-accent-tint);
  color: var(--site-accent);
}

/* A game's page (/Games/{slug}): like an app, the game fills the screen under the menu,
   with a slim bar to get back, and no footer. (The site's body keeps room for a footer
   that isn't shown here.) */
body.game-page {
  margin-bottom: 0;
}

body.game-page > header .navbar {
  margin-bottom: 0 !important;
}

body.game-page > .container {
  max-width: none;
  padding: 0;
}

body.game-page main {
  padding-bottom: 0 !important;
}

body.game-page .footer {
  display: none;
}

.game-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 4.25rem);
}

.game-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.game-back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  /* A comfortable touch target on phones. */
  min-height: 44px;
}

.game-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.game-root {
  flex: 1;
  display: flex;
  flex-direction: column;
}