/* Larger type throughout: Bootstrap sizes everything in rem, so raising the
   root size scales text, inputs, buttons and spacing together. */
html {
  font-size: 18px;
}

@media (min-width: 1400px) {
  html {
    font-size: 19px;
  }
}

body {
  background: var(--bs-bg-1, #f6f7f9);
}

main {
  padding-bottom: 4rem;
}

.app-nav {
  background: var(--bs-bg-body, #fff);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.app-nav .nav-link.active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0 1rem;
}

.page-head h1 {
  font-size: 1.75rem;
  margin: 0;
}

.section {
  background: var(--bs-bg-body, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.section > h2 {
  font-size: 1.3rem;
  margin: 0 0 .75rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.section > h2 .actions {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.muted {
  color: var(--bs-fg-3, #6c757d);
}

.stat {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}

table.table td,
table.table th {
  vertical-align: top;
}

details > summary {
  cursor: pointer;
  color: var(--bs-fg-2, #495057);
  margin: .5rem 0;
}

.inline-form {
  display: inline;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-list li {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* A dropdown that needs no script: <details class="menu">. */
details.menu {
  position: relative;
  display: inline-block;
}

details.menu > summary {
  list-style: none;
  margin: 0;
}

details.menu > summary::-webkit-details-marker {
  display: none;
}

details.menu > .menu-body {
  position: absolute;
  right: 0;
  z-index: 10;
  min-width: 14rem;
  background: var(--bs-bg-body, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  padding: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.menu-body a,
.menu-body button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .4rem .6rem;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  border-radius: .25rem;
}

.menu-body a:hover,
.menu-body button:hover {
  background: var(--bs-bg-2, #eef0f3);
}

.signin {
  max-width: 26rem;
  margin: 8vh auto;
}

/* Printouts for the inspector */
.report-person {
  border-top: 2px solid #000;
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.report-person h2 {
  font-size: 1.4rem;
}

.report-person h3 {
  font-size: 1.1rem;
  margin-top: 1rem;
}

.report-person table {
  font-size: .95rem;
}

.only-print {
  display: none;
}

@media print {
  html {
    font-size: 12pt;
  }

  body {
    background: #fff;
  }

  .no-print {
    display: none !important;
  }

  .only-print {
    display: block;
  }

  .section {
    border: 0;
    padding: 0;
  }

  .page-break {
    break-before: page;
  }

  .report-person {
    break-inside: avoid-page;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* A flag next to text, as tall as a capital letter. */
img.flag {
  height: .8em;
  width: auto;
  vertical-align: -.05em;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Abbreviations explain themselves on hover, without the dotted underline. */
abbr[title] {
  text-decoration: none;
  cursor: help;
}

/* The flash message, pinned to the top of the window (see app.js). */
.flash {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: min(40rem, calc(100% - 2rem));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
  transition: opacity .4s;
}

.flash > span {
  flex: 1;
}

.flash-hide {
  opacity: 0;
}

.flash-close {
  border: 0;
  background: none;
  color: inherit;
  padding: 0 .25rem;
  cursor: pointer;
  opacity: .7;
}

.flash-close:hover {
  opacity: 1;
}

/* What to do about a missing record, under it. */
.issue-todo {
  color: var(--bs-body-color, #212529);
  margin-bottom: .25rem;
}

/* A badge with the border of an alert of its theme, to sit next to one. */
.badge-bordered {
  --bs-badge-border-color: var(--bs-theme-border);
}

/* After a save the page jumps to what was changed (#r12, #sta…): keep some
   context above it instead of pinning it to the top edge. */
tr[id] {
  scroll-margin-top: 35vh;
}

.section[id],
[id].section h3,
h3[id] {
  scroll-margin-top: 1rem;
}

/* The row jumped to fades from a highlight, so it is easy to spot. */
tr:target > td {
  animation: target-fade 2.5s ease-out;
}

@keyframes target-fade {
  from {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
  }
}