/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Home page */
.home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f4f6f2;
  color: #1c2721;
  -webkit-font-smoothing: antialiased;
}

.home__header {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem clamp(1.5rem, 5vw, 4.25rem);
  border-bottom: 1px solid #cfd7d1;
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  color: #1c2721;
  text-decoration: none;
}

.home-brand__mark {
  display: grid;
  width: 2.1875rem;
  height: 2.1875rem;
  place-items: center;
  border: 1px solid #1c2721;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.home-brand__name {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.home-brand:focus-visible,
.home-search__send:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 3px;
}

/* User avatar + account dropdown (shared across all page headers) */
.user-menu {
  position: relative;
  flex: 0 0 auto;
}

.user-menu__button {
  display: grid;
  width: 2.1875rem;
  height: 2.1875rem;
  place-items: center;
  padding: 0;
  border: 1px solid #1c2721;
  border-radius: 999px;
  background: #ffffff;
  color: #1c2721;
  cursor: pointer;
}

.user-menu__button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.user-menu__button:hover,
.user-menu__button[aria-expanded="true"] {
  background: #1c2721;
  color: #ffffff;
}

.user-menu__button:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 3px;
}

.user-menu__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.5rem);
  right: 0;
  display: flex;
  min-width: 13.5rem;
  flex-direction: column;
  padding: 0.875rem;
  border: 1px solid #cfd7d1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(28, 39, 33, 0.14), 0 2px 6px rgba(28, 39, 33, 0.08);
  animation: user-menu-in 120ms ease-out;
}

/* display: flex above would defeat the hidden attribute — re-hide it */
.user-menu__panel[hidden] {
  display: none;
}

@keyframes user-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.user-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.user-menu__label {
  color: #637067;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.user-menu__admin {
  text-decoration: none;
  padding: 0.14rem 0.5rem;
  border: 1px solid #3f6b52;
  border-radius: 999px;
  color: #3f6b52;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-menu__admin:hover {
  background: #3f6b52;
  color: #fff;
}

.user-menu__email {
  margin-top: 0.3rem;
  color: #1c2721;
  font-size: 0.85rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

/* Rails button_to wraps the button in a form with a default margin */
.user-menu__panel .button_to {
  margin: 0.625rem 0 0;
}

.user-menu__sign-out {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0 0.1rem;
  border: none;
  border-top: 1px solid #e3e8e4;
  border-radius: 0;
  background: none;
  color: #637067;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: left;
}

.user-menu__sign-out:hover {
  color: #b3261e;
}

.user-menu__sign-out:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 2px;
}

.user-menu__sign-in {
  padding: 0.375rem 0;
  border-bottom: 1px solid transparent;
  color: #637067;
  font-size: 0.74rem;
  font-weight: 650;
  text-decoration: none;
}

.user-menu__sign-in:hover {
  border-bottom-color: #3f6b52;
  color: #3f6b52;
}

.user-menu__sign-in:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 3px;
}

/* Login page */
.login {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 1.5rem;
  background: #f4f6f2;
  color: #1c2721;
  -webkit-font-smoothing: antialiased;
}

.login__card {
  width: 100%;
  max-width: 22rem;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid #cfd7d1;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
  box-sizing: border-box;
}

.login__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  margin-bottom: 1rem;
}

.login__mark {
  display: grid;
  width: 2.1875rem;
  height: 2.1875rem;
  place-items: center;
  border: 1px solid #1c2721;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.login__name {
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.login__flash {
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 3px;
  font-size: 0.82rem;
}

.login__flash--alert {
  border: 1px solid #ecc8c5;
  background: #fbf1f0;
  color: #b3261e;
}

.login__flash--notice {
  border: 1px solid #cfe0d5;
  background: #f2f6f3;
  color: #3f6b52;
}

.login__title {
  margin: 0 0 0.4rem;
  color: #1c2721;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.login__title + .login__form {
  margin-top: 0.85rem;
}

.login__sub {
  margin: 0 0 1.25rem;
  color: #637067;
  font-size: 0.8rem;
  line-height: 1.5;
}

.login__field {
  margin-bottom: 1rem;
}

.login__field label {
  display: block;
  margin-bottom: 0.3rem;
  color: #637067;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login__field input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cfd7d1;
  border-radius: 3px;
  background: #ffffff;
  color: #1c2721;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.login__field input:focus {
  border-color: #3f6b52;
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.1);
}

.login__field input::placeholder {
  color: #838e86;
  opacity: 1;
}

.login__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 3px;
  background: #3f6b52;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration: none;
}

.login__submit:hover {
  background: #315740;
}

.login__submit:focus-visible,
.login__back:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 3px;
}

.login__back {
  display: inline-block;
  margin-top: 1.25rem;
  border-bottom: 1px solid transparent;
  color: #637067;
  font-size: 0.74rem;
  font-weight: 650;
  text-decoration: none;
}

.login__back:hover {
  border-bottom-color: #3f6b52;
  color: #3f6b52;
}

.login__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
  color: #637067;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login__divider::before,
.login__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #cfd7d1;
}

.login__submit--secondary {
  border: 1px solid #3f6b52;
  background: #ffffff;
  color: #3f6b52;
}

.login__submit--secondary:hover {
  background: #f2f6f3;
}

.login__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: 0.74rem;
}

.login__alt-link {
  color: #3f6b52;
  font-weight: 650;
  text-decoration: none;
}

.login__alt-link:hover {
  text-decoration: underline;
}

.login__linklike {
  padding: 0;
  border: 0;
  background: none;
  color: #3f6b52;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 650;
}

.login__linklike:hover {
  text-decoration: underline;
}

.login__alt-link:focus-visible,
.login__linklike:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 2px;
}

.login__hint {
  margin: 1rem 0 0;
  color: #637067;
  font-size: 0.74rem;
  line-height: 1.45;
}

.home__main {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 7rem 1.5rem;
  box-sizing: border-box;
}

.home-search {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 40.625rem;
  flex-direction: column;
  border: 1px solid #cfd7d1;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
}

.home-search:focus-within {
  border-color: #3f6b52;
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.1);
}

.home-search__bar {
  display: flex;
  flex-direction: column;
}

.home-search__field {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  gap: 0.6875rem;
  padding: 0 0.9375rem;
}

.home-search__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  margin-top: 0.95rem;
  color: #838e86;
}

.home-search textarea {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: #1c2721;
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.45;
  max-height: 13rem;
}

.home-search textarea::placeholder {
  color: #838e86;
  opacity: 1;
}

.home-search__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.9375rem;
  border-top: 1px dashed #e3e8e4;
}

.home-search__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #637067;
  font-size: 0.76rem;
}

.home-search__kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.08rem 0.34rem;
  border: 1px solid #cfd7d1;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff;
  color: #4a554d;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.home-search__send {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #3f6b52;
  color: #ffffff;
  cursor: pointer;
}

.home-search__send svg {
  width: 1.05rem;
  height: 1.05rem;
}

.home-search__send:hover {
  background: #315740;
}

.home-search__results {
  max-height: 22rem;
  overflow-y: auto;
  border-top: 1px solid #e3e8e4;
}

/* Quick templates tray on the home page */
.home-tray {
  width: 100%;
  max-width: 40.625rem;
  margin-top: 1.5rem;
}

.home-tray__label {
  margin-bottom: 0.7rem;
  color: #637067;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-tray__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}

/* Left sidebar menu on the home page */
.home-sidebar {
  position: fixed;
  z-index: 2;
  top: 5.5rem;
  left: clamp(1rem, 3vw, 2.25rem);
  display: flex;
  min-width: 10.5rem;
  flex-direction: column;
  gap: 0.2rem;
}

.home-sidebar__label {
  margin-bottom: 0.4rem;
  padding: 0 0.75rem;
  color: #637067;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-sidebar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: #4a554d;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.home-sidebar__link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: #838e86;
}

.home-sidebar__link:hover {
  background: #eaefe9;
  color: #1c2721;
}

.home-sidebar__link:focus-visible {
  outline: 2px solid #3f6b52;
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .home-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    margin-top: 5rem;
    padding: 0 1.5rem;
  }

  .home-sidebar__label {
    width: 100%;
    margin: 0 0 0.3rem;
    padding: 0;
  }
}

.search-results__list {
  margin: 0;
  padding: 0.375rem 0;
  list-style: none;
}

.search-result {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.9375rem;
  color: #1c2721;
  text-decoration: none;
}

.search-result:hover,
.search-result:focus-visible {
  background: #f2f6f3;
  outline: none;
}

.search-result__title {
  font-size: 0.9rem;
  font-weight: 700;
}

.search-result__snippet {
  overflow: hidden;
  color: #637067;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__source {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #637067;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-result__external {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-results__status {
  margin: 0;
  padding: 0.75rem 0.9375rem;
  color: #637067;
  font-size: 0.8rem;
}

@media (max-width: 30rem) {
  .home__header {
    padding: 1.125rem;
  }

  .home-brand__mark {
    width: 2rem;
    height: 2rem;
  }

  .home-brand__name {
    font-size: 0.68rem;
  }

  .home__main {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .home-search__field {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .home-search textarea {
    font-size: 0.84rem;
  }

  .home-search__foot {
    gap: 0.75rem;
  }

  .home-search__hint {
    font-size: 0.7rem;
  }
}

@media (max-width: 22rem) {
  .home-search__icon {
    display: none;
  }
}

/* Public content page */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f4f6f2;
  color: #1c2721;
  -webkit-font-smoothing: antialiased;
}

.page__header {
  display: flex;
  align-items: center;
  padding: 1.375rem clamp(1.5rem, 5vw, 4.25rem);
  border-bottom: 1px solid #cfd7d1;
}

.page__header .user-menu {
  margin-left: auto;
}

.page__article {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem clamp(1.5rem, 5vw, 4.25rem) 4.5rem;
  box-sizing: border-box;
}

.page__title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.page-block {
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #cfd7d1;
  font-size: 0.95rem;
  line-height: 1.6;
}

.page-block:last-child {
  border-bottom: none;
}

.page-block img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.page-block figcaption {
  margin-top: 0.5rem;
  color: #637067;
  font-size: 0.8rem;
}

.page-block__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 750;
}

/* Dosing block */
.page-block--dosing {
  position: relative;
}

.dosing-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dosing-group__population {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d3a32;
}

.dosing-group__indication {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a5850;
}

.dosing-group__indication + .dosing-table {
  margin-top: 0;
}

.dosing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.dosing-table th {
  text-align: left;
  font-weight: 700;
  padding: 0.375rem 0.5rem;
  border-bottom: 2px solid #2d3a32;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #637067;
}

.dosing-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #e0e6e1;
  vertical-align: top;
}

.dosing-entry__dose {
  font-weight: 600;
}

.dosing-entry__max {
  font-weight: 400;
  color: #637067;
  font-size: 0.8rem;
}

.dosing-entry__indication {
  display: block;
  font-weight: 400;
  color: #637067;
  font-size: 0.8rem;
  font-style: italic;
}

.dosing-entry-notes td {
  padding-top: 0;
  font-size: 0.82rem;
  color: #637067;
  font-style: italic;
}

.dosing-calc-btn {
  padding: 0.25rem 0.625rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #2d3a32;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.dosing-calc-btn:hover,
.dosing-calc-btn[aria-expanded="true"] {
  background: #1a241e;
}

.dosing-formulations {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f4f7f5;
  border-radius: 4px;
  font-size: 0.85rem;
}

.dosing-formulations h4 {
  margin: 0 0 0.375rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #637067;
}

.dosing-formulations ul {
  margin: 0;
  padding-left: 1.25rem;
}

.dosing-formulations li {
  margin-bottom: 0.125rem;
}

.dosing-extra-text {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: #4a554d;
}

/* Calculator popup (anchored to its button by Stimulus; inline top/left) */
.dosing-calculator {
  position: fixed;
  width: 24rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfd7d1;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  z-index: 100;
  animation: dosing-calculator-in 120ms ease-out;
}

@keyframes dosing-calculator-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* On narrow screens the popup docks to the bottom of the viewport instead */
@media (max-width: 40rem) {
  .dosing-calculator {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
    max-height: 70vh;
  }
}

.dosing-calculator__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e0e6e1;
}

.dosing-calculator__header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.dosing-calculator__close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #637067;
  padding: 0;
  line-height: 1;
}

.dosing-calculator__close:hover {
  color: #2d3a32;
}

.dosing-calculator__context {
  margin: 0;
  padding: 0.625rem 1rem 0;
  font-size: 0.8rem;
  color: #637067;
}

.dosing-calculator__body {
  padding: 1rem;
}

.dosing-calculator__field {
  margin-bottom: 0.875rem;
}

.dosing-calculator__field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #637067;
  margin-bottom: 0.25rem;
}

.dosing-calculator__field input,
.dosing-calculator__field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cfd7d1;
  border-radius: 3px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.dosing-calculator__dose-input {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dosing-calculator__dose-input input {
  flex: 1;
}

.dosing-calculator__dose-input span {
  font-size: 0.85rem;
  color: #637067;
  white-space: nowrap;
}

.dosing-calculator__results {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid #e0e6e1;
}

.dosing-calculator__result {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.375rem;
  font-size: 0.9rem;
}

.dosing-calculator__label {
  font-weight: 600;
  color: #637067;
}

/* Search × AI prompt design-preview page (/search-preview) */
.spv {
  --ink: #1c2721;
  --muted: #637067;
  --line: #cfd7d1;
  --brand: #3f6b52;
  --ai: #5b5bd6;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 6rem;
  background: #f4f6f2;
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.spv * {
  box-sizing: border-box;
}

.spv__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 2.75rem;
}

.spv__badge {
  padding: 0.25rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spv__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.spv__lede {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.spv__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 3.5rem;
}

.spv__nav-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 650;
  text-decoration: none;
}

.spv__nav-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.spv-demo {
  position: relative;
  scroll-margin-top: 1.5rem;
}

.spv-demo [data-controller="search"] {
  position: relative;
}

.spv-demo > [data-controller="search"],
.spv-demo > .spv-c-parent,
.spv-demo > .spv-d-parent {
  width: 100%;
  max-width: 40.625rem;
}

.spv__label {
  margin: 0 0 0.375rem;
  font-size: 0.98rem;
  font-weight: 750;
}

.spv__desc {
  max-width: 36rem;
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

section[id^="spv-"] {
  margin-top: 0;
  padding-top: 3.25rem;
}

/* Shared bits */
.spv-kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.08rem 0.34rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff;
  color: #4a554d;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.spv-kbd--dark {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #cfe0d5;
}

.spv-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.spv-hint--ai {
  color: var(--ai);
}

.spv-hint--dark {
  color: #8fa198;
}

/* Detached results dropdown shared by the variants */
.spv-drop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(28, 39, 33, 0.12);
}

/* Variant A · evolved minimal */
.spv-a {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
}

.spv-a:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.1);
}

.spv-a__row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 0.9375rem;
}

.spv-a__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  color: #838e86;
}

.spv-a input[type="text"] {
  min-width: 0;
  min-height: 3.375rem;
  flex: 1;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
}

.spv-a input[type="text"]::placeholder {
  color: #838e86;
  opacity: 1;
}

.spv-a__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.9375rem;
  border-top: 1px dashed #e3e8e4;
}

.spv-a__send {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
}

.spv-a__send svg {
  width: 1.05rem;
  height: 1.05rem;
}

.spv-a__send:hover {
  background: #315740;
}

/* Variant B · rounded composer */
.spv-b {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.65rem 0.65rem 0.65rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(28, 39, 33, 0.07);
}

.spv-b:focus-within {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.12);
}

.spv-b__spark {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.62rem;
  color: var(--ai);
}

.spv-b textarea {
  min-height: 3.3rem;
  padding: 0.55rem 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
}

.spv-b textarea::placeholder {
  color: #838e86;
  opacity: 1;
}

.spv-b__send {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  align-self: end;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ai);
  color: #ffffff;
  cursor: pointer;
}

.spv-b__send svg {
  width: 1.1rem;
  height: 1.1rem;
}

.spv-b__send:hover {
  background: #4848c0;
}

.spv-drop--b {
  border-radius: 1.15rem;
}

.spv-b__hint {
  display: flex;
  justify-content: center;
  margin: 0.65rem 0 0;
}

.spv-b__hint span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.72rem;
  box-shadow: 0 1px 0 rgba(28, 39, 33, 0.04);
}

/* Variant C · segmented modes */
.spv-c-parent {
  position: relative;
}

.spv-c {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.spv-c:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.1);
}

.spv-c__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.45rem 0.6rem 0;
  border-bottom: 1px solid #edf1ee;
}

.spv-c__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: default;
}

.spv-c__tab svg {
  width: 0.85rem;
  height: 0.85rem;
}

.spv-c__tab--active {
  border-bottom-color: var(--brand);
  color: var(--ink);
}

.spv-c__tab--ai svg {
  color: var(--ai);
}

.spv-c__field {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0 0.9375rem;
}

.spv-c__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  color: #838e86;
}

.spv-c input[type="text"] {
  min-width: 0;
  min-height: 3.15rem;
  flex: 1;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 0.93rem;
}

.spv-c input[type="text"]::placeholder {
  color: #838e86;
  opacity: 1;
}

.spv-c__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9375rem;
  border-top: 1px solid #e3e8e4;
  background: #f7faf8;
}

.spv-c__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.spv-c__go {
  min-width: 5.5rem;
  padding: 0.42rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 750;
}

.spv-c__go:hover {
  background: #315740;
}

.spv-drop--c {
  top: calc(100% - 2px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Variant D · dark command bar */
.spv-d-parent {
  position: relative;
}

.spv-d {
  border: 1px solid #223129;
  border-radius: 12px;
  background: #17231d;
  box-shadow: 0 16px 40px rgba(23, 35, 29, 0.25);
}

.spv-d:focus-within {
  border-color: #38594a;
  box-shadow: 0 0 0 3px rgba(56, 89, 74, 0.35);
}

.spv-d__row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.25rem 1rem 0;
}

.spv-d__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  color: #7d8b83;
}

.spv-d input[type="text"] {
  min-width: 0;
  min-height: 3.1rem;
  flex: 1;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #eef5f0;
  font-size: 0.95rem;
}

.spv-d input[type="text"]::placeholder {
  color: #7d8b83;
  opacity: 1;
}

.spv-d__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.9rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.spv-d__chips {
  display: inline-flex;
  gap: 0.45rem;
}

.spv-d__chip {
  padding: 0.26rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #cfe0d5;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: default;
}

.spv-d__chip--ai {
  border-color: transparent;
  background: var(--ai);
  color: #ffffff;
}

/* Dark results panel for D */
.spv-drop--d {
  background: #1d2b24;
  border-color: #2a3a31;
}

.spv-drop--d .search-result {
  color: #e8efe9;
}

.spv-drop--d .search-result:hover,
.spv-drop--d .search-result:focus-visible {
  background: #243329;
}

.spv-drop--d .search-result__snippet {
  color: #9fb1a6;
}

.spv-drop--d .search-result__source {
  color: #9fb1a6;
}

.spv-drop--d .search-results__status {
  color: #9fb1a6;
}

.search-results__status--ai {
  color: var(--ai, #5b5bd6);
  font-weight: 600;
}

.spv button:focus-visible,
.spv input[type="submit"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  .spv__header {
    padding-bottom: 2rem;
  }

  .spv-b {
    padding-left: 0.85rem;
  }

  .spv-c__foot,
  .spv-d__foot {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .spv-c__actions {
    margin-left: auto;
  }
}

/* =====================================================================
   Dosing design preview page (/dosing-preview)
   ===================================================================== */
.dpv {
  --ink: #1c2721;
  --muted: #637067;
  --line: #e0e6e1;
  --line-strong: #2d3a32;
  --brand: #3f6b52;
  --bg: #f4f6f2;
  --card: #ffffff;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.dpv__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.dpv__badge {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.dpv__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.dpv__lede {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.dpv__lede a {
  color: var(--brand);
  font-weight: 600;
}

.dpv__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.dpv__nav-chip,
.dpv__nav-chip:visited {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
  background: var(--card);
}

.dpv__nav-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.dpv-findings {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand);
  background: var(--card);
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
}

.dpv-findings h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 750;
}

.dpv-findings__n {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dpv-findings ul {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.dpv-findings li {
  margin-bottom: 0.4rem;
}

.dpv-findings p {
  margin: 0;
  color: var(--muted);
}

.dpv__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
}

.dpv-demo {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.dpv-demo__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dpv-demo__delta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
  background: rgba(63, 107, 82, 0.1);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.dpv__desc {
  margin: 0.5rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 40rem;
}

/* The "document" frame each variant renders inside */
.dpv-doc {
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.04);
}

.dpv-doc__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.dpv-doc__kicker {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 750;
}

/* Shared bits across variants */
.dpv-max {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
}

.dpv-chip {
  display: inline-block;
  padding: 0.06rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f4f6f2;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.dpv-note {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

.dpv-calc {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 3px;
  white-space: nowrap;
  user-select: none;
}

.dpv-formulas {
  margin: 1rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

.dpv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Variant A · tightened table ---------- */
.dpv-tight {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dpv-tight__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.dpv-tight__pop {
  font-weight: 750;
  color: var(--ink);
}

.dpv-tight__qual {
  color: var(--muted);
  font-size: 0.85rem;
}

.dpv-tight__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.dpv-tight__table th {
  padding: 0 0.5rem 0.3rem;
  border-bottom: 2px solid var(--line-strong);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.dpv-tight__table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.dpv-tight__table tr:last-child td {
  border-bottom: none;
}

.dpv-route {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 650;
}

.dpv-dosecell__main {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dpv-freq {
  white-space: nowrap;
  font-size: 0.86rem;
}

.dpv-act {
  text-align: right;
  width: 1%;
}

/* ---------- Ledger (variants B, C, D) ---------- */
.dpv-ledger__group {
  margin: 0 0 1rem;
}

.dpv-ledger__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
}

.dpv-ledger__rule {
  flex: 1;
  order: 2;
  height: 1px;
  background: var(--line);
}

.dpv-ledger__pop {
  order: 1;
  font-weight: 750;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dpv-ledger__qual {
  order: 3;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

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

.dpv-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.dpv-row:last-child {
  border-bottom: none;
}

.dpv-row__top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dpv-badge {
  flex: 0 0 4.2rem;
  padding: 0.08rem 0;
  text-align: center;
  border: 1px solid var(--ink);
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.dpv-row__dose {
  font-size: 0.92rem;
}

.dpv-row__freq {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

.dpv-row__freq::before {
  content: "⟶ ";
  color: #c4cec7;
}

.dpv-note--foot {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem;
}

/* ---------- Variant C · tabs ---------- */
.dpv-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
}

.dpv-tab {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.dpv-tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.dpv-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.dpv-tabs__panels .dpv-ledger__head {
  display: none;
}

/* ---------- Fluticasone footnote etc. ---------- */
.dpv__footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.dpv__footer code {
  padding: 0.1rem 0.35rem;
  background: #e8ede9;
  border-radius: 3px;
  font-size: 0.8rem;
}

.dpv button:focus-visible,
.dpv a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 34rem) {
  /* Ledger + tables relax */
  .dpv-row__freq {
    white-space: normal;
  }

  .dpv-chip {
    white-space: normal;
  }

  .dpv-badge {
    flex-basis: 3.4rem;
  }

  /* Variant A stacks into rows on phones instead of squeezing columns */
  .dpv-tight__table,
  .dpv-tight__table tbody,
  .dpv-tight__table tr,
  .dpv-tight__table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .dpv-tight__table thead {
    display: none;
  }

  .dpv-tight__table tr {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
  }

  .dpv-tight__table tr:last-child {
    border-bottom: none;
  }

  .dpv-tight__table td {
    padding: 0.1rem 0;
    border-bottom: none;
  }

  .dpv-dosecell__main {
    align-items: center;
    margin: 0.1rem 0;
  }

  .dpv-freq {
    margin-left: calc(4rem + 0.5rem);
    color: var(--muted);
    font-size: 0.8rem;
  }

  .dpv-freq::before {
    content: "Schedule ";
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.66rem;
    color: #93a099;
  }

  .dpv-act {
    text-align: left;
    width: auto;
    padding-top: 0.35rem !important;
  }
}


/* AI answer (home search panel) */
.ai-answer {
  padding: 0.875rem 0.9375rem 1rem;
}

.ai-answer__header {
  margin-bottom: 1.25rem;
}

.ai-answer__badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai, #5b5bd6) 12%, #ffffff);
  color: var(--ai, #5b5bd6);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-answer__title {
  margin: 0.55rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
  text-wrap: balance;
  font-weight: 750;
}

.ai-answer__summary {
  margin: 0.25rem 0 0;
  color: #2d3a32;
  font-size: 0.86rem;
  line-height: 1.65;
}

.ai-answer__section {
  margin-top: 1.25rem;
}

.ai-answer__section + .ai-answer__section {
  padding-top: 1rem;
  border-top: 1px solid #e8ede9;
}

.ai-answer__section-title {
  margin: 0 0 0.625rem;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #637067;
}

.ai-answer__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #1c2721;
}

.ai-answer__list li {
  padding-left: 0.2rem;
}

.ai-answer__list li::marker {
  color: #93a099;
}

.ai-answer .page-block--dosing {
  margin-top: 0.25rem;
}

.ai-answer .page-block--dosing .page-block__title {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #637067;
}

.ai-answer .dosing-table {
  font-size: 0.82rem;
}

.ai-answer__footer {
  margin-top: 1rem;
  padding-top: 0.625rem;
  border-top: 1px dashed #e3e8e4;
}

.ai-answer__references {
  margin: 0 0 0.375rem;
  font-size: 0.76rem;
  color: #637067;
}

.ai-answer__reference {
  font-weight: 600;
}

.ai-answer__reference a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-answer__reference a:hover {
  opacity: 0.75;
}

.ai-answer__disclaimer {
  margin: 0;
  font-size: 0.7rem;
  color: #93a099;
}

@keyframes ai-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* AI answer: danger sections and warning items */
.ai-answer__section--danger {
  padding: 0.875rem 1rem;
  border: 1px solid #efdcd8;
  border-left: 3px solid #b3261e;
  border-radius: 8px;
  background: #fff9f7;
}

.ai-answer__section--danger .ai-answer__section-title {
  color: #b3261e;
}

.ai-answer__section--danger .ai-answer__list li::marker {
  color: #b3261e;
}

.ai-answer__item--warning {
  color: #b3261e;
  font-weight: 650;
}

/* AI answer: urgency pill (test results) */
.ai-answer__pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.ai-answer__pill--urgent {
  background: color-mix(in srgb, #b3261e 14%, #ffffff);
  color: #b3261e;
}

.ai-answer__pill--soon {
  background: color-mix(in srgb, #b45309 16%, #ffffff);
  color: #b45309;
}

.ai-answer__pill--routine {
  background: color-mix(in srgb, #3f6b52 14%, #ffffff);
  color: #2d5a42;
}

/* AI answer: flagged key findings (test results) */
.ai-answer__findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1c2721;
}

.ai-answer__finding {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.ai-answer__flag {
  flex: 0 0 auto;
  min-width: 4.6rem;
  box-sizing: border-box;
  text-align: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-answer__finding--critical {
  color: #b3261e;
  font-weight: 650;
}

.ai-answer__finding--critical .ai-answer__flag {
  background: #b3261e;
  color: #ffffff;
}

.ai-answer__finding--abnormal .ai-answer__flag {
  background: color-mix(in srgb, #c2410c 14%, #ffffff);
  color: #c2410c;
}

.ai-answer__finding--borderline .ai-answer__flag {
  background: color-mix(in srgb, #b45309 16%, #ffffff);
  color: #b45309;
}

.ai-answer__finding--normal .ai-answer__flag {
  background: color-mix(in srgb, #3f6b52 14%, #ffffff);
  color: #2d5a42;
}

/* AI answer: consult checklist */
.ai-answer__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1c2721;
}

.ai-answer__checklist li::before {
  content: "☐";
  margin-right: 0.5rem;
  color: #5b5bd6;
}

.ai-answer__info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.ai-answer__info-list li {
  padding: 0.45rem 0.6rem;
  border: 1px solid #e3e8e4;
  border-radius: 8px;
  background: #f8faf8;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ai-answer__info-question {
  font-weight: 650;
  color: #1c2721;
}

.ai-answer__info-impact {
  color: #637067;
  font-size: 0.78rem;
}

.ai-answer__info-impact::before {
  content: "→ ";
  color: #93a099;
}

/* AI answer: scannable criteria box (condition) */
.ai-answer__criteria {
  padding: 0.55rem 0.75rem;
  border: 1px solid #e3e8e4;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ai, #5b5bd6) 5%, #ffffff);
}

.ai-answer__criteria .ai-answer__list {
  font-size: 0.84rem;
}

.ai-answer__prose {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1c2721;
}

/* AI answer: suggest improvement */
.ai-answer__suggest {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px dashed #e3e8e4;
}

.ai-answer__suggest-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid #cfd7d1;
  border-radius: 999px;
  background: #ffffff;
  color: #4a5850;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.ai-answer__suggest-btn:hover:not(:disabled) {
  border-color: #3f6b52;
  color: #1c2721;
}

.ai-answer__suggest-btn:disabled {
  color: #3f6b52;
  border-color: #3f6b52;
  cursor: default;
}

.ai-answer__suggest-hint {
  font-size: 0.72rem;
  color: #93a099;
}

/* Standalone suggest-improvement footer (content pages, note templates) */
.suggest-wrap {
  margin-top: 1.75rem;
}

.suggestion-modal {
  border: 1px solid #cfd7d1;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  max-width: 34rem;
  width: calc(100vw - 2.5rem);
  box-shadow: 0 18px 50px rgb(28 39 33 / 22%);
}

.suggestion-modal::backdrop {
  background: rgb(28 39 33 / 35%);
}

.suggestion-modal__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 750;
}

.suggestion-modal__meta {
  margin: 0 0 0.65rem;
  font-size: 0.74rem;
  color: #637067;
}

.suggestion-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cfd7d1;
  border-radius: 10px;
  font: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

.suggestion-modal__rating {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.suggestion-modal__rating button {
  border: 1px solid #cfd7d1;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.9rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.suggestion-modal__rating button.is-on {
  border-color: #3f6b52;
  background: color-mix(in srgb, #3f6b52 12%, #ffffff);
}

.suggestion-modal__status {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  color: #b3261e;
}

.suggestion-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.suggestion-modal__cancel {
  padding: 0.4rem 0.85rem;
  border: 1px solid #cfd7d1;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.suggestion-modal__send {
  padding: 0.4rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: #1c2721;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.suggestion-modal__send:hover {
  background: #3f6b52;
}

/* AI conversation (chat page) */
.chat {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f4f6f2;
  color: #1c2721;
  -webkit-font-smoothing: antialiased;
}

.chat__header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid #cfd7d1;
  background: #f4f6f2;
}

.chat-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.6rem;
  color: #1c2721;
  text-decoration: none;
}

.chat-brand__mark {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border: 1px solid #1c2721;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.chat-brand__name {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.chat__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #637067;
  font-size: 0.8rem;
}

.chat__save {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.6rem;
  margin-left: auto;
}

.chat__save-note {
  font-size: 0.72rem;
  color: #93a099;
}

.chat__save-btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid #cfd7d1;
  border-radius: 999px;
  background: #ffffff;
  color: #4a5850;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.chat__save-btn:hover:not(:disabled) {
  border-color: #3f6b52;
  color: #1c2721;
}

.chat__save-btn:disabled {
  color: #93a099;
  cursor: default;
}

.chat__thread {
  /* width: 100% + padding: keep padding inside the split-pane width */
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 2rem;
}

.chat__messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-message--user {
  align-self: flex-end;
  max-width: 85%;
}

.chat-message--user .chat-message__bubble {
  padding: 0.6rem 0.9rem;
  border-radius: 14px 14px 4px 14px;
  background: #1c2721;
  color: #ffffff;
  font-size: 0.88rem;
  line-height: 1.5;
}

.chat-message--user .chat-message__bubble p {
  margin: 0;
}

.chat-message--assistant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.chat-message__badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai, #5b5bd6) 12%, #ffffff);
  color: var(--ai, #5b5bd6);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-message--assistant .chat-message__bubble {
  padding: 0.75rem 1rem;
  border: 1px solid #cfd7d1;
  border-radius: 4px 14px 14px 14px;
  background: #ffffff;
  font-size: 0.88rem;
  line-height: 1.55;
}

.chat-message--assistant .chat-message__bubble p {
  margin: 0 0 0.5rem;
}

.chat-message--assistant .chat-message__bubble p:last-child {
  margin-bottom: 0;
}

.chat-message__caveats {
  margin-top: 0.65rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e4d9c8;
  border-radius: 10px;
  background: #fdf8ef;
}

.chat-message__caveats-title {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6d3b;
}

.chat-message__caveats-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: #6b5a3e;
}

.chat-message__failure {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid #e3c8c5;
  border-radius: 10px;
  background: #fdf3f2;
  color: #b3261e;
  font-size: 0.8rem;
}

.chat-message__failure p {
  margin: 0 0 0.4rem;
}

.chat__retry {
  padding: 0.25rem 0.8rem;
  border: 1px solid #e3c8c5;
  border-radius: 999px;
  background: #ffffff;
  color: #b3261e;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.chat__retry:hover {
  border-color: #b3261e;
}

.chat__pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ai, #5b5bd6);
  font-size: 0.8rem;
  font-weight: 600;
}

.chat__spinner {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--ai, #5b5bd6) 25%, #ffffff);
  border-top-color: var(--ai, #5b5bd6);
  border-radius: 50%;
  animation: ai-spinner 700ms linear infinite;
}

/* The opening structured answer renders as a card in the thread. */
.chat__turn {
  border: 1px solid #cfd7d1;
  border-radius: 4px 14px 14px 14px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
  overflow: hidden;
}

.chat__failure {
  margin: 3rem auto;
  max-width: 26rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #cfd7d1;
  border-radius: 14px;
  background: #ffffff;
  text-align: center;
  font-size: 0.88rem;
}

.chat__failure p {
  margin: 0 0 0.75rem;
}

.chat__failure-link {
  color: #3f6b52;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.chat__failure-link:hover {
  text-decoration: underline;
}

.chat__composer {
  box-sizing: border-box;
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 0.75rem clamp(1.25rem, 4vw, 2rem) 1.25rem;
  background: linear-gradient(to top, #f4f6f2 75%, rgba(244, 246, 242, 0));
}

.chat-composer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid #cfd7d1;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
}

.chat-composer:focus-within {
  border-color: #3f6b52;
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.1);
}

.chat-composer__field {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.6875rem;
  padding: 0 0.9375rem;
}

.chat-composer__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  margin-top: 0.7rem;
  color: #838e86;
}

.chat-composer textarea {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: #1c2721;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  max-height: 10rem;
}

.chat-composer textarea::placeholder {
  color: #838e86;
  opacity: 1;
}

.chat-composer__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.9375rem;
  border-top: 1px dashed #e3e8e4;
}

.chat-composer__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #637067;
  font-size: 0.76rem;
}

.chat-composer__kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.08rem 0.34rem;
  border: 1px solid #cfd7d1;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff;
  color: #4a554d;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.chat-composer__send {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #3f6b52;
  color: #ffffff;
  cursor: pointer;
}

.chat-composer__send svg {
  width: 1.05rem;
  height: 1.05rem;
}

.chat-composer__send:hover:not(:disabled) {
  background: #315740;
}

.chat-composer__send:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Split workspace: chat on the left, hybrid search results on the right */
.chat-workspace {
  display: flex;
  height: 100vh;
  height: 100svh;
  background: #f4f6f2;
}

.chat-workspace .chat {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.chat-search {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  border-left: 1px solid #cfd7d1;
  background: #ffffff;
}

.chat-search__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex: 0 0 auto;
  padding: 0.85rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid #cfd7d1;
  background: #ffffff;
}

.chat-search__title {
  flex: 0 0 auto;
  margin: 0;
  color: #637067;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.chat-search__query {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93a099;
  font-size: 0.78rem;
}

.chat-search__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem clamp(1rem, 2.5vw, 1.75rem) 1.5rem;
}

.chat-search__list {
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-search__list .search-result {
  border: 1px solid #e4eae6;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.chat-search__list .search-result:hover,
.chat-search__list .search-result:focus-visible {
  border-color: #cfd7d1;
  background: #f2f6f3;
}

.chat-search__snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

.search-result__kind {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #637067;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Stacked below the chat once the viewport is too narrow to split */
@media (max-width: 60rem) {
  .chat-workspace {
    flex-direction: column;
    height: auto;
  }

  .chat-workspace .chat {
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .chat-search {
    height: auto;
    border-left: 0;
    border-top: 1px solid #cfd7d1;
  }

  .chat-search__body {
    overflow: visible;
  }
}

/* =====================================================================
   Quick templates: keyboard-first consult-note templates
   Widget styles (.qt-*) are shared by the real pages (/templates/:id,
   home tile tray) and the design preview (/templates-preview, .qtv-*).
   Variant skins: .qtA/.qtB/.qtC/.qtD.
   ===================================================================== */
.nt {
  --ink: #1c2721;
  --muted: #637067;
  --line: #cfd7d1;
  --brand: #3f6b52;
  --bg: #f4f6f2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.nt * {
  box-sizing: border-box;
}

.nt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem clamp(1.5rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--line);
}

.nt__badge {
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nt__main {
  flex: 1;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  /* Asymmetric gutter: room for the floating control hint left of the panel */
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 4rem clamp(1.25rem, 11vw, 11rem);
  box-sizing: border-box;
}

.page-template-link {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #2d3a32;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}

.page-template-link:hover {
  background: #1a241e;
}

/* Quick forms index page (/quick-forms) */
.qf {
  --ink: #1c2721;
  --muted: #637067;
  --line: #cfd7d1;
  --brand: #3f6b52;
  --bg: #f4f6f2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.qf * {
  box-sizing: border-box;
}

.qf__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem clamp(1.5rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--line);
}

.qf__badge {
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qf__main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 4rem;
  box-sizing: border-box;
}

.qf__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.qf__lede {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.qf__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.qf__empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.qf a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.qtv {
  --ink: #1c2721;
  --muted: #637067;
  --line: #cfd7d1;
  --brand: #3f6b52;
  --bg: #f4f6f2;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 5rem;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.qtv * {
  box-sizing: border-box;
}

.qtv__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 2.75rem;
}

.qtv__badge {
  padding: 0.25rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qtv__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.qtv__lede {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.qtv kbd,
.qtv-kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.06rem 0.32rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff;
  color: #4a554d;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.qtv-findings {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand);
  background: #ffffff;
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.qtv-findings h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 750;
}

.qtv-findings ul {
  margin: 0;
  padding-left: 1.1rem;
}

.qtv-findings li {
  margin-bottom: 0.45rem;
}

.qtv-findings code {
  padding: 0.08rem 0.35rem;
  background: #eef3ef;
  border-radius: 3px;
  font-size: 0.8em;
}

.qtv-payload {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.85rem;
  background: #f7faf8;
  border: 1px solid #e0e6e1;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #2d3a32;
  overflow-x: auto;
}

.qtv__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
}

.qtv__nav-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 650;
  text-decoration: none;
}

.qtv__nav-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.qtv-demo {
  margin-top: 3.25rem;
  scroll-margin-top: 1.5rem;
}

.qtv__label {
  margin: 0 0 0.375rem;
  font-size: 0.98rem;
  font-weight: 750;
}

.qtv__desc {
  max-width: 40rem;
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.qtv__footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.qtv__footer code {
  padding: 0.08rem 0.35rem;
  background: #e8ede9;
  border-radius: 3px;
  font-size: 0.9em;
}

.qtv button:focus-visible,
.qtv a:focus-visible,
.qtv input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Home mock with the Quick templates tile ---------- */
.qtv-home {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(28, 39, 33, 0.06);
}

.qtv-home__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.qtv-home__signin {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.qtv-home__search {
  display: grid;
  place-items: center;
  padding: 2.4rem 1.4rem 2.8rem;
}

.qtv-home__searchbox {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: 30rem;
  padding: 0.85rem 0.9rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
}

.qtv-home__search-ph {
  color: #838e86;
  font-size: 0.9rem;
}

.qtv-home__search-hint {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed #e3e8e4;
  color: var(--muted);
  font-size: 0.72rem;
}

.qtv-home__tray {
  padding: 1.1rem 1.4rem 1.4rem;
  border-top: 1px solid var(--line);
  background: #eff2ee;
}

.qtv-home__tray-label {
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qtv-home__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}

.qt-tile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(28, 39, 33, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

a.qt-tile:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(28, 39, 33, 0.08);
}

.qt-tile__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  border: 1px solid #dbe4de;
  border-radius: 6px;
  background: #f2f6f3;
  color: var(--brand);
}

.qt-tile__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.qt-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.qt-tile__title {
  font-size: 0.88rem;
  font-weight: 700;
}

.qt-tile__sub {
  color: var(--muted);
  font-size: 0.72rem;
}

.qt-tile__key {
  margin-left: auto;
}

.qt-tile--ghost {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 4.6rem;
  border-style: dashed;
  background: transparent;
  color: #93a099;
  box-shadow: none;
  text-align: center;
}

.qt-tile--ghost .qt-tile__title {
  font-size: 0.8rem;
  font-weight: 650;
}

.qt-tile--ghost .qt-tile__sub {
  font-size: 0.7rem;
}

/* ---------- Shared widget bits ---------- */
.qt-card {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 3px 0 rgba(28, 39, 33, 0.05);
}

.qt-widget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.qt-widget__title {
  font-size: 0.98rem;
  font-weight: 750;
}

.qt-widget__status {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.qt-patient {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}

.qt-patient__label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.qt-patient__input {
  width: 9rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.85rem;
  color: inherit;
}

/* Free-text fields inside a question: a question-level field (e.g. a day
   count feeding "X days of …") above the chip row, and a type-in field that
   accompanies an option ("Other") and only exists while it is picked. */
.qt-q__text {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem;
  cursor: text;
}

.qt-q__text-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.qt-q__text-input,
.qt-opt__text {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #ffffff;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.1s ease;
}

.qt-q__text-input {
  width: 6.5rem;
  font-size: 0.85rem;
}

.qt-opt__text {
  width: 10rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.qt-q__text-input:hover,
.qt-opt__text:hover,
.qt-opt.is-selected + .qt-opt__text {
  border-color: var(--brand);
}

.qt-q__text-input:focus-visible,
.qt-opt__text:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.qt-sec {
  margin-bottom: 1.25rem;
}

.qt-sec:last-of-type {
  margin-bottom: 0.25rem;
}

.qt-sec__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dashed #e3e8e4;
}

.qt-sec__key {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qt-sec__name {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.qt-q {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.qt-q.is-current {
  border-left-color: var(--brand);
  background: rgba(63, 107, 82, 0.07);
}

.qt-q__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  padding: 0;
}

.qt-q__num {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.qt-q.is-answered .qt-q__num {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.qt-q__prompt {
  font-size: 0.85rem;
  font-weight: 650;
}

.qt-q__multi {
  padding: 0.06rem 0.38rem;
  border: 1px solid #d9e2dc;
  border-radius: 999px;
  background: #eef3ef;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.qt-q__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.qt-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.qt-opt:hover {
  border-color: var(--brand);
}

/* Space-bar affordance, revealed on hover/keyboard focus */
.qt-opt::after {
  content: "space";
  padding: 0.05rem 0.32rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.qt-opt:hover::after,
.qt-opt:focus-visible::after {
  opacity: 0.5;
}

.qt-opt.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.qt-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #e3e8e4;
  color: var(--muted);
  font-size: 0.72rem;
}

.qt-keys__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Keycap icon in the legend */
.qt-keys__kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.06rem 0.32rem;
  border: 1px solid #d5ded8;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff;
  color: #4a554d;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* Controls rail anchored to the gutter left of the form (does not follow
   the cursor): bundled arrow keys for navigation, shift+arrows for question
   jumps, plus the contextual Space verb and note-line / copy shortcuts.
   Light frosted card — quiet, out of the way */
.qt-hud {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  max-width: 17rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(45, 58, 50, 0.1);
  border-radius: 10px;
  background: rgba(250, 252, 251, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(28, 39, 33, 0.1);
  color: #7b877f;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.qt-hud.is-on {
  opacity: 1;
}

.qt-hud__row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Arrow-key cluster laid out like the real thing:
        [↑]
   [←]  [↓]  [→]  */
.qt-hud__cluster {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.1rem;
}

.qt-hud__cluster kbd:nth-child(1) { grid-area: 1 / 2; }
.qt-hud__cluster kbd:nth-child(2) { grid-area: 2 / 1; }
.qt-hud__cluster kbd:nth-child(3) { grid-area: 2 / 2; }
.qt-hud__cluster kbd:nth-child(4) { grid-area: 2 / 3; }

/* Modifier spelled out instead of the ⇧ glyph (reads as an up arrow) */
.qt-hud__mod {
  padding: 0.04rem 0.4rem;
}

/* No gutter beside the form (small screens): dock to the viewport bottom
   as a horizontal, wrapping bar */
.qt-hud.is-docked {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0.55rem;
  max-width: calc(100vw - 1.25rem);
  line-height: 1.9;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.qt-hud kbd {
  padding: 0.04rem 0.32rem;
  border: 1px solid #dde4df;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: #5b675f;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.4;
}

.qtD .qt-hud {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: #a9bab0;
}

.qtD .qt-hud kbd {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0d5;
}

/* ---------- Note preview ---------- */
.qt-notebox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qt-notebox__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.qt-notebox__label {
  color: #4a5850;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.qt-notebox__hint {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: italic;
}

.qt-note {
  min-height: 6rem;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid #dbe4de;
  border-radius: 6px;
  background: #f7faf8;
  color: #22302a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.qt-note.is-empty::before {
  content: "— answer the template to build the note —";
  color: #93a099;
}

/* Note preview section lines: clickable (jumps to the section); the faint
   gutter number is the 1–9 hotkey */
.qt-note__line {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: pre-wrap;
  border-radius: 3px;
  cursor: pointer;
}

.qt-note__line::before {
  content: attr(data-line);
  display: inline-block;
  min-width: 0.85rem;
  margin-right: 0.5rem;
  color: #b3beb7;
  font-size: 0.6rem;
  text-align: right;
}

.qt-note__line:hover {
  background: rgba(45, 58, 50, 0.07);
  color: #101814;
}

.qtD .qt-note__line::before {
  color: #55655c;
}

.qtD .qt-note__line:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.qt-notebox__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qt-copy {
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 4px;
  background: #2d3a32;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}

.qt-copy:hover {
  background: #1a241e;
}

.qt-copy.is-done {
  background: var(--brand);
}

.qt-notebox__status {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 650;
}

/* Static shortcut hint beside the Copy button (filled in by the controller,
   platform-aware) */
.qt-notebox__keys {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.qtD .qt-notebox__keys {
  color: #8fa198;
}

.qtD .qt-notebox__keys .qt-keys__kbd {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0d5;
}

/* ---------- Variant A · clinic ledger ---------- */
.qtA {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}

.qtA__side {
  position: sticky;
  top: 1rem;
}

/* ---------- Variant B · guided stepper ---------- */
.qtB {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 34rem;
  margin: 0 auto;
}

.qt-card--center {
  width: 100%;
}

.qtB__track {
  height: 4px;
  margin: -0.35rem 0 0.9rem;
  border-radius: 999px;
  background: #e3e8e4;
  overflow: hidden;
}

.qtB__fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.25s ease;
}

.qtB__body {
  min-height: 15rem;
}

.qtB .qt-q.is-current {
  padding: 0.65rem 0.8rem;
}

.qtB .qt-q__prompt {
  font-size: 1.05rem;
  font-weight: 750;
}

.qtB .qt-q__opts {
  flex-direction: column;
  align-items: stretch;
}

.qtB .qt-opt {
  justify-content: flex-start;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.qtB__note {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.qtB__note[hidden] {
  display: none;
}

.qtB__back {
  align-self: flex-start;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.qtB__back:hover {
  text-decoration: underline;
}

/* ---------- Variant C · two-pane ---------- */
.qtC {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1.25rem;
  align-items: start;
}

.qtC__side {
  position: sticky;
  top: 1rem;
}

.qtC__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

.qtC__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.qtC__tab:hover {
  border-color: var(--brand);
}

.qtC__tab-key {
  color: var(--brand);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qtC__tab-name {
  font-weight: 650;
}

.qtC__tab-n {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: #f4f6f2;
  font-size: 0.64rem;
}

.qtC__tab.is-active {
  border-color: #2d3a32;
  background: #2d3a32;
  color: #eef5f0;
}

.qtC__tab.is-active .qtC__tab-key {
  color: #a8c9b4;
}

.qtC__tab.is-active .qtC__tab-n {
  background: rgba(255, 255, 255, 0.15);
  color: #eef5f0;
}

/* ---------- Variant D · command console (dark) ---------- */
.qtD {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid #223129;
  border-radius: 12px;
  background: #17231d;
  color: #e8efe9;
  box-shadow: 0 16px 40px rgba(23, 35, 29, 0.25);
}

.qtD__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.qtD__bar-title {
  color: #8fa198;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.qtD__bar-status {
  color: #6f8076;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  white-space: nowrap;
}

.qtD__patient {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.qtD__patient-label {
  color: #8fa198;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.qtD__patient-input {
  width: 7rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #eef5f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.qtD__patient-input::placeholder {
  color: #6f8076;
}

/* Dark-console variant: the in-question text fields follow the same theme. */
.qtD .qt-q__text-input,
.qtD .qt-opt__text {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #eef5f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.qtD .qt-q__text-input::placeholder,
.qtD .qt-opt__text::placeholder {
  color: #6f8076;
}

.qtD .qt-sec__label {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.qtD .qt-sec__key {
  color: #7fb394;
}

.qtD .qt-sec__name {
  color: #8fa198;
}

.qtD .qt-q.is-current {
  border-left-color: #4e8a68;
  background: rgba(255, 255, 255, 0.05);
}

.qtD .qt-q__num {
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #8fa198;
}

.qtD .qt-q.is-answered .qt-q__num {
  border-color: #4e8a68;
  background: #4e8a68;
  color: #ffffff;
}

.qtD .qt-q__multi {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #8fa198;
}

.qtD .qt-opt {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #dce8df;
}

.qtD .qt-opt:hover {
  border-color: #4e8a68;
}

.qtD .qt-opt.is-selected {
  border-color: #4e8a68;
  background: #4e8a68;
  color: #ffffff;
}

.qtD .qt-keys {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #8fa198;
}

.qtD .qt-keys__kbd {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0d5;
}

.qtD .qt-notebox__label {
  color: #a9bab0;
}

.qtD .qt-notebox__hint {
  color: #6f8076;
}

.qtD .qt-note {
  margin-top: 0.25rem;
  border-color: rgba(255, 255, 255, 0.12);
  background: #101814;
  color: #d9e6dc;
}

.qtD .qt-note.is-empty::before {
  color: #6f8076;
}

.qtD .qt-copy {
  background: #4e8a68;
}

.qtD .qt-copy:hover {
  background: #3f7157;
}

/* ---------- Controls style lab (/templates-preview#qtv-hudlab) ---------- */
.qtv-hudlab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1rem;
}

.qtv-hudlab__v {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.qtv-hudlab__name {
  color: #2d3a32;
  font-size: 0.82rem;
  font-weight: 700;
}

.qtv-hudlab__name em {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}

.qtv-hudlab .qt-hud {
  position: static;
  display: inline-flex;
  opacity: 1;
}

.qtv-hudlab__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
  padding: 0.6rem;
  border: 1px dashed #e3e8e4;
  border-radius: 8px;
  background: #f6f9f7;
}

/* B · light card */
.qtv-hudlab__v--light .qt-hud {
  background: #ffffff;
  border: 1px solid #dbe4de;
  box-shadow: 0 12px 28px rgba(28, 39, 33, 0.1);
  color: #4a5850;
}

.qtv-hudlab__v--light .qt-hud kbd {
  border-color: #d5ded8;
  background: #f4f7f5;
  color: #2d3a32;
}

/* C · ghost */
.qtv-hudlab__v--ghost .qt-hud {
  padding: 0.18rem 0;
  background: transparent;
  color: #4a5850;
  letter-spacing: 0.03em;
}

.qtv-hudlab__v--ghost .qt-hud kbd {
  border-color: var(--brand);
  background: transparent;
  color: var(--brand);
}

/* D · segmented bar */
.qtv-hudlab__v--bar .qt-hud {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0.7rem;
  border: 1px solid #dbe4de;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(28, 39, 33, 0.08);
  color: #3c4a42;
}

.qtv-hudlab__v--bar .qt-hud kbd {
  border-color: #d5ded8;
  background: #f4f7f5;
  color: #2d3a32;
}

/* E · console */
.qtv-hudlab__v--console {
  border-color: #223129;
  background: #17231d;
}

.qtv-hudlab__v--console .qtv-hudlab__name {
  color: #a9bab0;
}

.qtv-hudlab__v--console .qtv-hudlab__name em {
  color: #6f8076;
}

.qtv-hudlab__v--console .qtv-hudlab__stage {
  border-color: rgba(255, 255, 255, 0.12);
  background: #101814;
}

.qtv-hudlab__v--console .qt-hud {
  background: rgba(255, 255, 255, 0.06);
  color: #a8c9b4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.qtv-hudlab__v--console .qt-hud kbd {
  border-color: rgba(127, 179, 148, 0.5);
  background: transparent;
  border-radius: 2px;
  color: #7fb394;
}

.qtv-hudlab__v--console .qt-keys {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #8fa198;
}

.qtv-hudlab__v--console .qt-keys__kbd {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0d5;
}

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .qtA,
  .qtC {
    grid-template-columns: 1fr;
  }

  .qtA__side,
  .qtC__side {
    position: static;
  }
}

@media (max-width: 34rem) {
  .qt-patient__input {
    flex: 1;
    width: auto;
  }

  .qt-widget__head {
    flex-direction: column;
    gap: 0.2rem;
  }
}


/* Progressive answer streaming: the live answer renders into the same card
   the final turn uses, with a blinking caret while sections arrive. Streamed
   sections arrive without their .ai-answer wrapper, so the card carries the
   padding itself — kept identical to .chat__turn .ai-answer below so there
   is no layout jump when the canonical markup replaces it. */
.chat__turn--streaming {
  min-height: 3.25rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-style: dashed;
}

.chat__turn--streaming > :first-child {
  margin-top: 0;
}

.chat__turn--streaming::after {
  content: "▍";
  display: inline-block;
  margin: 0.35rem 0 0.25rem;
  color: var(--ai, #5b5bd6);
  animation: ai-caret 900ms steps(1) infinite;
}

.chat__turn .ai-answer {
  padding: clamp(1rem, 3vw, 1.75rem);
}

@keyframes ai-caret {
  50% { opacity: 0; }
}

/* Follow-up replies stream as HTML paragraphs rendered live by
   chat_controller.js, mirroring the canonical simple_format markup. */
.chat-message__bubble--streaming {
  min-height: 1.5rem;
}
.ai-answer__details {
  margin-block: 1rem;
}
.ai-answer__details > summary {
  cursor: pointer;
  font-weight: 600;
}
.ai-answer__details > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.chat-model-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .75rem clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--border, #dededb);
  font-size: .85rem;
}
.chat-model-picker select {
  max-width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--border, #dededb);
  border-radius: .5rem;
  background: var(--surface, #fff);
  color: inherit;
}
.chat-model-picker [id="chat-model-description"],
.chat-model-picker__note {
  flex-basis: 100%;
  color: var(--muted, #646761);
}
.chat-model-picker__note { font-size: .75rem; }
.chat-model-label {
  margin: .5rem 1rem;
  font-size: .75rem;
  color: var(--muted, #646761);
}