/* Shared patient components. The palette lives in quindlee-tokens.css. */

body {
  background: var(--color-surface-warm);
  color: var(--color-ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, .hero-greet, .hero-ask, .section-title, .modal-title {
  display: block;
  font-family: var(--font-display) !important;
}

h1 {
  font-size: var(--site-h1) !important;
  font-weight: 600 !important;
  letter-spacing: var(--site-title-tracking) !important;
  line-height: 1.15 !important;
}

h2 {
  font-size: var(--site-h2) !important;
  font-weight: 600 !important;
  letter-spacing: var(--site-section-tracking) !important;
  line-height: 1.2 !important;
}

h3 { font-size: var(--site-h3); }

.q-dot {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 0;
  background: transparent;
  color: var(--color-orange);
  line-height: inherit;
  vertical-align: baseline;
}

.q-title-end { white-space: nowrap; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-ink) !important;
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}

input,
select,
textarea,
.field-input,
.field-select,
.field-textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

input::placeholder,
textarea::placeholder { color: var(--input-placeholder); }

/* Existing primary actions adopt the V2 orange construction. */
.nav-btn-primary,
.nav-cta-new,
.btn-primary,
.hero-start-cta,
.hero-go,
.sticky-go,
.mdhook-btn,
.mvp-care-btn,
.submit-btn,
.intake-start-btn,
.disp-btn-primary,
.confirm-cta button:not(.cta-secondary),
.ab-cta .btn {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.nav-btn-primary:hover,
.nav-cta-new:hover,
.btn-primary:hover,
.hero-start-cta:hover,
.hero-go:hover,
.sticky-go:hover,
.mdhook-btn:hover,
.mvp-care-btn:hover,
.submit-btn:hover:not(:disabled),
.intake-start-btn:hover:not(:disabled),
.disp-btn-primary:hover,
.confirm-cta button:not(.cta-secondary):hover,
.ab-cta .btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
}

.nav-btn-primary:focus-visible,
.nav-cta-new:focus-visible,
.btn-primary:focus-visible,
.hero-start-cta:focus-visible,
.hero-go:focus-visible,
.sticky-go:focus-visible,
.mdhook-btn:focus-visible,
.mvp-care-btn:focus-visible,
.submit-btn:focus-visible,
.intake-start-btn:focus-visible,
.disp-btn-primary:focus-visible,
.confirm-cta button:not(.cta-secondary):focus-visible,
.ab-cta .btn:focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  transform: var(--focus-lift);
  outline: none !important;
}

.nav-btn-primary:active,
.nav-cta-new:active,
.btn-primary:active,
.hero-start-cta:active,
.hero-go:active,
.sticky-go:active,
.mdhook-btn:active,
.mvp-care-btn:active,
.submit-btn:active,
.intake-start-btn:active,
.disp-btn-primary:active,
.confirm-cta button:not(.cta-secondary):active,
.ab-cta .btn:active {
  background: var(--btn-primary-bg-active) !important;
  transform: none;
}

.nav-btn-primary:disabled,
.nav-cta-new:disabled,
.btn-primary:disabled,
.hero-start-cta:disabled,
.hero-go:disabled,
.sticky-go:disabled,
.mvp-care-btn:disabled,
.submit-btn:disabled,
.intake-start-btn:disabled,
.disp-btn-primary:disabled,
.confirm-cta button:not(.cta-secondary):disabled {
  background: var(--color-surface-warm) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
  color: var(--color-text-disabled) !important;
  cursor: not-allowed;
}

.hero-start-cta svg,
.hero-go svg,
.sticky-go svg,
.mdhook-btn svg,
.mvp-care-btn svg {
  stroke: var(--color-ink) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action) {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):active {
  background: var(--btn-primary-bg-active) !important;
  transform: none;
}

/* Secondary actions use the complete V2 mint construction. */
.btn-secondary,
.confirm-cta .cta-secondary,
.disp-btn-secondary,
.resume-card .btn-secondary {
  background: var(--btn-secondary-bg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  border-radius: var(--site-radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.btn-secondary:hover,
.confirm-cta .cta-secondary:hover,
.disp-btn-secondary:hover,
.resume-card .btn-secondary:hover {
  background: var(--btn-secondary-bg-hover) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text-hover) !important;
}

.btn-secondary:focus-visible,
.confirm-cta .cta-secondary:focus-visible,
.disp-btn-secondary:focus-visible,
.resume-card .btn-secondary:focus-visible {
  background: var(--btn-secondary-bg-focus) !important;
  border-color: var(--btn-secondary-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  color: var(--btn-secondary-text-hover) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

.btn-secondary:active,
.confirm-cta .cta-secondary:active,
.disp-btn-secondary:active,
.resume-card .btn-secondary:active {
  background: var(--color-mint-tint) !important;
  transform: none;
}

/* White/orange tertiary actions replace the legacy colourless ghost style. */
.btn-ghost {
  background: var(--btn-tertiary-bg) !important;
  border: 1.5px solid var(--btn-tertiary-border) !important;
  color: var(--btn-tertiary-text) !important;
}

.btn-ghost:hover { background: var(--btn-tertiary-bg-hover) !important; }
.btn-ghost:focus-visible {
  background: var(--btn-tertiary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

/* Clinical escalation actions must never be recoloured as ordinary orange CTAs. */
.disp-emergency .disp-btn-primary,
a.btn-primary[href^='tel:111'] {
  background: var(--color-error) !important;
  border-color: var(--color-error-glyph) !important;
  color: var(--color-white) !important;
}

.disp-inperson .disp-btn-primary {
  background: var(--color-warning) !important;
  border-color: var(--color-warning-text) !important;
  color: var(--color-ink) !important;
}

/* Shared patient shell */
.topnav { height: 64px; border-color: var(--color-border); padding-inline: clamp(16px, 3vw, 30px); }
.nav-logo { min-width: 133px; height: 44px; gap: 0; }
.nav-logo .logo-mark { width: 133px; height: 34px; background: url('quindlee-logo.svg') left center / contain no-repeat; flex: none; }
.nav-logo .logo-mark > *, .nav-logo .logo-text, .nav-logo .logo-stack { display: none !important; }
.nav-drawer-logo { display: block; width: 126px; height: 34px; background: url('quindlee-logo.svg') left center / contain no-repeat; font-size: 0 !important; }
.nav-drawer-logo > * { display: none !important; }
.nav-btn { min-height: 44px; border-radius: var(--site-radius-sm); font-family: var(--font-body); font-weight: 600; }
.nav-hamburger { width: 44px; height: 44px; border-radius: var(--site-radius-card); border-color: var(--color-border); }
.nav-drawer-close, .modal-x { width: 44px; height: 44px; background: var(--color-surface-warm); color: var(--color-text-secondary); }
.ebar { background: var(--color-ink); font-family: var(--font-body); }
.modal { border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.field-input, .field-select, .field-textarea, input, textarea, select { font-family: var(--font-body); }
.wc-cara{background:transparent!important;color:var(--color-orange)!important;box-shadow:none!important}
.hero-badge { background: var(--color-mint-tint) !important; border-color: #C9EBDC !important; color: var(--color-mint-text) !important; }
.hero-dot { background: var(--color-mint-text) !important; }
.trust { background: var(--color-mint-tint) !important; }
.trust-num { color: var(--color-mint-text) !important; font-family: var(--font-display) !important; }
.foot-brand .f-logo, .f-logo { font-family: var(--font-display) !important; font-weight: 600; }
.foot-brand .f-logo span, .f-logo span { color: var(--color-mint-text) !important; }

/* The existing care catalogue keeps its structure and receives V2 roles. */
.mvp-care-hero { background: var(--site-hero-ground) !important; }
.mvp-care-tab[aria-selected='true'] { color: var(--color-ink) !important; }
.mvp-care-tab[aria-selected='true']::after { background: var(--tab-underline) !important; }
.mvp-care-search input { background: var(--search-bg) !important; border-radius: var(--site-radius-md) !important; box-shadow: var(--search-shadow) !important; }
.mvp-care-search svg { stroke: var(--search-glyph) !important; }
.mvp-care-clear { background: var(--search-clear-bg) !important; color: var(--search-clear-glyph) !important; border-radius: var(--site-radius-pill) !important; }
.mvp-care-icon,
.mvp-care-card:nth-child(3n+2) .mvp-care-icon,
.mvp-care-category__icon,
.mvp-care-quick-link__icon,
.mvp-care-area-link__icon,
.mvp-care-group__icon,
.mvp-service-symbol {
  background: var(--chip-bg) !important;
  color: var(--chip-glyph) !important;
  border-radius: var(--site-radius-row) !important;
}

.mvp-care-fit-card--yes { background: var(--fit-online-bg) !important; border-color: var(--color-peach-line) !important; }
.mvp-care-fit-card--yes .mvp-care-pattern-list li::before { color: var(--fit-online-glyph) !important; }
.mvp-care-fit-card--no { background: var(--fit-inperson-bg) !important; border-color: var(--color-border-strong) !important; }
.mvp-care-fit-card--no h3 { color: var(--color-mint-text) !important; }
.mvp-care-fit-card--no .mvp-care-pattern-list li::before { background: var(--color-white) !important; color: var(--fit-inperson-glyph) !important; }

.mvp-care-pattern-list,
.mvp-care-list,
.mvp-service-symptoms ul,
.mvp-service-guidance__list,
.mvp-service-outcomes__list {
  gap: var(--space-2) !important;
  border: 0 !important;
}

.mvp-care-pattern-list li,
.mvp-care-list li,
.mvp-service-symptoms li,
.mvp-service-guidance__list li,
.mvp-service-outcomes__list li {
  background: var(--row-bg) !important;
  border: 0 !important;
  border-radius: var(--site-radius-row) !important;
  color: var(--row-text) !important;
  margin: 0 !important;
  padding-block: var(--space-3) !important;
  padding-right: var(--space-4) !important;
}

.mvp-care-pattern-list li::before,
.mvp-care-list li::before,
.mvp-service-symptoms li::before,
.mvp-service-outcomes__list li::before { color: var(--row-glyph) !important; }
.mvp-service-guidance__list li { padding-left: var(--space-4) !important; }
.mvp-care-faq__item summary::after { background: var(--faq-toggle-bg) !important; color: var(--faq-toggle-glyph) !important; }

/* Conversation colours stay readable and identify the speaker without dark fills. */
.msg.ai .bubble,
.mdq-message.is-quinn .mdq-bubble {
  background: var(--quinn-bubble-bg) !important;
  border-color: var(--color-peach-line) !important;
  color: var(--quinn-bubble-text) !important;
}

.msg.user .bubble,
.mdq-message.is-user .mdq-bubble,
.thread-msg.you {
  background: var(--user-bubble-bg) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--user-bubble-text) !important;
}

.thread-msg.you .thread-msg-body { color: var(--user-bubble-text) !important; }

.hero-visual .cc-cara,
.how .cc-cara { background: var(--quinn-bubble-bg) !important; border-color: var(--color-peach-line) !important; }
.hero-visual .cc-user,
.how .cc-user { background: var(--user-bubble-bg) !important; color: var(--user-bubble-text) !important; }

/* V2: the hero is the only gradient. Every other ground is flat. */
.hero { background: var(--site-hero-ground) !important; }
.hero::before, .hero::after { display: none !important; }
.hero-greet { letter-spacing: var(--site-title-tracking) !important; }
.section-title { font-weight: 600 !important; letter-spacing: var(--site-section-tracking) !important; }

/* V2 keeps the How-it-works panel on a flat mint ground with white cards.
   Step discs follow the ring/glyph rule (white
   disc, orange ring, deep-orange numeral); the approved pill and seal use
   the success family instead of solid dark green. */
.how { background: var(--color-mint-tint) !important; }
.how::before { display: none !important; }
.how .eyebrow { color: var(--color-mint-text) !important; }
.how .sec-title { color: var(--color-ink) !important; }
.how .sec-sub, .how .demo-note { color: var(--color-text-secondary) !important; }
.how .flow { background: var(--color-white) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-card) !important; }
.how .flow-h { color: var(--color-ink) !important; }
.how .flow-n { background: var(--color-white) !important; color: var(--color-orange-deep) !important; box-shadow: 0 0 0 2px var(--color-orange) !important; }
@media (min-width: 861px) { .how .flow-step:not(:last-child)::after { border-top-color: var(--color-border-strong) !important; } }
.how .chatcard, .how .card { box-shadow: var(--shadow-card) !important; }
.how .card-stage::before { display: none !important; }
.how .card-pill.is-approved { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; border-color: var(--color-success) !important; }
.how .card-pill.is-approved svg { stroke: var(--color-success-text) !important; }
.how .card-foot .seal { background: var(--color-white) !important; box-shadow: 0 0 0 2px var(--color-success); }
.how .card-foot .seal svg { stroke: var(--color-success-text) !important; }

/* V2 flat-ground reconciliation for page-local legacy components. */
.ab-intro { background: var(--site-ground-mint) !important; }
.ab-vision { background: var(--site-ground-peach) !important; }
.ab-vision .eyebrow { color: var(--on-peach-label) !important; }
.ab-vision blockquote {
  background: var(--color-white) !important;
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-raised);
  color: var(--color-ink) !important;
  padding: clamp(24px, 4vw, 40px);
}
.home-meddirect,
.mdhook-card { background: var(--color-white) !important; }
.mdhook-card { border-color: var(--color-peach-line) !important; }
.mdhook-card::before { display: none !important; }
.skel-text, .skel-pill, .skel-block {
  animation: none !important;
  background: var(--color-surface-warm) !important;
}

.finalcta { background: var(--closing-ground) !important; }
.finalcta-card { background: var(--closing-card-bg) !important; box-shadow: var(--site-shadow-card); }
.finalcta-card h2, .finalcta-card p { color: var(--color-ink) !important; }
.finalcta-card::before, .finalcta-card::after { display: none !important; }
/* The closing card's action is a primary button — orange fill, ink
   label, deep-orange border — not the old white-on-green pill. */
.finalcta .btn {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  border-radius: var(--site-radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.finalcta .btn:hover { background: var(--btn-primary-bg-hover) !important; }
.finalcta .btn:focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  transform: var(--focus-lift);
}
.finalcta .btn:active { background: var(--btn-primary-bg-active) !important; transform: none; }
.finalcta .btn svg { stroke: var(--color-ink) !important; }

.foot {
  background: var(--footer-ground) !important;
  color: var(--color-text-secondary) !important;
  border-top: 1px solid var(--color-border);
}
.foot-brand .foot-brand-logo { content: url('quindlee-logo.svg'); opacity: 1 !important; }
.foot-brand .lg, .foot-col h4 { color: var(--color-ink) !important; }
.foot-brand p, .foot-bot { color: var(--color-text-secondary) !important; }
.foot-col a { color: var(--color-mint-text) !important; }
.foot-col a:hover { color: var(--color-ink) !important; }
.foot-bot { border-top-color: var(--color-border-strong) !important; }

::selection { background: var(--color-orange-tint); color: var(--color-ink); }

@media (max-width: 760px) {
  h1 { font-size: 30px !important; }
  h2 { font-size: 21px !important; }
}

@media (max-width: 560px) {
  .topnav { height: 60px; }
  .nav-logo { min-width: 116px; }
  .nav-logo .logo-mark { width: 116px; height: 30px; }
}

@media (max-width: 420px) {
  .topnav { gap: 8px; padding-inline: 14px; }
  .topnav [data-nav='account'] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn-primary:focus-visible,
  .nav-cta-new:focus-visible,
  .btn-primary:focus-visible,
  .hero-start-cta:focus-visible,
  .hero-go:focus-visible,
  .sticky-go:focus-visible,
  .mdhook-btn:focus-visible,
  .mvp-care-btn:focus-visible,
  .submit-btn:focus-visible,
  .intake-start-btn:focus-visible,
  .disp-btn-primary:focus-visible,
  .confirm-cta button:not(.cta-secondary):focus-visible,
  .ab-cta .btn:focus-visible { transform: none; }
}

@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}