/* Reversible palette study for the tree design. Classic does not load this file.
   Blue connects the Practice Elf touchpoints; Metolius evergreen anchors growth. */
body.blue-green-theme {
  --cobalt: #315e83;
  --cobalt-dark: #254966;
  --navy: #102d50;
  --evergreen: #286456;
  --mint: #c7e7b8;
  --sky: #b9d9ff;
  --blue-wash: #eef4fc;
  --green-wash: #f0f6ef;
  --pine: #102d50;
  --forest: #235247;
  --green: #286456;
  --ink: #1b3047;
  --muted: #576b7b;
  --line: #d9e3e9;
  --paper: #fff;
  --wash: #f3f7fa;
  --acid: #c7e7b8;
  --accent: #315e83;
  --soft: #eef4fc;
  --signal: #82baff;
  --signal-bg: #102d50;
  --signal-accent: #b9d9ff;
  color: var(--ink);
}

/* A quieter blue connects the PPS wordmark, wayfinding, and primary actions. */
.blue-green-theme .utility { background: var(--blue-wash); color: #4e647c; }
.blue-green-theme .site-header { border-bottom-color: var(--line); }
.blue-green-theme .pps { color: #244f75; }
.blue-green-theme .site-header .pps { line-height: 1; }
.blue-green-theme .site-header .logo { gap: 12px; }
.blue-green-theme .site-header .brand-endorsement {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: #526579;
  border-left-color: #cfdae3;
  padding-left: 12px;
  white-space: nowrap;
}
.blue-green-theme .nav-trigger { color: var(--navy); }
.blue-green-theme .nav-trigger:is(:hover, [aria-expanded=true]) { color: var(--cobalt-dark); background: none; }
.blue-green-theme .mega-panel { background: #fff; border-color: var(--line); }
.blue-green-theme .mega-feature { background: var(--green-wash); }
.blue-green-theme .mega-footer { background: #f4f7fb; border-color: var(--line); }
.blue-green-theme .button { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.blue-green-theme .button:hover { background: var(--cobalt-dark); border-color: var(--cobalt-dark); color: #fff; }
.blue-green-theme .button.lime { background: var(--mint); border-color: var(--mint); color: #163d35; }
.blue-green-theme .button.lime:hover { background: #ddf0d3; border-color: #ddf0d3; color: #163d35; }
.blue-green-theme .text-link { color: var(--cobalt-dark); }
.blue-green-theme :is(button, a, summary):focus-visible { outline-color: #638aa6; }

/* The natural green tree sits where the navy sky meets the evergreen ground. */
.blue-green-theme:not(.roots) .hero {
  background: radial-gradient(ellipse at 88% 78%, #28645655, transparent 52%),
    linear-gradient(115deg, #102b50 0%, #12364a 58%, #143d31 100%);
}
.blue-green-theme .hero h1 em { color: var(--mint); }
.blue-green-theme:not(.roots) .hero .eyebrow { color: var(--sky); }
.blue-green-theme .hero-description { color: #d0dee9; }
.blue-green-theme .hero .ai-hero-note { color: #c5ddfb; }
.blue-green-theme .hero .ai-hero-note a { color: #d4e8ff; }
.blue-green-theme .hero-actions .text-link { color: #e1ecf8; }
.blue-green-theme .hero-bottom { color: #bfcedc; border-color: #98b9ca40; }
.blue-green-theme .hero-bottom > a { color: #d0e0e9; }
.blue-green-theme .hero-avatars img { border-color: #12364a; }
.blue-green-theme .explorer-heading { font-size: 11px; color: #e3edf3; border-color: #9abecd66; }
.blue-green-theme .explorer-heading > span:last-child { font-size: 13px; color: #d7e5ed; }
.blue-green-theme .branch-control {
  min-height: 48px;
  max-width: calc(50% - 5px);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  background: #193d50;
  border-color: #7498ae;
  color: #f0f6fa;
}
.blue-green-theme .branch-control > span:first-of-type { min-width: 0; }
.blue-green-theme .branch-control .branch-plus { flex-shrink: 0; }
.blue-green-theme .branch-control .branch-plus { color: #b9d9ff; }
.blue-green-theme .branch-control:hover { background: #244d64; border-color: #b9d9ff; color: #fff; }
.blue-green-theme .branch-control[aria-pressed=true] { background: var(--sky); border-color: var(--sky); color: #102d50; }
.blue-green-theme .branch-control[aria-pressed=true] :is(i, .branch-plus) { color: #254b70; }
.blue-green-theme .branch-control[aria-pressed=true] i { background: var(--cobalt); }
.blue-green-theme .root-control { min-height: 48px; font-size: 13px; font-weight: 500; background: #24483f; border-color: #73988a; color: #edf5eb; }
.blue-green-theme .root-control:hover { background: #315f48; border-color: #c7e7b8; }
.blue-green-theme .root-control[aria-pressed=true] { background: var(--mint); border-color: var(--mint); color: #163d35; }
.blue-green-theme .root-control .root-marker { font-size: 10px; }
.blue-green-theme .root-control :is(.root-marker, span:last-child) { color: #d0e2c9; }
.blue-green-theme .root-control[aria-pressed=true] :is(.root-marker, span:last-child) { color: #315b41; }
.blue-green-theme .soil-label { font-size: 10px; color: #d5e5cf; letter-spacing: .075em; }
.blue-green-theme .explorer-foot { font-size: 12px; color: #d5e5dc; }
.blue-green-theme .explorer-foot button { font-size: 13px; color: #e3edf6; }
.blue-green-theme .practice-details { background: #f0f5f8; border-color: #d9e3e9; }
.blue-green-theme .practice-details.is-revealed { background: #e8f0fa; box-shadow: inset 0 3px 0 #749ee8; }
.blue-green-theme .back-to-tree { background: #fff; border-color: #b7cadf; color: var(--cobalt-dark); }
.blue-green-theme .back-to-tree:hover { background: #e0eafa; border-color: #7199d1; }

/* Practice Elf is the clearest blue moment, next to the green foundations. */
.blue-green-theme .ai-bridge { background: linear-gradient(120deg, #102d50, #163d62); }
.blue-green-theme .ai-bridge .ai-label { color: var(--sky); }
.blue-green-theme .ai-bridge .elf-introduction p { color: #d0deed; }
.blue-green-theme .ai-bridge .ai-link { background: var(--sky); color: var(--navy); }
.blue-green-theme .ai-bridge .ai-link:hover { background: #d6e9ff; }
.blue-green-theme .practice-map { --map-accent: #315e83; --map-tint: #edf3f8; color: #1b3047; border-color: #d4e0ef; }
.blue-green-theme .map-check { color: var(--evergreen); }
.blue-green-theme .work-item { border-color: #d4e0e6; }
.blue-green-theme .work-item:nth-child(2) .service-symbol { background: #eaf1ff; color: var(--cobalt); border-color: #bfd0f4; }
.blue-green-theme .work-item:nth-child(3) .service-symbol { background: #e7f3f3; color: #226773; border-color: #b7d7da; }
.blue-green-theme .work-item:focus-within { background: var(--navy); border-color: var(--navy); }
.blue-green-theme .work-item:focus-within :is(h3, p, a, li, .work-number > span:last-child) { color: #fff; }
.blue-green-theme .work-item:focus-within .service-symbol { color: #fff; background: #294d70; border-color: #779bbb; }
.blue-green-theme .foundations { background: var(--green-wash); }
.blue-green-theme .team-section { background: #f2f6fb; }
.blue-green-theme .question-card { border-color: #ceddea; background: #fbfcfe; }
.blue-green-theme .cta-section { background: #f0f5f8; border-color: var(--line); }
.blue-green-theme .cta-inner { background: linear-gradient(115deg, #102d50, #1c4a44); border-color: #335770; }
.blue-green-theme .cta-inner .eyebrow { color: var(--sky); }
.blue-green-theme .cta-actions { border-color: #9bc5d14d; }
.blue-green-theme .assistant-launch { background: var(--cobalt); }
.blue-green-theme .assistant-launch:hover { background: var(--cobalt-dark); }

/* Carry the palette through existing pages without changing their composition. */
.blue-green-theme.roots { background: #fff; }
.blue-green-theme.roots .lead { color: #576b7b; }
.blue-green-theme.polished-interior :is(.evolved-hero, .evolved-intro) {
  background: radial-gradient(ellipse at 100% 80%, #28645688, transparent 62%), #102d50;
}
.blue-green-theme.polished-interior :is(.evolved-hero, .evolved-intro) .lead { color: #dce7ef; }
.blue-green-theme.polished-interior :is(.evolved-hero, .evolved-intro) .eyebrow { color: var(--mint); }
.blue-green-theme.polished-interior .evolved-hero .actions .button { background: var(--mint); color: #163d35; }
.blue-green-theme.polished-interior .evolved-intro { border-bottom-color: #83b58e; }
.blue-green-theme.polished-interior .evolved-article-heading:before { background: linear-gradient(90deg, var(--cobalt) 50%, var(--evergreen) 50%); }
.blue-green-theme .elf-note { background: var(--navy); }
.blue-green-theme .elf-star { color: var(--sky); }
.blue-green-theme .elf-choices button { background: #fff; color: var(--ink); border-color: #b9cce1; }
.blue-green-theme .elf-choices button[aria-pressed=true] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.blue-green-theme .elf-choices button:hover { background: var(--blue-wash); color: var(--cobalt-dark); }
.blue-green-theme .elf-choices button[aria-pressed=true]:hover { background: var(--cobalt-dark); color: #fff; }

@media (hover:hover) and (pointer:fine) {
  .blue-green-theme .work-item:hover { background: var(--navy); border-color: var(--navy); }
  .blue-green-theme .work-item:hover :is(h3, p, a, li, .work-number > span:last-child) { color: #fff; }
  .blue-green-theme .work-item:hover .service-symbol { color: #fff; background: #294d70; border-color: #779bbb; }
  .blue-green-theme .question-card:hover { background: #eef4fc; border-color: #83a7d1; }
}

/* Keep the two hero phrases intact while the tree shares a tablet-width row. */
@media (min-width:701px) and (max-width:1150px) {
  .blue-green-theme:not(.roots) .hero h1 { font-size: clamp(34px, 4.8vw, 54px); }
}

@media (max-width:480px) {
  .blue-green-theme .site-header .logo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .blue-green-theme .site-header .pps { font-size: 32px; }
  .blue-green-theme .site-header .brand-endorsement { border-left: 0; padding-left: 0; font-size: 10px; }
}
@media (max-width:380px) {
  .blue-green-theme .branch-control { padding-inline: 8px; gap: 5px; }
  .blue-green-theme .explorer-foot { align-items: flex-start; gap: 6px; padding-top: 8px; }
  .blue-green-theme .explorer-foot > span { max-width: 145px; }
}

/* Keep the one-line affiliation compact when desktop navigation first appears. */
@media (min-width:901px) and (max-width:1100px) {
  .blue-green-theme .site-header .logo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .blue-green-theme .site-header .brand-endorsement { border-left: 0; padding-left: 0; }
}
@media (min-width:701px) and (max-width:900px) {
  .blue-green-theme .root-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width:361px) and (max-width:440px) {
  .blue-green-theme:not(.roots) .hero h1 { font-size: clamp(38px, 10.8vw, 46px); }
}