:root {
  --brand-ink: #061338;
  --brand-purple: #180a35;
  --brand-navy: #355d73;
  --brand-navy-soft: #4f748a;
  --brand-green: #76975b;
  --brand-gray: #b2b5b2;
  --brand-tan: #bea988;
  --brand-light-gray: #b9bfc4;
  --brand-orange: #cf7d2d;
  --brand-off-white: #e6e6e3;
  --brand-shell: #f4f5f6;
  --brand-border: #ced3d9;
  --text-default: #222;
  --text-strong: #121821;
  --text-inverse: #fff;

  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-primary: var(--brand-navy);
  --bs-primary-rgb: 53, 93, 115;
  --bs-link-color: var(--brand-navy);
  --bs-link-color-rgb: 53, 93, 115;
  --bs-link-hover-color: var(--brand-navy-soft);
  --bs-link-hover-color-rgb: 79, 116, 138;

  /* Make Bootstrap active states use brand navy. */
  --bs-nav-pills-link-active-bg: var(--brand-navy);
  --bs-nav-pills-link-active-color: var(--text-inverse);
  --bs-nav-tabs-link-active-color: var(--brand-navy);
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--text-default);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--brand-light-gray);
  border-color: var(--brand-light-gray);
  color: var(--text-inverse);
  opacity: 1;
}

.minutes-enhance {
  border-color: var(--brand-border) !important;
}

.minutes-enhance__dropzone {
  align-items: center;
  background: var(--text-inverse);
  border: 2px dashed var(--brand-border);
  border-radius: 0.5rem;
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  min-height: 9rem;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.minutes-enhance__dropzone:hover,
.minutes-enhance__dropzone:focus-visible {
  background: #f8fafc;
  border-color: var(--brand-navy-soft);
}

.minutes-enhance__dropzone-icon {
  color: var(--brand-navy);
  font-size: 1.25rem;
}

.minutes-enhance__prompt {
  resize: vertical;
}

.minutes-enhance__well {
  background: var(--text-inverse);
  border: 1px solid var(--brand-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

.frame-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
}

.frame-toggle__input {
  margin: 0;
}

.frame-toggle__label {
  user-select: none;
}

.mockup-switcher__mascot {
  flex-shrink: 0;
  width: 22px;
  height: auto;
  display: block;
  align-self: center;
}

.app-shell.is-frame-hidden {
  border: 0 !important;
  box-shadow: none !important;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  overflow: auto;
  overscroll-behavior: contain;
}