:root {
  --eg-sidebar-bg: #22364f;
  --eg-sidebar-width: 15rem;
}

/* Navy background for the top bar, the desktop sidebar column and the mobile offcanvas panel.
   offcanvas-lg forces a transparent background on wide screens, so the column wrapper carries it there. */
.eg-navy,
#sidebar {
  background-color: var(--eg-sidebar-bg);
  --bs-offcanvas-bg: var(--eg-sidebar-bg);
}

@media (min-width: 992px) {
  .eg-sidebar-column {
    width: var(--eg-sidebar-width);
    flex-shrink: 0;
    min-height: 100vh;
  }
}

#sidebar .nav-link {
  color: rgba(255, 255, 255, 0.75);
  border-radius: 0.25rem;
}

#sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

#sidebar .nav-link.active {
  color: #fff;
  background-color: var(--bs-primary);
}

/* Rich-text editor */
.eg-editor {
  background-color: var(--bs-body-bg);
}

.eg-editor:focus-within {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.eg-editor.is-invalid {
  border-color: var(--bs-danger) !important;
}

.eg-editor-toolbar {
  background-color: var(--bs-tertiary-bg);
}

.eg-editor-content {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  outline: none;
}

.eg-editor-content p {
  margin: 0;
}

/* Question form */
.eg-id-field {
  width: 7rem;
}

/* Question form: the Section box (013) beside ID. */
.eg-section-field {
  width: 14rem;
  max-width: 100%;
}

.eg-form-title {
  padding-top: 2.1rem;
}

.eg-answer-letter {
  width: 1.5rem;
}

.eg-letter-input {
  max-width: 5rem;
  text-transform: uppercase;
}

/* Label/control pairs that stay aligned in one row even when a label wraps. */
.eg-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap: 1rem;
  row-gap: 0.75rem;
}

.eg-field {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.25rem;
  align-items: end;
}

.eg-field .invalid-feedback {
  align-self: start;
  margin-top: 0;
}

/* Sign-in, setup and invite pages */
.eg-auth-card {
  max-width: 28rem;
}

.eg-code-input {
  max-width: 10rem;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.eg-qr svg {
  width: 200px;
  height: 200px;
}

.eg-recovery-codes {
  font-family: "Courier New", Courier, monospace;
  columns: 2;
  max-width: 22rem;
}

/* Read-only question (exam list, picker preview) */
.eg-rich p {
  margin: 0;
}

/* Rich text shows runs of spaces as typed (the editor does too), so text lined up with spaces stays lined
   up on the Exam page, in lists and when printed. Lines still wrap. Saved HTML has no newlines of its own. */
.eg-rich {
  white-space: pre-wrap;
}

/* Answers sit about 5 characters in from the question (exam view and print). */
.eg-answers-indent {
  padding-left: 5ch;
}

/* Pictures: shown at their saved width, but never wider than their container. */
.eg-rich img,
.eg-editor-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Picture in the editor, with its [ − ] size [ + ] bar while selected and the editor has focus. */
.eg-picture {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.eg-picture.is-selected img {
  outline: 2px solid var(--bs-primary);
}

.eg-picture-bar {
  display: none;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
}

.ProseMirror-focused .eg-picture.is-selected .eg-picture-bar {
  display: inline-flex;
}

.eg-answers-horizontal {
  display: flex;
  flex-wrap: wrap;
}

.eg-answers-vertical {
  display: flex;
  flex-direction: column;
}

/* Exam page */
.min-w-0 {
  min-width: 0;
}

.eg-tag-input {
  width: 12rem;
}

.eg-chip-close {
  font-size: 0.6rem;
}


.eg-picker-item {
  user-select: none;
}

.eg-picker-item.eg-in-exam {
  opacity: 0.55;
}

/* Question tags in the breadcrumb row: about ten spaces after the breadcrumb (with the 1rem gap: 3rem). */
.eg-header-tags {
  margin-left: 2rem;
}

/* Chapter tags on a chapter's page: "five spaces" (1.5rem with the row's 1rem gap) from the breadcrumb (009). */
.eg-header-tags-near {
  margin-left: 0.5rem;
}

.eg-add-btn {
  min-width: 2rem;
}

.eg-preview-popover {
  --bs-popover-max-width: 28rem;
}

/* Print page (on screen) */
.eg-print-table {
  width: 100%;
  border-collapse: collapse;
}

.eg-print-table th {
  font-weight: normal;
  text-align: left;
  padding: 0 0 1rem;
}

.eg-print-row td {
  padding: 0.75rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.eg-print-instructions p {
  margin: 0 0 0.5rem;
}

.eg-key-table {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
  color: inherit;
  white-space: pre;
}

/* Paper */
@page {
  size: letter;
  margin: 0.75in;
}

/* The sidebar and top bar carry Bootstrap's d-print-none (it beats their d-flex). */
@media print {
  .eg-no-print {
    display: none !important;
  }

  /* Spacelab's grey body text is too faint on paper. */
  body,
  .eg-key-table {
    background: #fff;
    color: #000;
  }

  #app {
    padding: 0 !important;
  }

  .eg-print-table thead {
    display: table-header-group;
  }

  .eg-print-row,
  .eg-print-row .eg-question {
    break-inside: avoid;
  }

  .eg-print-row td {
    padding: 0 0 1in;
    border: 0;
  }

  .eg-answer-key {
    break-before: page;
  }
}

@media (min-width: 992px) {
  .eg-picker {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* Chapter details: the whole question row opens the question. */
.eg-question-row {
  cursor: pointer;
}

/* Chapter and exam question lists: Top, Up, Down, Bottom (and the exam list's ✕) as equal-width buttons with centered icons, as tall as
   a normal Bootstrap button (an icon alone would make them shorter). */
.eg-move-group .btn {
  width: 2.5rem;
  height: calc(1.5em + 0.75rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Narrow windows: Preview, the move buttons and ⋮ go on their own line under the question, at the right. */
@media (max-width: 575.98px) {
  .eg-question-row {
    flex-wrap: wrap;
  }
  .eg-question-row .eg-question-link {
    flex-basis: 100%;
  }
  .eg-question-row [data-preview] {
    margin-left: auto;
  }
  /* Exam page question list: the move buttons and ✕ go on their own line under the question, at the right. */
  .eg-exam-question-row {
    flex-wrap: wrap;
  }
  .eg-exam-question-row > :first-child {
    flex-basis: 100%;
  }
  .eg-exam-question-row .eg-exam-question-buttons {
    margin-left: auto;
  }
}

/* Chapters and Exams lists: the whole row opens it; ⋮ opens its menu. */
.eg-chapter-row,
.eg-exam-row {
  cursor: pointer;
}

.eg-kebab {
  font-size: 1.25rem;
  line-height: 1;
}

/* Chapters list: the ⋮ beside Add Chapter (011). A bordered button, bold and larger, so it's easy to find;
   its line height keeps it the same height as Add Chapter. */
.eg-kebab-prominent {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  padding-inline: 0.6rem;
}

/* Chapter and exam question lists: the section pill (013) under the move buttons. Outlined grey, so it
   isn't taken for a tag pill; no wider than the four move buttons, with "…" for a long name. */
.eg-section-pill {
  background: transparent;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-secondary-color);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Import chapter: the list of skipped questions scrolls when long. */
.eg-import-skipped {
  max-height: 12rem;
}

/* Exams list: tags as light pills next to the title, and the tag filter beside the breadcrumb. */
.eg-tag-pill {
  background: var(--bs-light);
  color: var(--bs-dark);
  border: 1px solid var(--bs-border-color);
}

.eg-tag-filter-input {
  width: 12rem;
}

.eg-tag-filter-note {
  top: 100%;
  left: 0;
  z-index: 1;
}

/* About five spaces between an exam's title and its first tag pill (with the 0.5rem gap: 1.5rem). */
.eg-exam-title {
  margin-right: 1rem;
}

/* Chapter question list: the whole question; pictures as small thumbnails. */
.eg-question-full img {
  max-height: 4rem;
  width: auto;
}

/* Home: each section card is one link. text-bg-primary sets its color with !important, so hover and
   pressed darken it with a filter instead. */
.eg-home-card {
  transition: filter 0.15s ease-in-out;
}

.eg-home-card:hover {
  filter: brightness(0.9);
}

.eg-home-card:active {
  filter: brightness(0.82);
}

.eg-home-card:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.5);
  outline-offset: 3px;
}

/* Rich-text toolbar: the Ω symbol picker (012). A panel under the button with groups of 12-column grids.
   It stays inside the window (symbol-picker.js shifts it left when needed) and scrolls when tall. */
.eg-symbols-button {
  min-width: 2rem;
  font-weight: 600;
}
.eg-symbol-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  width: min(26rem, calc(100vw - 1rem));
  max-height: min(24rem, 70vh);
  overflow-y: auto;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.eg-symbol-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin: 0.5rem 0 0.25rem;
}
.eg-symbol-note {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin: 0 0 0.35rem;
}
.eg-symbol-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}
.eg-symbol-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eg-symbol-cell:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.eg-symbol-cell:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}
/* Key chart: the key small on top, the same key in the Symbol font below it. */
.eg-symbol-key {
  flex-direction: column;
  aspect-ratio: auto;
  padding: 2px 0;
  gap: 1px;
}
.eg-symbol-key-letter {
  font-family: var(--bs-body-font-family);
  font-size: 0.7rem;
  opacity: 0.75;
}
.eg-symbol-key-font {
  font-family: Symbol;
  font-size: 1.05rem;
}