html {
  font-size: 14px;
}

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

.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(--bg-color), 0 0 0 0.25rem #258cfb;
}

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

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

/* Shared colors for light and dark modes */
:root {
  color-scheme: light dark;

  --bg-color: light-dark(#ffffff, #181818);
  --text-color: light-dark(#212529, #f1f1f1);
  --nav-bg-color: light-dark(#f8f9fa, #242424);
  --border-color: light-dark(#dee2e6, #555555);

  /* Point Bootstrap's shared colors at our theme so its tables, forms,
     links, and muted text follow light and dark mode too. */
  --bs-body-bg: var(--bg-color);
  --bs-body-color: var(--text-color);
  --bs-emphasis-color: light-dark(#141d27, #f5f7fa);
  --bs-secondary-color: light-dark(#5f6b78, #b7c0cc);
  --bs-tertiary-color: light-dark(#778391, #929eae);
  --bs-secondary-bg: light-dark(#e7ebf0, #2a2a2a);
  --bs-tertiary-bg: light-dark(#f8f9fb, #303030);
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: light-dark(rgb(20 29 39 / 18%), rgb(245 247 250 / 18%));
  --bs-heading-color: var(--bs-emphasis-color);
  --bs-link-color: light-dark(#0b5ed7, #8dbbff);
  --bs-link-hover-color: light-dark(#084298, #b4d2ff);
  --bs-focus-ring-color: light-dark(rgb(13 110 253 / 25%), rgb(141 187 255 / 35%));

  /* Bootstrap builds links and striped table rows from these red, green,
     blue numbers. light-dark() only accepts colors, so the dark values
     are set in the media query below. */
  --bs-link-color-rgb: 11, 94, 215;
  --bs-link-hover-color-rgb: 8, 66, 152;
  --bs-emphasis-color-rgb: 20, 29, 39;
  --bs-body-color-rgb: 33, 37, 41;
}

/* Honor the user's dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bs-link-color-rgb: 141, 187, 255;
    --bs-link-hover-color-rgb: 180, 210, 255;
    --bs-emphasis-color-rgb: 245, 247, 250;
    --bs-body-color-rgb: 241, 241, 241;
  }

  /* Bootstrap draws these icons as dark images; swap in its light versions. */
  .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }

  .site-navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.site-navbar {
  background-color: var(--nav-bg-color);
  --bs-border-color: var(--border-color);
  --bs-navbar-color: var(--text-color);
  --bs-navbar-hover-color: var(--text-color);
  --bs-navbar-active-color: var(--text-color);
  --bs-navbar-brand-color: var(--text-color);
  --bs-navbar-brand-hover-color: var(--text-color);
}

.site-navbar .dropdown-menu {
  background-color: var(--nav-bg-color);
  border-color: var(--border-color);
}

.site-navbar .dropdown-item {
  color: var(--text-color);
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Survey response pages and categorization dashboard */
.survey-page {
    margin-block: 1.5rem 3rem;
    padding: clamp(1rem, 3vw, 2rem);
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 6%);
}

.survey-page h1 {
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.response-list,
.response-editor {
    max-width: 52rem;
    margin-inline: auto;
}

.response-list .list-group-item {
    padding: 0;
}

.response-list .list-group-item a {
    display: block;
    padding: 1rem 1.25rem;
    color: light-dark(#174ea6, #8dbbff);
    overflow-wrap: anywhere;
    text-underline-offset: 0.2em;
}

.response-list .list-group-item a:hover {
    background-color: light-dark(#f0f5ff, #24304a);
}

.survey-page a:focus-visible,
.survey-page button:focus-visible,
.survey-page textarea:focus-visible {
    outline: 3px solid light-dark(#174ea6, #8dbbff);
    outline-offset: 3px;
}

.response-editor h2 {
    margin-bottom: 1.5rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.response-editor textarea {
    min-height: 10rem;
}

.categorization-dashboard .table-responsive {
    margin-top: 1.5rem;
}

.categorization-dashboard thead th {
    background-color: light-dark(#eef3fa, #2a3140);
    color: var(--text-color);
}

.categorization-dashboard tbody th {
    min-width: 16rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .survey-page {
        margin-top: 1rem;
    }

    .response-editor form > .d-flex {
        flex-direction: column;
        align-items: stretch;
    }
}

/* AI categorization workflow (Categorize and Approve pages) */
.categorization-workflow .eyebrow {
    margin-bottom: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.categorization-workflow .question-prompt {
    margin-bottom: 1.5rem;
    padding-left: 0.75rem;
    border-left: 4px solid light-dark(#174ea6, #8dbbff);
    overflow-wrap: anywhere;
}

.categorization-workflow .answer-text {
    overflow-wrap: anywhere;
}

/* Long response lists scroll inside the page instead of stretching it. */
.response-scroll {
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.response-scroll thead th {
    position: sticky;
    top: 0;
    background-color: light-dark(#eef3fa, #2a3140);
}

/* New categories get a colored edge so they stand out from existing ones (not color alone: they also have a badge). */
.proposal-card.is-new {
    border-left: 6px solid light-dark(#b58100, #ffcd39);
}

.proposal-card.is-existing {
    border-left: 6px solid var(--border-color);
}

@media (max-width: 575.98px) {
    .categorization-workflow form,
    .categorization-workflow form .btn {
        width: 100%;
    }
}