/*
 * Palette-led composition experiment
 *
 * The approved colours are treated as a shared set of ingredients instead of
 * assigning one immutable swatch to every semantic role. Component context,
 * contrast, hierarchy, and state meaning decide which colour is used.
 */

:root {
  --palette-ink:#17252c;
  --palette-navy:#243b53;
  --palette-steel:#486581;
  --palette-slate:#6f869c;
  --palette-mist:#96a7b7;
  --palette-cloud:#bdc8d2;
  --palette-canvas:#e4e8ec;
  --palette-white:#ffffff;
  --palette-positive:#60835d;
  --palette-brick:#a6412a;

  /* Contextual aliases keep existing components accessible while allowing the
   * same swatch to play different visual roles in different compositions. */
  --canvas:color-mix(in srgb,var(--palette-canvas) 76%,var(--palette-white));
  --panel:color-mix(in srgb,var(--palette-cloud) 48%,var(--palette-canvas));
  --surface:var(--palette-white);
  --ink:var(--palette-ink);
  --ink-2:var(--palette-navy);
  --muted:var(--palette-steel);
  --faint:var(--palette-slate);
  --slate:var(--palette-slate);
  --line:color-mix(in srgb,var(--palette-slate) 46%,var(--palette-white));
  --line-soft:color-mix(in srgb,var(--palette-cloud) 62%,var(--palette-white));
  --border-interactive:var(--palette-slate);
  --brand:var(--palette-navy);
  --brand-strong:var(--palette-ink);
  --brand-soft:color-mix(in srgb,var(--palette-cloud) 70%,var(--palette-white));
  --accent:var(--palette-brick);
  --accent-soft:color-mix(in srgb,var(--palette-brick) 10%,var(--palette-white));
  --action:var(--palette-steel);
  --action-strong:var(--palette-navy);
  --action-soft:color-mix(in srgb,var(--palette-cloud) 66%,var(--palette-white));
  --positive:var(--palette-positive);
  --positive-strong:color-mix(in srgb,var(--palette-positive) 68%,var(--palette-ink));
  --positive-soft:color-mix(in srgb,var(--palette-positive) 12%,var(--palette-white));
  --caution:var(--palette-brick);
  --caution-strong:color-mix(in srgb,var(--palette-brick) 88%,var(--palette-ink));
  --caution-soft:color-mix(in srgb,var(--palette-brick) 11%,var(--palette-white));
  --critical:var(--palette-brick);
  --critical-strong:color-mix(in srgb,var(--palette-brick) 88%,var(--palette-ink));
  --critical-soft:color-mix(in srgb,var(--palette-brick) 14%,var(--palette-white));
  --information:var(--palette-steel);
  --information-soft:color-mix(in srgb,var(--palette-mist) 36%,var(--palette-white));
  --rating:var(--palette-brick);
  --surface-grouped:color-mix(in srgb,var(--palette-cloud) 44%,var(--palette-canvas));
  --surface-raised:var(--palette-white);
  --surface-section-head:color-mix(in srgb,var(--palette-cloud) 46%,var(--palette-white));
  --interaction-hover:color-mix(in srgb,var(--palette-cloud) 22%,var(--palette-white));
  --interaction-selected:color-mix(in srgb,var(--palette-cloud) 48%,var(--palette-white));
  --on-brand:var(--palette-white);
  --on-action:var(--palette-white);
  --on-positive:var(--palette-white);
  --on-caution:var(--palette-white);
  --on-critical:var(--palette-white);
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --shadow-1:0 1px 2px rgb(23 37 44 / 7%),0 12px 30px rgb(36 59 83 / 8%);
  --shadow-2:0 4px 16px rgb(23 37 44 / 13%);
  --unified-bar-shadow:0 12px 34px rgb(36 59 83 / 13%);
  --control-shadow:0 5px 16px rgb(36 59 83 / 8%);
  --control-shadow-hover:0 9px 22px rgb(36 59 83 / 13%);
}

:root:is([data-theme="dark"],.theme-dark) {
  /* Four stepped surfaces preserve the palette's blue character while making
   * page, grouped region, card, and section-band depth readable at a glance. */
  --canvas:#101a24;
  --panel:#182837;
  --surface:#203344;
  --ink:#f5f7f9;
  --ink-2:var(--palette-canvas);
  --muted:var(--palette-cloud);
  --faint:var(--palette-mist);
  --slate:var(--palette-mist);
  --line:var(--palette-steel);
  --line-soft:#2d455a;
  --border-interactive:var(--palette-mist);
  --brand:var(--palette-cloud);
  --brand-strong:var(--palette-white);
  --brand-soft:var(--palette-navy);
  --accent:color-mix(in srgb,var(--palette-brick) 54%,var(--palette-canvas));
  --accent-soft:#432820;
  --action:var(--palette-cloud);
  --action-strong:var(--palette-canvas);
  --action-soft:#2d455a;
  /* Fixed derived values keep computed status colours interoperable with
   * contrast tooling that does not yet parse CSS Color 4 output. */
  --positive:#9dbb99;
  --positive-strong:#c1d2be;
  --positive-soft:#23392f;
  --caution:color-mix(in srgb,var(--palette-brick) 50%,var(--palette-white));
  --caution-strong:color-mix(in srgb,var(--palette-brick) 34%,var(--palette-white));
  --caution-soft:#432820;
  --critical:color-mix(in srgb,var(--palette-brick) 50%,var(--palette-white));
  --critical-strong:color-mix(in srgb,var(--palette-brick) 34%,var(--palette-white));
  --critical-soft:#432820;
  --information:var(--palette-cloud);
  --information-soft:#2d455a;
  --rating:color-mix(in srgb,var(--palette-brick) 48%,var(--palette-white));
  --surface-grouped:#182837;
  --surface-raised:#203344;
  --surface-section-head:#2d455a;
  --interaction-hover:#263b4e;
  --interaction-selected:#314b61;
  --on-brand:var(--palette-ink);
  --on-action:var(--palette-ink);
  --on-positive:var(--palette-ink);
  --on-caution:var(--palette-ink);
  --on-critical:var(--palette-ink);
  --shadow-1:0 1px 2px rgb(0 0 0 / 24%),0 14px 34px rgb(0 0 0 / 22%);
  --shadow-2:0 5px 18px rgb(0 0 0 / 34%);
  --unified-bar-shadow:0 14px 36px rgb(0 0 0 / 30%);
  --control-shadow:0 5px 16px rgb(0 0 0 / 18%);
  --control-shadow-hover:0 9px 24px rgb(0 0 0 / 30%);
}

html,
body {
  background-color:var(--canvas);
}

/* Initials are small, meaningful identity cues; use the stronger action text
 * role so they remain legible against the grouped avatar surface. */
html[data-layout-mode] body[data-view="explore"] .result-avatar {
  color:var(--action-strong);
}

html[data-layout-mode] body[data-view="explore"][data-explore-stage="profile"]
  :is(.loc-type-chip,.loc-practice-contact-label,.loc-meta) {
  color:var(--ink-2);
}

body {
  background-image:
    radial-gradient(circle at 9% 6%,color-mix(in srgb,var(--palette-mist) 10%,transparent) 0,transparent 28rem),
    radial-gradient(circle at 92% 95%,color-mix(in srgb,var(--palette-steel) 6%,transparent) 0,transparent 34rem);
  background-attachment:fixed;
}

:root:is([data-theme="dark"],.theme-dark) body {
  background-image:
    radial-gradient(circle at 10% 3%,color-mix(in srgb,var(--palette-steel) 28%,transparent) 0,transparent 32rem),
    radial-gradient(circle at 90% 96%,color-mix(in srgb,var(--palette-brick) 10%,transparent) 0,transparent 36rem);
}

/* The top-level navigation and the unified search now read as members of the
 * same outlined family while keeping selected-state motion intact. */
html[data-layout-mode] body :is(.primary-nav,.admin-section-nav,.contribution-section-nav,.about-section-nav) {
  border-color:color-mix(in srgb,var(--palette-steel) 68%,var(--palette-cloud)) !important;
  background:color-mix(in srgb,var(--surface) 93%,var(--palette-cloud));
  box-shadow:var(--unified-bar-shadow) !important;
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar {
  border-color:color-mix(in srgb,var(--palette-steel) 68%,var(--palette-cloud));
  background:color-mix(in srgb,var(--surface) 93%,var(--palette-cloud));
  box-shadow:var(--unified-bar-shadow) !important;
}

html[data-layout-mode] :is(.primary-nav-indicator,.admin-section-nav-indicator,.contribution-section-nav-indicator,.about-section-tab-indicator) {
  border-color:color-mix(in srgb,var(--palette-steel) 52%,var(--palette-cloud));
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--palette-cloud) 80%,var(--palette-white)),
    color-mix(in srgb,var(--palette-mist) 34%,var(--palette-white)));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 58%);
}

:root:is([data-theme="dark"],.theme-dark) html[data-layout-mode],
:root:is([data-theme="dark"],.theme-dark) {
  --control-pill-selected-start:color-mix(in srgb,var(--palette-mist) 72%,var(--palette-cloud));
  --control-pill-selected-end:color-mix(in srgb,var(--palette-cloud) 72%,var(--palette-mist));
}

:root:is([data-theme="dark"],.theme-dark) :is(.primary-nav-indicator,.admin-section-nav-indicator,.contribution-section-nav-indicator,.about-section-tab-indicator) {
  border-color:var(--palette-mist);
  background:var(--palette-steel);
  box-shadow:none;
}

:is(html[data-theme="dark"],html.theme-dark)[data-layout-mode]
  :is(.primary-nav,.admin-section-nav,.contribution-section-nav) a[aria-current="page"],
:is(html[data-theme="dark"],html.theme-dark)[data-layout-mode]
  .about-section-nav [role="tab"][aria-selected="true"] {
  color:var(--palette-white);
}

/* Search is the principal task surface: white input, softly coloured controls,
 * and a dark structural outline instead of an all-over accent wash. */
html[data-layout-mode] body[data-view="explore"] .unified-search-bar .filter-primary {
  background:var(--surface);
}

html[data-layout-mode] body[data-view="explore"] .unified-search-bar .refine-entry-row,
html[data-layout-mode] body[data-view="explore"] .advanced-filters-inner {
  background:color-mix(in srgb,var(--palette-cloud) 46%,var(--surface)) !important;
}

html:is([data-theme="dark"],.theme-dark)[data-layout-mode] body[data-view="explore"]
  .unified-search-bar .refine-entry-row,
html:is([data-theme="dark"],.theme-dark)[data-layout-mode] body[data-view="explore"]
  .advanced-filters-inner {
  background:var(--surface-section-head) !important;
}

html[data-layout-mode] body[data-view="explore"]
  .advanced-filters[aria-hidden="true"] > .advanced-filters-inner {
  background:transparent !important;
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded
  .unified-search-bar .refine-entry-row,
html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded
  .advanced-filters[aria-hidden="false"] .advanced-filters-inner {
  background:var(--unified-refinement-surface) !important;
  background-color:var(--unified-refinement-surface) !important;
}

html[data-layout-mode] body[data-view="explore"] .filter-bar.refine-is-expanded
  .unified-search-bar .refine-entry-row {
  transition:none;
}

/* Invitation column labels sit on the grouped panel tone, so they need the
 * primary reading foreground rather than the lower-contrast metadata role. */
.invitations-table thead th {
  color:var(--ink);
}

/* Layered directory: a quiet tinted rail, crisp cards, and a selected card
 * that uses both a steel wash and brick edge so selection is unmistakable. */
body[data-view="explore"] .results-panel {
  background:var(--surface-grouped);
}

body[data-view="explore"] .result-card {
  border-color:color-mix(in srgb,var(--palette-slate) 48%,var(--palette-white));
  background:color-mix(in srgb,var(--surface) 97%,var(--palette-canvas));
  box-shadow:0 4px 14px rgb(36 59 83 / 5%);
}

body[data-view="explore"] .result-card:is(:hover,:focus-visible) {
  border-color:var(--palette-steel);
  background:var(--interaction-hover);
  box-shadow:0 8px 22px rgb(36 59 83 / 10%);
}

body[data-view="explore"] .result-card:is(.selected,[aria-current="true"]) {
  border-color:var(--palette-steel);
  background:var(--interaction-selected);
}

body[data-view="explore"] .result-card:is(.selected,[aria-current="true"])::before {
  background:var(--palette-brick);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"] .results-panel {
  background:var(--surface-grouped);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"] .result-card {
  border-color:var(--line);
  background:var(--surface-raised);
  box-shadow:0 5px 16px rgb(0 0 0 / 16%);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"] .result-card:is(.selected,[aria-current="true"]) {
  border-color:var(--palette-mist);
  background:var(--interaction-selected);
}

/* Profile information is grouped as an editorial dossier: a subtly tinted
 * identity cover followed by light, legible evidence sections. */
body[data-view="explore"] .profile-panel {
  background:color-mix(in srgb,var(--palette-canvas) 42%,var(--palette-white));
}

body[data-view="explore"] .profile-header {
  border-color:color-mix(in srgb,var(--palette-slate) 42%,var(--palette-white));
  background:var(--surface-raised);
}

body[data-view="explore"] :is(.profile-section,.profile-section-sticky-frame,.activity-card) {
  border-color:color-mix(in srgb,var(--palette-slate) 42%,var(--palette-white));
  box-shadow:0 5px 18px rgb(36 59 83 / 6%);
}

body[data-view="explore"] :is(.profile-section-head,.activity-card-heading) {
  background:var(--surface-section-head);
}

body[data-view="explore"] :is(.profile-section-head,.activity-card-heading) > :is(.icon,svg) {
  color:var(--palette-brick);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"] .profile-panel {
  background:var(--canvas);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"] .profile-header {
  border-color:var(--palette-steel);
  background:var(--canvas);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"]
  :is(.profile-section,.activity-card) {
  border-color:var(--line);
  background:var(--surface-raised);
  box-shadow:0 5px 18px rgb(0 0 0 / 20%);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"]
  :is(.profile-section-head,.activity-card-heading) {
  background:var(--surface-section-head);
}

:root:is([data-theme="dark"],.theme-dark) body[data-view="explore"]
  :is(.profile-section-head,.activity-card-heading) > :is(.icon,svg) {
  color:var(--ink);
}

/* Split-profile rules carry additional layout specificity, so the semantic
 * dark layers are repeated at that seam to keep the panel and cards distinct. */
html:is([data-theme="dark"],.theme-dark)[data-layout-mode="wide"][data-profile-layout="split"]
  body[data-view="explore"][data-explore-stage="profile"] :is(.profile-panel,.profile-header) {
  background:var(--surface-grouped);
}

html:is([data-theme="dark"],.theme-dark)[data-layout-mode]
  body[data-view="explore"][data-explore-stage="profile"]
  :is(.profile-section,.activity-card) {
  background:var(--surface-raised);
}

html:is([data-theme="dark"],.theme-dark)[data-layout-mode]
  body[data-view="explore"][data-explore-stage="profile"]
  :is(.profile-section-head,.activity-card-heading) {
  background:var(--surface-section-head);
}

/* Interactive fills move by one restrained elevation step. Focus keeps the
 * same calm fill and relies on the existing high-contrast focus outline. */
html[data-layout-mode] body[data-view="explore"][data-explore-stage="profile"]
  .loc-mobile-toggle:is(:hover,:focus-visible),
:is(.filter-reset,.loc-clear,.dialog-close,.dialog-icon-close,.activity-disclosure,
  .snapshot-location-option,.multi-option):is(:hover,:focus-visible),
.multi-option:has(input:focus-visible),
.account-menu-section :is(button,a):hover {
  background:var(--interaction-hover);
}

/* Warm emphasis is rare and deliberate: ratings, attention states, and the
 * physician's own contribution area. Confirmed availability stays green. */
:is(.star-display .star-fg,.rating-star,.rating-icon,.result-rating-star) {
  color:var(--rating);
}

:is(.save,.btn-primary,.primary-action) {
  border-color:var(--palette-navy);
  background:var(--palette-navy);
  color:var(--palette-white);
}

:is(.save,.btn-primary,.primary-action):hover:not(:disabled) {
  border-color:var(--palette-ink);
  background:var(--palette-ink);
  color:var(--palette-white);
}

:root:is([data-theme="dark"],.theme-dark) :is(.save,.btn-primary,.primary-action) {
  border-color:var(--palette-mist);
  background:var(--palette-mist);
  color:var(--palette-ink);
}

:root:is([data-theme="dark"],.theme-dark) :is(.save,.btn-primary,.primary-action):hover:not(:disabled) {
  border-color:var(--palette-cloud);
  background:var(--palette-cloud);
  color:var(--palette-ink);
}

.profile-snapshot-action,
#snapshot-toggle {
  border-color:var(--palette-navy);
  background:var(--palette-navy);
  color:var(--palette-white);
}

/* The disclosure's nested copy and glyphs have component-level colour rules;
 * keep them on the same high-contrast foreground as the brand band. */
#snapshot-toggle :is(.snapshot-toggle-copy strong,.snapshot-toggle-copy small,.snapshot-toggle-icon,.refinement-chevron) {
  color:var(--palette-white);
}

.profile-snapshot-action:hover:not(:disabled),
#snapshot-toggle:hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--palette-navy) 88%,var(--palette-ink));
  background:color-mix(in srgb,var(--palette-navy) 88%,var(--palette-ink));
  color:var(--palette-white);
}

#snapshot-toggle:hover:not(:disabled) :is(.snapshot-toggle-copy strong,.snapshot-toggle-copy small,.snapshot-toggle-icon,.refinement-chevron) {
  color:var(--palette-white);
}

.profile-snapshot-action:focus-visible {
  outline-color:var(--palette-navy);
}

/* Wait estimates are evidence, not status. Only the dedicated referral-status
 * item retains semantic availability colour. */
.at-glance-item:not(.referral-status-summary)
  :is(.summary-item-label,.summary-item-icon,.summary-item-value,.summary-item-detail) {
  color:var(--ink);
}

.referral-status-summary .summary-referral-status {
  font-size:1.25rem;
  font-weight:600;
  line-height:1.15;
}

.referral-status-summary .summary-item-label .summary-item-icon {
  color:var(--ink);
}

.referral-status-summary .summary-referral-status .referral-status-label {
  font:inherit;
}

.referral-status-summary .summary-referral-status .referral-status-label-full {
  display:none;
}

.referral-status-summary .summary-referral-status .referral-status-label-compact {
  display:inline;
}

/* About uses the same palette language but is allowed more expressive blocks
 * because it explains the product rather than supporting a clinical decision. */
#about-view .about-hero {
  background:linear-gradient(110deg,
    color-mix(in srgb,var(--palette-cloud) 58%,var(--palette-white)),
    color-mix(in srgb,var(--palette-canvas) 70%,var(--palette-white)));
}

#about-view .about-intro,
#about-view .about-offering-grid,
#about-view .about-boundary {
  border-color:color-mix(in srgb,var(--palette-slate) 44%,var(--palette-white));
  box-shadow:var(--shadow-1);
}

#about-view .about-mission {
  background:linear-gradient(125deg,var(--palette-navy),var(--palette-steel));
  color:var(--palette-white);
}

#about-view .about-mission :is(h3,p,.eyebrow) {
  color:inherit;
}

/* Supporting copy on tinted About surfaces still carries meaning; keep it at
 * the readable secondary-text role instead of the quieter muted role. */
#about-view :is(.about-access-note,.about-boundaries) p {
  color:var(--ink-2);
}

@media (max-width:767px) {
  body {
    background-image:linear-gradient(180deg,
      color-mix(in srgb,var(--palette-cloud) 20%,transparent),
      transparent 28rem);
  }

  body[data-view="explore"] .profile-header {
    background:var(--surface);
  }
}

@media (prefers-reduced-transparency:reduce) {
  body { background-image:none; }
}