/* Review-only messaging hierarchy. Light inset demos retain their own ink. */

body.ha-message-hierarchy .tagline-lead {
  color:var(--ha-white);
}

/* Charcoal: supporting words recede; one takeaway in each heading comes forward. */
body.ha-message-hierarchy #what-we-do #in-title,
body.ha-message-hierarchy #insight #insight-title,
body.ha-message-hierarchy #discovery #disc-title,
body.ha-message-hierarchy #itops[data-phase] #it-title {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy #in-title .message-key,
body.ha-message-hierarchy #insight[data-phase] #insight-title span,
body.ha-message-hierarchy #disc-title span,
body.ha-message-hierarchy #itops[data-phase] #it-title span {
  color:var(--ha-white) !important;
}
body.ha-message-hierarchy #insight[data-phase] #insight-title + p,
body.ha-message-hierarchy #discovery .disc-in p[style*="max-width: 46ch"],
body.ha-message-hierarchy #itops[data-phase] > div > div:first-child p {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy #itops[data-phase] > div > div:first-child p b {
  color:var(--ha-white) !important;
}
body.ha-message-hierarchy #itops[data-phase] > div > div:first-child .ha-q-by,
body.ha-message-hierarchy #itops[data-phase] > div > div:first-child .ha-q-by :is(span,a),
body.ha-message-hierarchy #itops[data-phase] #it-title + div > div {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy :is(#insight,#discovery,#itops) > .review-detail-link a {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy section.m-only[data-phase="mine"] :is(h2,p,p span) {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy section.m-only[data-phase="mine"] :is(.mega,h2 span) {
  color:var(--ha-white) !important;
}

body.ha-message-hierarchy #your-amp #amp-title,
body.ha-message-hierarchy #your-amp #amp-title + p { color:var(--ha-vapour) !important; }
body.ha-message-hierarchy #your-amp #amp-title + p b,
body.ha-message-hierarchy section.m-only[aria-label="Your Amp"] h2 + p b {
  color:var(--ha-white);
}
body.ha-message-hierarchy #your-amp .mega { color:var(--ha-white) !important; }

/* Comparison and phase cards: retain enough contrast on their coloured fills. */
body.ha-message-hierarchy #what-we-do :is(.ps-p,.ps-s) :is(.ps-t,.ps-stat,.ps-stat span,.ps-src,.ps-src a),
body.ha-message-hierarchy #what-we-do .ph-c :is(.ph-s,li) {
  color:var(--ha-support-on-phase) !important;
}
body.ha-message-hierarchy #what-we-do :is(.ps-p,.ps-s) :is(.ps-message,.ps-stat b),
body.ha-message-hierarchy #what-we-do .ph-c :is(.ph-t,li b) {
  color:var(--ha-white) !important;
}
body.ha-message-hierarchy #what-we-do .ph-c3 :is(.ph-s,li) { color:var(--ha-ink-raised) !important; }
body.ha-message-hierarchy #what-we-do .ph-c3 :is(.ph-t,li b) { color:var(--ha-ink) !important; }

/* Photo: the neutral charcoal overlay supports the same vapor-grey hierarchy. */
body.ha-message-hierarchy #invent #inv-title,
body.ha-message-hierarchy #invent[data-phase] #inv-title + p {
  color:var(--ha-vapour) !important;
}
body.ha-message-hierarchy #invent #inv-title span { color:var(--ha-white) !important; }

/* Paper: use the same hierarchy with dark ink as the peak. */
body.ha-message-hierarchy :is(#team-title,#ws-title,#bm-title,#ontap-title),
body.ha-message-hierarchy #team .lt-lede,
body.ha-message-hierarchy #workshops[data-phase] .ws-lede,
body.ha-message-hierarchy #trk-build[data-phase] .ha-lede,
body.ha-message-hierarchy #ontap > div > p {
  color:var(--ha-support-on-paper) !important;
}
body.ha-message-hierarchy #team[data-phase] #team-title span:first-child,
body.ha-message-hierarchy #workshops #ws-title span,
body.ha-message-hierarchy #bm-title .message-key,
body.ha-message-hierarchy #ontap #ontap-title span {
  color:var(--ha-ink) !important;
}
body.ha-message-hierarchy #trk-build #bm-title span:not(.message-key) { color:var(--ha-support-on-paper) !important; }
body.ha-message-hierarchy #team[data-phase] #team-title span:nth-child(2) { color:var(--ha-lee) !important; }
body.ha-message-hierarchy #team[data-phase] #team-title span:nth-child(3) { color:var(--ha-dave) !important; }
body.ha-message-hierarchy #talk #talk-title + p { color:var(--ha-ink-raised) !important; }

/* Proof and meta: the quote leads; the source stays quiet and readable. */
body.ha-message-hierarchy #voices .rdb-text { color:var(--ha-white) !important; }
body.ha-message-hierarchy #voices .rdb-id strong { color:var(--ha-vapour) !important; }
body.ha-message-hierarchy #voices .rdb-id > span { color:var(--ha-meta-on-dark) !important; }
body.ha-message-hierarchy #itops[data-phase] > div > div:first-child .ha-q-by :is(span,a) { color:var(--ha-meta-on-dark) !important; }

/* Interface labels use the brand face; handwriting stays on sketches and notes. */
body.ha-message-hierarchy :is(.xr-h b,.id-tag,.inv-cap,.inv-sw-l,.lt-crew-l),
body.ha-message-hierarchy #trk-build [style*="font-family: Caveat"] {
  font-family:var(--ha-font-sans) !important;
}
body.ha-message-hierarchy .ipad .xr-h b {
  font-size:14px !important;
  line-height:1.2;
  letter-spacing:-.01em;
}
body.ha-message-hierarchy .id-tag {
  font-size:12px;
  font-weight:600 !important;
  line-height:1.2;
  letter-spacing:0;
}
body.ha-message-hierarchy .inv-cap {
  font-size:clamp(12px,calc(var(--f) * .75),16px);
  font-weight:600;
  line-height:1.2;
  transform:none;
}
body.ha-message-hierarchy .inv-sw-l {
  font-size:clamp(12px,calc(var(--f) * .65),14px);
  font-weight:600;
  line-height:1.2;
}
body.ha-message-hierarchy .lt-crew-l { letter-spacing:0; }
body.ha-message-hierarchy #trk-build [style*="font-family: Caveat"] {
  font-weight:600;
  letter-spacing:-.01em;
}
@media (max-width:760px) {
  body.ha-message-hierarchy .inv-cap {
    top:3cqw;
    right:auto;
    bottom:auto;
    left:3cqw;
  }
}